Payment setting frontend part 1

resources/js/views/Admin/AppSettings/AppSettings.vue

@@ -2,7 +2,7 @@
     <div>
 		<!--Page Tab links-->
 		<div class="card shadow-card py-0 sticky top-0 z-10">
-			<CardNavigation :pages="pages" class="-mx-6" />
+			<CardNavigation :pages="pages" class="-mx-1" />
 		</div>
 
 		<!--Page Content-->
@@ -19,11 +19,6 @@
 		components: {
 			CardNavigation,
 		},
-		computed: {
-			...mapGetters([
-				'config'
-			]),
-		},
 		data() {
 			return {
 				pages: [
@@ -35,14 +30,14 @@
 						title: this.$t('admin_settings.tabs.appearance'),
 						route: 'AppAppearance',
 					},
-					{
-						title: this.$t('admin_settings.tabs.billings'),
-						route: 'AppBillings',
-					},
 					{
 						title: this.$t('admin_settings.tabs.payments'),
 						route: 'AppPayments',
 					},
+					{
+						title: this.$t('admin_settings.tabs.billings'),
+						route: 'AppBillings',
+					},
 					{
 						title: this.$t('Homepage'),
 						route: 'AppIndex',

resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue

@@ -7,27 +7,27 @@
             </InfoBox>
             <ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_settings.email.driver')" :error="errors[0]">
-                    <input v-model="mail.driver" :placeholder="$t('admin_settings.email.driver_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+                    <input v-model="mail.driver" :placeholder="$t('admin_settings.email.driver_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
                 </AppInputText>
             </ValidationProvider>
             <ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_settings.email.host')" :error="errors[0]">
-                    <input v-model="mail.host" :placeholder="$t('admin_settings.email.host_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+                    <input v-model="mail.host" :placeholder="$t('admin_settings.email.host_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
                 </AppInputText>
             </ValidationProvider>
             <ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_settings.email.port')" :error="errors[0]">
-                    <input v-model="mail.port" :placeholder="$t('admin_settings.email.port_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+                    <input v-model="mail.port" :placeholder="$t('admin_settings.email.port_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
                 </AppInputText>
             </ValidationProvider>
             <ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_settings.email.username')" :error="errors[0]">
-                    <input v-model="mail.username" :placeholder="$t('admin_settings.email.username_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+                    <input v-model="mail.username" :placeholder="$t('admin_settings.email.username_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
                 </AppInputText>
             </ValidationProvider>
             <ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_settings.email.password')" :error="errors[0]">
-                    <input v-model="mail.password" :placeholder="$t('admin_settings.email.password_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+                    <input v-model="mail.password" :placeholder="$t('admin_settings.email.password_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
                 </AppInputText>
             </ValidationProvider>
             <ValidationProvider tag="div" mode="passive" name="Mail Encryption" rules="required" v-slot="{ errors }">

resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue

@@ -25,7 +25,7 @@
                     <div class="block-wrapper">
                         <label>Title:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                            <input @input="$updateText('/admin/settings', 'header_title', app.header_title)" v-model="app.header_title" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
+                            <input @input="$updateText('/admin/settings', 'header_title', app.header_title)" v-model="app.header_title" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -33,7 +33,7 @@
                     <div class="block-wrapper">
                         <label>Description:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                            <textarea @input="$updateText('/admin/settings', 'header_description', app.header_description)" rows="2" v-model="app.header_description" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                            <textarea @input="$updateText('/admin/settings', 'header_description', app.header_description)" rows="2" v-model="app.header_description" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"></textarea>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -65,7 +65,7 @@
                         <div class="block-wrapper">
                             <label>Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'features_title', app.features_title)" v-model="app.features_title" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'features_title', app.features_title)" v-model="app.features_title" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -73,7 +73,7 @@
                         <div class="block-wrapper">
                             <label>Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'features_description', app.features_description)" rows="2" v-model="app.features_description" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'features_description', app.features_description)" rows="2" v-model="app.features_description" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -104,42 +104,42 @@
                         <div class="block-wrapper">
                             <label>First Box Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 1" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'feature_title_1', app.feature_title_1)" v-model="app.feature_title_1" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'feature_title_1', app.feature_title_1)" v-model="app.feature_title_1" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>First Box Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 1" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'feature_description_1', app.feature_description_1)" rows="2" v-model="app.feature_description_1" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'feature_description_1', app.feature_description_1)" rows="2" v-model="app.feature_description_1" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Second Box Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 2" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'feature_title_2', app.feature_title_2)" v-model="app.feature_title_2" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'feature_title_2', app.feature_title_2)" v-model="app.feature_title_2" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Second Box Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 2" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'feature_description_2', app.feature_description_2)" rows="2" v-model="app.feature_description_2" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'feature_description_2', app.feature_description_2)" rows="2" v-model="app.feature_description_2" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Third Box Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 3" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'feature_title_3', app.feature_title_3)" v-model="app.feature_title_3" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'feature_title_3', app.feature_title_3)" v-model="app.feature_title_3" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Third Box Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 3" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'feature_description_3', app.feature_description_3)" rows="2" v-model="app.feature_description_3" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'feature_description_3', app.feature_description_3)" rows="2" v-model="app.feature_description_3" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -170,7 +170,7 @@
                         <div class="block-wrapper">
                             <label>Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'pricing_title', app.pricing_title)" v-model="app.pricing_title" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'pricing_title', app.pricing_title)" v-model="app.pricing_title" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -178,7 +178,7 @@
                         <div class="block-wrapper">
                             <label>Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'pricing_description', app.pricing_description)" rows="2" v-model="app.pricing_description" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'pricing_description', app.pricing_description)" rows="2" v-model="app.pricing_description" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -210,7 +210,7 @@
                         <div class="block-wrapper">
                             <label>Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'get_started_title', app.get_started_title)" v-model="app.get_started_title" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'get_started_title', app.get_started_title)" v-model="app.get_started_title" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -218,7 +218,7 @@
                         <div class="block-wrapper">
                             <label>Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                            <textarea @input="$updateText('/admin/settings', 'get_started_description', app.get_started_description)" rows="2" v-model="app.get_started_description" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                            <textarea @input="$updateText('/admin/settings', 'get_started_description', app.get_started_description)" rows="2" v-model="app.get_started_description" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -232,7 +232,7 @@
                     <div class="block-wrapper">
                         <label>Footer content:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                            <input @input="$updateText('/admin/settings', 'footer_content', app.footer_content)" v-model="app.footer_content" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
