docs: update .all-contributorsrc [skip ci]

Fixed Quick Payment Dialogs

.all-contributorsrc

@@ -132,6 +132,15 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "oleynikd",
+      "name": "Denis",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3976868?v=4",
+      "profile": "https://github.com/oleynikd",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -126,6 +126,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="http://vederis.id"><img src="https://avatars.githubusercontent.com/u/13505006?v=4?s=100" width="100px;" alt="Vederis Leunardus"/><br /><sub><b>Vederis Leunardus</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/commits?author=cloudsbird" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://www.pivoten.com"><img src="https://avatars.githubusercontent.com/u/104120598?v=4?s=100" width="100px;" alt="Chris Cantrell"/><br /><sub><b>Chris Cantrell</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3Accantrell72" title="Bug reports">🐛</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/oleynikd"><img src="https://avatars.githubusercontent.com/u/3976868?v=4?s=100" width="100px;" alt="Denis"/><br /><sub><b>Denis</b></sub></a><br /><a href="https://github.com/bigcapitalhq/bigcapital/issues?q=author%3Aoleynikd" title="Bug reports">🐛</a></td>
+    </tr>
   </tbody>
 </table>
 

packages/server/src/api/controllers/Subscription/SubscriptionController.ts

@@ -8,7 +8,6 @@ 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 {
@@ -18,9 +17,6 @@ export class SubscriptionController extends BaseController {
   @Inject()
   private lemonSqueezyService: LemonSqueezyService;
 
-  @Inject()
-  private subscriptionApp: SubscriptionApplication;
-
   /**
    * Router constructor.
    */
@@ -37,14 +33,6 @@ 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;
@@ -97,84 +85,4 @@ 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,8 +1,7 @@
-import { Inject, Service } from 'typedi';
 import { IFeatureAllItem, ISystemUser } from '@/interfaces';
 import { FeaturesManager } from '@/services/Features/FeaturesManager';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
-import config from '@/config';
+import { Inject, Service } from 'typedi';
 
 interface IRoleAbility {
   subject: string;
@@ -12,16 +11,15 @@ interface IRoleAbility {
 interface IDashboardBootMeta {
   abilities: IRoleAbility[];
   features: IFeatureAllItem[];
-  isBigcapitalCloud: boolean;
 }
 
 @Service()
 export default class DashboardService {
   @Inject()
-  private tenancy: HasTenancyService;
+  tenancy: HasTenancyService;
 
   @Inject()
-  private featuresManager: FeaturesManager;
+  featuresManager: FeaturesManager;
 
   /**
    * Retrieve dashboard meta.
@@ -41,7 +39,6 @@ export default class DashboardService {
     return {
       abilities,
       features,
-      isBigcapitalCloud: config.hostedOnBigcapitalCloud
     };
   };
 

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

@@ -1,168 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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,50 +1,17 @@
-import { Inject, Service } from 'typedi';
-import { getSubscription } from '@lemonsqueezy/lemonsqueezy.js';
-import { PromisePool } from '@supercharge/promise-pool';
+import { Service } from 'typedi';
 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) {
-    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,
-      }
+    const subscriptions = await PlanSubscription.query().where(
+      'tenant_id',
+      tenantId
     );
+    return subscriptions;
   }
 }

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

@@ -1,20 +0,0 @@
-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,12 +41,9 @@ export default {
   },
 
   /**
-   * Organization subscription.
+   * User subscription events.
    */
   subscription: {
-    onSubscriptionCanceled: 'onSubscriptionCanceled',
-    onSubscriptionResumed: 'onSubscriptionResumed',
-    onSubscriptionPlanChanged: 'onSubscriptionPlanChanged',
     onSubscribed: 'onOrganizationSubscribed',
   },
 

packages/server/src/system/migrations/20240727094214_add_lemon_subscription_id_to_subscriptions_table.js

@@ -1,11 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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,15 +4,6 @@ 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.
    */
@@ -31,7 +22,7 @@ export default class PlanSubscription extends mixin(SystemModel) {
    * Defined virtual attributes.
    */
   static get virtualAttributes() {
-    return ['active', 'inactive', 'ended', 'canceled', 'onTrial', 'status'];
+    return ['active', 'inactive', 'ended', 'onTrial'];
   }
 
   /**
@@ -47,7 +38,7 @@ export default class PlanSubscription extends mixin(SystemModel) {
         builder.where('trial_ends_at', '>', now);
       },
 
-      inactiveSubscriptions(builder) {
+      inactiveSubscriptions() {
         builder.modify('endedTrial');
         builder.modify('endedPeriod');
       },
@@ -107,65 +98,35 @@ export default class PlanSubscription extends mixin(SystemModel) {
   }
 
   /**
-   * Check if the subscription is active.
+   * Check if subscription is active.
    * @return {Boolean}
    */
-  public active() {
-    return this.onTrial() || !this.ended();
+  active() {
+    return !this.ended() || this.onTrial();
   }
 
   /**
-   * Check if the subscription is inactive.
+   * Check if subscription is inactive.
    * @return {Boolean}
    */
-  public inactive() {
+  inactive() {
     return !this.active();
   }
 
   /**
-   * Check if paid subscription period has ended.
+   * Check if subscription period has ended.
    * @return {Boolean}
    */
-  public ended() {
+  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}
    */
-  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';
+  onTrial() {
+    return this.trailEndsAt ? moment().isAfter(this.trailEndsAt) : false;
   }
 
   /**
@@ -180,7 +141,7 @@ export default class PlanSubscription extends mixin(SystemModel) {
     const period = new SubscriptionPeriod(
       invoiceInterval,
       invoicePeriod,
-      start
+      start,
     );
 
     const startsAt = period.getStartDate();
@@ -196,7 +157,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, useDashboardMeta } from '@/hooks/query';
+import { useAuthenticatedAccount } from '@/hooks/query';
 import { firstLettersArgs, compose } from '@/utils';
 
 /**
@@ -31,9 +31,6 @@ function DashboardTopbarUser({
   // Retrieve authenticated user information.
   const { data: user } = useAuthenticatedAccount();
 
-  const { data: dashboardMeta } = useDashboardMeta({
-    keepPreviousData: true,
-  });
   const onClickLogout = () => {
     setLogout();
   };
@@ -61,12 +58,6 @@ function DashboardTopbarUser({
             }
           />
           <MenuDivider />
-          {dashboardMeta.is_bigcapital_cloud && (
-            <MenuItem
-              text={'Billing'}
-              onClick={() => history.push('/billing')}
-            />
-          )}
           <MenuItem
             text={<T id={'keyboard_shortcuts'} />}
             onClick={onKeyboardShortcut}
@@ -88,4 +79,6 @@ function DashboardTopbarUser({
     </Popover>
   );
 }
-export default compose(withDialogActions)(DashboardTopbarUser);
+export default compose(
+  withDialogActions,
+)(DashboardTopbarUser);

packages/webapp/src/components/DrawersContainer.tsx

@@ -22,7 +22,6 @@ 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';
 
@@ -64,7 +63,6 @@ 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,5 +24,4 @@ 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,7 +27,6 @@ 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,
@@ -57,6 +56,5 @@ export default [
   ...ProjectAlerts,
   ...TaxRatesAlerts,
   ...CashflowAlerts,
-  ...BankRulesAlerts,
-  ...SubscriptionAlerts
+  ...BankRulesAlerts
 ];

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx

@@ -3,15 +3,14 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { pick } from 'lodash';
-
+import { omit } from 'lodash';
 import { AppToaster } from '@/components';
 import { CreateQuickPaymentMadeFormSchema } from './QuickPaymentMade.schema';
 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
 import QuickPaymentMadeFormContent from './QuickPaymentMadeFormContent';
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
-import { defaultPaymentMade, transformErrors } from './utils';
+import { defaultPaymentMade, transformBillToForm, transformErrors } from './utils';
 import { compose } from '@/utils';
 
 /**
@@ -21,31 +20,24 @@ function QuickPaymentMadeForm({
   // #withDialogActions
   closeDialog,
 }) {
-  
-  const {
-    bill,
-    dialogName,
-    createPaymentMadeMutate,
-  } = useQuickPaymentMadeContext();
+  const { bill, dialogName, createPaymentMadeMutate } =
+    useQuickPaymentMadeContext();
 
-  // Initial form values
+  // Initial form values.
   const initialValues = {
     ...defaultPaymentMade,
-    ...bill,
+    ...transformBillToForm(bill),
   };
-
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
-    const entries = [values]
-      .filter((entry) => entry.id && entry.payment_amount)
-      .map((entry) => ({
-        bill_id: entry.id,
-        ...pick(entry, ['payment_amount']),
-      }));
-
+    const entries = [
+      {
+        payment_amount: values.amount,
+        bill_id: values.bill_id,
+      },
+    ];
     const form = {
-      ...values,
-      vendor_id: values?.vendor?.id,
+      ...omit(values, ['bill_id']),
       entries,
     };
 

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx

@@ -124,7 +124,7 @@ function QuickPaymentMadeFormFields({
         </Col>
       </Row>
       {/*------------ Amount Received -----------*/}
-      <FastField name={'payment_amount'}>
+      <FastField name={'amount'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -135,7 +135,7 @@ function QuickPaymentMadeFormFields({
             labelInfo={<FieldRequiredHint />}
             className={classNames('form-group--payment_amount', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_amount" />}
+            helperText={<ErrorMessage name="amount" />}
           >
             <ControlGroup>
               <InputPrependText text={values.currency_code} />
@@ -144,7 +144,7 @@ function QuickPaymentMadeFormFields({
                 value={value}
                 minimal={true}
                 onChange={(amount) => {
-                  setFieldValue('payment_amount', amount);
+                  setFieldValue('amount', amount);
                 }}
                 intent={inputIntent({ error, touched })}
                 inputRef={(ref) => (paymentMadeFieldRef.current = ref)}

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import { DialogContent } from '@/components';
 import {
   useBill,
@@ -11,7 +11,6 @@ import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import { pick } from 'lodash';
 
-
 const QuickPaymentMadeContext = React.createContext();
 
 /**
@@ -40,13 +39,14 @@ function QuickPaymentMadeFormProvider({ query, billId, dialogName, ...props }) {
     isSuccess: isBranchesSuccess,
   } = useBranches(query, { enabled: isBranchFeatureCan });
 
+  const paymentBill = useMemo(
+    () => pick(bill, ['id', 'due_amount', 'vendor_id', 'currency_code']),
+    [bill],
+  );
+
   // State provider.
   const provider = {
-    bill: {
-      ...pick(bill, ['id', 'due_amount', 'vendor', 'currency_code']),
-      vendor_id: bill?.vendor?.display_name,
-      payment_amount: bill?.due_amount,
-    },
+    bill: paymentBill,
     accounts,
     branches,
     dialogName,

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx

@@ -2,24 +2,25 @@
 import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
-import { first } from 'lodash';
+import { first, pick } from 'lodash';
+import { useFormikContext } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from '@/components';
-import { useFormikContext } from 'formik';
 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
 import { PAYMENT_MADE_ERRORS } from '@/containers/Purchases/PaymentMades/constants';
 
 // Default initial values of payment made.
 export const defaultPaymentMade = {
+  bill_id: '',
   vendor_id: '',
   payment_account_id: '',
   payment_date: moment(new Date()).format('YYYY-MM-DD'),
   reference: '',
   payment_number: '',
+  amount: '',
   // statement: '',
   exchange_rate: 1,
   branch_id: '',
-  entries: [{ bill_id: '', payment_amount: '' }],
 };
 
 export const transformErrors = (errors, { setFieldError }) => {
@@ -58,3 +59,11 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+export const transformBillToForm = (bill) => {
+  return {
+    ...pick(bill, ['vendor_id', 'currency_code']),
+    amount: bill.due_amount,
+    bill_id: bill.id,
+  };
+}

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { pick, defaultTo, omit } from 'lodash';
+import { defaultTo, omit } from 'lodash';
 
 import { AppToaster } from '@/components';
 import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
@@ -12,7 +12,11 @@ import QuickPaymentReceiveFormContent from './QuickPaymentReceiveFormContent';
 
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
-import { defaultInitialValues, transformErrors } from './utils';
+import {
+  defaultInitialValues,
+  transformErrors,
+  transformInvoiceToForm,
+} from './utils';
 import { compose, transactionNumber } from '@/utils';
 
 /**
@@ -26,14 +30,10 @@ function QuickPaymentReceiveForm({
   paymentReceiveAutoIncrement,
   paymentReceiveNumberPrefix,
   paymentReceiveNextNumber,
-  preferredDepositAccount
+  preferredDepositAccount,
 }) {
-  
-  const {
-    dialogName,
-    invoice,
-    createPaymentReceiveMutate,
-  } = useQuickPaymentReceiveContext();
+  const { dialogName, invoice, createPaymentReceiveMutate } =
+    useQuickPaymentReceiveContext();
 
   // Payment receive number.
   const nextPaymentNumber = transactionNumber(
@@ -48,24 +48,22 @@ function QuickPaymentReceiveForm({
       payment_receive_no: nextPaymentNumber,
     }),
     deposit_account_id: defaultTo(preferredDepositAccount, ''),
-    ...invoice,
+    ...transformInvoiceToForm(invoice),
   };
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
-    const entries = [values]
-      .filter((entry) => entry.id && entry.payment_amount)
-      .map((entry) => ({
-        invoice_id: entry.id,
-        ...pick(entry, ['payment_amount']),
-      }));
-
+    const entries = [
+      {
+        invoice_id: values.invoice_id,
+        payment_amount: values.amount,
+      },
+    ];
     const form = {
-      ...omit(values, ['payment_receive_no']),
+      ...omit(values, ['payment_receive_no', 'invoice_id']),
       ...(!paymentReceiveAutoIncrement && {
         payment_receive_no: values.payment_receive_no,
       }),
-      customer_id: values.customer.id,
       entries,
     };
 

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx

@@ -128,7 +128,7 @@ function QuickPaymentReceiveFormFields({
         </Col>
       </Row>
       {/*------------ Amount Received -----------*/}
-      <FastField name={'payment_amount'}>
+      <FastField name={'amount'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -139,7 +139,7 @@ function QuickPaymentReceiveFormFields({
             labelInfo={<FieldRequiredHint />}
             className={classNames('form-group--payment_amount', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_amount" />}
+            helperText={<ErrorMessage name="amount" />}
           >
             <ControlGroup>
               <InputPrependText text={values.currency_code} />
@@ -148,7 +148,7 @@ function QuickPaymentReceiveFormFields({
                 value={value}
                 minimal={true}
                 onChange={(amount) => {
-                  setFieldValue('payment_amount', amount);
+                  setFieldValue('amount', amount);
                 }}
                 intent={inputIntent({ error, touched })}
                 inputRef={(ref) => (paymentReceiveFieldRef.current = ref)}

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useContext, createContext } from 'react';
+import React, { useContext, createContext, useMemo } from 'react';
 import { pick } from 'lodash';
 import { DialogContent } from '@/components';
 import { Features } from '@/constants';
@@ -47,15 +47,16 @@ function QuickPaymentReceiveFormProvider({
     isSuccess: isBranchesSuccess,
   } = useBranches(query, { enabled: isBranchFeatureCan });
 
+  const invoicePayment = useMemo(
+    () => pick(invoice, ['id', 'due_amount', 'customer_id', 'currency_code']),
+    [invoice],
+  );
+
   // State provider.
   const provider = {
     accounts,
     branches,
-    invoice: {
-      ...pick(invoice, ['id', 'due_amount', 'customer', 'currency_code']),
-      customer_id: invoice?.customer?.display_name,
-      payment_amount: invoice.due_amount,
-    },
+    invoice: invoicePayment,
     isAccountsLoading,
     isSettingsLoading,
     isBranchesSuccess,

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
-import { first } from 'lodash';
+import { first, pick } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from '@/components';
 
@@ -10,15 +10,16 @@ import { useFormikContext } from 'formik';
 import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
 
 export const defaultInitialValues = {
+  invoice_id: '',
   customer_id: '',
   deposit_account_id: '',
   payment_receive_no: '',
   payment_date: moment(new Date()).format('YYYY-MM-DD'),
   reference_no: '',
+  amount: '',
   // statement: '',
   exchange_rate: 1,
   branch_id: '',
-  entries: [{ invoice_id: '', payment_amount: '' }],
 };
 
 export const transformErrors = (errors, { setFieldError }) => {
@@ -44,7 +45,9 @@ export const transformErrors = (errors, { setFieldError }) => {
   }
   if (getError('PAYMENT_ACCOUNT_CURRENCY_INVALID')) {
     AppToaster.show({
-      message: intl.get('payment_Receive.error.payment_account_currency_invalid'),
+      message: intl.get(
+        'payment_Receive.error.payment_account_currency_invalid',
+      ),
       intent: Intent.DANGER,
     });
   }
@@ -64,3 +67,11 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+export const transformInvoiceToForm = (invoice) => {
+  return {
+    ...pick(invoice, ['customer_id', 'currency_code']),
+    amount: invoice.due_amount,
+    invoice_id: invoice.id,
+  };
+};

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

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

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

@@ -1,66 +1,28 @@
-// @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 { Group } from '@/components';
+import { SubscriptionPlan } from './SubscriptionPlan';
 import { useSubscriptionPlans } from './hooks';
-import { withPlans } from '@/containers/Subscriptions/withPlans';
-import { withSubscriptionPlanMapper } from '@/containers/Subscriptions/component/withSubscriptionPlanMapper';
 
-interface SubscriptionPlansProps {
-  wrapProps?: GroupProps;
-  onSubscribe?: (variantId: number) => void;
-}
-
-export function SubscriptionPlans({
-  wrapProps,
-  onSubscribe,
-}: SubscriptionPlansProps) {
+export function SubscriptionPlans() {
   const subscriptionPlans = useSubscriptionPlans();
 
   return (
-    <Group spacing={14} noWrap align="stretch" {...wrapProps}>
+    <Group spacing={14} noWrap align="stretch">
       {subscriptionPlans.map((plan, index) => (
-        <SubscriptionPlanMapped key={index} plan={plan} />
+        <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}
+        />
       ))}
     </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

@@ -0,0 +1,95 @@
+// @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

@@ -1,28 +0,0 @@
-// @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

@@ -1,33 +0,0 @@
-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

@@ -1,8 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  padding: 32px 40px;
-  min-width: 800px;
-  max-width: 900px;
-  width: 75%;
-}

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

@@ -1,26 +0,0 @@
-// @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

@@ -0,0 +1,16 @@
+// @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

@@ -0,0 +1,59 @@
+// @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

@@ -0,0 +1,49 @@
+// @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

@@ -0,0 +1,54 @@
+// @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

@@ -0,0 +1,41 @@
+// @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

@@ -0,0 +1,38 @@
+// @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

@@ -1,59 +0,0 @@
-
-.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

@@ -1,156 +0,0 @@
-// @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

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

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

@@ -0,0 +1,42 @@
+// @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

@@ -0,0 +1,47 @@
+// @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

@@ -1,17 +0,0 @@
-// @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

@@ -1,81 +0,0 @@
-// @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

@@ -1,79 +0,0 @@
-// @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

@@ -1,23 +0,0 @@
-// @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/withSubscriptionPlanMapper.tsx

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

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

@@ -1,29 +0,0 @@
-// @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

@@ -1,39 +0,0 @@
-// @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

@@ -1,72 +0,0 @@
-// @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

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

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

@@ -0,0 +1,9 @@
+// @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

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

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

@@ -1,196 +0,0 @@
-// @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,13 +1231,6 @@ 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: `/`,