feat: estimate send mail drawer

2026-02-18 22:00:31 +00:00 · 2024-11-19 00:38:45 +02:00
parent 7df6aa4110
commit 7e65f3f642
11 changed files with 108 additions and 18 deletions
--- a/packages/webapp/src/components/DialogsContainer.tsx
+++ b/packages/webapp/src/components/DialogsContainer.tsx
@@ -11,7 +11,6 @@ import QuickPaymentMadeFormDialog from '@/containers/Dialogs/QuickPaymentMadeFor
 import AllocateLandedCostDialog from '@/containers/Dialogs/AllocateLandedCostDialog';
 import InvoicePdfPreviewDialog from '@/containers/Dialogs/InvoicePdfPreviewDialog';
 import EstimatePdfPreviewDialog from '@/containers/Dialogs/EstimatePdfPreviewDialog';
-import ReceiptPdfPreviewDialog from '@/containers/Dialogs/ReceiptPdfPreviewDialog';
 import MoneyInDialog from '@/containers/CashFlow/MoneyInDialog';
 import MoneyOutDialog from '@/containers/CashFlow/MoneyOutDialog';
 import BadDebtDialog from '@/containers/Dialogs/BadDebtDialog';
@@ -45,7 +44,6 @@ import ProjectBillableEntriesFormDialog from '@/containers/Projects/containers/P
 import TaxRateFormDialog from '@/containers/TaxRates/dialogs/TaxRateFormDialog/TaxRateFormDialog';
 import { DialogsName } from '@/constants/dialogs';
 import InvoiceExchangeRateChangeDialog from '@/containers/Sales/Invoices/InvoiceForm/Dialogs/InvoiceExchangeRateChangeDialog';
-import ReceiptMailDialog from '@/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog';
 import PaymentMailDialog from '@/containers/Sales/PaymentsReceived/PaymentMailDialog/PaymentMailDialog';
 import { ExportDialog } from '@/containers/Dialogs/ExportDialog';
 import { RuleFormDialog } from '@/containers/Banking/Rules/RuleFormDialog/RuleFormDialog';
@@ -80,7 +78,6 @@ export default function DialogsContainer() {
      />
      <InvoicePdfPreviewDialog dialogName={DialogsName.InvoicePdfForm} />
      <EstimatePdfPreviewDialog dialogName={DialogsName.EstimatePdfForm} />
-      <ReceiptPdfPreviewDialog dialogName={DialogsName.ReceiptPdfForm} />
      <MoneyInDialog dialogName={DialogsName.MoneyInForm} />
      <MoneyOutDialog dialogName={DialogsName.MoneyOutForm} />

@@ -142,7 +139,6 @@ export default function DialogsContainer() {
      <InvoiceExchangeRateChangeDialog
        dialogName={DialogsName.InvoiceExchangeRateChangeNotice}
      />
-      <ReceiptMailDialog dialogName={DialogsName.ReceiptMail} />
      <PaymentMailDialog dialogName={DialogsName.PaymentMail} />
      <ExportDialog dialogName={DialogsName.Export} />
      <RuleFormDialog dialogName={DialogsName.BankRuleForm} />
--- a/packages/webapp/src/components/DrawersContainer.tsx
+++ b/packages/webapp/src/components/DrawersContainer.tsx
@@ -33,6 +33,7 @@ import { BrandingTemplatesDrawer } from '@/containers/BrandingTemplates/Branding
 import { DRAWERS } from '@/constants/drawers';
 import { InvoiceSendMailDrawer } from '@/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer';
 import { EstimateSendMailDrawer } from '@/containers/Sales/Estimates/EstimateSendMailDrawer';
+import { ReceiptSendMailDrawer } from '@/containers/Sales/Receipts/ReceiptSendMailDrawer';

 /**
 * Drawers container of the dashboard.
@@ -83,6 +84,7 @@ export default function DrawersContainer() {
      <BrandingTemplatesDrawer name={DRAWERS.BRANDING_TEMPLATES} />
      <InvoiceSendMailDrawer name={DRAWERS.INVOICE_SEND_MAIL} />
      <EstimateSendMailDrawer name={DRAWERS.ESTIMATE_SEND_MAIL} />
+      <ReceiptSendMailDrawer name={DRAWERS.RECEIPT_SEND_MAIL} />
    </div>
  );
 }
--- a/packages/webapp/src/constants/drawers.ts
+++ b/packages/webapp/src/constants/drawers.ts
@@ -36,4 +36,5 @@ export enum DRAWERS {
  STRIPE_PAYMENT_INTEGRATION_EDIT = 'STRIPE_PAYMENT_INTEGRATION_EDIT',
  INVOICE_SEND_MAIL = 'INVOICE_SEND_MAIL',
  ESTIMATE_SEND_MAIL = 'ESTIMATE_SEND_MAIL',
+  RECEIPT_SEND_MAIL = 'RECEIPT_SEND_MAIL',
 }
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreview.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreview.tsx
@@ -1,7 +1,27 @@
-
+import { Suspense } from 'react';
+import { SendMailViewPreviewTabs } from '../SendMailViewDrawer/SendMailViewPreviewTabs';
+import { Tab } from '@blueprintjs/core';
+import { EstimateSendPdfPreviewConnected } from './EstimateSendPdfPreviewConnected';

 export function EstimateSendMailPreviewTabs() {
  return (
-    <h1>asdfsdf</h1>
-  )
-}
+    <SendMailViewPreviewTabs>
+      <Tab
+        id={'payment-page'}
+        title={'Payment page'}
+        panel={
+          <Suspense>{/* <InvoiceMailReceiptPreviewConnected /> */}</Suspense>
+        }
+      />
+      <Tab
+        id="pdf-document"
+        title={'PDF document'}
+        panel={
+          <Suspense>
+            <EstimateSendPdfPreviewConnected />
+          </Suspense>
+        }
+      />
+    </SendMailViewPreviewTabs>
+  );
+}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreviewHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailPreviewHeader.tsx
@@ -0,0 +1,13 @@
+import { SendViewPreviewHeader } from '../SendMailViewDrawer/SendMailViewPreviewHeader';
+
+export function EstimateSendMailPreviewHeader() {
+  return (
+    <SendViewPreviewHeader
+      companyName="A"
+      customerName="A"
+      subject={'adsfsdf'}
+      from={['a.bouhuolia@gmail.com']}
+      to={['a.bouhuolia@gmail.com']}
+    />
+  );
+}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendPdfPreviewConnected.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendPdfPreviewConnected.tsx
@@ -0,0 +1,31 @@
+import { Spinner } from '@blueprintjs/core';
+import { Stack } from '@/components';
+import { useGetSaleEstimateHtml } from '@/hooks/query';
+import { EstimateSendMailPreviewHeader } from './EstimateSendMailPreviewHeader';
+import { SendMailViewPreviewPdfIframe } from '../SendMailViewDrawer/SendMailViewPreviewPdfIframe';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+
+export function EstimateSendPdfPreviewConnected() {
+  return (
+    <Stack>
+      <EstimateSendMailPreviewHeader />
+
+      <Stack px={4} py={6}>
+        <EstimateSendPdfPreviewIframe />
+      </Stack>
+    </Stack>
+  );
+}
+
+function EstimateSendPdfPreviewIframe() {
+  const { payload } = useDrawerContext();
+  const { data, isLoading } = useGetSaleEstimateHtml(payload?.estimateId);
+
+  if (isLoading && data) {
+    return <Spinner size={20} />;
+  }
+
+  const iframeSrcDoc = data?.htmlContent;
+
+  return <SendMailViewPreviewPdfIframe srcDoc={iframeSrcDoc} />;
+}
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailBoot.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailBoot.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailContent.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailContent.tsx
@@ -7,13 +7,13 @@ import { ReceiptSendMailForm } from './ReceiptSendMailForm';
 import { ReceiptSendMailFormFields } from './ReceiptSendMailFormFields';
 import { ReceiptSendMailPreviewTabs } from './ReceiptSendMailPreviewTabs';

