From c32aff82ee3ff85711905b0d9f1e1157615bd708 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Wed, 6 Nov 2024 14:04:29 +0200
Subject: [PATCH] fix: send invoice receipt addresses

---
 packages/server/src/lib/Mail/index.ts         |  7 +++++++
 .../GetSaleInvoiceMailStateTransformer.ts     | 10 ++++++++++
 .../InvoiceSendMailFields.tsx                 | 19 +++++++++++++++++++
 .../InvoiceSendMailForm.schema.ts             |  6 +++---
 .../InvoiceSendMailHeaderPreview.tsx          | 19 ++++++++++++++-----
 packages/webapp/src/hooks/query/invoices.tsx  |  2 ++
 6 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/packages/server/src/lib/Mail/index.ts b/packages/server/src/lib/Mail/index.ts
index 8310d594ea..9381a4e075 100644
--- a/packages/server/src/lib/Mail/index.ts
+++ b/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
diff --git a/packages/server/src/services/Sales/Invoices/GetSaleInvoiceMailStateTransformer.ts b/packages/server/src/services/Sales/Invoices/GetSaleInvoiceMailStateTransformer.ts
index e1676d845c..128080f38c 100644
--- a/packages/server/src/services/Sales/Invoices/GetSaleInvoiceMailStateTransformer.ts
+++ b/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}
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
index 1ae32d1d7c..0c4e07b213 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx
+++ b/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
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailForm.schema.ts b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailForm.schema.ts
index c40d0d7a9a..2264da14e6 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailForm.schema.ts
+++ b/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')),
 });
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx
index 680e3d897a..7c0541328e 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeaderPreview.tsx
+++ b/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],
+  );
+};
diff --git a/packages/webapp/src/hooks/query/invoices.tsx b/packages/webapp/src/hooks/query/invoices.tsx
index 92e16052cd..54316833c0 100644
--- a/packages/webapp/src/hooks/query/invoices.tsx
+++ b/packages/webapp/src/hooks/query/invoices.tsx
@@ -402,6 +402,8 @@ export interface GetSaleInvoiceDefaultOptionsResponse {
   companyName: string;
   companyLogoUri: string;
 
+  customerName: string;
+
   dueDate: string;
   dueDateFormatted: string;