From 998e6de2114e233d658749ad16497418da50dcd3 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Thu, 25 Jul 2024 15:21:01 +0200 Subject: [PATCH 1/9] feat: billing subscription page --- .../containers/Subscriptions/BillingForm.tsx | 95 ------------------- .../Subscriptions/BillingPaymentMethod.tsx | 16 ---- .../Subscriptions/BillingPeriod.tsx | 59 ------------ .../Subscriptions/BillingPeriodsInput.tsx | 49 ---------- .../containers/Subscriptions/BillingPlan.tsx | 54 ----------- .../Subscriptions/BillingPlansForm.tsx | 41 -------- .../Subscriptions/BillingPlansInput.tsx | 38 -------- .../containers/Subscriptions/BillingTab.tsx | 7 -- .../containers/Subscriptions/LicenseTab.tsx | 42 -------- .../Subscriptions/SubscriptionTabs.tsx | 47 --------- .../src/containers/Subscriptions/utils.tsx | 9 -- 11 files changed, 457 deletions(-) delete mode 100644 packages/webapp/src/containers/Subscriptions/BillingForm.tsx delete mode 100644 packages/webapp/src/containers/Subscriptions/BillingPaymentMethod.tsx delete mode 100644 packages/webapp/src/containers/Subscriptions/BillingPeriod.tsx delete mode 100644 packages/webapp/src/containers/Subscriptions/BillingPeriodsInput.tsx delete mode 100644 packages/webapp/src/containers/Subscriptions/BillingPlan.tsx delete mode 100644 packages/webapp/src/containers/Subscriptions/BillingPlansForm.tsx delete mode 100644 packages/webapp/src/containers/Subscriptions/BillingPlansInput.tsx delete mode 100644 packages/webapp/src/containers/Subscriptions/BillingTab.tsx delete mode 100644 packages/webapp/src/containers/Subscriptions/LicenseTab.tsx delete mode 100644 packages/webapp/src/containers/Subscriptions/SubscriptionTabs.tsx delete mode 100644 packages/webapp/src/containers/Subscriptions/utils.tsx diff --git a/packages/webapp/src/containers/Subscriptions/BillingForm.tsx b/packages/webapp/src/containers/Subscriptions/BillingForm.tsx deleted file mode 100644 index 3b4a7cd13..000000000 --- a/packages/webapp/src/containers/Subscriptions/BillingForm.tsx +++ /dev/null @@ -1,95 +0,0 @@ -// @ts-nocheck -import React, { useEffect } from 'react'; -import intl from 'react-intl-universal'; -import { Formik, Form } from 'formik'; -import { DashboardInsider, If, Alert, T } from '@/components'; - -import '@/style/pages/Billing/BillingPage.scss'; - -import { compose } from '@/utils'; -import { MasterBillingTabs } from './SubscriptionTabs'; -import { getBillingFormValidationSchema } from './utils'; - -import withBillingActions from './withBillingActions'; -import withDashboardActions from '@/containers/Dashboard/withDashboardActions'; -import withSubscriptionPlansActions from './withSubscriptionPlansActions'; -import withSubscriptions from './withSubscriptions'; - -/** - * Billing form. - */ -function BillingForm({ - // #withDashboardActions - changePageTitle, - - // #withBillingActions - requestSubmitBilling, - - initSubscriptionPlans, - - // #withSubscriptions - isSubscriptionInactive, -}) { - useEffect(() => { - changePageTitle(intl.get('billing')); - }, [changePageTitle]); - - React.useEffect(() => { - initSubscriptionPlans(); - }, [initSubscriptionPlans]); - - // Initial values. - const initialValues = { - plan_slug: 'essentials', - period: 'month', - license_code: '', - }; - - // Handle form submitting. - const handleSubmit = (values, { setSubmitting }) => { - requestSubmitBilling({ - ...values, - plan_slug: 'essentials-monthly', - }) - .then((response) => { - setSubmitting(false); - }) - .catch((errors) => { - setSubmitting(false); - }); - }; - - return ( - -
- - } - description={} - /> - - - -
- - -
-
- - ); -} - -export default compose( - withDashboardActions, - withBillingActions, - withSubscriptionPlansActions, - withSubscriptions( - ({ isSubscriptionInactive }) => ({ isSubscriptionInactive }), - 'main', - ), -)(BillingForm); diff --git a/packages/webapp/src/containers/Subscriptions/BillingPaymentMethod.tsx b/packages/webapp/src/containers/Subscriptions/BillingPaymentMethod.tsx deleted file mode 100644 index ec65c64fc..000000000 --- a/packages/webapp/src/containers/Subscriptions/BillingPaymentMethod.tsx +++ /dev/null @@ -1,16 +0,0 @@ -// @ts-nocheck -import React from 'react'; - -import { T } from '@/components'; -import { PaymentMethodTabs } from './SubscriptionTabs'; - -export default ({ formik, title, description }) => { - return ( -
-

-

