From 62aafdc11a5e7c4b8f0c9f235ce07811a38389fa Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Wed, 15 Apr 2026 16:00:42 +0200
Subject: [PATCH] fix: addresses

---
 bo/src/components/customer/PageAddresses.vue | 421 +++++++++----------
 bo/src/components/customer/PageCarts.vue     | 120 +++---
 bo/src/components/inner/LangSwitch.vue       |   1 -
 bo/src/layouts/default.vue                   |   3 +-
 bo/src/router/index.ts                       |   2 -
 bo/src/router/langs.ts                       |  11 +-
 bo/src/stores/customer/address.ts            | 239 ++---------
 bo/src/stores/customer/cart.ts               |   1 +
 8 files changed, 302 insertions(+), 496 deletions(-)

diff --git a/bo/src/components/customer/PageAddresses.vue b/bo/src/components/customer/PageAddresses.vue
index c01be13..72b395e 100644
--- a/bo/src/components/customer/PageAddresses.vue
+++ b/bo/src/components/customer/PageAddresses.vue
@@ -1,248 +1,239 @@
 <template>
-            <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') }}
+    <div class="flex flex-col gap-5">
+        <div class="flex justify-between items-center">
+            <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Addresses') }}</h1>
+            <UButton color="info" @click="openModal()">
+                <UIcon name="mdi:add-bold" />
+                {{ t('Add Address') }}
+            </UButton>
+        </div>
+
+        <div v-if="store.loading" class="text-center py-8 text-gray-500 dark:text-gray-400">
+            {{ t('Loading...') }}
+        </div>
+        <div v-else-if="store.error" class="text-center py-8 text-red-500">
+            {{ store.error }}
+        </div>
+        <div v-else-if="store.addresses.length" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div v-for="addr in store.addresses" :key="addr.id"
+                class="border border-(--border-light) dark:border-(--border-dark) rounded-md p-4 bg-(--second-light) dark:bg-(--main-dark) flex justify-between">
+                <div class="flex flex-col gap-1">
+                    <p class="font-semibold text-black dark:text-white">{{ addr.address_unparsed.recipient }}</p>
+                    <p class="text-sm text-black dark:text-white">
+                        {{ addr.address_unparsed.street }} {{ addr.address_unparsed.building_no
+                        }}{{ addr.address_unparsed.apartment_no ? '/' + addr.address_unparsed.apartment_no : '' }}
+                    </p>
+                    <p class="text-sm text-black dark:text-white">
+                        {{ addr.address_unparsed.postal_code }}, {{ addr.address_unparsed.city }}
+                    </p>
+                </div>
+                <div class="flex flex-col items-end justify-between">
+                    <UButton size="xs" color="error" variant="ghost" :title="t('Delete')"
+                        @click="confirmDelete(addr.id)">
+                        <UIcon name="material-symbols:delete" class="text-[18px]" />
+                    </UButton>
+                    <UButton size="sm" color="neutral" variant="outline" @click="openModal(addr)">
+                        {{ t('edit') }}
+                        <UIcon name="ic:sharp-edit" class="text-[14px]" />
                     </UButton>
                 </div>
             </div>
