Feature: Add Payment Gateways block and make section act normal

src/Framework/FieldsAPI/PaymentGateways.php

@@ -0,0 +1,10 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Give\Framework\FieldsAPI;
+
+class PaymentGateways extends Field
+{
+    const TYPE = 'gateways';
+}

src/NextGen/DonationForm/Blocks/DonationFormBlock/Block.php

@@ -12,6 +12,7 @@
 use Give\Framework\FieldsAPI\Form;
 use Give\Framework\FieldsAPI\Hidden;
 use Give\Framework\FieldsAPI\Name;
+use Give\Framework\FieldsAPI\PaymentGateways;
 use Give\Framework\FieldsAPI\Radio;
 use Give\Framework\FieldsAPI\Section;
 use Give\Framework\FieldsAPI\Select;
@@ -108,11 +109,6 @@ public function render(array $attributes)
      */
     private function createForm(int $formId): Form
     {
-        $gatewayOptions = [];
-        foreach ($this->getEnabledPaymentGateways($formId) as $gateway) {
-            $gatewayOptions[] = Radio::make($gateway->getId())->label($gateway->getPaymentMethodLabel());
-        }
-
         $donationForm = new Form($formId);
 
         $formBlockData = json_decode(get_post($formId)->post_content, false);
@@ -124,8 +120,6 @@ private function createForm(int $formId): Form
         /** @var Section $paymentDetails */
         $paymentDetails = $donationForm->getNodeByName('payment-details');
 
-        $paymentDetails->append(...$gatewayOptions);
-
         $paymentDetails->append(
             Hidden::make('formId')
                 ->defaultValue($formId),
@@ -204,6 +198,8 @@ protected function convertBlockToNode(stdClass $block): Node
             });
         } elseif ($block->name === "custom-block-editor/email-field") {
             $node = Email::make('email')->emailTag('email');
+        } elseif ($block->name === "custom-block-editor/payment-gateways") {
+            $node = PaymentGateways::make('gatewayId');
         } elseif ($block->name === "custom-block-editor/donation-summary") {
             $node = DonationSummary::make('donation-summary');
         } elseif ($block->name === "custom-block-editor/company-field") {

src/NextGen/DonationForm/Blocks/DonationFormBlock/app/fields/SectionNode.tsx

@@ -1,22 +1,21 @@
 import {isElement, isField, isGroup, Node} from '@givewp/forms/types';
-import FieldNode from "./FieldNode";
-import ElementNode from "./ElementNode";
-import GroupNode from "./GroupNode";
+import FieldNode from './FieldNode';
+import ElementNode from './ElementNode';
+import GroupNode from './GroupNode';
 
 /**
  * Determine which node template to render
  *
  * @unreleased
  */
-export default function SectionNode({node}: { node: Node }) {
+export default function SectionNode({node}: {node: Node}) {
     if (isField(node)) {
-        return <FieldNode node={node}/>
+        return <FieldNode node={node} />;
     } else if (isElement(node)) {
-        return <ElementNode node={node}/>
+        return <ElementNode node={node} />;
     } else if (isGroup(node)) {
-        return <GroupNode node={node}/>
+        return <GroupNode node={node} />;
     } else {
         return null;
     }
 }
-

src/NextGen/DonationForm/Blocks/DonationFormBlock/app/form/Form.tsx

@@ -9,9 +9,8 @@ import {useGiveDonationFormStore} from '../store';
 import type {Gateway, Section} from '@givewp/forms/types';
 import postData from '../utilities/postData';
 import {getFormTemplate, getSectionTemplate} from '../templates';
-import {useCallback} from "react";
-import PaymentDetails from "../fields/PaymentDetails";
-import SectionNode from "../fields/SectionNode";
+import {useCallback} from 'react';
+import SectionNode from '../fields/SectionNode';
 
 window.givewp.form = {
     useFormContext,
@@ -33,7 +32,7 @@ const schema = Joi.object({
     gatewayId: Joi.string().required().label('Payment Gateway').messages(messages),
     formId: Joi.number().required(),
     currency: Joi.string().required(),
-    company: Joi.string().optional().allow(null, '')
+    company: Joi.string().optional().allow(null, ''),
 }).unknown();
 
 const handleSubmitRequest = async (values, setError, gateway: Gateway) => {
@@ -75,12 +74,7 @@ export default function Form({defaultValues, sections}: PropTypes) {
         resolver: joiResolver(schema),
     });
 
-    const {
-        handleSubmit,
-        setError,
-        getValues,
-        control
-    } = methods;
+    const {handleSubmit, setError, getValues, control} = methods;
 
     const {errors, isSubmitting, isSubmitSuccessful} = useFormState({control});
 
@@ -117,13 +111,11 @@ export default function Form({defaultValues, sections}: PropTypes) {
             >
                 <>
                     {sections.map((section) => {
-                        if (section.name === 'payment-details') {
-                            return <PaymentDetails gateways={gateways} key={section.name} {...section} />;
-                        }
-
                         return (
                             <FormSectionTemplate key={section.name} section={section}>
-                                {section.nodes.map((node) => <SectionNode key={node.name} node={node}/>)}
+                                {section.nodes.map((node) => (
+                                    <SectionNode key={node.name} node={node} />
+                                ))}
                             </FormSectionTemplate>
                         );
                     })}

src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/elements/DonationSummary.tsx

@@ -1,5 +1,5 @@
-import {useMemo} from "react";
-import {__} from "@wordpress/i18n";
+import {useMemo} from 'react';
+import {__} from '@wordpress/i18n';
 
 export default function DonationSummary() {
     const {useWatch} = window.givewp.form;
@@ -12,23 +12,25 @@ export default function DonationSummary() {
                 currency: currency,
             }),
         [currency, navigator.language]
-    )
+    );
 
     return (
-        <ul className="givewp-elements-donationSummary__list">
-            <LineItem label={__('Payment Amount', 'give')} value={formatter.format(Number(amount))}/>
-            <LineItem label={__('Giving Frequency', 'give')} value={__('One time', 'give')}/>
-            <LineItem label={__('Donation Total', 'give')} value={formatter.format(Number(amount))}/>
-        </ul>
+        <>
+            <strong>Donation Summary</strong>
+            <ul className="givewp-elements-donationSummary__list">
+                <LineItem label={__('Payment Amount', 'give')} value={formatter.format(Number(amount))} />
+                <LineItem label={__('Giving Frequency', 'give')} value={__('One time', 'give')} />
+                <LineItem label={__('Donation Total', 'give')} value={formatter.format(Number(amount))} />
+            </ul>
+        </>
     );
-
 }
 
-const LineItem = ({label, value}: { label: string, value: string }) => {
+const LineItem = ({label, value}: {label: string; value: string}) => {
     return (
         <li className="givewp-elements-donationSummary__list-item">
             <div>{label}</div>
             <div>{value}</div>
         </li>
-    )
-}
+    );
+};

