fizx: remove debug console.log

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<Response|null>}
+   */
+  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<Response | null>}
+   */
+  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<Response | null>}
+   */
+  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);
+    }
+  }
 }

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
     };
   };
 

packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts

@@ -0,0 +1,168 @@
+import { Transformer } from '@/lib/Transformer/Transformer';
+
+export class GetSubscriptionsTransformer extends Transformer {
+  /**
+   * Include these attributes to sale invoice object.
+   * @returns {Array}
+   */
+  public includeAttributes = (): string[] => {
+    return [
+      'canceledAtFormatted',
+      'endsAtFormatted',
+      '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 ends at date formatted.
+   * @param subscription
+   * @returns {string}
+   */
+  public endsAtFormatted = (subscription) => {
+    return subscription.cancelsAt
+      ? this.formatDate(subscription.endsAt)
+      : 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);
+    return lemonSusbcription?.data?.attributes?.urls;
+  };
+}

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<void>}
+   */
+  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
+    );
+  }
+}

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<void>}
+   */
+  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
+    );
+  }
+}

packages/server/src/services/Subscription/LemonResumeSubscription.ts

@@ -0,0 +1,48 @@
+import { Inject, Service } from 'typedi';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
+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<void>}
+   */
+  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
+    );
+  }
+}

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<void>}
+   */
+  public cancelSubscription(tenantId: number, id: string) {
+    return this.cancelSubscriptionService.cancelSubscription(tenantId, id);
+  }
+
+  /**
+   * Resumes the subscription of the given tenant.
+   * @param {number} tenantId
+   * @returns {Promise<void>}
+   */
+  public resumeSubscription(tenantId: number) {
+    return this.resumeSubscriptionService.resumeSubscription(tenantId);
+  }
+
+  /**
+   * Changes the given organization subscription plan.
+   * @param {number} tenantId
+   * @param {number} newVariantId
+   * @returns {Promise<void>}
+   */
+  public changeSubscriptionPlan(tenantId: number, newVariantId: number) {
+    return this.changeSubscriptionPlanService.changeSubscriptionPlan(
+      tenantId,
+      newVariantId
+    );
+  }
+}

packages/server/src/services/Subscription/SubscriptionService.ts

@@ -1,17 +1,50 @@
-import { Service } from 'typedi';
+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 {
+  @Inject()
+  private transformer: TransformerInjectable;
+
   /**
    * Retrieve all subscription of the given tenant.
    * @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(),
+      {
+        lemonSubscriptions,
+      }
     );
-    return subscriptions;
   }
 }

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;
+}

packages/server/src/subscribers/events.ts

@@ -41,9 +41,12 @@ export default {
   },
 
   /**
-   * User subscription events.
+   * Organization subscription.
    */
   subscription: {
+    onSubscriptionCanceled: 'onSubscriptionCanceled',
+    onSubscriptionResumed: 'onSubscriptionResumed',
+    onSubscriptionPlanChanged: 'onSubscriptionPlanChanged',
     onSubscribed: 'onOrganizationSubscribed',
   },
 

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');
+  });
+};

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_ends_at').nullable();
+    table.dropColumn('cancels_at');
+  });
+};
+
+exports.down = function (knex) {
+  return knex.schema.table('subscription_plan_subscriptions', (table) => {
+    table.dropColumn('trial_ends_at').nullable();
+    table.dateTime('cancels_at').nullable();
+  });
+};

packages/server/src/system/models/Subscriptions/PlanSubscription.ts

@@ -4,6 +4,15 @@ import moment from 'moment';
 import SubscriptionPeriod from '@/services/Subscription/SubscriptionPeriod';
 
 export default class PlanSubscription extends mixin(SystemModel) {
+  public lemonSubscriptionId: number;
+
+  public endsAt: Date;
+  public startsAt: Date;
+
+  public canceledAt: Date;
+
+  public trialEndsAt: Date;
+
   /**
    * Table name.
    */
@@ -22,7 +31,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'];
   }
 
   /**
@@ -38,7 +47,7 @@ export default class PlanSubscription extends mixin(SystemModel) {
         builder.where('trial_ends_at', '>', now);
       },
 
-      inactiveSubscriptions() {
+      inactiveSubscriptions(builder) {
         builder.modify('endedTrial');
         builder.modify('endedPeriod');
       },
@@ -98,35 +107,65 @@ export default class PlanSubscription extends mixin(SystemModel) {
   }
 
   /**
-   * Check if subscription is active.
+   * Check if the subscription is active.
    * @return {Boolean}
    */
