website/website/resources/js/Pages/Subscriptions/Show.vue

<script setup>
import { ref } from 'vue';
import { useForm, Link } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';

defineOptions({ layout: AppLayout });

const props = defineProps({
    subscription: Object,
    availablePlans: Array,
});

const cancelImmediately = ref(false);

const cancelForm = useForm({
    immediately: false,
});

const swapForm = useForm({
    plan_id: '',
});

const statusColors = {
    active: 'bg-green-900/50 text-green-300 border border-green-800',
    canceled: 'bg-red-900/50 text-red-300 border border-red-800',
    past_due: 'bg-yellow-900/50 text-yellow-300 border border-yellow-800',
    trialing: 'bg-blue-900/50 text-blue-300 border border-blue-800',
    incomplete: 'bg-gray-800 text-gray-400 border border-gray-700',
};

const cancelSubscription = () => {
    cancelForm.immediately = cancelImmediately.value;
    cancelForm.post(`/subscriptions/${props.subscription.id}/cancel`);
};

const resumeSubscription = () => {
    useForm({}).post(`/subscriptions/${props.subscription.id}/resume`);
};

const swapPlan = () => {
    swapForm.post(`/subscriptions/${props.subscription.id}/swap`);
};
</script>

<template>
    <div>
        <div class="mb-4">
            <Link href="/subscriptions" class="text-sm text-blue-400 hover:text-blue-300">&larr; Back to Subscriptions</Link>
        </div>

        <h1 class="text-2xl font-bold text-white mb-6">Subscription Details</h1>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Subscription Info -->
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-gray-900 rounded-lg border border-gray-800 shadow-sm p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-semibold text-white">
                            {{ subscription.plan?.name || subscription.type }}
                        </h2>
                        <span
                            :class="statusColors[subscription.stripe_status] || 'bg-gray-800 text-gray-400'"
                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize"
                        >
                            {{ subscription.stripe_status }}
                        </span>
                    </div>

                    <dl class="grid grid-cols-2 gap-4 text-sm">
                        <div>
                            <dt class="text-gray-500">Gateway</dt>
                            <dd class="mt-1 text-gray-200 capitalize">{{ subscription.gateway || 'stripe' }}</dd>
                        </div>
                        <div v-if="subscription.plan">
                            <dt class="text-gray-500">Price</dt>
                            <dd class="mt-1 text-gray-200">${{ parseFloat(subscription.plan.price).toFixed(2) }}/{{ subscription.plan.billing_cycle }}</dd>
                        </div>
                        <div v-if="subscription.current_period_start">
                            <dt class="text-gray-500">Current Period Start</dt>
                            <dd class="mt-1 text-gray-200">{{ new Date(subscription.current_period_start).toLocaleDateString() }}</dd>
                        </div>
                        <div v-if="subscription.current_period_end">
                            <dt class="text-gray-500">Current Period End</dt>
                            <dd class="mt-1 text-gray-200">{{ new Date(subscription.current_period_end).toLocaleDateString() }}</dd>
                        </div>
                        <div v-if="subscription.ends_at">
                            <dt class="text-gray-500">Cancels On</dt>
                            <dd class="mt-1 text-red-400">{{ new Date(subscription.ends_at).toLocaleDateString() }}</dd>
                        </div>
                        <div>
                            <dt class="text-gray-500">Created</dt>
                            <dd class="mt-1 text-gray-200">{{ new Date(subscription.created_at).toLocaleDateString() }}</dd>
                        </div>
                    </dl>
                </div>

                <!-- Change Plan -->
                <div v-if="availablePlans.length > 0 && subscription.stripe_status === 'active'" class="bg-gray-900 rounded-lg border border-gray-800 shadow-sm p-6">
                    <h2 class="text-lg font-semibold text-white mb-4">Change Plan</h2>

                    <form @submit.prevent="swapPlan" class="space-y-4">
                        <div class="space-y-2">
                            <label v-for="plan in availablePlans" :key="plan.id"
                                class="flex items-center justify-between p-3 border rounded-md cursor-pointer"
                                :class="swapForm.plan_id == plan.id ? 'border-blue-500 bg-blue-900/20' : 'border-gray-700'"
                            >
                                <div class="flex items-center">
                                    <input v-model="swapForm.plan_id" type="radio" :value="plan.id" class="mr-3">
                                    <span class="text-sm font-medium text-gray-200">{{ plan.name }}</span>
                                </div>
                                <span class="text-sm text-gray-400">${{ parseFloat(plan.price).toFixed(2) }}/{{ plan.billing_cycle }}</span>
                            </label>
                        </div>

                        <button
                            type="submit"
                            :disabled="!swapForm.plan_id || swapForm.processing"
                            class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 disabled:opacity-50"
                        >
                            {{ swapForm.processing ? 'Changing...' : 'Change Plan' }}
                        </button>
                    </form>
                </div>
            </div>

            <!-- Actions Sidebar -->
            <div class="space-y-6">
                <!-- Cancel -->
                <div v-if="subscription.stripe_status === 'active' && !subscription.ends_at" class="bg-gray-900 rounded-lg border border-gray-800 shadow-sm p-6">
                    <h2 class="text-lg font-semibold text-white mb-4">Cancel Subscription</h2>

                    <div class="space-y-3">
                        <label class="flex items-center text-sm text-gray-300">
                            <input v-model="cancelImmediately" type="checkbox" class="mr-2 rounded bg-gray-800 border-gray-700">
                            Cancel immediately (no grace period)
                        </label>

                        <button
                            @click="cancelSubscription"
                            :disabled="cancelForm.processing"
                            class="w-full px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700 disabled:opacity-50"
                        >
                            {{ cancelForm.processing ? 'Cancelling...' : 'Cancel Subscription' }}
                        </button>
                    </div>
                </div>

                <!-- Resume -->
                <div v-if="subscription.ends_at && subscription.stripe_status !== 'canceled'" class="bg-gray-900 rounded-lg border border-gray-800 shadow-sm p-6">
                    <h2 class="text-lg font-semibold text-white mb-4">Resume Subscription</h2>
                    <p class="text-sm text-gray-500 mb-3">Your subscription is set to cancel. You can resume it before it expires.</p>

                    <button
                        @click="resumeSubscription"
                        class="w-full px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700"
                    >
                        Resume Subscription
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>