added delete address logic

frontend/components/cart/AddressItem.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+// imports
+
+import useDeleteAddress from "~/composables/api/account/useDeleteAddress";
+import { useToast } from "~/composables/global/useToast";
+import { QUERY_KEYS } from "~/constants";
+
 // types
 
 type Props = {
@@ -8,29 +14,86 @@ type Props = {
 
 // props
 
-const props = defineProps<Props>();
+defineProps<Props>();
 
 // emit
 
 const emit = defineEmits(["select"]);
 
-// computed
+// state
+
+const { $queryClient: queryClient } = useNuxtApp();
+
+const { addToast } = useToast();
+
+// queries
+
+const { mutateAsync: deleteAddress, isPending: deleteAddressIsPending } =
+    useDeleteAddress();
+
+// methods
+
+const handleDeleteAddress = (id: number) => {
+    deleteAddress(
+        { id },
+        {
+            onSuccess: () => {
+                queryClient.invalidateQueries({
+                    queryKey: [QUERY_KEYS.addresses],
+                });
+                addToast({
+                    message: "آدرس با موفقیت حذف شد",
+                    options: {
+                        status: "success",
+                    },
+                });
+            },
+            onError: () => {
+                addToast({
+                    message: "مشکلی در حذف آدرس رخ داد",
+                    options: {
+                        status: "error",
+                    },
+                });
+            },
+        }
+    );
+};
 </script>
 
 <template>
     <button
-        @click="!!address ? emit('select', address) : null"
+        @click.prevent="!!address ? emit('select', address) : null"
         :class="
             isSelected
-                ? 'border-cyan-500 ring-2 ring-offset-2 ring-cyan-500'
+                ? 'border-slate-200 ring-2 ring-offset-2 ring-black'
                 : 'border-slate-200'
         "
-        class="flex flex-col items-center transition-all cursor-pointer w-full gap-4 p-4 border rounded-xl bg-slate-50"
+        class="flex flex-col items-center transition-all relative cursor-pointer w-full group gap-4 p-4 border rounded-xl bg-slate-50 overflow-hidden"
     >
-        <span
-            class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-slate-900"
-        >
-            آدرس
+        <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 lg:text-[1.125rem] font-semibold text-slate-900"
+            >
+                {{ !!address ? address.name : "آدرس" }}
+                <span
+                    v-if="isSelected"
+                    class="bg-black rounded-xl px-3 py-2 text-slate-200 text-xs"
+                >
+                    انتخاب شده
+                </span>
+            </div>
+
+            <button
+                v-if="!!address"
+                @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" />
+            </button>
         </span>
 
         <div
@@ -41,16 +104,13 @@ const emit = defineEmits(["select"]);
             >
                 {{
                     !!address
-                        ? `ایران, ${address.province}, ${address.city}, ${address.full_address}, کدپستی ${address.postal_code}`
+                        ? `ایران, ${address.province}, ${address.city}, ${address.address}, کدپستی ${address.postal_code}`
                         : "افزودن آدرس جدید"
                 }}
             </span>
 
             <div class="flex items-center justify-end w-full lg:w-3/12">
-                <AddressModal
-                    @add="(data) => $emit('add', data)"
-                    :address="address"
-                />
+                <AddressModal :address="address" />
             </div>
         </div>
     </button>