Feature: classic template (impress-org#40)

* feature: scaffold start of classic template overrides

* refactor: remove additional conditional

* refactor: adjust structure of base form elements including abiliy to override html tags

* refactor: update base form to include submit inside a section

* feature: first pass classic template structure and amount field

* feature: add setFocus to custom amount

* feature: use classNames package for className conditionals

* feature: add support for field level error styling

* refactor: get formState from useFormState hoook

* fix: search for updated node names

* feature: add name prop to NodeWrapper for parent div styling

* feature: improve form styles with updated gateway field styles

* feature: add submit button hover

* refactor: start isolating FormSections into seperate component for resolving nested rerenders and validation focus issue

* feature: add border radius to bottom

* feature: update input labels

* refactor: convert amount field to BEM structure

* refactor: update component to use types

* chore: cleanup unused and add comments

* fix: scss typo

* chore: update type import locations

* refactor: move utility functions into seperate files

* feature: create SectionNode component and wrap template functions in useMemo

* refactor: get rid of unnecessary loopy components and move sections back into form now

* feature: take a step further and seperate node types

* chore: format file, c'mon phpstorm

* chore: y u no format

Co-authored-by: Jon Waldstein <jonwaldstein@jons-air.mynetworksettings.com>

package.json

@@ -2,7 +2,7 @@
     "private": true,
     "scripts": {
         "build": "wp-scripts build && npm run build --workspaces",
-        "dev": "wp-scripts build && npm run build --workspaces",
+        "dev": "wp-scripts build",
         "start": "wp-scripts start",
         "packages-update": "wp-scripts packages-update",
         "plugin-zip": "wp-scripts plugin-zip",
@@ -13,7 +13,7 @@
     ],
     "dependencies": {
         "@hookform/error-message": "^2.0.0",
-        "@hookform/resolvers": "^2.8.8",
+        "@hookform/resolvers": "^2.9.6",
         "@stripe/react-stripe-js": "^1.2.2",
         "@stripe/stripe-js": "^1.12.1",
         "@wordpress/block-editor": "^8.0.17",
@@ -24,11 +24,11 @@
         "@wordpress/i18n": "^3.19.0",
         "@wordpress/server-side-render": "^3.1.3",
         "accounting": "latest",
-        "classnames": "^2.2.6",
+        "classnames": "^2.3.1",
         "iframe-resizer": "^4.2.10",
         "joi": "^17.6.0",
         "prop-types": "^15.7.2",
-        "react-hook-form": "^7.28.1",
+        "react-hook-form": "^7.33.1",
         "swr": "^1.2.0"
     },
     "devDependencies": {

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

@@ -116,7 +116,7 @@ private function createForm(int $formId): Form
         }
 
         /** @var Section $paymentDetails */
-        $paymentDetails = $donationForm->getNodeByName('payment-gateways');
+        $paymentDetails = $donationForm->getNodeByName('payment-details');
 
         $paymentDetails->append(...$gatewayOptions);
 
@@ -182,7 +182,7 @@ protected function convertBlockToNode(stdClass $block): Node
                 ->allowCustomAmount()
                 ->defaultValue(50)
                 ->required();
-        } elseif ($block->name === "custom-block-editor/name-field-group") {
+        } elseif ($block->name === "custom-block-editor/donor-name") {
             $field = Name::make('name');
         } elseif ($block->name === "custom-block-editor/email-field") {
             $field = Email::make('email')->required()->emailTag('email');
@@ -252,7 +252,10 @@ private function enqueueScripts(int $formId, string $formTemplateId)
                 wp_enqueue_script(
                     'givewp-form-template-' . $template->getId(),
                     $template->js(),
-                    ['give-donation-form-registrars-js'],
+                    array_merge(
+                        ['give-donation-form-registrars-js'],
+                        $template->dependencies()
+                    ),
                     false,
                     true
                 );

src/NextGen/DonationForm/Blocks/DonationFormBlock/app/DonationFormBlockApp.tsx

@@ -21,7 +21,7 @@ const initialState = {
 function App() {
     return (
         <GiveDonationFormStoreProvider initialState={initialState}>
-            <Form sections={form.nodes} defaultValues={defaultValues} />
+            <Form defaultValues={defaultValues} sections={form.nodes}/>
         </GiveDonationFormStoreProvider>
     );
 }

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

@@ -0,0 +1,10 @@
+import {Element} from '@givewp/forms/types';
+import {getElementTemplate} from '../templates';
+import {useMemo} from "react";
+
+export default function ElementNode({node}: { node: Element }) {
+    const Element = useMemo(() => getElementTemplate(node.type), [node.type]);
+
+    return <Element key={node.name} {...node} />;
+}
+

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

@@ -0,0 +1,18 @@
+import buildRegisterValidationOptions from "../utilities/buildRegisterValidationOptions";
+import {Field} from '@givewp/forms/types';
+import {getFieldTemplate} from '../templates';
+import getErrorByFieldName from "../utilities/getErrorByFieldName";
+import {useFormContext, useFormState} from "react-hook-form";
+import {useMemo} from "react";
+
+export default function FieldNode({node}: { node: Field }) {
+    const {register} = useFormContext();
+    const {errors} = useFormState();
+    const Field = useMemo(() => getFieldTemplate(node.type), [node.type]);
+    const inputProps = register(node.name, buildRegisterValidationOptions(node.validationRules));
+
+    return <Field key={node.name} inputProps={inputProps}
+                  fieldError={getErrorByFieldName(errors, node.name)}
+                  {...node} />;
+}
+

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

@@ -0,0 +1,24 @@
+import buildRegisterValidationOptions from "../utilities/buildRegisterValidationOptions";
+import {Group} from '@givewp/forms/types';
+import {getGroupTemplate} from '../templates';
+import {useFormContext} from "react-hook-form";
+import {useMemo} from "react";
+import getGroupFields from "../utilities/getGroupFields";
+
+export default function GroupNode({node}: { node: Group }) {
+    const {register} = useFormContext();
+    const Group = useMemo(() => getGroupTemplate(node.type), [node.type]);
+    const fields = node.nodes.reduce(getGroupFields, []);
+
+    const inputProps = fields.reduce((inputProps, field) => {
+        inputProps[field.name] = register(
+            field.name,
+            buildRegisterValidationOptions(field.validationRules)
+        );
+
+        return inputProps;
+    }, {});
+
+    return <Group key={node.name} inputProps={inputProps} {...node} />;
+}
+

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

@@ -13,21 +13,23 @@ export default function PaymentDetails({name, label, gateways}: Props) {
     const {errors} = useFormState();
 
     return (
-        <fieldset aria-labelledby={name}>
-            <div>
-                <h2 id={name}>{label}</h2>
-            </div>
-            <ul style={{listStyleType: 'none', padding: 0}}>
-                {gateways.map((gateway, index) => (
-                    <PaymentGatewayOption gateway={gateway} index={index} key={gateway.id} />
-                ))}
-            </ul>
+        <section className={`givewp-layouts givewp-layouts-section givewp-layouts-section-payment-gateways`}>
+            <fieldset aria-labelledby={name}>
+                <div>
+                    <legend id={name}>{label}</legend>
+                </div>
+                <ul style={{listStyleType: 'none', padding: 0}}>
+                    {gateways.map((gateway, index) => (
+                        <PaymentGatewayOption gateway={gateway} index={index} key={gateway.id}/>
+                    ))}
+                </ul>
 
-            <ErrorMessage
-                errors={errors}
-                name={'gatewayId'}
-                render={({message}) => <span className="give-next-gen__error-message">{message}</span>}
-            />
-        </fieldset>
+                <ErrorMessage
+                    errors={errors}
+                    name={'gatewayId'}
+                    render={({message}) => <span className="give-next-gen__error-message">{message}</span>}
+                />
+            </fieldset>
+        </section>
     );
 }

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

@@ -16,11 +16,12 @@ export default function PaymentGatewayOption({gateway, index}: Props) {
                 {...register('gatewayId', {required: true})}
                 type="radio"
                 value={gateway.id}
+                id={gateway.id}
                 defaultChecked={index === 0}
             />
             <label htmlFor={gateway.id}> Donate with {gateway.settings.label}</label>
-            <div style={{paddingBottom: '20px'}}>
-                <Fields />
+            <div className="givewp-fields-payment-gateway">
+                <Fields/>
             </div>
         </li>
     );

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

@@ -0,0 +1,22 @@
+import {isElement, isField, isGroup, Node} from '@givewp/forms/types';
+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 }) {
+    if (isField(node)) {
+        return <FieldNode node={node}/>
+    } else if (isElement(node)) {
+        return <ElementNode node={node}/>
+    } else if (isGroup(node)) {
+        return <GroupNode node={node}/>
+    } else {
+        return null;
+    }
+}
+