From 132ed8a89ec2eac7823eaca7a704970e2b6e32d1 Mon Sep 17 00:00:00 2001
From: Alexandr SaVBaD Waltz <savbad@wiseless.xyz>
Date: Tue, 10 Mar 2026 13:38:01 +0300
Subject: [PATCH] feat(addresses): add delete button to address card

Enhanced address management UI by introducing a delete button to the address card component. Moved address deletion logic from the profile page to the card for better modularity.

- Added a delete icon to `address.vue` with hover effect and error color styling.
- Integrated `useAddressDelete` composable into the card for deletion handling.
- Updated SCSS to style the delete button with proper alignment and spacing.

Improves usability and keeps the address management interface consistent and intuitive. No breaking changes.
---
 storefront/app/components/cards/address.vue | 27 ++++++++++++++++++++-
 storefront/app/pages/profile/addresses.vue  |  2 --
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/storefront/app/components/cards/address.vue b/storefront/app/components/cards/address.vue
index 1386711d..04aa80c8 100644
--- a/storefront/app/components/cards/address.vue
+++ b/storefront/app/components/cards/address.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="card">
-    <p class="card__title">{{ name }}</p>
+    <div class="card__top">
+      <h6 class="card__title">{{ name }}</h6>
+      <icon
+          class="card__delete"
+          name="material-symbols:delete-outline"
+          size="20"
+          @click="deleteAddress(address.uuid)"
+      />
+    </div>
     <div class="card__list">
       <ui-input
           v-model="address.country"
@@ -55,6 +63,7 @@
 
 <script setup lang="ts">
 import type {IAddress} from "@types";
+import {useAddressDelete} from "@composables/adresses";
 
 const props = defineProps<{
   address: IAddress;
@@ -62,6 +71,8 @@ const props = defineProps<{
 
 const {t} = useI18n();
 
+const { deleteAddress, deleteLoading } = useAddressDelete();
+
 const isHouse = computed<boolean>(() => {
   return props.address.addressLine.split(' ').find(el => el.includes('is_house'))?.split('=')[1] === 'true';
 });
@@ -93,12 +104,26 @@ const entrance = computed<string | undefined>(() => {
   flex-direction: column;
   gap: 25px;
 
+  &__top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   &__title {
     font-weight: 600;
     font-size: 20px;
     font-family: "Playfair Display", sans-serif;
   }
 
+  &__delete {
+    cursor: pointer;
+
+    @include hover {
+      color: $error;
+    }
+  }
+
   &__list {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
diff --git a/storefront/app/pages/profile/addresses.vue b/storefront/app/pages/profile/addresses.vue
index be5782f1..3d919b2b 100644
--- a/storefront/app/pages/profile/addresses.vue
+++ b/storefront/app/pages/profile/addresses.vue
@@ -24,7 +24,6 @@
 
 <script setup lang="ts">
 import {usePageTitle} from "@composables/utils";
-import {useAddressDelete} from "@composables/adresses";
 
 const {t} = useI18n();
 const addressesStore = useAddressesStore();
@@ -32,7 +31,6 @@ const addressesStore = useAddressesStore();
 const addresses = computed(() => addressesStore.addresses);
 
 const { setPageTitle } = usePageTitle();
-const { deleteAddress, deleteLoading } = useAddressDelete();
 
 setPageTitle(t('breadcrumbs.addresses'));
 </script>