New account management

.env.example

@@ -34,3 +34,5 @@ VITE_ENABLE_DISCARD_CHANGES_TRACKING=false
 VITE_PUSHER_APP_KEY=
 
 VITE_RETURN_NUMBER_FIELD=false
+
+VITE_HOSTED_STRIPE_PK=

package.json

@@ -13,6 +13,7 @@
     "@reduxjs/toolkit": "^1.9.1",
     "@sentry/react": "^7.77.0",
     "@sentry/tracing": "^7.77.0",
+    "@stripe/stripe-js": "^4.8.0",
     "@tinymce/tinymce-react": "^5.0.1",
     "@tippyjs/react": "^4.2.6",
     "antd": "^5.6.1",

src/common/helpers/wait.ts

@@ -0,0 +1,40 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2024. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+export function wait(...selectors: string[]) {
+  return new Promise((resolve) => {
+    if (!selectors.length) {
+      resolve([]);
+      return;
+    }
+
+    const elements = selectors
+      .map((selector) => document.querySelector(selector))
+      .filter(Boolean);
+
+    if (elements.length === selectors.length) {
+      resolve(elements);
+      return;
+    }
+
+    const observer = new MutationObserver(() => {
+      const foundElements = selectors
+        .map((selector) => document.querySelector(selector))
+        .filter(Boolean);
+
+      if (foundElements.length === selectors.length) {
+        observer.disconnect();
+        resolve(foundElements);
+      }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+  });
+}

src/common/interfaces/company-gateway.ts

@@ -38,6 +38,14 @@ export interface CompanyGateway {
   token_billing: string;
   test_mode: boolean;
   always_show_required_fields: boolean;
+  is_default: boolean,
+  meta: {
+    exp_month: string;
+    exp_year: string;
+    brand: string;
+    last4: string;
+    type: number;
+  }; 
 }
 
 export interface FeesAndLimitsEntry {

src/common/queries/plans.ts

@@ -0,0 +1,35 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2024. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+import { useQuery } from 'react-query';
+import { request } from '../helpers/request';
+import { endpoint } from '../helpers';
+import { AxiosResponse } from 'axios';
+
+interface Plans {
+  features: {
+    enterprise_plan: string[];
+    free: string[];
+    premium_business_plan: string[];
+    pro_plan: string[];
+  };
+  plans: Record<string, number>;
+}
+
+export function usePlansQuery() {
+  return useQuery({
+    queryKey: ['plans'],
+    queryFn: () =>
+      request('GET', endpoint('/api/client/account_management/plans')).then(
+        (response: AxiosResponse<Plans>) => response.data
+      ),
+    staleTime: Infinity,
+  });
+}

src/components/Modal.tsx

@@ -132,7 +132,7 @@ export function Modal(props: Props) {
                   colorScheme: colors.$0,
                 }}
               >
-                <div className="flex w-full justify-between">
+                <div className="flex w-full justify-between isolate">
                   <Dialog.Title
                     as="h3"
                     className="text-lg leading-6 font-medium"

src/env.d.ts

@@ -13,6 +13,7 @@ interface ImportMetaEnv extends Readonly<Record<string, string>> {
   readonly VITE_IS_PRODUCTION: string;
   readonly VITE_WHITELABEL_INVOICE_URL: string;
   readonly VITE_PUSHER_APP_KEY: string;
+  readonly VITE_HOSTED_STRIPE_PK: string;
   readonly VITE_ENABLE_PEPPOL_STANDARD: string;
 }
 

src/pages/settings/account-management/common/hooks/useEnterpriseUtils.tsx

@@ -0,0 +1,212 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2024. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+import { useCurrentAccount } from '$app/common/hooks/useCurrentAccount';
+import { usePlansQuery } from '$app/common/queries/plans';
+import { get } from 'lodash';
+import { Plan } from '../../component/plan/Popup';
+import { Account } from '$app/common/interfaces/account';
+
+interface Rules {
+  [key: string]: {
+    term: 'month' | 'year';
+    condition: (account: Account) => boolean;
+  }[];
+}
+
+const rules: Rules = {
+  enterprise_plan: [
+    {
+      term: 'month',
+      condition: (account) => account.num_users < 2,
+    },
+    {
+      term: 'year',
+      condition: (account) => account.num_users < 2,
+    },
+    {
+      term: 'year',
+      condition: (account) =>
+        account.plan === 'enterprise' &&
+        account.num_users === 2 &&
+        account.plan_term === 'month',
+    },
+  ],
+  enterprise_plan_5: [
+    {
+      term: 'month',
+      condition: (account) => account.num_users < 5,
+    },
+    {
+      term: 'year',
+      condition: (account) => account.num_users < 5,
+    },
+    {
+      term: 'year',
+      condition: (account) =>
+        account.plan === 'enterprise' &&
+        account.num_users === 5 &&
+        account.plan_term === 'month',
+    },
+  ],
+  enterprise_plan_10: [
+    {
+      term: 'month',
+      condition: (account) => account.num_users < 10,
+    },
+    {
+      term: 'year',
+      condition: (account) => account.num_users < 10,
+    },
+    {
+      term: 'year',
+      condition: (account) =>
+        account.plan === 'enterprise' &&
+        account.num_users === 10 &&
+        account.plan_term === 'month',
+    },
+  ],
+  enterprise_plan_20: [
+    {
+      term: 'month',
+      condition: (account) => account.num_users < 20,
+    },
+    {
+      term: 'year',
+      condition: (account) => account.num_users < 20,
+    },
+    {
+      term: 'year',
+      condition: (account) =>
+        account.plan === 'enterprise' &&
+        account.num_users === 20 &&
+        account.plan_term === 'month',
+    },
+  ],
+  enterprise_plan_50: [
+    {
+      term: 'month',
+      condition: (account) => account.num_users < 50,
+    },
+    {
+      term: 'year',
+      condition: (account) => account.num_users < 50,
+    },
+    {
+      term: 'year',
+      condition: (account) =>
+        account.plan === 'enterprise' &&
+        account.num_users === 50 &&
+        account.plan_term === 'month',
+    },
+  ],
+};
+
+export function useEnterpriseUtils() {
+  const account = useCurrentAccount();
+  const { data: plans } = usePlansQuery();
+
+  function isEnterprisePlanVisible(plan: Plan, term: 'month' | 'year') {
+    if (account.plan === '' || account.plan === 'pro') {
+      return true;
+    }
+
+    const planRules = rules[plan];
+
+    if (planRules && account) {
+      for (const rule of planRules) {
+        if (rule.term === term && rule.condition(account)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  function getFirstAvailableEnterprise(term: 'month' | 'year') {
+    const available: Plan[] = [
+      'enterprise_plan',
+      'enterprise_plan_5',
+      'enterprise_plan_10',
+      'enterprise_plan_20',
+      'enterprise_plan_30',
+      'enterprise_plan_50',
+    ];
+
+    for (const plan of available) {
+      const planRules = rules[plan];
+
+      if (planRules && account) {
+        for (const rule of planRules) {
+          if (rule.term === term && rule.condition(account)) {
+            return plan;
+          }
+        }
+      }
+    }
+
+    return null;
+  }
+
+  function calculatePrice() {
+    const term = account.plan_term;
+
+    if (!plans?.plans) {
+      return 0;
+    }
+
+    if (account.num_users <= 2) {
+      return term === 'month'
+        ? get(plans, 'plans.enterprise_plan')
+        : get(plans, 'plans.enterprise_plan_annual');
+    }
+
+    if (account.num_users <= 5) {
+      return term === 'month'
+        ? get(plans, 'plans.enterprise_plan_5')
+        : get(plans, 'plans.enterprise_plan_annual_5');
+    }
+
+    if (account.num_users <= 10) {
+      return term === 'month'
+        ? get(plans, 'plans.enterprise_plan_10')
+        : get(plans, 'plans.enterprise_plan_annual_10');
+    }
+
+    if (account.num_users <= 20) {
+      return term === 'month'
+        ? get(plans, 'plans.enterprise_plan_20')
+        : get(plans, 'plans.enterprise_plan_annual_20');
+    }
+
+    if (account.num_users <= 30) {
+      return term === 'month'
+        ? get(plans, 'plans.enterprise_plan_30')
+        : get(plans, 'plans.enterprise_plan_annual_30');
+    }
+
+    if (account.num_users <= 50) {
+      return term === 'month'
+        ? get(plans, 'plans.enterprise_plan_50')
+        : get(plans, 'plans.enterprise_plan_annual_50');
+    }
+
+    return term === 'month'
+      ? get(plans, 'plans.enterprise_plan')
+      : get(plans, 'plans.enterprise_plan_annual');
+  }
+
+  return {
+    isEnterprisePlanVisible,
+    getFirstAvailableEnterprise,
+    calculatePrice,
+  };
+}