- - -
- ); -}; diff --git a/packages/webapp/src/containers/Subscriptions/BillingPeriod.tsx b/packages/webapp/src/containers/Subscriptions/BillingPeriod.tsx deleted file mode 100644 index a36921452..000000000 --- a/packages/webapp/src/containers/Subscriptions/BillingPeriod.tsx +++ /dev/null @@ -1,59 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import classNames from 'classnames'; -import { get } from 'lodash'; - - -import '@/style/pages/Subscription/PlanPeriodRadio.scss'; - -import withPlan from '@/containers/Subscriptions/withPlan'; - -import { saveInvoke, compose } from '@/utils'; - -/** - * Billing period. - */ -function BillingPeriod({ - // #ownProps - label, - value, - selectedOption, - onSelected, - period, - - // #withPlan - price, - currencyCode, -}) { - const handlePeriodClick = () => { - saveInvoke(onSelected, value); - }; - return ( -
- {label} - -
- - {price} {currencyCode} - - {label} -
-
- ); -} - -export default compose( - withPlan(({ plan }, state, { period }) => ({ - price: get(plan, `price.${period}`), - currencyCode: get(plan, 'currencyCode'), - })), -)(BillingPeriod); diff --git a/packages/webapp/src/containers/Subscriptions/BillingPeriodsInput.tsx b/packages/webapp/src/containers/Subscriptions/BillingPeriodsInput.tsx deleted file mode 100644 index eceda78ad..000000000 --- a/packages/webapp/src/containers/Subscriptions/BillingPeriodsInput.tsx +++ /dev/null @@ -1,49 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import { Field } from 'formik'; -import * as R from 'ramda'; - -import { T, SubscriptionPeriods } from '@/components'; - -import withPlan from './withPlan'; - -/** - * Sunscription periods enhanced. - */ -const SubscriptionPeriodsEnhanced = R.compose( - withPlan(({ plan }) => ({ plan })), -)(({ plan, ...restProps }) => { - if (!plan) return null; - - return ; -}); - -/** - * Billing periods. - */ -export default function BillingPeriods() { - return ( -
-

- -

-
-

- -

-
- - - {({ field: { value }, form: { values, setFieldValue } }) => ( - { - setFieldValue('period', period); - }} - /> - )} - -
- ); -} diff --git a/packages/webapp/src/containers/Subscriptions/BillingPlan.tsx b/packages/webapp/src/containers/Subscriptions/BillingPlan.tsx deleted file mode 100644 index a463dc52d..000000000 --- a/packages/webapp/src/containers/Subscriptions/BillingPlan.tsx +++ /dev/null @@ -1,54 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import classNames from 'classnames'; -import { FormattedMessage as T } from '@/components'; - -import { saveInvoke } from '@/utils'; - -/** - * Billing plan. - */ -export default function BillingPlan({ - name, - description, - price, - currencyCode, - - value, - selectedOption, - onSelected, -}) { - const handlePlanClick = () => { - saveInvoke(onSelected, value); - }; - return ( -
-
-
{name}
-
- -
-
    - {description.map((line) => ( -
  • {line}
    • - ))} -
-
- -
- - {price} {currencyCode} - - - - -
-
- ); -} diff --git a/packages/webapp/src/containers/Subscriptions/BillingPlansForm.tsx b/packages/webapp/src/containers/Subscriptions/BillingPlansForm.tsx deleted file mode 100644 index fc2c319cc..000000000 --- a/packages/webapp/src/containers/Subscriptions/BillingPlansForm.tsx +++ /dev/null @@ -1,41 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import * as R from 'ramda'; - -import '@/style/pages/Subscription/BillingPlans.scss'; - -import BillingPlansInput from './BillingPlansInput'; -import BillingPeriodsInput from './BillingPeriodsInput'; -import BillingPaymentMethod from './BillingPaymentMethod'; - -import withSubscriptions from './withSubscriptions'; - -/** - * Billing plans form. - */ -export default function BillingPlansForm() { - return ( -
- - - -
- ); -} - -/** - * Billing payment methods when subscription is inactive. - * @returns {JSX.Element} - */ -function BillingPaymentMethodWhenSubscriptionInactiveJSX({ - // # withSubscriptions - isSubscriptionActive, - - ...props -}) { - return !isSubscriptionActive ? : null; -} - -const BillingPaymentMethodWhenSubscriptionInactive = R.compose( - withSubscriptions(({ isSubscriptionActive }) => ({ isSubscriptionActive })), -)(BillingPaymentMethodWhenSubscriptionInactiveJSX); diff --git a/packages/webapp/src/containers/Subscriptions/BillingPlansInput.tsx b/packages/webapp/src/containers/Subscriptions/BillingPlansInput.tsx deleted file mode 100644 index d7bdfa23e..000000000 --- a/packages/webapp/src/containers/Subscriptions/BillingPlansInput.tsx +++ /dev/null @@ -1,38 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import { Field } from 'formik'; -import { T, SubscriptionPlans } from '@/components'; - -import withPlans from './withPlans'; -import { compose } from '@/utils'; - -/** - * Billing plans. - */ -function BillingPlans({ plans, title, description, selectedOption }) { - return ( -
-

- -

-
-

- -

-
- - - {({ form: { setFieldValue }, field: { value } }) => ( - { - setFieldValue('plan_slug', value); - }} - /> - )} - -
- ); -} -export default compose(withPlans(({ plans }) => ({ plans })))(BillingPlans); diff --git a/packages/webapp/src/containers/Subscriptions/BillingTab.tsx b/packages/webapp/src/containers/Subscriptions/BillingTab.tsx deleted file mode 100644 index e4235d14c..000000000 --- a/packages/webapp/src/containers/Subscriptions/BillingTab.tsx +++ /dev/null @@ -1,7 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import BillingPlansForm from './BillingPlansForm'; - -export default function BillingTab() { - return (); -} \ No newline at end of file diff --git a/packages/webapp/src/containers/Subscriptions/LicenseTab.tsx b/packages/webapp/src/containers/Subscriptions/LicenseTab.tsx deleted file mode 100644 index e069ffbf9..000000000 --- a/packages/webapp/src/containers/Subscriptions/LicenseTab.tsx +++ /dev/null @@ -1,42 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import { Intent, Button } from '@blueprintjs/core'; -import { useFormikContext } from 'formik'; -import { FormattedMessage as T } from '@/components'; -import { compose } from '@/utils'; - -import withDialogActions from '@/containers/Dialog/withDialogActions'; - -/** - * Payment via license code tab. - */ -function LicenseTab({ openDialog }) { - const { submitForm, values } = useFormikContext(); - - const handleSubmitBtnClick = () => { - submitForm().then(() => { - openDialog('payment-via-voucher', { ...values }); - }); - }; - - return ( -
-

- -

-

- -

- - -
- ); -} - -export default compose(withDialogActions)(LicenseTab); diff --git a/packages/webapp/src/containers/Subscriptions/SubscriptionTabs.tsx b/packages/webapp/src/containers/Subscriptions/SubscriptionTabs.tsx deleted file mode 100644 index 3f2ec6a05..000000000 --- a/packages/webapp/src/containers/Subscriptions/SubscriptionTabs.tsx +++ /dev/null @@ -1,47 +0,0 @@ -// @ts-nocheck -import React from 'react'; -import intl from 'react-intl-universal'; -import { Tabs, Tab } from '@blueprintjs/core'; -import BillingTab from './BillingTab'; -import LicenseTab from './LicenseTab'; - -/** - * Master billing tabs. - */ -export const MasterBillingTabs = ({ formik }) => { - return ( -
- - } - /> - - -
- ); -}; - -/** - * Payment methods tabs. - */ -export const PaymentMethodTabs = ({ formik }) => { - return ( -
- - } - /> - - - -
- ); -}; diff --git a/packages/webapp/src/containers/Subscriptions/utils.tsx b/packages/webapp/src/containers/Subscriptions/utils.tsx deleted file mode 100644 index 041234fc9..000000000 --- a/packages/webapp/src/containers/Subscriptions/utils.tsx +++ /dev/null @@ -1,9 +0,0 @@ -// @ts-nocheck -import * as Yup from 'yup'; - -export const getBillingFormValidationSchema = () => - Yup.object().shape({ - plan_slug: Yup.string().required(), - period: Yup.string().required(), - license_code: Yup.string().trim(), - }); From db634cbb79899b32fd0de093a62d4a85c4584e41 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sat, 27 Jul 2024 16:55:56 +0200 Subject: [PATCH 2/9] feat: pause, resume main subscription --- .../Subscription/SubscriptionController.ts | 92 ++++++++++++++ .../Subscription/LemonCancelSubscription.ts | 47 +++++++ .../LemonChangeSubscriptionPlan.ts | 47 +++++++ .../Subscription/LemonResumeSubscription.ts | 48 ++++++++ .../Subscription/SubscriptionApplication.ts | 48 ++++++++ .../server/src/services/Subscription/types.ts | 20 +++ packages/server/src/subscribers/events.ts | 9 ++ ..._subscription_id_to_subscriptions_table.js | 11 ++ .../models/Subscriptions/PlanSubscription.ts | 2 + .../containers/AlertsContainer/registered.tsx | 4 +- .../containers/Subscriptions/BillingPage.tsx | 24 ++++ .../Subscriptions/BillingPageBoot.tsx | 3 + .../alerts/CancelMainSubscriptionAlert.tsx | 74 +++++++++++ .../alerts/ResumeMainSubscriptionAlert.tsx | 73 +++++++++++ .../containers/Subscriptions/alerts/alerts.ts | 23 ++++ .../webapp/src/hooks/query/subscription.tsx | 115 ++++++++++++++++++ packages/webapp/src/routes/dashboard.tsx | 7 ++ 17 files changed, 646 insertions(+), 1 deletion(-) create mode 100644 packages/server/src/services/Subscription/LemonCancelSubscription.ts create mode 100644 packages/server/src/services/Subscription/LemonChangeSubscriptionPlan.ts create mode 100644 packages/server/src/services/Subscription/LemonResumeSubscription.ts create mode 100644 packages/server/src/services/Subscription/SubscriptionApplication.ts create mode 100644 packages/server/src/services/Subscription/types.ts create mode 100644 packages/server/src/system/migrations/20240727094214_add_lemon_subscription_id_to_subscriptions_table.js create mode 100644 packages/webapp/src/containers/Subscriptions/BillingPage.tsx create mode 100644 packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx create mode 100644 packages/webapp/src/containers/Subscriptions/alerts/CancelMainSubscriptionAlert.tsx create mode 100644 packages/webapp/src/containers/Subscriptions/alerts/ResumeMainSubscriptionAlert.tsx create mode 100644 packages/webapp/src/containers/Subscriptions/alerts/alerts.ts create mode 100644 packages/webapp/src/hooks/query/subscription.tsx diff --git a/packages/server/src/api/controllers/Subscription/SubscriptionController.ts b/packages/server/src/api/controllers/Subscription/SubscriptionController.ts index 7f394a666..d84e4c2c2 100644 --- a/packages/server/src/api/controllers/Subscription/SubscriptionController.ts +++ b/packages/server/src/api/controllers/Subscription/SubscriptionController.ts @@ -8,6 +8,7 @@ import SubscriptionService from '@/services/Subscription/SubscriptionService'; import asyncMiddleware from '@/api/middleware/asyncMiddleware'; import BaseController from '../BaseController'; import { LemonSqueezyService } from '@/services/Subscription/LemonSqueezyService'; +import { SubscriptionApplication } from '@/services/Subscription/SubscriptionApplication'; @Service() export class SubscriptionController extends BaseController { @@ -17,6 +18,9 @@ export class SubscriptionController extends BaseController { @Inject() private lemonSqueezyService: LemonSqueezyService; + @Inject() + private subscriptionApp: SubscriptionApplication; + /** * Router constructor. */ @@ -33,6 +37,14 @@ export class SubscriptionController extends BaseController { this.validationResult, this.getCheckoutUrl.bind(this) ); + router.post('/cancel', asyncMiddleware(this.cancelSubscription.bind(this))); + router.post('/resume', asyncMiddleware(this.resumeSubscription.bind(this))); + router.post( + '/change', + [body('variant_id').exists().trim()], + this.validationResult, + asyncMiddleware(this.changeSubscriptionPlan.bind(this)) + ); router.get('/', asyncMiddleware(this.getSubscriptions.bind(this))); return router; @@ -85,4 +97,84 @@ export class SubscriptionController extends BaseController { next(error); } } + + /** + * Cancels the subscription of the current organization. + * @param {Request} req + * @param {Response} res + * @param {NextFunction} next + * @returns {Promise} + */ + private async cancelSubscription( + req: Request, + res: Response, + next: NextFunction + ) { + const { tenantId } = req; + + try { + await this.subscriptionApp.cancelSubscription(tenantId, '455610'); + + return res.status(200).send({ + status: 200, + message: 'The organization subscription has been canceled.', + }); + } catch (error) { + next(error); + } + } + + /** + * Resumes the subscription of the current organization. + * @param {Request} req + * @param {Response} res + * @param {NextFunction} next + * @returns {Promise} + */ + private async resumeSubscription( + req: Request, + res: Response, + next: NextFunction + ) { + const { tenantId } = req; + + try { + await this.subscriptionApp.resumeSubscription(tenantId); + + return res.status(200).send({ + status: 200, + message: 'The organization subscription has been resumed.', + }); + } catch (error) { + next(error); + } + } + + /** + * Changes the main subscription plan of the current organization. + * @param {Request} req + * @param {Response} res + * @param {NextFunction} next + * @returns {Promise} + */ + public async changeSubscriptionPlan( + req: Request, + res: Response, + next: NextFunction + ) { + const { tenantId } = req; + const body = this.matchedBodyData(req); + + try { + await this.subscriptionApp.changeSubscriptionPlan( + tenantId, + body.variantId + ); + return res.status(200).send({ + message: 'The subscription plan has been changed.', + }); + } catch (error) { + next(error); + } + } } diff --git a/packages/server/src/services/Subscription/LemonCancelSubscription.ts b/packages/server/src/services/Subscription/LemonCancelSubscription.ts new file mode 100644 index 000000000..ef8441198 --- /dev/null +++ b/packages/server/src/services/Subscription/LemonCancelSubscription.ts @@ -0,0 +1,47 @@ +import { Inject, Service } from 'typedi'; +import { cancelSubscription } from '@lemonsqueezy/lemonsqueezy.js'; +import { configureLemonSqueezy } from './utils'; +import { PlanSubscription } from '@/system/models'; +import { ServiceError } from '@/exceptions'; +import { EventPublisher } from '@/lib/EventPublisher/EventPublisher'; +import events from '@/subscribers/events'; +import { ERRORS, IOrganizationSubscriptionCanceled } from './types'; + +@Service() +export class LemonCancelSubscription { + @Inject() + private eventPublisher: EventPublisher; + + /** + * Cancels the subscription of the given tenant. + * @param {number} tenantId + * @param {number} subscriptionId + * @returns {Promise} + */ + public async cancelSubscription(tenantId: number) { + configureLemonSqueezy(); + + const subscription = await PlanSubscription.query().findOne({ + tenantId, + slug: 'main', + }); + if (!subscription) { + throw new ServiceError(ERRORS.SUBSCRIPTION_ID_NOT_ASSOCIATED_TO_TENANT); + } + const lemonSusbcriptionId = subscription.lemonSubscriptionId; + const subscriptionId = subscription.id; + const cancelledSub = await cancelSubscription(lemonSusbcriptionId); + + if (cancelledSub.error) { + throw new Error(cancelledSub.error.message); + } + await PlanSubscription.query().findById(subscriptionId).patch({ + canceledAt: new Date(), + }); + // Triggers `onSubscriptionCanceled` event. + await this.eventPublisher.emitAsync( + events.subscription.onSubscriptionCanceled, + { tenantId, subscriptionId } as IOrganizationSubscriptionCanceled + ); + } +} diff --git a/packages/server/src/services/Subscription/LemonChangeSubscriptionPlan.ts b/packages/server/src/services/Subscription/LemonChangeSubscriptionPlan.ts new file mode 100644 index 000000000..9be404601 --- /dev/null +++ b/packages/server/src/services/Subscription/LemonChangeSubscriptionPlan.ts @@ -0,0 +1,47 @@ +import { Inject, Service } from 'typedi'; +import { updateSubscription } from '@lemonsqueezy/lemonsqueezy.js'; +import { EventPublisher } from '@/lib/EventPublisher/EventPublisher'; +import { ServiceError } from '@/exceptions'; +import { PlanSubscription } from '@/system/models'; +import { configureLemonSqueezy } from './utils'; +import events from '@/subscribers/events'; +import { IOrganizationSubscriptionChanged } from './types'; + +@Service() +export class LemonChangeSubscriptionPlan { + @Inject() + private eventPublisher: EventPublisher; + + /** + * Changes the given organization subscription plan. + * @param {number} tenantId - Tenant id. + * @param {number} newVariantId - New variant id. + * @returns {Promise} + */ + public async changeSubscriptionPlan(tenantId: number, newVariantId: number) { + configureLemonSqueezy(); + + const subscription = await PlanSubscription.query().findOne({ + tenantId, + slug: 'main', + }); + const lemonSubscriptionId = subscription.lemonSubscriptionId; + + // Send request to Lemon Squeezy to change the subscription. + const updatedSub = await updateSubscription(lemonSubscriptionId, { + variantId: newVariantId, + }); + if (updatedSub.error) { + throw new ServiceError('SOMETHING_WENT_WRONG'); + } + // Triggers `onSubscriptionPlanChanged` event. + await this.eventPublisher.emitAsync( + events.subscription.onSubscriptionPlanChanged, + { + tenantId, + lemonSubscriptionId, + newVariantId, + } as IOrganizationSubscriptionChanged + ); + } +} diff --git a/packages/server/src/services/Subscription/LemonResumeSubscription.ts b/packages/server/src/services/Subscription/LemonResumeSubscription.ts new file mode 100644 index 000000000..e6628cc0c --- /dev/null +++ b/packages/server/src/services/Subscription/LemonResumeSubscription.ts @@ -0,0 +1,48 @@ +import { EventPublisher } from '@/lib/EventPublisher/EventPublisher'; +import events from '@/subscribers/events'; +import { Inject, Service } from 'typedi'; +import { configureLemonSqueezy } from './utils'; +import { PlanSubscription } from '@/system/models'; +import { ServiceError } from '@/exceptions'; +import { ERRORS, IOrganizationSubscriptionResumed } from './types'; +import { updateSubscription } from '@lemonsqueezy/lemonsqueezy.js'; + +@Service() +export class LemonResumeSubscription { + @Inject() + private eventPublisher: EventPublisher; + + /** + * Resumes the main subscription of the given tenant. + * @param {number} tenantId - + * @returns {Promise} + */ + public async resumeSubscription(tenantId: number) { + configureLemonSqueezy(); + + const subscription = await PlanSubscription.query().findOne({ + tenantId, + slug: 'main', + }); + if (!subscription) { + throw new ServiceError(ERRORS.SUBSCRIPTION_ID_NOT_ASSOCIATED_TO_TENANT); + } + const subscriptionId = subscription.id; + const lemonSubscriptionId = subscription.lemonSubscriptionId; + const returnedSub = await updateSubscription(lemonSubscriptionId, { + cancelled: false, + }); + if (returnedSub.error) { + throw new ServiceError(''); + } + // Update the subscription of the organization. + await PlanSubscription.query().findById(subscriptionId).patch({ + canceledAt: null, + }); + // Triggers `onSubscriptionCanceled` event. + await this.eventPublisher.emitAsync( + events.subscription.onSubscriptionResumed, + { tenantId, subscriptionId } as IOrganizationSubscriptionResumed + ); + } +} diff --git a/packages/server/src/services/Subscription/SubscriptionApplication.ts b/packages/server/src/services/Subscription/SubscriptionApplication.ts new file mode 100644 index 000000000..c7f97569a --- /dev/null +++ b/packages/server/src/services/Subscription/SubscriptionApplication.ts @@ -0,0 +1,48 @@ +import { Inject, Service } from 'typedi'; +import { LemonCancelSubscription } from './LemonCancelSubscription'; +import { LemonChangeSubscriptionPlan } from './LemonChangeSubscriptionPlan'; +import { LemonResumeSubscription } from './LemonResumeSubscription'; + +@Service() +export class SubscriptionApplication { + @Inject() + private cancelSubscriptionService: LemonCancelSubscription; + + @Inject() + private resumeSubscriptionService: LemonResumeSubscription; + + @Inject() + private changeSubscriptionPlanService: LemonChangeSubscriptionPlan; + + /** + * Cancels the subscription of the given tenant. + * @param {number} tenantId + * @param {string} id + * @returns {Promise} + */ + public cancelSubscription(tenantId: number, id: string) { + return this.cancelSubscriptionService.cancelSubscription(tenantId, id); + } + + /** + * Resumes the subscription of the given tenant. + * @param {number} tenantId + * @returns {Promise} + */ + public resumeSubscription(tenantId: number) { + return this.resumeSubscriptionService.resumeSubscription(tenantId); + } + + /** + * Changes the given organization subscription plan. + * @param {number} tenantId + * @param {number} newVariantId + * @returns {Promise} + */ + public changeSubscriptionPlan(tenantId: number, newVariantId: number) { + return this.changeSubscriptionPlanService.changeSubscriptionPlan( + tenantId, + newVariantId + ); + } +} diff --git a/packages/server/src/services/Subscription/types.ts b/packages/server/src/services/Subscription/types.ts new file mode 100644 index 000000000..c506b634f --- /dev/null +++ b/packages/server/src/services/Subscription/types.ts @@ -0,0 +1,20 @@ +export const ERRORS = { + SUBSCRIPTION_ID_NOT_ASSOCIATED_TO_TENANT: + 'SUBSCRIPTION_ID_NOT_ASSOCIATED_TO_TENANT', +}; + +export interface IOrganizationSubscriptionChanged { + tenantId: number; + lemonSubscriptionId: string; + newVariantId: number; +} + +export interface IOrganizationSubscriptionCanceled { + tenantId: number; + subscriptionId: string; +} + +export interface IOrganizationSubscriptionResumed { + tenantId: number; + subscriptionId: number; +} diff --git a/packages/server/src/subscribers/events.ts b/packages/server/src/subscribers/events.ts index 711dbce35..78fca991e 100644 --- a/packages/server/src/subscribers/events.ts +++ b/packages/server/src/subscribers/events.ts @@ -40,6 +40,15 @@ export default { baseCurrencyUpdated: 'onOrganizationBaseCurrencyUpdated', }, + /** + * Organization subscription. + */ + subscription: { + onSubscriptionCanceled: 'onSubscriptionCanceled', + onSubscriptionResumed: 'onSubscriptionResumed', + onSubscriptionPlanChanged: 'onSubscriptionPlanChanged', + }, + /** * Tenants managment service. */ diff --git a/packages/server/src/system/migrations/20240727094214_add_lemon_subscription_id_to_subscriptions_table.js b/packages/server/src/system/migrations/20240727094214_add_lemon_subscription_id_to_subscriptions_table.js new file mode 100644 index 000000000..29907345a --- /dev/null +++ b/packages/server/src/system/migrations/20240727094214_add_lemon_subscription_id_to_subscriptions_table.js @@ -0,0 +1,11 @@ +exports.up = function (knex) { + return knex.schema.table('subscription_plan_subscriptions', (table) => { + table.string('lemon_subscription_id').nullable(); + }); +}; + +exports.down = function (knex) { + return knex.schema.table('subscription_plan_subscriptions', (table) => { + table.dropColumn('lemon_subscription_id'); + }); +}; diff --git a/packages/server/src/system/models/Subscriptions/PlanSubscription.ts b/packages/server/src/system/models/Subscriptions/PlanSubscription.ts index d77ee6418..c3e63530c 100644 --- a/packages/server/src/system/models/Subscriptions/PlanSubscription.ts +++ b/packages/server/src/system/models/Subscriptions/PlanSubscription.ts @@ -4,6 +4,8 @@ import moment from 'moment'; import SubscriptionPeriod from '@/services/Subscription/SubscriptionPeriod'; export default class PlanSubscription extends mixin(SystemModel) { + lemonSubscriptionId: number; + /** * Table name. */ diff --git a/packages/webapp/src/containers/AlertsContainer/registered.tsx b/packages/webapp/src/containers/AlertsContainer/registered.tsx index d1257cc1b..40724c66c 100644 --- a/packages/webapp/src/containers/AlertsContainer/registered.tsx +++ b/packages/webapp/src/containers/AlertsContainer/registered.tsx @@ -27,6 +27,7 @@ import ProjectAlerts from '@/containers/Projects/containers/ProjectAlerts'; import TaxRatesAlerts from '@/containers/TaxRates/alerts'; import { CashflowAlerts } from '../CashFlow/CashflowAlerts'; import { BankRulesAlerts } from '../Banking/Rules/RulesList/BankRulesAlerts'; +import { SubscriptionAlerts } from '../Subscriptions/alerts/alerts'; export default [ ...AccountsAlerts, @@ -56,5 +57,6 @@ export default [ ...ProjectAlerts, ...TaxRatesAlerts, ...CashflowAlerts, - ...BankRulesAlerts + ...BankRulesAlerts, + ...SubscriptionAlerts ]; diff --git a/packages/webapp/src/containers/Subscriptions/BillingPage.tsx b/packages/webapp/src/containers/Subscriptions/BillingPage.tsx new file mode 100644 index 000000000..e1f0c07b5 --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/BillingPage.tsx @@ -0,0 +1,24 @@ +// @ts-nocheck +import * as R from 'ramda'; +import { Button } from '@blueprintjs/core'; +import withAlertActions from '../Alert/withAlertActions'; + +function BillingPageRoot({ openAlert }) { + const handleCancelSubBtnClick = () => { + openAlert('cancel-main-subscription'); + }; + const handleResumeSubBtnClick = () => { + openAlert('resume-main-subscription'); + }; + const handleUpdatePaymentMethod = () => {}; + + return ( +

