Merge pull request #672 from bigcapitalhq/fix-invoice-brand-customize

fix: Invoice pdf customize
2026-02-16 21:00:31 +00:00 · 2024-09-25 12:22:07 +02:00
parent 1c8e19378f 946872204b
commit b222d56148
29 changed files with 133 additions and 48 deletions
--- a/packages/server/src/models/PaymentIntegration.ts
+++ b/packages/server/src/models/PaymentIntegration.ts
@@ -25,6 +25,17 @@ export class PaymentIntegration extends Model {
    return this.paymentEnabled && this.payoutEnabled;
  }

+  static get modifiers() {
+    return {
+      /**
+       * Query to filter enabled payment and payout.
+       */
+      fullEnabled(query) {
+        query.where('paymentEnabled', true).andWhere('payoutEnabled', true);
+      },
+    };
+  }
+
  static get jsonSchema() {
    return {
      type: 'object',
--- a/packages/server/src/services/Attachments/S3UploadPipeline.ts
+++ b/packages/server/src/services/Attachments/S3UploadPipeline.ts
@@ -1,17 +1,16 @@
+import { NextFunction, Request, Response } from 'express';
 import multer from 'multer';
 import type { Multer } from 'multer';
 import multerS3 from 'multer-s3';
 import { s3 } from '@/lib/S3/S3';
 import { Service } from 'typedi';
 import config from '@/config';
-import { NextFunction, Request, Response } from 'express';

@Service()
 export class AttachmentUploadPipeline {
  /**
   * Middleware to ensure that S3 configuration is properly set before proceeding.
   * This function checks if the necessary S3 configuration keys are present and throws an error if any are missing.
-   *
   * @param req The HTTP request object.
   * @param res The HTTP response object.
   * @param next The callback to pass control to the next middleware function.
@@ -49,6 +48,11 @@ export class AttachmentUploadPipeline {
        key: function (req, file, cb) {
          cb(null, Date.now().toString());
        },
+        acl: function(req, file, cb) {
+          // Conditionally set file to public or private based on isPublic flag
+          const aclValue = true ? 'public-read' : 'private';
+          cb(null, aclValue); // Set ACL based on the isPublic flag
+        }
      }),
    });
  }
--- a/packages/server/src/services/PaymentServices/GetPaymentServicesSpecificInvoice.ts
+++ b/packages/server/src/services/PaymentServices/GetPaymentServicesSpecificInvoice.ts
@@ -21,7 +21,7 @@ export class GetPaymentServicesSpecificInvoice {
    const { PaymentIntegration } = this.tenancy.models(tenantId);

    const paymentGateways = await PaymentIntegration.query()
-      .where('active', true)
+      .modify('fullEnabled')
      .orderBy('name', 'ASC');

    return this.transform.transform(
--- a/packages/server/src/services/Sales/Invoices/GetInvoicePaymentLinkMetadata.ts
+++ b/packages/server/src/services/Sales/Invoices/GetInvoicePaymentLinkMetadata.ts
@@ -44,6 +44,7 @@ export class GetInvoicePaymentLinkMetadata {
      .findById(paymentLink.resourceId)
      .withGraphFetched('entries.item')
      .withGraphFetched('customer')
+      .withGraphFetched('taxes.taxRate')
      .throwIfNotFound();

    return this.transformer.transform(
--- a/packages/server/src/services/Sales/Invoices/GetInvoicePaymentLinkTransformer.ts
+++ b/packages/server/src/services/Sales/Invoices/GetInvoicePaymentLinkTransformer.ts
@@ -1,4 +1,5 @@
 import { ItemEntryTransformer } from './ItemEntryTransformer';
+import { SaleInvoiceTaxEntryTransformer } from './SaleInvoiceTaxEntryTransformer';
 import { SaleInvoiceTransformer } from './SaleInvoiceTransformer';

 export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer {
@@ -37,6 +38,7 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
      'invoiceMessage',
      'termsConditions',
      'entries',
+      'taxes',
    ];
  };

@@ -62,6 +64,22 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
      }
    );
  };
+
+  /**
+   * Retrieves the sale invoice entries.
+   * @returns {}
+   */
+  protected taxes = (invoice) => {
+    return this.item(
+      invoice.taxes,
+      new GetInvoicePaymentLinkTaxEntryTransformer(),
+      {
+        subtotal: invoice.subtotal,
+        isInclusiveTax: invoice.isInclusiveTax,
+        currencyCode: invoice.currencyCode,
+      }
+    );
+  };
 }

 class GetInvoicePaymentLinkEntryMetaTransformer extends ItemEntryTransformer {
@@ -94,3 +112,13 @@ class GetInvoicePaymentLinkEntryMetaTransformer extends ItemEntryTransformer {
    return ['*'];
  };
 }
+
+class GetInvoicePaymentLinkTaxEntryTransformer extends SaleInvoiceTaxEntryTransformer {
+  /**
+   * Included attributes.
+   * @returns {Array}
+   */
+  public includeAttributes = (): string[] => {
+    return ['name', 'taxRateCode', 'taxRateAmount', 'taxRateAmountFormatted'];
+  };
+}
--- 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/PaymentPortal/PaymentPortal.module.scss
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss
@@ -1,6 +1,6 @@

 .rootBodyPage {
-  background: #0c103f;
+  background: #1c1d29;
 }

 .root {
--- a/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
@@ -83,6 +83,13 @@ export function PaymentPortal() {
              </Text>
            </Group>

+            {sharableLinkMeta?.taxes?.map((tax, key) => (
+              <Group key={key} position={'apart'} className={styles.totalItem}>
+                <Text>{tax?.name}</Text>
+                <Text>{tax?.taxRateAmountFormatted}</Text>
+              </Group>
+            ))}
+
            <Group
              position={'apart'}
              className={clsx(styles.totalItem, styles.borderBottomGray)}
--- a/packages/webapp/src/containers/PaymentPortal/drawers/PaymentInvoicePreviewDrawer/PaymentInvoicePreviewContent.tsx
+++ b/packages/webapp/src/containers/PaymentPortal/drawers/PaymentInvoicePreviewDrawer/PaymentInvoicePreviewContent.tsx
@@ -30,6 +30,10 @@ export function PaymentInvoicePreviewContent() {
              rate: entry.rateFormatted,
              total: entry.totalFormatted,
            }))}
+            taxes={sharableLinkMeta?.taxes?.map((tax) => ({
+              label: tax.name,
+              amount: tax.taxRateAmountFormatted,
+            }))}
          />
        </Box>
      </DrawerBody>
--- 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;
--- a/packages/webapp/src/hooks/query/payment-link.ts
+++ b/packages/webapp/src/hooks/query/payment-link.ts
@@ -50,7 +50,6 @@ export function useCreatePaymentLink(
  );
 }

-
 // Get Invoice Payment Link
 // -----------------------------------------
 export interface GetInvoicePaymentLinkResponse {
@@ -82,6 +81,12 @@ export interface GetInvoicePaymentLinkResponse {
    total: number;
    totalFormatted: string;
  }>;
+  taxes: Array<{
+    name: string;
+    taxRateAmount: number;
+    taxRateAmountFormatted: string;
+    taxRateCode: string;
+  }>;
 }
 /**
 * Fetches the sharable invoice link metadata for a given link ID.