Merge pull request #677 from bigcapitalhq/preferences-company-branding

feat: Company branding preferences

packages/server/src/api/controllers/Organization.ts

@@ -18,7 +18,7 @@ import BaseController from '@/api/controllers/BaseController';
 @Service()
 export default class OrganizationController extends BaseController {
   @Inject()
-  organizationService: OrganizationService;
+  private organizationService: OrganizationService;
 
   /**
    * Router constructor.
@@ -56,10 +56,10 @@ export default class OrganizationController extends BaseController {
   }
 
   /**
-   * Organization setup schema.
+   * Build organization validation schema.
-   * @return {ValidationChain[]}
+   * @returns {ValidationChain[]}
    */
-  private get commonOrganizationValidationSchema(): ValidationChain[] {
+  private get buildOrganizationValidationSchema(): ValidationChain[] {
     return [
       check('name').exists().trim(),
       check('industry').optional({ nullable: true }).isString().trim(),
@@ -72,21 +72,34 @@ export default class OrganizationController extends BaseController {
     ];
   }
 
-  /**
-   * Build organization validation schema.
-   * @returns {ValidationChain[]}
-   */
-  private get buildOrganizationValidationSchema(): ValidationChain[] {
-    return [...this.commonOrganizationValidationSchema];
-  }
-
   /**
    * Update organization validation schema.
    * @returns {ValidationChain[]}
    */
   private get updateOrganizationValidationSchema(): ValidationChain[] {
     return [
-      ...this.commonOrganizationValidationSchema,
+      // # Profile
+      check('name').optional().trim(),
+      check('industry').optional({ nullable: true }).isString().trim(),
+      check('location').optional().isString().isISO31661Alpha2(),
+      check('base_currency').optional().isISO4217(),
+      check('timezone').optional().isIn(moment.tz.names()),
+      check('fiscal_year').optional().isIn(MONTHS),
+      check('language').optional().isString().isIn(ACCEPTED_LOCALES),
+      check('date_format').optional().isIn(DATE_FORMATS),
+
+      // # Address
+      check('address.address_1').optional().isString().trim(),
+      check('address.address_2').optional().isString().trim(),
+      check('address.postal_code').optional().isString().trim(),
+      check('address.city').optional().isString().trim(),
+      check('address.state_province').optional().isString().trim(),
+      check('address.phone').optional().isString().trim(),
+
+      // # Branding
+      check('primary_color').optional({ nullable: true }).isHexColor().trim(),
+      check('logo_key').optional({ nullable: true }).isString().trim(),
+
       check('tax_number').optional({ nullable: true }).isString().trim(),
     ];
   }
@@ -156,7 +169,7 @@ export default class OrganizationController extends BaseController {
     next: NextFunction
   ) {
     const { tenantId } = req;
-    const tenantDTO = this.matchedBodyData(req);
+    const tenantDTO = this.matchedBodyData(req, { includeOptionals: false });
 
     try {
       await this.organizationService.updateOrganization(tenantId, tenantDTO);

packages/server/src/interfaces/Setup.ts

@@ -18,14 +18,26 @@ export interface IOrganizationBuildDTO {
   dateFormat?: string;
 }
 
+interface OrganizationAddressDTO {
+  address1: string;
+  address2: string;
+  postalCode: string;
+  city: string;
+  stateProvince: string;
+  phone: string;
+}
+
 export interface IOrganizationUpdateDTO {
   name: string;
-  location: string;
+  location?: string;
-  baseCurrency: string;
+  baseCurrency?: string;
-  timezone: string;
+  timezone?: string;
-  fiscalYear: string;
+  fiscalYear?: string;
-  industry: string;
+  industry?: string;
-  taxNumber: string;
+  taxNumber?: string;
+  primaryColor?: string;
+  logoKey?: string;
+  address?: OrganizationAddressDTO;
 }
 
 export interface IOrganizationBuildEventPayload {
@@ -36,4 +48,4 @@ export interface IOrganizationBuildEventPayload {
 
 export interface IOrganizationBuiltEventPayload {
   tenantId: number;
-}
+}

packages/server/src/services/Organization/OrganizationService.ts

@@ -93,7 +93,7 @@ export default class OrganizationService {
     // Triggers the organization built event.
     await this.eventPublisher.emitAsync(events.organization.built, {
       tenantId: tenant.id,
-    } as IOrganizationBuiltEventPayload)
+    } as IOrganizationBuiltEventPayload);
   }
 
   /**
@@ -190,11 +190,13 @@ export default class OrganizationService {
     this.throwIfTenantNotExists(tenant);
 
     // Validate organization transactions before mutate base currency.
-    await this.validateMutateBaseCurrency(
+    if (organizationDTO.baseCurrency) {
-      tenant,
+      await this.validateMutateBaseCurrency(
-      organizationDTO.baseCurrency,
+        tenant,
-      tenant.metadata?.baseCurrency
+        organizationDTO.baseCurrency,
-    );
+        tenant.metadata?.baseCurrency
+      );
+    }
     await tenant.saveMetadata(organizationDTO);
 
     if (organizationDTO.baseCurrency !== tenant.metadata?.baseCurrency) {

packages/server/src/services/Organization/OrganizationUpgrade.ts

@@ -13,16 +13,13 @@ import TenantsManagerService from '@/services/Tenancy/TenantsManager';
 @Service()
 export default class OrganizationUpgrade {
   @Inject()
-  tenancy: HasTenancyService;
+  private organizationService: OrganizationService;
 
   @Inject()
-  organizationService: OrganizationService;
+  private tenantsManager: TenantsManagerService;
-
-  @Inject()
-  tenantsManager: TenantsManagerService;
 
   @Inject('agenda')
-  agenda: any;
+  private agenda: any;
 
   /**
    * Upgrades the given organization database.
@@ -102,4 +99,4 @@ export default class OrganizationUpgrade {
       throw new ServiceError(ERRORS.TENANT_UPGRADE_IS_RUNNING);
     }
   }
-}
+}

packages/server/src/services/PaymentLinks/GetInvoicePaymentLinkMetadata.ts

@@ -45,6 +45,7 @@ export class GetInvoicePaymentLinkMetadata {
       .withGraphFetched('entries.item')
       .withGraphFetched('customer')
       .withGraphFetched('taxes.taxRate')
+      .withGraphFetched('paymentMethods.paymentIntegration')
       .throwIfNotFound();
 
     return this.transformer.transform(

packages/server/src/services/Sales/Invoices/GetInvoicePaymentLinkTransformer.ts

@@ -1,6 +1,8 @@
+import { Transform } from 'form-data';
 import { ItemEntryTransformer } from './ItemEntryTransformer';
 import { SaleInvoiceTaxEntryTransformer } from './SaleInvoiceTaxEntryTransformer';
 import { SaleInvoiceTransformer } from './SaleInvoiceTransformer';
+import { Transformer } from '@/lib/Transformer/Transformer';
 
 export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer {
   /**
@@ -17,7 +19,6 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
    */
   public includeAttributes = (): string[] => {
     return [
-      'companyName',
       'customerName',
       'dueAmount',
       'dueDateFormatted',
@@ -39,6 +40,9 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
       'termsConditions',
       'entries',
       'taxes',
+      'organization',
+      'isReceivable',
+      'hasStripePaymentMethod',
     ];
   };
 
@@ -46,8 +50,15 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
     return invoice.customer.displayName;
   }
 
-  public companyName() {
+  /**
-    return 'Bigcapital Technology, Inc.';
+   * Retrieves the organization metadata for the payment link.
+   * @returns
+   */
+  public organization(invoice) {
+    return this.item(
+      this.context.organization,
+      new GetPaymentLinkOrganizationMetaTransformer()
+    );
   }
 
   /**
@@ -80,6 +91,44 @@ export class GetInvoicePaymentLinkMetaTransformer extends SaleInvoiceTransformer
       }
     );
   };
+
+  protected isReceivable(invoice) {
+    return invoice.dueAmount > 0;
+  }
+
+  protected hasStripePaymentMethod(invoice) {
+    return invoice.paymentMethods.some(
+      (paymentMethod) => paymentMethod.paymentIntegration.service === 'Stripe'
+    );
+  }
+}
+
+class GetPaymentLinkOrganizationMetaTransformer extends Transformer {
+  /**
+   * Include these attributes to item entry object.
+   * @returns {Array}
+   */
+  public includeAttributes = (): string[] => {
+    return [
+      'primaryColor',
+      'name',
+      'address',
+      'logoUri',
+      'addressTextFormatted',
+    ];
+  };
+
+  public excludeAttributes = (): string[] => {
+    return ['*'];
+  };
+
+  /**
+   * Retrieves the formatted text of organization address.
+   * @returns {string}
+   */
+  public addressTextFormatted() {
+    return this.context.organization.addressTextFormatted;
+  }
 }
 
 class GetInvoicePaymentLinkEntryMetaTransformer extends ItemEntryTransformer {

packages/server/src/system/migrations/20240928145627_add_logo_key_to_tenant_metadata.js

@@ -0,0 +1,23 @@
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = function (knex) {
+  return knex.schema.table('tenants_metadata', (table) => {
+    table.string('primary_color');
+    table.string('logo_key');
+    table.json('address');
+  });
+};
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = function (knex) {
+  return knex.schema.table('tenants_metadata', (table) => {
+    table.dropColumn('primary_color');
+    table.dropColumn('logo_key');
+    table.dropColumn('address');
+  });
+};

packages/server/src/system/models/Tenant.ts

@@ -169,7 +169,7 @@ export default class Tenant extends BaseModel {
    */
   static async saveMetadata(tenantId, metadata) {
     const foundMetadata = await TenantMetadata.query().findOne({ tenantId });
-    const updateOrInsert = foundMetadata ? 'update' : 'insert';
+    const updateOrInsert = foundMetadata ? 'patch' : 'insert';
 
     return TenantMetadata.query()
       [updateOrInsert]({

packages/server/src/system/models/TenantMetadata.ts

@@ -1,8 +1,43 @@
+import { addressTextFormat } from '@/utils/address-text-format';
 import BaseModel from 'models/Model';
 
 export default class TenantMetadata extends BaseModel {
-  baseCurrency: string;
+  baseCurrency!: string;
-  name: string;
+  name!: string;
+  tenantId!: number;
+  industry!: string;
+  location!: string;
+  language!: string;
+  timezone!: string;
+  dateFormat!: string;
+  fiscalYear!: string;
+  primaryColor!: string;
+  logoKey!: string;
+  address!: Record<string, any>;
+
+  /**
+   * Json schema.
+   */
+  static get jsonSchema() {
+    return {
+      type: 'object',
+      required: ['tenantId', 'name', 'baseCurrency'],
+      properties: {
+        tenantId: { type: 'integer' },
+        name: { type: 'string', maxLength: 255 },
+        industry: { type: 'string', maxLength: 255 },
+        location: { type: 'string', maxLength: 255 },
+        baseCurrency: { type: 'string', maxLength: 3 },
+        language: { type: 'string', maxLength: 255 },
+        timezone: { type: 'string', maxLength: 255 },
+        dateFormat: { type: 'string', maxLength: 255 },
+        fiscalYear: { type: 'string', maxLength: 255 },
+        primaryColor: { type: 'string', maxLength: 7 }, // Assuming hex color code
+        logoKey: { type: 'string', maxLength: 255 },
+        address: { type: 'object' },
+      },
+    };
+  }
 
   /**
    * Table name.
@@ -10,4 +45,44 @@ export default class TenantMetadata extends BaseModel {
   static get tableName() {
     return 'tenants_metadata';
   }
+
+  /**
+   * Virtual attributes.
+   */
+  static get virtualAttributes() {
+    return ['logoUri'];
+  }
+
+  /**
+   * Organization logo url.
+   * @returns {string | null}
+   */
+  public get logoUri() {
+    return this.logoKey
+      ? `https://bigcapital.sfo3.digitaloceanspaces.com/${this.logoKey}`
+      : null;
+  }
+
+  /**
+   * Retrieves the organization address formatted text.
+   * @returns {string}
+   */
+  public get addressTextFormatted() {
+    const defaultMessage = `<strong>{ORGANIZATION_NAME}</strong>
+  {ADDRESS_1},
+  {ADDRESS_2},
+  {CITY} {STATE},
+  {POSTAL_CODE},
+  {COUNTRY}
+`;
+    return addressTextFormat(defaultMessage, {
+      organizationName: this.name,
+      address1: this.address?.address1,
+      address2: this.address?.address2,
+      state: this.address?.stateProvince,
+      city: this.address?.city,
+      postalCode: this.address?.postalCode,
+      country: 'United State',
+    });
+  }
 }

packages/server/src/utils/address-text-format.ts

@@ -0,0 +1,42 @@
+interface OrganizationAddressFormatArgs {
+  organizationName?: string;
+  address1?: string;
+  address2?: string;
+  state?: string;
+  city?: string;
+  country?: string;
+  postalCode?: string;
+}
+
+const defaultMessage = `
+  <strong>{ORGANIZATION_NAME}</strong>
+  {ADDRESS_1},
+  {ADDRESS_2},
+  {CITY} {STATE},
+  {POSTAL_CODE},
+  {COUNTRY}
+`;
+
+export const addressTextFormat = (
+  message: string,
+  args: OrganizationAddressFormatArgs
+) => {
+  const replacements: Record<string, string> = {
+    ORGANIZATION_NAME: args.organizationName || '',
+    ADDRESS_1: args.address1 || '',
+    ADDRESS_2: args.address2 || '',
+    CITY: args.city || '',
+    STATE: args.state || '',
+    POSTAL_CODE: args.postalCode || '',
+    COUNTRY: args.country || '',
+  };
+  let formattedMessage = Object.entries(replacements).reduce(
+    (msg, [key, value]) => {
+      return value ? msg.split(`{${key}}`).join(value) : msg;
+    },
+    message
+  );
+  formattedMessage = formattedMessage.replace(/\n/g, '<br />');
+
+  return formattedMessage.trim();
+};

packages/webapp/src/constants/PdfTemplates.ts

@@ -1,4 +1,5 @@
-export const DefaultPdfTemplateTerms = 'All services provided are non-refundable. For any disputes, please contact us within 7 days of receiving this invoice.';
+export const DefaultPdfTemplateTerms =
+  'All services provided are non-refundable. For any disputes, please contact us within 7 days of receiving this invoice.';
 
 export const DefaultPdfTemplateStatement =
   'Thank you for your business. We look forward to working with you again!';
@@ -7,3 +8,19 @@ export const DefaultPdfTemplateItemName = 'Web development';
 
 export const DefaultPdfTemplateItemDescription =
   'Website development with content and SEO optimization';
+
+export const DefaultPdfTemplateAddressBilledTo = `Bigcapital Technology, Inc.<br />
+131 Continental Dr Suite 305 Newark, <br />
+Delaware 19713, <br />
+United States, <br />
++1 762-339-5634, <br />
+ahmed@bigcapital.app
+`;
+
+
+export const DefaultPdfTemplateAddressBilledFrom = `131 Continental Dr Suite 305 Newark, <br />
+Delaware 19713,<br />
+United States, <br />
++1 762-339-5634, <br />
+ahmed@bigcapital.app
+`;

packages/webapp/src/constants/preferencesMenu.tsx

@@ -8,6 +8,11 @@ export default [
     disabled: false,
     href: '/preferences/general',
   },
+  {
+    text: 'Branding',
+    disabled: false,
+    href: '/preferences/branding',
+  },
   {
     text: 'Billing',
     href: '/preferences/billing',

packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import { useRef, useState } from 'react';
+import clsx from 'classnames';
 import { Button, Intent } from '@blueprintjs/core';
 import { Icon, Stack } from '@/components';
 import { Dropzone, DropzoneProps } from '@/components/Dropzone';
@@ -69,7 +70,7 @@ export function CompanyLogoUpload({
       onReject={(files) => console.log('rejected files', files)}
       maxSize={5 * 1024 ** 2}
       accept={[MIME_TYPES.png, MIME_TYPES.jpeg]}
-      classNames={{ root: styles?.root, content: styles.dropzoneContent }}
+      classNames={{ root: clsx(styles?.root, classNames?.root), content: styles.dropzoneContent }}
       activateOnClick={false}
       openRef={openRef}
       {...dropzoneProps}

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

@@ -17,7 +17,6 @@
   width :50px;
   border-radius: 50px;
   background-color: #dfdfdf;
-  background-image: url('https://pbs.twimg.com/profile_images/1381635804397703182/x5chIdsO_400x400.png');
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;

packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx

@@ -38,13 +38,20 @@ export function PaymentPortal() {
       <Stack spacing={0} className={styles.body}>
         <Stack>
           <Group spacing={10}>
-            <Box className={styles.companyLogoWrap}></Box>
+            {sharableLinkMeta?.organization?.logoUri && (
-            <Text>{sharableLinkMeta?.companyName}</Text>
+              <Box
+                className={styles.companyLogoWrap}
+                style={{
+                  backgroundImage: `url(${sharableLinkMeta?.organization?.logoUri})`,
+                }}
+              ></Box>
+            )}
+            <Text>{sharableLinkMeta?.organization?.name}</Text>
           </Group>
 
           <Stack spacing={6}>
             <h1 className={styles.bigTitle}>
-              {sharableLinkMeta?.companyName} Sent an Invoice for{' '}
+              {sharableLinkMeta?.organization?.name} Sent an Invoice for{' '}
               {sharableLinkMeta?.totalFormatted}
             </h1>
             <Text className={clsx(Classes.TEXT_MUTED, styles.invoiceDueDate)}>
@@ -89,7 +96,6 @@ export function PaymentPortal() {
                 <Text>{tax?.taxRateAmountFormatted}</Text>
               </Group>
             ))}
-
             <Group
               position={'apart'}
               className={clsx(styles.totalItem, styles.borderBottomGray)}
@@ -125,14 +131,17 @@ export function PaymentPortal() {
             View Invoice
           </Button>
 
-          <Button
+          {sharableLinkMeta?.isReceivable &&
-            intent={Intent.PRIMARY}
+            sharableLinkMeta?.hasStripePaymentMethod && (
-            className={clsx(styles.footerButton, styles.buyButton)}
+              <Button
-            loading={isStripeCheckoutLoading}
+                intent={Intent.PRIMARY}
-            onClick={handlePayButtonClick}
+                className={clsx(styles.footerButton, styles.buyButton)}
-          >
+                loading={isStripeCheckoutLoading}
-            Pay {sharableLinkMeta?.totalFormatted}
+                onClick={handlePayButtonClick}
-          </Button>
+              >
+                Pay {sharableLinkMeta?.totalFormatted}
+              </Button>
+            )}
         </Stack>
 
         <Text className={clsx(Classes.TEXT_MUTED, styles.buyNote)}>
@@ -143,15 +152,11 @@ export function PaymentPortal() {
       </Stack>
 
       <Stack spacing={18} className={styles.footer}>
-        <Stack spacing={0}>
+        <Box
-          <Box>
+          dangerouslySetInnerHTML={{
-            <strong>Bigcapital Technology, Inc.</strong>
+            __html: sharableLinkMeta?.organization?.addressTextFormatted || '',
-          </Box>
+          }}
-          <Box>131 Continental Dr Suite 305 Newark,</Box>
+        ></Box>
-          <Box>Delaware 19713</Box>
-          <Box>United States</Box>
-          <Box>ahmed@bigcapital.app</Box>
-        </Stack>
 
         <Stack spacing={0} className={styles.footerText}>
           © 2024 Bigcapital Technology, Inc.

packages/webapp/src/containers/Preferences/Branding/PreferencesBranding.module.scss

@@ -0,0 +1,6 @@
+
+
+.fileUploadRoot{
+  width: 350px;
+  height: 140px;
+}

packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingBoot.tsx

@@ -0,0 +1,46 @@
+import { useCurrentOrganization } from '@/hooks/query';
+import React, { createContext, useContext, ReactNode } from 'react';
+
+interface PreferencesBrandingContextType {
+  isOrganizationLoading: boolean;
+  organization: any;
+}
+
+const PreferencesBrandingContext =
+  createContext<PreferencesBrandingContextType>(
+    {} as PreferencesBrandingContextType,
+  );
+
+interface PreferencesBrandingProviderProps {
+  children: ReactNode;
+}
+
+export const PreferencesBrandingBoot: React.FC<
+  PreferencesBrandingProviderProps
+> = ({ children }) => {
+  // Fetches current organization information.
+  const { isLoading: isOrganizationLoading, data: organization } =
+    useCurrentOrganization({});
+
+  const contextValue: PreferencesBrandingContextType = {
+    isOrganizationLoading,
+    organization,
+  };
+
+  return (
+    <PreferencesBrandingContext.Provider value={contextValue}>
+      {children}
+    </PreferencesBrandingContext.Provider>
+  );
+};
+
+export const usePreferencesBrandingBoot = () => {
+  const context = useContext(PreferencesBrandingContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'usePreferencesBranding must be used within a PreferencesBrandingProvider',
+    );
+  }
+  return context;
+};

packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingForm.tsx

@@ -0,0 +1,114 @@
+import React, { CSSProperties } from 'react';
+import { Formik, Form, FormikHelpers } from 'formik';
+import * as Yup from 'yup';
+import { omit } from 'lodash';
+import { PreferencesBrandingFormValues } from './_types';
+import { useUploadAttachments } from '@/hooks/query/attachments';
+import { AppToaster } from '@/components';
+import { Intent } from '@blueprintjs/core';
+import {
+  excludePrivateProps,
+  transformToCamelCase,
+  transformToForm,
+  transfromToSnakeCase,
+} from '@/utils';
+import { useUpdateOrganization } from '@/hooks/query';
+import { usePreferencesBrandingBoot } from './PreferencesBrandingBoot';
+
+const initialValues = {
+  logoKey: '',
+  logoUri: '',
+  primaryColor: '',
+};
+
+const validationSchema = Yup.object({
+  logoKey: Yup.string().optional(),
+  logoUri: Yup.string().optional(),
+  primaryColor: Yup.string().required('Primary color is required'),
+});
+
+interface PreferencesBrandingFormProps {
+  children: React.ReactNode;
+}
+
+export const PreferencesBrandingForm = ({
+  children,
+}: PreferencesBrandingFormProps) => {
+  // Uploads the attachments.
+  const { mutateAsync: uploadAttachments } = useUploadAttachments({});
+  // Mutate organization information.
+  const { mutateAsync: updateOrganization } = useUpdateOrganization();
+
+  const { organization } = usePreferencesBrandingBoot();
+
+  const formInitialValues = {
+    ...transformToForm(
+      transformToCamelCase(organization?.metadata),
+      initialValues,
+    ),
+  } as PreferencesBrandingFormValues;
+
+  // Handle the form submitting.
+  const handleSubmit = async (
+    values: PreferencesBrandingFormValues,
+    { setSubmitting }: FormikHelpers<PreferencesBrandingFormValues>,
+  ) => {
+    const _values = { ...values };
+
+    const handleError = (message: string) => {
+      AppToaster.show({ intent: Intent.DANGER, message });
+      setSubmitting(false);
+    };
+    // Start upload the company logo file if it is presented.
+    if (values._logoFile) {
+      const formData = new FormData();
+      const key = Date.now().toString();
+
+      formData.append('file', values._logoFile);
+      formData.append('internalKey', key);
+
+      try {
+        // @ts-expect-error
+        const uploadedAttachmentRes = await uploadAttachments(formData);
+        setSubmitting(false);
+
+        // Adds the attachment key to the values after finishing upload.
+        _values['logoKey'] = uploadedAttachmentRes?.key;
+      } catch {
+        handleError('An error occurred while uploading company logo.');
+        setSubmitting(false);
+        return;
+      }
+    }
+    // Exclude all the private props that starts with _.
+    const excludedPrivateValues = excludePrivateProps(_values);
+
+    const __values = transfromToSnakeCase(
+      omit(excludedPrivateValues, ['logoUri']),
+    );
+    // Update organization branding.
+    // @ts-expect-error
+    await updateOrganization({ ...__values });
+
+    AppToaster.show({
+      message: 'Organization branding has been updated.',
+      intent: Intent.SUCCESS,
+    });
+  };
+
+  return (
+    <Formik
+      initialValues={formInitialValues}
+      validationSchema={validationSchema}
+      onSubmit={handleSubmit}
+    >
+      <Form style={formStyle}>{children}</Form>
+    </Formik>
+  );
+};
+
+const formStyle: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+};

packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx

@@ -0,0 +1,77 @@
+import { Button, Classes, Intent, Text } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FFormGroup, Group, Stack } from '@/components';
+import { FColorInput } from '@/components/Forms/FColorInput';
+import { CompanyLogoUpload } from '@/containers/ElementCustomize/components/CompanyLogoUpload';
+import { PreferencesBrandingFormValues } from './_types';
+import styles from './PreferencesBranding.module.scss';
+
+export function PreferencesBrandingFormContent() {
+  return (
+    <Stack style={{ flex: '1' }} spacing={10}>
+      <FFormGroup name={'companyLogo'} label={'Company Logo'}>
+        <Group spacing={15} align={'left'}>
+          <BrandingCompanyLogoUpload />
+          <BrandingCompanyLogoDesc />
+        </Group>
+      </FFormGroup>
+
+      <FFormGroup
+        name={'primaryColor'}
+        label={'Primary Color'}
+        helperText={
+          'Note: These preferences will be applied across PDF and mail templates, including the customer payment page.'
+        }
+      >
+        <FColorInput name={'primaryColor'} />
+      </FFormGroup>
+    </Stack>
+  );
+}
+
+export function PreferencesBrandingFormFooter() {
+  const { isSubmitting } = useFormikContext();
+
+  return (
+    <Group style={{ padding: '12px 0', borderTop: '1px solid #e1e1e1' }}>
+      <Button intent={Intent.PRIMARY} type={'submit'} loading={isSubmitting}>
+        Submit
+      </Button>
+    </Group>
+  );
+}
+
+export function BrandingCompanyLogoUpload() {
+  const { setFieldValue, values } =
+    useFormikContext<PreferencesBrandingFormValues>();
+
+  return (
+    <CompanyLogoUpload
+      initialPreview={values?.logoUri}
+      onChange={(file) => {
+        const imageUrl = file ? URL.createObjectURL(file) : '';
+
+        setFieldValue('_logoFile', file);
+        setFieldValue('logoUri', imageUrl);
+        setFieldValue('logoKey', '');
+      }}
+      classNames={{
+        root: styles.fileUploadRoot,
+      }}
+    />
+  );
+}
+
+function BrandingCompanyLogoDesc() {
+  return (
+    <Stack spacing={10} style={{ fontSize: 12, paddingTop: 12, flex: 1 }}>
+      <Text className={Classes.TEXT_MUTED}>
+        This logo will be displayed in transaction PDFs and email notifications.
+      </Text>
+      <Text className={Classes.TEXT_MUTED}>
+        Preferred Image Dimensions: 240 × 240 pixels @ 72 DPI Maximum File Size:
+        1MB
+      </Text>
+    </Stack>
+  );
+}

packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingPage.tsx

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import { useEffect } from 'react';
+import { Stack } from '@/components';
+import { PreferencesBrandingBoot } from './PreferencesBrandingBoot';
+import { PreferencesBrandingForm } from './PreferencesBrandingForm';
+import {
+  PreferencesBrandingFormContent,
+  PreferencesBrandingFormFooter,
+} from './PreferencesBrandingFormContent';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+
+function PreferencesBrandingPageRoot({ changePreferencesPageTitle }) {
+  useEffect(() => {
+    changePreferencesPageTitle('Branding');
+  }, [changePreferencesPageTitle]);
+
+  return (
+    <Stack
+      style={{ padding: '20px 40px 0', maxWidth: 900, width: '100%', flex: 1 }}
+    >
+      <PreferencesBrandingBoot>
+        <PreferencesBrandingForm>
+          <PreferencesBrandingFormContent />
+          <PreferencesBrandingFormFooter />
+        </PreferencesBrandingForm>
+      </PreferencesBrandingBoot>
+    </Stack>
+  );
+}
+
+export default R.compose(withDashboardActions)(PreferencesBrandingPageRoot);

packages/webapp/src/containers/Preferences/Branding/_types.ts

@@ -0,0 +1,6 @@
+export interface PreferencesBrandingFormValues {
+  logoKey: string;
+  logoUri: string;
+  primaryColor: string;
+  _logoFile?: any;
+}

packages/webapp/src/containers/Preferences/General/GeneralForm.tsx

@@ -14,6 +14,8 @@ import {
   FFormGroup,
   FInputGroup,
   FSelect,
+  Stack,
+  Group,
 } from '@/components';
 import { inputIntent } from '@/utils';
 import { CLASSES } from '@/constants/classes';
@@ -99,6 +101,47 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
         />
       </FFormGroup>
 
+      {/* ---------- Address ---------- */}
+      <FFormGroup
+        name={'address'}
+        label={'Organization Address'}
+        inline
+        fastField
+      >
+        <Stack>
+          <FInputGroup
+            name={'address.address_1'}
+            placeholder={'Address 1'}
+            fastField
+          />
+          <FInputGroup
+            name={'address.address_2'}
+            placeholder={'Address 2'}
+            fastField
+          />
+          <Group spacing={15}>
+            <FInputGroup name={'address.city'} placeholder={'City'} fastField />
+            <FInputGroup
+              name={'address.postal_code'}
+              placeholder={'ZIP Code'}
+              fastField
+            />
+          </Group>
+          <Group spacing={15}>
+            <FInputGroup
+              name={'address.state_province'}
+              placeholder={'State or Province'}
+              fastField
+            />
+            <FInputGroup
+              name={'address.phone'}
+              placeholder={'Phone number'}
+              fastField
+            />
+          </Group>
+        </Stack>
+      </FFormGroup>
+
       {/* ----------  Base currency ----------  */}
       <FFormGroup
         name={'base_currency'}

packages/webapp/src/containers/Preferences/General/GeneralFormPage.tsx

@@ -24,6 +24,7 @@ const defaultValues = {
   date_format: '',
   timezone: '',
   tax_number: '',
+  address: {},
 };
 
 /**

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@/components';
+import { Box, Stack } from '@/components';
 import {
   PaperTemplate,
   PaperTemplateProps,
@@ -8,12 +8,14 @@ import {
   DefaultPdfTemplateItemDescription,
   DefaultPdfTemplateStatement,
   DefaultPdfTemplateItemName,
+  DefaultPdfTemplateAddressBilledTo,
+  DefaultPdfTemplateAddressBilledFrom,
 } from '@/constants/PdfTemplates';
 
 export interface CreditNotePaperTemplateProps extends PaperTemplateProps {
   // Address
-  billedToAddress?: Array<string>;
+  billedToAddress?: string;
-  billedFromAddress?: Array<string>;
+  billedFromAddress?: string;
   showBilledToAddress?: boolean;
   showBilledFromAddress?: boolean;
   billedToLabel?: string;
@@ -70,23 +72,11 @@ export function CreditNotePaperTemplate({
   companyName = 'Bigcapital Technology, Inc.',
 
   // Address
-  billedToAddress = [
+  billedToAddress = DefaultPdfTemplateAddressBilledTo,
-    'Bigcapital Technology, Inc.',
+  billedFromAddress = DefaultPdfTemplateAddressBilledFrom,
-    '131 Continental Dr Suite 305 Newark,',
+
-    'Delaware 19713',
-    'United States',
-    '+1 762-339-5634',
-    'ahmed@bigcapital.app',
-  ],
-  billedFromAddress = [
-    '131 Continental Dr Suite 305 Newark,',
-    'Delaware 19713',
-    'United States',
-    '+1 762-339-5634',
-    'ahmed@bigcapital.app',
-  ],
-  showBilledToAddress = true,
   showBilledFromAddress = true,
+  showBilledToAddress = true,
   billedToLabel = 'Billed To',
 
   // Total
@@ -152,14 +142,16 @@ export function CreditNotePaperTemplate({
 
         <PaperTemplate.AddressesGroup>
           {showBilledFromAddress && (
-            <PaperTemplate.Address
+            <PaperTemplate.Address>
-              items={[<strong>{companyName}</strong>, ...billedFromAddress]}
+              <strong>{companyName}</strong>
-            />
+              <Box dangerouslySetInnerHTML={{ __html: billedFromAddress }} />
+            </PaperTemplate.Address>
           )}
           {showBilledToAddress && (
-            <PaperTemplate.Address
+            <PaperTemplate.Address>
-              items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
+              <strong>{billedToLabel}</strong>
-            />
+              <Box dangerouslySetInnerHTML={{ __html: billedToAddress }} />
+            </PaperTemplate.Address>
           )}
         </PaperTemplate.AddressesGroup>
 

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@/components';
+import { Box, Stack } from '@/components';
 import {
   PaperTemplate,
   PaperTemplateProps,
@@ -8,6 +8,8 @@ import {
   DefaultPdfTemplateItemDescription,
   DefaultPdfTemplateStatement,
   DefaultPdfTemplateItemName,
+  DefaultPdfTemplateAddressBilledTo,
+  DefaultPdfTemplateAddressBilledFrom,
 } from '@/constants/PdfTemplates';
 
 export interface EstimatePaperTemplateProps extends PaperTemplateProps {
@@ -31,10 +33,10 @@ export interface EstimatePaperTemplateProps extends PaperTemplateProps {
 
   // Address
   showBilledToAddress?: boolean;
-  billedToAddress?: Array<string>;
+  billedToAddress?: string;
 
   showBilledFromAddress?: boolean;
-  billedFromAddress?: Array<string>;
+  billedFromAddress?: string;
   billedToLabel?: string;
 
   // Totals
@@ -74,25 +76,14 @@ export function EstimatePaperTemplate({
 
   companyName,
 
-  billedToAddress = [
+  // # Address
-    'Bigcapital Technology, Inc.',
+  billedToAddress = DefaultPdfTemplateAddressBilledTo,
-    '131 Continental Dr Suite 305 Newark,',
+  billedFromAddress = DefaultPdfTemplateAddressBilledFrom,
-    'Delaware 19713',
-    'United States',
-    '+1 762-339-5634',
-    'ahmed@bigcapital.app',
-  ],
-  billedFromAddress = [
-    '131 Continental Dr Suite 305 Newark,',
-    'Delaware 19713',
-    'United States',
-    '+1 762-339-5634',
-    'ahmed@bigcapital.app',
-  ],
   showBilledFromAddress = true,
   showBilledToAddress = true,
   billedToLabel = 'Billed To',
 
+  // #Total
   total = '$1000.00',
   totalLabel = 'Total',
   showTotal = true,
@@ -101,10 +92,12 @@ export function EstimatePaperTemplate({
   subtotalLabel = 'Subtotal',
   showSubtotal = true,
 
+  // # Customer Note
   showCustomerNote = true,
   customerNote = DefaultPdfTemplateStatement,
   customerNoteLabel = 'Customer Note',
 
+  // # Terms & Conditions
   showTermsConditions = true,
   termsConditions = DefaultPdfTemplateTerms,
   termsConditionsLabel = 'Terms & Conditions',
@@ -145,13 +138,11 @@ export function EstimatePaperTemplate({
               {estimateNumebr}
             </PaperTemplate.TermsItem>
           )}
-
           {showEstimateDate && (
             <PaperTemplate.TermsItem label={estimateDateLabel}>
               {estimateDate}
             </PaperTemplate.TermsItem>
           )}
-
           {showExpirationDate && (
             <PaperTemplate.TermsItem label={expirationDateLabel}>
               {expirationDate}
@@ -161,14 +152,16 @@ export function EstimatePaperTemplate({
 
         <PaperTemplate.AddressesGroup>
           {showBilledFromAddress && (
-            <PaperTemplate.Address
+            <PaperTemplate.Address>
-              items={[<strong>{companyName}</strong>, ...billedFromAddress]}
+              <strong>{companyName}</strong>
-            />
+              <Box dangerouslySetInnerHTML={{ __html: billedFromAddress }} />
+            </PaperTemplate.Address>
           )}
           {showBilledToAddress && (
-            <PaperTemplate.Address
+            <PaperTemplate.Address>
-              items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
+              <strong>{billedToLabel}</strong>
-            />
+              <Box dangerouslySetInnerHTML={{ __html: billedToAddress }} />
+            </PaperTemplate.Address>
           )}
         </PaperTemplate.AddressesGroup>
 

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import { PaperTemplate, PaperTemplateTotalBorder } from './PaperTemplate';
-import { Stack } from '@/components';
+import { Box, Stack } from '@/components';
 import {
   DefaultPdfTemplateTerms,
   DefaultPdfTemplateItemDescription,
   DefaultPdfTemplateStatement,
   DefaultPdfTemplateItemName,
+  DefaultPdfTemplateAddressBilledTo,
+  DefaultPdfTemplateAddressBilledFrom,
 } from '@/constants/PdfTemplates';
 interface PapaerLine {
   item?: string;
@@ -89,8 +91,8 @@ export interface InvoicePaperTemplateProps {
   lines?: Array<PapaerLine>;
   taxes?: Array<PaperTax>;
 
-  billedFromAddres?: Array<string | React.ReactNode>;
+  billedFromAddres?: string;
-  billedToAddress?: Array<string | React.ReactNode>;
+  billedToAddress?: string;
 }
 
 export function InvoicePaperTemplate({
@@ -169,21 +171,8 @@ export function InvoicePaperTemplate({
   statementLabel = 'Statement',
   showStatement = true,
   statement = DefaultPdfTemplateStatement,
-  billedToAddress = [
+  billedToAddress = DefaultPdfTemplateAddressBilledTo,
-    'Bigcapital Technology, Inc.',
+  billedFromAddres = DefaultPdfTemplateAddressBilledFrom,
-    '131 Continental Dr Suite 305 Newark,',
-    'Delaware 19713',
-    'United States',
-    '+1 762-339-5634',
-    'ahmed@bigcapital.app',
-  ],
-  billedFromAddres = [
-    '131 Continental Dr Suite 305 Newark,',
-    'Delaware 19713',
-    'United States',
-    '+1 762-339-5634',
-    'ahmed@bigcapital.app',
-  ],
 }: InvoicePaperTemplateProps) {
   return (
     <PaperTemplate
@@ -214,14 +203,16 @@ export function InvoicePaperTemplate({
 
         <PaperTemplate.AddressesGroup>
           {showBilledFromAddress && (
-            <PaperTemplate.Address
+            <PaperTemplate.Address>
-              items={[<strong>{companyName}</strong>, ...billedFromAddres]}
+              <strong>{companyName}</strong>
-            />
+              <Box dangerouslySetInnerHTML={{ __html: billedFromAddres }} />
+            </PaperTemplate.Address>
           )}
           {showBillingToAddress && (
-            <PaperTemplate.Address
+            <PaperTemplate.Address>
-              items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
+              <strong>{billedToLabel}</strong>
-            />
+              <Box dangerouslySetInnerHTML={{ __html: billedToAddress }} />
+            </PaperTemplate.Address>
           )}
         </PaperTemplate.AddressesGroup>
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 import { get } from 'lodash';
-import { Group, GroupProps, Stack } from '@/components';
+import { Box, Group, GroupProps, Stack } from '@/components';
 import styles from './InvoicePaperTemplate.module.scss';
 
 export interface PaperTemplateProps {
@@ -123,16 +123,14 @@ PaperTemplate.AddressesGroup = (props: GroupProps) => {
   return <Group spacing={10} {...props} className={styles.addressRoot} />;
 };
 PaperTemplate.Address = ({
-  items,
+  children,
 }: {
-  items: Array<string | React.ReactNode>;
+  children: React.ReactNode;
 }) => {
   return (
-    <Stack spacing={0}>
+    <Box>
-      {items.map((item, index) => (
+      {children}
-        <div key={index}>{item}</div>
+    </Box>
-      ))}
-    </Stack>
   );
 };
 

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx

@@ -1,15 +1,19 @@
-import { Stack } from '@/components';
+import { Box, Stack } from '@/components';
 import {
   PaperTemplate,
   PaperTemplateProps,
   PaperTemplateTotalBorder,
 } from '../../Invoices/InvoiceCustomize/PaperTemplate';
+import {
+  DefaultPdfTemplateAddressBilledFrom,
+  DefaultPdfTemplateAddressBilledTo,
+} from '@/constants/PdfTemplates';
 
 export interface PaymentReceivedPaperTemplateProps extends PaperTemplateProps {
-  billedToAddress?: Array<string>;
+  billedToAddress?: string;
-  showBillingToAddress?: boolean;
+  showBilledToAddress?: boolean;
 
-  billedFromAddress?: Array<string>;
+  billedFromAddress?: string;
   showBilledFromAddress?: boolean;
   billedToLabel?: string;
 
@@ -52,23 +56,10 @@ export function PaymentReceivedPaperTemplate({
   // # Company name
   companyName = 'Bigcapital Technology, Inc.',
 
-  billedToAddress = [
+  billedToAddress = DefaultPdfTemplateAddressBilledTo,
-    'Bigcapital Technology, Inc.',
+  billedFromAddress = DefaultPdfTemplateAddressBilledFrom,
-    '131 Continental Dr Suite 305 Newark,',
-    'Delaware 19713',
-    'United States',
-    '+1 762-339-5634',
-    'ahmed@bigcapital.app',
-  ],
-  billedFromAddress = [
-    '131 Continental Dr Suite 305 Newark,',
-    'Delaware 19713',
-    'United States',
-    '+1 762-339-5634',
-    'ahmed@bigcapital.app',
-  ],
   showBilledFromAddress,
-  showBillingToAddress,
+  showBilledToAddress,
   billedToLabel = 'Billed To',
 
   total = '$1000.00',
@@ -119,14 +110,16 @@ export function PaymentReceivedPaperTemplate({
 
         <PaperTemplate.AddressesGroup>
           {showBilledFromAddress && (
-            <PaperTemplate.Address
+            <PaperTemplate.Address>
-              items={[<strong>{companyName}</strong>, ...billedFromAddress]}
+              <strong>{companyName}</strong>
-            />
+              <Box dangerouslySetInnerHTML={{ __html: billedFromAddress }} />
+            </PaperTemplate.Address>
           )}
-          {showBillingToAddress && (
+          {showBilledToAddress && (
-            <PaperTemplate.Address
+            <PaperTemplate.Address>
-              items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
+              <strong>{billedToLabel}</strong>
-            />
+              <Box dangerouslySetInnerHTML={{ __html: billedToAddress }} />
+            </PaperTemplate.Address>
           )}
         </PaperTemplate.AddressesGroup>
 

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@/components';
+import { Box, Stack } from '@/components';
 import {
   PaperTemplate,
   PaperTemplateProps,
@@ -8,12 +8,14 @@ import {
   DefaultPdfTemplateItemDescription,
   DefaultPdfTemplateStatement,
   DefaultPdfTemplateItemName,
+  DefaultPdfTemplateAddressBilledTo,
+  DefaultPdfTemplateAddressBilledFrom,
 } from '@/constants/PdfTemplates';
 
 export interface ReceiptPaperTemplateProps extends PaperTemplateProps {
   // Addresses
-  billedToAddress?: Array<string>;
+  billedToAddress?: string;
-  billedFromAddress?: Array<string>;
+  billedFromAddress?: string;
   showBilledFromAddress?: boolean;
   showBilledToAddress?: boolean;
   billedToLabel?: string;
@@ -71,21 +73,8 @@ export function ReceiptPaperTemplate({
   companyName = 'Bigcapital Technology, Inc.',
 
   // # Address
-  billedToAddress = [
+  billedToAddress = DefaultPdfTemplateAddressBilledTo,
-    'Bigcapital Technology, Inc.',
+  billedFromAddress = DefaultPdfTemplateAddressBilledFrom,
-    '131 Continental Dr Suite 305 Newark,',
-    'Delaware 19713',
-    'United States',
-    '+1 762-339-5634',
-    'ahmed@bigcapital.app',
-  ],
-  billedFromAddress = [
-    '131 Continental Dr Suite 305 Newark,',
-    'Delaware 19713',
-    'United States',
-    '+1 762-339-5634',
-    'ahmed@bigcapital.app',
-  ],
   showBilledFromAddress = true,
   showBilledToAddress = true,
   billedToLabel = 'Billed To',
@@ -147,14 +136,16 @@ export function ReceiptPaperTemplate({
 
         <PaperTemplate.AddressesGroup>
           {showBilledFromAddress && (
-            <PaperTemplate.Address
+            <PaperTemplate.Address>
-              items={[<strong>{companyName}</strong>, ...billedFromAddress]}
+              <strong>{companyName}</strong>
-            />
+              <Box dangerouslySetInnerHTML={{ __html: billedFromAddress }} />
+            </PaperTemplate.Address>
           )}
           {showBilledToAddress && (
-            <PaperTemplate.Address
+            <PaperTemplate.Address>
-              items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
+              <strong>{billedToLabel}</strong>
-            />
+              <Box dangerouslySetInnerHTML={{ __html: billedToAddress }} />
+            </PaperTemplate.Address>
           )}
         </PaperTemplate.AddressesGroup>
 

packages/webapp/src/hooks/query/organization.tsx

@@ -77,12 +77,12 @@ export function useOrganizationSetup() {
 /**
  * Saves the settings.
  */
-export function useUpdateOrganization(props) {
+export function useUpdateOrganization(props = {}) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
   return useMutation(
-    (information) => apiRequest.put('organization', information),
+    (information: any) => apiRequest.put('organization', information),
     {
       onSuccess: () => {
         queryClient.invalidateQueries(t.ORGANIZATION_CURRENT);

packages/webapp/src/hooks/query/payment-link.ts

@@ -54,6 +54,23 @@ export function useCreatePaymentLink(
 
 // Get Invoice Payment Link
 // -----------------------------------------
+interface GetInvoicePaymentLinkAddressResponse {
+  address_1: string;
+  address_2: string;
+  postal_code: string;
+  city: string;
+  state_province: string;
+  phone: string;
+}
+
+interface GetInvoicePaymentLinkOrganizationRes {
+  address: Record<string, GetInvoicePaymentLinkAddressResponse>;
+  name: string;
+  primaryColor: string;
+  logoUri: string;
+  addressTextFormatted: string;
+}
+
 export interface GetInvoicePaymentLinkResponse {
   dueAmount: number;
   dueAmountFormatted: string;
@@ -70,7 +87,6 @@ export interface GetInvoicePaymentLinkResponse {
   totalFormatted: string;
   totalLocalFormatted: string;
   customerName: string;
-  companyName: string;
   invoiceMessage: string;
   termsConditions: string;
   entries: Array<{
@@ -89,7 +105,11 @@ export interface GetInvoicePaymentLinkResponse {
     taxRateAmountFormatted: string;
     taxRateCode: string;
   }>;
+  organization: GetInvoicePaymentLinkOrganizationRes;
+  hasStripePaymentMethod: boolean;
+  isReceivable: boolean;
 }
+
 /**
  * Fetches the sharable invoice link metadata for a given link ID.
  * @param {string} linkId - The ID of the link to fetch metadata for.

packages/webapp/src/routes/preferences.tsx

@@ -9,6 +9,11 @@ export const getPreferenceRoutes = () => [
     component: lazy(() => import('@/containers/Preferences/General/General')),
     exact: true,
   },
+  {
+    path: `${BASE_URL}/branding`,
+    component: lazy(() => import('../containers/Preferences/Branding/PreferencesBrandingPage')),
+    exact: true,
+  },
   {
     path: `${BASE_URL}/users`,
     component: lazy(() => import('../containers/Preferences/Users/Users')),