+ + + +

+ ); +} + +export default R.compose(withAlertActions)(BillingPageRoot); diff --git a/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx b/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx new file mode 100644 index 000000000..93d8d7b1b --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx @@ -0,0 +1,3 @@ +export function BillingPageBoot() { + return null; +} diff --git a/packages/webapp/src/containers/Subscriptions/alerts/CancelMainSubscriptionAlert.tsx b/packages/webapp/src/containers/Subscriptions/alerts/CancelMainSubscriptionAlert.tsx new file mode 100644 index 000000000..9e2b5979c --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/alerts/CancelMainSubscriptionAlert.tsx @@ -0,0 +1,74 @@ +// @ts-nocheck +import React from 'react'; +import * as R from 'ramda'; +import { Intent, Alert } from '@blueprintjs/core'; +import { AppToaster, FormattedMessage as T } from '@/components'; + +import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect'; +import withAlertActions from '@/containers/Alert/withAlertActions'; + +import { useCancelMainSubscription } from '@/hooks/query/subscription'; + +/** + * Cancel Unlocking partial transactions alerts. + */ +function CancelMainSubscriptionAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { module }, + + // #withAlertActions + closeAlert, +}) { + const { mutateAsync: cancelSubscription, isLoading } = + useCancelMainSubscription(); + + // Handle cancel. + const handleCancel = () => { + closeAlert(name); + }; + // Handle confirm. + const handleConfirm = () => { + const values = { + module: module, + }; + cancelSubscription() + .then(() => { + AppToaster.show({ + message: 'The subscription has been cancel.', + intent: Intent.SUCCESS, + }); + }) + .catch( + ({ + response: { + data: { errors }, + }, + }) => {}, + ) + .finally(() => { + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={'Cancel Subscription'} + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancel} + onConfirm={handleConfirm} + loading={isLoading} + > +

asdfsadf asdf asdfdsaf

+ + ); +} + +export default R.compose( + withAlertStoreConnect(), + withAlertActions, +)(CancelMainSubscriptionAlert); diff --git a/packages/webapp/src/containers/Subscriptions/alerts/ResumeMainSubscriptionAlert.tsx b/packages/webapp/src/containers/Subscriptions/alerts/ResumeMainSubscriptionAlert.tsx new file mode 100644 index 000000000..33149e752 --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/alerts/ResumeMainSubscriptionAlert.tsx @@ -0,0 +1,73 @@ +// @ts-nocheck +import React from 'react'; +import * as R from 'ramda'; +import { Intent, Alert } from '@blueprintjs/core'; +import { AppToaster, FormattedMessage as T } from '@/components'; + +import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect'; +import withAlertActions from '@/containers/Alert/withAlertActions'; +import { useResumeMainSubscription } from '@/hooks/query/subscription'; + +/** + * Resume Unlocking partial transactions alerts. + */ +function ResumeMainSubscriptionAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { module }, + + // #withAlertActions + closeAlert, +}) { + const { mutateAsync: resumeSubscription, isLoading } = + useResumeMainSubscription(); + + // Handle cancel. + const handleCancel = () => { + closeAlert(name); + }; + // Handle confirm. + const handleConfirm = () => { + const values = { + module: module, + }; + resumeSubscription() + .then(() => { + AppToaster.show({ + message: 'The subscription has been resumed.', + intent: Intent.SUCCESS, + }); + }) + .catch( + ({ + response: { + data: { errors }, + }, + }) => {}, + ) + .finally(() => { + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={'Resume Subscription'} + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancel} + onConfirm={handleConfirm} + loading={isLoading} + > +