+                            <input @input="$updateText('/admin/settings', 'footer_content', app.footer_content)" v-model="app.footer_content" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>

resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue

@@ -66,14 +66,14 @@
 		</div>
 		<div class="card shadow-card">
 			<FormLabel>
-				{{ $t('admin_settings.others.section_cache') }}
+				{{ $t('Cache') }}
 			</FormLabel>
-			<InfoBox>
-				{{ $t('admin_settings.others.cache_disclaimer') }}
-			</InfoBox>
-			<ButtonBase @click.native="flushCache" :loading="isFlushingCache" :disabled="isFlushingCache" type="submit" button-style="theme" class="submit-button">
-				{{ $t('admin_settings.others.cache_clear') }}
-			</ButtonBase>
+
+			<AppInputSwitch :title="$t('admin_settings.others.section_cache')" :description="$t('admin_settings.others.cache_disclaimer')" :is-last="true">
+				<ButtonBase @click.native="flushCache" :loading="isFlushingCache" :disabled="isFlushingCache" class="sm:w-auto w-full" button-style="theme">
+					{{ $t('admin_settings.others.cache_clear') }}
+				</ButtonBase>
+			</AppInputSwitch>
 		</div>
     </PageTab>
 </template>

resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue

@@ -1,113 +1,120 @@
 <template>
-    <PageTab :is-loading="isLoading">
+    <PageTab>
+		<div class="card shadow-card">
+			<FormLabel icon="dollar">
+				{{ $t('Subscription Payments') }}
+			</FormLabel>
 
