feat(webapp): invoice tax rate

packages/webapp/src/components/Forms/BlueprintFormik.tsx

@@ -10,7 +10,7 @@ import {
   EditableText,
   TextArea,
 } from '@blueprintjs-formik/core';
-import { MultiSelect } from '@blueprintjs-formik/select';
+import { MultiSelect, SuggestField } from '@blueprintjs-formik/select';
 import { DateInput } from '@blueprintjs-formik/datetime';
 import { FSelect } from './Select';
 
@@ -24,6 +24,7 @@ export {
   FSelect,
   MultiSelect as FMultiSelect,
   EditableText as FEditableText,
+  SuggestField as FSuggest,
   TextArea as FTextArea,
   DateInput as FDateInput,
 };

packages/webapp/src/components/TaxRates/TaxRatesSuggestInputCell.tsx

@@ -0,0 +1,41 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import { Suggest } from '@blueprintjs-formik/select';
+import { FormGroup } from '@blueprintjs/core';
+import { CellType } from '@/constants';
+
+export function TaxRatesSuggestInputCell({
+  column: { id, suggestProps, formGroupProps },
+  row: { index },
+  cell: { value: cellValue },
+  payload: { errors, updateData, taxRates },
+}) {
+  const error = errors?.[index]?.[id];
+
+  // Handle the item selected.
+  const handleItemSelected = useCallback(
+    (value, taxRate) => {
+      updateData(index, id, taxRate.id);
+    },
+    [updateData, index, id],
+  );
+
+  return (
+    <FormGroup intent={error ? Intent.DANGER : null} {...formGroupProps}>
+      <Suggest<any>
+        selectedValue={cellValue}
+        items={taxRates}
+        valueAccessor={'id'}
+        labelAccessor={'code'}
+        textAccessor={'name'}
+        popoverProps={{ minimal: true, boundary: 'window' }}
+        inputProps={{ placeholder: '' }}
+        fill={true}
+        onItemChange={handleItemSelected}
+        {...suggestProps}
+      />
+    </FormGroup>
+  );
+}
+
+TaxRatesSuggestInputCell.cellType = CellType.Field;