merage and test docker compsoe

frontend/app.vue

@@ -35,6 +35,6 @@ const closeModal = () => {
             />
         </ToastProvider>
 
-        <VueQueryDevtools dir="ltr" buttonPosition="bottom-right" />
+        <VueQueryDevtools dir="ltr" buttonPosition="top-right"/>
     </div>
 </template>

frontend/assets/css/button.comp.css

@@ -53,7 +53,7 @@
     }
 
     &:hover {
-        @apply bg-blue-200 border-blue-500 text-blue-500;
+        @apply bg-transparent border-blue-500 text-blue-500;
 
         svg[class~="iconify"] path {
             @apply stroke-blue-500;

frontend/components/cart/checkout/Gateway.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    gateway: PaymentGateway;
+    isSelected: boolean;
+};
+
+type Emits = {
+    select: [value: null];
+};
+
+// props
+
+defineProps<Props>();
+
+// emits
+
+const emit = defineEmits<Emits>();
+</script>
+
+<template>
+    <button
+        @click="emit('select', null)"
+        :class="
+            isSelected
+                ? 'ring-2 ring-offset-2 ring-black border-black'
+                : 'border-slate-200'
+        "
+        class="w-full p-5 border rounded-xl flex flex-col gap-4 transition-all cursor-pointer relative overflow-hidden"
+    >
+        <div class="aspect-square flex-center">
+            <NuxtImg :src="gateway.picture" class="object-cover" />
+        </div>
+        <span class="typo-label-sm text-right text-black">
+            {{ gateway.title }}
+        </span>
+        <Transition
+            enter-active-class="animate__animated animate__fadeInLeft animate__faster"
+            leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
+        >
+            <span
+                v-if="isSelected"
+                class="bg-black rounded-md p-0.5 text-center bottom-4 left-4 text-slate-200 text-[10px] lg:text-xs absolute"
+            >
+                <Icon name="bi:check" size="20" class="**:fill-white" />
+            </span>
+        </Transition>
+    </button>
+</template>
+
+<style scoped></style>

frontend/components/cart/delivery/AddressModal.vue

@@ -43,6 +43,7 @@ const addressData = ref({
         : address.value?.for_me == true
         ? "بله"
         : "خیر",
+    is_main: address.value?.is_main ?? false,
 });
 
 // queries
@@ -67,6 +68,7 @@ const closeModal = () => {
             name: "",
             phone: "",
             for_me: "بله",
+            is_main: false,
         };
     }
     isShow.value = false;
@@ -253,6 +255,16 @@ watch(
                         class="flex items-center field-sizing-content resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black max-h-[10rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
                     ></textarea>
                 </div>
+
+                <div class="flex items-center justify-between w-full gap-2">
+                    <label
+                        for="is_main"
+                        class="text-xs font-semibold lg:text-sm text-gray-900"
+                    >
+                        به عنوان آدرس پیش فرض ثبت شود؟
+                    </label>
+                    <Switch id="is_main" v-model="addressData.is_main" />
+                </div>
             </div>
 
             <div class="py-6 border-t border-slate-200 flex gap-3">

frontend/components/cart/global/CartSummary.vue

@@ -21,17 +21,19 @@ const discountCode = ref(cart.value?.discount_code?.code || "");
 
 const {
     mutateAsync: submitDiscountCode,
-    isPending: submitDiscountCodeIsPending
+    isPending: submitDiscountCodeIsPending,
 } = useSubmitDiscountCode();
 
 const {
     mutateAsync: deleteDiscountCode,
-    isPending: deleteDiscountCodeIsPending
+    isPending: deleteDiscountCodeIsPending,
 } = useDeleteDiscountCode();
 
 // computed
 
-const nextPage = computed(() => route.meta.nextPage as { name: string; label: string } | undefined);
+const nextPage = computed(
+    () => route.meta.nextPage as { name: string; label: string } | undefined
+);
 
 const hasSubmittedDiscountCode = computed(() => !!cart.value?.discount_code);
 
@@ -48,11 +50,11 @@ const handleSubmitDiscountCode = () => {
                 addToast({
                     message: "خطایی در ثبت کد تخفیف رخ داد",
                     options: {
-                        status: "error"
+                        status: "error",
-                    }
+                    },
                 });
                 discountCode.value = "";
-            }
+            },
         }
     );
 };
