Subscription UI refactoring

resources/js/components/Subscription/UserEditSubscription.vue

@@ -0,0 +1,93 @@
+<template>
+	<div class="card shadow-card">
+		<FormLabel>
+			{{ $t('Edit your Subscription') }}
+		</FormLabel>
+
+		<AppInputSwitch :title="$t('Cancel Subscription')" :description="$t('You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.')">
+			<ButtonBase @click.native="cancelSubscriptionConfirmation" :loading="isCancelling" class="sm:w-auto w-full" button-style="secondary">
+				{{ $t('Cancel Now') }}
+			</ButtonBase>
+		</AppInputSwitch>
+
+		<AppInputSwitch :title="$t('Upgrade Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
+			<ButtonBase @click.native="$openUpgradeOptions" class="sm:w-auto w-full" button-style="secondary">
+				{{ $t('Upgrade Now') }}
+			</ButtonBase>
+		</AppInputSwitch>
+	</div>
+</template>
+
+<script>
+	import AppInputSwitch from "../Admin/AppInputSwitch"
+	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+	import FormLabel from "../Others/Forms/FormLabel"
+	import {events} from "../../bus";
+	import axios from "axios";
+
+	export default {
+		name: 'UserEditSubscription',
+		components: {
+			AppInputSwitch,
+			ButtonBase,
+			FormLabel
+		},
+		computed: {
+			subscription() {
+				return this.$store.getters.user.data.relationships.subscription.data
+			}
+		},
+		data() {
+			return {
+				isCancelling: false,
+			}
+		},
+		methods: {
+			cancelSubscriptionConfirmation() {
+				events.$emit('confirm:open', {
+					title: this.$t('Are you sure you want to cancel subscription?'),
+					message: this.$t("You'll continue to have access to the features you've paid for until the end of your billing cycle."),
+					action: {
+						operation: 'cancel-subscription',
+					}
+				})
+			},
+		},
+		created() {
+
+			events.$on('action:confirmed', data => {
+				if (data.operation === 'cancel-subscription') {
+
+					// Start deleting spinner button
+					this.isCancelling = true
+
+					// Send post request
+					axios
+						.post('/api/subscriptions/cancel')
+						.then(() => {
+
+							// Update user data
+							this.$store.dispatch('getAppData').then(() => {
+								this.fetchSubscriptionDetail()
+							})
+
+							events.$emit('toaster', {
+								type: 'success',
+								message: this.$t('popup_subscription_cancel.title'),
+							})
+						})
+						.catch(() => {
+							events.$emit('toaster', {
+								type: 'danger',
+								message: this.$t('popup_error.title'),
+							})
+						})
+						.finally(() => {
+							this.isCancelling = false
+						})
+				}
+
+			})
+		}
+	}
+</script>