From 7f6598238e289eea477a9f2f77380c8b4c52c78e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Thu, 25 Nov 2021 14:19:04 +0100
Subject: [PATCH] create plan page refactoring

---
 public/mix-manifest.json                      |  65 +++-
 resources/js/helpers/functionHelpers.js       |  16 +
 resources/js/store/modules/app.js             |  11 +
 resources/js/views/Admin/Plans/PlanCreate.vue | 315 +++++++++---------
 .../Admin/Plans/PlanTabs/PlanSettings.vue     |  10 +-
 .../Controllers/StorePlansController.php      |   5 -
 6 files changed, 255 insertions(+), 167 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 6ebaac0c..eb1363c2 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -55,9 +55,9 @@
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=d116a63e3c59bc0a5133",
     "/chunks/pages.js": "/chunks/pages.js?id=57cb88433843d50803cc",
     "/chunks/plan.js": "/chunks/plan.js?id=483129eff79a17ac0385",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=c1ad8299871917f21f8e",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=356baaa5a3526092427f",
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=0bb61dfb1adac4b941ec",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=d05adc407c271c7ece76",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=a76effa1bd41a19581c9",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=cee121363af5d208dcf7",
     "/chunks/plans.js": "/chunks/plans.js?id=a03911a6f6001380f11b",
     "/chunks/platform.js": "/chunks/platform.js?id=dc3c6677ab43d4475b66",
@@ -427,5 +427,64 @@
     "/chunks/subscriptions.25ea8acd465eae4c377e.hot-update.js": "/chunks/subscriptions.25ea8acd465eae4c377e.hot-update.js",
     "/chunks/subscriptions.8ce5c6a4da6e1894d8ee.hot-update.js": "/chunks/subscriptions.8ce5c6a4da6e1894d8ee.hot-update.js",
     "/js/main.8d3eade3e32203b853d9.hot-update.js": "/js/main.8d3eade3e32203b853d9.hot-update.js",
