feat: Payment invoice preview drawer

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

@@ -73,13 +73,13 @@ export interface InvoicePaperTemplateProps {
   balanceDue?: string;
 
   // Footer
-  termsConditionsLabel: string;
-  showTermsConditions: boolean;
-  termsConditions: string;
+  termsConditionsLabel?: string;
+  showTermsConditions?: boolean;
+  termsConditions?: string;
 
-  statementLabel: string;
-  showStatement: boolean;
-  statement: string;
+  statementLabel?: string;
+  showStatement?: boolean;
+  statement?: string;
 
   lines?: Array<PapaerLine>;
   taxes?: Array<PaperTax>;

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.tsx

@@ -20,6 +20,7 @@ import {
 import { useProjects } from '@/containers/Projects/hooks';
 import { useTaxRates } from '@/hooks/query/taxRates';
 import { useGetPdfTemplates } from '@/hooks/query/pdf-templates';
+import { useGetPaymentServices } from '@/hooks/query/payment-services';
 
 const InvoiceFormContext = createContext();
 
@@ -60,6 +61,10 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
   const { data: brandingTemplates, isLoading: isBrandingTemplatesLoading } =
     useGetPdfTemplates({ resource: 'SaleInvoice' });
 
+  // Fetches the payment services.
+  const { data: paymentServices, isLoading: isPaymentServicesLoading } =
+    useGetPaymentServices();
+
   const newInvoice = !isEmpty(estimate)
     ? transformToEditForm({
         ...pick(estimate, ['customer_id', 'currency_code', 'entries']),
@@ -110,7 +115,10 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
 
   // Determines whether the warehouse and branches are loading.
   const isFeatureLoading =
-    isWarehouesLoading || isBranchesLoading || isProjectsLoading || isBrandingTemplatesLoading;
+    isWarehouesLoading ||
+    isBranchesLoading ||
+    isProjectsLoading ||
+    isBrandingTemplatesLoading;
 
   const provider = {
     invoice,