From 470bfd32f7f0ac0988bce4e753b2386989e1d5f4 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Wed, 30 Oct 2024 14:22:54 +0200 Subject: [PATCH] feat: wip send invoice receipt preview --- .../ContactMailNotification.ts | 2 +- .../Invoices/SendInvoiceInvoiceMailCommon.ts | 20 ++++++++--------- .../src/services/Sales/Invoices/constants.ts | 12 +++++----- .../InvoiceSendMailFields.tsx | 9 ++++---- .../Invoices/InvoiceSendMailDrawer/_hooks.ts | 22 ++++++++++++++----- 5 files changed, 38 insertions(+), 27 deletions(-) diff --git a/packages/server/src/services/MailNotification/ContactMailNotification.ts b/packages/server/src/services/MailNotification/ContactMailNotification.ts index f5214794b..725e28821 100644 --- a/packages/server/src/services/MailNotification/ContactMailNotification.ts +++ b/packages/server/src/services/MailNotification/ContactMailNotification.ts @@ -79,7 +79,7 @@ export class ContactMailNotification { .withGraphFetched('metadata'); return { - CompanyName: organization.metadata.name, + ['Company Name']: organization.metadata.name, }; } } diff --git a/packages/server/src/services/Sales/Invoices/SendInvoiceInvoiceMailCommon.ts b/packages/server/src/services/Sales/Invoices/SendInvoiceInvoiceMailCommon.ts index 10ccedbbb..16ee5bd9f 100644 --- a/packages/server/src/services/Sales/Invoices/SendInvoiceInvoiceMailCommon.ts +++ b/packages/server/src/services/Sales/Invoices/SendInvoiceInvoiceMailCommon.ts @@ -106,18 +106,18 @@ export class SendSaleInvoiceMailCommon { tenantId, invoiceId ); - const commonArgs = - await this.contactMailNotification.getCommonFormatArgs(tenantId); - + const commonArgs = await this.contactMailNotification.getCommonFormatArgs( + tenantId + ); return { ...commonArgs, - CustomerName: invoice.customer.displayName, - InvoiceNumber: invoice.invoiceNo, - InvoiceDueAmount: invoice.dueAmountFormatted, - InvoiceDueDate: invoice.dueDateFormatted, - InvoiceDate: invoice.invoiceDateFormatted, - InvoiceAmount: invoice.totalFormatted, - OverdueDays: invoice.overdueDays, + ['Customer Name']: invoice.customer.displayName, + ['Invoice Number']: invoice.invoiceNo, + ['Invoice DueAmount']: invoice.dueAmountFormatted, + ['Invoice DueDate']: invoice.dueDateFormatted, + ['Invoice Date']: invoice.invoiceDateFormatted, + ['Invoice Amount']: invoice.totalFormatted, + ['Overdue Days']: invoice.overdueDays, }; }; } diff --git a/packages/server/src/services/Sales/Invoices/constants.ts b/packages/server/src/services/Sales/Invoices/constants.ts index 4a67b6780..cff791b3c 100644 --- a/packages/server/src/services/Sales/Invoices/constants.ts +++ b/packages/server/src/services/Sales/Invoices/constants.ts @@ -1,19 +1,19 @@ import config from '@/config'; export const DEFAULT_INVOICE_MAIL_SUBJECT = - 'Invoice {InvoiceNumber} from {CompanyName}'; + 'Invoice {Invoice Number} from {Company Name}'; export const DEFAULT_INVOICE_MAIL_CONTENT = ` -

Dear {CustomerName}

+

Dear {Customer Name}

Thank you for your business, You can view or print your invoice from attachements.

-Invoice #{InvoiceNumber}
-Due Date : {InvoiceDueDate}
-Amount : {InvoiceAmount}
+Invoice #{Invoice Number}
+Due Date : {Invoice Due Date}
+Amount : {Invoice Amount}

Regards
-{CompanyName} +{Company Name}

`; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx index c6a761fbe..226b9c335 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx @@ -17,7 +17,7 @@ import { } from '@/components'; import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; import { useDrawerActions } from '@/hooks/state'; -import { useInvoiceMailItems } from './_hooks'; +import { useInvoiceMailItems, useSendInvoiceFormatArgsOptions } from './_hooks'; // Create new account renderer. const createNewItemRenderer = (query, active, handleClick) => { @@ -65,6 +65,7 @@ export function InvoiceSendMailFields() { const { values, setFieldValue } = useFormikContext(); const items = useInvoiceMailItems(); + const argsOptions = useSendInvoiceFormatArgsOptions(); const handleClickCcBtn = (event) => { event.preventDefault(); @@ -124,7 +125,7 @@ export function InvoiceSendMailFields() { if (!textarea) return; const { selectionStart, selectionEnd, value: text } = textarea; - const insertText = item.value; + const insertText = `{${item.value}}`; const message = text.substring(0, selectionStart) + insertText + @@ -224,7 +225,7 @@ export function InvoiceSendMailFields() { } > - {text} + Insert Variable )} fill={false} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/_hooks.ts b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/_hooks.ts index 25a8752a4..2fdf50afe 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/_hooks.ts +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/_hooks.ts @@ -1,8 +1,9 @@ import { useFormikContext } from 'formik'; -import { camelCase, chain, defaultTo, mapKeys, upperFirst } from 'lodash'; +import { useMemo } from 'react'; +import { SelectOptionProps } from '@blueprintjs-formik/select'; +import { chain, defaultTo, mapKeys, snakeCase, startCase } from 'lodash'; import { InvoiceSendMailFormValues } from './_types'; import { useInvoiceSendMailBoot } from './InvoiceSendMailContentBoot'; -import { useMemo } from 'react'; export const useInvoiceMailItems = () => { const { values } = useFormikContext(); @@ -19,24 +20,33 @@ export const useInvoiceMailItems = () => { .value(); }; -export const useSendInvoiceMailFormatArgs = () => { +export const useSendInvoiceMailFormatArgs = (): Record => { const { invoiceMailOptions } = useInvoiceSendMailBoot(); return useMemo(() => { return mapKeys(invoiceMailOptions?.formatArgs, (_, key) => - upperFirst(camelCase(key)), + startCase(snakeCase(key).replace('_', ' ')), ); }, [invoiceMailOptions]); }; -export const useSendInvoiceMailSubject = () => { +export const useSendInvoiceMailSubject = (): string => { const { values } = useFormikContext(); const formatArgs = useSendInvoiceMailFormatArgs(); return formatSmsMessage(values?.subject, formatArgs); }; -export const useSendInvoiceMailMessage = () => { +export const useSendInvoiceFormatArgsOptions = (): Array => { + const formatArgs = useSendInvoiceMailFormatArgs(); + + return Object.keys(formatArgs).map((key) => ({ + value: key, + text: key, + })); +}; + +export const useSendInvoiceMailMessage = (): string => { const { values } = useFormikContext(); const formatArgs = useSendInvoiceMailFormatArgs();