feat: wip estimate send mail

packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailBoot.tsx

@@ -1,12 +1,12 @@
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
-import { useSaleEstimateMailState } from '@/hooks/query';
+import { SaleEstimateMailStateResponse, useSaleEstimateMailState } from '@/hooks/query';
 
 interface EstimateSendMailBootValues {
   estimateId: number;
 
-  estimateMailState: any;
+  estimateMailState: SaleEstimateMailStateResponse | undefined;
   isEstimateMailState: boolean;
 }
 interface EstimateSendMailBootProps {

packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreviewHeader.tsx

@@ -1,13 +1,23 @@
+import { useFormikContext } from 'formik';
 import { SendViewPreviewHeader } from '../SendMailViewDrawer/SendMailViewPreviewHeader';
+import { useEstimateSendMailBoot } from './EstimateSendMailBoot';
+import { useSendEstimateMailSubject } from './hooks';
+import { EstimateSendMailFormValues } from './_interfaces';
 
 export function EstimateSendMailPreviewHeader() {
+  const subject = useSendEstimateMailSubject();
+  const { estimateMailState } = useEstimateSendMailBoot();
+  const {
+    values: { to, from },
+  } = useFormikContext<EstimateSendMailFormValues>();
+
   return (
     <SendViewPreviewHeader
-      companyName="A"
-      customerName="A"
-      subject={'adsfsdf'}
-      from={['a.bouhuolia@gmail.com']}
-      to={['a.bouhuolia@gmail.com']}
+      companyName={estimateMailState?.companyName}
+      customerName={estimateMailState?.customerName}
+      subject={subject}
+      from={from}
+      to={to}
     />
   );
 }

packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSnedMailFields.tsx

@@ -1,17 +1,20 @@
 import { useFormikContext } from 'formik';
+import { Button, Intent } from '@blueprintjs/core';
 import { FCheckbox, FFormGroup, FInputGroup, Group, Stack } from '@/components';
 import { SendMailViewToAddressField } from '../SendMailViewDrawer/SendMailViewToAddressField';
 import { SendMailViewMessageField } from '../SendMailViewDrawer/SendMailViewMessageField';
-import { Button, Intent } from '@blueprintjs/core';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
+import { useSendEstimateFormatArgsOptions } from './hooks';
+import { useSendMailItems } from '../SendMailViewDrawer/hooks';
 
-const items: Array<any> = [];
-const argsOptions: Array<any> = [];
 
 export function EstimateSendMailFields() {
+  const argOptions = useSendEstimateFormatArgsOptions();
+  const items = useSendMailItems();
+
   return (
-    <Stack>
+    <Stack flex={1}>
       <Stack spacing={0} overflow="auto" flex="1" p={'30px'}>
         <SendMailViewToAddressField
           toMultiSelectProps={{ items }}
@@ -22,7 +25,7 @@ export function EstimateSendMailFields() {
           <FInputGroup name={'subject'} large fastField />
         </FFormGroup>
 
-        <SendMailViewMessageField argsOptions={argsOptions} />
+        <SendMailViewMessageField argsOptions={argOptions} />
 
         <Group>
           <FCheckbox name={'attachPdf'} label={'Attach PDF'} />

packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/_interfaces.ts

@@ -1 +1,5 @@
-export interface EstimateSendMailFormValues {}
+import { SendMailViewFormValues } from '../SendMailViewDrawer/_types';
+
+export interface EstimateSendMailFormValues extends SendMailViewFormValues {
+  attachPdf?: boolean;
+}

packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/hooks.ts

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { useFormikContext } from 'formik';
+import { SelectOptionProps } from '@blueprintjs-formik/select';
+import { useEstimateSendMailBoot } from './EstimateSendMailBoot';
+import {
+  formatMailMessage,
+  transformEmailArgs,
+  transformFormatArgsToOptions,
+} from '../SendMailViewDrawer/hooks';
+import { EstimateSendMailFormValues } from './_interfaces';
+
+/**
+ * Retrieves the mail format arguments of estimate mail.
+ * @returns {Record<string, string>}
+ */
+export const useSendEstimateMailFormatArgs = (): Record<string, string> => {
+  const { estimateMailState } = useEstimateSendMailBoot();
+
+  return useMemo(() => {
+    return transformEmailArgs(estimateMailState?.formatArgs || {});
+  }, [estimateMailState]);
+};
+
+/**
+ * Retrieves the formatted estimate subject.
+ * @returns {string}
+ */
+export const useSendEstimateMailSubject = (): string => {
+  const { values } = useFormikContext<EstimateSendMailFormValues>();
+  const formatArgs = useSendEstimateMailFormatArgs();
+
+  return formatMailMessage(values?.subject, formatArgs);
+};
+
+/**
+ * Retrieves the estimate format options.
+ * @returns {Array<SelectOptionProps>}
+ */
+export const useSendEstimateFormatArgsOptions =
+  (): Array<SelectOptionProps> => {
+    const formatArgs = useSendEstimateMailFormatArgs();
+
+    return transformFormatArgsToOptions(formatArgs);
+  };
+
+/**
+ * Retrieves the formatted estimate message.
+ * @returns {string}
+ */
+export const useSendEstimateMailMessage = (): string => {
+  const { values } = useFormikContext<EstimateSendMailFormValues>();
+  const formatArgs = useSendEstimateMailFormatArgs();
+
+  return formatMailMessage(values?.message, formatArgs);
+};