-  active() {
-    return !this.ended() || this.onTrial();
+  public active() {
+    return this.onTrial() || !this.ended();
   }
 
   /**
-   * Check if subscription is inactive.
+   * Check if the 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;
+  }
+
+  /**
+   * Retrieves the subscription status.
+   * @returns {string}
+   */
+  public status() {
+    return this.canceled()
+      ? 'canceled'
+      : this.onTrial()
+      ? 'on_trial'
+      : this.active()
+      ? 'active'
+      : 'inactive';
   }
 
   /**
@@ -141,7 +180,7 @@ export default class PlanSubscription extends mixin(SystemModel) {
     const period = new SubscriptionPeriod(
       invoiceInterval,
       invoicePeriod,
-      start,
+      start
     );
 
     const startsAt = period.getStartDate();
@@ -157,7 +196,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 });
   }

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,6 +61,12 @@ function DashboardTopbarUser({
             }
           />
           <MenuDivider />
+          {dashboardMeta.is_bigcapital_cloud && (
+            <MenuItem
+              text={'Billing'}
+              onClick={() => history.push('/billing')}
+            />
+          )}
           <MenuItem
             text={<T id={'keyboard_shortcuts'} />}
             onClick={onKeyboardShortcut}
@@ -79,6 +88,4 @@ function DashboardTopbarUser({
     </Popover>
   );
 }
-export default compose(
-  withDialogActions,
-)(DashboardTopbarUser);
+export default compose(withDialogActions)(DashboardTopbarUser);

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() {
       />
       <TaxRateDetailsDrawer name={DRAWERS.TAX_RATE_DETAILS} />
       <CategorizeTransactionDrawer name={DRAWERS.CATEGORIZE_TRANSACTION} />
+      <ChangeSubscriptionPlanDrawer name={DRAWERS.CHANGE_SUBSCARIPTION_PLAN} />
     </div>
   );
 }

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'
 }

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
 ];

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

@@ -1,28 +1,66 @@
-import { Group } 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';
 
-export function SubscriptionPlans() {
+interface SubscriptionPlansProps {
+  wrapProps?: GroupProps;
+  onSubscribe?: (variantId: number) => void;
+}
+
+export function SubscriptionPlans({
+  wrapProps,
+  onSubscribe,
+}: SubscriptionPlansProps) {
   const subscriptionPlans = useSubscriptionPlans();
 
   return (
-    <Group spacing={14} noWrap align="stretch">
+    <Group spacing={14} noWrap align="stretch" {...wrapProps}>
       {subscriptionPlans.map((plan, index) => (
-        <SubscriptionPlan
-          key={index}
-          slug={plan.slug}
-          label={plan.name}
-          description={plan.description}
-          features={plan.features}
-          featured={plan.featured}
-          monthlyPrice={plan.monthlyPrice}
-          monthlyPriceLabel={plan.monthlyPriceLabel}
-          annuallyPrice={plan.annuallyPrice}
-          annuallyPriceLabel={plan.annuallyPriceLabel}
-          monthlyVariantId={plan.monthlyVariantId}
-          annuallyVariantId={plan.annuallyVariantId}
-        />
+        <SubscriptionPlanMapped key={index} plan={plan} />
       ))}
     </Group>
   );
 }
+
+const SubscriptionPlanMapped = R.compose(
+  withSubscriptionPlanMapper,
+  withPlans(({ plansPeriod }) => ({ plansPeriod })),
+)(({ plansPeriod, monthlyVariantId, annuallyVariantId, ...props }) => {
+  const { mutateAsync: getLemonCheckout, isLoading } =
+    useGetLemonSqueezyCheckout();
+
+  const handleSubscribeBtnClick = () => {
+    const variantId =
+      SubscriptionPlansPeriod.Monthly === plansPeriod
+        ? monthlyVariantId
+        : annuallyVariantId;
+
+    getLemonCheckout({ variantId })
+      .then((res) => {
+        const checkoutUrl = res.data.data.attributes.url;
+        window.LemonSqueezy.Url.Open(checkoutUrl);
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: 'Something went wrong!',
+          intent: Intent.DANGER,
+        });
+      });
+  };
+  return (
+    <SubscriptionPlan
+      {...props}
+      onSubscribe={handleSubscribeBtnClick}
+      subscribeButtonProps={{
+        loading: isLoading,
+      }}
+    />
+  );
+});

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

@@ -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 (
-    <DashboardInsider name={'billing-page'}>
-      <div className={'billing-page'}>
-        <If condition={isSubscriptionInactive}>
-          <Alert
-            intent={'danger'}
-            title={<T id={'billing.suspend_message.title'} />}
-            description={<T id={'billing.suspend_message.description'} />}
-          />
-        </If>
-
-        <Formik
-          validationSchema={getBillingFormValidationSchema()}
-          onSubmit={handleSubmit}
-          initialValues={initialValues}
-        >
-          <Form>
-            <MasterBillingTabs />
-          </Form>
-        </Formik>
-      </div>
-    </DashboardInsider>
-  );
-}
-
-export default compose(
-  withDashboardActions,
-  withBillingActions,
-  withSubscriptionPlansActions,
-  withSubscriptions(
-    ({ isSubscriptionInactive }) => ({ isSubscriptionInactive }),
-    'main',
-  ),
-)(BillingForm);

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

@@ -0,0 +1,28 @@
+// @ts-nocheck
+import * as R from 'ramda';
+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 <Redirect to={{ pathname: '/' }} />;
+  }
+  return (
+    <DashboardInsider>
+      <BillingPageBoot>
+        <BillingPageContent />
+      </BillingPageBoot>
+    </DashboardInsider>
+  );
+}
+
+export default R.compose(withAlertActions)(BillingPageRoot);

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

@@ -0,0 +1,33 @@
+import React, { createContext } from 'react';
+import { useGetSubscriptions } from '@/hooks/query/subscription';
+
+interface BillingBootContextValues {
+  isSubscriptionsLoading: boolean;
+  subscriptions: any;
+}
+
+const BillingBoot = createContext<BillingBootContextValues>(
+  {} as BillingBootContextValues,
+);
+
+interface BillingPageBootProps {
+  children: React.ReactNode;
+}
+
+export function BillingPageBoot({ children }: BillingPageBootProps) {
+  const { isLoading: isSubscriptionsLoading, data: subscriptionsRes } =
+    useGetSubscriptions();
+
+  const mainSubscription = subscriptionsRes?.subscriptions?.find(
+    (s) => s.slug === 'main',
+  );
+
+  const value = {
+    isSubscriptionsLoading,
+    subscriptions: subscriptionsRes?.subscriptions,
+    mainSubscription,
+  };
+  return <BillingBoot.Provider value={value}>{children}</BillingBoot.Provider>;
+}
+
+export const useBillingPageBoot = () => React.useContext(BillingBoot);

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%;
+}

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

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import { Box, Group } from '@/components';
+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 <Spinner size={30} />;
+  }
+
+  return (
+    <Box className={styles.root}>
+      <Text>
+        Only pay for what you really need. All plans come with 24/7 customer support.
+      </Text>
+
+      <Group style={{ marginTop: '2rem' }}>
+        <Subscription />
+      </Group>
+    </Box>
+  );
+}

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

@@ -1,16 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-
-import { T } from '@/components';
-import { PaymentMethodTabs } from './SubscriptionTabs';
-
-export default ({ formik, title, description }) => {
-  return (
-    <section class="billing-plans__section">
-      <h1 className="title"><T id={'setup.plans.payment_methods.title'} /></h1>
-      <p className="paragraph"><T id={'setup.plans.payment_methods.description' } /></p>
-
-      <PaymentMethodTabs formik={formik} />
-    </section>
-  );
-};

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

@@ -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 (
-    <div
-      id={`plan-period-${period}`}
-      className={classNames(
-        {
-          'is-selected': value === selectedOption,
-        },
-        'period-radio',
-      )}
-      onClick={handlePeriodClick}
-    >
-      <span className={'period-radio__label'}>{label}</span>
-
-      <div className={'period-radio__price'}>
-        <span className={'period-radio__amount'}>
-          {price} {currencyCode}
-        </span>
-        <span className={'period-radio__period'}>{label}</span>
-      </div>
-    </div>
-  );
-}
-
-export default compose(
-  withPlan(({ plan }, state, { period }) => ({
-    price: get(plan, `price.${period}`),
-    currencyCode: get(plan, 'currencyCode'),
-  })),
-)(BillingPeriod);

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

@@ -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 <SubscriptionPeriods periods={plan.periods} {...restProps} />;
-});
-
-/**
- * Billing periods.
- */
-export default function BillingPeriods() {
-  return (
-    <section class="billing-plans__section">
-      <h1 class="title">
-        <T id={'setup.plans.select_period.title'} />
-      </h1>
-      <div class="description">
-        <p className="paragraph">
-          <T id={'setup.plans.select_period.description'} />
-        </p>
-      </div>
-
-      <Field name={'period'}>
-        {({ field: { value }, form: { values, setFieldValue } }) => (
-          <SubscriptionPeriodsEnhanced
-            selectedPeriod={value}
-            planSlug={values.plan_slug}
-            onPeriodSelect={(period) => {
-              setFieldValue('period', period);
-            }}
-          />
-        )}
-      </Field>
-    </section>
-  );
-}

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

@@ -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 (
-    <div
-      id={'basic-plan'}
-      className={classNames('plan-radio', {
-        'is-selected': selectedOption === value,
-      })}
-      onClick={handlePlanClick}
-    >
-      <div className={'plan-radio__header'}>
-        <div className={'plan-radio__name'}>{name}</div>
-      </div>
-
-      <div className={'plan-radio__description'}>
-        <ul>
-          {description.map((line) => (
-            <li>{line}</li>
-          ))}
-        </ul>
-      </div>
-
-      <div className={'plan-radio__price'}>
-        <span className={'plan-radio__amount'}>
-          {price} {currencyCode}
-        </span>
-        <span className={'plan-radio__period'}>
-          <T id={'monthly'} />
-        </span>
-      </div>
-    </div>
-  );
-}

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

