diff --git a/packages/server/src/services/Sales/PaymentReceived/GetPaymentReceivedMailState.tsx b/packages/server/src/services/Sales/PaymentReceived/GetPaymentReceivedMailState.tsx index 20107db01..b2910e4e0 100644 --- a/packages/server/src/services/Sales/PaymentReceived/GetPaymentReceivedMailState.tsx +++ b/packages/server/src/services/Sales/PaymentReceived/GetPaymentReceivedMailState.tsx @@ -3,7 +3,6 @@ import HasTenancyService from '@/services/Tenancy/TenancyService'; import { GetPaymentReceivedMailStateTransformer } from './GetPaymentReceivedMailStateTransformer'; import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable'; import { Inject, Service } from 'typedi'; -import { ContactMailNotification } from '@/services/MailNotification/ContactMailNotification'; import { SendPaymentReceiveMailNotification } from './PaymentReceivedMailNotification'; @Service() diff --git a/packages/server/src/services/Sales/PaymentReceived/GetPaymentReceivedMailStateTransformer.ts b/packages/server/src/services/Sales/PaymentReceived/GetPaymentReceivedMailStateTransformer.ts index 8a57467e3..20a53ff74 100644 --- a/packages/server/src/services/Sales/PaymentReceived/GetPaymentReceivedMailStateTransformer.ts +++ b/packages/server/src/services/Sales/PaymentReceived/GetPaymentReceivedMailStateTransformer.ts @@ -82,14 +82,6 @@ export class GetPaymentReceivedMailStateTransformer extends PaymentReceiveTransf return this.formatDate(payment.paymentDate); }; - /** - * Retrieves the formatted payment amount. - * @returns {string} - */ - protected paymentAmountFormatted = (payment) => { - return this.formatMoney(payment.paymentAmount); - }; - /** * Retrieves the payment amount. * @param payment @@ -175,7 +167,7 @@ export class GetPaymentReceivedEntryMailState extends PaymentReceivedEntryTransf }; /** - * + * Retrieves the paid amount. * @param entry * @returns {string} */ @@ -184,7 +176,7 @@ export class GetPaymentReceivedEntryMailState extends PaymentReceivedEntryTransf }; /** - * + * Retrieves the invoice number. * @param entry * @returns {string} */ diff --git a/packages/server/src/services/Sales/Receipts/GetSaleReceiptState.ts b/packages/server/src/services/Sales/Receipts/GetSaleReceiptState.ts index 339750b9f..cde274978 100644 --- a/packages/server/src/services/Sales/Receipts/GetSaleReceiptState.ts +++ b/packages/server/src/services/Sales/Receipts/GetSaleReceiptState.ts @@ -8,7 +8,7 @@ export class GetSaleReceiptState { private tenancy: HasTenancyService; /** - * Retireves the sale receipt state. + * Retrieves the sale receipt state. * @param {Number} tenantId - * @return {Promise} */ diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailReceiptPreview.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailReceiptPreview.tsx index 5ead2d7f1..8ca38db20 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailReceiptPreview.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailReceiptPreview.tsx @@ -1,12 +1,20 @@ import { css } from '@emotion/css'; -import { ComponentType, useMemo } from 'react'; -import { EstimateSendMailReceipt, EstimateSendMailReceiptProps } from './EstimateSendMailReceipt'; +import { ComponentType } from 'react'; +import { + EstimateSendMailReceipt, + EstimateSendMailReceiptProps, +} from './EstimateSendMailReceipt'; import { EstimateSendMailPreviewHeader } from './EstimateSendMailPreviewHeader'; +import { withEstimateMailReceiptPreviewProps } from './withEstimateMailReceiptPreviewProps'; import { Stack } from '@/components'; -import { useEstimateSendMailBoot } from './EstimateSendMailBoot'; -import { useSendEstimateMailMessage } from './hooks'; -import { defaultEstimateMailReceiptProps } from './_constants'; +const estimatePreviewCss = css` + margin: 0 auto; + border-radius: 5px !important; + transform: scale(0.9); + transform-origin: top; + box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05) !important; +`; export const EstimateSendMailReceiptPreview = () => { return ( @@ -14,57 +22,12 @@ export const EstimateSendMailReceiptPreview = () => { - + ); }; -/** - * Injects props from estimate mail state into the `EstimateSendMailReceipt` component. - */ -const withEstimateMailReceiptPreviewProps = < - P extends EstimateSendMailReceiptProps, ->( - WrappedComponent: ComponentType