-		<!--Stripe Information-->
-		<PageTabGroup v-if="config.stripe_public_key && payments">
-			<div class="card shadow-card">
-				<FormLabel>
-					{{ $t('admin_settings.payments.section_payments') }}
-				</FormLabel>
-				<InfoBox>
-					<p v-html="$t('admin_settings.payments.credentials_disclaimer')"></p>
-				</InfoBox>
-				<AppInputSwitch :title="$t('admin_settings.payments.allow_payments')">
-					<SwitchInput @input="$updateText('/admin/settings', 'payments_active', payments.status)" v-model="payments.status" class="switch" :state="payments.status" />
-				</AppInputSwitch>
-				<AppInputText :title="$t('admin_settings.payments.webhook_url')">
-					<input :value="stripeWebhookEndpoint" type="text" class="focus-border-theme input-dark" disabled />
-				</AppInputText>
+			<AppInputSwitch :title="$t('Allow Subscription Payments')" :description="$t('User can subscribe to fixed or metered plan')" :is-last="! allowedPayments">
+				<SwitchInput @input="$updateText('/admin/settings', 'allowedPayments', allowedPayments)" v-model="allowedPayments" :state="allowedPayments" />
+			</AppInputSwitch>
+
+			<AppInputText v-if="allowedPayments" :title="$t('Subscription Type')" :is-last="true">
+				<SelectInput :default="config.subscriptionType" :options="subscriptionTypes" :placeholder="$t('Select your subscription type')"/>
+			</AppInputText>
+		</div>
+
+		<!--Stripe method configuration-->
+		<div v-if="allowedPayments" class="card shadow-card">
+			<FormLabel icon="credit-card">
+				{{ $t('Stripe') }}
+			</FormLabel>
+
+			<AppInputSwitch :title="$t('Allow Stripe Service')" :description="$t('Allow your users pay by their credit card')" :is-last="! stripe.allowStripe">
+				<SwitchInput @input="$updateText('/admin/settings', 'payments_active', stripe.allowStripe)" v-model="stripe.allowStripe" :state="stripe.allowStripe" />
+			</AppInputSwitch>
+
+			<!--Stripe credentials are set up-->
+			<div v-if="stripe.allowStripe">
+				<div v-if="stripe.isConfigured">
+					<AppInputText :title="$t('Payment Description')" :description="$t('The description showed below user payment method selection.')">
+						<textarea rows="2" @input="$updateText('/admin/settings', 'stripe_payment_description', stripe.paymentDescription, true)" v-model="stripe.paymentDescription" :placeholder="$t('Describe in short which methods user can pay with this payment method...')" type="text" class="focus-border-theme input-dark" />
+					</AppInputText>
+
+					<AppInputText :title="$t('Your Stripe Webhook URL')" :description="$t('Please copy your url and paste it to the Stripe webhook setup.')">
+						<CopyInput size="small" :str="stripeWebhookEndpoint" />
+					</AppInputText>
+
+					<div @click="stripe.isVisibleCredentialsForm = !stripe.isVisibleCredentialsForm" class="flex items-center cursor-pointer" :class="{'mb-4': stripe.isVisibleCredentialsForm}">
+						<edit2-icon size="14" class="vue-feather text-theme mr-2.5" />
+						<b class="text-sm">{{ $t('Update Stripe Credentials') }}</b>
+					</div>
+				</div>
+
+				<!--Set up Stripe credentials-->
+				<ValidationObserver v-if="! stripe.isConfigured || stripe.isVisibleCredentialsForm" @submit.prevent="stripeCredentialsSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="p-5 border rounded-xl">
+					<FormLabel icon="shield">
+						{{ $t('Configure Your Stripe Credentials') }}
+					</FormLabel>
+					<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
+						<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
+							<input v-model="stripe.credentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
+						</AppInputText>
+					</ValidationProvider>
+					<ValidationProvider tag="div" mode="passive" name="Secret Key" rules="required" v-slot="{ errors }">
+						<AppInputText :title="$t('admin_settings.payments.stripe_sec_key')" :error="errors[0]">
+							<input v-model="stripe.credentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
+						</AppInputText>
+					</ValidationProvider>
+
+					<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
+						{{ $t('Store Stripe Credentials') }}
+					</ButtonBase>
+				</ValidationObserver>
 			</div>