@@ -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 (
-    <div class="billing-plans">
-      <BillingPlansInput />
-      <BillingPeriodsInput />
-      <BillingPaymentMethodWhenSubscriptionInactive />
-    </div>
-  );
-}
-
-/**
- * Billing payment methods when subscription is inactive.
- * @returns {JSX.Element}
- */
-function BillingPaymentMethodWhenSubscriptionInactiveJSX({
-  // # withSubscriptions
-  isSubscriptionActive,
-
-  ...props
-}) {
-  return !isSubscriptionActive ? <BillingPaymentMethod {...props} /> : null;
-}
-
-const BillingPaymentMethodWhenSubscriptionInactive = R.compose(
-  withSubscriptions(({ isSubscriptionActive }) => ({ isSubscriptionActive })),
-)(BillingPaymentMethodWhenSubscriptionInactiveJSX);

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

@@ -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 (
-    <section class="billing-plans__section">
-      <h1 class="title">
-        <T id={'setup.plans.select_plan.title'} />
-      </h1>
-      <div class="description">
-        <p className="paragraph">
-          <T id={'setup.plans.select_plan.description'} />
-        </p>
-      </div>
-
-      <Field name={'plan_slug'}>
-        {({ form: { setFieldValue }, field: { value } }) => (
-          <SubscriptionPlans
-            plans={plans}
-            value={value}
-            onSelect={(value) => {
-              setFieldValue('plan_slug', value);
-            }}
-          />
-        )}
-      </Field>
-    </section>
-  );
-}
-export default compose(withPlans(({ plans }) => ({ plans })))(BillingPlans);

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

