fix: send invoice receipt addresses

packages/server/src/lib/Mail/index.ts

@@ -11,6 +11,7 @@ export default class Mail {
   to: string | string[];
   cc: string | string[];
   bcc: string | string[];
+  replyTo: string | string[];
   from: string = `${process.env.MAIL_FROM_NAME} ${process.env.MAIL_FROM_ADDRESS}`;
   data: { [key: string]: string | number };
   attachments: IMailAttachment[];
@@ -27,6 +28,7 @@ export default class Mail {
       subject: this.subject,
       html: this.html,
       attachments: this.attachments,
+      replyTo: this.replyTo,
     };
   }
 
@@ -74,6 +76,11 @@ export default class Mail {
     return this;
   }
 
+  setReplyTo(replyTo: string | string[]) {
+    this.replyTo = replyTo;
+    return this;
+  }
+
   /**
    * Sets from address to the mail.
    * @param {string} from

packages/server/src/services/Sales/Invoices/GetSaleInvoiceMailStateTransformer.ts

@@ -39,9 +39,19 @@ export class GetSaleInvoiceMailStateTransformer extends SaleInvoiceTransformer {
       'companyLogoUri',
 
       'primaryColor',
+
+      'customerName',
     ];
   };
 
+  /**
+   * Retrieves the customer name of the invoice.
+   * @returns {string}
+   */
+  protected customerName = (invoice) => {
+    return invoice.customer.displayName;
+  };
+
   /**
    * Retrieves the company name.
    * @returns {string}

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;