feat: description to billing page

packages/server/src/services/Dashboard/DashboardService.ts

@@ -1,7 +1,8 @@
+import { Inject, Service } from 'typedi';
 import { IFeatureAllItem, ISystemUser } from '@/interfaces';
 import { FeaturesManager } from '@/services/Features/FeaturesManager';
 import HasTenancyService from '@/services/Tenancy/TenancyService';
-import { Inject, Service } from 'typedi';
+import config from '@/config';
 
 interface IRoleAbility {
   subject: string;
@@ -11,15 +12,16 @@ interface IRoleAbility {
 interface IDashboardBootMeta {
   abilities: IRoleAbility[];
   features: IFeatureAllItem[];
+  isBigcapitalCloud: boolean;
 }
 
 @Service()
 export default class DashboardService {
   @Inject()
-  tenancy: HasTenancyService;
+  private tenancy: HasTenancyService;
 
   @Inject()
-  featuresManager: FeaturesManager;
+  private featuresManager: FeaturesManager;
 
   /**
    * Retrieve dashboard meta.
@@ -39,6 +41,7 @@ export default class DashboardService {
     return {
       abilities,
       features,
+      isBigcapitalCloud: config.hostedOnBigcapitalCloud
     };
   };
 

packages/webapp/src/components/Dashboard/TopbarUser.tsx

@@ -15,7 +15,7 @@ import { useAuthActions } from '@/hooks/state';
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 
-import { useAuthenticatedAccount } from '@/hooks/query';
+import { useAuthenticatedAccount, useDashboardMeta } from '@/hooks/query';
 import { firstLettersArgs, compose } from '@/utils';
 
 /**
@@ -31,6 +31,9 @@ function DashboardTopbarUser({
   // Retrieve authenticated user information.
   const { data: user } = useAuthenticatedAccount();
 
+  const { data: dashboardMeta } = useDashboardMeta({
+    keepPreviousData: true,
+  });
   const onClickLogout = () => {
     setLogout();
   };
@@ -58,7 +61,12 @@ function DashboardTopbarUser({
             }
           />
           <MenuDivider />
-          <MenuItem text={'Billing'} onClick={() => history.push('/billing')} />
+          {dashboardMeta.is_bigcapital_cloud && (
+            <MenuItem
+              text={'Billing'}
+              onClick={() => history.push('/billing')}
+            />
+          )}
           <MenuItem
             text={<T id={'keyboard_shortcuts'} />}
             onClick={onKeyboardShortcut}

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

@@ -1,12 +1,21 @@
 // @ts-nocheck
 import * as R from 'ramda';
-import { Button } from '@blueprintjs/core';
+import { Redirect } from 'react-router-dom';
-import withAlertActions from '../Alert/withAlertActions';
 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>

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

@@ -15,9 +15,7 @@ export function BillingPageContent() {
   return (
     <Box className={styles.root}>
       <Text>
-        Transactions locking has the ability to lock all organization
+        Only pay for what you really need. All plans come with 24/7 customer support.
-        transactions so users can’t edit, delete or create new transactions
-        during the past period.
       </Text>
 
       <Group style={{ marginTop: '2rem' }}>

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

@@ -61,9 +61,8 @@ function SubscriptionRoot({ openAlert, openDrawer }) {
       </Stack>
 
       <Text className={styles.description}>
-        Transactions locking has the ability to lock all organization
+        Control your business bookkeeping with automated accounting, to run
-        transactions so users can’t edit, delete or create new transactions
+        intelligent reports for faster decision-making.
-        during the past period.
       </Text>
 
       <Stack align="flex-start" spacing={8} className={styles.actions}>

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

@@ -37,7 +37,7 @@ function CancelMainSubscriptionAlert({
     cancelSubscription()
       .then(() => {
         AppToaster.show({
-          message: 'The subscription has been cancel.',
+          message: 'The subscription has been canceled.',
           intent: Intent.SUCCESS,
         });
       })
@@ -63,7 +63,14 @@ function CancelMainSubscriptionAlert({
       onConfirm={handleConfirm}
       loading={isLoading}
     >
-      <p>asdfsadf asdf asdfdsaf</p>
+      <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>
   );
 }

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

@@ -62,7 +62,13 @@ function ResumeMainSubscriptionAlert({
       onConfirm={handleConfirm}
       loading={isLoading}
     >
-      <p>asdfsadf asdf asdfdsaf</p>
+      <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>
   );
 }