feat: make payment plans dynamic

packages/types/index.d.ts

@@ -321,6 +321,13 @@ export type IGlobalVariable = {
   setActionItem?: (actionItem: IActionItem) => void;
 };
 
+export type TPaymentPlan = {
+  price: string;
+  name: string;
+  limit: string;
+  productId: string;
+}
+
 declare module 'axios' {
   interface AxiosResponse {
     httpError?: IJSONObject;
@@ -335,4 +342,3 @@ export interface IRequest extends Request {
   rawBody?: Buffer;
   currentUser?: IUser;
 }
-

packages/web/src/components/UpgradeFreeTrial/index.ee.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
@@ -16,17 +15,17 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import LockIcon from '@mui/icons-material/Lock';
 
-const plans = [
-  { tasks: '10,000', price: '€20' },
-  { tasks: '30,000', price: '€50' },
-];
+import usePaymentPlans from 'hooks/usePaymentPlans.ee';
 
 export default function UpgradeFreeTrial() {
+  const { plans, loading } = usePaymentPlans();
   const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const selectedPlan = plans[selectedIndex];
+  const selectedPlan = plans?.[selectedIndex];
 
   const updateSelection = (index: number) => setSelectedIndex(index);
 
+  if (loading || !plans.length) return null;
+
   return (
     <React.Fragment>
       <Card sx={{ mb: 3, p: 2 }}>
@@ -74,9 +73,9 @@ export default function UpgradeFreeTrial() {
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {plans.map((row, index) => (
+                  {plans.map((plan, index) => (
                     <TableRow
-                      key={row.tasks}
+                      key={plan.productId}
                       onClick={() => updateSelection(index)}
                       sx={{
                         '&:hover': { cursor: 'pointer' },
@@ -91,7 +90,7 @@ export default function UpgradeFreeTrial() {
                             fontWeight: selectedIndex === index ? 'bold' : 'normal',
                           }}
                         >
-                          {row.tasks}
+                          {plan.limit}
                         </Typography>
                       </TableCell>
                       <TableCell align="right" sx={{ py: 2 }}>
@@ -101,7 +100,7 @@ export default function UpgradeFreeTrial() {
                             fontWeight: selectedIndex === index ? 'bold' : 'normal',
                           }}
                         >
-                          {row.price} / month
+                          {plan.price} / month
                         </Typography>
                       </TableCell>
                     </TableRow>

packages/web/src/graphql/queries/get-payment-plans.ee.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+export const GET_PAYMENT_PLANS = gql`
+  query GetPaymentPlans {
+    getPaymentPlans {
+      name
+      limit
+      price
+      productId
+    }
+  }
+`;

packages/web/src/hooks/usePaymentPlans.ee.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@apollo/client';
+
+import { TPaymentPlan } from '@automatisch/types';
+import { GET_PAYMENT_PLANS } from 'graphql/queries/get-payment-plans.ee';
+
+type UsePaymentPlansReturn = {
+  plans: TPaymentPlan[];
+  loading: boolean;
+};
+
+export default function usePaymentPlans(): UsePaymentPlansReturn {
+  const { data, loading } = useQuery(GET_PAYMENT_PLANS);
+
+  return {
+    plans: data?.getPaymentPlans || [],
+    loading
+  };
+}