@@ -0,0 +1,59 @@
+
+.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: 18px;
+  font-weight: 600;
+  color: #3D4C58;
+}
+
+.description {
+  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;
+    }
+  }
+  &:global(.bp4-intent-success){
+    color: #3e703e;
+  }
+  &:global(.bp4-intent-danger){
+    color: #A82A2A;
+  }
+}
+.periodStatus{
+  text-transform: uppercase;
+  font-weight: 500;
+  
+}
+.priceAmount {
+  font-size: 24px;
+  font-weight: 500;
+}
+.subscribeButton{
+  border-radius: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.actions{
+  margin-top: 16px;
+}

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

@@ -0,0 +1,156 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import clsx from 'classnames';
+import { includes } from 'lodash';
+import { Box, Group, Stack } from '@/components';
+import { Button, Card, Classes, Intent, Text } from '@blueprintjs/core';
+import 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();
+
+  // 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 = () => {
+    window.LemonSqueezy.Url.Open(
+      mainSubscription.lemonUrls?.updatePaymentMethod,
+    );
+  };
+  // Handle upgrade button click.
+  const handleUpgradeBtnClick = () => {
+    openDrawer(DRAWERS.CHANGE_SUBSCARIPTION_PLAN);
+  };
+
+  return (
+    <Card className={styles.root}>
+      <Stack spacing={6}>
+        <h1 className={styles.title}>{mainSubscription.planName}</h1>
+
+        <Group
+          spacing={0}
+          className={clsx(styles.period, {
+            [Classes.INTENT_DANGER]: includes(
+              ['on_trial', 'inactive'],
+              mainSubscription.status,
+            ),
+            [Classes.INTENT_SUCCESS]: includes(
+              ['active', 'canceled'],
+              mainSubscription.status,
+            ),
+          })}
+        >
+          <Text className={styles.periodStatus}>
+            {mainSubscription.statusFormatted}
+          </Text>
+
+          <SubscriptionStatusText subscription={mainSubscription} />
+        </Group>
+      </Stack>
+
+      <Text className={styles.description}>
+        Control your business bookkeeping with automated accounting, to run
+        intelligent reports for faster decision-making.
+      </Text>
+
+      <Stack align="flex-start" spacing={8} className={styles.actions}>
+        <Button
+          minimal
+          small
+          inline
+          intent={Intent.PRIMARY}
+          onClick={handleUpgradeBtnClick}
+        >
+          Upgrade the Plan
+        </Button>
+
+        {mainSubscription.canceled && (
+          <Button
+            minimal
+            small
+            inline
+            intent={Intent.PRIMARY}
+            onClick={handleResumeSubBtnClick}
+          >
+            Resume Subscription
+          </Button>
+        )}
+        {!mainSubscription.canceled && (
+          <Button
+            minimal
+            small
+            inline
+            intent={Intent.PRIMARY}
+            onClick={handleCancelSubBtnClick}
+          >
+            Cancel Subscription
+          </Button>
+        )}
+        <Button
+          minimal
+          small
+          inline
+          intent={Intent.PRIMARY}
+          onClick={handleUpdatePaymentMethod}
+        >
+          Change Payment Method
+        </Button>
+      </Stack>
+
+      <Group position={'apart'} style={{ marginTop: 'auto' }}>
+        <Group spacing={4}>
+          <Text className={styles.priceAmount}>
+            {mainSubscription.planPriceFormatted}
+          </Text>
+
+          {mainSubscription.planPeriod && (
+            <Text className={styles.pricePeriod}>
+              {mainSubscription.planPeriod === 'month'
+                ? 'mo'
+                : mainSubscription.planPeriod === 'year'
+                ? 'yearly'
+                : ''}
+            </Text>
+          )}
+        </Group>
+
+        <Box>
+          {mainSubscription.canceled && (
+            <Button
+              intent={Intent.PRIMARY}
+              onClick={handleResumeSubBtnClick}
+              className={styles.subscribeButton}
+            >
+              Resume Subscription
+            </Button>
+          )}
+        </Box>
+      </Group>
+    </Card>
+  );
+}
+
+export const Subscription = R.compose(
+  withAlertActions,
+  withDrawerActions,
+)(SubscriptionRoot);
+
+function SubscriptionStatusText({ subscription }) {
+  const text = getSubscriptionStatusText(subscription);
+
+  if (!text) return null;
+
+  return <Text className={styles.periodText}>{text}</Text>;
+}

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

