QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 22:00:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
feat: Company branding preferences
This commit is contained in:
Ahmed Bouhuolia
2024-09-29 13:44:29 +02:00
committed by GitHub
parent b9506424d1 be2049ca6e
commit d465ee15bd
32 changed files with 750 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/server/src/api/controllers/Organization.ts
View File

@@ -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.
* @return {ValidationChain[]}
* Build organization validation schema.
* @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);

26
packages/server/src/interfaces/Setup.ts
View File

@@ -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;
baseCurrency: string;
timezone: string;
fiscalYear: string;
industry: string;
taxNumber: string;
location?: string;
baseCurrency?: string;
timezone?: string;
fiscalYear?: string;
industry?: string;
taxNumber?: string;
primaryColor?: string;
logoKey?: string;
address?: OrganizationAddressDTO;
}
export interface IOrganizationBuildEventPayload {
@@ -36,4 +48,4 @@ export interface IOrganizationBuildEventPayload {
export interface IOrganizationBuiltEventPayload {
tenantId: number;
}
}

14
packages/server/src/services/Organization/OrganizationService.ts
View File

@@ -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(
tenant,
organizationDTO.baseCurrency,
tenant.metadata?.baseCurrency
);
if (organizationDTO.baseCurrency) {
await this.validateMutateBaseCurrency(
tenant,
organizationDTO.baseCurrency,
tenant.metadata?.baseCurrency
);
}
await tenant.saveMetadata(organizationDTO);
if (organizationDTO.baseCurrency !== tenant.metadata?.baseCurrency) {

11
packages/server/src/services/Organization/OrganizationUpgrade.ts
View File

@@ -13,16 +13,13 @@ import TenantsManagerService from '@/services/Tenancy/TenantsManager';
@Service()
export default class OrganizationUpgrade {
@Inject()
tenancy: HasTenancyService;
private organizationService: OrganizationService;
@Inject()
organizationService: OrganizationService;
@Inject()
tenantsManager: TenantsManagerService;
private 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);
}
}
}
}

1
packages/server/src/services/PaymentLinks/GetInvoicePaymentLinkMetadata.ts
View File

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

55
packages/server/src/services/Sales/Invoices/GetInvoicePaymentLinkTransformer.ts
View File

@@ -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 {

23
packages/server/src/system/migrations/20240928145627_add_logo_key_to_tenant_metadata.js Normal file
View File

@@ -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');
});
};

2
packages/server/src/system/models/Tenant.ts
View File

@@ -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]({

79
packages/server/src/system/models/TenantMetadata.ts
View File

@@ -1,8 +1,43 @@
import { addressTextFormat } from '@/utils/address-text-format';
import BaseModel from 'models/Model';
export default class TenantMetadata extends BaseModel {
baseCurrency: string;
name: string;
baseCurrency!: 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',
});
}
}

42
packages/server/src/utils/address-text-format.ts Normal file
View File

@@ -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();
};

19
packages/webapp/src/constants/PdfTemplates.ts
View File

