feat: display country on address preview

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>

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;
 };

apps/web/components/OrderAddressData/OrderAddressData.vue

@@ -1,24 +1,20 @@
 <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 {
     firstName: address.name2 || '',
     lastName: address.name3 || '',
     zipCode: address.postalCode,
     city: address.town,
-    country: country.value,
+    country: props.address.countryId.toString(),
     streetName: address.address1,
     apartment: address.address2,
     phoneNumber: '',

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;

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),
   };
 };

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