asdfsadf asdf asdfdsaf

+ + ); +} + +export default R.compose( + withAlertStoreConnect(), + withAlertActions, +)(ResumeMainSubscriptionAlert); diff --git a/packages/webapp/src/containers/Subscriptions/alerts/alerts.ts b/packages/webapp/src/containers/Subscriptions/alerts/alerts.ts new file mode 100644 index 000000000..94939a56a --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/alerts/alerts.ts @@ -0,0 +1,23 @@ +// @ts-nocheck +import React from 'react'; + +const CancelMainSubscriptionAlert = React.lazy( + () => import('./CancelMainSubscriptionAlert'), +); +const ResumeMainSubscriptionAlert = React.lazy( + () => import('./ResumeMainSubscriptionAlert'), +); + +/** + * Subscription alert. + */ +export const SubscriptionAlerts = [ + { + name: 'cancel-main-subscription', + component: CancelMainSubscriptionAlert, + }, + { + name: 'resume-main-subscription', + component: ResumeMainSubscriptionAlert, + }, +]; diff --git a/packages/webapp/src/hooks/query/subscription.tsx b/packages/webapp/src/hooks/query/subscription.tsx new file mode 100644 index 000000000..58dbe81ee --- /dev/null +++ b/packages/webapp/src/hooks/query/subscription.tsx @@ -0,0 +1,115 @@ +// @ts-nocheck +import { + useMutation, + UseMutationOptions, + UseMutationResult, + useQueryClient, +} from 'react-query'; +import useApiRequest from '../useRequest'; + +interface CancelMainSubscriptionValues {} +interface CancelMainSubscriptionResponse {} + +/** + * Cancels the main subscription of the current organization. + * @param {UseMutationOptions} options - + * @returns {UseMutationResult}TCHES + */ +export function useCancelMainSubscription( + options?: UseMutationOptions< + CancelMainSubscriptionValues, + Error, + CancelMainSubscriptionResponse + >, +): UseMutationResult< + CancelMainSubscriptionValues, + Error, + CancelMainSubscriptionResponse +> { + const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); + + return useMutation< + CancelMainSubscriptionValues, + Error, + CancelMainSubscriptionResponse + >( + (values) => + apiRequest.post(`/subscription/cancel`, values).then((res) => res.data), + { + ...options, + }, + ); +} + +interface ResumeMainSubscriptionValues {} +interface ResumeMainSubscriptionResponse {} + +/** + * Resumes the main subscription of the current organization. + * @param {UseMutationOptions} options - + * @returns {UseMutationResult}TCHES + */ +export function useResumeMainSubscription( + options?: UseMutationOptions< + ResumeMainSubscriptionValues, + Error, + ResumeMainSubscriptionResponse + >, +): UseMutationResult< + ResumeMainSubscriptionValues, + Error, + ResumeMainSubscriptionResponse +> { + const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); + + return useMutation< + ResumeMainSubscriptionValues, + Error, + ResumeMainSubscriptionResponse + >( + (values) => + apiRequest.post(`/subscription/resume`, values).then((res) => res.data), + { + ...options, + }, + ); +} + +interface ChangeMainSubscriptionPlanValues { + variantId: string; +} +interface ChangeMainSubscriptionPlanResponse {} + +/** + * Changese the main subscription of the current organization. + * @param {UseMutationOptions} options - + * @returns {UseMutationResult} + */ +export function useChangeSubscriptionPlan( + options?: UseMutationOptions< + ChangeMainSubscriptionPlanValues, + Error, + ChangeMainSubscriptionPlanResponse + >, +): UseMutationResult< + ChangeMainSubscriptionPlanValues, + Error, + ChangeMainSubscriptionPlanResponse +> { + const queryClient = useQueryClient(); + const apiRequest = useApiRequest(); + + return useMutation< + ChangeMainSubscriptionPlanValues, + Error, + ChangeMainSubscriptionPlanResponse + >( + (values) => + apiRequest.post(`/subscription/change`, values).then((res) => res.data), + { + ...options, + }, + ); +} diff --git a/packages/webapp/src/routes/dashboard.tsx b/packages/webapp/src/routes/dashboard.tsx index b1b4cb1d4..aaedb5853 100644 --- a/packages/webapp/src/routes/dashboard.tsx +++ b/packages/webapp/src/routes/dashboard.tsx @@ -1231,6 +1231,13 @@ export const getDashboardRoutes = () => [ breadcrumb: 'Bank Rules', subscriptionActive: [SUBSCRIPTION_TYPE.MAIN], }, + { + path: '/billing', + component: lazy(() => import('@/containers/Subscriptions/BillingPage')), + pageTitle: 'Billing', + breadcrumb: 'Billing', + subscriptionActive: [SUBSCRIPTION_TYPE.MAIN], + }, // Homepage { path: `/`, From 7720b1cc3425a3d2c7f273f8f8c00e8111856d21 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sat, 27 Jul 2024 17:39:50 +0200 Subject: [PATCH 3/9] feat: getting subscription endpoint --- .../GetSubscriptionsTransformer.ts | 11 +++++++ .../Subscription/SubscriptionService.ts | 13 ++++++-- .../containers/Subscriptions/BillingPage.tsx | 13 +++++--- .../Subscriptions/BillingPageBoot.tsx | 29 +++++++++++++++-- .../webapp/src/hooks/query/subscription.tsx | 31 ++++++++++++++++++- 5 files changed, 87 insertions(+), 10 deletions(-) create mode 100644 packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts diff --git a/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts b/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts new file mode 100644 index 000000000..edc7d5dc0 --- /dev/null +++ b/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts @@ -0,0 +1,11 @@ +import { Transformer } from '@/lib/Transformer/Transformer'; + +export class GetSubscriptionsTransformer extends Transformer { + /** + * Include these attributes to sale invoice object. + * @returns {Array} + */ + public includeAttributes = (): string[] => { + return []; + }; +} diff --git a/packages/server/src/services/Subscription/SubscriptionService.ts b/packages/server/src/services/Subscription/SubscriptionService.ts index 8e70c55d8..de3b1db93 100644 --- a/packages/server/src/services/Subscription/SubscriptionService.ts +++ b/packages/server/src/services/Subscription/SubscriptionService.ts @@ -1,8 +1,13 @@ -import { Service } from 'typedi'; +import { Inject, Service } from 'typedi'; import { PlanSubscription } from '@/system/models'; +import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable'; +import { GetSubscriptionsTransformer } from './GetSubscriptionsTransformer'; @Service() export default class SubscriptionService { + @Inject() + private transformer: TransformerInjectable; + /** * Retrieve all subscription of the given tenant. * @param {number} tenantId @@ -12,6 +17,10 @@ export default class SubscriptionService { 'tenant_id', tenantId ); - return subscriptions; + return this.transformer.transform( + tenantId, + subscriptions, + new GetSubscriptionsTransformer() + ); } } diff --git a/packages/webapp/src/containers/Subscriptions/BillingPage.tsx b/packages/webapp/src/containers/Subscriptions/BillingPage.tsx index e1f0c07b5..b2d77462a 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingPage.tsx +++ b/packages/webapp/src/containers/Subscriptions/BillingPage.tsx @@ -2,6 +2,7 @@ import * as R from 'ramda'; import { Button } from '@blueprintjs/core'; import withAlertActions from '../Alert/withAlertActions'; +import { BillingPageBoot } from './BillingPageBoot'; function BillingPageRoot({ openAlert }) { const handleCancelSubBtnClick = () => { @@ -13,11 +14,13 @@ function BillingPageRoot({ openAlert }) { const handleUpdatePaymentMethod = () => {}; return ( -

- - - -

+ +

+ + + +

