Feature: add Option-Based Form Editor feature flag (#7571)

Co-authored-by: Glauber Silva <[email protected]>
impress-org · Oct 22, 2024 · d2a5dd0 · d2a5dd0
1 parent c9e164b
commit d2a5dd0
Show file tree

Hide file tree

Showing 36 changed files with 1,026 additions and 91 deletions.
diff --git a/assets/src/css/admin/settings.scss b/assets/src/css/admin/settings.scss
@@ -383,6 +383,90 @@ div.give-field-description {
     }
 }
 
+.give_option_based_form_editor_notice {
+    display: flex;
+    margin: -2rem 0;
+    gap: 0.3rem;
+    padding: 0.5rem;
+    background-color: #fffaf2;
+    border-radius: 4px;
+    border: 1px solid #f29718;
+    border-left-width: 4px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #1a0f00;
+    line-height: 1.25rem;
+    max-width: 60rem;
+    width: 100%;
+
+    svg {
+        margin: 0.4rem 0.3rem;
+        height: 1.25rem;
+        width: 1.25rem;
+    }
+}
+
+.give-setting-tab-body-general,
+.give-setting-tab-body-display,
+.give-settings-advanced-tab {
+    label {
+        display: flex;
+        gap: 0.4rem;
+        padding: 1.25rem 1rem;
+        position: relative;
+
+        .give-settings-section-group-helper {
+            --popout-display: none;
+            display: flex;
+            cursor: help;
+
+            img {
+                max-width: 18.9px;
+            }
+
+            &:hover {
+                --popout-display: block;
+            }
+
+            &__popout {
+                background-color: #fff;
+                border: 1px solid #e6e6e6;
+                border-radius: 4px;
+                box-shadow: 0 4px 8px 0 #0000000D;
+                color: #404040;
+                display: var(--popout-display, none);
+                left: 100%;
+                overflow: hidden;
+                position: absolute;
+                top: 0;
+                transform: translateX(10px);
+                z-index: 9999;
+
+                img {
+                    max-width: initial;
+                    display: block;
+                }
+
+                h5 {
+                    font-size: 0.875rem;
+                    font-weight: 700;
+                    line-height: 1.5;
+                    margin: 0;
+                    padding: 1rem 1.5rem 0.5rem;
+                }
+
+                p {
+                    font-size: 0.75rem;
+                    font-weight: 500;
+                    line-height: 1.5;
+                    margin: 0;
+                    padding: 0 1.5rem 1.5rem;
+                }
+            }
+        }
+    }
+}
+
 .give-payment-gateways-settings {
     &.give-settings-section-content {
         .give-settings-section-group-menu {

diff --git a/give.php b/give.php
@@ -242,6 +242,7 @@ final class Give
         Give\FormTaxonomies\ServiceProvider::class,
         Give\DonationSpam\ServiceProvider::class,
         Give\Campaigns\ServiceProvider::class,
+        Give\FeatureFlags\OptionBasedFormEditor\ServiceProvider::class,
     ];
 
     /**

diff --git a/includes/admin/class-admin-settings.php b/includes/admin/class-admin-settings.php
@@ -948,7 +948,9 @@ class="give-input-field<?php echo( empty( $value['class'] ) ? '' : ' ' . esc_att
 					?>
 					<tr valign="top" <?php echo $wrapper_class; ?>>
 						<th scope="row" class="titledesc">
-							<label for="<?php echo esc_attr( $value['id'] ); ?>"><?php echo esc_attr( self::get_field_title( $value ) ); ?></label>
+                            <label for="<?php
+                            echo esc_attr($value['id']); ?>"><?php
+                                echo wp_kses_post(self::get_field_title($value)); ?></label>
 						</th>
 						<td class="give-forminp give-forminp-<?php echo esc_attr( $value['type'] ); ?>">
 							<select

diff --git a/includes/admin/settings/class-settings-advanced.php b/includes/admin/settings/class-settings-advanced.php
@@ -9,6 +9,7 @@
  * @since       1.8
  */
 
+use Give\FeatureFlags\OptionBasedFormEditor\OptionBasedFormEditor;
 use Give\Onboarding\Setup\Page as SetupPage;
 
 if ( ! defined( 'ABSPATH' ) ) {
@@ -45,6 +46,8 @@ public function __construct() {
 				);
 				add_action( 'give_save_settings_give_settings', [ $this, 'validate_settngs' ] );
                 add_filter( "give_admin_settings_sanitize_option_donor_default_user_role", [$this, 'sanitize_option_donor_default_user_role']);
+                add_action('give_admin_field_give_option_based_form_editor_notice',
+                    [$this, '_render_give_based_form_editor_notice'], 10, 2);
 			}
 
 			parent::__construct();
@@ -69,6 +72,22 @@ public function get_settings() {
 							'id'   => 'give_title_data_control_2',
 							'type' => 'title',
 						],
+                        [
+                            'name' => __('Option-Based Form Editor', 'give'),
+                            'desc' => __('If enabled, you\'ll gain access to the legacy settings and can create forms using the Option-Based Editor. Disabling this option will not affect existing forms created with the Option-Based Editor.',
+                                'give'),
+                            'id' => 'option_based_form_editor',
+                            'type' => 'radio_inline',
+                            'default' => (OptionBasedFormEditor::existOptionBasedFormsOnDb()) ? 'enabled' : 'disabled',
+                            'options' => [
+                                'enabled' => __('Enabled', 'give'),
+                                'disabled' => __('Disabled', 'give'),
+                            ],
+                        ],
+                        [
+                            'id' => 'option_based_form_editor_notice',
+                            'type' => 'give_option_based_form_editor_notice',
+                        ],
 						[
 							'name'    => __( 'Default GiveWP Styles', 'give' ),
 							'desc'    => __( 'This controls GiveWP\'s default styles for legacy donation forms and other front end elements. Disabling this option means that you\'ll need to supply your own styles.', 'give' ),
@@ -368,6 +387,37 @@ public function sanitize_option_donor_default_user_role($value) {
             }
             return $value;
         }
+
+        /**
+         * @unreleased
+         */
+        public function _render_give_based_form_editor_notice($field, $value)
+        {
+            if (OptionBasedFormEditor::isEnabled()) {
+                ?>
+                <tr valign="top" <?php
+                echo ! empty($field['wrapper_class']) ? 'class="' . $field['wrapper_class'] . '"' : ''; ?>>
+                    <th scope="row" class="titledesc">
+                    </th>
+                    <td class="give-forminp">
+                        <div class="give_option_based_form_editor_notice">
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                                 xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" clip-rule="evenodd"
+                                      d="M10.678 1.39a1.667 1.667 0 0 0-1.355 0c-.333.148-.549.409-.7.621-.147.21-.306.483-.48.784l-6.89 11.9c-.174.301-.333.576-.441.809-.11.237-.228.555-.19.918.048.47.295.898.677 1.176.295.214.63.271.89.295.256.023.573.023.922.023H16.89c.349 0 .666 0 .922-.023.26-.024.594-.08.89-.295.382-.278.628-.706.677-1.176.038-.363-.08-.681-.19-.918a10.943 10.943 0 0 0-.442-.81l-6.89-11.9a10.856 10.856 0 0 0-.48-.783c-.15-.212-.367-.473-.7-.621zm.156 6.11a.833.833 0 0 0-1.667 0v3.333a.833.833 0 0 0 1.667 0V7.5zM10 13.333A.833.833 0 0 0 10 15h.009a.833.833 0 0 0 0-1.667H10z"
+                                      fill="#F29718" />
+                            </svg>
+                            <p>
+                                <?php
+                                echo esc_html__('We recommend moving away from Legacy settings and the Option-Based Editor as they are not compatible with newer features and will eventually be removed.',
+                                    'give'); ?>
+                            </p>
+                        </div>
+                    </td>
+                </tr>
+                <?php
+            }
+        }
 	}
 
 endif;

diff --git a/includes/admin/settings/class-settings-gateways.php b/includes/admin/settings/class-settings-gateways.php
@@ -410,50 +410,59 @@ static function ($value, $key) {
                     ],
                 ],
             ];