, -) => { - return function WithInvoiceMailReceiptPreviewProps(props: P) { - const { estimateMailState } = useEstimateSendMailBoot(); - const message = useSendEstimateMailMessage(); - - const items = useMemo( - () => - estimateMailState?.entries?.map((entry: any) => ({ - quantity: entry.quantity, - total: entry.totalFormatted, - label: entry.name, - })), - [estimateMailState?.entries], - ); - - const mailReceiptPreviewProps = { - ...defaultEstimateMailReceiptProps, - companyName: estimateMailState?.companyName, - companyLogoUri: estimateMailState?.companyLogoUri, - primaryColor: estimateMailState?.primaryColor, - total: estimateMailState?.totalFormatted, - expirationDate: estimateMailState?.expirationDateFormatted, - estimateNumber: estimateMailState?.estimateNumber, - estimateDate: estimateMailState?.estimateDateFormatted, - items, - message - }; - return ; - }; -}; const EstimateSendMailReceiptConnected = withEstimateMailReceiptPreviewProps( - EstimateSendMailReceipt -); + EstimateSendMailReceipt, +) as ComponentType>; diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/withEstimateMailReceiptPreviewProps.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/withEstimateMailReceiptPreviewProps.tsx new file mode 100644 index 000000000..702d7c534 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/withEstimateMailReceiptPreviewProps.tsx @@ -0,0 +1,43 @@ +import { ComponentType, useMemo } from 'react'; +import { defaultEstimateMailReceiptProps } from './_constants'; +import { useEstimateSendMailBoot } from './EstimateSendMailBoot'; +import { useSendEstimateMailMessage } from './hooks'; +import { EstimateSendMailReceiptProps } from './EstimateSendMailReceipt'; + +/** + * Injects props from estimate mail state into the `EstimateSendMailReceipt` component. + */ +export const withEstimateMailReceiptPreviewProps = < + P extends EstimateSendMailReceiptProps, +>( + WrappedComponent: ComponentType

, +) => { + return function WithInvoiceMailReceiptPreviewProps(props: P) { + const { estimateMailState } = useEstimateSendMailBoot(); + const message = useSendEstimateMailMessage(); + + const items = useMemo( + () => + estimateMailState?.entries?.map((entry: any) => ({ + quantity: entry.quantity, + total: entry.totalFormatted, + label: entry.name, + })), + [estimateMailState?.entries], + ); + + const mailReceiptPreviewProps = { + ...defaultEstimateMailReceiptProps, + companyName: estimateMailState?.companyName, + companyLogoUri: estimateMailState?.companyLogoUri, + primaryColor: estimateMailState?.primaryColor, + total: estimateMailState?.totalFormatted, + expirationDate: estimateMailState?.expirationDateFormatted, + estimateNumber: estimateMailState?.estimateNumber, + estimateDate: estimateMailState?.estimateDateFormatted, + items, + message, + }; + return ; + }; +}; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx index 7a6096691..86863e1a1 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx @@ -1,4 +1,3 @@ -// @ts-nocheck import { Button, Intent } from '@blueprintjs/core'; import { useFormikContext } from 'formik'; import { FCheckbox, FFormGroup, FInputGroup, Group, Stack } from '@/components'; diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailPreviewReceipt.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailPreviewReceipt.tsx index df16b75dd..fd783b24a 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailPreviewReceipt.tsx +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailPreviewReceipt.tsx @@ -1,14 +1,20 @@ import { css } from '@emotion/css'; -import { ComponentType, useMemo } from 'react'; +import { ComponentType } from 'react'; import { PaymentReceivedMailReceipt, PaymentReceivedMailReceiptProps, } from './PaymentReceivedMailReceipt'; import { PaymentReceivedMailPreviewHeader } from './PaymentReceivedMailPreviewHeader'; +import { withPaymentReceivedMailReceiptPreviewProps } from './withPaymentReceivedMailReceiptPreviewProps'; import { Stack } from '@/components'; -import { useSendPaymentReceivedtMailMessage } from './_hooks'; -import { usePaymentReceivedSendMailBoot } from './PaymentReceivedMailBoot'; -import { defaultPaymentReceiptMailProps } from './_constants'; + +const mailReceiptCss = css` + margin: 0 auto; + border-radius: 5px !important; + transform: scale(0.9); + transform-origin: top; + box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05) !important; +`; export function PaymentReceivedMailPreviewReceipt() { return ( @@ -17,54 +23,14 @@ export function PaymentReceivedMailPreviewReceipt() { ); } -/** - * Injects props from invoice mail state into the InvoiceMailReceiptPreview component. - */ -const withPaymentReceivedMailReceiptPreviewProps = < - P extends PaymentReceivedMailReceiptProps, ->( - WrappedComponent: ComponentType

