From f5988052925b70d0929c50877823f1a7ab0f57b5 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Fri, 21 Jul 2023 11:05:47 +0600
Subject: [PATCH 01/37] =?UTF-8?q?=E2=9A=99=EF=B8=8FUpdate:=20Fields=20comm?=
 =?UTF-8?q?ission=20show=20condition=20for=20multipurpose=20use?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/components/Fields.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/admin/components/Fields.vue b/src/admin/components/Fields.vue
index 467ea107a0..8070a5d6ca 100644
--- a/src/admin/components/Fields.vue
+++ b/src/admin/components/Fields.vue
@@ -71,7 +71,8 @@
             </div>
         </template>
 
-        <template v-if="'combine' === fieldData.type && haveCondition( fieldData ) && fieldData.condition.type == 'show' && checkConditionLogic( fieldData, fieldValue )">
+        <template v-if="'combine' === fieldData.type &&
+            ( haveCondition( fieldData ) && fieldData.condition.type == 'show' && checkConditionLogic( fieldData, fieldValue ) || ! haveCondition( fieldData ) )">
             <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
@@ -867,7 +868,7 @@
 
                     a {
                         display: inline-block;
-                        
+
                         &:hover {
                             box-shadow: 0 0 0 1px transparent;
                         }

From f43e4b57ebba00d17f13bd690f05fad4f6607251 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Fri, 21 Jul 2023 18:10:38 +0600
Subject: [PATCH 02/37] =?UTF-8?q?=E2=9C=85Withdraw=20charger=20ui=20done.?=
 =?UTF-8?q?=20SocialFields.vue=20component=20modified=20and=20Fields.vue?=
 =?UTF-8?q?=20modified=20and=20CombineInput.vue=20component=20introduced.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/components/Fields.vue              | 18 +++-
 src/admin/components/Fields/CombineInput.vue | 95 +++++++++++++++++++
 src/admin/components/SocialFields.vue        | 96 +++++++++++++-------
 3 files changed, 174 insertions(+), 35 deletions(-)
 create mode 100644 src/admin/components/Fields/CombineInput.vue

diff --git a/src/admin/components/Fields.vue b/src/admin/components/Fields.vue
index 953ad22f46..1baf74a306 100644
--- a/src/admin/components/Fields.vue
+++ b/src/admin/components/Fields.vue
@@ -89,12 +89,24 @@
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field combine_fields">
                         <div class="percent_fee">
-                            <input type="text" class="wc_input_decimal regular-text medium" :id="sectionId + '[' + fieldData.name + ']' + '[' + 'percent_fee' + ']'" :name="sectionId + '[' + fieldData.fields.percent_fee.name + ']'" v-model="fieldValue[fieldData.fields.percent_fee.name]">
+                            <input
+                                type="text"
+                                class="wc_input_decimal regular-text medium"
+                                :id="sectionId + '[' + fieldData.name + ']' + '[' + 'percent_fee' + ']'"
+                                :name="sectionId + '[' + fieldData.fields.percent_fee.name + ']'"
+                                v-model="fieldValue[fieldData.fields.percent_fee.name]"
+                            >
                             {{ '%' }}
                         </div>
                         <div class="fixed_fee">
                             {{ '+' }}
-                            <input type="text" class="wc_input_price regular-text medium" :id="sectionId + '[' + fieldData.name + ']' + '[' + 'fixed_fee' + ']'" :name="sectionId + '[' + fieldData.fields.fixed_fee.name + ']'" v-model="fieldValue[fieldData.fields.fixed_fee.name]">
+                            <input
+                                type="text"
+                                class="wc_input_price regular-text medium"
+                                :id="sectionId + '[' + fieldData.name + ']' + '[' + 'fixed_fee' + ']'"
+                                :name="sectionId + '[' + fieldData.fields.fixed_fee.name + ']'"
+                                v-model="fieldValue[fieldData.fields.fixed_fee.name]"
+                            >
                         </div>
                     </div>
                 </fieldset>
@@ -394,7 +406,7 @@
                 <div class="field scl_fields" :class="fieldData.enable_status && 'off' === socialChecked ? 'scl_fields_disable' : ''">
                     <div class="scl_header">
                         <div class="scl_contents">
-                            <div class="scl_icon">
+                            <div class="scl_icon" v-if="fieldData.icon_url">
                                 <img :src="fieldData.icon_url" :alt="fieldData.label" />
                             </div>
                             <p class="scl_desc">{{ fieldData.social_desc }}</p>
diff --git a/src/admin/components/Fields/CombineInput.vue b/src/admin/components/Fields/CombineInput.vue
new file mode 100644
index 0000000000..a17bb40a04
--- /dev/null
+++ b/src/admin/components/Fields/CombineInput.vue
@@ -0,0 +1,95 @@
+<template>
+    <div class="field combine_fields">
+        <div class="percent_fee">
+            <input
+                type="text"
+                class="wc_input_decimal regular-text medium"
+                :id="percentageId"
+                :name="percentageName"
+                v-model="percentage"
+                v-on:input="onInput"
+            />
+            {{ '%' }}
+        </div>
+        <div class="fixed_fee">
+            {{ '+' }}
+            <input
+                type="text"
+                class="wc_input_price regular-text medium"
+                :id="fixedId"
+                :name="fixexName"
+                v-model="fixed"
+                v-on:input="onInput"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+    import { fixed } from 'lodash/fp/_falseOptions';
+
+    export default {
+        name: 'CombineInput',
+        props: {
+            fixedId: {
+                type: String,
+                default: 'fixed-val-id'
+            },
+            percentageId: {
+                type: String,
+                default: 'percentage-val-id'
+            },
+            fixexName: {
+                type: String,
+                default: 'fixed-val-name'
+            },
+            percentageName: {
+                type: String,
+                default: 'percentage-val-name'
+            },
+            value: {
+                type: Object,
+                default: {
+                    fixed: '',
+                    percentage: ''
+                }
+            }
+        },
+        data() {
+            return {
+                fixed: this.value.fixed ?? '',
+                percentage: this.value.percentage ?? '',
+            };
+        },
+        methods: {
+            onInput(e) {
+                let self = this,
+                    data = {
+                        fixed: self.fixed,
+                        percentage: self.percentage
+                    };
+
+                this.$emit('input', data);
+                this.$emit('change', data);
+            }
+        },
+    };
+</script>
+
+<style scoped lang='less'>
+    .combine_fields {
+        display: flex;
+        justify-content: right;
+
+        .percent_fee {
+            padding-right: 10px;
+        }
+
+        .fixed_fee,
+        .percent_fee {
+            input {
+                width: 100px;
+            }
+        }
+    }
+</style>
diff --git a/src/admin/components/SocialFields.vue b/src/admin/components/SocialFields.vue
index a7cc95bcdf..71ac842f5b 100644
--- a/src/admin/components/SocialFields.vue
+++ b/src/admin/components/SocialFields.vue
@@ -4,12 +4,20 @@
             <h3 class="field_heading" scope="row">
                 {{ fieldData.label }}
                 <span v-if="fieldData.tooltip">
-                    <i class="dashicons dashicons-editor-help tips" :title="fieldData.tooltip" v-tooltip="fieldData.tooltip"></i>
+                    <i
+                        class="dashicons dashicons-editor-help tips"
+                        :title="fieldData.tooltip"
+                        v-tooltip="fieldData.tooltip"
+                    ></i>
                 </span>
             </h3>
             <p class="field_desc" v-html="fieldData.desc"></p>
         </div>
-        <div class="fields" v-bind:class="[fieldData.type === 'radio' ? 'radio_fields' : '']" v-if="fieldData.url || fieldData.type !== 'html'">
+        <div
+            class="fields"
+            v-bind:class="[ fieldData.type === 'radio' ? 'radio_fields' : '' ]"
+            v-if="fieldData.url || fieldData.type !== 'html'"
+        >
             <secret-input
                 v-model="fieldData.url"
                 :type="'text'"
@@ -19,64 +27,88 @@
                 :is-secret="false"
             />
             <secret-input
-                v-model="fieldValue[fieldData.name]"
-                :type='fieldData.type'
+                v-model="fieldValue[ fieldData.name ]"
+                :type="fieldData.type"
                 v-if="fieldData.type === 'text'"
             />
             <textarea
                 class="large"
-                v-model="fieldValue[fieldData.name]"
+                v-model="fieldValue[ fieldData.name ]"
                 v-if="fieldData.type === 'textarea'"
             ></textarea>
             <template v-if="fieldData.type === 'radio'">
-                <label v-for="( optionVal, optionKey ) in fieldData.options" :class="isSocialOptionChecked( optionKey ) ? 'checked' : ''" :key="optionKey">
+                <label
+                    v-for="(optionVal, optionKey) in fieldData.options"
+                    :class="isSocialOptionChecked( optionKey ) ? 'checked' : ''"
+                    :key="optionKey"
+                >
                     <span class="dashicons dashicons-yes"></span>
                     <input
                         class="radio"
                         :name="optionKey"
                         :value="optionKey"
                         :type="fieldData.type"
-                        v-model="fieldValue[fieldData.name]" />
+                        v-model="fieldValue[ fieldData.name ]"
+                    />
                     {{ optionVal }}
                 </label>
             </template>
+            <combine-input
+                v-model="getCombineData"
+                v-if="'combine-input' === fieldData.type"
+            />
         </div>
     </fieldset>
 </template>
 
 <script>
-    import SecretInput from './SecretInput.vue';
+import SecretInput from './SecretInput.vue';
+import CombineInput from 'admin/components/Fields/CombineInput.vue';
 
-    export default {
-        components: {
-            SecretInput
+export default {
+    components: {
+        CombineInput,
+        SecretInput,
+    },
+    props: {
+        fieldData: {
+            type: Object,
+            required: true,
         },
-        props: {
-            fieldData: {
-                type: Object,
-                required: true,
-            },
 
-            fieldValue: {
-                type: Object,
-                required: true,
-            },
+        fieldValue: {
+            type: Object,
+            required: true,
         },
+    },
+
+    data() {
+        return {
+            copied: false,
+        };
+    },
 
-        data() {
-            return {
-                copied: false,
+    computed: {
+        getCombineData: {
+            get () {
+                return 'object' === typeof this.fieldValue[this.fieldData.name] ? this.fieldValue[this.fieldData.name] : { fixed: '', percentage: '' };
+            },
+            set (data) {
+                this.fieldValue[this.fieldData.name] = data;
             }
-        },
+        }
+    },
 
-        methods: {
-            isSocialOptionChecked( optionKey ) {
-                if ( 'radio' === this.fieldData.type ) {
-                    return this.fieldValue[this.fieldData.name] === optionKey ? true : false;
-                }
+    methods: {
+        isSocialOptionChecked( optionKey ) {
+            if ( 'radio' === this.fieldData.type ) {
+                return this.fieldValue[ this.fieldData.name ] === optionKey
+                    ? true
+                    : false;
+            }
 
-                return false;
-            },
+            return false;
         },
-    }
+    },
+};
 </script>

From fc5fc3a6685c76176779f45386ccdec26136e6f4 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 24 Jul 2023 14:57:25 +0600
Subject: [PATCH 03/37] Add auto open in SocialFields.vue

---
 src/admin/components/Fields.vue       | 11 +++++++++++
 src/admin/components/SocialFields.vue |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/admin/components/Fields.vue b/src/admin/components/Fields.vue
index 1baf74a306..ac283b4a54 100644
--- a/src/admin/components/Fields.vue
+++ b/src/admin/components/Fields.vue
@@ -501,6 +501,10 @@
                     this.checked = value;
                 }
             });
+
+            if ( this.fieldValue && this.fieldData.auto_open ) {
+                this.expandSocials = true;
+            }
         },
 
         computed: {
@@ -550,6 +554,13 @@
                                 }
                                 break;
 
+                            case 'contains-any':
+                                // Check if any item from value exists in dependencyValue
+                                if ( ! value.some(item => Object.values( dependencyValue ).includes(item)) ) {
+                                    return false;
+                                }
+                                break;
+
                             case 'equal':
                             default:
                                 if ( dependencyValue !== value ) {
diff --git a/src/admin/components/SocialFields.vue b/src/admin/components/SocialFields.vue
index 71ac842f5b..9c5b205ac1 100644
--- a/src/admin/components/SocialFields.vue
+++ b/src/admin/components/SocialFields.vue
@@ -96,7 +96,7 @@ export default {
             set (data) {
                 this.fieldValue[this.fieldData.name] = data;
             }
-        }
+        },
     },
 
     methods: {

From 3fdbf00cbf383dab3468e7bbd60da27ed38d6c03 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Tue, 25 Jul 2023 11:56:29 +0600
Subject: [PATCH 04/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FReset=20Fields.vue=20an?=
 =?UTF-8?q?d=20SocialFields.vue=20component=20to=20normal=20component=20as?=
 =?UTF-8?q?=20develop=20branch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/components/Fields.vue       | 1698 ++++++++++++-------------
 src/admin/components/SocialFields.vue |   54 +-
 2 files changed, 848 insertions(+), 904 deletions(-)

diff --git a/src/admin/components/Fields.vue b/src/admin/components/Fields.vue
index ac283b4a54..c9efe78eba 100644
--- a/src/admin/components/Fields.vue
+++ b/src/admin/components/Fields.vue
@@ -34,7 +34,7 @@
                     {{ getError( fieldData.label ) }}
                 </p>
                 <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                  {{ getValidationErrorMessage( fieldData.name ) }}
+                    {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
@@ -46,9 +46,9 @@
                     <div class="field">
                         <label :for="sectionId + '[' + fieldData.name + ']'">
                             <input type="number" :min="fieldData.min" :max="fieldData.max" :step="fieldData.step"
-                                class="regular-text medium" v-model="fieldValue[fieldData.name]"
-                                :class="[ { 'dokan-input-validation-error': hasValidationError( fieldData.name ) }, fieldData.class ]"
-                                :id="sectionId + '[' + fieldData.name + ']'" :name="sectionId + '[' + fieldData.name + ']'"/>
+                                   class="regular-text medium" v-model="fieldValue[fieldData.name]"
+                                   :class="[ { 'dokan-input-validation-error': hasValidationError( fieldData.name ) }, fieldData.class ]"
+                                   :id="sectionId + '[' + fieldData.name + ']'" :name="sectionId + '[' + fieldData.name + ']'"/>
                         </label>
                     </div>
                 </fieldset>
@@ -56,7 +56,7 @@
                     {{ getError( fieldData.label ) }}
                 </p>
                 <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                  {{ getValidationErrorMessage( fieldData.name ) }}
+                    {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
@@ -68,8 +68,8 @@
                     <div class="field">
                         <label :for="sectionId + '[' + fieldData.name + ']'">
                             <input type="text" :min="fieldData.min" class="regular-text medium" :id="sectionId + '[' + fieldData.name + ']'"
-                                :class="{ wc_input_decimal: allSettingsValues.dokan_selling.commission_type=='percentage', 'wc_input_price': allSettingsValues.dokan_selling.commission_type=='flat' }"
-                                :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]"/>
+                                   :class="{ wc_input_decimal: allSettingsValues.dokan_selling.commission_type=='percentage', 'wc_input_price': allSettingsValues.dokan_selling.commission_type=='flat' }"
+                                   :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]"/>
                         </label>
                     </div>
                 </fieldset>
@@ -77,36 +77,23 @@
                     {{ getError( fieldData.label ) }}
                 </p>
                 <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                  {{ getValidationErrorMessage( fieldData.name ) }}
+                    {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
-        <template v-if="'combine' === fieldData.type &&
-            ( haveCondition( fieldData ) && fieldData.condition.type == 'show' && checkConditionLogic( fieldData, fieldValue ) || ! haveCondition( fieldData ) )">
+        <template v-if="'combine' === fieldData.type && haveCondition( fieldData ) && fieldData.condition.type == 'show' && checkConditionLogic( fieldData, fieldValue )">
             <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field combine_fields">
                         <div class="percent_fee">
-                            <input
-                                type="text"
-                                class="wc_input_decimal regular-text medium"
-                                :id="sectionId + '[' + fieldData.name + ']' + '[' + 'percent_fee' + ']'"
-                                :name="sectionId + '[' + fieldData.fields.percent_fee.name + ']'"
-                                v-model="fieldValue[fieldData.fields.percent_fee.name]"
-                            >
+                            <input type="text" class="wc_input_decimal regular-text medium" :id="sectionId + '[' + fieldData.name + ']' + '[' + 'percent_fee' + ']'" :name="sectionId + '[' + fieldData.fields.percent_fee.name + ']'" v-model="fieldValue[fieldData.fields.percent_fee.name]">
                             {{ '%' }}
                         </div>
                         <div class="fixed_fee">
                             {{ '+' }}
-                            <input
-                                type="text"
-                                class="wc_input_price regular-text medium"
-                                :id="sectionId + '[' + fieldData.name + ']' + '[' + 'fixed_fee' + ']'"
-                                :name="sectionId + '[' + fieldData.fields.fixed_fee.name + ']'"
-                                v-model="fieldValue[fieldData.fields.fixed_fee.name]"
-                            >
+                            <input type="text" class="wc_input_price regular-text medium" :id="sectionId + '[' + fieldData.name + ']' + '[' + 'fixed_fee' + ']'" :name="sectionId + '[' + fieldData.fields.fixed_fee.name + ']'" v-model="fieldValue[fieldData.fields.fixed_fee.name]">
                         </div>
                     </div>
                 </fieldset>
@@ -177,7 +164,7 @@
                     </div>
                 </fieldset>
                 <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                  {{ getValidationErrorMessage( fieldData.name ) }}
+                    {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
@@ -291,7 +278,7 @@
                             <label :class="isSwitchOptionChecked( optionKey ) ? 'checked' : ''" :key="optionKey" :for="sectionId + '[' + fieldData.name + '][' + optionKey + ']'">
                                 <span class="dashicons dashicons-yes"></span>
                                 <input type="radio" class="radio" :name="optionKey" :value="optionKey" v-model="fieldValue[fieldData.name]"
-                                    :id="sectionId + '[' + fieldData.name + '][' + optionKey + ']'"/>
+                                       :id="sectionId + '[' + fieldData.name + '][' + optionKey + ']'"/>
                                 {{ optionVal }}
                             </label>
                         </template>
@@ -330,7 +317,7 @@
                         <li v-if="fieldValue[fieldData.name]" :key="optionKey">
                             {{ optionVal.value }}
                             <span v-if="!optionVal.must_use" class="dashicons dashicons-no-alt remove-item"
-                                @click.prevent="removeItem( optionKey, fieldData.name )"></span>
+                                  @click.prevent="removeItem( optionKey, fieldData.name )"></span>
                             <span class="repeatable-item-description" v-html="optionVal.desc"></span>
                         </li>
                     </template>
@@ -344,7 +331,7 @@
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                 </fieldset>
                 <div class="field radio-image-container">
-                     <template v-for="( image, name ) in fieldData.options">
+                    <template v-for="( image, name ) in fieldData.options">
                         <label class="radio-image" :key="name" :class="{ 'active' : fieldValue[fieldData.name] === name, 'not-active' : fieldValue[fieldData.name] !== name }">
                             <input type="radio" class="radio" :name="fieldData.name" v-model="fieldValue[fieldData.name]" :value="name">
                             <span class="current-option-indicator">
@@ -406,7 +393,7 @@
                 <div class="field scl_fields" :class="fieldData.enable_status && 'off' === socialChecked ? 'scl_fields_disable' : ''">
                     <div class="scl_header">
                         <div class="scl_contents">
-                            <div class="scl_icon" v-if="fieldData.icon_url">
+                            <div class="scl_icon">
                                 <img :src="fieldData.icon_url" :alt="fieldData.label" />
                             </div>
                             <p class="scl_desc">{{ fieldData.social_desc }}</p>
@@ -446,1057 +433,1046 @@
 </template>
 
 <script>
-    import colorPicker from "admin/components/ColorPicker.vue";
-    import Switches from "admin/components/Switches.vue";
-    import SocialFields from './SocialFields.vue';
-    import FieldHeading from './FieldHeading.vue';
-    import SecretInput from './SecretInput.vue';
-    let Mapbox                = dokan_get_lib('Mapbox');
-    let TextEditor            = dokan_get_lib('TextEditor');
-    let GoogleMaps            = dokan_get_lib('GoogleMaps');
-    let RefreshSettingOptions = dokan_get_lib('RefreshSettingOptions');
-
-    export default {
-        name: 'Fields',
-
-        components: {
-            Mapbox,
-            Switches,
-            TextEditor,
-            GoogleMaps,
-            colorPicker,
-            FieldHeading,
-            SocialFields,
-            RefreshSettingOptions,
-            SecretInput
-        },
-
-        props: ['id', 'fieldData', 'sectionId', 'fieldValue', 'allSettingsValues', 'errors', 'toggleLoadingState', 'validationErrors', 'dokanAssetsUrl'],
-
-        data() {
-            return {
-                hideMap               : false,
-                checked               : this.isChecked(),
-                socialChecked         : this.isSocialChecked(),
-                expandSocials         : false,
-                repeatableItem        : {},
-                repeatableTime        : [],
-                singleColorPicker     : { default: this.fieldData.default, label: '', show_pallete: false },
-                yourStringTimeValue   : '',
-                customFieldComponents : dokan.hooks.applyFilters( 'getDokanCustomFieldComponents', [] ),
-            }
-        },
-
-        created() {
-            this.$root.$on( 'hasError', ( key ) => {
-                this.hasValidationError( key );
-            });
+import colorPicker from "admin/components/ColorPicker.vue";
+import Switches from "admin/components/Switches.vue";
+import SocialFields from './SocialFields.vue';
+import FieldHeading from './FieldHeading.vue';
+import SecretInput from './SecretInput.vue';
+let Mapbox                = dokan_get_lib('Mapbox');
+let TextEditor            = dokan_get_lib('TextEditor');
+let GoogleMaps            = dokan_get_lib('GoogleMaps');
+let RefreshSettingOptions = dokan_get_lib('RefreshSettingOptions');
+
+export default {
+    name: 'Fields',
+
+    components: {
+        Mapbox,
+        Switches,
+        TextEditor,
+        GoogleMaps,
+        colorPicker,
+        FieldHeading,
+        SocialFields,
+        RefreshSettingOptions,
+        SecretInput
+    },
+
+    props: ['id', 'fieldData', 'sectionId', 'fieldValue', 'allSettingsValues', 'errors', 'toggleLoadingState', 'validationErrors', 'dokanAssetsUrl'],
+
+    data() {
+        return {
+            hideMap               : false,
+            checked               : this.isChecked(),
+            socialChecked         : this.isSocialChecked(),
+            expandSocials         : false,
+            repeatableItem        : {},
+            repeatableTime        : [],
+            singleColorPicker     : { default: this.fieldData.default, label: '', show_pallete: false },
+            yourStringTimeValue   : '',
+            customFieldComponents : dokan.hooks.applyFilters( 'getDokanCustomFieldComponents', [] ),
+        }
+    },
 
-            this.$root.$on( 'getError', ( key ) => {
-                this.getValidationErrorMessage( key );
-            });
+    created() {
+        this.$root.$on( 'hasError', ( key ) => {
+            this.hasValidationError( key );
+        });
 
-            this.$parent.$on( 'switcHandler', ( fieldKey, value ) => {
-                if ( this.fieldData.name === fieldKey ) {
-                    this.checked = value;
-                }
-            });
+        this.$root.$on( 'getError', ( key ) => {
+            this.getValidationErrorMessage( key );
+        });
 
-            if ( this.fieldValue && this.fieldData.auto_open ) {
-                this.expandSocials = true;
+        this.$parent.$on( 'switcHandler', ( fieldKey, value ) => {
+            if ( this.fieldData.name === fieldKey ) {
+                this.checked = value;
             }
-        },
-
-        computed: {
-            shouldShow(e) {
-                let shouldShow = true;
+        });
+    },
 
-                if ( this.fieldData.show_if ) {
-                    const conditions   = this.fieldData.show_if;
-                    const dependencies = Object.keys( conditions );
+    computed: {
+        shouldShow(e) {
+            let shouldShow = true;
 
-                    let i = 0;
+            if ( this.fieldData.show_if ) {
+                const conditions   = this.fieldData.show_if;
+                const dependencies = Object.keys( conditions );
 
-                    for ( i = 0; i < dependencies.length; i++ ) {
-                        const dependency            = dependencies[i];
-                        const [ optionId, sectionId = this.sectionId ] = dependency.split( '.' ).reverse();
-                        const dependencyValue       = this.allSettingsValues[ sectionId ][ optionId ];
-                        const [ operator, value ]   = _.chain( conditions[ dependency ] ).pairs().first().value();
+                let i = 0;
 
-                        switch ( operator ) {
-                            case 'greater_than':
-                                if ( ! ( dependencyValue > value ) ) {
-                                    shouldShow = false;
-                                }
-                                break;
-
-                            case 'greater_than_equal':
-                                if ( ! ( dependencyValue >= value ) ) {
-                                    shouldShow = false;
-                                }
-                                break;
+                for ( i = 0; i < dependencies.length; i++ ) {
+                    const dependency            = dependencies[i];
+                    const [ optionId, sectionId = this.sectionId ] = dependency.split( '.' ).reverse();
+                    const dependencyValue       = this.allSettingsValues[ sectionId ][ optionId ];
+                    const [ operator, value ]   = _.chain( conditions[ dependency ] ).pairs().first().value();
 
-                            case 'less_than':
-                                if ( ! ( dependencyValue < value ) ) {
-                                    shouldShow = false;
-                                }
-                                break;
+                    switch ( operator ) {
+                        case 'greater_than':
+                            if ( ! ( dependencyValue > value ) ) {
+                                shouldShow = false;
+                            }
+                            break;
 
-                            case 'less_than':
-                                if ( ! ( dependencyValue <= value ) ) {
-                                    shouldShow = false;
-                                }
-                                break;
+                        case 'greater_than_equal':
+                            if ( ! ( dependencyValue >= value ) ) {
+                                shouldShow = false;
+                            }
+                            break;
 
-                            case 'contains':
-                                if ( ! Object.values( dependencyValue ).includes( value ) ) {
-                                    shouldShow = false;
-                                }
-                                break;
+                        case 'less_than':
+                            if ( ! ( dependencyValue < value ) ) {
+                                shouldShow = false;
+                            }
+                            break;
 
-                            case 'contains-any':
-                                // Check if any item from value exists in dependencyValue
-                                if ( ! value.some(item => Object.values( dependencyValue ).includes(item)) ) {
-                                    return false;
-                                }
-                                break;
+                        case 'less_than':
+                            if ( ! ( dependencyValue <= value ) ) {
+                                shouldShow = false;
+                            }
+                            break;
 
-                            case 'equal':
-                            default:
-                                if ( dependencyValue !== value ) {
-                                    shouldShow = false;
-                                }
-                                break;
-                        }
+                        case 'contains':
+                            if ( ! Object.values( dependencyValue ).includes( value ) ) {
+                                shouldShow = false;
+                            }
+                            break;
 
-                        if ( ! shouldShow ) {
+                        case 'equal':
+                        default:
+                            if ( dependencyValue !== value ) {
+                                shouldShow = false;
+                            }
                             break;
-                        }
                     }
-                }
 
-                return shouldShow;
-            },
-
-            mapApiSource() {
-                return this.allSettingsValues?.dokan_appearance?.map_api_source;
-            },
-
-            mapLocation() {
-                let location = {
-                    ...{
-                        latitude: 23.709921,
-                        longitude: 90.40714300000002,
-                        address: 'Dhaka',
-                        zoom: 10
-                    },
-
-                    ...this.fieldValue[ this.fieldData.name ],
-                };
-
-                location = {
-                    zoom      : parseInt( location.zoom ),
-                    address   : `${location.address}`,
-                    latitude  : parseFloat( location.latitude ),
-                    longitude : parseFloat( location.longitude ),
-                };
-
-                return location;
-            },
-
-            googleMapApiKey() {
-                return this.allSettingsValues?.dokan_appearance?.gmap_api_key;
-            },
-
-            mapboxAccessToken() {
-                return this.allSettingsValues?.dokan_appearance?.mapbox_access_token;
-            },
-
-            isSocialFieldActivated() {
-                for (const data in this.fieldData) {
-                    if (this.fieldData[data].social_field && 'html' !== this.fieldData[data].type && ! this.fieldValue[this.fieldData[data].name]) {
-                        return false;
+                    if ( ! shouldShow ) {
+                        break;
                     }
                 }
-
-                return true;
             }
+
+            return shouldShow;
         },
 
-        beforeMount() {
-            if ( 'multicheck' === this.fieldData.type && ! this.fieldValue[ this.fieldData.name ] ) {
-                this.fieldValue[ this.fieldData.name ] = this.fieldData.default;
-            }
+        mapApiSource() {
+            return this.allSettingsValues?.dokan_appearance?.map_api_source;
         },
 
-        methods: {
-            containCommonFields( type ) {
-                return _.contains( [ undefined, 'text', 'email', 'url', 'phone', 'time' ], type );
-            },
+        mapLocation() {
+            let location = {
+                ...{
+                    latitude: 23.709921,
+                    longitude: 90.40714300000002,
+                    address: 'Dhaka',
+                    zoom: 10
+                },
+
+                ...this.fieldValue[ this.fieldData.name ],
+            };
+
+            location = {
+                zoom      : parseInt( location.zoom ),
+                address   : `${location.address}`,
+                latitude  : parseFloat( location.latitude ),
+                longitude : parseFloat( location.longitude ),
+            };
+
+            return location;
+        },
 
-            setCheckedValue( checked, value ) {
-                this.fieldValue[ this.fieldData.name ][ value ] = checked ? value : '';
-            },
+        googleMapApiKey() {
+            return this.allSettingsValues?.dokan_appearance?.gmap_api_key;
+        },
 
-            addItem( type, name ) {
-                this.fieldValue[ name ] = this.fieldValue[ name ] || [];
+        mapboxAccessToken() {
+            return this.allSettingsValues?.dokan_appearance?.mapbox_access_token;
+        },
 
-                if ( typeof this.repeatableItem[ name ] == 'undefined' || ! this.repeatableItem[ name ] )  {
-                    return;
+        isSocialFieldActivated() {
+            for (const data in this.fieldData) {
+                if (this.fieldData[data].social_field && 'html' !== this.fieldData[data].type && ! this.fieldValue[this.fieldData[data].name]) {
+                    return false;
                 }
+            }
 
-                this.fieldValue[ name ].push( {
-                        id    : this.repeatableItem[ name ].trim().replace(/\s+/g, '_').toLowerCase(),
-                        value : this.repeatableItem[ name ]
-                    }
-                );
-                this.repeatableItem[ name ] = '';
-            },
+            return true;
+        }
+    },
 
-            removeItem( optionVal, name ) {
-                this.fieldValue[name].splice( optionVal, 1 );
-            },
+    beforeMount() {
+        if ( 'multicheck' === this.fieldData.type && ! this.fieldValue[ this.fieldData.name ] ) {
+            this.fieldValue[ this.fieldData.name ] = this.fieldData.default;
+        }
+    },
+
+    methods: {
+        containCommonFields( type ) {
+            return _.contains( [ undefined, 'text', 'email', 'url', 'phone', 'time' ], type );
+        },
 
-            haveCondition( fieldData ) {
-                return fieldData.hasOwnProperty( 'condition' );
-            },
+        setCheckedValue( checked, value ) {
+            this.fieldValue[ this.fieldData.name ][ value ] = checked ? value : '';
+        },
 
-            checkConditionLogic( fieldData, fieldValue ) {
-                var logic = fieldData.condition.logic;
-                var isValid = false;
+        addItem( type, name ) {
+            this.fieldValue[ name ] = this.fieldValue[ name ] || [];
 
-                _.each( logic, function( value, key ) {
-                    if ( _.contains( value, fieldValue[ key ] ) ) {
-                        isValid = true;
-                    }
-                } );
-
-                return isValid;
-            },
-
-            onHideMap( hideMap ) {
-                this.hideMap = hideMap;
-            },
-
-            onUpdateMap( payload ) {
-                this.fieldValue[ this.fieldData.name ] = { ...this.mapLocation, ...payload };
-            },
-
-            isSocialChecked() {
-                /**
-                 * If social field has enabled status saved return it or return the default value or return 'on'
-                 *
-                 * @since DOKAN_SINCE
-                 */
-                if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['name'] && this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ] ) {
-                    return this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ];
-                } else if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['default'] ) {
-                    return this.fieldData[ 'enable_status' ]['default'];
+            if ( typeof this.repeatableItem[ name ] == 'undefined' || ! this.repeatableItem[ name ] )  {
+                return;
+            }
+
+            this.fieldValue[ name ].push( {
+                    id    : this.repeatableItem[ name ].trim().replace(/\s+/g, '_').toLowerCase(),
+                    value : this.repeatableItem[ name ]
                 }
+            );
+            this.repeatableItem[ name ] = '';
+        },
 
-                return 'on';
-            },
+        removeItem( optionVal, name ) {
+            this.fieldValue[name].splice( optionVal, 1 );
+        },
 
+        haveCondition( fieldData ) {
+            return fieldData.hasOwnProperty( 'condition' );
+        },
 
-            thisSomeEvent(value) {
-                console.log('hello priting...', value);
-            },
+        checkConditionLogic( fieldData, fieldValue ) {
+            var logic = fieldData.condition.logic;
+            var isValid = false;
 
-            isSwitchOptionChecked( optionKey ) {
-                if ( 'multicheck' === this.fieldData.type ) {
-                    return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ][ optionKey ] === optionKey;
-                } else if ( 'radio' === this.fieldData.type ) {
-                    return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ] === optionKey;
+            _.each( logic, function( value, key ) {
+                if ( _.contains( value, fieldValue[ key ] ) ) {
+                    isValid = true;
                 }
+            } );
 
-                return false;
-            },
+            return isValid;
+        },
 
-            expandSocial() {
-                this.expandSocials = ! this.expandSocials;
-            },
+        onHideMap( hideMap ) {
+            this.hideMap = hideMap;
+        },
 
-            getSocialValue( optionValue ) {
-                this.fieldValue[ optionValue.name ] = this.fieldValue[ optionValue.name ] ? this.fieldValue[ optionValue.name ] : '';
-            },
+        onUpdateMap( payload ) {
+            this.fieldValue[ this.fieldData.name ] = { ...this.mapLocation, ...payload };
+        },
 
-            isChecked() {
-                return ! this.fieldValue[ this.fieldData.name ] ? this.fieldData.default : this.fieldValue[ this.fieldData.name ];
-            },
+        isSocialChecked() {
+            /**
+             * If social field has enabled status saved return it or return the default value or return 'on'
+             *
+             * @since DOKAN_SINCE
+             */
+            if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['name'] && this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ] ) {
+                return this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ];
+            } else if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['default'] ) {
+                return this.fieldData[ 'enable_status' ]['default'];
+            }
 
-            onToggleSwitch( status, key ) {
-                if ( 'isChecked' !== key ) {
-                    return;
-                }
+            return 'on';
+        },
 
-                this.checked                           = status ? 'on' : 'off';
-                this.fieldValue[ this.fieldData.name ] = status ? 'on' : 'off';
 
-                this.$root.$emit( 'onFieldSwitched', this.fieldValue[ this.fieldData.name ], this.fieldData.name );
-            },
+        thisSomeEvent(value) {
+            console.log('hello priting...', value);
+        },
 
-            onSocialToggleSwitch( status, key ) {
-                if ( 'isSocialChecked' !== key ) {
-                    return;
-                }
+        isSwitchOptionChecked( optionKey ) {
+            if ( 'multicheck' === this.fieldData.type ) {
+                return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ][ optionKey ] === optionKey;
+            } else if ( 'radio' === this.fieldData.type ) {
+                return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ] === optionKey;
+            }
 
-                this.socialChecked                     = status ? 'on' : 'off';
-                this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ]          = status ? 'on' : 'off';
-            },
+            return false;
+        },
 
-            hasError( key ) {
-                let errors = this.errors;
+        expandSocial() {
+            this.expandSocials = ! this.expandSocials;
+        },
 
-                if ( ! errors || typeof errors === 'undefined' ) {
-                    return false;
-                }
+        getSocialValue( optionValue ) {
+            this.fieldValue[ optionValue.name ] = this.fieldValue[ optionValue.name ] ? this.fieldValue[ optionValue.name ] : '';
+        },
 
-                if ( errors.length < 1 ) {
-                    return false;
-                }
+        isChecked() {
+            return ! this.fieldValue[ this.fieldData.name ] ? this.fieldData.default : this.fieldValue[ this.fieldData.name ];
+        },
 
-                if ( errors.includes( key ) ) {
-                    return key;
-                }
-            },
+        onToggleSwitch( status, key ) {
+            if ( 'isChecked' !== key ) {
+                return;
+            }
 
-            getError( label ) {
-                return label + ' ' + this.__( 'is required.', 'dokan-lite' )
-            },
+            this.checked                           = status ? 'on' : 'off';
+            this.fieldValue[ this.fieldData.name ] = status ? 'on' : 'off';
 
-            hasValidationError( key ) {
-                if ( this.validationErrors.filter( e => e.name === key ).length > 0 ) {
-                    return key;
-                }
-            },
+            this.$root.$emit( 'onFieldSwitched', this.fieldValue[ this.fieldData.name ], this.fieldData.name );
+        },
 
-            getValidationErrorMessage( key ) {
-                let errorMessage = '';
-                this.validationErrors.forEach( obj => {
-                    if ( obj.name === key ) {
-                        errorMessage = obj.error;
-                    }
-                } );
+        onSocialToggleSwitch( status, key ) {
+            if ( 'isSocialChecked' !== key ) {
+                return;
+            }
 
-                return errorMessage;
-            },
+            this.socialChecked                     = status ? 'on' : 'off';
+            this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ]          = status ? 'on' : 'off';
+        },
 
-            toggleColorPicker( data ) {
-                if ( this.fieldData.name === data.key ) {
-                    this.singleColorPicker.show_pallete = ! data.values.show_pallete;
-                } else {
-                    this.singleColorPicker.show_pallete = false;
-                }
-            },
+        hasError( key ) {
+            let errors = this.errors;
 
-            setCustomColor( value, key ) {
-                if ( ! key ) {
-                    return;
-                }
+            if ( ! errors || typeof errors === 'undefined' ) {
+                return false;
+            }
 
-                this.fieldData[ key ] = value;
-            },
+            if ( errors.length < 1 ) {
+                return false;
+            }
+
+            if ( errors.includes( key ) ) {
+                return key;
+            }
         },
-    };
-</script>
 
-<style lang="less">
-    span.repeatable-item-description {
-        color: #999;
-        font-size: 11px;
-        font-style: italic;
-    }
-    ul.dokan-settings-repeatable-list {
-        display: flex;
-        padding: 20px 0 0 20px;
-        flex-wrap: wrap;
-        text-align: right;
-        justify-content: right;
+        getError( label ) {
+            return label + ' ' + this.__( 'is required.', 'dokan-lite' )
+        },
 
-        li {
-            color: rgba(0, 0, 0, 0.87);
-            border: 1px solid rgba(0, 0, 0, 0.10);
-            padding: 5px 12px;
-            display: flex;
-            font-size: 13px;
-            box-sizing: border-box;
-            background: rgba(182, 206, 254, 0.38);
-            margin-top: 6px;
-            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
-            align-items: center;
-            margin-left: 12px;
-            font-family: 'Roboto', sans-serif;
-            line-height: 1;
-            border-radius: 8px;
-            justify-content: center;
+        hasValidationError( key ) {
+            if ( this.validationErrors.filter( e => e.name === key ).length > 0 ) {
+                return key;
+            }
+        },
 
-            span.remove-item{
-                color: #fff;
-                width: 15px;
-                margin: 0;
-                height: 15px;
-                cursor: pointer;
-                font-size: 15px;
-                background: #1aa0f7;
-                padding-top: 0;
-                margin-left: 5px;
-                border-radius: 50%;
+        getValidationErrorMessage( key ) {
+            let errorMessage = '';
+            this.validationErrors.forEach( obj => {
+                if ( obj.name === key ) {
+                    errorMessage = obj.error;
+                }
+            } );
+
+            return errorMessage;
+        },
+
+        toggleColorPicker( data ) {
+            if ( this.fieldData.name === data.key ) {
+                this.singleColorPicker.show_pallete = ! data.values.show_pallete;
+            } else {
+                this.singleColorPicker.show_pallete = false;
             }
-        }
-    }
-    .dokan-repetable-add-item-btn {
-        font-size: 16px !important;
-        font-weight: bold !important;
-        height: 25px !important;
-        line-height: 22px !important;
-    }
-    .percent_fee, .fixed_fee {
-        display: inline-block;
-    }
-    .percent_fee input, .fixed_fee input {
-        width: 60px;
-    }
-    .additional_fee .description {
-        margin-left: 10px;
-        margin-top: -10px;
-    }
-    .dokan-error {
-        color: red;
-        margin-top: .5em;
-        font-style: italic;
-        margin-bottom: 0;
-    }
-    .dokan-input-validation-error {
-      border-color: red !important;
-    }
-    .dokan-error.combine-commission {
-        margin-left: 10px;
-    }
-    .dokan-settings-sub-section {
-        margin-bottom: 30px;
+        },
 
-        .sub-section-title {
-            margin: 0;
-            font-size: 22px;
-            font-family: Roboto, sans-serif;
-            font-weight: 600;
-            line-height: 26px;
-            margin-bottom: 8px;
-        }
+        setCustomColor( value, key ) {
+            if ( ! key ) {
+                return;
+            }
 
-        .sub-section-description {
+            this.fieldData[ key ] = value;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+span.repeatable-item-description {
+    color: #999;
+    font-size: 11px;
+    font-style: italic;
+}
+ul.dokan-settings-repeatable-list {
+    display: flex;
+    padding: 20px 0 0 20px;
+    flex-wrap: wrap;
+    text-align: right;
+    justify-content: right;
+
+    li {
+        color: rgba(0, 0, 0, 0.87);
+        border: 1px solid rgba(0, 0, 0, 0.10);
+        padding: 5px 12px;
+        display: flex;
+        font-size: 13px;
+        box-sizing: border-box;
+        background: rgba(182, 206, 254, 0.38);
+        margin-top: 6px;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+        align-items: center;
+        margin-left: 12px;
+        font-family: 'Roboto', sans-serif;
+        line-height: 1;
+        border-radius: 8px;
+        justify-content: center;
+
+        span.remove-item{
+            color: #fff;
+            width: 15px;
             margin: 0;
+            height: 15px;
+            cursor: pointer;
             font-size: 15px;
-            font-weight: 300;
-            line-height: 21px;
-            font-family: Roboto, sans-serif;
-
-            .learn-more-btn {
-                cursor: pointer;
-                text-decoration: none;
-            }
+            background: #1aa0f7;
+            padding-top: 0;
+            margin-left: 5px;
+            border-radius: 50%;
         }
     }
-    .field_contents.data_clear {
-        background-color: #FFFBF3;
+}
+.dokan-repetable-add-item-btn {
+    font-size: 16px !important;
+    font-weight: bold !important;
+    height: 25px !important;
+    line-height: 22px !important;
+}
+.percent_fee, .fixed_fee {
+    display: inline-block;
+}
+.percent_fee input, .fixed_fee input {
+    width: 60px;
+}
+.additional_fee .description {
+    margin-left: 10px;
+    margin-top: -10px;
+}
+.dokan-error {
+    color: red;
+    margin-top: .5em;
+    font-style: italic;
+    margin-bottom: 0;
+}
+.dokan-input-validation-error {
+    border-color: red !important;
+}
+.dokan-error.combine-commission {
+    margin-left: 10px;
+}
+.dokan-settings-sub-section {
+    margin-bottom: 30px;
+
+    .sub-section-title {
+        margin: 0;
+        font-size: 22px;
+        font-family: Roboto, sans-serif;
+        font-weight: 600;
+        line-height: 26px;
+        margin-bottom: 8px;
+    }
 
-        .field_desc,
-        .fa-exclamation-triangle {
-            color: #E67E22 !important;
+    .sub-section-description {
+        margin: 0;
+        font-size: 15px;
+        font-weight: 300;
+        line-height: 21px;
+        font-family: Roboto, sans-serif;
+
+        .learn-more-btn {
+            cursor: pointer;
+            text-decoration: none;
         }
     }
-    .field_contents {
-        border: 1px solid #B0A7A7;
-        padding: 14px 30px 18px 27px;
-        border-top: 0;
-        background: rgba(244, 246, 250, 0.17);
+}
+.field_contents.data_clear {
+    background-color: #FFFBF3;
 
-        fieldset {
-            display: flex;
-            justify-content: space-between;
+    .field_desc,
+    .fa-exclamation-triangle {
+        color: #E67E22 !important;
+    }
+}
+.field_contents {
+    border: 1px solid #B0A7A7;
+    padding: 14px 30px 18px 27px;
+    border-top: 0;
+    background: rgba(244, 246, 250, 0.17);
+
+    fieldset {
+        display: flex;
+        justify-content: space-between;
 
-            .field_data {
-                flex: 2;
+        .field_data {
+            flex: 2;
 
-                .field_heading {
-                    color: #000000;
-                    margin: 0;
-                    font-size: 17px;
-                    font-style: normal;
-                    font-weight: 600;
-                    line-height: 35px;
-                    font-family: 'Roboto', sans-serif;
+            .field_heading {
+                color: #000000;
+                margin: 0;
+                font-size: 17px;
+                font-style: normal;
+                font-weight: 600;
+                line-height: 35px;
+                font-family: 'Roboto', sans-serif;
 
-                    span {
-                        i {
-                            margin: 5px 0 0 5px;
-                        }
+                span {
+                    i {
+                        margin: 5px 0 0 5px;
+                    }
 
-                        .tooltip {
-                            font-size: 14px;
-                        }
+                    .tooltip {
+                        font-size: 14px;
                     }
                 }
+            }
 
-                .field_desc {
-                    color: #000;
-                    margin: 0;
-                    font-size: 13px;
-                    font-style: normal;
-                    font-weight: 300;
-                    line-height: 17px;
-                    font-family: 'Roboto', sans-serif;
+            .field_desc {
+                color: #000;
+                margin: 0;
+                font-size: 13px;
+                font-style: normal;
+                font-weight: 300;
+                line-height: 17px;
+                font-family: 'Roboto', sans-serif;
 
-                    a {
-                        display: inline-block;
+                a {
+                    display: inline-block;
 
-                        &:hover {
-                            box-shadow: 0 0 0 1px transparent;
-                        }
-                        &:active {
-                            box-shadow: 0 0 0 1px transparent;
-                        }
-                        &:focus {
-                            box-shadow: 0 0 0 1px transparent;
-                        }
+                    &:hover {
+                        box-shadow: 0 0 0 1px transparent;
+                    }
+                    &:active {
+                        box-shadow: 0 0 0 1px transparent;
+                    }
+                    &:focus {
+                        box-shadow: 0 0 0 1px transparent;
                     }
                 }
             }
-
-            .social-switch-wraper {
-                display: flex;
-                align-items: center;
-            }
         }
 
-        .combine_fields {
+        .social-switch-wraper {
             display: flex;
-            justify-content: right;
+            align-items: center;
+        }
+    }
 
-            .percent_fee {
-                padding-right: 10px;
-            }
+    .combine_fields {
+        display: flex;
+        justify-content: right;
 
-            .fixed_fee,
-            .percent_fee {
-                input {
-                    width: 100px;
-                }
-            }
+        .percent_fee {
+            padding-right: 10px;
         }
 
-        .multicheck_fields {
-            & > div {
-                display: flex;
-                align-items: center;
-                justify-content: right;
-
-                label {
-                    color: #000;
-                    cursor: inherit;
-                    margin: 9px 0 9px 15px;
-                    border: 1px solid rgba(0, 0, 0, 0.10);
-                    display: inline-block;
-                    font-size: 12px;
-                    font-style: normal;
-                    line-height: 14px;
-                    font-family: 'Roboto', sans-serif;
-                    border-radius: 20px !important;
-                    border-radius: 8px;
-                }
+        .fixed_fee,
+        .percent_fee {
+            input {
+                width: 100px;
             }
         }
+    }
 
-        .editor_field {
-            margin-top: 20px;
-        }
+    .multicheck_fields {
+        & > div {
+            display: flex;
+            align-items: center;
+            justify-content: right;
 
-        .radio_fields {
             label {
-                border: 0.882967px solid #B0A7A7;
-                padding: 10px 15px;
+                color: #000;
+                cursor: inherit;
+                margin: 9px 0 9px 15px;
+                border: 1px solid rgba(0, 0, 0, 0.10);
                 display: inline-block;
-                overflow: hidden;
                 font-size: 12px;
-                box-shadow: 0px 3.53187px 3.53187px rgba(0, 0, 0, 0.10);
-                font-family: 'Roboto', sans-serif;
-                font-weight: 400;
+                font-style: normal;
                 line-height: 14px;
-                border-right: 0;
+                font-family: 'Roboto', sans-serif;
+                border-radius: 20px !important;
+                border-radius: 8px;
+            }
+        }
+    }
 
-                &:first-child {
-                    border-top-left-radius: 5px;
-                    border-bottom-left-radius: 5px;
-                }
+    .editor_field {
+        margin-top: 20px;
+    }
 
-                &:last-child {
-                    border-right: 0.882967px solid #B0A7A7;
-                    border-top-right-radius: 5px;
-                    border-bottom-right-radius: 5px;
-                }
+    .radio_fields {
+        label {
+            border: 0.882967px solid #B0A7A7;
+            padding: 10px 15px;
+            display: inline-block;
+            overflow: hidden;
+            font-size: 12px;
+            box-shadow: 0px 3.53187px 3.53187px rgba(0, 0, 0, 0.10);
+            font-family: 'Roboto', sans-serif;
+            font-weight: 400;
+            line-height: 14px;
+            border-right: 0;
 
-                &:hover {
-                    color: rgba(3, 58, 163, 0.85);
-                    background: rgba(182, 206, 254, 0.38);
-                    box-sizing: border-box;
-                    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
-                    border-color: rgba(3, 58, 163, 0.81);
-                }
+            &:first-child {
+                border-top-left-radius: 5px;
+                border-bottom-left-radius: 5px;
             }
 
-            .checked {
+            &:last-child {
+                border-right: 0.882967px solid #B0A7A7;
+                border-top-right-radius: 5px;
+                border-bottom-right-radius: 5px;
+            }
+
+            &:hover {
                 color: rgba(3, 58, 163, 0.85);
-                border: 1px solid rgba(3, 58, 163, 0.81);
                 background: rgba(182, 206, 254, 0.38);
                 box-sizing: border-box;
                 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+                border-color: rgba(3, 58, 163, 0.81);
             }
         }
 
-        .repeatable_fields {
-            display: flex;
-            align-items: center;
-            justify-content: right;
+        .checked {
+            color: rgba(3, 58, 163, 0.85);
+            border: 1px solid rgba(3, 58, 163, 0.81);
+            background: rgba(182, 206, 254, 0.38);
+            box-sizing: border-box;
+            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+        }
+    }
 
-            .dokan-repetable-add-item-btn {
-                color: #fff;
-                width: 25px;
-                border: 0;
-                padding: 0;
-                position: relative;
-                background: #2196F3;
-                min-height: 25px;
-                margin-left: 8px;
-                border-radius: 50%;
-
-                .dashicons-plus-alt2 {
-                    top: 50%;
-                    left: 50%;
-                    position: absolute;
-                    transform: translate(-50%, -50%);
-                    font-size: 18px;
-                }
+    .repeatable_fields {
+        display: flex;
+        align-items: center;
+        justify-content: right;
+
+        .dokan-repetable-add-item-btn {
+            color: #fff;
+            width: 25px;
+            border: 0;
+            padding: 0;
+            position: relative;
+            background: #2196F3;
+            min-height: 25px;
+            margin-left: 8px;
+            border-radius: 50%;
+
+            .dashicons-plus-alt2 {
+                top: 50%;
+                left: 50%;
+                position: absolute;
+                transform: translate(-50%, -50%);
+                font-size: 18px;
             }
         }
+    }
 
-        .dokan-setting-warning {
-            padding: 10px 10px 10px 0;
+    .dokan-setting-warning {
+        padding: 10px 10px 10px 0;
 
-            .dokan-setting-warning-label {
-                color: #d63638;
-                font-weight: bold;
-                margin-right: 10px;
+        .dokan-setting-warning-label {
+            color: #d63638;
+            font-weight: bold;
+            margin-right: 10px;
 
-                span {
-                    margin-top: 6px !important;
-                }
-            }
-
-            .dashicons {
-                margin: 0px;
-                padding: 0px;
+            span {
+                margin-top: 6px !important;
             }
         }
 
-        .add_files {
-            display: flex;
-            align-items: center;
-            justify-content: right;
+        .dashicons {
+            margin: 0px;
+            padding: 0px;
         }
+    }
 
-        .field {
-            flex: 2;
-            align-self: center;
-            text-align: right;
+    .add_files {
+        display: flex;
+        align-items: center;
+        justify-content: right;
+    }
 
-            .switch {
-                display: inline-block;
-            }
+    .field {
+        flex: 2;
+        align-self: center;
+        text-align: right;
 
-            input[type='radio'],
-            input[type='checkbox'] {
-                display: none;
-            }
+        .switch {
+            display: inline-block;
+        }
 
-            select,
-            textarea,
-            input[type='text'],
-            input[type='number'],
-            input[type='button'] {
-                border: 0.957434px solid #686666;
-                min-height: 32px;
-                box-shadow: 0px 3.82974px 3.82974px rgba(0, 0, 0, 0.10);
-                border-radius: 5px;
-            }
+        input[type='radio'],
+        input[type='checkbox'] {
+            display: none;
+        }
 
-            select,
-            textarea {
-                width: 100%;
-            }
+        select,
+        textarea,
+        input[type='text'],
+        input[type='number'],
+        input[type='button'] {
+            border: 0.957434px solid #686666;
+            min-height: 32px;
+            box-shadow: 0px 3.82974px 3.82974px rgba(0, 0, 0, 0.10);
+            border-radius: 5px;
+        }
 
-            .small {
-                max-width: 35% !important;
-            }
+        select,
+        textarea {
+            width: 100%;
+        }
 
-            .medium {
-                max-width: 70% !important;
-            }
+        .small {
+            max-width: 35% !important;
+        }
 
-            .large {
-                max-width: 100% !important;
-            }
+        .medium {
+            max-width: 70% !important;
+        }
 
-            label.checked {
-                color: rgba(3, 58, 163, 0.85);
-                border: 1px solid rgba(3, 58, 163, 0.81);
-                background: rgba(182, 206, 254, 0.38);
-                box-sizing: border-box;
-                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+        .large {
+            max-width: 100% !important;
+        }
 
-                .dashicons-yes {
-                    display: inline-block;
-                }
-            }
+        label.checked {
+            color: rgba(3, 58, 163, 0.85);
+            border: 1px solid rgba(3, 58, 163, 0.81);
+            background: rgba(182, 206, 254, 0.38);
+            box-sizing: border-box;
+            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
 
             .dashicons-yes {
-                color: #fff;
-                width: 15px;
-                height: 15px;
-                margin: -1px 3px 0 0;
-                cursor: pointer;
-                display: none;
-                font-size: 15px;
-                background: #1aa0f7;
-                padding-top: 0;
-                border-radius: 50%;
+                display: inline-block;
             }
         }
 
-        .scl_fields_disable {
-            filter: grayscale(1);
+        .dashicons-yes {
+            color: #fff;
+            width: 15px;
+            height: 15px;
+            margin: -1px 3px 0 0;
+            cursor: pointer;
+            display: none;
+            font-size: 15px;
+            background: #1aa0f7;
+            padding-top: 0;
+            border-radius: 50%;
         }
+    }
 
-        .scl_fields {
-            margin: 15px 0 4px 0px;
-            border: 0.82px solid #E5E5E5;
-            padding: 10px 25px;
-            background: rgba(220, 232, 254, 0.38);
-            box-shadow: 0px 3.28px 3.28px rgba(0, 0, 0, 0.10);
-            border-radius: 6.56px;
+    .scl_fields_disable {
+        filter: grayscale(1);
+    }
 
-            .scl_header {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
+    .scl_fields {
+        margin: 15px 0 4px 0px;
+        border: 0.82px solid #E5E5E5;
+        padding: 10px 25px;
+        background: rgba(220, 232, 254, 0.38);
+        box-shadow: 0px 3.28px 3.28px rgba(0, 0, 0, 0.10);
+        border-radius: 6.56px;
 
-                .scl_contents {
-                    flex: 2;
-                    display: flex;
-                    align-items: center;
+        .scl_header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
 
-                    .scl_icon {
-                        flex: 1.3;
-                        text-align: left;
-                        align-self: center;
+            .scl_contents {
+                flex: 2;
+                display: flex;
+                align-items: center;
 
-                        img {
-                            width: 48px;
-                            height: 48px;
-                        }
+                .scl_icon {
+                    flex: 1.3;
+                    text-align: left;
+                    align-self: center;
 
-                        span {
-                            font-size: 50px;
-                        }
+                    img {
+                        width: 48px;
+                        height: 48px;
                     }
 
-                    .scl_desc {
-                        flex: 6;
-                        color: #000000;
-                        font-size: 14px;
-                        text-align: left;
-                        font-style: normal;
-                        font-weight: 300;
-                        line-height: 20px;
-                        font-family: 'Roboto', sans-serif;
+                    span {
+                        font-size: 50px;
                     }
                 }
 
-                .expand_btn {
-                    flex: 2;
+                .scl_desc {
+                    flex: 6;
+                    color: #000000;
+                    font-size: 14px;
+                    text-align: left;
+                    font-style: normal;
+                    font-weight: 300;
+                    line-height: 20px;
+                    font-family: 'Roboto', sans-serif;
+                }
+            }
 
-                    span {
-                        color: #fff;
-                        width: 30px;
-                        cursor: pointer;
-                        margin: 0;
-                        border: 0;
-                        padding: 0;
-                        position: relative;
-                        font-size: 20px;
-                        background: #2196f3;
-                        min-height: 30px;
-                        border-radius: 50%;
-
-                        &:before {
-                            top: 50%;
-                            left: 50%;
-                            position: absolute;
-                            transform: translate(-50%, -50%);
-                        }
-                    }
+            .expand_btn {
+                flex: 2;
 
-                    .active-social-expend-btn {
-                        background: #4CAF4F;
+                span {
+                    color: #fff;
+                    width: 30px;
+                    cursor: pointer;
+                    margin: 0;
+                    border: 0;
+                    padding: 0;
+                    position: relative;
+                    font-size: 20px;
+                    background: #2196f3;
+                    min-height: 30px;
+                    border-radius: 50%;
+
+                    &:before {
+                        top: 50%;
+                        left: 50%;
+                        position: absolute;
+                        transform: translate(-50%, -50%);
                     }
                 }
+
+                .active-social-expend-btn {
+                    background: #4CAF4F;
+                }
             }
+        }
 
-            .scl_info {
-                background: #fff;
-
-                .scl_text,
-                .scl_html {
-                    border: 1px solid #b0a7a7;
-                    display: flex;
-                    padding: 10px 30px 15px 27px;
-                    border-top: 0;
-                    background: rgba(244,246,250,.17);
-                    justify-content: space-between;
-
-                    fieldset {
-                        width: 100%;
-
-                        .html_contents {
-                            width: 50%;
-                            text-align: left;
-
-                            .field_heading {
-                                color: #000;
-                                margin: 0;
-                                font-size: 15px;
-                                font-style: normal;
-                                font-weight: 600;
-                                line-height: 30px;
-                                font-family: Roboto,sans-serif;
-
-                                span {
-                                    i {
-                                        margin: 2.5px 0 0 5px;
-                                    }
-
-                                    .tooltip {
-                                        font-size: 14px;
-                                    }
+        .scl_info {
+            background: #fff;
+
+            .scl_text,
+            .scl_html {
+                border: 1px solid #b0a7a7;
+                display: flex;
+                padding: 10px 30px 15px 27px;
+                border-top: 0;
+                background: rgba(244,246,250,.17);
+                justify-content: space-between;
+
+                fieldset {
+                    width: 100%;
+
+                    .html_contents {
+                        width: 50%;
+                        text-align: left;
+
+                        .field_heading {
+                            color: #000;
+                            margin: 0;
+                            font-size: 15px;
+                            font-style: normal;
+                            font-weight: 600;
+                            line-height: 30px;
+                            font-family: Roboto,sans-serif;
+
+                            span {
+                                i {
+                                    margin: 2.5px 0 0 5px;
                                 }
-                            }
 
-                            .field_desc {
-                                color: #000;
-                                margin: 0;
-                                font-size: 13px;
-                                font-style: normal;
-                                font-weight: 300;
-                                line-height: 17px;
-                                font-family: Roboto,sans-serif;
+                                .tooltip {
+                                    font-size: 14px;
+                                }
                             }
                         }
 
-                        .fields {
-                            width: 50%;
-                            align-self: center;
-                            text-align: right;
+                        .field_desc {
+                            color: #000;
+                            margin: 0;
+                            font-size: 13px;
+                            font-style: normal;
+                            font-weight: 300;
+                            line-height: 17px;
+                            font-family: Roboto,sans-serif;
+                        }
+                    }
+
+                    .fields {
+                        width: 50%;
+                        align-self: center;
+                        text-align: right;
 
-                            .checked {
-                                color: rgba(3, 58, 163, 0.85);
-                                border: 1px solid rgba(3, 58, 163, 0.81);
-                                background: rgba(182, 206, 254, 0.38);
-                                box-sizing: border-box;
-                                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+                        .checked {
+                            color: rgba(3, 58, 163, 0.85);
+                            border: 1px solid rgba(3, 58, 163, 0.81);
+                            background: rgba(182, 206, 254, 0.38);
+                            box-sizing: border-box;
+                            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
 
-                                .dashicons-yes {
-                                    display: inline-block;
-                                }
+                            .dashicons-yes {
+                                display: inline-block;
                             }
                         }
                     }
-
                 }
 
-                &:nth-child(2) {
-                    margin-top: 15px;
-                    border-top: 1px solid #b0a7a7;
-                }
+            }
 
-                &:last-child {
-                    margin-bottom: 10px;
-                }
+            &:nth-child(2) {
+                margin-top: 15px;
+                border-top: 1px solid #b0a7a7;
             }
-        }
 
-        .gmap-field {
-            text-align: left;
-
-            .mapbox-wrapper {
-                .address-input {
-                    color: #000;
-                    margin: 20px 0;
-                    font-size: 15px;
-
-                    input {
-                        width: 100%;
-                        margin: 5px 0 3px;
-                        display: block;
-                        max-width: 320px;
-                        font-weight: 400;
-                    }
-                }
+            &:last-child {
+                margin-bottom: 10px;
             }
+        }
+    }
+
+    .gmap-field {
+        text-align: left;
+
+        .mapbox-wrapper {
+            .address-input {
+                color: #000;
+                margin: 20px 0;
+                font-size: 15px;
 
-            .gmap-wrap {
-                .search-address {
-                    color: #000;
-                    margin: 20px 0;
+                input {
+                    width: 100%;
+                    margin: 5px 0 3px;
+                    display: block;
                     max-width: 320px;
+                    font-weight: 400;
                 }
             }
         }
+
+        .gmap-wrap {
+            .search-address {
+                color: #000;
+                margin: 20px 0;
+                max-width: 320px;
+            }
+        }
     }
-    .dokan-settings-field-type-radio {
+}
+.dokan-settings-field-type-radio {
 
-        fieldset {
-            & > label:not(:last-child) {
-                margin-right: 12px !important;
+    fieldset {
+        & > label:not(:last-child) {
+            margin-right: 12px !important;
 
-                & > input[type="radio"] {
-                    margin-right: 2px;
-                }
+            & > input[type="radio"] {
+                margin-right: 2px;
             }
         }
     }
-    .col-3 {
-        width: 24.5%;
-        display: inline-block;
+}
+.col-3 {
+    width: 24.5%;
+    display: inline-block;
 
-        select {
-            width: 100%;
-        }
+    select {
+        width: 100%;
     }
+}
 
-    @media only screen and (max-width: 430px) {
-        .field_contents {
-            padding: 14px 14px 18px 14px;
+@media only screen and (max-width: 430px) {
+    .field_contents {
+        padding: 14px 14px 18px 14px;
 
-            fieldset {
-                display: block;
+        fieldset {
+            display: block;
 
-                .field_data {
-                    .field_heading {
-                        font-size: 10px;
-                        line-height: 24px;
-                    }
+            .field_data {
+                .field_heading {
+                    font-size: 10px;
+                    line-height: 24px;
+                }
 
-                    .field_desc {
-                        font-size: 8px;
-                    }
+                .field_desc {
+                    font-size: 8px;
                 }
+            }
 
-                .field {
-                    margin-top: 15px;
-                    text-align: left;
+            .field {
+                margin-top: 15px;
+                text-align: left;
 
-                    select,
-                    textarea,
-                    input[type=text] {
-                        min-height: 28px;
-                        font-size: 8px;
-                    }
+                select,
+                textarea,
+                input[type=text] {
+                    min-height: 28px;
+                    font-size: 8px;
+                }
 
-                    .small {
-                        max-width: 35% !important;
-                    }
+                .small {
+                    max-width: 35% !important;
+                }
 
-                    .medium {
-                        max-width: 70% !important;
-                    }
+                .medium {
+                    max-width: 70% !important;
+                }
 
-                    .large {
-                        max-width: 100% !important;
-                    }
+                .large {
+                    max-width: 100% !important;
                 }
+            }
 
-                .radio_fields {
-                    label {
-                        &:first-child {
-                            display: flex;
-                        }
+            .radio_fields {
+                label {
+                    &:first-child {
+                        display: flex;
                     }
                 }
             }
+        }
+
+        .scl_fields {
+            padding: 10px 15px;
 
-            .scl_fields {
-                padding: 10px 15px;
+            .scl_header {
+                display: block;
 
-                .scl_header {
+                .scl_contents {
                     display: block;
 
-                    .scl_contents {
-                        display: block;
-
-                        .scl_desc {
-                            font-size: 8px;
-                        }
+                    .scl_desc {
+                        font-size: 8px;
                     }
+                }
 
-                    .expand_btn {
-                        text-align: left;
-                    }
+                .expand_btn {
+                    text-align: left;
                 }
+            }
 
-                .scl_info {
-                    .scl_html,
-                    .scl_text {
-                        padding: 10px;
+            .scl_info {
+                .scl_html,
+                .scl_text {
+                    padding: 10px;
 
-                        .field_html {
-                            font-size: 10px;
-                            line-height: 20px;
-                        }
+                    .field_html {
+                        font-size: 10px;
+                        line-height: 20px;
+                    }
 
-                        .field_desc {
-                            font-size: 8px;
-                        }
+                    .field_desc {
+                        font-size: 8px;
+                    }
 
-                        select,
-                        textarea,
-                        input[type=text] {
-                            font-size: 8px;
-                            min-height: 28px;
-                        }
+                    select,
+                    textarea,
+                    input[type=text] {
+                        font-size: 8px;
+                        min-height: 28px;
                     }
                 }
             }
         }
     }
+}
+
+@media only screen and (max-width: 768px) {
+    .field {
+        select,
+        textarea,
+        input[type=text] {
+            max-width: 125px !important;
+        }
 
-    @media only screen and (max-width: 768px) {
-        .field {
-            select,
-            textarea,
-            input[type=text] {
-                max-width: 125px !important;
-            }
-
-            .small {
-                max-width: 35% !important;
-            }
+        .small {
+            max-width: 35% !important;
+        }
 
-            .medium {
-                max-width: 70% !important;
-            }
+        .medium {
+            max-width: 70% !important;
+        }
 
-            .large {
-                max-width: 100% !important;
-            }
+        .large {
+            max-width: 100% !important;
         }
     }
+}
 </style>
diff --git a/src/admin/components/SocialFields.vue b/src/admin/components/SocialFields.vue
index 9c5b205ac1..6d42dc6cee 100644
--- a/src/admin/components/SocialFields.vue
+++ b/src/admin/components/SocialFields.vue
@@ -4,20 +4,12 @@
             <h3 class="field_heading" scope="row">
                 {{ fieldData.label }}
                 <span v-if="fieldData.tooltip">
-                    <i
-                        class="dashicons dashicons-editor-help tips"
-                        :title="fieldData.tooltip"
-                        v-tooltip="fieldData.tooltip"
-                    ></i>
+                    <i class="dashicons dashicons-editor-help tips" :title="fieldData.tooltip" v-tooltip="fieldData.tooltip"></i>
                 </span>
             </h3>
             <p class="field_desc" v-html="fieldData.desc"></p>
         </div>
-        <div
-            class="fields"
-            v-bind:class="[ fieldData.type === 'radio' ? 'radio_fields' : '' ]"
-            v-if="fieldData.url || fieldData.type !== 'html'"
-        >
+        <div class="fields" v-bind:class="[fieldData.type === 'radio' ? 'radio_fields' : '']" v-if="fieldData.url || fieldData.type !== 'html'">
             <secret-input
                 v-model="fieldData.url"
                 :type="'text'"
@@ -27,48 +19,37 @@
                 :is-secret="false"
             />
             <secret-input
-                v-model="fieldValue[ fieldData.name ]"
-                :type="fieldData.type"
+                v-model="fieldValue[fieldData.name]"
+                :type='fieldData.type'
                 v-if="fieldData.type === 'text'"
             />
             <textarea
                 class="large"
-                v-model="fieldValue[ fieldData.name ]"
+                v-model="fieldValue[fieldData.name]"
                 v-if="fieldData.type === 'textarea'"
             ></textarea>
             <template v-if="fieldData.type === 'radio'">
-                <label
-                    v-for="(optionVal, optionKey) in fieldData.options"
-                    :class="isSocialOptionChecked( optionKey ) ? 'checked' : ''"
-                    :key="optionKey"
-                >
+                <label v-for="( optionVal, optionKey ) in fieldData.options" :class="isSocialOptionChecked( optionKey ) ? 'checked' : ''" :key="optionKey">
                     <span class="dashicons dashicons-yes"></span>
                     <input
                         class="radio"
                         :name="optionKey"
                         :value="optionKey"
                         :type="fieldData.type"
-                        v-model="fieldValue[ fieldData.name ]"
-                    />
+                        v-model="fieldValue[fieldData.name]" />
                     {{ optionVal }}
                 </label>
             </template>
-            <combine-input
-                v-model="getCombineData"
-                v-if="'combine-input' === fieldData.type"
-            />
         </div>
     </fieldset>
 </template>
 
 <script>
 import SecretInput from './SecretInput.vue';
-import CombineInput from 'admin/components/Fields/CombineInput.vue';
 
 export default {
     components: {
-        CombineInput,
-        SecretInput,
+        SecretInput
     },
     props: {
         fieldData: {
@@ -85,30 +66,17 @@ export default {
     data() {
         return {
             copied: false,
-        };
-    },
-
-    computed: {
-        getCombineData: {
-            get () {
-                return 'object' === typeof this.fieldValue[this.fieldData.name] ? this.fieldValue[this.fieldData.name] : { fixed: '', percentage: '' };
-            },
-            set (data) {
-                this.fieldValue[this.fieldData.name] = data;
-            }
-        },
+        }
     },
 
     methods: {
         isSocialOptionChecked( optionKey ) {
             if ( 'radio' === this.fieldData.type ) {
-                return this.fieldValue[ this.fieldData.name ] === optionKey
-                    ? true
-                    : false;
+                return this.fieldValue[this.fieldData.name] === optionKey ? true : false;
             }
 
             return false;
         },
     },
-};
+}
 </script>

From 13fe0bb73a96dd32a8d9674bcb6c317f43e290cb Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Tue, 25 Jul 2023 12:00:04 +0600
Subject: [PATCH 05/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FReset=20Fields.vue=20an?=
 =?UTF-8?q?d=20SocialFields.vue=20component=20to=20normal=20component=20as?=
 =?UTF-8?q?=20develop=20branch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/components/Fields.vue       | 1668 ++++++++++++-------------
 src/admin/components/SocialFields.vue |   52 +-
 2 files changed, 860 insertions(+), 860 deletions(-)

diff --git a/src/admin/components/Fields.vue b/src/admin/components/Fields.vue
index c9efe78eba..2e5ad56e62 100644
--- a/src/admin/components/Fields.vue
+++ b/src/admin/components/Fields.vue
@@ -34,7 +34,7 @@
                     {{ getError( fieldData.label ) }}
                 </p>
                 <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                    {{ getValidationErrorMessage( fieldData.name ) }}
+                  {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
@@ -46,9 +46,9 @@
                     <div class="field">
                         <label :for="sectionId + '[' + fieldData.name + ']'">
                             <input type="number" :min="fieldData.min" :max="fieldData.max" :step="fieldData.step"
-                                   class="regular-text medium" v-model="fieldValue[fieldData.name]"
-                                   :class="[ { 'dokan-input-validation-error': hasValidationError( fieldData.name ) }, fieldData.class ]"
-                                   :id="sectionId + '[' + fieldData.name + ']'" :name="sectionId + '[' + fieldData.name + ']'"/>
+                                class="regular-text medium" v-model="fieldValue[fieldData.name]"
+                                :class="[ { 'dokan-input-validation-error': hasValidationError( fieldData.name ) }, fieldData.class ]"
+                                :id="sectionId + '[' + fieldData.name + ']'" :name="sectionId + '[' + fieldData.name + ']'"/>
                         </label>
                     </div>
                 </fieldset>
@@ -56,7 +56,7 @@
                     {{ getError( fieldData.label ) }}
                 </p>
                 <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                    {{ getValidationErrorMessage( fieldData.name ) }}
+                  {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
@@ -68,8 +68,8 @@
                     <div class="field">
                         <label :for="sectionId + '[' + fieldData.name + ']'">
                             <input type="text" :min="fieldData.min" class="regular-text medium" :id="sectionId + '[' + fieldData.name + ']'"
-                                   :class="{ wc_input_decimal: allSettingsValues.dokan_selling.commission_type=='percentage', 'wc_input_price': allSettingsValues.dokan_selling.commission_type=='flat' }"
-                                   :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]"/>
+                                :class="{ wc_input_decimal: allSettingsValues.dokan_selling.commission_type=='percentage', 'wc_input_price': allSettingsValues.dokan_selling.commission_type=='flat' }"
+                                :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]"/>
                         </label>
                     </div>
                 </fieldset>
@@ -77,7 +77,7 @@
                     {{ getError( fieldData.label ) }}
                 </p>
                 <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                    {{ getValidationErrorMessage( fieldData.name ) }}
+                  {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
@@ -164,7 +164,7 @@
                     </div>
                 </fieldset>
                 <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                    {{ getValidationErrorMessage( fieldData.name ) }}
+                  {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
@@ -278,7 +278,7 @@
                             <label :class="isSwitchOptionChecked( optionKey ) ? 'checked' : ''" :key="optionKey" :for="sectionId + '[' + fieldData.name + '][' + optionKey + ']'">
                                 <span class="dashicons dashicons-yes"></span>
                                 <input type="radio" class="radio" :name="optionKey" :value="optionKey" v-model="fieldValue[fieldData.name]"
-                                       :id="sectionId + '[' + fieldData.name + '][' + optionKey + ']'"/>
+                                    :id="sectionId + '[' + fieldData.name + '][' + optionKey + ']'"/>
                                 {{ optionVal }}
                             </label>
                         </template>
@@ -317,7 +317,7 @@
                         <li v-if="fieldValue[fieldData.name]" :key="optionKey">
                             {{ optionVal.value }}
                             <span v-if="!optionVal.must_use" class="dashicons dashicons-no-alt remove-item"
-                                  @click.prevent="removeItem( optionKey, fieldData.name )"></span>
+                                @click.prevent="removeItem( optionKey, fieldData.name )"></span>
                             <span class="repeatable-item-description" v-html="optionVal.desc"></span>
                         </li>
                     </template>
@@ -331,7 +331,7 @@
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                 </fieldset>
                 <div class="field radio-image-container">
-                    <template v-for="( image, name ) in fieldData.options">
+                     <template v-for="( image, name ) in fieldData.options">
                         <label class="radio-image" :key="name" :class="{ 'active' : fieldValue[fieldData.name] === name, 'not-active' : fieldValue[fieldData.name] !== name }">
                             <input type="radio" class="radio" :name="fieldData.name" v-model="fieldValue[fieldData.name]" :value="name">
                             <span class="current-option-indicator">
@@ -433,1046 +433,1046 @@
 </template>
 
 <script>
-import colorPicker from "admin/components/ColorPicker.vue";
-import Switches from "admin/components/Switches.vue";
-import SocialFields from './SocialFields.vue';
-import FieldHeading from './FieldHeading.vue';
-import SecretInput from './SecretInput.vue';
-let Mapbox                = dokan_get_lib('Mapbox');
-let TextEditor            = dokan_get_lib('TextEditor');
-let GoogleMaps            = dokan_get_lib('GoogleMaps');
-let RefreshSettingOptions = dokan_get_lib('RefreshSettingOptions');
-
-export default {
-    name: 'Fields',
-
-    components: {
-        Mapbox,
-        Switches,
-        TextEditor,
-        GoogleMaps,
-        colorPicker,
-        FieldHeading,
-        SocialFields,
-        RefreshSettingOptions,
-        SecretInput
-    },
-
-    props: ['id', 'fieldData', 'sectionId', 'fieldValue', 'allSettingsValues', 'errors', 'toggleLoadingState', 'validationErrors', 'dokanAssetsUrl'],
-
-    data() {
-        return {
-            hideMap               : false,
-            checked               : this.isChecked(),
-            socialChecked         : this.isSocialChecked(),
-            expandSocials         : false,
-            repeatableItem        : {},
-            repeatableTime        : [],
-            singleColorPicker     : { default: this.fieldData.default, label: '', show_pallete: false },
-            yourStringTimeValue   : '',
-            customFieldComponents : dokan.hooks.applyFilters( 'getDokanCustomFieldComponents', [] ),
-        }
-    },
+    import colorPicker from "admin/components/ColorPicker.vue";
+    import Switches from "admin/components/Switches.vue";
+    import SocialFields from './SocialFields.vue';
+    import FieldHeading from './FieldHeading.vue';
+    import SecretInput from './SecretInput.vue';
+    let Mapbox                = dokan_get_lib('Mapbox');
+    let TextEditor            = dokan_get_lib('TextEditor');
+    let GoogleMaps            = dokan_get_lib('GoogleMaps');
+    let RefreshSettingOptions = dokan_get_lib('RefreshSettingOptions');
+
+    export default {
+        name: 'Fields',
+
+        components: {
+            Mapbox,
+            Switches,
+            TextEditor,
+            GoogleMaps,
+            colorPicker,
+            FieldHeading,
+            SocialFields,
+            RefreshSettingOptions,
+            SecretInput
+        },
 
-    created() {
-        this.$root.$on( 'hasError', ( key ) => {
-            this.hasValidationError( key );
-        });
+        props: ['id', 'fieldData', 'sectionId', 'fieldValue', 'allSettingsValues', 'errors', 'toggleLoadingState', 'validationErrors', 'dokanAssetsUrl'],
+
+        data() {
+            return {
+                hideMap               : false,
+                checked               : this.isChecked(),
+                socialChecked         : this.isSocialChecked(),
+                expandSocials         : false,
+                repeatableItem        : {},
+                repeatableTime        : [],
+                singleColorPicker     : { default: this.fieldData.default, label: '', show_pallete: false },
+                yourStringTimeValue   : '',
+                customFieldComponents : dokan.hooks.applyFilters( 'getDokanCustomFieldComponents', [] ),
+            }
+        },
 
-        this.$root.$on( 'getError', ( key ) => {
-            this.getValidationErrorMessage( key );
-        });
+        created() {
+            this.$root.$on( 'hasError', ( key ) => {
+                this.hasValidationError( key );
+            });
 
-        this.$parent.$on( 'switcHandler', ( fieldKey, value ) => {
-            if ( this.fieldData.name === fieldKey ) {
-                this.checked = value;
-            }
-        });
-    },
+            this.$root.$on( 'getError', ( key ) => {
+                this.getValidationErrorMessage( key );
+            });
 
-    computed: {
-        shouldShow(e) {
-            let shouldShow = true;
+            this.$parent.$on( 'switcHandler', ( fieldKey, value ) => {
+                if ( this.fieldData.name === fieldKey ) {
+                    this.checked = value;
+                }
+            });
+        },
 
-            if ( this.fieldData.show_if ) {
-                const conditions   = this.fieldData.show_if;
-                const dependencies = Object.keys( conditions );
+        computed: {
+            shouldShow(e) {
+                let shouldShow = true;
 
-                let i = 0;
+                if ( this.fieldData.show_if ) {
+                    const conditions   = this.fieldData.show_if;
+                    const dependencies = Object.keys( conditions );
 
-                for ( i = 0; i < dependencies.length; i++ ) {
-                    const dependency            = dependencies[i];
-                    const [ optionId, sectionId = this.sectionId ] = dependency.split( '.' ).reverse();
-                    const dependencyValue       = this.allSettingsValues[ sectionId ][ optionId ];
-                    const [ operator, value ]   = _.chain( conditions[ dependency ] ).pairs().first().value();
+                    let i = 0;
 
-                    switch ( operator ) {
-                        case 'greater_than':
-                            if ( ! ( dependencyValue > value ) ) {
-                                shouldShow = false;
-                            }
-                            break;
+                    for ( i = 0; i < dependencies.length; i++ ) {
+                        const dependency            = dependencies[i];
+                        const [ optionId, sectionId = this.sectionId ] = dependency.split( '.' ).reverse();
+                        const dependencyValue       = this.allSettingsValues[ sectionId ][ optionId ];
+                        const [ operator, value ]   = _.chain( conditions[ dependency ] ).pairs().first().value();
 
-                        case 'greater_than_equal':
-                            if ( ! ( dependencyValue >= value ) ) {
-                                shouldShow = false;
-                            }
-                            break;
+                        switch ( operator ) {
+                            case 'greater_than':
+                                if ( ! ( dependencyValue > value ) ) {
+                                    shouldShow = false;
+                                }
+                                break;
 
-                        case 'less_than':
-                            if ( ! ( dependencyValue < value ) ) {
-                                shouldShow = false;
-                            }
-                            break;
+                            case 'greater_than_equal':
+                                if ( ! ( dependencyValue >= value ) ) {
+                                    shouldShow = false;
+                                }
+                                break;
 
-                        case 'less_than':
-                            if ( ! ( dependencyValue <= value ) ) {
-                                shouldShow = false;
-                            }
-                            break;
+                            case 'less_than':
+                                if ( ! ( dependencyValue < value ) ) {
+                                    shouldShow = false;
+                                }
+                                break;
 
-                        case 'contains':
-                            if ( ! Object.values( dependencyValue ).includes( value ) ) {
-                                shouldShow = false;
-                            }
-                            break;
+                            case 'less_than':
+                                if ( ! ( dependencyValue <= value ) ) {
+                                    shouldShow = false;
+                                }
+                                break;
 
-                        case 'equal':
-                        default:
-                            if ( dependencyValue !== value ) {
-                                shouldShow = false;
-                            }
+                            case 'contains':
+                                if ( ! Object.values( dependencyValue ).includes( value ) ) {
+                                    shouldShow = false;
+                                }
+                                break;
+
+                            case 'equal':
+                            default:
+                                if ( dependencyValue !== value ) {
+                                    shouldShow = false;
+                                }
+                                break;
+                        }
+
+                        if ( ! shouldShow ) {
                             break;
+                        }
                     }
+                }
 
-                    if ( ! shouldShow ) {
-                        break;
+                return shouldShow;
+            },
+
+            mapApiSource() {
+                return this.allSettingsValues?.dokan_appearance?.map_api_source;
+            },
+
+            mapLocation() {
+                let location = {
+                    ...{
+                        latitude: 23.709921,
+                        longitude: 90.40714300000002,
+                        address: 'Dhaka',
+                        zoom: 10
+                    },
+
+                    ...this.fieldValue[ this.fieldData.name ],
+                };
+
+                location = {
+                    zoom      : parseInt( location.zoom ),
+                    address   : `${location.address}`,
+                    latitude  : parseFloat( location.latitude ),
+                    longitude : parseFloat( location.longitude ),
+                };
+
+                return location;
+            },
+
+            googleMapApiKey() {
+                return this.allSettingsValues?.dokan_appearance?.gmap_api_key;
+            },
+
+            mapboxAccessToken() {
+                return this.allSettingsValues?.dokan_appearance?.mapbox_access_token;
+            },
+
+            isSocialFieldActivated() {
+                for (const data in this.fieldData) {
+                    if (this.fieldData[data].social_field && 'html' !== this.fieldData[data].type && ! this.fieldValue[this.fieldData[data].name]) {
+                        return false;
                     }
                 }
-            }
 
-            return shouldShow;
+                return true;
+            }
         },
 
-        mapApiSource() {
-            return this.allSettingsValues?.dokan_appearance?.map_api_source;
+        beforeMount() {
+            if ( 'multicheck' === this.fieldData.type && ! this.fieldValue[ this.fieldData.name ] ) {
+                this.fieldValue[ this.fieldData.name ] = this.fieldData.default;
+            }
         },
 
-        mapLocation() {
-            let location = {
-                ...{
-                    latitude: 23.709921,
-                    longitude: 90.40714300000002,
-                    address: 'Dhaka',
-                    zoom: 10
-                },
-
-                ...this.fieldValue[ this.fieldData.name ],
-            };
-
-            location = {
-                zoom      : parseInt( location.zoom ),
-                address   : `${location.address}`,
-                latitude  : parseFloat( location.latitude ),
-                longitude : parseFloat( location.longitude ),
-            };
-
-            return location;
-        },
+        methods: {
+            containCommonFields( type ) {
+                return _.contains( [ undefined, 'text', 'email', 'url', 'phone', 'time' ], type );
+            },
 
-        googleMapApiKey() {
-            return this.allSettingsValues?.dokan_appearance?.gmap_api_key;
-        },
+            setCheckedValue( checked, value ) {
+                this.fieldValue[ this.fieldData.name ][ value ] = checked ? value : '';
+            },
 
-        mapboxAccessToken() {
-            return this.allSettingsValues?.dokan_appearance?.mapbox_access_token;
-        },
+            addItem( type, name ) {
+                this.fieldValue[ name ] = this.fieldValue[ name ] || [];
 
-        isSocialFieldActivated() {
-            for (const data in this.fieldData) {
-                if (this.fieldData[data].social_field && 'html' !== this.fieldData[data].type && ! this.fieldValue[this.fieldData[data].name]) {
-                    return false;
+                if ( typeof this.repeatableItem[ name ] == 'undefined' || ! this.repeatableItem[ name ] )  {
+                    return;
                 }
-            }
-
-            return true;
-        }
-    },
-
-    beforeMount() {
-        if ( 'multicheck' === this.fieldData.type && ! this.fieldValue[ this.fieldData.name ] ) {
-            this.fieldValue[ this.fieldData.name ] = this.fieldData.default;
-        }
-    },
 
-    methods: {
-        containCommonFields( type ) {
-            return _.contains( [ undefined, 'text', 'email', 'url', 'phone', 'time' ], type );
-        },
+                this.fieldValue[ name ].push( {
+                        id    : this.repeatableItem[ name ].trim().replace(/\s+/g, '_').toLowerCase(),
+                        value : this.repeatableItem[ name ]
+                    }
+                );
+                this.repeatableItem[ name ] = '';
+            },
 
-        setCheckedValue( checked, value ) {
-            this.fieldValue[ this.fieldData.name ][ value ] = checked ? value : '';
-        },
+            removeItem( optionVal, name ) {
+                this.fieldValue[name].splice( optionVal, 1 );
+            },
 
-        addItem( type, name ) {
-            this.fieldValue[ name ] = this.fieldValue[ name ] || [];
+            haveCondition( fieldData ) {
+                return fieldData.hasOwnProperty( 'condition' );
+            },
 
-            if ( typeof this.repeatableItem[ name ] == 'undefined' || ! this.repeatableItem[ name ] )  {
-                return;
-            }
+            checkConditionLogic( fieldData, fieldValue ) {
+                var logic = fieldData.condition.logic;
+                var isValid = false;
 
-            this.fieldValue[ name ].push( {
-                    id    : this.repeatableItem[ name ].trim().replace(/\s+/g, '_').toLowerCase(),
-                    value : this.repeatableItem[ name ]
+                _.each( logic, function( value, key ) {
+                    if ( _.contains( value, fieldValue[ key ] ) ) {
+                        isValid = true;
+                    }
+                } );
+
+                return isValid;
+            },
+
+            onHideMap( hideMap ) {
+                this.hideMap = hideMap;
+            },
+
+            onUpdateMap( payload ) {
+                this.fieldValue[ this.fieldData.name ] = { ...this.mapLocation, ...payload };
+            },
+
+            isSocialChecked() {
+                /**
+                 * If social field has enabled status saved return it or return the default value or return 'on'
+                 *
+                 * @since DOKAN_SINCE
+                 */
+                if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['name'] && this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ] ) {
+                    return this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ];
+                } else if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['default'] ) {
+                    return this.fieldData[ 'enable_status' ]['default'];
                 }
-            );
-            this.repeatableItem[ name ] = '';
-        },
 
-        removeItem( optionVal, name ) {
-            this.fieldValue[name].splice( optionVal, 1 );
-        },
+                return 'on';
+            },
 
-        haveCondition( fieldData ) {
-            return fieldData.hasOwnProperty( 'condition' );
-        },
 
-        checkConditionLogic( fieldData, fieldValue ) {
-            var logic = fieldData.condition.logic;
-            var isValid = false;
+            thisSomeEvent(value) {
+                console.log('hello priting...', value);
+            },
 
-            _.each( logic, function( value, key ) {
-                if ( _.contains( value, fieldValue[ key ] ) ) {
-                    isValid = true;
+            isSwitchOptionChecked( optionKey ) {
+                if ( 'multicheck' === this.fieldData.type ) {
+                    return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ][ optionKey ] === optionKey;
+                } else if ( 'radio' === this.fieldData.type ) {
+                    return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ] === optionKey;
                 }
-            } );
-
-            return isValid;
-        },
-
-        onHideMap( hideMap ) {
-            this.hideMap = hideMap;
-        },
-
-        onUpdateMap( payload ) {
-            this.fieldValue[ this.fieldData.name ] = { ...this.mapLocation, ...payload };
-        },
-
-        isSocialChecked() {
-            /**
-             * If social field has enabled status saved return it or return the default value or return 'on'
-             *
-             * @since DOKAN_SINCE
-             */
-            if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['name'] && this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ] ) {
-                return this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ];
-            } else if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['default'] ) {
-                return this.fieldData[ 'enable_status' ]['default'];
-            }
-
-            return 'on';
-        },
-
 
-        thisSomeEvent(value) {
-            console.log('hello priting...', value);
-        },
+                return false;
+            },
 
-        isSwitchOptionChecked( optionKey ) {
-            if ( 'multicheck' === this.fieldData.type ) {
-                return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ][ optionKey ] === optionKey;
-            } else if ( 'radio' === this.fieldData.type ) {
-                return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ] === optionKey;
-            }
+            expandSocial() {
+                this.expandSocials = ! this.expandSocials;
+            },
 
-            return false;
-        },
+            getSocialValue( optionValue ) {
+                this.fieldValue[ optionValue.name ] = this.fieldValue[ optionValue.name ] ? this.fieldValue[ optionValue.name ] : '';
+            },
 
-        expandSocial() {
-            this.expandSocials = ! this.expandSocials;
-        },
+            isChecked() {
+                return ! this.fieldValue[ this.fieldData.name ] ? this.fieldData.default : this.fieldValue[ this.fieldData.name ];
+            },
 
-        getSocialValue( optionValue ) {
-            this.fieldValue[ optionValue.name ] = this.fieldValue[ optionValue.name ] ? this.fieldValue[ optionValue.name ] : '';
-        },
+            onToggleSwitch( status, key ) {
+                if ( 'isChecked' !== key ) {
+                    return;
+                }
 
-        isChecked() {
-            return ! this.fieldValue[ this.fieldData.name ] ? this.fieldData.default : this.fieldValue[ this.fieldData.name ];
-        },
+                this.checked                           = status ? 'on' : 'off';
+                this.fieldValue[ this.fieldData.name ] = status ? 'on' : 'off';
 
-        onToggleSwitch( status, key ) {
-            if ( 'isChecked' !== key ) {
-                return;
-            }
+                this.$root.$emit( 'onFieldSwitched', this.fieldValue[ this.fieldData.name ], this.fieldData.name );
+            },
 
-            this.checked                           = status ? 'on' : 'off';
-            this.fieldValue[ this.fieldData.name ] = status ? 'on' : 'off';
+            onSocialToggleSwitch( status, key ) {
+                if ( 'isSocialChecked' !== key ) {
+                    return;
+                }
 
-            this.$root.$emit( 'onFieldSwitched', this.fieldValue[ this.fieldData.name ], this.fieldData.name );
-        },
+                this.socialChecked                     = status ? 'on' : 'off';
+                this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ]          = status ? 'on' : 'off';
+            },
 
-        onSocialToggleSwitch( status, key ) {
-            if ( 'isSocialChecked' !== key ) {
-                return;
-            }
+            hasError( key ) {
+                let errors = this.errors;
 
-            this.socialChecked                     = status ? 'on' : 'off';
-            this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ]          = status ? 'on' : 'off';
-        },
+                if ( ! errors || typeof errors === 'undefined' ) {
+                    return false;
+                }
 
-        hasError( key ) {
-            let errors = this.errors;
+                if ( errors.length < 1 ) {
+                    return false;
+                }
 
-            if ( ! errors || typeof errors === 'undefined' ) {
-                return false;
-            }
+                if ( errors.includes( key ) ) {
+                    return key;
+                }
+            },
 
-            if ( errors.length < 1 ) {
-                return false;
-            }
+            getError( label ) {
+                return label + ' ' + this.__( 'is required.', 'dokan-lite' )
+            },
 
-            if ( errors.includes( key ) ) {
-                return key;
-            }
-        },
+            hasValidationError( key ) {
+                if ( this.validationErrors.filter( e => e.name === key ).length > 0 ) {
+                    return key;
+                }
+            },
 
-        getError( label ) {
-            return label + ' ' + this.__( 'is required.', 'dokan-lite' )
-        },
+            getValidationErrorMessage( key ) {
+                let errorMessage = '';
+                this.validationErrors.forEach( obj => {
+                    if ( obj.name === key ) {
+                        errorMessage = obj.error;
+                    }
+                } );
 
-        hasValidationError( key ) {
-            if ( this.validationErrors.filter( e => e.name === key ).length > 0 ) {
-                return key;
-            }
-        },
+                return errorMessage;
+            },
 
-        getValidationErrorMessage( key ) {
-            let errorMessage = '';
-            this.validationErrors.forEach( obj => {
-                if ( obj.name === key ) {
-                    errorMessage = obj.error;
+            toggleColorPicker( data ) {
+                if ( this.fieldData.name === data.key ) {
+                    this.singleColorPicker.show_pallete = ! data.values.show_pallete;
+                } else {
+                    this.singleColorPicker.show_pallete = false;
                 }
-            } );
-
-            return errorMessage;
-        },
-
-        toggleColorPicker( data ) {
-            if ( this.fieldData.name === data.key ) {
-                this.singleColorPicker.show_pallete = ! data.values.show_pallete;
-            } else {
-                this.singleColorPicker.show_pallete = false;
-            }
-        },
+            },
 
-        setCustomColor( value, key ) {
-            if ( ! key ) {
-                return;
-            }
+            setCustomColor( value, key ) {
+                if ( ! key ) {
+                    return;
+                }
 
-            this.fieldData[ key ] = value;
+                this.fieldData[ key ] = value;
+            },
         },
-    },
-};
+    };
 </script>
 
 <style lang="less">
-span.repeatable-item-description {
-    color: #999;
-    font-size: 11px;
-    font-style: italic;
-}
-ul.dokan-settings-repeatable-list {
-    display: flex;
-    padding: 20px 0 0 20px;
-    flex-wrap: wrap;
-    text-align: right;
-    justify-content: right;
-
-    li {
-        color: rgba(0, 0, 0, 0.87);
-        border: 1px solid rgba(0, 0, 0, 0.10);
-        padding: 5px 12px;
+    span.repeatable-item-description {
+        color: #999;
+        font-size: 11px;
+        font-style: italic;
+    }
+    ul.dokan-settings-repeatable-list {
         display: flex;
-        font-size: 13px;
-        box-sizing: border-box;
-        background: rgba(182, 206, 254, 0.38);
-        margin-top: 6px;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
-        align-items: center;
-        margin-left: 12px;
-        font-family: 'Roboto', sans-serif;
-        line-height: 1;
-        border-radius: 8px;
-        justify-content: center;
-
-        span.remove-item{
-            color: #fff;
-            width: 15px;
-            margin: 0;
-            height: 15px;
-            cursor: pointer;
-            font-size: 15px;
-            background: #1aa0f7;
-            padding-top: 0;
-            margin-left: 5px;
-            border-radius: 50%;
+        padding: 20px 0 0 20px;
+        flex-wrap: wrap;
+        text-align: right;
+        justify-content: right;
+
+        li {
+            color: rgba(0, 0, 0, 0.87);
+            border: 1px solid rgba(0, 0, 0, 0.10);
+            padding: 5px 12px;
+            display: flex;
+            font-size: 13px;
+            box-sizing: border-box;
+            background: rgba(182, 206, 254, 0.38);
+            margin-top: 6px;
+            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+            align-items: center;
+            margin-left: 12px;
+            font-family: 'Roboto', sans-serif;
+            line-height: 1;
+            border-radius: 8px;
+            justify-content: center;
+
+            span.remove-item{
+                color: #fff;
+                width: 15px;
+                margin: 0;
+                height: 15px;
+                cursor: pointer;
+                font-size: 15px;
+                background: #1aa0f7;
+                padding-top: 0;
+                margin-left: 5px;
+                border-radius: 50%;
+            }
         }
     }
-}
-.dokan-repetable-add-item-btn {
-    font-size: 16px !important;
-    font-weight: bold !important;
-    height: 25px !important;
-    line-height: 22px !important;
-}
-.percent_fee, .fixed_fee {
-    display: inline-block;
-}
-.percent_fee input, .fixed_fee input {
-    width: 60px;
-}
-.additional_fee .description {
-    margin-left: 10px;
-    margin-top: -10px;
-}
-.dokan-error {
-    color: red;
-    margin-top: .5em;
-    font-style: italic;
-    margin-bottom: 0;
-}
-.dokan-input-validation-error {
-    border-color: red !important;
-}
-.dokan-error.combine-commission {
-    margin-left: 10px;
-}
-.dokan-settings-sub-section {
-    margin-bottom: 30px;
-
-    .sub-section-title {
-        margin: 0;
-        font-size: 22px;
-        font-family: Roboto, sans-serif;
-        font-weight: 600;
-        line-height: 26px;
-        margin-bottom: 8px;
+    .dokan-repetable-add-item-btn {
+        font-size: 16px !important;
+        font-weight: bold !important;
+        height: 25px !important;
+        line-height: 22px !important;
+    }
+    .percent_fee, .fixed_fee {
+        display: inline-block;
+    }
+    .percent_fee input, .fixed_fee input {
+        width: 60px;
+    }
+    .additional_fee .description {
+        margin-left: 10px;
+        margin-top: -10px;
+    }
+    .dokan-error {
+        color: red;
+        margin-top: .5em;
+        font-style: italic;
+        margin-bottom: 0;
+    }
+    .dokan-input-validation-error {
+      border-color: red !important;
+    }
+    .dokan-error.combine-commission {
+        margin-left: 10px;
     }
+    .dokan-settings-sub-section {
+        margin-bottom: 30px;
 
-    .sub-section-description {
-        margin: 0;
-        font-size: 15px;
-        font-weight: 300;
-        line-height: 21px;
-        font-family: Roboto, sans-serif;
+        .sub-section-title {
+            margin: 0;
+            font-size: 22px;
+            font-family: Roboto, sans-serif;
+            font-weight: 600;
+            line-height: 26px;
+            margin-bottom: 8px;
+        }
+
+        .sub-section-description {
+            margin: 0;
+            font-size: 15px;
+            font-weight: 300;
+            line-height: 21px;
+            font-family: Roboto, sans-serif;
 
-        .learn-more-btn {
-            cursor: pointer;
-            text-decoration: none;
+            .learn-more-btn {
+                cursor: pointer;
+                text-decoration: none;
+            }
         }
     }
-}
-.field_contents.data_clear {
-    background-color: #FFFBF3;
+    .field_contents.data_clear {
+        background-color: #FFFBF3;
 
-    .field_desc,
-    .fa-exclamation-triangle {
-        color: #E67E22 !important;
+        .field_desc,
+        .fa-exclamation-triangle {
+            color: #E67E22 !important;
+        }
     }
-}
-.field_contents {
-    border: 1px solid #B0A7A7;
-    padding: 14px 30px 18px 27px;
-    border-top: 0;
-    background: rgba(244, 246, 250, 0.17);
-
-    fieldset {
-        display: flex;
-        justify-content: space-between;
+    .field_contents {
+        border: 1px solid #B0A7A7;
+        padding: 14px 30px 18px 27px;
+        border-top: 0;
+        background: rgba(244, 246, 250, 0.17);
 
-        .field_data {
-            flex: 2;
+        fieldset {
+            display: flex;
+            justify-content: space-between;
 
-            .field_heading {
-                color: #000000;
-                margin: 0;
-                font-size: 17px;
-                font-style: normal;
-                font-weight: 600;
-                line-height: 35px;
-                font-family: 'Roboto', sans-serif;
+            .field_data {
+                flex: 2;
 
-                span {
-                    i {
-                        margin: 5px 0 0 5px;
-                    }
+                .field_heading {
+                    color: #000000;
+                    margin: 0;
+                    font-size: 17px;
+                    font-style: normal;
+                    font-weight: 600;
+                    line-height: 35px;
+                    font-family: 'Roboto', sans-serif;
 
-                    .tooltip {
-                        font-size: 14px;
+                    span {
+                        i {
+                            margin: 5px 0 0 5px;
+                        }
+
+                        .tooltip {
+                            font-size: 14px;
+                        }
                     }
                 }
-            }
 
-            .field_desc {
-                color: #000;
-                margin: 0;
-                font-size: 13px;
-                font-style: normal;
-                font-weight: 300;
-                line-height: 17px;
-                font-family: 'Roboto', sans-serif;
+                .field_desc {
+                    color: #000;
+                    margin: 0;
+                    font-size: 13px;
+                    font-style: normal;
+                    font-weight: 300;
+                    line-height: 17px;
+                    font-family: 'Roboto', sans-serif;
 
-                a {
-                    display: inline-block;
+                    a {
+                        display: inline-block;
 
-                    &:hover {
-                        box-shadow: 0 0 0 1px transparent;
-                    }
-                    &:active {
-                        box-shadow: 0 0 0 1px transparent;
-                    }
-                    &:focus {
-                        box-shadow: 0 0 0 1px transparent;
+                        &:hover {
+                            box-shadow: 0 0 0 1px transparent;
+                        }
+                        &:active {
+                            box-shadow: 0 0 0 1px transparent;
+                        }
+                        &:focus {
+                            box-shadow: 0 0 0 1px transparent;
+                        }
                     }
                 }
             }
+
+            .social-switch-wraper {
+                display: flex;
+                align-items: center;
+            }
         }
 
-        .social-switch-wraper {
+        .combine_fields {
             display: flex;
-            align-items: center;
-        }
-    }
+            justify-content: right;
 
-    .combine_fields {
-        display: flex;
-        justify-content: right;
+            .percent_fee {
+                padding-right: 10px;
+            }
 
-        .percent_fee {
-            padding-right: 10px;
+            .fixed_fee,
+            .percent_fee {
+                input {
+                    width: 100px;
+                }
+            }
         }
 
-        .fixed_fee,
-        .percent_fee {
-            input {
-                width: 100px;
+        .multicheck_fields {
+            & > div {
+                display: flex;
+                align-items: center;
+                justify-content: right;
+
+                label {
+                    color: #000;
+                    cursor: inherit;
+                    margin: 9px 0 9px 15px;
+                    border: 1px solid rgba(0, 0, 0, 0.10);
+                    display: inline-block;
+                    font-size: 12px;
+                    font-style: normal;
+                    line-height: 14px;
+                    font-family: 'Roboto', sans-serif;
+                    border-radius: 20px !important;
+                    border-radius: 8px;
+                }
             }
         }
-    }
 
-    .multicheck_fields {
-        & > div {
-            display: flex;
-            align-items: center;
-            justify-content: right;
+        .editor_field {
+            margin-top: 20px;
+        }
 
+        .radio_fields {
             label {
-                color: #000;
-                cursor: inherit;
-                margin: 9px 0 9px 15px;
-                border: 1px solid rgba(0, 0, 0, 0.10);
+                border: 0.882967px solid #B0A7A7;
+                padding: 10px 15px;
                 display: inline-block;
+                overflow: hidden;
                 font-size: 12px;
-                font-style: normal;
-                line-height: 14px;
+                box-shadow: 0px 3.53187px 3.53187px rgba(0, 0, 0, 0.10);
                 font-family: 'Roboto', sans-serif;
-                border-radius: 20px !important;
-                border-radius: 8px;
-            }
-        }
-    }
-
-    .editor_field {
-        margin-top: 20px;
-    }
+                font-weight: 400;
+                line-height: 14px;
+                border-right: 0;
 
-    .radio_fields {
-        label {
-            border: 0.882967px solid #B0A7A7;
-            padding: 10px 15px;
-            display: inline-block;
-            overflow: hidden;
-            font-size: 12px;
-            box-shadow: 0px 3.53187px 3.53187px rgba(0, 0, 0, 0.10);
-            font-family: 'Roboto', sans-serif;
-            font-weight: 400;
-            line-height: 14px;
-            border-right: 0;
+                &:first-child {
+                    border-top-left-radius: 5px;
+                    border-bottom-left-radius: 5px;
+                }
 
-            &:first-child {
-                border-top-left-radius: 5px;
-                border-bottom-left-radius: 5px;
-            }
+                &:last-child {
+                    border-right: 0.882967px solid #B0A7A7;
+                    border-top-right-radius: 5px;
+                    border-bottom-right-radius: 5px;
+                }
 
-            &:last-child {
-                border-right: 0.882967px solid #B0A7A7;
-                border-top-right-radius: 5px;
-                border-bottom-right-radius: 5px;
+                &:hover {
+                    color: rgba(3, 58, 163, 0.85);
+                    background: rgba(182, 206, 254, 0.38);
+                    box-sizing: border-box;
+                    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+                    border-color: rgba(3, 58, 163, 0.81);
+                }
             }
 
-            &:hover {
+            .checked {
                 color: rgba(3, 58, 163, 0.85);
+                border: 1px solid rgba(3, 58, 163, 0.81);
                 background: rgba(182, 206, 254, 0.38);
                 box-sizing: border-box;
                 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
-                border-color: rgba(3, 58, 163, 0.81);
             }
         }
 
-        .checked {
-            color: rgba(3, 58, 163, 0.85);
-            border: 1px solid rgba(3, 58, 163, 0.81);
-            background: rgba(182, 206, 254, 0.38);
-            box-sizing: border-box;
-            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
-        }
-    }
-
-    .repeatable_fields {
-        display: flex;
-        align-items: center;
-        justify-content: right;
+        .repeatable_fields {
+            display: flex;
+            align-items: center;
+            justify-content: right;
 
-        .dokan-repetable-add-item-btn {
-            color: #fff;
-            width: 25px;
-            border: 0;
-            padding: 0;
-            position: relative;
-            background: #2196F3;
-            min-height: 25px;
-            margin-left: 8px;
-            border-radius: 50%;
-
-            .dashicons-plus-alt2 {
-                top: 50%;
-                left: 50%;
-                position: absolute;
-                transform: translate(-50%, -50%);
-                font-size: 18px;
+            .dokan-repetable-add-item-btn {
+                color: #fff;
+                width: 25px;
+                border: 0;
+                padding: 0;
+                position: relative;
+                background: #2196F3;
+                min-height: 25px;
+                margin-left: 8px;
+                border-radius: 50%;
+
+                .dashicons-plus-alt2 {
+                    top: 50%;
+                    left: 50%;
+                    position: absolute;
+                    transform: translate(-50%, -50%);
+                    font-size: 18px;
+                }
             }
         }
-    }
 
-    .dokan-setting-warning {
-        padding: 10px 10px 10px 0;
+        .dokan-setting-warning {
+            padding: 10px 10px 10px 0;
 
-        .dokan-setting-warning-label {
-            color: #d63638;
-            font-weight: bold;
-            margin-right: 10px;
+            .dokan-setting-warning-label {
+                color: #d63638;
+                font-weight: bold;
+                margin-right: 10px;
 
-            span {
-                margin-top: 6px !important;
+                span {
+                    margin-top: 6px !important;
+                }
+            }
+
+            .dashicons {
+                margin: 0px;
+                padding: 0px;
             }
         }
 
-        .dashicons {
-            margin: 0px;
-            padding: 0px;
+        .add_files {
+            display: flex;
+            align-items: center;
+            justify-content: right;
         }
-    }
 
-    .add_files {
-        display: flex;
-        align-items: center;
-        justify-content: right;
-    }
+        .field {
+            flex: 2;
+            align-self: center;
+            text-align: right;
 
-    .field {
-        flex: 2;
-        align-self: center;
-        text-align: right;
+            .switch {
+                display: inline-block;
+            }
 
-        .switch {
-            display: inline-block;
-        }
+            input[type='radio'],
+            input[type='checkbox'] {
+                display: none;
+            }
 
-        input[type='radio'],
-        input[type='checkbox'] {
-            display: none;
-        }
+            select,
+            textarea,
+            input[type='text'],
+            input[type='number'],
+            input[type='button'] {
+                border: 0.957434px solid #686666;
+                min-height: 32px;
+                box-shadow: 0px 3.82974px 3.82974px rgba(0, 0, 0, 0.10);
+                border-radius: 5px;
+            }
 
-        select,
-        textarea,
-        input[type='text'],
-        input[type='number'],
-        input[type='button'] {
-            border: 0.957434px solid #686666;
-            min-height: 32px;
-            box-shadow: 0px 3.82974px 3.82974px rgba(0, 0, 0, 0.10);
-            border-radius: 5px;
-        }
+            select,
+            textarea {
+                width: 100%;
+            }
 
-        select,
-        textarea {
-            width: 100%;
-        }
+            .small {
+                max-width: 35% !important;
+            }
 
-        .small {
-            max-width: 35% !important;
-        }
+            .medium {
+                max-width: 70% !important;
+            }
 
-        .medium {
-            max-width: 70% !important;
-        }
+            .large {
+                max-width: 100% !important;
+            }
 
-        .large {
-            max-width: 100% !important;
-        }
+            label.checked {
+                color: rgba(3, 58, 163, 0.85);
+                border: 1px solid rgba(3, 58, 163, 0.81);
+                background: rgba(182, 206, 254, 0.38);
+                box-sizing: border-box;
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
 
-        label.checked {
-            color: rgba(3, 58, 163, 0.85);
-            border: 1px solid rgba(3, 58, 163, 0.81);
-            background: rgba(182, 206, 254, 0.38);
-            box-sizing: border-box;
-            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+                .dashicons-yes {
+                    display: inline-block;
+                }
+            }
 
             .dashicons-yes {
-                display: inline-block;
+                color: #fff;
+                width: 15px;
+                height: 15px;
+                margin: -1px 3px 0 0;
+                cursor: pointer;
+                display: none;
+                font-size: 15px;
+                background: #1aa0f7;
+                padding-top: 0;
+                border-radius: 50%;
             }
         }
 
-        .dashicons-yes {
-            color: #fff;
-            width: 15px;
-            height: 15px;
-            margin: -1px 3px 0 0;
-            cursor: pointer;
-            display: none;
-            font-size: 15px;
-            background: #1aa0f7;
-            padding-top: 0;
-            border-radius: 50%;
+        .scl_fields_disable {
+            filter: grayscale(1);
         }
-    }
 
-    .scl_fields_disable {
-        filter: grayscale(1);
-    }
-
-    .scl_fields {
-        margin: 15px 0 4px 0px;
-        border: 0.82px solid #E5E5E5;
-        padding: 10px 25px;
-        background: rgba(220, 232, 254, 0.38);
-        box-shadow: 0px 3.28px 3.28px rgba(0, 0, 0, 0.10);
-        border-radius: 6.56px;
-
-        .scl_header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
+        .scl_fields {
+            margin: 15px 0 4px 0px;
+            border: 0.82px solid #E5E5E5;
+            padding: 10px 25px;
+            background: rgba(220, 232, 254, 0.38);
+            box-shadow: 0px 3.28px 3.28px rgba(0, 0, 0, 0.10);
+            border-radius: 6.56px;
 
-            .scl_contents {
-                flex: 2;
+            .scl_header {
                 display: flex;
                 align-items: center;
+                justify-content: space-between;
 
-                .scl_icon {
-                    flex: 1.3;
-                    text-align: left;
-                    align-self: center;
+                .scl_contents {
+                    flex: 2;
+                    display: flex;
+                    align-items: center;
 
-                    img {
-                        width: 48px;
-                        height: 48px;
-                    }
+                    .scl_icon {
+                        flex: 1.3;
+                        text-align: left;
+                        align-self: center;
 
-                    span {
-                        font-size: 50px;
+                        img {
+                            width: 48px;
+                            height: 48px;
+                        }
+
+                        span {
+                            font-size: 50px;
+                        }
                     }
-                }
 
-                .scl_desc {
-                    flex: 6;
-                    color: #000000;
-                    font-size: 14px;
-                    text-align: left;
-                    font-style: normal;
-                    font-weight: 300;
-                    line-height: 20px;
-                    font-family: 'Roboto', sans-serif;
+                    .scl_desc {
+                        flex: 6;
+                        color: #000000;
+                        font-size: 14px;
+                        text-align: left;
+                        font-style: normal;
+                        font-weight: 300;
+                        line-height: 20px;
+                        font-family: 'Roboto', sans-serif;
+                    }
                 }
-            }
 
-            .expand_btn {
-                flex: 2;
+                .expand_btn {
+                    flex: 2;
 
-                span {
-                    color: #fff;
-                    width: 30px;
-                    cursor: pointer;
-                    margin: 0;
-                    border: 0;
-                    padding: 0;
-                    position: relative;
-                    font-size: 20px;
-                    background: #2196f3;
-                    min-height: 30px;
-                    border-radius: 50%;
-
-                    &:before {
-                        top: 50%;
-                        left: 50%;
-                        position: absolute;
-                        transform: translate(-50%, -50%);
+                    span {
+                        color: #fff;
+                        width: 30px;
+                        cursor: pointer;
+                        margin: 0;
+                        border: 0;
+                        padding: 0;
+                        position: relative;
+                        font-size: 20px;
+                        background: #2196f3;
+                        min-height: 30px;
+                        border-radius: 50%;
+
+                        &:before {
+                            top: 50%;
+                            left: 50%;
+                            position: absolute;
+                            transform: translate(-50%, -50%);
+                        }
                     }
-                }
 
-                .active-social-expend-btn {
-                    background: #4CAF4F;
+                    .active-social-expend-btn {
+                        background: #4CAF4F;
+                    }
                 }
             }
-        }
-
-        .scl_info {
-            background: #fff;
-
-            .scl_text,
-            .scl_html {
-                border: 1px solid #b0a7a7;
-                display: flex;
-                padding: 10px 30px 15px 27px;
-                border-top: 0;
-                background: rgba(244,246,250,.17);
-                justify-content: space-between;
-
-                fieldset {
-                    width: 100%;
 
-                    .html_contents {
-                        width: 50%;
-                        text-align: left;
-
-                        .field_heading {
-                            color: #000;
-                            margin: 0;
-                            font-size: 15px;
-                            font-style: normal;
-                            font-weight: 600;
-                            line-height: 30px;
-                            font-family: Roboto,sans-serif;
-
-                            span {
-                                i {
-                                    margin: 2.5px 0 0 5px;
-                                }
-
-                                .tooltip {
-                                    font-size: 14px;
+            .scl_info {
+                background: #fff;
+
+                .scl_text,
+                .scl_html {
+                    border: 1px solid #b0a7a7;
+                    display: flex;
+                    padding: 10px 30px 15px 27px;
+                    border-top: 0;
+                    background: rgba(244,246,250,.17);
+                    justify-content: space-between;
+
+                    fieldset {
+                        width: 100%;
+
+                        .html_contents {
+                            width: 50%;
+                            text-align: left;
+
+                            .field_heading {
+                                color: #000;
+                                margin: 0;
+                                font-size: 15px;
+                                font-style: normal;
+                                font-weight: 600;
+                                line-height: 30px;
+                                font-family: Roboto,sans-serif;
+
+                                span {
+                                    i {
+                                        margin: 2.5px 0 0 5px;
+                                    }
+
+                                    .tooltip {
+                                        font-size: 14px;
+                                    }
                                 }
                             }
-                        }
 
-                        .field_desc {
-                            color: #000;
-                            margin: 0;
-                            font-size: 13px;
-                            font-style: normal;
-                            font-weight: 300;
-                            line-height: 17px;
-                            font-family: Roboto,sans-serif;
+                            .field_desc {
+                                color: #000;
+                                margin: 0;
+                                font-size: 13px;
+                                font-style: normal;
+                                font-weight: 300;
+                                line-height: 17px;
+                                font-family: Roboto,sans-serif;
+                            }
                         }
-                    }
 
-                    .fields {
-                        width: 50%;
-                        align-self: center;
-                        text-align: right;
+                        .fields {
+                            width: 50%;
+                            align-self: center;
+                            text-align: right;
 
-                        .checked {
-                            color: rgba(3, 58, 163, 0.85);
-                            border: 1px solid rgba(3, 58, 163, 0.81);
-                            background: rgba(182, 206, 254, 0.38);
-                            box-sizing: border-box;
-                            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+                            .checked {
+                                color: rgba(3, 58, 163, 0.85);
+                                border: 1px solid rgba(3, 58, 163, 0.81);
+                                background: rgba(182, 206, 254, 0.38);
+                                box-sizing: border-box;
+                                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
 
-                            .dashicons-yes {
-                                display: inline-block;
+                                .dashicons-yes {
+                                    display: inline-block;
+                                }
                             }
                         }
                     }
-                }
 
-            }
+                }
 
-            &:nth-child(2) {
-                margin-top: 15px;
-                border-top: 1px solid #b0a7a7;
-            }
+                &:nth-child(2) {
+                    margin-top: 15px;
+                    border-top: 1px solid #b0a7a7;
+                }
 
-            &:last-child {
-                margin-bottom: 10px;
+                &:last-child {
+                    margin-bottom: 10px;
+                }
             }
         }
-    }
-
-    .gmap-field {
-        text-align: left;
 
-        .mapbox-wrapper {
-            .address-input {
-                color: #000;
-                margin: 20px 0;
-                font-size: 15px;
-
-                input {
-                    width: 100%;
-                    margin: 5px 0 3px;
-                    display: block;
-                    max-width: 320px;
-                    font-weight: 400;
+        .gmap-field {
+            text-align: left;
+
+            .mapbox-wrapper {
+                .address-input {
+                    color: #000;
+                    margin: 20px 0;
+                    font-size: 15px;
+
+                    input {
+                        width: 100%;
+                        margin: 5px 0 3px;
+                        display: block;
+                        max-width: 320px;
+                        font-weight: 400;
+                    }
                 }
             }
-        }
 
-        .gmap-wrap {
-            .search-address {
-                color: #000;
-                margin: 20px 0;
-                max-width: 320px;
+            .gmap-wrap {
+                .search-address {
+                    color: #000;
+                    margin: 20px 0;
+                    max-width: 320px;
+                }
             }
         }
     }
-}
-.dokan-settings-field-type-radio {
+    .dokan-settings-field-type-radio {
 
-    fieldset {
-        & > label:not(:last-child) {
-            margin-right: 12px !important;
+        fieldset {
+            & > label:not(:last-child) {
+                margin-right: 12px !important;
 
-            & > input[type="radio"] {
-                margin-right: 2px;
+                & > input[type="radio"] {
+                    margin-right: 2px;
+                }
             }
         }
     }
-}
-.col-3 {
-    width: 24.5%;
-    display: inline-block;
+    .col-3 {
+        width: 24.5%;
+        display: inline-block;
 
-    select {
-        width: 100%;
+        select {
+            width: 100%;
+        }
     }
-}
 
-@media only screen and (max-width: 430px) {
-    .field_contents {
-        padding: 14px 14px 18px 14px;
+    @media only screen and (max-width: 430px) {
+        .field_contents {
+            padding: 14px 14px 18px 14px;
 
-        fieldset {
-            display: block;
+            fieldset {
+                display: block;
 
-            .field_data {
-                .field_heading {
-                    font-size: 10px;
-                    line-height: 24px;
-                }
+                .field_data {
+                    .field_heading {
+                        font-size: 10px;
+                        line-height: 24px;
+                    }
 
-                .field_desc {
-                    font-size: 8px;
+                    .field_desc {
+                        font-size: 8px;
+                    }
                 }
-            }
 
-            .field {
-                margin-top: 15px;
-                text-align: left;
+                .field {
+                    margin-top: 15px;
+                    text-align: left;
 
-                select,
-                textarea,
-                input[type=text] {
-                    min-height: 28px;
-                    font-size: 8px;
-                }
+                    select,
+                    textarea,
+                    input[type=text] {
+                        min-height: 28px;
+                        font-size: 8px;
+                    }
 
-                .small {
-                    max-width: 35% !important;
-                }
+                    .small {
+                        max-width: 35% !important;
+                    }
 
-                .medium {
-                    max-width: 70% !important;
-                }
+                    .medium {
+                        max-width: 70% !important;
+                    }
 
-                .large {
-                    max-width: 100% !important;
+                    .large {
+                        max-width: 100% !important;
+                    }
                 }
-            }
 
-            .radio_fields {
-                label {
-                    &:first-child {
-                        display: flex;
+                .radio_fields {
+                    label {
+                        &:first-child {
+                            display: flex;
+                        }
                     }
                 }
             }
-        }
 
-        .scl_fields {
-            padding: 10px 15px;
+            .scl_fields {
+                padding: 10px 15px;
 
-            .scl_header {
-                display: block;
-
-                .scl_contents {
+                .scl_header {
                     display: block;
 
-                    .scl_desc {
-                        font-size: 8px;
+                    .scl_contents {
+                        display: block;
+
+                        .scl_desc {
+                            font-size: 8px;
+                        }
                     }
-                }
 
-                .expand_btn {
-                    text-align: left;
+                    .expand_btn {
+                        text-align: left;
+                    }
                 }
-            }
 
-            .scl_info {
-                .scl_html,
-                .scl_text {
-                    padding: 10px;
+                .scl_info {
+                    .scl_html,
+                    .scl_text {
+                        padding: 10px;
 
-                    .field_html {
-                        font-size: 10px;
-                        line-height: 20px;
-                    }
+                        .field_html {
+                            font-size: 10px;
+                            line-height: 20px;
+                        }
 
-                    .field_desc {
-                        font-size: 8px;
-                    }
+                        .field_desc {
+                            font-size: 8px;
+                        }
 
-                    select,
-                    textarea,
-                    input[type=text] {
-                        font-size: 8px;
-                        min-height: 28px;
+                        select,
+                        textarea,
+                        input[type=text] {
+                            font-size: 8px;
+                            min-height: 28px;
+                        }
                     }
                 }
             }
         }
     }
-}
-
-@media only screen and (max-width: 768px) {
-    .field {
-        select,
-        textarea,
-        input[type=text] {
-            max-width: 125px !important;
-        }
 
-        .small {
-            max-width: 35% !important;
-        }
+    @media only screen and (max-width: 768px) {
+        .field {
+            select,
+            textarea,
+            input[type=text] {
+                max-width: 125px !important;
+            }
 
-        .medium {
-            max-width: 70% !important;
-        }
+            .small {
+                max-width: 35% !important;
+            }
 
-        .large {
-            max-width: 100% !important;
+            .medium {
+                max-width: 70% !important;
+            }
+
+            .large {
+                max-width: 100% !important;
+            }
         }
     }
-}
 </style>
diff --git a/src/admin/components/SocialFields.vue b/src/admin/components/SocialFields.vue
index 6d42dc6cee..a7cc95bcdf 100644
--- a/src/admin/components/SocialFields.vue
+++ b/src/admin/components/SocialFields.vue
@@ -45,38 +45,38 @@
 </template>
 
 <script>
-import SecretInput from './SecretInput.vue';
+    import SecretInput from './SecretInput.vue';
 
-export default {
-    components: {
-        SecretInput
-    },
-    props: {
-        fieldData: {
-            type: Object,
-            required: true,
+    export default {
+        components: {
+            SecretInput
         },
+        props: {
+            fieldData: {
+                type: Object,
+                required: true,
+            },
 
-        fieldValue: {
-            type: Object,
-            required: true,
+            fieldValue: {
+                type: Object,
+                required: true,
+            },
         },
-    },
 
-    data() {
-        return {
-            copied: false,
-        }
-    },
-
-    methods: {
-        isSocialOptionChecked( optionKey ) {
-            if ( 'radio' === this.fieldData.type ) {
-                return this.fieldValue[this.fieldData.name] === optionKey ? true : false;
+        data() {
+            return {
+                copied: false,
             }
+        },
+
+        methods: {
+            isSocialOptionChecked( optionKey ) {
+                if ( 'radio' === this.fieldData.type ) {
+                    return this.fieldValue[this.fieldData.name] === optionKey ? true : false;
+                }
 
-            return false;
+                return false;
+            },
         },
-    },
-}
+    }
 </script>

From 19e6e431346b12099e9320979d5b2fd980bfd820 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Tue, 25 Jul 2023 18:02:06 +0600
Subject: [PATCH 06/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FRedesign=20withdraw=20m?=
 =?UTF-8?q?ethod=20and=20charge=20ui=20and=20save=20active=20withdraw=20an?=
 =?UTF-8?q?d=20charge=20data?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 includes/Admin/Settings.php                   |    5 +-
 includes/Withdraw/functions.php               |   24 +
 src/admin/components/Fields.vue               | 2386 ++++++++++-------
 src/admin/components/Fields/CombineInput.vue  |   13 +-
 .../components/Fields/WithdrawMethods.vue     |  159 ++
 5 files changed, 1654 insertions(+), 933 deletions(-)
 create mode 100644 src/admin/components/Fields/WithdrawMethods.vue

diff --git a/includes/Admin/Settings.php b/includes/Admin/Settings.php
index 0af5767cdf..07363d4aca 100644
--- a/includes/Admin/Settings.php
+++ b/includes/Admin/Settings.php
@@ -581,10 +581,11 @@ public function get_settings_fields() {
                 'withdraw_methods'      => [
                     'name'    => 'withdraw_methods',
                     'label'   => __( 'Withdraw Methods', 'dokan-lite' ),
-                    'desc'    => __( 'Select suitable withdraw methods for vendors', 'dokan-lite' ),
-                    'type'    => 'multicheck',
+                    'desc'    => __( 'Select suitable withdraw methods for vendors and set withdrawal charges', 'dokan-lite' ),
+                    'type'    => 'withdraw-methods',
                     'default' => apply_filters( 'dokan_settings_withdraw_methods_default', [ 'paypal' => 'paypal' ] ),
                     'options' => dokan_withdraw_get_methods(),
+                    'options_inputs_key' => 'withdraw_charges',
                     'tooltip' => __( 'Check to add available payment methods for vendors to withdraw money.', 'dokan-lite' ),
                 ],
                 'withdraw_limit'        => [
diff --git a/includes/Withdraw/functions.php b/includes/Withdraw/functions.php
index e519f2b887..e25d5f64cc 100644
--- a/includes/Withdraw/functions.php
+++ b/includes/Withdraw/functions.php
@@ -537,3 +537,27 @@ function dokan_is_withdraw_method_enabled( $method_id ) {
             && array_key_exists( $method_id, $payment_methods )
             && ! empty( $payment_methods[ $method_id ] );
 }
+
+function dokan_withdraw_get_method_charges() {
+    $charges     = dokan_get_option( 'withdraw_charges', 'dokan_withdraw', '' );
+    $methods     = array_keys( dokan_withdraw_get_methods() );
+    $default_val = [
+        'fixed'      => '',
+        'percentage' => '',
+    ];
+
+    if ( empty( $charges ) || ! is_array( $charges ) ) {
+        $charges = [];
+
+        foreach ( $methods as $method ) {
+            $charges[ $method ] = $default_val;
+        }
+    } else {
+        foreach ( $methods as $method ) {
+            $charges[ $method ]['fixed']      = ! empty( $charges[ $method ]['fixed'] ) ? wc_format_decimal( $charges[ $method ]['fixed'] ) : '';
+            $charges[ $method ]['percentage'] = ! empty( $charges[ $method ]['percentage'] ) ? wc_format_decimal( $charges[ $method ]['percentage'] ) : '';
+        }
+    }
+
+    return $charges;
+}
diff --git a/src/admin/components/Fields.vue b/src/admin/components/Fields.vue
index 2e5ad56e62..6a3b4d308b 100644
--- a/src/admin/components/Fields.vue
+++ b/src/admin/components/Fields.vue
@@ -1,7 +1,15 @@
 <template>
-    <div :class="[id, `dokan-settings-field-type-${fieldData.type}`]" v-if="shouldShow">
+    <div
+        :class="[ id, `dokan-settings-field-type-${ fieldData.type }` ]"
+        v-if="shouldShow"
+    >
         <template v-if="'sub_section' === fieldData.type">
-            <div class="dokan-settings-sub-section" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="dokan-settings-sub-section"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <h3 class="sub-section-title">{{ fieldData.label }}</h3>
                 <p class="sub-section-description">
                     {{ fieldData.description }}
@@ -10,7 +18,12 @@
         </template>
 
         <template v-if="containCommonFields( fieldData.type )">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
@@ -18,116 +31,273 @@
                             v-if="fieldData.secret_text"
                             :type="fieldData.type || 'text'"
                             :id="sectionId + '[' + fieldData.name + ']'"
-                            :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]"
+                            :name="sectionId + '[' + fieldData.name + ']'"
+                            v-model="fieldValue[ fieldData.name ]"
                         />
                         <input
                             v-else
                             :type="fieldData.type || 'text'"
-                            class="regular-text medium" :id="sectionId + '[' + fieldData.name + ']'"
-                            :class="[ { 'dokan-input-validation-error': hasValidationError( fieldData.name ) }, fieldData.class ]"
+                            class="regular-text medium"
+                            :id="sectionId + '[' + fieldData.name + ']'"
+                            :class="[
+                                {
+                                    'dokan-input-validation-error':
+                                        hasValidationError( fieldData.name ),
+                                },
+                                fieldData.class,
+                            ]"
                             :name="sectionId + '[' + fieldData.name + ']'"
-                            v-model="fieldValue[fieldData.name]"
+                            v-model="fieldValue[ fieldData.name ]"
                         />
                     </div>
                 </fieldset>
                 <p v-if="hasError( fieldData.name )" class="dokan-error">
                     {{ getError( fieldData.label ) }}
                 </p>
-                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                  {{ getValidationErrorMessage( fieldData.name ) }}
+                <p
+                    v-if="hasValidationError( fieldData.name )"
+                    class="dokan-error"
+                >
+                    {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'number' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
                         <label :for="sectionId + '[' + fieldData.name + ']'">
-                            <input type="number" :min="fieldData.min" :max="fieldData.max" :step="fieldData.step"
-                                class="regular-text medium" v-model="fieldValue[fieldData.name]"
-                                :class="[ { 'dokan-input-validation-error': hasValidationError( fieldData.name ) }, fieldData.class ]"
-                                :id="sectionId + '[' + fieldData.name + ']'" :name="sectionId + '[' + fieldData.name + ']'"/>
+                            <input
+                                type="number"
+                                :min="fieldData.min"
+                                :max="fieldData.max"
+                                :step="fieldData.step"
+                                class="regular-text medium"
+                                v-model="fieldValue[ fieldData.name ]"
+                                :class="[
+                                    {
+                                        'dokan-input-validation-error':
+                                            hasValidationError(
+                                                fieldData.name
+                                            ),
+                                    },
+                                    fieldData.class,
+                                ]"
+                                :id="sectionId + '[' + fieldData.name + ']'"
+                                :name="sectionId + '[' + fieldData.name + ']'"
+                            />
                         </label>
                     </div>
                 </fieldset>
                 <p v-if="hasError( fieldData.name )" class="dokan-error">
                     {{ getError( fieldData.label ) }}
                 </p>
-                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                  {{ getValidationErrorMessage( fieldData.name ) }}
+                <p
+                    v-if="hasValidationError( fieldData.name )"
+                    class="dokan-error"
+                >
+                    {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
-        <template v-if="'price' === fieldData.type && allSettingsValues.dokan_selling && 'combine' !== allSettingsValues.dokan_selling.commission_type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+        <template
+            v-if="
+                'price' === fieldData.type &&
+                allSettingsValues.dokan_selling &&
+                'combine' !== allSettingsValues.dokan_selling.commission_type
+            "
+        >
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
                         <label :for="sectionId + '[' + fieldData.name + ']'">
-                            <input type="text" :min="fieldData.min" class="regular-text medium" :id="sectionId + '[' + fieldData.name + ']'"
-                                :class="{ wc_input_decimal: allSettingsValues.dokan_selling.commission_type=='percentage', 'wc_input_price': allSettingsValues.dokan_selling.commission_type=='flat' }"
-                                :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]"/>
+                            <input
+                                type="text"
+                                :min="fieldData.min"
+                                class="regular-text medium"
+                                :id="sectionId + '[' + fieldData.name + ']'"
+                                :class="{
+                                    wc_input_decimal:
+                                        allSettingsValues.dokan_selling
+                                            .commission_type == 'percentage',
+                                    wc_input_price:
+                                        allSettingsValues.dokan_selling
+                                            .commission_type == 'flat',
+                                }"
+                                :name="sectionId + '[' + fieldData.name + ']'"
+                                v-model="fieldValue[ fieldData.name ]"
+                            />
                         </label>
                     </div>
                 </fieldset>
                 <p v-if="hasError( fieldData.name )" class="dokan-error">
                     {{ getError( fieldData.label ) }}
                 </p>
-                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                  {{ getValidationErrorMessage( fieldData.name ) }}
+                <p
+                    v-if="hasValidationError( fieldData.name )"
+                    class="dokan-error"
+                >
+                    {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
-        <template v-if="'combine' === fieldData.type && haveCondition( fieldData ) && fieldData.condition.type == 'show' && checkConditionLogic( fieldData, fieldValue )">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+        <template
+            v-if="
+                'combine' === fieldData.type &&
+                haveCondition( fieldData ) &&
+                fieldData.condition.type == 'show' &&
+                checkConditionLogic( fieldData, fieldValue )
+            "
+        >
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field combine_fields">
                         <div class="percent_fee">
-                            <input type="text" class="wc_input_decimal regular-text medium" :id="sectionId + '[' + fieldData.name + ']' + '[' + 'percent_fee' + ']'" :name="sectionId + '[' + fieldData.fields.percent_fee.name + ']'" v-model="fieldValue[fieldData.fields.percent_fee.name]">
+                            <input
+                                type="text"
+                                class="wc_input_decimal regular-text medium"
+                                :id="
+                                    sectionId +
+                                    '[' +
+                                    fieldData.name +
+                                    ']' +
+                                    '[' +
+                                    'percent_fee' +
+                                    ']'
+                                "
+                                :name="
+                                    sectionId +
+                                    '[' +
+                                    fieldData.fields.percent_fee.name +
+                                    ']'
+                                "
+                                v-model="
+                                    fieldValue[
+                                        fieldData.fields.percent_fee.name
+                                    ]
+                                "
+                            />
                             {{ '%' }}
                         </div>
                         <div class="fixed_fee">
                             {{ '+' }}
-                            <input type="text" class="wc_input_price regular-text medium" :id="sectionId + '[' + fieldData.name + ']' + '[' + 'fixed_fee' + ']'" :name="sectionId + '[' + fieldData.fields.fixed_fee.name + ']'" v-model="fieldValue[fieldData.fields.fixed_fee.name]">
+                            <input
+                                type="text"
+                                class="wc_input_price regular-text medium"
+                                :id="
+                                    sectionId +
+                                    '[' +
+                                    fieldData.name +
+                                    ']' +
+                                    '[' +
+                                    'fixed_fee' +
+                                    ']'
+                                "
+                                :name="
+                                    sectionId +
+                                    '[' +
+                                    fieldData.fields.fixed_fee.name +
+                                    ']'
+                                "
+                                v-model="
+                                    fieldValue[
+                                        fieldData.fields.fixed_fee.name
+                                    ]
+                                "
+                            />
                         </div>
                     </div>
                 </fieldset>
-                <p class="dokan-error combine-commission" v-if="hasError( fieldData.fields.percent_fee.name ) && hasError( fieldData.fields.fixed_fee.name )">
-                    {{ __( 'Both percentage and fixed fee is required.', 'dokan-lite' ) }}
+                <p
+                    class="dokan-error combine-commission"
+                    v-if="
+                        hasError( fieldData.fields.percent_fee.name ) &&
+                        hasError( fieldData.fields.fixed_fee.name )
+                    "
+                >
+                    {{
+                        __(
+                            'Both percentage and fixed fee is required.',
+                            'dokan-lite'
+                        )
+                    }}
                 </p>
-                <p v-else-if="hasError( fieldData.fields.percent_fee.name )" class="dokan-error combine-commission">
+                <p
+                    v-else-if="hasError( fieldData.fields.percent_fee.name )"
+                    class="dokan-error combine-commission"
+                >
                     {{ getError( fieldData.fields.percent_fee.label ) }}
                 </p>
-                <p v-else-if="hasError( fieldData.fields.fixed_fee.name )" class="dokan-error combine-commission">
+                <p
+                    v-else-if="hasError( fieldData.fields.fixed_fee.name )"
+                    class="dokan-error combine-commission"
+                >
                     {{ getError( fieldData.fields.fixed_fee.label ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'textarea' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
-                        <textarea type="textarea" :rows="fieldData.rows" :cols="fieldData.cols" class="regular-text medium" :id="sectionId + '[' + fieldData.name + ']'" :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]"></textarea>
+                        <textarea
+                            type="textarea"
+                            :rows="fieldData.rows"
+                            :cols="fieldData.cols"
+                            class="regular-text medium"
+                            :id="sectionId + '[' + fieldData.name + ']'"
+                            :name="sectionId + '[' + fieldData.name + ']'"
+                            v-model="fieldValue[ fieldData.name ]"
+                        ></textarea>
                     </div>
                 </fieldset>
                 <p v-if="hasError( fieldData.name )" class="dokan-error">
                     {{ getError( fieldData.label ) }}
                 </p>
-                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
+                <p
+                    v-if="hasValidationError( fieldData.name )"
+                    class="dokan-error"
+                >
                     {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'switcher' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
@@ -140,55 +310,119 @@
                         </label>
                     </div>
                 </fieldset>
-                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
+                <p
+                    v-if="hasValidationError( fieldData.name )"
+                    class="dokan-error"
+                >
                     {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'multicheck' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field multicheck_fields">
-                        <template v-for="(optionVal, optionKey) in fieldData.options">
+                        <template
+                            v-for="(optionVal, optionKey) in fieldData.options"
+                        >
                             <div :key="optionKey">
                                 {{ optionVal }}
                                 <switches
                                     @input="setCheckedValue"
-                                    :enabled="isSwitchOptionChecked( optionKey )"
+                                    :enabled="
+                                        isSwitchOptionChecked( optionKey )
+                                    "
                                     :value="optionKey"
                                 ></switches>
                             </div>
                         </template>
                     </div>
                 </fieldset>
-                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
-                  {{ getValidationErrorMessage( fieldData.name ) }}
+                <p
+                    v-if="hasValidationError( fieldData.name )"
+                    class="dokan-error"
+                >
+                    {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'select' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
                         <select
-                            v-if="!fieldData.grouped"
+                            v-if="! fieldData.grouped"
                             class="regular medium"
                             :name="sectionId + '[' + fieldData.name + ']'"
                             :id="sectionId + '[' + fieldData.name + ']'"
-                            v-on:change="e => fieldValue[fieldData.name] = e.target.value"
-                            :value="fieldValue[fieldData.name] ?? fieldData.default ?? ''"
+                            v-on:change="
+                                ( e ) =>
+                                    ( fieldValue[ fieldData.name ] =
+                                        e.target.value )
+                            "
+                            :value="
+                                fieldValue[ fieldData.name ] ??
+                                fieldData.default ??
+                                ''
+                            "
                         >
-                            <option v-if="fieldData.placeholder" value="" v-html="fieldData.placeholder"></option>
-                            <option v-for="( optionVal, optionKey ) in fieldData.options" :key="optionKey" :value="optionKey" v-html="optionVal"></option>
+                            <option
+                                v-if="fieldData.placeholder"
+                                value=""
+                                v-html="fieldData.placeholder"
+                            ></option>
+                            <option
+                                v-for="(
+                                    optionVal, optionKey
+                                ) in fieldData.options"
+                                :key="optionKey"
+                                :value="optionKey"
+                                v-html="optionVal"
+                            ></option>
                         </select>
-                        <select v-else class="regular medium" :value="fieldData.default ?? ''" :name="sectionId + '[' + fieldData.name + ']'" :id="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]">
-                            <option v-if="fieldData.placeholder" value="" disabled v-html="fieldData.placeholder"></option>
-                            <optgroup v-for="( optionGroup, optionGroupKey ) in fieldData.options" :key="optionGroupKey" :label="optionGroup.group_label">
-                                <option v-for="(option, optionKey ) in optionGroup.group_values" :key="optionKey" :value="option.value" v-html="option.label" />
+                        <select
+                            v-else
+                            class="regular medium"
+                            :value="fieldData.default ?? ''"
+                            :name="sectionId + '[' + fieldData.name + ']'"
+                            :id="sectionId + '[' + fieldData.name + ']'"
+                            v-model="fieldValue[ fieldData.name ]"
+                        >
+                            <option
+                                v-if="fieldData.placeholder"
+                                value=""
+                                disabled
+                                v-html="fieldData.placeholder"
+                            ></option>
+                            <optgroup
+                                v-for="(
+                                    optionGroup, optionGroupKey
+                                ) in fieldData.options"
+                                :key="optionGroupKey"
+                                :label="optionGroup.group_label"
+                            >
+                                <option
+                                    v-for="(
+                                        option, optionKey
+                                    ) in optionGroup.group_values"
+                                    :key="optionKey"
+                                    :value="option.value"
+                                    v-html="option.label"
+                                />
                             </optgroup>
                         </select>
 
@@ -196,23 +430,52 @@
                             :field="fieldData"
                             :section="sectionId"
                             v-if="fieldData.refresh_options"
-                            :toggle-loading-state="toggleLoadingState"/>
+                            :toggle-loading-state="toggleLoadingState"
+                        />
                     </div>
                 </fieldset>
-                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
+                <p
+                    v-if="hasValidationError( fieldData.name )"
+                    class="dokan-error"
+                >
                     {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'file' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field add_files">
                         <label :for="sectionId + '[' + fieldData.name + ']'">
-                            <input type="button" class="button wpsa-browse" value="Choose File" v-on:click.prevent="$emit( 'openMedia', { sectionId: sectionId, name: fieldData.name }, $event )">
-                            <input type="text" class="regular-text medium wpsa-url" :id="sectionId + '[' + fieldData.name + ']'" :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]">
+                            <input
+                                type="button"
+                                class="button wpsa-browse"
+                                value="Choose File"
+                                v-on:click.prevent="
+                                    $emit(
+                                        'openMedia',
+                                        {
+                                            sectionId: sectionId,
+                                            name: fieldData.name,
+                                        },
+                                        $event
+                                    )
+                                "
+                            />
+                            <input
+                                type="text"
+                                class="regular-text medium wpsa-url"
+                                :id="sectionId + '[' + fieldData.name + ']'"
+                                :name="sectionId + '[' + fieldData.name + ']'"
+                                v-model="fieldValue[ fieldData.name ]"
+                            />
                         </label>
                     </div>
                 </fieldset>
@@ -223,15 +486,22 @@
         </template>
 
         <template v-if="'color' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
                         <color-picker
-                            v-model="fieldValue[fieldData.name]"
+                            v-model="fieldValue[ fieldData.name ]"
                             :itemKey="fieldData.name"
                             :customData="singleColorPicker"
-                            @custom-change="e => setCustomColor( e, fieldData.name )"
+                            @custom-change="
+                                ( e ) => setCustomColor( e, fieldData.name )
+                            "
                             @toggleColorPicker="toggleColorPicker"
                         ></color-picker>
                     </div>
@@ -243,7 +513,12 @@
         </template>
 
         <template v-if="'html' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                 </fieldset>
@@ -254,15 +529,28 @@
         </template>
 
         <template v-if="'warning' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <div class="field_data">
-                        <h3 scope="row" class="field_heading dokan-setting-warning error">
+                        <h3
+                            scope="row"
+                            class="field_heading dokan-setting-warning error"
+                        >
                             <span class="dokan-setting-warning-label">
-                                <span class="dashicons dashicons-warning"></span>
+                                <span
+                                    class="dashicons dashicons-warning"
+                                ></span>
                                 {{ fieldData.label }}
                             </span>
-                            <span class="field_desc" v-html="fieldData.desc"></span>
+                            <span
+                                class="field_desc"
+                                v-html="fieldData.desc"
+                            ></span>
                         </h3>
                     </div>
                 </fieldset>
@@ -270,15 +558,50 @@
         </template>
 
         <template v-if="'radio' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field radio_fields">
-                        <template v-for="( optionVal, optionKey ) in fieldData.options">
-                            <label :class="isSwitchOptionChecked( optionKey ) ? 'checked' : ''" :key="optionKey" :for="sectionId + '[' + fieldData.name + '][' + optionKey + ']'">
+                        <template
+                            v-for="(optionVal, optionKey) in fieldData.options"
+                        >
+                            <label
+                                :class="
+                                    isSwitchOptionChecked( optionKey )
+                                        ? 'checked'
+                                        : ''
+                                "
+                                :key="optionKey"
+                                :for="
+                                    sectionId +
+                                    '[' +
+                                    fieldData.name +
+                                    '][' +
+                                    optionKey +
+                                    ']'
+                                "
+                            >
                                 <span class="dashicons dashicons-yes"></span>
-                                <input type="radio" class="radio" :name="optionKey" :value="optionKey" v-model="fieldValue[fieldData.name]"
-                                    :id="sectionId + '[' + fieldData.name + '][' + optionKey + ']'"/>
+                                <input
+                                    type="radio"
+                                    class="radio"
+                                    :name="optionKey"
+                                    :value="optionKey"
+                                    v-model="fieldValue[ fieldData.name ]"
+                                    :id="
+                                        sectionId +
+                                        '[' +
+                                        fieldData.name +
+                                        '][' +
+                                        optionKey +
+                                        ']'
+                                    "
+                                />
                                 {{ optionVal }}
                             </label>
                         </template>
@@ -291,34 +614,72 @@
         </template>
 
         <template v-if="'wpeditor' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                 </fieldset>
                 <div class="field editor_field">
-                    <text-editor v-model="fieldValue[fieldData.name]" v-html="fieldData.default"></text-editor>
+                    <text-editor
+                        v-model="fieldValue[ fieldData.name ]"
+                        v-html="fieldData.default"
+                    ></text-editor>
                 </div>
             </div>
         </template>
 
         <template v-if="'repeatable' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field repeatable_fields">
-                        <input type="text" class="regular-text medium" v-model="repeatableItem[fieldData.name]">
-                        <a href="#" class="button dokan-repetable-add-item-btn" @click.prevent="addItem( fieldData.type, fieldData.name )">
+                        <input
+                            type="text"
+                            class="regular-text medium"
+                            v-model="repeatableItem[ fieldData.name ]"
+                        />
+                        <a
+                            href="#"
+                            class="button dokan-repetable-add-item-btn"
+                            @click.prevent="
+                                addItem( fieldData.type, fieldData.name )
+                            "
+                        >
                             <span class="dashicons dashicons-plus-alt2"></span>
                         </a>
                     </div>
                 </fieldset>
                 <ul class="dokan-settings-repeatable-list">
-                    <template v-for="(optionVal, optionKey) in fieldValue[fieldData.name]">
-                        <li v-if="fieldValue[fieldData.name]" :key="optionKey">
+                    <template
+                        v-for="(optionVal, optionKey) in fieldValue[
+                            fieldData.name
+                        ]"
+                    >
+                        <li
+                            v-if="fieldValue[ fieldData.name ]"
+                            :key="optionKey"
+                        >
                             {{ optionVal.value }}
-                            <span v-if="!optionVal.must_use" class="dashicons dashicons-no-alt remove-item"
-                                @click.prevent="removeItem( optionKey, fieldData.name )"></span>
-                            <span class="repeatable-item-description" v-html="optionVal.desc"></span>
+                            <span
+                                v-if="! optionVal.must_use"
+                                class="dashicons dashicons-no-alt remove-item"
+                                @click.prevent="
+                                    removeItem( optionKey, fieldData.name )
+                                "
+                            ></span>
+                            <span
+                                class="repeatable-item-description"
+                                v-html="optionVal.desc"
+                            ></span>
                         </li>
                     </template>
                 </ul>
@@ -326,21 +687,46 @@
         </template>
 
         <template v-if="'radio_image' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                 </fieldset>
                 <div class="field radio-image-container">
-                     <template v-for="( image, name ) in fieldData.options">
-                        <label class="radio-image" :key="name" :class="{ 'active' : fieldValue[fieldData.name] === name, 'not-active' : fieldValue[fieldData.name] !== name }">
-                            <input type="radio" class="radio" :name="fieldData.name" v-model="fieldValue[fieldData.name]" :value="name">
+                    <template v-for="(image, name) in fieldData.options">
+                        <label
+                            class="radio-image"
+                            :key="name"
+                            :class="{
+                                active: fieldValue[ fieldData.name ] === name,
+                                'not-active':
+                                    fieldValue[ fieldData.name ] !== name,
+                            }"
+                        >
+                            <input
+                                type="radio"
+                                class="radio"
+                                :name="fieldData.name"
+                                v-model="fieldValue[ fieldData.name ]"
+                                :value="name"
+                            />
                             <span class="current-option-indicator">
                                 <span class="dashicons dashicons-yes"></span>
                                 {{ __( 'Active', 'dokan-lite' ) }}
                             </span>
-                            <img :src="image">
+                            <img :src="image" />
                             <span class="active-option">
-                                <button class="button button-primary button-hero" type="button" @click.prevent="fieldValue[fieldData.name] = name">
+                                <button
+                                    class="button button-primary button-hero"
+                                    type="button"
+                                    @click.prevent="
+                                        fieldValue[ fieldData.name ] = name
+                                    "
+                                >
                                     {{ __( 'Select', 'dokan-lite' ) }}
                                 </button>
                             </span>
@@ -351,12 +737,21 @@
         </template>
 
         <template v-if="'gmap' === fieldData.type && ! hideMap">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                 </fieldset>
                 <div class="field gmap-field">
-                    <input type="hidden" :name="sectionId + '[' + fieldData.name + ']'" :value="mapLocation">
+                    <input
+                        type="hidden"
+                        :name="sectionId + '[' + fieldData.name + ']'"
+                        :value="mapLocation"
+                    />
                     <Mapbox
                         width="100%"
                         height="300px"
@@ -364,13 +759,15 @@
                         :location="mapLocation"
                         @updateMap="onUpdateMap"
                         v-if="mapApiSource === 'mapbox'"
-                        :accessToken="mapboxAccessToken"/>
+                        :accessToken="mapboxAccessToken"
+                    />
                     <GoogleMaps
                         v-else
                         @hideMap="onHideMap"
                         :location="mapLocation"
                         @updateMap="onUpdateMap"
-                        :apiKey="googleMapApiKey"/>
+                        :apiKey="googleMapApiKey"
+                    />
                 </div>
                 <p v-if="hasError( fieldData.name )" class="dokan-error">
                     {{ getError( fieldData.label ) }}
@@ -379,10 +776,18 @@
         </template>
 
         <template v-if="'social' === fieldData.type">
-            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
+            <div
+                class="field_contents"
+                v-bind:class="[
+                    fieldData.content_class ? fieldData.content_class : '',
+                ]"
+            >
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
-                    <label class="social-switch-wraper" v-if="fieldData.enable_status">
+                    <label
+                        class="social-switch-wraper"
+                        v-if="fieldData.enable_status"
+                    >
                         <switches
                             @input="onSocialToggleSwitch"
                             :enabled="socialChecked === 'on' ? true : false"
@@ -390,21 +795,53 @@
                         ></switches>
                     </label>
                 </fieldset>
-                <div class="field scl_fields" :class="fieldData.enable_status && 'off' === socialChecked ? 'scl_fields_disable' : ''">
+                <div
+                    class="field scl_fields"
+                    :class="
+                        fieldData.enable_status && 'off' === socialChecked
+                            ? 'scl_fields_disable'
+                            : ''
+                    "
+                >
                     <div class="scl_header">
                         <div class="scl_contents">
                             <div class="scl_icon">
-                                <img :src="fieldData.icon_url" :alt="fieldData.label" />
+                                <img
+                                    :src="fieldData.icon_url"
+                                    :alt="fieldData.label"
+                                />
                             </div>
                             <p class="scl_desc">{{ fieldData.social_desc }}</p>
                         </div>
                         <div class="expand_btn" @click="expandSocial">
-                            <span class="dashicons" v-bind:class="[ ! this.expandSocials ? 'dashicons-arrow-down-alt2' : 'dashicons-arrow-up-alt2', isSocialFieldActivated ? 'active-social-expend-btn' : '']"></span>
+                            <span
+                                class="dashicons"
+                                v-bind:class="[
+                                    ! this.expandSocials
+                                        ? 'dashicons-arrow-down-alt2'
+                                        : 'dashicons-arrow-up-alt2',
+                                    isSocialFieldActivated
+                                        ? 'active-social-expend-btn'
+                                        : '',
+                                ]"
+                            ></span>
                         </div>
                     </div>
-                    <template v-for="( fields, index ) in fieldData">
-                        <div class="scl_info" v-if="expandSocials && fields.social_field" :key="index">
-                            <div :class="[ { 'scl_html': fields.type === 'html' }, { 'scl_text': fields.type !== 'html' }, fields.content_class ? fields.content_class : '' ]">
+                    <template v-for="(fields, index) in fieldData">
+                        <div
+                            class="scl_info"
+                            v-if="expandSocials && fields.social_field"
+                            :key="index"
+                        >
+                            <div
+                                :class="[
+                                    { scl_html: fields.type === 'html' },
+                                    { scl_text: fields.type !== 'html' },
+                                    fields.content_class
+                                        ? fields.content_class
+                                        : '',
+                                ]"
+                            >
                                 <SocialFields
                                     :fieldData="fields"
                                     :fieldValue="fieldValue"
@@ -416,6 +853,14 @@
             </div>
         </template>
 
+        <template v-if="'withdraw-methods' === fieldData.type">
+            <withdraw-methods
+                :section-id="sectionId"
+                :fieldData='fieldData'
+                :field-value='fieldValue'
+            />
+        </template>
+
         <template v-if="customFieldComponents">
             <component
                 :key="index"
@@ -427,1052 +872,1135 @@
                 :validationErrors="validationErrors"
                 :toggleLoadingState="toggleLoadingState"
                 @some-event="thisSomeEvent"
-                v-for="( settingsComponent, index ) in customFieldComponents"/>
+                v-for="(settingsComponent, index) in customFieldComponents"
+            />
         </template>
     </div>
 </template>
 
 <script>
-    import colorPicker from "admin/components/ColorPicker.vue";
-    import Switches from "admin/components/Switches.vue";
-    import SocialFields from './SocialFields.vue';
-    import FieldHeading from './FieldHeading.vue';
-    import SecretInput from './SecretInput.vue';
-    let Mapbox                = dokan_get_lib('Mapbox');
-    let TextEditor            = dokan_get_lib('TextEditor');
-    let GoogleMaps            = dokan_get_lib('GoogleMaps');
-    let RefreshSettingOptions = dokan_get_lib('RefreshSettingOptions');
-
-    export default {
-        name: 'Fields',
-
-        components: {
-            Mapbox,
-            Switches,
-            TextEditor,
-            GoogleMaps,
-            colorPicker,
-            FieldHeading,
-            SocialFields,
-            RefreshSettingOptions,
-            SecretInput
-        },
-
-        props: ['id', 'fieldData', 'sectionId', 'fieldValue', 'allSettingsValues', 'errors', 'toggleLoadingState', 'validationErrors', 'dokanAssetsUrl'],
-
-        data() {
-            return {
-                hideMap               : false,
-                checked               : this.isChecked(),
-                socialChecked         : this.isSocialChecked(),
-                expandSocials         : false,
-                repeatableItem        : {},
-                repeatableTime        : [],
-                singleColorPicker     : { default: this.fieldData.default, label: '', show_pallete: false },
-                yourStringTimeValue   : '',
-                customFieldComponents : dokan.hooks.applyFilters( 'getDokanCustomFieldComponents', [] ),
+import colorPicker from 'admin/components/ColorPicker.vue';
+import Switches from 'admin/components/Switches.vue';
+import SocialFields from './SocialFields.vue';
+import FieldHeading from './FieldHeading.vue';
+import SecretInput from './SecretInput.vue';
+import WithdrawMethods from 'admin/components/Fields/WithdrawMethods.vue';
+let Mapbox = dokan_get_lib( 'Mapbox' );
+let TextEditor = dokan_get_lib( 'TextEditor' );
+let GoogleMaps = dokan_get_lib( 'GoogleMaps' );
+let RefreshSettingOptions = dokan_get_lib( 'RefreshSettingOptions' );
+
+export default {
+    name: 'Fields',
+
+    components: {
+        WithdrawMethods,
+        Mapbox,
+        Switches,
+        TextEditor,
+        GoogleMaps,
+        colorPicker,
+        FieldHeading,
+        SocialFields,
+        RefreshSettingOptions,
+        SecretInput,
+    },
+
+    props: [
+        'id',
+        'fieldData',
+        'sectionId',
+        'fieldValue',
+        'allSettingsValues',
+        'errors',
+        'toggleLoadingState',
+        'validationErrors',
+        'dokanAssetsUrl',
+    ],
+
+    data() {
+        return {
+            hideMap: false,
+            checked: this.isChecked(),
+            socialChecked: this.isSocialChecked(),
+            expandSocials: false,
+            repeatableItem: {},
+            repeatableTime: [],
+            singleColorPicker: {
+                default: this.fieldData.default,
+                label: '',
+                show_pallete: false,
+            },
+            yourStringTimeValue: '',
+            customFieldComponents: dokan.hooks.applyFilters(
+                'getDokanCustomFieldComponents',
+                []
+            ),
+        };
+    },
+
+    created() {
+        this.$root.$on( 'hasError', ( key ) => {
+            this.hasValidationError( key );
+        } );
+
+        this.$root.$on( 'getError', ( key ) => {
+            this.getValidationErrorMessage( key );
+        } );
+
+        this.$parent.$on( 'switcHandler', ( fieldKey, value ) => {
+            if ( this.fieldData.name === fieldKey ) {
+                this.checked = value;
             }
-        },
-
-        created() {
-            this.$root.$on( 'hasError', ( key ) => {
-                this.hasValidationError( key );
-            });
-
-            this.$root.$on( 'getError', ( key ) => {
-                this.getValidationErrorMessage( key );
-            });
-
-            this.$parent.$on( 'switcHandler', ( fieldKey, value ) => {
-                if ( this.fieldData.name === fieldKey ) {
-                    this.checked = value;
-                }
-            });
-        },
-
-        computed: {
-            shouldShow(e) {
-                let shouldShow = true;
-
-                if ( this.fieldData.show_if ) {
-                    const conditions   = this.fieldData.show_if;
-                    const dependencies = Object.keys( conditions );
-
-                    let i = 0;
-
-                    for ( i = 0; i < dependencies.length; i++ ) {
-                        const dependency            = dependencies[i];
-                        const [ optionId, sectionId = this.sectionId ] = dependency.split( '.' ).reverse();
-                        const dependencyValue       = this.allSettingsValues[ sectionId ][ optionId ];
-                        const [ operator, value ]   = _.chain( conditions[ dependency ] ).pairs().first().value();
-
-                        switch ( operator ) {
-                            case 'greater_than':
-                                if ( ! ( dependencyValue > value ) ) {
-                                    shouldShow = false;
-                                }
-                                break;
-
-                            case 'greater_than_equal':
-                                if ( ! ( dependencyValue >= value ) ) {
-                                    shouldShow = false;
-                                }
-                                break;
+        } );
+    },
+
+    computed: {
+        shouldShow( e ) {
+            let shouldShow = true;
+
+            if ( this.fieldData.show_if ) {
+                const conditions = this.fieldData.show_if;
+                const dependencies = Object.keys( conditions );
+
+                let i = 0;
+
+                for ( i = 0; i < dependencies.length; i++ ) {
+                    const dependency = dependencies[ i ];
+                    const [ optionId, sectionId = this.sectionId ] = dependency
+                        .split( '.' )
+                        .reverse();
+                    const dependencyValue =
+                        this.allSettingsValues[ sectionId ][ optionId ];
+                    const [ operator, value ] = _.chain(
+                        conditions[ dependency ]
+                    )
+                        .pairs()
+                        .first()
+                        .value();
+
+                    switch ( operator ) {
+                        case 'greater_than':
+                            if ( ! ( dependencyValue > value ) ) {
+                                shouldShow = false;
+                            }
+                            break;
 
-                            case 'less_than':
-                                if ( ! ( dependencyValue < value ) ) {
-                                    shouldShow = false;
-                                }
-                                break;
+                        case 'greater_than_equal':
+                            if ( ! ( dependencyValue >= value ) ) {
+                                shouldShow = false;
+                            }
+                            break;
 
-                            case 'less_than':
-                                if ( ! ( dependencyValue <= value ) ) {
-                                    shouldShow = false;
-                                }
-                                break;
+                        case 'less_than':
+                            if ( ! ( dependencyValue < value ) ) {
+                                shouldShow = false;
+                            }
+                            break;
 
-                            case 'contains':
-                                if ( ! Object.values( dependencyValue ).includes( value ) ) {
-                                    shouldShow = false;
-                                }
-                                break;
+                        case 'less_than':
+                            if ( ! ( dependencyValue <= value ) ) {
+                                shouldShow = false;
+                            }
+                            break;
 
-                            case 'equal':
-                            default:
-                                if ( dependencyValue !== value ) {
-                                    shouldShow = false;
-                                }
-                                break;
-                        }
+                        case 'contains':
+                            if (
+                                ! Object.values( dependencyValue ).includes(
+                                    value
+                                )
+                            ) {
+                                shouldShow = false;
+                            }
+                            break;
 
-                        if ( ! shouldShow ) {
+                        case 'equal':
+                        default:
+                            if ( dependencyValue !== value ) {
+                                shouldShow = false;
+                            }
                             break;
-                        }
                     }
-                }
-
-                return shouldShow;
-            },
-
-            mapApiSource() {
-                return this.allSettingsValues?.dokan_appearance?.map_api_source;
-            },
-
-            mapLocation() {
-                let location = {
-                    ...{
-                        latitude: 23.709921,
-                        longitude: 90.40714300000002,
-                        address: 'Dhaka',
-                        zoom: 10
-                    },
-
-                    ...this.fieldValue[ this.fieldData.name ],
-                };
-
-                location = {
-                    zoom      : parseInt( location.zoom ),
-                    address   : `${location.address}`,
-                    latitude  : parseFloat( location.latitude ),
-                    longitude : parseFloat( location.longitude ),
-                };
-
-                return location;
-            },
-
-            googleMapApiKey() {
-                return this.allSettingsValues?.dokan_appearance?.gmap_api_key;
-            },
-
-            mapboxAccessToken() {
-                return this.allSettingsValues?.dokan_appearance?.mapbox_access_token;
-            },
 
-            isSocialFieldActivated() {
-                for (const data in this.fieldData) {
-                    if (this.fieldData[data].social_field && 'html' !== this.fieldData[data].type && ! this.fieldValue[this.fieldData[data].name]) {
-                        return false;
+                    if ( ! shouldShow ) {
+                        break;
                     }
                 }
-
-                return true;
             }
+
+            return shouldShow;
         },
 
-        beforeMount() {
-            if ( 'multicheck' === this.fieldData.type && ! this.fieldValue[ this.fieldData.name ] ) {
-                this.fieldValue[ this.fieldData.name ] = this.fieldData.default;
-            }
+        mapApiSource() {
+            return this.allSettingsValues?.dokan_appearance?.map_api_source;
         },
 
-        methods: {
-            containCommonFields( type ) {
-                return _.contains( [ undefined, 'text', 'email', 'url', 'phone', 'time' ], type );
-            },
+        mapLocation() {
+            let location = {
+                ...{
+                    latitude: 23.709921,
+                    longitude: 90.40714300000002,
+                    address: 'Dhaka',
+                    zoom: 10,
+                },
+
+                ...this.fieldValue[ this.fieldData.name ],
+            };
+
+            location = {
+                zoom: parseInt( location.zoom ),
+                address: `${ location.address }`,
+                latitude: parseFloat( location.latitude ),
+                longitude: parseFloat( location.longitude ),
+            };
+
+            return location;
+        },
 
-            setCheckedValue( checked, value ) {
-                this.fieldValue[ this.fieldData.name ][ value ] = checked ? value : '';
-            },
+        googleMapApiKey() {
+            return this.allSettingsValues?.dokan_appearance?.gmap_api_key;
+        },
 
-            addItem( type, name ) {
-                this.fieldValue[ name ] = this.fieldValue[ name ] || [];
+        mapboxAccessToken() {
+            return this.allSettingsValues?.dokan_appearance
+                ?.mapbox_access_token;
+        },
 
-                if ( typeof this.repeatableItem[ name ] == 'undefined' || ! this.repeatableItem[ name ] )  {
-                    return;
+        isSocialFieldActivated() {
+            for ( const data in this.fieldData ) {
+                if (
+                    this.fieldData[ data ].social_field &&
+                    'html' !== this.fieldData[ data ].type &&
+                    ! this.fieldValue[ this.fieldData[ data ].name ]
+                ) {
+                    return false;
                 }
+            }
 
-                this.fieldValue[ name ].push( {
-                        id    : this.repeatableItem[ name ].trim().replace(/\s+/g, '_').toLowerCase(),
-                        value : this.repeatableItem[ name ]
-                    }
-                );
-                this.repeatableItem[ name ] = '';
-            },
+            return true;
+        },
+    },
+
+    beforeMount() {
+        if (
+            'multicheck' === this.fieldData.type &&
+            ! this.fieldValue[ this.fieldData.name ]
+        ) {
+            this.fieldValue[ this.fieldData.name ] = this.fieldData.default;
+        }
+    },
+
+    methods: {
+        containCommonFields( type ) {
+            return _.contains(
+                [ undefined, 'text', 'email', 'url', 'phone', 'time' ],
+                type
+            );
+        },
 
-            removeItem( optionVal, name ) {
-                this.fieldValue[name].splice( optionVal, 1 );
-            },
+        setCheckedValue( checked, value ) {
+            this.fieldValue[ this.fieldData.name ][ value ] = checked
+                ? value
+                : '';
+        },
 
-            haveCondition( fieldData ) {
-                return fieldData.hasOwnProperty( 'condition' );
-            },
+        addItem( type, name ) {
+            this.fieldValue[ name ] = this.fieldValue[ name ] || [];
 
-            checkConditionLogic( fieldData, fieldValue ) {
-                var logic = fieldData.condition.logic;
-                var isValid = false;
+            if (
+                typeof this.repeatableItem[ name ] == 'undefined' ||
+                ! this.repeatableItem[ name ]
+            ) {
+                return;
+            }
 
-                _.each( logic, function( value, key ) {
-                    if ( _.contains( value, fieldValue[ key ] ) ) {
-                        isValid = true;
-                    }
-                } );
+            this.fieldValue[ name ].push( {
+                id: this.repeatableItem[ name ]
+                    .trim()
+                    .replace( /\s+/g, '_' )
+                    .toLowerCase(),
+                value: this.repeatableItem[ name ],
+            } );
+            this.repeatableItem[ name ] = '';
+        },
 
-                return isValid;
-            },
+        removeItem( optionVal, name ) {
+            this.fieldValue[ name ].splice( optionVal, 1 );
+        },
 
-            onHideMap( hideMap ) {
-                this.hideMap = hideMap;
-            },
+        haveCondition( fieldData ) {
+            return fieldData.hasOwnProperty( 'condition' );
+        },
 
-            onUpdateMap( payload ) {
-                this.fieldValue[ this.fieldData.name ] = { ...this.mapLocation, ...payload };
-            },
+        checkConditionLogic( fieldData, fieldValue ) {
+            var logic = fieldData.condition.logic;
+            var isValid = false;
 
-            isSocialChecked() {
-                /**
-                 * If social field has enabled status saved return it or return the default value or return 'on'
-                 *
-                 * @since DOKAN_SINCE
-                 */
-                if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['name'] && this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ] ) {
-                    return this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ];
-                } else if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['default'] ) {
-                    return this.fieldData[ 'enable_status' ]['default'];
+            _.each( logic, function ( value, key ) {
+                if ( _.contains( value, fieldValue[ key ] ) ) {
+                    isValid = true;
                 }
+            } );
 
-                return 'on';
-            },
+            return isValid;
+        },
 
+        onHideMap( hideMap ) {
+            this.hideMap = hideMap;
+        },
 
-            thisSomeEvent(value) {
-                console.log('hello priting...', value);
-            },
+        onUpdateMap( payload ) {
+            this.fieldValue[ this.fieldData.name ] = {
+                ...this.mapLocation,
+                ...payload,
+            };
+        },
 
-            isSwitchOptionChecked( optionKey ) {
-                if ( 'multicheck' === this.fieldData.type ) {
-                    return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ][ optionKey ] === optionKey;
-                } else if ( 'radio' === this.fieldData.type ) {
-                    return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ] === optionKey;
-                }
+        isSocialChecked() {
+            /**
+             * If social field has enabled status saved return it or return the default value or return 'on'
+             *
+             * @since DOKAN_SINCE
+             */
+            if (
+                this.fieldData[ 'enable_status' ] &&
+                this.fieldData[ 'enable_status' ][ 'name' ] &&
+                this.fieldValue[ this.fieldData[ 'enable_status' ][ 'name' ] ]
+            ) {
+                return this.fieldValue[
+                    this.fieldData[ 'enable_status' ][ 'name' ]
+                ];
+            } else if (
+                this.fieldData[ 'enable_status' ] &&
+                this.fieldData[ 'enable_status' ][ 'default' ]
+            ) {
+                return this.fieldData[ 'enable_status' ][ 'default' ];
+            }
 
-                return false;
-            },
+            return 'on';
+        },
 
-            expandSocial() {
-                this.expandSocials = ! this.expandSocials;
-            },
+        thisSomeEvent( value ) {
+            console.log( 'hello priting...', value );
+        },
 
-            getSocialValue( optionValue ) {
-                this.fieldValue[ optionValue.name ] = this.fieldValue[ optionValue.name ] ? this.fieldValue[ optionValue.name ] : '';
-            },
+        isSwitchOptionChecked( optionKey ) {
+            if ( 'multicheck' === this.fieldData.type ) {
+                return (
+                    this.fieldValue[ this.fieldData.name ] &&
+                    this.fieldValue[ this.fieldData.name ][ optionKey ] ===
+                        optionKey
+                );
+            } else if ( 'radio' === this.fieldData.type ) {
+                return (
+                    this.fieldValue[ this.fieldData.name ] &&
+                    this.fieldValue[ this.fieldData.name ] === optionKey
+                );
+            }
 
-            isChecked() {
-                return ! this.fieldValue[ this.fieldData.name ] ? this.fieldData.default : this.fieldValue[ this.fieldData.name ];
-            },
+            return false;
+        },
 
-            onToggleSwitch( status, key ) {
-                if ( 'isChecked' !== key ) {
-                    return;
-                }
+        expandSocial() {
+            this.expandSocials = ! this.expandSocials;
+        },
 
-                this.checked                           = status ? 'on' : 'off';
-                this.fieldValue[ this.fieldData.name ] = status ? 'on' : 'off';
+        getSocialValue( optionValue ) {
+            this.fieldValue[ optionValue.name ] = this.fieldValue[
+                optionValue.name
+            ]
+                ? this.fieldValue[ optionValue.name ]
+                : '';
+        },
 
-                this.$root.$emit( 'onFieldSwitched', this.fieldValue[ this.fieldData.name ], this.fieldData.name );
-            },
+        isChecked() {
+            return ! this.fieldValue[ this.fieldData.name ]
+                ? this.fieldData.default
+                : this.fieldValue[ this.fieldData.name ];
+        },
 
-            onSocialToggleSwitch( status, key ) {
-                if ( 'isSocialChecked' !== key ) {
-                    return;
-                }
+        onToggleSwitch( status, key ) {
+            if ( 'isChecked' !== key ) {
+                return;
+            }
 
-                this.socialChecked                     = status ? 'on' : 'off';
-                this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ]          = status ? 'on' : 'off';
-            },
+            this.checked = status ? 'on' : 'off';
+            this.fieldValue[ this.fieldData.name ] = status ? 'on' : 'off';
 
-            hasError( key ) {
-                let errors = this.errors;
+            this.$root.$emit(
+                'onFieldSwitched',
+                this.fieldValue[ this.fieldData.name ],
+                this.fieldData.name
+            );
+        },
 
-                if ( ! errors || typeof errors === 'undefined' ) {
-                    return false;
-                }
+        onSocialToggleSwitch( status, key ) {
+            if ( 'isSocialChecked' !== key ) {
+                return;
+            }
 
-                if ( errors.length < 1 ) {
-                    return false;
-                }
+            this.socialChecked = status ? 'on' : 'off';
+            this.fieldValue[ this.fieldData[ 'enable_status' ][ 'name' ] ] =
+                status ? 'on' : 'off';
+        },
 
-                if ( errors.includes( key ) ) {
-                    return key;
-                }
-            },
+        hasError( key ) {
+            let errors = this.errors;
 
-            getError( label ) {
-                return label + ' ' + this.__( 'is required.', 'dokan-lite' )
-            },
+            if ( ! errors || typeof errors === 'undefined' ) {
+                return false;
+            }
 
-            hasValidationError( key ) {
-                if ( this.validationErrors.filter( e => e.name === key ).length > 0 ) {
-                    return key;
-                }
-            },
+            if ( errors.length < 1 ) {
+                return false;
+            }
 
-            getValidationErrorMessage( key ) {
-                let errorMessage = '';
-                this.validationErrors.forEach( obj => {
-                    if ( obj.name === key ) {
-                        errorMessage = obj.error;
-                    }
-                } );
+            if ( errors.includes( key ) ) {
+                return key;
+            }
+        },
 
-                return errorMessage;
-            },
+        getError( label ) {
+            return label + ' ' + this.__( 'is required.', 'dokan-lite' );
+        },
 
-            toggleColorPicker( data ) {
-                if ( this.fieldData.name === data.key ) {
-                    this.singleColorPicker.show_pallete = ! data.values.show_pallete;
-                } else {
-                    this.singleColorPicker.show_pallete = false;
-                }
-            },
+        hasValidationError( key ) {
+            if (
+                this.validationErrors.filter( ( e ) => e.name === key ).length >
+                0
+            ) {
+                return key;
+            }
+        },
 
-            setCustomColor( value, key ) {
-                if ( ! key ) {
-                    return;
+        getValidationErrorMessage( key ) {
+            let errorMessage = '';
+            this.validationErrors.forEach( ( obj ) => {
+                if ( obj.name === key ) {
+                    errorMessage = obj.error;
                 }
+            } );
 
-                this.fieldData[ key ] = value;
-            },
+            return errorMessage;
         },
-    };
-</script>
-
-<style lang="less">
-    span.repeatable-item-description {
-        color: #999;
-        font-size: 11px;
-        font-style: italic;
-    }
-    ul.dokan-settings-repeatable-list {
-        display: flex;
-        padding: 20px 0 0 20px;
-        flex-wrap: wrap;
-        text-align: right;
-        justify-content: right;
 
-        li {
-            color: rgba(0, 0, 0, 0.87);
-            border: 1px solid rgba(0, 0, 0, 0.10);
-            padding: 5px 12px;
-            display: flex;
-            font-size: 13px;
-            box-sizing: border-box;
-            background: rgba(182, 206, 254, 0.38);
-            margin-top: 6px;
-            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
-            align-items: center;
-            margin-left: 12px;
-            font-family: 'Roboto', sans-serif;
-            line-height: 1;
-            border-radius: 8px;
-            justify-content: center;
+        toggleColorPicker( data ) {
+            if ( this.fieldData.name === data.key ) {
+                this.singleColorPicker.show_pallete =
+                    ! data.values.show_pallete;
+            } else {
+                this.singleColorPicker.show_pallete = false;
+            }
+        },
 
-            span.remove-item{
-                color: #fff;
-                width: 15px;
-                margin: 0;
-                height: 15px;
-                cursor: pointer;
-                font-size: 15px;
-                background: #1aa0f7;
-                padding-top: 0;
-                margin-left: 5px;
-                border-radius: 50%;
+        setCustomColor( value, key ) {
+            if ( ! key ) {
+                return;
             }
-        }
-    }
-    .dokan-repetable-add-item-btn {
-        font-size: 16px !important;
-        font-weight: bold !important;
-        height: 25px !important;
-        line-height: 22px !important;
-    }
-    .percent_fee, .fixed_fee {
-        display: inline-block;
-    }
-    .percent_fee input, .fixed_fee input {
-        width: 60px;
-    }
-    .additional_fee .description {
-        margin-left: 10px;
-        margin-top: -10px;
-    }
-    .dokan-error {
-        color: red;
-        margin-top: .5em;
-        font-style: italic;
-        margin-bottom: 0;
-    }
-    .dokan-input-validation-error {
-      border-color: red !important;
-    }
-    .dokan-error.combine-commission {
-        margin-left: 10px;
-    }
-    .dokan-settings-sub-section {
-        margin-bottom: 30px;
 
-        .sub-section-title {
-            margin: 0;
-            font-size: 22px;
-            font-family: Roboto, sans-serif;
-            font-weight: 600;
-            line-height: 26px;
-            margin-bottom: 8px;
-        }
+            this.fieldData[ key ] = value;
+        },
+    },
+};
+</script>
 
-        .sub-section-description {
+<style lang="less">
+span.repeatable-item-description {
+    color: #999;
+    font-size: 11px;
+    font-style: italic;
+}
+ul.dokan-settings-repeatable-list {
+    display: flex;
+    padding: 20px 0 0 20px;
+    flex-wrap: wrap;
+    text-align: right;
+    justify-content: right;
+
+    li {
+        color: rgba( 0, 0, 0, 0.87 );
+        border: 1px solid rgba( 0, 0, 0, 0.1 );
+        padding: 5px 12px;
+        display: flex;
+        font-size: 13px;
+        box-sizing: border-box;
+        background: rgba( 182, 206, 254, 0.38 );
+        margin-top: 6px;
+        box-shadow: 0px 4px 4px rgba( 0, 0, 0, 0.1 );
+        align-items: center;
+        margin-left: 12px;
+        font-family: 'Roboto', sans-serif;
+        line-height: 1;
+        border-radius: 8px;
+        justify-content: center;
+
+        span.remove-item {
+            color: #fff;
+            width: 15px;
             margin: 0;
+            height: 15px;
+            cursor: pointer;
             font-size: 15px;
-            font-weight: 300;
-            line-height: 21px;
-            font-family: Roboto, sans-serif;
-
-            .learn-more-btn {
-                cursor: pointer;
-                text-decoration: none;
-            }
+            background: #1aa0f7;
+            padding-top: 0;
+            margin-left: 5px;
+            border-radius: 50%;
         }
     }
-    .field_contents.data_clear {
-        background-color: #FFFBF3;
+}
+.dokan-repetable-add-item-btn {
+    font-size: 16px !important;
+    font-weight: bold !important;
+    height: 25px !important;
+    line-height: 22px !important;
+}
+.percent_fee,
+.fixed_fee {
+    display: inline-block;
+}
+.percent_fee input,
+.fixed_fee input {
+    width: 60px;
+}
+.additional_fee .description {
+    margin-left: 10px;
+    margin-top: -10px;
+}
+.dokan-error {
+    color: red;
+    margin-top: 0.5em;
+    font-style: italic;
+    margin-bottom: 0;
+}
+.dokan-input-validation-error {
+    border-color: red !important;
+}
+.dokan-error.combine-commission {
+    margin-left: 10px;
+}
+.dokan-settings-sub-section {
+    margin-bottom: 30px;
+
+    .sub-section-title {
+        margin: 0;
+        font-size: 22px;
+        font-family: Roboto, sans-serif;
+        font-weight: 600;
+        line-height: 26px;
+        margin-bottom: 8px;
+    }
+
+    .sub-section-description {
+        margin: 0;
+        font-size: 15px;
+        font-weight: 300;
+        line-height: 21px;
+        font-family: Roboto, sans-serif;
 
-        .field_desc,
-        .fa-exclamation-triangle {
-            color: #E67E22 !important;
+        .learn-more-btn {
+            cursor: pointer;
+            text-decoration: none;
         }
     }
-    .field_contents {
-        border: 1px solid #B0A7A7;
-        padding: 14px 30px 18px 27px;
-        border-top: 0;
-        background: rgba(244, 246, 250, 0.17);
+}
+.field_contents.data_clear {
+    background-color: #fffbf3;
 
-        fieldset {
-            display: flex;
-            justify-content: space-between;
+    .field_desc,
+    .fa-exclamation-triangle {
+        color: #e67e22 !important;
+    }
+}
+.field_contents {
+    border: 1px solid #b0a7a7;
+    padding: 14px 30px 18px 27px;
+    border-top: 0;
+    background: rgba( 244, 246, 250, 0.17 );
+
+    fieldset {
+        display: flex;
+        justify-content: space-between;
 
-            .field_data {
-                flex: 2;
+        .field_data {
+            flex: 2;
 
-                .field_heading {
-                    color: #000000;
-                    margin: 0;
-                    font-size: 17px;
-                    font-style: normal;
-                    font-weight: 600;
-                    line-height: 35px;
-                    font-family: 'Roboto', sans-serif;
+            .field_heading {
+                color: #000000;
+                margin: 0;
+                font-size: 17px;
+                font-style: normal;
+                font-weight: 600;
+                line-height: 35px;
+                font-family: 'Roboto', sans-serif;
 
-                    span {
-                        i {
-                            margin: 5px 0 0 5px;
-                        }
+                span {
+                    i {
+                        margin: 5px 0 0 5px;
+                    }
 
-                        .tooltip {
-                            font-size: 14px;
-                        }
+                    .tooltip {
+                        font-size: 14px;
                     }
                 }
+            }
 
-                .field_desc {
-                    color: #000;
-                    margin: 0;
-                    font-size: 13px;
-                    font-style: normal;
-                    font-weight: 300;
-                    line-height: 17px;
-                    font-family: 'Roboto', sans-serif;
+            .field_desc {
+                color: #000;
+                margin: 0;
+                font-size: 13px;
+                font-style: normal;
+                font-weight: 300;
+                line-height: 17px;
+                font-family: 'Roboto', sans-serif;
 
-                    a {
-                        display: inline-block;
+                a {
+                    display: inline-block;
 
-                        &:hover {
-                            box-shadow: 0 0 0 1px transparent;
-                        }
-                        &:active {
-                            box-shadow: 0 0 0 1px transparent;
-                        }
-                        &:focus {
-                            box-shadow: 0 0 0 1px transparent;
-                        }
+                    &:hover {
+                        box-shadow: 0 0 0 1px transparent;
+                    }
+                    &:active {
+                        box-shadow: 0 0 0 1px transparent;
+                    }
+                    &:focus {
+                        box-shadow: 0 0 0 1px transparent;
                     }
                 }
             }
-
-            .social-switch-wraper {
-                display: flex;
-                align-items: center;
-            }
         }
 
-        .combine_fields {
+        .social-switch-wraper {
             display: flex;
-            justify-content: right;
+            align-items: center;
+        }
+    }
 
-            .percent_fee {
-                padding-right: 10px;
-            }
+    .combine_fields {
+        display: flex;
+        justify-content: right;
 
-            .fixed_fee,
-            .percent_fee {
-                input {
-                    width: 100px;
-                }
-            }
+        .percent_fee {
+            padding-right: 10px;
         }
 
-        .multicheck_fields {
-            & > div {
-                display: flex;
-                align-items: center;
-                justify-content: right;
-
-                label {
-                    color: #000;
-                    cursor: inherit;
-                    margin: 9px 0 9px 15px;
-                    border: 1px solid rgba(0, 0, 0, 0.10);
-                    display: inline-block;
-                    font-size: 12px;
-                    font-style: normal;
-                    line-height: 14px;
-                    font-family: 'Roboto', sans-serif;
-                    border-radius: 20px !important;
-                    border-radius: 8px;
-                }
+        .fixed_fee,
+        .percent_fee {
+            input {
+                width: 100px;
             }
         }
+    }
 
-        .editor_field {
-            margin-top: 20px;
-        }
+    .multicheck_fields {
+        & > div {
+            display: flex;
+            align-items: center;
+            justify-content: right;
 
-        .radio_fields {
             label {
-                border: 0.882967px solid #B0A7A7;
-                padding: 10px 15px;
+                color: #000;
+                cursor: inherit;
+                margin: 9px 0 9px 15px;
+                border: 1px solid rgba( 0, 0, 0, 0.1 );
                 display: inline-block;
-                overflow: hidden;
                 font-size: 12px;
-                box-shadow: 0px 3.53187px 3.53187px rgba(0, 0, 0, 0.10);
-                font-family: 'Roboto', sans-serif;
-                font-weight: 400;
+                font-style: normal;
                 line-height: 14px;
-                border-right: 0;
+                font-family: 'Roboto', sans-serif;
+                border-radius: 20px !important;
+                border-radius: 8px;
+            }
+        }
+    }
 
-                &:first-child {
-                    border-top-left-radius: 5px;
-                    border-bottom-left-radius: 5px;
-                }
+    .editor_field {
+        margin-top: 20px;
+    }
 
-                &:last-child {
-                    border-right: 0.882967px solid #B0A7A7;
-                    border-top-right-radius: 5px;
-                    border-bottom-right-radius: 5px;
-                }
+    .radio_fields {
+        label {
+            border: 0.882967px solid #b0a7a7;
+            padding: 10px 15px;
+            display: inline-block;
+            overflow: hidden;
+            font-size: 12px;
+            box-shadow: 0px 3.53187px 3.53187px rgba( 0, 0, 0, 0.1 );
+            font-family: 'Roboto', sans-serif;
+            font-weight: 400;
+            line-height: 14px;
+            border-right: 0;
 
-                &:hover {
-                    color: rgba(3, 58, 163, 0.85);
-                    background: rgba(182, 206, 254, 0.38);
-                    box-sizing: border-box;
-                    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
-                    border-color: rgba(3, 58, 163, 0.81);
-                }
+            &:first-child {
+                border-top-left-radius: 5px;
+                border-bottom-left-radius: 5px;
+            }
+
+            &:last-child {
+                border-right: 0.882967px solid #b0a7a7;
+                border-top-right-radius: 5px;
+                border-bottom-right-radius: 5px;
             }
 
-            .checked {
-                color: rgba(3, 58, 163, 0.85);
-                border: 1px solid rgba(3, 58, 163, 0.81);
-                background: rgba(182, 206, 254, 0.38);
+            &:hover {
+                color: rgba( 3, 58, 163, 0.85 );
+                background: rgba( 182, 206, 254, 0.38 );
                 box-sizing: border-box;
-                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+                box-shadow: 0px 4px 4px rgba( 0, 0, 0, 0.1 );
+                border-color: rgba( 3, 58, 163, 0.81 );
             }
         }
 
-        .repeatable_fields {
-            display: flex;
-            align-items: center;
-            justify-content: right;
+        .checked {
+            color: rgba( 3, 58, 163, 0.85 );
+            border: 1px solid rgba( 3, 58, 163, 0.81 );
+            background: rgba( 182, 206, 254, 0.38 );
+            box-sizing: border-box;
+            box-shadow: 0px 4px 4px rgba( 0, 0, 0, 0.1 );
+        }
+    }
 
-            .dokan-repetable-add-item-btn {
-                color: #fff;
-                width: 25px;
-                border: 0;
-                padding: 0;
-                position: relative;
-                background: #2196F3;
-                min-height: 25px;
-                margin-left: 8px;
-                border-radius: 50%;
-
-                .dashicons-plus-alt2 {
-                    top: 50%;
-                    left: 50%;
-                    position: absolute;
-                    transform: translate(-50%, -50%);
-                    font-size: 18px;
-                }
+    .repeatable_fields {
+        display: flex;
+        align-items: center;
+        justify-content: right;
+
+        .dokan-repetable-add-item-btn {
+            color: #fff;
+            width: 25px;
+            border: 0;
+            padding: 0;
+            position: relative;
+            background: #2196f3;
+            min-height: 25px;
+            margin-left: 8px;
+            border-radius: 50%;
+
+            .dashicons-plus-alt2 {
+                top: 50%;
+                left: 50%;
+                position: absolute;
+                transform: translate( -50%, -50% );
+                font-size: 18px;
             }
         }
+    }
 
-        .dokan-setting-warning {
-            padding: 10px 10px 10px 0;
+    .dokan-setting-warning {
+        padding: 10px 10px 10px 0;
 
-            .dokan-setting-warning-label {
-                color: #d63638;
-                font-weight: bold;
-                margin-right: 10px;
+        .dokan-setting-warning-label {
+            color: #d63638;
+            font-weight: bold;
+            margin-right: 10px;
 
-                span {
-                    margin-top: 6px !important;
-                }
-            }
-
-            .dashicons {
-                margin: 0px;
-                padding: 0px;
+            span {
+                margin-top: 6px !important;
             }
         }
 
-        .add_files {
-            display: flex;
-            align-items: center;
-            justify-content: right;
+        .dashicons {
+            margin: 0px;
+            padding: 0px;
         }
+    }
 
-        .field {
-            flex: 2;
-            align-self: center;
-            text-align: right;
+    .add_files {
+        display: flex;
+        align-items: center;
+        justify-content: right;
+    }
 
-            .switch {
-                display: inline-block;
-            }
+    .field {
+        flex: 2;
+        align-self: center;
+        text-align: right;
 
-            input[type='radio'],
-            input[type='checkbox'] {
-                display: none;
-            }
+        .switch {
+            display: inline-block;
+        }
 
-            select,
-            textarea,
-            input[type='text'],
-            input[type='number'],
-            input[type='button'] {
-                border: 0.957434px solid #686666;
-                min-height: 32px;
-                box-shadow: 0px 3.82974px 3.82974px rgba(0, 0, 0, 0.10);
-                border-radius: 5px;
-            }
+        input[type='radio'],
+        input[type='checkbox'] {
+            display: none;
+        }
 
-            select,
-            textarea {
-                width: 100%;
-            }
+        select,
+        textarea,
+        input[type='text'],
+        input[type='number'],
+        input[type='button'] {
+            border: 0.957434px solid #686666;
+            min-height: 32px;
+            box-shadow: 0px 3.82974px 3.82974px rgba( 0, 0, 0, 0.1 );
+            border-radius: 5px;
+        }
 
-            .small {
-                max-width: 35% !important;
-            }
+        select,
+        textarea {
+            width: 100%;
+        }
 
-            .medium {
-                max-width: 70% !important;
-            }
+        .small {
+            max-width: 35% !important;
+        }
 
-            .large {
-                max-width: 100% !important;
-            }
+        .medium {
+            max-width: 70% !important;
+        }
 
-            label.checked {
-                color: rgba(3, 58, 163, 0.85);
-                border: 1px solid rgba(3, 58, 163, 0.81);
-                background: rgba(182, 206, 254, 0.38);
-                box-sizing: border-box;
-                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+        .large {
+            max-width: 100% !important;
+        }
 
-                .dashicons-yes {
-                    display: inline-block;
-                }
-            }
+        label.checked {
+            color: rgba( 3, 58, 163, 0.85 );
+            border: 1px solid rgba( 3, 58, 163, 0.81 );
+            background: rgba( 182, 206, 254, 0.38 );
+            box-sizing: border-box;
+            box-shadow: 0px 4px 4px rgba( 0, 0, 0, 0.1 );
 
             .dashicons-yes {
-                color: #fff;
-                width: 15px;
-                height: 15px;
-                margin: -1px 3px 0 0;
-                cursor: pointer;
-                display: none;
-                font-size: 15px;
-                background: #1aa0f7;
-                padding-top: 0;
-                border-radius: 50%;
+                display: inline-block;
             }
         }
 
-        .scl_fields_disable {
-            filter: grayscale(1);
+        .dashicons-yes {
+            color: #fff;
+            width: 15px;
+            height: 15px;
+            margin: -1px 3px 0 0;
+            cursor: pointer;
+            display: none;
+            font-size: 15px;
+            background: #1aa0f7;
+            padding-top: 0;
+            border-radius: 50%;
         }
+    }
 
-        .scl_fields {
-            margin: 15px 0 4px 0px;
-            border: 0.82px solid #E5E5E5;
-            padding: 10px 25px;
-            background: rgba(220, 232, 254, 0.38);
-            box-shadow: 0px 3.28px 3.28px rgba(0, 0, 0, 0.10);
-            border-radius: 6.56px;
+    .scl_fields_disable {
+        filter: grayscale( 1 );
+    }
 
-            .scl_header {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
+    .scl_fields {
+        margin: 15px 0 4px 0px;
+        border: 0.82px solid #e5e5e5;
+        padding: 10px 25px;
+        background: rgba( 220, 232, 254, 0.38 );
+        box-shadow: 0px 3.28px 3.28px rgba( 0, 0, 0, 0.1 );
+        border-radius: 6.56px;
 
-                .scl_contents {
-                    flex: 2;
-                    display: flex;
-                    align-items: center;
+        .scl_header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
 
-                    .scl_icon {
-                        flex: 1.3;
-                        text-align: left;
-                        align-self: center;
+            .scl_contents {
+                flex: 2;
+                display: flex;
+                align-items: center;
 
-                        img {
-                            width: 48px;
-                            height: 48px;
-                        }
+                .scl_icon {
+                    flex: 1.3;
+                    text-align: left;
+                    align-self: center;
 
-                        span {
-                            font-size: 50px;
-                        }
+                    img {
+                        width: 48px;
+                        height: 48px;
                     }
 
-                    .scl_desc {
-                        flex: 6;
-                        color: #000000;
-                        font-size: 14px;
-                        text-align: left;
-                        font-style: normal;
-                        font-weight: 300;
-                        line-height: 20px;
-                        font-family: 'Roboto', sans-serif;
+                    span {
+                        font-size: 50px;
                     }
                 }
 
-                .expand_btn {
-                    flex: 2;
+                .scl_desc {
+                    flex: 6;
+                    color: #000000;
+                    font-size: 14px;
+                    text-align: left;
+                    font-style: normal;
+                    font-weight: 300;
+                    line-height: 20px;
+                    font-family: 'Roboto', sans-serif;
+                }
+            }
 
-                    span {
-                        color: #fff;
-                        width: 30px;
-                        cursor: pointer;
-                        margin: 0;
-                        border: 0;
-                        padding: 0;
-                        position: relative;
-                        font-size: 20px;
-                        background: #2196f3;
-                        min-height: 30px;
-                        border-radius: 50%;
-
-                        &:before {
-                            top: 50%;
-                            left: 50%;
-                            position: absolute;
-                            transform: translate(-50%, -50%);
-                        }
-                    }
+            .expand_btn {
+                flex: 2;
 
-                    .active-social-expend-btn {
-                        background: #4CAF4F;
+                span {
+                    color: #fff;
+                    width: 30px;
+                    cursor: pointer;
+                    margin: 0;
+                    border: 0;
+                    padding: 0;
+                    position: relative;
+                    font-size: 20px;
+                    background: #2196f3;
+                    min-height: 30px;
+                    border-radius: 50%;
+
+                    &:before {
+                        top: 50%;
+                        left: 50%;
+                        position: absolute;
+                        transform: translate( -50%, -50% );
                     }
                 }
+
+                .active-social-expend-btn {
+                    background: #4caf4f;
+                }
             }
+        }
 
-            .scl_info {
-                background: #fff;
-
-                .scl_text,
-                .scl_html {
-                    border: 1px solid #b0a7a7;
-                    display: flex;
-                    padding: 10px 30px 15px 27px;
-                    border-top: 0;
-                    background: rgba(244,246,250,.17);
-                    justify-content: space-between;
-
-                    fieldset {
-                        width: 100%;
-
-                        .html_contents {
-                            width: 50%;
-                            text-align: left;
-
-                            .field_heading {
-                                color: #000;
-                                margin: 0;
-                                font-size: 15px;
-                                font-style: normal;
-                                font-weight: 600;
-                                line-height: 30px;
-                                font-family: Roboto,sans-serif;
-
-                                span {
-                                    i {
-                                        margin: 2.5px 0 0 5px;
-                                    }
-
-                                    .tooltip {
-                                        font-size: 14px;
-                                    }
-                                }
-                            }
+        .scl_info {
+            background: #fff;
 
-                            .field_desc {
-                                color: #000;
-                                margin: 0;
-                                font-size: 13px;
-                                font-style: normal;
-                                font-weight: 300;
-                                line-height: 17px;
-                                font-family: Roboto,sans-serif;
-                            }
-                        }
+            .scl_text,
+            .scl_html {
+                border: 1px solid #b0a7a7;
+                display: flex;
+                padding: 10px 30px 15px 27px;
+                border-top: 0;
+                background: rgba( 244, 246, 250, 0.17 );
+                justify-content: space-between;
 
-                        .fields {
-                            width: 50%;
-                            align-self: center;
-                            text-align: right;
+                fieldset {
+                    width: 100%;
 
-                            .checked {
-                                color: rgba(3, 58, 163, 0.85);
-                                border: 1px solid rgba(3, 58, 163, 0.81);
-                                background: rgba(182, 206, 254, 0.38);
-                                box-sizing: border-box;
-                                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+                    .html_contents {
+                        width: 50%;
+                        text-align: left;
+
+                        .field_heading {
+                            color: #000;
+                            margin: 0;
+                            font-size: 15px;
+                            font-style: normal;
+                            font-weight: 600;
+                            line-height: 30px;
+                            font-family: Roboto, sans-serif;
+
+                            span {
+                                i {
+                                    margin: 2.5px 0 0 5px;
+                                }
 
-                                .dashicons-yes {
-                                    display: inline-block;
+                                .tooltip {
+                                    font-size: 14px;
                                 }
                             }
                         }
+
+                        .field_desc {
+                            color: #000;
+                            margin: 0;
+                            font-size: 13px;
+                            font-style: normal;
+                            font-weight: 300;
+                            line-height: 17px;
+                            font-family: Roboto, sans-serif;
+                        }
                     }
 
-                }
+                    .fields {
+                        width: 50%;
+                        align-self: center;
+                        text-align: right;
 
-                &:nth-child(2) {
-                    margin-top: 15px;
-                    border-top: 1px solid #b0a7a7;
-                }
+                        .checked {
+                            color: rgba( 3, 58, 163, 0.85 );
+                            border: 1px solid rgba( 3, 58, 163, 0.81 );
+                            background: rgba( 182, 206, 254, 0.38 );
+                            box-sizing: border-box;
+                            box-shadow: 0px 4px 4px rgba( 0, 0, 0, 0.1 );
 
-                &:last-child {
-                    margin-bottom: 10px;
+                            .dashicons-yes {
+                                display: inline-block;
+                            }
+                        }
+                    }
                 }
             }
-        }
 
-        .gmap-field {
-            text-align: left;
-
-            .mapbox-wrapper {
-                .address-input {
-                    color: #000;
-                    margin: 20px 0;
-                    font-size: 15px;
-
-                    input {
-                        width: 100%;
-                        margin: 5px 0 3px;
-                        display: block;
-                        max-width: 320px;
-                        font-weight: 400;
-                    }
-                }
+            &:nth-child( 2 ) {
+                margin-top: 15px;
+                border-top: 1px solid #b0a7a7;
             }
 
-            .gmap-wrap {
-                .search-address {
-                    color: #000;
-                    margin: 20px 0;
-                    max-width: 320px;
-                }
+            &:last-child {
+                margin-bottom: 10px;
             }
         }
     }
-    .dokan-settings-field-type-radio {
 
-        fieldset {
-            & > label:not(:last-child) {
-                margin-right: 12px !important;
+    .gmap-field {
+        text-align: left;
 
-                & > input[type="radio"] {
-                    margin-right: 2px;
+        .mapbox-wrapper {
+            .address-input {
+                color: #000;
+                margin: 20px 0;
+                font-size: 15px;
+
+                input {
+                    width: 100%;
+                    margin: 5px 0 3px;
+                    display: block;
+                    max-width: 320px;
+                    font-weight: 400;
                 }
             }
         }
-    }
-    .col-3 {
-        width: 24.5%;
-        display: inline-block;
 
-        select {
-            width: 100%;
+        .gmap-wrap {
+            .search-address {
+                color: #000;
+                margin: 20px 0;
+                max-width: 320px;
+            }
+        }
+    }
+}
+.dokan-settings-field-type-radio {
+    fieldset {
+        & > label:not( :last-child ) {
+            margin-right: 12px !important;
+
+            & > input[type='radio'] {
+                margin-right: 2px;
+            }
         }
     }
+}
+.col-3 {
+    width: 24.5%;
+    display: inline-block;
 
-    @media only screen and (max-width: 430px) {
-        .field_contents {
-            padding: 14px 14px 18px 14px;
+    select {
+        width: 100%;
+    }
+}
 
-            fieldset {
-                display: block;
+@media only screen and ( max-width: 430px ) {
+    .field_contents {
+        padding: 14px 14px 18px 14px;
 
-                .field_data {
-                    .field_heading {
-                        font-size: 10px;
-                        line-height: 24px;
-                    }
+        fieldset {
+            display: block;
 
-                    .field_desc {
-                        font-size: 8px;
-                    }
+            .field_data {
+                .field_heading {
+                    font-size: 10px;
+                    line-height: 24px;
                 }
 
-                .field {
-                    margin-top: 15px;
-                    text-align: left;
+                .field_desc {
+                    font-size: 8px;
+                }
+            }
 
-                    select,
-                    textarea,
-                    input[type=text] {
-                        min-height: 28px;
-                        font-size: 8px;
-                    }
+            .field {
+                margin-top: 15px;
+                text-align: left;
 
-                    .small {
-                        max-width: 35% !important;
-                    }
+                select,
+                textarea,
+                input[type='text'] {
+                    min-height: 28px;
+                    font-size: 8px;
+                }
 
-                    .medium {
-                        max-width: 70% !important;
-                    }
+                .small {
+                    max-width: 35% !important;
+                }
 
-                    .large {
-                        max-width: 100% !important;
-                    }
+                .medium {
+                    max-width: 70% !important;
                 }
 
-                .radio_fields {
-                    label {
-                        &:first-child {
-                            display: flex;
-                        }
+                .large {
+                    max-width: 100% !important;
+                }
+            }
+
+            .radio_fields {
+                label {
+                    &:first-child {
+                        display: flex;
                     }
                 }
             }
+        }
 
-            .scl_fields {
-                padding: 10px 15px;
+        .scl_fields {
+            padding: 10px 15px;
 
-                .scl_header {
-                    display: block;
+            .scl_header {
+                display: block;
 
-                    .scl_contents {
-                        display: block;
+                .scl_contents {
+                    display: block;
 
-                        .scl_desc {
-                            font-size: 8px;
-                        }
+                    .scl_desc {
+                        font-size: 8px;
                     }
+                }
 
-                    .expand_btn {
-                        text-align: left;
-                    }
+                .expand_btn {
+                    text-align: left;
                 }
+            }
 
-                .scl_info {
-                    .scl_html,
-                    .scl_text {
-                        padding: 10px;
+            .scl_info {
+                .scl_html,
+                .scl_text {
+                    padding: 10px;
 
-                        .field_html {
-                            font-size: 10px;
-                            line-height: 20px;
-                        }
+                    .field_html {
+                        font-size: 10px;
+                        line-height: 20px;
+                    }
 
-                        .field_desc {
-                            font-size: 8px;
-                        }
+                    .field_desc {
+                        font-size: 8px;
+                    }
 
-                        select,
-                        textarea,
-                        input[type=text] {
-                            font-size: 8px;
-                            min-height: 28px;
-                        }
+                    select,
+                    textarea,
+                    input[type='text'] {
+                        font-size: 8px;
+                        min-height: 28px;
                     }
                 }
             }
         }
     }
+}
+
+@media only screen and ( max-width: 768px ) {
+    .field {
+        select,
+        textarea,
+        input[type='text'] {
+            max-width: 125px !important;
+        }
 
-    @media only screen and (max-width: 768px) {
-        .field {
-            select,
-            textarea,
-            input[type=text] {
-                max-width: 125px !important;
-            }
-
-            .small {
-                max-width: 35% !important;
-            }
+        .small {
+            max-width: 35% !important;
+        }
 
-            .medium {
-                max-width: 70% !important;
-            }
+        .medium {
+            max-width: 70% !important;
+        }
 
-            .large {
-                max-width: 100% !important;
-            }
+        .large {
+            max-width: 100% !important;
         }
     }
+}
 </style>
diff --git a/src/admin/components/Fields/CombineInput.vue b/src/admin/components/Fields/CombineInput.vue
index a17bb40a04..b304fbce51 100644
--- a/src/admin/components/Fields/CombineInput.vue
+++ b/src/admin/components/Fields/CombineInput.vue
@@ -11,8 +11,10 @@
             />
             {{ '%' }}
         </div>
-        <div class="fixed_fee">
+        <div>
             {{ '+' }}
+        </div>
+        <div class="fixed_fee">
             <input
                 type="text"
                 class="wc_input_price regular-text medium"
@@ -21,6 +23,7 @@
                 v-model="fixed"
                 v-on:input="onInput"
             />
+            <span>{{ getCurrencySymbol }}</span>
         </div>
     </div>
 </template>
@@ -53,7 +56,7 @@
                     fixed: '',
                     percentage: ''
                 }
-            }
+            },
         },
         data() {
             return {
@@ -73,6 +76,11 @@
                 this.$emit('change', data);
             }
         },
+        computed:{
+            getCurrencySymbol() {
+                return window.dokan.currency.symbol;
+            }
+        }
     };
 </script>
 
@@ -80,6 +88,7 @@
     .combine_fields {
         display: flex;
         justify-content: right;
+        align-items: center;
 
         .percent_fee {
             padding-right: 10px;
diff --git a/src/admin/components/Fields/WithdrawMethods.vue b/src/admin/components/Fields/WithdrawMethods.vue
new file mode 100644
index 0000000000..f97381f298
--- /dev/null
+++ b/src/admin/components/Fields/WithdrawMethods.vue
@@ -0,0 +1,159 @@
+<template>
+    <div
+        class="field_contents"
+        v-bind:class="[
+            fieldData.content_class ? fieldData.content_class : '',
+        ]"
+    >
+        <fieldset class="wm-box-container">
+            <FieldHeading :field-data="fieldData" />
+            <div class="wm-methods-box-container">
+                <div
+                    v-for="(optionVal, optionKey) in fieldData.options"
+                    class="wm-methods-box"
+                    :key="optionKey"
+                >
+                    <div class="wm-method">
+                        <div class='wm-method-switch'>
+                            <Switches
+                                @input="setCheckedValue"
+                                :enabled="isSwitchOptionChecked( optionKey )"
+                                :value="optionKey"
+                            />
+                        </div>
+                        <h4 class="field_heading">{{ optionVal }}</h4>
+                    </div>
+                    <div class="wm-charges">
+                        <combine-input
+                            v-model="charges[ optionKey ]"
+                            v-on:change='chargeChangeHandler'
+                        />
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+</template>
+
+<script>
+import Switches from 'admin/components/Switches.vue';
+import CombineInput from 'admin/components/Fields/CombineInput.vue';
+import FieldHeading from 'admin/components/FieldHeading.vue';
+
+export default {
+    name: 'WithdrawMethods',
+    data() {
+        return {
+            charges: {},
+            defaultVal: {
+                fixed: '',
+                percentage: ''
+            }
+        };
+    },
+    components: { FieldHeading, CombineInput, Switches },
+    props: [ 'sectionId', 'fieldData', 'fieldValue' ],
+    methods: {
+        isSwitchOptionChecked( optionKey ) {
+            return (
+                this.fieldValue[ this.fieldData.name ] &&
+                this.fieldValue[ this.fieldData.name ][ optionKey ] ===
+                    optionKey
+            );
+        },
+        setCheckedValue( checked, value ) {
+            this.fieldValue[ this.fieldData.name ][ value ] = checked
+                ? value
+                : '';
+        },
+        chargeChangeHandler() {
+            let options_inputs_key = this.fieldData.options_inputs_key ?? 'withdraw_charges';
+            this.fieldValue[ options_inputs_key ] = this.charges;
+        },
+        validateCombineInputData( data ) {
+            if ( 'object' !== typeof data ) {
+                return this.getDefaultDataSet();
+            }
+
+            return data;
+        },
+        getDefaultDataSet() {
+            let charges = {};
+            Object.keys( this.fieldData.options ).forEach( item => {
+                self.charges[item] = this.defaultVal;
+            } );
+
+            return charges;
+        },
+    },
+    beforeMount() {
+        let options_inputs_key = this.fieldData.options_inputs_key ?? 'withdraw_charges';
+        let self = this;
+
+        if ( this.fieldValue[ options_inputs_key ] ) {
+            this.charges = this.validateCombineInputData( this.fieldValue[ options_inputs_key ] );
+        } else  {
+            this.charges = this.getDefaultDataSet();
+        }
+    },
+};
+</script>
+
+<style scoped lang="less">
+.wm-box-container {
+    display: flex;
+    flex-direction: column;
+
+    .wm-methods-box-container {
+        margin-top: 15px;
+
+        .wm-methods-box {
+            border: 1px solid #b0a7a787;
+            padding: 0 30px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            &:not( :last-child ) {
+                border-bottom: 0;
+            }
+
+            .wm-method {
+                display: flex;
+                align-items: center;
+                .wm-method-switch {
+                    margin-right: 1em;
+                }
+            }
+            .wm-charges {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+}
+
+@media only screen and ( max-width: 782px ) {
+    .wm-box-container {
+
+        .wm-methods-box-container {
+
+            .wm-methods-box {
+                flex-direction: column;
+                justify-content: start;
+                align-items: start;
+
+                .wm-method {
+
+                    .wm-method-switch {
+                    }
+                }
+                .wm-charges {
+                    margin-left: -20px;
+                    margin-bottom: 20px;
+                }
+            }
+        }
+    }
+}
+</style>

From 0962450032aeff490492b3941aae033671abf0a9 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Wed, 26 Jul 2023 11:22:01 +0600
Subject: [PATCH 07/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FBring=20charge=20data?=
 =?UTF-8?q?=20to=20vendor=20dashboard=20frontend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/src/js/withdraw.js                 | 12 +++++++
 includes/Assets.php                       |  2 +-
 includes/Dashboard/Templates/Withdraw.php |  7 ++--
 includes/Withdraw/functions.php           |  7 ++++
 templates/withdraw/request-form.php       | 43 +++++++++++++++++++----
 5 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index 9835b7a01c..6f94400471 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -26,6 +26,10 @@
             $("input[name='withdraw-schedule']").on( 'change', (e) => {
                 Dokan_Withdraw.handleScheduleChange( e );
             });
+
+          $(document).on('opening', '#dokan-withdraw-request-popup', function (e) {
+            Dokan_Withdraw.calculateWithdrawCharges();
+          });
         },
         openRequestWithdrawWindow: () => {
             const withdrawTemplate = wp.template( 'withdraw-request-popup' ),
@@ -200,6 +204,14 @@
             const nextDate = $(e.target).data('next-schedule');
             $( '#dokan-withdraw-next-scheduled-date').html(nextDate);
         },
+        calculateWithdrawCharges: () => {
+          let withdrawMethod                  = $("[name='withdraw_method'][id='withdraw-method']").val();
+          let withdrawAmount                  = $("[name='withdraw_amount'][id='withdraw-amount']").val();
+          withdrawAmount                      = accounting.unformat( withdrawAmount, dokan_refund.mon_decimal_point );
+          let {chargePercentage, chargeFixed} = $("select[name='withdraw_method'][id='withdraw-method'] option:selected").data();
+
+
+        },
     };
 
     $(document).ready(function() {
diff --git a/includes/Assets.php b/includes/Assets.php
index 98bc4eb811..2178ff6458 100644
--- a/includes/Assets.php
+++ b/includes/Assets.php
@@ -482,7 +482,7 @@ public function get_scripts() {
             ],
             'dokan-script'              => [
                 'src'     => $asset_url . '/js/dokan.js',
-                'deps'    => [ 'imgareaselect', 'customize-base', 'customize-model', 'dokan-i18n-jed', 'jquery-tiptip', 'moment', 'dokan-date-range-picker' ],
+                'deps'    => [ 'imgareaselect', 'customize-base', 'customize-model', 'dokan-i18n-jed', 'jquery-tiptip', 'moment', 'dokan-date-range-picker', 'dokan-accounting' ],
                 'version' => filemtime( $asset_path . 'js/dokan.js' ),
             ],
             'dokan-vue-vendor'          => [
diff --git a/includes/Dashboard/Templates/Withdraw.php b/includes/Dashboard/Templates/Withdraw.php
index 0664237822..1ce9f35b33 100755
--- a/includes/Dashboard/Templates/Withdraw.php
+++ b/includes/Dashboard/Templates/Withdraw.php
@@ -502,9 +502,10 @@ public function withdraw_request_popup_form_content() {
         $default_withdraw_method = dokan_withdraw_get_default_method( $current_user_id );
         dokan_get_template_part(
             'withdraw/request-form', '', array(
-				'amount'          => NumberUtil::round( $balance, wc_get_price_decimals(), PHP_ROUND_HALF_DOWN ), // we are setting 12.3456 to 12.34 not 12.35
-				'withdraw_method' => $default_withdraw_method,
-				'payment_methods' => $payment_methods,
+				'amount'           => NumberUtil::round( $balance, wc_get_price_decimals(), PHP_ROUND_HALF_DOWN ), // we are setting 12.3456 to 12.34 not 12.35
+				'withdraw_method'  => $default_withdraw_method,
+				'payment_methods'  => $payment_methods,
+                'withdraw_charges' => dokan_withdraw_get_method_charges(),
             )
         );
     }
diff --git a/includes/Withdraw/functions.php b/includes/Withdraw/functions.php
index e25d5f64cc..cc09884313 100644
--- a/includes/Withdraw/functions.php
+++ b/includes/Withdraw/functions.php
@@ -538,6 +538,13 @@ function dokan_is_withdraw_method_enabled( $method_id ) {
             && ! empty( $payment_methods[ $method_id ] );
 }
 
+/**
+ * Returns all withdraw methods charges saved.
+ *
+ * @since DOKAN_SINCE
+ *
+ * @return array
+ */
 function dokan_withdraw_get_method_charges() {
     $charges     = dokan_get_option( 'withdraw_charges', 'dokan_withdraw', '' );
     $methods     = array_keys( dokan_withdraw_get_methods() );
diff --git a/templates/withdraw/request-form.php b/templates/withdraw/request-form.php
index aa77579169..63b06feb54 100644
--- a/templates/withdraw/request-form.php
+++ b/templates/withdraw/request-form.php
@@ -10,6 +10,30 @@
 ?>
 <?php if ( ! empty( $payment_methods ) ) : ?>
     <div class="dokan-form-horizontal withdraw" id="dokan-handle-withdraw-request">
+        <div class="dokan-form-group">
+            <label for="withdraw-method" class="dokan-w4 dokan-control-label">
+                <?php esc_html_e( 'Withdraw Method', 'dokan-lite' ); ?>
+            </label>
+            <div class="dokan-w5 dokan-text-left">
+                <select class="dokan-form-control" required name="withdraw_method" id="withdraw-method">
+                    <?php foreach ( $payment_methods as $method_name ) : ?>
+                        <?php
+                            $fixed_charge      = isset( $withdraw_charges[ $method_name ]['fixed'] ) ? $withdraw_charges[ $method_name ]['fixed'] : '';
+                            $percentage_charge = isset( $withdraw_charges[ $method_name ]['percentage'] ) ? $withdraw_charges[ $method_name ]['percentage'] : '';
+                        ?>
+                        <option
+                            data-charge-fixed="<?php echo esc_attr( $fixed_charge ); ?>"
+                            data-charge-percentage="<?php esc_attr( $percentage_charge ); ?>"
+                            value="<?php echo esc_attr( $method_name ); ?>"
+                            <?php selected( $withdraw_method, $method_name ); ?>
+                        >
+                            <?php echo esc_html( dokan_withdraw_get_method_title( $method_name ) ); ?>
+                        </option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
         <div class="dokan-form-group">
             <label for="withdraw-amount" class="dokan-w4 dokan-control-label">
                 <?php esc_html_e( 'Withdraw Amount', 'dokan-lite' ); ?>
@@ -23,16 +47,21 @@
             </div>
         </div>
 
-        <div class="dokan-form-group">
+        <div class="dokan-form-group" id="dokan-withdraw-charge-section">
             <label for="withdraw-method" class="dokan-w4 dokan-control-label">
-                <?php esc_html_e( 'Withdraw Method', 'dokan-lite' ); ?>
+                <?php esc_html_e( 'Withdraw Charge', 'dokan-lite' ); ?>
             </label>
             <div class="dokan-w5 dokan-text-left">
-                <select class="dokan-form-control" required name="withdraw_method" id="withdraw-method">
-                    <?php foreach ( $payment_methods as $method_name ) : ?>
-                        <option value="<?php echo esc_attr( $method_name ); ?>" <?php selected( $withdraw_method, $method_name ); ?>><?php echo esc_html( dokan_withdraw_get_method_title( $method_name ) ); ?></option>
-                    <?php endforeach; ?>
-                </select>
+                <span><?php echo esc_html( get_woocommerce_currency_symbol() ); ?> 100</span>
+            </div>
+        </div>
+
+        <div class="dokan-form-group" id="dokan-withdraw-revivable-section" style="display: none">
+            <label for="withdraw-method" class="dokan-w4 dokan-control-label">
+                <?php esc_html_e( 'Receivable amount', 'dokan-lite' ); ?>
+            </label>
+            <div class="dokan-w5 dokan-text-left">
+                <span><?php echo esc_html( get_woocommerce_currency_symbol() ); ?> 1200</span>
             </div>
         </div>
 

From 336830858f0e98ec751bf8861ead2970834a497f Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Wed, 26 Jul 2023 14:29:59 +0600
Subject: [PATCH 08/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FRevert=20Fields.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/components/Fields.vue | 2388 ++++++++++++-------------------
 1 file changed, 930 insertions(+), 1458 deletions(-)

diff --git a/src/admin/components/Fields.vue b/src/admin/components/Fields.vue
index 6a3b4d308b..7f55ac070e 100644
--- a/src/admin/components/Fields.vue
+++ b/src/admin/components/Fields.vue
@@ -1,15 +1,7 @@
 <template>
-    <div
-        :class="[ id, `dokan-settings-field-type-${ fieldData.type }` ]"
-        v-if="shouldShow"
-    >
+    <div :class="[id, `dokan-settings-field-type-${fieldData.type}`]" v-if="shouldShow">
         <template v-if="'sub_section' === fieldData.type">
-            <div
-                class="dokan-settings-sub-section"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="dokan-settings-sub-section" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <h3 class="sub-section-title">{{ fieldData.label }}</h3>
                 <p class="sub-section-description">
                     {{ fieldData.description }}
@@ -18,12 +10,7 @@
         </template>
 
         <template v-if="containCommonFields( fieldData.type )">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
@@ -31,273 +18,116 @@
                             v-if="fieldData.secret_text"
                             :type="fieldData.type || 'text'"
                             :id="sectionId + '[' + fieldData.name + ']'"
-                            :name="sectionId + '[' + fieldData.name + ']'"
-                            v-model="fieldValue[ fieldData.name ]"
+                            :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]"
                         />
                         <input
                             v-else
                             :type="fieldData.type || 'text'"
-                            class="regular-text medium"
-                            :id="sectionId + '[' + fieldData.name + ']'"
-                            :class="[
-                                {
-                                    'dokan-input-validation-error':
-                                        hasValidationError( fieldData.name ),
-                                },
-                                fieldData.class,
-                            ]"
+                            class="regular-text medium" :id="sectionId + '[' + fieldData.name + ']'"
+                            :class="[ { 'dokan-input-validation-error': hasValidationError( fieldData.name ) }, fieldData.class ]"
                             :name="sectionId + '[' + fieldData.name + ']'"
-                            v-model="fieldValue[ fieldData.name ]"
+                            v-model="fieldValue[fieldData.name]"
                         />
                     </div>
                 </fieldset>
                 <p v-if="hasError( fieldData.name )" class="dokan-error">
                     {{ getError( fieldData.label ) }}
                 </p>
-                <p
-                    v-if="hasValidationError( fieldData.name )"
-                    class="dokan-error"
-                >
-                    {{ getValidationErrorMessage( fieldData.name ) }}
+                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
+                  {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'number' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
                         <label :for="sectionId + '[' + fieldData.name + ']'">
-                            <input
-                                type="number"
-                                :min="fieldData.min"
-                                :max="fieldData.max"
-                                :step="fieldData.step"
-                                class="regular-text medium"
-                                v-model="fieldValue[ fieldData.name ]"
-                                :class="[
-                                    {
-                                        'dokan-input-validation-error':
-                                            hasValidationError(
-                                                fieldData.name
-                                            ),
-                                    },
-                                    fieldData.class,
-                                ]"
-                                :id="sectionId + '[' + fieldData.name + ']'"
-                                :name="sectionId + '[' + fieldData.name + ']'"
-                            />
+                            <input type="number" :min="fieldData.min" :max="fieldData.max" :step="fieldData.step"
+                                class="regular-text medium" v-model="fieldValue[fieldData.name]"
+                                :class="[ { 'dokan-input-validation-error': hasValidationError( fieldData.name ) }, fieldData.class ]"
+                                :id="sectionId + '[' + fieldData.name + ']'" :name="sectionId + '[' + fieldData.name + ']'"/>
                         </label>
                     </div>
                 </fieldset>
                 <p v-if="hasError( fieldData.name )" class="dokan-error">
                     {{ getError( fieldData.label ) }}
                 </p>
-                <p
-                    v-if="hasValidationError( fieldData.name )"
-                    class="dokan-error"
-                >
-                    {{ getValidationErrorMessage( fieldData.name ) }}
+                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
+                  {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
-        <template
-            v-if="
-                'price' === fieldData.type &&
-                allSettingsValues.dokan_selling &&
-                'combine' !== allSettingsValues.dokan_selling.commission_type
-            "
-        >
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+        <template v-if="'price' === fieldData.type && allSettingsValues.dokan_selling && 'combine' !== allSettingsValues.dokan_selling.commission_type">
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
                         <label :for="sectionId + '[' + fieldData.name + ']'">
-                            <input
-                                type="text"
-                                :min="fieldData.min"
-                                class="regular-text medium"
-                                :id="sectionId + '[' + fieldData.name + ']'"
-                                :class="{
-                                    wc_input_decimal:
-                                        allSettingsValues.dokan_selling
-                                            .commission_type == 'percentage',
-                                    wc_input_price:
-                                        allSettingsValues.dokan_selling
-                                            .commission_type == 'flat',
-                                }"
-                                :name="sectionId + '[' + fieldData.name + ']'"
-                                v-model="fieldValue[ fieldData.name ]"
-                            />
+                            <input type="text" :min="fieldData.min" class="regular-text medium" :id="sectionId + '[' + fieldData.name + ']'"
+                                :class="{ wc_input_decimal: allSettingsValues.dokan_selling.commission_type=='percentage', 'wc_input_price': allSettingsValues.dokan_selling.commission_type=='flat' }"
+                                :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]"/>
                         </label>
                     </div>
                 </fieldset>
                 <p v-if="hasError( fieldData.name )" class="dokan-error">
                     {{ getError( fieldData.label ) }}
                 </p>
-                <p
-                    v-if="hasValidationError( fieldData.name )"
-                    class="dokan-error"
-                >
-                    {{ getValidationErrorMessage( fieldData.name ) }}
+                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
+                  {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
-        <template
-            v-if="
-                'combine' === fieldData.type &&
-                haveCondition( fieldData ) &&
-                fieldData.condition.type == 'show' &&
-                checkConditionLogic( fieldData, fieldValue )
-            "
-        >
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+        <template v-if="'combine' === fieldData.type && haveCondition( fieldData ) && fieldData.condition.type == 'show' && checkConditionLogic( fieldData, fieldValue )">
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field combine_fields">
                         <div class="percent_fee">
-                            <input
-                                type="text"
-                                class="wc_input_decimal regular-text medium"
-                                :id="
-                                    sectionId +
-                                    '[' +
-                                    fieldData.name +
-                                    ']' +
-                                    '[' +
-                                    'percent_fee' +
-                                    ']'
-                                "
-                                :name="
-                                    sectionId +
-                                    '[' +
-                                    fieldData.fields.percent_fee.name +
-                                    ']'
-                                "
-                                v-model="
-                                    fieldValue[
-                                        fieldData.fields.percent_fee.name
-                                    ]
-                                "
-                            />
+                            <input type="text" class="wc_input_decimal regular-text medium" :id="sectionId + '[' + fieldData.name + ']' + '[' + 'percent_fee' + ']'" :name="sectionId + '[' + fieldData.fields.percent_fee.name + ']'" v-model="fieldValue[fieldData.fields.percent_fee.name]">
                             {{ '%' }}
                         </div>
                         <div class="fixed_fee">
                             {{ '+' }}
-                            <input
-                                type="text"
-                                class="wc_input_price regular-text medium"
-                                :id="
-                                    sectionId +
-                                    '[' +
-                                    fieldData.name +
-                                    ']' +
-                                    '[' +
-                                    'fixed_fee' +
-                                    ']'
-                                "
-                                :name="
-                                    sectionId +
-                                    '[' +
-                                    fieldData.fields.fixed_fee.name +
-                                    ']'
-                                "
-                                v-model="
-                                    fieldValue[
-                                        fieldData.fields.fixed_fee.name
-                                    ]
-                                "
-                            />
+                            <input type="text" class="wc_input_price regular-text medium" :id="sectionId + '[' + fieldData.name + ']' + '[' + 'fixed_fee' + ']'" :name="sectionId + '[' + fieldData.fields.fixed_fee.name + ']'" v-model="fieldValue[fieldData.fields.fixed_fee.name]">
                         </div>
                     </div>
                 </fieldset>
-                <p
-                    class="dokan-error combine-commission"
-                    v-if="
-                        hasError( fieldData.fields.percent_fee.name ) &&
-                        hasError( fieldData.fields.fixed_fee.name )
-                    "
-                >
-                    {{
-                        __(
-                            'Both percentage and fixed fee is required.',
-                            'dokan-lite'
-                        )
-                    }}
+                <p class="dokan-error combine-commission" v-if="hasError( fieldData.fields.percent_fee.name ) && hasError( fieldData.fields.fixed_fee.name )">
+                    {{ __( 'Both percentage and fixed fee is required.', 'dokan-lite' ) }}
                 </p>
-                <p
-                    v-else-if="hasError( fieldData.fields.percent_fee.name )"
-                    class="dokan-error combine-commission"
-                >
+                <p v-else-if="hasError( fieldData.fields.percent_fee.name )" class="dokan-error combine-commission">
                     {{ getError( fieldData.fields.percent_fee.label ) }}
                 </p>
-                <p
-                    v-else-if="hasError( fieldData.fields.fixed_fee.name )"
-                    class="dokan-error combine-commission"
-                >
+                <p v-else-if="hasError( fieldData.fields.fixed_fee.name )" class="dokan-error combine-commission">
                     {{ getError( fieldData.fields.fixed_fee.label ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'textarea' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
-                        <textarea
-                            type="textarea"
-                            :rows="fieldData.rows"
-                            :cols="fieldData.cols"
-                            class="regular-text medium"
-                            :id="sectionId + '[' + fieldData.name + ']'"
-                            :name="sectionId + '[' + fieldData.name + ']'"
-                            v-model="fieldValue[ fieldData.name ]"
-                        ></textarea>
+                        <textarea type="textarea" :rows="fieldData.rows" :cols="fieldData.cols" class="regular-text medium" :id="sectionId + '[' + fieldData.name + ']'" :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]"></textarea>
                     </div>
                 </fieldset>
                 <p v-if="hasError( fieldData.name )" class="dokan-error">
                     {{ getError( fieldData.label ) }}
                 </p>
-                <p
-                    v-if="hasValidationError( fieldData.name )"
-                    class="dokan-error"
-                >
+                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
                     {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'switcher' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
@@ -310,119 +140,55 @@
                         </label>
                     </div>
                 </fieldset>
-                <p
-                    v-if="hasValidationError( fieldData.name )"
-                    class="dokan-error"
-                >
+                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
                     {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'multicheck' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field multicheck_fields">
-                        <template
-                            v-for="(optionVal, optionKey) in fieldData.options"
-                        >
+                        <template v-for="(optionVal, optionKey) in fieldData.options">
                             <div :key="optionKey">
                                 {{ optionVal }}
                                 <switches
                                     @input="setCheckedValue"
-                                    :enabled="
-                                        isSwitchOptionChecked( optionKey )
-                                    "
+                                    :enabled="isSwitchOptionChecked( optionKey )"
                                     :value="optionKey"
                                 ></switches>
                             </div>
                         </template>
                     </div>
                 </fieldset>
-                <p
-                    v-if="hasValidationError( fieldData.name )"
-                    class="dokan-error"
-                >
-                    {{ getValidationErrorMessage( fieldData.name ) }}
+                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
+                  {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'select' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
                         <select
-                            v-if="! fieldData.grouped"
+                            v-if="!fieldData.grouped"
                             class="regular medium"
                             :name="sectionId + '[' + fieldData.name + ']'"
                             :id="sectionId + '[' + fieldData.name + ']'"
-                            v-on:change="
-                                ( e ) =>
-                                    ( fieldValue[ fieldData.name ] =
-                                        e.target.value )
-                            "
-                            :value="
-                                fieldValue[ fieldData.name ] ??
-                                fieldData.default ??
-                                ''
-                            "
+                            v-on:change="e => fieldValue[fieldData.name] = e.target.value"
+                            :value="fieldValue[fieldData.name] ?? fieldData.default ?? ''"
                         >
-                            <option
-                                v-if="fieldData.placeholder"
-                                value=""
-                                v-html="fieldData.placeholder"
-                            ></option>
-                            <option
-                                v-for="(
-                                    optionVal, optionKey
-                                ) in fieldData.options"
-                                :key="optionKey"
-                                :value="optionKey"
-                                v-html="optionVal"
-                            ></option>
+                            <option v-if="fieldData.placeholder" value="" v-html="fieldData.placeholder"></option>
+                            <option v-for="( optionVal, optionKey ) in fieldData.options" :key="optionKey" :value="optionKey" v-html="optionVal"></option>
                         </select>
-                        <select
-                            v-else
-                            class="regular medium"
-                            :value="fieldData.default ?? ''"
-                            :name="sectionId + '[' + fieldData.name + ']'"
-                            :id="sectionId + '[' + fieldData.name + ']'"
-                            v-model="fieldValue[ fieldData.name ]"
-                        >
-                            <option
-                                v-if="fieldData.placeholder"
-                                value=""
-                                disabled
-                                v-html="fieldData.placeholder"
-                            ></option>
-                            <optgroup
-                                v-for="(
-                                    optionGroup, optionGroupKey
-                                ) in fieldData.options"
-                                :key="optionGroupKey"
-                                :label="optionGroup.group_label"
-                            >
-                                <option
-                                    v-for="(
-                                        option, optionKey
-                                    ) in optionGroup.group_values"
-                                    :key="optionKey"
-                                    :value="option.value"
-                                    v-html="option.label"
-                                />
+                        <select v-else class="regular medium" :value="fieldData.default ?? ''" :name="sectionId + '[' + fieldData.name + ']'" :id="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]">
+                            <option v-if="fieldData.placeholder" value="" disabled v-html="fieldData.placeholder"></option>
+                            <optgroup v-for="( optionGroup, optionGroupKey ) in fieldData.options" :key="optionGroupKey" :label="optionGroup.group_label">
+                                <option v-for="(option, optionKey ) in optionGroup.group_values" :key="optionKey" :value="option.value" v-html="option.label" />
                             </optgroup>
                         </select>
 
@@ -430,52 +196,23 @@
                             :field="fieldData"
                             :section="sectionId"
                             v-if="fieldData.refresh_options"
-                            :toggle-loading-state="toggleLoadingState"
-                        />
+                            :toggle-loading-state="toggleLoadingState"/>
                     </div>
                 </fieldset>
-                <p
-                    v-if="hasValidationError( fieldData.name )"
-                    class="dokan-error"
-                >
+                <p v-if="hasValidationError( fieldData.name )" class="dokan-error">
                     {{ getValidationErrorMessage( fieldData.name ) }}
                 </p>
             </div>
         </template>
 
         <template v-if="'file' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field add_files">
                         <label :for="sectionId + '[' + fieldData.name + ']'">
-                            <input
-                                type="button"
-                                class="button wpsa-browse"
-                                value="Choose File"
-                                v-on:click.prevent="
-                                    $emit(
-                                        'openMedia',
-                                        {
-                                            sectionId: sectionId,
-                                            name: fieldData.name,
-                                        },
-                                        $event
-                                    )
-                                "
-                            />
-                            <input
-                                type="text"
-                                class="regular-text medium wpsa-url"
-                                :id="sectionId + '[' + fieldData.name + ']'"
-                                :name="sectionId + '[' + fieldData.name + ']'"
-                                v-model="fieldValue[ fieldData.name ]"
-                            />
+                            <input type="button" class="button wpsa-browse" value="Choose File" v-on:click.prevent="$emit( 'openMedia', { sectionId: sectionId, name: fieldData.name }, $event )">
+                            <input type="text" class="regular-text medium wpsa-url" :id="sectionId + '[' + fieldData.name + ']'" :name="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]">
                         </label>
                     </div>
                 </fieldset>
@@ -486,22 +223,15 @@
         </template>
 
         <template v-if="'color' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field">
                         <color-picker
-                            v-model="fieldValue[ fieldData.name ]"
+                            v-model="fieldValue[fieldData.name]"
                             :itemKey="fieldData.name"
                             :customData="singleColorPicker"
-                            @custom-change="
-                                ( e ) => setCustomColor( e, fieldData.name )
-                            "
+                            @custom-change="e => setCustomColor( e, fieldData.name )"
                             @toggleColorPicker="toggleColorPicker"
                         ></color-picker>
                     </div>
@@ -513,12 +243,7 @@
         </template>
 
         <template v-if="'html' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                 </fieldset>
@@ -529,28 +254,15 @@
         </template>
 
         <template v-if="'warning' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <div class="field_data">
-                        <h3
-                            scope="row"
-                            class="field_heading dokan-setting-warning error"
-                        >
+                        <h3 scope="row" class="field_heading dokan-setting-warning error">
                             <span class="dokan-setting-warning-label">
-                                <span
-                                    class="dashicons dashicons-warning"
-                                ></span>
+                                <span class="dashicons dashicons-warning"></span>
                                 {{ fieldData.label }}
                             </span>
-                            <span
-                                class="field_desc"
-                                v-html="fieldData.desc"
-                            ></span>
+                            <span class="field_desc" v-html="fieldData.desc"></span>
                         </h3>
                     </div>
                 </fieldset>
@@ -558,50 +270,15 @@
         </template>
 
         <template v-if="'radio' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field radio_fields">
-                        <template
-                            v-for="(optionVal, optionKey) in fieldData.options"
-                        >
-                            <label
-                                :class="
-                                    isSwitchOptionChecked( optionKey )
-                                        ? 'checked'
-                                        : ''
-                                "
-                                :key="optionKey"
-                                :for="
-                                    sectionId +
-                                    '[' +
-                                    fieldData.name +
-                                    '][' +
-                                    optionKey +
-                                    ']'
-                                "
-                            >
+                        <template v-for="( optionVal, optionKey ) in fieldData.options">
+                            <label :class="isSwitchOptionChecked( optionKey ) ? 'checked' : ''" :key="optionKey" :for="sectionId + '[' + fieldData.name + '][' + optionKey + ']'">
                                 <span class="dashicons dashicons-yes"></span>
-                                <input
-                                    type="radio"
-                                    class="radio"
-                                    :name="optionKey"
-                                    :value="optionKey"
-                                    v-model="fieldValue[ fieldData.name ]"
-                                    :id="
-                                        sectionId +
-                                        '[' +
-                                        fieldData.name +
-                                        '][' +
-                                        optionKey +
-                                        ']'
-                                    "
-                                />
+                                <input type="radio" class="radio" :name="optionKey" :value="optionKey" v-model="fieldValue[fieldData.name]"
+                                    :id="sectionId + '[' + fieldData.name + '][' + optionKey + ']'"/>
                                 {{ optionVal }}
                             </label>
                         </template>
@@ -614,72 +291,34 @@
         </template>
 
         <template v-if="'wpeditor' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                 </fieldset>
                 <div class="field editor_field">
-                    <text-editor
-                        v-model="fieldValue[ fieldData.name ]"
-                        v-html="fieldData.default"
-                    ></text-editor>
+                    <text-editor v-model="fieldValue[fieldData.name]" v-html="fieldData.default"></text-editor>
                 </div>
             </div>
         </template>
 
         <template v-if="'repeatable' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                     <div class="field repeatable_fields">
-                        <input
-                            type="text"
-                            class="regular-text medium"
-                            v-model="repeatableItem[ fieldData.name ]"
-                        />
-                        <a
-                            href="#"
-                            class="button dokan-repetable-add-item-btn"
-                            @click.prevent="
-                                addItem( fieldData.type, fieldData.name )
-                            "
-                        >
+                        <input type="text" class="regular-text medium" v-model="repeatableItem[fieldData.name]">
+                        <a href="#" class="button dokan-repetable-add-item-btn" @click.prevent="addItem( fieldData.type, fieldData.name )">
                             <span class="dashicons dashicons-plus-alt2"></span>
                         </a>
                     </div>
                 </fieldset>
                 <ul class="dokan-settings-repeatable-list">
-                    <template
-                        v-for="(optionVal, optionKey) in fieldValue[
-                            fieldData.name
-                        ]"
-                    >
-                        <li
-                            v-if="fieldValue[ fieldData.name ]"
-                            :key="optionKey"
-                        >
+                    <template v-for="(optionVal, optionKey) in fieldValue[fieldData.name]">
+                        <li v-if="fieldValue[fieldData.name]" :key="optionKey">
                             {{ optionVal.value }}
-                            <span
-                                v-if="! optionVal.must_use"
-                                class="dashicons dashicons-no-alt remove-item"
-                                @click.prevent="
-                                    removeItem( optionKey, fieldData.name )
-                                "
-                            ></span>
-                            <span
-                                class="repeatable-item-description"
-                                v-html="optionVal.desc"
-                            ></span>
+                            <span v-if="!optionVal.must_use" class="dashicons dashicons-no-alt remove-item"
+                                @click.prevent="removeItem( optionKey, fieldData.name )"></span>
+                            <span class="repeatable-item-description" v-html="optionVal.desc"></span>
                         </li>
                     </template>
                 </ul>
@@ -687,46 +326,21 @@
         </template>
 
         <template v-if="'radio_image' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                 </fieldset>
                 <div class="field radio-image-container">
-                    <template v-for="(image, name) in fieldData.options">
-                        <label
-                            class="radio-image"
-                            :key="name"
-                            :class="{
-                                active: fieldValue[ fieldData.name ] === name,
-                                'not-active':
-                                    fieldValue[ fieldData.name ] !== name,
-                            }"
-                        >
-                            <input
-                                type="radio"
-                                class="radio"
-                                :name="fieldData.name"
-                                v-model="fieldValue[ fieldData.name ]"
-                                :value="name"
-                            />
+                     <template v-for="( image, name ) in fieldData.options">
+                        <label class="radio-image" :key="name" :class="{ 'active' : fieldValue[fieldData.name] === name, 'not-active' : fieldValue[fieldData.name] !== name }">
+                            <input type="radio" class="radio" :name="fieldData.name" v-model="fieldValue[fieldData.name]" :value="name">
                             <span class="current-option-indicator">
                                 <span class="dashicons dashicons-yes"></span>
                                 {{ __( 'Active', 'dokan-lite' ) }}
                             </span>
-                            <img :src="image" />
+                            <img :src="image">
                             <span class="active-option">
-                                <button
-                                    class="button button-primary button-hero"
-                                    type="button"
-                                    @click.prevent="
-                                        fieldValue[ fieldData.name ] = name
-                                    "
-                                >
+                                <button class="button button-primary button-hero" type="button" @click.prevent="fieldValue[fieldData.name] = name">
                                     {{ __( 'Select', 'dokan-lite' ) }}
                                 </button>
                             </span>
@@ -737,21 +351,12 @@
         </template>
 
         <template v-if="'gmap' === fieldData.type && ! hideMap">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
                 </fieldset>
                 <div class="field gmap-field">
-                    <input
-                        type="hidden"
-                        :name="sectionId + '[' + fieldData.name + ']'"
-                        :value="mapLocation"
-                    />
+                    <input type="hidden" :name="sectionId + '[' + fieldData.name + ']'" :value="mapLocation">
                     <Mapbox
                         width="100%"
                         height="300px"
@@ -759,15 +364,13 @@
                         :location="mapLocation"
                         @updateMap="onUpdateMap"
                         v-if="mapApiSource === 'mapbox'"
-                        :accessToken="mapboxAccessToken"
-                    />
+                        :accessToken="mapboxAccessToken"/>
                     <GoogleMaps
                         v-else
                         @hideMap="onHideMap"
                         :location="mapLocation"
                         @updateMap="onUpdateMap"
-                        :apiKey="googleMapApiKey"
-                    />
+                        :apiKey="googleMapApiKey"/>
                 </div>
                 <p v-if="hasError( fieldData.name )" class="dokan-error">
                     {{ getError( fieldData.label ) }}
@@ -776,18 +379,10 @@
         </template>
 
         <template v-if="'social' === fieldData.type">
-            <div
-                class="field_contents"
-                v-bind:class="[
-                    fieldData.content_class ? fieldData.content_class : '',
-                ]"
-            >
+            <div class="field_contents" v-bind:class="[fieldData.content_class ? fieldData.content_class : '']">
                 <fieldset>
                     <FieldHeading :fieldData="fieldData"></FieldHeading>
-                    <label
-                        class="social-switch-wraper"
-                        v-if="fieldData.enable_status"
-                    >
+                    <label class="social-switch-wraper" v-if="fieldData.enable_status">
                         <switches
                             @input="onSocialToggleSwitch"
                             :enabled="socialChecked === 'on' ? true : false"
@@ -795,53 +390,21 @@
                         ></switches>
                     </label>
                 </fieldset>
-                <div
-                    class="field scl_fields"
-                    :class="
-                        fieldData.enable_status && 'off' === socialChecked
-                            ? 'scl_fields_disable'
-                            : ''
-                    "
-                >
+                <div class="field scl_fields" :class="fieldData.enable_status && 'off' === socialChecked ? 'scl_fields_disable' : ''">
                     <div class="scl_header">
                         <div class="scl_contents">
                             <div class="scl_icon">
-                                <img
-                                    :src="fieldData.icon_url"
-                                    :alt="fieldData.label"
-                                />
+                                <img :src="fieldData.icon_url" :alt="fieldData.label" />
                             </div>
                             <p class="scl_desc">{{ fieldData.social_desc }}</p>
                         </div>
                         <div class="expand_btn" @click="expandSocial">
-                            <span
-                                class="dashicons"
-                                v-bind:class="[
-                                    ! this.expandSocials
-                                        ? 'dashicons-arrow-down-alt2'
-                                        : 'dashicons-arrow-up-alt2',
-                                    isSocialFieldActivated
-                                        ? 'active-social-expend-btn'
-                                        : '',
-                                ]"
-                            ></span>
+                            <span class="dashicons" v-bind:class="[ ! this.expandSocials ? 'dashicons-arrow-down-alt2' : 'dashicons-arrow-up-alt2', isSocialFieldActivated ? 'active-social-expend-btn' : '']"></span>
                         </div>
                     </div>
-                    <template v-for="(fields, index) in fieldData">
-                        <div
-                            class="scl_info"
-                            v-if="expandSocials && fields.social_field"
-                            :key="index"
-                        >
-                            <div
-                                :class="[
-                                    { scl_html: fields.type === 'html' },
-                                    { scl_text: fields.type !== 'html' },
-                                    fields.content_class
-                                        ? fields.content_class
-                                        : '',
-                                ]"
-                            >
+                    <template v-for="( fields, index ) in fieldData">
+                        <div class="scl_info" v-if="expandSocials && fields.social_field" :key="index">
+                            <div :class="[ { 'scl_html': fields.type === 'html' }, { 'scl_text': fields.type !== 'html' }, fields.content_class ? fields.content_class : '' ]">
                                 <SocialFields
                                     :fieldData="fields"
                                     :fieldValue="fieldValue"
@@ -853,14 +416,6 @@
             </div>
         </template>
 
-        <template v-if="'withdraw-methods' === fieldData.type">
-            <withdraw-methods
-                :section-id="sectionId"
-                :fieldData='fieldData'
-                :field-value='fieldValue'
-            />
-        </template>
-
         <template v-if="customFieldComponents">
             <component
                 :key="index"
@@ -872,1135 +427,1052 @@
                 :validationErrors="validationErrors"
                 :toggleLoadingState="toggleLoadingState"
                 @some-event="thisSomeEvent"
-                v-for="(settingsComponent, index) in customFieldComponents"
-            />
+                v-for="( settingsComponent, index ) in customFieldComponents"/>
         </template>
     </div>
 </template>
 
 <script>
-import colorPicker from 'admin/components/ColorPicker.vue';
-import Switches from 'admin/components/Switches.vue';
-import SocialFields from './SocialFields.vue';
-import FieldHeading from './FieldHeading.vue';
-import SecretInput from './SecretInput.vue';
-import WithdrawMethods from 'admin/components/Fields/WithdrawMethods.vue';
-let Mapbox = dokan_get_lib( 'Mapbox' );
-let TextEditor = dokan_get_lib( 'TextEditor' );
-let GoogleMaps = dokan_get_lib( 'GoogleMaps' );
-let RefreshSettingOptions = dokan_get_lib( 'RefreshSettingOptions' );
-
-export default {
-    name: 'Fields',
-
-    components: {
-        WithdrawMethods,
-        Mapbox,
-        Switches,
-        TextEditor,
-        GoogleMaps,
-        colorPicker,
-        FieldHeading,
-        SocialFields,
-        RefreshSettingOptions,
-        SecretInput,
-    },
-
-    props: [
-        'id',
-        'fieldData',
-        'sectionId',
-        'fieldValue',
-        'allSettingsValues',
-        'errors',
-        'toggleLoadingState',
-        'validationErrors',
-        'dokanAssetsUrl',
-    ],
-
-    data() {
-        return {
-            hideMap: false,
-            checked: this.isChecked(),
-            socialChecked: this.isSocialChecked(),
-            expandSocials: false,
-            repeatableItem: {},
-            repeatableTime: [],
-            singleColorPicker: {
-                default: this.fieldData.default,
-                label: '',
-                show_pallete: false,
-            },
-            yourStringTimeValue: '',
-            customFieldComponents: dokan.hooks.applyFilters(
-                'getDokanCustomFieldComponents',
-                []
-            ),
-        };
-    },
-
-    created() {
-        this.$root.$on( 'hasError', ( key ) => {
-            this.hasValidationError( key );
-        } );
-
-        this.$root.$on( 'getError', ( key ) => {
-            this.getValidationErrorMessage( key );
-        } );
-
-        this.$parent.$on( 'switcHandler', ( fieldKey, value ) => {
-            if ( this.fieldData.name === fieldKey ) {
-                this.checked = value;
+    import colorPicker from "admin/components/ColorPicker.vue";
+    import Switches from "admin/components/Switches.vue";
+    import SocialFields from './SocialFields.vue';
+    import FieldHeading from './FieldHeading.vue';
+    import SecretInput from './SecretInput.vue';
+    let Mapbox                = dokan_get_lib('Mapbox');
+    let TextEditor            = dokan_get_lib('TextEditor');
+    let GoogleMaps            = dokan_get_lib('GoogleMaps');
+    let RefreshSettingOptions = dokan_get_lib('RefreshSettingOptions');
+
+    export default {
+        name: 'Fields',
+
+        components: {
+            Mapbox,
+            Switches,
+            TextEditor,
+            GoogleMaps,
+            colorPicker,
+            FieldHeading,
+            SocialFields,
+            RefreshSettingOptions,
+            SecretInput
+        },
+
+        props: ['id', 'fieldData', 'sectionId', 'fieldValue', 'allSettingsValues', 'errors', 'toggleLoadingState', 'validationErrors', 'dokanAssetsUrl'],
+
+        data() {
+            return {
+                hideMap               : false,
+                checked               : this.isChecked(),
+                socialChecked         : this.isSocialChecked(),
+                expandSocials         : false,
+                repeatableItem        : {},
+                repeatableTime        : [],
+                singleColorPicker     : { default: this.fieldData.default, label: '', show_pallete: false },
+                yourStringTimeValue   : '',
+                customFieldComponents : dokan.hooks.applyFilters( 'getDokanCustomFieldComponents', [] ),
             }
-        } );
-    },
-
-    computed: {
-        shouldShow( e ) {
-            let shouldShow = true;
-
-            if ( this.fieldData.show_if ) {
-                const conditions = this.fieldData.show_if;
-                const dependencies = Object.keys( conditions );
-
-                let i = 0;
-
-                for ( i = 0; i < dependencies.length; i++ ) {
-                    const dependency = dependencies[ i ];
-                    const [ optionId, sectionId = this.sectionId ] = dependency
-                        .split( '.' )
-                        .reverse();
-                    const dependencyValue =
-                        this.allSettingsValues[ sectionId ][ optionId ];
-                    const [ operator, value ] = _.chain(
-                        conditions[ dependency ]
-                    )
-                        .pairs()
-                        .first()
-                        .value();
-
-                    switch ( operator ) {
-                        case 'greater_than':
-                            if ( ! ( dependencyValue > value ) ) {
-                                shouldShow = false;
-                            }
-                            break;
+        },
 
-                        case 'greater_than_equal':
-                            if ( ! ( dependencyValue >= value ) ) {
-                                shouldShow = false;
-                            }
-                            break;
+        created() {
+            this.$root.$on( 'hasError', ( key ) => {
+                this.hasValidationError( key );
+            });
 
-                        case 'less_than':
-                            if ( ! ( dependencyValue < value ) ) {
-                                shouldShow = false;
-                            }
-                            break;
+            this.$root.$on( 'getError', ( key ) => {
+                this.getValidationErrorMessage( key );
+            });
 
-                        case 'less_than':
-                            if ( ! ( dependencyValue <= value ) ) {
-                                shouldShow = false;
-                            }
-                            break;
+            this.$parent.$on( 'switcHandler', ( fieldKey, value ) => {
+                if ( this.fieldData.name === fieldKey ) {
+                    this.checked = value;
+                }
+            });
+        },
 
-                        case 'contains':
-                            if (
-                                ! Object.values( dependencyValue ).includes(
-                                    value
-                                )
-                            ) {
-                                shouldShow = false;
-                            }
-                            break;
+        computed: {
+            shouldShow(e) {
+                let shouldShow = true;
 
-                        case 'equal':
-                        default:
-                            if ( dependencyValue !== value ) {
-                                shouldShow = false;
-                            }
-                            break;
-                    }
+                if ( this.fieldData.show_if ) {
+                    const conditions   = this.fieldData.show_if;
+                    const dependencies = Object.keys( conditions );
+
+                    let i = 0;
+
+                    for ( i = 0; i < dependencies.length; i++ ) {
+                        const dependency            = dependencies[i];
+                        const [ optionId, sectionId = this.sectionId ] = dependency.split( '.' ).reverse();
+                        const dependencyValue       = this.allSettingsValues[ sectionId ][ optionId ];
+                        const [ operator, value ]   = _.chain( conditions[ dependency ] ).pairs().first().value();
+
+                        switch ( operator ) {
+                            case 'greater_than':
+                                if ( ! ( dependencyValue > value ) ) {
+                                    shouldShow = false;
+                                }
+                                break;
+
+                            case 'greater_than_equal':
+                                if ( ! ( dependencyValue >= value ) ) {
+                                    shouldShow = false;
+                                }
+                                break;
+
+                            case 'less_than':
+                                if ( ! ( dependencyValue < value ) ) {
+                                    shouldShow = false;
+                                }
+                                break;
+
+                            case 'less_than':
+                                if ( ! ( dependencyValue <= value ) ) {
+                                    shouldShow = false;
+                                }
+                                break;
+
+                            case 'contains':
+                                if ( ! Object.values( dependencyValue ).includes( value ) ) {
+                                    shouldShow = false;
+                                }
+                                break;
+
+                            case 'equal':
+                            default:
+                                if ( dependencyValue !== value ) {
+                                    shouldShow = false;
+                                }
+                                break;
+                        }
 
-                    if ( ! shouldShow ) {
-                        break;
+                        if ( ! shouldShow ) {
+                            break;
+                        }
                     }
                 }
-            }
 
-            return shouldShow;
-        },
+                return shouldShow;
+            },
 
-        mapApiSource() {
-            return this.allSettingsValues?.dokan_appearance?.map_api_source;
-        },
+            mapApiSource() {
+                return this.allSettingsValues?.dokan_appearance?.map_api_source;
+            },
 
-        mapLocation() {
-            let location = {
-                ...{
-                    latitude: 23.709921,
-                    longitude: 90.40714300000002,
-                    address: 'Dhaka',
-                    zoom: 10,
-                },
-
-                ...this.fieldValue[ this.fieldData.name ],
-            };
-
-            location = {
-                zoom: parseInt( location.zoom ),
-                address: `${ location.address }`,
-                latitude: parseFloat( location.latitude ),
-                longitude: parseFloat( location.longitude ),
-            };
-
-            return location;
-        },
+            mapLocation() {
+                let location = {
+                    ...{
+                        latitude: 23.709921,
+                        longitude: 90.40714300000002,
+                        address: 'Dhaka',
+                        zoom: 10
+                    },
+
+                    ...this.fieldValue[ this.fieldData.name ],
+                };
+
+                location = {
+                    zoom      : parseInt( location.zoom ),
+                    address   : `${location.address}`,
+                    latitude  : parseFloat( location.latitude ),
+                    longitude : parseFloat( location.longitude ),
+                };
+
+                return location;
+            },
 
-        googleMapApiKey() {
-            return this.allSettingsValues?.dokan_appearance?.gmap_api_key;
-        },
+            googleMapApiKey() {
+                return this.allSettingsValues?.dokan_appearance?.gmap_api_key;
+            },
 
-        mapboxAccessToken() {
-            return this.allSettingsValues?.dokan_appearance
-                ?.mapbox_access_token;
-        },
+            mapboxAccessToken() {
+                return this.allSettingsValues?.dokan_appearance?.mapbox_access_token;
+            },
 
-        isSocialFieldActivated() {
-            for ( const data in this.fieldData ) {
-                if (
-                    this.fieldData[ data ].social_field &&
-                    'html' !== this.fieldData[ data ].type &&
-                    ! this.fieldValue[ this.fieldData[ data ].name ]
-                ) {
-                    return false;
+            isSocialFieldActivated() {
+                for (const data in this.fieldData) {
+                    if (this.fieldData[data].social_field && 'html' !== this.fieldData[data].type && ! this.fieldValue[this.fieldData[data].name]) {
+                        return false;
+                    }
                 }
-            }
 
-            return true;
-        },
-    },
-
-    beforeMount() {
-        if (
-            'multicheck' === this.fieldData.type &&
-            ! this.fieldValue[ this.fieldData.name ]
-        ) {
-            this.fieldValue[ this.fieldData.name ] = this.fieldData.default;
-        }
-    },
-
-    methods: {
-        containCommonFields( type ) {
-            return _.contains(
-                [ undefined, 'text', 'email', 'url', 'phone', 'time' ],
-                type
-            );
+                return true;
+            }
         },
 
-        setCheckedValue( checked, value ) {
-            this.fieldValue[ this.fieldData.name ][ value ] = checked
-                ? value
-                : '';
+        beforeMount() {
+            if ( 'multicheck' === this.fieldData.type && ! this.fieldValue[ this.fieldData.name ] ) {
+                this.fieldValue[ this.fieldData.name ] = this.fieldData.default;
+            }
         },
 
-        addItem( type, name ) {
-            this.fieldValue[ name ] = this.fieldValue[ name ] || [];
+        methods: {
+            containCommonFields( type ) {
+                return _.contains( [ undefined, 'text', 'email', 'url', 'phone', 'time' ], type );
+            },
 
-            if (
-                typeof this.repeatableItem[ name ] == 'undefined' ||
-                ! this.repeatableItem[ name ]
-            ) {
-                return;
-            }
+            setCheckedValue( checked, value ) {
+                this.fieldValue[ this.fieldData.name ][ value ] = checked ? value : '';
+            },
 
-            this.fieldValue[ name ].push( {
-                id: this.repeatableItem[ name ]
-                    .trim()
-                    .replace( /\s+/g, '_' )
-                    .toLowerCase(),
-                value: this.repeatableItem[ name ],
-            } );
-            this.repeatableItem[ name ] = '';
-        },
+            addItem( type, name ) {
+                this.fieldValue[ name ] = this.fieldValue[ name ] || [];
 
-        removeItem( optionVal, name ) {
-            this.fieldValue[ name ].splice( optionVal, 1 );
-        },
+                if ( typeof this.repeatableItem[ name ] == 'undefined' || ! this.repeatableItem[ name ] )  {
+                    return;
+                }
 
-        haveCondition( fieldData ) {
-            return fieldData.hasOwnProperty( 'condition' );
-        },
+                this.fieldValue[ name ].push( {
+                        id    : this.repeatableItem[ name ].trim().replace(/\s+/g, '_').toLowerCase(),
+                        value : this.repeatableItem[ name ]
+                    }
+                );
+                this.repeatableItem[ name ] = '';
+            },
 
-        checkConditionLogic( fieldData, fieldValue ) {
-            var logic = fieldData.condition.logic;
-            var isValid = false;
+            removeItem( optionVal, name ) {
+                this.fieldValue[name].splice( optionVal, 1 );
+            },
 
-            _.each( logic, function ( value, key ) {
-                if ( _.contains( value, fieldValue[ key ] ) ) {
-                    isValid = true;
-                }
-            } );
+            haveCondition( fieldData ) {
+                return fieldData.hasOwnProperty( 'condition' );
+            },
 
-            return isValid;
-        },
+            checkConditionLogic( fieldData, fieldValue ) {
+                var logic = fieldData.condition.logic;
+                var isValid = false;
 
-        onHideMap( hideMap ) {
-            this.hideMap = hideMap;
-        },
+                _.each( logic, function( value, key ) {
+                    if ( _.contains( value, fieldValue[ key ] ) ) {
+                        isValid = true;
+                    }
+                } );
 
-        onUpdateMap( payload ) {
-            this.fieldValue[ this.fieldData.name ] = {
-                ...this.mapLocation,
-                ...payload,
-            };
-        },
+                return isValid;
+            },
 
-        isSocialChecked() {
-            /**
-             * If social field has enabled status saved return it or return the default value or return 'on'
-             *
-             * @since DOKAN_SINCE
-             */
-            if (
-                this.fieldData[ 'enable_status' ] &&
-                this.fieldData[ 'enable_status' ][ 'name' ] &&
-                this.fieldValue[ this.fieldData[ 'enable_status' ][ 'name' ] ]
-            ) {
-                return this.fieldValue[
-                    this.fieldData[ 'enable_status' ][ 'name' ]
-                ];
-            } else if (
-                this.fieldData[ 'enable_status' ] &&
-                this.fieldData[ 'enable_status' ][ 'default' ]
-            ) {
-                return this.fieldData[ 'enable_status' ][ 'default' ];
-            }
+            onHideMap( hideMap ) {
+                this.hideMap = hideMap;
+            },
 
-            return 'on';
-        },
+            onUpdateMap( payload ) {
+                this.fieldValue[ this.fieldData.name ] = { ...this.mapLocation, ...payload };
+            },
 
-        thisSomeEvent( value ) {
-            console.log( 'hello priting...', value );
-        },
+            isSocialChecked() {
+                /**
+                 * If social field has enabled status saved return it or return the default value or return 'on'
+                 *
+                 * @since 3.7.24
+                 */
+                if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['name'] && this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ] ) {
+                    return this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ];
+                } else if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['default'] ) {
+                    return this.fieldData[ 'enable_status' ]['default'];
+                }
 
-        isSwitchOptionChecked( optionKey ) {
-            if ( 'multicheck' === this.fieldData.type ) {
-                return (
-                    this.fieldValue[ this.fieldData.name ] &&
-                    this.fieldValue[ this.fieldData.name ][ optionKey ] ===
-                        optionKey
-                );
-            } else if ( 'radio' === this.fieldData.type ) {
-                return (
-                    this.fieldValue[ this.fieldData.name ] &&
-                    this.fieldValue[ this.fieldData.name ] === optionKey
-                );
-            }
+                return 'on';
+            },
 
-            return false;
-        },
 
-        expandSocial() {
-            this.expandSocials = ! this.expandSocials;
-        },
+            thisSomeEvent(value) {
+                console.log('hello priting...', value);
+            },
 
-        getSocialValue( optionValue ) {
-            this.fieldValue[ optionValue.name ] = this.fieldValue[
-                optionValue.name
-            ]
-                ? this.fieldValue[ optionValue.name ]
-                : '';
-        },
+            isSwitchOptionChecked( optionKey ) {
+                if ( 'multicheck' === this.fieldData.type ) {
+                    return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ][ optionKey ] === optionKey;
+                } else if ( 'radio' === this.fieldData.type ) {
+                    return this.fieldValue[ this.fieldData.name ] && this.fieldValue[ this.fieldData.name ] === optionKey;
+                }
 
-        isChecked() {
-            return ! this.fieldValue[ this.fieldData.name ]
-                ? this.fieldData.default
-                : this.fieldValue[ this.fieldData.name ];
-        },
+                return false;
+            },
 
-        onToggleSwitch( status, key ) {
-            if ( 'isChecked' !== key ) {
-                return;
-            }
+            expandSocial() {
+                this.expandSocials = ! this.expandSocials;
+            },
 
-            this.checked = status ? 'on' : 'off';
-            this.fieldValue[ this.fieldData.name ] = status ? 'on' : 'off';
+            getSocialValue( optionValue ) {
+                this.fieldValue[ optionValue.name ] = this.fieldValue[ optionValue.name ] ? this.fieldValue[ optionValue.name ] : '';
+            },
 
-            this.$root.$emit(
-                'onFieldSwitched',
-                this.fieldValue[ this.fieldData.name ],
-                this.fieldData.name
-            );
-        },
+            isChecked() {
+                return ! this.fieldValue[ this.fieldData.name ] ? this.fieldData.default : this.fieldValue[ this.fieldData.name ];
+            },
 
-        onSocialToggleSwitch( status, key ) {
-            if ( 'isSocialChecked' !== key ) {
-                return;
-            }
+            onToggleSwitch( status, key ) {
+                if ( 'isChecked' !== key ) {
+                    return;
+                }
 
-            this.socialChecked = status ? 'on' : 'off';
-            this.fieldValue[ this.fieldData[ 'enable_status' ][ 'name' ] ] =
-                status ? 'on' : 'off';
-        },
+                this.checked                           = status ? 'on' : 'off';
+                this.fieldValue[ this.fieldData.name ] = status ? 'on' : 'off';
 
-        hasError( key ) {
-            let errors = this.errors;
+                this.$root.$emit( 'onFieldSwitched', this.fieldValue[ this.fieldData.name ], this.fieldData.name );
+            },
 
-            if ( ! errors || typeof errors === 'undefined' ) {
-                return false;
-            }
+            onSocialToggleSwitch( status, key ) {
+                if ( 'isSocialChecked' !== key ) {
+                    return;
+                }
 
-            if ( errors.length < 1 ) {
-                return false;
-            }
+                this.socialChecked                     = status ? 'on' : 'off';
+                this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ]          = status ? 'on' : 'off';
+            },
 
-            if ( errors.includes( key ) ) {
-                return key;
-            }
-        },
+            hasError( key ) {
+                let errors = this.errors;
 
-        getError( label ) {
-            return label + ' ' + this.__( 'is required.', 'dokan-lite' );
-        },
+                if ( ! errors || typeof errors === 'undefined' ) {
+                    return false;
+                }
 
-        hasValidationError( key ) {
-            if (
-                this.validationErrors.filter( ( e ) => e.name === key ).length >
-                0
-            ) {
-                return key;
-            }
-        },
+                if ( errors.length < 1 ) {
+                    return false;
+                }
 
-        getValidationErrorMessage( key ) {
-            let errorMessage = '';
-            this.validationErrors.forEach( ( obj ) => {
-                if ( obj.name === key ) {
-                    errorMessage = obj.error;
+                if ( errors.includes( key ) ) {
+                    return key;
                 }
-            } );
+            },
 
-            return errorMessage;
-        },
+            getError( label ) {
+                return label + ' ' + this.__( 'is required.', 'dokan-lite' )
+            },
 
-        toggleColorPicker( data ) {
-            if ( this.fieldData.name === data.key ) {
-                this.singleColorPicker.show_pallete =
-                    ! data.values.show_pallete;
-            } else {
-                this.singleColorPicker.show_pallete = false;
-            }
-        },
+            hasValidationError( key ) {
+                if ( this.validationErrors.filter( e => e.name === key ).length > 0 ) {
+                    return key;
+                }
+            },
 
-        setCustomColor( value, key ) {
-            if ( ! key ) {
-                return;
-            }
+            getValidationErrorMessage( key ) {
+                let errorMessage = '';
+                this.validationErrors.forEach( obj => {
+                    if ( obj.name === key ) {
+                        errorMessage = obj.error;
+                    }
+                } );
+
+                return errorMessage;
+            },
+
+            toggleColorPicker( data ) {
+                if ( this.fieldData.name === data.key ) {
+                    this.singleColorPicker.show_pallete = ! data.values.show_pallete;
+                } else {
+                    this.singleColorPicker.show_pallete = false;
+                }
+            },
+
+            setCustomColor( value, key ) {
+                if ( ! key ) {
+                    return;
+                }
 
-            this.fieldData[ key ] = value;
+                this.fieldData[ key ] = value;
+            },
         },
-    },
-};
+    };
 </script>
 
 <style lang="less">
-span.repeatable-item-description {
-    color: #999;
-    font-size: 11px;
-    font-style: italic;
-}
-ul.dokan-settings-repeatable-list {
-    display: flex;
-    padding: 20px 0 0 20px;
-    flex-wrap: wrap;
-    text-align: right;
-    justify-content: right;
-
-    li {
-        color: rgba( 0, 0, 0, 0.87 );
-        border: 1px solid rgba( 0, 0, 0, 0.1 );
-        padding: 5px 12px;
+    span.repeatable-item-description {
+        color: #999;
+        font-size: 11px;
+        font-style: italic;
+    }
+    ul.dokan-settings-repeatable-list {
         display: flex;
-        font-size: 13px;
-        box-sizing: border-box;
-        background: rgba( 182, 206, 254, 0.38 );
-        margin-top: 6px;
-        box-shadow: 0px 4px 4px rgba( 0, 0, 0, 0.1 );
-        align-items: center;
-        margin-left: 12px;
-        font-family: 'Roboto', sans-serif;
-        line-height: 1;
-        border-radius: 8px;
-        justify-content: center;
-
-        span.remove-item {
-            color: #fff;
-            width: 15px;
-            margin: 0;
-            height: 15px;
-            cursor: pointer;
-            font-size: 15px;
-            background: #1aa0f7;
-            padding-top: 0;
-            margin-left: 5px;
-            border-radius: 50%;
+        padding: 20px 0 0 20px;
+        flex-wrap: wrap;
+        text-align: right;
+        justify-content: right;
+
+        li {
+            color: rgba(0, 0, 0, 0.87);
+            border: 1px solid rgba(0, 0, 0, 0.10);
+            padding: 5px 12px;
+            display: flex;
+            font-size: 13px;
+            box-sizing: border-box;
+            background: rgba(182, 206, 254, 0.38);
+            margin-top: 6px;
+            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+            align-items: center;
+            margin-left: 12px;
+            font-family: 'Roboto', sans-serif;
+            line-height: 1;
+            border-radius: 8px;
+            justify-content: center;
+
+            span.remove-item{
+                color: #fff;
+                width: 15px;
+                margin: 0;
+                height: 15px;
+                cursor: pointer;
+                font-size: 15px;
+                background: #1aa0f7;
+                padding-top: 0;
+                margin-left: 5px;
+                border-radius: 50%;
+            }
         }
     }
-}
-.dokan-repetable-add-item-btn {
-    font-size: 16px !important;
-    font-weight: bold !important;
-    height: 25px !important;
-    line-height: 22px !important;
-}
-.percent_fee,
-.fixed_fee {
-    display: inline-block;
-}
-.percent_fee input,
-.fixed_fee input {
-    width: 60px;
-}
-.additional_fee .description {
-    margin-left: 10px;
-    margin-top: -10px;
-}
-.dokan-error {
-    color: red;
-    margin-top: 0.5em;
-    font-style: italic;
-    margin-bottom: 0;
-}
-.dokan-input-validation-error {
-    border-color: red !important;
-}
-.dokan-error.combine-commission {
-    margin-left: 10px;
-}
-.dokan-settings-sub-section {
-    margin-bottom: 30px;
-
-    .sub-section-title {
-        margin: 0;
-        font-size: 22px;
-        font-family: Roboto, sans-serif;
-        font-weight: 600;
-        line-height: 26px;
-        margin-bottom: 8px;
+    .dokan-repetable-add-item-btn {
+        font-size: 16px !important;
+        font-weight: bold !important;
+        height: 25px !important;
+        line-height: 22px !important;
+    }
+    .percent_fee, .fixed_fee {
+        display: inline-block;
+    }
+    .percent_fee input, .fixed_fee input {
+        width: 60px;
+    }
+    .additional_fee .description {
+        margin-left: 10px;
+        margin-top: -10px;
+    }
+    .dokan-error {
+        color: red;
+        margin-top: .5em;
+        font-style: italic;
+        margin-bottom: 0;
+    }
+    .dokan-input-validation-error {
+      border-color: red !important;
+    }
+    .dokan-error.combine-commission {
+        margin-left: 10px;
     }
+    .dokan-settings-sub-section {
+        margin-bottom: 30px;
 
-    .sub-section-description {
-        margin: 0;
-        font-size: 15px;
-        font-weight: 300;
-        line-height: 21px;
-        font-family: Roboto, sans-serif;
+        .sub-section-title {
+            margin: 0;
+            font-size: 22px;
+            font-family: Roboto, sans-serif;
+            font-weight: 600;
+            line-height: 26px;
+            margin-bottom: 8px;
+        }
 
-        .learn-more-btn {
-            cursor: pointer;
-            text-decoration: none;
+        .sub-section-description {
+            margin: 0;
+            font-size: 15px;
+            font-weight: 300;
+            line-height: 21px;
+            font-family: Roboto, sans-serif;
+
+            .learn-more-btn {
+                cursor: pointer;
+                text-decoration: none;
+            }
         }
     }
-}
-.field_contents.data_clear {
-    background-color: #fffbf3;
+    .field_contents.data_clear {
+        background-color: #FFFBF3;
 
-    .field_desc,
-    .fa-exclamation-triangle {
-        color: #e67e22 !important;
+        .field_desc,
+        .fa-exclamation-triangle {
+            color: #E67E22 !important;
+        }
     }
-}
-.field_contents {
-    border: 1px solid #b0a7a7;
-    padding: 14px 30px 18px 27px;
-    border-top: 0;
-    background: rgba( 244, 246, 250, 0.17 );
-
-    fieldset {
-        display: flex;
-        justify-content: space-between;
+    .field_contents {
+        border: 1px solid #B0A7A7;
+        padding: 14px 30px 18px 27px;
+        border-top: 0;
+        background: rgba(244, 246, 250, 0.17);
 
-        .field_data {
-            flex: 2;
+        fieldset {
+            display: flex;
+            justify-content: space-between;
 
-            .field_heading {
-                color: #000000;
-                margin: 0;
-                font-size: 17px;
-                font-style: normal;
-                font-weight: 600;
-                line-height: 35px;
-                font-family: 'Roboto', sans-serif;
+            .field_data {
+                flex: 2;
 
-                span {
-                    i {
-                        margin: 5px 0 0 5px;
-                    }
+                .field_heading {
+                    color: #000000;
+                    margin: 0;
+                    font-size: 17px;
+                    font-style: normal;
+                    font-weight: 600;
+                    line-height: 35px;
+                    font-family: 'Roboto', sans-serif;
 
-                    .tooltip {
-                        font-size: 14px;
+                    span {
+                        i {
+                            margin: 5px 0 0 5px;
+                        }
+
+                        .tooltip {
+                            font-size: 14px;
+                        }
                     }
                 }
-            }
 
-            .field_desc {
-                color: #000;
-                margin: 0;
-                font-size: 13px;
-                font-style: normal;
-                font-weight: 300;
-                line-height: 17px;
-                font-family: 'Roboto', sans-serif;
+                .field_desc {
+                    color: #000;
+                    margin: 0;
+                    font-size: 13px;
+                    font-style: normal;
+                    font-weight: 300;
+                    line-height: 17px;
+                    font-family: 'Roboto', sans-serif;
 
-                a {
-                    display: inline-block;
+                    a {
+                        display: inline-block;
 
-                    &:hover {
-                        box-shadow: 0 0 0 1px transparent;
-                    }
-                    &:active {
-                        box-shadow: 0 0 0 1px transparent;
-                    }
-                    &:focus {
-                        box-shadow: 0 0 0 1px transparent;
+                        &:hover {
+                            box-shadow: 0 0 0 1px transparent;
+                        }
+                        &:active {
+                            box-shadow: 0 0 0 1px transparent;
+                        }
+                        &:focus {
+                            box-shadow: 0 0 0 1px transparent;
+                        }
                     }
                 }
             }
+
+            .social-switch-wraper {
+                display: flex;
+                align-items: center;
+            }
         }
 
-        .social-switch-wraper {
+        .combine_fields {
             display: flex;
-            align-items: center;
-        }
-    }
+            justify-content: right;
 
-    .combine_fields {
-        display: flex;
-        justify-content: right;
+            .percent_fee {
+                padding-right: 10px;
+            }
 
-        .percent_fee {
-            padding-right: 10px;
+            .fixed_fee,
+            .percent_fee {
+                input {
+                    width: 100px;
+                }
+            }
         }
 
-        .fixed_fee,
-        .percent_fee {
-            input {
-                width: 100px;
+        .multicheck_fields {
+            & > div {
+                display: flex;
+                align-items: center;
+                justify-content: right;
+
+                label {
+                    color: #000;
+                    cursor: inherit;
+                    margin: 9px 0 9px 15px;
+                    border: 1px solid rgba(0, 0, 0, 0.10);
+                    display: inline-block;
+                    font-size: 12px;
+                    font-style: normal;
+                    line-height: 14px;
+                    font-family: 'Roboto', sans-serif;
+                    border-radius: 20px !important;
+                    border-radius: 8px;
+                }
             }
         }
-    }
 
-    .multicheck_fields {
-        & > div {
-            display: flex;
-            align-items: center;
-            justify-content: right;
+        .editor_field {
+            margin-top: 20px;
+        }
 
+        .radio_fields {
             label {
-                color: #000;
-                cursor: inherit;
-                margin: 9px 0 9px 15px;
-                border: 1px solid rgba( 0, 0, 0, 0.1 );
+                border: 0.882967px solid #B0A7A7;
+                padding: 10px 15px;
                 display: inline-block;
+                overflow: hidden;
                 font-size: 12px;
-                font-style: normal;
-                line-height: 14px;
+                box-shadow: 0px 3.53187px 3.53187px rgba(0, 0, 0, 0.10);
                 font-family: 'Roboto', sans-serif;
-                border-radius: 20px !important;
-                border-radius: 8px;
-            }
-        }
-    }
-
-    .editor_field {
-        margin-top: 20px;
-    }
+                font-weight: 400;
+                line-height: 14px;
+                border-right: 0;
 
-    .radio_fields {
-        label {
-            border: 0.882967px solid #b0a7a7;
-            padding: 10px 15px;
-            display: inline-block;
-            overflow: hidden;
-            font-size: 12px;
-            box-shadow: 0px 3.53187px 3.53187px rgba( 0, 0, 0, 0.1 );
-            font-family: 'Roboto', sans-serif;
-            font-weight: 400;
-            line-height: 14px;
-            border-right: 0;
+                &:first-child {
+                    border-top-left-radius: 5px;
+                    border-bottom-left-radius: 5px;
+                }
 
-            &:first-child {
-                border-top-left-radius: 5px;
-                border-bottom-left-radius: 5px;
-            }
+                &:last-child {
+                    border-right: 0.882967px solid #B0A7A7;
+                    border-top-right-radius: 5px;
+                    border-bottom-right-radius: 5px;
+                }
 
-            &:last-child {
-                border-right: 0.882967px solid #b0a7a7;
-                border-top-right-radius: 5px;
-                border-bottom-right-radius: 5px;
+                &:hover {
+                    color: rgba(3, 58, 163, 0.85);
+                    background: rgba(182, 206, 254, 0.38);
+                    box-sizing: border-box;
+                    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
+                    border-color: rgba(3, 58, 163, 0.81);
+                }
             }
 
-            &:hover {
-                color: rgba( 3, 58, 163, 0.85 );
-                background: rgba( 182, 206, 254, 0.38 );
+            .checked {
+                color: rgba(3, 58, 163, 0.85);
+                border: 1px solid rgba(3, 58, 163, 0.81);
+                background: rgba(182, 206, 254, 0.38);
                 box-sizing: border-box;
-                box-shadow: 0px 4px 4px rgba( 0, 0, 0, 0.1 );
-                border-color: rgba( 3, 58, 163, 0.81 );
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
             }
         }
 
-        .checked {
-            color: rgba( 3, 58, 163, 0.85 );
-            border: 1px solid rgba( 3, 58, 163, 0.81 );
-            background: rgba( 182, 206, 254, 0.38 );
-            box-sizing: border-box;
-            box-shadow: 0px 4px 4px rgba( 0, 0, 0, 0.1 );
-        }
-    }
-
-    .repeatable_fields {
-        display: flex;
-        align-items: center;
-        justify-content: right;
+        .repeatable_fields {
+            display: flex;
+            align-items: center;
+            justify-content: right;
 
-        .dokan-repetable-add-item-btn {
-            color: #fff;
-            width: 25px;
-            border: 0;
-            padding: 0;
-            position: relative;
-            background: #2196f3;
-            min-height: 25px;
-            margin-left: 8px;
-            border-radius: 50%;
-
-            .dashicons-plus-alt2 {
-                top: 50%;
-                left: 50%;
-                position: absolute;
-                transform: translate( -50%, -50% );
-                font-size: 18px;
+            .dokan-repetable-add-item-btn {
+                color: #fff;
+                width: 25px;
+                border: 0;
+                padding: 0;
+                position: relative;
+                background: #2196F3;
+                min-height: 25px;
+                margin-left: 8px;
+                border-radius: 50%;
+
+                .dashicons-plus-alt2 {
+                    top: 50%;
+                    left: 50%;
+                    position: absolute;
+                    transform: translate(-50%, -50%);
+                    font-size: 18px;
+                }
             }
         }
-    }
 
-    .dokan-setting-warning {
-        padding: 10px 10px 10px 0;
+        .dokan-setting-warning {
+            padding: 10px 10px 10px 0;
 
-        .dokan-setting-warning-label {
-            color: #d63638;
-            font-weight: bold;
-            margin-right: 10px;
+            .dokan-setting-warning-label {
+                color: #d63638;
+                font-weight: bold;
+                margin-right: 10px;
 
-            span {
-                margin-top: 6px !important;
+                span {
+                    margin-top: 6px !important;
+                }
+            }
+
+            .dashicons {
+                margin: 0px;
+                padding: 0px;
             }
         }
 
-        .dashicons {
-            margin: 0px;
-            padding: 0px;
+        .add_files {
+            display: flex;
+            align-items: center;
+            justify-content: right;
         }
-    }
 
-    .add_files {
-        display: flex;
-        align-items: center;
-        justify-content: right;
-    }
+        .field {
+            flex: 2;
+            align-self: center;
+            text-align: right;
 
-    .field {
-        flex: 2;
-        align-self: center;
-        text-align: right;
+            .switch {
+                display: inline-block;
+            }
 
-        .switch {
-            display: inline-block;
-        }
+            input[type='radio'],
+            input[type='checkbox'] {
+                display: none;
+            }
 
-        input[type='radio'],
-        input[type='checkbox'] {
-            display: none;
-        }
+            select,
+            textarea,
+            input[type='text'],
+            input[type='number'],
+            input[type='button'] {
+                border: 0.957434px solid #686666;
+                min-height: 32px;
+                box-shadow: 0px 3.82974px 3.82974px rgba(0, 0, 0, 0.10);
+                border-radius: 5px;
+            }
 
-        select,
-        textarea,
-        input[type='text'],
-        input[type='number'],
-        input[type='button'] {
-            border: 0.957434px solid #686666;
-            min-height: 32px;
-            box-shadow: 0px 3.82974px 3.82974px rgba( 0, 0, 0, 0.1 );
-            border-radius: 5px;
-        }
+            select,
+            textarea {
+                width: 100%;
+            }
 
-        select,
-        textarea {
-            width: 100%;
-        }
+            .small {
+                max-width: 35% !important;
+            }
 
-        .small {
-            max-width: 35% !important;
-        }
+            .medium {
+                max-width: 70% !important;
+            }
 
-        .medium {
-            max-width: 70% !important;
-        }
+            .large {
+                max-width: 100% !important;
+            }
 
-        .large {
-            max-width: 100% !important;
-        }
+            label.checked {
+                color: rgba(3, 58, 163, 0.85);
+                border: 1px solid rgba(3, 58, 163, 0.81);
+                background: rgba(182, 206, 254, 0.38);
+                box-sizing: border-box;
+                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
 
-        label.checked {
-            color: rgba( 3, 58, 163, 0.85 );
-            border: 1px solid rgba( 3, 58, 163, 0.81 );
-            background: rgba( 182, 206, 254, 0.38 );
-            box-sizing: border-box;
-            box-shadow: 0px 4px 4px rgba( 0, 0, 0, 0.1 );
+                .dashicons-yes {
+                    display: inline-block;
+                }
+            }
 
             .dashicons-yes {
-                display: inline-block;
+                color: #fff;
+                width: 15px;
+                height: 15px;
+                margin: -1px 3px 0 0;
+                cursor: pointer;
+                display: none;
+                font-size: 15px;
+                background: #1aa0f7;
+                padding-top: 0;
+                border-radius: 50%;
             }
         }
 
-        .dashicons-yes {
-            color: #fff;
-            width: 15px;
-            height: 15px;
-            margin: -1px 3px 0 0;
-            cursor: pointer;
-            display: none;
-            font-size: 15px;
-            background: #1aa0f7;
-            padding-top: 0;
-            border-radius: 50%;
+        .scl_fields_disable {
+            filter: grayscale(1);
         }
-    }
 
-    .scl_fields_disable {
-        filter: grayscale( 1 );
-    }
-
-    .scl_fields {
-        margin: 15px 0 4px 0px;
-        border: 0.82px solid #e5e5e5;
-        padding: 10px 25px;
-        background: rgba( 220, 232, 254, 0.38 );
-        box-shadow: 0px 3.28px 3.28px rgba( 0, 0, 0, 0.1 );
-        border-radius: 6.56px;
-
-        .scl_header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
+        .scl_fields {
+            margin: 15px 0 4px 0px;
+            border: 0.82px solid #E5E5E5;
+            padding: 10px 25px;
+            background: rgba(220, 232, 254, 0.38);
+            box-shadow: 0px 3.28px 3.28px rgba(0, 0, 0, 0.10);
+            border-radius: 6.56px;
 
-            .scl_contents {
-                flex: 2;
+            .scl_header {
                 display: flex;
                 align-items: center;
+                justify-content: space-between;
 
-                .scl_icon {
-                    flex: 1.3;
-                    text-align: left;
-                    align-self: center;
+                .scl_contents {
+                    flex: 2;
+                    display: flex;
+                    align-items: center;
 
-                    img {
-                        width: 48px;
-                        height: 48px;
-                    }
+                    .scl_icon {
+                        flex: 1.3;
+                        text-align: left;
+                        align-self: center;
 
-                    span {
-                        font-size: 50px;
+                        img {
+                            width: 48px;
+                            height: 48px;
+                        }
+
+                        span {
+                            font-size: 50px;
+                        }
                     }
-                }
 
-                .scl_desc {
-                    flex: 6;
-                    color: #000000;
-                    font-size: 14px;
-                    text-align: left;
-                    font-style: normal;
-                    font-weight: 300;
-                    line-height: 20px;
-                    font-family: 'Roboto', sans-serif;
+                    .scl_desc {
+                        flex: 6;
+                        color: #000000;
+                        font-size: 14px;
+                        text-align: left;
+                        font-style: normal;
+                        font-weight: 300;
+                        line-height: 20px;
+                        font-family: 'Roboto', sans-serif;
+                    }
                 }
-            }
 
-            .expand_btn {
-                flex: 2;
+                .expand_btn {
+                    flex: 2;
 
-                span {
-                    color: #fff;
-                    width: 30px;
-                    cursor: pointer;
-                    margin: 0;
-                    border: 0;
-                    padding: 0;
-                    position: relative;
-                    font-size: 20px;
-                    background: #2196f3;
-                    min-height: 30px;
-                    border-radius: 50%;
-
-                    &:before {
-                        top: 50%;
-                        left: 50%;
-                        position: absolute;
-                        transform: translate( -50%, -50% );
+                    span {
+                        color: #fff;
+                        width: 30px;
+                        cursor: pointer;
+                        margin: 0;
+                        border: 0;
+                        padding: 0;
+                        position: relative;
+                        font-size: 20px;
+                        background: #2196f3;
+                        min-height: 30px;
+                        border-radius: 50%;
+
+                        &:before {
+                            top: 50%;
+                            left: 50%;
+                            position: absolute;
+                            transform: translate(-50%, -50%);
+                        }
                     }
-                }
 
-                .active-social-expend-btn {
-                    background: #4caf4f;
+                    .active-social-expend-btn {
+                        background: #4CAF4F;
+                    }
                 }
             }
-        }
-
-        .scl_info {
-            background: #fff;
-
-            .scl_text,
-            .scl_html {
-                border: 1px solid #b0a7a7;
-                display: flex;
-                padding: 10px 30px 15px 27px;
-                border-top: 0;
-                background: rgba( 244, 246, 250, 0.17 );
-                justify-content: space-between;
-
-                fieldset {
-                    width: 100%;
-
-                    .html_contents {
-                        width: 50%;
-                        text-align: left;
 
-                        .field_heading {
-                            color: #000;
-                            margin: 0;
-                            font-size: 15px;
-                            font-style: normal;
-                            font-weight: 600;
-                            line-height: 30px;
-                            font-family: Roboto, sans-serif;
-
-                            span {
-                                i {
-                                    margin: 2.5px 0 0 5px;
-                                }
-
-                                .tooltip {
-                                    font-size: 14px;
+            .scl_info {
+                background: #fff;
+
+                .scl_text,
+                .scl_html {
+                    border: 1px solid #b0a7a7;
+                    display: flex;
+                    padding: 10px 30px 15px 27px;
+                    border-top: 0;
+                    background: rgba(244,246,250,.17);
+                    justify-content: space-between;
+
+                    fieldset {
+                        width: 100%;
+
+                        .html_contents {
+                            width: 50%;
+                            text-align: left;
+
+                            .field_heading {
+                                color: #000;
+                                margin: 0;
+                                font-size: 15px;
+                                font-style: normal;
+                                font-weight: 600;
+                                line-height: 30px;
+                                font-family: Roboto,sans-serif;
+
+                                span {
+                                    i {
+                                        margin: 2.5px 0 0 5px;
+                                    }
+
+                                    .tooltip {
+                                        font-size: 14px;
+                                    }
                                 }
                             }
-                        }
 
-                        .field_desc {
-                            color: #000;
-                            margin: 0;
-                            font-size: 13px;
-                            font-style: normal;
-                            font-weight: 300;
-                            line-height: 17px;
-                            font-family: Roboto, sans-serif;
+                            .field_desc {
+                                color: #000;
+                                margin: 0;
+                                font-size: 13px;
+                                font-style: normal;
+                                font-weight: 300;
+                                line-height: 17px;
+                                font-family: Roboto,sans-serif;
+                            }
                         }
-                    }
 
-                    .fields {
-                        width: 50%;
-                        align-self: center;
-                        text-align: right;
+                        .fields {
+                            width: 50%;
+                            align-self: center;
+                            text-align: right;
 
-                        .checked {
-                            color: rgba( 3, 58, 163, 0.85 );
-                            border: 1px solid rgba( 3, 58, 163, 0.81 );
-                            background: rgba( 182, 206, 254, 0.38 );
-                            box-sizing: border-box;
-                            box-shadow: 0px 4px 4px rgba( 0, 0, 0, 0.1 );
+                            .checked {
+                                color: rgba(3, 58, 163, 0.85);
+                                border: 1px solid rgba(3, 58, 163, 0.81);
+                                background: rgba(182, 206, 254, 0.38);
+                                box-sizing: border-box;
+                                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
 
-                            .dashicons-yes {
-                                display: inline-block;
+                                .dashicons-yes {
+                                    display: inline-block;
+                                }
                             }
                         }
                     }
+
                 }
-            }
 
-            &:nth-child( 2 ) {
-                margin-top: 15px;
-                border-top: 1px solid #b0a7a7;
-            }
+                &:nth-child(2) {
+                    margin-top: 15px;
+                    border-top: 1px solid #b0a7a7;
+                }
 
-            &:last-child {
-                margin-bottom: 10px;
+                &:last-child {
+                    margin-bottom: 10px;
+                }
             }
         }
-    }
-
-    .gmap-field {
-        text-align: left;
-
-        .mapbox-wrapper {
-            .address-input {
-                color: #000;
-                margin: 20px 0;
-                font-size: 15px;
 
-                input {
-                    width: 100%;
-                    margin: 5px 0 3px;
-                    display: block;
-                    max-width: 320px;
-                    font-weight: 400;
+        .gmap-field {
+            text-align: left;
+
+            .mapbox-wrapper {
+                .address-input {
+                    color: #000;
+                    margin: 20px 0;
+                    font-size: 15px;
+
+                    input {
+                        width: 100%;
+                        margin: 5px 0 3px;
+                        display: block;
+                        max-width: 320px;
+                        font-weight: 400;
+                    }
                 }
             }
-        }
 
-        .gmap-wrap {
-            .search-address {
-                color: #000;
-                margin: 20px 0;
-                max-width: 320px;
+            .gmap-wrap {
+                .search-address {
+                    color: #000;
+                    margin: 20px 0;
+                    max-width: 320px;
+                }
             }
         }
     }
-}
-.dokan-settings-field-type-radio {
-    fieldset {
-        & > label:not( :last-child ) {
-            margin-right: 12px !important;
-
-            & > input[type='radio'] {
-                margin-right: 2px;
+    .dokan-settings-field-type-radio {
+
+        fieldset {
+            & > label:not(:last-child) {
+                margin-right: 12px !important;
+
+                & > input[type="radio"] {
+                    margin-right: 2px;
+                }
             }
         }
     }
-}
-.col-3 {
-    width: 24.5%;
-    display: inline-block;
+    .col-3 {
+        width: 24.5%;
+        display: inline-block;
 
-    select {
-        width: 100%;
+        select {
+            width: 100%;
+        }
     }
-}
 
-@media only screen and ( max-width: 430px ) {
-    .field_contents {
-        padding: 14px 14px 18px 14px;
+    @media only screen and (max-width: 430px) {
+        .field_contents {
+            padding: 14px 14px 18px 14px;
 
-        fieldset {
-            display: block;
+            fieldset {
+                display: block;
 
-            .field_data {
-                .field_heading {
-                    font-size: 10px;
-                    line-height: 24px;
-                }
+                .field_data {
+                    .field_heading {
+                        font-size: 10px;
+                        line-height: 24px;
+                    }
 
-                .field_desc {
-                    font-size: 8px;
+                    .field_desc {
+                        font-size: 8px;
+                    }
                 }
-            }
 
-            .field {
-                margin-top: 15px;
-                text-align: left;
+                .field {
+                    margin-top: 15px;
+                    text-align: left;
 
-                select,
-                textarea,
-                input[type='text'] {
-                    min-height: 28px;
-                    font-size: 8px;
-                }
+                    select,
+                    textarea,
+                    input[type=text] {
+                        min-height: 28px;
+                        font-size: 8px;
+                    }
 
-                .small {
-                    max-width: 35% !important;
-                }
+                    .small {
+                        max-width: 35% !important;
+                    }
 
-                .medium {
-                    max-width: 70% !important;
-                }
+                    .medium {
+                        max-width: 70% !important;
+                    }
 
-                .large {
-                    max-width: 100% !important;
+                    .large {
+                        max-width: 100% !important;
+                    }
                 }
-            }
 
-            .radio_fields {
-                label {
-                    &:first-child {
-                        display: flex;
+                .radio_fields {
+                    label {
+                        &:first-child {
+                            display: flex;
+                        }
                     }
                 }
             }
-        }
 
-        .scl_fields {
-            padding: 10px 15px;
-
-            .scl_header {
-                display: block;
+            .scl_fields {
+                padding: 10px 15px;
 
-                .scl_contents {
+                .scl_header {
                     display: block;
 
-                    .scl_desc {
-                        font-size: 8px;
+                    .scl_contents {
+                        display: block;
+
+                        .scl_desc {
+                            font-size: 8px;
+                        }
                     }
-                }
 
-                .expand_btn {
-                    text-align: left;
+                    .expand_btn {
+                        text-align: left;
+                    }
                 }
-            }
 
-            .scl_info {
-                .scl_html,
-                .scl_text {
-                    padding: 10px;
+                .scl_info {
+                    .scl_html,
+                    .scl_text {
+                        padding: 10px;
 
-                    .field_html {
-                        font-size: 10px;
-                        line-height: 20px;
-                    }
+                        .field_html {
+                            font-size: 10px;
+                            line-height: 20px;
+                        }
 
-                    .field_desc {
-                        font-size: 8px;
-                    }
+                        .field_desc {
+                            font-size: 8px;
+                        }
 
-                    select,
-                    textarea,
-                    input[type='text'] {
-                        font-size: 8px;
-                        min-height: 28px;
+                        select,
+                        textarea,
+                        input[type=text] {
+                            font-size: 8px;
+                            min-height: 28px;
+                        }
                     }
                 }
             }
         }
     }
-}
-
-@media only screen and ( max-width: 768px ) {
-    .field {
-        select,
-        textarea,
-        input[type='text'] {
-            max-width: 125px !important;
-        }
 
-        .small {
-            max-width: 35% !important;
-        }
+    @media only screen and (max-width: 768px) {
+        .field {
+            select,
+            textarea,
+            input[type=text] {
+                max-width: 125px !important;
+            }
 
-        .medium {
-            max-width: 70% !important;
-        }
+            .small {
+                max-width: 35% !important;
+            }
 
-        .large {
-            max-width: 100% !important;
+            .medium {
+                max-width: 70% !important;
+            }
+
+            .large {
+                max-width: 100% !important;
+            }
         }
     }
-}
-</style>
+</style>
\ No newline at end of file

From e34e992c64f9644dfbf09e7f2e326bb4a6429128 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Wed, 26 Jul 2023 14:31:58 +0600
Subject: [PATCH 09/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FRevert=20Fields.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/components/Fields.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/admin/components/Fields.vue b/src/admin/components/Fields.vue
index 7f55ac070e..2e5ad56e62 100644
--- a/src/admin/components/Fields.vue
+++ b/src/admin/components/Fields.vue
@@ -662,7 +662,7 @@
                 /**
                  * If social field has enabled status saved return it or return the default value or return 'on'
                  *
-                 * @since 3.7.24
+                 * @since DOKAN_SINCE
                  */
                 if ( this.fieldData[ 'enable_status' ] && this.fieldData[ 'enable_status' ]['name'] && this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ] ) {
                     return this.fieldValue[ this.fieldData[ 'enable_status' ]['name'] ];
@@ -1475,4 +1475,4 @@
             }
         }
     }
-</style>
\ No newline at end of file
+</style>

From 9ebb35dcc499210cef78df0003e76b9ccf6bfa3c Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Wed, 26 Jul 2023 14:33:55 +0600
Subject: [PATCH 10/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FRevert=20Fields.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 includes/Admin/Settings.php | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/includes/Admin/Settings.php b/includes/Admin/Settings.php
index 07363d4aca..0af5767cdf 100644
--- a/includes/Admin/Settings.php
+++ b/includes/Admin/Settings.php
@@ -581,11 +581,10 @@ public function get_settings_fields() {
                 'withdraw_methods'      => [
                     'name'    => 'withdraw_methods',
                     'label'   => __( 'Withdraw Methods', 'dokan-lite' ),
-                    'desc'    => __( 'Select suitable withdraw methods for vendors and set withdrawal charges', 'dokan-lite' ),
-                    'type'    => 'withdraw-methods',
+                    'desc'    => __( 'Select suitable withdraw methods for vendors', 'dokan-lite' ),
+                    'type'    => 'multicheck',
                     'default' => apply_filters( 'dokan_settings_withdraw_methods_default', [ 'paypal' => 'paypal' ] ),
                     'options' => dokan_withdraw_get_methods(),
-                    'options_inputs_key' => 'withdraw_charges',
                     'tooltip' => __( 'Check to add available payment methods for vendors to withdraw money.', 'dokan-lite' ),
                 ],
                 'withdraw_limit'        => [

From a9c8bd3ccf1c2f85c8407651a77c228893460cc9 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Wed, 26 Jul 2023 18:30:20 +0600
Subject: [PATCH 11/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FWithdraw=20charge=20sho?=
 =?UTF-8?q?w=20based=20on=20active=20withdraw=20switch=20DONE.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 includes/Admin/Settings.php                   | 19 ++++-
 .../components/{Fields => }/CombineInput.vue  |  3 +-
 src/admin/components/Fields.vue               | 20 +++++-
 ...ithdrawMethods.vue => WithdrawCharges.vue} | 72 ++++++++++++-------
 4 files changed, 85 insertions(+), 29 deletions(-)
 rename src/admin/components/{Fields => }/CombineInput.vue (98%)
 rename src/admin/components/Fields/{WithdrawMethods.vue => WithdrawCharges.vue} (69%)

diff --git a/includes/Admin/Settings.php b/includes/Admin/Settings.php
index 0af5767cdf..dcaae2083d 100644
--- a/includes/Admin/Settings.php
+++ b/includes/Admin/Settings.php
@@ -319,7 +319,7 @@ public function get_settings_sections() {
                 'description'          => __( 'Withdraw Settings, Threshold', 'dokan-lite' ),
                 'document_link'        => 'https://wedevs.com/docs/dokan/settings/withdraw-options/',
                 'settings_title'       => __( 'Withdraw Settings', 'dokan-lite' ),
-                'settings_description' => __( 'You can configure your store\'s withdrawal methods, limits, order status and more.', 'dokan-lite' ),
+                'settings_description' => __( 'You can configure your store\'s withdrawal methods, charges, limits, order status and more.', 'dokan-lite' ),
             ],
             [
                 'id'                   => 'dokan_reverse_withdrawal',
@@ -587,6 +587,23 @@ public function get_settings_fields() {
                     'options' => dokan_withdraw_get_methods(),
                     'tooltip' => __( 'Check to add available payment methods for vendors to withdraw money.', 'dokan-lite' ),
                 ],
+                'withdraw_charges'      => [
+                    'name'    => 'withdraw_charges',
+                    'label'   => __( 'Withdraw Charges', 'dokan-lite' ),
+                    'desc'    => __( 'Select suitable withdraw charges for vendors', 'dokan-lite' ),
+                    'type'    => 'charges',
+                    'options' => dokan_withdraw_get_methods(),
+                    'default' => dokan_withdraw_get_method_charges(),
+                    'show_if' => [
+                        'withdraw_methods' => [
+                            'contains-any' => array_keys( dokan_withdraw_get_methods() ),
+                        ],
+                    ],
+                    'items_show_if' => [
+                        'key'       => 'withdraw_methods',
+                        'condition' => 'contains-key-value',
+                    ],
+                ],
                 'withdraw_limit'        => [
                     'name'                       => 'withdraw_limit',
                     'label'                      => __( 'Minimum Withdraw Limit', 'dokan-lite' ),
diff --git a/src/admin/components/Fields/CombineInput.vue b/src/admin/components/CombineInput.vue
similarity index 98%
rename from src/admin/components/Fields/CombineInput.vue
rename to src/admin/components/CombineInput.vue
index b304fbce51..fde7b09a3c 100644
--- a/src/admin/components/Fields/CombineInput.vue
+++ b/src/admin/components/CombineInput.vue
@@ -15,6 +15,7 @@
             {{ '+' }}
         </div>
         <div class="fixed_fee">
+            <span>{{ getCurrencySymbol }}</span>
             <input
                 type="text"
                 class="wc_input_price regular-text medium"
@@ -23,7 +24,6 @@
                 v-model="fixed"
                 v-on:input="onInput"
             />
-            <span>{{ getCurrencySymbol }}</span>
         </div>
     </div>
 </template>
@@ -72,7 +72,6 @@
                         percentage: self.percentage
                     };
 
-                this.$emit('input', data);
                 this.$emit('change', data);
             }
         },
diff --git a/src/admin/components/Fields.vue b/src/admin/components/Fields.vue
index 2e5ad56e62..6dcdd36ef7 100644
--- a/src/admin/components/Fields.vue
+++ b/src/admin/components/Fields.vue
@@ -416,6 +416,15 @@
             </div>
         </template>
 
+        <template v-if="'charges' === fieldData.type">
+            <withdraw-charges
+                :section-id="sectionId"
+                :fieldData='fieldData'
+                :field-value='fieldValue'
+                :should-show='shouldShow'
+            />
+        </template>
+
         <template v-if="customFieldComponents">
             <component
                 :key="index"
@@ -438,6 +447,7 @@
     import SocialFields from './SocialFields.vue';
     import FieldHeading from './FieldHeading.vue';
     import SecretInput from './SecretInput.vue';
+    import WithdrawCharges from './Fields/WithdrawCharges.vue'
     let Mapbox                = dokan_get_lib('Mapbox');
     let TextEditor            = dokan_get_lib('TextEditor');
     let GoogleMaps            = dokan_get_lib('GoogleMaps');
@@ -455,7 +465,8 @@
             FieldHeading,
             SocialFields,
             RefreshSettingOptions,
-            SecretInput
+            SecretInput,
+            WithdrawCharges
         },
 
         props: ['id', 'fieldData', 'sectionId', 'fieldValue', 'allSettingsValues', 'errors', 'toggleLoadingState', 'validationErrors', 'dokanAssetsUrl'],
@@ -537,7 +548,14 @@
                                 }
                                 break;
 
+                            case 'contains-any':
+                                if ( ! value.some(item => Object.values( dependencyValue ).includes(item)) ) {
+                                    shouldShow = false;
+                                }
+                                break;
+
                             case 'equal':
+
                             default:
                                 if ( dependencyValue !== value ) {
                                     shouldShow = false;
diff --git a/src/admin/components/Fields/WithdrawMethods.vue b/src/admin/components/Fields/WithdrawCharges.vue
similarity index 69%
rename from src/admin/components/Fields/WithdrawMethods.vue
rename to src/admin/components/Fields/WithdrawCharges.vue
index f97381f298..59b6ea3601 100644
--- a/src/admin/components/Fields/WithdrawMethods.vue
+++ b/src/admin/components/Fields/WithdrawCharges.vue
@@ -12,21 +12,15 @@
                     v-for="(optionVal, optionKey) in fieldData.options"
                     class="wm-methods-box"
                     :key="optionKey"
+                    v-if="showItems[optionKey] === optionKey"
                 >
                     <div class="wm-method">
-                        <div class='wm-method-switch'>
-                            <Switches
-                                @input="setCheckedValue"
-                                :enabled="isSwitchOptionChecked( optionKey )"
-                                :value="optionKey"
-                            />
-                        </div>
                         <h4 class="field_heading">{{ optionVal }}</h4>
                     </div>
                     <div class="wm-charges">
                         <combine-input
-                            v-model="charges[ optionKey ]"
-                            v-on:change='chargeChangeHandler'
+                            :value="charges[ optionKey ] ?? {}"
+                            v-on:change='data => chargeChangeHandler( data, optionKey )'
                         />
                     </div>
                 </div>
@@ -37,18 +31,19 @@
 
 <script>
 import Switches from 'admin/components/Switches.vue';
-import CombineInput from 'admin/components/Fields/CombineInput.vue';
+import CombineInput from 'admin/components/CombineInput.vue';
 import FieldHeading from 'admin/components/FieldHeading.vue';
 
 export default {
-    name: 'WithdrawMethods',
+    name: 'WithdrawCharges',
     data() {
         return {
             charges: {},
             defaultVal: {
                 fixed: '',
                 percentage: ''
-            }
+            },
+            showItems: {}
         };
     },
     components: { FieldHeading, CombineInput, Switches },
@@ -58,7 +53,7 @@ export default {
             return (
                 this.fieldValue[ this.fieldData.name ] &&
                 this.fieldValue[ this.fieldData.name ][ optionKey ] ===
-                    optionKey
+                optionKey
             );
         },
         setCheckedValue( checked, value ) {
@@ -66,9 +61,8 @@ export default {
                 ? value
                 : '';
         },
-        chargeChangeHandler() {
-            let options_inputs_key = this.fieldData.options_inputs_key ?? 'withdraw_charges';
-            this.fieldValue[ options_inputs_key ] = this.charges;
+        chargeChangeHandler( data, field ) {
+            this.fieldValue[ this.fieldData.name ][ field ] = data;
         },
         validateCombineInputData( data ) {
             if ( 'object' !== typeof data ) {
@@ -79,15 +73,46 @@ export default {
         },
         getDefaultDataSet() {
             let charges = {};
+
             Object.keys( this.fieldData.options ).forEach( item => {
-                self.charges[item] = this.defaultVal;
+                charges[item] = this.defaultVal;
             } );
 
             return charges;
         },
+
+        itemsShowIf() {
+            if ( ! this.fieldData['items_show_if'] || ! this.fieldData['items_show_if']['key'] || ! this.fieldData['items_show_if']['condition'] ) {
+                return true;
+            }
+
+            let showIf = this.fieldData.items_show_if;
+            let self = this;
+
+            switch ( showIf.condition ) {
+                case 'contains-key-value':
+                    let data = {};
+                    Object.keys( this.fieldData.options ).forEach(item => {
+                        data[item] = self.fieldValue[showIf.key][item] ?? false;
+                    });
+
+                    self.showItems = data;
+                    break
+            }
+        },
+    },
+
+    watch: {
+        $props: {
+            handler() {
+                this.itemsShowIf();
+            },
+            deep: true,
+        }
     },
+
     beforeMount() {
-        let options_inputs_key = this.fieldData.options_inputs_key ?? 'withdraw_charges';
+        let options_inputs_key = this.fieldData.name;
         let self = this;
 
         if ( this.fieldValue[ options_inputs_key ] ) {
@@ -95,6 +120,8 @@ export default {
         } else  {
             this.charges = this.getDefaultDataSet();
         }
+
+        this.itemsShowIf();
     },
 };
 </script>
@@ -108,22 +135,19 @@ export default {
         margin-top: 15px;
 
         .wm-methods-box {
-            border: 1px solid #b0a7a787;
+            border-bottom: 1px solid #b0a7a752;
             padding: 0 30px;
             display: flex;
             justify-content: space-between;
             align-items: center;
 
-            &:not( :last-child ) {
+            &:last-child {
                 border-bottom: 0;
             }
 
             .wm-method {
                 display: flex;
                 align-items: center;
-                .wm-method-switch {
-                    margin-right: 1em;
-                }
             }
             .wm-charges {
                 display: flex;
@@ -145,8 +169,6 @@ export default {
 
                 .wm-method {
 
-                    .wm-method-switch {
-                    }
                 }
                 .wm-charges {
                     margin-left: -20px;

From 21a1495061371da0c0cc6cfc2dede7784c1c1d2c Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Thu, 27 Jul 2023 12:02:54 +0600
Subject: [PATCH 12/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FShow=20charge=20and=20r?=
 =?UTF-8?q?evivable=20amount=20in=20vendor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/src/js/withdraw.js           | 53 +++++++++++++++++++++++++----
 templates/withdraw/request-form.php |  8 ++---
 2 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index 6f94400471..fd0a6ae0c9 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -27,9 +27,13 @@
                 Dokan_Withdraw.handleScheduleChange( e );
             });
 
-          $(document).on('opening', '#dokan-withdraw-request-popup', function (e) {
-            Dokan_Withdraw.calculateWithdrawCharges();
-          });
+            $("[name='withdraw_method'][id='withdraw-method']").on( 'change', (e) => {
+                Dokan_Withdraw.calculateWithdrawCharges();
+            });
+
+            $( 'input#withdraw-amount').on( 'input', (e) => {
+                Dokan_Withdraw.calculateWithdrawCharges();
+            });
         },
         openRequestWithdrawWindow: () => {
             const withdrawTemplate = wp.template( 'withdraw-request-popup' ),
@@ -37,6 +41,9 @@
                     width       : 690,
                     overlayColor: 'rgba(0, 0, 0, 0.8)',
                     headerColor : dokan.modal_header_color,
+                    onOpening: function(modal){
+                        Dokan_Withdraw.calculateWithdrawCharges();
+                    },
                 } );
 
             modal.iziModal( 'setContent', withdrawTemplate().trim() );
@@ -205,12 +212,44 @@
             $( '#dokan-withdraw-next-scheduled-date').html(nextDate);
         },
         calculateWithdrawCharges: () => {
-          let withdrawMethod                  = $("[name='withdraw_method'][id='withdraw-method']").val();
-          let withdrawAmount                  = $("[name='withdraw_amount'][id='withdraw-amount']").val();
-          withdrawAmount                      = accounting.unformat( withdrawAmount, dokan_refund.mon_decimal_point );
-          let {chargePercentage, chargeFixed} = $("select[name='withdraw_method'][id='withdraw-method'] option:selected").data();
+            let withdrawAmount                  = $("[name='withdraw_amount'][id='withdraw-amount']").val();
+            withdrawAmount                      = accounting.unformat( withdrawAmount, dokan_refund.mon_decimal_point );
+            let {chargePercentage, chargeFixed} = $("select[name='withdraw_method'][id='withdraw-method'] option:selected").data();
+            let chargeAmount                    = 0;
+
+            let chargeText = "";
+            if ( chargeFixed ) {
+                chargeText += accounting.formatMoney( chargeFixed, dokan.currency );
+                chargeAmount += chargeFixed;
+            }
+            if ( chargePercentage ) {
+              let percentageAmount = chargePercentage/100*withdrawAmount;
+              chargeAmount += percentageAmount;
+              chargeText += chargeText ? ' + ' : '';
+              chargeText += parseFloat( accounting.formatNumber( chargePercentage, dokan_refund.rounding_precision, '' ) )
+                  .toString()
+                  .replace( '.', dokan_refund.mon_decimal_point ) + '%';
+              chargeText += ` = ${accounting.formatMoney(chargeAmount)}`;
+            }
+
+            Dokan_Withdraw.showWithdrawChargeHtml( chargeText, chargeAmount, withdrawAmount );
+        },
+
+        showWithdrawChargeHtml( chargeText, chargeAmount, withdrawAmount ) {
+          let chargeSection    = $( "#dokan-withdraw-charge-section" );
+          let revivableSection = $( "#dokan-withdraw-revivable-section" );
+
+          if ( ! withdrawAmount ) {
+            chargeSection.hide();
+            revivableSection.hide();
+            return;
+          }
 
+          $( "#dokan-withdraw-charge-section-text" ).html( chargeText );
+          $( "#dokan-withdraw-revivable-section-text" ).html( accounting.formatMoney( withdrawAmount - chargeAmount ) );
 
+          chargeSection.show();
+          revivableSection.show();
         },
     };
 
diff --git a/templates/withdraw/request-form.php b/templates/withdraw/request-form.php
index 63b06feb54..ff45e9aa37 100644
--- a/templates/withdraw/request-form.php
+++ b/templates/withdraw/request-form.php
@@ -23,7 +23,7 @@
                         ?>
                         <option
                             data-charge-fixed="<?php echo esc_attr( $fixed_charge ); ?>"
-                            data-charge-percentage="<?php esc_attr( $percentage_charge ); ?>"
+                            data-charge-percentage="<?php echo esc_attr( $percentage_charge ); ?>"
                             value="<?php echo esc_attr( $method_name ); ?>"
                             <?php selected( $withdraw_method, $method_name ); ?>
                         >
@@ -47,12 +47,12 @@
             </div>
         </div>
 
-        <div class="dokan-form-group" id="dokan-withdraw-charge-section">
+        <div class="dokan-form-group" id="dokan-withdraw-charge-section" style="display: none">
             <label for="withdraw-method" class="dokan-w4 dokan-control-label">
                 <?php esc_html_e( 'Withdraw Charge', 'dokan-lite' ); ?>
             </label>
             <div class="dokan-w5 dokan-text-left">
-                <span><?php echo esc_html( get_woocommerce_currency_symbol() ); ?> 100</span>
+                <span  id="dokan-withdraw-charge-section-text"></span>
             </div>
         </div>
 
@@ -61,7 +61,7 @@
                 <?php esc_html_e( 'Receivable amount', 'dokan-lite' ); ?>
             </label>
             <div class="dokan-w5 dokan-text-left">
-                <span><?php echo esc_html( get_woocommerce_currency_symbol() ); ?> 1200</span>
+                <span  id="dokan-withdraw-revivable-section-text"></span>
             </div>
         </div>
 

From ec98694e0fa97b12f4c1ede29b7bf35802683d96 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Thu, 27 Jul 2023 17:05:39 +0600
Subject: [PATCH 13/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FSave=20withdraw=20charg?=
 =?UTF-8?q?e=20when=20request=20vendor.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/src/js/withdraw.js      |   7 +-
 includes/Withdraw/Withdraw.php | 162 ++++++++++++++++++++++++++++++---
 2 files changed, 156 insertions(+), 13 deletions(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index fd0a6ae0c9..c5e3de2fc7 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -212,10 +212,14 @@
             $( '#dokan-withdraw-next-scheduled-date').html(nextDate);
         },
         calculateWithdrawCharges: () => {
+            if ( $('#dokan-send-withdraw-request-popup-form > .dokan-alert-danger').length ) {
+              return;
+            }
+
             let withdrawAmount                  = $("[name='withdraw_amount'][id='withdraw-amount']").val();
             withdrawAmount                      = accounting.unformat( withdrawAmount, dokan_refund.mon_decimal_point );
             let {chargePercentage, chargeFixed} = $("select[name='withdraw_method'][id='withdraw-method'] option:selected").data();
-            let chargeAmount                    = 0;
+            let chargeAmount           = 0;
 
             let chargeText = "";
             if ( chargeFixed ) {
@@ -238,7 +242,6 @@
         showWithdrawChargeHtml( chargeText, chargeAmount, withdrawAmount ) {
           let chargeSection    = $( "#dokan-withdraw-charge-section" );
           let revivableSection = $( "#dokan-withdraw-revivable-section" );
-
           if ( ! withdrawAmount ) {
             chargeSection.hide();
             revivableSection.hide();
diff --git a/includes/Withdraw/Withdraw.php b/includes/Withdraw/Withdraw.php
index 663d9239f7..3b813b1386 100644
--- a/includes/Withdraw/Withdraw.php
+++ b/includes/Withdraw/Withdraw.php
@@ -22,15 +22,18 @@ class Withdraw {
      */
     public function __construct( $data = [] ) {
         $defaults = [
-            'id'      => 0,
-            'user_id' => 0,
-            'amount'  => 0,
-            'date'    => current_time( 'mysql' ),
-            'status'  => dokan()->withdraw->get_status_code( 'pending' ),
-            'method'  => 'paypal',
-            'note'    => '',
-            'details' => '',
-            'ip'      => '',
+            'id'          => 0,
+            'user_id'     => 0,
+            'amount'      => 0,
+            'date'        => current_time( 'mysql' ),
+            'status'      => dokan()->withdraw->get_status_code( 'pending' ),
+            'method'      => 'paypal',
+            'note'        => '',
+            'details'     => '',
+            'charge'      => 0,
+            'recivable'   => 0,
+            'charge_data' => [],
+            'ip'          => '',
         ];
 
         $data = wp_parse_args( $data, $defaults );
@@ -46,6 +49,19 @@ public function __construct( $data = [] ) {
             'details' => $data['details'],
             'ip'      => $data['ip'],
         ];
+
+        $details     = maybe_unserialize( $data['details'] );
+        $charge      = isset( $details['charge'] ) ? wc_format_decimal( $details['charge'] ) : 0;
+        $receivable  = isset( $details['receivable'] ) ? wc_format_decimal( $details['receivable'] ) : $this->get_amount();
+        $charge_data = isset( $details['charge_data'] ) ? $details['charge_data'] : [
+			'fixed' => 0,
+			'percentage' => 0,
+		];
+
+        $this
+            ->set_charge( $charge )
+            ->set_recivable( $receivable )
+            ->set_charge_data( $charge_data );
     }
 
     /**
@@ -158,6 +174,39 @@ public function get_ip() {
         return $this->data['ip'];
     }
 
+    /**
+     * Get withdraw charge
+     *
+     * @since DOKAN_SINCE
+     *
+     * @returns int|float
+     */
+    public function get_charge() {
+        return $this->data['charge'];
+    }
+
+    /**
+     * Get withdraw revivable amount after deducting the charge amount.
+     *
+     * @since DOKAN_SINCE
+     *
+     * @returns int|float
+     */
+    public function get_receivable_amount() {
+        return $this->data['receivable'];
+    }
+
+    /**
+     * Get withdraw charge information.
+     *
+     * @since DOKAN_SINCE
+     *
+     * @returns array
+     */
+    public function get_charge_data() {
+        return $this->data['charge_data'];
+    }
+
     /**
      * Set user_id
      *
@@ -270,6 +319,76 @@ public function set_ip( $ip ) {
         return $this;
     }
 
+    /**
+     * Sets charge.
+     *
+     * @since DOKAN_SINCE
+     *
+     * @param $amount
+     *
+     * @return \WeDevs\Dokan\Withdraw\Withdraw
+     */
+    public function set_charge( $amount ) {
+        $this->data['charge'] = floatval( $amount );
+
+        return $this;
+    }
+
+    /**
+     * Set receivable amount
+     *
+     * @since DOKAN_SINCE
+     *
+     * @param $receivable
+     *
+     * @return \WeDevs\Dokan\Withdraw\Withdraw
+     */
+    public function set_recivable( $receivable ) {
+        $this->data['receivable'] = floatval( $receivable );
+
+        return $this;
+    }
+
+    /**
+     * Sets charge data.
+     *
+     * @since DOKAN_SINCE
+     *
+     * @param $charge_data
+     *
+     * @return \WeDevs\Dokan\Withdraw\Withdraw
+     */
+    public function set_charge_data( $charge_data ) {
+        $this->data['charge_data'] = $charge_data;
+
+        return $this;
+    }
+
+    /**
+     * Calculate withdraw charge
+     *
+     * @since DOKAN_SINCE
+     *
+     * @return void
+     */
+    private function calculate_charge() {
+        $charge_data = $this->get_charge_data();
+        $fixed       = $charge_data['fixed'];
+        $percentage  = $charge_data['percentage'];
+        $charge      = 0;
+
+        if ( ! empty( $fixed ) ) {
+            $charge += (int) $fixed;
+        }
+
+        if ( ! empty( $percentage ) ) {
+            $charge += $percentage / 100 * (float) $this->get_amount();
+        }
+
+        $this->set_charge( $charge );
+        $this->set_recivable( floatval( $this->get_amount() - floatval( $charge ) ) );
+    }
+
     /**
      * Create or update a withdraw
      *
@@ -295,13 +414,34 @@ public function save() {
     protected function create() {
         global $wpdb;
 
-        $this->data['details'] = maybe_serialize( dokan()->withdraw->get_formatted_details( $this->data['method'], absint( $this->data['user_id'] ) ) );
+        $all_charges = dokan_withdraw_get_method_charges();
+        $current_method_charge_data = $all_charges[ $this->get_method() ];
+
+        $this->set_charge_data( $current_method_charge_data );
+        $this->calculate_charge();
+
+        $details = dokan()->withdraw->get_formatted_details( $this->data['method'], absint( $this->data['user_id'] ) );
+
+        $details['charge']      = $this->get_charge();
+        $details['receivable']  = $this->get_receivable_amount();
+        $details['charge_data'] = $this->get_charge_data();
+
+        $this->data['details'] = maybe_serialize( apply_filters( 'dokan_withdraw_request_details_data', $details, $this ) );
 
         unset( $this->data['id'] );
 
         $inserted = $wpdb->insert(
             $wpdb->dokan_withdraw,
-            $this->data,
+            [
+                'user_id' => $this->get_user_id(),
+                'amount'  => $this->get_amount(),
+                'date'    => $this->get_date(),
+                'status'  => $this->get_status(),
+                'method'  => $this->get_method(),
+                'note'    => $this->get_note(),
+                'details' => $this->get_details(),
+                'ip'      => $this->get_ip(),
+            ],
             [ '%d', '%s', '%s', '%d', '%s', '%s', '%s', '%s' ]
         );
 

From bb967ccf663022ea3f68888649014248b3d17a25 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Fri, 28 Jul 2023 10:41:38 +0600
Subject: [PATCH 14/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FShow=20withdraw=20charg?=
 =?UTF-8?q?e=20and=20receivable=20amount=20in=20admin=20and=20vendor=20das?=
 =?UTF-8?q?hboard=20withdraw=20list.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 includes/Dashboard/Templates/Withdraw.php      |  9 ++++++---
 includes/REST/WithdrawController.php           |  6 ++++++
 includes/Withdraw/Hooks.php                    |  6 +++---
 includes/Withdraw/Manager.php                  |  8 ++++++++
 src/admin/pages/Withdraw.vue                   | 10 ++++++++++
 .../withdraw/approved-request-listing.php      | 12 +++++++++---
 .../withdraw/cancelled-request-listing.php     | 14 ++++++++++----
 .../pending-request-listing-dashboard.php      | 18 ++++++++++++------
 8 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/includes/Dashboard/Templates/Withdraw.php b/includes/Dashboard/Templates/Withdraw.php
index 1ce9f35b33..13347a54fb 100755
--- a/includes/Dashboard/Templates/Withdraw.php
+++ b/includes/Dashboard/Templates/Withdraw.php
@@ -434,13 +434,16 @@ public function withdraw_dashboard_layout_display() {
             return;
         }
 
+        /**
+         * @var $last_withdraw \WeDevs\Dokan\Withdraw\Withdraw[]
+         */
         $last_withdraw = dokan()->withdraw->get_withdraw_requests( dokan_get_current_user_id(), 1, 1 );
         $payment_details = __( 'You do not have any approved withdraw yet.', 'dokan-lite' );
 
         if ( ! empty( $last_withdraw ) ) {
-            $last_withdraw_amount      = '<strong>' . wc_price( $last_withdraw[0]->amount ) . '</strong>';
-            $last_withdraw_date        = '<strong><em>' . dokan_format_date( $last_withdraw[0]->date ) . '</em></strong>';
-            $last_withdraw_method_used = '<strong>' . dokan_withdraw_get_method_title( $last_withdraw[0]->method ) . '</strong>';
+            $last_withdraw_amount      = '<strong>' . wc_price( $last_withdraw[0]->get_amount() ) . '</strong>';
+            $last_withdraw_date        = '<strong><em>' . dokan_format_date( $last_withdraw[0]->get_date() ) . '</em></strong>';
+            $last_withdraw_method_used = '<strong>' . dokan_withdraw_get_method_title( $last_withdraw[0]->get_method() ) . '</strong>';
 
             // translators: 1: Last formatted withdraw amount 2: Last formatted withdraw date 3: Last formatted withdraw method used.
             $payment_details = sprintf( __( '%1$s on %2$s to %3$s', 'dokan-lite' ), $last_withdraw_amount, $last_withdraw_date, $last_withdraw_method_used );
diff --git a/includes/REST/WithdrawController.php b/includes/REST/WithdrawController.php
index 4b64c1b8b7..5d2e330f5d 100644
--- a/includes/REST/WithdrawController.php
+++ b/includes/REST/WithdrawController.php
@@ -617,6 +617,9 @@ public function batch_items( $request ) {
      *
      * @since 2.8.0
      *
+     * @param $withdraw \WeDevs\Dokan\Withdraw\Withdraw
+     * @param $request \WP_REST_Request
+     *
      * @return WP_REST_Response|WP_Error
      */
     public function prepare_item_for_response( $withdraw, $request ) {
@@ -645,6 +648,9 @@ public function prepare_item_for_response( $withdraw, $request ) {
             'note'         => $withdraw->get_note(),
             'details'      => $details,
             'ip'           => $withdraw->get_ip(),
+            'charge'       => $withdraw->get_charge(),
+            'receivable'   => $withdraw->get_receivable_amount(),
+            'charge_data'  => $withdraw->get_charge_data(),
         ];
 
         $response = rest_ensure_response( $data );
diff --git a/includes/Withdraw/Hooks.php b/includes/Withdraw/Hooks.php
index 6219b60dbe..5b41123a6d 100644
--- a/includes/Withdraw/Hooks.php
+++ b/includes/Withdraw/Hooks.php
@@ -34,7 +34,7 @@ public function __construct() {
      *
      * @param string      $title
      * @param string      $method_key
-     * @param object|null $request
+     * @param Withdraw $request
      *
      * @return string
      */
@@ -45,8 +45,8 @@ public function dokan_withdraw_dokan_custom_method_title( $title, $method_key, $
             if ( empty( $title ) ) {
                 $title = __( 'Custom', 'dokan-lite' );
             }
-            if ( null !== $request ) {
-                $details = maybe_unserialize( $request->details );
+            if ( null !== $request && null !== $request->get_details() ) {
+                $details = maybe_unserialize( $request->get_details() );
                 if ( isset( $details['value'] ) ) {
                     $title .= ' - ' . $details['value'];
                 }
diff --git a/includes/Withdraw/Manager.php b/includes/Withdraw/Manager.php
index 61b922ef40..af4fbc81d4 100644
--- a/includes/Withdraw/Manager.php
+++ b/includes/Withdraw/Manager.php
@@ -245,6 +245,14 @@ public function get_withdraw_requests( $user_id = '', $status = 0, $limit = 10,
                 $result = $wpdb->get_results( $wpdb->prepare( "SELECT * FROM {$wpdb->dokan_withdraw} WHERE user_id = %d AND status = %d ORDER BY id DESC LIMIT %d, %d", $user_id, $status, $offset, $limit ) );
             }
 
+            $withdraws = [];
+
+            foreach ( $result as $withdraw ) {
+                $withdraws[] = new Withdraw( $withdraw );
+            }
+
+            $result = $withdraws;
+
             Cache::set( $cache_key, $result, $cache_group );
         }
 
diff --git a/src/admin/pages/Withdraw.vue b/src/admin/pages/Withdraw.vue
index ebcf8346ed..67033f39b4 100644
--- a/src/admin/pages/Withdraw.vue
+++ b/src/admin/pages/Withdraw.vue
@@ -70,6 +70,14 @@
                     <div class="method_title_inner" v-html="getPaymentTitle(data.row.method, data.row)"></div>
                 </template>
 
+                <template slot="charge" slot-scope="data">
+                    <currency :amount="data.row.charge"></currency>
+                </template>
+
+                <template slot="payable" slot-scope="data">
+                    <currency :amount="data.row.receivable"></currency>
+                </template>
+
                 <template slot="method_details" slot-scope="data">
                     <div class="method_details_inner" v-html="getPaymentDetails(data.row.method, data.row.details)"></div>
                 </template>
@@ -162,6 +170,8 @@ export default {
                 'amount': { label: this.__( 'Amount', 'dokan-lite' ) },
                 'status': { label: this.__( 'Status', 'dokan-lite' ) },
                 'method_title': { label: this.__( 'Method', 'dokan-lite' ) },
+                'charge': { label: this.__( 'Charge', 'dokan-lite' ) },
+                'payable': { label: this.__( 'Payable', 'dokan-lite' ) },
                 'method_details': { label: this.__( 'Details', 'dokan-lite' ) },
                 'note': { label: this.__( 'Note', 'dokan-lite' ) },
                 'created': { label: this.__( 'Date', 'dokan-lite' ) },
diff --git a/templates/withdraw/approved-request-listing.php b/templates/withdraw/approved-request-listing.php
index 7790cd9d88..bcf2b73bb6 100644
--- a/templates/withdraw/approved-request-listing.php
+++ b/templates/withdraw/approved-request-listing.php
@@ -4,6 +4,8 @@
  *
  * @since   2.4
  *
+ * @var $requests \WeDevs\Dokan\Withdraw\Withdraw[]
+ *
  * @package dokan
  */
 ?>
@@ -13,6 +15,8 @@
     <tr>
         <th><?php esc_html_e( 'Amount', 'dokan-lite' ); ?></th>
         <th><?php esc_html_e( 'Method', 'dokan-lite' ); ?></th>
+        <th><?php esc_html_e( 'Charge', 'dokan-lite' ); ?></th>
+        <th><?php esc_html_e( 'Receivable', 'dokan-lite' ); ?></th>
         <th><?php esc_html_e( 'Date', 'dokan-lite' ); ?></th>
     </tr>
     </thead>
@@ -20,9 +24,11 @@
 
     <?php foreach ( $requests as $row ) { ?>
         <tr>
-            <td><?php echo wp_kses_post( wc_price( $row->amount ) ); ?></td>
-            <td><?php echo esc_html( dokan_withdraw_get_method_title( $row->method, $row ) ); ?> </td>
-            <td><?php echo esc_html( date_i18n( get_option( 'date_format' ), strtotime( $row->date ) ) ); ?></td>
+            <td><?php echo wp_kses_post( wc_price( $row->get_amount() ) ); ?></td>
+            <td><?php echo esc_html( dokan_withdraw_get_method_title( $row->get_method(), $row ) ); ?> </td>
+            <td><?php echo wp_kses_post( wc_price( $row->get_charge() ) ); ?></td>
+            <td><?php echo wp_kses_post( wc_price( $row->get_receivable_amount() ) ); ?></td>
+            <td><?php echo esc_html( date_i18n( get_option( 'date_format' ), strtotime( $row->get_date() ) ) ); ?></td>
         </tr>
     <?php } ?>
 
diff --git a/templates/withdraw/cancelled-request-listing.php b/templates/withdraw/cancelled-request-listing.php
index d85772858b..bd55c32b0e 100644
--- a/templates/withdraw/cancelled-request-listing.php
+++ b/templates/withdraw/cancelled-request-listing.php
@@ -4,6 +4,8 @@
  *
  * @since   2.4
  *
+ * @var $requests WeDevs\Dokan\Withdraw\Withdraw[]
+ *
  * @package dokan
  */
 ?>
@@ -13,6 +15,8 @@
     <tr>
         <th><?php esc_html_e( 'Amount', 'dokan-lite' ); ?></th>
         <th><?php esc_html_e( 'Method', 'dokan-lite' ); ?></th>
+        <th><?php esc_html_e( 'Charge', 'dokan-lite' ); ?></th>
+        <th><?php esc_html_e( 'Receivable', 'dokan-lite' ); ?></th>
         <th><?php esc_html_e( 'Date', 'dokan-lite' ); ?></th>
         <th><?php esc_html_e( 'Note', 'dokan-lite' ); ?></th>
     </tr>
@@ -21,10 +25,12 @@
 
     <?php foreach ( $requests as $row ) { ?>
         <tr>
-            <td><?php echo wp_kses_post( wc_price( $row->amount ) ); ?></td>
-            <td><?php echo esc_html( dokan_withdraw_get_method_title( $row->method, $row ) ); ?></td>
-            <td><?php echo esc_html( date_i18n( get_option( 'date_format' ), strtotime( $row->date ) ) ); ?></td>
-            <td><?php echo wp_kses_post( $row->note ); ?></td>
+            <td><?php echo wp_kses_post( wc_price( $row->get_amount() ) ); ?></td>
+            <td><?php echo esc_html( dokan_withdraw_get_method_title( $row->get_method(), $row ) ); ?></td>
+            <td><?php echo wp_kses_post( wc_price( $row->get_charge() ) ); ?></td>
+            <td><?php echo wp_kses_post( wc_price( $row->get_receivable_amount() ) ); ?></td>
+            <td><?php echo esc_html( date_i18n( get_option( 'date_format' ), strtotime( $row->get_date() ) ) ); ?></td>
+            <td><?php echo wp_kses_post( $row->get_note() ); ?></td>
         </tr>
     <?php } ?>
 
diff --git a/templates/withdraw/pending-request-listing-dashboard.php b/templates/withdraw/pending-request-listing-dashboard.php
index cbbe343dc4..5f84d235ce 100644
--- a/templates/withdraw/pending-request-listing-dashboard.php
+++ b/templates/withdraw/pending-request-listing-dashboard.php
@@ -4,6 +4,8 @@
  *
  * @since   3.3.1
  *
+ * @var $withdraw_requests \WeDevs\Dokan\Withdraw\Withdraw[]
+ *
  * @package dokan
  */
 
@@ -17,21 +19,25 @@
                     <th><?php esc_html_e( 'Amount', 'dokan-lite' ); ?></th>
                     <th><?php esc_html_e( 'Method', 'dokan-lite' ); ?></th>
                     <th><?php esc_html_e( 'Date', 'dokan-lite' ); ?></th>
+                    <th><?php esc_html_e( 'Charge', 'dokan-lite' ); ?></th>
+                    <th><?php esc_html_e( 'Receivable', 'dokan-lite' ); ?></th>
                     <th><?php esc_html_e( 'Cancel', 'dokan-lite' ); ?></th>
                     <th><?php esc_html_e( 'Status', 'dokan-lite' ); ?></th>
                 </tr>
 
                 <?php foreach ( $withdraw_requests as $request ) : ?>
                     <tr>
-                        <td><?php echo wp_kses_post( wc_price( $request->amount ) ); ?></td>
-                        <td><?php echo esc_html( dokan_withdraw_get_method_title( $request->method ) ); ?></td>
-                        <td><?php echo esc_html( dokan_format_datetime( $request->date ) ); ?></td>
+                        <td><?php echo wp_kses_post( wc_price( $request->get_amount() ) ); ?></td>
+                        <td><?php echo esc_html( dokan_withdraw_get_method_title( $request->get_method() ) ); ?></td>
+                        <td><?php echo esc_html( dokan_format_datetime( $request->get_date() ) ); ?></td>
+                        <td><?php echo wp_kses_post( wc_price( $request->get_charge() ) ); ?></td>
+                        <td><?php echo wp_kses_post( wc_price( $request->get_receivable_amount() ) ); ?></td>
                         <td>
                             <?php
                             $url = add_query_arg(
                                 [
                                     'dokan_handle_withdraw_request' => 'cancel',
-                                    'id'                            => $request->id,
+                                    'id'                            => $request->get_id(),
                                 ],
                                 dokan_get_navigation_url( 'withdraw-requests' )
                             );
@@ -42,9 +48,9 @@
                         </td>
                         <td>
                             <?php
-                            if ( intval( $request->status ) === 0 ) {
+                            if ( intval( $request->get_status() ) === 0 ) {
                                 echo '<span class="label label-danger">' . esc_html__( 'Pending Review', 'dokan-lite' ) . '</span>';
-                            } elseif ( intval( $request->status ) === 1 ) {
+                            } elseif ( intval( $request->get_status() ) === 1 ) {
                                 echo '<span class="label label-warning">' . esc_html__( 'Accepted', 'dokan-lite' ) . '</span>';
                             }
                             ?>

From 77208848c37f5d51cf845cb3b4c90aa78d035e98 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Fri, 28 Jul 2023 18:43:27 +0600
Subject: [PATCH 15/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FTest=20charge=20and=20s?=
 =?UTF-8?q?how=20withdraw=20charge=20by=20ajax?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/src/js/withdraw.js                   | 240 +++++++++++++-------
 includes/Withdraw/Hooks.php                 |  52 +++++
 includes/Withdraw/Withdraw.php              |  11 +-
 templates/withdraw/request-form.php         |   1 +
 tests/Withdrawal/WithdrawChargeAjaxTest.php |  37 +++
 tests/Withdrawal/WithdrawChargeTest.php     |  24 ++
 6 files changed, 274 insertions(+), 91 deletions(-)
 create mode 100644 tests/Withdrawal/WithdrawChargeAjaxTest.php
 create mode 100644 tests/Withdrawal/WithdrawChargeTest.php

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index c5e3de2fc7..529ca19d1b 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -1,47 +1,70 @@
 ;(($) => {
     const Dokan_Withdraw = {
         init: () => {
-            $('#dokan-request-withdraw-button').on( 'click', (e) => {
+            $( '#dokan-request-withdraw-button' ).on( 'click', ( e ) => {
                 e.preventDefault();
                 Dokan_Withdraw.openRequestWithdrawWindow();
             } );
 
-            $('.dokan-withdraw-make-default-button').on( 'click', (e) => {
+            $( '.dokan-withdraw-make-default-button' ).on( 'click', ( e ) => {
                 e.preventDefault();
                 Dokan_Withdraw.makeDefault( e );
             } );
 
-            $('#dokan-withdraw-request-submit').on( 'click', (e) => {
+            $( '#dokan-withdraw-request-submit' ).on( 'click', ( e ) => {
                 Dokan_Withdraw.handleWithdrawRequest( e );
             } );
 
-            $('#dokan-withdraw-display-schedule-popup').on( 'click', (e) => {
-                Dokan_Withdraw.opensScheduleWindow( e );
-            } );
+            $( '#dokan-withdraw-display-schedule-popup' ).on(
+                'click',
+                ( e ) => {
+                    Dokan_Withdraw.opensScheduleWindow( e );
+                }
+            );
 
-            $('#dokan-withdraw-schedule-request-submit').on( 'click', (e) => {
-                Dokan_Withdraw.handleScheduleChangeRequest( e );
-            } );
+            $( '#dokan-withdraw-schedule-request-submit' ).on(
+                'click',
+                ( e ) => {
+                    Dokan_Withdraw.handleScheduleChangeRequest( e );
+                }
+            );
 
-            $("input[name='withdraw-schedule']").on( 'change', (e) => {
+            $( "input[name='withdraw-schedule']" ).on( 'change', ( e ) => {
                 Dokan_Withdraw.handleScheduleChange( e );
-            });
+            } );
 
-            $("[name='withdraw_method'][id='withdraw-method']").on( 'change', (e) => {
-                Dokan_Withdraw.calculateWithdrawCharges();
-            });
+            $( "[name='withdraw_method'][id='withdraw-method']" ).on(
+                'change',
+                ( e ) => {
+                    Dokan_Withdraw.calculateWithdrawCharges();
+                }
+            );
+
+            $( 'input#withdraw-amount' ).on( 'keyup', Dokan_Withdraw.debounce( Dokan_Withdraw.calculateWithdrawCharges, 500 ) );
+        },
 
-            $( 'input#withdraw-amount').on( 'input', (e) => {
-                Dokan_Withdraw.calculateWithdrawCharges();
-            });
+        debounce( func, wait, immediate ) {
+            var timeout;
+            return function () {
+                var context = this,
+                    args = arguments;
+                var later = function () {
+                    timeout = null;
+                    if ( ! immediate ) func.apply( context, args );
+                };
+                var callNow = immediate && ! timeout;
+                clearTimeout( timeout );
+                timeout = setTimeout( later, wait );
+                if ( callNow ) func.apply( context, args );
+            };
         },
         openRequestWithdrawWindow: () => {
             const withdrawTemplate = wp.template( 'withdraw-request-popup' ),
                 modal = $( '#dokan-withdraw-request-popup' ).iziModal( {
-                    width       : 690,
+                    width: 690,
                     overlayColor: 'rgba(0, 0, 0, 0.8)',
-                    headerColor : dokan.modal_header_color,
-                    onOpening: function(modal){
+                    headerColor: dokan.modal_header_color,
+                    onOpening: function ( modal ) {
                         Dokan_Withdraw.calculateWithdrawCharges();
                     },
                 } );
@@ -54,9 +77,9 @@
         opensScheduleWindow: () => {
             const scheduleTemplate = wp.template( 'withdraw-schedule-popup' ),
                 modal = $( '#dokan-withdraw-schedule-popup' ).iziModal( {
-                    width       : 690,
+                    width: 690,
                     overlayColor: 'rgba(0, 0, 0, 0.8)',
-                    headerColor : dokan.modal_header_color,
+                    headerColor: dokan.modal_header_color,
                 } );
 
             modal.iziModal( 'setContent', scheduleTemplate().trim() );
@@ -65,16 +88,16 @@
             Dokan_Withdraw.init();
         },
         makeDefault: ( e ) => {
-            const button      = $( e.target );
+            const button = $( e.target );
             const paymentArea = $( '#dokan-withdraw-payment-method-list' );
 
-            paymentArea.block({
+            paymentArea.block( {
                 message: null,
                 overlayCSS: {
                     background: '#fff',
-                    opacity: 0.6
-                }
-            });
+                    opacity: 0.6,
+                },
+            } );
 
             $.post(
                 dokan.ajaxurl,
@@ -111,18 +134,18 @@
         },
         handleWithdrawRequest: ( e ) => {
             e.preventDefault();
-            const amount = $( 'input#withdraw-amount').val();
-            const nonce  = $( 'input#dokan_withdraw_nonce').val();
-            const form   = $( '#withdraw-request-popup' );
+            const amount = $( 'input#withdraw-amount' ).val();
+            const nonce = $( 'input#dokan_withdraw_nonce' ).val();
+            const form = $( '#withdraw-request-popup' );
             const method = $( '#withdraw-method' ).val();
 
-            form.block({
+            form.block( {
                 message: null,
                 overlayCSS: {
                     background: '#fff',
-                    opacity: 0.6
-                }
-            });
+                    opacity: 0.6,
+                },
+            } );
 
             $.post(
                 dokan.ajaxurl,
@@ -141,12 +164,12 @@
                             showConfirmButton: false,
                             timer: 2000,
                             timerProgressBar: true,
-                            didOpen: (toast) => {
-                              setTimeout( function() {
-                                form.unblock();
-                                window.location.reload();
-                              }, 2000);
-                            }
+                            didOpen: ( toast ) => {
+                                setTimeout( function () {
+                                    form.unblock();
+                                    window.location.reload();
+                                }, 2000 );
+                            },
                         } );
                     } else {
                         dokan_sweetalert( '', {
@@ -160,20 +183,24 @@
         },
         handleScheduleChangeRequest: ( e ) => {
             e.preventDefault();
-            const schedule = $( "input[name='withdraw-schedule']:checked").val();
-            const nonce    = $( '#dokan-withdraw-schedule-request-submit').data('security');
-            const form     = $( '#withdraw-schedule-popup' );
-            const reserve  = $( '#withdraw-remaining-amount' ).val();
-            const minimum  = $( '#minimum-withdraw-amount' ).val();
-            const method   = $( '#preferred-payment-method' ).val();
-
-            form.block({
+            const schedule = $(
+                "input[name='withdraw-schedule']:checked"
+            ).val();
+            const nonce = $( '#dokan-withdraw-schedule-request-submit' ).data(
+                'security'
+            );
+            const form = $( '#withdraw-schedule-popup' );
+            const reserve = $( '#withdraw-remaining-amount' ).val();
+            const minimum = $( '#minimum-withdraw-amount' ).val();
+            const method = $( '#preferred-payment-method' ).val();
+
+            form.block( {
                 message: null,
                 overlayCSS: {
                     background: '#fff',
-                    opacity: 0.6
-                }
-            });
+                    opacity: 0.6,
+                },
+            } );
 
             $.post(
                 dokan.ajaxurl,
@@ -207,52 +234,93 @@
                 }
             );
         },
-        handleScheduleChange: (e) => {
-            const nextDate = $(e.target).data('next-schedule');
-            $( '#dokan-withdraw-next-scheduled-date').html(nextDate);
+        handleScheduleChange: ( e ) => {
+            const nextDate = $( e.target ).data( 'next-schedule' );
+            $( '#dokan-withdraw-next-scheduled-date' ).html( nextDate );
         },
         calculateWithdrawCharges: () => {
-            if ( $('#dokan-send-withdraw-request-popup-form > .dokan-alert-danger').length ) {
-              return;
+            if (
+                $(
+                    '#dokan-send-withdraw-request-popup-form > .dokan-alert-danger'
+                ).length
+            ) {
+                return;
             }
 
-            let withdrawAmount                  = $("[name='withdraw_amount'][id='withdraw-amount']").val();
-            withdrawAmount                      = accounting.unformat( withdrawAmount, dokan_refund.mon_decimal_point );
-            let {chargePercentage, chargeFixed} = $("select[name='withdraw_method'][id='withdraw-method'] option:selected").data();
-            let chargeAmount           = 0;
+            let withdrawMethod = $(
+                "[name='withdraw_method'][id='withdraw-method']"
+            ).val();
+            let withdrawAmount = $(
+                "[name='withdraw_amount'][id='withdraw-amount']"
+            ).val();
+            withdrawAmount = accounting.unformat(
+                withdrawAmount,
+                dokan_refund.mon_decimal_point
+            );
+            let { chargePercentage, chargeFixed } = $(
+                "select[name='withdraw_method'][id='withdraw-method'] option:selected"
+            ).data();
+            let chargeAmount = 0;
+            let nonce = $( '#dokan_withdraw_charge_nonce' ).val();
+
+            $.post(
+                dokan.ajaxurl,
+                {
+                    action: 'dokan_handle_get_withdraw_method_charge',
+                    dokan_withdraw_charge_nonce: nonce,
+                    method: withdrawMethod,
+                    amount: withdrawAmount,
+                },
+                ( response ) => {
+                    Dokan_Withdraw.showWithdrawChargeHtml(
+                        response.data ?? {}
+                    );
+                }
+            );
+
+            return;
 
-            let chargeText = "";
-            if ( chargeFixed ) {
-                chargeText += accounting.formatMoney( chargeFixed, dokan.currency );
-                chargeAmount += chargeFixed;
+            Dokan_Withdraw.showWithdrawChargeHtml(
+                chargeText,
+                chargeAmount,
+                withdrawAmount
+            );
+        },
+
+        showWithdrawChargeHtml( chargeData ) {
+            let chargeSection = $( '#dokan-withdraw-charge-section' );
+            let revivableSection = $( '#dokan-withdraw-revivable-section' );
+
+            if (
+                ! chargeData?.plain?.charge ||
+                0 > chargeData?.plain?.receivable
+            ) {
+                chargeSection.hide();
+                revivableSection.hide();
+
+                return;
             }
-            if ( chargePercentage ) {
-              let percentageAmount = chargePercentage/100*withdrawAmount;
-              chargeAmount += percentageAmount;
-              chargeText += chargeText ? ' + ' : '';
-              chargeText += parseFloat( accounting.formatNumber( chargePercentage, dokan_refund.rounding_precision, '' ) )
-                  .toString()
-                  .replace( '.', dokan_refund.mon_decimal_point ) + '%';
-              chargeText += ` = ${accounting.formatMoney(chargeAmount)}`;
+
+            let chargeText = '';
+
+            if ( chargeData.plain.charge_data.fixed ) {
+                chargeText += `${ chargeData.html.charge_data.fixed }`;
             }
 
-            Dokan_Withdraw.showWithdrawChargeHtml( chargeText, chargeAmount, withdrawAmount );
-        },
+            if ( chargeData.plain.charge_data.percentage ) {
+                chargeText += chargeText ? ' + ' : '';
+                chargeText += `${ chargeData.html.charge_data.percentage }`;
+                chargeText += ` = ${ chargeData.html.charge ?? '' }`;
+            }
 
-        showWithdrawChargeHtml( chargeText, chargeAmount, withdrawAmount ) {
-          let chargeSection    = $( "#dokan-withdraw-charge-section" );
-          let revivableSection = $( "#dokan-withdraw-revivable-section" );
-          if ( ! withdrawAmount ) {
-            chargeSection.hide();
-            revivableSection.hide();
-            return;
-          }
+            $( '#dokan-withdraw-charge-section-text' ).html( chargeText );
 
-          $( "#dokan-withdraw-charge-section-text" ).html( chargeText );
-          $( "#dokan-withdraw-revivable-section-text" ).html( accounting.formatMoney( withdrawAmount - chargeAmount ) );
+            $( '#dokan-withdraw-revivable-section-text' ).html(
+                chargeData.plain.receivable ? chargeData.html.receivable : ''
+            );
 
-          chargeSection.show();
-          revivableSection.show();
+            chargeSection.show();
+            revivableSection.show();
         },
     };
 
diff --git a/includes/Withdraw/Hooks.php b/includes/Withdraw/Hooks.php
index 5b41123a6d..0284da58c7 100644
--- a/includes/Withdraw/Hooks.php
+++ b/includes/Withdraw/Hooks.php
@@ -24,6 +24,7 @@ public function __construct() {
         if ( wp_doing_ajax() ) {
             add_action( 'wp_ajax_dokan_handle_withdraw_request', [ $this, 'ajax_handle_withdraw_request' ] );
             add_action( 'wp_ajax_dokan_withdraw_handle_make_default_method', [ $this, 'ajax_handle_make_default_method' ] );
+            add_action( 'wp_ajax_dokan_handle_get_withdraw_method_charge', [ $this, 'ajax_handle_get_withdraw_method_charge' ] );
         }
     }
 
@@ -212,4 +213,55 @@ public function ajax_handle_make_default_method() {
 
         wp_send_json_success( esc_html__( 'Default method update successful.', 'dokan-lite' ) );
     }
+
+    public function ajax_handle_get_withdraw_method_charge() {
+        if ( ! isset( $_POST['dokan_withdraw_charge_nonce'] ) || ! wp_verify_nonce( sanitize_key( wp_unslash( $_POST['dokan_withdraw_charge_nonce'] ) ), 'dokan_withdraw_charge' ) ) {
+            wp_send_json_error( esc_html__( 'Are you cheating?', 'dokan-lite' ) );
+        }
+
+        // phpcs:ignore
+        if ( ! current_user_can( 'dokan_manage_withdraw' ) ) {
+            wp_send_json_error( esc_html__( 'You have no permission to do this action', 'dokan-lite' ) );
+        }
+
+        if ( empty( $_POST['amount'] ) ) {
+            wp_send_json_error( esc_html__( 'Withdraw method is required.', 'dokan-lite' ) );
+        }
+
+        if ( empty( sanitize_text_field( wp_unslash( $_POST['method'] ) ) ) || ! array_key_exists( sanitize_text_field( wp_unslash( $_POST['method'] ) ), dokan_withdraw_get_methods() ) ) {
+            wp_send_json_error( esc_html__( 'Withdraw method is required.', 'dokan-lite' ) );
+        }
+
+        $amount = wc_format_decimal( sanitize_text_field( wp_unslash( $_POST['amount'] ) ) );
+        $method = sanitize_text_field( wp_unslash( $_POST['method'] ) );
+
+        $withdraw = new Withdraw();
+        $all_charges = dokan_withdraw_get_method_charges();
+        $withdraw->set_method( $method )
+                ->set_amount( $amount )
+                ->set_charge_data( $all_charges[ $withdraw->get_method() ] )
+                ->calculate_charge()
+                ->get_charge();
+
+        $charge = $withdraw->get_charge();
+        $receivable = $withdraw->get_receivable_amount();
+
+        $response = [
+            'plain' => [
+                'charge'      => $charge,
+                'receivable'  => $receivable,
+                'charge_data' => $all_charges[ $withdraw->get_method() ],
+            ],
+            'html'  => [
+                'charge'      => wc_price( $charge ),
+                'receivable'  => wc_price( $receivable ),
+                'charge_data' => [
+                    'fixed'      => wc_price( $all_charges[ $withdraw->get_method() ]['fixed'] ),
+                    'percentage' => $all_charges[ $withdraw->get_method() ]['percentage'] . '%',
+                ],
+            ],
+        ];
+
+        wp_send_json_success( $response );
+    }
 }
diff --git a/includes/Withdraw/Withdraw.php b/includes/Withdraw/Withdraw.php
index 3b813b1386..4bb4ac95fe 100644
--- a/includes/Withdraw/Withdraw.php
+++ b/includes/Withdraw/Withdraw.php
@@ -354,7 +354,7 @@ public function set_recivable( $receivable ) {
      *
      * @since DOKAN_SINCE
      *
-     * @param $charge_data
+     * @param $charge_data array
      *
      * @return \WeDevs\Dokan\Withdraw\Withdraw
      */
@@ -369,9 +369,9 @@ public function set_charge_data( $charge_data ) {
      *
      * @since DOKAN_SINCE
      *
-     * @return void
+     * @return \WeDevs\Dokan\Withdraw\Withdraw
      */
-    private function calculate_charge() {
+    public function calculate_charge() {
         $charge_data = $this->get_charge_data();
         $fixed       = $charge_data['fixed'];
         $percentage  = $charge_data['percentage'];
@@ -387,6 +387,8 @@ private function calculate_charge() {
 
         $this->set_charge( $charge );
         $this->set_recivable( floatval( $this->get_amount() - floatval( $charge ) ) );
+
+        return $this;
     }
 
     /**
@@ -417,8 +419,7 @@ protected function create() {
         $all_charges = dokan_withdraw_get_method_charges();
         $current_method_charge_data = $all_charges[ $this->get_method() ];
 
-        $this->set_charge_data( $current_method_charge_data );
-        $this->calculate_charge();
+        $this->set_charge_data( $current_method_charge_data )->calculate_charge();
 
         $details = dokan()->withdraw->get_formatted_details( $this->data['method'], absint( $this->data['user_id'] ) );
 
diff --git a/templates/withdraw/request-form.php b/templates/withdraw/request-form.php
index ff45e9aa37..ca19c464f4 100644
--- a/templates/withdraw/request-form.php
+++ b/templates/withdraw/request-form.php
@@ -50,6 +50,7 @@
         <div class="dokan-form-group" id="dokan-withdraw-charge-section" style="display: none">
             <label for="withdraw-method" class="dokan-w4 dokan-control-label">
                 <?php esc_html_e( 'Withdraw Charge', 'dokan-lite' ); ?>
+                <?php echo wp_nonce_field( 'dokan_withdraw_charge', 'dokan_withdraw_charge_nonce' ); ?>
             </label>
             <div class="dokan-w5 dokan-text-left">
                 <span  id="dokan-withdraw-charge-section-text"></span>
diff --git a/tests/Withdrawal/WithdrawChargeAjaxTest.php b/tests/Withdrawal/WithdrawChargeAjaxTest.php
new file mode 100644
index 0000000000..0ffae13a2a
--- /dev/null
+++ b/tests/Withdrawal/WithdrawChargeAjaxTest.php
@@ -0,0 +1,37 @@
+<?php
+
+class WithdrawChargeAjaxTest extends WP_Ajax_UnitTestCase {
+
+    public function set_up() {
+        parent::set_up();
+        parent::set_up_before_class();
+
+        remove_action( 'admin_init', [ dokan()->core, 'block_admin_access'], 10 );
+    }
+
+    public function test_that_we_can_request_to_calculate_and_get_withdraw_charge() {
+        global $_POST;
+
+        $user = $this->factory()->user->create(
+            [
+                'role' => 'seller',
+            ]
+        );
+
+        wp_set_current_user( $user );
+
+        $_POST[ 'security' ] = wp_create_nonce( '_handle_withdraw_request' );
+        $_POST[ 'action' ]   = 'dokan_handle_get_withdraw_method_charge';
+
+        try {
+            $this->_handleAjax( 'dokan_handle_get_withdraw_method_charge' );
+        } catch (\WPAjaxDieContinueException $e) {
+            // This means that the ajax request succeeded.
+        }
+
+        $data = json_decode( $this->_last_response, true  );
+        $this->assertNotEquals( '', $this->_last_response );
+//        $this->assertTrue( $data['success'] );
+//        $this->assertEquals( 'Withdraw schedule removed successfully.', $data['data'] );
+    }
+}
diff --git a/tests/Withdrawal/WithdrawChargeTest.php b/tests/Withdrawal/WithdrawChargeTest.php
new file mode 100644
index 0000000000..92ac992dce
--- /dev/null
+++ b/tests/Withdrawal/WithdrawChargeTest.php
@@ -0,0 +1,24 @@
+<?php
+
+class WithdrawChargeTest extends WP_UnitTestCase {
+
+    public function set_up() {
+        parent::set_up();
+    }
+
+    public function test_get_method_charges_function_exists() {
+        $this->assertIsCallable( 'dokan_withdraw_get_method_charges' );
+    }
+
+    public function test_that_we_can_get_withdraw_charges() {
+        $all_methods = dokan_withdraw_get_methods();
+        $charges = dokan_withdraw_get_method_charges();
+
+        $this->assertNotEmpty( $charges );
+        $this->assertIsArray( $charges );
+
+        foreach ( array_keys( $all_methods ) as $method ) {
+            $this->assertArrayHasKey( $method, $charges );
+        }
+    }
+}

From d0cb9c88ed136ce150bb505ceb49dd844cd5de2e Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Sun, 30 Jul 2023 18:16:34 +0600
Subject: [PATCH 16/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FWithdraw=20charge=20val?=
 =?UTF-8?q?idation=20on=20withdraw=20create=20in=20api=20and=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/src/js/withdraw.js               |  26 ++---
 includes/REST/WithdrawController.php    | 129 +++++++++++++++++++++---
 includes/Withdraw/Hooks.php             |  55 ++++++----
 tests/Withdrawal/WithdrawChargeTest.php |  90 +++++++++++++++++
 4 files changed, 248 insertions(+), 52 deletions(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index 529ca19d1b..11e4aa709e 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -272,18 +272,11 @@
                     amount: withdrawAmount,
                 },
                 ( response ) => {
-                    Dokan_Withdraw.showWithdrawChargeHtml(
-                        response.data ?? {}
-                    );
-                }
-            );
-
-            return;
+                  let data = response.data ? response.data : {};
+                    Dokan_Withdraw.showWithdrawChargeHtml( data );
 
-            Dokan_Withdraw.showWithdrawChargeHtml(
-                chargeText,
-                chargeAmount,
-                withdrawAmount
+                    $( '#dokan-withdraw-request-submit' ).attr( 'disabled', ! response.success );
+                }
             );
         },
 
@@ -291,10 +284,7 @@
             let chargeSection = $( '#dokan-withdraw-charge-section' );
             let revivableSection = $( '#dokan-withdraw-revivable-section' );
 
-            if (
-                ! chargeData?.plain?.charge ||
-                0 > chargeData?.plain?.receivable
-            ) {
+            if ( ! chargeData.plain || ! chargeData.plain.charge ) {
                 chargeSection.hide();
                 revivableSection.hide();
 
@@ -303,14 +293,14 @@
 
             let chargeText = '';
 
-            if ( chargeData.plain.charge_data.fixed ) {
+            if ( chargeData.plain.charge_data && chargeData.plain.charge_data.fixed ) {
                 chargeText += `${ chargeData.html.charge_data.fixed }`;
             }
 
-            if ( chargeData.plain.charge_data.percentage ) {
+            if ( chargeData.plain.charge_data && chargeData.plain.charge_data.percentage ) {
                 chargeText += chargeText ? ' + ' : '';
                 chargeText += `${ chargeData.html.charge_data.percentage }`;
-                chargeText += ` = ${ chargeData.html.charge ?? '' }`;
+                chargeText += ` = ${ chargeData.html.charge }`;
             }
 
             $( '#dokan-withdraw-charge-section-text' ).html( chargeText );
diff --git a/includes/REST/WithdrawController.php b/includes/REST/WithdrawController.php
index 5d2e330f5d..bb82a96fb5 100644
--- a/includes/REST/WithdrawController.php
+++ b/includes/REST/WithdrawController.php
@@ -4,6 +4,7 @@
 
 use Exception;
 use WeDevs\Dokan\Cache;
+use WeDevs\Dokan\Withdraw\Withdraw;
 use WP_Error;
 use WP_REST_Controller;
 use WP_REST_Request;
@@ -115,6 +116,43 @@ public function register_routes() {
 				'schema' => [ $this, 'get_public_batch_schema' ],
 			]
         );
+
+        register_rest_route(
+            $this->namespace, '/' . $this->rest_base . '/charges', [
+                [
+                    'methods'             => WP_REST_Server::READABLE,
+                    'callback'            => [ $this, 'get_all_method_charges' ],
+                    'permission_callback' => [ $this, 'get_items_permissions_check' ],
+                ],
+            ]
+        );
+
+        $methods = array_keys( dokan_withdraw_get_methods() );
+
+        register_rest_route(
+            $this->namespace, '/' . $this->rest_base . '/charge', [
+                [
+                    'methods'             => WP_REST_Server::READABLE,
+                    'callback'            => [ $this, 'get_method_charge' ],
+                    'permission_callback' => [ $this, 'get_items_permissions_check' ],
+                    'args'                => [
+                        'method' => [
+                            'description' => __( 'Withdraw method key', 'dokan-lite' ),
+                            'type'        => 'string',
+                            'context'     => [ 'view' ],
+                            'enum'        => $methods,
+                            'required'    => true,
+                        ],
+                        'amount' => [
+                            'description' => __( 'Withdraw amount', 'dokan-lite' ),
+                            'type'        => 'number',
+                            'context'     => [ 'view' ],
+                            'required'    => true,
+                        ],
+                    ],
+                ],
+            ]
+        );
     }
 
     /**
@@ -350,29 +388,45 @@ public function create_item( $request ) {
                 throw new DokanException( 'dokan_rest_withdraw_error', __( 'No vendor found', 'dokan-lite' ), 404 );
             }
 
-            $args = [
-                'user_id' => $user_id,
-                'amount'  => $request['amount'],
-                'date'    => current_time( 'mysql' ),
-                'method'  => $request['method'],
-                'note'    => $note,
-                'ip'      => dokan_get_client_ip(),
-            ];
-
             if ( dokan()->withdraw->has_pending_request( $user_id ) ) {
                 throw new DokanException( 'dokan_rest_withdraw_error', __( 'You already have a pending withdraw request', 'dokan-lite' ), 400 );
             }
 
-            $validate_request = dokan()->withdraw->is_valid_approval_request( $args );
+            $validate_request = dokan()->withdraw->is_valid_approval_request(
+                [
+					'user_id' => $user_id,
+					'amount'  => $request['amount'],
+					'method'  => $request['method'],
+				]
+            );
 
             if ( is_wp_error( $validate_request ) ) {
                 throw new DokanException( 'dokan_rest_withdraw_error', $validate_request->get_error_message(), 400 );
             }
 
-            $withdraw = dokan()->withdraw->create( $args );
+            $withdraw = new Withdraw();
+            $all_withdraw_charges = dokan_withdraw_get_method_charges();
+            $charge_data = $all_withdraw_charges[ $request['method'] ];
+
+            $withdraw
+                ->set_user_id( $user_id )
+                ->set_amount( $request['amount'] )
+                ->set_date( current_time( 'mysql' ) )
+                ->set_status( dokan()->withdraw->get_status_code( 'pending' ) )
+                ->set_method( $request['method'] )
+                ->set_ip( dokan_get_client_ip() )
+                ->set_note( $note )
+                ->set_charge_data( $charge_data )
+                ->calculate_charge();
+
+            if ( $withdraw->get_receivable_amount() < 0 ) {
+                wp_send_json_error( esc_html__( 'Withdraw amount is less then the withdraw charge.', 'dokan-lite' ) );
+            }
+
+            $result = $withdraw->save();
 
-            if ( is_wp_error( $withdraw ) ) {
-                throw new DokanException( $withdraw->get_error_code(), $withdraw->get_error_message(), 400 );
+            if ( is_wp_error( $result ) ) {
+                throw new DokanException( $result->get_error_code(), $result->get_error_message(), 400 );
             }
 
             $response = $this->prepare_item_for_response( $withdraw, $request );
@@ -612,6 +666,55 @@ public function batch_items( $request ) {
         );
     }
 
+    /**
+     * Get all withdraw method charges.
+     *
+     * @since DOKAN_SINCE
+     *
+     * @return WP_Error|\WP_HTTP_Response|WP_REST_Response
+     */
+    public function get_all_method_charges() {
+        $all_charges = dokan_withdraw_get_method_charges();
+
+        return rest_ensure_response( $all_charges );
+    }
+
+    /**
+     * Get withdraw method charge.
+     *
+     * @since DOKAN_SINCE
+     *
+     * @return WP_Error|\WP_HTTP_Response|WP_REST_Response
+     */
+    public function get_method_charge( $request ) {
+        $method = $request->get_param( 'method' );
+        $amount = wc_format_decimal( $request->get_param( 'amount' ) );
+
+        $withdraw    = new Withdraw();
+        $all_charges = dokan_withdraw_get_method_charges();
+
+        $withdraw->set_method( $method )
+                ->set_amount( $amount )
+                ->set_charge_data( $all_charges[ $method ] )
+                ->calculate_charge();
+
+        $response = [
+            'charge'      => $withdraw->get_charge(),
+            'receivable'  => $withdraw->get_receivable_amount(),
+            'charge_data' => $all_charges[ $withdraw->get_method() ],
+        ];
+
+        if ( $withdraw->get_receivable_amount() < 0 ) {
+            return new WP_Error(
+                'invalid-withdraw-amount',
+                __( 'Invalid withdraw amount. The withdraw charge is greater than the withdraw amount', 'dokan-lite' ),
+                $response
+            );
+        }
+
+        return rest_ensure_response( $response );
+    }
+
     /**
      * Prepare data for response
      *
diff --git a/includes/Withdraw/Hooks.php b/includes/Withdraw/Hooks.php
index 0284da58c7..c0449693af 100644
--- a/includes/Withdraw/Hooks.php
+++ b/includes/Withdraw/Hooks.php
@@ -163,19 +163,29 @@ public function ajax_handle_withdraw_request() {
             wp_send_json_error( $validate_request->get_error_message(), $validate_request->get_error_code() );
         }
 
-        $data = [
-            'user_id' => $user_id,
-            'amount'  => $amount,
-            'status'  => dokan()->withdraw->get_status_code( 'pending' ),
-            'method'  => $method,
-            'ip'      => dokan_get_client_ip(),
-            'note'    => '',
-        ];
+        $withdraw = new Withdraw();
+        $all_withdraw_charges = dokan_withdraw_get_method_charges();
+        $charge_data = $all_withdraw_charges[ $method ];
+
+        $withdraw
+            ->set_user_id( $user_id )
+            ->set_amount( $amount )
+            ->set_date( current_time( 'mysql' ) )
+            ->set_status( dokan()->withdraw->get_status_code( 'pending' ) )
+            ->set_method( $method )
+            ->set_ip( dokan_get_client_ip() )
+            ->set_note( '' )
+            ->set_charge_data( $charge_data )
+            ->calculate_charge();
+
+        if ( $withdraw->get_receivable_amount() < 0 ) {
+            wp_send_json_error( esc_html__( 'Withdraw amount is less then the withdraw charge.', 'dokan-lite' ) );
+        }
 
-        $withdraw = dokan()->withdraw->create( $data );
+        $result = $withdraw->save();
 
-        if ( is_wp_error( $withdraw ) ) {
-            wp_send_json_error( $withdraw->get_error_message(), $withdraw->get_error_code() );
+        if ( is_wp_error( $result ) ) {
+            wp_send_json_error( $result->get_error_message(), $result->get_error_code() );
         }
 
         do_action( 'dokan_after_withdraw_request', $user_id, $amount, $method );
@@ -214,6 +224,13 @@ public function ajax_handle_make_default_method() {
         wp_send_json_success( esc_html__( 'Default method update successful.', 'dokan-lite' ) );
     }
 
+    /**
+     * Get withdraw method charge.
+     *
+     * @since DOKAN_SINCE
+     *
+     * @return void
+     */
     public function ajax_handle_get_withdraw_method_charge() {
         if ( ! isset( $_POST['dokan_withdraw_charge_nonce'] ) || ! wp_verify_nonce( sanitize_key( wp_unslash( $_POST['dokan_withdraw_charge_nonce'] ) ), 'dokan_withdraw_charge' ) ) {
             wp_send_json_error( esc_html__( 'Are you cheating?', 'dokan-lite' ) );
@@ -225,7 +242,7 @@ public function ajax_handle_get_withdraw_method_charge() {
         }
 
         if ( empty( $_POST['amount'] ) ) {
-            wp_send_json_error( esc_html__( 'Withdraw method is required.', 'dokan-lite' ) );
+            wp_send_json_error( esc_html__( 'Withdraw amount is required.', 'dokan-lite' ) );
         }
 
         if ( empty( sanitize_text_field( wp_unslash( $_POST['method'] ) ) ) || ! array_key_exists( sanitize_text_field( wp_unslash( $_POST['method'] ) ), dokan_withdraw_get_methods() ) ) {
@@ -240,21 +257,17 @@ public function ajax_handle_get_withdraw_method_charge() {
         $withdraw->set_method( $method )
                 ->set_amount( $amount )
                 ->set_charge_data( $all_charges[ $withdraw->get_method() ] )
-                ->calculate_charge()
-                ->get_charge();
-
-        $charge = $withdraw->get_charge();
-        $receivable = $withdraw->get_receivable_amount();
+                ->calculate_charge();
 
         $response = [
             'plain' => [
-                'charge'      => $charge,
-                'receivable'  => $receivable,
+                'charge'      => $withdraw->get_charge(),
+                'receivable'  => $withdraw->get_receivable_amount(),
                 'charge_data' => $all_charges[ $withdraw->get_method() ],
             ],
             'html'  => [
-                'charge'      => wc_price( $charge ),
-                'receivable'  => wc_price( $receivable ),
+                'charge'      => wc_price( $withdraw->get_charge() ),
+                'receivable'  => wc_price( $withdraw->get_receivable_amount() ),
                 'charge_data' => [
                     'fixed'      => wc_price( $all_charges[ $withdraw->get_method() ]['fixed'] ),
                     'percentage' => $all_charges[ $withdraw->get_method() ]['percentage'] . '%',
diff --git a/tests/Withdrawal/WithdrawChargeTest.php b/tests/Withdrawal/WithdrawChargeTest.php
index 92ac992dce..a96b4aa83a 100644
--- a/tests/Withdrawal/WithdrawChargeTest.php
+++ b/tests/Withdrawal/WithdrawChargeTest.php
@@ -1,5 +1,7 @@
 <?php
 
+use WeDevs\Dokan\Withdraw\Withdraw;
+
 class WithdrawChargeTest extends WP_UnitTestCase {
 
     public function set_up() {
@@ -21,4 +23,92 @@ public function test_that_we_can_get_withdraw_charges() {
             $this->assertArrayHasKey( $method, $charges );
         }
     }
+
+    public function test_that_all_needed_method_exists_for_wothdraw_charge() {
+        $withdraw = new Withdraw();
+
+        $this->assertTrue( method_exists( $withdraw, 'set_method' ) );
+        $this->assertTrue( method_exists( $withdraw, 'set_amount' ) );
+        $this->assertTrue( method_exists( $withdraw, 'set_charge' ) );
+        $this->assertTrue( method_exists( $withdraw, 'set_charge_data' ) );
+        $this->assertTrue( method_exists( $withdraw, 'calculate_charge' ) );
+        $this->assertTrue( method_exists( $withdraw, 'get_charge' ) );
+    }
+
+    public function test_that_we_can_set_and_get_charge_data() {
+        $withdraw = new Withdraw();
+
+        $charge_data = [
+            'fixed' => 0,
+            'percentage' => 10,
+        ];
+
+        $withdraw->set_charge_data( $charge_data );
+
+        $this->assertEquals( $charge_data, $withdraw->get_charge_data() );
+    }
+
+    public function charge_data_provider() {
+        return [
+            [
+                [
+                    'amount' => 100,
+                    'method' => 'paypal',
+                    'charge_data' => [
+                        'fixed' => 10,
+                        'percentage' => 10,
+                    ]
+                ],
+                20,
+            ],
+            [
+                [
+                    'amount' => 200,
+                    'method' => 'skrill',
+                    'charge_data' => [
+                        'fixed' => '',
+                        'percentage' => 20,
+                    ]
+                ],
+                40,
+            ],
+            [
+                [
+                    'amount' => 1250,
+                    'method' => 'dokan_custom',
+                    'charge_data' => [
+                        'fixed' => 5,
+                        'percentage' => 32,
+                    ]
+                ],
+                405,
+            ],
+            [
+                [
+                    'amount' => 1250,
+                    'method' => 'stripe',
+                    'charge_data' => [
+                        'fixed' => 50,
+                        'percentage' => '',
+                    ]
+                ],
+                50,
+            ],
+        ];
+    }
+
+    /**
+     * @dataProvider charge_data_provider
+     */
+    public function test_that_we_can_calculate_and_get_withdraw_charge_receivable( $input, $expected ) {
+        $withdraw = new Withdraw();
+        $amount = $input['amount'];
+        $method = $input['method'];
+        $charge_data = $input['charge_data'];
+
+        $withdraw->set_amount( $amount )->set_method( $method )->set_charge_data( $charge_data )->calculate_charge();
+
+        $this->assertEquals( $expected, $withdraw->get_charge(), 'Charge is' . $withdraw->get_charge() );
+        $this->assertEquals( $amount - $expected, $amount - $withdraw->get_charge() );
+    }
 }

From 15f30f08fda812894def3fd192debfd0365de407 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 31 Jul 2023 12:20:06 +0600
Subject: [PATCH 17/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FComplete=20test=20case?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tests/Withdrawal/WithdrawChargeApi.php  | 234 ++++++++++++++++++++++++
 tests/Withdrawal/WithdrawChargeTest.php |  32 ++++
 2 files changed, 266 insertions(+)
 create mode 100644 tests/Withdrawal/WithdrawChargeApi.php

diff --git a/tests/Withdrawal/WithdrawChargeApi.php b/tests/Withdrawal/WithdrawChargeApi.php
new file mode 100644
index 0000000000..f98dd7ae35
--- /dev/null
+++ b/tests/Withdrawal/WithdrawChargeApi.php
@@ -0,0 +1,234 @@
+<?php
+
+class WithdrawChargeApi extends \WP_UnitTestCase {
+
+    /**
+     * Rest Api Server.
+     *
+     * @var \WP_REST_Server The REST server instance.
+     */
+    protected $server;
+
+    /**
+     * The namespace of the REST route.
+     *
+     * @var string Dokan API Namespace
+     */
+    protected $namespace = 'dokan/v1/withdraw';
+
+    /**
+     * Setup a rest server for test.
+     */
+    public function setUp(): void {
+        // Initiating the REST API.
+        global $wp_rest_server;
+
+        parent::setUp();
+        $wp_rest_server = new \WP_REST_Server();
+        $this->server   = $wp_rest_server;
+        do_action( 'rest_api_init' );
+    }
+
+    /**
+     * Saves dokan withdraw data in database.
+     *
+     * @return void
+     */
+    public function save_withdraw_data_to_database() {
+        $data = [
+            "withdraw_methods"                                   => [
+                "paypal"       => "paypal",
+                "bank"         => "bank",
+                "dokan_custom" => "dokan_custom",
+                "skrill"       => "skrill",
+            ],
+            "withdraw_method_name"                               => "bKash",
+            "withdraw_method_type"                               => "Phone",
+            "withdraw_charges"                                   => [
+                "paypal"       => [
+                    "fixed"      => "5",
+                    "percentage" => "10",
+                ],
+                "bank"         => [
+                    "fixed"      => "10",
+                    "percentage" => "",
+                ],
+                "skrill"       => [
+                    "fixed"      => "",
+                    "percentage" => "20",
+                ],
+                "dokan_custom" => [
+                    "fixed"      => "",
+                    "percentage" => "10",
+                ],
+            ],
+            "withdraw_limit"                                     => "2",
+            "withdraw_order_status"                              => [
+                "wc-completed" => "wc-completed",
+            ],
+            "exclude_cod_payment"                                => "off",
+            "withdraw_date_limit"                                => "0",
+            "hide_withdraw_option"                               => "off",
+            "disbursement_schedule_settings"                     => "",
+            "disbursement"                                       => [
+                "manual" => "manual",
+            ],
+            "disbursement_schedule"                              => [
+                "quarterly" => "",
+                "monthly"   => "",
+                "biweekly"  => "",
+                "weekly"    => "",
+            ],
+            "quarterly_schedule"                                 => [
+                "month" => "march",
+                "week"  => "1",
+                "days"  => "monday",
+            ],
+            "monthly_schedule"                                   => [
+                "week" => "1",
+                "days" => "monday",
+            ],
+            "biweekly_schedule"                                  => [
+                "week" => "1",
+                "days" => "monday",
+            ],
+            "weekly_schedule"                                    => "monday",
+            "send_announcement_for_payment_change"               => "false",
+            "send_announcement_for_disbursement_schedule_change" => "false",
+        ];
+
+        update_option( 'dokan_withdraw', $data, true );
+    }
+
+    /**
+     *  Test that the endpoint exist.
+     *
+     */
+    public function test_if_get_all_charges_api_exists() {
+        $this->save_withdraw_data_to_database();
+
+        $endpoint = '/' . $this->namespace . '/charges';
+
+        $request = new \WP_REST_Request( 'GET', $endpoint );
+
+        $response = $this->server->dispatch( $request );
+        $data     = $response->get_data();
+
+        $this->assertNotEquals( 'rest_no_route', $data['code'] );
+    }
+
+    /**
+     *  Test that the endpoint exist.
+     *
+     */
+    public function test_if_get_method_withdraw_charge_api_exists() {
+        $this->save_withdraw_data_to_database();
+
+        $endpoint = '/' . $this->namespace . '/charge';
+
+        $request = new \WP_REST_Request( 'GET', $endpoint );
+
+        $response = $this->server->dispatch( $request );
+        $data     = $response->get_data();
+
+        $this->assertNotEquals( 'rest_no_route', $data['code'] );
+    }
+
+    public function test_if_we_can_get_all_withdraw_charges() {
+        $this->save_withdraw_data_to_database();
+
+        $user = $this->factory()->user->create(
+            [
+                'role' => 'seller',
+            ]
+        );
+
+        wp_set_current_user( $user );
+
+        $endpoint = '/' . $this->namespace . '/charges';
+        $request = new \WP_REST_Request( 'GET', $endpoint );
+
+        $response = $this->server->dispatch( $request );
+
+        $all_charges = dokan_withdraw_get_method_charges();
+        $data = $response->get_data();
+
+        $this->assertArrayNotHasKey( 'code', $data );
+        $this->assertEquals( 200, $response->get_status() );
+        $this->assertEquals( $all_charges, $data );
+    }
+
+    /**
+     * Method charge data provider.
+     *
+     * @return array[]
+     */
+    public function charge_data_provider() {
+        return [
+            [
+                [
+                    'method' => 'paypal',
+                    'amount' => 100,
+                ],
+                [
+                    'charge'      => 15,
+                    'receivable'  => 85,
+                    'charge_data' => ['fixed' => 5, 'percentage' => 10]
+                ],
+            ],
+            [
+                [
+                    'method' => 'bank',
+                    'amount' => 200,
+                ],
+                [
+                    'charge'      => 10,
+                    'receivable'  => 190,
+                    'charge_data' => ['fixed' => 10, 'percentage' => '']
+                ],
+            ],
+        ];
+    }
+
+    /**
+     * Testing we can get charge of payment method.
+     *
+     * @dataProvider charge_data_provider
+     *
+     * @return void
+     */
+    public function test_if_we_can_get_withdraw_charge_of_a_method( $input, $expected ) {
+        $this->save_withdraw_data_to_database();
+
+        $user = $this->factory()->user->create(
+            [
+                'role' => 'seller',
+            ]
+        );
+
+        wp_set_current_user( $user );
+
+        $endpoint = '/' . $this->namespace . '/charge';
+        $request = new \WP_REST_Request( 'GET', $endpoint );
+        $request->set_query_params(
+            [
+                'method' => $input['method'],
+                'amount' => $input['amount'],
+            ]
+        );
+
+        $response = $this->server->dispatch( $request );
+        $data     = $response->get_data();
+
+        $this->assertArrayNotHasKey( 'code', $data );
+
+        $this->assertArrayHasKey( 'charge', $data );
+        $this->assertEquals( $expected['charge'], $data['charge'] );
+
+        $this->assertArrayHasKey( 'receivable', $data );
+        $this->assertEquals( $expected['receivable'], $data['receivable'] );
+
+        $this->assertArrayHasKey( 'charge_data', $data );
+        $this->assertEquals( $expected['charge_data'], $data['charge_data'] );
+    }
+}
diff --git a/tests/Withdrawal/WithdrawChargeTest.php b/tests/Withdrawal/WithdrawChargeTest.php
index a96b4aa83a..a404abd881 100644
--- a/tests/Withdrawal/WithdrawChargeTest.php
+++ b/tests/Withdrawal/WithdrawChargeTest.php
@@ -4,14 +4,29 @@
 
 class WithdrawChargeTest extends WP_UnitTestCase {
 
+    /**
+     * Set up
+     *
+     * @return void
+     */
     public function set_up() {
         parent::set_up();
     }
 
+    /**
+     * Test get all charges function exists.
+     *
+     * @return void
+     */
     public function test_get_method_charges_function_exists() {
         $this->assertIsCallable( 'dokan_withdraw_get_method_charges' );
     }
 
+    /**
+     * Test we can get all withdraw charges data.
+     *
+     * @return void
+     */
     public function test_that_we_can_get_withdraw_charges() {
         $all_methods = dokan_withdraw_get_methods();
         $charges = dokan_withdraw_get_method_charges();
@@ -24,6 +39,11 @@ public function test_that_we_can_get_withdraw_charges() {
         }
     }
 
+    /**
+     * Check all withdraw charge related methods exists in WeDevs\Dokan\Withdraw\Withdraw class
+     *
+     * @return void
+     */
     public function test_that_all_needed_method_exists_for_wothdraw_charge() {
         $withdraw = new Withdraw();
 
@@ -35,6 +55,11 @@ public function test_that_all_needed_method_exists_for_wothdraw_charge() {
         $this->assertTrue( method_exists( $withdraw, 'get_charge' ) );
     }
 
+    /**
+     * Testing for set and get charge data in WeDevs\Dokan\Withdraw\Withdraw class.
+     *
+     * @return void
+     */
     public function test_that_we_can_set_and_get_charge_data() {
         $withdraw = new Withdraw();
 
@@ -48,6 +73,11 @@ public function test_that_we_can_set_and_get_charge_data() {
         $this->assertEquals( $charge_data, $withdraw->get_charge_data() );
     }
 
+    /**
+     * Withdraw charge data provider.
+     *
+     * @return array[]
+     */
     public function charge_data_provider() {
         return [
             [
@@ -98,6 +128,8 @@ public function charge_data_provider() {
     }
 
     /**
+     * Test withdraw charge.
+     *
      * @dataProvider charge_data_provider
      */
     public function test_that_we_can_calculate_and_get_withdraw_charge_receivable( $input, $expected ) {

From 40b7cf0c0058bc4e7135c026d84f4632886e7596 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 31 Jul 2023 16:58:57 +0600
Subject: [PATCH 18/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FAllignment=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/src/js/withdraw.js | 86 +++++++++++++++++++--------------------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index 11e4aa709e..cb81fff2b5 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -1,44 +1,35 @@
-;(($) => {
+( ( $ ) => {
     const Dokan_Withdraw = {
         init: () => {
-            $( '#dokan-request-withdraw-button' ).on( 'click', ( e ) => {
+            $('#dokan-request-withdraw-button').on( 'click', (e) => {
                 e.preventDefault();
                 Dokan_Withdraw.openRequestWithdrawWindow();
             } );
 
-            $( '.dokan-withdraw-make-default-button' ).on( 'click', ( e ) => {
+            $('.dokan-withdraw-make-default-button').on( 'click', (e) => {
                 e.preventDefault();
                 Dokan_Withdraw.makeDefault( e );
             } );
 
-            $( '#dokan-withdraw-request-submit' ).on( 'click', ( e ) => {
+            $('#dokan-withdraw-request-submit').on( 'click', (e) => {
                 Dokan_Withdraw.handleWithdrawRequest( e );
             } );
 
-            $( '#dokan-withdraw-display-schedule-popup' ).on(
-                'click',
-                ( e ) => {
+            $('#dokan-withdraw-display-schedule-popup').on( 'click', (e) => {
                     Dokan_Withdraw.opensScheduleWindow( e );
-                }
-            );
+            } );
 
-            $( '#dokan-withdraw-schedule-request-submit' ).on(
-                'click',
-                ( e ) => {
+            $('#dokan-withdraw-schedule-request-submit').on( 'click', ( e ) => {
                     Dokan_Withdraw.handleScheduleChangeRequest( e );
-                }
-            );
+            } );
 
-            $( "input[name='withdraw-schedule']" ).on( 'change', ( e ) => {
+            $("input[name='withdraw-schedule']").on( 'change', (e) => {
                 Dokan_Withdraw.handleScheduleChange( e );
             } );
 
-            $( "[name='withdraw_method'][id='withdraw-method']" ).on(
-                'change',
-                ( e ) => {
+            $( "[name='withdraw_method'][id='withdraw-method']" ).on( 'change', ( e ) => {
                     Dokan_Withdraw.calculateWithdrawCharges();
-                }
-            );
+            } );
 
             $( 'input#withdraw-amount' ).on( 'keyup', Dokan_Withdraw.debounce( Dokan_Withdraw.calculateWithdrawCharges, 500 ) );
         },
@@ -61,10 +52,10 @@
         openRequestWithdrawWindow: () => {
             const withdrawTemplate = wp.template( 'withdraw-request-popup' ),
                 modal = $( '#dokan-withdraw-request-popup' ).iziModal( {
-                    width: 690,
+                    width       : 690,
                     overlayColor: 'rgba(0, 0, 0, 0.8)',
-                    headerColor: dokan.modal_header_color,
-                    onOpening: function ( modal ) {
+                    headerColor : dokan.modal_header_color,
+                    onOpening   : function ( modal ) {
                         Dokan_Withdraw.calculateWithdrawCharges();
                     },
                 } );
@@ -77,9 +68,9 @@
         opensScheduleWindow: () => {
             const scheduleTemplate = wp.template( 'withdraw-schedule-popup' ),
                 modal = $( '#dokan-withdraw-schedule-popup' ).iziModal( {
-                    width: 690,
+                    width       : 690,
                     overlayColor: 'rgba(0, 0, 0, 0.8)',
-                    headerColor: dokan.modal_header_color,
+                    headerColor : dokan.modal_header_color,
                 } );
 
             modal.iziModal( 'setContent', scheduleTemplate().trim() );
@@ -88,16 +79,16 @@
             Dokan_Withdraw.init();
         },
         makeDefault: ( e ) => {
-            const button = $( e.target );
+            const button      = $( e.target );
             const paymentArea = $( '#dokan-withdraw-payment-method-list' );
 
-            paymentArea.block( {
+            paymentArea.block({
                 message: null,
                 overlayCSS: {
                     background: '#fff',
-                    opacity: 0.6,
-                },
-            } );
+                    opacity: 0.6
+                }
+            });
 
             $.post(
                 dokan.ajaxurl,
@@ -135,17 +126,17 @@
         handleWithdrawRequest: ( e ) => {
             e.preventDefault();
             const amount = $( 'input#withdraw-amount' ).val();
-            const nonce = $( 'input#dokan_withdraw_nonce' ).val();
-            const form = $( '#withdraw-request-popup' );
+            const nonce  = $( 'input#dokan_withdraw_nonce' ).val();
+            const form   = $( '#withdraw-request-popup' );
             const method = $( '#withdraw-method' ).val();
 
-            form.block( {
+            form.block({
                 message: null,
                 overlayCSS: {
                     background: '#fff',
-                    opacity: 0.6,
-                },
-            } );
+                    opacity: 0.6
+                }
+            });
 
             $.post(
                 dokan.ajaxurl,
@@ -272,10 +263,13 @@
                     amount: withdrawAmount,
                 },
                 ( response ) => {
-                  let data = response.data ? response.data : {};
+                    let data = response.data ? response.data : {};
                     Dokan_Withdraw.showWithdrawChargeHtml( data );
 
-                    $( '#dokan-withdraw-request-submit' ).attr( 'disabled', ! response.success );
+                    $( '#dokan-withdraw-request-submit' ).attr(
+                        'disabled',
+                        ! response.success
+                    );
                 }
             );
         },
@@ -293,11 +287,17 @@
 
             let chargeText = '';
 
-            if ( chargeData.plain.charge_data && chargeData.plain.charge_data.fixed ) {
+            if (
+                chargeData.plain.charge_data &&
+                chargeData.plain.charge_data.fixed
+            ) {
                 chargeText += `${ chargeData.html.charge_data.fixed }`;
             }
 
-            if ( chargeData.plain.charge_data && chargeData.plain.charge_data.percentage ) {
+            if (
+                chargeData.plain.charge_data &&
+                chargeData.plain.charge_data.percentage
+            ) {
                 chargeText += chargeText ? ' + ' : '';
                 chargeText += `${ chargeData.html.charge_data.percentage }`;
                 chargeText += ` = ${ chargeData.html.charge }`;
@@ -314,7 +314,7 @@
         },
     };
 
-    $(document).ready(function() {
+    $( document ).ready( function () {
         Dokan_Withdraw.init();
-    });
-})(jQuery);
+    } );
+} )( jQuery );

From ca871f7f565f194594a4c5c1e3d5ca105b02b1a8 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 31 Jul 2023 17:03:01 +0600
Subject: [PATCH 19/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FAllignment=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/src/js/withdraw.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index cb81fff2b5..63d74e5cd2 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -1,4 +1,4 @@
-( ( $ ) => {
+;(($) => {
     const Dokan_Withdraw = {
         init: () => {
             $('#dokan-request-withdraw-button').on( 'click', (e) => {
@@ -16,19 +16,19 @@
             } );
 
             $('#dokan-withdraw-display-schedule-popup').on( 'click', (e) => {
-                    Dokan_Withdraw.opensScheduleWindow( e );
+                Dokan_Withdraw.opensScheduleWindow( e );
             } );
 
             $('#dokan-withdraw-schedule-request-submit').on( 'click', ( e ) => {
-                    Dokan_Withdraw.handleScheduleChangeRequest( e );
+                Dokan_Withdraw.handleScheduleChangeRequest( e );
             } );
 
             $("input[name='withdraw-schedule']").on( 'change', (e) => {
                 Dokan_Withdraw.handleScheduleChange( e );
-            } );
+            });
 
             $( "[name='withdraw_method'][id='withdraw-method']" ).on( 'change', ( e ) => {
-                    Dokan_Withdraw.calculateWithdrawCharges();
+                Dokan_Withdraw.calculateWithdrawCharges();
             } );
 
             $( 'input#withdraw-amount' ).on( 'keyup', Dokan_Withdraw.debounce( Dokan_Withdraw.calculateWithdrawCharges, 500 ) );
@@ -317,4 +317,4 @@
     $( document ).ready( function () {
         Dokan_Withdraw.init();
     } );
-} )( jQuery );
+})(jQuery);

From ab760da726b05ab6fde4b449b49c4ce6bd5b89b7 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 31 Jul 2023 17:08:07 +0600
Subject: [PATCH 20/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FAllignment=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/src/js/withdraw.js | 48 ++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index 63d74e5cd2..f946cd4b0d 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -19,7 +19,7 @@
                 Dokan_Withdraw.opensScheduleWindow( e );
             } );
 
-            $('#dokan-withdraw-schedule-request-submit').on( 'click', ( e ) => {
+            $('#dokan-withdraw-schedule-request-submit').on( 'click', (e) => {
                 Dokan_Withdraw.handleScheduleChangeRequest( e );
             } );
 
@@ -125,8 +125,8 @@
         },
         handleWithdrawRequest: ( e ) => {
             e.preventDefault();
-            const amount = $( 'input#withdraw-amount' ).val();
-            const nonce  = $( 'input#dokan_withdraw_nonce' ).val();
+            const amount = $( 'input#withdraw-amount').val();
+            const nonce  = $( 'input#dokan_withdraw_nonce').val();
             const form   = $( '#withdraw-request-popup' );
             const method = $( '#withdraw-method' ).val();
 
@@ -156,10 +156,10 @@
                             timer: 2000,
                             timerProgressBar: true,
                             didOpen: ( toast ) => {
-                                setTimeout( function () {
-                                    form.unblock();
-                                    window.location.reload();
-                                }, 2000 );
+                              setTimeout( function () {
+                                form.unblock();
+                                window.location.reload();
+                              }, 2000);
                             },
                         } );
                     } else {
@@ -174,24 +174,20 @@
         },
         handleScheduleChangeRequest: ( e ) => {
             e.preventDefault();
-            const schedule = $(
-                "input[name='withdraw-schedule']:checked"
-            ).val();
-            const nonce = $( '#dokan-withdraw-schedule-request-submit' ).data(
-                'security'
-            );
-            const form = $( '#withdraw-schedule-popup' );
-            const reserve = $( '#withdraw-remaining-amount' ).val();
-            const minimum = $( '#minimum-withdraw-amount' ).val();
-            const method = $( '#preferred-payment-method' ).val();
+            const schedule = $( "input[name='withdraw-schedule']:checked").val();
+            const nonce    = $( '#dokan-withdraw-schedule-request-submit' ).data('security');
+            const form     = $( '#withdraw-schedule-popup' );
+            const reserve  = $( '#withdraw-remaining-amount' ).val();
+            const minimum  = $( '#minimum-withdraw-amount' ).val();
+            const method   = $( '#preferred-payment-method' ).val();
 
-            form.block( {
+            form.block({
                 message: null,
                 overlayCSS: {
                     background: '#fff',
-                    opacity: 0.6,
-                },
-            } );
+                    opacity: 0.6
+                }
+            });
 
             $.post(
                 dokan.ajaxurl,
@@ -225,9 +221,9 @@
                 }
             );
         },
-        handleScheduleChange: ( e ) => {
-            const nextDate = $( e.target ).data( 'next-schedule' );
-            $( '#dokan-withdraw-next-scheduled-date' ).html( nextDate );
+        handleScheduleChange: (e) => {
+          const nextDate = $(e.target).data('next-schedule');
+          $( '#dokan-withdraw-next-scheduled-date').html(nextDate);
         },
         calculateWithdrawCharges: () => {
             if (
@@ -314,7 +310,7 @@
         },
     };
 
-    $( document ).ready( function () {
+    $(document).ready(function() {
         Dokan_Withdraw.init();
-    } );
+    });
 })(jQuery);

From c16483445ae95a7abfb844aca381eff0e4b91b7f Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 31 Jul 2023 17:30:58 +0600
Subject: [PATCH 21/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FAllignment=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/src/js/withdraw.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index f946cd4b0d..21a9741d37 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -155,12 +155,12 @@
                             showConfirmButton: false,
                             timer: 2000,
                             timerProgressBar: true,
-                            didOpen: ( toast ) => {
+                            didOpen: (toast) => {
                               setTimeout( function () {
                                 form.unblock();
                                 window.location.reload();
                               }, 2000);
-                            },
+                            }
                         } );
                     } else {
                         dokan_sweetalert( '', {
@@ -175,7 +175,7 @@
         handleScheduleChangeRequest: ( e ) => {
             e.preventDefault();
             const schedule = $( "input[name='withdraw-schedule']:checked").val();
-            const nonce    = $( '#dokan-withdraw-schedule-request-submit' ).data('security');
+            const nonce    = $( '#dokan-withdraw-schedule-request-submit').data('security');
             const form     = $( '#withdraw-schedule-popup' );
             const reserve  = $( '#withdraw-remaining-amount' ).val();
             const minimum  = $( '#minimum-withdraw-amount' ).val();
@@ -222,8 +222,8 @@
             );
         },
         handleScheduleChange: (e) => {
-          const nextDate = $(e.target).data('next-schedule');
-          $( '#dokan-withdraw-next-scheduled-date').html(nextDate);
+            const nextDate = $(e.target).data('next-schedule');
+            $( '#dokan-withdraw-next-scheduled-date').html(nextDate);
         },
         calculateWithdrawCharges: () => {
             if (

From 4df8390c2962a60f1c702e093eb4aedf1096964e Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 31 Jul 2023 17:31:38 +0600
Subject: [PATCH 22/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FAllignment=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/src/js/withdraw.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index 21a9741d37..34c9cc7b10 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -156,7 +156,7 @@
                             timer: 2000,
                             timerProgressBar: true,
                             didOpen: (toast) => {
-                              setTimeout( function () {
+                              setTimeout( function() {
                                 form.unblock();
                                 window.location.reload();
                               }, 2000);

From d9b939b18166636f26d70d70908971d3089f261f Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Thu, 3 Aug 2023 11:27:27 +0600
Subject: [PATCH 23/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FFix=20make=20withdraw?=
 =?UTF-8?q?=20request=20errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/src/js/withdraw.js                       | 6 +++---
 src/admin/components/Fields/WithdrawCharges.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index 34c9cc7b10..0a38f50e4a 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -226,10 +226,10 @@
             $( '#dokan-withdraw-next-scheduled-date').html(nextDate);
         },
         calculateWithdrawCharges: () => {
+            let charges = $( "select[name='withdraw_method'][id='withdraw-method'] option:selected" ).data();
             if (
-                $(
-                    '#dokan-send-withdraw-request-popup-form > .dokan-alert-danger'
-                ).length
+                $( '#dokan-send-withdraw-request-popup-form > .dokan-alert-danger' ).length
+                || ! charges
             ) {
                 return;
             }
diff --git a/src/admin/components/Fields/WithdrawCharges.vue b/src/admin/components/Fields/WithdrawCharges.vue
index 59b6ea3601..2c127426ed 100644
--- a/src/admin/components/Fields/WithdrawCharges.vue
+++ b/src/admin/components/Fields/WithdrawCharges.vue
@@ -135,7 +135,7 @@ export default {
         margin-top: 15px;
 
         .wm-methods-box {
-            border-bottom: 1px solid #b0a7a752;
+            border-bottom: 1px solid #f3f4f6;
             padding: 0 30px;
             display: flex;
             justify-content: space-between;

From 695b007c0f9b474cb8b59f9dc00dc3d8d963c003 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Thu, 3 Aug 2023 12:51:51 +0600
Subject: [PATCH 24/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FMove=20charge=20validat?=
 =?UTF-8?q?ion=20code=20to=20withdraw=20validator=20for=20ajax=20and=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dokan.php                            |  1 +
 includes/REST/WithdrawController.php | 10 +---------
 includes/Withdraw/Hooks.php          | 10 +---------
 includes/Withdraw/Manager.php        | 16 ++++++++++++++++
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/dokan.php b/dokan.php
index 8babb7bb5c..818a2c4b75 100755
--- a/dokan.php
+++ b/dokan.php
@@ -50,6 +50,7 @@
  * @class WeDevs_Dokan The class that holds the entire WeDevs_Dokan plugin
  *
  * @property WeDevs\Dokan\BackgroundProcess\Manager $bg_process Instance of WeDevs\Dokan\BackgroundProcess\Manager class
+ * @property WeDevs\Dokan\Withdraw\Manager $withdraw Instance of WeDevs\Dokan\Withdraw\Manager class
  */
 final class WeDevs_Dokan {
 
diff --git a/includes/REST/WithdrawController.php b/includes/REST/WithdrawController.php
index bb82a96fb5..a4b1dcca11 100644
--- a/includes/REST/WithdrawController.php
+++ b/includes/REST/WithdrawController.php
@@ -405,8 +405,6 @@ public function create_item( $request ) {
             }
 
             $withdraw = new Withdraw();
-            $all_withdraw_charges = dokan_withdraw_get_method_charges();
-            $charge_data = $all_withdraw_charges[ $request['method'] ];
 
             $withdraw
                 ->set_user_id( $user_id )
@@ -415,13 +413,7 @@ public function create_item( $request ) {
                 ->set_status( dokan()->withdraw->get_status_code( 'pending' ) )
                 ->set_method( $request['method'] )
                 ->set_ip( dokan_get_client_ip() )
-                ->set_note( $note )
-                ->set_charge_data( $charge_data )
-                ->calculate_charge();
-
-            if ( $withdraw->get_receivable_amount() < 0 ) {
-                wp_send_json_error( esc_html__( 'Withdraw amount is less then the withdraw charge.', 'dokan-lite' ) );
-            }
+                ->set_note( $note );
 
             $result = $withdraw->save();
 
diff --git a/includes/Withdraw/Hooks.php b/includes/Withdraw/Hooks.php
index c0449693af..61c2c976cf 100644
--- a/includes/Withdraw/Hooks.php
+++ b/includes/Withdraw/Hooks.php
@@ -164,8 +164,6 @@ public function ajax_handle_withdraw_request() {
         }
 
         $withdraw = new Withdraw();
-        $all_withdraw_charges = dokan_withdraw_get_method_charges();
-        $charge_data = $all_withdraw_charges[ $method ];
 
         $withdraw
             ->set_user_id( $user_id )
@@ -174,13 +172,7 @@ public function ajax_handle_withdraw_request() {
             ->set_status( dokan()->withdraw->get_status_code( 'pending' ) )
             ->set_method( $method )
             ->set_ip( dokan_get_client_ip() )
-            ->set_note( '' )
-            ->set_charge_data( $charge_data )
-            ->calculate_charge();
-
-        if ( $withdraw->get_receivable_amount() < 0 ) {
-            wp_send_json_error( esc_html__( 'Withdraw amount is less then the withdraw charge.', 'dokan-lite' ) );
-        }
+            ->set_note( '' );
 
         $result = $withdraw->save();
 
diff --git a/includes/Withdraw/Manager.php b/includes/Withdraw/Manager.php
index af4fbc81d4..c9efcc8955 100644
--- a/includes/Withdraw/Manager.php
+++ b/includes/Withdraw/Manager.php
@@ -27,12 +27,23 @@ class Manager {
      * @return bool|\WP_Error
      */
     public function is_valid_approval_request( $args ) {
+        $withdraw = new Withdraw();
         $user_id = $args['user_id'];
         $limit   = $this->get_withdraw_limit();
         $balance = wc_format_decimal( dokan_get_seller_balance( $user_id, false ), 2 );
         $amount  = wc_format_decimal( $args['amount'], 2 );
         $method  = $args['method'];
 
+        $all_withdraw_charges = dokan_withdraw_get_method_charges();
+        $charge_data = $all_withdraw_charges[ $method ];
+
+        $withdraw
+            ->set_user_id( $user_id )
+            ->set_amount( $amount )
+            ->set_method( $method )
+            ->set_charge_data( $charge_data )
+            ->calculate_charge();
+
         if ( empty( $amount ) ) {
             return new WP_Error( 'dokan_withdraw_empty', __( 'Withdraw amount required ', 'dokan-lite' ) );
         }
@@ -58,6 +69,11 @@ public function is_valid_approval_request( $args ) {
             return new WP_Error( 'dokan_withdraw_already_approved', __( 'Withdraw is already approved.', 'dokan-lite' ) );
         }
 
+        // Check if withdraw amount is equal or greater than the charge.
+        if ( $withdraw->get_receivable_amount() < 0 ) {
+            return new WP_Error( 'dokan_withdraw_not_enough_balance', __( 'Withdraw amount is less then the withdraw charge.', 'dokan-lite' ) );
+        }
+
         /**
          * Filter validated withdraw request
          *

From ac51e924f1aab63dcce426850495ce265b045894 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Thu, 3 Aug 2023 18:30:54 +0600
Subject: [PATCH 25/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8FExclude=20automated=20w?=
 =?UTF-8?q?ithdraw=20methods=20in=20withdraw=20charge=20setting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 includes/Admin/Settings.php                   | 17 +++++-----
 includes/Withdraw/functions.php               | 32 +++++++++++++++----
 .../components/Fields/WithdrawCharges.vue     | 13 +++++++-
 3 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/includes/Admin/Settings.php b/includes/Admin/Settings.php
index dcaae2083d..597048b5f1 100644
--- a/includes/Admin/Settings.php
+++ b/includes/Admin/Settings.php
@@ -588,18 +588,19 @@ public function get_settings_fields() {
                     'tooltip' => __( 'Check to add available payment methods for vendors to withdraw money.', 'dokan-lite' ),
                 ],
                 'withdraw_charges'      => [
-                    'name'    => 'withdraw_charges',
-                    'label'   => __( 'Withdraw Charges', 'dokan-lite' ),
-                    'desc'    => __( 'Select suitable withdraw charges for vendors', 'dokan-lite' ),
-                    'type'    => 'charges',
-                    'options' => dokan_withdraw_get_methods(),
-                    'default' => dokan_withdraw_get_method_charges(),
-                    'show_if' => [
+                    'name'               => 'withdraw_charges',
+                    'label'              => __( 'Withdraw Charges', 'dokan-lite' ),
+                    'desc'               => __( 'Select suitable withdraw charges for vendors', 'dokan-lite' ),
+                    'type'               => 'charges',
+                    'options'            => dokan_withdraw_get_methods(),
+                    'chargeable_methods' => dokan_withdraw_get_chargeable_methods(),
+                    'default'            => dokan_withdraw_get_method_charges(),
+                    'show_if'            => [
                         'withdraw_methods' => [
                             'contains-any' => array_keys( dokan_withdraw_get_methods() ),
                         ],
                     ],
-                    'items_show_if' => [
+                    'items_show_if'      => [
                         'key'       => 'withdraw_methods',
                         'condition' => 'contains-key-value',
                     ],
diff --git a/includes/Withdraw/functions.php b/includes/Withdraw/functions.php
index cc09884313..6400291185 100644
--- a/includes/Withdraw/functions.php
+++ b/includes/Withdraw/functions.php
@@ -12,12 +12,14 @@
 function dokan_withdraw_register_methods() {
     $methods = [
         'paypal' => [
-            'title'    => __( 'PayPal', 'dokan-lite' ),
-            'callback' => 'dokan_withdraw_method_paypal',
+            'title'        => __( 'PayPal', 'dokan-lite' ),
+            'callback'     => 'dokan_withdraw_method_paypal',
+            'apply_charge' => true,
         ],
         'bank'   => [
-            'title'    => __( 'Bank Transfer', 'dokan-lite' ),
-            'callback' => 'dokan_withdraw_method_bank',
+            'title'        => __( 'Bank Transfer', 'dokan-lite' ),
+            'callback'     => 'dokan_withdraw_method_bank',
+            'apply_charge' => true,
         ],
     ];
 
@@ -113,7 +115,7 @@ function dokan_withdraw_get_method_title( $method_key, $request = null ) {
     /**
      * @since 3.3.7 added filter dokan_get_withdraw_method_title
      */
-    return apply_filters( 'dokan_get_withdraw_method_title', isset( $registered[ $method_key ] ) ?  $registered[ $method_key ]['title'] : ucfirst( $method_key ), $method_key, $request );
+    return apply_filters( 'dokan_get_withdraw_method_title', isset( $registered[ $method_key ] ) ? $registered[ $method_key ]['title'] : ucfirst( $method_key ), $method_key, $request );
 }
 
 /**
@@ -538,6 +540,24 @@ function dokan_is_withdraw_method_enabled( $method_id ) {
             && ! empty( $payment_methods[ $method_id ] );
 }
 
+/**
+ * Get registered withdraw methods suitable for Settings Api
+ *
+ * @return array
+ */
+function dokan_withdraw_get_chargeable_methods() {
+    $methods    = [];
+    $registered = dokan_withdraw_register_methods();
+
+    foreach ( $registered as $key => $value ) {
+        if ( ! empty( $value['apply_charge'] ) ) {
+            $methods[ $key ] = $value['title'];
+        }
+    }
+
+    return $methods;
+}
+
 /**
  * Returns all withdraw methods charges saved.
  *
@@ -547,7 +567,7 @@ function dokan_is_withdraw_method_enabled( $method_id ) {
  */
 function dokan_withdraw_get_method_charges() {
     $charges     = dokan_get_option( 'withdraw_charges', 'dokan_withdraw', '' );
-    $methods     = array_keys( dokan_withdraw_get_methods() );
+    $methods     = array_keys( dokan_withdraw_get_chargeable_methods() );
     $default_val = [
         'fixed'      => '',
         'percentage' => '',
diff --git a/src/admin/components/Fields/WithdrawCharges.vue b/src/admin/components/Fields/WithdrawCharges.vue
index 2c127426ed..52ac1861d0 100644
--- a/src/admin/components/Fields/WithdrawCharges.vue
+++ b/src/admin/components/Fields/WithdrawCharges.vue
@@ -17,12 +17,15 @@
                     <div class="wm-method">
                         <h4 class="field_heading">{{ optionVal }}</h4>
                     </div>
-                    <div class="wm-charges">
+                    <div class="wm-charges" v-if="fieldData.chargeable_methods?.[optionKey]">
                         <combine-input
                             :value="charges[ optionKey ] ?? {}"
                             v-on:change='data => chargeChangeHandler( data, optionKey )'
                         />
                     </div>
+                    <div v-else class='wm-charges'>
+                        <span class='wm-automated'>{{ __( 'Automated', 'dokan-lite' ) }}</span>
+                    </div>
                 </div>
             </div>
         </fieldset>
@@ -152,6 +155,14 @@ export default {
             .wm-charges {
                 display: flex;
                 align-items: center;
+
+                .wm-automated {
+                    border: 1px solid #dbdbdb;
+                    color: #838181;
+                    padding: 5px 8px;
+                    border-radius: 12px;
+                    background: #f5f5f6;;
+                }
             }
         }
     }

From e7785e6eda9d05d54449ebc87f7315ebd137bf87 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Fri, 4 Aug 2023 14:48:32 +0600
Subject: [PATCH 26/37] =?UTF-8?q?=E2=9A=A1=EF=B8=8Frewrite=20get=20charge?=
 =?UTF-8?q?=20data=20function=20in=20Withdraw.php=20class,=20that=20now=20?=
 =?UTF-8?q?we=20can=20get=20any=20method=20charge=20and=20if=20the=20metho?=
 =?UTF-8?q?d=20is=20not=20chargeable=20then=20it=20will=20be=200=20charge?=
 =?UTF-8?q?=20and=20errors=20are=20handled=20properly.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 includes/REST/WithdrawController.php |  6 ++----
 includes/Withdraw/Hooks.php          |  8 +++-----
 includes/Withdraw/Withdraw.php       | 24 +++++++++++++++---------
 includes/Withdraw/functions.php      | 25 +++++++++++--------------
 4 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/includes/REST/WithdrawController.php b/includes/REST/WithdrawController.php
index a4b1dcca11..9db4c2ad7c 100644
--- a/includes/REST/WithdrawController.php
+++ b/includes/REST/WithdrawController.php
@@ -682,18 +682,16 @@ public function get_method_charge( $request ) {
         $method = $request->get_param( 'method' );
         $amount = wc_format_decimal( $request->get_param( 'amount' ) );
 
-        $withdraw    = new Withdraw();
-        $all_charges = dokan_withdraw_get_method_charges();
+        $withdraw = new Withdraw();
 
         $withdraw->set_method( $method )
                 ->set_amount( $amount )
-                ->set_charge_data( $all_charges[ $method ] )
                 ->calculate_charge();
 
         $response = [
             'charge'      => $withdraw->get_charge(),
             'receivable'  => $withdraw->get_receivable_amount(),
-            'charge_data' => $all_charges[ $withdraw->get_method() ],
+            'charge_data' => $withdraw->get_charge_data(),
         ];
 
         if ( $withdraw->get_receivable_amount() < 0 ) {
diff --git a/includes/Withdraw/Hooks.php b/includes/Withdraw/Hooks.php
index 61c2c976cf..a8c0d6b883 100644
--- a/includes/Withdraw/Hooks.php
+++ b/includes/Withdraw/Hooks.php
@@ -245,24 +245,22 @@ public function ajax_handle_get_withdraw_method_charge() {
         $method = sanitize_text_field( wp_unslash( $_POST['method'] ) );
 
         $withdraw = new Withdraw();
-        $all_charges = dokan_withdraw_get_method_charges();
         $withdraw->set_method( $method )
                 ->set_amount( $amount )
-                ->set_charge_data( $all_charges[ $withdraw->get_method() ] )
                 ->calculate_charge();
 
         $response = [
             'plain' => [
                 'charge'      => $withdraw->get_charge(),
                 'receivable'  => $withdraw->get_receivable_amount(),
-                'charge_data' => $all_charges[ $withdraw->get_method() ],
+                'charge_data' => $withdraw->get_charge_data(),
             ],
             'html'  => [
                 'charge'      => wc_price( $withdraw->get_charge() ),
                 'receivable'  => wc_price( $withdraw->get_receivable_amount() ),
                 'charge_data' => [
-                    'fixed'      => wc_price( $all_charges[ $withdraw->get_method() ]['fixed'] ),
-                    'percentage' => $all_charges[ $withdraw->get_method() ]['percentage'] . '%',
+                    'fixed'      => wc_price( $withdraw->get_charge_data()['fixed'] ),
+                    'percentage' => $withdraw->get_charge_data()['percentage'] . '%',
                 ],
             ],
         ];
diff --git a/includes/Withdraw/Withdraw.php b/includes/Withdraw/Withdraw.php
index 4bb4ac95fe..806a79b09b 100644
--- a/includes/Withdraw/Withdraw.php
+++ b/includes/Withdraw/Withdraw.php
@@ -53,10 +53,7 @@ public function __construct( $data = [] ) {
         $details     = maybe_unserialize( $data['details'] );
         $charge      = isset( $details['charge'] ) ? wc_format_decimal( $details['charge'] ) : 0;
         $receivable  = isset( $details['receivable'] ) ? wc_format_decimal( $details['receivable'] ) : $this->get_amount();
-        $charge_data = isset( $details['charge_data'] ) ? $details['charge_data'] : [
-			'fixed' => 0,
-			'percentage' => 0,
-		];
+        $charge_data = isset( $details['charge_data'] ) ? $details['charge_data'] : [];
 
         $this
             ->set_charge( $charge )
@@ -204,7 +201,19 @@ public function get_receivable_amount() {
      * @returns array
      */
     public function get_charge_data() {
-        return $this->data['charge_data'];
+        $charge_data = $this->data['charge_data'];
+        if ( ! empty( $this->get_method() ) && empty( $this->data['charge_data'] ) ) {
+            $default_val       = [
+                'fixed'      => 0.00,
+                'percentage' => 0.00,
+            ];
+			$all_charges = dokan_withdraw_get_method_charges();
+
+            $charge_data = array_key_exists( $this->get_method(), $all_charges ) ? $all_charges[ $this->get_method() ] : $default_val;
+            $this->set_charge_data( $charge_data );
+        }
+
+        return $charge_data;
     }
 
     /**
@@ -416,10 +425,7 @@ public function save() {
     protected function create() {
         global $wpdb;
 
-        $all_charges = dokan_withdraw_get_method_charges();
-        $current_method_charge_data = $all_charges[ $this->get_method() ];
-
-        $this->set_charge_data( $current_method_charge_data )->calculate_charge();
+        $this->calculate_charge();
 
         $details = dokan()->withdraw->get_formatted_details( $this->data['method'], absint( $this->data['user_id'] ) );
 
diff --git a/includes/Withdraw/functions.php b/includes/Withdraw/functions.php
index 6400291185..23e0e663af 100644
--- a/includes/Withdraw/functions.php
+++ b/includes/Withdraw/functions.php
@@ -566,23 +566,20 @@ function dokan_withdraw_get_chargeable_methods() {
  * @return array
  */
 function dokan_withdraw_get_method_charges() {
-    $charges     = dokan_get_option( 'withdraw_charges', 'dokan_withdraw', '' );
-    $methods     = array_keys( dokan_withdraw_get_chargeable_methods() );
-    $default_val = [
-        'fixed'      => '',
-        'percentage' => '',
+    $charges           = dokan_get_option( 'withdraw_charges', 'dokan_withdraw', [] );
+    $all_methods       = array_keys( dokan_withdraw_get_methods() );
+    $chargeable_methods = array_keys( dokan_withdraw_get_chargeable_methods() );
+    $default_val       = [
+        'fixed'      => 0.00,
+        'percentage' => 0.00,
     ];
 
-    if ( empty( $charges ) || ! is_array( $charges ) ) {
-        $charges = [];
-
-        foreach ( $methods as $method ) {
+    foreach ( $all_methods as $method ) {
+        if ( empty( $charges ) || ! is_array( $charges ) || ! in_array( $method, $chargeable_methods, true ) ) {
             $charges[ $method ] = $default_val;
-        }
-    } else {
-        foreach ( $methods as $method ) {
-            $charges[ $method ]['fixed']      = ! empty( $charges[ $method ]['fixed'] ) ? wc_format_decimal( $charges[ $method ]['fixed'] ) : '';
-            $charges[ $method ]['percentage'] = ! empty( $charges[ $method ]['percentage'] ) ? wc_format_decimal( $charges[ $method ]['percentage'] ) : '';
+        } else {
+            $charges[ $method ]['fixed']      = ! empty( $charges[ $method ]['fixed'] ) ? (float) wc_format_decimal( $charges[ $method ]['fixed'] ) : 0.00;
+            $charges[ $method ]['percentage'] = ! empty( $charges[ $method ]['percentage'] ) ? (float) wc_format_decimal( $charges[ $method ]['percentage'] ) : 0.00;
         }
     }
 

From e2fd7cd6afe99902807bac269d848819cf4ec3d8 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Fri, 15 Sep 2023 11:14:42 +0600
Subject: [PATCH 27/37] Pr review updated

---
 includes/REST/WithdrawController.php          |  2 +-
 includes/Withdraw/Hooks.php                   |  2 +-
 includes/Withdraw/Manager.php                 | 26 +++++++++----------
 includes/Withdraw/Withdraw.php                |  4 +--
 .../withdraw/approved-request-listing.php     |  2 +-
 .../withdraw/cancelled-request-listing.php    |  2 +-
 tests/Withdrawal/WithdrawChargeAjaxTest.php   | 25 ++++++++++++------
 7 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/includes/REST/WithdrawController.php b/includes/REST/WithdrawController.php
index 9db4c2ad7c..ffb6631e25 100644
--- a/includes/REST/WithdrawController.php
+++ b/includes/REST/WithdrawController.php
@@ -409,7 +409,7 @@ public function create_item( $request ) {
             $withdraw
                 ->set_user_id( $user_id )
                 ->set_amount( $request['amount'] )
-                ->set_date( current_time( 'mysql' ) )
+                ->set_date( dokan_current_datetime() )
                 ->set_status( dokan()->withdraw->get_status_code( 'pending' ) )
                 ->set_method( $request['method'] )
                 ->set_ip( dokan_get_client_ip() )
diff --git a/includes/Withdraw/Hooks.php b/includes/Withdraw/Hooks.php
index a8c0d6b883..21ec777648 100644
--- a/includes/Withdraw/Hooks.php
+++ b/includes/Withdraw/Hooks.php
@@ -168,7 +168,7 @@ public function ajax_handle_withdraw_request() {
         $withdraw
             ->set_user_id( $user_id )
             ->set_amount( $amount )
-            ->set_date( current_time( 'mysql' ) )
+            ->set_date( dokan_current_datetime() )
             ->set_status( dokan()->withdraw->get_status_code( 'pending' ) )
             ->set_method( $method )
             ->set_ip( dokan_get_client_ip() )
diff --git a/includes/Withdraw/Manager.php b/includes/Withdraw/Manager.php
index c9efcc8955..a0c009c43b 100644
--- a/includes/Withdraw/Manager.php
+++ b/includes/Withdraw/Manager.php
@@ -37,13 +37,6 @@ public function is_valid_approval_request( $args ) {
         $all_withdraw_charges = dokan_withdraw_get_method_charges();
         $charge_data = $all_withdraw_charges[ $method ];
 
-        $withdraw
-            ->set_user_id( $user_id )
-            ->set_amount( $amount )
-            ->set_method( $method )
-            ->set_charge_data( $charge_data )
-            ->calculate_charge();
-
         if ( empty( $amount ) ) {
             return new WP_Error( 'dokan_withdraw_empty', __( 'Withdraw amount required ', 'dokan-lite' ) );
         }
@@ -69,6 +62,13 @@ public function is_valid_approval_request( $args ) {
             return new WP_Error( 'dokan_withdraw_already_approved', __( 'Withdraw is already approved.', 'dokan-lite' ) );
         }
 
+        $withdraw
+            ->set_user_id( $user_id )
+            ->set_amount( $amount )
+            ->set_method( $method )
+            ->set_charge_data( $charge_data )
+            ->calculate_charge();
+
         // Check if withdraw amount is equal or greater than the charge.
         if ( $withdraw->get_receivable_amount() < 0 ) {
             return new WP_Error( 'dokan_withdraw_not_enough_balance', __( 'Withdraw amount is less then the withdraw charge.', 'dokan-lite' ) );
@@ -261,13 +261,11 @@ public function get_withdraw_requests( $user_id = '', $status = 0, $limit = 10,
                 $result = $wpdb->get_results( $wpdb->prepare( "SELECT * FROM {$wpdb->dokan_withdraw} WHERE user_id = %d AND status = %d ORDER BY id DESC LIMIT %d, %d", $user_id, $status, $offset, $limit ) );
             }
 
-            $withdraws = [];
-
-            foreach ( $result as $withdraw ) {
-                $withdraws[] = new Withdraw( $withdraw );
-            }
-
-            $result = $withdraws;
+            $result = array_map(
+                function ( $withdraw ) {
+                    return new Withdraw( $withdraw );
+                }, $result
+            );
 
             Cache::set( $cache_key, $result, $cache_group );
         }
diff --git a/includes/Withdraw/Withdraw.php b/includes/Withdraw/Withdraw.php
index 806a79b09b..87652dc188 100644
--- a/includes/Withdraw/Withdraw.php
+++ b/includes/Withdraw/Withdraw.php
@@ -25,7 +25,7 @@ public function __construct( $data = [] ) {
             'id'          => 0,
             'user_id'     => 0,
             'amount'      => 0,
-            'date'        => current_time( 'mysql' ),
+            'date'        => dokan_current_datetime(),
             'status'      => dokan()->withdraw->get_status_code( 'pending' ),
             'method'      => 'paypal',
             'note'        => '',
@@ -387,7 +387,7 @@ public function calculate_charge() {
         $charge      = 0;
 
         if ( ! empty( $fixed ) ) {
-            $charge += (int) $fixed;
+            $charge += (float) $fixed;
         }
 
         if ( ! empty( $percentage ) ) {
diff --git a/templates/withdraw/approved-request-listing.php b/templates/withdraw/approved-request-listing.php
index bcf2b73bb6..3fb220fb10 100644
--- a/templates/withdraw/approved-request-listing.php
+++ b/templates/withdraw/approved-request-listing.php
@@ -28,7 +28,7 @@
             <td><?php echo esc_html( dokan_withdraw_get_method_title( $row->get_method(), $row ) ); ?> </td>
             <td><?php echo wp_kses_post( wc_price( $row->get_charge() ) ); ?></td>
             <td><?php echo wp_kses_post( wc_price( $row->get_receivable_amount() ) ); ?></td>
-            <td><?php echo esc_html( date_i18n( get_option( 'date_format' ), strtotime( $row->get_date() ) ) ); ?></td>
+            <td><?php echo esc_html( dokan_format_date( $row->get_date() ) ); ?></td>
         </tr>
     <?php } ?>
 
diff --git a/templates/withdraw/cancelled-request-listing.php b/templates/withdraw/cancelled-request-listing.php
index bd55c32b0e..3ccde62391 100644
--- a/templates/withdraw/cancelled-request-listing.php
+++ b/templates/withdraw/cancelled-request-listing.php
@@ -29,7 +29,7 @@
             <td><?php echo esc_html( dokan_withdraw_get_method_title( $row->get_method(), $row ) ); ?></td>
             <td><?php echo wp_kses_post( wc_price( $row->get_charge() ) ); ?></td>
             <td><?php echo wp_kses_post( wc_price( $row->get_receivable_amount() ) ); ?></td>
-            <td><?php echo esc_html( date_i18n( get_option( 'date_format' ), strtotime( $row->get_date() ) ) ); ?></td>
+            <td><?php echo esc_html( dokan_format_date( $row->get_date() ) ); ?></td>
             <td><?php echo wp_kses_post( $row->get_note() ); ?></td>
         </tr>
     <?php } ?>
diff --git a/tests/Withdrawal/WithdrawChargeAjaxTest.php b/tests/Withdrawal/WithdrawChargeAjaxTest.php
index 0ffae13a2a..447eb294e2 100644
--- a/tests/Withdrawal/WithdrawChargeAjaxTest.php
+++ b/tests/Withdrawal/WithdrawChargeAjaxTest.php
@@ -4,11 +4,22 @@ class WithdrawChargeAjaxTest extends WP_Ajax_UnitTestCase {
 
     public function set_up() {
         parent::set_up();
-        parent::set_up_before_class();
+
+        remove_action( 'admin_init', '_maybe_update_core' );
+        remove_action( 'admin_init', '_maybe_update_plugins' );
+        remove_action( 'admin_init', '_maybe_update_themes' );
 
         remove_action( 'admin_init', [ dokan()->core, 'block_admin_access'], 10 );
+        remove_action( 'admin_init', [ \WC_Tracks_Client::class, 'maybe_set_identity_cookie' ] );
+
+
+        add_action( 'wp_ajax_dokan_handle_get_withdraw_method_charge', [ new \WeDevs\Dokan\Withdraw\Hooks(), 'ajax_handle_get_withdraw_method_charge' ] );
     }
 
+    /**
+     *
+     * @test
+     */
     public function test_that_we_can_request_to_calculate_and_get_withdraw_charge() {
         global $_POST;
 
@@ -23,15 +34,13 @@ public function test_that_we_can_request_to_calculate_and_get_withdraw_charge()
         $_POST[ 'security' ] = wp_create_nonce( '_handle_withdraw_request' );
         $_POST[ 'action' ]   = 'dokan_handle_get_withdraw_method_charge';
 
-        try {
-            $this->_handleAjax( 'dokan_handle_get_withdraw_method_charge' );
-        } catch (\WPAjaxDieContinueException $e) {
-            // This means that the ajax request succeeded.
-        }
+
+        var_dump( 'before' );
+        $this->_handleAjax( 'dokan_handle_get_withdraw_method_charge' );
+        var_dump( 'after' );
 
         $data = json_decode( $this->_last_response, true  );
         $this->assertNotEquals( '', $this->_last_response );
-//        $this->assertTrue( $data['success'] );
-//        $this->assertEquals( 'Withdraw schedule removed successfully.', $data['data'] );
+        $this->assertTrue( $data['success'] );
     }
 }

From d66e642b6a5e0a6829349eb1d66a1ba79d3b8afa Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Tue, 19 Sep 2023 09:20:55 +0600
Subject: [PATCH 28/37] Remove get withdraw charge ajax

---
 assets/src/js/withdraw.js                   | 78 +++++++--------------
 includes/Withdraw/Hooks.php                 | 53 --------------
 templates/withdraw/request-form.php         |  1 -
 tests/Withdrawal/WithdrawChargeAjaxTest.php | 46 ------------
 4 files changed, 25 insertions(+), 153 deletions(-)
 delete mode 100644 tests/Withdrawal/WithdrawChargeAjaxTest.php

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index 0a38f50e4a..278c99d9b5 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -234,12 +234,9 @@
                 return;
             }
 
-            let withdrawMethod = $(
-                "[name='withdraw_method'][id='withdraw-method']"
-            ).val();
-            let withdrawAmount = $(
-                "[name='withdraw_amount'][id='withdraw-amount']"
-            ).val();
+            let withdrawMethod = $( "[name='withdraw_method'][id='withdraw-method']" ).val();
+            let withdrawAmount = $( "[name='withdraw_amount'][id='withdraw-amount']" ).val();
+
             withdrawAmount = accounting.unformat(
                 withdrawAmount,
                 dokan_refund.mon_decimal_point
@@ -248,66 +245,41 @@
                 "select[name='withdraw_method'][id='withdraw-method'] option:selected"
             ).data();
             let chargeAmount = 0;
-            let nonce = $( '#dokan_withdraw_charge_nonce' ).val();
 
-            $.post(
-                dokan.ajaxurl,
-                {
-                    action: 'dokan_handle_get_withdraw_method_charge',
-                    dokan_withdraw_charge_nonce: nonce,
-                    method: withdrawMethod,
-                    amount: withdrawAmount,
-                },
-                ( response ) => {
-                    let data = response.data ? response.data : {};
-                    Dokan_Withdraw.showWithdrawChargeHtml( data );
+            let chargeText = '';
+            if ( chargeFixed ) {
+                chargeText += accounting.formatMoney( chargeFixed, dokan.currency );
+                chargeAmount += chargeFixed;
+            }
+            if ( chargePercentage ) {
+                let percentageAmount = chargePercentage / 100 * withdrawAmount;
+                chargeAmount += percentageAmount;
+                chargeText += chargeText ? ' + ' : '';
+                chargeText += parseFloat( accounting.formatNumber( chargePercentage, dokan_refund.rounding_precision, '' ) )
+                    .toString()
+                    .replace('.', dokan_refund.mon_decimal_point ) + '%';
+                chargeText += ` = ${ accounting.formatMoney( chargeAmount ) }`;
+            }
 
-                    $( '#dokan-withdraw-request-submit' ).attr(
-                        'disabled',
-                        ! response.success
-                    );
-                }
-            );
+          Dokan_Withdraw.showWithdrawChargeHtml( chargeText, chargeAmount, withdrawAmount );
         },
 
-        showWithdrawChargeHtml( chargeData ) {
-            let chargeSection = $( '#dokan-withdraw-charge-section' );
-            let revivableSection = $( '#dokan-withdraw-revivable-section' );
+        showWithdrawChargeHtml(chargeText, chargeAmount, withdrawAmount) {
+            let chargeSection    = $('#dokan-withdraw-charge-section');
+            let revivableSection = $('#dokan-withdraw-revivable-section');
 
-            if ( ! chargeData.plain || ! chargeData.plain.charge ) {
+            if (!withdrawAmount) {
                 chargeSection.hide();
                 revivableSection.hide();
-
                 return;
             }
 
-            let chargeText = '';
-
-            if (
-                chargeData.plain.charge_data &&
-                chargeData.plain.charge_data.fixed
-            ) {
-                chargeText += `${ chargeData.html.charge_data.fixed }`;
-            }
-
-            if (
-                chargeData.plain.charge_data &&
-                chargeData.plain.charge_data.percentage
-            ) {
-                chargeText += chargeText ? ' + ' : '';
-                chargeText += `${ chargeData.html.charge_data.percentage }`;
-                chargeText += ` = ${ chargeData.html.charge }`;
-            }
-
-            $( '#dokan-withdraw-charge-section-text' ).html( chargeText );
-
-            $( '#dokan-withdraw-revivable-section-text' ).html(
-                chargeData.plain.receivable ? chargeData.html.receivable : ''
-            );
+            $('#dokan-withdraw-charge-section-text').html(chargeText);
+            $('#dokan-withdraw-revivable-section-text').html(accounting.formatMoney(withdrawAmount - chargeAmount));
 
             chargeSection.show();
             revivableSection.show();
-        },
+        }
     };
 
     $(document).ready(function() {
diff --git a/includes/Withdraw/Hooks.php b/includes/Withdraw/Hooks.php
index 21ec777648..3aa36877d6 100644
--- a/includes/Withdraw/Hooks.php
+++ b/includes/Withdraw/Hooks.php
@@ -24,7 +24,6 @@ public function __construct() {
         if ( wp_doing_ajax() ) {
             add_action( 'wp_ajax_dokan_handle_withdraw_request', [ $this, 'ajax_handle_withdraw_request' ] );
             add_action( 'wp_ajax_dokan_withdraw_handle_make_default_method', [ $this, 'ajax_handle_make_default_method' ] );
-            add_action( 'wp_ajax_dokan_handle_get_withdraw_method_charge', [ $this, 'ajax_handle_get_withdraw_method_charge' ] );
         }
     }
 
@@ -215,56 +214,4 @@ public function ajax_handle_make_default_method() {
 
         wp_send_json_success( esc_html__( 'Default method update successful.', 'dokan-lite' ) );
     }
-
-    /**
-     * Get withdraw method charge.
-     *
-     * @since DOKAN_SINCE
-     *
-     * @return void
-     */
-    public function ajax_handle_get_withdraw_method_charge() {
-        if ( ! isset( $_POST['dokan_withdraw_charge_nonce'] ) || ! wp_verify_nonce( sanitize_key( wp_unslash( $_POST['dokan_withdraw_charge_nonce'] ) ), 'dokan_withdraw_charge' ) ) {
-            wp_send_json_error( esc_html__( 'Are you cheating?', 'dokan-lite' ) );
-        }
-
-        // phpcs:ignore
-        if ( ! current_user_can( 'dokan_manage_withdraw' ) ) {
-            wp_send_json_error( esc_html__( 'You have no permission to do this action', 'dokan-lite' ) );
-        }
-
-        if ( empty( $_POST['amount'] ) ) {
-            wp_send_json_error( esc_html__( 'Withdraw amount is required.', 'dokan-lite' ) );
-        }
-
-        if ( empty( sanitize_text_field( wp_unslash( $_POST['method'] ) ) ) || ! array_key_exists( sanitize_text_field( wp_unslash( $_POST['method'] ) ), dokan_withdraw_get_methods() ) ) {
-            wp_send_json_error( esc_html__( 'Withdraw method is required.', 'dokan-lite' ) );
-        }
-
-        $amount = wc_format_decimal( sanitize_text_field( wp_unslash( $_POST['amount'] ) ) );
-        $method = sanitize_text_field( wp_unslash( $_POST['method'] ) );
-
-        $withdraw = new Withdraw();
-        $withdraw->set_method( $method )
-                ->set_amount( $amount )
-                ->calculate_charge();
-
-        $response = [
-            'plain' => [
-                'charge'      => $withdraw->get_charge(),
-                'receivable'  => $withdraw->get_receivable_amount(),
-                'charge_data' => $withdraw->get_charge_data(),
-            ],
-            'html'  => [
-                'charge'      => wc_price( $withdraw->get_charge() ),
-                'receivable'  => wc_price( $withdraw->get_receivable_amount() ),
-                'charge_data' => [
-                    'fixed'      => wc_price( $withdraw->get_charge_data()['fixed'] ),
-                    'percentage' => $withdraw->get_charge_data()['percentage'] . '%',
-                ],
-            ],
-        ];
-
-        wp_send_json_success( $response );
-    }
 }
diff --git a/templates/withdraw/request-form.php b/templates/withdraw/request-form.php
index ca19c464f4..ff45e9aa37 100644
--- a/templates/withdraw/request-form.php
+++ b/templates/withdraw/request-form.php
@@ -50,7 +50,6 @@
         <div class="dokan-form-group" id="dokan-withdraw-charge-section" style="display: none">
             <label for="withdraw-method" class="dokan-w4 dokan-control-label">
                 <?php esc_html_e( 'Withdraw Charge', 'dokan-lite' ); ?>
-                <?php echo wp_nonce_field( 'dokan_withdraw_charge', 'dokan_withdraw_charge_nonce' ); ?>
             </label>
             <div class="dokan-w5 dokan-text-left">
                 <span  id="dokan-withdraw-charge-section-text"></span>
diff --git a/tests/Withdrawal/WithdrawChargeAjaxTest.php b/tests/Withdrawal/WithdrawChargeAjaxTest.php
deleted file mode 100644
index 447eb294e2..0000000000
--- a/tests/Withdrawal/WithdrawChargeAjaxTest.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-class WithdrawChargeAjaxTest extends WP_Ajax_UnitTestCase {
-
-    public function set_up() {
-        parent::set_up();
-
-        remove_action( 'admin_init', '_maybe_update_core' );
-        remove_action( 'admin_init', '_maybe_update_plugins' );
-        remove_action( 'admin_init', '_maybe_update_themes' );
-
-        remove_action( 'admin_init', [ dokan()->core, 'block_admin_access'], 10 );
-        remove_action( 'admin_init', [ \WC_Tracks_Client::class, 'maybe_set_identity_cookie' ] );
-
-
-        add_action( 'wp_ajax_dokan_handle_get_withdraw_method_charge', [ new \WeDevs\Dokan\Withdraw\Hooks(), 'ajax_handle_get_withdraw_method_charge' ] );
-    }
-
-    /**
-     *
-     * @test
-     */
-    public function test_that_we_can_request_to_calculate_and_get_withdraw_charge() {
-        global $_POST;
-
-        $user = $this->factory()->user->create(
-            [
-                'role' => 'seller',
-            ]
-        );
-
-        wp_set_current_user( $user );
-
-        $_POST[ 'security' ] = wp_create_nonce( '_handle_withdraw_request' );
-        $_POST[ 'action' ]   = 'dokan_handle_get_withdraw_method_charge';
-
-
-        var_dump( 'before' );
-        $this->_handleAjax( 'dokan_handle_get_withdraw_method_charge' );
-        var_dump( 'after' );
-
-        $data = json_decode( $this->_last_response, true  );
-        $this->assertNotEquals( '', $this->_last_response );
-        $this->assertTrue( $data['success'] );
-    }
-}

From 9225ec16bf27f3e57d2d4206e13439ba05f04f25 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 20 Nov 2023 10:59:22 +0600
Subject: [PATCH 29/37] Fix: date when withdraw charge create.

---
 includes/REST/WithdrawController.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/REST/WithdrawController.php b/includes/REST/WithdrawController.php
index c21a2efc6e..169671a9e9 100644
--- a/includes/REST/WithdrawController.php
+++ b/includes/REST/WithdrawController.php
@@ -476,7 +476,7 @@ public function create_item( $request ) {
             $withdraw
                 ->set_user_id( $user_id )
                 ->set_amount( $request['amount'] )
-                ->set_date( dokan_current_datetime() )
+                ->set_date( dokan_current_datetime()->format( 'Y-m-d H:i:s' ) )
                 ->set_status( dokan()->withdraw->get_status_code( 'pending' ) )
                 ->set_method( $request['method'] )
                 ->set_ip( dokan_get_client_ip() )

From 602176d2bb76be3a30ae0ebcf247524773f9ca0d Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 20 Nov 2023 14:45:04 +0600
Subject: [PATCH 30/37] Fix: date when withdraw charge create.

---
 includes/Withdraw/Hooks.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/Withdraw/Hooks.php b/includes/Withdraw/Hooks.php
index 4c8895b861..23acb51a9c 100644
--- a/includes/Withdraw/Hooks.php
+++ b/includes/Withdraw/Hooks.php
@@ -189,7 +189,7 @@ public function ajax_handle_withdraw_request() {
         $withdraw
             ->set_user_id( $user_id )
             ->set_amount( $amount )
-            ->set_date( dokan_current_datetime() )
+            ->set_date( dokan_current_datetime()->format( 'Y-m-d H:i:s' ) )
             ->set_status( dokan()->withdraw->get_status_code( 'pending' ) )
             ->set_method( $method )
             ->set_ip( dokan_get_client_ip() )

From 52235e1230060f80fa4763d503d168154d868f19 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 20 Nov 2023 16:40:14 +0600
Subject: [PATCH 31/37] Fix withdraw create date, fix get withdraw request
 responses, charge amount when there is no charge

---
 assets/src/js/withdraw.js                      |  6 +++++-
 includes/Withdraw/Manager.php                  |  4 ++--
 includes/Withdraw/Withdraw.php                 | 11 +++++++++++
 templates/withdraw/pending-request-listing.php | 14 ++++++++------
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index 278c99d9b5..9d5cdff6db 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -245,8 +245,8 @@
                 "select[name='withdraw_method'][id='withdraw-method'] option:selected"
             ).data();
             let chargeAmount = 0;
-
             let chargeText = '';
+
             if ( chargeFixed ) {
                 chargeText += accounting.formatMoney( chargeFixed, dokan.currency );
                 chargeAmount += chargeFixed;
@@ -261,6 +261,10 @@
                 chargeText += ` = ${ accounting.formatMoney( chargeAmount ) }`;
             }
 
+            if ( ! chargeText ) {
+              chargeText = accounting.formatMoney( chargeAmount, dokan.currency );
+            }
+
           Dokan_Withdraw.showWithdrawChargeHtml( chargeText, chargeAmount, withdrawAmount );
         },
 
diff --git a/includes/Withdraw/Manager.php b/includes/Withdraw/Manager.php
index 79c60df9f5..0d87f8cc14 100644
--- a/includes/Withdraw/Manager.php
+++ b/includes/Withdraw/Manager.php
@@ -243,9 +243,9 @@ public function has_pending_request( $user_id ) {
      * @param integer $limit
      * @param integer $offset
      *
-     * @return array
+     * @return Withdraw[]
      */
-    public function get_withdraw_requests( $user_id = '', $status = 0, $limit = 10, $offset = 0 ) {
+    public function get_withdraw_requests( $user_id = '', $status = 0, $limit = 10, $offset = 0 ): array {
         // get all function arguments as key => value pairs
         $args = get_defined_vars();
 
diff --git a/includes/Withdraw/Withdraw.php b/includes/Withdraw/Withdraw.php
index ed7edc86eb..4129c8a7b5 100644
--- a/includes/Withdraw/Withdraw.php
+++ b/includes/Withdraw/Withdraw.php
@@ -400,6 +400,17 @@ public function calculate_charge() {
         return $this;
     }
 
+    /**
+     * Returns withdraw data.
+     *
+     * @since DOKAN_SINCE
+     *
+     * @return array
+     */
+    public function get_data(): array {
+        return $this->data;
+    }
+
     /**
      * Create or update a withdraw
      *
diff --git a/templates/withdraw/pending-request-listing.php b/templates/withdraw/pending-request-listing.php
index 95776495cf..c76d472d57 100644
--- a/templates/withdraw/pending-request-listing.php
+++ b/templates/withdraw/pending-request-listing.php
@@ -4,6 +4,8 @@
  *
  * @since   2.4
  *
+ * @var $withdraw_requests WeDevs\Dokan\Withdraw\Withdraw[]
+ *
  * @package dokan
  */
 
@@ -21,15 +23,15 @@
         <?php foreach ( $withdraw_requests as $request ) : ?>
 
             <tr>
-                <td><?php echo wp_kses_post( wc_price( $request->amount ) ); ?></td>
-                <td><?php echo esc_html( dokan_withdraw_get_method_title( $request->method, $request ) ); ?></td>
-                <td><?php echo esc_html( dokan_format_datetime( $request->date ) ); ?></td>
+                <td><?php echo wp_kses_post( wc_price( $request->get_amount() ) ); ?></td>
+                <td><?php echo esc_html( dokan_withdraw_get_method_title( $request->get_method(), $request->get_data() ) ); ?></td>
+                <td><?php echo esc_html( dokan_format_datetime( $request->get_date() ) ); ?></td>
                 <td>
                     <?php
                     $url = add_query_arg(
                         [
 							'dokan_handle_withdraw_request' => 'cancel',
-							'id'                            => $request->id,
+							'id'                            => $request->get_id(),
 						], dokan_get_navigation_url( 'withdraw-requests' )
                     );
                     ?>
@@ -39,9 +41,9 @@
                 </td>
                 <td>
                     <?php
-                    if ( $request->status === 0 ) {
+                    if ( $request->get_status() === 0 ) {
                         echo '<span class="label label-danger">' . esc_html__( 'Pending Review', 'dokan-lite' ) . '</span>';
-                    } elseif ( $request->status === 1 ) {
+                    } elseif ( $request->get_status() === 1 ) {
                         echo '<span class="label label-warning">' . esc_html__( 'Accepted', 'dokan-lite' ) . '</span>';
                     }
                     ?>

From 2a125d11256efebdd60239d39e018fb0f3a9ca33 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 27 Nov 2023 12:27:09 +0600
Subject: [PATCH 32/37] Fix: empty id returning when create withdraw by api.

---
 includes/REST/WithdrawController.php | 2 +-
 includes/Withdraw/Withdraw.php       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/includes/REST/WithdrawController.php b/includes/REST/WithdrawController.php
index 169671a9e9..4eaaf568ec 100644
--- a/includes/REST/WithdrawController.php
+++ b/includes/REST/WithdrawController.php
@@ -488,7 +488,7 @@ public function create_item( $request ) {
                 throw new DokanException( $result->get_error_code(), $result->get_error_message(), 400 );
             }
 
-            $response = $this->prepare_item_for_response( $withdraw, $request );
+            $response = $this->prepare_item_for_response( $result, $request );
             $response = rest_ensure_response( $response );
 
             $response->set_status( 201 );
diff --git a/includes/Withdraw/Withdraw.php b/includes/Withdraw/Withdraw.php
index 4129c8a7b5..813144018a 100644
--- a/includes/Withdraw/Withdraw.php
+++ b/includes/Withdraw/Withdraw.php
@@ -80,7 +80,7 @@ public function get_withdraw() {
      * @return int
      */
     public function get_id() {
-        return $this->data['id'];
+        return $this->data['id'] ?? 0;
     }
 
     /**

From f9acbd5e0b1a5c43b8b5f944d95b53a43185cf9b Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Wed, 6 Dec 2023 12:43:20 +0600
Subject: [PATCH 33/37] Fix: format money of withdraw charge.

---
 assets/src/js/withdraw.js | 24 +++++++++++++++++-------
 includes/Assets.php       | 36 +++++++++++++++++++++---------------
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/assets/src/js/withdraw.js b/assets/src/js/withdraw.js
index 9d5cdff6db..f7ddf676f9 100644
--- a/assets/src/js/withdraw.js
+++ b/assets/src/js/withdraw.js
@@ -239,7 +239,7 @@
 
             withdrawAmount = accounting.unformat(
                 withdrawAmount,
-                dokan_refund.mon_decimal_point
+                dokan.mon_decimal_point
             );
             let { chargePercentage, chargeFixed } = $(
                 "select[name='withdraw_method'][id='withdraw-method'] option:selected"
@@ -248,26 +248,36 @@
             let chargeText = '';
 
             if ( chargeFixed ) {
-                chargeText += accounting.formatMoney( chargeFixed, dokan.currency );
+                chargeText += Dokan_Withdraw.formatMoney( chargeFixed );
                 chargeAmount += chargeFixed;
             }
             if ( chargePercentage ) {
                 let percentageAmount = chargePercentage / 100 * withdrawAmount;
                 chargeAmount += percentageAmount;
                 chargeText += chargeText ? ' + ' : '';
-                chargeText += parseFloat( accounting.formatNumber( chargePercentage, dokan_refund.rounding_precision, '' ) )
+                chargeText += parseFloat( accounting.formatNumber( chargePercentage, dokan.rounding_precision, '' ) )
                     .toString()
-                    .replace('.', dokan_refund.mon_decimal_point ) + '%';
-                chargeText += ` = ${ accounting.formatMoney( chargeAmount ) }`;
+                    .replace('.', dokan.mon_decimal_point ) + '%';
+                chargeText += ` = ${ Dokan_Withdraw.formatMoney( chargeAmount ) }`;
             }
 
             if ( ! chargeText ) {
-              chargeText = accounting.formatMoney( chargeAmount, dokan.currency );
+              chargeText = Dokan_Withdraw.formatMoney( chargeAmount, dokan.currency );
             }
 
           Dokan_Withdraw.showWithdrawChargeHtml( chargeText, chargeAmount, withdrawAmount );
         },
 
+        formatMoney( money ) {
+            return accounting.formatMoney( money, {
+                symbol:    dokan.currency_format_symbol,
+                decimal:   dokan.currency_format_decimal_sep,
+                thousand:  dokan.currency_format_thousand_sep,
+                precision: dokan.currency_format_num_decimals,
+                format:    dokan.currency_format
+            } )
+        },
+
         showWithdrawChargeHtml(chargeText, chargeAmount, withdrawAmount) {
             let chargeSection    = $('#dokan-withdraw-charge-section');
             let revivableSection = $('#dokan-withdraw-revivable-section');
@@ -279,7 +289,7 @@
             }
 
             $('#dokan-withdraw-charge-section-text').html(chargeText);
-            $('#dokan-withdraw-revivable-section-text').html(accounting.formatMoney(withdrawAmount - chargeAmount));
+            $('#dokan-withdraw-revivable-section-text').html(Dokan_Withdraw.formatMoney(withdrawAmount - chargeAmount));
 
             chargeSection.show();
             revivableSection.show();
diff --git a/includes/Assets.php b/includes/Assets.php
index d295ae7f88..f6842b1690 100644
--- a/includes/Assets.php
+++ b/includes/Assets.php
@@ -576,24 +576,30 @@ public function enqueue_front_scripts() {
         }
 
         $default_script = [
-            'ajaxurl'                    => admin_url( 'admin-ajax.php' ),
-            'nonce'                      => wp_create_nonce( 'dokan_reviews' ),
-            'ajax_loader'                => DOKAN_PLUGIN_ASSEST . '/images/ajax-loader.gif',
-            'seller'                     => [
+            'ajaxurl'                      => admin_url( 'admin-ajax.php' ),
+            'nonce'                        => wp_create_nonce( 'dokan_reviews' ),
+            'ajax_loader'                  => DOKAN_PLUGIN_ASSEST . '/images/ajax-loader.gif',
+            'seller'                       => [
                 'available'    => __( 'Available', 'dokan-lite' ),
                 'notAvailable' => __( 'Not Available', 'dokan-lite' ),
             ],
-            'delete_confirm'             => __( 'Are you sure?', 'dokan-lite' ),
-            'wrong_message'              => __( 'Something went wrong. Please try again.', 'dokan-lite' ),
-            'vendor_percentage'          => dokan_get_seller_percentage( dokan_get_current_user_id() ),
-            'commission_type'            => dokan_get_commission_type( dokan_get_current_user_id() ),
-            'rounding_precision'         => wc_get_rounding_precision(),
-            'mon_decimal_point'          => wc_get_price_decimal_separator(),
-            'product_types'              => apply_filters( 'dokan_product_types', [ 'simple' ] ),
-            'loading_img'                => DOKAN_PLUGIN_ASSEST . '/images/loading.gif',
-            'store_product_search_nonce' => wp_create_nonce( 'dokan_store_product_search_nonce' ),
-            'i18n_download_permission'   => __( 'Are you sure you want to revoke access to this download?', 'dokan-lite' ),
-            'i18n_download_access'       => __( 'Could not grant access - the user may already have permission for this file or billing email is not set. Ensure the billing email is set, and the order has been saved.', 'dokan-lite' ),
+            'delete_confirm'               => __( 'Are you sure?', 'dokan-lite' ),
+            'wrong_message'                => __( 'Something went wrong. Please try again.', 'dokan-lite' ),
+            'vendor_percentage'            => dokan_get_seller_percentage( dokan_get_current_user_id() ),
+            'commission_type'              => dokan_get_commission_type( dokan_get_current_user_id() ),
+            'rounding_precision'           => wc_get_rounding_precision(),
+            'mon_decimal_point'            => wc_get_price_decimal_separator(),
+            'currency_format_num_decimals' => wc_get_price_decimals(),
+            'currency_format_symbol'       => get_woocommerce_currency_symbol(),
+            'currency_format_decimal_sep'  => esc_attr( wc_get_price_decimal_separator() ),
+            'currency_format_thousand_sep' => esc_attr( wc_get_price_thousand_separator() ),
+            'currency_format'              => esc_attr( str_replace( [ '%1$s', '%2$s' ], [ '%s', '%v' ], get_woocommerce_price_format() ) ), // For accounting JS
+            'round_at_subtotal'            => get_option( 'woocommerce_tax_round_at_subtotal', 'no' ),
+            'product_types'                => apply_filters( 'dokan_product_types', [ 'simple' ] ),
+            'loading_img'                  => DOKAN_PLUGIN_ASSEST . '/images/loading.gif',
+            'store_product_search_nonce'   => wp_create_nonce( 'dokan_store_product_search_nonce' ),
+            'i18n_download_permission'     => __( 'Are you sure you want to revoke access to this download?', 'dokan-lite' ),
+            'i18n_download_access'         => __( 'Could not grant access - the user may already have permission for this file or billing email is not set. Ensure the billing email is set, and the order has been saved.', 'dokan-lite' ),
             /**
              * Filter of maximun a vendor can add tags.
              *

From b27dead2622f37d2f6fde8830e64a614db808079 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:11:19 +0600
Subject: [PATCH 34/37] Fix: withdraw charge negative value

---
 src/admin/components/CombineInput.vue         | 22 ++++++++++++++-----
 .../components/Fields/WithdrawCharges.vue     | 14 ++++++++----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/admin/components/CombineInput.vue b/src/admin/components/CombineInput.vue
index fde7b09a3c..ddbf0d13ce 100644
--- a/src/admin/components/CombineInput.vue
+++ b/src/admin/components/CombineInput.vue
@@ -30,6 +30,7 @@
 
 <script>
     import { fixed } from 'lodash/fp/_falseOptions';
+    const Debounce = dokan_get_lib('debounce');
 
     export default {
         name: 'CombineInput',
@@ -53,19 +54,28 @@
             value: {
                 type: Object,
                 default: {
-                    fixed: '',
-                    percentage: ''
+                    fixed: 0,
+                    percentage: 0'
                 }
             },
         },
         data() {
             return {
-                fixed: this.value.fixed ?? '',
-                percentage: this.value.percentage ?? '',
+                fixed: this.value.fixed ?? 0,
+                percentage: this.value.percentage ?? 0,
             };
         },
+        watch: {
+            value: {
+                handler(newVal, oldVal) {
+                    this.fixed = newVal.fixed;
+                    this.percentage = newVal.percentage
+                },
+                deep: true
+            }
+        },
         methods: {
-            onInput(e) {
+            onInput: Debounce( function() {
                 let self = this,
                     data = {
                         fixed: self.fixed,
@@ -73,7 +83,7 @@
                     };
 
                 this.$emit('change', data);
-            }
+            }, 300 ),
         },
         computed:{
             getCurrencySymbol() {
diff --git a/src/admin/components/Fields/WithdrawCharges.vue b/src/admin/components/Fields/WithdrawCharges.vue
index 52ac1861d0..2563adfc9e 100644
--- a/src/admin/components/Fields/WithdrawCharges.vue
+++ b/src/admin/components/Fields/WithdrawCharges.vue
@@ -19,7 +19,7 @@
                     </div>
                     <div class="wm-charges" v-if="fieldData.chargeable_methods?.[optionKey]">
                         <combine-input
-                            :value="charges[ optionKey ] ?? {}"
+                            :value="formatValue( charges[ optionKey ] ?? defaultVal )"
                             v-on:change='data => chargeChangeHandler( data, optionKey )'
                         />
                     </div>
@@ -43,8 +43,8 @@ export default {
         return {
             charges: {},
             defaultVal: {
-                fixed: '',
-                percentage: ''
+                fixed: 0,
+                percentage: 0
             },
             showItems: {}
         };
@@ -52,6 +52,12 @@ export default {
     components: { FieldHeading, CombineInput, Switches },
     props: [ 'sectionId', 'fieldData', 'fieldValue' ],
     methods: {
+        formatValue( data ) {
+            return {
+                fixed: Math.abs( data.fixed ),
+                percentage: Math.abs( data.percentage )
+            };
+        },
         isSwitchOptionChecked( optionKey ) {
             return (
                 this.fieldValue[ this.fieldData.name ] &&
@@ -65,7 +71,7 @@ export default {
                 : '';
         },
         chargeChangeHandler( data, field ) {
-            this.fieldValue[ this.fieldData.name ][ field ] = data;
+            this.fieldValue[ this.fieldData.name ][ field ] = this.formatValue( data );
         },
         validateCombineInputData( data ) {
             if ( 'object' !== typeof data ) {

From 88623c230315f319554f067a46b0f718bb23da89 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:18:08 +0600
Subject: [PATCH 35/37] Fix: withdraw charge negative value

---
 src/admin/components/CombineInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/admin/components/CombineInput.vue b/src/admin/components/CombineInput.vue
index ddbf0d13ce..927b488a35 100644
--- a/src/admin/components/CombineInput.vue
+++ b/src/admin/components/CombineInput.vue
@@ -55,7 +55,7 @@
                 type: Object,
                 default: {
                     fixed: 0,
-                    percentage: 0'
+                    percentage: 0
                 }
             },
         },

From 7fae9f496e8f921192de4c5f8279dcbeff36c1fe Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Wed, 6 Dec 2023 15:20:19 +0600
Subject: [PATCH 36/37] Fix: withdraw charge negative value

---
 src/admin/components/CombineInput.vue           | 2 +-
 src/admin/components/Fields/WithdrawCharges.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/admin/components/CombineInput.vue b/src/admin/components/CombineInput.vue
index 927b488a35..9ad2173f24 100644
--- a/src/admin/components/CombineInput.vue
+++ b/src/admin/components/CombineInput.vue
@@ -83,7 +83,7 @@
                     };
 
                 this.$emit('change', data);
-            }, 300 ),
+            }, 500 ),
         },
         computed:{
             getCurrencySymbol() {
diff --git a/src/admin/components/Fields/WithdrawCharges.vue b/src/admin/components/Fields/WithdrawCharges.vue
index 2563adfc9e..ea54bdf19d 100644
--- a/src/admin/components/Fields/WithdrawCharges.vue
+++ b/src/admin/components/Fields/WithdrawCharges.vue
@@ -54,8 +54,8 @@ export default {
     methods: {
         formatValue( data ) {
             return {
-                fixed: Math.abs( data.fixed ),
-                percentage: Math.abs( data.percentage )
+                fixed: Math.abs( data.fixed ) ? Math.abs( data.fixed ) : 0,
+                percentage: Math.abs( data.percentage ) ? Math.abs( data.percentage ) : 0
             };
         },
         isSwitchOptionChecked( optionKey ) {

From c30316635bf318a48656c44b1a0e5ac6e82ec2f4 Mon Sep 17 00:00:00 2001
From: Aunshon <32583103+Aunshon@users.noreply.github.com>
Date: Mon, 11 Dec 2023 09:59:46 +0600
Subject: [PATCH 37/37] Fix: phpcs

---
 dokan.php                            | 2 +-
 includes/REST/WithdrawController.php | 8 ++++----
 includes/Withdraw/functions.php      | 4 ++--
 templates/withdraw/request-form.php  | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/dokan.php b/dokan.php
index d11572740b..c307c023d3 100755
--- a/dokan.php
+++ b/dokan.php
@@ -585,7 +585,7 @@ public function get_db_version_key() {
  *
  * @return WeDevs_Dokan
  */
-function dokan() {
+function dokan() { // phpcs:ignore
     return WeDevs_Dokan::init();
 }
 
diff --git a/includes/REST/WithdrawController.php b/includes/REST/WithdrawController.php
index 4eaaf568ec..36a22a2455 100644
--- a/includes/REST/WithdrawController.php
+++ b/includes/REST/WithdrawController.php
@@ -461,10 +461,10 @@ public function create_item( $request ) {
 
             $validate_request = dokan()->withdraw->is_valid_approval_request(
                 [
-					'user_id' => $user_id,
-					'amount'  => $request['amount'],
-					'method'  => $request['method'],
-				]
+			        'user_id' => $user_id,
+			        'amount'  => $request['amount'],
+			        'method'  => $request['method'],
+                    ]
             );
 
             if ( is_wp_error( $validate_request ) ) {
diff --git a/includes/Withdraw/functions.php b/includes/Withdraw/functions.php
index 12579ceee9..760f009b21 100644
--- a/includes/Withdraw/functions.php
+++ b/includes/Withdraw/functions.php
@@ -230,7 +230,7 @@ function dokan_bank_payment_required_fields() {
     // Filtering out all payment fields except dokan bank payment available fields.
     $fields = array_filter(
         $required_fields,
-        function( $key ) use ( $available ) {
+        function ( $key ) use ( $available ) {
             return in_array( $key, $available, true );
         },
         ARRAY_FILTER_USE_KEY
@@ -315,7 +315,7 @@ function dokan_bank_payment_fields_placeholders() {
             ],
             'declaration' => [
                 'label'       => __( 'I attest that I am the owner and have full authorization to this bank account', 'dokan-lite' ),
-                'placeholder' => __( '', 'dokan-lite' ),
+                'placeholder' => __( '', 'dokan-lite' ), // phpcs:ignore
             ],
             'form_caution' => [
                 'label'       => __( 'Please double-check your account information!', 'dokan-lite' ),
diff --git a/templates/withdraw/request-form.php b/templates/withdraw/request-form.php
index ff45e9aa37..7fba3f9678 100644
--- a/templates/withdraw/request-form.php
+++ b/templates/withdraw/request-form.php
@@ -75,6 +75,6 @@
     </div>
 <?php else : ?>
     <div class="dokan-alert dokan-alert-warning">
-        <strong><?php echo sprintf( '%s <a href="%s">%s</a>', esc_attr__( 'No withdraw method is available. Please update your payment method to withdraw funds.', 'dokan-lite' ), esc_url( dokan_get_navigation_url( 'settings/payment' ) ), esc_attr__( 'Payment Settings Setup', 'dokan-lite' ) ); ?></strong>
+        <strong><?php printf( '%s <a href="%s">%s</a>', esc_attr__( 'No withdraw method is available. Please update your payment method to withdraw funds.', 'dokan-lite' ), esc_url( dokan_get_navigation_url( 'settings/payment' ) ), esc_attr__( 'Payment Settings Setup', 'dokan-lite' ) ); ?></strong>
     </div>
 <?php endif; ?>