From 5663c4e1267800343c295e8a4503e43b903dd262 Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Tue, 14 Apr 2026 15:57:45 +0200
Subject: [PATCH] fix: addresses

---
 bo/src/components/customer/PageAddresses.vue | 322 +++++++++++--------
 bo/src/stores/customer/cart.ts               | 144 ++++++++-
 bruno/b2b_daniel/environments/dev.yml        |   1 +
 3 files changed, 340 insertions(+), 127 deletions(-)
 create mode 100644 bruno/b2b_daniel/environments/dev.yml

diff --git a/bo/src/components/customer/PageAddresses.vue b/bo/src/components/customer/PageAddresses.vue
index 8806f5c..edd9ee8 100644
--- a/bo/src/components/customer/PageAddresses.vue
+++ b/bo/src/components/customer/PageAddresses.vue
@@ -1,180 +1,250 @@
 <template>
     <component :is="Default || 'div'">
-    <div class="">
-        <div class="flex flex-col gap-5 mb-6">
-            <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Addresses') }}</h1>
-            <div class="flex md:flex-row flex-col justify-between items-start md:items-center gap-5 md:gap-0">
-                <div class="flex gap-2 items-center">
-                    <UInput v-model="searchQuery" type="text" :placeholder="t('Search address')"
-                        class="bg-white dark:bg-gray-800 text-black dark:text-white absolute" />
-                    <UIcon name="ic:baseline-search"
-                        class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark) relative left-40" />
-                </div>
-                <UButton color="primary" @click="openCreateModal"
-                    class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
-                    <UIcon name="mdi:add-bold" />
-                    {{ t('Add Address') }}
-                </UButton>
-            </div>
-        </div>
-        <div v-if="paginatedAddresses.length" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            <div v-for="address in paginatedAddresses" :key="address.id"
-                class="border border-(--border-light) dark:border-(--border-dark) rounded-md p-4 bg-(--second-light) dark:bg-(--main-dark) hover:shadow-md transition-shadow flex justify-between">
-                <div class="flex flex-col gap-2 items-strat justify-end">
-                    <p class="text-black dark:text-white">{{ address.street }}</p>
-                    <p class="text-black dark:text-white">{{ address.zipCode }}, {{ address.city }}</p>
-                    <p class="text-black dark:text-white">{{ address.country }}</p>
-                </div>
-                <div class="flex flex-col items-end justify-between gap-2">
-                    <button @click="confirmDelete(address.id)"
-                    class="p-2 text-red-500 bg-red-100 dark:bg-(--main-dark)  rounded transition-colors"
-                    :title="t('Remove')">
-                    <UIcon name="material-symbols:delete" class="text-[18px]" />
-                </button>
-                <UButton size="sm" color="neutral" variant="outline" @click="openEditModal(address)"
-                    class="text-(--text-sky-light) dark:text-(--text-sky-dark) text-[13px]">
-                    {{ t('edit') }}
-                    <UIcon name="ic:sharp-edit" class="text-[15px]" />
-                </UButton>
+        <div class="">
+            <div class="flex flex-col gap-5 mb-6">
+                <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Addresses') }}</h1>
+                <div class="flex md:flex-row flex-col justify-between items-start md:items-center gap-5 md:gap-0">
+                    <div class="flex gap-2 items-center">
+                        <UInput v-model="searchQuery" type="text" :placeholder="t('Search address')"
+                            class="bg-white dark:bg-gray-800 text-black dark:text-white absolute" />
+                        <UIcon name="ic:baseline-search"
+                            class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark) relative left-40" />
+                    </div>
+                    <UButton color="info" @click="openCreateModal">
+                        <UIcon name="mdi:add-bold" />
+                        {{ t('Add Address') }}
+                    </UButton>
                 </div>
             </div>
