From 064c0df1c5a597f4e751e1b71e167a9ba3b4334f Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 8 Apr 2025 22:59:08 +0330
Subject: [PATCH] added payment pending modal

---
 .../cart/checkout/PaymentPendingModal.vue     | 89 +++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 frontend/components/cart/checkout/PaymentPendingModal.vue

diff --git a/frontend/components/cart/checkout/PaymentPendingModal.vue b/frontend/components/cart/checkout/PaymentPendingModal.vue
new file mode 100644
index 0000000..9446c24
--- /dev/null
+++ b/frontend/components/cart/checkout/PaymentPendingModal.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    isShow: boolean;
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { isShow } = toRefs(props);
+
+// computeds
+
+const visible = computed({
+    get: () => isShow.value,
+    set: () => null,
+});
+</script>
+
+<template>
+    <DialogRoot v-model:open="visible">
+        <DialogPortal>
+            <DialogOverlay
+                class="bg-black/50 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-999"
+            />
+
+            <div
+                class="fixed inset-0 w-full h-svh z-9999 flex-center"
+                v-if="visible"
+            >
+                <div
+                    class="overflow-y-auto max-h-svh absolute left-[50%] py-10 w-fit max-w-[50rem] translate-x-[-50%]"
+                >
+                    <DialogContent
+                        class="min-w-[30vw] max-w-[50vw] data-[state=open]:animate-content-show text-black font-iran-yekan-x focus:outline-none z-[100]"
+                    >
+                        <div
+                            class="w-full h-[350px] shrink-0 rounded-2xl relative overflow-hidden flex-center"
+                        >
+                            <div
+                                class="bg-custom-conic size-[200%] absolute -top-1/2 -left-1/2 animate-spin [animation-duration:3s] z-[1]"
+                            ></div>
+                            <div
+                                class="shrink-0 p-6 pt-16 z-[2] absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-[98.8%] h-[98.5%] flex flex-col gap-10 items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-xl"
+                            >
+                                <video
+                                    class="aspect-square w-[350px] animate-fade-in"
+                                    src="/video/heymlz/heymlz-handshake-full.webm"
+                                    :style="{
+                                        filter: 'drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.15))',
+                                    }"
+                                    autoplay
+                                    playsinline
+                                    webkit-playsinline
+                                    muted
+                                />
+
+                                <div class="-translate-y-24 flex-center gap-3">
+                                    <Icon
+                                        name="svg-spinners:3-dots-bounce"
+                                        size="20"
+                                    />
+                                    <span class="text-lg">
+                                        در حال انتقال به درگاه پرداخت
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </DialogContent>
+                </div>
+            </div>
+        </DialogPortal>
+    </DialogRoot>
+</template>
+
+<style scoped>
+.bg-custom-conic {
+    background-size: 100% 100%;
+    background-position: 0px 0px, 0px 0px;
+    background-image: radial-gradient(
+            142% 91% at -6% 90%,
+            #ff000000 1%,
+            #ff000000 99%
+        ),
+        conic-gradient(from 0deg at 50% 50%, #000000ff 0%, #ff000000 34%);
+}
+</style>