feat: rendering pdf templates on the server-side

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx

@@ -12,10 +12,15 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-import { Group, Icon, FormattedMessage as T } from '@/components';
+import { FSelect, Group, Icon, FormattedMessage as T } from '@/components';
 import { useFormikContext } from 'formik';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import { CLASSES } from '@/constants/classes';
+import {
+  BrandingThemeFormGroup,
+  BrandingThemeSelectButton,
+} from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
+import { usePaymentReceivedFormBrandingTemplatesOptions } from './utils';
 
 /**
  * Payment receive floating actions bar.
@@ -53,6 +58,9 @@ export default function PaymentReceiveFormFloatingActions() {
     submitForm();
   };
 
+  const brandingTemplatesOpts =
+    usePaymentReceivedFormBrandingTemplatesOptions();
+
   return (
     <Group
       spacing={10}
@@ -109,6 +117,25 @@ export default function PaymentReceiveFormFloatingActions() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
+
+      {/* ----------- Branding Template Select ----------- */}
+      <BrandingThemeFormGroup
+        name={'pdf_template_id'}
+        label={'Branding'}
+        inline
+        fastField
+        style={{ marginLeft: 20 }}
+      >
+        <FSelect
+          name={'pdf_template_id'}
+          items={brandingTemplatesOpts}
+          input={({ activeItem, text, label, value }) => (
+            <BrandingThemeSelectButton text={text || 'Brand Theme'} minimal />
+          )}
+          filterable={false}
+          popoverProps={{ minimal: true }}
+        />
+      </BrandingThemeFormGroup>
     </Group>
   );
 }

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormProvider.tsx

@@ -13,6 +13,7 @@ import {
   useCreatePaymentReceive,
   useEditPaymentReceive,
 } from '@/hooks/query';
+import { useGetPdfTemplates } from '@/hooks/query/pdf-templates';
 
 // Payment receive form context.
 const PaymentReceiveFormContext = createContext();
@@ -65,6 +66,10 @@ function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) {
     isLoading: isProjectsLoading,
   } = useProjects({}, { enabled: !!isProjectsFeatureCan });
 
+  // Fetches branding templates of payment received module.
+  const { data: brandingTemplates, isLoading: isBrandingTemplatesLoading } =
+    useGetPdfTemplates({ resource: 'PaymentReceive' });
+
   // Detarmines whether the new mode.
   const isNewMode = !paymentReceiveId;
 
@@ -102,13 +107,20 @@ function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) {
 
     isExcessConfirmed,
     setIsExcessConfirmed,
+
+    // Branding templates
+    brandingTemplates,
+    isBrandingTemplatesLoading,
   };
 
+  const isLoading =
+    isPaymentLoading ||
+    isAccountsLoading ||
+    isCustomersLoading ||
+    isBrandingTemplatesLoading;
+
   return (
-    <DashboardInsider
-      loading={isPaymentLoading || isAccountsLoading || isCustomersLoading}
-      name={'payment-receive-form'}
-    >
+    <DashboardInsider loading={isLoading} name={'payment-receive-form'}>
       <PaymentReceiveFormContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/utils.tsx

@@ -19,6 +19,7 @@ import {
   transformAttachmentsToForm,
   transformAttachmentsToRequest,
 } from '@/containers/Attachments/utils';
+import { convertBrandingTemplatesToOptions } from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
 
 // Default payment receive entry.
 export const defaultPaymentReceiveEntry = {
@@ -44,10 +45,11 @@ export const defaultPaymentReceive = {
   statement: '',
   amount: '',
   currency_code: '',
-  branch_id: '',
   exchange_rate: 1,
   entries: [],
   attachments: [],
+  branch_id: '',
+  pdf_template_id: '',
 };
 
 export const defaultRequestPaymentEntry = {
@@ -303,3 +305,12 @@ export const getExceededAmountFromValues = (values) => {
 
   return totalAmount - totalApplied;
 };
+
+export const usePaymentReceivedFormBrandingTemplatesOptions = () => {
+  const { brandingTemplates } = usePaymentReceiveFormContext();
+
+  return React.useMemo(
+    () => convertBrandingTemplatesToOptions(brandingTemplates),
+    [brandingTemplates],
+  );
+};