purityselect/resources/js/pages/patient/subscriptionDetail.vue

<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const route = useRoute();
const router = useRouter();

const subscription = computed(async () => {
    const id = route.params.id;
    await store.dispatch("subscriptionByID", { id: id });
    return store.getters.getSubscriptionById(id);
});

const getPlanIcon = (title) => {
    if (!title) return "mdi-help-circle";
    switch (title.toLowerCase()) {
        case "basic":
            return "mdi-star-outline";
        case "premium":
            return "mdi-star-half";
        case "pro":
            return "mdi-star";
        case "enterprise":
            return "mdi-medal";
        default:
            return "mdi-help-circle";
    }
};

const getPlanColor = (title) => {
    if (!title) return "grey";
    switch (title.toLowerCase()) {
        case "basic":
            return "blue";
        case "premium":
            return "purple";
        case "pro":
            return "green";
        case "enterprise":
            return "orange";
        default:
            return "grey";
    }
};

const getStatusColor = (status) => {
    if (!status) return "grey";
    switch (status.toLowerCase()) {
        case "active":
            return "success";
        case "paused":
            return "warning";
        case "cancelled":
            return "error";
        default:
            return "grey";
    }
};

const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString("en-US", {
        year: "numeric",
        month: "long",
        day: "numeric",
    });
};

const formatPrice = (price) => {
    return new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
    }).format(price);
};

const goBack = () => {
    router.go(-1);
};

const cancelSubscription = () => {
    // Implement cancellation logic here
    console.log("Cancelling subscription:", subscription.value.id);
};
</script>

<template>
    <v-container v-if="subscription" class="subscription-detail-container">
        <v-row justify="center">
            <v-col cols="12" md="10" lg="8">
                <v-card class="subscription-detail-card">
                    <v-card-title
                        class="text-h3 d-flex justify-center pa-6 gradient-background"
                    >
                        <v-avatar size="80" color="white" class="elevation-3">
                            <v-icon
                                :color="getPlanColor(subscription.title)"
                                size="50"
                            >
                                {{ getPlanIcon(subscription.title) }}
                            </v-icon>
                        </v-avatar>
                    </v-card-title>

                    <v-card-text class="pa-6">
                        <h2 class="text-h4 text-center mb-6">
                            {{ subscription.title }} Plan
                        </h2>

                        <v-row>
                            <v-col cols="12" md="6">
                                <v-list>
                                    <v-list-item>
                                        <template v-slot:prepend>
                                            <v-icon color="primary"
                                                >mdi-identifier</v-icon
                                            >
                                        </template>
                                        <v-list-item-title
                                            >ID:
                                            {{
                                                subscription.id
                                            }}</v-list-item-title
                                        >
                                    </v-list-item>

                                    <v-list-item>
                                        <template v-slot:prepend>
                                            <v-icon color="primary"
                                                >mdi-calendar-start</v-icon
                                            >
                                        </template>
                                        <v-list-item-title
                                            >Start Date:
                                            {{
                                                formatDate(
                                                    subscription.startDate
                                                )
                                            }}</v-list-item-title
                                        >
                                    </v-list-item>

                                    <v-list-item>
                                        <template v-slot:prepend>
                                            <v-icon color="primary"
                                                >mdi-calendar-clock</v-icon
                                            >
                                        </template>
                                        <v-list-item-title
                                            >Next Billing:
                                            {{
                                                formatDate(
                                                    subscription.nextBillingDate
                                                )
                                            }}</v-list-item-title
                                        >
                                    </v-list-item>
                                </v-list>
                            </v-col>

                            <v-col cols="12" md="6">
                                <v-list>
                                    <v-list-item>
                                        <template v-slot:prepend>
                                            <v-icon color="primary"
                                                >mdi-currency-usd</v-icon
                                            >
                                        </template>
                                        <v-list-item-title
                                            >Price:
                                            {{
                                                formatPrice(subscription.price)
                                            }}</v-list-item-title
                                        >
                                    </v-list-item>

                                    <v-list-item>
                                        <template v-slot:prepend>
                                            <v-icon color="primary"
                                                >mdi-information</v-icon
                                            >
                                        </template>
                                        <v-list-item-title>
                                            Status:
                                            <v-chip
                                                :color="
                                                    getStatusColor(
                                                        subscription.status
                                                    )
                                                "
                                                small
                                                class="ml-2"
                                            >
                                                {{ subscription.status }}
                                            </v-chip>
                                        </v-list-item-title>
                                    </v-list-item>

                                    <v-list-item>
                                        <template v-slot:prepend>
                                            <v-icon color="primary"
                                                >mdi-refresh</v-icon
                                            >
                                        </template>
                                        <v-list-item-title
                                            >Billing Cycle:
                                            {{
                                                subscription.billingCycle
                                            }}</v-list-item-title
                                        >
                                    </v-list-item>
                                </v-list>
                            </v-col>
                        </v-row>

                        <v-divider class="my-6"></v-divider>

                        <h3 class="text-h5 mb-4">Plan Features</h3>
                        <v-chip-group column>
                            <v-chip
                                v-for="feature in subscription.features"
                                :key="feature"
                                color="primary"
                                outlined
                            >
                                {{ feature }}
                            </v-chip>
                        </v-chip-group>
                    </v-card-text>

                    <v-card-actions class="pa-6">
                        <v-btn
                            color="primary"
                            @click="goBack"
                            prepend-icon="mdi-arrow-left"
                            >Go Back</v-btn
                        >
                        <v-spacer></v-spacer>
                        <v-btn
                            color="error"
                            @click="cancelSubscription"
                            prepend-icon="mdi-cancel"
                            >Cancel Subscription</v-btn
                        >
                    </v-card-actions>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>