fix: Invoice pdf customize

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>
   );
 }

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}>

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,
 }: {

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: '',