From 1b0e94ec95a43b814d39ef17aab446db435c552e Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 10 Dec 2024 11:53:24 +0530
Subject: [PATCH] feat: Flag icon component (#10564)

---
 .../Contacts/ContactsCard/ContactsCard.vue    | 27 ++++--
 .../dashboard/components-next/flag/Flag.vue   | 24 +++++
 .../components-next/flag/story/Flag.story.vue | 93 +++++++++++++++++++
 .../conversation/contact/ContactInfo.vue      |  9 +-
 .../conversation/contact/ContactInfoRow.vue   |  5 +-
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  8 ++
 7 files changed, 153 insertions(+), 14 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/flag/Flag.vue
 create mode 100644 app/javascript/dashboard/components-next/flag/story/Flag.story.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
index 9875ae2ac..a3b0bf37c 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@@ -6,6 +6,7 @@ import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Flag from 'dashboard/components-next/flag/Flag.vue';
 import countries from 'shared/constants/countries';
 
 const props = defineProps({
@@ -56,13 +57,19 @@ const countryDetails = computed(() => {
 
   if (!activeCountry) return null;
 
-  const parts = [
-    activeCountry.emoji,
-    city ? `${city},` : null,
-    activeCountry.name,
-  ].filter(Boolean);
+  return {
+    countryCode: activeCountry.id,
+    city: city ? `${city},` : null,
+    name: activeCountry.name,
+  };
+});
 
-  return parts.length ? parts.join(' ') : null;
+const formattedLocation = computed(() => {
+  if (!countryDetails.value) return '';
+
+  return [countryDetails.value.city, countryDetails.value.name]
+    .filter(Boolean)
+    .join(' ');
 });
 
 const handleFormUpdate = updatedData => {
@@ -114,8 +121,12 @@ const onClickViewDetails = () => emit('showContact', props.id);
             {{ phoneNumber }}
           </span>
           <div v-if="phoneNumber" class="w-px h-3 truncate bg-n-slate-6" />
-          <span v-if="countryDetails" class="text-sm truncate text-n-slate-11">
-            {{ countryDetails }}
+          <span
+            v-if="countryDetails"
+            class="inline-flex items-center gap-2 text-sm truncate text-n-slate-11"
+          >
+            <Flag :country="countryDetails.countryCode" class="size-3.5" />
+            {{ formattedLocation }}
           </span>
           <div v-if="countryDetails" class="w-px h-3 truncate bg-n-slate-6" />
           <Button
diff --git a/app/javascript/dashboard/components-next/flag/Flag.vue b/app/javascript/dashboard/components-next/flag/Flag.vue
new file mode 100644
index 000000000..5868ce552
--- /dev/null
+++ b/app/javascript/dashboard/components-next/flag/Flag.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { h, defineProps } from 'vue';
+
+const props = defineProps({
+  country: { type: String, required: true },
+  squared: { type: Boolean, default: false },
+});
+
+const renderFlag = () => {
+  const classes = ['fi', `fi-${props.country.toLowerCase()}`, 'flex-shrink-0'];
+  if (props.squared) {
+    classes.push('fis');
+  }
+  return h('span', { class: classes });
+};
+</script>
+
+<template>
+  <component :is="renderFlag" />
+</template>
+
+<style>
+@import 'flag-icons/css/flag-icons.min.css';
+</style>
diff --git a/app/javascript/dashboard/components-next/flag/story/Flag.story.vue b/app/javascript/dashboard/components-next/flag/story/Flag.story.vue
new file mode 100644
index 000000000..d0b6ddfe7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/flag/story/Flag.story.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { ref } from 'vue';
+import Flag from '../Flag.vue';
+import countries from 'shared/constants/countries';
+
+const BasicTemplate = {
+  components: { Flag },
+  props: {
+    country: {
+      type: String,
+      default: 'us',
+    },
+    squared: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  template: `
+    <div class="flex items-center gap-4 p-4 border rounded border-n-weak">
+      <Flag :country="country" :squared="squared" />
+    </div>
+  `,
+};
+
+const SizeVariants = {
+  components: { Flag },
+  setup() {
+    const isSquared = ref(false);
+    return { isSquared };
+  },
+  template: `
+    <div class="flex flex-col gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" v-model="isSquared">
+        Squared flags
+      </label>
+      <div class="flex items-center gap-4 p-4 border rounded border-n-weak">
+        <Flag country="in" class="!size-4" :squared="isSquared" />
+        <Flag country="in" class="!size-6" :squared="isSquared" />
+        <Flag country="in" class="!size-8" :squared="isSquared" />
+        <Flag country="in" class="!size-10" :squared="isSquared" />
+      </div>
+    </div>
+  `,
+};
+
+const AllFlags = {
+  components: { Flag },
+  setup() {
+    const isSquared = ref(false);
+    return { countries, isSquared };
+  },
+  template: `
+    <div class="flex flex-col gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" v-model="isSquared">
+        Squared flags
+      </label>
+
+      <div class="grid grid-cols-2 gap-4 p-4 border rounded border-n-strong md:grid-cols-3 lg:grid-cols-4">
+        <div 
+          v-for="country in countries" 
+          :key="country.id"
+          class="flex items-center gap-2 px-4 py-2 border rounded border-n-strong"
+        >
+          <Flag 
+            :country="country.id" 
+            :squared="isSquared"
+            class="size-6" 
+          />
+          <span class="text-sm">{{ country.name }}</span>
+        </div>
+      </div>
+    </div>
+  `,
+};
+</script>
+
+<template>
+  <Story title="Components/Flag">
+    <Variant title="Basic Usage">
+      <BasicTemplate country="us" :squared="false" />
+    </Variant>
+
+    <Variant title="Size Variants">
+      <SizeVariants />
+    </Variant>
+
+    <Variant title="All Flags">
+      <AllFlags />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index ffc7155f5..10b1b52b9 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/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 '';
       }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index 3924ec22d..80383b840 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/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>
diff --git a/package.json b/package.json
index 08a9d0bf2..d4a8d2c94 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "date-fns": "2.21.1",
     "date-fns-tz": "^1.3.3",
     "dompurify": "3.1.6",
+    "flag-icons": "^7.2.3",
     "floating-vue": "^5.2.2",
     "highlight.js": "^11.10.0",
     "idb": "^8.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03fac16f7..ae1eb3d45 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -121,6 +121,9 @@ importers:
       dompurify:
         specifier: 3.1.6
         version: 3.1.6
+      flag-icons:
+        specifier: ^7.2.3
+        version: 7.2.3
       floating-vue:
         specifier: ^5.2.2
         version: 5.2.2(vue@3.5.12(typescript@5.6.2))
@@ -2854,6 +2857,9 @@ packages:
     resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  flag-icons@7.2.3:
+    resolution: {integrity: sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg==}
+
   flat-cache@3.1.0:
     resolution: {integrity: sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==}
     engines: {node: '>=12.0.0'}
@@ -8159,6 +8165,8 @@ snapshots:
       locate-path: 7.2.0
       path-exists: 5.0.0
 
+  flag-icons@7.2.3: {}
+
   flat-cache@3.1.0:
     dependencies:
       flatted: 3.2.9