+ ); } diff --git a/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx b/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx index 93d8d7b1b..7cebf9759 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx +++ b/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx @@ -1,3 +1,28 @@ -export function BillingPageBoot() { - return null; +import React, { createContext } from 'react'; +import { useGetSubscriptions } from '@/hooks/query/subscription'; + +interface BillingBootContextValues { + isSubscriptionsLoading: boolean; + subscriptions: any; } + +const BillingBoot = createContext( + {} as BillingBootContextValues, +); + +interface BillingPageBootProps { + children: React.ReactNode; +} + +export function BillingPageBoot({ children }: BillingPageBootProps) { + const { isLoading: isSubscriptionsLoading, data: subscriptions } = + useGetSubscriptions(); + + const value = { + isSubscriptionsLoading, + subscriptions, + }; + return {children}; +} + +export const useBillingPageBoot = () => React.useContext(BillingBoot); diff --git a/packages/webapp/src/hooks/query/subscription.tsx b/packages/webapp/src/hooks/query/subscription.tsx index 58dbe81ee..050913c7c 100644 --- a/packages/webapp/src/hooks/query/subscription.tsx +++ b/packages/webapp/src/hooks/query/subscription.tsx @@ -1,9 +1,12 @@ -// @ts-nocheck +// @ts-ignore import { useMutation, UseMutationOptions, UseMutationResult, + useQuery, useQueryClient, + UseQueryOptions, + UseQueryResult, } from 'react-query'; import useApiRequest from '../useRequest'; @@ -113,3 +116,29 @@ export function useChangeSubscriptionPlan( }, ); } + +interface GetSubscriptionsQuery {} +interface GetSubscriptionsResponse {} + +/** + * Changese the main subscription of the current organization. + * @param {UseMutationOptions} options - + * @returns {UseMutationResult} + */ +export function useGetSubscriptions( + options?: UseQueryOptions< + GetSubscriptionsQuery, + Error, + GetSubscriptionsResponse + >, +): UseQueryResult { + const apiRequest = useApiRequest(); + + return useQuery( + ['SUBSCRIPTIONS'], + (values) => apiRequest.get(`/subscription`).then((res) => res.data), + { + ...options, + }, + ); +} From 383be111fa789eeb9976f06f5c3114986a897226 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sat, 27 Jul 2024 21:47:17 +0200 Subject: [PATCH 4/9] feat: style the billing page --- .../src/components/Dashboard/TopbarUser.tsx | 5 +- .../containers/Subscriptions/BillingPage.tsx | 22 ++--- .../BillingPageContent.module.scss | 8 ++ .../Subscriptions/BillingPageContent.tsx | 20 +++++ .../BillingSubscription.module.scss | 64 ++++++++++++++ .../Subscriptions/BillingSubscription.tsx | 86 +++++++++++++++++++ .../webapp/src/hooks/query/subscription.tsx | 2 +- 7 files changed, 188 insertions(+), 19 deletions(-) create mode 100644 packages/webapp/src/containers/Subscriptions/BillingPageContent.module.scss create mode 100644 packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx create mode 100644 packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss create mode 100644 packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx diff --git a/packages/webapp/src/components/Dashboard/TopbarUser.tsx b/packages/webapp/src/components/Dashboard/TopbarUser.tsx index 889bd3426..b20401868 100644 --- a/packages/webapp/src/components/Dashboard/TopbarUser.tsx +++ b/packages/webapp/src/components/Dashboard/TopbarUser.tsx @@ -58,6 +58,7 @@ function DashboardTopbarUser({ } /> + history.push('/billing')} /> } onClick={onKeyboardShortcut} @@ -79,6 +80,4 @@ function DashboardTopbarUser({ ); } -export default compose( - withDialogActions, -)(DashboardTopbarUser); +export default compose(withDialogActions)(DashboardTopbarUser); diff --git a/packages/webapp/src/containers/Subscriptions/BillingPage.tsx b/packages/webapp/src/containers/Subscriptions/BillingPage.tsx index b2d77462a..29979db3b 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingPage.tsx +++ b/packages/webapp/src/containers/Subscriptions/BillingPage.tsx @@ -3,24 +3,16 @@ import * as R from 'ramda'; import { Button } from '@blueprintjs/core'; import withAlertActions from '../Alert/withAlertActions'; import { BillingPageBoot } from './BillingPageBoot'; +import { BillingPageContent } from './BillingPageContent'; +import { DashboardInsider } from '@/components'; function BillingPageRoot({ openAlert }) { - const handleCancelSubBtnClick = () => { - openAlert('cancel-main-subscription'); - }; - const handleResumeSubBtnClick = () => { - openAlert('resume-main-subscription'); - }; - const handleUpdatePaymentMethod = () => {}; - return ( - -

- - - -

- + + + + + ); } diff --git a/packages/webapp/src/containers/Subscriptions/BillingPageContent.module.scss b/packages/webapp/src/containers/Subscriptions/BillingPageContent.module.scss new file mode 100644 index 000000000..23c7abb89 --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/BillingPageContent.module.scss @@ -0,0 +1,8 @@ +.root { + display: flex; + flex-direction: column; + padding: 32px 40px; + min-width: 800px; + max-width: 900px; + width: 75%; +} \ No newline at end of file diff --git a/packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx b/packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx new file mode 100644 index 000000000..bea0ec377 --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx @@ -0,0 +1,20 @@ +import { Box, Group } from '@/components'; +import { Text } from '@blueprintjs/core'; +import { Subscription } from './BillingSubscription'; +import styles from './BillingPageContent.module.scss'; + +export function BillingPageContent() { + return ( + + + Transactions locking has the ability to lock all organization + transactions so users can’t edit, delete or create new transactions + during the past period. + + + + + + + ); +} diff --git a/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss b/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss new file mode 100644 index 000000000..dd5c5bad1 --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss @@ -0,0 +1,64 @@ + +.root { + width: 450px; + background: #fff; + border-radius: 5px; + box-shadow: 0 -8px 0 0px #BFCCD6, rgb(0 8 36 / 9%) 0px 4px 20px -5px; + border: 1px solid #C4D2D7; + min-height: 420px; + display: flex; + flex-direction: column; +} + +.title{ + margin: 0; + font-size: 20px; + font-weight: 600; + color: #3D4C58; +} + +.description { + font-size: 15px; + line-height: 1.5; + color: #394B59; + margin-top: 14px; +} + +.period { + div + div { + &::before{ + content: " • "; + text-align: center; + margin-right: 3px; + color: #999; + margin-left: 6px; + } + } +} +.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; + padding-right: 16px; +} +.actions{ + margin-top: 20px; + + button{ + font-size: 15px; + } +} \ No newline at end of file diff --git a/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx b/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx new file mode 100644 index 000000000..0bef787a1 --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx @@ -0,0 +1,86 @@ +// @ts-nocheck +import * as R from 'ramda'; +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'; + +function SubscriptionRoot({ openAlert }) { + const handleCancelSubBtnClick = () => { + openAlert('cancel-main-subscription'); + }; + const handleResumeSubBtnClick = () => { + openAlert('resume-main-subscription'); + }; + const handleUpdatePaymentMethod = () => {}; + + const handleUpgradeBtnClick = () => {}; + + return ( + + +

Capital Essential

+ + + Trial + Trial ends in 10 days. + + + + + Transactions locking has the ability to lock all organization + transactions so users can’t edit, delete or create new transactions + during the past period. + + + + + + + + + + + $10 + / mo + + + + + + + + ); +} + +export const Subscription = R.compose(withAlertActions)(SubscriptionRoot); diff --git a/packages/webapp/src/hooks/query/subscription.tsx b/packages/webapp/src/hooks/query/subscription.tsx index 050913c7c..c9bbeec4e 100644 --- a/packages/webapp/src/hooks/query/subscription.tsx +++ b/packages/webapp/src/hooks/query/subscription.tsx @@ -1,4 +1,4 @@ -// @ts-ignore +// @ts-nocheck import { useMutation, UseMutationOptions, From 14a9c4ba28e63027aecbd39c4e00909177218f05 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sat, 27 Jul 2024 21:56:55 +0200 Subject: [PATCH 5/9] fix: style tweaks in billing page --- .../containers/Subscriptions/BillingSubscription.module.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss b/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss index dd5c5bad1..7f218431d 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss +++ b/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss @@ -18,7 +18,6 @@ } .description { - font-size: 15px; line-height: 1.5; color: #394B59; margin-top: 14px; @@ -56,7 +55,7 @@ padding-right: 16px; } .actions{ - margin-top: 20px; + margin-top: 16px; button{ font-size: 15px; From 1660df20af9ca85ad6fd5623b4deb83d29680dbb Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sun, 28 Jul 2024 17:53:51 +0200 Subject: [PATCH 6/9] feat: wip billing page --- .../GetSubscriptionsTransformer.ts | 161 +++++++++++++++++- .../Subscription/LemonResumeSubscription.ts | 2 +- .../Subscription/SubscriptionService.ts | 32 +++- ...add_trial_columns_to_subscription_table.js | 13 ++ .../models/Subscriptions/PlanSubscription.ts | 80 +++++++-- .../src/components/DrawersContainer.tsx | 2 + packages/webapp/src/constants/drawers.ts | 1 + .../SetupSubscription/SubscriptionPlan.tsx | 26 +-- .../Subscriptions/BillingPageBoot.tsx | 9 +- .../Subscriptions/BillingPageContent.tsx | 10 +- .../BillingSubscription.module.scss | 6 +- .../Subscriptions/BillingSubscription.tsx | 99 ++++++++--- .../ChangeSubscriptionPlanContent.tsx | 54 ++++++ .../webapp/src/hooks/query/subscription.tsx | 62 ++++++- 14 files changed, 488 insertions(+), 69 deletions(-) create mode 100644 packages/server/src/system/migrations/20240728123419_add_trial_columns_to_subscription_table.js create mode 100644 packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx diff --git a/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts b/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts index edc7d5dc0..194b41f78 100644 --- a/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts +++ b/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts @@ -6,6 +6,165 @@ export class GetSubscriptionsTransformer extends Transformer { * @returns {Array} */ public includeAttributes = (): string[] => { - return []; + return [ + 'canceledAtFormatted', + 'cancelsAtFormatted', + 'trialStartsAtFormatted', + 'trialEndsAtFormatted', + 'statusFormatted', + 'planName', + 'planSlug', + 'planPrice', + 'planPriceCurrency', + 'planPriceFormatted', + 'planPeriod', + 'lemonUrls', + ]; + }; + + /** + * Exclude attributes. + * @returns {string[]} + */ + public excludeAttributes = (): string[] => { + return ['id', 'plan']; + }; + + /** + * Retrieves the canceled at formatted. + * @param subscription + * @returns {string} + */ + public canceledAtFormatted = (subscription) => { + return subscription.canceledAt + ? this.formatDate(subscription.canceledAt) + : null; + }; + + /** + * Retrieves the cancels at formatted. + * @param subscription + * @returns {string} + */ + public cancelsAtFormatted = (subscription) => { + return subscription.cancelsAt + ? this.formatDate(subscription.cancelsAt) + : null; + }; + + /** + * Retrieves the trial starts at formatted date. + * @returns {string} + */ + public trialStartsAtFormatted = (subscription) => { + return subscription.trialStartsAt + ? this.formatDate(subscription.trialStartsAt) + : null; + }; + + /** + * Retrieves the trial ends at formatted date. + * @returns {string} + */ + public trialEndsAtFormatted = (subscription) => { + return subscription.trialEndsAt + ? this.formatDate(subscription.trialEndsAt) + : null; + }; + + /** + * Retrieves the Lemon subscription metadata. + * @param subscription + * @returns + */ + public lemonSubscription = (subscription) => { + return ( + this.options.lemonSubscriptions[subscription.lemonSubscriptionId] || null + ); + }; + + /** + * Retrieves the formatted subscription status. + * @param subscription + * @returns {string} + */ + public statusFormatted = (subscription) => { + const pairs = { + canceled: 'Canceled', + active: 'Active', + inactive: 'Inactive', + expired: 'Expired', + on_trial: 'On Trial', + }; + return pairs[subscription.status] || ''; + }; + + /** + * Retrieves the subscription plan name. + * @param subscription + * @returns {string} + */ + public planName(subscription) { + return subscription.plan?.name; + } + + /** + * Retrieves the subscription plan slug. + * @param subscription + * @returns {string} + */ + public planSlug(subscription) { + return subscription.plan?.slug; + } + + /** + * Retrieves the subscription plan price. + * @param subscription + * @returns {number} + */ + public planPrice(subscription) { + return subscription.plan?.price; + } + + /** + * Retrieves the subscription plan price currency. + * @param subscription + * @returns {string} + */ + public planPriceCurrency(subscription) { + return subscription.plan?.currency; + } + + /** + * Retrieves the subscription plan formatted price. + * @param subscription + * @returns {string} + */ + public planPriceFormatted(subscription) { + return this.formatMoney(subscription.plan?.price, { + currencyCode: subscription.plan?.currency, + precision: 0 + }); + } + + /** + * Retrieves the subscription plan period. + * @param subscription + * @returns {string} + */ + public planPeriod(subscription) { + return subscription?.plan?.period; + } + + /** + * Retrieve the subscription Lemon Urls. + * @param subscription + * @returns + */ + public lemonUrls = (subscription) => { + const lemonSusbcription = this.lemonSubscription(subscription); + console.log(lemonSusbcription); + + return lemonSusbcription?.data?.attributes?.urls; }; } diff --git a/packages/server/src/services/Subscription/LemonResumeSubscription.ts b/packages/server/src/services/Subscription/LemonResumeSubscription.ts index e6628cc0c..cd0ee0d2e 100644 --- a/packages/server/src/services/Subscription/LemonResumeSubscription.ts +++ b/packages/server/src/services/Subscription/LemonResumeSubscription.ts @@ -1,6 +1,6 @@ +import { Inject, Service } from 'typedi'; import { EventPublisher } from '@/lib/EventPublisher/EventPublisher'; import events from '@/subscribers/events'; -import { Inject, Service } from 'typedi'; import { configureLemonSqueezy } from './utils'; import { PlanSubscription } from '@/system/models'; import { ServiceError } from '@/exceptions'; diff --git a/packages/server/src/services/Subscription/SubscriptionService.ts b/packages/server/src/services/Subscription/SubscriptionService.ts index de3b1db93..a61714af3 100644 --- a/packages/server/src/services/Subscription/SubscriptionService.ts +++ b/packages/server/src/services/Subscription/SubscriptionService.ts @@ -1,7 +1,11 @@ import { Inject, Service } from 'typedi'; +import { getSubscription } from '@lemonsqueezy/lemonsqueezy.js'; +import { PromisePool } from '@supercharge/promise-pool'; import { PlanSubscription } from '@/system/models'; import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable'; import { GetSubscriptionsTransformer } from './GetSubscriptionsTransformer'; +import { configureLemonSqueezy } from './utils'; +import { fromPairs } from 'lodash'; @Service() export default class SubscriptionService { @@ -13,14 +17,34 @@ export default class SubscriptionService { * @param {number} tenantId */ public async getSubscriptions(tenantId: number) { - const subscriptions = await PlanSubscription.query().where( - 'tenant_id', - tenantId + configureLemonSqueezy(); + + const subscriptions = await PlanSubscription.query() + .where('tenant_id', tenantId) + .withGraphFetched('plan'); + + const lemonSubscriptionsResult = await PromisePool.withConcurrency(1) + .for(subscriptions) + .process(async (subscription, index, pool) => { + if (subscription.lemonSubscriptionId) { + const res = await getSubscription(subscription.lemonSubscriptionId); + + if (res.error) { + return; + } + return [subscription.lemonSubscriptionId, res.data]; + } + }); + const lemonSubscriptions = fromPairs( + lemonSubscriptionsResult?.results.filter((result) => !!result[1]) ); return this.transformer.transform( tenantId, subscriptions, - new GetSubscriptionsTransformer() + new GetSubscriptionsTransformer(), + { + lemonSubscriptions, + } ); } } diff --git a/packages/server/src/system/migrations/20240728123419_add_trial_columns_to_subscription_table.js b/packages/server/src/system/migrations/20240728123419_add_trial_columns_to_subscription_table.js new file mode 100644 index 000000000..1843b120a --- /dev/null +++ b/packages/server/src/system/migrations/20240728123419_add_trial_columns_to_subscription_table.js @@ -0,0 +1,13 @@ +exports.up = function (knex) { + return knex.schema.table('subscription_plan_subscriptions', (table) => { + table.dateTime('trial_starts_at').nullable(); + table.dateTime('trial_ends_at').nullable(); + }); +}; + +exports.down = function (knex) { + return knex.schema.table('subscription_plan_subscriptions', (table) => { + table.dropColumn('trial_starts_at').nullable(); + table.dropColumn('trial_ends_at').nullable(); + }); +}; diff --git a/packages/server/src/system/models/Subscriptions/PlanSubscription.ts b/packages/server/src/system/models/Subscriptions/PlanSubscription.ts index c3e63530c..3ae1c1fac 100644 --- a/packages/server/src/system/models/Subscriptions/PlanSubscription.ts +++ b/packages/server/src/system/models/Subscriptions/PlanSubscription.ts @@ -5,7 +5,16 @@ import SubscriptionPeriod from '@/services/Subscription/SubscriptionPeriod'; export default class PlanSubscription extends mixin(SystemModel) { lemonSubscriptionId: number; - + + canceledAt: Date; + cancelsAt: Date; + + trialStartsAt: Date; + trialEndsAt: Date; + + endsAt: Date; + startsAt: Date; + /** * Table name. */ @@ -24,7 +33,7 @@ export default class PlanSubscription extends mixin(SystemModel) { * Defined virtual attributes. */ static get virtualAttributes() { - return ['active', 'inactive', 'ended', 'onTrial']; + return ['active', 'inactive', 'ended', 'canceled', 'onTrial', 'status']; } /** @@ -40,7 +49,7 @@ export default class PlanSubscription extends mixin(SystemModel) { builder.where('trial_ends_at', '>', now); }, - inactiveSubscriptions() { + inactiveSubscriptions(builder) { builder.modify('endedTrial'); builder.modify('endedPeriod'); }, @@ -100,35 +109,80 @@ export default class PlanSubscription extends mixin(SystemModel) { } /** - * Check if subscription is active. + * Check if the subscription is expired. + * Expired mens the user his lost the right to use the product. + * @returns {Boolean} + */ + public expired() { + return this.ended() && !this.onTrial(); + } + + /** + * Check if paid subscription is active. * @return {Boolean} */ - active() { - return !this.ended() || this.onTrial(); + public active() { + return ( + !this.canceled() && !this.onTrial() && !this.ended() && this.started() + ); } /** * Check if subscription is inactive. * @return {Boolean} */ - inactive() { + public inactive() { return !this.active(); } /** - * Check if subscription period has ended. + * Check if paid subscription period has ended. * @return {Boolean} */ - ended() { + public ended() { return this.endsAt ? moment().isAfter(this.endsAt) : false; } + /** + * Check if the paid subscription has started. + * @returns {Boolean} + */ + public started() { + return this.startsAt ? moment().isAfter(this.startsAt) : false; + } + /** * Check if subscription is currently on trial. * @return {Boolean} */ - onTrial() { - return this.trailEndsAt ? moment().isAfter(this.trailEndsAt) : false; + public onTrial() { + return this.trialEndsAt ? moment().isBefore(this.trialEndsAt) : false; + } + + /** + * Check if the subscription is canceled. + * @returns {boolean} + */ + public canceled() { + return ( + this.canceledAt || + (this.cancelsAt && moment().isAfter(this.cancelsAt)) || + false + ); + } + + /** + * Retrieves the subscription status. + * @returns {string} + */ + public status() { + return this.canceled() + ? 'canceled' + : this.onTrial() + ? 'on_trial' + : this.active() + ? 'active' + : 'inactive'; } /** @@ -143,7 +197,7 @@ export default class PlanSubscription extends mixin(SystemModel) { const period = new SubscriptionPeriod( invoiceInterval, invoicePeriod, - start, + start ); const startsAt = period.getStartDate(); @@ -159,7 +213,7 @@ export default class PlanSubscription extends mixin(SystemModel) { renew(invoiceInterval, invoicePeriod) { const { startsAt, endsAt } = PlanSubscription.setNewPeriod( invoiceInterval, - invoicePeriod, + invoicePeriod ); return this.$query().update({ startsAt, endsAt }); } diff --git a/packages/webapp/src/components/DrawersContainer.tsx b/packages/webapp/src/components/DrawersContainer.tsx index af3c97525..cf9451d1c 100644 --- a/packages/webapp/src/components/DrawersContainer.tsx +++ b/packages/webapp/src/components/DrawersContainer.tsx @@ -22,6 +22,7 @@ import RefundVendorCreditDetailDrawer from '@/containers/Drawers/RefundVendorCre import WarehouseTransferDetailDrawer from '@/containers/Drawers/WarehouseTransferDetailDrawer'; import TaxRateDetailsDrawer from '@/containers/TaxRates/drawers/TaxRateDetailsDrawer/TaxRateDetailsDrawer'; import CategorizeTransactionDrawer from '@/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionDrawer'; +import ChangeSubscriptionPlanDrawer from '@/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanDrawer'; import { DRAWERS } from '@/constants/drawers'; @@ -63,6 +64,7 @@ export default function DrawersContainer() { /> + ); } diff --git a/packages/webapp/src/constants/drawers.ts b/packages/webapp/src/constants/drawers.ts index 2dc3e92e9..c4e477352 100644 --- a/packages/webapp/src/constants/drawers.ts +++ b/packages/webapp/src/constants/drawers.ts @@ -24,4 +24,5 @@ export enum DRAWERS { WAREHOUSE_TRANSFER_DETAILS = 'warehouse-transfer-detail-drawer', TAX_RATE_DETAILS = 'tax-rate-detail-drawer', CATEGORIZE_TRANSACTION = 'categorize-transaction', + CHANGE_SUBSCARIPTION_PLAN = 'change-subscription-plan' } diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlan.tsx b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlan.tsx index 4ebb88d5f..e4463ad70 100644 --- a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlan.tsx +++ b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlan.tsx @@ -29,6 +29,7 @@ interface SubscriptionPricingProps { annuallyPriceLabel: string; monthlyVariantId?: string; annuallyVariantId?: string; + onSubscribe?: (variantId: number) => void; } interface SubscriptionPricingCombinedProps @@ -46,6 +47,7 @@ function SubscriptionPlanRoot({ annuallyPriceLabel, monthlyVariantId, annuallyVariantId, + onSubscribe, // #withPlans plansPeriod, @@ -59,17 +61,19 @@ function SubscriptionPlanRoot({ ? 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, - }); - }); + onSubscribe && onSubscribe(variantId); + + // 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 ( diff --git a/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx b/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx index 7cebf9759..06bb3513e 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx +++ b/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx @@ -15,12 +15,17 @@ interface BillingPageBootProps { } export function BillingPageBoot({ children }: BillingPageBootProps) { - const { isLoading: isSubscriptionsLoading, data: subscriptions } = + const { isLoading: isSubscriptionsLoading, data: subscriptionsRes } = useGetSubscriptions(); + const mainSubscription = subscriptionsRes?.subscriptions?.find( + (s) => s.slug === 'main', + ); + const value = { isSubscriptionsLoading, - subscriptions, + subscriptions: subscriptionsRes?.subscriptions, + mainSubscription, }; return {children}; } diff --git a/packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx b/packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx index bea0ec377..dee9d0159 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx +++ b/packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx @@ -1,9 +1,17 @@ +// @ts-nocheck import { Box, Group } from '@/components'; -import { Text } from '@blueprintjs/core'; +import { Spinner, Text } from '@blueprintjs/core'; import { Subscription } from './BillingSubscription'; +import { useBillingPageBoot } from './BillingPageBoot'; import styles from './BillingPageContent.module.scss'; export function BillingPageContent() { + const { isSubscriptionsLoading, subscriptions } = useBillingPageBoot(); + + if (isSubscriptionsLoading || !subscriptions) { + return ; + } + return ( diff --git a/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss b/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss index 7f218431d..f99f30d8e 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss +++ b/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss @@ -12,7 +12,7 @@ .title{ margin: 0; - font-size: 20px; + font-size: 18px; font-weight: 600; color: #3D4C58; } @@ -56,8 +56,4 @@ } .actions{ margin-top: 16px; - - button{ - font-size: 15px; - } } \ No newline at end of file diff --git a/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx b/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx index 0bef787a1..aff31eecb 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx +++ b/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 ( - -

