stripe working

Author: TeisNP

.vscode/settings.json

@@ -3,5 +3,8 @@
     {
       "mode": "auto"
     }
-  ]
+  ],
+  "files.watcherExclude": {
+    "**/target": true
+  }
 }

apps/dashboard/src/api/endpoints/teams/index.ts

@@ -166,6 +166,18 @@ export async function postCreateCheckoutSession(
   }
 }
 
+export interface IPostCustomerPortalResponse {
+  url: string;
+}
+
+export async function postCustomerPortal(
+  teamId: string | number,
+): Promise<IPostCustomerPortalResponse> {
+  const response = await client.post<IPostCustomerPortalResponse>(`/v1/teams/${teamId}/customer-portal`);
+
+  return response.data;
+}
+
 export interface IGetCustomerSessionResponse {
   sessionId: string;
 }

apps/dashboard/src/hooks/team.query.ts

@@ -109,12 +109,23 @@ export const usePostCreateCheckoutSession = (
   );
 };
 
+export const usePostCustomerPortal = (
+) => {
+  const currentTeamId = useAuthenticationStore((state) => state.currentTeamId);
+  return useQuery([], () => {
+      if (!currentTeamId) {
+        return Promise.resolve(null);
+      }
+      return TeamsAPI.postCustomerPortal(currentTeamId);
+    });
+};
+
+
 
 export const useGetCustomerSession = (
 ) => {
   const currentTeamId = useAuthenticationStore((state) => state.currentTeamId);
-  return useMutation(
-    () => {
+  return useQuery([], () => {
       if (!currentTeamId) {
         return Promise.resolve(null);
       }

apps/dashboard/src/pages/Dashboard/Team/tabs/Subscription.tsx

@@ -1,10 +1,30 @@
 import { FunctionComponent, useState } from "react";
 import Placeholder from "../../../../components/Placeholder";
 import {
+  Box,
+  Button,
   Card,
   CardContent,
+  CardHeader,
+  Divider,
+  Grid,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+  useTheme,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
 } from "@mui/material";
-import { useCurrentTeam, useGetCustomerSession } from "../../../../hooks/team.query";
+import { BsCheckLg } from "react-icons/bs";
+import {
+  useCurrentTeam,
+  usePostCustomerPortal,
+  useGetCustomerSession,
+} from "../../../../hooks/team.query";
 import * as TeamsAPI from "../../../../api/endpoints/teams";
 
 declare global {
@@ -20,30 +40,46 @@ declare global {
 
 const TeamPlanTabView: FunctionComponent = () => {
   const { data: team, isLoading: isLoadingTeam } = useCurrentTeam();
-  const { data: teamSubscription, isLoading: isLoadingSubscription } = useGetCustomerSession();
-
-  console.log(teamSubscription?.sessionId)
-
+  const { data: customerPortal, isLoading: isLoadingPortal } =
+    usePostCustomerPortal();
+  // const { data: teamSubscription, isLoading: isLoadingSubscription } =
+  //   useGetCustomerSession();
 
   return (
     <>
-      <Card>
-        <CardContent>
-        {(isLoadingTeam || isLoadingSubscription) ? (
-            <Placeholder />
-          ) : (
+    {isLoadingTeam ? (
+      <Placeholder />
+    ) : (
+      <>
+      {team?.paymentPlan ? (
+        <Card>
+          <CardHeader title="Current Subscription" />
+          <CardContent>
+            <Typography variant="h6">{team?.paymentPlan}</Typography>
+            <div>
+            <a href={customerPortal?.url}>
+        <button>Manage Subscriptions here </button>
+      </a>
+            </div>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardHeader title="Choose a Subscription"/>
+          <CardContent>
           <stripe-pricing-table
-            pricing-table-id="prctbl_1PzENqAAd26uMXu2gnpkNNGV"
-            publishable-key="pk_test_51NjhPuAAd26uMXu2mDsC5CrJzCokmFCMDEiyZFGanTQAy2exlztxyuLDpg2TXC26LK8j9wqnACLAAwEyWS0AJ4r500U1rDn672"
-            client-reference-id={team?.id}
-            customer-session-client-secret={teamSubscription?.sessionId}
-            
-          ></stripe-pricing-table>
-          )}
-        </CardContent>
-      </Card>
+              pricing-table-id="prctbl_1PzENqAAd26uMXu2gnpkNNGV"
+              publishable-key="pk_test_51NjhPuAAd26uMXu2mDsC5CrJzCokmFCMDEiyZFGanTQAy2exlztxyuLDpg2TXC26LK8j9wqnACLAAwEyWS0AJ4r500U1rDn672"
+              client-reference-id={team?.id}
+              // customer-session-client-secret={teamSubscription?.sessionId}
+            ></stripe-pricing-table>
+          </CardContent>
+        </Card>
+      )}
+      </>
+    )}
     </>
   );
 };
 
-export default TeamPlanTabView;
+export default TeamPlanTabView;

apps/dashboard/vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   server: {
     proxy: {
       "/v1": {
-        target: "http://localhost:8005",
+        target: "http://localhost:8001",
         // target: "https://api.opsway.io",
         changeOrigin: true,
       },