-        </div>
-        <div v-else class="text-center py-8 text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</div>
-        <div class="mt-6 flex justify-center">
-            <UPagination v-model:page="page" :total="totalItems" :page-size="pageSize" />
-        </div>
-        <UModal v-model:open="showModal" :overlay="true" class="max-w-md mx-auto">
-            <template #content>
-                <div class="p-6 flex flex-col gap-6">
-                    <p class="text-[20px] text-black dark:text-white ">Address</p>
-                    <UForm @submit.prevent="saveAddress" class="space-y-4" :validate="validate">
-                        <div>
-                            <label class="block text-sm font-medium text-black dark:text-white mb-1">Street *</label>
-                            <UInput v-model="formData.street" placeholder="Enter street" name="street" class="w-full" />
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-black dark:text-white mb-1">Zip Code *</label>
-                            <UInput v-model="formData.zipCode" placeholder="Enter zip code" name="zipCode"
-                                class="w-full" />
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-black dark:text-white mb-1">City *</label>
-                            <UInput v-model="formData.city" placeholder="Enter city" name="city" class="w-full" />
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-black dark:text-white mb-1">Country *</label>
-                            <UInput v-model="formData.country" placeholder="Enter country" name="country"
-                                class="w-full" />
-                        </div>
-                    </UForm>
-                    <div class="flex justify-end gap-2">
-                        <UButton variant="outline" color="neutral" @click="closeModal"
-                            class="text-black dark:text-white">{{ t('Cancel') }}</UButton>
-                        <UButton variant="outline" color="neutral" @click="saveAddress"
-                            class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
-                            {{ t('Save') }}</UButton>
+            <div v-if="cartStore.addressLoading" class="text-center py-8 text-gray-500 dark:text-gray-400">
+                {{ t('Loading addresses...') }}
+            </div>
+            <div v-else-if="cartStore.addressError" class="text-center py-8 text-red-500 dark:text-red-400">
+                {{ cartStore.addressError }}
+            </div>
+            <div v-else-if="cartStore.paginatedAddresses.length"
+                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div v-for="address in cartStore.paginatedAddresses" :key="address.id"
+                    class="border border-(--border-light) dark:border-(--border-dark) rounded-md p-4 bg-(--second-light) dark:bg-(--main-dark) hover:shadow-md transition-shadow flex justify-between">
+                    <div class="flex flex-col gap-2 items-start justify-end">
+                        <p class="text-black dark:text-white font-semibold">{{ address.address_info.recipient }}</p>
+                        <p class="text-black dark:text-white">{{ address.address_info.street }} {{
+                            address.address_info.building_no }}{{ address.address_info.apartment_no ? '/' +
+                                address.address_info.apartment_no : '' }}</p>
+                        <p class="text-black dark:text-white">{{ address.address_info.postal_code }}, {{
+                            address.address_info.city }}</p>
+                        <p class="text-black dark:text-white">{{ address.address_info.voivodeship }}</p>
+                        <p v-if="address.address_info.address_line2" class="text-black dark:text-white">{{
+                            address.address_info.address_line2 }}</p>
                     </div>
-                </div>
-            </template>
-        </UModal>
-        <UModal v-model:open="showDeleteConfirm" :overlay="true" class="max-w-md mx-auto">
-            <template #content>
-                <div class="p-6 flex flex-col gap-3">
-                    <div class="flex flex-col gap-2 justify-center items-center">
-                        <p class="flex items-end gap-2 dark:text-white text-black">
-                            <UIcon name='f7:exclamationmark-triangle' class="text-[35px] text-red-700" />
-                            Confirm Delete
-                        </p>
-                        <p class="text-gray-700 dark:text-gray-300">
-                            {{ t('Are you sure you want to delete this address?') }}</p>
-                    </div>
-                    <div class="flex justify-center gap-5">
-                        <UButton variant="outline" color="neutral" @click="showDeleteConfirm = false"
-                            class="dark:text-white text-black">{{ t('Cancel') }}
+                    <div class="flex flex-col items-end justify-between gap-2">
+                        <button @click="confirmDelete(address.id)"
+                            class="p-2 text-red-500 bg-red-100 dark:bg-(--main-dark)  rounded transition-colors"
+                            :title="t('Remove')">
+                            <UIcon name="material-symbols:delete" class="text-[18px]" />
+                        </button>
+                        <UButton size="sm" color="neutral" variant="outline" @click="openEditModal(address)"
+                            class="text-(--text-sky-light) dark:text-(--text-sky-dark) text-[13px]">
+                            {{ t('edit') }}
+                            <UIcon name="ic:sharp-edit" class="text-[15px]" />
                         </UButton>
-                        <UButton variant="outline" color="neutral" @click="deleteAddress" class="text-red-700">
-                            {{ t('Delete') }}</UButton>
                     </div>
                 </div>
