From e293bbae8c31dfd31c9648727bd6305f06fde9db Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Mon, 11 Nov 2024 18:45:13 +0200 Subject: [PATCH] fix: renew expired subscription --- .../src/components/DrawersContainer.tsx | 2 + packages/webapp/src/constants/drawers.ts | 3 +- .../Subscriptions/BillingSubscription.tsx | 84 ++++++++++--------- .../NewSubscriptionContent.tsx | 26 ++++++ .../NewSubscriptionDrawer.tsx | 40 +++++++++ .../NewSubscriptionPlans.tsx | 62 ++++++++++++++ 6 files changed, 177 insertions(+), 40 deletions(-) create mode 100644 packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionContent.tsx create mode 100644 packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionDrawer.tsx create mode 100644 packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionPlans.tsx diff --git a/packages/webapp/src/components/DrawersContainer.tsx b/packages/webapp/src/components/DrawersContainer.tsx index 448f6e6762..c7297a7699 100644 --- a/packages/webapp/src/components/DrawersContainer.tsx +++ b/packages/webapp/src/components/DrawersContainer.tsx @@ -32,6 +32,7 @@ import { BrandingTemplatesDrawer } from '@/containers/BrandingTemplates/Branding import { DRAWERS } from '@/constants/drawers'; import { InvoiceSendMailDrawer } from '@/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer'; +import { NewSubscriptionDrawer } from '@/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionDrawer'; /** * Drawers container of the dashboard. @@ -72,6 +73,7 @@ export default function DrawersContainer() { + diff --git a/packages/webapp/src/constants/drawers.ts b/packages/webapp/src/constants/drawers.ts index cd1d064d44..f7d96513b2 100644 --- a/packages/webapp/src/constants/drawers.ts +++ b/packages/webapp/src/constants/drawers.ts @@ -25,6 +25,7 @@ export enum DRAWERS { TAX_RATE_DETAILS = 'tax-rate-detail-drawer', CATEGORIZE_TRANSACTION = 'categorize-transaction', CHANGE_SUBSCARIPTION_PLAN = 'change-subscription-plan', + NEW_SUBSCRIPTION_PLANS = 'NEW_SUBSCRIPTION_PLANS', INVOICE_CUSTOMIZE = 'INVOICE_CUSTOMIZE', ESTIMATE_CUSTOMIZE = 'ESTIMATE_CUSTOMIZE', PAYMENT_RECEIPT_CUSTOMIZE = 'PAYMENT_RECEIPT_CUSTOMIZE', @@ -34,5 +35,5 @@ export enum DRAWERS { BRANDING_TEMPLATES = 'BRANDING_TEMPLATES', PAYMENT_INVOICE_PREVIEW = 'PAYMENT_INVOICE_PREVIEW', STRIPE_PAYMENT_INTEGRATION_EDIT = 'STRIPE_PAYMENT_INTEGRATION_EDIT', - INVOICE_SEND_MAIL = 'INVOICE_SEND_MAIL' + INVOICE_SEND_MAIL = 'INVOICE_SEND_MAIL', } diff --git a/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx b/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx index c39093095f..f3c64cdc70 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx +++ b/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx @@ -2,8 +2,8 @@ import * as R from 'ramda'; import clsx from 'classnames'; import { includes } from 'lodash'; -import { Box, Group, Stack } from '@/components'; import { Button, Card, Classes, Intent, Text } from '@blueprintjs/core'; +import { Box, Group, Stack } from '@/components'; import withAlertActions from '../Alert/withAlertActions'; import styles from './BillingSubscription.module.scss'; import withDrawerActions from '../Drawer/withDrawerActions'; @@ -18,12 +18,11 @@ function SubscriptionRoot({ openAlert, openDrawer }) { if (!mainSubscription) { return null; } + // Handle cancel subscription button click. const handleCancelSubBtnClick = () => { openAlert('cancel-main-subscription'); }; - const handleResumeSubBtnClick = () => { - openAlert('resume-main-subscription'); - }; + // Handle update payment method button click. const handleUpdatePaymentMethod = () => { window.LemonSqueezy.Url.Open( mainSubscription.lemonUrls?.updatePaymentMethod, @@ -33,6 +32,10 @@ function SubscriptionRoot({ openAlert, openDrawer }) { const handleUpgradeBtnClick = () => { openDrawer(DRAWERS.CHANGE_SUBSCARIPTION_PLAN); }; + // Handles renew the expired subscription. + const handleNewSubscriptionBtnClick = () => { + openDrawer(DRAWERS.NEW_SUBSCRIPTION_PLANS); + }; return ( @@ -66,50 +69,53 @@ function SubscriptionRoot({ openAlert, openDrawer }) { - - {mainSubscription.canceled && ( )} {!mainSubscription.canceled && ( - + <> + + + + + + )} - - + {mainSubscription.planPriceFormatted} @@ -120,8 +126,8 @@ function SubscriptionRoot({ openAlert, openDrawer }) { {mainSubscription.planPeriod === 'month' ? 'mo' : mainSubscription.planPeriod === 'year' - ? 'yearly' - : ''} + ? 'yearly' + : ''} )} @@ -130,10 +136,10 @@ function SubscriptionRoot({ openAlert, openDrawer }) { {mainSubscription.canceled && ( )} diff --git a/packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionContent.tsx b/packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionContent.tsx new file mode 100644 index 0000000000..5cc2ec6262 --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionContent.tsx @@ -0,0 +1,26 @@ +import { Box } from "@/components"; +import { SubscriptionPlansPeriodSwitcher } from "@/containers/Setup/SetupSubscription/SubscriptionPlansPeriodSwitcher"; +import { Callout, Classes } from "@blueprintjs/core"; +import { NewSubscriptionPlans } from "./NewSubscriptionPlans"; + + +export function NewSubscriptionContent() { + return ( + + + + Simple plans. Simple prices. Only pay for what you really need. All + plans come with award-winning 24/7 customer support. Prices do not + include applicable taxes. + + + + + + + ) +} \ No newline at end of file diff --git a/packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionDrawer.tsx b/packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionDrawer.tsx new file mode 100644 index 0000000000..ec2367051e --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionDrawer.tsx @@ -0,0 +1,40 @@ +// @ts-nocheck +import React, { lazy } from 'react'; +import * as R from 'ramda'; +import { Position } from '@blueprintjs/core'; +import { Drawer, DrawerHeaderContent, DrawerSuspense } from '@/components'; +import withDrawers from '@/containers/Drawer/withDrawers'; +import { DRAWERS } from '@/constants/drawers'; + +const NewSubscriptionContent = lazy(() => + import('./NewSubscriptionContent').then((module) => ({ + default: module.NewSubscriptionContent, + })), +); + +function NewSubscriptionDrawerRoot({ + name, + // #withDrawer + isOpen, +}) { + return ( + + + + + + + ); +} + +export const NewSubscriptionDrawer = R.compose(withDrawers())( + NewSubscriptionDrawerRoot, +); diff --git a/packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionPlans.tsx b/packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionPlans.tsx new file mode 100644 index 0000000000..054e83786c --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/drawers/NewSubscriptionDrawer/NewSubscriptionPlans.tsx @@ -0,0 +1,62 @@ +// @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 { withSubscriptionPlanMapper } from '../../component/withSubscriptionPlanMapper'; +import { useGetLemonSqueezyCheckout } from '@/hooks/query'; + +export function NewSubscriptionPlans() { + const subscriptionPlans = useSubscriptionPlans(); + + return ( + + {subscriptionPlans.map((plan, index) => ( + + ))} + + ); +} + +export const NewSubscriptionPlanMapped = R.compose( + withSubscriptionPlanMapper, +)( + ({ + monthlyVariantId, + annuallyVariantId, + plansPeriod, + ...props + }) => { + const { mutateAsync: getLemonCheckout, isLoading } = + useGetLemonSqueezyCheckout(); + + // Handles the subscribe button click. + const handleSubscribe = () => { + const variantId = + plansPeriod === SubscriptionPlansPeriod.Monthly + ? 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 ( + + ); + }, +);