@@ -1,7 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import BillingPlansForm from './BillingPlansForm';
-
-export default function BillingTab() {
-  return (<BillingPlansForm />);
-}

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

@@ -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 (
-    <div className={'license-container'}>
-      <h3>
-        <T id={'voucher'} />
-      </h3>
-      <p className="paragraph">
-        <T id={'cards_will_be_charged'} />
-      </p>
-
-      <Button
-        onClick={handleSubmitBtnClick}
-        intent={Intent.PRIMARY}
-        large={true}
-      >
-        <T id={'submit_voucher'} />
-      </Button>
-    </div>
-  );
-}
-
-export default compose(withDialogActions)(LicenseTab);

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

@@ -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 (
-    <div>
-      <Tabs animate={true} large={true}>
-        <Tab
-          title={intl.get('billing')}
-          id={'billing'}
-          panel={<BillingTab formik={formik} />}
-        />
-        <Tab title={intl.get('usage')} id={'usage'} disabled={true} />
-      </Tabs>
-    </div>
-  );
-};
-
-/**
- * Payment methods tabs.
- */
-export const PaymentMethodTabs = ({ formik }) => {
-  return (
-    <div>
-      <Tabs animate={true} large={true}>
-        <Tab
-          title={intl.get('voucher')}
-          id={'voucher'}
-          panel={<LicenseTab formik={formik} />}
-        />
-        <Tab
-          title={intl.get('credit_card')}
-          id={'credit_card'}
-          disabled={true}
-        />
-        <Tab title={intl.get('paypal')} id={'paypal'} disabled={true} />
-      </Tabs>
-    </div>
-  );
-};

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

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