-		</PageTabGroup>
-
-		<!--Stripe Set up-->
-		<PageTabGroup v-if="! config.stripe_public_key">
-			<ValidationObserver @submit.prevent="stripeCredentialsSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="card shadow-card">
-				<FormLabel>
-					{{ $t('admin_settings.payments.stripe_setup') }}
-				</FormLabel>
-				<InfoBox>
-					<p v-html="$t('admin_settings.payments.stripe_create_acc')"></p>
-				</InfoBox>
-				<ValidationProvider tag="div" mode="passive" name="Currency" rules="required" v-slot="{ errors }">
-					<AppInputText :title="$t('admin_settings.payments.stripe_currency')" :error="errors[0]">
-						<SelectInput v-model="stripeCredentials.currency" :options="currencyList" :placeholder="$t('admin_settings.payments.stripe_currency_plac')" :isError="errors[0]" />
-					</AppInputText>
-				</ValidationProvider>
-				<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
-					<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
-						<input v-model="stripeCredentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
-					</AppInputText>
-				</ValidationProvider>
-				<ValidationProvider tag="div" mode="passive" name="Secret Key" rules="required" v-slot="{ errors }">
-					<AppInputText :title="$t('admin_settings.payments.stripe_sec_key')" :error="errors[0]">
-						<input v-model="stripeCredentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
-					</AppInputText>
-				</ValidationProvider>
-				<ValidationProvider tag="div" mode="passive" name="Webhook URL" rules="required" v-slot="{ errors }">
-					<AppInputText :title="$t('Webhook URL')" :error="errors[0]">
-						<InfoBox>
-							<p v-html="$t('admin_settings.payments.stripe_create_webhook')"></p>
-						</InfoBox>
-						<input :value="stripeWebhookEndpoint" type="text" class="focus-border-theme input-dark" disabled />
-					</AppInputText>
-				</ValidationProvider>
-				<ValidationProvider tag="div" mode="passive" name="Webhook Secret" rules="required" v-slot="{ errors }">
-					<AppInputText :title="$t('Webhook Secret')" :error="errors[0]">
-						<input v-model="stripeCredentials.webhookSecret" :placeholder="$t('admin_settings.payments.stripe_webhook_key_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
-					</AppInputText>
-				</ValidationProvider>
-				<InfoBox v-if="isError" type="error">
-					<p>{{ errorMessage }}</p>
-				</InfoBox>
-				<ButtonBase :loading="isLoading" :disabled="isLoading" type="submit"
-							button-style="theme" class="submit-button">
-					{{ submitButtonText }}
-				</ButtonBase>
-			</ValidationObserver>
-		</PageTabGroup>
+		</div>
 	</PageTab>
 </template>
 
 <script>
-	import AppInputText from "../../../../components/Admin/AppInputText";
+    import {
+		Edit2Icon,
+	} from 'vue-feather-icons'
 	import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
 	import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
 	import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
 	import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
 	import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
+	import AppInputSwitch from "../../../../components/Admin/AppInputSwitch"
 	import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
 	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+	import CopyInput from "../../../../components/Others/Forms/CopyInput"
 	import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
+	import AppInputText from "../../../../components/Admin/AppInputText"
 	import PageTab from '/resources/js/components/Others/Layout/PageTab'
 	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 {mapGetters} from 'vuex'
 	import axios from 'axios'
