feat: upgrade the subscription plans

packages/webapp/src/store/plans/plans.reducer.tsx

@@ -1,70 +1,46 @@
-// @ts-nocheck
-import { createReducer } from '@reduxjs/toolkit';
-import t from '@/store/types';
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { SubscriptionPlans } from '@/constants/subscriptionModels';
 
-const getSubscriptionPlans = () => [
-  {
-    name: 'Capital Basic',
-    slug: 'capital_basic',
-    description: 'Good for service businesses that just started.',
-    features: [
-      'Sale Invoices and Estimates',
-      'Tracking Expenses',
-      'Customize Invoice',
-      'Manual Journals',
-      'Bank Reconciliation',
-      'Chart of Accounts',
-      'Taxes',
-      'Basic Financial Reports & Insights',
-    ],
-    price: '$29',
-    pricePeriod: 'Per Year',
-  },
-  {
-    name: 'Capital Plus',
-    slug: 'capital_plus',
-    description:
-      'Good for businesses have inventory and want more financial reports.',
-    features: [
-      'All Capital Basic features',
-      'Manage Bills',
-      'Inventory Tracking',
-      'Multi Currencies',
-      'Predefined user roles.',
-      'Transactions locking.',
-      'Smart Financial Reports.',
-    ],
-    price: '$29',
-    pricePeriod: 'Per Year',
-    featured: true,
-  },
-  {
-    name: 'Capital Big',
-    slug: 'essentials',
-    description: 'Good for businesses have multiple inventory or branches.',
-    features: [
-      'All Capital Plus features',
-      'Multiple Warehouses',
-      'Multiple Branches',
-      'Invite >= 15 Users',
-    ],
-    price: '$29',
-    pricePeriod: 'Per Year',
-  },
-];
+export enum SubscriptionPlansPeriod {
+  Monthly = 'monthly',
+  Annually = 'Annually',
+}
 
-const initialState = {
-  plans: [],
-  periods: [],
-};
+interface StorePlansState {
+  plans: any;
+  plansPeriod: SubscriptionPlansPeriod;
+}
 
-export default createReducer(initialState, {
-  /**
-   * Initialize the subscription plans.
-   */
-  [t.INIT_SUBSCRIPTION_PLANS]: (state) => {
-    const plans = getSubscriptionPlans();
+export const SubscriptionPlansSlice = createSlice({
+  name: 'plans',
+  initialState: {
+    plans: [],
+    periods: [],
+    plansPeriod: 'monthly',
+  } as StorePlansState,
+  reducers: {
+    /**
+     * Initialize the subscription plans.
+     * @param {StorePlansState} state
+     */
+    initSubscriptionPlans: (state: StorePlansState) => {
+      const plans = SubscriptionPlans;
+      state.plans = plans;
+    },
 
-    state.plans = plans;
+    /**
+     * Changes the plans period (monthly or annually).
+     * @param {StorePlansState} state
+     * @param {PayloadAction<{ period: SubscriptionPlansPeriod }>} action
+     */
+    changePlansPeriod: (
+      state: StorePlansState,
+      action: PayloadAction<{ period: SubscriptionPlansPeriod }>,
+    ) => {
+      state.plansPeriod = action.payload.period;
+    },
   },
 });
+
+export const { initSubscriptionPlans, changePlansPeriod } =
+  SubscriptionPlansSlice.actions;

packages/webapp/src/store/plans/plans.selectors.tsx

@@ -2,19 +2,21 @@
 import { createSelector } from 'reselect';
 
 const plansSelector = (state) => state.plans.plans;
-const planSelector = (state, props) => state.plans.plans
-  .find((plan) => plan.slug === props.planSlug);
+const planSelector = (state, props) =>
+  state.plans.plans.find((plan) => plan.slug === props.planSlug);
+
+const plansPeriodSelector = (state) => state.plans.plansPeriod;
 
 // Retrieve manual jounral current page results.
-export const getPlansSelector = () => createSelector(
-  plansSelector,
-  (plans) => {
+export const getPlansSelector = () =>
+  createSelector(plansSelector, (plans) => {
     return plans;
-  },
-);
+  });
 
 // Retrieve plan details.
-export const getPlanSelector = () => createSelector(
-  planSelector,
-  (plan) => plan,
-)
+export const getPlanSelector = () =>
+  createSelector(planSelector, (plan) => plan);
+
+// Retrieves the plans period (monthly or annually).
+export const getPlansPeriodSelector = () =>
+  createSelector(plansPeriodSelector, (periods) => periods);

packages/webapp/src/store/reducers.tsx

@@ -32,13 +32,17 @@ import paymentMades from './PaymentMades/paymentMades.reducer';
 import organizations from './organizations/organizations.reducers';
 import subscriptions from './subscription/subscription.reducer';
 import inventoryAdjustments from './inventoryAdjustments/inventoryAdjustment.reducer';
-import plans from './plans/plans.reducer';
+import { SubscriptionPlansSlice } from './plans/plans.reducer';
 import creditNotes from './CreditNote/creditNote.reducer';
 import vendorCredit from './VendorCredit/VendorCredit.reducer';
 import warehouseTransfers from './WarehouseTransfer/warehouseTransfer.reducer';
 import projects from './Project/projects.reducer';
 import { PlaidSlice } from './banking/banking.reducer';
 
+export interface ApplicationState {
+  
+}
+
 const appReducer = combineReducers({
   authentication,
   organizations,
@@ -69,7 +73,7 @@ const appReducer = combineReducers({
   paymentReceives,
   paymentMades,
   inventoryAdjustments,
-  plans,
+  plans: SubscriptionPlansSlice.reducer,
   creditNotes,
   vendorCredit,
   warehouseTransfers,