[Cleanup] Adjusting Designs Lists And Showing Alert Per Plan

src/common/generic/DesignSelector.tsx

@@ -23,22 +23,30 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { $refetch } from '../hooks/useRefetch';
 import { useAdmin } from '../hooks/permissions/useHasPermission';
+import { enterprisePlan } from '../guards/guards/enterprise-plan';
+import { proPlan } from '../guards/guards/pro-plan';
+import { useFreePlanDesigns } from '../hooks/useFreePlanDesigns';
 
 interface Props extends GenericSelectorProps<Design> {
   actionVisibility?: boolean;
   disableWithQueryParameter?: boolean;
 }
 
 export function DesignSelector(props: Props) {
+  const [t] = useTranslation();
+
+  const { isAdmin, isOwner } = useAdmin();
+
+  const freePlanDesigns = useFreePlanDesigns();
+
+  const { actionVisibility = true } = props;
+
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [design, setDesign] = useState<Design | null>(null);
   const [errors, setErrors] = useState<ValidationBag | null>(null);
 
-  const { t } = useTranslation();
   const { data } = useBlankDesignQuery({ enabled: isModalVisible });
 
-  const { isAdmin, isOwner } = useAdmin();
-
   useEffect(() => {
     if (data) {
       setDesign(data);
@@ -105,9 +113,7 @@ export function DesignSelector(props: Props) {
           action={{
             label: t('new_design'),
             onClick: () => setIsModalVisible(true),
-            visible:
-              typeof props.actionVisibility === 'undefined' ||
-              props.actionVisibility,
+            visible: actionVisibility,
           }}
           sortBy="name|asc"
           onDismiss={() => setDesign(null)}
@@ -141,14 +147,19 @@ export function DesignSelector(props: Props) {
           label: t('new_design'),
           onClick: () => setIsModalVisible(true),
           visible:
-            (typeof props.actionVisibility === 'undefined' ||
-              props.actionVisibility) &&
-            (isAdmin || isOwner),
+            actionVisibility &&
+            (isAdmin || isOwner) &&
+            (proPlan() || enterprisePlan()),
         }}
         sortBy="name|asc"
         onDismiss={props.onClearButtonClick}
         disableWithQueryParameter={props.disableWithQueryParameter}
         errorMessage={props.errorMessage}
+        {...(!proPlan() &&
+          !enterprisePlan() && {
+            includeOnly: freePlanDesigns,
+            includeByLabel: true,
+          })}
       />
     </>
   );

src/common/hooks/useFreePlanDesigns.ts

@@ -0,0 +1,13 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2022. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+export function useFreePlanDesigns() {
+  return ['Plain', 'Clean', 'Bold', 'Modern'];
+}

src/common/queries/designs.ts

@@ -17,17 +17,26 @@ import { AxiosResponse } from 'axios';
 import { GenericQueryOptions } from '$app/common/queries/invoices';
 import { route } from '$app/common/helpers/route';
 import { GenericSingleResourceResponse } from '$app/common/interfaces/generic-api-response';
+import { useFreePlanDesigns } from '../hooks/useFreePlanDesigns';
+import { enterprisePlan } from '../guards/guards/enterprise-plan';
+import { proPlan } from '../guards/guards/pro-plan';
 
 export function useDesignsQuery() {
+  const freePlanDesigns = useFreePlanDesigns();
+
   return useQuery<Design[]>(
     ['/api/v1/designs'],
     () =>
       request(
         'GET',
         endpoint('/api/v1/designs?status=active&sort=name|asc')
-      ).then(
-        (response: AxiosResponse<GenericManyResponse<Design>>) =>
-          response.data.data
+      ).then((response: AxiosResponse<GenericManyResponse<Design>>) =>
+        response.data.data.filter(
+          (design) =>
+            freePlanDesigns.includes(design.name) ||
+            proPlan() ||
+            enterprisePlan()
+        )
       ),
     { staleTime: Infinity }
   );

src/components/forms/Combobox.tsx

@@ -53,6 +53,8 @@ export interface ComboboxStaticProps<T = any> {
   nullable?: boolean;
   initiallyVisible?: boolean;
   exclude?: (string | number | boolean)[];
+  includeOnly?: (string | number | boolean)[];
+  includeByLabel?: boolean;
   action?: Action;
   onChange: (entry: Entry<T>) => unknown;
   onEmptyValues: (query: string) => unknown;
@@ -89,6 +91,8 @@ export function Combobox<T = any>({
   nullable,
   initiallyVisible = false,
   exclude = [],
+  includeOnly = [],
+  includeByLabel,
   action,
   onChange,
   onDismiss,
@@ -124,6 +128,12 @@ export function Combobox<T = any>({
     exclude.length > 0 ? !exclude.includes(entry.value) : true
   );
 
+  filteredOptions = filteredOptions.filter((entry) =>
+    includeOnly.length > 0
+      ? includeOnly.includes(entry[includeByLabel ? 'label' : 'value'])
+      : true
+  );
+
   useEffect(() => {
     const entry = entries.findIndex(
       (entry) =>
@@ -423,6 +433,8 @@ export function ComboboxStatic<T = any>({
   nullable,
   initiallyVisible = false,
   exclude = [],
+  includeOnly = [],
+  includeByLabel,
   action,
   onEmptyValues,
   onChange,
@@ -453,6 +465,12 @@ export function ComboboxStatic<T = any>({
     exclude.length > 0 ? !exclude.includes(entry.value) : true
   );
 
+  filteredValues = filteredValues.filter((entry) =>
+    includeOnly.length > 0
+      ? includeOnly.includes(entry[includeByLabel ? 'label' : 'value'])
+      : true
+  );
+
   const comboboxRef = useRef<HTMLDivElement>(null);
   const comboboxInputRef = useRef<HTMLInputElement>(null);
 
@@ -731,6 +749,8 @@ export interface ComboboxAsyncProps<T> {
   querySpecificEntry?: string;
   sortBy?: string | null;
   exclude?: (string | number | boolean)[];
+  includeOnly?: (string | number | boolean)[];
+  includeByLabel?: boolean;
   action?: Action;
   nullable?: boolean;
   onChange: (entry: Entry<T>) => unknown;
@@ -749,6 +769,8 @@ export function ComboboxAsync<T = any>({
   initiallyVisible,
   sortBy = 'created_at|desc',
   exclude,
+  includeOnly,
+  includeByLabel,
   action,
   nullable,
   onChange,
@@ -886,6 +908,8 @@ export function ComboboxAsync<T = any>({
         onDismiss={onDismiss}
         initiallyVisible={initiallyVisible}
         exclude={exclude}
+        includeOnly={includeOnly}
+        includeByLabel={includeByLabel}
         action={action}
         nullable={nullable}
         entryOptions={entryOptions}
@@ -905,6 +929,8 @@ export function ComboboxAsync<T = any>({
       onDismiss={onDismiss}
       initiallyVisible={initiallyVisible}
       exclude={exclude}
+      includeOnly={includeOnly}
+      includeByLabel={includeByLabel}
       action={action}
       nullable={nullable}
       entryOptions={entryOptions}

src/pages/settings/invoice-design/pages/custom-designs/CustomDesigns.tsx

@@ -8,31 +8,39 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
+import { enterprisePlan } from '$app/common/guards/guards/enterprise-plan';
+import { proPlan } from '$app/common/guards/guards/pro-plan';
 import { DataTable } from '$app/components/DataTable';
 import { EntityStatus } from '$app/components/EntityStatus';
 import { Inline } from '$app/components/Inline';
+import { CustomDesignsPlanAlert } from './components/CustomDesignsPlanAlert';
 
 export default function CustomDesigns() {
   return (
-    <DataTable
-      endpoint="/api/v1/designs?custom=true"
-      columns={[
-        {
-          id: 'name',
-          label: 'Name',
-          format: (field, resource) => (
-            <Inline>
-              <EntityStatus entity={resource} />
-              <p>{field}</p>
-            </Inline>
-          ),
-        },
-      ]}
-      resource="design"
-      linkToCreate="/settings/invoice_design/custom_designs/create"
-      bulkRoute="/api/v1/designs/bulk"
-      linkToEdit="/settings/invoice_design/custom_designs/:id/edit"
-      withResourcefulActions
-    />
+    <>
+      <CustomDesignsPlanAlert />
+
+      <DataTable
+        endpoint="/api/v1/designs?custom=true"
+        columns={[
+          {
+            id: 'name',
+            label: 'Name',
+            format: (field, resource) => (
+              <Inline>
+                <EntityStatus entity={resource} />
+                <p>{field}</p>
+              </Inline>
+            ),
+          },
+        ]}
+        resource="design"
+        linkToCreate="/settings/invoice_design/custom_designs/create"
+        bulkRoute="/api/v1/designs/bulk"
+        linkToEdit="/settings/invoice_design/custom_designs/:id/edit"
+        withResourcefulActions
+        hideEditableOptions={!proPlan() && !enterprisePlan()}
+      />
+    </>
   );
 }

src/pages/settings/invoice-design/pages/custom-designs/components/CustomDesignsPlanAlert.tsx

@@ -0,0 +1,55 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2022. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+import { useCurrentUser } from '$app/common/hooks/useCurrentUser';
+import { useTranslation } from 'react-i18next';
+import { MdInfoOutline } from 'react-icons/md';
+import { route } from '$app/common/helpers/route';
+import { Alert } from '$app/components/Alert';
+import { Link } from '$app/components/forms';
+import { proPlan } from '$app/common/guards/guards/pro-plan';
+import { enterprisePlan } from '$app/common/guards/guards/enterprise-plan';
+import CommonProps from '$app/common/interfaces/common-props.interface';
+
+export function CustomDesignsPlanAlert(props?: CommonProps) {
+  const [t] = useTranslation();
+
+  const user = useCurrentUser();
+
+  return (
+    <>
+      {!proPlan() && !enterprisePlan() && (
+        <div className={props?.className}>
+          <Alert className="mb-4" type="warning" disableClosing>
+            <div className="flex items-center justify-between">
+              <p className="inline-flex items-center space-x-1">
+                <MdInfoOutline fontSize={18} />
+                <span>{t('upgrade_to_paid_plan')}.</span>
+              </p>
+
+              {user?.company_user && (
+                <Link
+                  to={
+                    user.company_user.ninja_portal_url ||
+                    route('/settings/account_management')
+                  }
+                  className="ml-10"
+                  external
+                >
+                  {t('plan_change')}
+                </Link>
+              )}
+            </div>
+          </Alert>
+        </div>
+      )}
+    </>
+  );
+}

src/pages/settings/invoice-design/pages/custom-designs/pages/create/Create.tsx

@@ -9,6 +9,8 @@
  */
 
 import { DesignSelector } from '$app/common/generic/DesignSelector';
+import { enterprisePlan } from '$app/common/guards/guards/enterprise-plan';
+import { proPlan } from '$app/common/guards/guards/pro-plan';
 import { endpoint } from '$app/common/helpers';
 import { request } from '$app/common/helpers/request';
 import { route } from '$app/common/helpers/route';
@@ -26,6 +28,7 @@ import { AxiosError } from 'axios';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { CustomDesignsPlanAlert } from '../../components/CustomDesignsPlanAlert';
 
 export default function Create() {
   const { t } = useTranslation();
@@ -73,12 +76,15 @@ export default function Create() {
             }
           });
       },
+      disableSaveButton: !proPlan() && !enterprisePlan(),
     },
     [design]
   );
 
   return (
     <Container>
+      <CustomDesignsPlanAlert />
+
       <Card title={t('new_design')}>
         <Element leftSide={t('name')}>
           <InputField

src/pages/settings/invoice-design/pages/general-settings/GeneralSettings.tsx

@@ -33,6 +33,8 @@ import { updatingRecordsAtom } from '../../common/atoms';
 import { request } from '$app/common/helpers/request';
 import axios, { AxiosPromise } from 'axios';
 import { useCurrentSettingsLevel } from '$app/common/hooks/useCurrentSettingsLevel';
+import { proPlan } from '$app/common/guards/guards/pro-plan';
+import { enterprisePlan } from '$app/common/guards/guards/enterprise-plan';
 
 export interface GeneralSettingsPayload {
   client_id: string;
@@ -99,17 +101,22 @@ export default function GeneralSettings() {
           {isCompanySettingsActive && (
             <>
               <ClientDetails />
-              <CompanyDetails />
-              <CompanyAddress />
-              <InvoiceDetails />
-              <QuoteDetails />
-              <CreditDetails />
-              <VendorDetails />
-              <PurchaseOrderDetails />
-              <ProductColumns />
-              <ProductQuoteColumns />
-              <TaskColumns />
-              <TotalFields />
+
+              {(proPlan() || enterprisePlan()) && (
+                <>
+                  <CompanyDetails />
+                  <CompanyAddress />
+                  <InvoiceDetails />
+                  <QuoteDetails />
+                  <CreditDetails />
+                  <VendorDetails />
+                  <PurchaseOrderDetails />
+                  <ProductColumns />
+                  <ProductQuoteColumns />
+                  <TaskColumns />
+                  <TotalFields />
+                </>
+              )}
             </>
           )}
         </div>