Merge pull request #675 from bigcapitalhq/hook-up-company-logo-to-pdf-templates

feat: Hook up company logo to server-side pdf templates
This commit is contained in:
Ahmed Bouhuolia
2024-09-26 18:33:45 +02:00
committed by GitHub
12 changed files with 51 additions and 25 deletions

View File

@@ -134,9 +134,9 @@ block content
div(class=`${prefix}-root`) div(class=`${prefix}-root`)
div(class=`${prefix}-big-title`) Credit Note div(class=`${prefix}-big-title`) Credit Note
if showCompanyLogo if showCompanyLogo && companyLogoUri
div(class=`${prefix}-logo-wrap`) div(class=`${prefix}-logo-wrap`)
img(src=companyLogo alt=`Company Logo`) img(src=companyLogoUri alt=`Company Logo`)
div(class=`${prefix}-terms-list`) div(class=`${prefix}-terms-list`)
if showCreditNoteNumber if showCreditNoteNumber
@@ -155,6 +155,7 @@ block content
strong #{companyName} strong #{companyName}
each address in billedFromAddress each address in billedFromAddress
div #{address} div #{address}
if showBilledToAddress if showBilledToAddress
div(class=`${prefix}-address`) div(class=`${prefix}-address`)
strong #{billedToLabel} strong #{billedToLabel}
@@ -187,12 +188,12 @@ block content
div(class=`${prefix}-totals__item-amount`) #{totalLabel}: div(class=`${prefix}-totals__item-amount`) #{totalLabel}:
div(class=`${prefix}-totals__item-label`) #{total} div(class=`${prefix}-totals__item-label`) #{total}
if showCustomerNote if showCustomerNote && customerNote
div(class=`${prefix}-statement`) div(class=`${prefix}-statement`)
div(class=`${prefix}-statement__label`) #{customerNoteLabel}: div(class=`${prefix}-statement__label`) #{customerNoteLabel}:
div(class=`${prefix}-statement__value`) #{customerNote} div(class=`${prefix}-statement__value`) #{customerNote}
if showTermsConditions if showTermsConditions && termsConditions
div(class=`${prefix}-statement`) div(class=`${prefix}-statement`)
div(class=`${prefix}-statement__label`) #{termsConditionsLabel}: div(class=`${prefix}-statement__label`) #{termsConditionsLabel}:
div(class=`${prefix}-statement__value`) #{termsConditions} div(class=`${prefix}-statement__value`) #{termsConditions}

View File

