setup wizard init

app/Http/Controllers/Admin/InvoiceController.php

@@ -7,6 +7,7 @@ use App\Http\Resources\InvoiceAdminCollection;
 use App\Http\Resources\InvoiceResource;
 use App\Invoice;
 use App\Services\StripeService;
+use App\Setting;
 use Illuminate\Http\Request;
 
 class InvoiceController extends Controller
@@ -40,9 +41,11 @@ class InvoiceController extends Controller
      */
     public function show($customer, $token)
     {
+        $settings = json_decode(Setting::all()->pluck('value', 'name')->toJson());
         $invoice = $this->stripe->getUserInvoice($customer, $token);
 
         return view('vuefilemanager.invoice')
+            ->with('settings', $settings)
             ->with('invoice', $invoice);
     }
 }

app/Http/Controllers/Admin/UserController.php

@@ -66,9 +66,9 @@ class UserController extends Controller
      *
      * @return InvoiceCollection
      */
-    public function invoices()
+    public function invoices($id)
     {
-        $user = \Auth::user();
+        $user = User::find($id);
 
         return new InvoiceCollection(
             $this->stripe->getUserInvoices($user)

app/Http/Controllers/SettingController.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Setting;
+use Illuminate\Http\Request;
+
+class SettingController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  \App\Setting  $setting
+     * @return \Illuminate\Http\Response
+     */
+    public function show(Setting $setting)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  \App\Setting  $setting
+     * @return \Illuminate\Http\Response
+     */
+    public function edit(Setting $setting)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \App\Setting  $setting
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, Setting $setting)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  \App\Setting  $setting
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy(Setting $setting)
+    {
+        //
+    }
+}

app/Http/Controllers/User/PaymentMethodsController.php

@@ -18,10 +18,14 @@ class PaymentMethodsController extends Controller
      *
      * @return array
      */
-    public function payment_methods()
+    public function index()
     {
         $user = Auth::user();
 
+        if (! $user->hasPaymentMethod()) {
+            return abort(204, 'User don\'t have any payment methods');
+        }
+
         $slug_payment_methods = 'payment-methods-user-' . $user->id;
         $slug_default_payment_method = 'default-payment-methods-user-' . $user->id;
 

app/Http/Controllers/User/SubscriptionController.php

@@ -43,11 +43,17 @@ class SubscriptionController extends Controller
     /**
      * Get user subscription detail
      *
-     * @return UserSubscription
+     * @return array
      */
     public function show()
     {
-        $slug_user_subscription = 'subscription-user-' . Auth::id();
+        $user = Auth::user();
+
+        if (! $user->subscription('main')) {
+            return abort(204, 'User don\'t have any subscription');
+        }
+
+        $slug_user_subscription = 'subscription-user-' . $user->id;
 
         if (Cache::has($slug_user_subscription)) {
             return Cache::get($slug_user_subscription);

app/Http/Controllers/WebhookController.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\User;
+use Illuminate\Http\Request;
+
+use Laravel\Cashier\Http\Controllers\WebhookController as CashierController;
+
+class WebhookController extends CashierController
+{
+    /**
+     * Handle a cancelled customer from a Stripe subscription.
+     *
+     * @param  array  $payload
+     * @return \Symfony\Component\HttpFoundation\Response
+     */
+    public function handleCustomerSubscriptionDeleted($payload) {
+
+        $user = User::where('stripe_id', $payload['data']['object']['customer'])->firstOrFail();
+
+        // TODO: set default capacity
+        $user->settings->update(['storage_capacity' => 1]);
+
+        return $this->successMethod();
+    }
+}

app/Http/Middleware/VerifyCsrfToken.php

@@ -20,5 +20,6 @@ class VerifyCsrfToken extends Middleware
      */
     protected $except = [
         '/deploy',
+        '/stripe/*',
     ];
 }

app/Services/StripeService.php

@@ -19,6 +19,13 @@ class StripeService
         $this->stripe = Stripe::make(env('STRIPE_SECRET'), '2020-03-02');
     }
 
+    public function getAccountDetails()
+    {
+        $account = $this->stripe->account()->details();
+
+        return $account;
+    }
+
     /**
      * Get setup intent
      *

app/Setting.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Setting extends Model
+{
+    public $timestamps = false;
+
+    protected $guarded = ['id'];
+}

composer.json

@@ -20,6 +20,7 @@
         "laravel/passport": "^8.4",
         "laravel/scout": "^7.2",
         "laravel/tinker": "^2.0",
+        "laravel/ui": "^2.0",
         "league/flysystem-aws-s3-v3": "^1.0",
         "league/flysystem-cached-adapter": "^1.0",
         "teamtnt/laravel-scout-tntsearch-driver": "^8.3"

database/factories/SettingFactory.php

@@ -0,0 +1,12 @@
+<?php
+
+/** @var \Illuminate\Database\Eloquent\Factory $factory */
+
+use App\Setting;
+use Faker\Generator as Faker;
+
+$factory->define(Setting::class, function (Faker $faker) {
+    return [
+        //
+    ];
+});

database/migrations/2020_06_25_142635_create_settings_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateSettingsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('settings', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->string('name')->unique();
+            $table->longText('value')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('settings');
+    }
+}

database/seeds/DatabaseSeeder.php

@@ -14,5 +14,6 @@ class DatabaseSeeder extends Seeder
         $this->call(PaymentGatewaysSeeder::class);
         $this->call(PlansSeeder::class);
         $this->call(InvoicesSeeder::class);
+        $this->call(SettingSeeder::class);
     }
 }

database/seeds/PaymentGatewaysSeeder.php

@@ -17,12 +17,5 @@ class PaymentGatewaysSeeder extends Seeder
             'name'   => 'Stripe',
             'slug'   => 'stripe',
         ]);
-
-        // Create PayPal default record
-        DB::table('payment_gateways')->insert([
-            'logo' => '/assets/images/paypal-logo-thumbnail.png',
-            'name'   => 'Paypal',
-            'slug'   => 'paypal',
-        ]);
     }
 }

database/seeds/SettingSeeder.php

@@ -0,0 +1,57 @@
+<?php
+
+use Illuminate\Database\Seeder;
+
+class SettingSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        $columns = collect([
+
+            // Service Billing Info
+            ['name' => 'billing_phone_number'],
+            ['name' => 'billing_postal_code'],
+            ['name' => 'billing_vat_number'],
+            ['name' => 'billing_address'],
+            ['name' => 'billing_country'],
+            ['name' => 'billing_state'],
+            ['name' => 'billing_city'],
+            ['name' => 'billing_name'],
+
+            // General Settings
+            ['name' => 'app_title'],
+            ['name' => 'app_description'],
+
+            ['name' => 'app_logo'],
+            ['name' => 'app_favicon'],
+
+            ['name' => 'google_analytics'],
+            ['name' => 'contact_email'],
+
+            // Users
+            ['name' => 'registration', 'value' => 1],
+            ['name' => 'storage_limitation', 'value' => 1],
+            ['name' => 'storage_default', 'value' => 1],
+
+            // Mail settings
+            ['name' => 'mail_driver'],
+            ['name' => 'mail_host'],
+            ['name' => 'mail_port'],
+            ['name' => 'mail_username'],
+            ['name' => 'mail_password'],
+            ['name' => 'mail_encryption'],
+        ]);
+
+        $columns->each(function ($col) {
+            DB::table('settings')->insert([
+                'name'  => $col['name'],
+                'value' => isset($col['value']) ? $col['value'] : null,
+            ]);
+        });
+    }
+}

public/mix-manifest.json

@@ -1,4 +1,14 @@
 {
     "/js/main.js": "/js/main.js",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/js/main.9ba0fd35b08aa42bd5d6.hot-update.js": "/js/main.9ba0fd35b08aa42bd5d6.hot-update.js",
+    "/js/main.94e18393347a6c30c466.hot-update.js": "/js/main.94e18393347a6c30c466.hot-update.js",
+    "/js/main.1a0cdd9eb7456b334686.hot-update.js": "/js/main.1a0cdd9eb7456b334686.hot-update.js",
+    "/js/main.9cfbf58cb9183626fbd9.hot-update.js": "/js/main.9cfbf58cb9183626fbd9.hot-update.js",
+    "/js/main.947538899b32463304d1.hot-update.js": "/js/main.947538899b32463304d1.hot-update.js",
+    "/js/main.388bcd39ccfc575df3dc.hot-update.js": "/js/main.388bcd39ccfc575df3dc.hot-update.js",
+    "/js/main.ec4459f3993385a8ffb0.hot-update.js": "/js/main.ec4459f3993385a8ffb0.hot-update.js",
+    "/js/main.4aa483cf186b82e6f133.hot-update.js": "/js/main.4aa483cf186b82e6f133.hot-update.js",
+    "/js/main.0b62890fe58f6191cff2.hot-update.js": "/js/main.0b62890fe58f6191cff2.hot-update.js",
+    "/js/main.8f85a1128dbc59267b4d.hot-update.js": "/js/main.8f85a1128dbc59267b4d.hot-update.js"
 }

resources/js/App.vue

