backend update

resources/js/views/User/Invoices.vue

@@ -1,6 +1,6 @@
 <template>
     <PageTab v-if="invoices">
-        <PageTabGroup>
+        <PageTabGroup v-if="invoices.length > 0">
             <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
                 <template scope="{ row }">
                     <tr>
@@ -35,6 +35,9 @@
                 </template>
             </DatatableWrapper>
         </PageTabGroup>
+        <PageTabGroup v-else>
+            You don't have any invoices yet.
+        </PageTabGroup>
     </PageTab>
 </template>
 

resources/js/views/User/Password.vue

@@ -3,27 +3,27 @@
         <PageTabGroup>
             <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
                                 class="form block-form">
-
-                <div class="block-wrapper">
-                    <label>{{ $t('page_create_password.label_new_pass') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
-                                        rules="required" v-slot="{ errors }">
-                        <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
-                               type="password"
-                               :class="{'is-error': errors[0]}"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <div class="block-wrapper">
-                    <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
-                                        rules="required" v-slot="{ errors }">
-                        <input v-model="newPasswordConfirmation"
-                               :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
-                               :class="{'is-error': errors[0]}"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
+                <div class="wrapper-inline">
+                    <div class="block-wrapper">
+                        <label>{{ $t('page_create_password.label_new_pass') }}:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
+                                            rules="required" v-slot="{ errors }">
+                            <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
+                                   type="password"
+                                   :class="{'is-error': errors[0]}"/>
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+                    <div class="block-wrapper">
+                        <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
+                                            rules="required" v-slot="{ errors }">
+                            <input v-model="newPasswordConfirmation"
+                                   :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
+                                   :class="{'is-error': errors[0]}"/>
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
                 </div>
 
                 <div class="block-wrapper">
@@ -46,7 +46,6 @@
     import PageHeader from '@/components/Others/PageHeader'
     import ThemeLabel from '@/components/Others/ThemeLabel'
     import {required} from 'vee-validate/dist/rules'
-    import {mapGetters} from 'vuex'
     import {events} from '@/bus'
     import axios from 'axios'
 
@@ -64,9 +63,6 @@
             ThemeLabel,
             required,
         },
-        computed: {
-            ...mapGetters(['app']),
-        },
         data() {
             return {
                 newPasswordConfirmation: '',
@@ -125,6 +121,10 @@
     @import '@assets/vue-file-manager/_mixins';
     @import '@assets/vue-file-manager/_forms';
 
+    .block-form {
+        max-width: 100%;
+    }
+
     @media only screen and (max-width: 960px) {
 
         .form {

resources/js/views/User/Subscription.vue

@@ -1,38 +1,130 @@
 <template>
     <PageTab>
-        <PageTabGroup>
+        <PageTabGroup v-if="subscription">
 
+            <!--Info about active subscription-->
+            <div v-if="! subscription.canceled" class="state active">
+                <ListInfo class="list-info">
+                    <ListInfoItem class="list-item" title="Plan" :content="subscription.name + ' - ' + subscription.capacity_formatted"/>
+                    <ListInfoItem class="list-item" title="Billed" content="Monthly"/>
+                    <ListInfoItem class="list-item" title="Status" :content="status"/>
+                    <ListInfoItem class="list-item" title="Created At" :content="subscription.created_at"/>
+                    <ListInfoItem class="list-item" title="Renews At" :content="subscription.ends_at"/>
+                </ListInfo>
+                <div class="cancel-plan">
+                    <ButtonBase
+                            @click.native="cancelSubscription"
+                            :button-style="cancelButtonStyle"
+                            class="cancel-button">
+                        {{ cancelButtonText }}
+                    </ButtonBase>
+                </div>
+            </div>
+
+            <!--Info about canceled subscription-->
+            <div v-if="subscription.canceled" class="state canceled">
+                <ListInfo class="list-info">
+                    <ListInfoItem class="list-item" title="Plan" :content="subscription.name"/>
+                    <ListInfoItem class="list-item" title="Status" :content="status"/>
+                    <ListInfoItem class="list-item" title="Canceled At" :content="subscription.canceled_at"/>
+                    <ListInfoItem class="list-item" title="Ends At" :content="subscription.ends_at"/>
+                </ListInfo>
+            </div>
+        </PageTabGroup>
+        <PageTabGroup v-else>
+            You don't have any subscription yet.
         </PageTabGroup>
     </PageTab>
 </template>
 
 <script>
-    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
-    import PageTab from '@/components/Others/Layout/PageTab'
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
-    import {ExternalLinkIcon} from "vue-feather-icons";
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import ListInfoItem from '@/components/Others/ListInfoItem'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import PageTab from '@/components/Others/Layout/PageTab'
+    import ListInfo from '@/components/Others/ListInfo'
+    import {ExternalLinkIcon} from "vue-feather-icons"
+    import { mapGetters } from 'vuex'
+    import {events} from "@/bus"
     import axios from 'axios'
 
     export default {
         name: 'UserSubscription',
         components: {
-            PageTabGroup,
-            PageTab,
-            DatatableWrapper,
             ExternalLinkIcon,
+            DatatableWrapper,
+            ListInfoItem,
+            PageTabGroup,
+            ButtonBase,
+            ListInfo,
+            PageTab,
+        },
+        computed: {
+            cancelButtonText() {
+                return this.isConfirmedCancel ? this.$t('popup_share_edit.confirm') : 'Cancel Plan'
+            },
+            cancelButtonStyle() {
+                return this.isConfirmedCancel ? 'danger-solid' : 'danger'
+            },
+            subscription() {
+                return this.$store.getters.user.relationships.subscription
+                    ? this.$store.getters.user.relationships.subscription.data.attributes
+                    : undefined
+            },
+            status() {
+                if (this.subscription.canceled) {
+                    return 'Canceled'
+                }
+                if (this.subscription.active) {
+                    return 'Active'
+                }
+            }
         },
         data() {
             return {
-                isLoading: true,
-                invoices: undefined,
+                isConfirmedCancel: false,
+                isDeleting: false,
             }
         },
-        created() {
-/*            axios.get('/api/user/subscription')
-                .then(response => {
-                    this.invoices = response.data.data
-                    this.isLoading = false
-                })*/
+        methods: {
+            cancelSubscription() {
+
+                // Set confirm button
+                if (! this.isConfirmedCancel) {
+
+                    this.isConfirmedCancel = true
+                } else {
+
+                    // Start deleting spinner button
+                    this.isDeleting = true
+
+                    // Send delete request
+                    axios
+                        .post('/api/subscription/cancel')
+                        .then(() => {
+
+                            // Update user data
+                            this.$store.dispatch('getAppData')
+
+                            // End deleting spinner button
+                            this.isDeleting = false
+
+                            events.$emit('alert:open', {
+                                emoji: '👍',
+                                title: 'Subscription Was Canceled',
+                                message: 'You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.',
+                                buttonStyle: 'theme',
+                                button: 'I\'m done'
+                            })
+                        })
+                        .catch(() => {
+
+                            // End deleting spinner button
+                            this.isDeleting = false
+                        })
+                }
+            }
         }
     }
 </script>
@@ -40,12 +132,19 @@
 <style lang="scss" scoped>
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
-    @import '@assets/vue-file-manager/_forms';
 
-    .block-form {
-        max-width: 100%;
+    .cancel-plan {
+        margin-top: 10px;
     }
 
+    .list-info {
+        display: flex;
+        flex-wrap: wrap;
+
+        .list-item {
+            flex: 0 0 50%;
+        }
+    }
 
     @media only screen and (max-width: 960px) {