fix(contacts): expose root country code

app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue

@@ -16,6 +16,7 @@ const props = defineProps({
   name: { type: String, default: '' },
   email: { type: String, default: '' },
   additionalAttributes: { type: Object, default: () => ({}) },
+  countryCode: { type: String, default: '' },
   phoneNumber: { type: String, default: '' },
   thumbnail: { type: String, default: '' },
   availabilityStatus: { type: String, default: null },
@@ -42,6 +43,7 @@ const getInitialContactData = () => ({
   name: props.name,
   email: props.email,
   phoneNumber: props.phoneNumber,
+  countryCode: props.countryCode,
   additionalAttributes: props.additionalAttributes,
 });
 
@@ -58,12 +60,13 @@ const countriesMap = computed(() => {
 
 const countryDetails = computed(() => {
   const attributes = props.additionalAttributes || {};
-  const { country, countryCode, city } = attributes;
+  const { country, countryCode: additionalCountryCode, city } = attributes;
+  const countryCode = props.countryCode || additionalCountryCode;
 
   if (!country && !countryCode) return null;
 
   const activeCountry =
-    countriesMap.value[country] || countriesMap.value[countryCode];
+    countriesMap.value[countryCode] || countriesMap.value[country];
 
   if (!activeCountry) return null;
 

app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue

@@ -96,6 +96,7 @@ const prepareStateBasedOnProps = () => {
     name = '',
     email: emailAddress,
     phoneNumber,
+    countryCode: contactCountryCode = '',
     additionalAttributes = {},
   } = props.contactData || {};
   const { firstName, lastName } = splitName(name || '');
@@ -122,7 +123,7 @@ const prepareStateBasedOnProps = () => {
     additionalAttributes: {
       description,
       companyName,
-      countryCode,
+      countryCode: contactCountryCode || countryCode,
       country,
       city,
       socialProfiles: {

app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue

@@ -94,6 +94,7 @@ const handleAvatarHover = (id, isHovered) => {
         :email="contact.email"
         :thumbnail="contact.thumbnail"
         :phone-number="contact.phoneNumber"
+        :country-code="contact.countryCode"
         :additional-attributes="contact.additionalAttributes"
         :availability-status="contact.availabilityStatus"
         :is-expanded="expandedCardId === contact.id"

app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue

@@ -37,6 +37,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  countryCode: {
+    type: String,
+    default: '',
+  },
   updatedAt: {
     type: Number,
     default: 0,
@@ -60,12 +64,17 @@ const updatedAtTime = computed(() => {
 });
 
 const countryDetails = computed(() => {
-  const { country, countryCode, city } = props.additionalAttributes;
+  const {
+    country,
+    countryCode: additionalCountryCode,
+    city,
+  } = props.additionalAttributes;
+  const countryCode = props.countryCode || additionalCountryCode;
 
   if (!country && !countryCode) return null;
 
   const activeCountry =
-    countriesMap.value[country] || countriesMap.value[countryCode];
+    countriesMap.value[countryCode] || countriesMap.value[country];
 
   if (!activeCountry) return null;
 

app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue

@@ -41,6 +41,7 @@ const accountId = useMapGetter('getCurrentAccountId');
           :name="contact.name"
           :email="contact.email"
           :phone="contact.phoneNumber"
+          :country-code="contact.countryCode"
           :additional-attributes="contact.additionalAttributes"
           :account-id="accountId"
           :thumbnail="contact.thumbnail"

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -72,12 +72,14 @@ export default {
         city = '',
         country_code: countryCode,
       } = this.additionalAttributes;
+      const canonicalCountryCode =
+        this.contact.country_code || this.contact.countryCode || countryCode;
       const cityAndCountry = [city, country].filter(item => !!item).join(', ');
 
       if (!cityAndCountry) {
         return '';
       }
-      return this.findCountryFlag(countryCode, cityAndCountry);
+      return this.findCountryFlag(canonicalCountryCode, cityAndCountry);
     },
     socialProfiles() {
       const {