Merge pull request #697 from bigcapitalhq/fix-pdf-branding-templates-…

…request-data

fix: Pdf branding templates request data

packages/webapp/src/containers/BrandingTemplates/BrandingTemplateBoot.tsx

@@ -1,19 +1,21 @@
 import React, { createContext, useContext } from 'react';
+import { Spinner } from '@blueprintjs/core';
 import {
  GetPdfTemplateBrandingStateResponse,
  GetPdfTemplateResponse,
  useGetPdfTemplate,
  useGetPdfTemplateBrandingState,
 } from '@/hooks/query/pdf-templates';
-import { Spinner } from '@blueprintjs/core';
 
 interface PdfTemplateContextValue {
  templateId: number | string;
- pdfTemplate: GetPdfTemplateResponse | undefined;
+
+ // Pdf template.
+ pdfTemplate: GetPdfTemplateResponse;
  isPdfTemplateLoading: boolean;
 
  // Branding state.
- brandingTemplateState: GetPdfTemplateBrandingStateResponse | undefined;
+ brandingTemplateState: GetPdfTemplateBrandingStateResponse;
  isBrandingTemplateLoading: boolean;
 }
 
@@ -34,10 +36,18 @@ export const BrandingTemplateBoot = ({
  useGetPdfTemplate(templateId, {
  enabled: !!templateId,
  });
- // Retreives the branding template state.
+ // Retrieves the branding template state.
  const { data: brandingTemplateState, isLoading: isBrandingTemplateLoading } =
  useGetPdfTemplateBrandingState();
 
+ const isLoading = isPdfTemplateLoading ||
+ isBrandingTemplateLoading ||
+ !brandingTemplateState ||
+ !pdfTemplate;
+
+ if (isLoading) {
+ return <Spinner size={20} />;
+ }
  const value = {
  templateId,
  pdfTemplate,
@@ -47,11 +57,6 @@ export const BrandingTemplateBoot = ({
  isBrandingTemplateLoading,
  };
 
- const isLoading = isPdfTemplateLoading || isBrandingTemplateLoading;
-
- if (isLoading) {
- return <Spinner size={20} />;
- }
  return (
  <PdfTemplateContext.Provider value={value}>
  {children}

packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx

@@ -8,6 +8,7 @@ import {
 import {
  transformToEditRequest,
  transformToNewRequest,
+ useBrandingState,
  useBrandingTemplateFormInitialValues,
 } from './_utils';
 import { AppToaster } from '@/components';
@@ -17,31 +18,42 @@ import {
  useEditPdfTemplate,
 } from '@/hooks/query/pdf-templates';
 import { FormikHelpers } from 'formik';
-import { BrandingTemplateValues } from './types';
+import { BrandingTemplateValues, BrandingState } from './types';
 import { useUploadAttachments } from '@/hooks/query/attachments';
 import { excludePrivateProps } from '@/utils';
 
-interface BrandingTemplateFormProps<T> extends ElementCustomizeProps<T> {
+interface BrandingTemplateFormProps<
+ T extends BrandingTemplateValues,
+ Y extends BrandingState
+> extends ElementCustomizeProps<T, Y> {
  resource: string;
  templateId?: number;
  onSuccess?: () => void;
  onError?: () => void;
+
+ /* The default values hold the initial values of the form and the values being sent to the server. */
  defaultValues?: T;
 }
 
-export function BrandingTemplateForm<T extends BrandingTemplateValues>({
+export function BrandingTemplateForm<
+ T extends BrandingTemplateValues,
+ Y extends BrandingState,
+>({
  templateId,
  onSuccess,
  onError,
  defaultValues,
  resource,
  ...props
-}: BrandingTemplateFormProps<T>) {
+}: BrandingTemplateFormProps<T, Y>) {
+ // Create/edit pdf template mutators.
  const { mutateAsync: createPdfTemplate } = useCreatePdfTemplate();
  const { mutateAsync: editPdfTemplate } = useEditPdfTemplate();
 
  const initialValues = useBrandingTemplateFormInitialValues<T>(defaultValues);
- const [isUploading, setIsLoading] = useState<boolean>(false);
+ const brandingState = useBrandingState();
+
+ const [, setIsLoading] = useState<boolean>(false);
 
  // Uploads the attachments.
  const { mutateAsync: uploadAttachments } = useUploadAttachments({
@@ -122,10 +134,11 @@ export function BrandingTemplateForm<T extends BrandingTemplateValues>({
  };
 
  return (
- <ElementCustomize<T>
+ <ElementCustomize<T, Y>
  initialValues={initialValues}
  validationSchema={validationSchema}
  onSubmit={handleFormSubmit}
+ brandingState={brandingState || {}}
  {...props}
  />
  );

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

@@ -6,7 +6,7 @@ import {
 } from '@/hooks/query/pdf-templates';
 import { useBrandingTemplateBoot } from './BrandingTemplateBoot';
 import { transformToForm } from '@/utils';
-import { BrandingTemplateValues } from './types';
+import { BrandingState, BrandingTemplateValues } from './types';
 import { DRAWERS } from '@/constants/drawers';
 
 const commonExcludedAttrs = ['templateName', 'companyLogoUri'];
@@ -44,11 +44,10 @@ export const useBrandingTemplateFormInitialValues = <
 >(
  initialValues = {},
 ) => {
- const { pdfTemplate, brandingTemplateState } = useBrandingTemplateBoot();
+ const { pdfTemplate } = useBrandingTemplateBoot();
 
  const brandingAttributes = {
  templateName: pdfTemplate?.templateName,
- ...brandingTemplateState,
  ...pdfTemplate?.attributes,
  };
  return {
@@ -57,6 +56,15 @@ export const useBrandingTemplateFormInitialValues = <
  };
 };
 
+export const useBrandingState = (state?: Partial<BrandingState>): BrandingState => {
+ const { brandingTemplateState } = useBrandingTemplateBoot();
+
+ return {
+ ...brandingTemplateState,
+ ...state
+ }
+}
+
 export const getCustomizeDrawerNameFromResource = (resource: string) => {
  const pairs = {
  SaleInvoice: DRAWERS.INVOICE_CUSTOMIZE,

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

@@ -6,4 +6,18 @@ export interface BrandingTemplateValues {
  // Company logo
  companyLogoKey?: string;
  companyLogoUri?: string;
+}
+
+export interface BrandingState extends ElementPreviewState {
+ companyName: string;
+ companyAddress: string;
+
+ companyLogoKey: string;
+ companyLogoUri: string;
+
+ primaryColor: string;
+}
+
+export interface ElementPreviewState {
+
 }

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

@@ -9,17 +9,21 @@ import { ElementCustomizeTabsControllerProvider } from './ElementCustomizeTabsCo
 import { ElementCustomizeFields } from './ElementCustomizeFields';
 import { ElementCustomizePreview } from './ElementCustomizePreview';
 import { extractChildren } from '@/utils/extract-children';
+import { ElementPreviewState } from '../BrandingTemplates/types';
 
-export interface ElementCustomizeProps<T> extends ElementCustomizeFormProps<T> {
+export interface ElementCustomizeProps<T, Y>
+ extends ElementCustomizeFormProps<T, Y> {
+ brandingState?: Y;
  children?: React.ReactNode;
 }
 
-export function ElementCustomize<T>({
+export function ElementCustomize<T, Y extends ElementPreviewState>({
  initialValues,
  validationSchema,
+ brandingState,
  onSubmit,
  children,
-}: ElementCustomizeProps<T>) {
+}: ElementCustomizeProps<T, Y>) {
  const PaperTemplate = React.useMemo(
  () => extractChildren(children, ElementCustomize.PaperTemplate),
  [children],
@@ -29,7 +33,7 @@ export function ElementCustomize<T>({
  [children],
  );
 
- const value = { PaperTemplate, CustomizeTabs };
+ const value = { PaperTemplate, CustomizeTabs, brandingState };
 
  return (
  <ElementCustomizeForm

packages/webapp/src/containers/ElementCustomize/ElementCustomizeProvider.tsx

@@ -1,18 +1,22 @@
 import React, { createContext, useContext } from 'react';
+import { ElementPreviewState } from '../BrandingTemplates/types';
 
 interface ElementCustomizeValue {
  PaperTemplate?: React.ReactNode;
  CustomizeTabs: React.ReactNode;
+ brandingState?: ElementPreviewState;
 }
 
 const ElementCustomizeContext = createContext<ElementCustomizeValue>(
  {} as ElementCustomizeValue,
 );
 
-export const ElementCustomizeProvider: React.FC<{
+interface ElementCustomizeProviderProps {
  value: ElementCustomizeValue;
  children: React.ReactNode;
-}> = ({ value, children }) => {
+}
+
+export const ElementCustomizeProvider = ({ value, children }: ElementCustomizeProviderProps) => {
  return (
  <ElementCustomizeContext.Provider value={{ ...value }}>
  {children}
@@ -29,4 +33,4 @@ export const useElementCustomizeContext = (): ElementCustomizeValue => {
  );
  }
  return context;
-};
+};

packages/webapp/src/containers/ElementCustomize/ElementCustomizerForm.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { Formik, Form, FormikHelpers } from 'formik';
 
-export interface ElementCustomizeFormProps<T> {
+export interface ElementCustomizeFormProps<T, Y> {
  initialValues?: T;
  validationSchema?: any;
  onSubmit?: (values: T, formikHelpers: FormikHelpers<T>) => void;

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

@@ -2,12 +2,13 @@ import { useFormikContext } from 'formik';
 import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
 import { CreditNoteCustomizeGeneralField } from './CreditNoteCustomizeGeneralFields';
 import { CreditNoteCustomizeContentFields } from './CreditNoteCutomizeContentFields';
-import { CreditNotePaperTemplate } from './CreditNotePaperTemplate';
-import { CreditNoteCustomizeValues } from './types';
+import { CreditNotePaperTemplate, CreditNotePaperTemplateProps } from './CreditNotePaperTemplate';
+import { CreditNoteBrandingState, CreditNoteCustomizeValues } from './types';
 import { initialValues } from './constants';
 import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm';
 import { useDrawerActions } from '@/hooks/state';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider';
 
 export function CreditNoteCustomizeContent() {
  const { payload, name } = useDrawerContext();
@@ -20,7 +21,7 @@ export function CreditNoteCustomizeContent() {
  };
 
  return (
- <BrandingTemplateForm<CreditNoteCustomizeValues>
+ <BrandingTemplateForm<CreditNoteCustomizeValues, CreditNoteBrandingState>
  resource={'CreditNote'}
  templateId={templateId}
  defaultValues={initialValues}
@@ -43,6 +44,9 @@ export function CreditNoteCustomizeContent() {
 
 function CreditNotePaperTemplateFormConnected() {
  const { values } = useFormikContext<CreditNoteCustomizeValues>();
+ const { brandingState } = useElementCustomizeContext();
 
- return <CreditNotePaperTemplate {...values} />;
+ const mergedProps: CreditNotePaperTemplateProps = { ...brandingState, ...values };
+
+ return <CreditNotePaperTemplate {...mergedProps} />;
 }

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

@@ -13,7 +13,6 @@ export const initialValues = {
  // Address
  showCustomerAddress: true,
  showCompanyAddress: true,
- companyAddress: '',
  billedToLabel: 'Billed To',
 
  // Entries

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

@@ -1,4 +1,6 @@
-import { BrandingTemplateValues } from '@/containers/BrandingTemplates/types';
+import { BrandingState, BrandingTemplateValues } from '@/containers/BrandingTemplates/types';
+
+export interface CreditNoteBrandingState extends BrandingState {}
 
 export interface CreditNoteCustomizeValues extends BrandingTemplateValues {
  // Colors

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

@@ -2,12 +2,13 @@ import { useFormikContext } from 'formik';
 import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
 import { EstimateCustomizeGeneralField } from './EstimateCustomizeFieldsGeneral';
 import { EstimateCustomizeContentFields } from './EstimateCustomizeFieldsContent';
-import { EstimatePaperTemplate } from './EstimatePaperTemplate';
-import { EstimateCustomizeValues } from './types';
+import { EstimatePaperTemplate, EstimatePaperTemplateProps } from './EstimatePaperTemplate';
+import { EstimateBrandingState, EstimateCustomizeValues } from './types';
 import { initialValues } from './constants';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
 import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm';
+import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider';
 
 export function EstimateCustomizeContent() {
  const { payload, name } = useDrawerContext();
@@ -19,7 +20,7 @@ export function EstimateCustomizeContent() {
  };
 
  return (
- <BrandingTemplateForm<EstimateCustomizeValues>
+ <BrandingTemplateForm<EstimateCustomizeValues, EstimateBrandingState>
  templateId={templateId}
  defaultValues={initialValues}
  onSuccess={handleSuccess}
@@ -40,8 +41,15 @@ export function EstimateCustomizeContent() {
  );
 }
 
+/**
+ * Injects the `EstimatePaperTemplate` component props from the form and branding states.
+ * @returns {JSX.Element}
+ */
 function EstimatePaperTemplateFormConnected() {
  const { values } = useFormikContext<EstimateCustomizeValues>();
+ const { brandingState } = useElementCustomizeContext()
 
- return <EstimatePaperTemplate {...values} />;
+ const mergedProps: EstimatePaperTemplateProps = { ...values, ...brandingState }
+
+ return <EstimatePaperTemplate {...mergedProps} />;
 }

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts

@@ -20,15 +20,11 @@ export const initialValues = {
  showExpirationDate: true,
  expirationDateLabel: 'Expiration Date',
 
- // Company name
- companyName: 'Bigcapital Technology, Inc.',
-
  // Customer address
  showCustomerAddress: true,
 
  // Company address
  showCompanyAddress: true,
- companyAddress: '',
  billedToLabel: 'Billed To',
 
  // Entries

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts

@@ -1,4 +1,6 @@
-import { BrandingTemplateValues } from '@/containers/BrandingTemplates/types';
+import { BrandingState, BrandingTemplateValues } from '@/containers/BrandingTemplates/types';
+
+export interface EstimateBrandingState extends BrandingState {}
 
 export interface EstimateCustomizeValues extends BrandingTemplateValues {
  // Colors
@@ -20,9 +22,6 @@ export interface EstimateCustomizeValues extends BrandingTemplateValues {
  estimateDateLabel?: string;
  showEstimateDate?: boolean;
 
- // Company name
- companyName?: string;
-
  // Addresses
  showBilledFromAddress?: boolean;
  showBillingToAddress?: boolean;