Merge pull request #1 from opsway-io/stripe

TeisNP · web-flow · commit d31473d4e534 · 2025-05-16T08:45:00.000+02:00
stripe
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,5 +3,8 @@
     {
       "mode": "auto"
     }
-  ]
+  ],
+  "files.watcherExclude": {
+    "**/target": true
+  }
 }
diff --git a/apps/dashboard/index.html b/apps/dashboard/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
     <title>opsway.io</title>
 
     <meta name="title" content="opsway.io" />
diff --git a/apps/dashboard/src/api/endpoints/teams/index.ts b/apps/dashboard/src/api/endpoints/teams/index.ts
@@ -165,3 +165,45 @@ export async function postCreateCheckoutSession(
     window.location.href = body;
   }
 }
+
+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 IGetProductsResponse {
+  products: {
+    id: string;
+    name: string;
+    price: number;
+    currency: string;
+    marketing_features: string[];
+  }[];
+}
+
+export async function getProducts(
+  teamId: string | number,
+): Promise<IGetProductsResponse> {
+  const response = await client.get<IGetProductsResponse>(`/v1/teams/${teamId}/products`);
+
+  return response.data;
+}
+
+export interface IGetCustomerSessionResponse {
+  sessionId: string;
+}
+
+export async function getCustomerSession(
+  teamId: string | number,
+): Promise<IGetCustomerSessionResponse> {
+  const response = await client.get<IGetCustomerSessionResponse>(`/v1/teams/${teamId}/customer-session`);
+
+  return response.data;
+}
diff --git a/apps/dashboard/src/hooks/team.query.ts b/apps/dashboard/src/hooks/team.query.ts
@@ -108,3 +108,40 @@ 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 useGetProducts = (
+) => {
+  const currentTeamId = useAuthenticationStore((state) => state.currentTeamId);
+  return useQuery(["products"], () => {
+    if (!currentTeamId) {
+        return Promise.resolve(null);
+      }
+      return TeamsAPI.getProducts(currentTeamId);
+    });
+};
+
+
+export const useGetCustomerSession = (
+) => {
+  const currentTeamId = useAuthenticationStore((state) => state.currentTeamId);
+  return useQuery([], () => {
+      if (!currentTeamId) {
+        return Promise.resolve(null);
+      }
+      return TeamsAPI.getCustomerSession(currentTeamId);
+    }
+     
+  );
+};
diff --git a/apps/dashboard/src/pages/Dashboard/Monitors/Detail/index.tsx b/apps/dashboard/src/pages/Dashboard/Monitors/Detail/index.tsx
@@ -175,12 +175,15 @@ const MonitorDetailView: FunctionComponent = () => {
               sx={{
                 maxHeight: 32,
               }}
-              onChange={(_, value) => setTimeInterval(value)}
+              onChange={(_, value) => {
+                if (value != null) {
+                setTimeInterval(value)
+              }}}
             >
               <ToggleButton value={86400000}>Day</ToggleButton>
               <ToggleButton value={604800000}>Week</ToggleButton>
               <ToggleButton value={18144000000}>Month</ToggleButton>
-              <ToggleButton value={18144000000}>Custom</ToggleButton>
+              <ToggleButton value={217728000000}>Year</ToggleButton>
             </ToggleButtonGroup>
           </Stack>
         </Stack>
diff --git a/apps/dashboard/src/pages/Dashboard/Team/tabs/Subscription.tsx b/apps/dashboard/src/pages/Dashboard/Team/tabs/Subscription.tsx
@@ -14,85 +14,94 @@ import {
   ListItemText,
   Typography,
   useTheme,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
 } from "@mui/material";
 import { BsCheckLg } from "react-icons/bs";
-import { useCurrentTeam } from "../../../../hooks/team.query";
-import * as TeamsAPI from "../../../../api/endpoints/teams";
+import {
+  useCurrentTeam,
+  usePostCustomerPortal,
+  useGetProducts,
+} from "../../../../hooks/team.query";
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "stripe-pricing-table": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >;
+    }
+  }
+}
 
 const TeamPlanTabView: FunctionComponent = () => {
   const { data: team, isLoading: isLoadingTeam } = useCurrentTeam();
+  const { data: customerPortal, isLoading: isLoadingPortal } =
+    usePostCustomerPortal();
+    const { data: products, isLoading: isLoadingProduct } =
+    useGetProducts();
 
   return (
     <>
-      <Card>
+    {isLoadingTeam ? (
+      <Placeholder />
+    ) : (
+      <>
+      {team?.paymentPlan ? (
+        <Card>
         <CardContent>
-          {isLoadingTeam ? (
+          {isLoadingProduct ? (
             <Placeholder />
           ) : (
             <Grid container spacing={2} justifyContent="center">
+              {products?.products.map((product) => (
               <Grid item>
                 <PricingCard
-                  title="Free"
+                  key={product.id}
+                  title={product.name}
                   description="For small teams"
-                  price="0£"
-                  features={[
-                    "Up to 10 users",
-                    "Up to 5 monitors",
-                    "Up to 5 status pages",
-                    "1 month of history",
-                  ]}
-                  selected={team?.paymentPlan === "FREE"}
-                  teamId={team?.id!}
-                  priceLookupKey={"FREE"}
-                />
-              </Grid>
-              <Grid item>
-                <PricingCard
-                  title="Team"
-                  description="For medium teams"
-                  price="20£"
-                  features={[
-                    "Up to 25 users",
-                    "Up to 25 monitors",
-                    "Up to 10 status pages",
-                    "Up to 5 on-call schedules",
-                    "1 year of history",
-                  ]}
-                  selected={team?.paymentPlan === "TEAM"}
-                  teamId={team?.id!}
-                  priceLookupKey={"TEAM"}
-                />
-              </Grid>
-              <Grid item>
-                <PricingCard
-                  title="Enterprise"
-                  description="For large teams"
-                  price="100£"
-                  features={[
-                    "Unlimited users",
-                    "Unlimited monitors",
-                    "Unlimited status pages",
-                    "Unlimited On-call schedules",
-                    "1 year of history",
-                    "Priority support",
-                  ]}
-                  selected={team?.paymentPlan === "ENTERPRISE"}
-                  teamId={team?.id!}
-                  priceLookupKey={"ENTERPRISE"}
-                />
+                  price={product.currency + " " + product.price.toString()} 
+                  features={product.marketing_features ? product.marketing_features : []}
+                  selected={team?.paymentPlan.toLocaleLowerCase() === product.name.toLocaleLowerCase()}
+                  />
               </Grid>
+                ))}
             </Grid>
           )}
         </CardContent>
+        <Button
+            variant="contained"
+            color="success"
+            fullWidth
+            sx={{
+              marginTop: "auto",
+            }}
+            component="a"
+            href={customerPortal?.url}
+          >
+            Manage Subscriptions
+          </Button>
       </Card>
+      ) : (
+        <Card>
+          <CardHeader align="center" 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>
+      )}
+      </>
+    )}
+      
     </>
   );
 };
 
+
 export default TeamPlanTabView;
 
 interface PricingCardProps {
@@ -101,8 +110,6 @@ interface PricingCardProps {
   price: string;
   features: string[];
   selected: boolean;
-  teamId: number;
-  priceLookupKey: string;
 }
 
 const PricingCard: FunctionComponent<PricingCardProps> = ({
@@ -111,24 +118,8 @@ const PricingCard: FunctionComponent<PricingCardProps> = ({
   price,
   features,
   selected,
-  teamId,
-  priceLookupKey,
 }) => {
   const theme = useTheme();
-  const [open, setOpen] = useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const onSubscribe = () => {
-    TeamsAPI.postCreateCheckoutSession(teamId, priceLookupKey)
-    handleClose();
-  };
 
   return (
     <Card
@@ -140,14 +131,15 @@ const PricingCard: FunctionComponent<PricingCardProps> = ({
         flexDirection: "column",
         border: "none",
       }}
+      variant={selected ? "outlined" : "elevation"}
     >
       <Box
         sx={{
           padding: 2,
         }}
       >
         <Typography variant="h4" color="text.primary">
-          {title}
+          {selected ?  title + " (Current Plan)" : title}
         </Typography>
 
         <Typography variant="body1" color="text.secondary">
@@ -202,53 +194,7 @@ const PricingCard: FunctionComponent<PricingCardProps> = ({
             </ListItem>
           ))}
         </List>
-
-        {selected ? (
-          <Button
-            disabled
-            variant="contained"
-            color="success"
-            fullWidth
-            sx={{
-              marginTop: "auto",
-            }}
-            component="a"
-          >
-            Selected
-          </Button>
-        ) : (
-          <Button
-            variant="contained"
-            color="success"
-            fullWidth
-            sx={{
-              marginTop: "auto",
-            }}
-            component="a"
-            onClick={handleClickOpen}
-          >
-            Select
-          </Button>
-        )}
-        <Dialog
-          open={open}
-          onClose={handleClose}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-        >
-          <DialogContent>
-            <DialogContentText id="alert-dialog-description">
-              This Action will change your subscription plan to {priceLookupKey}
-            </DialogContentText>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={handleClose}>CLOSE</Button>
-            <Button onClick={onSubscribe} autoFocus>
-              CHANGE PLAN
-            </Button>
-          </DialogActions>
-        </Dialog>
       </CardContent>
     </Card>
   );
-};
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,8 @@`
`3`	`3`	`{`
`4`	`4`	`"mode": "auto"`
`5`	`5`	`}`
`6`		`- ]`
	`6`	`+ ],`
	`7`	`+ "files.watcherExclude": {`
	`8`	`+ "**/target": true`
	`9`	`+ }`
`7`	`10`	`}`