feature: add add-on settings in the form builder interface

globals.d.ts

@@ -1,3 +1,4 @@
 declare module '*.svg';
 declare module '*.module.css';
 declare module '*.module.scss';
+declare var wp: any;

src/FormExtension/FormBuilder/ViewModels/GiveAddonViewModel.php

@@ -35,7 +35,8 @@ public function exports(): array
 
         return [
             'colors' => $colorsArray,
-            'colorSettingsUrl' => esc_url_raw(admin_url('edit.php?post_type=give_forms&page=give-color-settings')),
+            'colorSettingsUrl' => esc_url_raw(admin_url('edit.php?post_type=give_forms&page=give-addon-color-settings')),
+            'globalOptionsUrl' => esc_url_raw(admin_url('edit.php?post_type=give_forms&page=give-settings&tab=give-addon-global-settings')),
         ];
     }
 }

src/FormExtension/FormBuilder/resources/js/index.tsx

@@ -1,8 +1,31 @@
 import ColorsSampleBlock from './Blocks/ColorsSampleBlock';
 import {getGiveCoreFormBuilderWindowData} from './window';
+import {__} from '@wordpress/i18n';
+import GiveAddonSettings from './settings';
 
 const {form} = getGiveCoreFormBuilderWindowData();
 
-console.log(ColorsSampleBlock);
-
+/**
+ * Register sample blocks
+ *
+ * @since 1.0.0
+ */
 form.blocks.register(ColorsSampleBlock.name, ColorsSampleBlock.settings);
+
+/**
+ * Register sample settings
+ *
+ * @since 1.0.0
+ */
+const addGiveAddonSettings = (settings) => {
+    return [
+        ...settings,
+        {
+            name: __('Give Addon Settings', 'ADDON_TEXTDOMAIN'),
+            path: 'give-addon-settings',
+            element: GiveAddonSettings,
+        },
+    ];
+};
+
+wp.hooks.addFilter('givewp_form_builder_settings_additional_routes', 'give-addon-settings', addGiveAddonSettings);

src/FormExtension/FormBuilder/resources/js/interfaces/IGiveAddonFormBuilder.ts

@@ -6,4 +6,5 @@ import {colorProps} from '../types/colorProps';
 export interface IGiveAddonFormBuilder {
     colors: colorProps[];
     colorSettingsUrl: string;
+    globalOptionsUrl: string;
 }

src/FormExtension/FormBuilder/resources/js/settings/index.tsx

@@ -0,0 +1,55 @@
+import {PanelRow, ToggleControl} from '@wordpress/components';
+import {__} from '@wordpress/i18n';
+import {SettingsSection} from '@givewp/form-builder-library';
+import {getGiveAddonFormBuilderWindowData} from '../window';
+import {createInterpolateElement} from '@wordpress/element';
+import {GiveAddonSettingsProps} from '../types/GiveAddonSettingsProps';
+
+/**
+ * @since 1.0.0
+ */
+export default function GiveAddonSettings({settings, setSettings}) {
+    const addonSettings: GiveAddonSettingsProps = settings.addonSettings ?? {};
+    const {globalOptionsUrl} = getGiveAddonFormBuilderWindowData();
+
+    const updateAddonSettings = (property: string, value: any) => {
+        setSettings({
+            addonSettings: {
+                ...addonSettings,
+                [property]: value,
+            },
+        });
+    };
+
+    const customizePdfReceiptsDescription = createInterpolateElement(
+        __('Uses <a>global settings</a> when disabled.', 'ADDON_TEXTDOMAIN'),
+        {
+            a: <a href={globalOptionsUrl} target="_blank" />,
+        }
+    );
+
+    return (
+        <div className={'give-form-settings__pdf-receipts'}>
+            <SettingsSection
+                title={__('Give Addon Settings', 'ADDON_TEXTDOMAIN')}
+                description={__(
+                    'This allows you to customize the Add-on settings for just this donation form.',
+                    'ADDON_TEXTDOMAIN'
+                )}
+            >
+                <PanelRow className={'no-extra-gap'}>
+                    <ToggleControl
+                        label={__('Customize Settings', 'ADDON_TEXTDOMAIN')}
+                        help={customizePdfReceiptsDescription}
+                        checked={addonSettings.enable === 'enabled'}
+                        onChange={(value) => {
+                            updateAddonSettings('enable', value ? 'enabled' : 'global');
+                        }}
+                    />
+                </PanelRow>
+            </SettingsSection>
+
+            {addonSettings.enable === 'enabled' && <p>Your custom settings goes here...</p>}
+        </div>
+    );
+}

src/FormExtension/FormBuilder/resources/js/types/GiveAddonSettingsProps.ts

@@ -0,0 +1,24 @@
+/**
+ * @since 1.0.0
+ */
+export type GiveAddonSettingsProps = {
+    enable: string;
+    generationMethod: string;
+    colorPicker: string;
+    templateId: string;
+    logoUpload: string;
+    companyName: string;
+    name: string;
+    addressLine1: string;
+    addressLine2: string;
+    cityStateZip: string;
+    displayWebsiteUrl: boolean;
+    emailAddress: string;
+    headerMessage: string;
+    footerMessage: string;
+    additionalNotes: string;
+    customTemplateId: string;
+    customTemplateName: string;
+    customPageSize: string;
+    customPdfBuilder: string;
+};