packages/webapp/src/containers/Subscriptions/alerts/CancelMainSubscriptionAlert.tsx

@@ -0,0 +1,81 @@
+// @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 canceled.',
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={'Cancel Subscription'}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <strong>The subscription for this organization will end.</strong>
+      </p>
+
+      <p>
+        It will no longer be accessible to you or any other users. Make sure any
+        data has already been exported.
+      </p>
+    </Alert>
+  );
+}
+
+export default R.compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CancelMainSubscriptionAlert);

packages/webapp/src/containers/Subscriptions/alerts/ResumeMainSubscriptionAlert.tsx

@@ -0,0 +1,79 @@
+// @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 (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={'Resume Subscription'}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <strong>The subscription for this organization will resume.</strong>
+
+        <p>
+          Are you sure want to resume the subscription of this organization?
+        </p>
+      </p>
+    </Alert>
+  );
+}
+
+export default R.compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ResumeMainSubscriptionAlert);

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,
+  },
+];

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,8 +25,8 @@ interface SubscriptionPricingProps {
   monthlyPriceLabel: string;
   annuallyPrice: string;
   annuallyPriceLabel: string;
-  monthlyVariantId?: string;
-  annuallyVariantId?: string;
+  onSubscribe?: (variantId: number) => void;
+  subscribeButtonProps?: Optional<ButtonProps>;
 }
 
 interface SubscriptionPricingCombinedProps
@@ -44,32 +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;
-
-    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 (
@@ -85,7 +65,7 @@ function SubscriptionPlanRoot({
           subPrice={annuallyPriceLabel}
         />
       )}
-      <PricingPlan.BuyButton loading={isLoading} onClick={handleClick}>
+      <PricingPlan.BuyButton onClick={handleClick} {...subscribeButtonProps}>
         Subscribe
       </PricingPlan.BuyButton>
 

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

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

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

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { Callout, Classes } from '@blueprintjs/core';
+import { Box } from '@/components';
+import { SubscriptionPlansPeriodSwitcher } from '@/containers/Setup/SetupSubscription/SubscriptionPlansPeriodSwitcher';
+import { ChangeSubscriptionPlans } from './ChangeSubscriptionPlans';
+
+export default function ChangeSubscriptionPlanContent() {
+  return (
+    <Box className={Classes.DRAWER_BODY}>
+      <Box
+        style={{
+          maxWidth: 1024,
+          margin: '0 auto',
+          padding: '50px 20px 80px',
+        }}
+      >
+        <Callout style={{ marginBottom: '2rem' }} icon={null}>
+          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.
+        </Callout>
+
+        <SubscriptionPlansPeriodSwitcher />
+        <ChangeSubscriptionPlans />
+      </Box>
+    </Box>
+  );
+}

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 (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      size={'calc(100% - 5px)'}
+      position={Position.BOTTOM}
+    >
+      <DrawerSuspense>
+        <DrawerHeaderContent
+          name={DRAWERS.CHANGE_SUBSCARIPTION_PLAN}
+          title={'Change Subscription Plan'}
+        />
+        <ChangeSubscriptionPlanContent />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default R.compose(withDrawers())(ChangeSubscriptionPlanDrawer);

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

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

packages/webapp/src/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/index.ts

@@ -0,0 +1 @@
+export * as default from './ChangeSubscriptionPlanDrawer';

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

@@ -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(),
-  });