-            <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 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>
-                </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" color="info" class="cursor-pointer">
-                                    {{ 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>
-    </template>
+        <div v-else class="text-center py-8 text-gray-500 dark:text-gray-400">
+            {{ t('No addresses found') }}
+        </div>
+
+        <UModal v-model:open="showModal">
+            <template #header>
+                <h3 class="text-lg font-semibold text-black dark:text-white">
+                    {{ editingId ? t('Edit Address') : t('Add Address') }}
+                </h3>
+            </template>
+            <template #body>
+                <div class="flex flex-col gap-5">
+                    <USelectMenu v-model="selectedCountry" :items="countries" class="w-full"
+                        @update:model-value="onCountryChange" :searchInput="false">
+                        <template #default>
+                            <div class="flex flex-col items-start leading-tight">
+                                <span class="text-xs text-gray-400">{{ t('Country') }}</span>
+                                <span v-if="selectedCountry" class="font-medium text-black dark:text-white">
+                                    {{ selectedCountry.name }}
+                                </span>
+                                <span v-else class="text-gray-400">{{ t('Select country') }}</span>
+                            </div>
+                        </template>
+                        <template #item-leading="{ item }">
+                            <span class="text-lg mr-1">{{ item.flag }} {{ item.name }}</span>
+                        </template>
+                    </USelectMenu>
+
+                    <div v-if="templateLoading" class="text-center py-4 text-gray-500 dark:text-gray-400">
+                        {{ t('Loading...') }}
+                    </div>
+                    <p v-else-if="!selectedCountry" class="text-center text-sm text-gray-400 dark:text-gray-500">
+                        {{ t('Select a country to continue') }}
+                    </p>
+                    <UForm v-else :validate="validate" :state="formData" @submit="save" class="space-y-4">
+                        <UFormField v-for="field in templateKeys" :key="field" :label="fieldLabel(field)" :name="field"
+                            :required="!optionalFields.has(field)">
+                            <UInput v-model="formData[field]" :placeholder="fieldLabel(field)" class="w-full" />
+                        </UFormField>
+
+                        <div class="flex justify-end gap-2 pt-2">
+                            <UButton variant="outline" color="neutral" @click="showModal = false">
+                                {{ t('Cancel') }}
+                            </UButton>
+                            <UButton type="submit" color="info">
+                                {{ t('Save') }}
+                            </UButton>
+                        </div>
+                    </UForm>
+                </div>
+            </template>
+        </UModal>
+
+        <UModal v-model:open="showDeleteConfirm">
+            <template #body>
+                <div class="flex flex-col items-center gap-3 py-2">
+                    <UIcon name="f7:exclamationmark-triangle" class="text-[40px] text-red-600" />
+                    <p class="font-semibold text-black dark:text-white">{{ t('Confirm Delete') }}</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-300">
+                        {{ t('Are you sure you want to delete this address?') }}
+                    </p>
+                </div>
+            </template>
+            <template #footer>
+                <div class="flex justify-center gap-4">
+                    <UButton variant="outline" color="neutral" @click="showDeleteConfirm = false">
+                        {{ t('Cancel') }}
+                    </UButton>
+                    <UButton variant="outline" color="error" @click="deleteAddress">
+                        {{ t('Delete') }}
+                    </UButton>
+                </div>
+            </template>
+        </UModal>
+    </div>
+</template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch, onMounted } from 'vue'
-import { useCartStore } from '@/stores/customer/cart'
+import { ref, reactive, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { currentCountry } from '@/router/langs'
+import { countries } from '@/router/langs'
+import { useAddressStore } from '@/stores/customer/address'
+import type { Country } from '@/types'
+import type { Address } from '@/stores/customer/address'
 
-type AddressFormState = Record<string, string>
-
-const cartStore = useCartStore()
 const { t } = useI18n()
-const searchQuery = ref(cartStore.addressSearchQuery)
+const store = useAddressStore()
+
+// --- Modal state ---
 const showModal = ref(false)
-const isEditing = ref(false)
-const editingAddressId = ref<number | null>(null)
-const addressTemplate = ref<AddressFormState | null>(null)
-const formData = reactive<AddressFormState>({})
+const editingId = ref<number | null>(null)
+const selectedCountry = ref<Country | null>(null)
+const templateLoading = ref(false)
+const template = ref<Record<string, string>>({})
+const formData = reactive<Record<string, string>>({})
 
+const templateKeys = computed(() => Object.keys(template.value))
+const optionalFields = new Set(['address_line2'])
+
+// --- Delete state ---
 const showDeleteConfirm = ref(false)
-const addressToDelete = ref<number | null>(null)
+const deleteId = ref<number | null>(null)
 
-const page = computed<number>({
-    get: () => cartStore.addressCurrentPage,
-    set: (value: number) => cartStore.setAddressPage(value)
-})
-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])
+const fieldLabels: Record<string, string> = {
+    recipient: 'Recipient',
+    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',
+    postal_code: 'Zip Code',
+    post_town: 'City',
+    city: 'City',
+    county: 'County',
+    region: 'Region',
+    voivodeship: 'Region / Voivodeship',
+    address_line2: 'Address Line 2'
 }
 
 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
