feat: Added linking with explore plan in validators

implerhq · Sep 19, 2024 · dbd42fe · dbd42fe
1 parent dd2cf91
commit dbd42fe
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/apps/web/components/home/PlanDetails/PlanDetails.tsx b/apps/web/components/home/PlanDetails/PlanDetails.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
-import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { modals } from '@mantine/modals';
+import { useCallback, useEffect } from 'react';
 import { Title, Text, Flex, Button, Skeleton, Stack } from '@mantine/core';
 
 import { useApp } from '@hooks/useApp';
@@ -17,13 +17,14 @@ export function PlanDetails() {
   const router = useRouter();
 
   const { profile } = useApp();
-  const { [CONSTANTS.PLAN_CODE_QUERY_KEY]: selectedPlan } = router.query;
+  const { [CONSTANTS.PLAN_CODE_QUERY_KEY]: selectedPlan, [CONSTANTS.EXPLORE_PLANS_QUERY_LEY]: explorePlans } =
+    router.query;
 
   const { activePlanDetails, isActivePlanLoading } = usePlanDetails({
     email: profile?.email ?? '',
   });
 
-  const onChoosePlanClick = () => {
+  const showPlans = useCallback(() => {
     track({
       name: 'VIEW PLANS',
       properties: {},
@@ -42,7 +43,7 @@ export function PlanDetails() {
       size: '2xl',
       withCloseButton: true,
     });
-  };
+  }, [activePlanDetails, profile]);
 
   useEffect(() => {
     if (selectedPlan && profile) {
@@ -54,8 +55,10 @@ export function PlanDetails() {
         children: <SelectCardModal planCode={selectedPlan as string} email={profile.email} onClose={modals.closeAll} />,
       });
       router.push(ROUTES.HOME, {}, { shallow: true });
+    } else if (explorePlans) {
+      showPlans();
     }
-  }, [profile, selectedPlan, router]);
+  }, [profile, selectedPlan, router, explorePlans, showPlans]);
 
   if (isActivePlanLoading) return <Skeleton width="100%" height="200" />;
 
@@ -77,7 +80,7 @@ export function PlanDetails() {
           </Text>
           .
         </Text>
-        <Button onClick={onChoosePlanClick} color={'red'}>
+        <Button onClick={showPlans} color={'red'}>
           Choose Plan
         </Button>
       </Stack>
@@ -154,7 +157,7 @@ export function PlanDetails() {
         </Flex>
         <Flex direction="column" gap={5} align="center">
           <Button
-            onClick={onChoosePlanClick}
+            onClick={showPlans}
             color={isLessThanZero || activePlanDetails.usage.IMPORTED_ROWS > numberOfRecords ? 'red' : 'blue'}
           >
             Choose Plan

diff --git a/apps/web/config/constants.config.ts b/apps/web/config/constants.config.ts
@@ -1,4 +1,5 @@
 export const CONSTANTS = {
+  EXPLORE_PLANS_QUERY_LEY: 'explore_plans',
   PLAN_CODE_QUERY_KEY: 'plan_code',
   GITHUB_LOGIN_URL: '/v1/auth/github',
   AUTH_COOKIE_NAME: 'authentication',
@@ -169,6 +170,7 @@ export const ROUTES = {
   SETTINGS: '/settings',
   ACTIVITIES: '/activities',
   ADD_CARD: '/settings?tab=addcard&action=addcardmodal',
+  EXPLORE_PLANS: '/?explore_plans=true',
 };
 
 export const REGULAR_EXPRESSIONS = {

diff --git a/apps/web/design-system/validator/Validator.tsx b/apps/web/design-system/validator/Validator.tsx
@@ -7,6 +7,7 @@ import { Flex, MantineSize, Stack } from '@mantine/core';
 import { Checkbox } from '@ui/checkbox';
 import { AutoHeightComponent } from '@ui/auto-height-component';
 
+import { ROUTES } from '@config';
 import { Badge } from '@ui/badge';
 import { Button } from '@ui/button';
 import { LockIcon } from '@assets/icons/Lock.icon';
@@ -98,7 +99,7 @@ export function Validator({
       </Stack>
 
       {unavailable ? (
-        <Button component={Link} size="xs" href="/#plans" onClick={() => modals.closeAll()}>
+        <Button component={Link} size="xs" href={ROUTES.EXPLORE_PLANS} onClick={modals.closeAll}>
           Explore Options
         </Button>
       ) : null}