-export function InvoiceSendMailContent() {
+export function ReceiptSendMailContent() {
  return (
    <Stack className={Classes.DRAWER_BODY}>
      <ReceiptSendMailBoot>
        <ReceiptSendMailForm>
          <SendMailViewLayout
-            header={<SendMailViewHeader label={'Send Invoice Mail'} />}
+            header={<SendMailViewHeader label={'Send Receipt Mail'} />}
            fields={<ReceiptSendMailFormFields />}
            preview={<ReceiptSendMailPreviewTabs />}
          />
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailForm.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailForm.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Form, Formik, FormikHelpers } from 'formik';
 import { css } from '@emotion/css';
 import { Intent } from '@blueprintjs/core';
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreviewTabs.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailPreviewTabs.tsx
@@ -1,6 +1,3 @@
-
-
 export function ReceiptSendMailPreviewTabs() {
-
  return null;
-}
+}
--- a/packages/webapp/src/hooks/query/estimates.tsx
+++ b/packages/webapp/src/hooks/query/estimates.tsx
@@ -258,10 +258,10 @@ export function useSendSaleEstimateMail(props = {}) {
 }

 /**
- * 
- * @param {number} estimateId 
- * @param props 
- * @returns 
+ *
+ * @param {number} estimateId
+ * @param props
+ * @returns
 */
 export function useSaleEstimateMailState(estimateId: number, props?= {}) {
  const apiRequest = useApiRequest();
@@ -290,3 +290,31 @@ export function useGetSaleEstimatesState(
    { ...options },
  );
 }
+
+interface GetEstimateHtmlResponse {
+  htmlContent: string;
+}
+/**
+ * Retrieves the sale estimate html content.
+ * @param {number} invoiceId
+ * @param {UseQueryOptions<GetEstimateHtmlResponse>} options
+ * @returns {UseQueryResult<GetEstimateHtmlResponse>}
+ */
+export const useGetSaleEstimateHtml = (
+  estimateId: number,
+  options?: UseQueryOptions<GetEstimateHtmlResponse>,
+): UseQueryResult<GetEstimateHtmlResponse> => {
+  const apiRequest = useApiRequest();
+
+  return useQuery<GetEstimateHtmlResponse>(
+    ['SALE_ESTIMATE_HTML', estimateId],
+    () =>
+      apiRequest
+        .get(`sales/estimates/${estimateId}`, {
+          headers: {
+            Accept: 'application/json+html',
+          },
+        })
+        .then((res) => transformToCamelCase(res.data)),
+  );
+};