-}
-
-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() {
-    clearFormData()
-    editingAddressId.value = null
-}
-
-function closeModal() {
-    showModal.value = false
-    resetForm()
+    return t(fieldLabels[key] ?? key.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()))
 }
 
 function validate() {
-    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
+    return templateKeys.value
+        .filter((key) => !optionalFields.has(key) && !formData[key]?.trim())
+        .map((key) => ({ name: key, message: t(`${fieldLabel(key)} is required`) }))
 }
 
-async function saveAddress() {
-    if (isEditing.value && editingAddressId.value) {
-        await cartStore.updateAddress(editingAddressId.value, currentCountry.value?.id || 2, formData)
+function applyTemplate(tpl: Record<string, string>, existing?: Record<string, string>) {
+    Object.keys(formData).forEach((k) => delete formData[k])
+    Object.keys(tpl).forEach((k) => {
+        formData[k] = existing?.[k] ?? ''
+    })
+}
+
+function openModal(addr?: Address) {
+    template.value = {}
+    Object.keys(formData).forEach((k) => delete formData[k])
+
+    if (addr) {
+        editingId.value = addr.id
+        selectedCountry.value = countries.find((c) => c.id === addr.country_id) ?? null
+        loadTemplate(addr.country_id, addr.address_unparsed)
     } else {
-        await cartStore.addAddress(currentCountry.value?.id || 2, formData)
+        editingId.value = null
+        selectedCountry.value = null
     }
-    closeModal()
+
+    showModal.value = true
+}
+
+async function onCountryChange(country: Country | null) {
+    if (!country) {
+        template.value = {}
+        Object.keys(formData).forEach((k) => delete formData[k])
+        return
+    }
+    await loadTemplate(country.id)
+}
+
+async function loadTemplate(countryId: number, existing?: Record<string, string>) {
+    templateLoading.value = true
+    try {
+        const tpl = await store.getTemplate(countryId)
+        template.value = tpl
+        applyTemplate(tpl, existing)
+    } finally {
+        templateLoading.value = false
+    }
+}
+
+async function save() {
+    if (!selectedCountry.value) return
+    if (editingId.value) {
+        await store.updateAddress(editingId.value, selectedCountry.value.id, { ...formData })
+    } else {
+        await store.createAddress(selectedCountry.value.id, { ...formData })
+    }
+    showModal.value = false
 }
 
 function confirmDelete(id: number) {
-    addressToDelete.value = id
+    deleteId.value = id
     showDeleteConfirm.value = true
 }
 
 async function deleteAddress() {
-    if (addressToDelete.value) {
-        await cartStore.deleteAddress(addressToDelete.value)
-    }
+    if (deleteId.value) await store.deleteAddress(deleteId.value)
     showDeleteConfirm.value = false
-    addressToDelete.value = null
+    deleteId.value = null
 }
-</script>
\ No newline at end of file
+
+store.fetchAddresses()
+</script>
diff --git a/bo/src/components/customer/PageCarts.vue b/bo/src/components/customer/PageCarts.vue
index 9d894b7..3c15233 100644
--- a/bo/src/components/customer/PageCarts.vue
+++ b/bo/src/components/customer/PageCarts.vue
@@ -1,69 +1,69 @@
 <template>
-    <div class="flex flex-col gap-5 md:gap-10">
-      <div class="flex flex-col md:flex-row justify-between items-center gap-4">
-        <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Carts') }}</h1>
-        <div class="flex gap-3">
-          <UButton color="primary" @click="showCreateModal = true"
-            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:plus" class="mr-1" />
-            {{ t('New Cart') }}
-          </UButton>
-        </div>
-      </div>
-
-      <div class="w-full">
-        <div
-          class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
-          <h2
-            class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
-            {{ t('Your Carts') }}
-          </h2>
-          <div v-if="cartStore.carts?.length > 0" class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
-            <div v-for="cart in cartStore.carts" :key="cart.cart_id" @click="cartStore.setActiveCart(cart.cart_id)"
-              class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
-                ? 'bg-blue-50 dark:bg-blue-900/20'
-                : 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
-              <div class="flex-1 min-w-0">
-                <div class="flex items-center gap-2">
-                  <p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
-                  <p class="text-black dark:text-white font-medium truncate cursor-pointer" @click="openCart(cart)">{{
-                    cart.name }}</p>
-                </div>
-              </div>
-              <input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
-                @change="toggleCart(cart.cart_id)" />
-            </div>
-          </div>
-          <div v-else class="p-8 text-center">
-            <UIcon name="mdi:cart-outline" class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
-            <p class="text-gray-500 dark:text-gray-400">{{ t('No carts yet') }}</p>
-          </div>
-        </div>
+  <div class="flex flex-col gap-5 md:gap-10">
+    <div class="flex flex-col md:flex-row justify-between items-center gap-4">
+      <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Carts') }}</h1>
+      <div class="flex gap-3">
+        <UButton color="primary" @click="showCreateModal = true"
+          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:plus" class="mr-1" />
+          {{ t('New Cart') }}
+        </UButton>
       </div>
     </div>
 
-    <UModal v-model:open="showCreateModal">
-      <template #header>
-        <h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
-      </template>
-      <template #body>
-        <div class="flex flex-col gap-4">
-          <UInput v-model="newCartName" :placeholder="t('Cart name')"
-            class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
+    <div class="w-full">
+      <div
+        class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
+        <h2
+          class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
+          {{ t('Your Carts') }}
+        </h2>
+        <div v-if="cartStore.carts?.length > 0" class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
+          <div v-for="cart in cartStore.carts" :key="cart.cart_id" @click="cartStore.setActiveCart(cart.cart_id)"
+            class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
+              ? 'bg-blue-50 dark:bg-blue-900/20'
+              : 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2">
+                <p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
+                <p class="text-black dark:text-white font-medium truncate cursor-pointer" @click="openCart(cart)">{{
+                  cart.name }}</p>
+              </div>
+            </div>
+            <input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
+              @change="toggleCart(cart.cart_id)" />
+          </div>
         </div>
-      </template>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton variant="outline" color="neutral" @click="showCreateModal = false">
-            {{ t('Cancel') }}
-          </UButton>
-          <UButton color="primary" @click="createCart" :disabled="!newCartName.trim()"
-            class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
-            {{ t('Create') }}
-          </UButton>
+        <div v-else class="p-8 text-center">
+          <UIcon name="mdi:cart-outline" class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
+          <p class="text-gray-500 dark:text-gray-400">{{ t('No carts yet') }}</p>
         </div>
-      </template>
-    </UModal>
+      </div>
+    </div>
+  </div>
+
+  <UModal v-model:open="showCreateModal">
+    <template #header>
+      <h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
+    </template>
+    <template #body>
+      <div class="flex flex-col gap-4">
+        <UInput v-model="newCartName" :placeholder="t('Cart name')"
+          class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton variant="outline" color="neutral" @click="showCreateModal = false">
+          {{ t('Cancel') }}
+        </UButton>
+        <UButton color="primary" @click="createCart" :disabled="!newCartName.trim()"
+          class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
+          {{ t('Create') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
 </template>
 
 <script setup lang="ts">
diff --git a/bo/src/components/inner/LangSwitch.vue b/bo/src/components/inner/LangSwitch.vue
index ad17b56..cb9a5e4 100644
--- a/bo/src/components/inner/LangSwitch.vue
+++ b/bo/src/components/inner/LangSwitch.vue
@@ -54,7 +54,6 @@ const locale = computed({
     const pathParts = currentPath.split('/').filter(Boolean)
 
     cookie.setCookie('lang_id', `${langs.find((x) => x.iso_code == value)?.id}`, { days: 60, secure: true, sameSite: 'Lax' })
-
     if (pathParts.length > 0) {
       const isLocale = langs.some((l) => l.lang_code === pathParts[0])
       if (isLocale) {
diff --git a/bo/src/layouts/default.vue b/bo/src/layouts/default.vue
index 681d019..4beb971 100644
--- a/bo/src/layouts/default.vue
+++ b/bo/src/layouts/default.vue
@@ -205,8 +205,7 @@ const menu = ref<TopMenuItem[] | null>(null)
 async function getTopMenu() {
   try {
     const { items } = await useFetchJson<TopMenuItem[]>('/api/v1/restricted/menu/get-top-menu')
-
-    menu.value = items
+    menu.value = items[0]?.children || []
   } catch (err) {
     console.log(err)
   }
diff --git a/bo/src/router/index.ts b/bo/src/router/index.ts
index 57e096b..8ec2e77 100644
--- a/bo/src/router/index.ts
+++ b/bo/src/router/index.ts
@@ -103,8 +103,6 @@ async function setRoutes() {
       }
     })
   }
-  
-  console.log(router);
   // await router.replace(router.currentRoute.value.fullPath)
 }
 
diff --git a/bo/src/router/langs.ts b/bo/src/router/langs.ts
index 78dee8c..3ed9ab7 100644
--- a/bo/src/router/langs.ts
+++ b/bo/src/router/langs.ts
@@ -12,10 +12,7 @@ export const currentCountry = ref<Country>()
 const defLang = ref<Language>()
 const defCountry = ref<Country>()
 const cookie = useCookie()
-// Get available language codes for route matching
-// export const availableLocales = computed(() => langs.map((l) => l.lang_code))
 
-// Initialize languages from API
 export async function initLangs() {
   try {
     const { items } = await useFetchJson<Language[]>('/api/v1/langs')
@@ -33,8 +30,6 @@ export async function initLangs() {
   }
 }
 
-// Initialize country/currency from API
-
 export async function initCountryCurrency() {
   try {
     const { items } = await useFetchJson<Country[]>('/api/v1/restricted/langs-and-countries/get-countries')
@@ -43,13 +38,10 @@ export async function initCountryCurrency() {
     let idfromcookie = null
     const cc = cookie.getCookie('country_id')
     if (cc) {
-      idfromcookie = langs.find((x) => x.id == parseInt(cc))
+      idfromcookie = countries.find((x) => x.id == parseInt(cc))
     }
     defCountry.value = items.find((x) => x.id === defLang.value?.id)
     currentCountry.value = idfromcookie ?? defCountry.value
-    console.log(defCountry.value);
-    console.log(currentCountry.value);
-
   } catch (error) {
     console.error('Failed to fetch languages:', error)
   }
@@ -60,7 +52,6 @@ export async function switchLocalization() {
     await useFetchJson('/api/v1/public/auth/update-choice', {
       method: 'POST'
     })
-
   } catch (error) {
     console.log(error)
   }
diff --git a/bo/src/stores/customer/address.ts b/bo/src/stores/customer/address.ts
index 4efdd7d..ee681bb 100644
--- a/bo/src/stores/customer/address.ts
+++ b/bo/src/stores/customer/address.ts
@@ -1,231 +1,58 @@
 import { useFetchJson } from '@/composable/useFetchJson'
 import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import type { AddressTemplate } from './cart'
-
-export interface AddressFormData {
-  street: string
-  zipCode: string
-  city: string
-  country: string
-}
+import { ref } from 'vue'
 
 export interface Address {
   id: number
-  street: string
-  zipCode: string
-  city: string
-  country: string
+  country_id: number
+  address_unparsed: Record<string, string>
 }
 
 export const useAddressStore = defineStore('address', () => {
+  const addresses = ref<Address[]>([])
   const loading = ref(false)
   const error = ref<string | null>(null)
 
-  const currentPage = ref(1)
-  const pageSize = 20
-
-  const searchQuery = ref('')
-
-  function initMockData() {
-    addresses.value = [
-      { id: 1, street: 'Main Street 123', zipCode: '10-001', city: 'New York', country: 'United States' },
-      { id: 2, street: 'Oak Avenue 123', zipCode: '90-001', city: 'Los Angeles', country: 'United States' },
-      { id: 3, street: 'Pine Road 123', zipCode: '60-601', city: 'Chicago', country: 'United States' }
-    ]
-  }
-
-  const filteredAddresses = computed(() => {
-    if (!searchQuery.value) return addresses.value
-
-    const query = searchQuery.value.toLowerCase()
-
-    return addresses.value.filter(addr =>
-      addr.street.toLowerCase().includes(query) ||
-      addr.city.toLowerCase().includes(query) ||
-      addr.country.toLowerCase().includes(query) ||
-      addr.zipCode.toLowerCase().includes(query)
-    )
-  })
-
-  const totalItems = computed(() => filteredAddresses.value.length)
-  const totalPages = computed(() => Math.ceil(totalItems.value / pageSize))
-
-  function getAddressById(id: number) {
-    return addresses.value.find(addr => addr.id === id)
-  }
-
-  function normalize(data: AddressFormData): AddressFormData {
-    return {
-      street: data.street.trim(),
-      zipCode: data.zipCode.trim(),
-      city: data.city.trim(),
-      country: data.country.trim()
-    }
-  }
-
-  function generateId(): number {
-    return Math.max(0, ...addresses.value.map(a => a.id)) + 1
-  }
-
-  function setPage(page: number) {
-    currentPage.value = page
-  }
-
-  function setSearchQuery(query: string) {
-    searchQuery.value = query
-    currentPage.value = 1
-  }
-
-  function resetPagination() {
-    currentPage.value = 1
-  }
-
-  initMockData()
-
-  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
-
+    loading.value = true
+    error.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'
+      const res = await useFetchJson<Address[]>('/api/v1/restricted/addresses/retrieve-addresses')
+      addresses.value = res.items ?? []
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : 'Failed to load addresses'
     } finally {
-      addressLoading.value = false
+      loading.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 deleteAddress(id: number) {
+    await useFetchJson(`/api/v1/restricted/addresses/delete-address?address_id=${id}`, { method: 'DELETE' })
+    addresses.value = addresses.value.filter((a) => a.id !== id)
   }
 
-  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 getTemplate(countryId: number): Promise<Record<string, string>> {
+    const res = await useFetchJson<Record<string, string>>(
+      `/api/v1/restricted/addresses/get-template?country_id=${countryId}`
+    )
+    return res.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 createAddress(countryId: number, data: Record<string, string>) {
+    await useFetchJson(`/api/v1/restricted/addresses/add-new-address?country_id=${countryId}`, {
+      method: 'POST',
+      body: JSON.stringify(data)
+    })
+    await fetchAddresses()
   }
 
-  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
-    }
+  async function updateAddress(id: number, countryId: number, data: Record<string, string>) {
+    await useFetchJson(`/api/v1/restricted/addresses/modify-address?country_id=${countryId}&address_id=${id}`, {
+      method: 'POST',
+      body: JSON.stringify(data)
+    })
+    await fetchAddresses()
   }
 
-  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()
-  }
-
-  return {
-    addresses, 
-    loading,
-    error,
-    currentPage,
-    pageSize,
-    totalItems,
-    totalPages,
-    searchQuery,
-    filteredAddresses,
-    paginatedAddresses,
-    getAddressById,
-    addAddress,
-    updateAddress,
-    deleteAddress,
-    setPage,
-    setSearchQuery,
-    resetPagination,
-    addressLoading,
-    addressError,
-    addressSearchQuery,
-    addressCurrentPage,
-    addressPageSize,
-    totalAddressItems,
-    totalAddressPages,
-    fetchAddresses,
-    setAddressPage,
-    setAddressSearchQuery,
-    getAddressTemplate
-  }
-})
\ No newline at end of file
+  return { addresses, loading, error, fetchAddresses, deleteAddress, getTemplate, createAddress, updateAddress }
+})
diff --git a/bo/src/stores/customer/cart.ts b/bo/src/stores/customer/cart.ts
index a22b892..96c020f 100644
--- a/bo/src/stores/customer/cart.ts
+++ b/bo/src/stores/customer/cart.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { useFetchJson } from '@/composable/useFetchJson'
+import { useRoute } from 'vue-router'
 
 export interface Cart {
   id: number