Capital Essential

+ +

{mainSubscription.planName}

- Trial + + {mainSubscription.statusFormatted} + Trial ends in 10 days. @@ -43,15 +60,29 @@ function SubscriptionRoot({ openAlert }) { > Upgrade the Plan - + + {mainSubscription.canceled && ( + + )} + {!mainSubscription.canceled && ( + + )} + {mainSubscription.canceled && ( + + )} ); } -export const Subscription = R.compose(withAlertActions)(SubscriptionRoot); +export const Subscription = R.compose( + withAlertActions, + withDrawerActions, +)(SubscriptionRoot); diff --git a/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx new file mode 100644 index 000000000..7c99e17e8 --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx @@ -0,0 +1,54 @@ +// @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 { 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.', + }); + }); + }; + + 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. + + + + + + + ); +} + +export default R.compose(withDrawerActions)(ChangeSubscriptionPlanContent); diff --git a/packages/webapp/src/hooks/query/subscription.tsx b/packages/webapp/src/hooks/query/subscription.tsx index c9bbeec4e..9050aca1d 100644 --- a/packages/webapp/src/hooks/query/subscription.tsx +++ b/packages/webapp/src/hooks/query/subscription.tsx @@ -9,6 +9,11 @@ import { UseQueryResult, } from 'react-query'; import useApiRequest from '../useRequest'; +import { transformToCamelCase } from '@/utils'; + +const QueryKeys = { + Subscriptions: 'Subscriptions', +}; interface CancelMainSubscriptionValues {} interface CancelMainSubscriptionResponse {} @@ -40,6 +45,9 @@ export function useCancelMainSubscription( (values) => apiRequest.post(`/subscription/cancel`, values).then((res) => res.data), { + onSuccess: () => { + queryClient.invalidateQueries(QueryKeys.Subscriptions); + }, ...options, }, ); @@ -75,6 +83,9 @@ export function useResumeMainSubscription( (values) => apiRequest.post(`/subscription/resume`, values).then((res) => res.data), { + onSuccess: () => { + queryClient.invalidateQueries(QueryKeys.Subscriptions); + }, ...options, }, ); @@ -105,20 +116,58 @@ export function useChangeSubscriptionPlan( const apiRequest = useApiRequest(); return useMutation< - ChangeMainSubscriptionPlanValues, + ChangeMainSubscriptionPlanResponse, Error, - ChangeMainSubscriptionPlanResponse + ChangeMainSubscriptionPlanValues >( (values) => apiRequest.post(`/subscription/change`, values).then((res) => res.data), { + onSuccess: () => { + queryClient.invalidateQueries(QueryKeys.Subscriptions); + }, ...options, }, ); } +interface LemonSubscription { + active: boolean; + canceled: string | null; + canceledAt: string | null; + canceledAtFormatted: string | null; + cancelsAt: string | null; + cancelsAtFormatted: string | null; + createdAt: string; + ended: boolean; + endsAt: string | null; + inactive: boolean; + lemonSubscriptionId: string; + lemon_urls: { + updatePaymentMethod: string; + customerPortal: string; + customerPortalUpdateSubscription: string; + }; + onTrial: boolean; + planId: number; + planName: string; + planSlug: string; + slug: string; + startsAt: string | null; + status: string; + statusFormatted: string; + tenantId: number; + trialEndsAt: string | null; + trialEndsAtFormatted: string | null; + trialStartsAt: string | null; + trialStartsAtFormatted: string | null; + updatedAt: string; +} + interface GetSubscriptionsQuery {} -interface GetSubscriptionsResponse {} +interface GetSubscriptionsResponse { + subscriptions: Array; +} /** * Changese the main subscription of the current organization. @@ -135,8 +184,11 @@ export function useGetSubscriptions( const apiRequest = useApiRequest(); return useQuery( - ['SUBSCRIPTIONS'], - (values) => apiRequest.get(`/subscription`).then((res) => res.data), + [QueryKeys.Subscriptions], + (values) => + apiRequest + .get(`/subscription`) + .then((res) => transformToCamelCase(res.data)), { ...options, }, From 333b6f5a4bb3cad8cb712025442fb1ecbde53088 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sun, 28 Jul 2024 20:52:53 +0200 Subject: [PATCH 7/9] feat: change subscription plan --- .../SetupSubscription/SubscriptionPlans.tsx | 15 +++++-- .../ChangeSubscriptionPlanDrawer.tsx | 39 +++++++++++++++++++ .../ChangeSubscriptionPlanDrawer/index.ts | 1 + 3 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanDrawer.tsx create mode 100644 packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/index.ts diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx index 7fa489f0e..9b71ab9ce 100644 --- a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx +++ b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx @@ -1,12 +1,20 @@ -import { Group } from '@/components'; +import { Group, GroupProps } from '@/components'; import { SubscriptionPlan } from './SubscriptionPlan'; import { useSubscriptionPlans } from './hooks'; -export function SubscriptionPlans() { +interface SubscriptionPlansProps { + wrapProps?: GroupProps; + onSubscribe?: (variantId: number) => void; +} + +export function SubscriptionPlans({ + wrapProps, + onSubscribe +}: SubscriptionPlansProps) { const subscriptionPlans = useSubscriptionPlans(); return ( - + {subscriptionPlans.map((plan, index) => ( ))} diff --git a/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanDrawer.tsx b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanDrawer.tsx new file mode 100644 index 000000000..a8aaf60ad --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanDrawer.tsx @@ -0,0 +1,39 @@ +// @ts-nocheck +import React, { lazy } from 'react'; +import * as R from 'ramda'; +import { Drawer, DrawerHeaderContent, DrawerSuspense } from '@/components'; +import withDrawers from '@/containers/Drawer/withDrawers'; +import { Position } from '@blueprintjs/core'; +import { DRAWERS } from '@/constants/drawers'; + +const ChangeSubscriptionPlanContent = lazy( + () => import('./ChangeSubscriptionPlanContent'), +); + +/** + * Account drawer. + */ +function ChangeSubscriptionPlanDrawer({ + name, + // #withDrawer + isOpen, +}) { + return ( + + + + + + + ); +} + +export default R.compose(withDrawers())(ChangeSubscriptionPlanDrawer); diff --git a/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/index.ts b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/index.ts new file mode 100644 index 000000000..4af1d02b2 --- /dev/null +++ b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/index.ts @@ -0,0 +1 @@ +export * as default from './ChangeSubscriptionPlanDrawer'; \ No newline at end of file From ba7f32c1bfc53de4e59f89cda1f039d513e27a7a Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 30 Jul 2024 17:47:03 +0200 Subject: [PATCH 8/9] feat: abstract the pricing plans for setup and billing page --- .../GetSubscriptionsTransformer.ts | 8 +-- ...add_trial_columns_to_subscription_table.js | 4 +- .../models/Subscriptions/PlanSubscription.ts | 35 +++------ .../SetupSubscription/SubscriptionPlans.tsx | 65 ++++++++++++----- .../BillingSubscription.module.scss | 14 ++-- .../Subscriptions/BillingSubscription.tsx | 30 +++++++- .../src/containers/Subscriptions/_utils.ts | 17 +++++ .../component}/SubscriptionPlan.tsx | 34 ++------- .../component/withSubscriptionPlanMapper.tsx | 52 ++++++++++++++ .../ChangeSubscriptionPlanContent.tsx | 35 ++------- .../ChangeSubscriptionPlans.tsx | 72 +++++++++++++++++++ .../hooks/constants/useSubscriptionPlans.tsx | 5 ++ .../webapp/src/hooks/query/subscription.tsx | 2 +- 13 files changed, 253 insertions(+), 120 deletions(-) create mode 100644 packages/webapp/src/containers/Subscriptions/_utils.ts rename packages/webapp/src/containers/{Setup/SetupSubscription => Subscriptions/component}/SubscriptionPlan.tsx (68%) create mode 100644 packages/webapp/src/containers/Subscriptions/component/withSubscriptionPlanMapper.tsx create mode 100644 packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlans.tsx create mode 100644 packages/webapp/src/hooks/constants/useSubscriptionPlans.tsx diff --git a/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts b/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts index 194b41f78..3257c0034 100644 --- a/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts +++ b/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts @@ -8,7 +8,7 @@ export class GetSubscriptionsTransformer extends Transformer { public includeAttributes = (): string[] => { return [ 'canceledAtFormatted', - 'cancelsAtFormatted', + 'endsAtFormatted', 'trialStartsAtFormatted', 'trialEndsAtFormatted', 'statusFormatted', @@ -42,13 +42,13 @@ export class GetSubscriptionsTransformer extends Transformer { }; /** - * Retrieves the cancels at formatted. + * Retrieves the ends at date formatted. * @param subscription * @returns {string} */ - public cancelsAtFormatted = (subscription) => { + public endsAtFormatted = (subscription) => { return subscription.cancelsAt - ? this.formatDate(subscription.cancelsAt) + ? this.formatDate(subscription.endsAt) : null; }; diff --git a/packages/server/src/system/migrations/20240728123419_add_trial_columns_to_subscription_table.js b/packages/server/src/system/migrations/20240728123419_add_trial_columns_to_subscription_table.js index 1843b120a..b8addd516 100644 --- a/packages/server/src/system/migrations/20240728123419_add_trial_columns_to_subscription_table.js +++ b/packages/server/src/system/migrations/20240728123419_add_trial_columns_to_subscription_table.js @@ -1,13 +1,13 @@ exports.up = function (knex) { return knex.schema.table('subscription_plan_subscriptions', (table) => { - table.dateTime('trial_starts_at').nullable(); table.dateTime('trial_ends_at').nullable(); + table.dropColumn('cancels_at'); }); }; exports.down = function (knex) { return knex.schema.table('subscription_plan_subscriptions', (table) => { - table.dropColumn('trial_starts_at').nullable(); table.dropColumn('trial_ends_at').nullable(); + table.dateTime('cancels_at').nullable(); }); }; diff --git a/packages/server/src/system/models/Subscriptions/PlanSubscription.ts b/packages/server/src/system/models/Subscriptions/PlanSubscription.ts index 3ae1c1fac..d7c988d8f 100644 --- a/packages/server/src/system/models/Subscriptions/PlanSubscription.ts +++ b/packages/server/src/system/models/Subscriptions/PlanSubscription.ts @@ -4,16 +4,14 @@ import moment from 'moment'; import SubscriptionPeriod from '@/services/Subscription/SubscriptionPeriod'; export default class PlanSubscription extends mixin(SystemModel) { - lemonSubscriptionId: number; + public lemonSubscriptionId: number; - canceledAt: Date; - cancelsAt: Date; + public endsAt: Date; + public startsAt: Date; - trialStartsAt: Date; - trialEndsAt: Date; + public canceledAt: Date; - endsAt: Date; - startsAt: Date; + public trialEndsAt: Date; /** * Table name. @@ -109,26 +107,15 @@ export default class PlanSubscription extends mixin(SystemModel) { } /** - * Check if the subscription is expired. - * Expired mens the user his lost the right to use the product. - * @returns {Boolean} - */ - public expired() { - return this.ended() && !this.onTrial(); - } - - /** - * Check if paid subscription is active. + * Check if the subscription is active. * @return {Boolean} */ public active() { - return ( - !this.canceled() && !this.onTrial() && !this.ended() && this.started() - ); + return this.onTrial() || !this.ended(); } /** - * Check if subscription is inactive. + * Check if the subscription is inactive. * @return {Boolean} */ public inactive() { @@ -164,11 +151,7 @@ export default class PlanSubscription extends mixin(SystemModel) { * @returns {boolean} */ public canceled() { - return ( - this.canceledAt || - (this.cancelsAt && moment().isAfter(this.cancelsAt)) || - false - ); + return !!this.canceledAt; } /** diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx index 9b71ab9ce..4c0d58e58 100644 --- a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx +++ b/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 ( {subscriptionPlans.map((plan, index) => ( - + ))} ); } + +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 ( + + ); +}); diff --git a/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss b/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss index f99f30d8e..a9f57555c 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss +++ b/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; diff --git a/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx b/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx index aff31eecb..ff63c6ca4 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx +++ b/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 }) {

