feat: Pdf templates customer/company addresses

packages/webapp/src/containers/BrandingTemplates/BrandingTemplateBoot.tsx

@@ -1,7 +1,9 @@
 import React, { createContext, useContext } from 'react';
 import {
+  GetPdfTemplateBrandingStateResponse,
   GetPdfTemplateResponse,
   useGetPdfTemplate,
+  useGetPdfTemplateBrandingState,
 } from '@/hooks/query/pdf-templates';
 import { Spinner } from '@blueprintjs/core';
 
@@ -9,6 +11,10 @@ interface PdfTemplateContextValue {
   templateId: number | string;
   pdfTemplate: GetPdfTemplateResponse | undefined;
   isPdfTemplateLoading: boolean;
+
+  // Branding state.
+  brandingTemplateState: GetPdfTemplateBrandingStateResponse | undefined;
+  isBrandingTemplateLoading: boolean;
 }
 
 interface BrandingTemplateProps {
@@ -28,15 +34,23 @@ export const BrandingTemplateBoot = ({
     useGetPdfTemplate(templateId, {
       enabled: !!templateId,
     });
+  // Retreives the branding template state.
+  const { data: brandingTemplateState, isLoading: isBrandingTemplateLoading } =
+    useGetPdfTemplateBrandingState();
 
   const value = {
     templateId,
     pdfTemplate,
     isPdfTemplateLoading,
+
+    brandingTemplateState,
+    isBrandingTemplateLoading,
   };
 
-  if (isPdfTemplateLoading) {
-    return <Spinner size={20} />
+  const isLoading = isPdfTemplateLoading || isBrandingTemplateLoading;
+
+  if (isLoading) {
+    return <Spinner size={20} />;
   }
   return (
     <PdfTemplateContext.Provider value={value}>

packages/webapp/src/containers/BrandingTemplates/_utils.ts

@@ -44,15 +44,16 @@ export const useBrandingTemplateFormInitialValues = <
 >(
   initialValues = {},
 ) => {
-  const { pdfTemplate } = useBrandingTemplateBoot();
+  const { pdfTemplate, brandingTemplateState } = useBrandingTemplateBoot();
 
-  const defaultPdfTemplate = {
+  const brandingAttributes = {
     templateName: pdfTemplate?.templateName,
+    ...brandingTemplateState,
     ...pdfTemplate?.attributes,
   };
   return {
     ...initialValues,
-    ...(transformToForm(defaultPdfTemplate, initialValues) as T),
+    ...(transformToForm(brandingAttributes, initialValues) as T),
   };
 };
 

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

@@ -45,8 +45,12 @@ export interface InvoicePaperTemplateProps {
   bigtitle?: string;
 
   // Address
-  showBillingToAddress?: boolean;
-  showBilledFromAddress?: boolean;
+  showCustomerAddress?: boolean;
+  customerAddress?: string;
+
+  showCompanyAddress?: boolean;
+  companyAddress?: string;
+
   billedToLabel?: string;
 
   // Entries
@@ -90,9 +94,6 @@ export interface InvoicePaperTemplateProps {
 
   lines?: Array<PapaerLine>;
   taxes?: Array<PaperTax>;
-
-  billedFromAddres?: string;
-  billedToAddress?: string;
 }
 
 export function InvoicePaperTemplate({
@@ -118,8 +119,12 @@ export function InvoicePaperTemplate({
   showInvoiceNumber = true,
 
   // Address
-  showBillingToAddress = true,
-  showBilledFromAddress = true,
+  showCustomerAddress = true,
+  customerAddress = DefaultPdfTemplateAddressBilledTo,
+
+  showCompanyAddress = true,
+  companyAddress = DefaultPdfTemplateAddressBilledFrom,
+
   billedToLabel = 'Billed To',
 
   // Entries
@@ -171,8 +176,6 @@ export function InvoicePaperTemplate({
   statementLabel = 'Statement',
   showStatement = true,
   statement = DefaultPdfTemplateStatement,
-  billedToAddress = DefaultPdfTemplateAddressBilledTo,
-  billedFromAddres = DefaultPdfTemplateAddressBilledFrom,
 }: InvoicePaperTemplateProps) {
   return (
     <PaperTemplate
@@ -202,16 +205,16 @@ export function InvoicePaperTemplate({
         </PaperTemplate.TermsList>
 
         <PaperTemplate.AddressesGroup>
-          {showBilledFromAddress && (
+          {showCompanyAddress && (
             <PaperTemplate.Address>
-              <strong>{companyName}</strong>
-              <Box dangerouslySetInnerHTML={{ __html: billedFromAddres }} />
+              <Box dangerouslySetInnerHTML={{ __html: companyAddress }} />
             </PaperTemplate.Address>
           )}
-          {showBillingToAddress && (
+
+          {showCustomerAddress && (
             <PaperTemplate.Address>
               <strong>{billedToLabel}</strong>
-              <Box dangerouslySetInnerHTML={{ __html: billedToAddress }} />
+              <Box dangerouslySetInnerHTML={{ __html: customerAddress }} />
             </PaperTemplate.Address>
           )}
         </PaperTemplate.AddressesGroup>

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

@@ -26,8 +26,9 @@ export const initialValues = {
   companyName: 'Bigcapital Technology, Inc.',
 
   // Addresses
-  showBilledFromAddress: true,
-  showBillingToAddress: true,
+  showCustomerAddress: true,
+  showCompanyAddress: true,
+  companyAddress: '',
   billedToLabel: 'Billed To',
 
   // Entries

packages/webapp/src/hooks/query/pdf-templates.ts

@@ -203,3 +203,28 @@ export const useAssignPdfTemplateAsDefault = (
     },
   );
 };
+
+// Retrieve organization branding state.
+// --------------------------------------------------
+export interface GetPdfTemplateBrandingStateResponse {
+  companyName: string;
+  companyAddress: string;
+  companyLogoUri: string;
+  companyLogoKey: string;
+  primaryColor: string;
+}
+
+export const useGetPdfTemplateBrandingState = (
+  options?: UseQueryOptions<GetPdfTemplateBrandingStateResponse, Error>,
+): UseQueryResult<GetPdfTemplateBrandingStateResponse, Error> => {
+  const apiRequest = useApiRequest();
+
+  return useQuery<GetPdfTemplateBrandingStateResponse, Error>(
+    [PdfTemplatesQueryKey, 'state'],
+    () =>
+      apiRequest
+        .get('/pdf-templates/state')
+        .then((res) => transformToCamelCase(res.data?.data)),
+    options,
+  );
+};