feat: abstract the pricing plans for setup and billing page

packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx

@@ -1,6 +1,13 @@
-import { Group, GroupProps } from '@/components';
-import { SubscriptionPlan } from './SubscriptionPlan';
+// @ts-nocheck
+import * as R from 'ramda';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster, Group, GroupProps } from '@/components';
+import { SubscriptionPlansPeriod } from '@/store/plans/plans.reducer';
+import { SubscriptionPlan } from '@/containers/Subscriptions/component/SubscriptionPlan';
+import { useGetLemonSqueezyCheckout } from '@/hooks/query';
 import { useSubscriptionPlans } from './hooks';
+import { withPlans } from '@/containers/Subscriptions/withPlans';
+import { withSubscriptionPlanMapper } from '@/containers/Subscriptions/component/withSubscriptionPlanMapper';
 
 interface SubscriptionPlansProps {
   wrapProps?: GroupProps;
@@ -9,29 +16,51 @@ interface SubscriptionPlansProps {
 
 export function SubscriptionPlans({
   wrapProps,
-  onSubscribe
+  onSubscribe,
 }: SubscriptionPlansProps) {
   const subscriptionPlans = useSubscriptionPlans();
 
   return (
     <Group spacing={14} noWrap align="stretch" {...wrapProps}>
       {subscriptionPlans.map((plan, index) => (
-        <SubscriptionPlan
-          key={index}
-          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={onSubscribe}
-        />
+        <SubscriptionPlanMapped key={index} plan={plan} />
       ))}
     </Group>
   );
 }
+
+const SubscriptionPlanMapped = R.compose(
+  withSubscriptionPlanMapper,
+  withPlans(({ plansPeriod }) => ({ plansPeriod })),
+)(({ plansPeriod, monthlyVariantId, annuallyVariantId, ...props }) => {
+  const { mutateAsync: getLemonCheckout, isLoading } =
+    useGetLemonSqueezyCheckout();
+
+  const handleSubscribeBtnClick = () => {
+    const variantId =
+      SubscriptionPlansPeriod.Monthly === plansPeriod
+        ? monthlyVariantId
+        : annuallyVariantId;
+
+    getLemonCheckout({ variantId })
+      .then((res) => {
+        const checkoutUrl = res.data.data.attributes.url;
+        window.LemonSqueezy.Url.Open(checkoutUrl);
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong!',
+          intent: Intent.DANGER,
+        });
+      });
+  };
+  return (
+    <SubscriptionPlan
+      {...props}
+      onSubscribe={handleSubscribeBtnClick}
+      subscribeButtonProps={{
+        loading: isLoading,
+      }}
+    />
+  );
+});