, -) => { - return function WithInvoiceMailReceiptPreviewProps(props: P) { - const message = useSendPaymentReceivedtMailMessage(); - const { paymentReceivedMailState } = usePaymentReceivedSendMailBoot(); - - const items = useMemo( - () => - paymentReceivedMailState?.entries?.map((entry: any) => ({ - total: entry.paidAmount, - label: entry.invoiceNumber, - })), - [paymentReceivedMailState?.entries], - ); - - const mailPaymentReceivedPreviewProps = { - ...defaultPaymentReceiptMailProps, - companyName: paymentReceivedMailState?.companyName, - companyLogoUri: paymentReceivedMailState?.companyLogoUri, - primaryColor: paymentReceivedMailState?.primaryColor, - total: paymentReceivedMailState?.totalFormatted, - subtotal: paymentReceivedMailState?.subtotalFormatted, - paymentNumber: paymentReceivedMailState?.paymentNumber, - items, - message, - }; - return ; - }; -}; - export const PaymentReceivedMailReceiptPreviewConnected = - withPaymentReceivedMailReceiptPreviewProps(PaymentReceivedMailReceipt); + withPaymentReceivedMailReceiptPreviewProps( + PaymentReceivedMailReceipt, + ) as ComponentType>; diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/withPaymentReceivedMailReceiptPreviewProps.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/withPaymentReceivedMailReceiptPreviewProps.tsx new file mode 100644 index 000000000..94f715502 --- /dev/null +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/withPaymentReceivedMailReceiptPreviewProps.tsx @@ -0,0 +1,41 @@ +import { ComponentType, useMemo } from 'react'; +import { PaymentReceivedMailReceiptProps } from './PaymentReceivedMailReceipt'; +import { useSendPaymentReceivedtMailMessage } from './_hooks'; +import { usePaymentReceivedSendMailBoot } from './PaymentReceivedMailBoot'; +import { defaultPaymentReceiptMailProps } from './_constants'; + +/** + * Injects props from invoice mail state into the InvoiceMailReceiptPreview component. + */ +export const withPaymentReceivedMailReceiptPreviewProps = < + P extends PaymentReceivedMailReceiptProps, +>( + WrappedComponent: ComponentType

, +) => { + return function WithInvoiceMailReceiptPreviewProps(props: P) { + const message = useSendPaymentReceivedtMailMessage(); + const { paymentReceivedMailState } = usePaymentReceivedSendMailBoot(); + + const items = useMemo( + () => + paymentReceivedMailState?.entries?.map((entry: any) => ({ + total: entry.paidAmount, + label: entry.invoiceNumber, + })), + [paymentReceivedMailState?.entries], + ); + + const mailPaymentReceivedPreviewProps = { + ...defaultPaymentReceiptMailProps, + companyName: paymentReceivedMailState?.companyName, + companyLogoUri: paymentReceivedMailState?.companyLogoUri, + primaryColor: paymentReceivedMailState?.primaryColor, + total: paymentReceivedMailState?.totalFormatted, + subtotal: paymentReceivedMailState?.subtotalFormatted, + paymentNumber: paymentReceivedMailState?.paymentNumber, + items, + message, + }; + return ; + }; +}; diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreview.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreview.tsx index ff8d6beb1..7eadc43a5 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreview.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreview.tsx @@ -1,14 +1,15 @@ -import { ComponentType } from 'react'; import { css } from '@emotion/css'; import { Stack } from '@/components'; import { ReceiptSendMailPreviewHeader } from './ReceiptSendMailPreviewHeader'; -import { - ReceiptSendMailReceipt, - ReceiptSendMailReceiptProps, -} from './ReceiptSendMailReceipt'; -import { defaultReceiptMailProps } from './_constants'; -import { useReceiptSendMailBoot } from './ReceiptSendMailBoot'; -import { useSendReceiptMailMessage } from './_hooks'; +import { ReceiptMailPreviewConnected } from './withReceiptMailReceiptPreviewProps'; + +const receiptPreviewCss = css` + margin: 0 auto; + border-radius: 5px !important; + transform: scale(0.9); + transform-origin: top; + box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05) !important; +`; export function ReceiptSendMailPreview() { return ( @@ -16,58 +17,8 @@ export function ReceiptSendMailPreview() { - + ); } - -/** - * Injects props from receipt mail state into the `ReceiptMailPreviewConnected` component. - */ -const withReceiptMailReceiptPreviewProps = < - P extends ReceiptSendMailReceiptProps, ->( - WrappedComponent: ComponentType

, -) => { - return function WithInvoiceMailReceiptPreviewProps(props: P) { - const message = useSendReceiptMailMessage(); - const { receiptMailState } = useReceiptSendMailBoot(); - - // const items = useMemo( - // () => - // invoiceMailState?.entries?.map((entry: any) => ({ - // quantity: entry.quantity, - // total: entry.totalFormatted, - // label: entry.name, - // })), - // [invoiceMailState?.entries], - // ); - - const mailReceiptPreviewProps = { - ...defaultReceiptMailProps, - // companyName: receiptMailState?.companyName, - // companyLogoUri: receiptMailState?.companyLogoUri, - // primaryColor: receiptMailState?.primaryColor, - // total: receiptMailState?.totalFormatted, - // dueDate: receiptMailState?.dueDateFormatted, - // dueAmount: invoiceMailState?.dueAmountFormatted, - // invoiceNumber: invoiceMailState?.invoiceNo, - // items, - message, - }; - return ; - }; -}; - -export const ReceiptMailPreviewConnected = withReceiptMailReceiptPreviewProps( - ReceiptSendMailReceipt, -); diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/withReceiptMailReceiptPreviewProps.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/withReceiptMailReceiptPreviewProps.tsx new file mode 100644 index 000000000..dea0114ff --- /dev/null +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/withReceiptMailReceiptPreviewProps.tsx @@ -0,0 +1,50 @@ +import { ComponentType } from 'react'; +import { + ReceiptSendMailReceipt, + ReceiptSendMailReceiptProps, +} from './ReceiptSendMailReceipt'; +import { useSendReceiptMailMessage } from './_hooks'; +import { useReceiptSendMailBoot } from './ReceiptSendMailBoot'; +import { defaultReceiptMailProps } from './_constants'; + +/** + * Injects props from receipt mail state into the `ReceiptMailPreviewConnected` component. + */ +export const withReceiptMailReceiptPreviewProps = < + P extends ReceiptSendMailReceiptProps, +>( + WrappedComponent: ComponentType

, +) => { + return function WithInvoiceMailReceiptPreviewProps(props: P) { + const message = useSendReceiptMailMessage(); + const { receiptMailState } = useReceiptSendMailBoot(); + + // const items = useMemo( + // () => + // invoiceMailState?.entries?.map((entry: any) => ({ + // quantity: entry.quantity, + // total: entry.totalFormatted, + // label: entry.name, + // })), + // [invoiceMailState?.entries], + // ); + + const mailReceiptPreviewProps = { + ...defaultReceiptMailProps, + // companyName: receiptMailState?.companyName, + // companyLogoUri: receiptMailState?.companyLogoUri, + // primaryColor: receiptMailState?.primaryColor, + // total: receiptMailState?.totalFormatted, + // dueDate: receiptMailState?.dueDateFormatted, + // dueAmount: invoiceMailState?.dueAmountFormatted, + // invoiceNumber: invoiceMailState?.invoiceNo, + // items, + message, + }; + return ; + }; +}; + +export const ReceiptMailPreviewConnected = withReceiptMailReceiptPreviewProps( + ReceiptSendMailReceipt, +) as ComponentType>; diff --git a/packages/webapp/src/hooks/query/paymentReceives.tsx b/packages/webapp/src/hooks/query/paymentReceives.tsx index 7000d4d3a..43f09a390 100644 --- a/packages/webapp/src/hooks/query/paymentReceives.tsx +++ b/packages/webapp/src/hooks/query/paymentReceives.tsx @@ -5,6 +5,8 @@ import { UseQueryOptions, UseQueryResult, useQuery, + UseMutationOptions, + UseMutationResult, } from 'react-query'; import useApiRequest from '../useRequest'; import { useRequestQuery } from '../useQueryRequest'; @@ -244,11 +246,45 @@ export function usePdfPaymentReceive(paymentReceiveId) { return useRequestPdf({ url: `sales/payment_receives/${paymentReceiveId}` }); } -export function useSendPaymentReceiveMail(props?: any) { +interface SendPaymentReceiveMailValues { + to: string[] | string; + cc?: string[] | string, + bcc?: string[] | string, + subject: string; + message: string; + from?: string[] | string; + attachPdf?: boolean; +} + +interface SendPaymentReceiveMailResponse { + success: boolean; + message?: string; +} + +type SendPaymentReceiveMailMutation = UseMutationResult< + SendPaymentReceiveMailResponse, + Error, + [number, SendPaymentReceiveMailValues], + unknown +>; + +export function useSendPaymentReceiveMail( + props?: Partial< + UseMutationOptions< + SendPaymentReceiveMailResponse, + Error, + [number, SendPaymentReceiveMailValues] + > + >, +): SendPaymentReceiveMailMutation { const queryClient = useQueryClient(); const apiRequest = useApiRequest(); - return useMutation( + return useMutation< + SendPaymentReceiveMailResponse, + Error, + [number, SendPaymentReceiveMailValues] + >( ([id, values]) => apiRequest.post(`sales/payment_receives/${id}/mail`, values), { @@ -263,15 +299,16 @@ export function useSendPaymentReceiveMail(props?: any) { export interface GetPaymentReceivedMailStateResponse { companyName: string; + companyLogoUri?: string; + + primaryColor?: string; customerName: string; - entries: Array<{ paymentAmountFormatted: string }>; + entries: Array<{ invoiceNumber: string; paidAmount: string }>; from: Array; fromOptions: Array<{ mail: string; label: string; primary: boolean }>; - paymentAmountFormatted: string; - paymentDate: string; paymentDateFormatted: string; @@ -285,8 +322,7 @@ export interface GetPaymentReceivedMailStateResponse { subtotalFormatted: string; paymentNumber: string; - companyLogoUri?: string; - primaryColor?: string; + formatArgs: Record; } export function usePaymentReceivedMailState( diff --git a/shared/email-components/src/lib/EmailTemplate.tsx b/shared/email-components/src/lib/EmailTemplate.tsx index 20b4263f6..5c59a10c2 100644 --- a/shared/email-components/src/lib/EmailTemplate.tsx +++ b/shared/email-components/src/lib/EmailTemplate.tsx @@ -24,7 +24,7 @@ EmailTemplate.CompanyLogo = ({ src }: { src: string }) => { const containerStyle: CSSProperties = { backgroundColor: '#fff', width: '100%', - maxWidth: '450px', + maxWidth: '400px', padding: '30px 20px', color: '#000', };