packages/webapp/src/hooks/constants/useSubscriptionPlans.tsx

@@ -0,0 +1,5 @@
+import { SubscriptionPlans } from '@/constants/subscriptionModels';
+
+export const useSubscriptionPlans = () => {
+  return SubscriptionPlans;
+};

packages/webapp/src/hooks/query/subscription.tsx

@@ -0,0 +1,196 @@
+// @ts-nocheck
+import {
+  useMutation,
+  UseMutationOptions,
+  UseMutationResult,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions,
+  UseQueryResult,
+} from 'react-query';
+import useApiRequest from '../useRequest';
+import { transformToCamelCase } from '@/utils';
+
+const QueryKeys = {
+  Subscriptions: 'Subscriptions',
+};
+
+interface CancelMainSubscriptionValues {}
+interface CancelMainSubscriptionResponse {}
+
+/**
+ * Cancels the main subscription of the current organization.
+ * @param {UseMutationOptions<CreateBankRuleValues, Error, CreateBankRuleValues>} options -
+ * @returns {UseMutationResult<CreateBankRuleValues, Error, CreateBankRuleValues>}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),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(QueryKeys.Subscriptions);
+      },
+      ...options,
+    },
+  );
+}
+
+interface ResumeMainSubscriptionValues {}
+interface ResumeMainSubscriptionResponse {}
+
+/**
+ * Resumes the main subscription of the current organization.
+ * @param {UseMutationOptions<CreateBankRuleValues, Error, CreateBankRuleValues>} options -
+ * @returns {UseMutationResult<CreateBankRuleValues, Error, CreateBankRuleValues>}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),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(QueryKeys.Subscriptions);
+      },
+      ...options,
+    },
+  );
+}
+
+interface ChangeMainSubscriptionPlanValues {
+  variant_id: string;
+}
+interface ChangeMainSubscriptionPlanResponse {}
+
+/**
+ * Changese the main subscription of the current organization.
+ * @param {UseMutationOptions<ChangeMainSubscriptionPlanValues, Error, ChangeMainSubscriptionPlanResponse>} options -
+ * @returns {UseMutationResult<ChangeMainSubscriptionPlanValues, Error, ChangeMainSubscriptionPlanResponse>}
+ */
+export function useChangeSubscriptionPlan(
+  options?: UseMutationOptions<
+    ChangeMainSubscriptionPlanValues,
+    Error,
+    ChangeMainSubscriptionPlanResponse
+  >,
+): UseMutationResult<
+  ChangeMainSubscriptionPlanValues,
+  Error,
+  ChangeMainSubscriptionPlanResponse
+> {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation<
+    ChangeMainSubscriptionPlanResponse,
+    Error,
+    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 {
+  subscriptions: Array<LemonSubscription>;
+}
+
+/**
+ * Changese the main subscription of the current organization.
+ * @param {UseMutationOptions<ChangeMainSubscriptionPlanValues, Error, ChangeMainSubscriptionPlanResponse>} options -
+ * @returns {UseMutationResult<ChangeMainSubscriptionPlanValues, Error, ChangeMainSubscriptionPlanResponse>}
+ */
+export function useGetSubscriptions(
+  options?: UseQueryOptions<
+    GetSubscriptionsQuery,
+    Error,
+    GetSubscriptionsResponse
+  >,
+): UseQueryResult<GetSubscriptionsResponse, Error> {
+  const apiRequest = useApiRequest();
+
+  return useQuery<GetSubscriptionsQuery, Error, GetSubscriptionsResponse>(
+    [QueryKeys.Subscriptions],
+    (values) =>
+      apiRequest
+        .get(`/subscription`)
+        .then((res) => transformToCamelCase(res.data)),
+    {
+      ...options,
+    },
+  );
+}

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: `/`,