-            </template>
-        </UModal>
-    </div>
+            </div>
+            <div v-else class="text-center py-8 text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</div>
+            <div class="mt-6 flex justify-center">
+                <UPagination v-model:page="page" :total="totalItems" :page-size="pageSize" />
+            </div>
+            <UModal v-model:open="showModal" :overlay="true" class="max-w-md mx-auto">
+                <template #content>
+                    <div class="p-6 flex flex-col gap-6">
+                        <p class="text-[20px] text-black dark:text-white ">Address</p>
+                        <UForm @submit="saveAddress" class="space-y-4" :validate="validate" :state="formData">
+                            <template v-for="field in formFieldKeys" :key="field">
+                                <UFormField :label="fieldLabel(field)" :name="field"
+                                    :required="field !== 'address_line2'">
+                                    <UInput v-model="formData[field]" :placeholder="fieldLabel(field)" class="w-full" />
+                                </UFormField>
+                            </template>
+
+                            <div class="flex justify-end gap-2">
+                                <UButton variant="outline" color="neutral" @click="closeModal">
+                                    {{ t('Cancel') }}
+                                </UButton>
+
+                                <UButton type="submit"
+                                    class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
+                                    {{ t('Save') }}
+                                </UButton>
+                            </div>
+                        </UForm>
+                    </div>
+                </template>
+            </UModal>
+            <UModal v-model:open="showDeleteConfirm" :overlay="true" class="max-w-md mx-auto">
+                <template #content>
+                    <div class="p-6 flex flex-col gap-3">
+                        <div class="flex flex-col gap-2 justify-center items-center">
+                            <p class="flex items-end gap-2 dark:text-white text-black">
+                                <UIcon name='f7:exclamationmark-triangle' class="text-[35px] text-red-700" />
+                                Confirm Delete
+                            </p>
+                            <p class="text-gray-700 dark:text-gray-300">
+                                {{ t('Are you sure you want to delete this address?') }}</p>
+                        </div>
+                        <div class="flex justify-center gap-5">
+                            <UButton variant="outline" color="neutral" @click="showDeleteConfirm = false"
+                                class="dark:text-white text-black">{{ t('Cancel') }}
+                            </UButton>
+                            <UButton variant="outline" color="neutral" @click="deleteAddress" class="text-red-700">
+                                {{ t('Delete') }}</UButton>
+                        </div>
+                    </div>
+                </template>
+            </UModal>
+        </div>
     </component>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { useAddressStore } from '@/stores/customer/address'
+import { ref, reactive, computed, watch, onMounted } from 'vue'
+import { useCartStore } from '@/stores/customer/cart'
 import { useI18n } from 'vue-i18n'
 import Default from '@/layouts/default.vue'
-const addressStore = useAddressStore()
+import { currentCountry } from '@/router/langs'
+
+type AddressFormState = Record<string, string>
+
+const cartStore = useCartStore()
 const { t } = useI18n()
-const searchQuery = ref('')
+const searchQuery = ref(cartStore.addressSearchQuery)
 const showModal = ref(false)
 const isEditing = ref(false)
 const editingAddressId = ref<number | null>(null)
-const formData = ref({ street: '', zipCode: '', city: '', country: '' })
+const addressTemplate = ref<AddressFormState | null>(null)
+const formData = reactive<AddressFormState>({})
 
 const showDeleteConfirm = ref(false)
 const addressToDelete = ref<number | null>(null)
 
