feat: Paper template reusable

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import { Box } from '@/components';
 import { Classes } from '@blueprintjs/core';
 import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
 import { ReceiptCustomizeGeneralField } from './ReceiptCustomizeFieldsGeneral';
 import { ReceiptCustomizeFieldsContent } from './ReceiptCustomizeFieldsContent';
+import { ReceiptPaperTemplate } from './ReceiptPaperTemplate';
 import { ReceiptCustomizeValues } from './types';
 import { initialValues } from './constants';
 
@@ -16,9 +16,9 @@ export default function ReceiptCustomizeContent() {
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >
-        {/* <ElementCustomize.PaperTemplate>
-          <InvoicePaperTemplate />
-        </ElementCustomize.PaperTemplate> */}
+        <ElementCustomize.PaperTemplate>
+          <ReceiptPaperTemplate />
+        </ElementCustomize.PaperTemplate>
 
         <ElementCustomize.FieldsTab id={'general'} label={'General'}>
           <ReceiptCustomizeGeneralField />

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx

@@ -0,0 +1,161 @@
+import { Group, Stack } from '@/components';
+import { PaperTemplate, PaperTemplateProps } from '../../Invoices/InvoiceCustomize/PaperTemplate';
+
+export interface ReceiptPaperTemplateProps extends PaperTemplateProps {
+  billedToAddress?: Array<string>;
+  billedFromAddress?: Array<string>;
+
+  total?: string;
+  showTotal?: boolean;
+  totalLabel?: string;
+
+  subtotal?: string;
+  showSubtotal?: boolean;
+  subtotalLabel?: string;
+
+  showCustomerNote?: boolean;
+  customerNote?: string;
+  customerNoteLabel?: string;
+
+  showTermsConditions?: boolean;
+  termsConditions?: string;
+  termsConditionsLabel?: string;
+
+  lines?: Array<{
+    item: string;
+    description: string;
+    rate: string;
+    quantity: string;
+    total: string;
+  }>;
+
+  receiptDateLabel?: string;
+  showReceiptDate?: boolean;
+  receiptDate?: string;
+
+  receiptNumebr?: string;
+  receiptNumberLabel?: string;
+  showReceiptNumber?: boolean;
+}
+
+export function ReceiptPaperTemplate({
+  primaryColor,
+  secondaryColor,
+  showCompanyLogo = true,
+  companyLogo,
+
+  billedToAddress = [
+    'Bigcapital Technology, Inc.',
+    '131 Continental Dr Suite 305 Newark,',
+    'Delaware 19713',
+    'United States',
+    '+1 762-339-5634',
+    'ahmed@bigcapital.app',
+  ],
+  billedFromAddress = [
+    '131 Continental Dr Suite 305 Newark,',
+    'Delaware 19713',
+    'United States',
+    '+1 762-339-5634',
+    'ahmed@bigcapital.app',
+  ],
+  total = '$1000.00',
+  totalLabel = 'Total',
+  showTotal = true,
+
+  subtotal = '1000/00',
+  subtotalLabel = 'Subtotal',
+  showSubtotal = true,
+
+  showCustomerNote = true,
+  customerNote = 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
+  customerNoteLabel = 'Customer Note',
+
+  showTermsConditions = true,
+  termsConditions = 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
+  termsConditionsLabel = 'Terms & Conditions',
+
+  lines = [
+    {
+      item: 'Simply dummy text',
+      description: 'Simply dummy text of the printing and typesetting',
+      rate: '1',
+      quantity: '1000',
+      total: '$1000.00',
+    },
+  ],
+  showReceiptNumber = true,
+  receiptNumberLabel = 'Receipt Number',
+  receiptNumebr = '346D3D40-0001',
+
+  receiptDate = 'September 3, 2024',
+  showReceiptDate = true,
+  receiptDateLabel = 'Receipt Date',
+}: ReceiptPaperTemplateProps) {
+  return (
+    <PaperTemplate
+      primaryColor={primaryColor}
+      secondaryColor={secondaryColor}
+      showCompanyLogo={showCompanyLogo}
+      companyLogo={companyLogo}
+      bigtitle={'Receipt'}
+    >
+      <Stack spacing={24}>
+        <PaperTemplate.TermsList>
+          {showReceiptNumber && (
+            <PaperTemplate.TermsItem label={receiptNumberLabel}>
+              {receiptNumebr}
+            </PaperTemplate.TermsItem>
+          )}
+
+          {showReceiptDate && (
+            <PaperTemplate.TermsItem label={receiptDateLabel}>
+              {receiptDate}
+            </PaperTemplate.TermsItem>
+          )}
+        </PaperTemplate.TermsList>
+
+        <Group spacing={10}>
+          <PaperTemplate.Address items={billedToAddress} />
+          <PaperTemplate.Address items={billedFromAddress} />
+        </Group>
+
+        <Stack spacing={0}>
+          <PaperTemplate.Table
+            columns={[
+              { label: 'Item', accessor: 'item' },
+              { label: 'Description', accessor: 'item' },
+              { label: 'Rate', accessor: 'rate' },
+              { label: 'Total', accessor: 'total' },
+            ]}
+            data={lines}
+          />
+          <PaperTemplate.Totals>
+            {showSubtotal && (
+              <PaperTemplate.TotalLine
+                label={subtotalLabel}
+                amount={subtotal}
+              />
+            )}
+            {showTotal && (
+              <PaperTemplate.TotalLine label={totalLabel} amount={total} />
+            )}
+          </PaperTemplate.Totals>
+        </Stack>
+
+        <Stack spacing={0}>
+          {showCustomerNote && (
+            <PaperTemplate.Statement label={customerNoteLabel}>
+              {customerNote}
+            </PaperTemplate.Statement>
+          )}
+          {showTermsConditions && (
+            <PaperTemplate.Statement label={termsConditionsLabel}>
+              {termsConditions}
+            </PaperTemplate.Statement>
+          )}
+        </Stack>
+      </Stack>
+    </PaperTemplate>
+  );
+}