feat: abstract the pricing plans for setup and billing page

packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss

@@ -33,22 +33,22 @@
       margin-left: 6px;
     }
   }
+  &:global(.bp4-intent-success){
+    color: #3e703e;
+  }
+  &:global(.bp4-intent-danger){
+    color: #A82A2A;
+  }
 }
 .periodStatus{
   text-transform: uppercase;
-  color: #A82A2A;
   font-weight: 500;
-}
-.periodText{
-  color: #AF6161;
+  
 }
 .priceAmount {
   font-size: 24px;
   font-weight: 500;
 }
-.pricePeriod {
-  color: #8F99A8;
-}
 .subscribeButton{
   border-radius: 32px;
   padding-left: 16px;

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

@@ -1,12 +1,15 @@
 // @ts-nocheck
 import * as R from 'ramda';
+import clsx from 'classnames';
+import { includes } from 'lodash';
 import { Box, Group, Stack } from '@/components';
-import { Button, Card, Intent, Text } from '@blueprintjs/core';
+import { Button, Card, Classes, 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';
+import { getSubscriptionStatusText } from './_utils';
 
 function SubscriptionRoot({ openAlert, openDrawer }) {
   const { mainSubscription } = useBillingPageBoot();
@@ -36,11 +39,24 @@ function SubscriptionRoot({ openAlert, openDrawer }) {
       <Stack spacing={6}>
         <h1 className={styles.title}>{mainSubscription.planName}</h1>
 
-        <Group spacing={0} className={styles.period}>
+        <Group
+          spacing={0}
+          className={clsx(styles.period, {
+            [Classes.INTENT_DANGER]: includes(
+              ['on_trial', 'inactive'],
+              mainSubscription.status,
+            ),
+            [Classes.INTENT_SUCCESS]: includes(
+              ['active', 'canceled'],
+              mainSubscription.status,
+            ),
+          })}
+        >
           <Text className={styles.periodStatus}>
             {mainSubscription.statusFormatted}
           </Text>
-          <Text className={styles.periodText}>Trial ends in 10 days.</Text>
+
+          <SubscriptionStatusText subscription={mainSubscription} />
         </Group>
       </Stack>
 
@@ -131,3 +147,11 @@ export const Subscription = R.compose(
   withAlertActions,
   withDrawerActions,
 )(SubscriptionRoot);
+
+function SubscriptionStatusText({ subscription }) {
+  const text = getSubscriptionStatusText(subscription);
+
+  if (!text) return null;
+
+  return <Text className={styles.periodText}>{text}</Text>;
+}

packages/webapp/src/containers/Subscriptions/_utils.ts

@@ -0,0 +1,17 @@
+// @ts-nocheck
+export const getSubscriptionStatusText = (subscription) => {
+  if (subscription.status === 'on_trial') {
+    return subscription.onTrial
+      ? `Trials ends in ${subscription.trialEndsAtFormatted}`
+      : `Trial ended ${subscription.trialEndsAtFormatted}`;
+  } else if (subscription.status === 'active') {
+    return subscription.endsAtFormatted
+      ? `Renews in ${subscription.endsAtFormatted}`
+      : 'Lifetime subscription';
+  } else if (subscription.status === 'canceled') {
+    return subscription.ended
+      ? `Expires ${subscription.endsAtFormatted}`
+      : `Expired ${subscription.endsAtFormatted}`;
+  }
+  return '';
+};

packages/webapp/src/containers/Subscriptions/component/SubscriptionPlan.tsx

@@ -0,0 +1,88 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { PricingPlan } from '@/components/PricingPlan/PricingPlan';
+import { SubscriptionPlansPeriod } from '@/store/plans/plans.reducer';
+import {
+  WithPlansProps,
+  withPlans,
+} from '@/containers/Subscriptions/withPlans';
+import { ButtonProps } from '@blueprintjs/core';
+
+interface SubscriptionPricingFeature {
+  text: string;
+  hint?: string;
+  hintLabel?: string;
+  style?: Record<string, string>;
+}
+
+interface SubscriptionPricingProps {
+  slug: string;
+  label: string;
+  description: string;
+  features?: Array<SubscriptionPricingFeature>;
+  featured?: boolean;
+  monthlyPrice: string;
+  monthlyPriceLabel: string;
+  annuallyPrice: string;
+  annuallyPriceLabel: string;
+  onSubscribe?: (variantId: number) => void;
+  subscribeButtonProps?: Optional<ButtonProps>;
+}
+
+interface SubscriptionPricingCombinedProps
+  extends SubscriptionPricingProps,
+    WithPlansProps {}
+
+function SubscriptionPlanRoot({
+  label,
+  description,
+  featured,
+  features,
+  monthlyPrice,
+  monthlyPriceLabel,
+  annuallyPrice,
+  annuallyPriceLabel,
+  onSubscribe,
+  subscribeButtonProps,
+
+  // #withPlans
+  plansPeriod,
+}: SubscriptionPricingCombinedProps) {
+  const handleClick = () => {
+    onSubscribe && onSubscribe();
+  };
+
+  return (
+    <PricingPlan featured={featured}>
+      {featured && <PricingPlan.Featured>Most Popular</PricingPlan.Featured>}
+      <PricingPlan.Header label={label} description={description} />
+
+      {plansPeriod === SubscriptionPlansPeriod.Monthly ? (
+        <PricingPlan.Price price={monthlyPrice} subPrice={monthlyPriceLabel} />
+      ) : (
+        <PricingPlan.Price
+          price={annuallyPrice}
+          subPrice={annuallyPriceLabel}
+        />
+      )}
+      <PricingPlan.BuyButton onClick={handleClick} {...subscribeButtonProps}>
+        Subscribe
+      </PricingPlan.BuyButton>
+
+      <PricingPlan.Features>
+        {features?.map((feature) => (
+          <PricingPlan.FeatureLine
+            hintLabel={feature.hintLabel}
+            hintContent={feature.hint}
+          >
+            {feature.text}
+          </PricingPlan.FeatureLine>
+        ))}
+      </PricingPlan.Features>
+    </PricingPlan>
+  );
+}
+
+export const SubscriptionPlan = R.compose(
+  withPlans(({ plansPeriod }) => ({ plansPeriod })),
+)(SubscriptionPlanRoot);

packages/webapp/src/containers/Subscriptions/component/withSubscriptionPlanMapper.tsx

@@ -0,0 +1,52 @@
+// @ts-nocheck
+import React from 'react';
+
+
+interface WithSubscriptionPlanProps {
+  plan: any;
+  onSubscribe?: (variantId: number) => void;
+}
+
+interface MappedSubscriptionPlanProps {
+  slug: string;
+  label: string;
+  description: string;
+  features: any[];
+  featured: boolean;
+  monthlyPrice: string;
+  monthlyPriceLabel: string;
+  annuallyPrice: string;
+  annuallyPriceLabel: string;
+  monthlyVariantId: number;
+  annuallyVariantId: number;
+  onSubscribe?: (variantId: number) => void;
+}
+
+export const withSubscriptionPlanMapper = <
+  P extends MappedSubscriptionPlanProps,
+>(
+  WrappedComponent: React.ComponentType<P>,
+) => {
+  return function WithSubscriptionPlanMapper(
+    props: WithSubscriptionPlanProps &
+      Omit<P, keyof MappedSubscriptionPlanProps>,
+  ) {
+    const { plan, onSubscribe, ...restProps } = props;
+
+    const mappedProps: MappedSubscriptionPlanProps = {
+      slug: plan.slug,
+      label: plan.name,
+      description: plan.description,
+      features: plan.features,
+      featured: plan.featured,
+      monthlyPrice: plan.monthlyPrice,
+      monthlyPriceLabel: plan.monthlyPriceLabel,
+      annuallyPrice: plan.annuallyPrice,
+      annuallyPriceLabel: plan.annuallyPriceLabel,
+      monthlyVariantId: plan.monthlyVariantId,
+      annuallyVariantId: plan.annuallyVariantId,
+      onSubscribe,
+    };
+    return <WrappedComponent {...mappedProps} {...(restProps as P)} />;
+  };
+};

packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx

@@ -1,34 +1,11 @@
 // @ts-nocheck
 import * as R from 'ramda';
-import { Callout, Classes, Intent } from '@blueprintjs/core';
-import { AppToaster, Box } from '@/components';
-import { SubscriptionPlans } from '@/containers/Setup/SetupSubscription/SubscriptionPlans';
+import { Callout, Classes } from '@blueprintjs/core';
+import { Box } from '@/components';
 import { SubscriptionPlansPeriodSwitcher } from '@/containers/Setup/SetupSubscription/SubscriptionPlansPeriodSwitcher';
-import { useChangeSubscriptionPlan } from '@/hooks/query/subscription';
-import withDrawerActions from '@/containers/Drawer/withDrawerActions';
-import { DRAWERS } from '@/constants/drawers';
-
-function ChangeSubscriptionPlanContent({ closeDrawer }) {
-  const { mutateAsync: changeSubscriptionPlan } = useChangeSubscriptionPlan();
-
-  // Handle the subscribe button click.
-  const handleSubscribe = (variantId: number) => {
-    changeSubscriptionPlan({ variant_id: variantId })
-      .then(() => {
-        closeDrawer(DRAWERS.CHANGE_SUBSCARIPTION_PLAN);
-        AppToaster.show({
-          intent: Intent.SUCCESS,
-          message: 'The subscription plan has been changed successfully.',
-        });
-      })
-      .catch(() => {
-        AppToaster.show({
-          intent: Intent.DANGER,
-          message: 'Something went wrong.',
-        });
-      });
-  };
+import { ChangeSubscriptionPlans } from './ChangeSubscriptionPlans';
 
+export default function ChangeSubscriptionPlanContent() {
   return (
     <Box className={Classes.DRAWER_BODY}>
       <Box
@@ -45,10 +22,8 @@ function ChangeSubscriptionPlanContent({ closeDrawer }) {
         </Callout>
 
         <SubscriptionPlansPeriodSwitcher />
-        <SubscriptionPlans onSubscribe={handleSubscribe} />
+        <ChangeSubscriptionPlans />
       </Box>
     </Box>
   );
 }
-
-export default R.compose(withDrawerActions)(ChangeSubscriptionPlanContent);

packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlans.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster, Group } from '@/components';
+import { SubscriptionPlan } from '../../component/SubscriptionPlan';
+import { SubscriptionPlansPeriod } from '@/store/plans/plans.reducer';
+import { useSubscriptionPlans } from '@/hooks/constants/useSubscriptionPlans';
+import { useChangeSubscriptionPlan } from '@/hooks/query/subscription';
+import { withSubscriptionPlanMapper } from '../../component/withSubscriptionPlanMapper';
+import { withPlans } from '../../withPlans';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { DRAWERS } from '@/constants/drawers';
+
+export function ChangeSubscriptionPlans() {
+  const subscriptionPlans = useSubscriptionPlans();
+
+  return (
+    <Group spacing={14} noWrap align="stretch">
+      {subscriptionPlans.map((plan, index) => (
+        <SubscriptionPlanMapped plan={plan} />
+      ))}
+    </Group>
+  );
+}
+
+export const SubscriptionPlanMapped = R.compose(
+  withSubscriptionPlanMapper,
+  withDrawerActions,
+  withPlans(({ plansPeriod }) => ({ plansPeriod })),
+)(
+  ({
+    openDrawer,
+    closeDrawer,
+    monthlyVariantId,
+    annuallyVariantId,
+    plansPeriod,
+    ...props
+  }) => {
+    const { mutateAsync: changeSubscriptionPlan, isLoading } =
+      useChangeSubscriptionPlan();
+
+    // Handles the subscribe button click.
+    const handleSubscribe = () => {
+      const variantId =
+        plansPeriod === SubscriptionPlansPeriod.Monthly
+          ? monthlyVariantId
+          : annuallyVariantId;
+
+      changeSubscriptionPlan({ variant_id: variantId })
+        .then(() => {
+          closeDrawer(DRAWERS.CHANGE_SUBSCARIPTION_PLAN);
+          AppToaster.show({
+            message: 'The subscription plan has been changed.',
+            intent: Intent.SUCCESS,
+          });
+        })
+        .catch((error) => {
+          AppToaster.show({
+            message: 'Something went wrong.',
+            intent: Intent.DANGER,
+          });
+        });
+    };
+    return (
+      <SubscriptionPlan
+        {...props}
+        onSubscribe={handleSubscribe}
+        subscribeButtonProps={{ loading: isLoading }}
+      />
+    );
+  },
+);