-    "/chunks/subscriptions.8d3eade3e32203b853d9.hot-update.js": "/chunks/subscriptions.8d3eade3e32203b853d9.hot-update.js"
+    "/chunks/subscriptions.8d3eade3e32203b853d9.hot-update.js": "/chunks/subscriptions.8d3eade3e32203b853d9.hot-update.js",
+    "/chunks/plan-create.c8a1b6cc4bbc8012a287.hot-update.js": "/chunks/plan-create.c8a1b6cc4bbc8012a287.hot-update.js",
+    "/chunks/plan-create.e93e4ce22566d560bf4a.hot-update.js": "/chunks/plan-create.e93e4ce22566d560bf4a.hot-update.js",
+    "/chunks/plan-create.9cbbcff6554726fca9f4.hot-update.js": "/chunks/plan-create.9cbbcff6554726fca9f4.hot-update.js",
+    "/chunks/plan-create.6de9c8b3607901be20e7.hot-update.js": "/chunks/plan-create.6de9c8b3607901be20e7.hot-update.js",
+    "/chunks/plan-create.42ca2e7ff725262d256b.hot-update.js": "/chunks/plan-create.42ca2e7ff725262d256b.hot-update.js",
+    "/chunks/plan-create.e65915f676d55dd55942.hot-update.js": "/chunks/plan-create.e65915f676d55dd55942.hot-update.js",
+    "/chunks/plan-create.b264ee984ce759295056.hot-update.js": "/chunks/plan-create.b264ee984ce759295056.hot-update.js",
+    "/chunks/plan-create.ebb143110a73b215d106.hot-update.js": "/chunks/plan-create.ebb143110a73b215d106.hot-update.js",
+    "/chunks/plan-create.43c5c333f453f16ab943.hot-update.js": "/chunks/plan-create.43c5c333f453f16ab943.hot-update.js",
+    "/chunks/plan-create.332eda01d463b92a7e21.hot-update.js": "/chunks/plan-create.332eda01d463b92a7e21.hot-update.js",
+    "/chunks/plan-create.78f142c79c4425fd6ead.hot-update.js": "/chunks/plan-create.78f142c79c4425fd6ead.hot-update.js",
+    "/chunks/plan-create.5152585867444d6763ae.hot-update.js": "/chunks/plan-create.5152585867444d6763ae.hot-update.js",
+    "/chunks/plan-create.9ec8dc96a51cd86ed6cb.hot-update.js": "/chunks/plan-create.9ec8dc96a51cd86ed6cb.hot-update.js",
+    "/chunks/plan-create.1595f4e2bfdd03e8f2b9.hot-update.js": "/chunks/plan-create.1595f4e2bfdd03e8f2b9.hot-update.js",
+    "/chunks/plan-create.46cf4b10fa48605a8d4b.hot-update.js": "/chunks/plan-create.46cf4b10fa48605a8d4b.hot-update.js",
+    "/chunks/plan-create.b7dd4fd87decc82d8810.hot-update.js": "/chunks/plan-create.b7dd4fd87decc82d8810.hot-update.js",
+    "/chunks/plan-create.acd7df2a7fb570d72409.hot-update.js": "/chunks/plan-create.acd7df2a7fb570d72409.hot-update.js",
+    "/chunks/plan-create.7c76268dc96c929e8c9b.hot-update.js": "/chunks/plan-create.7c76268dc96c929e8c9b.hot-update.js",
+    "/chunks/plan-create.7f0bfa511465f11f3c34.hot-update.js": "/chunks/plan-create.7f0bfa511465f11f3c34.hot-update.js",
+    "/chunks/plan-create.fc29f9dd795f4f2c3454.hot-update.js": "/chunks/plan-create.fc29f9dd795f4f2c3454.hot-update.js",
+    "/chunks/plan-create.be3862f379a5f291e8c6.hot-update.js": "/chunks/plan-create.be3862f379a5f291e8c6.hot-update.js",
+    "/chunks/plan-create.15319506d3a164f99431.hot-update.js": "/chunks/plan-create.15319506d3a164f99431.hot-update.js",
+    "/chunks/plan-create.55a984e0f8b5e8406b17.hot-update.js": "/chunks/plan-create.55a984e0f8b5e8406b17.hot-update.js",
+    "/chunks/plan-create.33b9f58415e7404cb14e.hot-update.js": "/chunks/plan-create.33b9f58415e7404cb14e.hot-update.js",
+    "/chunks/plan-create.a8436772c7c8ac9beecf.hot-update.js": "/chunks/plan-create.a8436772c7c8ac9beecf.hot-update.js",
+    "/chunks/plan-create.d88765a4950d9898f6d9.hot-update.js": "/chunks/plan-create.d88765a4950d9898f6d9.hot-update.js",
+    "/chunks/plan-create.40dbebe5dc91eae5f7af.hot-update.js": "/chunks/plan-create.40dbebe5dc91eae5f7af.hot-update.js",
+    "/chunks/plan-create.3dd88ec3459677ea073e.hot-update.js": "/chunks/plan-create.3dd88ec3459677ea073e.hot-update.js",
+    "/chunks/plan-create.362d54160e5daba25a0f.hot-update.js": "/chunks/plan-create.362d54160e5daba25a0f.hot-update.js",
+    "/chunks/plan-create.897ac9ace89e32b28056.hot-update.js": "/chunks/plan-create.897ac9ace89e32b28056.hot-update.js",
+    "/chunks/plan-create.ae20f9f134d0ab9e71b2.hot-update.js": "/chunks/plan-create.ae20f9f134d0ab9e71b2.hot-update.js",
+    "/chunks/plan-create.53221c657462a224f085.hot-update.js": "/chunks/plan-create.53221c657462a224f085.hot-update.js",
+    "/chunks/plan-create.66a187d979dd712001e8.hot-update.js": "/chunks/plan-create.66a187d979dd712001e8.hot-update.js",
+    "/chunks/plan-create.fee89e531a840d2fc7ce.hot-update.js": "/chunks/plan-create.fee89e531a840d2fc7ce.hot-update.js",
+    "/js/main.41b1f1edb0b6a60b2b4b.hot-update.js": "/js/main.41b1f1edb0b6a60b2b4b.hot-update.js",
+    "/chunks/plan-create.6ecb5b31b8320042225d.hot-update.js": "/chunks/plan-create.6ecb5b31b8320042225d.hot-update.js",
+    "/chunks/plan-create.10175274588db9492215.hot-update.js": "/chunks/plan-create.10175274588db9492215.hot-update.js",
+    "/chunks/plan-create.0ba1efc4954d64d82927.hot-update.js": "/chunks/plan-create.0ba1efc4954d64d82927.hot-update.js",
+    "/chunks/plan-create.ee7c846ba10512495042.hot-update.js": "/chunks/plan-create.ee7c846ba10512495042.hot-update.js",
+    "/chunks/plan-create.464dec7d2b1a20e48088.hot-update.js": "/chunks/plan-create.464dec7d2b1a20e48088.hot-update.js",
+    "/chunks/plan-create.f6aea5862e8f553966a6.hot-update.js": "/chunks/plan-create.f6aea5862e8f553966a6.hot-update.js",
+    "/chunks/plan-create.85971684acc1d8711c33.hot-update.js": "/chunks/plan-create.85971684acc1d8711c33.hot-update.js",
+    "/chunks/plan-create.76a73fed548eed336d05.hot-update.js": "/chunks/plan-create.76a73fed548eed336d05.hot-update.js",
+    "/chunks/plan-create.d4cbd302ac338d5e442f.hot-update.js": "/chunks/plan-create.d4cbd302ac338d5e442f.hot-update.js",
+    "/chunks/plan-create.76276d97bc81b9a20e3b.hot-update.js": "/chunks/plan-create.76276d97bc81b9a20e3b.hot-update.js",
+    "/chunks/plan-create.e6cccdfcb666fb9adbb5.hot-update.js": "/chunks/plan-create.e6cccdfcb666fb9adbb5.hot-update.js",
+    "/js/main.6b2170fcadb2927f399d.hot-update.js": "/js/main.6b2170fcadb2927f399d.hot-update.js",
+    "/js/main.e7e84aa4aa6d213c861e.hot-update.js": "/js/main.e7e84aa4aa6d213c861e.hot-update.js",
+    "/chunks/plan-settings.8198dff8e2b753b56fc9.hot-update.js": "/chunks/plan-settings.8198dff8e2b753b56fc9.hot-update.js",
+    "/js/main.739ab5364a95dc1828c0.hot-update.js": "/js/main.739ab5364a95dc1828c0.hot-update.js",
+    "/js/main.1dbf463022c37e8abbb1.hot-update.js": "/js/main.1dbf463022c37e8abbb1.hot-update.js",
+    "/chunks/plan-settings.6e731202f78b0ff2fc43.hot-update.js": "/chunks/plan-settings.6e731202f78b0ff2fc43.hot-update.js",
+    "/chunks/plan-settings.054bc973fbddae38ae65.hot-update.js": "/chunks/plan-settings.054bc973fbddae38ae65.hot-update.js",
+    "/chunks/plan-settings.694f37c5569dff000d0e.hot-update.js": "/chunks/plan-settings.694f37c5569dff000d0e.hot-update.js",
+    "/chunks/plan-settings.f1c56ae4bfeda0475c1c.hot-update.js": "/chunks/plan-settings.f1c56ae4bfeda0475c1c.hot-update.js",
+    "/js/main.bd857d3176a2a454e300.hot-update.js": "/js/main.bd857d3176a2a454e300.hot-update.js",
+    "/chunks/plan-settings.df3f955f56f5a1b309c3.hot-update.js": "/chunks/plan-settings.df3f955f56f5a1b309c3.hot-update.js",
+    "/chunks/plan-settings.f60d9630351de71c009e.hot-update.js": "/chunks/plan-settings.f60d9630351de71c009e.hot-update.js",
+    "/chunks/plan-settings.08cf008f99dc2668eefa.hot-update.js": "/chunks/plan-settings.08cf008f99dc2668eefa.hot-update.js"
 }
