implemented subscription page

This commit is contained in:
Čarodej
2021-11-25 10:11:50 +01:00
parent 03ddb61d33
commit 3bfca2ac83
14 changed files with 236 additions and 23 deletions

View File

@@ -2,7 +2,7 @@
"/js/main.js": "/js/main.js",
"/css/app.css": "/css/app.css",
"/css/tailwind.css": "/css/tailwind.css",
"/chunks/admin.js": "/chunks/admin.js?id=a0c20801a574eca39093",
"/chunks/admin.js": "/chunks/admin.js?id=6b44ad76c944f71d4bad",
"/chunks/admin-account.js": "/chunks/admin-account.js?id=1d297064a7b806655c53",
"/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=b6966627bd253eda63ba",
"/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js?id=d7a8e5b5b913858da427",
@@ -49,17 +49,17 @@
"/chunks/homepage.js": "/chunks/homepage.js?id=b89dd81804b8a0bd3f0b",
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=1579259e826aa89fb00a",
"/chunks/invitation.js": "/chunks/invitation.js?id=c9cd3541ee362ae8d5f7",
"/chunks/invoices.js": "/chunks/invoices.js?id=53443e2b53de1ee72cf6",
"/chunks/invoices.js": "/chunks/invoices.js?id=a6bfee37cb73774df54c",
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
"/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=d116a63e3c59bc0a5133",
"/chunks/pages.js": "/chunks/pages.js?id=57cb88433843d50803cc",
"/chunks/plan.js": "/chunks/plan.js?id=455369be23d3cd71dff8",
"/chunks/plan.js": "/chunks/plan.js?id=483129eff79a17ac0385",
"/chunks/plan-create.js": "/chunks/plan-create.js?id=c1ad8299871917f21f8e",
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=1758abef76d231b6518e",
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=0bb61dfb1adac4b941ec",
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=d05adc407c271c7ece76",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=56503b9ff882c9a4acd5",
"/chunks/plans.js": "/chunks/plans.js?id=3b56fd7dabcdba705177",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=cee121363af5d208dcf7",
"/chunks/plans.js": "/chunks/plans.js?id=a03911a6f6001380f11b",
"/chunks/platform.js": "/chunks/platform.js?id=dc3c6677ab43d4475b66",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=e64e3b67ccb89de9dd55",
"/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js": "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js?id=7d983dfdc91de607d737",
@@ -69,12 +69,12 @@
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=22f629caf127051898e9",
"/chunks/settings.js": "/chunks/settings.js?id=2a9be45c14b5a06144d9",
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=cacac1c92fcaa4f21f69",
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=677519df6c8e7dffbfa8",
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=f0569e04bab9c71bde8d",
"/chunks/settings-password.js": "/chunks/settings-password.js?id=4ed19fa578c63c0c50ce",
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=3a88e55341d1f1ffe12d",
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=c1a4036392db4eea190f",
"/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js?id=cc6fd81d942730305129",
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=e6f0b8bae90c122a019d",
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=fd27d71eb4f6b2194715",
"/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=e67e12955133c57194d1",
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
"/chunks/shared.js": "/chunks/shared.js?id=6230d050545cd1bd9b87",
@@ -98,10 +98,10 @@
"/chunks/user-create.js": "/chunks/user-create.js?id=1d58b3cf93c7b3b90d9d",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=c0ea5194b4a4de8189dd",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=a55ae1a545a65b92511d",
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=5f2217e8d32e7859ac60",
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=8318a3c2bddf3fcdd277",
"/chunks/user-password.js": "/chunks/user-password.js?id=ce6c12a5b038f5481bd1",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=71b90f0987d1ebe7ead6",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=e0a857f37b2bc6df43ca",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=911cc66043bc3037ee09",
"/chunks/users.js": "/chunks/users.js?id=5d94a7373e00c8f27ae6",
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js?id=ee89932f7ee76e74483e",
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js?id=8163e0eab55c50f8afb8",
@@ -400,5 +400,32 @@
"/chunks/plan-settings.7dca29b888c3a237159b.hot-update.js": "/chunks/plan-settings.7dca29b888c3a237159b.hot-update.js",
"/chunks/plan-settings.246b354ee7dd351c9f46.hot-update.js": "/chunks/plan-settings.246b354ee7dd351c9f46.hot-update.js",
"/chunks/plan-subscribers.2efcff3d00fecc9faa00.hot-update.js": "/chunks/plan-subscribers.2efcff3d00fecc9faa00.hot-update.js",
"/chunks/plan-subscribers.4e131483ac7b313c58e6.hot-update.js": "/chunks/plan-subscribers.4e131483ac7b313c58e6.hot-update.js"
"/chunks/plan-subscribers.4e131483ac7b313c58e6.hot-update.js": "/chunks/plan-subscribers.4e131483ac7b313c58e6.hot-update.js",
"/js/main.a04ecbca5ae62c0b638f.hot-update.js": "/js/main.a04ecbca5ae62c0b638f.hot-update.js",
"/chunks/invoices.a04ecbca5ae62c0b638f.hot-update.js": "/chunks/invoices.a04ecbca5ae62c0b638f.hot-update.js",
"/chunks/plan.a04ecbca5ae62c0b638f.hot-update.js": "/chunks/plan.a04ecbca5ae62c0b638f.hot-update.js",
"/chunks/plan-delete.a04ecbca5ae62c0b638f.hot-update.js": "/chunks/plan-delete.a04ecbca5ae62c0b638f.hot-update.js",
"/chunks/plan-subscribers.a04ecbca5ae62c0b638f.hot-update.js": "/chunks/plan-subscribers.a04ecbca5ae62c0b638f.hot-update.js",
"/chunks/plans.a04ecbca5ae62c0b638f.hot-update.js": "/chunks/plans.a04ecbca5ae62c0b638f.hot-update.js",
"/chunks/settings-invoices.a04ecbca5ae62c0b638f.hot-update.js": "/chunks/settings-invoices.a04ecbca5ae62c0b638f.hot-update.js",
"/chunks/settings-subscription.a04ecbca5ae62c0b638f.hot-update.js": "/chunks/settings-subscription.a04ecbca5ae62c0b638f.hot-update.js",
"/chunks/user-invoices.a04ecbca5ae62c0b638f.hot-update.js": "/chunks/user-invoices.a04ecbca5ae62c0b638f.hot-update.js",
"/chunks/user-subscription.a04ecbca5ae62c0b638f.hot-update.js": "/chunks/user-subscription.a04ecbca5ae62c0b638f.hot-update.js",
"/js/main.17934f490347147190f4.hot-update.js": "/js/main.17934f490347147190f4.hot-update.js",
"/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~29d9eb92.js": "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~29d9eb92.js?id=695251c38c0884b45b81",
"/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~3edf9278.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~3edf9278.js?id=c2a7d990d48dd8155cb3",
"/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~43d0932c.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~43d0932c.js?id=d89ebe03a6c9d01fe126",
"/chunks/subscriptions.js": "/chunks/subscriptions.js?id=292513c6aef46e31033e",
"/chunks/admin.182bab58ce8679f77c46.hot-update.js": "/chunks/admin.182bab58ce8679f77c46.hot-update.js",
"/chunks/subscriptions.d68fcf7fd76ca845594c.hot-update.js": "/chunks/subscriptions.d68fcf7fd76ca845594c.hot-update.js",
"/chunks/admin.36e4bde4e0f466b7928a.hot-update.js": "/chunks/admin.36e4bde4e0f466b7928a.hot-update.js",
"/chunks/subscriptions.41b21578047dc5273649.hot-update.js": "/chunks/subscriptions.41b21578047dc5273649.hot-update.js",
"/chunks/subscriptions.7cba4475b3b8bd08f0aa.hot-update.js": "/chunks/subscriptions.7cba4475b3b8bd08f0aa.hot-update.js",
"/chunks/subscriptions.ced3e8fc0bbabb7bef77.hot-update.js": "/chunks/subscriptions.ced3e8fc0bbabb7bef77.hot-update.js",
"/chunks/subscriptions.54017d9973755e3cec8b.hot-update.js": "/chunks/subscriptions.54017d9973755e3cec8b.hot-update.js",
"/chunks/subscriptions.83d8ee0563bafccd1a9c.hot-update.js": "/chunks/subscriptions.83d8ee0563bafccd1a9c.hot-update.js",
"/chunks/subscriptions.25ea8acd465eae4c377e.hot-update.js": "/chunks/subscriptions.25ea8acd465eae4c377e.hot-update.js",
"/chunks/subscriptions.8ce5c6a4da6e1894d8ee.hot-update.js": "/chunks/subscriptions.8ce5c6a4da6e1894d8ee.hot-update.js",
"/js/main.8d3eade3e32203b853d9.hot-update.js": "/js/main.8d3eade3e32203b853d9.hot-update.js",
"/chunks/subscriptions.8d3eade3e32203b853d9.hot-update.js": "/chunks/subscriptions.8d3eade3e32203b853d9.hot-update.js"
}

