From 3df5eeb2c8efcf938d1361377d0d509e85324d61 Mon Sep 17 00:00:00 2001
From: Sapayth Hossain <sapayth@users.noreply.github.com>
Date: Tue, 26 Nov 2024 15:35:46 +0600
Subject: [PATCH] compatibility for settings and notification tab

---
 .../js/components/builder-stage/template.php  |  3 +-
 admin/form-builder/assets/js/form-builder.js  | 16 ++++++-
 admin/form-builder/views/form-builder.php     | 35 +++++++++++++--
 assets/js-templates/form-components.php       |  3 +-
 assets/js/wpuf-form-builder.js                | 16 ++++++-
 includes/Admin/Forms/Admin_Form.php           | 44 +++++++++++--------
 6 files changed, 87 insertions(+), 30 deletions(-)

diff --git a/admin/form-builder/assets/js/components/builder-stage/template.php b/admin/form-builder/assets/js/components/builder-stage/template.php
index 4471b0c4..15916140 100644
--- a/admin/form-builder/assets/js/components/builder-stage/template.php
+++ b/admin/form-builder/assets/js/components/builder-stage/template.php
@@ -188,6 +188,5 @@ class="wpuf-rounded-r-md hover:wpuf-bg-slate-500 hover:wpuf-cursor-pointer wpuf-
             </li>
         </ul>
     </div>
-
     <?php do_action( 'wpuf_form_builder_template_builder_stage_bottom_area' ); ?>
-</div><!-- #form-preview-stage -->
+</div>
diff --git a/admin/form-builder/assets/js/form-builder.js b/admin/form-builder/assets/js/form-builder.js
index de09f3c4..324a4585 100644
--- a/admin/form-builder/assets/js/form-builder.js
+++ b/admin/form-builder/assets/js/form-builder.js
@@ -414,6 +414,7 @@
             enableMultistep: false,
             shortcodeCopied: false,
             active_tab: 'form-editor',
+            active_settings_tab: '#wpuf-metabox-settings',
             logoUrl: wpuf_form_builder.assetUrl + '/images/wpuf-icon-circle.svg'
         },
 
