From 68fda9902f50804beaa5de99193aea04e3e12149 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 18 Apr 2025 19:51:39 +0330
Subject: [PATCH] updated selecting address logic loading

---
 frontend/pages/cart/delivery.vue | 103 ++++++++-----------------------
 1 file changed, 27 insertions(+), 76 deletions(-)

diff --git a/frontend/pages/cart/delivery.vue b/frontend/pages/cart/delivery.vue
index f3cafd0..7174721 100644
--- a/frontend/pages/cart/delivery.vue
+++ b/frontend/pages/cart/delivery.vue
@@ -2,9 +2,8 @@
 // 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";
+import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
 
 // meta
 
@@ -29,10 +28,9 @@ type DeliveryData = {
 
 // queries
 
-const { data: addresses, isLoading: addressesIsLoading } = useGetAllAddress();
+const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();
 
-const { mutateAsync: setOrderAddress, isPending: setOrderAddressIsPending } =
-    useSetOrderAddress();
+const { data: addresses, isLoading: addressesIsLoading } = useGetAllAddress();
 
 // computed
 
@@ -53,41 +51,6 @@ const deliveryData = ref<DeliveryData>({
         tipax: false,
     },
 });
-
-// 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>
@@ -95,17 +58,20 @@ whenever(
         <AddressItem />
         <div class="flex flex-col w-full gap-6">
             <div class="flex items-center gap-3 py-3">
-                <NuxtImg src="/img/location.gif" class="size-12 pb-1 -mr-3" />
-                <span class="typo-sub-h-xl -mr-3"> آدرس های شما </span>
-                <Icon
-                    name="svg-spinners:180-ring-with-bg"
-                    size="20"
-                    v-if="setOrderAddressIsPending"
-                    class="pb-0.5"
+                <NuxtImg
+                    src="/img/location.gif"
+                    class="size-12 pb-1 -mr-3"
                 />
+                <span class="typo-sub-h-xl -mr-3"> آدرس های شما </span>
             </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
+                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
@@ -120,34 +86,28 @@ whenever(
                     />
                 </div>
 
-                <div v-else class="flex flex-col gap-6 w-full">
+                <div
+                    v-else
+                    class="flex flex-col gap-6 w-full"
+                >
                     <AddressItem
                         v-for="(address, index) in addresses"
                         :key="index"
+                        :isSelected="address.id === cart?.address.id"
                         :address="address"
-                        @select="handleSelectAddress"
-                        :isSelected="address.id == deliveryData.address?.id"
                     />
                 </div>
             </template>
         </div>
 
-        <div
-            class="flex flex-col items-center w-full gap-4 my-3 p-4 border border-slate-200 rounded-xl bg-slate-50"
-        >
-            <span
-                class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-slate-900"
-            >
+        <div class="flex flex-col items-center w-full gap-4 my-3 p-4 border border-slate-200 rounded-xl bg-slate-50">
+            <span class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-slate-900">
                 شیوه ارسال
             </span>
 
             <label
                 @click="deliveryData.deliveryMethod.pishtaz = true"
-                :class="
-                    deliveryData.deliveryMethod.pishtaz
-                        ? 'ring-black ring-offset-2 ring-2'
-                        : ''
-                "
+                :class="deliveryData.deliveryMethod.pishtaz ? 'ring-black ring-offset-2 ring-2' : ''"
                 class="flex flex-col select-none w-full gap-2 p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-blue-500 ring-offset-2 focus-within:border-blue-500 rounded-100 border-slate-200 bg-slate-50"
             >
                 <div class="flex items-center justify-between w-full">
@@ -161,15 +121,10 @@ whenever(
                                 class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
                             />
                         </SwitchRoot>
-                        <span
-                            class="w-full text-slate-800 text-sm lg:text-[1rem]"
-                            >پست پیشتاز</span
-                        >
+                        <span class="w-full text-slate-800 text-sm lg:text-[1rem]">پست پیشتاز</span>
                     </div>
 
-                    <span class="text-slate-800 text-sm lg:text-[1rem]">
-                        ۱۵۰٬۰۰۰ تومان
-                    </span>
+                    <span class="text-slate-800 text-sm lg:text-[1rem]"> ۱۵۰٬۰۰۰ تومان </span>
                 </div>
             </label>
 
@@ -185,14 +140,10 @@ whenever(
                             class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
                         />
                     </SwitchRoot>
-                    <span class="w-full text-slate-800 text-sm lg:text-[1rem]"
-                        >تیپاکس</span
-                    >
+                    <span class="w-full text-slate-800 text-sm lg:text-[1rem]">تیپاکس</span>
                 </div>
 
-                <span class="text-slate-800 text-sm lg:text-[1rem]">
-                    ۱۵۰٬۰۰۰ تومان
-                </span>
+                <span class="text-slate-800 text-sm lg:text-[1rem]"> ۱۵۰٬۰۰۰ تومان </span>
             </label>
         </div>