@@ -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
`;

5
packages/webapp/src/constants/preferencesMenu.tsx
View File

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

3
packages/webapp/src/containers/ElementCustomize/components/CompanyLogoUpload.tsx
View File

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

1
packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss
View File

@@ -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;

47
packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
View File

@@ -38,13 +38,20 @@ export function PaymentPortal() {
<Stack spacing={0} className={styles.body}>
<Stack>
<Group spacing={10}>
<Box className={styles.companyLogoWrap}></Box>
<Text>{sharableLinkMeta?.companyName}</Text>
{sharableLinkMeta?.organization?.logoUri && (
<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
intent={Intent.PRIMARY}
className={clsx(styles.footerButton, styles.buyButton)}
loading={isStripeCheckoutLoading}
onClick={handlePayButtonClick}
>
Pay {sharableLinkMeta?.totalFormatted}
</Button>
{sharableLinkMeta?.isReceivable &&
sharableLinkMeta?.hasStripePaymentMethod && (
<Button
intent={Intent.PRIMARY}
className={clsx(styles.footerButton, styles.buyButton)}
loading={isStripeCheckoutLoading}
onClick={handlePayButtonClick}
>
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>
<strong>Bigcapital Technology, Inc.</strong>
</Box>
<Box>131 Continental Dr Suite 305 Newark,</Box>
<Box>Delaware 19713</Box>
<Box>United States</Box>
<Box>ahmed@bigcapital.app</Box>
</Stack>
<Box
dangerouslySetInnerHTML={{
__html: sharableLinkMeta?.organization?.addressTextFormatted || '',
}}
></Box>
<Stack spacing={0} className={styles.footerText}>
© 2024 Bigcapital Technology, Inc.

6
packages/webapp/src/containers/Preferences/Branding/PreferencesBranding.module.scss Normal file
View File

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

46
packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingBoot.tsx Normal file
View File

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

114
packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingForm.tsx Normal file
View File

@@ -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,
};

77
packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx Normal file
View File

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

32
packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingPage.tsx Normal file
View File

@@ -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);

6
packages/webapp/src/containers/Preferences/Branding/_types.ts Normal file
View File

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

43
packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
View File

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

1
packages/webapp/src/containers/Preferences/General/GeneralFormPage.tsx
View File

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

42
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
View File

@@ -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>;
billedFromAddress?: Array<string>;
billedToAddress?: string;
billedFromAddress?: string;
showBilledToAddress?: boolean;
showBilledFromAddress?: boolean;
billedToLabel?: string;
@@ -70,23 +72,11 @@ export function CreditNotePaperTemplate({
companyName = 'Bigcapital Technology, Inc.',
// Address
billedToAddress = [
'Bigcapital Technology, Inc.',
'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,
billedToAddress = DefaultPdfTemplateAddressBilledTo,
billedFromAddress = DefaultPdfTemplateAddressBilledFrom,
showBilledFromAddress = true,
showBilledToAddress = true,
billedToLabel = 'Billed To',
// Total
@@ -152,14 +142,16 @@ export function CreditNotePaperTemplate({
<PaperTemplate.AddressesGroup>
{showBilledFromAddress && (
<PaperTemplate.Address
items={[<strong>{companyName}</strong>, ...billedFromAddress]}
/>
<PaperTemplate.Address>
<strong>{companyName}</strong>
<Box dangerouslySetInnerHTML={{ __html: billedFromAddress }} />
</PaperTemplate.Address>
)}
{showBilledToAddress && (
<PaperTemplate.Address
items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
/>
<PaperTemplate.Address>
<strong>{billedToLabel}</strong>
<Box dangerouslySetInnerHTML={{ __html: billedToAddress }} />
</PaperTemplate.Address>
)}
</PaperTemplate.AddressesGroup>

45
packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
View File

@@ -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 = [
'Bigcapital Technology, Inc.',
'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',
],
// # Address
billedToAddress = DefaultPdfTemplateAddressBilledTo,
billedFromAddress = DefaultPdfTemplateAddressBilledFrom,
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
items={[<strong>{companyName}</strong>, ...billedFromAddress]}
/>
<PaperTemplate.Address>
<strong>{companyName}</strong>
<Box dangerouslySetInnerHTML={{ __html: billedFromAddress }} />
</PaperTemplate.Address>
)}
{showBilledToAddress && (
<PaperTemplate.Address
items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
/>
<PaperTemplate.Address>
<strong>{billedToLabel}</strong>
<Box dangerouslySetInnerHTML={{ __html: billedToAddress }} />
</PaperTemplate.Address>
)}
</PaperTemplate.AddressesGroup>

39
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
View File

@@ -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>;
billedToAddress?: Array<string | React.ReactNode>;
billedFromAddres?: string;
billedToAddress?: string;
}
export function InvoicePaperTemplate({
@@ -169,21 +171,8 @@ export function InvoicePaperTemplate({
statementLabel = 'Statement',
showStatement = true,
statement = DefaultPdfTemplateStatement,
billedToAddress = [
'Bigcapital Technology, Inc.',
'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',
],
billedToAddress = DefaultPdfTemplateAddressBilledTo,
billedFromAddres = DefaultPdfTemplateAddressBilledFrom,
}: InvoicePaperTemplateProps) {
return (
<PaperTemplate
@@ -214,14 +203,16 @@ export function InvoicePaperTemplate({
<PaperTemplate.AddressesGroup>
{showBilledFromAddress && (
<PaperTemplate.Address
items={[<strong>{companyName}</strong>, ...billedFromAddres]}
/>
<PaperTemplate.Address>
<strong>{companyName}</strong>
<Box dangerouslySetInnerHTML={{ __html: billedFromAddres }} />
</PaperTemplate.Address>
)}
{showBillingToAddress && (
<PaperTemplate.Address
items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
/>
<PaperTemplate.Address>
<strong>{billedToLabel}</strong>
<Box dangerouslySetInnerHTML={{ __html: billedToAddress }} />
</PaperTemplate.Address>
)}
</PaperTemplate.AddressesGroup>

14
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
View File

@@ -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}>
{items.map((item, index) => (
<div key={index}>{item}</div>
))}
</Stack>
<Box>
{children}
</Box>
);
};

47
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx
View File

@@ -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>;
showBillingToAddress?: boolean;
billedToAddress?: string;
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 = [
'Bigcapital Technology, Inc.',
'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',
],
billedToAddress = DefaultPdfTemplateAddressBilledTo,
billedFromAddress = DefaultPdfTemplateAddressBilledFrom,
showBilledFromAddress,
showBillingToAddress,
showBilledToAddress,
billedToLabel = 'Billed To',
total = '$1000.00',
@@ -119,14 +110,16 @@ export function PaymentReceivedPaperTemplate({
<PaperTemplate.AddressesGroup>
{showBilledFromAddress && (
<PaperTemplate.Address
items={[<strong>{companyName}</strong>, ...billedFromAddress]}
/>
<PaperTemplate.Address>
<strong>{companyName}</strong>
<Box dangerouslySetInnerHTML={{ __html: billedFromAddress }} />
</PaperTemplate.Address>
)}
{showBillingToAddress && (
<PaperTemplate.Address
items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
/>
{showBilledToAddress && (
<PaperTemplate.Address>
<strong>{billedToLabel}</strong>
<Box dangerouslySetInnerHTML={{ __html: billedToAddress }} />
</PaperTemplate.Address>
)}
</PaperTemplate.AddressesGroup>

39
packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx
View File

@@ -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>;
billedFromAddress?: Array<string>;
billedToAddress?: string;
billedFromAddress?: string;
showBilledFromAddress?: boolean;
showBilledToAddress?: boolean;
billedToLabel?: string;
@@ -71,21 +73,8 @@ export function ReceiptPaperTemplate({
companyName = 'Bigcapital Technology, Inc.',
// # Address
billedToAddress = [
'Bigcapital Technology, Inc.',
'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',
],
billedToAddress = DefaultPdfTemplateAddressBilledTo,
billedFromAddress = DefaultPdfTemplateAddressBilledFrom,
showBilledFromAddress = true,
showBilledToAddress = true,
billedToLabel = 'Billed To',
@@ -147,14 +136,16 @@ export function ReceiptPaperTemplate({
<PaperTemplate.AddressesGroup>
{showBilledFromAddress && (
<PaperTemplate.Address
items={[<strong>{companyName}</strong>, ...billedFromAddress]}
/>
<PaperTemplate.Address>
<strong>{companyName}</strong>
<Box dangerouslySetInnerHTML={{ __html: billedFromAddress }} />
</PaperTemplate.Address>
)}
{showBilledToAddress && (
<PaperTemplate.Address
items={[<strong>{billedToLabel}</strong>, ...billedToAddress]}
/>
<PaperTemplate.Address>
<strong>{billedToLabel}</strong>
<Box dangerouslySetInnerHTML={{ __html: billedToAddress }} />
</PaperTemplate.Address>
)}
</PaperTemplate.AddressesGroup>

4
packages/webapp/src/hooks/query/organization.tsx
View File

@@ -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);

22
packages/webapp/src/hooks/query/payment-link.ts
View File

@@ -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.

5
packages/webapp/src/routes/preferences.tsx
View File

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