feat: payment received mail preview

packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailBoot.tsx

@@ -2,12 +2,12 @@
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
-import { useSaleInvoiceMailState } from '@/hooks/query';
+import { GetSaleReceiptMailStateResponse, useSaleInvoiceMailState, useSaleReceiptMailState } from '@/hooks/query';
 
 interface ReceiptSendMailBootValues {
   receiptId: number;
 
-  receiptMailState: any;
+  receiptMailState: GetSaleReceiptMailStateResponse | null;
   isReceiptMailState: boolean;
 }
 interface ReceiptSendMailBootProps {
@@ -24,13 +24,13 @@ export const ReceiptSendMailBoot = ({ children }: ReceiptSendMailBootProps) => {
 
   // Receipt mail options.
   const { data: receiptMailState, isLoading: isReceiptMailState } =
-    useSaleInvoiceMailState(receiptId);
+    useSaleReceiptMailState(receiptId);
 
   const isLoading = isReceiptMailState;
 
-  // if (isLoading) {
-  //   return <Spinner size={20} />;
-  // }
+  if (isLoading) {
+    return <Spinner size={20} />;
+  }
   const value = {
     receiptId,
 

packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailFormFields.tsx

@@ -1,17 +1,19 @@
+import { Button, Intent } from "@blueprintjs/core";
+import { useFormikContext } from "formik";
 import { FCheckbox, FFormGroup, FInputGroup, Group, Stack } from "@/components";
 import { SendMailViewToAddressField } from "../../Estimates/SendMailViewDrawer/SendMailViewToAddressField";
 import { SendMailViewMessageField } from "../../Estimates/SendMailViewDrawer/SendMailViewMessageField";
-import { Button, Intent } from "@blueprintjs/core";
 import { useDrawerActions } from "@/hooks/state";
 import { useDrawerContext } from "@/components/Drawer/DrawerProvider";
-import { useFormikContext } from "formik";
-
-const items: Array<any> = [];
-const argsOptions: Array<any> = [];
+import { useSendReceiptFormatArgsOptions } from "./_hooks";
+import { useSendMailItems } from "../../Estimates/SendMailViewDrawer/hooks";
 
 export function ReceiptSendMailFormFields() {
+  const argsOptions = useSendReceiptFormatArgsOptions();
+  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/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreviewHeader.tsx

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

packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/_hooks.ts

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import { useFormikContext } from 'formik';
+import { SelectOptionProps } from '@blueprintjs-formik/select';
+import { useReceiptSendMailBoot } from './ReceiptSendMailBoot';
+import { ReceiptSendMailFormValues } from './_types';
+import {
+  formatMailMessage,
+  transformEmailArgs,
+  transformFormatArgsToOptions,
+} from '../../Estimates/SendMailViewDrawer/hooks';
+
+/**
+ * Retrieves the mail format arguments of receipt mail.
+ * @returns {Record<string, string>}
+ */
+export const useSendReceiptMailFormatArgs = (): Record<string, string> => {
+  const { receiptMailState } = useReceiptSendMailBoot();
+
+  return useMemo(() => {
+    return transformEmailArgs(receiptMailState?.formatArgs || {});
+  }, [receiptMailState]);
+};
+
+/**
+ * Retrieves the formatted receipt subject.
+ * @returns {string}
+ */
+export const useSendReceiptMailSubject = (): string => {
+  const { values } = useFormikContext<ReceiptSendMailFormValues>();
+  const formatArgs = useSendReceiptMailFormatArgs();
+
+  return formatMailMessage(values?.subject, formatArgs);
+};
+
+/**
+ * Retrieves the estimate format options.
+ * @returns {Array<SelectOptionProps>}
+ */
+export const useSendReceiptFormatArgsOptions = (): Array<SelectOptionProps> => {
+  const formatArgs = useSendReceiptMailFormatArgs();
+
+  return transformFormatArgsToOptions(formatArgs);
+};
+
+/**
+ * Retrieves the formatted estimate message.
+ * @returns {string}
+ */
+export const useSendReceiptMailMessage = (): string => {
+  const { values } = useFormikContext<ReceiptSendMailFormValues>();
+  const formatArgs = useSendReceiptMailFormatArgs();
+
+  return formatMailMessage(values?.message, formatArgs);
+};

packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/_types.ts

@@ -1 +1,3 @@
-export interface ReceiptSendMailFormValues {}
+import { SendMailViewFormValues } from "../../Estimates/SendMailViewDrawer/_types";
+
+export interface ReceiptSendMailFormValues extends SendMailViewFormValues {}