Merge pull request #73 from bigcapitalhq/BIG-408-hide-the-project-name-entry-if-the-feature-was-not-enabled

fix(projects): hide the project name entry if the feature was not ena…

src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core';
 import { FastField, ErrorMessage } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from '@/components';
+import { FeatureCan, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
 
 import {
@@ -31,6 +31,7 @@ import {
   handleDateChange,
   inputIntent,
 } from '@/utils';
+import { Features } from '@/constants';
 
 /**
  * Fill form header.
@@ -170,19 +171,21 @@ function BillFormHeader() {
       </FastField>
 
       {/*------------ Project name -----------*/}
-      <FFormGroup
+      <FeatureCan feature={Features.Projects}>
-        name={'project_id'}
+        <FFormGroup
-        label={<T id={'bill.project_name.label'} />}
-        inline={true}
-        className={classNames('form-group--select-list', Classes.FILL)}
-      >
-        <ProjectsSelect
           name={'project_id'}
-          projects={projects}
+          label={<T id={'bill.project_name.label'} />}
-          input={BillProjectSelectButton}
+          inline={true}
-          popoverFill={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
-        />
+        >
-      </FFormGroup>
+          <ProjectsSelect
+            name={'project_id'}
+            projects={projects}
+            input={BillProjectSelectButton}
+            popoverFill={true}
+          />
+        </FFormGroup>
+      </FeatureCan>
     </div>
   );
 }

src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx

@@ -10,7 +10,7 @@ import {
   ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FFormGroup, FormattedMessage as T } from '@/components';