@@ -74,7 +74,7 @@
                 'isLogged', 'isGuest'
             ]),
             layout() {
-                if (includes(['VerifyByPassword', 'SharedPage', 'NotFoundShared', 'SignIn', 'SignUp', 'ForgottenPassword', 'CreateNewPassword'], this.$route.name)) {
+                if (includes(['PurchaseCode', 'StripeCredentials', 'AppSetup', 'EnvironmentSetup', 'BillingsDetail', 'SubscriptionPlans', 'Database', 'VerifyByPassword', 'SharedPage', 'NotFoundShared', 'SignIn', 'SignUp', 'ForgottenPassword', 'CreateNewPassword'], this.$route.name)) {
                     return 'unauthorized'
                 }
 

resources/js/components/FilesView/Spinner.vue

@@ -36,11 +36,9 @@
     @keyframes loading-bar-spinner {
         0% {
             transform: rotate(0deg);
-            transform: rotate(0deg);
         }
         100% {
             transform: rotate(360deg);
-            transform: rotate(360deg);
         }
     }
 </style>

resources/js/components/Others/Forms/FormLabel.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="form-label">
+        <edit-2-icon size="22" class="icon"></edit-2-icon>
+        <b class="label">
+            <slot></slot>
+        </b>
+    </div>
+</template>
+
+<script>
+    import { Edit2Icon } from 'vue-feather-icons'
+
+    export default {
+        name: 'FormLabel',
+        components: {
+            Edit2Icon
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .form-label {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+
+        .icon {
+            margin-right: 10px;
+
+            path {
+                stroke: $theme;
+            }
+        }
+
+        .label {
+            @include font-size(18);
+            font-weight: 700;
+        }
+    }
+
+</style>

resources/js/components/Others/Forms/InfoBox.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="info-box">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'InfoBox',
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .info-box {
+        padding: 20px;
+        border-radius: 8px;
+        margin-bottom: 32px;
+        background: $light_background;
+        text-align: left;
+
+        p {
+            @include font-size(15);
+            line-height: 1.6;
+        }
+
+        a {
+            color: $theme;
+            font-weight: 700;
+            @include font-size(15);
+            line-height: 1.6;
+        }
+
+        ul {
+            margin-top: 15px;
+            display: block;
+
+            li {
+                display: block;
+
+                a {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .info-box {
+            padding: 15px;
+        }
+
+    }
+
+
+    @media (prefers-color-scheme: dark) {
+
+        .info-box {
+            background: $dark_mode_foreground;
+        }
+    }
+</style>

resources/js/components/Others/Forms/SelectInput.vue

@@ -88,7 +88,8 @@
     }
 
     .input-options {
-        background: $light_mode_input_background;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
+        background: white;
         border-radius: 8px;
         position: absolute;
         overflow: hidden;
@@ -96,16 +97,18 @@
         left: 0;
         right: 0;
         z-index: 9;
+        max-height: 295px;
+        overflow-y: auto;
 
         .option-item {
             padding: 13px 20px;
             display: block;
-            border-bottom: 1px solid #EBEBEB;
+            //border-bottom: 1px solid #EBEBEB;
             cursor: pointer;
 
             &:hover {
                 color: $theme;
-                background: rgba($theme, .1);
+                background: $light_background;
             }
 
             &:last-child {
@@ -117,7 +120,8 @@
     .input-area {
         border: 1px solid transparent;
         justify-content: space-between;
-        background: $light_mode_input_background;
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+        //background: $light_mode_input_background;
         @include transition(150ms);
         align-items: center;
         border-radius: 8px;

resources/js/router.js

@@ -15,7 +15,7 @@ import Profile from './views/User/Settings'
 import Invoice from './views/User/Invoices'
 import Password from './views/User/Password'
 import Subscription from './views/User/Subscription'
-import PaymentCards from './views/User/PaymentCards'
+import PaymentMethods from './views/User/PaymentMethods'
 
 import Trash from './views/FilePages/Trash'
 import Files from './views/FilePages/Files'
@@ -54,6 +54,16 @@ import UserPassword from './views/Admin/Users/UserTabs/UserPassword'
 import UserInvoices from './views/Admin/Users/UserTabs/UserInvoices'
 import UserSubscription from './views/Admin/Users/UserTabs/UserSubscription'
 
+// Setup Wizard
+import SetupWizard from './views/SetupWizard'
+import Database from './views/SetupWizard/Database'
+import AppSetup from './views/SetupWizard/AppSetup'
+import PurchaseCode from './views/SetupWizard/PurchaseCode'
+import BillingsDetail from './views/SetupWizard/BillingsDetail'
+import EnvironmentSetup from './views/SetupWizard/EnvironmentSetup'
+import StripeCredentials from './views/SetupWizard/StripeCredentials'
+import SubscriptionPlans from './views/SetupWizard/SubscriptionPlans'
+
 Vue.use(Router)
 
 const routesAdmin = [
@@ -401,9 +411,9 @@ const routesUser = [
                 },
             },
             {
-                name: 'PaymentCards',
+                name: 'PaymentMethods',
                 path: '/settings/payment-cards',
-                component: PaymentCards,
+                component: PaymentMethods,
                 meta: {
                     requiresAuth: true,
                     title: 'Payment Cards'
@@ -430,11 +440,83 @@ const routesUser = [
         },
     },
 ]
+const routesMaintenance = [
+    {
+        name: 'SetupWizard',
+        path: '/setup-wizard',
+        component: SetupWizard,
+        meta: {
+            requiresAuth: false
+        },
+        children: [
+            {
+                name: 'PurchaseCode',
+                path: '/setup-wizard/purchase-code',
+                component: PurchaseCode,
+                meta: {
+                    requiresAuth: false,
+                },
+            },
+            {
+                name: 'Database',
+                path: '/setup-wizard/database',
+                component: Database,
+                meta: {
+                    requiresAuth: false,
+                },
+            },
+            {
+                name: 'StripeCredentials',
+                path: '/setup-wizard/stripe-credentials',
+                component: StripeCredentials,
+                meta: {
+                    requiresAuth: false,
+                },
+            },
+            {
+                name: 'BillingsDetail',
+                path: '/setup-wizard/billings',
+                component: BillingsDetail,
+                meta: {
+                    requiresAuth: false,
+                },
+            },
+            {
+                name: 'SubscriptionPlans',
+                path: '/setup-wizard/subscription-plans',
+                component: SubscriptionPlans,
+                meta: {
+                    requiresAuth: false,
+                },
+            },
+            {
+                name: 'EnvironmentSetup',
+                path: '/setup-wizard/environment-setup',
+                component: EnvironmentSetup,
+                meta: {
+                    requiresAuth: false,
+                },
+            },
+            {
+                name: 'AppSetup',
+                path: '/setup-wizard/app-setup',
+                component: AppSetup,
+                meta: {
+                    requiresAuth: false,
+                },
+            },
+        ]
+    },
+]
 
 const router = new Router({
     mode: 'history',
     routes: [
-        ...routesAdmin, ...routesShared, ...routesAuth, ...routesUser
+        ...routesMaintenance,
+        ...routesShared,
+        ...routesAdmin,
+        ...routesAuth,
+        ...routesUser,
     ],
     scrollBehavior(to, from, savedPosition) {
         if (savedPosition) {
@@ -452,10 +534,10 @@ router.beforeEach((to, from, next) => {
         // if not, redirect to login page.
 
         //if ( ! store.getters.isLogged) {
-        if ( false ) {
+        if (false) {
             next({
                 name: 'SignIn',
-                query: { redirect: to.fullPath }
+                query: {redirect: to.fullPath}
             })
         } else {
             next()

resources/js/views/Profile.vue

@@ -63,7 +63,7 @@
                         </div>
                     </router-link>
 
-                    <router-link v-if="canShowSubscriptionSettings" replace :to="{name: 'PaymentCards'}" class="menu-list-item link">
+                    <router-link v-if="canShowSubscriptionSettings" replace :to="{name: 'PaymentMethods'}" class="menu-list-item link">
                         <div class="icon">
                             <credit-card-icon size="17"></credit-card-icon>
                         </div>
@@ -144,7 +144,7 @@
                 return this.user.data.attributes.subscription ? 'green' : 'purple'
             },
             canShowSubscriptionSettings() {
-                return this.config.isSaaS && this.user.data.attributes.stripe_customer
+                return this.config.isSaaS
             }
         },
         data() {

resources/js/views/SetupWIzard/AppSetup.vue

@@ -0,0 +1,124 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Database Credentials-->
+        <AuthContent name="database-credentials" :visible="true">
+            <div class="content-headline">
+                <settings-icon size="40" class="title-icon"></settings-icon>
+                <h1>Setup Wizard</h1>
+                <h2>Set up your application appearance, analytics, etc.</h2>
+            </div>
+
+            <ValidationObserver @submit.prevent="appSetupSubmit" ref="appSetup" v-slot="{ invalid }" tag="form" class="form block-form">
+                <FormLabel>General Settings</FormLabel>
+
+                <div class="block-wrapper">
+                    <label>Mail Driver:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Driver" rules="required" v-slot="{ errors }">
+                        <input v-model="mail.driver" placeholder="Type your mail driver" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+
+                <FormLabel class="mt-70">Others Information</FormLabel>
+
+                <div class="submit-wrapper">
+                    <AuthButton icon="chevron-right" text="Save and Create Admin" :loading="isLoading" :disabled="isLoading"/>
+                </div>
+
+            </ValidationObserver>
+        </AuthContent>
+    </AuthContentWrapper>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import AuthContent from '@/components/Auth/AuthContent'
+    import AuthButton from '@/components/Auth/AuthButton'
+    import { SettingsIcon } from 'vue-feather-icons'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'EnvironmentSetup',
+        components: {
+            AuthContentWrapper,
+            ValidationProvider,
+            ValidationObserver,
+            SettingsIcon,
+            SelectInput,
+            AuthContent,
+            AuthButton,
+            FormLabel,
+            required,
+            InfoBox,
+        },
+        data() {
+            return {
+                isLoading: false,
+                storageServiceList: [
+                    {
+                        label: 'Local Driver',
+                        value: 'local',
+                    },
+                    {
+                        label: 'Amazon Web Services S3',
+                        value: 's3',
+                    },
+                    {
+                        label: 'Digital Ocean Spaces',
+                        value: 'spaces',
+                    },
+                ],
+                encryptionList: [
+                    {
+                        label: 'TLS',
+                        value: 'tls',
+                    },
+                    {
+                        label: 'SSL',
+                        value: 'ssl',
+                    },
+                ],
+                storage: {
+                    driver: 'local',
+                    key: '',
+                    secret: '',
+                    endpoint: '',
+                    region: '',
+                    bucket: '',
+                },
+                mail: {
+                    driver: '',
+                    host: '',
+                    port: '',
+                    username: '',
+                    password: '',
+                    encryption: '',
+                }
+            }
+        },
+        methods: {
+            async appSetupSubmit() {
+                this.$router.push({name: 'AppSetup'})
+            },
+        },
+        created() {
+            var container = document.getElementById('vue-file-manager')
+            container.scrollTop = 0
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    //@import '@assets/vue-file-manager/_auth-form';
+    @import '@assets/vue-file-manager/_forms';
+    @import '@assets/vue-file-manager/_auth';
+    @import '@assets/vue-file-manager/_setup_wizard';
+</style>

resources/js/views/SetupWIzard/BillingsDetail.vue

@@ -0,0 +1,402 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Database Credentials-->
+        <AuthContent name="database-credentials" :visible="true">
+            <div class="content-headline">
+                <settings-icon size="40" class="title-icon"></settings-icon>
+                <h1>Setup Wizard</h1>
+                <h2>Set up you billing information.</h2>
+            </div>
+
+            <ValidationObserver @submit.prevent="billingInformationSubmit" ref="billingInformation" v-slot="{ invalid }"
+                                tag="form" class="form block-form">
+                <FormLabel>Company Information</FormLabel>
+
+                <div class="block-wrapper">
+                    <label>Company Name:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Name"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_name" placeholder="Type your company name"
+                               type="text"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>VAT Number:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Vat Number"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_vat_number" placeholder="Type your VAT number"
+                               type="text"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <FormLabel class="mt-70">Billing Information</FormLabel>
+
+                <div class="block-wrapper">
+                    <label>Billing Country:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Country"
+                                        rules="required" v-slot="{ errors }">
+                        <SelectInput v-model="billingInformation.billing_country" :options="countries" placeholder="Select your billing country" :isError="errors[0]"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Billing Address:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Address"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_address" placeholder="Select your billing address"
+                               type="text"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="wrapper-inline">
+                    <div class="block-wrapper">
+                        <label>Billing City:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing City"
+                                            rules="required" v-slot="{ errors }">
+                            <input v-model="billingInformation.billing_city" placeholder="Select your billing city"
+                                   type="text"/>
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+                    <div class="block-wrapper">
+                        <label>Billing Postal Code:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Postal Code"
+                                            rules="required" v-slot="{ errors }">
+                            <input v-model="billingInformation.billing_postal_code"
+                                   placeholder="Select your billing postal code" type="text"/>
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Billing State:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing State"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_state" placeholder="Select your billing state"
+                               type="text"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="submit-wrapper">
+                    <AuthButton icon="chevron-right" text="Save and Create Plans" :loading="isLoading"
+                                :disabled="isLoading"/>
+                </div>
+
+            </ValidationObserver>
+        </AuthContent>
+    </AuthContentWrapper>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import AuthContent from '@/components/Auth/AuthContent'
+    import AuthButton from '@/components/Auth/AuthButton'
+    import {SettingsIcon} from 'vue-feather-icons'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'BillingsDetail',
+        components: {
+            AuthContentWrapper,
+            ValidationProvider,
+            ValidationObserver,
+            SettingsIcon,
+            SelectInput,
+            AuthContent,
+            AuthButton,
+            FormLabel,
+            required,
+            InfoBox,
+        },
+        data() {
+            return {
+                isLoading: false,
+                countries: [
+                    {label: 'Afghanistan', value: 'AF'},
+                    {label: 'Åland Islands', value: 'AX'},
+                    {label: 'Albania', value: 'AL'},
+                    {label: 'Algeria', value: 'DZ'},
+                    {label: 'American Samoa', value: 'AS'},
+                    {label: 'AndorrA', value: 'AD'},
+                    {label: 'Angola', value: 'AO'},
+                    {label: 'Anguilla', value: 'AI'},
+                    {label: 'Antarctica', value: 'AQ'},
+                    {label: 'Antigua and Barbuda', value: 'AG'},
+                    {label: 'Argentina', value: 'AR'},
+                    {label: 'Armenia', value: 'AM'},
+                    {label: 'Aruba', value: 'AW'},
+                    {label: 'Australia', value: 'AU'},
+                    {label: 'Austria', value: 'AT'},
+                    {label: 'Azerbaijan', value: 'AZ'},
+                    {label: 'Bahamas', value: 'BS'},
+                    {label: 'Bahrain', value: 'BH'},
+                    {label: 'Bangladesh', value: 'BD'},
+                    {label: 'Barbados', value: 'BB'},
+                    {label: 'Belarus', value: 'BY'},
+                    {label: 'Belgium', value: 'BE'},
+                    {label: 'Belize', value: 'BZ'},
+                    {label: 'Benin', value: 'BJ'},
+                    {label: 'Bermuda', value: 'BM'},
+                    {label: 'Bhutan', value: 'BT'},
+                    {label: 'Bolivia', value: 'BO'},
+                    {label: 'Bosnia and Herzegovina', value: 'BA'},
+                    {label: 'Botswana', value: 'BW'},
+                    {label: 'Bouvet Island', value: 'BV'},
+                    {label: 'Brazil', value: 'BR'},
+                    {label: 'British Indian Ocean Territory', value: 'IO'},
+                    {label: 'Brunei Darussalam', value: 'BN'},
+                    {label: 'Bulgaria', value: 'BG'},
+                    {label: 'Burkina Faso', value: 'BF'},
+                    {label: 'Burundi', value: 'BI'},
+                    {label: 'Cambodia', value: 'KH'},
+                    {label: 'Cameroon', value: 'CM'},
+                    {label: 'Canada', value: 'CA'},
+                    {label: 'Cape Verde', value: 'CV'},
+                    {label: 'Cayman Islands', value: 'KY'},
+                    {label: 'Central African Republic', value: 'CF'},
+                    {label: 'Chad', value: 'TD'},
+                    {label: 'Chile', value: 'CL'},
+                    {label: 'China', value: 'CN'},
+                    {label: 'Christmas Island', value: 'CX'},
+                    {label: 'Cocos (Keeling) Islands', value: 'CC'},
+                    {label: 'Colombia', value: 'CO'},
+                    {label: 'Comoros', value: 'KM'},
+                    {label: 'Congo', value: 'CG'},
+                    {label: 'Congo, The Democratic Republic of the', value: 'CD'},
+                    {label: 'Cook Islands', value: 'CK'},
+                    {label: 'Costa Rica', value: 'CR'},
+                    {label: 'Cote D\'Ivoire', value: 'CI'},
+                    {label: 'Croatia', value: 'HR'},
+                    {label: 'Cuba', value: 'CU'},
+                    {label: 'Cyprus', value: 'CY'},
+                    {label: 'Czech Republic', value: 'CZ'},
+                    {label: 'Denmark', value: 'DK'},
+                    {label: 'Djibouti', value: 'DJ'},
+                    {label: 'Dominica', value: 'DM'},
+                    {label: 'Dominican Republic', value: 'DO'},
+                    {label: 'Ecuador', value: 'EC'},
+                    {label: 'Egypt', value: 'EG'},
+                    {label: 'El Salvador', value: 'SV'},
+                    {label: 'Equatorial Guinea', value: 'GQ'},
+                    {label: 'Eritrea', value: 'ER'},
+                    {label: 'Estonia', value: 'EE'},
+                    {label: 'Ethiopia', value: 'ET'},
+                    {label: 'Falkland Islands (Malvinas)', value: 'FK'},
+                    {label: 'Faroe Islands', value: 'FO'},
+                    {label: 'Fiji', value: 'FJ'},
+                    {label: 'Finland', value: 'FI'},
+                    {label: 'France', value: 'FR'},
+                    {label: 'French Guiana', value: 'GF'},
+                    {label: 'French Polynesia', value: 'PF'},
+                    {label: 'French Southern Territories', value: 'TF'},
+                    {label: 'Gabon', value: 'GA'},
+                    {label: 'Gambia', value: 'GM'},
+                    {label: 'Georgia', value: 'GE'},
+                    {label: 'Germany', value: 'DE'},
+                    {label: 'Ghana', value: 'GH'},
+                    {label: 'Gibraltar', value: 'GI'},
+                    {label: 'Greece', value: 'GR'},
+                    {label: 'Greenland', value: 'GL'},
+                    {label: 'Grenada', value: 'GD'},
+                    {label: 'Guadeloupe', value: 'GP'},
+                    {label: 'Guam', value: 'GU'},
+                    {label: 'Guatemala', value: 'GT'},
+                    {label: 'Guernsey', value: 'GG'},
+                    {label: 'Guinea', value: 'GN'},
+                    {label: 'Guinea-Bissau', value: 'GW'},
+                    {label: 'Guyana', value: 'GY'},
+                    {label: 'Haiti', value: 'HT'},
+                    {label: 'Heard Island and Mcdonald Islands', value: 'HM'},
+                    {label: 'Holy See (Vatican City State)', value: 'VA'},
+                    {label: 'Honduras', value: 'HN'},
+                    {label: 'Hong Kong', value: 'HK'},
+                    {label: 'Hungary', value: 'HU'},
+                    {label: 'Iceland', value: 'IS'},
+                    {label: 'India', value: 'IN'},
+                    {label: 'Indonesia', value: 'ID'},
+                    {label: 'Iran, Islamic Republic Of', value: 'IR'},
+                    {label: 'Iraq', value: 'IQ'},
+                    {label: 'Ireland', value: 'IE'},
+                    {label: 'Isle of Man', value: 'IM'},
+                    {label: 'Israel', value: 'IL'},
+                    {label: 'Italy', value: 'IT'},
+                    {label: 'Jamaica', value: 'JM'},
+                    {label: 'Japan', value: 'JP'},
+                    {label: 'Jersey', value: 'JE'},
+                    {label: 'Jordan', value: 'JO'},
+                    {label: 'Kazakhstan', value: 'KZ'},
+                    {label: 'Kenya', value: 'KE'},
+                    {label: 'Kiribati', value: 'KI'},
+                    {label: 'Korea, Democratic People\'S Republic of', value: 'KP'},
+                    {label: 'Korea, Republic of', value: 'KR'},
+                    {label: 'Kuwait', value: 'KW'},
+                    {label: 'Kyrgyzstan', value: 'KG'},
+                    {label: 'Lao People\'S Democratic Republic', value: 'LA'},
+                    {label: 'Latvia', value: 'LV'},
+                    {label: 'Lebanon', value: 'LB'},
+                    {label: 'Lesotho', value: 'LS'},
+                    {label: 'Liberia', value: 'LR'},
+                    {label: 'Libyan Arab Jamahiriya', value: 'LY'},
+                    {label: 'Liechtenstein', value: 'LI'},
+                    {label: 'Lithuania', value: 'LT'},
+                    {label: 'Luxembourg', value: 'LU'},
+                    {label: 'Macao', value: 'MO'},
+                    {label: 'Macedonia, The Former Yugoslav Republic of', value: 'MK'},
+                    {label: 'Madagascar', value: 'MG'},
+                    {label: 'Malawi', value: 'MW'},
+                    {label: 'Malaysia', value: 'MY'},
+                    {label: 'Maldives', value: 'MV'},
+                    {label: 'Mali', value: 'ML'},
+                    {label: 'Malta', value: 'MT'},
+                    {label: 'Marshall Islands', value: 'MH'},
+                    {label: 'Martinique', value: 'MQ'},
+                    {label: 'Mauritania', value: 'MR'},
+                    {label: 'Mauritius', value: 'MU'},
+                    {label: 'Mayotte', value: 'YT'},
+                    {label: 'Mexico', value: 'MX'},
+                    {label: 'Micronesia, Federated States of', value: 'FM'},
+                    {label: 'Moldova, Republic of', value: 'MD'},
+                    {label: 'Monaco', value: 'MC'},
+                    {label: 'Mongolia', value: 'MN'},
+                    {label: 'Montserrat', value: 'MS'},
+                    {label: 'Morocco', value: 'MA'},
+                    {label: 'Mozambique', value: 'MZ'},
+                    {label: 'Myanmar', value: 'MM'},
+                    {label: 'Namibia', value: 'NA'},
+                    {label: 'Nauru', value: 'NR'},
+                    {label: 'Nepal', value: 'NP'},
+                    {label: 'Netherlands', value: 'NL'},
+                    {label: 'Netherlands Antilles', value: 'AN'},
+                    {label: 'New Caledonia', value: 'NC'},
+                    {label: 'New Zealand', value: 'NZ'},
+                    {label: 'Nicaragua', value: 'NI'},
+                    {label: 'Niger', value: 'NE'},
+                    {label: 'Nigeria', value: 'NG'},
+                    {label: 'Niue', value: 'NU'},
+                    {label: 'Norfolk Island', value: 'NF'},
+                    {label: 'Northern Mariana Islands', value: 'MP'},
+                    {label: 'Norway', value: 'NO'},
+                    {label: 'Oman', value: 'OM'},
+                    {label: 'Pakistan', value: 'PK'},
+                    {label: 'Palau', value: 'PW'},
+                    {label: 'Palestinian Territory, Occupied', value: 'PS'},
+                    {label: 'Panama', value: 'PA'},
+                    {label: 'Papua New Guinea', value: 'PG'},
+                    {label: 'Paraguay', value: 'PY'},
+                    {label: 'Peru', value: 'PE'},
+                    {label: 'Philippines', value: 'PH'},
+                    {label: 'Pitcairn', value: 'PN'},
+                    {label: 'Poland', value: 'PL'},
+                    {label: 'Portugal', value: 'PT'},
+                    {label: 'Puerto Rico', value: 'PR'},
+                    {label: 'Qatar', value: 'QA'},
+                    {label: 'Reunion', value: 'RE'},
+                    {label: 'Romania', value: 'RO'},
+                    {label: 'Russian Federation', value: 'RU'},
+                    {label: 'RWANDA', value: 'RW'},
+                    {label: 'Saint Helena', value: 'SH'},
+                    {label: 'Saint Kitts and Nevis', value: 'KN'},
+                    {label: 'Saint Lucia', value: 'LC'},
+                    {label: 'Saint Pierre and Miquelon', value: 'PM'},
+                    {label: 'Saint Vincent and the Grenadines', value: 'VC'},
+                    {label: 'Samoa', value: 'WS'},
+                    {label: 'San Marino', value: 'SM'},
+                    {label: 'Sao Tome and Principe', value: 'ST'},
+                    {label: 'Saudi Arabia', value: 'SA'},
+                    {label: 'Senegal', value: 'SN'},
+                    {label: 'Serbia and Montenegro', value: 'CS'},
+                    {label: 'Seychelles', value: 'SC'},
+                    {label: 'Sierra Leone', value: 'SL'},
+                    {label: 'Singapore', value: 'SG'},
+                    {label: 'Slovakia', value: 'SK'},
+                    {label: 'Slovenia', value: 'SI'},
+                    {label: 'Solomon Islands', value: 'SB'},
+                    {label: 'Somalia', value: 'SO'},
+                    {label: 'South Africa', value: 'ZA'},
+                    {label: 'South Georgia and the South Sandwich Islands', value: 'GS'},
+                    {label: 'Spain', value: 'ES'},
+                    {label: 'Sri Lanka', value: 'LK'},
+                    {label: 'Sudan', value: 'SD'},
+                    {label: 'Suriname', value: 'SR'},
+                    {label: 'Svalbard and Jan Mayen', value: 'SJ'},
+                    {label: 'Swaziland', value: 'SZ'},
+                    {label: 'Sweden', value: 'SE'},
+                    {label: 'Switzerland', value: 'CH'},
+                    {label: 'Syrian Arab Republic', value: 'SY'},
+                    {label: 'Taiwan, Province of China', value: 'TW'},
+                    {label: 'Tajikistan', value: 'TJ'},
+                    {label: 'Tanzania, United Republic of', value: 'TZ'},
+                    {label: 'Thailand', value: 'TH'},
+                    {label: 'Timor-Leste', value: 'TL'},
+                    {label: 'Togo', value: 'TG'},
+                    {label: 'Tokelau', value: 'TK'},
+                    {label: 'Tonga', value: 'TO'},
+                    {label: 'Trinidad and Tobago', value: 'TT'},
+                    {label: 'Tunisia', value: 'TN'},
+                    {label: 'Turkey', value: 'TR'},
+                    {label: 'Turkmenistan', value: 'TM'},
+                    {label: 'Turks and Caicos Islands', value: 'TC'},
+                    {label: 'Tuvalu', value: 'TV'},
+                    {label: 'Uganda', value: 'UG'},
+                    {label: 'Ukraine', value: 'UA'},
+                    {label: 'United Arab Emirates', value: 'AE'},
+                    {label: 'United Kingdom', value: 'GB'},
+                    {label: 'United States', value: 'US'},
+                    {label: 'United States Minor Outlying Islands', value: 'UM'},
+                    {label: 'Uruguay', value: 'UY'},
+                    {label: 'Uzbekistan', value: 'UZ'},
+                    {label: 'Vanuatu', value: 'VU'},
+                    {label: 'Venezuela', value: 'VE'},
+                    {label: 'Viet Nam', value: 'VN'},
+                    {label: 'Virgin Islands, British', value: 'VG'},
+                    {label: 'Virgin Islands, U.S.', value: 'VI'},
+                    {label: 'Wallis and Futuna', value: 'WF'},
+                    {label: 'Western Sahara', value: 'EH'},
+                    {label: 'Yemen', value: 'YE'},
+                    {label: 'Zambia', value: 'ZM'},
+                    {label: 'Zimbabwe', value: 'ZW'}
+                ],
+                billingInformation: {
+                    billing_phone_number: '',
+                    billing_postal_code: '',
+                    billing_vat_number: '',
+                    billing_address: '',
+                    billing_country: '',
+                    billing_state: '',
+                    billing_city: '',
+                    billing_name: '',
+                }
+            }
+        },
+        methods: {
+            async billingInformationSubmit() {
+                this.$router.push({name: 'SubscriptionPlans'})
+            },
+        },
+        created() {
+            var container = document.getElementById('vue-file-manager')
+            container.scrollTop = 0
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    //@import '@assets/vue-file-manager/_auth-form';
+    @import '@assets/vue-file-manager/_forms';
+    @import '@assets/vue-file-manager/_auth';
+    @import '@assets/vue-file-manager/_setup_wizard';
+</style>

resources/js/views/SetupWIzard/Database.vue

@@ -0,0 +1,147 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Database Credentials-->
+        <AuthContent name="database-credentials" :visible="true">
+            <div class="content-headline">
+                <settings-icon size="40" class="title-icon"></settings-icon>
+                <h1>Setup Wizard</h1>
+                <h2>Set up your database credentials.</h2>
+            </div>
+
+            <ValidationObserver @submit.prevent="databaseCredentialsSubmit" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="form block-form">
+                <FormLabel>Database Credentials</FormLabel>
+                <InfoBox>
+                    <p>Firstly, create your database credentials in your database client. For how to, here is Usefull resources:</p>
+                    <ul>
+                        <li>
+                            <a href="#" target="_blank">1. cPanel - MySQL Database Wizard</a>
+                            <a href="#" target="_blank">2. Plesk - Website databases</a>
+                        </li>
+                    </ul>
+                </InfoBox>
+
+                <div class="block-wrapper">
+                    <label>Connection:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="connection" rules="required" v-slot="{ errors }">
+                        <SelectInput v-model="databaseCredentials.connection" :options="connectionList" default="mysql" placeholder="Select your database connection" :isError="errors[0]"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Host:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="connection" rules="required" v-slot="{ errors }">
+                        <input v-model="databaseCredentials.host" placeholder="Type your database host" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Port:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="connection" rules="required" v-slot="{ errors }">
+                        <input v-model="databaseCredentials.port" placeholder="Type your database port" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Database Name:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="connection" rules="required" v-slot="{ errors }">
+                        <input v-model="databaseCredentials.name" placeholder="Select your database name" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Database Password:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="connection" rules="required" v-slot="{ errors }">
+                        <input v-model="databaseCredentials.password" placeholder="Select your database password" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="submit-wrapper">
+                    <AuthButton icon="chevron-right" text="Test your Connection and Continue" :loading="isLoading" :disabled="isLoading"/>
+                </div>
+
+            </ValidationObserver>
+        </AuthContent>
+    </AuthContentWrapper>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import AuthContent from '@/components/Auth/AuthContent'
+    import AuthButton from '@/components/Auth/AuthButton'
+    import { SettingsIcon } from 'vue-feather-icons'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'Database',
+        components: {
+            AuthContentWrapper,
+            ValidationProvider,
+            ValidationObserver,
+            SettingsIcon,
+            SelectInput,
+            AuthContent,
+            AuthButton,
+            FormLabel,
+            required,
+            InfoBox,
+        },
+        data() {
+            return {
+                isLoading: false,
+                connectionList: [
+                    {
+                        label: 'MySQL',
+                        value: 'mysql',
+                    },
+                    {
+                        label: 'SQLite',
+                        value: 'sqlite',
+                    },
+                    {
+                        label: 'PqSQL',
+                        value: 'pgsql',
+                    },
+                    {
+                        label: 'SQLSry',
+                        value: 'sqlsrv',
+                    },
+                ],
+                databaseCredentials: {
+                    connection: '',
+                    host: '',
+                    port: '',
+                    name: '',
+                    password: '',
+                }
+            }
+        },
+        methods: {
+            async databaseCredentialsSubmit() {
+                this.$router.push({name: 'StripeCredentials'})
+            },
+        },
+        created() {
+            var container = document.getElementById('vue-file-manager')
+            container.scrollTop = 0
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    //@import '@assets/vue-file-manager/_auth-form';
+    @import '@assets/vue-file-manager/_forms';
+    @import '@assets/vue-file-manager/_auth';
+    @import '@assets/vue-file-manager/_setup_wizard';
+</style>

resources/js/views/SetupWIzard/EnvironmentSetup.vue

@@ -0,0 +1,218 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Database Credentials-->
+        <AuthContent name="database-credentials" :visible="true">
+            <div class="content-headline">
+                <settings-icon size="40" class="title-icon"></settings-icon>
+                <h1>Setup Wizard</h1>
+                <h2>Set up your storage driver and email client.</h2>
+            </div>
+
+            <ValidationObserver @submit.prevent="EnvironmentSetupSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="form block-form">
+                <InfoBox>
+                    <p>If you don’t know which storage set, select <b>'Local Driver'</b>. For more info, where
+                        you can host your files <a href="https://vuefilemanager.com/docs/guide/storage.html#introduction" target="_blank">visit our guide</a>.</p>
+                </InfoBox>
+
+                <FormLabel>Storage Setup</FormLabel>
+
+                <div class="block-wrapper">
+                    <label>Storage Service:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage Service" rules="required" v-slot="{ errors }">
+                        <SelectInput v-model="storage.driver" :options="storageServiceList" default="local" placeholder="Select your storage service" :isError="errors[0]"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="storage-additionals" v-if="storage.driver !== 'local'">
+                    <div class="block-wrapper">
+                        <label>Key:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Key" rules="required" v-slot="{ errors }">
+                            <input v-model="storage.key" placeholder="Paste your key" type="text" />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+                    <div class="block-wrapper">
+                        <label>Secret:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret" rules="required" v-slot="{ errors }">
+                            <input v-model="storage.secret" placeholder="Paste your secret" type="text" />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+                    <div class="block-wrapper">
+                        <label>Endpoint:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Endpoint" rules="required" v-slot="{ errors }">
+                            <input v-model="storage.endpoint" placeholder="Type your endpoint" type="text" />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+                    <div class="block-wrapper">
+                        <label>Region:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Region" rules="required" v-slot="{ errors }">
+                            <input v-model="storage.region" placeholder="Type your region" type="text" />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+                    <div class="block-wrapper">
+                        <label>Bucket:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Bucket" rules="required" v-slot="{ errors }">
+                            <input v-model="storage.bucket" placeholder="Type your bucket name" type="text" />
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+
+                    <InfoBox>
+                        <p>Later, you can edit these data in your <b>.env</b> file which is located in app root folder.</p>
+                    </InfoBox>
+                </div>
+
+                <FormLabel class="mt-70">Email Setup</FormLabel>
+
+                <div class="block-wrapper">
+                    <label>Mail Driver:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Driver" rules="required" v-slot="{ errors }">
+                        <input v-model="mail.driver" placeholder="Type your mail driver" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Mail Host:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Host" rules="required" v-slot="{ errors }">
+                        <input v-model="mail.host" placeholder="Type your mail host" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Mail Port:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Port" rules="required" v-slot="{ errors }">
+                        <input v-model="mail.port" placeholder="Type your mail port" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Mail Username:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Username" rules="required" v-slot="{ errors }">
+                        <input v-model="mail.username" placeholder="Type your mail username" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Mail Password:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Password" rules="required" v-slot="{ errors }">
+                        <input v-model="mail.password" placeholder="Type your mail password" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Mail Encryption:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Encryption" rules="required" v-slot="{ errors }">
+                        <SelectInput v-model="mail.encryption" :options="encryptionList" placeholder="Select your mail encryption" :isError="errors[0]"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="submit-wrapper">
+                    <AuthButton icon="chevron-right" text="Save and Set Billings" :loading="isLoading" :disabled="isLoading"/>
+                </div>
+
+            </ValidationObserver>
+        </AuthContent>
+    </AuthContentWrapper>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import AuthContent from '@/components/Auth/AuthContent'
+    import AuthButton from '@/components/Auth/AuthButton'
+    import { SettingsIcon } from 'vue-feather-icons'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'EnvironmentSetup',
+        components: {
+            AuthContentWrapper,
+            ValidationProvider,
+            ValidationObserver,
+            SettingsIcon,
+            SelectInput,
+            AuthContent,
+            AuthButton,
+            FormLabel,
+            required,
+            InfoBox,
+        },
+        data() {
+            return {
+                isLoading: false,
+                storageServiceList: [
+                    {
+                        label: 'Local Driver',
+                        value: 'local',
+                    },
+                    {
+                        label: 'Amazon Web Services S3',
+                        value: 's3',
+                    },
+                    {
+                        label: 'Digital Ocean Spaces',
+                        value: 'spaces',
+                    },
+                ],
+                encryptionList: [
+                    {
+                        label: 'TLS',
+                        value: 'tls',
+                    },
+                    {
+                        label: 'SSL',
+                        value: 'ssl',
+                    },
+                ],
+                storage: {
+                    driver: 'local',
+                    key: '',
+                    secret: '',
+                    endpoint: '',
+                    region: '',
+                    bucket: '',
+                },
+                mail: {
+                    driver: '',
+                    host: '',
+                    port: '',
+                    username: '',
+                    password: '',
+                    encryption: '',
+                }
+            }
+        },
+        methods: {
+            async EnvironmentSetupSubmit() {
+                this.$router.push({name: 'AppSetup'})
+            },
+        },
+        created() {
+            var container = document.getElementById('vue-file-manager')
+            container.scrollTop = 0
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    //@import '@assets/vue-file-manager/_auth-form';
+    @import '@assets/vue-file-manager/_forms';
+    @import '@assets/vue-file-manager/_auth';
+    @import '@assets/vue-file-manager/_setup_wizard';
+</style>

resources/js/views/SetupWIzard/PurchaseCode.vue

@@ -0,0 +1,107 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Licence Verify-->
+        <AuthContent name="licence-verify" :visible="true">
+
+            <div class="content-headline">
+                <settings-icon size="40" class="title-icon"></settings-icon>
+                <h1>Setup Wizard</h1>
+                <h2>Please set up your application before continue.</h2>
+            </div>
+
+            <ValidationObserver @submit.prevent="verifyPurchaseCode" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="form inline-form">
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="PurchaseCode" rules="required" v-slot="{ errors }">
+                    <input v-model="licence.purchaseCode" placeholder="Paste your purchase code" type="text" :class="{'is-error': errors[0]}"/>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+                <AuthButton icon="chevron-right" text="Verify" :loading="isLoading" :disabled="isLoading"/>
+            </ValidationObserver>
+
+            <p class="additional-link">
+                <a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-" target="_blank">
+                    Where I can find purchase code?
+                </a>
+                Don’t have purchase code?
+            </p>
+        </AuthContent>
+    </AuthContentWrapper>
+</template>
+
+<script>
+    import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthContent from '@/components/Auth/AuthContent'
+    import AuthButton from '@/components/Auth/AuthButton'
+    import { SettingsIcon } from 'vue-feather-icons'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'PurchaseCode',
+        components: {
+            AuthContentWrapper,
+            ValidationProvider,
+            ValidationObserver,
+            SettingsIcon,
+            AuthContent,
+            AuthButton,
+            required,
+        },
+        data() {
+            return {
+                isLoading: false,
+
+                licence: {
+                    purchaseCode: ''
+                },
+            }
+        },
+        methods: {
+            async verifyPurchaseCode() {
+
+                this.$router.push({name: 'Database'})
+                return
+
+                // Validate fields
+                const isValid = await this.$refs.verifyPurchaseCode.validate();
+
+                if (!isValid) return;
+
+                // Start loading
+                this.isLoading = true
+
+                // Send request to get verify account
+                axios
+                    .post('/api/setup-wizard', {
+                        step: this.step,
+                        data: this.stepLicence,
+                    })
+                    .then(response => {
+
+                        // End loading
+                        this.isLoading = false
+
+                        // Go to new page
+                        this.step++
+                    })
+                    .catch(error => {
+
+                        // End loading
+                        this.isLoading = false
+                    })
+            },
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_auth-form';
+    @import '@assets/vue-file-manager/_auth';
+    @import '@assets/vue-file-manager/_setup_wizard';
+
+    .auth-form input {
+        min-width: 380px;
+    }
+</style>

resources/js/views/SetupWIzard/StripeCredentials.vue

@@ -0,0 +1,670 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Database Credentials-->
+        <AuthContent name="database-credentials" :visible="true">
+            <div class="content-headline">
+                <settings-icon size="40" class="title-icon"></settings-icon>
+                <h1>Setup Wizard</h1>
+                <h2>Set up your database credentials.</h2>
+            </div>
+
+            <ValidationObserver @submit.prevent="stripeCredentialsSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="form block-form">
+                <InfoBox>
+                    <p>If you don’t have stripe account, please <a href="#" target="_blank">register here</a> and get your Stripe Key, Stripe Secret and Stripe Webhook Secret.</p>
+                </InfoBox>
+
+                <FormLabel>Stripe Setup</FormLabel>
+
+                <div class="block-wrapper">
+                    <label>Stripe Currency:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Currency" rules="required" v-slot="{ errors }">
+                        <SelectInput v-model="stripeCredentials.currency" :options="currencyList" default="mysql" placeholder="Select your stripe currency" :isError="errors[0]"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <FormLabel class="mt-70">Stripe Credentials</FormLabel>
+
+                <div class="block-wrapper">
+                    <label>Stripe Key:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Key" rules="required" v-slot="{ errors }">
+                        <input v-model="stripeCredentials.key" placeholder="Type your stripe key" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Stripe Secret:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret" rules="required" v-slot="{ errors }">
+                        <input v-model="stripeCredentials.secret" placeholder="Type your stripe secret" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Stripe Webhook Secret:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook Secret" rules="required" v-slot="{ errors }">
+                        <input v-model="stripeCredentials.webhookSecret" placeholder="Type your stripe webhook secret" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Stripe Webhook URL:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook URL" rules="required" v-slot="{ errors }">
+                        <input :value="config.host + '/stripe/webhook'" placeholder="" type="text" disabled />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="submit-wrapper">
+                    <AuthButton icon="chevron-right" text="Save and Set Billings" :loading="isLoading" :disabled="isLoading"/>
+                </div>
+
+            </ValidationObserver>
+        </AuthContent>
+    </AuthContentWrapper>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import AuthContent from '@/components/Auth/AuthContent'
+    import AuthButton from '@/components/Auth/AuthButton'
+    import { SettingsIcon } from 'vue-feather-icons'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'StripeCredentials',
+        components: {
+            AuthContentWrapper,
+            ValidationProvider,
+            ValidationObserver,
+            SettingsIcon,
+            SelectInput,
+            AuthContent,
+            AuthButton,
+            FormLabel,
+            required,
+            InfoBox,
+        },
+        computed: {
+            ...mapGetters(['config']),
+        },
+        data() {
+            return {
+                isLoading: false,
+                currencyList: [
+                    {
+                        label: 'USD - United States Dollar',
+                        value: 'USD',
+                    },
+                    {
+                        label: 'EUR - Euro',
+                        value: 'EUR',
+                    },
+                    {
+                        label: 'GBP - British Pound',
+                        value: 'GBP',
+                    },
+                    {
+                        label: 'AFN - Afghan Afghani',
+                        value: 'AFN',
+                    },
+                    {
+                        label: 'ALL - Albanian Lek',
+                        value: 'ALL',
+                    },
+                    {
+                        label: 'DZD - Algerian Dinar',
+                        value: 'DZD',
+                    },
+                    {
+                        label: 'AOA - Angolan Kwanza',
+                        value: 'AOA',
+                    },
+                    {
+                        label: 'ARS - Argentine Peso',
+                        value: 'ARS',
+                    },
+                    {
+                        label: 'AMD - Armenian Dram',
+                        value: 'AMD',
+                    },
+                    {
+                        label: 'AWG - Aruban Florin',
+                        value: 'AWG',
+                    },
+                    {
+                        label: 'AUD - Australian Dollar',
+                        value: 'AUD',
+                    },
+                    {
+                        label: 'AZN - Azerbaijani Manat',
+                        value: 'AZN',
+                    },
+                    {
+                        label: 'BDT - Bangladeshi Taka',
+                        value: 'BDT',
+                    },
+                    {
+                        label: 'BBD - Barbadian Dollar',
+                        value: 'BBD',
+                    },
+                    {
+                        label: 'BZD - Belize Dollar',
+                        value: 'BZD',
+                    },
+                    {
+                        label: 'BMD - Bermudian Dollar',
+                        value: 'BMD',
+                    },
+                    {
+                        label: 'BOB - Bolivian Boliviano',
+                        value: 'BOB',
+                    },
+                    {
+                        label: 'BAM - Bosnia & Herzegovina Convertible Mark',
+                        value: 'BAM',
+                    },
+                    {
+                        label: 'BWP - Botswana Pula',
+                        value: 'BWP',
+                    },
+                    {
+                        label: 'BRL - Brazilian Real',
+                        value: 'BRL',
+                    },
+                    {
+                        label: 'BND - Brunei Dollar',
+                        value: 'BND',
+                    },
+                    {
+                        label: 'BGN - Bulgarian Lev',
+                        value: 'BGN',
+                    },
+                    {
+                        label: 'BIF - Burundian Franc',
+                        value: 'BIF',
+                    },
+                    {
+                        label: 'KHR - Cambodian Riel',
+                        value: 'KHR',
+                    },
+                    {
+                        label: 'CAD - Canadian Dollar',
+                        value: 'CAD',
+                    },
+                    {
+                        label: 'CVE - Cape Verdean Escudo',
+                        value: 'CVE',
+                    },
+                    {
+                        label: 'KYD - Cayman Islands Dollar',
+                        value: 'KYD',
+                    },
+                    {
+                        label: 'XAF - Central African Cfa Franc',
+                        value: 'XAF',
+                    },
+                    {
+                        label: 'XPF - Cfp Franc',
+                        value: 'XPF',
+                    },
+                    {
+                        label: 'CLP - Chilean Peso',
+                        value: 'CLP',
+                    },
+                    {
+                        label: 'CNY - Chinese Renminbi Yuan',
+                        value: 'CNY',
+                    },
+                    {
+                        label: 'COP - Colombian Peso',
+                        value: 'COP',
+                    },
+                    {
+                        label: 'KMF - Comorian Franc',
+                        value: 'KMF',
+                    },
+                    {
+                        label: 'CDF - Congolese Franc',
+                        value: 'CDF',
+                    },
+                    {
+                        label: 'CRC - Costa Rican Colón',
+                        value: 'CRC',
+                    },
+                    {
+                        label: 'HRK - Croatian Kuna',
+                        value: 'HRK',
+                    },
+                    {
+                        label: 'CZK - Czech Koruna',
+                        value: 'CZK',
+                    },
+                    {
+                        label: 'DKK - Danish Krone',
+                        value: 'DKK',
+                    },
+                    {
+                        label: 'DJF - Djiboutian Franc',
+                        value: 'DJF',
+                    },
+                    {
+                        label: 'DOP - Dominican Peso',
+                        value: 'DOP',
+                    },
+                    {
+                        label: 'XCD - East Caribbean Dollar',
+                        value: 'XCD',
+                    },
+                    {
+                        label: 'EGP - Egyptian Pound',
+                        value: 'EGP',
+                    },
+                    {
+                        label: 'ETB - Ethiopian Birr',
+                        value: 'ETB',
+                    },
+                    {
+                        label: 'FKP - Falkland Islands Pound',
+                        value: 'FKP',
+                    },
+                    {
+                        label: 'FJD - Fijian Dollar',
+                        value: 'FJD',
+                    },
+                    {
+                        label: 'GMD - Gambian Dalasi',
+                        value: 'GMD',
+                    },
+                    {
+                        label: 'GEL - Georgian Lari',
+                        value: 'GEL',
+                    },
+                    {
+                        label: 'GIP - Gibraltar Pound',
+                        value: 'GIP',
+                    },
+                    {
+                        label: 'GTQ - Guatemalan Quetzal',
+                        value: 'GTQ',
+                    },
+                    {
+                        label: 'GNF - Guinean Franc',
+                        value: 'GNF',
+                    },
+                    {
+                        label: 'GYD - Guyanese Dollar',
+                        value: 'GYD',
+                    },
+                    {
+                        label: 'HTG - Haitian Gourde',
+                        value: 'HTG',
+                    },
+                    {
+                        label: 'HNL - Honduran Lempira',
+                        value: 'HNL',
+                    },
+                    {
+                        label: 'HKD - Hong Kong Dollar',
+                        value: 'HKD',
+                    },
+                    {
+                        label: 'HUF - Hungarian Forint',
+                        value: 'HUF',
+                    },
+                    {
+                        label: 'ISK - Icelandic Króna',
+                        value: 'ISK',
+                    },
+                    {
+                        label: 'INR - Indian Rupee',
+                        value: 'INR',
+                    },
+                    {
+                        label: 'IDR - Indonesian Rupiah',
+                        value: 'IDR',
+                    },
+                    {
+                        label: 'ILS - Israeli New Sheqel',
+                        value: 'ILS',
+                    },
+                    {
+                        label: 'JMD - Jamaican Dollar',
+                        value: 'JMD',
+                    },
+                    {
+                        label: 'JPY - Japanese Yen',
+                        value: 'JPY',
+                    },
+                    {
+                        label: 'KZT - Kazakhstani Tenge',
+                        value: 'KZT',
+                    },
+                    {
+                        label: 'KES - Kenyan Shilling',
+                        value: 'KES',
+                    },
+                    {
+                        label: 'KGS - Kyrgyzstani Som',
+                        value: 'KGS',
+                    },
+                    {
+                        label: 'LAK - Lao Kip',
+                        value: 'LAK',
+                    },
+                    {
+                        label: 'LBP - Lebanese Pound',
+                        value: 'LBP',
+                    },
+                    {
+                        label: 'LSL - Lesotho Loti',
+                        value: 'LSL',
+                    },
+                    {
+                        label: 'LRD - Liberian Dollar',
+                        value: 'LRD',
+                    },
+                    {
+                        label: 'MOP - Macanese Pataca',
+                        value: 'MOP',
+                    },
+                    {
+                        label: 'MKD - Macedonian Denar',
+                        value: 'MKD',
+                    },
+                    {
+                        label: 'MGA - Malagasy Ariary',
+                        value: 'MGA',
+                    },
+                    {
+                        label: 'MWK - Malawian Kwacha',
+                        value: 'MWK',
+                    },
+                    {
+                        label: 'MYR - Malaysian Ringgit',
+                        value: 'MYR',
+                    },
+                    {
+                        label: 'MVR - Maldivian Rufiyaa',
+                        value: 'MVR',
+                    },
+                    {
+                        label: 'MRO - Mauritanian Ouguiya',
+                        value: 'MRO',
+                    },
+                    {
+                        label: 'MUR - Mauritian Rupee',
+                        value: 'MUR',
+                    },
+                    {
+                        label: 'MXN - Mexican Peso',
+                        value: 'MXN',
+                    },
+                    {
+                        label: 'MDL - Moldovan Leu',
+                        value: 'MDL',
+                    },
+                    {
+                        label: 'MNT - Mongolian Tögrög',
+                        value: 'MNT',
+                    },
+                    {
+                        label: 'MAD - Moroccan Dirham',
+                        value: 'MAD',
+                    },
+                    {
+                        label: 'MZN - Mozambican Metical',
+                        value: 'MZN',
+                    },
+                    {
+                        label: 'MMK - Myanmar Kyat',
+                        value: 'MMK',
+                    },
+                    {
+                        label: 'NAD - Namibian Dollar',
+                        value: 'NAD',
+                    },
+                    {
+                        label: 'NPR - Nepalese Rupee',
+                        value: 'NPR',
+                    },
+                    {
+                        label: 'ANG - Netherlands Antillean Gulden',
+                        value: 'ANG',
+                    },
+                    {
+                        label: 'TWD - New Taiwan Dollar',
+                        value: 'TWD',
+                    },
+                    {
+                        label: 'NZD - New Zealand Dollar',
+                        value: 'NZD',
+                    },
+                    {
+                        label: 'NIO - Nicaraguan Córdoba',
+                        value: 'NIO',
+                    },
+                    {
+                        label: 'NGN - Nigerian Naira',
+                        value: 'NGN',
+                    },
+                    {
+                        label: 'NOK - Norwegian Krone',
+                        value: 'NOK',
+                    },
+                    {
+                        label: 'PKR - Pakistani Rupee',
+                        value: 'PKR',
+                    },
+                    {
+                        label: 'PAB - Panamanian Balboa',
+                        value: 'PAB',
+                    },
+                    {
+                        label: 'PGK - Papua New Guinean Kina',
+                        value: 'PGK',
+                    },
+                    {
+                        label: 'PYG - Paraguayan Guaraní',
+                        value: 'PYG',
+                    },
+                    {
+                        label: 'PEN - Peruvian Nuevo Sol',
+                        value: 'PEN',
+                    },
+                    {
+                        label: 'PHP - Philippine Peso',
+                        value: 'PHP',
+                    },
+                    {
+                        label: 'PLN - Polish Złoty',
+                        value: 'PLN',
+                    },
+                    {
+                        label: 'QAR - Qatari Riyal',
+                        value: 'QAR',
+                    },
+                    {
+                        label: 'RON - Romanian Leu',
+                        value: 'RON',
+                    },
+                    {
+                        label: 'RUB - Russian Ruble',
+                        value: 'RUB',
+                    },
+                    {
+                        label: 'RWF - Rwandan Franc',
+                        value: 'RWF',
+                    },
+                    {
+                        label: 'STD - São Tomé and Príncipe Dobra',
+                        value: 'STD',
+                    },
+                    {
+                        label: 'SHP - Saint Helenian Pound',
+                        value: 'SHP',
+                    },
+                    {
+                        label: 'SVC - Salvadoran Colón',
+                        value: 'SVC',
+                    },
+                    {
+                        label: 'WST - Samoan Tala',
+                        value: 'WST',
+                    },
+                    {
+                        label: 'SAR - Saudi Riyal',
+                        value: 'SAR',
+                    },
+                    {
+                        label: 'RSD - Serbian Dinar',
+                        value: 'RSD',
+                    },
+                    {
+                        label: 'SCR - Seychellois Rupee',
+                        value: 'SCR',
+                    },
+                    {
+                        label: 'SLL - Sierra Leonean Leone',
+                        value: 'SLL',
+                    },
+                    {
+                        label: 'SGD - Singapore Dollar',
+                        value: 'SGD',
+                    },
+                    {
+                        label: 'SBD - Solomon Islands Dollar',
+                        value: 'SBD',
+                    },
+                    {
+                        label: 'SOS - Somali Shilling',
+                        value: 'SOS',
+                    },
+                    {
+                        label: 'ZAR - South African Rand',
+                        value: 'ZAR',
+                    },
+                    {
+                        label: 'KRW - South Korean Won',
+                        value: 'KRW',
+                    },
+                    {
+                        label: 'LKR - Sri Lankan Rupee',
+                        value: 'LKR',
+                    },
+                    {
+                        label: 'SRD - Surinamese Dollar',
+                        value: 'SRD',
+                    },
+                    {
+                        label: 'SZL - Swazi Lilangeni',
+                        value: 'SZL',
+                    },
+                    {
+                        label: 'SEK - Swedish Krona',
+                        value: 'SEK',
+                    },
+                    {
+                        label: 'CHF - Swiss Franc',
+                        value: 'CHF',
+                    },
+                    {
+                        label: 'TJS - Tajikistani Somoni',
+                        value: 'TJS',
+                    },
+                    {
+                        label: 'TZS - Tanzanian Shilling',
+                        value: 'TZS',
+                    },
+                    {
+                        label: 'THB - Thai Baht',
+                        value: 'THB',
+                    },
+                    {
+                        label: 'TOP - Tongan Paʻanga',
+                        value: 'TOP',
+                    },
+                    {
+                        label: 'TTD - Trinidad and Tobago Dollar',
+                        value: 'TTD',
+                    },
+                    {
+                        label: 'TRY - Turkish Lira',
+                        value: 'TRY',
+                    },
+                    {
+                        label: 'UGX - Ugandan Shilling',
+                        value: 'UGX',
+                    },
+                    {
+                        label: 'UAH - Ukrainian Hryvnia',
+                        value: 'UAH',
+                    },
+                    {
+                        label: 'AED - United Arab Emirates Dirham',
+                        value: 'AED',
+                    },
+                    {
+                        label: 'UYU - Uruguayan Peso',
+                        value: 'UYU',
+                    },
+                    {
+                        label: 'UZS - Uzbekistani Som',
+                        value: 'UZS',
+                    },
+                    {
+                        label: 'VUV - Vanuatu Vatu',
+                        value: 'VUV',
+                    },
+                    {
+                        label: 'VND - Vietnamese Đồng',
+                        value: 'VND',
+                    },
+                    {
+                        label: 'XOF - West African Cfa Franc',
+                        value: 'XOF',
+                    },
+                    {
+                        label: 'YER - Yemeni Rial',
+                        value: 'YER',
+                    },
+                    {
+                        label: 'ZMW - Zambian Kwacha',
+                        value: 'ZMW',
+                    },
+                ],
+                stripeCredentials: {
+                    key: '',
+                    secret: '',
+                    webhookSecret: '',
+                    currency: '',
+                }
+            }
+        },
+        methods: {
+            async stripeCredentialsSubmit() {
+                this.$router.push({name: 'BillingsDetail'})
+            },
+        },
+        created() {
+            var container = document.getElementById('vue-file-manager')
+            container.scrollTop = 0
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    //@import '@assets/vue-file-manager/_auth-form';
+    @import '@assets/vue-file-manager/_forms';
+    @import '@assets/vue-file-manager/_auth';
+    @import '@assets/vue-file-manager/_setup_wizard';
+</style>

resources/js/views/SetupWIzard/SubscriptionPlans.vue

@@ -0,0 +1,149 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Database Credentials-->
+        <AuthContent name="database-credentials" :visible="true">
+            <div class="content-headline">
+                <settings-icon size="40" class="title-icon"></settings-icon>
+                <h1>Setup Wizard</h1>
+                <h2>Set up plans for your customers.</h2>
+            </div>
+
+            <ValidationObserver @submit.prevent="subscriptionPlansSubmit" ref="subscriptionPlans" v-slot="{ invalid }" tag="form" class="form block-form">
+                <FormLabel>Create your plans</FormLabel>
+                <InfoBox>
+                    <p>Your plans will be <b>sorted automatically</b> in ascent order by plan price.</p>
+                </InfoBox>
+
+                <div class="duplicator">
+                    <div class="plan-item duplicator-item" v-for="(plan, index) in subscriptionPlans" :key="index++">
+                        <x-icon @click="removeRow(plan)" v-if="index !== 1" size="22" class="delete-item"></x-icon>
+                        <b class="duplicator-title">{{ index }}. Plan</b>
+                        <div class="block-wrapper">
+                            <label>Name:</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name"
+                                                rules="required" v-slot="{ errors }">
+                                <input v-model="plan.name" placeholder="Type your plan name"
+                                       type="text"/>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+
+                        <div class="block-wrapper">
+                            <label>Description (optional):</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description"
+                                                rules="required" v-slot="{ errors }">
+                                <textarea v-model="plan.description" placeholder="Type your plan description"></textarea>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+
+                        <div class="block-wrapper">
+                            <label>Price:</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Price"
+                                                rules="required" v-slot="{ errors }">
+                                <input v-model="plan.price" placeholder="Type your plan price" type="text"/>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+
+                        <div class="block-wrapper">
+                            <label>Storage Capacity:</label>
+                            <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage Capacity"
+                                                rules="required" v-slot="{ errors }">
+                                <input v-model="plan.storage_capacity" placeholder="Type your storage capacity" type="text"/>
+                                <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                            </ValidationProvider>
+                        </div>
+                    </div>
+
+                    <ButtonBase
+                            @click.native="addRow"
+                            class="duplicator-add-button"
+                            button-style="theme-solid"
+                    >Add New Plan</ButtonBase>
+                </div>
+
+                <div class="submit-wrapper">
+                    <AuthButton icon="chevron-right" text="Save and Go Next" :loading="isLoading" :disabled="isLoading"/>
+                </div>
+
+            </ValidationObserver>
+        </AuthContent>
+    </AuthContentWrapper>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthContentWrapper from '@/components/Auth/AuthContentWrapper'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import AuthContent from '@/components/Auth/AuthContent'
+    import AuthButton from '@/components/Auth/AuthButton'
+    import {SettingsIcon} from 'vue-feather-icons'
+    import {required} from 'vee-validate/dist/rules'
+    import { XIcon } from 'vue-feather-icons'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'subscriptionPlans',
+        components: {
+            AuthContentWrapper,
+            ValidationProvider,
+            ValidationObserver,
+            SettingsIcon,
+            SelectInput,
+            AuthContent,
+            ButtonBase,
+            AuthButton,
+            FormLabel,
+            required,
+            InfoBox,
+            XIcon,
+        },
+        data() {
+            return {
+                isLoading: false,
+                subscriptionPlans: [
+                    {
+                        id: 1,
+                        name: '',
+                        description: '',
+                        price: '',
+                        storage_capacity: '',
+                    }
+                ]
+            }
+        },
+        methods: {
+            async  subscriptionPlansSubmit() {
+                this.$router.push({name: 'EnvironmentSetup'})
+            },
+            addRow() {
+                this.subscriptionPlans.push({
+                    id: Math.floor(Math.random() * 10000000),
+                    name: '',
+                    description: '',
+                    price: '',
+                    storage_capacity: '',
+                })
+            },
+            removeRow(plan) {
+                this.subscriptionPlans = this.subscriptionPlans.filter(item => item.id !== plan.id)
+            },
+        },
+        created() {
+            var container = document.getElementById('vue-file-manager')
+            container.scrollTop = 0
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_forms';
+    @import '@assets/vue-file-manager/_auth';
+    @import '@assets/vue-file-manager/_setup_wizard';
+</style>

resources/js/views/SetupWizard.vue

@@ -0,0 +1,12 @@
+<template>
+    <router-view />
+</template>
+
+<script>
+    export default {
+        name: 'SetupWizard',
+        mounted() {
+            //this.$router.push({name: 'PurchaseCode'})
+        }
+    }
+</script>

resources/js/views/Upgrade/UpgradeBilling.vue

@@ -20,7 +20,7 @@
                             <b class="form-group-label">Payment Card:</b>
 
                             <!-- Pay by new credit card -->
-                            <div class="register-card" v-show="! defaultPaymentCard || payByNewCard">
+                            <div class="register-card" v-show="! defaultPaymentMethod || payByNewCard">
                                 <p class="payment-demo-disclaimer">
                                     For test your payment please use <b>4242 4242 4242 4242</b> as a card number, <b>11/22</b>
                                     as the expiration date and <b>123</b> as CVC number and ZIP <b>12345</b>.
@@ -34,20 +34,20 @@
                             </div>
 
                             <!--User registered payment card-->
-                            <div class="registered-cards" v-if="defaultPaymentCard && ! payByNewCard">
+                            <div class="registered-cards" v-if="defaultPaymentMethod && ! payByNewCard">
 
                                 <div class="credit-card" :class="{'is-error': isError}">
                                     <div class="card-number">
                                         <img class="credit-card-icon"
-                                             :src="$getCreditCardBrand(defaultPaymentCard.data.attributes.brand)"
-                                             :alt="defaultPaymentCard.data.attributes.brand">
+                                             :src="$getCreditCardBrand(defaultPaymentMethod.data.attributes.brand)"
+                                             :alt="defaultPaymentMethod.data.attributes.brand">
                                         <div class="credit-card-numbers">
-                                            •••• {{ defaultPaymentCard.data.attributes.last4 }}
+                                            •••• {{ defaultPaymentMethod.data.attributes.last4 }}
                                         </div>
                                         <ColorLabel color="purple">Default</ColorLabel>
                                     </div>
                                     <div class="expiration-date">
-                                        <span>{{ defaultPaymentCard.data.attributes.exp_month }} / {{ defaultPaymentCard.data.attributes.exp_year }}</span>
+                                        <span>{{ defaultPaymentMethod.data.attributes.exp_month }} / {{ defaultPaymentMethod.data.attributes.exp_year }}</span>
                                     </div>
                                 </div>
 
@@ -55,10 +55,10 @@
                                 <div class="change-payment" v-if="! isError">
                                     <span>Also you can</span>
 
-                                    <router-link v-if="paymentCards.data.length > 0" :to="{name: 'PaymentCards'}">change your
+                                    <router-link v-if="PaymentMethods.data.length > 0" :to="{name: 'PaymentMethods'}">change your
                                         default payment method
                                     </router-link>
-                                    <span v-if="paymentCards.data.length > 0">or</span>
+                                    <span v-if="PaymentMethods.data.length > 0">or</span>
 
                                     <a @click="payByNewCardForm">pay by new credit card.</a>
                                 </div>
@@ -69,7 +69,7 @@
                                     <span @click="payByNewCardForm"
                                           class="link">Please pay by another payment card</span>
                                     <span> or </span>
-                                    <router-link :to="{name: 'PaymentCards'}" class="link">Change your default payment
+                                    <router-link :to="{name: 'PaymentMethods'}" class="link">Change your default payment
                                         method
                                     </router-link>
                                 </div>
@@ -269,8 +269,8 @@
                 },
                 isLoading: true,
                 isSubmitted: false,
-                paymentCards: undefined,
-                defaultPaymentCard: undefined,
+                PaymentMethods: undefined,
+                defaultPaymentMethod: undefined,
 
                 errorMessage: undefined,
                 isError: false,
@@ -287,7 +287,7 @@
             },
             successOrder() {
                 // Update user data
-                //this.$store.dispatch('getAppData')
+                this.$store.dispatch('getAppData')
 
                 // End loading
                 this.isSubmitted = false
@@ -299,7 +299,7 @@
                 })
 
                 // Go to User page
-                //this.$router.push({name: 'Subscription'})
+                this.$router.push({name: 'Subscription'})
             },
             errorOrder(error) {
 
@@ -325,7 +325,7 @@
                 this.isSubmitted = true
 
                 // If user don't have credit card, register new
-                if (!this.defaultPaymentCard || this.payByNewCard) {
+                if (!this.defaultPaymentMethod || this.payByNewCard) {
 
                     console.log('Payment by new card');
 
@@ -365,7 +365,7 @@
                 }
 
                 // if user has credit card
-                if (this.defaultPaymentCard && !this.payByNewCard) {
+                if (this.defaultPaymentMethod && !this.payByNewCard) {
 
                     console.log('Payment by default card');
 
@@ -399,8 +399,8 @@
             axios.get('/api/user/payments')
                 .then(response => {
 
-                    this.defaultPaymentCard = response.data.default
-                    this.paymentCards = response.data.others
+                    this.defaultPaymentMethod = response.data.default
+                    this.PaymentMethods = response.data.others
 
                     this.isLoading = false
                 })

resources/js/views/User/PaymentMethods.vue

@@ -1,7 +1,7 @@
 <template>
     <PageTab :is-loading="isLoading">
-        <PageTabGroup v-if="paymentCards && paymentCards.length > 0">
-            <DatatableWrapper :paginator="true" :columns="columns" :data="paymentCards" class="table">
+        <PageTabGroup v-if="PaymentMethods && PaymentMethods.length > 0">
+            <DatatableWrapper :paginator="true" :columns="columns" :data="PaymentMethods" class="table">
                 <template scope="{ row }">
                     <tr :class="{'is-deleting': row.data.attributes.card_id === deletingID}">
                         <td style="width: 300px">
@@ -52,7 +52,7 @@
     import axios from 'axios'
 
     export default {
-        name: 'UserPaymentCards',
+        name: 'UserPaymentMethods',
         components: {
             DatatableWrapper,
             PageTabGroup,
@@ -64,7 +64,7 @@
         data() {
             return {
                 defaultPaymentCard: undefined,
-                paymentCards: undefined,
+                PaymentMethods: undefined,
                 deletingID: undefined,
                 columns: [
                     {
@@ -139,14 +139,21 @@
                     }
                 })
             },
-            fetchPaymentCards() {
+            fetchPaymentMethods() {
                 axios.get('/api/user/payments')
                     .then(response => {
 
-                        this.defaultPaymentCard = response.data.default
+                        if (response.status == 204) {
+                            this.PaymentMethods = []
+                        }
 
-                        this.paymentCards = response.data.others.data
-                        this.paymentCards.push(response.data.default)
+                        if (response.status == 200) {
+
+                            this.defaultPaymentCard = response.data.default
+
+                            this.PaymentMethods = response.data.others.data
+                            this.PaymentMethods.push(response.data.default)
+                        }
 
                         this.isLoading = false
                     })
@@ -155,7 +162,7 @@
         created() {
 
             // Get payments card
-            this.fetchPaymentCards()
+            this.fetchPaymentMethods()
 
             // Delete credit card
             events.$on('action:confirmed', data => {
@@ -168,7 +175,7 @@
                         .then(() => {
 
                             // Get payments card
-                            this.fetchPaymentCards()
+                            this.fetchPaymentMethods()
 
                             // Show toaster
                             events.$emit('toaster', {
@@ -189,7 +196,7 @@
                         .then(() => {
 
                             // Get payments card
-                            this.fetchPaymentCards()
+                            this.fetchPaymentMethods()
 
                             // Show toaster
                             events.$emit('toaster', {

resources/js/views/User/Subscription.vue

@@ -188,8 +188,17 @@
             fetchSubscriptionDetail() {
                 axios.get('/api/user/subscription')
                     .then(response => {
-                        this.subscription = response.data
-                        this.isLoading = false
+
+                        if (response.status == 204) {
+                            this.subscription = undefined
+                            this.isLoading = false
+                        }
+
+                        if (response.status == 200) {
+                            this.subscription = response.data
+                            this.isLoading = false
+                        }
+
                     })
             }
         },

resources/sass/app.scss

@@ -273,6 +273,11 @@
   }
 }
 
+// Helpers
+.mt-70 {
+  margin-top: 70px;
+}
+
 @media only screen and (max-width: 1024px) {
 
   #single-page {

resources/sass/vue-file-manager/_auth-form.scss

@@ -7,6 +7,7 @@
     display: flex;
     position: relative;
     justify-content: center;
+    margin: 0 auto;
 
     .input-wrapper {
       position: relative;
@@ -45,6 +46,7 @@
         width: 200px;
         text-align: right !important;
         color: $text;
+        text-align: right;
       }
     }
 

resources/sass/vue-file-manager/_auth.scss

@@ -52,10 +52,6 @@
   .block-form {
     margin-left: auto;
     margin-right: auto;
-
-    .block-wrapper label {
-      text-align: right;
-    }
   }
 }
 

resources/sass/vue-file-manager/_forms.scss

@@ -8,6 +8,7 @@
     display: flex;
     position: relative;
     justify-content: center;
+    margin: 0 auto;
 
     .input-wrapper {
       position: relative;
@@ -33,14 +34,15 @@
     }
 
     .block-wrapper {
-      margin-bottom: 15px;
+      margin-bottom: 32px;
 
       label {
         @include font-size(14);
-        color: rgba($text, 0.7);
-        font-weight: 600;
+        color: rgba($text, 0.8);
+        font-weight: 700;
         display: block;
         margin-bottom: 7px;
+        text-align: left;
       }
 
       &:last-child {
@@ -107,11 +109,12 @@ input[type="email"] {
   font-weight: 700;
   outline: 0;
   width: 100%;
-  background: hsla(210, 10%, 98%, 1);
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+  //background: hsla(210, 10%, 98%, 1);
 
   &.is-error {
     border-color: $danger;
-    box-shadow: 0 0 7px rgba($danger, 0.3);
+    box-shadow: 0 1px 5px rgba($danger, 0.3);
   }
 
   &::placeholder {
@@ -121,11 +124,12 @@ input[type="email"] {
 
   &:focus {
     border-color: $theme;
-    box-shadow: 0 0 7px rgba($theme, 0.3);
+    box-shadow: 0 1px 5px rgba($theme, 0.3);
   }
 
   &[disabled] {
-    background: hsl(0, 0%, 98%);
+    background: white;
+    color: rgba($text, 0.8);
     cursor: not-allowed;
   }
 }

resources/sass/vue-file-manager/_setup_wizard.scss

@@ -0,0 +1,81 @@
+.auth-form {
+
+  input {
+    min-width: initial;
+  }
+}
+
+.duplicator {
+
+  .duplicator-add-button {
+    width: 100%;
+  }
+
+  .duplicator-item {
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    background: white;
+    padding: 25px;
+    margin: 0 -25px 32px;
+    position: relative;
+
+    .duplicator-title {
+      @include font-size(18);
+      margin-bottom: 20px;
+      display: block;
+      font-weight: 700;
+    }
+
+    .delete-item {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      cursor: pointer;
+
+      &:hover {
+
+        line {
+          stroke: $theme;
+        }
+      }
+    }
+
+    input,
+    textarea {
+      box-shadow: none;
+      background: #FAFAFA;
+    }
+  }
+}
+
+.form {
+  max-width: 580px;
+  text-align: left;
+}
+
+.submit-wrapper {
+  text-align: right;
+
+  .button {
+    margin: 58px 0 50px 0;
+    width: 100%;
+  }
+}
+
+.title-icon {
+  margin-bottom: 10px;
+  animation: spinner 5s linear infinite;
+
+  circle, path {
+    stroke: $theme;
+  }
+}
+
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

resources/sass/vue-file-manager/_variables.scss

@@ -1,5 +1,5 @@
 // Colors
-$text: #1b2539;
+$text: #1B2539;
 $text-muted: rgba($text, 0.7);
 
 $theme: #00BC7E;

resources/views/index.blade.php

@@ -31,6 +31,7 @@
             locale: '{{ \Illuminate\Support\Facades\App::getLocale() }}',
             app_name: '{{ config('vuefilemanager.app_name') }}',
             app_logo: '{{ asset(config('vuefilemanager.app_logo')) }}',
+            host: '{{ url('/') }}',
             api: '{{ url('/api') }}',
             hasAuthCookie: {{ Cookie::has('token') ? 1 : 0 }},
             userRegistration: {{ config('vuefilemanager.registration') ? 1 : 0 }},

resources/views/vuefilemanager/invoice.blade.php

@@ -50,61 +50,60 @@
         <div class="partner">
             <h2 class="partner-title">Seller:</h2>
             <ul class="list">
-                @isset($invoice->seller['billing_vat_number'])
+                @isset($settings->billing_vat_number)
                     <li class="list-item">
                         <b>VAT number:</b>
-                        <span>{{ $invoice->seller['billing_vat_number'] }}</span>
+                        <span>{{ $settings->billing_vat_number }}</span>
                     </li>
                 @endisset
 
-                @isset($invoice->seller['billing_name'])
+                @isset($settings->billing_name)
                     <li class="list-item">
                         <b>Name:</b>
-                        <span>{{ $invoice->seller['billing_name'] }}</span>
+                        <span>{{ $settings->billing_name }}</span>
                     </li>
                 @endisset
 
-                @isset($invoice->seller['billing_phone_number'])
+                @isset($settings->billing_phone_number)
                     <li class="list-item">
                         <b>Phone:</b>
-                        <span>{{ $invoice->seller['billing_phone_number'] }}</span>
+                        <span>{{ $settings->billing_phone_number }}</span>
                     </li>
                 @endisset
             </ul>
-
             <ul class="list">
-                @isset($invoice->seller['billing_address'])
+                @isset($settings->billing_address)
                     <li class="list-item">
                         <b>Address:</b>
-                        <span>{{ $invoice->seller['billing_address'] }}</span>
+                        <span>{{ $settings->billing_address }}</span>
                     </li>
                 @endisset
 
-                @isset($invoice->seller['billing_city'])
+                @isset($settings->billing_city)
                     <li class="list-item">
                         <b>City:</b>
-                        <span>{{ $invoice->seller['billing_city'] }}</span>
+                        <span>{{ $settings->billing_city }}</span>
                     </li>
                 @endisset
 
-                @isset($invoice->seller['billing_state'])
+                @isset($settings->billing_state)
                     <li class="list-item">
                         <b>State:</b>
-                        <span>{{ $invoice->seller['billing_state'] }}</span>
+                        <span>{{ $settings->billing_state }}</span>
                     </li>
                 @endisset
 
-                @isset($invoice->seller['billing_postal_code'])
+                @isset($settings->billing_postal_code)
                     <li class="list-item">
                         <b>Postal code:</b>
-                        <span>{{ $invoice->seller['billing_postal_code'] }}</span>
+                        <span>{{ $settings->billing_postal_code }}</span>
                     </li>
                 @endisset
 
-                @isset($invoice->seller['billing_country'])
+                @isset($settings->billing_country)
                     <li class="list-item">
                         <b>Country:</b>
-                        <span>{{ $invoice->seller['billing_country'] }}</span>
+                        <span>{{ $settings->billing_country }}</span>
                     </li>
                 @endisset
             </ul>

routes/web.php

@@ -11,10 +11,10 @@
 |
 */
 
-use App\User;
-use Rinvex\Subscriptions\Models\PlanFeature;
+// Stripe WebHook
+Route::post('/stripe/webhook', 'WebhookController@handleWebhook');
 
-// Deployment Webhook URL
+// Deployment WebHook URL
 Route::post('/deploy/github', 'DeployController@github');
 
 // Get public thumbnails and files