{mainSubscription.planName}

- + {mainSubscription.statusFormatted} - Trial ends in 10 days. + + @@ -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}; +} diff --git a/packages/webapp/src/containers/Subscriptions/_utils.ts b/packages/webapp/src/containers/Subscriptions/_utils.ts new file mode 100644 index 000000000..fba7a568e --- /dev/null +++ b/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 ''; +}; diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlan.tsx b/packages/webapp/src/containers/Subscriptions/component/SubscriptionPlan.tsx similarity index 68% rename from packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlan.tsx rename to packages/webapp/src/containers/Subscriptions/component/SubscriptionPlan.tsx index e4463ad70..e23780e14 100644 --- a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlan.tsx +++ b/packages/webapp/src/containers/Subscriptions/component/SubscriptionPlan.tsx @@ -1,14 +1,12 @@ // @ts-nocheck -import { Intent } from '@blueprintjs/core'; import * as R from 'ramda'; -import { AppToaster } from '@/components'; -import { useGetLemonSqueezyCheckout } from '@/hooks/query'; 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; @@ -27,9 +25,8 @@ interface SubscriptionPricingProps { monthlyPriceLabel: string; annuallyPrice: string; annuallyPriceLabel: string; - monthlyVariantId?: string; - annuallyVariantId?: string; onSubscribe?: (variantId: number) => void; + subscribeButtonProps?: Optional; } interface SubscriptionPricingCombinedProps @@ -45,35 +42,14 @@ function SubscriptionPlanRoot({ monthlyPriceLabel, annuallyPrice, annuallyPriceLabel, - monthlyVariantId, - annuallyVariantId, onSubscribe, + subscribeButtonProps, // #withPlans plansPeriod, }: SubscriptionPricingCombinedProps) { - const { mutateAsync: getLemonCheckout, isLoading } = - useGetLemonSqueezyCheckout(); - const handleClick = () => { - const variantId = - SubscriptionPlansPeriod.Monthly === plansPeriod - ? monthlyVariantId - : annuallyVariantId; - - onSubscribe && onSubscribe(variantId); - - // 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, - // }); - // }); + onSubscribe && onSubscribe(); }; return ( @@ -89,7 +65,7 @@ function SubscriptionPlanRoot({ subPrice={annuallyPriceLabel} /> )} - + Subscribe diff --git a/packages/webapp/src/containers/Subscriptions/component/withSubscriptionPlanMapper.tsx b/packages/webapp/src/containers/Subscriptions/component/withSubscriptionPlanMapper.tsx new file mode 100644 index 000000000..b0cd58938 --- /dev/null +++ b/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

