feat: Uploading company logo

2026-02-16 12:50:38 +00:00 · 2024-09-24 20:28:19 +02:00
parent d16c57b63b
commit 37fd4a1fdb
20 changed files with 404 additions and 171 deletions
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx
@@ -10,6 +10,7 @@ import {
 import { FColorInput } from '@/components/Forms/FColorInput';
 import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay';
 import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';
+import { BrandingCompanyLogoUploadField } from '@/containers/ElementCustomize/components/BrandingCompanyLogoUploadField';

 export function CreditNoteCustomizeGeneralField() {
  const isTemplateNameFilled = useIsTemplateNamedFilled();
@@ -64,15 +65,23 @@ export function CreditNoteCustomizeGeneralField() {
            />
          </FFormGroup>

-          <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
-            <FSwitch
+          <Stack spacing={10}>
+            <FFormGroup
              name={'showCompanyLogo'}
-              label={'Display company logo in the paper'}
-              style={{ fontSize: 14 }}
-              large
+              label={'Logo'}
              fastField
-            />
-          </FFormGroup>
+              style={{ marginBottom: 0 }}
+            >
+              <FSwitch
+                name={'showCompanyLogo'}
+                label={'Display company logo in the paper'}
+                style={{ fontSize: 14 }}
+                fastField
+              />
+            </FFormGroup>
+
+            <BrandingCompanyLogoUploadField />
+          </Stack>
        </Stack>
      </Overlay>
    </Stack>
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
@@ -1,16 +1,16 @@
 // @ts-nocheck
-import { Classes, Text } from '@blueprintjs/core';
+import { Classes } from '@blueprintjs/core';
 import {
  FFormGroup,
  FInputGroup,
  FSwitch,
  FieldRequiredHint,
-  Group,
  Stack,
 } from '@/components';
 import { FColorInput } from '@/components/Forms/FColorInput';
 import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';
 import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay';
+import { BrandingCompanyLogoUploadField } from '@/containers/ElementCustomize/components/BrandingCompanyLogoUploadField';

 export function EstimateCustomizeGeneralField() {
  const isTemplateNameFilled = useIsTemplateNamedFilled();
@@ -65,15 +65,24 @@ export function EstimateCustomizeGeneralField() {
            />
          </FFormGroup>

-          <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
-            <FSwitch
+          <Stack spacing={10}>
+            <FFormGroup
              name={'showCompanyLogo'}
-              label={'Display company logo in the paper'}
-              style={{ fontSize: 14 }}
-              large
+              label={'Logo'}
              fastField
-            />
-          </FFormGroup>
+              style={{ marginBottom: 0 }}
+            >
+              <FSwitch
+                name={'showCompanyLogo'}
+                label={'Display company logo in the paper'}
+                style={{ fontSize: 14 }}
+                large
+                fastField
+              />
+            </FFormGroup>
+
+            <BrandingCompanyLogoUploadField />
+          </Stack>
        </Stack>
      </Overlay>
    </Stack>
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CompanyLogoUpload.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CompanyLogoUpload.tsx
@@ -1,88 +0,0 @@
-// @ts-nocheck
-import { useRef, useState } from 'react';
-import { Button, Intent } from '@blueprintjs/core';
-import clsx from 'classnames';
-import { Box, Icon, Stack } from '@/components';
-import { Dropzone, DropzoneProps } from '@/components/Dropzone';
-import { MIME_TYPES } from '@/components/Dropzone/mine-types';
-import { useUncontrolled } from '@/hooks/useUncontrolled';
-import styles from './CompanyLogoUpload.module.scss';
-
-export interface CompanyLogoUploadProps {
-  initialValue?: File;
-  value?: File;
-  onChange?: (file: File) => void;
-  dropzoneProps?: DropzoneProps;
-  uploadIcon?: JSX.Element;
-  title?: string;
-  classNames?: Record<string, string>;
-}
-
-export function CompanyLogoUpload({
-  initialValue,
-  value,
-  onChange,
-  dropzoneProps,
-  uploadIcon = <Icon icon="download" iconSize={26} />,
-  title = 'Drag images here or click to select files',
-  classNames,
-}: CompanyLogoUploadProps) {
-  const [localValue, handleChange] = useUncontrolled({
-    value,
-    initialValue,
-    finalValue: null,
-    onChange,
-  });
-  const openRef = useRef<() => void>(null);
-
-  const handleRemove = () => {
-    handleChange(null);
-  };
-  const imagePreviewUrl = localValue ? URL.createObjectURL(localValue) : '';
-
-  return (
-    <Dropzone
-      onDrop={(files) => handleChange(files[0])}
-      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 }}
-      activateOnClick={false}
-      openRef={openRef}
-      {...dropzoneProps}
-    >
-      <Stack
-        spacing={12}
-        align="center"
-        className={clsx(styles.content, classNames?.content)}
-      >
-        {localValue ? (
-          <Stack spacing={10} justify="center" align="center">
-            <img src={imagePreviewUrl} alt="" className={styles.previewImage} />
-            <Button
-              minimal
-              intent={Intent.DANGER}
-              onClick={handleRemove}
-              icon={<Icon icon={'smallCross'} iconSize={16} />}
-              className={styles?.removeButton}
-            />
-          </Stack>
-        ) : (
-          <Stack spacing={10} align="center">
-            {title && <span className={styles.title}>{title}</span>}
-            <Button
-              intent="none"
-              onClick={() => openRef.current?.()}
-              style={{ pointerEvents: 'all' }}
-              minimal
-              outlined
-              small
-            >
-              {'Upload File'}
-            </Button>
-          </Stack>
-        )}
-      </Stack>
-    </Dropzone>
-  );
-}
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
@@ -12,8 +12,7 @@ import { FColorInput } from '@/components/Forms/FColorInput';
 import { CreditCardIcon } from '@/icons/CreditCardIcon';
 import { Overlay } from './Overlay';
 import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';
-import { CompanyLogoUpload } from './CompanyLogoUpload';
-import { useFormikContext } from 'formik';
+import { BrandingCompanyLogoUploadField } from '@/containers/ElementCustomize/components/BrandingCompanyLogoUploadField';

 export function InvoiceCustomizeGeneralField() {
  const isTemplateNameFilled = useIsTemplateNamedFilled();
@@ -68,17 +67,23 @@ export function InvoiceCustomizeGeneralField() {
            />
          </FFormGroup>

-          <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
-            <FSwitch
+          <Stack spacing={10}>
+            <FFormGroup
              name={'showCompanyLogo'}
-              label={'Display company logo in the paper'}
-              style={{ fontSize: 14 }}
-              large
+              label={'Logo'}
              fastField
-            />
-          </FFormGroup>
+              style={{ marginBottom: 0 }}
+            >
+              <FSwitch
+                name={'showCompanyLogo'}
+                label={'Display company logo in the paper'}
+                style={{ fontSize: 14 }}
+                fastField
+              />
+            </FFormGroup>

-          <CompanyLogoUploadField />
+            <BrandingCompanyLogoUploadField />
+          </Stack>
        </Stack>

        <InvoiceCustomizePaymentManage />
@@ -103,24 +108,9 @@ function InvoiceCustomizePaymentManage() {
        <Text>Accept payment methods</Text>
      </Group>

-      <a style={{ fontSize: 13 }} href={'#'}>Manage</a>
+      <a style={{ fontSize: 13 }} href={'#'}>
+        Manage
+      </a>
    </Group>
  );
 }
-
-function CompanyLogoUploadField() {
-  const { setFieldValue } = useFormikContext();
-
-  return (
-    <FFormGroup name={'companyLogo'} label={''} fastField>
-      <CompanyLogoUpload
-        onChange={(file) => {
-          const imageUrl = file ? URL.createObjectURL(file) : '';
-
-          setFieldValue('companyLogoFile', file);
-          setFieldValue('companyLogo', imageUrl);
-        }}
-      />
-    </FFormGroup>
-  );
-}
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
@@ -20,7 +20,7 @@ export interface InvoicePaperTemplateProps {
  secondaryColor?: string;

  showCompanyLogo?: boolean;
-  companyLogo?: string;
+  companyLogoUri?: string;

  showInvoiceNumber?: boolean;
  invoiceNumber?: string;
@@ -95,7 +95,7 @@ export function InvoicePaperTemplate({
  companyName = 'Bigcapital Technology, Inc.',

  showCompanyLogo = true,
-  companyLogo,
+  companyLogoUri,

  dueDate = 'September 3, 2024',
  dueDateLabel = 'Date due',
@@ -185,7 +185,7 @@ export function InvoicePaperTemplate({
      primaryColor={primaryColor}
      secondaryColor={secondaryColor}
      showCompanyLogo={showCompanyLogo}
-      companyLogo={companyLogo}
+      companyLogo={companyLogoUri}
      bigtitle={'Invoice'}
    >
      <Stack spacing={24}>
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/constants.ts
@@ -7,8 +7,8 @@ export const initialValues = {

  // Company logo.
  showCompanyLogo: true,
-  companyLogo:
-    'https://cdn-development.mercury.com/demo-assets/avatars/mercury-demo-dark.png',
+  companyLogoKey: '',
+  companyLogoUri: '',

  // Top details.
  showInvoiceNumber: true,
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/types.ts
@@ -7,7 +7,8 @@ export interface InvoiceCustomizeValues extends BrandingTemplateValues {

  // Company Logo
  showCompanyLogo?: boolean;
-  companyLogo?: string;
+  companyLogoKey?: string;
+  companyLogoUri?: string;

  // Top details.
  showInvoiceNumber?: boolean;
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
@@ -10,6 +10,7 @@ import {
 import { FColorInput } from '@/components/Forms/FColorInput';
 import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay';
 import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';
+import { BrandingCompanyLogoUploadField } from '@/containers/ElementCustomize/components/BrandingCompanyLogoUploadField';

 export function PaymentReceivedCustomizeGeneralField() {
  const isTemplateNameFilled = useIsTemplateNamedFilled();
@@ -64,15 +65,24 @@ export function PaymentReceivedCustomizeGeneralField() {
            />
          </FFormGroup>

-          <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
-            <FSwitch
+          <Stack spacing={10}>
+            <FFormGroup
              name={'showCompanyLogo'}
-              label={'Display company logo in the paper'}
-              style={{ fontSize: 14 }}
-              large
+              label={'Logo'}
              fastField
-            />
-          </FFormGroup>
+              style={{ marginBottom: 0 }}
+            >
+              <FSwitch
+                name={'showCompanyLogo'}
+                label={'Display company logo in the paper'}
+                style={{ fontSize: 14 }}
+                large
+                fastField
+              />
+            </FFormGroup>
+
+            <BrandingCompanyLogoUploadField />
+          </Stack>
        </Stack>
      </Overlay>
    </Stack>
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx
@@ -10,6 +10,7 @@ import {
 import { FColorInput } from '@/components/Forms/FColorInput';
 import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';
 import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay';
+import { BrandingCompanyLogoUploadField } from '@/containers/ElementCustomize/components/BrandingCompanyLogoUploadField';

 export function ReceiptCustomizeGeneralField() {
  const isTemplateNameFilled = useIsTemplateNamedFilled();
@@ -64,15 +65,23 @@ export function ReceiptCustomizeGeneralField() {
            />
          </FFormGroup>

-          <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
-            <FSwitch
+          <Stack spacing={10}>
+            <FFormGroup
              name={'showCompanyLogo'}
-              label={'Display company logo in the paper'}
-              style={{ fontSize: 14 }}
-              large
+              label={'Logo'}
              fastField
-            />
-          </FFormGroup>
+              style={{ marginBottom: 0 }}
+            >
+              <FSwitch
+                name={'showCompanyLogo'}
+                label={'Display company logo in the paper'}
+                style={{ fontSize: 14 }}
+                fastField
+              />
+            </FFormGroup>
+
+            <BrandingCompanyLogoUploadField />
+          </Stack>
        </Stack>
      </Overlay>
    </Stack>