feat: wip send estimate mail preview

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

@@ -1,11 +1,12 @@
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { useSaleEstimateMailState } from '@/hooks/query';
 
 interface EstimateSendMailBootValues {
   estimateId: number;
 
-  estimateMailState: GetSaleEstimateDefaultOptionsResponse | undefined;
+  estimateMailState: any;
   isEstimateMailState: boolean;
 }
 interface EstimateSendMailBootProps {
@@ -15,7 +16,9 @@ interface EstimateSendMailBootProps {
 const EstimateSendMailContentBootContext =
   createContext<EstimateSendMailBootValues>({} as EstimateSendMailBootValues);
 
-export const EstimateSendMailBoot = ({ children }: EstimateSendMailBootProps) => {
+export const EstimateSendMailBoot = ({
+  children,
+}: EstimateSendMailBootProps) => {
   const {
     payload: { estimateId },
   } = useDrawerContext();

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

@@ -1,9 +1,24 @@
-
+import { Classes } from '@blueprintjs/core';
+import { EstimateSendMailBoot } from './EstimateSendMailBoot';
+import { Stack } from '@/components';
+import { EstimateSendMailForm } from './EstimateSendMailForm';
+import { SendMailViewHeader } from '../SendMailViewDrawer/SendMailViewHeader';
+import { SendMailViewLayout } from '../SendMailViewDrawer/SendMailViewLayout';
+import { EstimateSendMailFields } from './EstimateSnedMailFields';
+import { EstimateSendMailPreviewTabs } from './EstimateSendMailPreview';
 
 export function EstimateSendMailContent() {
-
   return (
-
-
+    <Stack className={Classes.DRAWER_BODY}>
+      <EstimateSendMailBoot>
+        <EstimateSendMailForm>
+          <SendMailViewLayout
+            header={<SendMailViewHeader label={'Send Estimate Mail'} />}
+            fields={<EstimateSendMailFields />}
+            preview={<EstimateSendMailPreviewTabs />}
+          />
+        </EstimateSendMailForm>
+      </EstimateSendMailBoot>
+    </Stack>
   );
-}
+}

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

@@ -4,9 +4,9 @@ import * as R from 'ramda';
 import { Drawer, DrawerSuspense } from '@/components';
 import withDrawers from '@/containers/Drawer/withDrawers';
 
-const EstimateSendMailDrawerProps = React.lazy(() =>
+const EstimateSendMailContent = React.lazy(() =>
   import('./EstimateSendMailContent').then((module) => ({
-    default: module.InvoiceSendMailContent,
+    default: module.EstimateSendMailContent,
   })),
 );
 
@@ -31,7 +31,7 @@ function EstimateSendMailDrawerRoot({
       size={'calc(100% - 10px)'}
     >
       <DrawerSuspense>
-        <EstimateSendMailDrawerProps />
+        <EstimateSendMailContent />
       </DrawerSuspense>
     </Drawer>
   );

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

@@ -1,17 +1,17 @@
+// @ts-nocheck
 import { Form, Formik, FormikHelpers } from 'formik';
 import { css } from '@emotion/css';
 import { Intent } from '@blueprintjs/core';
-import { InvoiceSendMailFormValues } from './_types';
-import { InvoiceSendMailFormSchema } from './InvoiceSendMailForm.schema';
-import { useSendSaleInvoiceMail } from '@/hooks/query';
+import { EstimateSendMailFormValues } from './_interfaces';
+import { EstimateSendMailSchema } from './EstimateSendMail.schema';
+import { useSendSaleEstimateMail } from '@/hooks/query';
 import { AppToaster } from '@/components';
-import { useInvoiceSendMailBoot } from './InvoiceSendMailContentBoot';
 import { useDrawerActions } from '@/hooks/state';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { transformToForm } from '@/utils';
 import { useEstimateSendMailBoot } from './EstimateSendMailBoot';
 
-const initialValues: InvoiceSendMailFormValues = {
+const initialValues: EstimateSendMailFormValues = {
   subject: '',
   message: '',
   to: [],
@@ -20,27 +20,27 @@ const initialValues: InvoiceSendMailFormValues = {
   attachPdf: true,
 };
 
-interface InvoiceSendMailFormProps {
+interface EstimateSendMailFormProps {
   children: React.ReactNode;
 }
 
-export function EstimateSendMailForm({ children }: InvoiceSendMailFormProps) {
-  const { mutateAsync: sendInvoiceMail } = useSendSaleInvoiceMail();
+export function EstimateSendMailForm({ children }: EstimateSendMailFormProps) {
+  const { mutateAsync: sendEstimateMail } = useSendSaleEstimateMail();
   const { estimateId, estimateMailState } = useEstimateSendMailBoot();
 
   const { name } = useDrawerContext();
   const { closeDrawer } = useDrawerActions();
 
-  const _initialValues: InvoiceSendMailFormValues = {
+  const _initialValues: EstimateSendMailFormValues = {
     ...initialValues,
-    ...transformToForm(invoiceMailState, initialValues),
+    ...transformToForm(estimateMailState, initialValues),
   };
   const handleSubmit = (
-    values: InvoiceSendMailFormValues,
-    { setSubmitting }: FormikHelpers<InvoiceSendMailFormValues>,
+    values: EstimateSendMailFormValues,
+    { setSubmitting }: FormikHelpers<EstimateSendMailFormValues>,
   ) => {
     setSubmitting(true);
-    sendInvoiceMail({ id: invoiceId, values: { ...values } })
+    sendEstimateMail({ id: estimateId, values: { ...values } })
       .then(() => {
         AppToaster.show({
           message: 'The invoice mail has been sent to the customer.',
@@ -61,7 +61,7 @@ export function EstimateSendMailForm({ children }: InvoiceSendMailFormProps) {
   return (
     <Formik
       initialValues={_initialValues}
-      validationSchema={InvoiceSendMailFormSchema}
+      validationSchema={EstimateSendMailSchema}
       onSubmit={handleSubmit}
     >
       <Form

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

@@ -0,0 +1,7 @@
+
+
+export function EstimateSendMailPreviewTabs() {
+  return (
+    <h1>asdfsdf</h1>
+  )
+}

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

@@ -0,0 +1,74 @@
+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 { useFormikContext } from "formik";
+import { useDrawerContext } from "@/components/Drawer/DrawerProvider";
+import { useDrawerActions } from "@/hooks/state";
+
+const items: Array<any> = [];
+const argsOptions: Array<any> = [];
+
+export function EstimateSendMailFields() {
+  return (
+    <Stack>
+      <Stack spacing={0} overflow="auto" flex="1" p={'30px'}>
+        <SendMailViewToAddressField
+          toMultiSelectProps={{ items }}
+          ccMultiSelectProps={{ items }}
+          bccMultiSelectProps={{ items }}
+        />
+        <FFormGroup label={'Submit'} name={'subject'}>
+          <FInputGroup name={'subject'} large fastField />
+        </FFormGroup>
+
+        <SendMailViewMessageField argsOptions={argsOptions} />
+
+        <Group>
+          <FCheckbox name={'attachPdf'} label={'Attach PDF'} />
+        </Group>
+      </Stack>
+
+      <EstimateSendMailFooter />
+    </Stack>
+  );
+}
+
+
+function EstimateSendMailFooter() {
+  const { isSubmitting } = useFormikContext();
+  const { name } = useDrawerContext();
+  const { closeDrawer } = useDrawerActions();
+
+  const handleClose = () => {
+    closeDrawer(name);
+  };
+
+  return (
+    <Group
+      py={'12px'}
+      px={'16px'}
+      borderTop="1px solid #d8d8d9"
+      position={'apart'}
+    >
+      <Group spacing={10} ml={'auto'}>
+        <Button
+          disabled={isSubmitting}
+          onClick={handleClose}
+          style={{ minWidth: '65px' }}
+        >
+          Close
+        </Button>
+
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '85px' }}
+          type="submit"
+        >
+          Send Mail
+        </Button>
+      </Group>
+    </Group>
+  );
+}

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

@@ -0,0 +1 @@
+export * from './EstimateSendMailDrawer';