Feature: new form builder settings UI

package.json

@@ -37,9 +37,9 @@
     ],
     "devDependencies": {
         "@types/lodash": "^4.14.199",
-        "@types/react": "^18.0.27",
+        "@types/react": "^18.0.38",
         "@types/react-datepicker": "^4.15.0",
-        "@types/react-dom": "^18.0.10",
+        "@types/react-dom": "^18.0.11",
         "@types/wordpress__blocks": "^12.5.0",
         "@types/wordpress__components": "^23.0.1",
         "@wordpress/dependency-extraction-webpack-plugin": "^3.3.2",
@@ -69,6 +69,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.12",
         "@givewp/design-system-foundation": "^1.1.0",
+        "@givewp/form-builder-library": "^1.1.2",
         "@hookform/error-message": "^2.0.1",
         "@hookform/resolvers": "^2.9.10",
         "@paypal/paypal-js": "^5.1.4",
@@ -141,6 +142,7 @@
         "swr": "^2.0.1",
         "uiblocker": "latest",
         "use-immer": "^0.9.0",
+        "uuid": "^9.0.1",
         "vhtml": "^2.2.0"
     },
     "overrides": {

src/DonationForms/Actions/SanitizeDonationFormPreviewRequest.php

@@ -12,7 +12,7 @@ public function __invoke($var)
         if (is_array($var)) {
             return array_map($this, $var);
         } else {
-            return is_string($var) ? wp_unslash(wp_kses_post($var)) : $var;
+            return is_string($var) ? wp_unslash($var) : $var;
         }
     }
 }

src/FormBuilder/ViewModels/FormBuilderViewModel.php

@@ -51,6 +51,7 @@ public function storageData(int $donationFormId): array
                 // Note: Boolean values must be nested in an array to maintain boolean type, see \WP_Scripts::localize().
                 'permalink' => add_query_arg(['p' => $donationFormId], site_url('?post_type=give_forms')),
                 'rewriteSlug' => get_post_type_object('give_forms')->rewrite['slug'],
+                'baseUrl' => preg_replace('/^https?:\/\//', '', site_url()),
             ],
             'gateways' => $this->getGateways(),
             'gatewaySettingsUrl' => admin_url('edit.php?post_type=give_forms&page=give-settings&tab=gateways'),

src/FormBuilder/resources/js/form-builder/src/blocks/fields/terms-and-conditions/Edit.tsx

@@ -4,13 +4,13 @@ import {__} from '@wordpress/i18n';
 import {BlockEditProps} from '@wordpress/blocks';
 import {InspectorControls} from '@wordpress/block-editor';
 import {Markup} from 'interweave';
+import {ClassicEditor} from '@givewp/form-builder-library';
 import GlobalSettingsLink from '@givewp/form-builder/blocks/fields/terms-and-conditions/GlobalSettingsLink';
 import {getFormBuilderWindowData} from '@givewp/form-builder/common/getWindowData';
 import ControlForPopover from '@givewp/form-builder/components/settings/ControlForPopover';
 import StyledPopover from '@givewp/form-builder/blocks/fields/terms-and-conditions/StyledPopover';
 
 import './styles.scss';
-import ClassicEditor from '@givewp/form-builder/components/ClassicEditor';
 
 const DisplayTypeEnum = {
     SHOW_MODAL_TERMS: 'showModalTerms',

src/FormBuilder/resources/js/form-builder/src/components/canvas/FormSettings.tsx

@@ -0,0 +1,91 @@
+import React, {useMemo} from 'react';
+import FormSettingsContainer from '@givewp/form-builder/components/canvas/FormSettingsContainer';
+import FormGeneralSettingsGroup from '@givewp/form-builder/settings/group-general';
+import FormDonationConfirmationSettingsGroup from '@givewp/form-builder/settings/group-donation-confirmation';
+import {__} from '@wordpress/i18n';
+import EmailGeneralSettings from '@givewp/form-builder/settings/group-email-settings/general';
+import getEmailSettings from '@givewp/form-builder/settings/group-email-settings';
+
+/**
+ * @unreleased
+ */
+export default function FormSettings() {
+    const routes: Route[] = useMemo(() => {
+        const additionalSettings = validateRoutes(
+            wp.hooks.applyFilters('givewp_form_builder_settings_additional_routes', [])
+        );
+
+        return [
+            {
+                name: __('General', 'give'),
+                path: 'general',
+                element: FormGeneralSettingsGroup,
+            },
+            {
+                name: __('Donation Confirmation', 'give'),
+                path: 'donation-confirmation',
+                element: FormDonationConfirmationSettingsGroup,
+            },
+            {
+                name: __('Email Settings', 'give'),
+                path: 'email-settings',
+                element: null,
+                childRoutes: [
+                    {
+                        name: __('General', 'give'),
+                        path: 'email-settings/general',
+                        element: EmailGeneralSettings,
+                    },
+                    ...getEmailSettings(),
+                ],
+            },
+            ...additionalSettings,
+        ];
+    }, []);
+
+    return <FormSettingsContainer routes={routes} />;
+}
+
+/**
+ * @unreleased
+ */
+function validateRoutes(routes: Route[]): Route[] {
+    return routes.filter((route) => {
+        let isValid = isValidRoute(route);
+
+        if (route.childRoutes) {
+            if (Array.isArray(route.childRoutes)) {
+                route.childRoutes = validateRoutes(route.childRoutes);
+            } else {
+                delete route.childRoutes;
+                isValid = false;
+            }
+        }
+
+        return isValid;
+    });
+}
+
+/**
+ * @unreleased
+ */
+function isValidRoute(route: Route) {
+    return (
+        route.name &&
+        typeof route.name === 'string' &&
+        route.path &&
+        typeof route.path === 'string' &&
+        'element' in route
+    );
+}
+
+/**
+ * @unreleased
+ */
+export type Route = {
+    name: string;
+    path: string;
+    element?: React.FC<{settings: any; setSettings: any}>;
+    childRoutes?: Route[];
+    showWhen?: ({item, settings}) => boolean;
+};