feat: payment received mail preview

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailBoot.tsx

@@ -1,15 +1,15 @@
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
 import {
-  PaymentReceivedStateResponse,
-  usePaymentReceivedState,
+  GetPaymentReceivedMailStateResponse,
+  usePaymentReceivedMailState,
 } from '@/hooks/query';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 
 interface PaymentReceivedSendMailBootValues {
   paymentReceivedId: number;
 
-  paymentReceivedMailState: PaymentReceivedStateResponse | undefined;
+  paymentReceivedMailState: GetPaymentReceivedMailStateResponse | undefined;
   isPaymentReceivedStateLoading: boolean;
 }
 interface InvoiceSendMailBootProps {
@@ -31,7 +31,7 @@ export const PaymentReceivedSendMailBoot = ({
   const {
     data: paymentReceivedMailState,
     isLoading: isPaymentReceivedStateLoading,
-  } = usePaymentReceivedState(paymentReceivedId);
+  } = usePaymentReceivedMailState(paymentReceivedId);
 
   const isLoading = isPaymentReceivedStateLoading;
 

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailContent.tsx

@@ -3,7 +3,6 @@ import { Classes } from '@blueprintjs/core';
 import { PaymentReceivedSendMailBoot } from './PaymentReceivedMailBoot';
 import { PaymentReceivedSendMailForm } from './PaymentReceivedMailForm';
 import { PaymentReceivedSendMailPreview } from './PaymentReceivedMailPreviewTabs';
-// import { InvoiceSendMailFields } from './InvoiceSendMailFields';
 import { SendMailViewHeader } from '../../Estimates/SendMailViewDrawer/SendMailViewHeader';
 import { SendMailViewLayout } from '../../Estimates/SendMailViewDrawer/SendMailViewLayout';
 import { PaymentReceivedSendMailFields } from './PaymentReceivedMailFields';

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailFields.tsx

@@ -6,16 +6,15 @@ import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
 import { SendMailViewToAddressField } from '../../Estimates/SendMailViewDrawer/SendMailViewToAddressField';
 import { SendMailViewMessageField } from '../../Estimates/SendMailViewDrawer/SendMailViewMessageField';
-
-const items = [];
-const argsOptions = [];
+import { usePaymentReceivedFormatArgsOptions, } from './_hooks';
+import { useSendMailItems } from '../../Estimates/SendMailViewDrawer/hooks';
 
 export function PaymentReceivedSendMailFields() {
-  // const items = useInvoiceMailItems();
-  // const argsOptions = useSendInvoiceFormatArgsOptions();
+  const argsOptions = usePaymentReceivedFormatArgsOptions();
+  const items = useSendMailItems();
 
   return (
-    <Stack>
+    <Stack flex={1}>
       <Stack spacing={0} overflow="auto" flex="1" p={'30px'}>
         <SendMailViewToAddressField
           toMultiSelectProps={{ items }}

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailForm.tsx

@@ -16,6 +16,7 @@ const initialValues: PaymentReceivedSendMailFormValues = {
   to: [],
   cc: [],
   bcc: [],
+  from: [],
   attachPdf: true,
 };
 

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailPreviewHeader.tsx

@@ -1,13 +1,23 @@
-import { SendViewPreviewHeader } from "../../Estimates/SendMailViewDrawer/SendMailViewPreviewHeader";
+import { useFormikContext } from 'formik';
+import { SendViewPreviewHeader } from '../../Estimates/SendMailViewDrawer/SendMailViewPreviewHeader';
+import { usePaymentReceivedMailSubject } from './_hooks';
+import { PaymentReceivedSendMailFormValues } from './_types';
+import { usePaymentReceivedSendMailBoot } from './PaymentReceivedMailBoot';
 
 export function PaymentReceivedMailPreviewHeader() {
+  const subject = usePaymentReceivedMailSubject();
+  const { paymentReceivedMailState } = usePaymentReceivedSendMailBoot();
+  const {
+    values: { from, to },
+  } = useFormikContext<PaymentReceivedSendMailFormValues>();
+
   return (
     <SendViewPreviewHeader
-      companyName="A"
-      customerName="A"
-      subject={'adsfsdf'}
-      from={['a.bouhuolia@gmail.com']}
-      to={['a.bouhuolia@gmail.com']}
+      companyName={paymentReceivedMailState?.companyName || ''}
+      customerName={paymentReceivedMailState?.customerName || ''}
+      subject={subject}
+      from={from}
+      to={to}
     />
   );
 }

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailPreviewPdf.tsx

@@ -7,7 +7,7 @@ import { PaymentReceivedMailPreviewHeader } from './PaymentReceivedMailPreviewHe
 
 export function PaymentReceivedSendMailPreviewPdf() {
   return (
-    <Stack>
+    <Stack flex={1}>
       <PaymentReceivedMailPreviewHeader />
 
       <Stack px={4} py={6}>

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/PaymentReceivedMailPreviewReceipt.tsx

@@ -21,7 +21,7 @@ const defaultPaymentReceiptMailProps = {
 
 export function PaymentReceivedMailPreviewReceipt() {
   return (
-    <Stack>
+    <Stack flex={1}>
       <PaymentReceivedMailPreviewHeader />
 
       <Stack px={4} py={6}>

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/_hooks.ts

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { useFormikContext } from 'formik';
+import { SelectOptionProps } from '@blueprintjs-formik/select';
+import { usePaymentReceivedSendMailBoot } from './PaymentReceivedMailBoot';
+import { PaymentReceivedSendMailFormValues } from './_types';
+import {
+  formatMailMessage,
+  transformEmailArgs,
+  transformFormatArgsToOptions,
+} from '../../Estimates/SendMailViewDrawer/hooks';
+
+/**
+ * Retrieves the mail format arguments of payment received mail.
+ * @returns {Record<string, string>}
+ */
+export const usePaymentReceivedMailFormatArgs = (): Record<string, string> => {
+  const { paymentReceivedMailState } = usePaymentReceivedSendMailBoot();
+
+  return useMemo(() => {
+    return transformEmailArgs(paymentReceivedMailState?.formatArgs || {});
+  }, [paymentReceivedMailState]);
+};
+
+/**
+ * Retrieves the formatted receipt subject.
+ * @returns {string}
+ */
+export const usePaymentReceivedMailSubject = (): string => {
+  const { values } = useFormikContext<PaymentReceivedSendMailFormValues>();
+  const formatArgs = usePaymentReceivedMailFormatArgs();
+
+  return formatMailMessage(values?.subject, formatArgs);
+};
+
+/**
+ * Retrieves the payment received format options.
+ * @returns {Array<SelectOptionProps>}
+ */
+export const usePaymentReceivedFormatArgsOptions =
+  (): Array<SelectOptionProps> => {
+    const formatArgs = usePaymentReceivedMailFormatArgs();
+
+    return transformFormatArgsToOptions(formatArgs);
+  };
+
+/**
+ * Retrieves the formatted estimate message.
+ * @returns {string}
+ */
+export const useSendPaymentReceivedtMailMessage = (): string => {
+  const { values } = useFormikContext<PaymentReceivedSendMailFormValues>();
+  const formatArgs = usePaymentReceivedMailFormatArgs();
+
+  return formatMailMessage(values?.message, formatArgs);
+};

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedMailDrawer/_types.ts

@@ -1,4 +1,5 @@
 import * as Yup from 'yup';
+import { SendMailViewFormValues } from '../../Estimates/SendMailViewDrawer/_types';
 
 export const PaymentReceivedSendMailFormSchema = Yup.object().shape({
   subject: Yup.string().required('Subject is required'),
@@ -10,11 +11,7 @@ export const PaymentReceivedSendMailFormSchema = Yup.object().shape({
   bcc: Yup.array().of(Yup.string().email('Invalid email address')),
 });
 
-export interface PaymentReceivedSendMailFormValues {
-  subject: string;
-  message: string;
-  to: string[];
-  cc: string[];
-  bcc: string[];
+export interface PaymentReceivedSendMailFormValues
+  extends SendMailViewFormValues {
   attachPdf: boolean;
 }