From 795e63918cb7c6b2d3eacf1db9022c8741fcc23c Mon Sep 17 00:00:00 2001
From: cristian sandru <cristian.sandru@plentysystems.com>
Date: Mon, 2 Dec 2024 17:02:10 +0200
Subject: [PATCH] feat: display country on address preview

---
 .../components/AddressDisplay/AddressDisplay.vue   | 14 +++++++++-----
 apps/web/components/AddressDisplay/types.ts        |  3 +--
 .../OrderAddressData/OrderAddressData.vue          | 12 ++++--------
 .../composables/useAggregatedCountries/types.ts    |  1 +
 .../useAggregatedCountries.ts                      |  9 +++++++++
 docs/changelog/changelog_en.md                     |  1 +
 6 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/apps/web/components/AddressDisplay/AddressDisplay.vue b/apps/web/components/AddressDisplay/AddressDisplay.vue
index f53276c6b..8091abe71 100644
--- a/apps/web/components/AddressDisplay/AddressDisplay.vue
+++ b/apps/web/components/AddressDisplay/AddressDisplay.vue
@@ -14,13 +14,17 @@
     <p>
       {{ `${userAddressGetters.getPostCode(address)} ${userAddressGetters.getCity(address)}` }}
     </p>
-    <p>
-      {{ countryName }}
-    </p>
+    <p class="font-medium">{{ countryName }}</p>
   </div>
 </template>
+
 <script lang="ts" setup>
 import { userAddressGetters } from '@plentymarkets/shop-api';
-import type { AddressProps } from './types';
-defineProps<AddressProps>();
+import { type AddressProps } from './types';
+
+const { address } = defineProps<AddressProps>();
+
+const countryName = computed(() =>
+  address?.country ? useAggregatedCountries().localeCountryName(address.country) : '',
+);
 </script>
diff --git a/apps/web/components/AddressDisplay/types.ts b/apps/web/components/AddressDisplay/types.ts
index 74c1e5b4b..29cfb7bf0 100644
--- a/apps/web/components/AddressDisplay/types.ts
+++ b/apps/web/components/AddressDisplay/types.ts
@@ -1,6 +1,5 @@
-import type { Address } from '@plentymarkets/shop-api';
+import { type Address } from '@plentymarkets/shop-api';
 
 export type AddressProps = {
   address: Address;
-  countryName?: string;
 };
diff --git a/apps/web/components/OrderAddressData/OrderAddressData.vue b/apps/web/components/OrderAddressData/OrderAddressData.vue
index 35759463f..b3420c17c 100644
--- a/apps/web/components/OrderAddressData/OrderAddressData.vue
+++ b/apps/web/components/OrderAddressData/OrderAddressData.vue
@@ -1,16 +1,12 @@
 <template>
-  <AddressDisplay :address="transformAddress(address)" :country-name="country" />
+  <AddressDisplay :address="transformAddress(address)" />
 </template>
 
 <script setup lang="ts">
-import type { OrderAddressDataPropsType } from './types';
-import type { Address, AddressData } from '@plentymarkets/shop-api';
+import { type OrderAddressDataPropsType } from './types';
+import { type Address, type AddressData } from '@plentymarkets/shop-api';
 
-const { data: countries } = useActiveShippingCountries();
 const props = defineProps<OrderAddressDataPropsType>();
-const country = computed(() => {
-  return countries.value.find((country) => country.id === props.address.countryId)?.name ?? '';
-});
 
 const transformAddress = (address: AddressData): Address => {
   return {
@@ -18,7 +14,7 @@ const transformAddress = (address: AddressData): Address => {
     lastName: address.name3 || '',
     zipCode: address.postalCode,
     city: address.town,
-    country: country.value,
+    country: props.address.countryId.toString(),
     streetName: address.address1,
     apartment: address.address2,
     phoneNumber: '',
diff --git a/apps/web/composables/useAggregatedCountries/types.ts b/apps/web/composables/useAggregatedCountries/types.ts
index 6a1c7f666..61cc354d9 100644
--- a/apps/web/composables/useAggregatedCountries/types.ts
+++ b/apps/web/composables/useAggregatedCountries/types.ts
@@ -19,6 +19,7 @@ export interface UseAggregatedCountries {
   fetchAggregatedCountries: FetchAggregatedCountries;
   useGeoRegulatedCountries: boolean;
   billingCountries: ComputedRef<(ActiveShippingCountry | GeoRegulatedCountry)[]>;
+  localeCountryName: (countryId: string) => string;
 }
 
 export type UseAggregatedCountriesReturn = () => UseAggregatedCountries;
diff --git a/apps/web/composables/useAggregatedCountries/useAggregatedCountries.ts b/apps/web/composables/useAggregatedCountries/useAggregatedCountries.ts
index a40bd12ea..67562f85b 100644
--- a/apps/web/composables/useAggregatedCountries/useAggregatedCountries.ts
+++ b/apps/web/composables/useAggregatedCountries/useAggregatedCountries.ts
@@ -16,6 +16,7 @@ import { type UseAggregatedCountriesReturn, UseAggregatedCountriesState, type Fe
  *  fetchAggregatedCountries,
  *  useGeoRegulatedCountries,
  *  billingCountries,
+ *  localeCountryName(countryId),
  * } = useAggregatedCountries();
  * ```
  */
@@ -57,10 +58,18 @@ export const useAggregatedCountries: UseAggregatedCountriesReturn = () => {
     );
   });
 
+  const localeCountryName = (countryId: string) => {
+    const id = Number.parseInt(countryId);
+
+    if (Number.isNaN(id)) return '';
+    return billingCountries.value.find((country) => country.id === id)?.currLangName ?? '';
+  };
+
   return {
     fetchAggregatedCountries,
     useGeoRegulatedCountries,
     billingCountries,
+    localeCountryName,
     ...toRefs(state.value),
   };
 };
diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md
index 67efb328a..19b197951 100644
--- a/docs/changelog/changelog_en.md
+++ b/docs/changelog/changelog_en.md
@@ -16,6 +16,7 @@
 
 ### 👷 Changed
 
+- Address preview details now includes the country name.
 - Removed checkbox margin from rating filter in category page
 - Order of attribute select and order properties on item page
 - Addressed an unhandled scenario where a blocked payment method remained available during the checkout process