View File

@@ -208,7 +208,7 @@
}
},
created() {
axios.get('/api/subscription/plans')
axios.get('/api/subscriptions/plans')
.then(response => {
this.plans = response.data.data
})

View File

@@ -29,6 +29,16 @@ const routesAdmin = [
title: 'routes_title.invoices'
},
},
{
name: 'Subscriptions',
path: '/admin/subscriptions',
component: () =>
import(/* webpackChunkName: "chunks/subscriptions" */ '../views/Admin/Subscriptions'),
meta: {
requiresAuth: true,
title: 'Subscriptions'
},
},
{
name: 'Pages',
path: '/admin/pages',

View File

@@ -67,6 +67,14 @@
{{ $t('admin_menu.users') }}
</div>
</router-link>
<router-link :to="{name: 'Subscriptions'}" class="menu-list-item link">
<div class="icon text-theme">
<dollar-sign-icon size="17" />
</div>
<div class="label text-theme">
{{ $t('Subscriptions') }}
</div>
</router-link>
<router-link :to="{name: 'Plans'}" class="menu-list-item link">
<div class="icon text-theme">
<database-icon size="17" />
@@ -116,7 +124,7 @@
<script>
import FilePreview from '/resources/js/components/FilePreview/FilePreview'
import Spotlight from '/resources/js/components/Spotlight/Spotlight'
import { HelpCircleIcon, RefreshCwIcon, UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon, GlobeIcon } from 'vue-feather-icons'
import { DollarSignIcon, HelpCircleIcon, RefreshCwIcon, UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon, GlobeIcon } from 'vue-feather-icons'
import SidebarNavigation from '/resources/js/components/Sidebar/SidebarNavigation'
import MobileNavigation from '/resources/js/components/Others/MobileNavigation'
import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
@@ -139,6 +147,7 @@
MobileNavigation,
CreateLanguage,
ContentSidebar,
DollarSignIcon,
HelpCircleIcon,
RefreshCwIcon,
CreditCardIcon,

View File

@@ -4,7 +4,7 @@
<div class="card shadow-card">
<DatatableWrapper
@init="isLoading = false"
api="/api/subscription/transactions"
api="/api/subscriptions/transactions"
:paginator="true"
:columns="columns"
>

View File

@@ -10,7 +10,7 @@
</div>
<!--Datatable-->
<DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscription/plans" :paginator="true" :columns="columns">
<DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscriptions/plans" :paginator="true" :columns="columns">
<template slot-scope="{ row }">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-4">

View File

@@ -54,7 +54,7 @@
}
},
created() {
axios.get('/api/subscription/plans/' + this.$route.params.id)
axios.get('/api/subscriptions/plans/' + this.$route.params.id)
.then(response => {
this.plan = response.data.data
})

View File

@@ -63,7 +63,7 @@
this.isSendingRequest = true
axios
.post('/api/subscription/plans/' + this.$route.params.id,
.post('/api/subscriptions/plans/' + this.$route.params.id,
{
data: {
name: this.planName

View File

@@ -1,6 +1,6 @@
<template>
<PageTab :is-loading="isLoading">
<DatatableWrapper @data="subscribers = $event" @init="isLoading = false" :api="`/api/subscription/plans/${this.$route.params.id}/subscribers`" :paginator="true" :columns="columns" class="card shadow-card">
<DatatableWrapper @data="subscribers = $event" @init="isLoading = false" :api="`/api/subscriptions/plans/${this.$route.params.id}/subscribers`" :paginator="true" :columns="columns" class="card shadow-card">
<!--Table data content-->
<template slot-scope="{ row }">

View File

@@ -0,0 +1,167 @@
<template>
<div>
<!--Datatable-->
<DatatableWrapper @init="isLoading = false" api="/api/subscriptions" :paginator="true" :columns="columns" class="card shadow-card">
<!--Table data content-->
<template slot-scope="{ row }">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td>
<router-link class="flex items-center" :to="{name: 'UserDetail', params: {id: row.data.relationships.user.data.id}}">
<MemberAvatar
:is-border="false"
:size="36"
:member="row.data.relationships.user"
/>
<div class="ml-3">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.user.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
{{ row.data.relationships.user.data.attributes.email }}
</span>
</div>
</router-link>
</td>
<td>
<ColorLabel :color="getSubscriptionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td class="py-5">
<span class="text-sm font-bold capitalize text-limit" style="max-width: 160px">
{{ row.data.attributes.name }}
</span>
<span class="block text-xs font-bold text-gray-400">
{{ row.data.relationships.plan.data.attributes.price }} / {{ $t(`interval.${row.data.relationships.plan.data.attributes.interval}`) }}
</span>
</td>
<td>
<span class="text-sm font-bold">
<!--todo: update renew attribute-->
{{ row.data.attributes.renews_at ? row.data.attributes.renews_at : row.data.attributes.created_at }}
</span>
</td>
<td>
<span class="text-sm font-bold">
{{ row.data.attributes.ends_at ? row.data.attributes.ends_at : '-' }}
</span>
</td>
<td class="text-right">
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
</td>
</tr>
</template>
<!--Empty page-->
<template v-slot:empty-page>
<InfoBox style="margin-bottom: 0">
<p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
</InfoBox>
</template>
</DatatableWrapper>
<!--Stripe configured but has empty plans-->
<!--<EmptyPageContent
v-if="isEmptyPlans"
icon="file"
:title="$t('admin_page_plans.empty.title')"
:description="$t('admin_page_plans.empty.description')"
>
<router-link :to="{name: 'PlanCreate'}" tag="p">
<ButtonBase button-style="theme">{{ $t('admin_page_plans.empty.button') }}</ButtonBase>
</router-link>
</EmptyPageContent>-->
<!--Stripe is Not Configured-->
<!--<EmptyPageContent
v-if="stripeIsNotConfigured"
icon="settings"
:title="$t('activation.stripe.title')"
:description="$t('activation.stripe.description')"
>
<router-link :to="{name: 'AppPayments'}">
<ButtonBase button-style="theme">{{ $t('activation.stripe.button') }}</ButtonBase>
</router-link>
</EmptyPageContent>-->
<!--Spinner-->
<div id="loader" v-if="isLoading">
<Spinner></Spinner>
</div>
</div>
</template>
<script>
import ColorLabel from "../../components/Others/ColorLabel";
import MemberAvatar from "../../components/FilesView/MemberAvatar";
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
import EmptyPageContent from '/resources/js/components/Others/EmptyPageContent'
import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import Spinner from '/resources/js/components/FilesView/Spinner'
import { mapGetters } from 'vuex'
export default {
name: 'Subscriptions',
components: {
ColorLabel,
MemberAvatar,
EmptyPageContent,
DatatableWrapper,
SwitchInput,
ButtonBase,
Spinner,
},
computed: {
...mapGetters([
'config'
]),
stripeIsNotConfigured() {
return ! this.config.stripe_public_key
},
stripeConfiguredWithPlans() {
return ! this.isLoading && this.config.stripe_public_key
}
},
data() {
return {
isLoading: true,
plans: [],
columns: [
{
label: this.$t('admin_page_user.table.name'),
field: 'name',
sortable: true
},
{
label: this.$t('Status'),
field: 'used',
sortable: false
},
{
label: this.$t('Plan'),
field: 'name',
sortable: true
},
{
label: this.$t('Renews At'),
sortable: false
},
{
label: this.$t('Ends At'),
sortable: false
},
{
label: this.$t('Service'),
sortable: false
},
],
}
},
created() {
if (! this.config.stripe_public_key)
this.isLoading = false
}
}
</script>

View File

@@ -3,7 +3,7 @@
<div class="card shadow-card">
<DatatableWrapper
@init="isLoading = false"
:api="'/api/subscription/users/' + this.$route.params.id + '/transactions'"
:api="'/api/subscriptions/users/' + this.$route.params.id + '/transactions'"
:paginator="true"
:columns="columns"
>

View File

@@ -76,7 +76,7 @@
}
},
created() {
axios.get(`/api/subscription/users/${this.$route.params.id}/subscription`)
axios.get(`/api/subscriptions/users/${this.$route.params.id}/subscription`)
.then(response => {
this.subscription = response.data.data

View File

@@ -3,7 +3,7 @@
<div class="card shadow-card">
<DatatableWrapper
@init="isLoading = false"
api="/api/subscription/transactions"
api="/api/subscriptions/transactions"
:paginator="true"
:columns="columns"
>

View File

@@ -104,7 +104,7 @@
// Send post request
axios
.post('/api/subscription/cancel')
.post('/api/subscriptions/cancel')
.then(() => {
// Update user data
@@ -128,7 +128,7 @@
})
},
fetchSubscriptionDetail() {
axios.get('/api/subscription/detail')
axios.get('/api/subscriptions/detail')
.then(response => {
this.subscription = response.data.data