-const page = ref(addressStore.currentPage)
-const paginatedAddresses = computed(() => addressStore.paginatedAddresses)
-const totalItems = computed(() => addressStore.totalItems)
-const pageSize = addressStore.pageSize
-
-watch(page, (newPage) => addressStore.setPage(newPage))
-watch(searchQuery, (val) => {
-    addressStore.setSearchQuery(val)
+const page = computed<number>({
+    get: () => cartStore.addressCurrentPage,
+    set: (value: number) => cartStore.setAddressPage(value)
 })
-function openCreateModal() {
+const totalItems = computed(() => cartStore.totalAddressItems)
+const pageSize = cartStore.addressPageSize
+const formFieldKeys = computed(() => (addressTemplate.value ? Object.keys(addressTemplate.value) : []))
+
+watch(searchQuery, (val) => {
+    cartStore.setAddressSearchQuery(val)
+})
+
+onMounted(() => {
+    cartStore.fetchAddresses()
+})
+
+function clearFormData() {
+    Object.keys(formData).forEach((key) => delete formData[key])
+}
+
+function fieldLabel(key: string) {
+    const labels: Record<string, string> = {
+        postal_code: 'Zip Code',
+        post_town: 'City',
+        city: 'City',
+        county: 'County',
+        region: 'Region',
+        voivodeship: 'Region / Voivodeship',
+        street: 'Street',
+        thoroughfare: 'Street',
+        building_no: 'Building No',
+        building_name: 'Building Name',
+        house_number: 'House Number',
+        orientation_number: 'Orientation Number',
+        apartment_no: 'Apartment No',
+        sub_building: 'Sub Building',
+        address_line2: 'Address Line 2',
+        recipient: 'Recipient'
+    }
+
+    return t(labels[key] ?? key.replace(/_/g, ' ').replace(/\b\w/g, (chr) => chr.toUpperCase()))
+}
+
+async function openCreateModal() {
     resetForm()
     isEditing.value = false
+
+    const template = await cartStore.getAddressTemplate(Number(currentCountry.value?.id) | 2).catch(() => null)
+    if (template) {
+        addressTemplate.value = template
+        clearFormData()
+        Object.assign(formData, template)
+    }
+
     showModal.value = true
 }
-function openEditModal(address: any) {
-    formData.value = {
-        street: address.street,
-        zipCode: address.zipCode,
-        city: address.city,
-        country: address.country
+
+async function openEditModal(address: any) {
+    currentCountry.value = address.country_id || 1
+    const template = await cartStore.getAddressTemplate(address.country_id | 2).catch(() => null)
+
+    if (template) {
+        addressTemplate.value = template
+        clearFormData()
+        Object.assign(formData, template)
     }
+
+    if (address.address_info) {
+        formFieldKeys.value.forEach((key) => {
+            formData[key] = address.address_info[key] ?? ''
+        })
+    }
+
     isEditing.value = true
     editingAddressId.value = address.id
     showModal.value = true
 }
+
 function resetForm() {
-    formData.value = { street: '', zipCode: '', city: '', country: '' }
+    clearFormData()
     editingAddressId.value = null
 }
+
 function closeModal() {
     showModal.value = false
     resetForm()
 }
+
 function validate() {
-    const errors = []
-    if (!formData.value.street) errors.push({ name: 'street', message: 'Street required' })
-    if (!formData.value.zipCode) errors.push({ name: 'zipCode', message: 'Zip Code required' })
-    if (!formData.value.city) errors.push({ name: 'city', message: 'City required' })
-    if (!formData.value.country) errors.push({ name: 'country', message: 'Country required' })
-    return errors.length ? errors : null
+    const errors: Array<{ name: string; message: string }> = []
+    const optionalFields = new Set(['address_line2'])
+
+    formFieldKeys.value.forEach((key) => {
+        if (!optionalFields.has(key) && !formData[key]?.trim()) {
+            errors.push({ name: key, message: `${fieldLabel(key)} required` })
+        }
+    })
+
+    return errors
 }
-function saveAddress() {
-    if (validate()) return
+
+async function saveAddress() {
     if (isEditing.value && editingAddressId.value) {
-        addressStore.updateAddress(editingAddressId.value, formData.value)
+        await cartStore.updateAddress(editingAddressId.value, currentCountryId.value, formData)
     } else {
-        addressStore.addAddress(formData.value)
+        await cartStore.addAddress(currentCountryId.value, formData)
     }
     closeModal()
 }
+
 function confirmDelete(id: number) {
     addressToDelete.value = id
     showDeleteConfirm.value = true
 }
-function deleteAddress() {
+
+async function deleteAddress() {
     if (addressToDelete.value) {
-        addressStore.deleteAddress(addressToDelete.value)
+        await cartStore.deleteAddress(addressToDelete.value)
     }
     showDeleteConfirm.value = false
     addressToDelete.value = null
diff --git a/bo/src/stores/customer/cart.ts b/bo/src/stores/customer/cart.ts
index e2e9577..93d4527 100644
--- a/bo/src/stores/customer/cart.ts
+++ b/bo/src/stores/customer/cart.ts
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
+import { useFetchJson } from '@/composable/useFetchJson'
 
 export interface CartItem {
   id: number
@@ -18,6 +19,15 @@ export interface DeliveryMethod {
   description: string
 }
 
+export interface Address {
+  id: number
+  country_id: number
+  customer_id: number
+  address_info: Record<string, string>
+}
+
+export type AddressTemplate = Record<string, string>
+
 export const useCartStore = defineStore('cart', () => {
   const items = ref<CartItem[]>([])
   const selectedAddressId = ref<number | null>(null)
@@ -31,6 +41,122 @@ export const useCartStore = defineStore('cart', () => {
     { id: 3, name: 'Priority Delivery', price: 30, description: 'Next business day' }
   ])
 
+  const addresses = ref<Address[]>([])
+  const addressLoading = ref(false)
+  const addressError = ref<string | null>(null)
+  const addressSearchQuery = ref('')
+  const addressCurrentPage = ref(1)
+  const addressPageSize = 20
+  const addressTotalCount = ref(0)
+
+  function transformAddressResponse(address: any): Address {
+    const info = address.address_info || address.addressInfo || {}
+
+    return {
+      id: address.id ?? 0,
+      country_id: address.country_id ?? address.countryId ?? 1,
+      customer_id: address.customer_id ?? address.customerId ?? 0,
+      address_info: info as Record<string, string>
+    }
+  }
+
+  async function fetchAddresses() {
+    addressLoading.value = true
+    addressError.value = null
+
+    try {
+      const queryParam = addressSearchQuery.value ? `&query=${encodeURIComponent(addressSearchQuery.value)}` : ''
+      const response = await useFetchJson<Address[]>(`/api/v1/restricted/addresses/retrieve-addresses?page=${addressCurrentPage.value}&elems=${addressPageSize}${queryParam}`)
+      addresses.value = response.items || []
+      addressTotalCount.value = response.count ?? addresses.value.length
+    } catch (error: unknown) {
+      addressError.value = error instanceof Error ? error.message : 'Failed to load addresses'
+    } finally {
+      addressLoading.value = false
+    }
+  }
+
+  async function addAddress(countryId: number, formData: AddressTemplate): Promise<Address | null> {
+    addressLoading.value = true
+    addressError.value = null
+
+    try {
+      const response = await useFetchJson<any>(`/api/v1/restricted/addresses/add-new-address?country_id=${countryId}`, {
+        method: 'POST',
+        body: JSON.stringify(formData)
+      })
+
+      await fetchAddresses()
+      return transformAddressResponse(response.items ?? response)
+    } catch (error: unknown) {
+      addressError.value = error instanceof Error ? error.message : 'Failed to create address'
+      return null
+    } finally {
+      addressLoading.value = false
+    }
+  }
+
+  async function getAddressTemplate(countryId: number): Promise<AddressTemplate> {
+    const response = await useFetchJson<any>(`/api/v1/restricted/addresses/get-template?country_id=${countryId}`)
+    return response.items ?? {}
+  }
+
+  async function updateAddress(id: number, countryId: number, formData: AddressTemplate): Promise<boolean> {
+    addressLoading.value = true
+    addressError.value = null
+
+    try {
+      await useFetchJson<any>(`/api/v1/restricted/addresses/modify-address?country_id=${countryId}&address_id=${id}`, {
+        method: 'POST',
+        body: JSON.stringify(formData)
+      })
+
+      await fetchAddresses()
+      return true
+    } catch (error: unknown) {
+      addressError.value = error instanceof Error ? error.message : 'Failed to update address'
+      return false
+    } finally {
+      addressLoading.value = false
+    }
+  }
+
+  async function deleteAddress(id: number): Promise<boolean> {
+    addressLoading.value = true
+    addressError.value = null
+
+    try {
+      await useFetchJson<any>(`/api/v1/restricted/addresses/delete-address?address_id=${id}`, {
+        method: 'DELETE'
+      })
+
+      await fetchAddresses()
+      return true
+    } catch (error: unknown) {
+      addressError.value = error instanceof Error ? error.message : 'Failed to delete address'
+      return false
+    } finally {
+      addressLoading.value = false
+    }
+  }
+
+  const totalAddressItems = computed(() => addressTotalCount.value || addresses.value.length)
+  const totalAddressPages = computed(() => Math.ceil(totalAddressItems.value / addressPageSize))
+
+  const paginatedAddresses = computed(() => addresses.value)
+
+  function setAddressPage(page: number) {
+    addressCurrentPage.value = page
+    return fetchAddresses()
+  }
+
+  function setAddressSearchQuery(query: string) {
+    addressSearchQuery.value = query
+    addressCurrentPage.value = 1
+    return fetchAddresses()
+  }
+
+
   function initMockData() {
     items.value = [
       { id: 1, productId: 101, name: 'Premium Widget Pro', product_number: 'NC209/7000', image: '/img/product-1.jpg', price: 129.99, quantity: 2 },
@@ -124,6 +250,22 @@ export const useCartStore = defineStore('cart', () => {
     removeItem,
     clearCart,
     setSelectedAddress,
-    setDeliveryMethod
+    setDeliveryMethod,
+    addresses,
+    addressLoading,
+    addressError,
+    addressSearchQuery,
+    addressCurrentPage,
+    addressPageSize,
+    paginatedAddresses,
+    totalAddressItems,
+    totalAddressPages,
+    fetchAddresses,
+    addAddress,
+    updateAddress,
+    deleteAddress,
+    setAddressPage,
+    setAddressSearchQuery,
+    getAddressTemplate
   }
 })
diff --git a/bruno/b2b_daniel/environments/dev.yml b/bruno/b2b_daniel/environments/dev.yml
new file mode 100644
index 0000000..19e96e3
--- /dev/null
+++ b/bruno/b2b_daniel/environments/dev.yml
@@ -0,0 +1 @@
+name: dev