@@ -67,11 +69,11 @@ const handleDeleteDiscountCode = () => {
             addToast({
                 message: "خطایی در حذف کد تخفیف رخ داد",
                 options: {
-                    status: "error"
+                    status: "error",
-                }
+                },
             });
             discountCode.value = "";
-        }
+        },
     });
 };
 </script>

frontend/components/global/Brands.vue

@@ -12,42 +12,55 @@ const {} = toRefs(props);
 </script>
 
 <template>
-    <div class="relative w-full flex flex-col justify-center min-h-[450px] md:h-[80svh]">
+    <div class="relative w-full flex flex-col justify-center min-h-[450px] h-svh">
+        <div class="flex-col-center gap-6 mb-32">
+            <span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black">
+                مجله در ستون و سطرآنچ
+            </span>
+            <p class="text-slate-500 text-center max-w-[750px] typo-p-lg xl:typo-p-xl">
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
+                متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
+            </p>
+        </div>
         <div class="-rotate-z-2 z-20">
             <div
-                class="bg-warning-500 flex pr-20 gap-12 sm:gap-20 py-2 w-max animate-marquee-reverse"
+                class="bg-blue-500 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee-reverse h-[140px]"
             >
-                <span
+                <template v-for="i in 10">
-                    v-for="i in 10"
+                    <div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
-                    class="text-[40px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
+                        HEYMLZ
-                >
+                    </div>
-                    TEST {{ i }}
+                    <NuxtImg src="/img/heymlz/heymlz-logo.png" class="h-[45px] invert opacity-85" />
-                </span>
+                </template>
-                <span
+                <template v-for="i in 10">
-                    v-for="i in 10"
+                    <div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
-                    class="text-[40px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
+                        HEYMLZ
-                >
+                    </div>
-                    TEST {{ i }}
+                    <NuxtImg src="/img/heymlz/heymlz-logo.png" class="h-[45px] invert opacity-85" />
-                </span>
+                </template>
             </div>
         </div>
 
         <div class="rotate-z-2 z-10">
             <div
-                class="bg-slate-50 flex pr-20 gap-12 sm:gap-20 py-2 w-max animate-marquee"
+                class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[140px]"
             >
-                <span
+                <template v-for="i in 1">
-                    v-for="i in 10"
+                    <NuxtImg src="/img/brands/brand-1.png" class="h-[45px] grayscale opacity-40" />
-                    class="text-[40px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
+                    <NuxtImg src="/img/brands/brand-2.png" class="h-[45px] grayscale opacity-40" />
-                >
+                    <NuxtImg src="/img/brands/brand-3.png" class="h-[45px] grayscale opacity-40" />
-                    TEST {{ i }}
+                    <NuxtImg src="/img/brands/brand-4.png" class="h-[45px] grayscale opacity-40" />
-                </span>
+                    <NuxtImg src="/img/brands/brand-5.png" class="h-[45px] grayscale opacity-40" />
-                <span
+                    <NuxtImg src="/img/brands/brand-6.png" class="h-[45px] grayscale opacity-40" />
-                    v-for="i in 10"
+                </template>
-                    class="text-[40px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
+                <template v-for="i in 1">
-                >
+                    <NuxtImg src="/img/brands/brand-1.png" class="h-[45px] grayscale opacity-40" />
-                    TEST {{ i }}
+                    <NuxtImg src="/img/brands/brand-2.png" class="h-[45px] grayscale opacity-40" />
-                </span>
+                    <NuxtImg src="/img/brands/brand-3.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-4.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-5.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-6.png" class="h-[45px] grayscale opacity-40" />
+                </template>
             </div>
         </div>
     </div>

frontend/components/global/ProductsGrid.vue

@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
             </span>
             <NuxtLink to="/products">
                 <Button
-                    variant="outlined"
+                    variant="primary"
                     class="rounded-full max-sm:typo-label-sm max-sm:py-2"
                     end-icon="ci:arrow-left"
                 >

frontend/components/home/Categories.vue

