feat: Removed PlansModal and consolidated logic into PlanPricingTable

Author: thisismayuresh

apps/web/components/UpgradePlan/Plans/PlanCard.tsx

@@ -10,9 +10,6 @@ import { useSubOSIntegration } from '@hooks/useSubOSIntegration';
 interface PlanCardProps {
   plan: Plan;
   isYearly: boolean;
-  activePlanCode: string;
-  email: string;
-  projectId?: string;
 }
 
 type BillingCycle = 'monthly' | 'yearly';
@@ -40,9 +37,10 @@ const mapToSubOSPlan = (plan: Plan, cycle: BillingCycle): any => {
   };
 };
 
-export function PlanCard({ plan, isYearly, activePlanCode }: PlanCardProps) {
+export function PlanCard({ plan, isYearly }: PlanCardProps) {
   const { classes } = useStyles();
-  const { selectPlan } = useSubOSIntegration();
+  const { selectPlan, subscription } = useSubOSIntegration();
+  console.log(subscription);
 
   return (
     <Card
@@ -67,9 +65,9 @@ export function PlanCard({ plan, isYearly, activePlanCode }: PlanCardProps) {
           className={classes.button}
           fullWidth
           onClick={() => selectPlan(mapToSubOSPlan(plan, planBillingCycle))}
-          disabled={plan.code === PLANCODEENUM.STARTER || activePlanCode === plan.code}
+          disabled={plan.code === PLANCODEENUM.STARTER || subscription?.plan.code === plan.code}
         >
-          {activePlanCode === plan.code ? 'Active Plan' : 'Choose Plan'}
+          {subscription?.plan.code === plan.code ? 'Active Plan' : 'Choose Plan'}
         </Button>
         <Divider />
       </Stack>

apps/web/components/UpgradePlan/Plans/Plans.tsx

@@ -28,15 +28,7 @@ export interface Plan {
   content: PlanContent;
 }
 
-interface PlansProps {
-  activePlanCode: string;
-  email: string;
-  projectId?: string;
-  canceledOn?: string;
-  expiryDate?: string;
-}
-
-export function Plans({ activePlanCode, email, projectId }: PlansProps) {
+export function Plans() {
   const [showYearly, setShowYearly] = useState(true);
 
   return (
@@ -61,14 +53,7 @@ export function Plans({ activePlanCode, email, projectId }: PlansProps) {
       <Divider />
       <Group grow align="flex-start">
         {plans[showYearly ? 'yearly' : 'monthly'].map((plan) => (
-          <PlanCard
-            key={plan.code}
-            plan={plan}
-            isYearly={showYearly}
-            activePlanCode={activePlanCode}
-            email={email}
-            projectId={projectId}
-          />
+          <PlanCard key={plan.code} plan={plan} isYearly={showYearly} />
         ))}
       </Group>
     </Stack>

apps/web/components/UpgradePlan/Plans/PlansModal.tsx

@@ -1,15 +1,27 @@
-import { Flex } from '@mantine/core';
-import { PlansModal } from './PlansModal';
+import { Flex, Title, Text } from '@mantine/core';
+import { Plans } from './Plans';
 
 interface PlanPricingTableProps {
   userProfile: IProfileData;
-  activePlanCode: string;
 }
 
-export function PlanPricingTable({ userProfile, activePlanCode }: PlanPricingTableProps) {
+export function PlanPricingTable({ userProfile }: PlanPricingTableProps) {
+  if (!userProfile) {
+    return (
+      <Flex direction="column" align="center" justify="center" style={{ flexGrow: 1 }}>
+        <Text>Loading profile information...</Text>
+      </Flex>
+    );
+  }
+
   return (
-    <Flex key={userProfile?.email}>
-      <PlansModal userProfile={userProfile} activePlanCode={activePlanCode} />
+    <Flex direction="column" align="center" justify="flex-start">
+      <Title order={2} align="center" mb="md">
+        Choose the plan that works best for you
+      </Title>
+      <Flex direction="column" align="center" justify="center" style={{ flexGrow: 1 }}>
+        <Plans />
+      </Flex>
     </Flex>
   );
 }

apps/web/components/UpgradePlan/Plans/PlansPricingTable.tsx

@@ -7,12 +7,10 @@ import { AppLayout } from '@layouts/AppLayout';
 import { PlanDetails } from '@components/home/PlanDetails';
 import { PlanPricingTable } from '@components/UpgradePlan/Plans/PlansPricingTable';
 import { useAppState } from 'store/app.context';
-import { useSubOSIntegration } from '@hooks/useSubOSIntegration';
 const { publicRuntimeConfig } = getConfig();
 
 export default function Home() {
   const { profileInfo } = useAppState();
-  const { subscription } = useSubOSIntegration();
 
   return (
     <>
@@ -28,7 +26,7 @@ export default function Home() {
       <Stack>
         <Title order={2}>Home</Title>
         {publicRuntimeConfig.NEXT_PUBLIC_PAYMENT_GATEWAY_URL && <PlanDetails />}
-        <PlanPricingTable userProfile={profileInfo!} activePlanCode={subscription?.plan.code} />
+        <PlanPricingTable userProfile={profileInfo!} />
       </Stack>
     </>
   );