Merge pull request #670 from bigcapitalhq/upload-company-logo

feat: Upload company logo to invoice templates

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx

@@ -12,6 +12,7 @@ import { FColorInput } from '@/components/Forms/FColorInput';
 import { CreditCardIcon } from '@/icons/CreditCardIcon';
 import { Overlay } from './Overlay';
 import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';
+import { BrandingCompanyLogoUploadField } from '@/containers/ElementCustomize/components/BrandingCompanyLogoUploadField';
 
 export function InvoiceCustomizeGeneralField() {
   const isTemplateNameFilled = useIsTemplateNamedFilled();
@@ -66,15 +67,23 @@ export function InvoiceCustomizeGeneralField() {
             />
           </FFormGroup>
 
-          <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
-            <FSwitch
+          <Stack spacing={10}>
+            <FFormGroup
               name={'showCompanyLogo'}
-              label={'Display company logo in the paper'}
-              style={{ fontSize: 14 }}
-              large
+              label={'Logo'}
               fastField
-            />
-          </FFormGroup>
+              style={{ marginBottom: 0 }}
+            >
+              <FSwitch
+                name={'showCompanyLogo'}
+                label={'Display company logo in the paper'}
+                style={{ fontSize: 14 }}
+                fastField
+              />
+            </FFormGroup>
+
+            <BrandingCompanyLogoUploadField />
+          </Stack>
         </Stack>
 
         <InvoiceCustomizePaymentManage />
@@ -99,7 +108,9 @@ function InvoiceCustomizePaymentManage() {
         <Text>Accept payment methods</Text>
       </Group>
 
-      <a href={'#'}>Manage</a>
+      <a style={{ fontSize: 13 }} href={'#'}>
+        Manage
+      </a>
     </Group>
   );
 }

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx

@@ -20,7 +20,7 @@ export interface InvoicePaperTemplateProps {
   secondaryColor?: string;
 
   showCompanyLogo?: boolean;
-  companyLogo?: string;
+  companyLogoUri?: string;
 
   showInvoiceNumber?: boolean;
   invoiceNumber?: string;
@@ -95,7 +95,7 @@ export function InvoicePaperTemplate({
   companyName = 'Bigcapital Technology, Inc.',
 
   showCompanyLogo = true,
-  companyLogo,
+  companyLogoUri,
 
   dueDate = 'September 3, 2024',
   dueDateLabel = 'Date due',
@@ -185,7 +185,7 @@ export function InvoicePaperTemplate({
       primaryColor={primaryColor}
       secondaryColor={secondaryColor}
       showCompanyLogo={showCompanyLogo}
-      companyLogo={companyLogo}
+      companyLogo={companyLogoUri}
       bigtitle={'Invoice'}
     >
       <Stack spacing={24}>

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/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: '',
 
   // Top details.
   showInvoiceNumber: true,

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/types.ts

@@ -7,7 +7,8 @@ export interface InvoiceCustomizeValues extends BrandingTemplateValues {
 
   // Company Logo
   showCompanyLogo?: boolean;
-  companyLogo?: string;
+  companyLogoKey?: string;
+  companyLogoUri?: string;
 
   // Top details.
   showInvoiceNumber?: boolean;