@@ -475,11 +476,18 @@
         },
 
         mounted: function () {
+            // secondary settings tabs and their contents
+            var settings_tabs = $('#wpuf-form-builder-settings-tabs .nav-tab');
+            var self = this;
+
+            // add a click listener to each settings_tab
+            settings_tabs.each(function () {
+                $(this).bind('click', self.setActiveSettingsTab );
+            });
+
             var clipboard = new window.Clipboard('.form-id');
             $(".form-id").tooltip();
 
-            var self = this;
-
             clipboard.on('success', function(e) {
                 // Show copied tooltip
                 $(e.trigger)
@@ -506,6 +514,10 @@
         },
 
         methods: {
+            setActiveSettingsTab: function (e) {
+                this.active_settings_tab = $(e.target).attr('href');
+            },
+
             // switch form
             switch_form: function () {
                 this.is_form_switcher = (this.is_form_switcher) ? false : true;
diff --git a/admin/form-builder/views/form-builder.php b/admin/form-builder/views/form-builder.php
index d020abf1..76926168 100644
--- a/admin/form-builder/views/form-builder.php
+++ b/admin/form-builder/views/form-builder.php
@@ -1,5 +1,7 @@
 <form id="wpuf-form-builder"
-      class="wpuf-w-[calc(100%+20px)] wpuf-ml-[-20px] wpuf-form-builder-<?php echo esc_attr( $form_type ); ?>" method="post" action="" @submit.prevent="save_form_builder" v-cloak>
+    class="wpuf-w-[calc(100%+20px)] wpuf-ml-[-20px] wpuf-form-builder-<?php echo esc_attr( $form_type ); ?>"
+    method="post"
+    action="" @submit.prevent="save_form_builder" v-cloak>
     <div class="wpuf-bg-white wpuf-px-[20px] wpuf-pt-8 wpuf-justify-between wpuf-items-center wpuf-pb-4">
         <div class="wpuf-flex wpuf-justify-between">
             <div class="wpuf-flex">
@@ -121,7 +123,6 @@ class="wpuf-nav-tab wpuf-nav-tab-active wpuf-text-gray-800 wpuf-py-2 wpuf-px-4 w
                         class="wpuf-nav-tab wpuf-nav-tab-active wpuf-text-gray-800 wpuf-py-2 wpuf-px-4 wpuf-text-sm hover:wpuf-bg-white hover:wpuf-text-gray-800 hover:wpuf-rounded-md hover:wpuf-drop-shadow-sm focus:wpuf-shadow-none">
                         <?php esc_html_e( 'Settings', 'wp-user-frontend' ); ?>
                     </a>
-
                     <?php do_action( "wpuf-form-builder-tabs-{$form_type}" ); ?>
                 </div>
             </div>
@@ -145,10 +146,38 @@ class="wpuf-pointer-events-none wpuf-absolute wpuf-left-0 wpuf-inline-block wpuf
             <?php esc_html_e( 'Enable Multistep', 'wp-user-frontend' ); ?>
         </div>
     </div>
-    <div class="wpuf-flex">
+    <div
+        v-show="active_tab === 'form-editor'"
+        class="wpuf-flex">
         <div class="wpuf-w-2/3 wpuf-bg-white wpuf-min-h-screen wpuf-px-[20px] wpuf-pt-4 wpuf-border-t wpuf-border-gray-200">
             <builder-stage></builder-stage>
         </div>
         <div class="wpuf-w-1/3 wpuf-bg-gray-50 wpuf-px-[20px] wpuf-pt-4">Field attributes</div>
     </div>
+    <div
+        v-show="active_tab === 'form-settings'"
+        id="wpuf-form-builder-settings"
+        class="group clearfix wpuf-flex">
+        <div class="wpuf-w-1/3 wpuf-bg-gray-50 wpuf-px-[20px] wpuf-pt-4">
+            <div id="wpuf-form-builder-settings-tabs" class="nav-tab-wrapper wpuf-flex wpuf-flex-col">
+                <?php do_action( "wpuf-form-builder-settings-tabs-{$form_type}" ); ?>
+            </div><!-- #wpuf-form-builder-settings-tabs -->
+        </div>
+        <div class="wpuf-w-2/3 wpuf-bg-gray-50">
+            <div
+                id="wpuf-form-builder-settings-contents"
+                class="tab-contents">
+                <?php do_action( "wpuf-form-builder-settings-tab-contents-{$form_type}" ); ?>
+            </div><!-- #wpuf-form-builder-settings-contents -->
+        </div>
+    </div><!-- #wpuf-form-builder-settings -->
+    <?php do_action( "wpuf-form-builder-tab-contents-{$form_type}" ); ?>
+
+    <?php if ( ! empty( $form_settings_key ) ) { ?>
+        <input type="hidden" name="form_settings_key" value="<?php echo esc_attr( $form_settings_key ); ?>">
+    <?php } ?>
+
+    <?php wp_nonce_field( 'wpuf_form_builder_save_form', 'wpuf_form_builder_nonce' ); ?>
+
+    <input type="hidden" name="wpuf_form_id" value="<?php echo esc_attr( $form_id ); ?>">
 </form>
diff --git a/assets/js-templates/form-components.php b/assets/js-templates/form-components.php
index 20b4ccaf..13f33585 100644
--- a/assets/js-templates/form-components.php
+++ b/assets/js-templates/form-components.php
@@ -189,9 +189,8 @@ class="wpuf-rounded-r-md hover:wpuf-bg-slate-500 hover:wpuf-cursor-pointer wpuf-
             </li>
         </ul>
     </div>
-
     <?php do_action( 'wpuf_form_builder_template_builder_stage_bottom_area' ); ?>
-</div><!-- #form-preview-stage -->
+</div>
 </script>
 
 <script type="text/x-template" id="tmpl-wpuf-field-checkbox">
diff --git a/assets/js/wpuf-form-builder.js b/assets/js/wpuf-form-builder.js
index de09f3c4..324a4585 100644
--- a/assets/js/wpuf-form-builder.js
+++ b/assets/js/wpuf-form-builder.js
@@ -414,6 +414,7 @@
             enableMultistep: false,
             shortcodeCopied: false,
             active_tab: 'form-editor',
+            active_settings_tab: '#wpuf-metabox-settings',
             logoUrl: wpuf_form_builder.assetUrl + '/images/wpuf-icon-circle.svg'
         },
 
@@ -475,11 +476,18 @@
         },
 
         mounted: function () {
+            // secondary settings tabs and their contents
+            var settings_tabs = $('#wpuf-form-builder-settings-tabs .nav-tab');
+            var self = this;
+
+            // add a click listener to each settings_tab
+            settings_tabs.each(function () {
+                $(this).bind('click', self.setActiveSettingsTab );
+            });
+
             var clipboard = new window.Clipboard('.form-id');
             $(".form-id").tooltip();
 
-            var self = this;
-
             clipboard.on('success', function(e) {
                 // Show copied tooltip
                 $(e.trigger)
@@ -506,6 +514,10 @@
         },
 
         methods: {
+            setActiveSettingsTab: function (e) {
+                this.active_settings_tab = $(e.target).attr('href');
+            },
+
             // switch form
             switch_form: function () {
                 this.is_form_switcher = (this.is_form_switcher) ? false : true;
diff --git a/includes/Admin/Forms/Admin_Form.php b/includes/Admin/Forms/Admin_Form.php
index 72748a4c..77b870cc 100644
--- a/includes/Admin/Forms/Admin_Form.php
+++ b/includes/Admin/Forms/Admin_Form.php
@@ -196,27 +196,27 @@ public function add_settings_tab_contents() {
         $form_settings = wpuf_get_form_settings( $post->ID );
         ?>
 
-        <div id="wpuf-metabox-settings" class="group">
+        <div v-show="active_settings_tab === '#wpuf-metabox-settings'" id="wpuf-metabox-settings" class="group">
             <?php include_once WPUF_ROOT . '/admin/html/form-settings-post.php'; ?>
         </div>
 
-        <div id="wpuf-metabox-settings-update" class="group">
+        <div v-show="active_settings_tab === '#wpuf-metabox-settings-update'" id="wpuf-metabox-settings-update" class="group">
             <?php include_once WPUF_ROOT . '/admin/html/form-settings-post-edit.php'; ?>
         </div>
 
-        <div id="wpuf-metabox-submission-restriction" class="group">
+        <div v-show="active_settings_tab === '#wpuf-metabox-submission-restriction'" id="wpuf-metabox-submission-restriction" class="group">
             <?php include_once WPUF_ROOT . '/admin/html/form-submission-restriction.php'; ?>
         </div>
 
-        <div id="wpuf-metabox-settings-payment" class="group">
+        <div v-show="active_settings_tab === '#wpuf-metabox-settings-payment'" id="wpuf-metabox-settings-payment" class="group">
             <?php include_once WPUF_ROOT . '/admin/html/form-settings-payment.php'; ?>
         </div>
 
-        <div id="wpuf-metabox-settings-display" class="group">
+        <div v-show="active_settings_tab === '#wpuf-metabox-settings-display'" id="wpuf-metabox-settings-display" class="group">
             <?php include_once WPUF_ROOT . '/admin/html/form-settings-display.php'; ?>
         </div>
 
-        <div id="wpuf-metabox-post_expiration" class="group wpuf-metabox-post_expiration">
+        <div v-show="active_settings_tab === '#wpuf-metabox-post_expiration'" id="wpuf-metabox-post_expiration" class="group wpuf-metabox-post_expiration wpuf-mt-4">
             <?php wpuf()->admin->admin_form->form_post_expiration(); ?>
         </div>
 
@@ -234,18 +234,24 @@ public function add_settings_tab_contents() {
      */
     public function add_settings_tabs() {
         ?>
-
-        <a href="#wpuf-metabox-settings" class="nav-tab"><?php esc_html_e( 'Post Settings', 'wp-user-frontend' ); ?></a>
-        <a href="#wpuf-metabox-settings-update" class="nav-tab"><?php esc_html_e( 'Edit Settings',
-                'wp-user-frontend' ); ?></a>
-        <a href="#wpuf-metabox-submission-restriction" class="nav-tab"><?php esc_html_e( 'Submission Restriction',
-                'wp-user-frontend' ); ?></a>
-        <a href="#wpuf-metabox-settings-payment" class="nav-tab"><?php esc_html_e( 'Payment Settings',
-                'wp-user-frontend' ); ?></a>
-        <a href="#wpuf-metabox-settings-display" class="nav-tab"><?php esc_html_e( 'Display Settings',
-                'wp-user-frontend' ); ?></a>
-        <a href="#wpuf-metabox-post_expiration" class="nav-tab"><?php esc_html_e( 'Post Expiration',
-                'wp-user-frontend' ); ?></a>
+        <a href="#wpuf-metabox-settings"
+            :class="active_settings_tab === '#wpuf-metabox-settings' ? 'nav-tab-active' : ''"
+            class="nav-tab"><?php esc_html_e( 'Post Settings', 'wp-user-frontend' ); ?></a>
+        <a href="#wpuf-metabox-settings-update"
+            :class="active_settings_tab === '#wpuf-metabox-settings-update' ? 'nav-tab-active' : ''"
+            class="nav-tab"><?php esc_html_e( 'Edit Settings', 'wp-user-frontend' ); ?></a>
+        <a href="#wpuf-metabox-submission-restriction"
+            :class="active_settings_tab === '#wpuf-metabox-submission-restriction' ? 'nav-tab-active' : ''"
+            class="nav-tab"><?php esc_html_e( 'Submission Restriction', 'wp-user-frontend' ); ?></a>
+        <a href="#wpuf-metabox-settings-payment"
+            :class="active_settings_tab === '#wpuf-metabox-settings-payment' ? 'nav-tab-active' : ''"
+            class="nav-tab"><?php esc_html_e( 'Payment Settings', 'wp-user-frontend' ); ?></a>
+        <a href="#wpuf-metabox-settings-display"
+            :class="active_settings_tab === '#wpuf-metabox-settings-display' ? 'nav-tab-active' : ''"
+            class="nav-tab"><?php esc_html_e( 'Display Settings', 'wp-user-frontend' ); ?></a>
+        <a href="#wpuf-metabox-post_expiration"
+            :class="active_settings_tab === '#wpuf-metabox-post_expiration' ? 'nav-tab-active' : ''"
+            class="nav-tab"><?php esc_html_e( 'Post Expiration', 'wp-user-frontend' ); ?></a>
 
         <?php do_action( 'wpuf_post_form_tab' ); ?>
 
@@ -281,7 +287,7 @@ class="wpuf-nav-tab wpuf-nav-tab-active wpuf-text-gray-800 wpuf-py-2 wpuf-px-4 w
     public function add_primary_tab_contents() {
         ?>
 
-        <div id="wpuf-form-builder-notification" class="group wpuf-nav-tab">
+        <div v-show="active_tab === 'notification'" id="wpuf-form-builder-notification" class="group wpuf-nav-tab" style="padding: 2rem">
             <?php do_action( 'wpuf_form_settings_post_notification' ); ?>
         </div><!-- #wpuf-form-builder-notification -->