@@ -25,28 +25,27 @@ const onSwiper = (swiper: SwiperClass) => {
         class="flex flex-col justify-center gap-4 bg-black h-[150svh] relative overflow-hidden"
     >
 
-<!--        <div class="w-full flex justify-center items-center relative z-10">-->
+        <div class="w-full relative translate-y-[-200px] z-10">
-<!--            <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">-->
+            <div class="flex-col-center gap-6">
-<!--                دسته بندی ها-->
+                <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
-<!--            </span>-->
+                   دسته بندی ها
-<!--        </div>-->
+                </span>
+                <p class="text-slate-300 text-center max-w-[750px] typo-p-lg xl:typo-p-xl">
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها
+                    و
+                    متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
+                </p>
+            </div>
+        </div>
 
-        <NuxtImg
-            src="/img/categories-gradient.png"
-            class="animate-spin [animation-duration:16s] object-cover absolute size-full brightness-45 scale-115 aspect-square"
-            :style="{
-                maskImage: 'radial-gradient(black, transparent 50%)'
-            }"
-            alt=""
-        />
 
         <div class="w-full my-20 relative">
             <video
-                class="aspect-square w-[450px] translate-[-253px] absolute left-1/2 -translate-x-1/2 z-10"
+                class="aspect-square w-[450px] translate-[-293px] absolute left-1/2 -translate-x-1/2 z-10"
                 :style="{
                     filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
                 }"
-                src="/video/heymlz/heymlz-seat-2.webm"
+                src="/video/heymlz/heymlz-handshake-part-1.webm"
                 autoplay
                 playsinline
                 webkit-playsinline
