Form Templates now offer basic developer template

packages/form-builder/src/settings/template/index.tsx

@@ -1,15 +1,23 @@
 import {PanelBody, PanelRow, SelectControl} from '@wordpress/components';
 import {__} from '@wordpress/i18n';
 import {setFormSettings, useFormSettings, useFormSettingsDispatch} from '../../stores/form-settings';
+import {FormTemplate} from "@givewp/form-builder/types";
+
+declare global {
+    interface Window {
+        storageData?: {
+            templates: FormTemplate[],
+        }
+    }
+}
 
 const TemplateSettings = () => {
     const {template} = useFormSettings();
     const dispatch = useFormSettingsDispatch();
 
-    const templateOptions = [
-        {value: '', label: __('No Template', 'givewp')},
-        {value: 'classic', label: __('Classic', 'givewp')},
-    ]
+    const templateOptions = Object.values(window?.storageData?.templates).map(({id, name}) => {
+        return { value: id, label: name}
+    })
 
     return (
         <PanelBody>

packages/form-builder/src/types/formTemplate.ts

@@ -0,0 +1,4 @@
+export interface FormTemplate {
+    id: string,
+    name: string,
+}

packages/form-builder/src/types/index.ts

@@ -1,2 +1,3 @@
 export type {Block} from './block';
 export type {FormData} from './formData';
+export type {FormTemplate} from './formTemplate'

src/FormBuilder/ViewModels/FormBuilderViewModel.php

@@ -3,6 +3,8 @@
 namespace Give\FormBuilder\ViewModels;
 
 use Give\FormBuilder\ValueObjects\FormBuilderRestRouteConfig;
+use Give\NextGen\Framework\FormTemplates\FormTemplate;
+use Give\NextGen\Framework\FormTemplates\Registrars\FormTemplateRegistrar;
 
 class FormBuilderViewModel
 {
@@ -18,6 +20,15 @@ public function storageData(int $donationFormId): array
             'blockData' => get_post($donationFormId)->post_content,
             'settings' => get_post_meta($donationFormId, 'formBuilderSettings', true),
             'currency' => give_get_currency(),
+            'templates' => array_map(static function ($templateClass) {
+                /** @var FormTemplate $template */
+                $template = give($templateClass);
+
+                return [
+                    'id' => $template::id(),
+                    'name' => $template::name(),
+                ];
+            }, give(FormTemplateRegistrar::class)->getTemplates()),
         ];
     }
 

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

@@ -1,16 +1,19 @@
-import type {FieldProps} from '@givewp/forms/propTypes';
+import {__} from '@wordpress/i18n';
 import {useMemo} from 'react';
-import {useFormContext, useWatch} from 'react-hook-form';
+import classNames from 'classnames';
+import type {FieldProps} from '@givewp/forms/propTypes';
 
 interface AmountProps extends FieldProps {
-    levels: bigint[];
+    levels: Number[];
     allowCustomAmount: boolean;
 }
 
 export default function Amount({name, label, inputProps, levels, allowCustomAmount, fieldError}: AmountProps) {
-    const {setValue} = useFormContext();
+    const {useFormContext, useWatch} = window.givewp.form;
+    const {setValue, setFocus} = useFormContext();
     const currency = useWatch({name: 'currency'});
-    const formatter: Intl.NumberFormat = useMemo(
+    const amount = useWatch({name: 'amount'});
+    const formatter = useMemo(
         () =>
             new Intl.NumberFormat(navigator.language, {
                 style: 'currency',
@@ -20,24 +23,53 @@ export default function Amount({name, label, inputProps, levels, allowCustomAmou
     );
 
     return (
-        <div>
-            {levels.map((levelAmount) => {
-                const label = formatter.format(levelAmount);
-                return (
-                    <button type="button" onClick={() => setValue(name, levelAmount)} key={label}>
-                        {label}
-                    </button>
-                );
-            })}
-            <label>
-                {label}
-                <input type={allowCustomAmount ? 'text' : 'hidden'} {...inputProps} />
-            </label>
-            {fieldError && (
-                <div className="error-message">
-                    <p role="alert">{fieldError}</p>
+        <>
+            <div className="givewp-fields-amount__amount--container">
+                <label className="givewp-fields-amount__input--label" htmlFor={name} aria-labelledby={name}
+                       style={{display: 'none'}}>
+                    {label ?? __('Donation Amount', 'give')}
+                </label>
+                <div className={classNames("givewp-fields-amount__input--container", {'invalid': fieldError})}>
+                <span
+                    className="givewp-fields-amount__input--currency-symbol">{formatter.formatToParts().find(({type}) => type === 'currency').value}</span>
+                    <input className='givewp-fields-amount__input' type={allowCustomAmount ? 'text' : 'hidden'}
+                           aria-invalid={fieldError ? "true" : "false"}
+                           id={name}
+                           inputMode="numeric" {...inputProps} />
                 </div>
-            )}
-        </div>
+
+                <div className="givewp-fields-amount__error-message error-message">
+                    {fieldError && <p role="alert">{fieldError}</p>}
+                </div>
+            </div>
+            <div className="givewp-fields-amount__levels--container">
+                {levels.map((levelAmount) => {
+                    const label = formatter.format(Number(levelAmount));
+                    const selected = levelAmount === Number(amount);
+                    return (
+                        <button
+                            className={classNames('givewp-fields-amount__level', {'givewp-fields-amount__level--selected': selected})}
+                            type="button"
+                            onClick={() => setValue(name, levelAmount)} key={label}>
+                            {label}
+                        </button>
+                    );
+                })}
+
+                <button
+                    className={classNames(
+                        'givewp-fields-amount__level',
+                        'givewp-fields-amount__level--custom',
+                        {'givewp-fields-amount__level--selected': !levels.includes(Number(amount))}
+                    )}
+                    type="button"
+                    onClick={() => {
+                        setValue(name, null);
+                        setFocus("amount", {shouldSelect: true});
+                    }} key='custom'>
+                    {__('Custom Amount', 'give')}
+                </button>
+            </div>
+        </>
     );
 }

src/NextGen/DonationForm/Controllers/DonationFormViewController.php

@@ -82,12 +82,12 @@ private function enqueueFormScripts(int $formId, string $formTemplateId)
             $template = $formTemplateRegistrar->getTemplate($formTemplateId);
 
             if ($template->css()) {
-                wp_enqueue_style('givewp-form-template-' . $template->getId(), $template->css());
+                wp_enqueue_style('givewp-form-template-' . $template::id(), $template->css());
             }
 
             if ($template->js()) {
                 wp_enqueue_script(
-                    'givewp-form-template-' . $template->getId(),
+                    'givewp-form-template-' . $template::id(),
                     $template->js(),
                     array_merge(
                         ['givewp-donation-form-registrars-js'],

src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/ClassicFormTemplate.php

@@ -31,22 +31,4 @@ public function css(): string
     {
         return GIVE_NEXT_GEN_URL . 'build/classicTemplateCss.css';
     }
-
-    /**
-     * @unreleased
-     */
-    public function js(): string
-    {
-        return GIVE_NEXT_GEN_URL . 'build/classicTemplateJs.js';
-    }
-
-    /**
-     * @unreleased
-     */
-    public function dependencies(): array
-    {
-        $scriptAsset = require GIVE_NEXT_GEN_DIR . 'build/classicTemplateJs.asset.php';
-
-        return $scriptAsset['dependencies'];
-    }
 }

src/NextGen/DonationForm/FormTemplates/DeveloperFormTemplate/DeveloperFormTemplate.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace Give\NextGen\DonationForm\FormTemplates\DeveloperFormTemplate;
+
+use Give\NextGen\Framework\FormTemplates\FormTemplate;
+
+/**
+ * @unreleased
+ */
+class DeveloperFormTemplate extends FormTemplate {
+    /**
+     * @unreleased
+     */
+     public static function id(): string
+    {
+        return 'developer';
+    }
+
+    /**
+     * @unreleased
+     */
+    public static function name(): string
+    {
+        return __('Developer Template', 'give');
+    }
+
+    /**
+     * @unreleased
+     */
+    public function css(): string
+    {
+        return GIVE_NEXT_GEN_URL . 'build/developerTemplateCss.css';
+    }
+}