src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Amount.tsx

@@ -33,7 +33,11 @@ export default function Amount({name, label, inputProps, levels, allowCustomAmou
                 {label}
                 <input type={allowCustomAmount ? 'text' : 'hidden'} {...inputProps} />
             </label>
-            {fieldError && <p>{fieldError}</p>}
+            {fieldError && (
+                <div className="error-message">
+                    <p role="alert">{fieldError}</p>
+                </div>
+            )}
         </div>
     );
 }

src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Email.tsx

@@ -4,11 +4,13 @@ export default function Email({label, fieldError, inputProps}: FieldProps) {
     return (
         <label>
             <span>{label}</span>
-            <input type="email" aria-invalid={fieldError ? "true" : "false"} {...inputProps} />
+            <input type="email" aria-invalid={fieldError ? 'true' : 'false'} {...inputProps} />
 
-            <div className="error-message">
-                {fieldError && <p role="alert">{fieldError}</p>}
-            </div>
+            {fieldError && (
+                <div className="error-message">
+                    <p role="alert">{fieldError}</p>
+                </div>
+            )}
         </label>
     );
 }

src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Gateways.tsx

@@ -0,0 +1,46 @@
+import {UseFormRegisterReturn, useFormState} from 'react-hook-form';
+import {ErrorMessage} from '@hookform/error-message';
+import {useGiveDonationFormStore} from '../../store';
+import {FieldProps} from '@givewp/forms/propTypes';
+import {Gateway} from '@givewp/forms/types';
+
+export default function Gateways({inputProps}: FieldProps) {
+    const {errors} = useFormState();
+    const {gateways} = useGiveDonationFormStore();
+
+    return (
+        <>
+            <ul style={{listStyleType: 'none', padding: 0}}>
+                {gateways.map((gateway, index) => (
+                    <GatewayOption gateway={gateway} index={index} key={gateway.id} inputProps={inputProps} />
+                ))}
+            </ul>
+
+            <ErrorMessage
+                errors={errors}
+                name={'gatewayId'}
+                render={({message}) => <span className="give-next-gen__error-message">{message}</span>}
+            />
+        </>
+    );
+}
+
+type GatewayOptionProps = {
+    inputProps: UseFormRegisterReturn;
+    gateway: Gateway;
+    index: number;
+};
+
+function GatewayOption({gateway, index, inputProps}: GatewayOptionProps) {
+    const Fields = gateway.Fields;
+
+    return (
+        <li>
+            <input type="radio" value={gateway.id} id={gateway.id} defaultChecked={index === 0} {...inputProps} />
+            <label htmlFor={gateway.id}> Donate with {gateway.settings.label}</label>
+            <div className="givewp-fields-payment-gateway">
+                <Fields />
+            </div>
+        </li>
+    );
+}

src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Text.tsx

@@ -4,11 +4,13 @@ export default function Text({label, fieldError, inputProps}: FieldProps) {
     return (
         <label>
             <span>{label}</span>
-            <input type="text" aria-invalid={fieldError ? "true" : "false"} {...inputProps} />
+            <input type="text" aria-invalid={fieldError ? 'true' : 'false'} {...inputProps} />
 
-            <div className="error-message">
-                {fieldError && <p role="alert">{fieldError}</p>}
-            </div>
+            {fieldError && (
+                <div className="error-message">
+                    <p role="alert">{fieldError}</p>
+                </div>
+            )}
         </label>
     );
 }

src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/TextArea.tsx

@@ -5,7 +5,11 @@ export default function TextArea({label, fieldError, inputProps}: FieldProps) {
         <label>
             {label}
             <textarea {...inputProps} />
-            {fieldError && <p>{fieldError}</p>}
+            {fieldError && (
+                <div className="error-message">
+                    <p role="alert">{fieldError}</p>
+                </div>
+            )}
         </label>
     );
 }