feat: Flag icon component (#10564)

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

@@ -9,7 +9,6 @@ import SocialIcons from './SocialIcons.vue';
 import EditContact from './EditContact.vue';
 import NewConversation from './NewConversation.vue';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
-import { getCountryFlag } from 'dashboard/helper/flag';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
   isAConversationRoute,
@@ -127,8 +126,12 @@ export default {
     },
     findCountryFlag(countryCode, cityAndCountry) {
       try {
-        const countryFlag = countryCode ? getCountryFlag(countryCode) : '🌎';
-        return `${cityAndCountry} ${countryFlag}`;
+        if (!countryCode) {
+          return `${cityAndCountry} 🌎`;
+        }
+
+        const code = countryCode?.toLowerCase();
+        return `${cityAndCountry} <span class="fi fi-${code} size-3.5"></span>`;
       } catch (error) {
         return '';
       }

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

@@ -87,10 +87,9 @@ export default {
       />
       <span
         v-if="value"
+        v-dompurify-html="value"
         class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
-      >
-        {{ value }}
-      </span>
+      />
       <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
       }}</span>