fix: send invoice receipt addresses

packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx

@@ -153,6 +153,13 @@ export function InvoiceSendMailFields() {
     [setFieldValue],
   );
 
+  const handleTagInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Prevent the form from submitting when the user presses the Enter key
+    if (e.key === 'Enter') {
+      e.preventDefault();
+    }
+  };
+
   return (
     <Stack
       bg="white"
@@ -174,6 +181,9 @@ export function InvoiceSendMailFields() {
                 tagProps: { round: true, minimal: true, large: true },
                 rightElement: rightElementsToField,
                 large: true,
+                inputProps: {
+                  onKeyDown: handleTagInputKeyDown,
+                },
               }}
               createNewItemRenderer={createNewItemRenderer}
               createNewItemFromQuery={createNewItemFromQuery}
@@ -192,6 +202,9 @@ export function InvoiceSendMailFields() {
                 tagInputProps={{
                   tagProps: { round: true, minimal: true, large: true },
                   large: true,
+                  inputProps: {
+                    onKeyDown: handleTagInputKeyDown,
+                  },
                 }}
                 createNewItemRenderer={createNewItemRenderer}
                 createNewItemFromQuery={createNewItemFromQuery}
@@ -211,6 +224,9 @@ export function InvoiceSendMailFields() {
                 tagInputProps={{
                   tagProps: { round: true, minimal: true, large: true },
                   large: true,
+                  inputProps: {
+                    onKeyDown: handleTagInputKeyDown,
+                  },
                 }}
                 createNewItemRenderer={createNewItemRenderer}
                 createNewItemFromQuery={createNewItemFromQuery}
@@ -244,6 +260,9 @@ export function InvoiceSendMailFields() {
                   fill: false,
                   position: Position.BOTTOM_LEFT,
                   minimal: true,
+                  inputProps: {
+                    onKeyDown: handleTagInputKeyDown,
+                  },
                 }}
                 input={() => (
                   <Button

packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailForm.schema.ts

@@ -4,8 +4,8 @@ export const InvoiceSendMailFormSchema = Yup.object().shape({
   subject: Yup.string().required('Subject is required'),
   message: Yup.string().required('Message is required'),
   to: Yup.array()
-    .of(Yup.string().email('Invalid email'))
+    .of(Yup.string().email('Invalid email address'))
     .required('To address is required'),
-  cc: Yup.array().of(Yup.string().email('Invalid email')),
-  bcc: Yup.array().of(Yup.string().email('Invalid email')),
+  cc: Yup.array().of(Yup.string().email('Invalid email address')),
+  bcc: Yup.array().of(Yup.string().email('Invalid email address')),
 });

packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx

@@ -8,6 +8,7 @@ export function InvoiceSendMailHeaderPreview() {
   const mailSubject = useSendInvoiceMailSubject();
   const { invoiceMailState } = useInvoiceSendMailBoot();
   const toAddresses = useMailHeaderToAddresses();
+  const fromAddresses = useMailHeaderFromAddresses();
 
   return (
     <Stack
@@ -44,14 +45,12 @@ export function InvoiceSendMailHeaderPreview() {
 
           <Stack spacing={2}>
             <Group spacing={2}>
-              <Box fontWeight={600}>Ahmed </Box>
-              <Box color={'#738091'}>
-                &lt;messaging-service@post.bigcapital.app&gt;
-              </Box>
+              <Box fontWeight={600}>{invoiceMailState?.companyName} </Box>
+              <Box color={'#738091'}>{fromAddresses}</Box>
             </Group>
 
             <Box fontSize={'sm'} color={'#738091'}>
-              Reply to: {invoiceMailState?.companyName} {toAddresses};
+              Send to: {invoiceMailState?.customerName} {toAddresses};
             </Box>
           </Stack>
         </Group>
@@ -80,3 +79,13 @@ export const useMailHeaderToAddresses = () => {
 
   return useMemo(() => to?.map((email) => '<' + email + '>').join(' '), [to]);
 };
+
+export const useMailHeaderFromAddresses = () => {
+  const { invoiceMailState } = useInvoiceSendMailBoot();
+  const from = invoiceMailState?.from;
+
+  return useMemo(
+    () => from?.map((email) => '<' + email + '>').join(', '),
+    [from],
+  );
+};

packages/webapp/src/hooks/query/invoices.tsx

@@ -402,6 +402,8 @@ export interface GetSaleInvoiceDefaultOptionsResponse {
   companyName: string;
   companyLogoUri: string;
 
+  customerName: string;
+
   dueDate: string;
   dueDateFormatted: string;