updated selecting address logic

frontend/components/cart/delivery/AddressItem.vue

@@ -2,6 +2,7 @@
 // imports
 
 import useDeleteAddress from "~/composables/api/account/useDeleteAddress";
+import useSetOrderAddress from "~/composables/api/orders/useSetOrderAddress";
 import { useToast } from "~/composables/global/useToast";
 import { QUERY_KEYS } from "~/constants";
 
@@ -15,13 +16,11 @@ type Props = {
 
 // props
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     selectable: true,
 });
 
-// emit
-
-const emit = defineEmits(["select"]);
+const { address } = toRefs(props);
 
 // state
 
@@ -31,19 +30,48 @@ const { addToast } = useToast();
 
 // queries
 
-const { mutateAsync: deleteAddress, isPending: deleteAddressIsPending } =
-    useDeleteAddress();
+const { mutateAsync: deleteAddress, isPending: deleteAddressIsPending } = useDeleteAddress();
+
+const { mutateAsync: setOrderAddress, isPending: setOrderAddressIsPending } = useSetOrderAddress();
 
 // methods
 
+const handleSelectAddress = () => {
+    setOrderAddress(
+        { address_id: address.value?.id! },
+        {
+            onSettled: () => {
+                queryClient.invalidateQueries({
+                    queryKey: [QUERY_KEYS.cart],
+                });
+                queryClient.invalidateQueries({
+                    queryKey: [QUERY_KEYS.addresses],
+                });
+            },
+            onError: () => {
+                addToast({
+                    message: "در انتخاب آدرس خطایی رخ داد",
+                    options: {
+                        description: "لطفا مجدد تلاش کنید",
+                    },
+                });
+            },
+        }
+    );
+};
+
 const handleDeleteAddress = (id: number) => {
     deleteAddress(
         { id },
         {
             onSuccess: () => {
+                queryClient.invalidateQueries({
+                    queryKey: [QUERY_KEYS.cart],
+                });
                 queryClient.invalidateQueries({
                     queryKey: [QUERY_KEYS.addresses],
                 });
+
                 addToast({
                     message: "آدرس با موفقیت حذف شد",
                     options: {
@@ -66,29 +94,30 @@ const handleDeleteAddress = (id: number) => {
 
 <template>
     <button
-        @click.prevent="
-            !!address && selectable ? emit('select', address) : null
-        "
-        :class="
-            isSelected
-                ? 'border-transparent ring-2 ring-offset-2 ring-blue-500'
-                : 'border-slate-200'
-        "
+        @click.prevent="!!address && selectable ? handleSelectAddress() : null"
+        :class="isSelected ? 'border-transparent ring-2 ring-offset-2 ring-blue-500' : 'border-slate-200'"
         class="flex flex-col items-center transition-all relative cursor-pointer w-full group gap-2 lg:gap-4 p-4 border rounded-xl bg-slate-50 overflow-hidden"
     >
-        <div v-if="deleteAddressIsPending" class="absolute inset-0">
+        <div
+            v-if="deleteAddressIsPending"
+            class="absolute inset-0"
+        >
             <Skeleton class="!size-full !rounded-xl" />
         </div>
         <span class="flex items-center justify-between w-full gap-3">
-            <div
-                class="flex items-center gap-3 max-lg:text-sm font-semibold text-slate-900"
-            >
+            <div class="flex items-center gap-3 max-lg:text-sm font-semibold text-slate-900">
                 {{ !!address ? address.name : "آدرس" }}
                 <span
-                    v-if="isSelected"
+                    v-if="isSelected || setOrderAddressIsPending"
                     class="bg-blue-500 rounded-lg px-3 py-2 text-slate-200 text-[10px] lg:text-xs"
                 >
-                    انتخاب شده
+                    <span v-if="setOrderAddressIsPending">
+                        <Icon
+                            name="svg-spinners:3-dots-bounce"
+                            class="**:fill-white"
+                        />
+                    </span>
+                    <span v-else-if="isSelected && !setOrderAddressIsPending"> انتخاب شده </span>
                 </span>
             </div>
 
@@ -97,13 +126,14 @@ const handleDeleteAddress = (id: number) => {
                 @click.stop="handleDeleteAddress(address.id!)"
                 class="size-8 bg-slate-200/50 rounded-sm flex-center me-2 opacity-0 group-hover:opacity-100 transition-opacity"
             >
-                <Icon name="bi:trash" class="**:fill-red-500" />
+                <Icon
+                    name="bi:trash"
+                    class="**:fill-red-500"
+                />
             </button>
         </span>
 
-        <div
-            class="flex flex-col items-center justify-between w-full gap-3 lg:gap-8 lg:flex-row"
-        >
+        <div class="flex flex-col items-center justify-between w-full gap-3 lg:gap-8 lg:flex-row">
             <div class="w-full lg:w-9/12 overflow-hidden">
                 <div
                     class="w-full overflow-hidden overflow-ellipsis gap-5 text-start whitespace-pre text-xs lg:text-sm text-slate-700"