diff --git a/resources/js/helpers/functionHelpers.js b/resources/js/helpers/functionHelpers.js
index 19ebfccf..1561b77c 100644
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -20,6 +20,22 @@ const FunctionHelpers = {
                 })
         }, 150)
 
+        Vue.prototype.$updateInput = debounce(function (route, name, value, allowEmpty = false) {
+
+            if ((value === '' || value === ' ' || typeof value === 'object') && !allowEmpty) return
+
+            axios.post(this.$store.getters.api + route, {
+                    [name]: value,
+                    _method: 'patch'
+                })
+                .catch(() => {
+                    events.$emit('alert:open', {
+                        title: this.$t('popup_error.title'),
+                        message: this.$t('popup_error.message'),
+                    })
+                })
+        }, 150)
+
         Vue.prototype.$updateImage = function (route, name, image) {
 
             // Create form
diff --git a/resources/js/store/modules/app.js b/resources/js/store/modules/app.js
index 098e8b04..33e61f58 100644
--- a/resources/js/store/modules/app.js
+++ b/resources/js/store/modules/app.js
@@ -302,6 +302,16 @@ const defaultState = {
             value: 168,
         },
     ],
+    intervalList: [
+        {
+            label: 'Monthly',
+            value: 'month',
+        },
+        {
+            label: 'Annually',
+            value: 'year',
+        },
+    ],
     currencyList: [
         {
             label: 'USD - United States Dollar',
@@ -1063,6 +1073,7 @@ const getters = {
     expirationList: state => state.expirationList,
     requestedPlan: state => state.requestedPlan,
     currencyList: state => state.currencyList,
+    intervalList: state => state.intervalList,
     countries: state => state.countries,
     timezones: state => state.timezones,
     api: state => state.config.api,
diff --git a/resources/js/views/Admin/Plans/PlanCreate.vue b/resources/js/views/Admin/Plans/PlanCreate.vue
index 891e5ed2..5cff9f9d 100644
--- a/resources/js/views/Admin/Plans/PlanCreate.vue
+++ b/resources/js/views/Admin/Plans/PlanCreate.vue
@@ -1,180 +1,187 @@
 <template>
-    <div id="single-page">
-        <div id="page-content" class="small-width">
-            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
-            <PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
+	<ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form">
 
-            <div class="content-page">
-                <ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
+		<div class="card shadow-card">
+			<FormLabel>
+				{{ $t('Details') }}
+			</FormLabel>
 
-                    <div class="form-group">
-                        <FormLabel>
-                            {{ $t('admin_page_plans.form.title_details') }}
-                        </FormLabel>
+			<!--Name-->
+			<ValidationProvider tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
+				<AppInputText :title="$t('admin_page_plans.form.name')">
+					<input v-model="plan.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+				</AppInputText>
+			</ValidationProvider>
 
-                        <!--Name-->
-                        <div class="block-wrapper">
-                            <label>{{ $t('admin_page_plans.form.name') }}:</label>
-                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
-                                <input v-model="plan.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
-                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                            </ValidationProvider>
-                        </div>
+			<!--Description-->
+			<ValidationProvider tag="div" mode="passive" name="Description" v-slot="{ errors }">
+				<AppInputText :title="$t('admin_page_plans.form.description')" :is-last="true">
+					<textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"></textarea>
+				</AppInputText>
+			</ValidationProvider>
+		</div>
 
-                        <!--Description-->
-                        <div class="block-wrapper">
-                            <label>{{ $t('admin_page_plans.form.description') }}:</label>
-                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description" v-slot="{ errors }">
-                                <textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
-                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                            </ValidationProvider>
-                        </div>
+		<div class="card shadow-card">
+			<FormLabel>
+				{{ $t('Pricing') }}
+			</FormLabel>
 
-                        <FormLabel>
-                            {{ $t('admin_page_plans.form.title_pricing') }}
-                        </FormLabel>
+			<div class="flex space-x-4">
+				<!--Price-->
+				<ValidationProvider tag="div" mode="passive" name="Price" rules="required" v-slot="{ errors }" class="w-full">
+					<AppInputText :title="$t('admin_page_plans.form.price')" class="w-full">
+						<input v-model="plan.amount" :placeholder="$t('admin_page_plans.form.price_plac')" type="number" step="0.01" min="1" max="999999999999" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+					</AppInputText>
+				</ValidationProvider>
 
+				<!--Currency-->
+				<ValidationProvider tag="div" mode="passive" name="Currency" rules="required" v-slot="{ errors }" class="w-full">
+					<AppInputText :title="$t('Currency')" class="w-full">
+						<SelectInput v-model="plan.currency" :options="currencyList" :placeholder="$t('Select plan currency')" :isError="errors[0]" />
+					</AppInputText>
+				</ValidationProvider>
+			</div>
 
-                        <!--Price-->
-                        <div class="block-wrapper">
-                            <label>{{ $t('admin_page_plans.form.price') }}:</label>
-                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Plan price" rules="required" v-slot="{ errors }">
-                                <input v-model="plan.price" :placeholder="$t('admin_page_plans.form.price_plac')" type="number" step="0.01" min="1" max="999999999999"
-                                       :class="{'is-error': errors[0]}" class="focus-border-theme"/>
-                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                            </ValidationProvider>
-                        </div>
+			<!--Interval-->
+			<ValidationProvider tag="div" mode="passive" name="Interval" rules="required" v-slot="{ errors }">
+				<AppInputText :title="$t('Interval')" :is-last="true">
+					<SelectInput v-model="plan.interval" :options="intervalList" :placeholder="$t('Select billing interval')" :isError="errors[0]" />
+				</AppInputText>
+			</ValidationProvider>
+		</div>
 
-                        <!--Storage Capacity-->
-                        <div class="block-wrapper">
-                            <label>{{ $t('admin_page_plans.form.storage') }}:</label>
-                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage capacity" rules="required" v-slot="{ errors }">
-                                <input v-model="plan.capacity" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999"
-                                       :class="{'is-error': errors[0]}" class="focus-border-theme"/>
-                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                            </ValidationProvider>
-                            <small class="input-help">
-                                {{ $t('admin_page_plans.form.storage_helper') }}
-                            </small>
-                        </div>
-                    </div>
+		<div class="card shadow-card">
+			<FormLabel>
+				{{ $t('Features') }}
+			</FormLabel>
 
-                    <div class="form-group" v-if="isError">
-                        <InfoBox type="error" style="margin-top: 40px">
-                            <p>{{ errorMessage }}</p>
-                        </InfoBox>
-                    </div>
+			<!--Storage Capacity-->
+			<ValidationProvider tag="div" mode="passive" name="Max Storage Capacity" rules="required" v-slot="{ errors }">
+				<AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')">
+					<input v-model="plan.features.max_storage_amount" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+				</AppInputText>
+			</ValidationProvider>
 
-                    <div class="form-group">
-                        <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
-                            {{ $t('admin_page_plans.create_plan_button') }}
-                        </ButtonBase>
-                    </div>
-                </ValidationObserver>
-            </div>
-        </div>
-    </div>
+			<!--Team Members-->
+			<ValidationProvider tag="div" mode="passive" name="Max Team Members" rules="required" v-slot="{ errors }">
+				<AppInputText :title="$t('Team Members')" :description="$t('To set unlimited team members, type -1 into form')" :is-last="true">
+					<input v-model="plan.features.max_team_members" :placeholder="$t('Add max team members in number')" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+				</AppInputText>
+			</ValidationProvider>
+		</div>
+
+		<InfoBox v-if="isError" type="error" style="margin-top: 40px">
+			<p>{{ errorMessage }}</p>
+		</InfoBox>
+
+		<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
+			{{ $t('admin_page_plans.create_plan_button') }}
+		</ButtonBase>
+	</ValidationObserver>
 </template>
 
 <script>
-    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
-    import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
-    import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
-    import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
-    import SectionTitle from '/resources/js/components/Others/SectionTitle'
-    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-    import PageHeader from '/resources/js/components/Others/PageHeader'
-    import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-    import {required} from 'vee-validate/dist/rules'
-    import {mapGetters} from 'vuex'
-    import {events} from '/resources/js/bus'
-    import axios from 'axios'
+	import AppInputText from "../../../components/Admin/AppInputText";
+	import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+	import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
+	import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
+	import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
+	import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
+	import SectionTitle from '/resources/js/components/Others/SectionTitle'
+	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+	import PageHeader from '/resources/js/components/Others/PageHeader'
+	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+	import {required} from 'vee-validate/dist/rules'
+	import {mapGetters} from 'vuex'
+	import {events} from '/resources/js/bus'
+	import axios from 'axios'
 
-    export default {
-        name: 'PlanCreate',
-        components: {
-            ValidationProvider,
-            ValidationObserver,
-            SectionTitle,
-            MobileHeader,
-            SelectInput,
-            ButtonBase,
-            ImageInput,
-            PageHeader,
-            FormLabel,
-            required,
-            InfoBox,
-        },
-        data() {
-            return {
-                isLoading: false,
-                errorMessage: '',
-                isError: false,
-                plan: {
-                    name: '',
-                    price: '',
-                    capacity: '',
-                    description: '',
-                },
-            }
-        },
-        methods: {
-            async createPlan() {
+	export default {
+		name: 'PlanCreate',
+		components: {
+			ValidationProvider,
+			ValidationObserver,
+			SectionTitle,
+			AppInputText,
+			MobileHeader,
+			SelectInput,
+			ButtonBase,
+			ImageInput,
+			PageHeader,
+			FormLabel,
+			required,
+			InfoBox,
+		},
+		computed: {
+			...mapGetters([
+				'currencyList',
+				'intervalList',
+			])
+		},
+		data() {
+			return {
+				errorMessage: undefined,
+				isLoading: false,
+				isError: false,
+				plan: {
+					name: undefined,
+					description: undefined,
+					interval: undefined,
+					amount: undefined,
+					currency: undefined,
+					features: {
+						max_storage_amount: undefined,
+						max_team_members: undefined,
+					},
+				}
+			}
+		},
+		methods: {
+			async createPlan() {
 
-                // Validate fields
-                const isValid = await this.$refs.createPlan.validate();
+				// Validate fields
+				const isValid = await this.$refs.createPlan.validate();
 
-                if (!isValid) return;
+				if (!isValid) return;
 
-                // Start loading
-                this.isLoading = true
+				// Start loading
+				this.isLoading = true
 
-                // Send request to get user token
-                axios
-                    .post('/api/admin/plans', {
-                        attributes: this.plan
-                    })
-                    .then(response => {
+				axios
+					.post('/api/subscriptions/plans', this.plan)
+					.then(response => {
 
-                        // Show toaster
-                        events.$emit('toaster', {
-                            type: 'success',
-                            message: this.$t('toaster.plan_created'),
-                        })
+						// Show toaster
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('toaster.plan_created'),
+						})
 
-                        // Go to User page
-                        this.$router.push({name: 'PlanSettings', params: {id: response.data.data.id}})
-                    })
-                    .catch(error => {
+						// Go to User page
+						this.$router.push({name: 'PlanSettings', params: {id: response.data.data.id}})
+					})
+					.catch(error => {
 
-                        // Validation errors
-                        if (error.response.status == 422) {
+						// Validation errors
+						if (error.response.status === 422) {
 
-                            if (error.response.data.errors['max_storage_amount']) {
-                                this.$refs.createPlan.setErrors({
-                                    'storage capacity': this.$t('errors.capacity_digit')
-                                });
-                            }
-                        }
+							if (error.response.data.errors['max_storage_amount']) {
+								this.$refs.createPlan.setErrors({
+									'Max Storage Capacity': this.$t('errors.capacity_digit')
+								});
+							}
+						}
 
-                        if (error.response.status == 500) {
-                            this.isError = true
-                            this.errorMessage = error.response.data.message
-                        }
+						if (error.response.status === 500) {
+							this.isError = true
+							this.errorMessage = error.response.data.message
+						}
 
-                    }).finally(() => {
-
-                        // End loading
-                        this.isLoading = false
-                })
-            }
-        },
-    }
+					})
+					.finally(() => {
+						this.isLoading = false
+					})
+			}
+		},
+	}
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-</style>
diff --git a/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue b/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
index 27794679..fd61234c 100644
--- a/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
+++ b/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
@@ -7,17 +7,17 @@
 
 			<!--Visible-->
 			<AppInputSwitch :title="$t('admin_page_plans.form.status')" :description="$t('admin_page_plans.form.status_help')">
-				<SwitchInput @input="$updateText('/admin/plans/' + $route.params.id, 'visible', plan.attributes.visible)" v-model="visible" class="switch" :state="plan.attributes.visible"/>
+				<SwitchInput @input="$updateInput('/subscriptions/plans/' + $route.params.id, 'visible', plan.attributes.visible)" v-model="visible" class="switch" :state="plan.attributes.visible"/>
 			</AppInputSwitch>
 
 			<!--Name-->
 			<AppInputText :title="$t('admin_page_plans.form.name')">
-				<input @input="$updateText('/admin/plans/' + $route.params.id, 'name', plan.attributes.name)" v-model="plan.attributes.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" class="focus-border-theme input-dark"/>
+				<input @input="$updateInput('/subscriptions/plans/' + $route.params.id, 'name', plan.attributes.name)" v-model="plan.attributes.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" class="focus-border-theme input-dark"/>
 			</AppInputText>
 
 			<!--Description-->
 			<AppInputText :title="$t('admin_page_plans.form.description')">
-				<textarea @input="$updateText('/admin/plans/' + $route.params.id, 'description', plan.attributes.description)" v-model="plan.attributes.description" :placeholder="$t('admin_page_plans.form.description_plac')" class="focus-border-theme input-dark"></textarea>
+				<textarea @input="$updateInput('/subscriptions/plans/' + $route.params.id, 'description', plan.attributes.description)" v-model="plan.attributes.description" :placeholder="$t('admin_page_plans.form.description_plac')" class="focus-border-theme input-dark"></textarea>
 			</AppInputText>
 
 			<InfoBox style="margin-bottom: 0">
@@ -31,12 +31,12 @@
 
 			<!--Storage Capacity-->
 			<AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')">
-				<input @input="$updateText('/admin/plans/' + $route.params.id, 'max_storage_amount', plan.attributes.max_storage_amount)" v-model="plan.attributes.features.max_storage_amount" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" class="focus-border-theme input-dark"/>
+				<input @input="$updateInput(`/subscriptions/plans/${$route.params.id}/features`, 'max_storage_amount', plan.attributes.features.max_storage_amount)" v-model="plan.attributes.features.max_storage_amount" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" class="focus-border-theme input-dark"/>
 			</AppInputText>
 
 			<!--Team Members-->
 			<AppInputText :title="$t('Max Team Members')" is-last="true">
-				<input @input="$updateText('/admin/plans/' + $route.params.id, 'max_team_members', plan.attributes.max_team_members)" v-model="plan.attributes.features.max_team_members" :placeholder="$t('Add max team members in number')" type="number" min="1" max="999999999" class="focus-border-theme input-dark"/>
+				<input @input="$updateInput(`/subscriptions/plans/${$route.params.id}/features`, 'max_team_members', plan.attributes.features.max_team_members)" v-model="plan.attributes.features.max_team_members" :placeholder="$t('Add max team members in number')" type="number" min="1" max="999999999" class="focus-border-theme input-dark"/>
 			</AppInputText>
 		</div>
 	</div>
diff --git a/src/Domain/SetupWizard/Controllers/StorePlansController.php b/src/Domain/SetupWizard/Controllers/StorePlansController.php
index f9b1d928..15894f42 100644
--- a/src/Domain/SetupWizard/Controllers/StorePlansController.php
+++ b/src/Domain/SetupWizard/Controllers/StorePlansController.php
@@ -3,7 +3,6 @@ namespace Domain\SetupWizard\Controllers;
 
 use Illuminate\Http\Response;
 use App\Http\Controllers\Controller;
-use Domain\Subscriptions\Services\StripeService;
 use Domain\SetupWizard\Requests\StoreStripePlansRequest;
 
 /**
@@ -11,10 +10,6 @@ use Domain\SetupWizard\Requests\StoreStripePlansRequest;
  */
 class StorePlansController extends Controller
 {
-    public function __construct(
-        public StripeService $stripe,
-    ) {
-    }
 
     public function __invoke(
         StoreStripePlansRequest $request