added prettier

resources/js/views/SetupWizard/BillingsDetail.vue

@@ -1,35 +1,25 @@
 <template>
     <AuthContentWrapper ref="auth">
-
         <!--Database Credentials-->
         <AuthContent name="database-credentials" :visible="true">
-			<Headline
-				class="container mx-auto max-w-screen-sm"
-				title="Setup Wizard"
-				description="Set up your billing information."
-			>
+            <Headline class="container mx-auto max-w-screen-sm" title="Setup Wizard" description="Set up your billing information.">
                 <settings-icon size="40" class="title-icon text-theme mx-auto" />
-			</Headline>
-            <ValidationObserver @submit.prevent="billingInformationSubmit" ref="billingInformation" v-slot="{ invalid }"
-                                tag="form" class="form block-form">
+            </Headline>
+            <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" :class="{'border-red': errors[0]}"/>
+                    <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" :class="{ 'border-red': errors[0] }" />
                         <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" :class="{'border-red': errors[0]}"/>
+                    <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" :class="{ 'border-red': errors[0] }" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -38,19 +28,16 @@
 
                 <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]"/>
+                    <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="Type your billing address"
-                               type="text" :class="{'border-red': errors[0]}"/>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Address" rules="required" v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_address" placeholder="Type your billing address" type="text" :class="{ 'border-red': errors[0] }" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -58,19 +45,15 @@
                 <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="Type your billing city"
-                                   type="text" :class="{'border-red': errors[0]}"/>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing City" rules="required" v-slot="{ errors }">
+                            <input v-model="billingInformation.billing_city" placeholder="Type your billing city" type="text" :class="{ 'border-red': errors[0] }" />
                             <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="Type your billing postal code" type="text" :class="{'border-red': errors[0]}"/>
+                        <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="Type your billing postal code" type="text" :class="{ 'border-red': errors[0] }" />
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -78,116 +61,106 @@
 
                 <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="Type your billing state"
-                               type="text" :class="{'border-red': errors[0]}"/>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing State" rules="required" v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_state" placeholder="Type your billing state" type="text" :class="{ 'border-red': errors[0] }" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
 
                 <div class="block-wrapper">
                     <label>Billing Phone Number (optional):</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Phone Number"
-                                        v-slot="{ errors }">
-                        <input v-model="billingInformation.billing_phone_number" placeholder="Type your billing phone number"
-                               type="text" :class="{'border-red': errors[0]}"/>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Phone Number" v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_phone_number" placeholder="Type your billing phone number" type="text" :class="{ 'border-red': 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 Create Plans" :loading="isLoading"
-                                :disabled="isLoading"/>
+                    <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 Headline from "../Auth/Headline"
-    import {required} from 'vee-validate/dist/rules'
-    import {mapGetters} from 'vuex'
-    import axios from 'axios'
+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 Headline from '../Auth/Headline'
+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,
-			Headline,
-        },
-        computed: {
-            ...mapGetters(['countries']),
-        },
-        data() {
-            return {
-                isLoading: false,
-                billingInformation: {
-                    billing_phone_number: '',
-                    billing_postal_code: '',
-                    billing_vat_number: '',
-                    billing_address: '',
-                    billing_country: '',
-                    billing_state: '',
-                    billing_city: '',
-                    billing_name: '',
-                }
-            }
-        },
-        methods: {
-            async billingInformationSubmit() {
-
-                // Validate fields
-                const isValid = await this.$refs.billingInformation.validate();
-
-                if (!isValid) return;
-
-                // Start loading
-                this.isLoading = true
-
-                // Send request to get verify account
-                axios
-                    .post('/api/setup/stripe-billings', this.billingInformation)
-                    .then(() => {
-
-                        // Redirect to next step
-                        this.$router.push({name: 'SubscriptionPlans'})
-                    })
-                    .catch(error => {
-
-                    })
-                    .finally(() => {
-                        this.isLoading = false
-                    })
+export default {
+    name: 'BillingsDetail',
+    components: {
+        AuthContentWrapper,
+        ValidationProvider,
+        ValidationObserver,
+        SettingsIcon,
+        SelectInput,
+        AuthContent,
+        AuthButton,
+        FormLabel,
+        required,
+        InfoBox,
+        Headline,
+    },
+    computed: {
+        ...mapGetters(['countries']),
+    },
+    data() {
+        return {
+            isLoading: false,
+            billingInformation: {
+                billing_phone_number: '',
+                billing_postal_code: '',
+                billing_vat_number: '',
+                billing_address: '',
+                billing_country: '',
+                billing_state: '',
+                billing_city: '',
+                billing_name: '',
             },
-        },
-        created() {
-            this.$scrollTop()
         }
-    }
+    },
+    methods: {
+        async billingInformationSubmit() {
+            // Validate fields
+            const isValid = await this.$refs.billingInformation.validate()
+
+            if (!isValid) return
+
+            // Start loading
+            this.isLoading = true
+
+            // Send request to get verify account
+            axios
+                .post('/api/setup/stripe-billings', this.billingInformation)
+                .then(() => {
+                    // Redirect to next step
+                    this.$router.push({ name: 'SubscriptionPlans' })
+                })
+                .catch((error) => {})
+                .finally(() => {
+                    this.isLoading = false
+                })
+        },
+    },
+    created() {
+        this.$scrollTop()
+    },
+}
 </script>
 
 <style scoped lang="scss">
-    @import '../../../sass/vuefilemanager/forms';
-    @import '../../../sass/vuefilemanager/auth';
-    @import '../../../sass/vuefilemanager/setup_wizard';
+@import '../../../sass/vuefilemanager/forms';
+@import '../../../sass/vuefilemanager/auth';
+@import '../../../sass/vuefilemanager/setup_wizard';
 </style>