feat(sdk): add downgrade banner to plan list page (#507)

* chore: move upcoming billing cycle as common component * fix: upcoming invoice without plan name * feat: add change plan banner in billing list
raystack · Feb 26, 2024 · 6a6139a · 6a6139a
1 parent 96d811f
commit 6a6139a
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 16 deletions.
diff --git a/...ts/organization/billing/change-banner.tsx → ...mon/upcoming-plan-change-banner/index.tsx b/...ts/organization/billing/change-banner.tsx → ...mon/upcoming-plan-change-banner/index.tsx
@@ -2,7 +2,7 @@ import { Flex, Text } from '@raystack/apsara';
 import Skeleton from 'react-loading-skeleton';
 import { DEFAULT_DATE_FORMAT } from '~/react/utils/constants';
 import { V1Beta1Plan, V1Beta1Subscription } from '~/src';
-import billingStyles from './billing.module.css';
+import styles from './styles.module.css';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import dayjs from 'dayjs';
 import { useCallback, useEffect, useState } from 'react';
@@ -14,7 +14,10 @@ interface ChangeBannerProps {
   subscription?: V1Beta1Subscription;
 }
 
-export function ChangeBanner({ isLoading, subscription }: ChangeBannerProps) {
+export function UpcomingPlanChangeBanner({
+  isLoading,
+  subscription
+}: ChangeBannerProps) {
   const { client, config, activePlan } = useFrontier();
   const [upcomingPlan, setUpcomingPlan] = useState<V1Beta1Plan>();
   const [isPlanLoading, setIsPlanLoading] = useState(false);
@@ -66,9 +69,9 @@ export function ChangeBanner({ isLoading, subscription }: ChangeBannerProps) {
   return showLoader ? (
     <Skeleton />
   ) : nextPhase ? (
-    <Flex className={billingStyles.changeBannerBox} justify={'between'}>
-      <Flex gap="small" className={billingStyles.flex1}>
-        <InfoCircledIcon className={billingStyles.currentPlanInfoText} />
+    <Flex className={styles.changeBannerBox} justify={'between'}>
+      <Flex gap="small" className={styles.flex1}>
+        <InfoCircledIcon className={styles.currentPlanInfoText} />
         <Text>
           Your {activePlan?.title} will be{' '}
           {planAction?.btnDoneLabel.toLowerCase()} to {upcomingPlan?.title} from{' '}

diff --git a/sdks/js/packages/core/react/components/common/upcoming-plan-change-banner/styles.module.css b/sdks/js/packages/core/react/components/common/upcoming-plan-change-banner/styles.module.css
@@ -0,0 +1,16 @@
+.changeBannerBox {
+  padding: var(--pd-8);
+  border-radius: var(--br-4);
+  box-shadow: var(--shadow-xs);
+  border: 0.5px solid var(--border-accent);
+  background: var(--background-accent);
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.currentPlanInfoText {
+  color: var(--foreground-base);
+  font-weight: 400;
+}
diff --git a/sdks/js/packages/core/react/components/organization/billing/index.tsx b/sdks/js/packages/core/react/components/organization/billing/index.tsx
@@ -17,7 +17,7 @@ import Invoices from './invoices';
 
 import { UpcomingBillingCycle } from './upcoming-billing-cycle';
 import { PaymentIssue } from './payment-issue';
-import { ChangeBanner } from './change-banner';
+import { UpcomingPlanChangeBanner } from '../../common/upcoming-plan-change-banner';
 
 interface BillingHeaderProps {
   billingSupportEmail?: string;
@@ -122,7 +122,7 @@ const PaymentMethod = ({
     <div className={billingStyles.detailsBox}>
       <Flex align={'center'} justify={'between'} style={{ width: '100%' }}>
         <Text className={billingStyles.detailsBoxHeading}>Payment method</Text>
-        <Button variant={'secondary'}>Add method</Button>
+        {/* <Button variant={'secondary'}>Add method</Button> */}
       </Flex>
       <Flex direction={'column'} gap={'extra-small'}>
         <Text className={billingStyles.detailsBoxRowLabel}>Card Number</Text>
@@ -238,7 +238,7 @@ export default function Billing() {
             invoices={invoices}
           />
 
-          <ChangeBanner
+          <UpcomingPlanChangeBanner
             isLoading={isLoading}
             subscription={activeSubscription}
           />

diff --git a/sdks/js/packages/core/react/components/organization/billing/upcoming-billing-cycle.tsx b/sdks/js/packages/core/react/components/organization/billing/upcoming-billing-cycle.tsx
@@ -171,7 +171,7 @@ export const UpcomingBillingCycle = () => {
 
   return isLoading ? (
     <Skeleton />
-  ) : upcomingInvoice ? (
+  ) : upcomingInvoice && upcomingInvoice?.due_date ? (
     <Flex
       align={'center'}
       justify={'between'}
@@ -180,12 +180,10 @@ export const UpcomingBillingCycle = () => {
     >
       <LabeledBillingData label="Plan" value={planName} />
       <Flex gap="medium">
-        {upcomingInvoice?.due_date ? (
-          <LabeledBillingData
-            label="Next billing"
-            value={dayjs(upcomingInvoice?.due_date).format(config.dateFormat)}
-          />
-        ) : null}
+        <LabeledBillingData
+          label="Next billing"
+          value={dayjs(upcomingInvoice?.due_date).format(config.dateFormat)}
+        />
         {/* @ts-ignore */}
         <Image src={line} alt="line" />
         <LabeledBillingData label="Users" value={memberCount} />

diff --git a/sdks/js/packages/core/react/components/organization/plans/index.tsx b/sdks/js/packages/core/react/components/organization/plans/index.tsx
@@ -25,14 +25,15 @@ import {
 } from '~/src/types';
 import checkCircle from '~/react/assets/check-circle.svg';
 import { PlanChangeAction, getPlanChangeAction } from '~/react/utils';
-import Amount from '../../helpers/Amount';
+import Amount from '~/react/components/helpers/Amount';
 import { Outlet, useNavigate } from '@tanstack/react-router';
 import { usePlans } from './hooks/usePlans';
 import { PERMISSIONS, shouldShowComponent } from '~/utils';
 import { usePermissions } from '~/react/hooks/usePermissions';
 import * as _ from 'lodash';
 import dayjs from 'dayjs';
 import { DEFAULT_DATE_FORMAT } from '~/react/utils/constants';
+import { UpcomingPlanChangeBanner } from '~/react/components/common/upcoming-plan-change-banner';
 
 const PlansLoader = () => {
   return (
@@ -435,6 +436,10 @@ export default function Plans() {
         <Flex direction="column">
           <PlansHeader billingSupportEmail={config.billing?.supportEmail} />
         </Flex>
+        <UpcomingPlanChangeBanner
+          isLoading={isLoading}
+          subscription={activeSubscription}
+        />
         {isLoading ? (
           <PlansLoader />
         ) : (