fix: Invoice pdf customize

2026-02-18 13:50:31 +00:00 · 2024-09-25 11:04:17 +02:00
parent 1c8e19378f
commit 2f9adfd908
21 changed files with 74 additions and 45 deletions
--- a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx
+++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx
@@ -134,8 +134,3 @@ export function BrandingTemplateForm<T extends BrandingTemplateValues>({
 export const validationSchema = Yup.object().shape({
  templateName: Yup.string().required('Template Name is required'),
 });
-
-
-// Initial values - companyLogoKey, companyLogoUri
-// Form - _companyLogoFile, companyLogoKey, companyLogoUri
-// Request - companyLogoKey
--- a/packages/webapp/src/containers/BrandingTemplates/types.ts
+++ b/packages/webapp/src/containers/BrandingTemplates/types.ts
@@ -3,6 +3,7 @@
 export interface BrandingTemplateValues {
  templateName: string;

+  // Company logo
  companyLogoKey?: string;
  companyLogoUri?: string;
 }
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
@@ -53,10 +53,14 @@ export interface CreditNotePaperTemplateProps extends PaperTemplateProps {
 }

 export function CreditNotePaperTemplate({
+  // # Colors
  primaryColor,
  secondaryColor,
+
+  // # Company Logo
  showCompanyLogo = true,
-  companyLogo,
+  companyLogoUri = '',
+
  companyName = 'Bigcapital Technology, Inc.',

  // Address
@@ -123,7 +127,7 @@ export function CreditNotePaperTemplate({
      primaryColor={primaryColor}
      secondaryColor={secondaryColor}
      showCompanyLogo={showCompanyLogo}
-      companyLogo={companyLogo}
+      companyLogoUri={companyLogoUri}
      bigtitle={'Credit Note'}
    >
      <Stack spacing={24}>
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts
@@ -7,8 +7,8 @@ export const initialValues = {

  // Company logo.
  showCompanyLogo: true,
-  companyLogo:
-    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+  companyLogoKey: '',
+  companyLogoUri: '',

  // Address
  showBilledToAddress: true,
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts
@@ -7,7 +7,6 @@ export interface CreditNoteCustomizeValues extends BrandingTemplateValues {

  // Company Logo
  showCompanyLogo?: boolean;
-  companyLogo?: string;

  // Entries
  itemNameLabel?: string;
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
@@ -76,7 +76,6 @@ export function EstimateCustomizeGeneralField() {
                name={'showCompanyLogo'}
                label={'Display company logo in the paper'}
                style={{ fontSize: 14 }}
-                large
                fastField
              />
            </FFormGroup>
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
@@ -1,4 +1,4 @@
-import { Group, Stack } from '@/components';
+import { Stack } from '@/components';
 import {
  PaperTemplate,
  PaperTemplateProps,
@@ -57,8 +57,10 @@ export interface EstimatePaperTemplateProps extends PaperTemplateProps {
 export function EstimatePaperTemplate({
  primaryColor,
  secondaryColor,
+
  showCompanyLogo = true,
-  companyLogo,
+  companyLogoUri = '',
+
  companyName,

  billedToAddress = [
@@ -122,7 +124,7 @@ export function EstimatePaperTemplate({
      primaryColor={primaryColor}
      secondaryColor={secondaryColor}
      showCompanyLogo={showCompanyLogo}
-      companyLogo={companyLogo}
+      companyLogoUri={companyLogoUri}
      bigtitle={'Estimate'}
    >
      <Stack spacing={24}>
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts
@@ -1,14 +1,14 @@
 export const initialValues = {
  templateName: '',
-  
+
  // Colors
  primaryColor: '#2c3dd8',
  secondaryColor: '#2c3dd8',

  // Company logo.
  showCompanyLogo: true,
-  companyLogo:
-    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+  companyLogoKey: '',
+  companyLogoUri: '',

  // Top details.
  showEstimateNumber: true,
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts
@@ -1,4 +1,4 @@
-import { BrandingTemplateValues } from "@/containers/BrandingTemplates/types";
+import { BrandingTemplateValues } from '@/containers/BrandingTemplates/types';

 export interface EstimateCustomizeValues extends BrandingTemplateValues {
  // Colors
@@ -7,7 +7,8 @@ export interface EstimateCustomizeValues extends BrandingTemplateValues {

  // Company Logo
  showCompanyLogo?: boolean;
-  companyLogo?: string;
+  companyLogoKey?: string;
+  companyLogoUri?: string;

  // Top details.
  estimateNumberLabel?: string;
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
@@ -13,6 +13,10 @@ import { CreditCardIcon } from '@/icons/CreditCardIcon';
 import { Overlay } from './Overlay';
 import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';
 import { BrandingCompanyLogoUploadField } from '@/containers/ElementCustomize/components/BrandingCompanyLogoUploadField';
+import { Link } from 'react-router-dom';
+import { MANAGE_LINK_URL } from './constants';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { useDrawerActions } from '@/hooks/state';

 export function InvoiceCustomizeGeneralField() {
  const isTemplateNameFilled = useIsTemplateNamedFilled();
@@ -93,6 +97,13 @@ export function InvoiceCustomizeGeneralField() {
 }

 function InvoiceCustomizePaymentManage() {
+  const { name } = useDrawerContext();
+  const { closeDrawer } = useDrawerActions();
+
+  const handleLinkClick = () => {
+    closeDrawer(name);
+  };
+
  return (
    <Group
      style={{
@@ -108,9 +119,13 @@ function InvoiceCustomizePaymentManage() {
        <Text>Accept payment methods</Text>
      </Group>

-      <a style={{ fontSize: 13 }} href={'#'}>
+      <Link
+        style={{ fontSize: 13 }}
+        to={MANAGE_LINK_URL}
+        onClick={handleLinkClick}
+      >
        Manage
-      </a>
+      </Link>
    </Group>
  );
 }
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PaperTemplate, PaperTemplateTotalBorder } from './PaperTemplate';
-import { Group, Stack } from '@/components';
+import { Stack } from '@/components';

 interface PapaerLine {
  item?: string;
@@ -95,7 +95,7 @@ export function InvoicePaperTemplate({
  companyName = 'Bigcapital Technology, Inc.',

  showCompanyLogo = true,
-  companyLogoUri,
+  companyLogoUri = '',

  dueDate = 'September 3, 2024',
  dueDateLabel = 'Date due',
@@ -185,7 +185,7 @@ export function InvoicePaperTemplate({
      primaryColor={primaryColor}
      secondaryColor={secondaryColor}
      showCompanyLogo={showCompanyLogo}
-      companyLogo={companyLogoUri}
+      companyLogoUri={companyLogoUri}
      bigtitle={'Invoice'}
    >
      <Stack spacing={24}>
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
@@ -9,7 +9,7 @@ export interface PaperTemplateProps {
  secondaryColor?: string;

  showCompanyLogo?: boolean;
-  companyLogo?: string;
+  companyLogoUri?: string;
  companyName?: string;

  bigtitle?: string;
@@ -21,7 +21,7 @@ export function PaperTemplate({
  primaryColor,
  secondaryColor,
  showCompanyLogo,
-  companyLogo,
+  companyLogoUri,
  bigtitle = 'Invoice',
  children,
 }: PaperTemplateProps) {
@@ -32,9 +32,9 @@ export function PaperTemplate({
      <div>
        <h1 className={styles.bigTitle}>{bigtitle}</h1>

-        {showCompanyLogo && (
+        {showCompanyLogo && companyLogoUri && (
          <div className={styles.logoWrap}>
-            <img alt="" src={companyLogo} />
+            <img alt="" src={companyLogoUri} />
          </div>
        )}
      </div>
@@ -120,8 +120,8 @@ PaperTemplate.MutedText = () => {};
 PaperTemplate.Text = () => {};

 PaperTemplate.AddressesGroup = (props: GroupProps) => {
-  return <Group spacing={10} {...props} className={styles.addressRoot} />
-}
+  return <Group spacing={10} {...props} className={styles.addressRoot} />;
+};
 PaperTemplate.Address = ({
  items,
 }: {
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/constants.ts
@@ -1,3 +1,5 @@
+export const MANAGE_LINK_URL = '/preferences/payment-methods';
+
 export const initialValues = {
  templateName: '',

--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
@@ -76,7 +76,6 @@ export function PaymentReceivedCustomizeGeneralField() {
                name={'showCompanyLogo'}
                label={'Display company logo in the paper'}
                style={{ fontSize: 14 }}
-                large
                fastField
              />
            </FFormGroup>
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx
@@ -41,10 +41,15 @@ export interface PaymentReceivedPaperTemplateProps extends PaperTemplateProps {
 }

 export function PaymentReceivedPaperTemplate({
+  // # Colors
  primaryColor,
  secondaryColor,
+
+  // # Company logo
  showCompanyLogo = true,
-  companyLogo,
+  companyLogoUri,
+
+  // # Company name
  companyName = 'Bigcapital Technology, Inc.',

  billedToAddress = [
@@ -94,7 +99,7 @@ export function PaymentReceivedPaperTemplate({
      primaryColor={primaryColor}
      secondaryColor={secondaryColor}
      showCompanyLogo={showCompanyLogo}
-      companyLogo={companyLogo}
+      companyLogoUri={companyLogoUri}
      bigtitle={'Payment'}
    >
      <Stack spacing={24}>
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts
@@ -1,14 +1,14 @@
 export const initialValues = {
  templateName: '',
-  
+
  // Colors
  primaryColor: '#2c3dd8',
  secondaryColor: '#2c3dd8',

  // Company logo.
  showCompanyLogo: true,
-  companyLogo:
-    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+  companyLogoUri: '',
+  companyLogokey: '',

  // Top details.
  showPaymentReceivedNumber: true,
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts
@@ -7,7 +7,6 @@ export interface PaymentReceivedCustomizeValues extends BrandingTemplateValues {

  // Company Logo
  showCompanyLogo?: boolean;
-  companyLogo?: string;

  // Top details.
  showInvoiceNumber?: boolean;
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx
@@ -1,4 +1,4 @@
-import { Group, Stack } from '@/components';
+import { Stack } from '@/components';
 import {
  PaperTemplate,
  PaperTemplateProps,
@@ -53,10 +53,15 @@ export interface ReceiptPaperTemplateProps extends PaperTemplateProps {
 }

 export function ReceiptPaperTemplate({
+  // # Colors
  primaryColor,
  secondaryColor,
+
+  // # Company logo
  showCompanyLogo = true,
-  companyLogo,
+  companyLogoUri,
+
+  // # Company name
  companyName = 'Bigcapital Technology, Inc.',

  // # Address
@@ -117,7 +122,7 @@ export function ReceiptPaperTemplate({
      primaryColor={primaryColor}
      secondaryColor={secondaryColor}
      showCompanyLogo={showCompanyLogo}
-      companyLogo={companyLogo}
+      companyLogoUri={companyLogoUri}
      bigtitle={'Receipt'}
    >
      <Stack spacing={24}>
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts
@@ -7,8 +7,8 @@ export const initialValues = {

  // Company logo.
  showCompanyLogo: true,
-  companyLogo:
-    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+  companyLogoKey: '',
+  companyLogoUri: '',

  // Receipt Number
  showReceiptNumber: true,
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts
@@ -7,7 +7,6 @@ export interface ReceiptCustomizeValues extends BrandingTemplateValues {

  // Company Logo
  showCompanyLogo?: boolean;
-  companyLogo?: string;

  // Receipt Number
  showReceiptNumber?: boolean;