From a8e032e87d4d0d0de46c4f305a3a703302aa4f91 Mon Sep 17 00:00:00 2001
From: Glauber Silva <glauber.silva@givewp.com>
Date: Fri, 22 Mar 2024 21:28:51 -0300
Subject: [PATCH] feature: add add-on settings in the form builder interface

---
 globals.d.ts                                  |  1 +
 .../ViewModels/GiveAddonViewModel.php         |  3 +-
 .../FormBuilder/resources/js/index.tsx        | 27 ++++++++-
 .../js/interfaces/IGiveAddonFormBuilder.ts    |  1 +
 .../resources/js/settings/index.tsx           | 55 +++++++++++++++++++
 .../js/types/GiveAddonSettingsProps.ts        | 24 ++++++++
 6 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 src/FormExtension/FormBuilder/resources/js/settings/index.tsx
 create mode 100644 src/FormExtension/FormBuilder/resources/js/types/GiveAddonSettingsProps.ts

diff --git a/globals.d.ts b/globals.d.ts
index d78a2d1..440d638 100644
--- a/globals.d.ts
+++ b/globals.d.ts
@@ -1,3 +1,4 @@
 declare module '*.svg';
 declare module '*.module.css';
 declare module '*.module.scss';
+declare var wp: any;
diff --git a/src/FormExtension/FormBuilder/ViewModels/GiveAddonViewModel.php b/src/FormExtension/FormBuilder/ViewModels/GiveAddonViewModel.php
index 1c72e20..8c23490 100644
--- a/src/FormExtension/FormBuilder/ViewModels/GiveAddonViewModel.php
+++ b/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')),
         ];
     }
 }
diff --git a/src/FormExtension/FormBuilder/resources/js/index.tsx b/src/FormExtension/FormBuilder/resources/js/index.tsx
index 04b4ea8..45897d3 100644
--- a/src/FormExtension/FormBuilder/resources/js/index.tsx
+++ b/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);
diff --git a/src/FormExtension/FormBuilder/resources/js/interfaces/IGiveAddonFormBuilder.ts b/src/FormExtension/FormBuilder/resources/js/interfaces/IGiveAddonFormBuilder.ts
index d04bd9f..983d44c 100644
--- a/src/FormExtension/FormBuilder/resources/js/interfaces/IGiveAddonFormBuilder.ts
+++ b/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;
 }
diff --git a/src/FormExtension/FormBuilder/resources/js/settings/index.tsx b/src/FormExtension/FormBuilder/resources/js/settings/index.tsx
new file mode 100644
index 0000000..2b3bbf6
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/FormExtension/FormBuilder/resources/js/types/GiveAddonSettingsProps.ts b/src/FormExtension/FormBuilder/resources/js/types/GiveAddonSettingsProps.ts
new file mode 100644
index 0000000..70be321
--- /dev/null
+++ b/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;
+};