diff --git a/packages/webapp/package.json b/packages/webapp/package.json index a315192d1..0db7053e3 100644 --- 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/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx index 17956ff24..1ae32d1d7 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx +++ b/packages/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, +) => { return ( { }; // 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,19 +67,19 @@ export function InvoiceSendMailFields() { const [showCCField, setShowCCField] = useState(false); const [showBccField, setShowBccField] = useState(false); const textareaRef = useRef(null); - - const { values, setFieldValue } = useFormikContext(); + const { values, setFieldValue } = + useFormikContext(); const items = useInvoiceMailItems(); const argsOptions = useSendInvoiceFormatArgsOptions(); - const handleClickCcBtn = (event) => { + const handleClickCcBtn = (event: React.MouseEvent) => { event.preventDefault(); event.stopPropagation(); setShowCCField(true); }; - const handleClickBccBtn = (event) => { + const handleClickBccBtn = (event: React.MouseEvent) => { event.preventDefault(); event.stopPropagation(); @@ -82,64 +87,71 @@ export function InvoiceSendMailFields() { }; 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(() => ( - - + - - - ), []); + + + ), + [], + ); - 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 ( ( + input={() => (