@@ -135,9 +135,9 @@ block content
div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`) div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
h1(class=`${prefix}-big-title`) Estimate h1(class=`${prefix}-big-title`) Estimate
if showCompanyLogo if showCompanyLogo && companyLogoUri
div(class=`${prefix}-logo-wrap`) div(class=`${prefix}-logo-wrap`)
img(alt="", src=companyLogo) img(alt="Company logo", src=companyLogoUri)
//- Terms List //- Terms List
div(class=`${prefix}-terms`) div(class=`${prefix}-terms`)

View File

@@ -144,9 +144,9 @@ block content
//- Title and company logo //- Title and company logo
h1(class=`${prefix}-big-title`) Invoice h1(class=`${prefix}-big-title`) Invoice
if showCompanyLogo if showCompanyLogo && companyLogoUri
div(class=`${prefix}-logo-wrap`) div(class=`${prefix}-logo-wrap`)
img(alt="", src=companyLogo) img(alt="Company logo", src=companyLogoUri)
//- Invoice details //- Invoice details
div(class=`${prefix}-details`) div(class=`${prefix}-details`)

View File

@@ -124,9 +124,9 @@ block content
div(class=`${prefix}-root`) div(class=`${prefix}-root`)
div(class=`${prefix}-big-title`) Payment div(class=`${prefix}-big-title`) Payment
if showCompanyLogo if showCompanyLogo && companyLogoUri
div(class=`${prefix}-logo-wrap`) div(class=`${prefix}-logo-wrap`)
img(src=companyLogo alt="Company Logo") img(src=companyLogoUri alt="Company Logo")
div(class=`${prefix}-terms-list`) div(class=`${prefix}-terms-list`)
if showPaymentReceivedNumber if showPaymentReceivedNumber

View File

@@ -128,9 +128,10 @@ block content
//- Title and company logo //- Title and company logo
h1(class=`${prefix}-big-title`) Receipt h1(class=`${prefix}-big-title`) Receipt
if showCompanyLogo //- Company Logo
if showCompanyLogo && companyLogoUri
div(class=`${prefix}-logo-wrap`) div(class=`${prefix}-logo-wrap`)
img(src=companyLogo alt=`Company Logo`) img(src=companyLogoUri alt=`Company Logo`)
//- Terms List //- Terms List
div(class=`${prefix}-terms-list`) div(class=`${prefix}-terms-list`)
@@ -186,13 +187,13 @@ block content
span(class=`${prefix}-totals__line__amount`)= total span(class=`${prefix}-totals__line__amount`)= total
//- Customer Note Section //- Customer Note Section
if showCustomerNote if showCustomerNote && customerNote
div(class=`${prefix}-statement`) div(class=`${prefix}-statement`)
div(class=`${prefix}-statement__label`)= customerNoteLabel div(class=`${prefix}-statement__label`)= customerNoteLabel
div(class=`${prefix}-statement__value`)= customerNote div(class=`${prefix}-statement__value`)= customerNote
//- Terms & Conditions Section //- Terms & Conditions Section
if showTermsConditions if showTermsConditions && termsConditions
div(class=`${prefix}-statement`) div(class=`${prefix}-statement`)
div(class=`${prefix}-statement__label`)= termsConditionsLabel div(class=`${prefix}-statement__label`)= termsConditionsLabel
div(class=`${prefix}-statement__value`)= termsConditions div(class=`${prefix}-statement__value`)= termsConditions

View File

@@ -68,10 +68,16 @@ export const DEFAULT_VIEWS = [
]; ];
export const defaultCreditNoteBrandingAttributes = { export const defaultCreditNoteBrandingAttributes = {
// # Colors
primaryColor: '', primaryColor: '',
secondaryColor: '', secondaryColor: '',
// # Company logo
showCompanyLogo: true, showCompanyLogo: true,
companyLogo: '', companyLogoKey: '',
companyLogoUri: '',
// # Company name
companyName: 'Bigcapital Technology, Inc.', companyName: 'Bigcapital Technology, Inc.',
// Address // Address

View File

@@ -177,8 +177,12 @@ export const SaleEstimatesSampleData = [
export const defaultEstimatePdfBrandingAttributes = { export const defaultEstimatePdfBrandingAttributes = {
primaryColor: '#000', primaryColor: '#000',
secondaryColor: '#000', secondaryColor: '#000',
// # Company logo
showCompanyLogo: true, showCompanyLogo: true,
companyLogo: '', companyLogoUri: '',
companyLogoKey: '',
companyName: '', companyName: '',
billedToAddress: [ billedToAddress: [

View File

@@ -170,7 +170,8 @@ export const defaultInvoicePdfTemplateAttributes = {
companyName: 'Bigcapital Technology, Inc.', companyName: 'Bigcapital Technology, Inc.',
showCompanyLogo: true, showCompanyLogo: true,
companyLogo: '', companyLogoKey: '',
companyLogoUri: '',
dueDateLabel: 'Date due', dueDateLabel: 'Date due',
showDueDate: true, showDueDate: true,

View File

@@ -47,12 +47,18 @@ export const PaymentsReceiveSampleData = [
]; ];
export const defaultPaymentReceivedPdfTemplateAttributes = { export const defaultPaymentReceivedPdfTemplateAttributes = {
// # Colors
primaryColor: '#000', primaryColor: '#000',
secondaryColor: '#000', secondaryColor: '#000',
// # Company logo
showCompanyLogo: true, showCompanyLogo: true,
companyLogo: '', companyLogoUri: '',
// # Company name
companyName: 'Bigcapital Technology, Inc.', companyName: 'Bigcapital Technology, Inc.',
// Address
billedToAddress: [ billedToAddress: [
'Bigcapital Technology, Inc.', 'Bigcapital Technology, Inc.',
'131 Continental Dr Suite 305 Newark,', '131 Continental Dr Suite 305 Newark,',
@@ -72,10 +78,12 @@ export const defaultPaymentReceivedPdfTemplateAttributes = {
showBillingToAddress: true, showBillingToAddress: true,
billedToLabel: 'Billed To', billedToLabel: 'Billed To',
// Total
total: '$1000.00', total: '$1000.00',
totalLabel: 'Total', totalLabel: 'Total',
showTotal: true, showTotal: true,
// Subtotal
subtotal: '1000/00', subtotal: '1000/00',
subtotalLabel: 'Subtotal', subtotalLabel: 'Subtotal',
showSubtotal: true, showSubtotal: true,
@@ -87,10 +95,12 @@ export const defaultPaymentReceivedPdfTemplateAttributes = {
paidAmount: '$1000.00', paidAmount: '$1000.00',
}, },
], ],
// Payment received number
showPaymentReceivedNumber: true, showPaymentReceivedNumber: true,
paymentReceivedNumberLabel: 'Payment Number', paymentReceivedNumberLabel: 'Payment Number',
paymentReceivedNumebr: '346D3D40-0001', paymentReceivedNumebr: '346D3D40-0001',
// Payment date.
paymentReceivedDate: 'September 3, 2024', paymentReceivedDate: 'September 3, 2024',
showPaymentReceivedDate: true, showPaymentReceivedDate: true,
paymentReceivedDateLabel: 'Payment Date', paymentReceivedDateLabel: 'Payment Date',

View File

@@ -69,10 +69,13 @@ export const SaleReceiptsSampleData = [
export const defaultSaleReceiptBrandingAttributes = { export const defaultSaleReceiptBrandingAttributes = {
primaryColor: '', primaryColor: '',
secondaryColor: '', secondaryColor: '',
showCompanyLogo: true,
companyLogo: '',
companyName: 'Bigcapital Technology, Inc.', companyName: 'Bigcapital Technology, Inc.',
// # Company logo
showCompanyLogo: true,
companyLogoUri: '',
companyLogoKey: '',
// # Address // # Address
billedToAddress: [ billedToAddress: [
'Bigcapital Technology, Inc.', 'Bigcapital Technology, Inc.',

View File

@@ -8,7 +8,7 @@ export const initialValues = {
// Company logo. // Company logo.
showCompanyLogo: true, showCompanyLogo: true,
companyLogoUri: '', companyLogoUri: '',
companyLogokey: '', companyLogoKey: '',
// Top details. // Top details.
showPaymentReceivedNumber: true, showPaymentReceivedNumber: true,

View File

@@ -1,5 +1,5 @@
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { ElementCustomize } from '@/containers/ElementCustomize/ElementCustomize';
import { ReceiptCustomizeGeneralField } from './ReceiptCustomizeFieldsGeneral'; import { ReceiptCustomizeGeneralField } from './ReceiptCustomizeFieldsGeneral';
import { ReceiptCustomizeFieldsContent } from './ReceiptCustomizeFieldsContent'; import { ReceiptCustomizeFieldsContent } from './ReceiptCustomizeFieldsContent';
import { ReceiptPaperTemplate } from './ReceiptPaperTemplate'; import { ReceiptPaperTemplate } from './ReceiptPaperTemplate';
@@ -20,10 +20,10 @@ export function ReceiptCustomizeContent() {
return ( return (
<BrandingTemplateForm<ReceiptCustomizeValues> <BrandingTemplateForm<ReceiptCustomizeValues>
templateId={templateId}
initialValues={initialValues}
onSuccess={handleFormSuccess}
resource={'SaleReceipt'} resource={'SaleReceipt'}
templateId={templateId}
defaultValues={initialValues}
onSuccess={handleFormSuccess}
> >
<ElementCustomize.PaperTemplate> <ElementCustomize.PaperTemplate>
<ReceiptPaperTemplateFormConnected /> <ReceiptPaperTemplateFormConnected />