new changes

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">
-                <Skeleton
-                    v-for="i in 3"
-                    class="w-full !h-[10rem] !rounded-xl"
+                <Icon
+                    name="svg-spinners:180-ring-with-bg"
+                    size="20"
+                    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"