feat: wip billing page

packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx

@@ -4,25 +4,42 @@ import { Box, Group, Stack } from '@/components';
 import { Button, Card, Intent, Text } from '@blueprintjs/core';
 import withAlertActions from '../Alert/withAlertActions';
 import styles from './BillingSubscription.module.scss';
+import withDrawerActions from '../Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
+import { useBillingPageBoot } from './BillingPageBoot';
 
-function SubscriptionRoot({ openAlert }) {
+function SubscriptionRoot({ openAlert, openDrawer }) {
+  const { mainSubscription } = useBillingPageBoot();
+
+  // Can't continue if the main subscription is not loaded.
+  if (!mainSubscription) {
+    return null;
+  }
   const handleCancelSubBtnClick = () => {
     openAlert('cancel-main-subscription');
   };
   const handleResumeSubBtnClick = () => {
     openAlert('resume-main-subscription');
   };
-  const handleUpdatePaymentMethod = () => {};
-
-  const handleUpgradeBtnClick = () => {};
+  const handleUpdatePaymentMethod = () => {
+    window.LemonSqueezy.Url.Open(
+      mainSubscription.lemonUrls?.updatePaymentMethod,
+    );
+  };
+  // Handle upgrade button click.
+  const handleUpgradeBtnClick = () => {
+    openDrawer(DRAWERS.CHANGE_SUBSCARIPTION_PLAN);
+  };
 
   return (
     <Card className={styles.root}>
-      <Stack spacing={8}>
-        <h1 className={styles.title}>Capital Essential</h1>
+      <Stack spacing={6}>
+        <h1 className={styles.title}>{mainSubscription.planName}</h1>
 
         <Group spacing={0} className={styles.period}>
-          <Text className={styles.periodStatus}>Trial</Text>
+          <Text className={styles.periodStatus}>
+            {mainSubscription.statusFormatted}
+          </Text>
           <Text className={styles.periodText}>Trial ends in 10 days.</Text>
         </Group>
       </Stack>
@@ -43,15 +60,29 @@ function SubscriptionRoot({ openAlert }) {
         >
           Upgrade the Plan
         </Button>
-        <Button
-          minimal
-          small
-          inline
-          intent={Intent.PRIMARY}
-          onClick={handleCancelSubBtnClick}
-        >
-          Cancel Subscription
-        </Button>
+
+        {mainSubscription.canceled && (
+          <Button
+            minimal
+            small
+            inline
+            intent={Intent.PRIMARY}
+            onClick={handleResumeSubBtnClick}
+          >
+            Resume Subscription
+          </Button>
+        )}
+        {!mainSubscription.canceled && (
+          <Button
+            minimal
+            small
+            inline
+            intent={Intent.PRIMARY}
+            onClick={handleCancelSubBtnClick}
+          >
+            Cancel Subscription
+          </Button>
+        )}
         <Button
           minimal
           small
@@ -65,22 +96,38 @@ function SubscriptionRoot({ openAlert }) {
 
       <Group position={'apart'} style={{ marginTop: 'auto' }}>
         <Group spacing={4}>
-          <Text className={styles.priceAmount}>$10</Text>
-          <Text className={styles.pricePeriod}>/ mo</Text>
+          <Text className={styles.priceAmount}>
+            {mainSubscription.planPriceFormatted}
+          </Text>
+
+          {mainSubscription.planPeriod && (
+            <Text className={styles.pricePeriod}>
+              {mainSubscription.planPeriod === 'month'
+                ? 'mo'
+                : mainSubscription.planPeriod === 'year'
+                ? 'yearly'
+                : ''}
+            </Text>
+          )}
         </Group>
 
         <Box>
-          <Button
-            intent={Intent.PRIMARY}
-            onClick={handleResumeSubBtnClick}
-            className={styles.subscribeButton}
-          >
-            Resume Subscription
-          </Button>
+          {mainSubscription.canceled && (
+            <Button
+              intent={Intent.PRIMARY}
+              onClick={handleResumeSubBtnClick}
+              className={styles.subscribeButton}
+            >
+              Resume Subscription
+            </Button>
+          )}
         </Box>
       </Group>
     </Card>
   );
 }
 
-export const Subscription = R.compose(withAlertActions)(SubscriptionRoot);
+export const Subscription = R.compose(
+  withAlertActions,
+  withDrawerActions,
+)(SubscriptionRoot);