+import { FeatureCan, FFormGroup, FormattedMessage as T } from '@/components';
 import { FastField, Field, ErrorMessage } from 'formik';
 
 import {
@@ -22,6 +22,7 @@ import {
 } from '@/utils';
 import { customersFieldShouldUpdate } from './utils';
 import { CLASSES } from '@/constants/classes';
+import { Features } from '@/constants';
 import {
   CustomerSelectField,
   FieldRequiredHint,
@@ -58,7 +59,6 @@ function EstimateFormHeader({
   const handleEstimateNumberBtnClick = () => {
     openDialog('estimate-number-form', {});
   };
-
   const handleEstimateNoBlur = (form, field) => (event) => {
     const newValue = event.target.value;
 
@@ -71,7 +71,6 @@ function EstimateFormHeader({
       });
     }
   };
-
   // Syncs estimate number settings with the form.
   useObserveEstimateNoSettings(estimateNumberPrefix, estimateNextNumber);
 
@@ -228,19 +227,21 @@ function EstimateFormHeader({
       </FastField>
 
       {/*------------ Project name -----------*/}
-      <FFormGroup
+      <FeatureCan feature={Features.Projects}>
-        name={'project_id'}
+        <FFormGroup
-        label={<T id={'estimate.project_name.label'} />}
-        inline={true}
-        className={classNames('form-group--select-list', Classes.FILL)}
-      >
-        <ProjectsSelect
           name={'project_id'}
-          projects={projects}
+          label={<T id={'estimate.project_name.label'} />}
-          input={EstimateProjectSelectButton}
+          inline={true}
-          popoverFill={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
-        />
+        >
-      </FFormGroup>
+          <ProjectsSelect
+            name={'project_id'}
+            projects={projects}
+            input={EstimateProjectSelectButton}
+            popoverFill={true}
+          />
+        </FFormGroup>
+      </FeatureCan>
     </div>
   );
 }

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx

@@ -22,6 +22,7 @@ import {
   FieldRequiredHint,
   Icon,
   InputPrependButton,
+  FeatureCan,
 } from '@/components';
 import { momentFormatter, compose, tansformDateValue } from '@/utils';
 import { CLASSES } from '@/constants/classes';
@@ -40,6 +41,7 @@ import {
   ProjectsSelect,
   ProjectBillableEntriesLink,
 } from '@/containers/Projects/components';
+import { Features } from '@/constants';
 
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
@@ -238,24 +240,26 @@ function InvoiceFormHeaderFields({
       </FastField>
 
       {/*------------ Project name -----------*/}
-      <FFormGroup
+      <FeatureCan feature={Features.Projects}>
-        name={'project_id'}
+        <FFormGroup
-        label={<T id={'invoice.project_name.label'} />}
-        inline={true}
-        className={classNames('form-group--select-list', Classes.FILL)}
-      >
-        <ProjectsSelect
           name={'project_id'}
-          projects={projects}
+          label={<T id={'invoice.project_name.label'} />}
-          input={InvoiceProjectSelectButton}
+          inline={true}
-          popoverFill={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
-        />
+        >
-        {values?.project_id && (
+          <ProjectsSelect
-          <ProjectBillableEntriesLink projectId={values?.project_id}>
+            name={'project_id'}
-            <T id={'add_billable_entries'} />
+            projects={projects}
-          </ProjectBillableEntriesLink>
+            input={InvoiceProjectSelectButton}
-        )}
+            popoverFill={true}
-      </FFormGroup>
+          />
+          {values?.project_id && (
+            <ProjectBillableEntriesLink projectId={values?.project_id}>
+              <T id={'add_billable_entries'} />
+            </ProjectBillableEntriesLink>
+          )}
+        </FFormGroup>
+      </FeatureCan>
     </div>
   );
 }

src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx

@@ -11,7 +11,8 @@ import {
   Button,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from '@/components';
+import { toSafeInteger } from 'lodash';
+import { FeatureCan, FormattedMessage as T } from '@/components';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
 
 import { useAutofocus } from '@/hooks';
@@ -56,8 +57,7 @@ import {
   customersFieldShouldUpdate,
   accountsFieldShouldUpdate,
 } from './utils';
-
+import { Features } from '@/constants';
-import { toSafeInteger } from 'lodash';
 
 /**
  * Payment receive header fields.
@@ -341,19 +341,21 @@ function PaymentReceiveHeaderFields({
       </FastField>
 
       {/*------------ Project name -----------*/}
-      <FFormGroup
+      <FeatureCan feature={Features.Projects}>
-        name={'project_id'}
+        <FFormGroup
-        label={<T id={'payment_receive.project_name.label'} />}
-        inline={true}
-        className={classNames('form-group--select-list', Classes.FILL)}
-      >
-        <ProjectsSelect
           name={'project_id'}
-          projects={projects}
+          label={<T id={'payment_receive.project_name.label'} />}
-          input={PaymentReceiveProjectSelectButton}
+          inline={true}
-          popoverFill={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
-        />
+        >
-      </FFormGroup>
+          <ProjectsSelect
+            name={'project_id'}
+            projects={projects}
+            input={PaymentReceiveProjectSelectButton}
+            popoverFill={true}
+          />
+        </FFormGroup>
+      </FeatureCan>
     </div>
   );
 }

src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx

@@ -22,6 +22,7 @@ import {
   InputPrependButton,
   CustomerDrawerLink,
   FormattedMessage as T,
+  FeatureCan,
 } from '@/components';
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
@@ -44,6 +45,7 @@ import {
   ReceiptExchangeRateInputField,
   ReceiptProjectSelectButton,
 } from './components';
+import { Features } from '@/constants';
 
 /**
  * Receipt form header fields.
@@ -238,19 +240,21 @@ function ReceiptFormHeader({
       </FastField>
 
       {/*------------ Project name -----------*/}
-      <FFormGroup
+      <FeatureCan feature={Features.Projects}>
-        name={'project_id'}
+        <FFormGroup
-        label={<T id={'receipt.project_name.label'} />}
-        inline={true}
-        className={classNames('form-group--select-list', Classes.FILL)}
-      >
-        <ProjectsSelect
           name={'project_id'}
-          projects={projects}
+          label={<T id={'receipt.project_name.label'} />}
-          input={ReceiptProjectSelectButton}
+          inline={true}
-          popoverFill={true}
+          className={classNames('form-group--select-list', Classes.FILL)}
-        />
+        >
-      </FFormGroup>
+          <ProjectsSelect
+            name={'project_id'}
+            projects={projects}
+            input={ReceiptProjectSelectButton}
+            popoverFill={true}
+          />
+        </FFormGroup>
+      </FeatureCan>
     </div>
   );
 }