, +) => { + return function WithSubscriptionPlanMapper( + props: WithSubscriptionPlanProps & + Omit, + ) { + 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 ; + }; +}; diff --git a/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx index 7c99e17e8..85d0361e8 100644 --- a/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanContent.tsx +++ b/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 ( - + ); } - -export default R.compose(withDrawerActions)(ChangeSubscriptionPlanContent); diff --git a/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlans.tsx b/packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlans.tsx new file mode 100644 index 000000000..1edc6d7cf --- /dev/null +++ b/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 ( + + {subscriptionPlans.map((plan, index) => ( + + ))} + + ); +} + +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 ( + + ); + }, +); diff --git a/packages/webapp/src/hooks/constants/useSubscriptionPlans.tsx b/packages/webapp/src/hooks/constants/useSubscriptionPlans.tsx new file mode 100644 index 000000000..3beb2a34b --- /dev/null +++ b/packages/webapp/src/hooks/constants/useSubscriptionPlans.tsx @@ -0,0 +1,5 @@ +import { SubscriptionPlans } from '@/constants/subscriptionModels'; + +export const useSubscriptionPlans = () => { + return SubscriptionPlans; +}; diff --git a/packages/webapp/src/hooks/query/subscription.tsx b/packages/webapp/src/hooks/query/subscription.tsx index 9050aca1d..d3d0ebc4e 100644 --- a/packages/webapp/src/hooks/query/subscription.tsx +++ b/packages/webapp/src/hooks/query/subscription.tsx @@ -92,7 +92,7 @@ export function useResumeMainSubscription( } interface ChangeMainSubscriptionPlanValues { - variantId: string; + variant_id: string; } interface ChangeMainSubscriptionPlanResponse {} From 6affbedef459a6640cee59b3eac43b4aeefd9ebd Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 30 Jul 2024 21:43:33 +0200 Subject: [PATCH 9/9] feat: description to billing page --- .../src/services/Dashboard/DashboardService.ts | 9 ++++++--- .../webapp/src/components/Dashboard/TopbarUser.tsx | 12 ++++++++++-- .../src/containers/Subscriptions/BillingPage.tsx | 13 +++++++++++-- .../containers/Subscriptions/BillingPageContent.tsx | 4 +--- .../Subscriptions/BillingSubscription.tsx | 5 ++--- .../alerts/CancelMainSubscriptionAlert.tsx | 11 +++++++++-- .../alerts/ResumeMainSubscriptionAlert.tsx | 8 +++++++- 7 files changed, 46 insertions(+), 16 deletions(-) diff --git a/packages/server/src/services/Dashboard/DashboardService.ts b/packages/server/src/services/Dashboard/DashboardService.ts index 81c24a026..e8411b1bf 100644 --- a/packages/server/src/services/Dashboard/DashboardService.ts +++ b/packages/server/src/services/Dashboard/DashboardService.ts @@ -1,7 +1,8 @@ +import { Inject, Service } from 'typedi'; import { IFeatureAllItem, ISystemUser } from '@/interfaces'; import { FeaturesManager } from '@/services/Features/FeaturesManager'; import HasTenancyService from '@/services/Tenancy/TenancyService'; -import { Inject, Service } from 'typedi'; +import config from '@/config'; interface IRoleAbility { subject: string; @@ -11,15 +12,16 @@ interface IRoleAbility { interface IDashboardBootMeta { abilities: IRoleAbility[]; features: IFeatureAllItem[]; + isBigcapitalCloud: boolean; } @Service() export default class DashboardService { @Inject() - tenancy: HasTenancyService; + private tenancy: HasTenancyService; @Inject() - featuresManager: FeaturesManager; + private featuresManager: FeaturesManager; /** * Retrieve dashboard meta. @@ -39,6 +41,7 @@ export default class DashboardService { return { abilities, features, + isBigcapitalCloud: config.hostedOnBigcapitalCloud }; }; diff --git a/packages/webapp/src/components/Dashboard/TopbarUser.tsx b/packages/webapp/src/components/Dashboard/TopbarUser.tsx index b20401868..3cf8bb03c 100644 --- a/packages/webapp/src/components/Dashboard/TopbarUser.tsx +++ b/packages/webapp/src/components/Dashboard/TopbarUser.tsx @@ -15,7 +15,7 @@ import { useAuthActions } from '@/hooks/state'; import withDialogActions from '@/containers/Dialog/withDialogActions'; -import { useAuthenticatedAccount } from '@/hooks/query'; +import { useAuthenticatedAccount, useDashboardMeta } from '@/hooks/query'; import { firstLettersArgs, compose } from '@/utils'; /** @@ -31,6 +31,9 @@ function DashboardTopbarUser({ // Retrieve authenticated user information. const { data: user } = useAuthenticatedAccount(); + const { data: dashboardMeta } = useDashboardMeta({ + keepPreviousData: true, + }); const onClickLogout = () => { setLogout(); }; @@ -58,7 +61,12 @@ function DashboardTopbarUser({ } /> - history.push('/billing')} /> + {dashboardMeta.is_bigcapital_cloud && ( + history.push('/billing')} + /> + )} } onClick={onKeyboardShortcut} diff --git a/packages/webapp/src/containers/Subscriptions/BillingPage.tsx b/packages/webapp/src/containers/Subscriptions/BillingPage.tsx index 29979db3b..f9719e896 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingPage.tsx +++ b/packages/webapp/src/containers/Subscriptions/BillingPage.tsx @@ -1,12 +1,21 @@ // @ts-nocheck import * as R from 'ramda'; -import { Button } from '@blueprintjs/core'; -import withAlertActions from '../Alert/withAlertActions'; +import { Redirect } from 'react-router-dom'; import { BillingPageBoot } from './BillingPageBoot'; import { BillingPageContent } from './BillingPageContent'; import { DashboardInsider } from '@/components'; +import { useDashboardMeta } from '@/hooks/query'; +import withAlertActions from '../Alert/withAlertActions'; function BillingPageRoot({ openAlert }) { + const { data: dashboardMeta } = useDashboardMeta({ + keepPreviousData: true, + }); + + // In case the edition is not Bigcapital Cloud, redirect to the homepage. + if (!dashboardMeta.is_bigcapital_cloud) { + return ; + } return ( diff --git a/packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx b/packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx index dee9d0159..66fc3ec57 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx +++ b/packages/webapp/src/containers/Subscriptions/BillingPageContent.tsx @@ -15,9 +15,7 @@ export function BillingPageContent() { return ( - Transactions locking has the ability to lock all organization - transactions so users can’t edit, delete or create new transactions - during the past period. + Only pay for what you really need. All plans come with 24/7 customer support. diff --git a/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx b/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx index ff63c6ca4..c39093095 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx +++ b/packages/webapp/src/containers/Subscriptions/BillingSubscription.tsx @@ -61,9 +61,8 @@ function SubscriptionRoot({ openAlert, openDrawer }) { - Transactions locking has the ability to lock all organization - transactions so users can’t edit, delete or create new transactions - during the past period. + Control your business bookkeeping with automated accounting, to run + intelligent reports for faster decision-making. diff --git a/packages/webapp/src/containers/Subscriptions/alerts/CancelMainSubscriptionAlert.tsx b/packages/webapp/src/containers/Subscriptions/alerts/CancelMainSubscriptionAlert.tsx index 9e2b5979c..ca0c6a905 100644 --- a/packages/webapp/src/containers/Subscriptions/alerts/CancelMainSubscriptionAlert.tsx +++ b/packages/webapp/src/containers/Subscriptions/alerts/CancelMainSubscriptionAlert.tsx @@ -37,7 +37,7 @@ function CancelMainSubscriptionAlert({ cancelSubscription() .then(() => { AppToaster.show({ - message: 'The subscription has been cancel.', + message: 'The subscription has been canceled.', intent: Intent.SUCCESS, }); }) @@ -63,7 +63,14 @@ function CancelMainSubscriptionAlert({ onConfirm={handleConfirm} loading={isLoading} > -

asdfsadf asdf asdfdsaf

+

+ The subscription for this organization will end. +

+ +

+ It will no longer be accessible to you or any other users. Make sure any + data has already been exported. +

); } diff --git a/packages/webapp/src/containers/Subscriptions/alerts/ResumeMainSubscriptionAlert.tsx b/packages/webapp/src/containers/Subscriptions/alerts/ResumeMainSubscriptionAlert.tsx index 33149e752..c8d8d0734 100644 --- a/packages/webapp/src/containers/Subscriptions/alerts/ResumeMainSubscriptionAlert.tsx +++ b/packages/webapp/src/containers/Subscriptions/alerts/ResumeMainSubscriptionAlert.tsx @@ -62,7 +62,13 @@ function ResumeMainSubscriptionAlert({ onConfirm={handleConfirm} loading={isLoading} > -

asdfsadf asdf asdfdsaf

+

+ The subscription for this organization will resume. + +

+ Are you sure want to resume the subscription of this organization? +

+

); }