feat(payment): PAYMENTS-11577 Render fields coming from provider initialzation data - usage of purchase order

Author: bc-alfreid

dist/checkout-12d3dbb6.css

@@ -1,9 +1,10 @@
 import { createCheckoutService, createLanguageService } from '@bigcommerce/checkout-sdk';
 import { createOfflinePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/offline';
+import { Formik } from 'formik';
 import React from 'react';
 
 import { type PaymentMethodProps } from '@bigcommerce/checkout/payment-integration-api';
-import { render } from '@bigcommerce/checkout/test-utils';
+import { fireEvent, render, screen } from '@bigcommerce/checkout/test-utils';
 
 import OfflinePaymentMethod from './OfflinePaymentMethod';
 import { getMethod } from './payment-method.mock';
@@ -72,4 +73,102 @@ describe('OfflinePaymentMethod', () => {
 
         await expect(checkoutService.deinitializePayment).rejects.toThrow('test error');
     });
+
+    describe('formFieldsData', () => {
+        const formFieldsData = [
+            { name: 'Purchase Order', id: 'purchaseOrderNumber', required: true, type: 'number', fieldType: 'text' },
+            { name: 'Reference', id: 'referenceText', required: false, type: 'text', fieldType: 'text' },
+        ];
+
+        const renderWithFormik = (props: PaymentMethodProps) =>
+            render(
+                <Formik initialValues={{}} onSubmit={jest.fn()}>
+                    <OfflinePaymentMethod {...props} />
+                </Formik>,
+            );
+
+        it('returns null when formFieldsData is not present', () => {
+            const { container } = render(<OfflinePaymentMethod {...defaultProps} />);
+
+            expect(container).toBeEmptyDOMElement();
+        });
+
+        it('returns null when formFieldsData is an empty array', () => {
+            const props = {
+                ...defaultProps,
+                method: { ...defaultProps.method, initializationData: { formFieldsData: [] } },
+            };
+
+            const { container } = render(<OfflinePaymentMethod {...props} />);
+
+            expect(container).toBeEmptyDOMElement();
+        });
+
+        it('renders a field for each entry in formFieldsData', () => {
+            const props = {
+                ...defaultProps,
+                method: { ...defaultProps.method, initializationData: { formFieldsData } },
+            };
+
+            renderWithFormik(props);
+
+            expect(screen.getByLabelText('Purchase Order')).toBeInTheDocument();
+            expect(screen.getByLabelText('Reference')).toBeInTheDocument();
+        });
+
+        it('strips non-digit characters from a number field on change', () => {
+            const props = {
+                ...defaultProps,
+                method: { ...defaultProps.method, initializationData: { formFieldsData } },
+            };
+
+            renderWithFormik(props);
+
+            const input = screen.getByLabelText('Purchase Order');
+
+            fireEvent.change(input, { target: { value: '123abc' } });
+
+            expect((input as HTMLInputElement).value).toBe('123');
+        });
+
+        it('shows a validation error for a required field left empty', async () => {
+            const props = {
+                ...defaultProps,
+                method: { ...defaultProps.method, initializationData: { formFieldsData } },
+            };
+
+            renderWithFormik(props);
+
+            const input = screen.getByLabelText('Purchase Order');
+
+            fireEvent.blur(input);
+
+            expect(await screen.findByText('Purchase Order is required')).toBeInTheDocument();
+        });
+
+        it('does not show a validation error for an optional field left empty', async () => {
+            const props = {
+                ...defaultProps,
+                method: { ...defaultProps.method, initializationData: { formFieldsData } },
+            };
+
+            renderWithFormik(props);
+
+            fireEvent.blur(screen.getByLabelText('Reference'));
+
+            expect(screen.queryByText('Reference is required')).not.toBeInTheDocument();
+        });
+
+        // it('uses numeric inputMode for number type fields', () => {
+        //     const props = {
+        //         ...defaultProps,
+        //         method: { ...defaultProps.method, initializationData: { formFieldsData } },
+        //     };
+        //
+        //     renderWithFormik(props);
+        //
+        //     expect(screen.getByLabelText('Purchase Order')).toHaveAttribute('inputmode', 'numeric');
+        //     expect(screen.getByLabelText('Reference')).not.toHaveAttribute('inputmode');
+        // });
+    });
 });

packages/offline-payment-integration/src/OfflinePaymentMethod.test.tsx

@@ -1,10 +1,29 @@
 import { createOfflinePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/offline';
-import { type FunctionComponent, useEffect } from 'react';
+import React, { type FunctionComponent, useEffect } from 'react';
 
 import {
     type PaymentMethodProps,
     toResolvableComponent,
 } from '@bigcommerce/checkout/payment-integration-api';
+import { BasicFormField, TextInput } from '@bigcommerce/checkout/ui';
+
+interface OfflineFormField {
+    name: string;
+    id: string;
+    required: boolean;
+    type: string;
+    fieldType: string;
+}
+
+const validateField = (value: string, field: OfflineFormField): string | undefined => {
+    if (field.required && !value) {
+        return `${field.name} is required`;
+    }
+
+    if (field.type === 'number' && value && (isNaN(Number(value)) || !/^\d+$/.test(value))) {
+        return `${field.name} must be a positive whole number`;
+    }
+};
 
 const OfflinePaymentMethod: FunctionComponent<PaymentMethodProps> = ({
     method,
@@ -46,7 +65,41 @@ const OfflinePaymentMethod: FunctionComponent<PaymentMethodProps> = ({
         };
     }, [checkoutService, method.gateway, method.id, onUnhandledError]);
 
-    return null;
+    const formFields: OfflineFormField[] = method.initializationData?.formFieldsData ?? [];
+
+    if (!formFields.length) {
+        return null;
+    }
+
+    return (
+        <>
+            {formFields.map((field) => (
+                <BasicFormField
+                    key={field.id}
+                    name={field.id}
+                    validate={(value: string) => validateField(value, field)}
+                    render={({ field: fieldProps, meta }) => (
+                        <div style={{ paddingBottom: '1rem' }}>
+                            <label htmlFor={field.id}>{field.name}</label>
+                            <TextInput
+                                {...fieldProps}
+                                id={field.id}
+                                type="text"
+                                inputMode={field.type === 'number' ? 'numeric' : undefined}
+                                onChange={field.type === 'number' ? (e) => {
+                                    e.target.value = e.target.value.replace(/\D/g, '');
+                                    fieldProps.onChange(e);
+                                } : fieldProps.onChange}
+                            />
+                            {meta.touched && meta.error && (
+                                <p className="form-field-error-message">{meta.error}</p>
+                            )}
+                        </div>
+                    )}
+                />
+            ))}
+        </>
+    );
 };
 
 export default toResolvableComponent(OfflinePaymentMethod, [