feat: assign default sell/purchase tax rates to items (#261)

packages/webapp/src/containers/Items/ItemFormBody.tsx

@@ -29,14 +29,16 @@ import {
   costPriceFieldShouldUpdate,
   costAccountFieldShouldUpdate,
   purchaseDescFieldShouldUpdate,
+  taxRateFieldShouldUpdate,
 } from './utils';
 import { compose, inputIntent } from '@/utils';
+import { TaxRatesSelect } from '@/components/TaxRates/TaxRatesSelect';
 
 /**
  * Item form body.
  */
 function ItemFormBody({ organization: { base_currency } }) {
-  const { accounts } = useItemFormContext();
+  const { accounts, taxRates } = useItemFormContext();
   const { values } = useFormikContext();
 
   return (
@@ -111,7 +113,20 @@ function ItemFormBody({ organization: { base_currency } }) {
               filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
               fill={true}
               allowCreate={true}
-              fastField={true}  
+              fastField={true}
+            />
+          </FFormGroup>
+
+          {/*------------- Sell Tax Rate ------------- */}
+          <FFormGroup
+            name={'sell_tax_rate_id'}
+            label={'Tax Rate'}
+            inline={true}
+          >
+            <TaxRatesSelect
+              name={'sell_tax_rate_id'}
+              items={taxRates}
+              allowCreate
             />
           </FFormGroup>
 
@@ -213,6 +228,24 @@ function ItemFormBody({ organization: { base_currency } }) {
             />
           </FFormGroup>
 
+          {/*------------- Purchase Tax Rate ------------- */}
+          <FFormGroup
+            name={'purchase_tax_rate_id'}
+            label={'Tax Rate'}
+            inline={true}
+            fastField={true}
+            shouldUpdateDeps={{ taxRates }}
+            shouldUpdate={taxRateFieldShouldUpdate}
+          >
+            <TaxRatesSelect
+              name={'purchase_tax_rate_id'}
+              items={taxRates}
+              allowCreate={true}
+              fastField={true}
+              shouldUpdateDeps={{ taxRates }}
+            />
+          </FFormGroup>
+
           <FastField
             name={'purchase_description'}
             purchasable={values.purchasable}

packages/webapp/src/containers/Items/ItemFormProvider.tsx

@@ -10,6 +10,7 @@ import {
   useAccounts,
 } from '@/hooks/query';
 import { useWatchItemError } from './utils';
+import { useTaxRates } from '@/hooks/query/taxRates';
 
 const ItemFormContext = createContext();
 
@@ -30,6 +31,8 @@ function ItemFormProvider({ itemId, ...props }) {
     data: { itemsCategories },
   } = useItemsCategories();
 
+  const { data: taxRates, isLoading: isTaxRatesLoading } = useTaxRates();
+
   // Fetches the given item details.
   const itemQuery = useItem(itemId || duplicateId, {
     enabled: !!itemId || !!duplicateId,
@@ -69,6 +72,7 @@ function ItemFormProvider({ itemId, ...props }) {
     accounts,
     item,
     itemsCategories,
+    taxRates,
     submitPayload,
     isNewMode,
 
@@ -76,6 +80,7 @@ function ItemFormProvider({ itemId, ...props }) {
     isAccountsLoading,
     isItemsCategoriesLoading,
     isItemLoading,
+    isTaxRatesLoading,
 
     createItemMutate,
     editItemMutate,

packages/webapp/src/containers/Items/utils.tsx

@@ -23,12 +23,14 @@ const defaultInitialValues = {
   sell_price: '',
   cost_account_id: '',
   sell_account_id: '',
+  sell_tax_rate_id: '',
   inventory_account_id: '',
   category_id: '',
   sellable: 1,
   purchasable: true,
   sell_description: '',
   purchase_description: '',
+  purchase_tax_rate_id: '',
 };
 
 /**
@@ -187,6 +189,13 @@ export const purchaseDescFieldShouldUpdate = (newProps, oldProps) => {
   );
 };
 
+export const taxRateFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.shouldUpdateDeps.taxRates !== oldProps.shouldUpdateDeps.taxRates ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
 export function transformItemsTableState(tableState) {
   return {
     ...transformTableStateToQuery(tableState),