-	import AppInputSwitch from "../../../../components/Admin/AppInputSwitch";
 
 	export default {
 		name: 'AppPayments',
 		components: {
-			AppInputSwitch,
-			AppInputText,
 			ValidationObserver,
 			ValidationProvider,
+			AppInputSwitch,
+			AppInputText,
 			PageTabGroup,
 			SwitchInput,
 			SelectInput,
 			ImageInput,
 			ButtonBase,
+			CopyInput,
 			FormLabel,
+			Edit2Icon,
 			SetupBox,
 			required,
 			PageTab,
 			InfoBox,
 		},
 		computed: {
-			...mapGetters(['config', 'currencyList']),
+			...mapGetters([
+				'subscriptionTypes',
+				'config',
+			]),
 			stripeWebhookEndpoint() {
-				return this.config.host + '/stripe/webhook'
+				return `${this.config.host}/api/subscriptions/stripe/webhook`
 			},
 			submitButtonText() {
 				return this.isLoading ? this.$t('admin_settings.payments.button_testing') : this.$t('admin_settings.payments.button_submit')
@@ -118,12 +125,16 @@
 				isLoading: true,
 				isError: false,
 				errorMessage: '',
-				payments: undefined,
-				stripeCredentials: {
-					key: '',
-					secret: '',
-					webhookSecret: '',
-					currency: '',
+				allowedPayments: true,
+				stripe: {
+					allowStripe: true,
+					isConfigured: true,
+					isVisibleCredentialsForm: false,
+					paymentDescription: undefined,
+					credentials: {
+						key: undefined,
+						secret: undefined,
+					}
 				},
 			}
 		},

resources/js/views/Admin/Languages/Language.vue

@@ -64,7 +64,7 @@
 
 						<ValidationProvider tag="div" mode="passive" name="Language name" rules="required" v-slot="{ errors }">
 							<AppInputText :title="$t('language_name')" :error="errors[0]">
-								<input @input="$updateText(`/admin/languages/${selectedLanguage.data.id}`, 'name', selectedLanguage.data.attributes.name)" v-model="selectedLanguage.data.attributes.name" :placeholder="$t('admin_settings.appearance.description_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+								<input @input="$updateText(`/admin/languages/${selectedLanguage.data.id}`, 'name', selectedLanguage.data.attributes.name)" v-model="selectedLanguage.data.attributes.name" :placeholder="$t('admin_settings.appearance.description_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
 							</AppInputText>
 						</ValidationProvider>
 
@@ -100,7 +100,7 @@
 									@input="$updateText(`/admin/languages/${selectedLanguage.data.id}/strings`, key, selectedLanguage.data.attributes.translations[key])"
 									:rows="selectedLanguage.data.attributes.translations[key].length >= 80 ? 3 : 1"
 									class="focus-border-theme input-dark"
-									:class="{'border-red-700': errors[0]}"
+									:class="{'border-red': errors[0]}"
 								></textarea>
 							</AppInputText>
 						</ValidationProvider>

resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue

@@ -9,14 +9,14 @@
 			<!--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="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+					<input v-model="plan.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
 				</AppInputText>
 			</ValidationProvider>
 
 			<!--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="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
+					<textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"></textarea>
 				</AppInputText>
 			</ValidationProvider>
 		</div>
@@ -30,7 +30,7 @@
 				<!--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="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+						<input v-model="plan.amount" :placeholder="$t('admin_page_plans.form.price_plac')" type="number" step="0.01" min="1" max="999999999999" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
 					</AppInputText>
 				</ValidationProvider>
 
@@ -58,14 +58,14 @@
 			<!--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="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+					<input v-model="plan.features.max_storage_amount" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
 				</AppInputText>
 			</ValidationProvider>
 
 			<!--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="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+					<input v-model="plan.features.max_team_members" :placeholder="$t('Add max team members in number')" type="number" min="1" max="999999999" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
 				</AppInputText>
 			</ValidationProvider>
 		</div>

resources/js/views/Admin/Plans/Create/CreateMeteredPlan.vue

@@ -9,14 +9,14 @@
 			<!--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="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+					<input v-model="plan.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
 				</AppInputText>
 			</ValidationProvider>
 
 			<!--Description-->
 			<ValidationProvider tag="div" mode="passive" name="Description" v-slot="{ errors }">
 				<AppInputText :title="$t('admin_page_plans.form.description')">
-					<textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
+					<textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark"></textarea>
 				</AppInputText>
 			</ValidationProvider>
 
@@ -41,7 +41,7 @@
 
 				<ValidationProvider v-if="plan.features.bandwidth.active" class="-mt-3" tag="div" mode="passive" name="Bandwidth Price" rules="required" v-slot="{ errors }">
 					<AppInputText class="w-full">
-						<input v-model="plan.features.bandwidth.per_unit" :placeholder="$t('Type the price per 1GB...')" type="number" step="0.01" min="0.01" max="999999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+						<input v-model="plan.features.bandwidth.per_unit" :placeholder="$t('Type the price per 1GB...')" type="number" step="0.01" min="0.01" max="999999999999" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
 					</AppInputText>
 				</ValidationProvider>
 			</div>
@@ -55,7 +55,7 @@
 
 			<ValidationProvider v-if="plan.features.storage.active" class="-mt-3" tag="div" mode="passive" name="Storage Price" rules="required" v-slot="{ errors }">
 				<AppInputText class="w-full">
-					<input v-model="plan.features.storage.per_unit" :placeholder="$t('Type the price per 1GB...')" type="number" step="0.01" min="0.01" max="999999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+					<input v-model="plan.features.storage.per_unit" :placeholder="$t('Type the price per 1GB...')" type="number" step="0.01" min="0.01" max="999999999999" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
 				</AppInputText>
 			</ValidationProvider>
 
@@ -68,7 +68,7 @@
 
 			<ValidationProvider v-if="plan.features.member.active" class="-mt-3" tag="div" mode="passive" name="Member Price" rules="required" v-slot="{ errors }">
 				<AppInputText class="w-full">
-					<input v-model="plan.features.member.per_unit" :placeholder="$t('Type the price per 1 member...')" type="number" step="0.01" min="0.01" max="999999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+					<input v-model="plan.features.member.per_unit" :placeholder="$t('Type the price per 1 member...')" type="number" step="0.01" min="0.01" max="999999999999" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
 				</AppInputText>
 			</ValidationProvider>
 
@@ -80,7 +80,7 @@
 
 				<ValidationProvider v-if="plan.features.flatFee.active" class="-mt-3" tag="div" mode="passive" name="FlatFee Price" rules="required" v-slot="{ errors }">
 					<AppInputText class="w-full" :is-last="true">
-						<input v-model="plan.features.flatFee.per_unit" :placeholder="$t('Type the price...')" type="number" step="0.01" min="0.01" max="999999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+						<input v-model="plan.features.flatFee.per_unit" :placeholder="$t('Type the price...')" type="number" step="0.01" min="0.01" max="999999999999" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
 					</AppInputText>
 				</ValidationProvider>
 			</div>

resources/js/views/Admin/Plans/Tabs/PlanDelete.vue

@@ -7,7 +7,7 @@
 			<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Plan name" :rules="'required|is:' + plan.attributes.name">
 				<AppInputText :title="$t('admin_page_user.label_delete_user', {user: plan.attributes.name})" :description="$t('admin_page_plans.disclaimer_delete_plan')" :error="errors[0]" :is-last="true">
 					<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
-						<input v-model="planName" :placeholder="$t('admin_page_plans.form.name_delete_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
+						<input v-model="planName" :placeholder="$t('admin_page_plans.form.name_delete_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
 						<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="sm:w-auto w-full">
 							{{ $t('admin_page_plans.delete_plan_button') }}
 						</ButtonBase>

resources/js/views/Admin/Users/UserCreate.vue

@@ -13,14 +13,14 @@
 			<!--Email-->
             <ValidationProvider tag="div" mode="passive" name="email" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('page_registration.label_email')" :error="errors[0]">
-                    <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
+                    <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}"/>
                 </AppInputText>
             </ValidationProvider>
 
 			<!--Name-->
             <ValidationProvider tag="div" mode="passive" name="user name" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('page_registration.label_name')" :error="errors[0]">
-                    <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
+                    <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}"/>
                 </AppInputText>
             </ValidationProvider>
 
@@ -28,12 +28,12 @@
             <div class="flex space-x-4">
                 <ValidationProvider tag="div" mode="passive" name="password" rules="required" v-slot="{ errors }" class="w-full">
                     <AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]">
