added log out modal

2025-03-15 02:28:22 +03:30
parent 73ed32c635
commit 65b31c2e7a
1 changed files with 100 additions and 0 deletions
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+// imports
+
+import useDeleteCartAll from "~/composables/api/orders/useDeleteCartAll";
+import { useToast } from "~/composables/global/useToast";
+import { QUERY_KEYS } from "~/constants";
+
+// state
+
+const { $queryClient: queryClient } = useNuxtApp();
+const router = useRouter();
+const { addToast } = useToast();
+
+const isShow = ref(false);
+
+// queries
+
+const { mutateAsync: deleteCartAll, isPending: deleteCartAllIsPending } =
+    useDeleteCartAll();
+
+// methods
+
+const handleSubmit = () => {
+    deleteCartAll(undefined, {
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.cart] });
+            isShow.value = false;
+            addToast({
+                message: "سبد با موفقیت حذف شد",
+                options: {
+                    status: "success",
+                },
+            });
+            setTimeout(() => {
+                router.push({ name: "index" });
+            }, 1000);
+        },
+        onError: () => {
+            addToast({
+                message: "خطایی در حذف سبد رخ داد",
+                options: {
+                    status: "error",
+                },
+            });
+        },
+    });
+};
+</script>
+
+<template>
+    <Modal
+        v-model="isShow"
+        title="خروج از حساب"
+        icon="bi:arrow-bar-right"
+        contectClass="!w-[90vw] lg:!w-[35vw]"
+        @close="isShow = false"
+    >
+        <template #trigger>
+            <slot name="trigger" />
+        </template>
+
+        <template #content>
+            <div class="w-full flex flex-col text-start gap-3 py-5" dir="rtl">
+                <p>
+                    با خارج شدن از حساب کاربری، دسترسی شما به برخی از امکانات
+                    محدود خواهد شد. اگر قصد دارید دوباره وارد شوید، می‌توانید از
+                    همان اطلاعات حساب خود استفاده کنید. در صورت نیاز به کمک یا
+                    بروزرسانی اطلاعات حساب، تیم پشتیبانی ما آماده پاسخگویی به
+                    شماست.
+                </p>
+                <p>ما همیشه منتظر بازگشت شما هستیم! 😊</p>
+            </div>
+
+            <div class="py-6 border-t border-slate-200 flex gap-3">
+                <Button
+                    @click="handleSubmit"
+                    class="rounded-full px-10"
+                    size="md"
+                >
+                    <Icon
+                        v-if="deleteCartAllIsPending"
+                        name="svg-spinners:3-dots-bounce"
+                    />
+                    <span v-else>آره; دارم میرم</span>
+                </Button>
+                <DialogClose aria-label="Close">
+                    <Button
+                        variant="outlined"
+                        class="rounded-full px-10"
+                        size="md"
+                    >
+                        نه فعلا هستم
+                    </Button>
+                </DialogClose>
+            </div>
+        </template>
+    </Modal>
+</template>
+
+<style scoped></style>