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

fix: Invoice pdf customize

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

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

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(

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(

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'];
+  };
+}

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

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

@@ -3,6 +3,7 @@
 export interface BrandingTemplateValues {
   templateName: string;
 
+  // Company logo
   companyLogoKey?: string;
   companyLogoUri?: string;
 }

packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss

@@ -1,6 +1,6 @@
 
 .rootBodyPage {
-  background: #0c103f;
+  background: #1c1d29;
 }
 
 .root {

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

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>

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

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts

@@ -7,8 +7,8 @@ export const initialValues = {
 
   // Company logo.
   showCompanyLogo: true,
-  companyLogo:
+  companyLogoKey: '',
-    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+  companyLogoUri: '',
 
   // Address
   showBilledToAddress: true,

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;

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>

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

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:
+  companyLogoKey: '',
-    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+  companyLogoUri: '',
 
   // Top details.
   showEstimateNumber: true,

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;

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

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>

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

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:
+  companyLogoUri: '',
-    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+  companyLogokey: '',
 
   // Top details.
   showPaymentReceivedNumber: true,

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;

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

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts

@@ -7,8 +7,8 @@ export const initialValues = {
 
   // Company logo.
   showCompanyLogo: true,
-  companyLogo:
+  companyLogoKey: '',
-    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+  companyLogoUri: '',
 
   // Receipt Number
   showReceiptNumber: true,

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;

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.