Merge pull request #738 from bigcapitalhq/fix-ts-typing-invoice-send-…

…mail-fields fix: typing invoice send mail fields
bigcapitalhq · Nov 4, 2024 · 2d18a65 · 2d18a65
2 parents 638bd95 + 2646ad5
commit 2d18a65
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 552 deletions.
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@bigcapital/utils": "*",
-    "@blueprintjs-formik/core": "^0.3.6",
+    "@blueprintjs-formik/core": "^0.3.7",
     "@blueprintjs-formik/datetime": "^0.3.7",
     "@blueprintjs-formik/select": "^0.3.5",
     "@blueprintjs/colors": "4.1.19",

diff --git a/...ages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx b/...ages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
@@ -18,9 +18,14 @@ import {
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
 import { useInvoiceMailItems, useSendInvoiceFormatArgsOptions } from './_hooks';
+import { InvoiceSendMailFormValues } from './_types';
 
 // Create new account renderer.
-const createNewItemRenderer = (query, active, handleClick) => {
+const createNewItemRenderer = (
+  query: string,
+  active: boolean,
+  handleClick: React.MouseEventHandler<HTMLElement>,
+) => {
   return (
     <MenuItem
       icon="add"
@@ -32,7 +37,7 @@ const createNewItemRenderer = (query, active, handleClick) => {
 };
 
 // Create new item from the given query string.
-const createNewItemFromQuery = (name) => ({ name });
+const createNewItemFromQuery = (text: string): SelectOptionProps => ({ text });
 
 const styleEmailButton = css`
   &.bp4-button.bp4-small {
@@ -62,84 +67,91 @@ export function InvoiceSendMailFields() {
   const [showCCField, setShowCCField] = useState<boolean>(false);
   const [showBccField, setShowBccField] = useState<boolean>(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const { values, setFieldValue } = useFormikContext();
+  const { values, setFieldValue } =
+    useFormikContext<InvoiceSendMailFormValues>();
   const items = useInvoiceMailItems();
   const argsOptions = useSendInvoiceFormatArgsOptions();
 
-  const handleClickCcBtn = (event) => {
+  const handleClickCcBtn = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
     event.stopPropagation();
 
     setShowCCField(true);
   };
 
-  const handleClickBccBtn = (event) => {
+  const handleClickBccBtn = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
     event.stopPropagation();
 
     setShowBccField(true);
   };
 
   const handleCreateToItemSelect = (value: SelectOptionProps) => {
-    setFieldValue('to', [...values?.to, value?.name]);
+    setFieldValue('to', [...values?.to, value?.text]);
   };
 
   const handleCreateCcItemSelect = (value: SelectOptionProps) => {
-    setFieldValue('cc', [...values?.cc, value?.name]);
+    setFieldValue('cc', [...values?.cc, value?.text]);
   };
+
   const handleCreateBccItemSelect = (value: SelectOptionProps) => {
-    setFieldValue('bcc', [...values?.bcc, value?.name]);
+    setFieldValue('bcc', [...values?.bcc, value?.text]);
   };
 
-  const rightElementsToField = useMemo(() => (
-    <Group
-      spacing={0}
-      paddingRight={'7px'}
-      paddingTop={'7px'}
-      fontWeight={500}
-      color={'#000'}
-    >
-      <Button
-        onClick={handleClickCcBtn}
-        minimal
-        small
-        className={styleEmailButton}
+  const rightElementsToField = useMemo(
+    () => (
+      <Group
+        spacing={0}
+        paddingRight={'7px'}
+        paddingTop={'7px'}
+        fontWeight={500}
+        color={'#000'}
       >
-        CC
-      </Button>
+        <Button
+          onClick={handleClickCcBtn}
+          minimal
+          small
+          className={styleEmailButton}
+        >
+          CC
+        </Button>
 
-      <Button
-        onClick={handleClickBccBtn}
-        minimal
-        small
-        className={styleEmailButton}
-      >
-        BCC
-      </Button>
-    </Group>
-  ), []);
+        <Button
+          onClick={handleClickBccBtn}
+          minimal
+          small
+          className={styleEmailButton}
+        >
+          BCC
+        </Button>
+      </Group>
+    ),
+    [],
+  );
 
-  const handleTextareaChange = useCallback((item: SelectOptionProps) => {
-    const textarea = textareaRef.current;
-    if (!textarea) return;
+  const handleTextareaChange = useCallback(
+    (item: SelectOptionProps) => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
 
-    const { selectionStart, selectionEnd, value: text } = textarea;
-    const insertText = `{${item.value}}`;
-    const message =
-      text.substring(0, selectionStart) +
-      insertText +
-      text.substring(selectionEnd);
+      const { selectionStart, selectionEnd, value: text } = textarea;
+      const insertText = `{${item.value}}`;
+      const message =
+        text.substring(0, selectionStart) +
+        insertText +
+        text.substring(selectionEnd);
 
-    setFieldValue('message', message);
+      setFieldValue('message', message);
 
-    // Move the cursor to the end of the inserted text
-    setTimeout(() => {
-      textarea.selectionStart = textarea.selectionEnd =
-        selectionStart + insertText.length;
-      textarea.focus();
-    }, 0);
-  }, [setFieldValue]);
+      // Move the cursor to the end of the inserted text
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd =
+          selectionStart + insertText.length;
+        textarea.focus();
+      }, 0);
+    },
+    [setFieldValue],
+  );
 
   return (
     <Stack
@@ -233,7 +245,7 @@ export function InvoiceSendMailFields() {
                   position: Position.BOTTOM_LEFT,
                   minimal: true,
                 }}
-                input={({ activeItem, text, label, value }) => (
+                input={() => (
                   <Button
                     minimal
                     rightIcon={