-                        <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
+                        <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}"/>
                     </AppInputText>
                 </ValidationProvider>
                 <ValidationProvider tag="div" mode="passive" name="password confirm" rules="required" v-slot="{ errors }" class="w-full">
                     <AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]">
-                        <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
+                        <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}"/>
                     </AppInputText>
                 </ValidationProvider>
             </div>
@@ -51,7 +51,7 @@
 			<!--Storage Capacity-->
             <ValidationProvider tag="div" mode="passive" name="storage capacity" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_page_user.label_change_capacity')" :error="errors[0]">
-                    <input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
+                    <input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}"/>
                 </AppInputText>
             </ValidationProvider>
         </div>

resources/js/views/Admin/Users/UserTabs/UserDelete.vue

@@ -11,7 +11,7 @@
 							   :placeholder="$t('admin_page_user.placeholder_delete_user')"
 							   type="text"
 							   class="focus-border-theme input-dark"
-							   :class="{'border-red-700': errors[0]}"
+							   :class="{'border-red': errors[0]}"
 						/>
 						<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="sm:w-auto w-full">
 							{{ $t('admin_page_user.delete_user') }}

resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue

@@ -20,7 +20,7 @@
 								   min="1"
 								   max="999999999"
 								   class="focus-border-theme input-dark"
-								   :class="{'border-red-700': errors[0]}"
+								   :class="{'border-red': errors[0]}"
 							/>
 							<ButtonBase type="submit" button-style="theme" class="submit-button"
 								:loading="isUpdatingBalanceAmount"

resources/js/views/Admin/Users/UserTabs/UserStorage.vue

@@ -67,7 +67,7 @@
 								   min="1"
 								   max="999999999"
 								   class="focus-border-theme input-dark"
-								   :class="{'border-red-700': errors[0]}"
+								   :class="{'border-red': errors[0]}"
 							/>
 							<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
 								{{ $t('admin_page_user.change_capacity') }}