+
+            /**
+             * @unreleased
+             */
+            $groups = apply_filters('give_settings_payment_gateways_menu_groups', $groups);
+
             $defaultGroup = current(array_keys($groups));
 
             ob_start();
 
             echo '<h4>' . __('Enabled Gateways', 'give') . '</h4>';
             echo '<div class="give-settings-section-content give-payment-gateways-settings">';
-            echo '<div class="give-settings-section-group-menu">';
-            echo '<ul>';
-            foreach ($groups as $slug => $group) {
-                $current_group = !empty($_GET['group']) ? give_clean($_GET['group']) : $defaultGroup;
-                $active_class = ($slug === $current_group) ? 'active' : '';
-
-                if ($group['helper']) {
-                    $helper = sprintf(
-                        '<div class="give-settings-section-group-helper">
-                            <img src="%1$s" />
-                            <div class="give-settings-section-group-helper__popout">
-                                <img src="%2$s" />
-                                <h5>%3$s</h5>
-                                <p>%4$s</p>
-                            </div>
-                        </div>',
-                        esc_url(GIVE_PLUGIN_URL . 'assets/dist/images/admin/help-circle.svg'),
-                        esc_url($group['helper']['image']),
+
+            if (count($groups) > 1) {
+                echo '<div class="give-settings-section-group-menu">';
+                echo '<ul>';
+                foreach ($groups as $slug => $group) {
+                    $current_group = ! empty($_GET['group']) ? give_clean($_GET['group']) : $defaultGroup;
+                    $active_class = ($slug === $current_group) ? 'active' : '';
+
+                    if ($group['helper']) {
+                        $helper = sprintf(
+                            '<div class="give-settings-section-group-helper">
+                                <img src="%1$s" />
+                                <div class="give-settings-section-group-helper__popout">
+                                    <img src="%2$s" />
+                                    <h5>%3$s</h5>
+                                    <p>%4$s</p>
+                                </div>
+                            </div>',
+                            esc_url(GIVE_PLUGIN_URL . 'assets/dist/images/admin/help-circle.svg'),
+                            esc_url($group['helper']['image']),
+                            esc_html($group['label']),
+                            esc_html($group['helper']['text'])
+                        );
+                    }
+
+                    echo sprintf(
+                        '<li><a class="%1$s" href="%2$s" data-group="%3$s">%4$s %5$s</a></li>',
+                        esc_html($active_class),
+                        esc_url(
+                            admin_url(
+                                "edit.php?post_type=give_forms&page={$current_page}&tab={$current_tab}&section={$current_section}&group={$slug}"
+                            )
+                        ),
+                        esc_html($slug),
                         esc_html($group['label']),
-                        esc_html($group['helper']['text'])
+                        $helper ?? ''
                     );
                 }
-
-                echo sprintf(
-                    '<li><a class="%1$s" href="%2$s" data-group="%3$s">%4$s %5$s</a></li>',
-                    esc_html($active_class),
-                    esc_url(
-                        admin_url(
-                            "edit.php?post_type=give_forms&page={$current_page}&tab={$current_tab}&section={$current_section}&group={$slug}"
-                        )
-                    ),
-                    esc_html($slug),
-                    esc_html($group['label']),
-                    $helper ?? ''
-                );
+                echo '</ul>';
+                echo '</div>';
             }
-            echo '</ul>';
-            echo '</div>';
 
             echo '<div class="give-settings-section-group-content">';
             foreach ($groups as $slug => $group) :

diff --git a/includes/admin/settings/class-settings-general.php b/includes/admin/settings/class-settings-general.php
@@ -667,7 +667,7 @@ public function _render_give_currency_preview($field, $value)
                     <label
                         for="<?php
                         echo esc_attr($field['id']); ?>"><?php
-                        echo esc_html($field['name']); ?></label>
+                        echo wp_kses_post($field['name']); ?></label>
                 </th>
                 <td class="give-forminp">
                     <input id="<?php

diff --git a/includes/gateways/stripe/includes/admin/class-give-stripe-admin-settings.php b/includes/gateways/stripe/includes/admin/class-give-stripe-admin-settings.php
@@ -734,7 +734,8 @@ public function stripe_styles_field( $field_options, $option_value ) {
 			<tr valign="top" <?php echo ! empty( $field_options['wrapper_class'] ) ? 'class="' . esc_attr( $field_options['wrapper_class'] ) . '"' : ''; ?>>
 				<th scope="row" class="titledesc">
 					<label for="<?php echo esc_html( $field_options['type'] ); ?>">
-						<?php echo esc_attr( $field_options['title'] ); ?>
+                        <?php
+                        echo wp_kses_post($field_options['title']); ?>
 					</label>
 				</th>
 				<td class="give-forminp give-forminp-<?php echo esc_html( $field_options['type'] ); ?>">

diff --git a/includes/post-types.php b/includes/post-types.php
@@ -56,8 +56,8 @@ function give_setup_post_types() {
 			'name'               => __( 'Donation Forms', 'give' ),
 			'singular_name'      => __( 'Form', 'give' ),
 			'add_new'            => __( 'Add Form', 'give' ),
-			'add_new_item'       => __( 'Add New Donation Form', 'give' ),
-			'edit_item'          => __( 'Edit Donation Form', 'give' ),
+			'add_new_item'       => __( 'Add New Campaign Form', 'give' ),
+			'edit_item'          => __( 'Edit Campaign Form', 'give' ),
 			'new_item'           => __( 'New Form', 'give' ),
 			'all_items'          => __( 'All Forms', 'give' ),
 			'view_item'          => __( 'View Form', 'give' ),

diff --git a/src/Campaigns/Actions/AddCampaignFormFromRequest.php b/src/Campaigns/Actions/AddCampaignFormFromRequest.php
@@ -6,19 +6,34 @@
 use Give\Campaigns\Models\Campaign;
 use Give\Campaigns\Repositories\CampaignRepository;
 use Give\DonationForms\Models\DonationForm;
+use WP_Post;
 
 /**
  * @unreleased
  */
 class AddCampaignFormFromRequest
 {
     /**
+     * @unreleased
+     *
      * @throws Exception
      */
-    public function __invoke(DonationForm $donationForm)
+    public function optionBasedFormEditor(int $formId, WP_Post $post, bool $update)
+    {
+        if ( ! $update && isset($_GET['campaignId']) && $campaign = Campaign::find(absint($_GET['campaignId']))) {
+            give(CampaignRepository::class)->addCampaignForm($campaign, $formId);
+        }
+    }
+
+    /**
+     * @unreleased
+     *
+     * @throws Exception
+     */
+    public function visualFormBuilder(DonationForm $donationForm)
     {
         if (isset($_GET['campaignId']) && $campaign = Campaign::find(absint($_GET['campaignId']))) {
-            give(CampaignRepository::class)->addCampaignForm($campaign, $donationForm);
+            give(CampaignRepository::class)->addCampaignForm($campaign, $donationForm->id);
         }
     }
 }
diff --git a/src/Campaigns/Actions/CreateDefaultCampaignForm.php b/src/Campaigns/Actions/CreateDefaultCampaignForm.php
@@ -31,6 +31,6 @@ public function __invoke(Campaign $campaign)
             ]),
         ]);
 
-        give(CampaignRepository::class)->addCampaignForm($campaign, $defaultCampaignForm, true);
+        give(CampaignRepository::class)->addCampaignForm($campaign, $defaultCampaignForm->id, true);
     }
 }
diff --git a/src/Campaigns/Models/Campaign.php b/src/Campaigns/Models/Campaign.php
@@ -115,9 +115,9 @@ public static function find($id): ?Campaign
      *
      * @unreleased
      */
-    public static function findByFormId($id): ?Campaign
+    public static function findByFormId(int $formId): ?Campaign
     {
-        return give(CampaignRepository::class)->getByFormId($id);
+        return give(CampaignRepository::class)->getByFormId($formId);
     }
 
     /**