feat: link discount to mail receipts

2026-02-17 05:10:31 +00:00 · 2024-12-02 18:45:16 +02:00
parent 05cf94940e
commit 5b75fa9286
14 changed files with 294 additions and 18 deletions
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailReceipt.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/EstimateSendMailReceipt.tsx
@@ -1,4 +1,5 @@
 import { x } from '@xstyled/emotion';
+import { isEmpty } from 'lodash';
 import { Group, Stack } from '@/components';
 import {
  SendMailReceipt,
@@ -14,6 +15,14 @@ export interface EstimateSendMailReceiptProps extends SendMailReceiptProps {
  estimateNumberLabel?: string;
  estimateNumber: string;

+  // # Discount
+  discount?: string;
+  discountLabel?: string;
+
+  // # Adjustment
+  adjustment?: string;
+  adjsutmentLabel?: string;
+
  // # Total.
  total: string;
  totalLabel?: string;
@@ -47,10 +56,6 @@ export function EstimateSendMailReceipt({
  estimateNumberLabel = 'Estimate #',
  estimateNumber,

-  // # Total.
-  total,
-  totalLabel = 'Total',
-
  // # Expiration date.
  expirationDateLabel = 'Expiration Date',
  expirationDate,
@@ -65,6 +70,18 @@ export function EstimateSendMailReceipt({
  subtotal,
  subtotalLabel = 'Subtotal',

+  // # Discount
+  discount,
+  discountLabel = 'Discount',
+
+  // # Adjustment
+  adjustment,
+  adjsutmentLabel = 'Adjustment',
+
+  // # Total.
+  total,
+  totalLabel = 'Total',
+
  // # View estimate button
  showViewEstimateButton = true,
  viewEstimateButtonLabel = 'View Estimate',
@@ -142,6 +159,36 @@ export function EstimateSendMailReceipt({
          </x.span>
        </Group>

+        {!isEmpty(discount) && (
+          <Group
+            h={'40px'}
+            position={'apart'}
+            borderBottomStyle="solid"
+            borderBottomWidth={'1px'}
+            borderBottomColor={'#D9D9D9'}
+          >
+            <x.span fontWeight={500}>{discountLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {discount}
+            </x.span>
+          </Group>
+        )}
+
+        {!isEmpty(adjustment) && (
+          <Group
+            h={'40px'}
+            position={'apart'}
+            borderBottomStyle="solid"
+            borderBottomWidth={'1px'}
+            borderBottomColor={'#D9D9D9'}
+          >
+            <x.span fontWeight={500}>{adjsutmentLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {adjustment}
+            </x.span>
+          </Group>
+        )}
+
        <Group
          h={'40px'}
          position={'apart'}
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/withEstimateMailReceiptPreviewProps.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateSendMailDrawer/withEstimateMailReceiptPreviewProps.tsx
@@ -35,6 +35,9 @@ export const withEstimateMailReceiptPreviewProps = <
      expirationDate: estimateMailState?.expirationDateFormatted,
      estimateNumber: estimateMailState?.estimateNumber,
      estimateDate: estimateMailState?.estimateDateFormatted,
+      subtotal: estimateMailState?.subtotalFormatted,
+      discount: estimateMailState?.discountFormatted,
+      adjustment: estimateMailState?.adjustmentFormatted,
      items,
      message,
    };
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceipt.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceipt.tsx
@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { x } from '@xstyled/emotion';
 import { lighten } from 'polished';
 import { Group, Stack, StackProps } from '@/components';
+import { isEmpty } from 'lodash';

 export interface InvoiceMailReceiptProps extends StackProps {
  // # Company
@@ -16,6 +17,18 @@ export interface InvoiceMailReceiptProps extends StackProps {
  dueDate: string;
  dueDateLabel?: string;

+  // # Subtotal
+  subtotal: string;
+  subtotalLabel?: string;
+
+  // # Discount amount
+  discount?: string;
+  discountLabel?: string;
+
+  // # Adjustment
+  adjustment?: string;
+  adjustmentLabel?: string;
+
  // # Due amount
  dueAmountLabel?: string;
  dueAmount: string;
@@ -52,14 +65,26 @@ export function InvoiceMailReceipt({
  dueDate,
  dueDateLabel = 'Due',

-  // # Due amount
-  dueAmountLabel = 'Due Amount',
-  dueAmount,
+  // # Subtotal
+  subtotal,
+  subtotalLabel = 'Subtotal',
+
+  // # Discount amount
+  discount,
+  discountLabel = 'Discount',
+
+  // # Adjustment
+  adjustment,
+  adjustmentLabel = 'Adjustment',

  // # Total
  total,
  totalLabel = 'Total',

+  // # Due amount
+  dueAmountLabel = 'Due Amount',
+  dueAmount,
+
  // # Invoice number
  invoiceNumber,
  invoiceNumberLabel = 'Invoice #',
@@ -166,6 +191,53 @@ export function InvoiceMailReceipt({
          </Group>
        ))}

+        {/*---- Subtotal ----*/}
+        <Group
+          h={'40px'}
+          position={'apart'}
+          borderBottomStyle="solid"
+          borderBottomWidth={'1px'}
+          borderColor={'#000'}
+        >
+          <x.span fontWeight={500}>{subtotalLabel}</x.span>
+          <x.span fontWeight={600} fontSize={15}>
+            {subtotal}
+          </x.span>
+        </Group>
+
+        {/*---- Discount ----*/}
+        {!isEmpty(discount) && (
+          <Group
+            h="40px"
+            position="apart"
+            borderBottomStyle="solid"
+            borderBottomWidth="1px"
+            borderColor="#000"
+          >
+            <x.span fontWeight={500}>{discountLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {discount}
+            </x.span>
+          </Group>
+        )}
+
+        {/*---- Adjustment ----*/}
+        {!isEmpty(adjustment) && (
+          <Group
+            h="40px"
+            position="apart"
+            borderBottomStyle="solid"
+            borderBottomWidth="1px"
+            borderColor="#000"
+          >
+            <x.span fontWeight={500}>{adjustmentLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {adjustment}
+            </x.span>
+          </Group>
+        )}
+
+        {/*---- Total ----*/}
        <Group
          h={'40px'}
          position={'apart'}
@@ -179,6 +251,7 @@ export function InvoiceMailReceipt({
          </x.span>
        </Group>

+        {/*---- Due amount ----*/}
        <Group
          h={'40px'}
          position={'apart'}
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview.tsx
@@ -29,6 +29,7 @@ export function InvoiceMailReceiptPreview(
    total: '$1,000.00',
    invoiceNumber: 'INV-0001',
    dueDate: '2 Oct 2024',
+    subtotal: '$1,000.00',
    dueAmount: '$1,000.00',
    items: [{ label: 'Web development', total: '$1000.00', quantity: 1 }],
    companyLogoUri: ' ',
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceMailReceiptPreviewConnected.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceMailReceiptPreviewConnected.tsx
@@ -56,9 +56,12 @@ const withInvoiceMailReceiptPreviewProps = <
      companyLogoUri: invoiceMailState?.companyLogoUri,
      primaryColor: invoiceMailState?.primaryColor,
      total: invoiceMailState?.totalFormatted,
+      subtotal: invoiceMailState?.subtotalFormatted,
      dueDate: invoiceMailState?.dueDateFormatted,
      dueAmount: invoiceMailState?.dueAmountFormatted,
      invoiceNumber: invoiceMailState?.invoiceNo,
+      discount: invoiceMailState?.discountAmountFormatted,
+      adjustment: invoiceMailState?.adjustmentFormatted,
      items,
      message,
    };
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailBoot.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailBoot.tsx
@@ -2,7 +2,10 @@
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
-import { GetSaleReceiptMailStateResponse, useSaleInvoiceMailState, useSaleReceiptMailState } from '@/hooks/query';
+import {
+  GetSaleReceiptMailStateResponse,
+  useSaleReceiptMailState,
+} from '@/hooks/query';

 interface ReceiptSendMailBootValues {
  receiptId: number;
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailReceipt.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/ReceiptSendMailReceipt.tsx
@@ -4,6 +4,7 @@ import {
  SendMailReceipt,
  SendMailReceiptProps,
 } from '../../Estimates/SendMailViewDrawer/SendMailViewReceiptPreview';
+import { isEmpty } from 'lodash';

 export interface ReceiptSendMailReceiptProps extends SendMailReceiptProps {
  // # Company name.
@@ -14,10 +15,6 @@ export interface ReceiptSendMailReceiptProps extends SendMailReceiptProps {
  receiptNumberLabel?: string;
  receiptNumber: string;

-  // # Total.
-  total: string;
-  totalLabel?: string;
-
  // # Message
  message: string;

@@ -27,6 +24,18 @@ export interface ReceiptSendMailReceiptProps extends SendMailReceiptProps {
  // # Subtotal
  subtotal: string;
  subtotalLabel?: string;
+
+  // # Discount
+  discount?: string;
+  discountLabel?: string;
+
+  // # Adjustment
+  adjustment?: string;
+  adjustmentLabel?: string;
+
+  // # Total.
+  total: string;
+  totalLabel?: string;
 }

 export function ReceiptSendMailReceipt({
@@ -42,6 +51,14 @@ export function ReceiptSendMailReceipt({
  total,
  totalLabel = 'Total',

+  // # Discount
+  discount,
+  discountLabel = 'Discount',
+
+  // # Adjustment
+  adjustment,
+  adjustmentLabel = 'Adjustment',
+
  // # Message
  message,

@@ -49,7 +66,6 @@ export function ReceiptSendMailReceipt({
  items,
  subtotal,
  subtotalLabel = 'Subtotal',
-
  ...rest
 }: ReceiptSendMailReceiptProps) {
  return (
@@ -109,6 +125,36 @@ export function ReceiptSendMailReceipt({
          </x.span>
        </Group>

+        {!isEmpty(discount) && (
+          <Group
+            h={'40px'}
+            position={'apart'}
+            borderBottomStyle="solid"
+            borderBottomWidth={'1px'}
+            borderBottomColor={'#D9D9D9'}
+          >
+            <x.span fontWeight={500}>{discountLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {discount}
+            </x.span>
+          </Group>
+        )}
+
+        {!isEmpty(adjustment) && (
+          <Group
+            h={'40px'}
+            position={'apart'}
+            borderBottomStyle="solid"
+            borderBottomWidth={'1px'}
+            borderBottomColor={'#D9D9D9'}
+          >
+            <x.span fontWeight={500}>{adjustmentLabel}</x.span>
+            <x.span fontWeight={600} fontSize={15}>
+              {adjustment}
+            </x.span>
+          </Group>
+        )}
+
        <Group
          h={'40px'}
          position={'apart'}
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/withReceiptMailReceiptPreviewProps.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptSendMailDrawer/withReceiptMailReceiptPreviewProps.tsx
@@ -37,6 +37,8 @@ export const withReceiptMailReceiptPreviewProps = <
      total: receiptMailState?.totalFormatted,
      subtotal: receiptMailState?.subtotalFormatted,
      receiptNumber: receiptMailState?.receiptNumber,
+      discount: receiptMailState?.discountAmountFormatted,
+      adjustment: receiptMailState?.adjustmentFormatted,
      items,
      message,
    };