@@ -109,7 +108,7 @@ const onSwiper = (swiper: SwiperClass) => {
 
         <div class="w-full flex justify-center items-center">
             <NuxtLink to="/category">
-                <Button variant="solid" class="invert rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
+                <Button variant="primary" class="rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
                         end-icon="ci:arrow-left">
                     مشاهده همه دسته ها
                 </Button>

frontend/components/home/LatestStories.vue

@@ -20,7 +20,7 @@ await suspense();
                 مقالات اخیر سایت
             </span>
             <NuxtLink to="/articles">
-                <Button variant="outlined" class="rounded-full max-sm:typo-label-sm max-sm:py-2"
+                <Button variant="primary" class="rounded-full max-sm:typo-label-sm max-sm:py-2"
                         end-icon="ci:arrow-left">
                     نمایش همه
                 </Button>

frontend/components/home/Preview.vue

@@ -15,6 +15,13 @@ const activeSlideVideo = ref<"left" | "right" | "none">("none");
 const draggableEl = ref<HTMLElement | null>(null);
 const previewContainerEl = ref<HTMLElement | null>(null);
 
+const heymlzElement = useTemplateRef<HTMLDivElement>("heymlzElement");
+const heymlzElementIsVisible = useElementVisibility(heymlzElement, {
+    rootMargin: "0px 0px -40% 0px"
+});
+
+const showHeymlzAnimation = ref(false);
+
 const { x: dragAxisX } = useDraggable(draggableEl, {
     initialValue: { x: 0, y: 0 },
     axis: "x"
@@ -22,6 +29,17 @@ const { x: dragAxisX } = useDraggable(draggableEl, {
 
 // watch
 
+watch(heymlzElementIsVisible, (newValue) => {
+    if (newValue) {
+        showHeymlzAnimation.value = true;
+        setTimeout(() => {
+            showHeymlzAnimation.value = false;
+        }, 3200);
+    }
+}, {
+    once: true
+});
+
 watch(() => clipPathPercent.value, (newValue) => {
     if (newValue > 80) {
         activeSlideVideo.value = "right";
@@ -62,7 +80,8 @@ watch(
                     <NuxtImg
                         v-if="activeSlideVideo !== 'right'"
                         :src="homeData!.difreance_section.image1"
-                        class="select-none absolute size-full object-cover brightness-[95%]"
+                        :class="showHeymlzAnimation ? 'brightness-35' : 'brightness-[95%]'"
+                        class="select-none absolute size-full object-cover transition-[filter] duration-250"
                         :alt="homeData!.difreance_section.title1"
                     />
                     <video
@@ -76,13 +95,14 @@ watch(
                     />
                 </Transition>
 
-                <div class="absolute size-full right-0 w-full">
+                <div class="absolute size-full right-0 w-full" ref="heymlzElement">
 
                     <Transition name="fade">
                         <NuxtImg
                             v-if="activeSlideVideo !== 'left'"
                             :src="homeData!.difreance_section.image2"
-                            class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
+                            :class="showHeymlzAnimation ? 'brightness-35' : 'brightness-[95%]'"
+                            class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250"
                             :alt="homeData!.difreance_section.title2"
                         />
                         <video
@@ -97,12 +117,14 @@ watch(
                     </Transition>
 
                     <video
+                        v-if="showHeymlzAnimation"
                         src="/video/heymlz/heymlz-pulling.webm"
                         autoplay
                         muted
                         playsinline
+                        loop
                         webkit-playsinline
-                        class="size-[300px] absolute translate-x-[-100px] z-10 top-[32%] -translate-y-1/2"
+                        class="size-[400px] absolute translate-x-[-107px] z-10 top-[50%] -translate-y-1/2"
                         :style="{
                             left: `${clipPathPercent}%`,
                             filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))'
@@ -113,18 +135,23 @@ watch(
                         :style="{
                             left: `${clipPathPercent}%`,
                         }"
-                        :class="activeSlideVideo !== 'none' ? 'opacity-10' : ''"
+                        :class="[
-                        class="select-none w-2 h-full bg-black absolute left-0 flex items-center justify-center transition-opacity"
+                            activeSlideVideo !== 'none' ? 'opacity-10' : '',
+                            showHeymlzAnimation ? 'bg-neutral-300' : 'bg-black'
+                        ]"
+                        class="select-none w-2 h-full  absolute left-0 flex items-center justify-center transition-opacity duration-250"
                     >
 
                         <div
                             ref="draggableEl"
-                            class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-black size-11 flex items-center justify-center"
+                            :class="showHeymlzAnimation ? 'bg-neutral-300' : 'bg-black'"
+                            class="cursor-grab hover:scale-115 transition-transform rounded-full absolute size-11 flex items-center justify-center"
                         >
                             <Icon
                                 name="ci:arrows"
                                 size="24"
-                                class="**:stroke-white"
+                                class="transition-all"
+                                :class="showHeymlzAnimation ? '**:stroke-black' : '**:stroke-white'"
                             />
                         </div>
                     </div>

frontend/components/home/ProductsShowcase.vue

@@ -92,7 +92,6 @@ onUnmounted(() => {
                 :to="slide.link"
                 class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center"
             >
-
                 <NuxtImg
                     class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
                     :src="slide.image"
@@ -101,7 +100,7 @@ onUnmounted(() => {
                     }"
                     alt=""
                 />
-                <div class="flex flex-col items-center justify-center gap-4 text-center absolute z-20 mt-20">
+                <div class="flex flex-col items-center justify-center gap-6 text-center absolute z-20 mt-20">
                     <span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
                         {{ slide.title }}
                     </span>
@@ -110,8 +109,9 @@ onUnmounted(() => {
                     </p>
                     <NuxtLink :to="slide.link">
                         <Button
+                            variant="primary"
                             end-icon="ci:arrow-left"
-                            class="mt-6 invert max-sm:hidden max-lg:typo-label-xs px-12 rounded-full hover:bg-transparent"
+                            class="mt-8 max-sm:hidden max-lg:typo-label-xs px-10 rounded-full hover:bg-transparent"
                         >
                             مشاهده دسته بندی
                         </Button>

frontend/components/product/ChatBox/AiLoading.vue

@@ -21,18 +21,18 @@ const { circle } = toRefs(props);
     <div
         :style="{
             height: `${size}px`,
-            width: circle ? `${size}px` : '100%',
+            width: circle ? `${size}px` : '100%'
         }"
         class="relative flex items-center w-full justify-center shrink-0"
         :class="{
             'rounded-full overflow-hidden': circle,
         }"
     >
-        <img
+        <NuxtImg
             :style="{
                 maskImage: 'radial-gradient(black, transparent 70%)'
             }"
-            src="/public/img/ai-loading-2.gif"
+            src="/img/heymlz/heymlz-idle.gif"
             class="size-full object-cover absolute pt-2"
             alt="ai-loading"
         />

frontend/components/product/ChatBox/ChatBoxContainer.vue

@@ -20,6 +20,8 @@ const { isLoggedIn } = useAuth();
 const route = useRoute();
 const id = route.params.id as string | number;
 
+const scrollToBottomTimer = ref<NodeJS.Timeout | null>(null);
+
 const chatContainerEl = ref<HTMLElement | null>(null);
 
 const lastMessageBeforeUpdate = ref(0);
@@ -63,7 +65,10 @@ useInfiniteScroll(
 // methods
 
 const scrollToBottom = () => {
+    if (scrollToBottomTimer.value) clearTimeout(scrollToBottomTimer.value);
+    scrollToBottomTimer.value = setTimeout(() => {
         chatContainerScrollY.value = chatContainerEl.value?.scrollHeight ?? 0;
+    }, 50);
 };
 
 // computed
@@ -137,8 +142,7 @@ whenever(
                     >
                         <div
                             :style="{
-                                maskImage:
+                                maskImage: 'linear-gradient(to top, transparent, black 5%, black, black)'
-                                    'linear-gradient(to top, transparent, black 5%, black, black)',
                             }"
                             class="hide-scrollbar flex flex-col py-7 gap-6 h-full overflow-y-auto"
                             ref="chatContainerEl"
@@ -184,11 +188,20 @@ whenever(
                 </Transition>
             </template>
             <div
-                class="text-black p-4.5 size-full flex justify-center items-center"
+                class="text-black p-6 size-full flex justify-center items-center flex-col"
                 v-else
             >
-                <img class="size-[50px]" src="/img/heymlz/heymlz-idle.gif" alt="" />
+                <NuxtImg class="size-[250px]" src="/img/heymlz/heymlz-loading-1.gif" alt="" />
-                Please sign in first
+                <div class="flex flex-col gap-4 items-center">
+                    <span class="text-center typo-p-xl font-bold">سلام دوست عزیز!</span>
+                    <p class="text-center typo-p-md">
+                        من میتونم هر سوالی رو درمورد این محصول جواب بدم
+                        اگه میخوای شروع کنیم روی دکمه زیر کلیک کن
+                    </p>
+                </div>
+                <NuxtLink to="/signin">
+                    <Button class="mt-8 rounded-full px-10">ورود به فروشگاه</Button>
+                </NuxtLink>
             </div>
         </div>
     </Transition>

frontend/components/product/ChatBox/ChatInput.vue

@@ -7,6 +7,9 @@ import { useToast } from "~/composables/global/useToast";
 
 // state
 
+const route = useRoute();
+const id = route.params.id as string | number;
+
 const { $queryClient: queryClient } = useNuxtApp();
 
 const { addToast } = useToast();
@@ -27,7 +30,7 @@ const sendMessage = async () => {
 
             await createMessage({
                 new_message: value,
-                productId: 1,
+                productId: id,
             });
         } catch (e) {
             addToast({

frontend/components/product/ChatBox/ChatMessage.vue

@@ -54,13 +54,12 @@ onMounted(() => {
             `#chat-message-content-${id.value}`,
             {
                 text: "",
-                duration: 2.5,
                 ease: "none",
             },
             {
                 text: { value: content.value, rtl: false },
-                duration: 2.5,
                 ease: "none",
+                duration: 2.5,
                 onUpdate: () => emit("textUpdate"),
             }
         );
@@ -78,9 +77,9 @@ onMounted(() => {
             <div
                 class="relative overflow-hidden flex items-center justify-center mt-px bg-slate-300 rounded-full size-[35px] shrink-0"
             >
-                <img
+                <NuxtImg
-                    v-if="!reverse"
+                    v-if="reverse"
-                    src="/img/footer-bg.jpg"
+                    src="/img/heymlz/footer-share.svg"
                     class="size-full object-cover absolute"
                     alt="profile"
                 />

frontend/components/profile/index/ProfilePictureModal.vue

@@ -45,11 +45,11 @@ const {
 });
 
 const avatars = ref([
-    "/avatars/1.jpg",
+    "/img/avatars/1.jpg",
-    "/avatars/2.jpg",
+    "/img/avatars/2.jpg",
-    "/avatars/3.jpg",
+    "/img/avatars/3.jpg",
-    "/avatars/4.jpg",
+    "/img/avatars/4.jpg",
-    "/avatars/5.jpg",
+    "/img/avatars/5.jpg",
 ]);
 
 // queries
@@ -134,11 +134,7 @@ onFileDialogChange((files: any) => {
                     </div>
 
                     <div class="w-full flex-col-center gap-5">
-                        <Avatar
+                        <Avatar :src="currentProfile" alt="" class="!size-32" />
-                            :src="currentProfile"
-                            alt=""
-                            class="!size-32"
-                        />
                         <Button
                             class="rounded-full w-[8rem]"
                             @click="openFileDialog"

frontend/components/profile/notifications/notification.vue

@@ -7,7 +7,7 @@
         <div class="flex flex-col gap-2">
             <div class="flex items-center gap-3">
                 <Icon name="bi:info-circle" size="20" />
-                <h3 class="typo-sub-h-lg font-semibold">تغییر وضعیت سفارش</h3>
+                <h3 class="typo-sub-h-md font-semibold">تغییر وضعیت سفارش</h3>
                 |
                 <span class="typo-p-xs text-cyan-500 font-semibold">
                     ۲۳ تیر

frontend/components/profile/tickets/[id]/TicketBubble.vue

@@ -33,8 +33,8 @@ const profile = computed(() => {
     return is_user.value
         ? account.value?.profile_photo
             ? account.value?.profile_photo
-            : "/avatars/1.jpg"
+            : "/img/avatars/1.jpg"
-        : "/avatars/3.jpg";
+        : "/img/avatars/3.jpg";
 });
 
 const username = computed(() => {

frontend/composables/api/account/useCreateOrUpdateAddress.ts

@@ -5,7 +5,7 @@ import { API_ENDPOINTS } from "~/constants";
 
 // types
 
-export type CreateOrUpdateAddressResponse = Omit<Address, "is_main">;
+export type CreateOrUpdateAddressResponse = Address;
 
 const useCreateOrUpdateAddress = (update: ComputedRef<Boolean>) => {
     // state

frontend/composables/api/chat/useGetChat.ts

@@ -6,9 +6,9 @@ import { useAuth } from "~/composables/api/auth/useAuth";
 
 // types
 
-export type GetBranchResponse = ApiPaginated<Chat>;
+export type GetChatResponse = ApiPaginated<Chat>;
 
-const useGetBranch = (productId: string | number, enabled: Ref<boolean>) => {
+const useGetChat = (productId: string | number, enabled: Ref<boolean>) => {
     // state
 
     const { $axios: axios } = useNuxtApp();
@@ -26,7 +26,7 @@ const useGetBranch = (productId: string | number, enabled: Ref<boolean>) => {
         limit: number;
         offset: number;
     }) => {
-        const { data } = await axios.get<GetBranchResponse>(
+        const { data } = await axios.get<GetChatResponse>(
             `${API_ENDPOINTS.chat.messages}/${productId}`,
             {
                 params: {
@@ -65,4 +65,4 @@ const useGetBranch = (productId: string | number, enabled: Ref<boolean>) => {
     });
 };
 
-export default useGetBranch;
+export default useGetChat;

frontend/composables/api/orders/useSetOrderAddress.ts

@@ -0,0 +1,33 @@
+// imports
+
+import { useMutation } from "@tanstack/vue-query";
+import { API_ENDPOINTS } from "~/constants";
+
+// types
+
+export type SetOrderAddressRequest = {
+    address_id: number;
+};
+
+const useSetOrderAddress = () => {
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleSetOrderAddress = async (params: SetOrderAddressRequest) => {
+        const { data } = await axios.post(
+            API_ENDPOINTS.orders.delivery.set_address,
+            { ...params }
+        );
+        return data;
+    };
+
+    return useMutation({
+        mutationFn: (AddressData: SetOrderAddressRequest) =>
+            handleSetOrderAddress(AddressData),
+    });
+};
+
+export default useSetOrderAddress;

frontend/constants/index.ts

@@ -53,6 +53,12 @@ export const API_ENDPOINTS = {
             add_discount: "/order/cart/discount",
             delete_discount: "/order/cart/discount",
         },
+        delivery: {
+            set_address: "/order/cart/set-address",
+        },
+        checkout: {
+            payment: "/order/cart/payment",
+        },
     },
 };
 

frontend/pages/cart/checkout.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // meta
 
+const route = useRoute();
+
 definePageMeta({
     layout: "cart",
     middleware: "check-is-logged-in",
@@ -9,45 +11,63 @@ definePageMeta({
     nextPage: { name: "checkout", label: "پرداخت" },
 });
 
-// types
-
-type PaymentGateway = {
-    id: number;
-    picture: string;
-    title: string;
-};
-
 // state
 
+const router = useRouter();
+
 const paymentGateways = ref<PaymentGateway[]>([
     {
         id: 1,
-        picture: "/zarinpal.png",
+        picture: "/img/gateways/zarinpal.png",
         title: "زرین پال",
+        type: "ZARINPAL",
     },
     {
         id: 2,
-        picture: "/saman-bank.png",
+        picture: "/img/gateways/sep.png",
-        title: "بانک سامان",
+        title: "سپ",
+        type: "SEP",
     },
     {
         id: 3,
-        picture: "/mellat-bank.png",
+        picture: "/img/gateways/mellat-bank.png",
         title: "بانک ملت",
+        type: "MELLAT",
     },
     {
         id: 4,
-        picture: "/jibimo.png",
+        picture: "/img/gateways/idpay.png",
-        title: "جیبی مو",
+        title: "آی دی پی",
+        type: "IDPAY",
     },
     {
         id: 5,
-        picture: "/idpay.png",
+        picture: "/img/gateways/zibal.png",
-        title: "آی دی پی",
+        title: "زیبال",
+        type: "ZIBAL",
+    },
+    {
+        id: 6,
+        picture: "/img/gateways/bahamta.png",
+        title: "باهمتا",
+        type: "BAHAMTA",
+    },
+    {
+        id: 7,
+        picture: "/img/gateways/bmi.png",
+        title: "بانک ملی",
+        type: "BMI",
     },
 ]);
 
-const selectedGateway = ref<PaymentGateway>(paymentGateways.value[0]);
+const selectedGateway = computed({
+    get: () => {
+        return !!route.query["gw"]
+            ? paymentGateways.value.find((i) => i.type == route.query["gw"])
+            : paymentGateways.value[0];
+    },
+    set: (nv: PaymentGateway) => router.push({ query: { gw: nv.type } }),
+});
 </script>
 
 <template>
@@ -64,24 +84,13 @@ const selectedGateway = ref<PaymentGateway>(paymentGateways.value[0]);
             <div
                 class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"
             >
-                <div
+                <Gateway
                     v-for="(gateway, index) in paymentGateways"
-                    @click="selectedGateway = { ...gateway }"
+                    :index="index"
-                    :key="index"
+                    :gateway="gateway"
-                    :class="
+                    :isSelected="selectedGateway?.id == gateway.id"
-                        selectedGateway.id == gateway.id
+                    @select="selectedGateway = { ...gateway }"
-                            ? 'ring-2 ring-offset-2 ring-black border-black'
+                />
-                            : 'border-slate-200'
-                    "
-                    class="w-full p-5 border rounded-xl flex flex-col gap-4 transition-all cursor-pointer"
-                >
-                    <div class="aspect-square flex-center">
-                        <NuxtImg :src="gateway.picture" class="object-cover" />
-                    </div>
-                    <span class="typo-label-sm text-black">
-                        {{ gateway.title }}
-                    </span>
-                </div>
             </div>
         </div>
         <OrderSummary />

frontend/pages/cart/delivery.vue

@@ -2,6 +2,9 @@
 // imports
 
 import useGetAllAddress from "~/composables/api/account/useGetAllAddress";
+import useSetOrderAddress from "~/composables/api/orders/useSetOrderAddress";
+import { useToast } from "~/composables/global/useToast";
+import { QUERY_KEYS } from "~/constants";
 
 // meta
 
@@ -24,10 +27,26 @@ type DeliveryData = {
     };
 };
 
+// queries
+
+const { data: addresses, isLoading: addressesIsLoading } = useGetAllAddress();
+
+const { mutateAsync: setOrderAddress, isPending: setOrderAddressIsPending } =
+    useSetOrderAddress();
+
+// computed
+
+const selectedAddress = computed(() => {
+    return addresses.value?.find((i) => i.is_main) ?? null;
+});
+
 // state
 
+const { $queryClient: queryClient } = useNuxtApp();
+const { addToast } = useToast();
+
 const deliveryData = ref<DeliveryData>({
-    address: null,
+    address: selectedAddress.value,
     deliveryMethod: {
         peyk: false,
         pishtaz: true,
@@ -35,26 +54,57 @@ const deliveryData = ref<DeliveryData>({
     },
 });
 
-const { data: addresses, isLoading: addressesIsLoading } = useGetAllAddress();
-
 // methods
 
 const handleSelectAddress = (address: Address) => {
     deliveryData.value.address = { ...address };
 };
+
+// watch
+
+whenever(
+    () => deliveryData.value.address,
+    (nv) => {
+        setOrderAddress(
+            { address_id: nv.id! },
+            {
+                onSettled: () => {
+                    queryClient.invalidateQueries({
+                        queryKey: [QUERY_KEYS.addresses],
+                    });
+                },
+                onError: () => {
+                    addToast({
+                        message: "در انتخاب آدرس خطایی رخ داد",
+                        options: {
+                            description: "لطفا مجدد تلاش کنید",
+                        },
+                    });
+                },
+            }
+        );
+    },
+    {
+        deep: true,
+    }
+);
 </script>
 
 <template>
     <div class="flex flex-col w-full gap-5">
         <AddressItem />
         <div class="flex flex-col w-full gap-6">
+            <div class="flex items-center gap-3">
                 <span class="typo-sub-h-xl"> آدرس های شما </span>
-            <div v-if="addressesIsLoading" class="flex flex-col gap-6 w-full">
+                <Icon
-                <Skeleton
+                    name="svg-spinners:180-ring-with-bg"
-                    v-for="i in 3"
+                    size="20"
-                    class="w-full !h-[10rem] !rounded-xl"
+                    v-if="setOrderAddressIsPending"
                 />
             </div>
+            <div v-if="addressesIsLoading" class="flex flex-col gap-6 w-full">
+                <Skeleton v-for="i in 3" class="w-full !h-[8rem] !rounded-xl" />
+            </div>
             <template v-else>
                 <div
                     v-if="!addresses?.length"

frontend/pages/contact-us.vue

@@ -132,8 +132,8 @@ const contactWays = ref([
                     </div>
                 </div>
             </div>
-            <div class="w-4/12 h-full bg-red-300">
+            <div class="w-4/12 h-full flex-center">
-                <NuxtImg src="/mlz.jpeg" class="-mt-16" />
+                <NuxtImg src="/logo.png" class="size-2/3 -mt-5" />
             </div>
         </div>
     </div>

frontend/pages/index.vue

@@ -15,7 +15,6 @@ const disableLoadingOverlay = useState("disableLoadingOverlay", () => false);
 const response = await suspense();
 
 if (response.isError) {
-    console.log(response);
     throw createError({
         statusCode: 500,
         statusMessage: `Landing error : ${response.error.message}`

frontend/plugins/tanstack.ts

@@ -1,12 +1,12 @@
 import type {
     DehydratedState,
-    VueQueryPluginOptions
+    VueQueryPluginOptions,
 } from "@tanstack/vue-query";
 import {
     VueQueryPlugin,
     QueryClient,
     hydrate,
-    dehydrate
+    dehydrate,
 } from "@tanstack/vue-query";
 
 import { defineNuxtPlugin, useState } from "#imports";
@@ -15,7 +15,12 @@ export default defineNuxtPlugin((nuxt) => {
     const vueQueryState = useState<DehydratedState | null>("vue-query");
 
     const queryClient = new QueryClient({
-        defaultOptions: { queries: { staleTime: 5000 } }
+        defaultOptions: {
+            queries: {
+                staleTime: 5000,
+                experimental_prefetchInRender: true,
+            },
+        },
     });
     const options: VueQueryPluginOptions = { queryClient };
 
@@ -33,7 +38,7 @@ export default defineNuxtPlugin((nuxt) => {
 
     return {
         provide: {
-            queryClient
+            queryClient,
-        }
+        },
     };
 });

frontend/types/global.d.ts

@@ -11,22 +11,22 @@ declare global {
     type LogType = {
         title: string;
         status?: "success" | "error" | "info" | "warning";
-        message?: string,
+        message?: string;
-        details?: any
+        details?: any;
-    }
+    };
 
     type AxiosLogType = {
-        url: string,
+        url: string;
-        method: string,
+        method: string;
-        status: number,
+        status: number;
-        code: string,
+        code: string;
-        requestHeaders: Record<any, any>,
+        requestHeaders: Record<any, any>;
-        responseHeaders?: Record<any, any>,
+        responseHeaders?: Record<any, any>;
-        response?: any,
+        response?: any;
-        payload?: Record<any, any>,
+        payload?: Record<any, any>;
-        params?: Record<any, any>,
+        params?: Record<any, any>;
-        date: string
+        date: string;
-    }
+    };
 
     type Chat = {
         id: number;
@@ -276,4 +276,18 @@ declare global {
         updated_at: string;
         order: Order;
     };
+
+    type PaymentGateway = {
+        id: number;
+        picture: string;
+        title: string;
+        type:
+            | "ZARINPAL"
+            | "SEP"
+            | "MELLAT"
+            | "IDPAY"
+            | "ZIBAL"
+            | "BAHAMTA"
+            | "BMI";
+    };
 }