hossein-por-shop/frontend/pages/transaction.vue

<script setup lang="ts">
// imports

import useGetTransaction from "~/composables/api/orders/useGetTransaction";
import usePersianDate from "~/composables/global/usePersianDate";

// meta

definePageMeta({
    layout: "none",
});

// state

const route = useRoute();

const { formatToPersian } = usePersianDate();

// computed

const tracking_code = computed(() => route.query["tc"] as string);

// queries

const {
    data: transaction,
    isLoading: transactionIsLoading,
    suspense,
} = useGetTransaction(tracking_code);

await suspense();

// computed

const statusVariants = computed(() => {
    if (transaction.value?.bank_result?.status == "succeeded") {
        return {
            background_color: "bg-success-500",
            text_color: "text-white",
            after_background_color:
                "bg-success-600/50 shadow-[0px_40px_175px_1px] shadow-success-100",
            icon: "bi:check",
            title: "تراکنش موفق",
            hue_deg: "[filter:_hue-rotate(260deg)] ",
        };
    } else if (transaction.value?.bank_result?.status == "canceled") {
        return {
            background_color: "bg-danger-500",
            text_color: "text-white",
            after_background_color:
                "bg-danger-600/50 shadow-[0px_40px_175px_1px] shadow-danger-100",
            icon: "bi:x",
            title: "تراکنش ناموفق",
            hue_deg: "[filter:_hue-rotate(120deg)]",
        };
    } else {
        return {
            background_color: "bg-slate-300",
            text_color: "text-black",
            after_background_color:
                "bg-slate-600/50 shadow-[0px_40px_175px_1px] shadow-slate-100",
            icon: "bi:question-circle",
            title: "تراکنش معلق",
            hue_deg: "[filter:_hue-rotate(0deg)]",
        };
    }
});

const statusTitle = computed(() => {
    if (transaction.value?.bank_result?.status == "succeeded") {
        return "";
    } else if (transaction.value?.bank_result?.status == "canceled") {
        return "";
    } else {
        return "";
    }
});
</script>

<template>
    <div class="w-full flex-col-center container gap-3 h-svh">
        <div
            class="pattern -z-10 size-full fixed inset-0 opacity-90"
            :style="{
                backgroundSize: 150,
                mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0.3) 80%)',
            }"
        />

        <div class="max-w-[500px] w-full relative">
            <NuxtImg
                class="aspect-square w-[220px] md:w-[280px] lg:w-[320px] absolute -top-[70px] md:-top-[110px] lg:-top-[138px] left-1/2 -translate-x-1/2 z-10 [filter:_drop-shadow(0px_4px_20px_rgba(0, 0, 0, 0.15))]"
                src="/img/heymlz/heymlz-seat.gif"
                :class="statusVariants.hue_deg"
            />

            <div
                class="w-full h-5/6 absolute rounded-3xl -z-3 -bottom-1 left-1/2 -translate-x-1/2"
                :class="statusVariants.after_background_color"
            />

            <div
                class="w-full p-5 lg:p-6 gap-5 lg:gap-6 flex flex-col items-center bg-white border shadow-black/10 justify-center overflow-hidden border-slate-300 rounded-3xl relative mt-20 z-1"
            >
                <div
                    class="w-full h-[4rem] lg:h-[5.2rem] absolute left-0 top-0 flex-center gap-2"
                    :class="[
                        statusVariants.background_color,
                        statusVariants.text_color,
                    ]"
                >
                    <Icon
                        :name="statusVariants.icon"
                        class="text-2xl lg:text-3xl"
                    />
                    <h1 class="text-lg lg:text-2xl font-normal">
                        {{ statusVariants.title }}
                    </h1>
                </div>

                <div
                    class="w-full flex flex-col gap-4 lg:gap-5 pt-[4.5rem] lg:pt-[5.5rem] p-1"
                >
                    <div
                        v-if="transaction?.bank_result?.bank_type"
                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                    >
                        <span class="font-medium">درگاه پرداخت</span>
                        <span class="opacity-50">{{
                            transaction?.bank_result?.bank_type
                        }}</span>
                    </div>
                    <div
                        v-if="transaction?.bank_result?.tracking_code"
                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                    >
                        <span class="font-medium">کد پیگیری</span>
                        <span class="opacity-50 underline"
                            >#{{
                                transaction?.bank_result?.tracking_code
                            }}</span
                        >
                    </div>
                    <div
                        v-if="transaction?.bank_result?.reference_number"
                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                    >
                        <span class="font-medium">کد ارجاع</span>
                        <span class="opacity-50 underline"
                            >#{{
                                transaction?.bank_result?.reference_number
                            }}</span
                        >
                    </div>
                    <div
                        v-if="transaction?.bank_result?.amount"
                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                    >
                        <span class="font-medium">مبلغ</span>
                        <span class="opacity-50">{{
                            transaction?.bank_result?.amount
                        }}</span>
                    </div>
                    <div
                        v-if="transaction?.bank_result?.created_at"
                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                    >
                        <span class="font-medium">تاریخ</span>
                        <span class="opacity-50">{{
                            formatToPersian(
                                transaction?.bank_result?.created_at
                            )
                        }}</span>
                    </div>
                    <div
                        v-if="transaction?.bank_result?.response_result"
                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                    >
                        <span class="font-medium">وضعیت پرداخت</span>
                        <span class="opacity-50">{{
                            transaction?.bank_result?.status_detail
                        }}</span>
                    </div>
                </div>

                <div
                    v-if="transaction?.detail"
                    class="w-full text-center opacity-50 text-sm lg:text-sm leading-[175%]"
                >
                    {{ transaction?.detail }}
                </div>

                <div
                    class="w-full flex flex-col-reverse lg:flex-row items-center justify-between gap-4 lg:gap-5"
                >
                    <NuxtLink to="/" class="w-full">
                        <Button
                            class="w-full rounded-full max-lg:py-2"
                            start-icon="ci:left-rotation"
                            variant="secondary"
                            >بازگشت به فروشگاه</Button
                        >
                    </NuxtLink>
                    <Button
                        v-if="transaction?.bank_result?.status == 'succeeded'"
                        class="w-full rounded-full max-lg:py-2 bg-success-500 hover:text-success-500 hover:border-success-500 hover:**:!stroke-success-500"
                        start-icon="ci:share"
                        variant="primary"
                        >دانلود فاکتور</Button
                    >
                </div>
            </div>
        </div>
    </div>
</template>