diff --git a/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressesDetails.vue b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressesDetails.vue
index ef53db35c..f5efb8ccc 100644
--- a/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressesDetails.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressesDetails.vue
@@ -52,13 +52,17 @@
class="addresses-list"
>
-
+
+
+ {{ address.countryName }}
+
+
@@ -103,6 +107,7 @@ import {
useRouter,
useContext,
ref,
+ computed,
useFetch,
} from '@nuxtjs/composition-api';
import { useAddresses } from '~/modules/customer/composables/useAddresses';
@@ -111,6 +116,8 @@ import SvgImage from '~/components/General/SvgImage.vue';
import UserAddressDetails from '~/components/UserAddressDetails.vue';
import { CustomerAddress } from '~/modules/GraphQL/types';
import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
+import { useCountrySearch } from '~/composables/useCountrySearch';
+import type { Country } from '~/modules/GraphQL/types';
export default defineComponent({
name: 'AddressesDetails',
@@ -126,10 +133,14 @@ export default defineComponent({
const router = useRouter();
const userAddresses = ref([]);
+ const countries = ref([]);
const { load, remove } = useAddresses();
+ const { load: loadCountries } = useCountrySearch();
+
const { fetch } = useFetch(async () => {
- const addressesData = await load();
- userAddresses.value = userAddressesGetters.getAddresses(addressesData);
+ const [addressesResponse, countriesResponse] = await Promise.all([load(), loadCountries()]);
+ userAddresses.value = userAddressesGetters.getAddresses(addressesResponse);
+ countries.value = countriesResponse;
});
const goToCreateAddressPage = () => router.push(
@@ -145,8 +156,18 @@ export default defineComponent({
fetch();
};
+ const addressesWithCountryName = computed(() => userAddresses.value.map((address) => ({
+ ...address,
+ countryName: countries.value
+ .find(({ id }) => id === address.country_code)
+ ?.full_name_locale
+ ?? address.country_code,
+ })));
+
return {
+ countries,
userAddresses,
+ addressesWithCountryName,
goToCreateAddressPage,
goToEditAddressPage,
removeAddress,