feat: Control the payment method from invoice form

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

@@ -2,23 +2,25 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
-import { FFormGroup, FEditableText, FormattedMessage as T } from '@/components';
-import { useDialogActions } from '@/hooks/state';
-import { DialogsName } from '@/constants/dialogs';
+import { Button, Intent } from '@blueprintjs/core';
+import {
+  FFormGroup,
+  FEditableText,
+  FormattedMessage as T,
+  Box,
+  Group,
+  Stack,
+} from '@/components';
+import { VisaIcon } from '@/icons/Visa';
+import { MastercardIcon } from '@/icons/Mastercard';
+import { useInvoiceFormContext } from './InvoiceFormProvider';
+import { PaymentOptionsButtonPopver } from '@/containers/PaymentMethods/SelectPaymentMethodPopover';
 
 export function InvoiceFormFooterLeft() {
-  const { openDialog } = useDialogActions();
-
-  const handleSelectPaymentMethodsClick = () => {
-    openDialog(DialogsName.SelectPaymentMethod, {});
-  }
+  const { paymentServices } = useInvoiceFormContext();
 
   return (
-    <React.Fragment>
-      <FFormGroup label={'Payment Options'} name={'payment_method_id'}>
-        <a href={'#'} onClick={handleSelectPaymentMethodsClick}>Payment Options</a>
-      </FFormGroup>
-
+    <Stack spacing={20}>
       {/* --------- Invoice message --------- */}
       <InvoiceMsgFormGroup
         name={'invoice_message'}
@@ -46,14 +48,31 @@ export function InvoiceFormFooterLeft() {
           fastField
         />
       </TermsConditsFormGroup>
-    </React.Fragment>
+
+      {/* --------- Payment Options --------- */}
+      <PaymentOptionsFormGroup
+        label={'Payment Options'}
+        name={'payment_method_id'}
+      >
+        <PaymentOptionsText>
+          Select an online payment option to get paid faster{' '}
+          <Group spacing={6} style={{ marginLeft: 8 }}>
+            <VisaIcon />
+            <MastercardIcon />
+          </Group>
+          <PaymentOptionsButtonPopver paymentMethods={paymentServices}>
+            <PaymentOptionsButton intent={Intent.PRIMARY} small minimal>
+              Payment Options
+            </PaymentOptionsButton>
+          </PaymentOptionsButtonPopver>
+        </PaymentOptionsText>
+      </PaymentOptionsFormGroup>
+    </Stack>
   );
 }
 
 const InvoiceMsgFormGroup = styled(FFormGroup)`
   &.bp4-form-group {
-    margin-bottom: 40px;
-
     .bp4-label {
       font-size: 12px;
       margin-bottom: 12px;
@@ -75,3 +94,29 @@ const TermsConditsFormGroup = styled(FFormGroup)`
     }
   }
 `;
+
+const PaymentOptionsFormGroup = styled(FFormGroup)`
+  &.bp4-form-group {
+    .bp4-label {
+      font-weight: 500;
+      font-size: 12px;
+      margin-bottom: 10px;
+    }
+  }
+`;
+
+const PaymentOptionsText = styled(Box)`
+  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  color: #5f6b7c;
+`;
+
+const PaymentOptionsButton = styled(Button)`
+  font-size: 13px;
+  margin-left: 4px;
+
+  &.bp4-minimal.bp4-intent-primary {
+    color: #0052cc;
+  }
+`;

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

@@ -150,6 +150,10 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
     editInvoiceMutate,
     setSubmitPayload,
     isNewMode,
+
+    // Payment Services
+    paymentServices,
+    isPaymentServicesLoading,
   };
 
   return (

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

@@ -69,6 +69,7 @@ export const defaultInvoice = {
   pdf_template_id: '',
   entries: [...repeatValue(defaultInvoiceEntry, MIN_LINES_NUMBER)],
   attachments: [],
+  payment_methods: {},
 };
 
 // Invoice entry request schema.
@@ -223,9 +224,19 @@ export function transformValueToRequest(values) {
     entries: transformEntriesToRequest(values.entries),
     delivered: false,
     attachments: transformAttachmentsToRequest(values),
+    payment_methods: transformPaymentMethodsToRequest(values?.payment_methods),
   };
 }
 
+const transformPaymentMethodsToRequest = (
+  paymentMethods: Record<string, { enable: boolean }>,
+): Array<{ payment_integration_id: string; enable: boolean }> => {
+  return Object.entries(paymentMethods).map(([paymentMethodId, method]) => ({
+    payment_integration_id: paymentMethodId,
+    enable: method.enable,
+  }));
+};
+
 export const useSetPrimaryWarehouseToForm = () => {
   const { setFieldValue } = useFormikContext();
   const { warehouses, isWarehousesSuccess } = useInvoiceFormContext();