From 3e02d7f8e3bca9482a8ee800b8c9a1c205fea125 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 16 Apr 2025 20:14:21 +0330
Subject: [PATCH] added transaction page

---
 frontend/pages/transaction.vue | 235 ++++++++++++++++++++++++++-------
 1 file changed, 187 insertions(+), 48 deletions(-)

diff --git a/frontend/pages/transaction.vue b/frontend/pages/transaction.vue
index 0e099d1..eb9ec4d 100644
--- a/frontend/pages/transaction.vue
+++ b/frontend/pages/transaction.vue
@@ -1,75 +1,214 @@
 <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 gap-3 h-svh relative">
+    <div class="w-full flex-col-center container gap-3 h-svh">
         <div
-            class="bg-[url(/img/pattern-1.png)] -z-10 size-full fixed inset-0 opacity-70"
+            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%)',
             }"
         />
 
-        <NuxtImg src="/logo/logo-col.png" class="size-44 -mt-12" />
+        <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="max-w-[500px] w-full p-6 gap-6 flex flex-col items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-3xl relative overflow-hidden"
-        >
             <div
-                class="w-full h-[5rem] bg-success-500 absolute left-0 top-0 flex-center gap-2 text-white"
+                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"
             >
-                <Icon name="bi:check" size="28" />
-                <h1 class="typo-h-6 font-normal">تراکنش موفق</h1>
-            </div>
+                <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-5 pt-[5.5rem] p-1">
                 <div
-                    class="w-full flex flex-row-reverse items-center justify-between"
+                    class="w-full flex flex-col gap-4 lg:gap-5 pt-[4.5rem] lg:pt-[5.5rem] p-1"
                 >
-                    <span>مبلغ تراكنش </span>
-                    <span>١٢٣ تومان</span>
-                </div>
-                <div
-                    class="w-full flex flex-row-reverse items-center justify-between"
-                >
-                    <span>شماره پيكَيرى </span>
-                    <span>١٢٣ تومان</span>
-                </div>
-                <div
-                    class="w-full flex flex-row-reverse items-center justify-between"
-                >
-                    <span>شماره ارجاع </span>
-                    <span>١٢٣ تومان</span>
-                </div>
-                <div
-                    class="w-full flex flex-row-reverse items-center justify-between"
-                >
-                    <span>تاريخ و ساعت </span>
-                    <span>١٢٣ تومان</span>
-                </div>
-            </div>
-
-            <div class="w-full flex items-center justify-between gap-5">
-                <NuxtLink to="/" class="w-full">
-                    <Button
-                        class="w-full rounded-full"
-                        start-icon="ci:left-rotation"
-                        variant="secondary"
-                        >بازگشت به فروشگاه</Button
+                    <div
+                        v-if="transaction?.bank_result?.bank_type"
+                        class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
                     >
-                </NuxtLink>
-                <Button
-                    class="w-full rounded-full bg-success-500 hover:text-success-500 hover:border-success-500 hover:**:!stroke-success-500"
-                    start-icon="ci:share"
-                    variant="primary"
-                    >دانلود فاکتور</Button
+                        <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>