From c9ce9e5b8f4f5bec2e0b43c284aecb191b70820c Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 17 Apr 2023 20:32:09 +0530
Subject: [PATCH] feat: Improved country code in contact form view. (#6801)

* feat: Improved country code in contact.

* chore: Minor fixes

* chore: Minor fixes

* chore: Adds arrow key navigation and cursor pointer

* chore: Minor fix

* chore: Code clean up

* chore: Handle outside click

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>, Nithin David
---
 app/javascript/dashboard/components/index.js  |    2 +
 .../components/widgets/forms/PhoneInput.vue   |  361 ++++
 .../dashboard/i18n/locale/en/contact.json     |    3 +-
 .../conversation/contact/ContactForm.vue      |  102 +-
 app/javascript/shared/constants/countries.js  | 1699 ++++++++++++++---
 app/javascript/shared/helpers/Validators.js   |    4 +
 package.json                                  |    1 +
 yarn.lock                                     |    5 +
 8 files changed, 1910 insertions(+), 267 deletions(-)
 create mode 100644 app/javascript/dashboard/components/widgets/forms/PhoneInput.vue

diff --git a/app/javascript/dashboard/components/index.js b/app/javascript/dashboard/components/index.js
index f5ce5d856..ee06ebc9a 100644
--- a/app/javascript/dashboard/components/index.js
+++ b/app/javascript/dashboard/components/index.js
@@ -13,6 +13,7 @@ import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
 import FeatureToggle from './widgets/FeatureToggle';
 import HorizontalBar from './widgets/chart/HorizontalBarChart';
 import Input from './widgets/forms/Input.vue';
+import PhoneInput from './widgets/forms/PhoneInput.vue';
 import Label from './ui/Label';
 import LoadingState from './widgets/LoadingState';
 import Modal from './Modal';
@@ -40,6 +41,7 @@ const WootUIKit = {
   FeatureToggle,
   HorizontalBar,
   Input,
+  PhoneInput,
   Label,
   LoadingState,
   Modal,
diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
new file mode 100644
index 000000000..6580ab83c
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -0,0 +1,361 @@
+<template>
+  <div class="phone-input--wrap">
+    <div class="phone-input" :class="{ 'has-error': error }">
+      <div class="country-emoji--wrap" @click="toggleCountryDropdown">
+        <h5 v-if="activeCountry.emoji">{{ activeCountry.emoji }}</h5>
+        <fluent-icon v-else icon="globe" class="fluent-icon" size="16" />
+        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
+      </div>
+      <span v-if="activeDialCode" class="country-dial--code">
+        {{ activeDialCode }}
+      </span>
+      <input
+        :value="phoneNumber"
+        type="tel"
+        class="phone-input--field"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :style="styles"
+        @input="onChange"
+        @blur="onBlur"
+      />
+    </div>
+    <div v-if="showDropdown" ref="dropdown" class="country-dropdown">
+      <div class="dropdown-search--wrap">
+        <input
+          ref="searchbar"
+          v-model="searchCountry"
+          type="text"
+          placeholder="Search"
+          class="dropdown-search"
+        />
+      </div>
+      <div
+        v-for="(country, index) in filteredCountriesBySearch"
+        ref="dropdownItem"
+        :key="index"
+        class="country-dropdown--item"
+        :class="{
+          active: country.id === activeCountryCode,
+          focus: index === selectedIndex,
+        }"
+        @click="onSelectCountry(country)"
+      >
+        <span class="country-emoji">{{ country.emoji }}</span>
+
+        <span class="country-name">
+          {{ country.name }}
+        </span>
+        <span class="country-dial-code">{{ country.dial_code }}</span>
+      </div>
+      <div v-if="filteredCountriesBySearch.length === 0">
+        <span class="no-results">No results found</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import countries from 'shared/constants/countries.js';
+import parsePhoneNumber from 'libphonenumber-js';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import {
+  hasPressedArrowUpKey,
+  hasPressedArrowDownKey,
+  isEnter,
+} from 'shared/helpers/KeyboardHelpers';
+
+export default {
+  mixins: [eventListenerMixins],
+  props: {
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    styles: {
+      type: Object,
+      default: () => {},
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      countries: [
+        {
+          name: 'Select Country',
+          dial_code: '',
+          emoji: '',
+          id: '',
+        },
+        ...countries,
+      ],
+      selectedIndex: -1,
+      showDropdown: false,
+      searchCountry: '',
+      activeCountryCode: '',
+      activeDialCode: '',
+      phoneNumber: this.value,
+    };
+  },
+  computed: {
+    filteredCountriesBySearch() {
+      return this.countries.filter(country => {
+        const { name, dial_code, id } = country;
+        const search = this.searchCountry.toLowerCase();
+        return (
+          name.toLowerCase().includes(search) ||
+          dial_code.toLowerCase().includes(search) ||
+          id.toLowerCase().includes(search)
+        );
+      });
+    },
+    activeCountry() {
+      if (this.activeCountryCode) {
+        return this.countries.find(
+          country => country.id === this.activeCountryCode
+        );
+      }
+      return '';
+    },
+  },
+  watch: {
+    value() {
+      const number = parsePhoneNumber(this.value);
+      if (number) {
+        this.activeCountryCode = number.country;
+        this.activeDialCode = `+${number.countryCallingCode}`;
+        this.phoneNumber = this.value.replace(
+          `+${number.countryCallingCode}`,
+          ''
+        );
+      }
+    },
+  },
+  mounted() {
+    window.addEventListener('mouseup', this.onOutsideClick);
+    this.setActiveCountry();
+  },
+  beforeDestroy() {
+    window.removeEventListener('mouseup', this.onOutsideClick);
+  },
+  methods: {
+    onOutsideClick(e) {
+      if (
+        this.showDropdown &&
+        e.target !== this.$refs.dropdown &&
+        !this.$refs.dropdown.contains(e.target)
+      ) {
+        this.closeDropdown();
+      }
+    },
+    onChange(e) {
+      this.phoneNumber = e.target.value;
+      this.$emit('input', e.target.value, this.activeDialCode);
+    },
+    onBlur(e) {
+      this.$emit('blur', e.target.value);
+    },
+    dropdownItem() {
+      return Array.from(
+        this.$refs.dropdown.querySelectorAll(
+          'div.country-dropdown div.country-dropdown--item'
+        )
+      );
+    },
+    focusedItem() {
+      return Array.from(
+        this.$refs.dropdown.querySelectorAll('div.country-dropdown div.focus')
+      );
+    },
+    focusedItemIndex() {
+      return Array.from(this.dropdownItem()).indexOf(this.focusedItem()[0]);
+    },
+    onKeyDownHandler(e) {
+      const { showDropdown, filteredCountriesBySearch, onSelectCountry } = this;
+      const { selectedIndex } = this;
+
+      if (showDropdown) {
+        if (hasPressedArrowDownKey(e)) {
+          e.preventDefault();
+          this.selectedIndex = Math.min(
+            selectedIndex + 1,
+            filteredCountriesBySearch.length - 1
+          );
+          this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28;
+        } else if (hasPressedArrowUpKey(e)) {
+          e.preventDefault();
+          this.selectedIndex = Math.max(selectedIndex - 1, 0);
+          this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
+        } else if (isEnter(e)) {
+          e.preventDefault();
+          onSelectCountry(filteredCountriesBySearch[selectedIndex]);
+        }
+      }
+    },
+    onSelectCountry(country) {
+      this.activeCountryCode = country.id;
+      this.searchCountry = '';
+      this.activeDialCode = country.dial_code;
+      this.$emit('setCode', country.dial_code);
+      this.closeDropdown();
+    },
+    setActiveCountry() {
+      const { phoneNumber } = this;
+      if (!phoneNumber) return;
+      const number = parsePhoneNumber(phoneNumber);
+      if (number) {
+        this.activeCountryCode = number.country;
+        this.activeDialCode = number.countryCallingCode;
+      }
+    },
+    toggleCountryDropdown() {
+      this.showDropdown = !this.showDropdown;
+      this.selectedIndex = -1;
+      if (this.showDropdown) {
+        this.$nextTick(() => {
+          this.$refs.searchbar.focus();
+        });
+      }
+    },
+    closeDropdown() {
+      this.selectedIndex = -1;
+      this.showDropdown = false;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.phone-input--wrap {
+  position: relative;
+
+  .phone-input {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: var(--space-normal);
+    border: 1px solid var(--s-200);
+    border-radius: var(--border-radius-normal);
+
+    &.has-error {
+      border: 1px solid var(--r-400);
+    }
+  }
+
+  .country-emoji--wrap {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-small);
+    background: var(--s-25);
+    height: 4rem;
+    width: 5.2rem;
+    border-radius: var(--border-radius-normal) 0 0 var(--border-radius-normal);
+    padding: var(--space-small) var(--space-smaller) var(--space-small)
+      var(--space-small);
+
+    h5 {
+      margin-bottom: 0;
+    }
+  }
+
+  .country-dial--code {
+    display: flex;
+    color: var(--s-300);
+    font-size: var(--space-normal);
+    font-weight: normal;
+    line-height: 1.5;
+    padding: var(--space-small) 0 var(--space-small) var(--space-small);
+  }
+
+  .phone-input--field {
+    margin-bottom: 0;
+    border: 0;
+  }
+
+  .country-dropdown {
+    z-index: var(--z-index-low);
+    position: absolute;
+    height: var(--space-giga);
+    width: 20rem;
+    overflow-y: auto;
+    top: 4rem;
+    border-radius: var(--border-radius-default);
+    padding: 0 0 var(--space-smaller) 0;
+    background-color: var(--white);
+    box-shadow: var(--shadow-context-menu);
+    border-radius: var(--border-radius-normal);
+
+    .dropdown-search--wrap {
+      top: 0;
+      position: sticky;
+      background-color: var(--white);
+      padding: var(--space-smaller);
+
+      .dropdown-search {
+        height: var(--space-large);
+        margin-bottom: 0;
+        font-size: var(--font-size-small);
+        border: 1px solid var(--s-200) !important;
+      }
+    }
+
+    .country-dropdown--item {
+      display: flex;
+      align-items: center;
+      height: 2.8rem;
+      padding: 0 var(--space-smaller);
+      cursor: pointer;
+
+      &.active {
+        background-color: var(--s-50);
+      }
+
+      &.focus {
+        background-color: var(--s-25);
+      }
+
+      &:hover {
+        background-color: var(--s-50);
+      }
+
+      .country-emoji {
+        font-size: var(--font-size-default);
+        margin-right: var(--space-smaller);
+      }
+
+      .country-name {
+        max-width: 12rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .country-dial-code {
+        margin-left: var(--space-smaller);
+        color: var(--s-300);
+        font-size: var(--font-size-mini);
+      }
+    }
+
+    .no-results {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--s-500);
+      margin-top: var(--space-normal);
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 9191698d8..bfeb2c4a9 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -120,8 +120,9 @@
       "PHONE_NUMBER": {
         "PLACEHOLDER": "Enter the phone number of the contact",
         "LABEL": "Phone Number",
-        "HELP": "Phone number should be of E.164 format eg: +1415555555 [+][country code][area code][local phone number]",
+        "HELP": "Phone number should be of E.164 format eg: +1415555555 [+][country code][area code][local phone number]. You can select the dial code from the dropdown.",
         "ERROR": "Phone number should be either empty or of E.164 format",
+        "DIAL_CODE_ERROR": "Please select a dial code from the list",
         "DUPLICATE": "This phone number is in use for another contact."
       },
       "LOCATION": {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index 630f1edcf..66e3a4a25 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -52,20 +52,27 @@
     </div>
     <div class="row">
       <div class="medium-12 columns">
-        <label :class="{ error: $v.phoneNumber.$error }">
+        <label
+          :class="{
+            error: isPhoneNumberNotValid,
+          }"
+        >
           {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL') }}
-          <input
-            v-model.trim="phoneNumber"
-            type="text"
+          <woot-phone-input
+            v-model="phoneNumber"
+            :value="phoneNumber"
+            :error="isPhoneNumberNotValid"
             :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
-            @input="$v.phoneNumber.$touch"
+            @input="onPhoneNumberInputChange"
+            @blur="$v.phoneNumber.$touch"
+            @setCode="setPhoneCode"
           />
-          <span v-if="$v.phoneNumber.$error" class="message">
-            {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.ERROR') }}
+          <span v-if="isPhoneNumberNotValid" class="message">
+            {{ phoneNumberError }}
           </span>
         </label>
         <div
-          v-if="$v.phoneNumber.$error || !phoneNumber"
+          v-if="isPhoneNumberNotValid || !phoneNumber"
           class="callout small warning"
         >
           {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
@@ -145,8 +152,8 @@ import {
 } from 'shared/helpers/CustomErrors';
 import { required, email } from 'vuelidate/lib/validators';
 import countries from 'shared/constants/countries.js';
-
-import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
+import { isPhoneNumberValid } from 'shared/helpers/Validators';
+import parsePhoneNumber from 'libphonenumber-js';
 
 export default {
   mixins: [alertMixin],
@@ -172,6 +179,7 @@ export default {
       email: '',
       name: '',
       phoneNumber: '',
+      activeDialCode: '',
       avatarFile: null,
       avatarUrl: '',
       country: {
@@ -202,11 +210,43 @@ export default {
       email,
     },
     companyName: {},
-    phoneNumber: {
-      isPhoneE164OrEmpty,
-    },
+    phoneNumber: {},
     bio: {},
   },
+  computed: {
+    parsePhoneNumber() {
+      return parsePhoneNumber(this.phoneNumber);
+    },
+    isPhoneNumberNotValid() {
+      if (this.phoneNumber !== '') {
+        return (
+          !isPhoneNumberValid(this.phoneNumber, this.activeDialCode) ||
+          (this.phoneNumber !== '' ? this.activeDialCode === '' : false)
+        );
+      }
+      return false;
+    },
+    phoneNumberError() {
+      if (this.activeDialCode === '') {
+        return this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.DIAL_CODE_ERROR');
+      }
+      if (!isPhoneNumberValid(this.phoneNumber, this.activeDialCode)) {
+        return this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.ERROR');
+      }
+      return '';
+    },
+    setPhoneNumber() {
+      if (this.parsePhoneNumber && this.parsePhoneNumber.countryCallingCode) {
+        return this.phoneNumber;
+      }
+      if (this.phoneNumber === '' && this.activeDialCode !== '') {
+        return '';
+      }
+      return this.activeDialCode
+        ? `${this.activeDialCode}${this.phoneNumber}`
+        : '';
+    },
+  },
   watch: {
     contact() {
       this.setContactObject();
@@ -214,6 +254,7 @@ export default {
   },
   mounted() {
     this.setContactObject();
+    this.setDialCode();
   },
   methods: {
     onCancel() {
@@ -227,6 +268,16 @@ export default {
       if (!name && !id) return '';
       return `${name} (${id})`;
     },
+    setDialCode() {
+      if (
+        this.phoneNumber !== '' &&
+        this.parsePhoneNumber &&
+        this.parsePhoneNumber.countryCallingCode
+      ) {
+        const dialCode = this.parsePhoneNumber.countryCallingCode;
+        this.activeDialCode = `+${dialCode}`;
+      }
+    },
     setContactObject() {
       const {
         email: emailAddress,
@@ -271,7 +322,7 @@ export default {
         id: this.contact.id,
         name: this.name,
         email: this.email,
-        phone_number: this.phoneNumber,
+        phone_number: this.setPhoneNumber,
         additional_attributes: {
           ...this.contact.additional_attributes,
           description: this.description,
@@ -292,10 +343,28 @@ export default {
       }
       return contactObject;
     },
+    onPhoneNumberInputChange(value, code) {
+      this.activeDialCode = code;
+    },
+    setPhoneCode(code) {
+      if (this.phoneNumber !== '' && this.parsePhoneNumber) {
+        const dialCode = this.parsePhoneNumber.countryCallingCode;
+        if (dialCode === code) {
+          return;
+        }
+        this.activeDialCode = `+${dialCode}`;
+        const newPhoneNumber = this.phoneNumber.replace(
+          `+${dialCode}`,
+          `${code}`
+        );
+        this.phoneNumber = newPhoneNumber;
+      } else {
+        this.activeDialCode = code;
+      }
+    },
     async handleSubmit() {
       this.$v.$touch();
-
-      if (this.$v.$invalid) {
+      if (this.$v.$invalid || this.isPhoneNumberNotValid) {
         return;
       }
       try {
@@ -332,6 +401,7 @@ export default {
         }
         this.avatarFile = null;
         this.avatarUrl = '';
+        this.activeDialCode = '';
       } catch (error) {
         this.showAlert(
           error.message
diff --git a/app/javascript/shared/constants/countries.js b/app/javascript/shared/constants/countries.js
index fd2deffd2..d01d3f23a 100644
--- a/app/javascript/shared/constants/countries.js
+++ b/app/javascript/shared/constants/countries.js
@@ -1,257 +1,1456 @@
 const countries = [
-  { name: 'Afghanistan', id: 'AF' },
-  { name: 'Åland Islands', id: 'AX' },
-  { name: 'Albania', id: 'AL' },
-  { name: 'Algeria', id: 'DZ' },
-  { name: 'American Samoa', id: 'AS' },
-  { name: 'Andorra', id: 'AD' },
-  { name: 'Angola', id: 'AO' },
-  { name: 'Anguilla', id: 'AI' },
-  { name: 'Antarctica', id: 'AQ' },
-  { name: 'Antigua and Barbuda', id: 'AG' },
-  { name: 'Argentina', id: 'AR' },
-  { name: 'Armenia', id: 'AM' },
-  { name: 'Aruba', id: 'AW' },
-  { name: 'Australia', id: 'AU' },
-  { name: 'Austria', id: 'AT' },
-  { name: 'Azerbaijan', id: 'AZ' },
-  { name: 'Bahamas', id: 'BS' },
-  { name: 'Bahrain', id: 'BH' },
-  { name: 'Bangladesh', id: 'BD' },
-  { name: 'Barbados', id: 'BB' },
-  { name: 'Belarus', id: 'BY' },
-  { name: 'Belgium', id: 'BE' },
-  { name: 'Belize', id: 'BZ' },
-  { name: 'Benin', id: 'BJ' },
-  { name: 'Bermuda', id: 'BM' },
-  { name: 'Bhutan', id: 'BT' },
-  { name: 'Bolivia (Plurinational State of)', id: 'BO' },
-  { name: 'Bonaire, Sint Eustatius and Saba', id: 'BQ' },
-  { name: 'Bosnia and Herzegovina', id: 'BA' },
-  { name: 'Botswana', id: 'BW' },
-  { name: 'Bouvet Island', id: 'BV' },
-  { name: 'Brazil', id: 'BR' },
-  { name: 'British Indian Ocean Territory', id: 'IO' },
-  { name: 'United States Minor Outlying Islands', id: 'UM' },
-  { name: 'Virgin Islands (British)', id: 'VG' },
-  { name: 'Virgin Islands (U.S.)', id: 'VI' },
-  { name: 'Brunei Darussalam', id: 'BN' },
-  { name: 'Bulgaria', id: 'BG' },
-  { name: 'Burkina Faso', id: 'BF' },
-  { name: 'Burundi', id: 'BI' },
-  { name: 'Cambodia', id: 'KH' },
-  { name: 'Cameroon', id: 'CM' },
-  { name: 'Canada', id: 'CA' },
-  { name: 'Cabo Verde', id: 'CV' },
-  { name: 'Cayman Islands', id: 'KY' },
-  { name: 'Central African Republic', id: 'CF' },
-  { name: 'Chad', id: 'TD' },
-  { name: 'Chile', id: 'CL' },
-  { name: 'China', id: 'CN' },
-  { name: 'Christmas Island', id: 'CX' },
-  { name: 'Cocos (Keeling) Islands', id: 'CC' },
-  { name: 'Colombia', id: 'CO' },
-  { name: 'Comoros', id: 'KM' },
-  { name: 'Congo', id: 'CG' },
-  { name: 'Congo (Democratic Republic of the)', id: 'CD' },
-  { name: 'Cook Islands', id: 'CK' },
-  { name: 'Costa Rica', id: 'CR' },
-  { name: 'Croatia', id: 'HR' },
-  { name: 'Cuba', id: 'CU' },
-  { name: 'Curaçao', id: 'CW' },
-  { name: 'Cyprus', id: 'CY' },
-  { name: 'Czech Republic', id: 'CZ' },
-  { name: 'Denmark', id: 'DK' },
-  { name: 'Djibouti', id: 'DJ' },
-  { name: 'Dominica', id: 'DM' },
-  { name: 'Dominican Republic', id: 'DO' },
-  { name: 'Ecuador', id: 'EC' },
-  { name: 'Egypt', id: 'EG' },
-  { name: 'El Salvador', id: 'SV' },
-  { name: 'Equatorial Guinea', id: 'GQ' },
-  { name: 'Eritrea', id: 'ER' },
-  { name: 'Estonia', id: 'EE' },
-  { name: 'Ethiopia', id: 'ET' },
-  { name: 'Falkland Islands (Malvinas)', id: 'FK' },
-  { name: 'Faroe Islands', id: 'FO' },
-  { name: 'Fiji', id: 'FJ' },
-  { name: 'Finland', id: 'FI' },
-  { name: 'France', id: 'FR' },
-  { name: 'French Guiana', id: 'GF' },
-  { name: 'French Polynesia', id: 'PF' },
-  { name: 'French Southern Territories', id: 'TF' },
-  { name: 'Gabon', id: 'GA' },
-  { name: 'Gambia', id: 'GM' },
-  { name: 'Georgia', id: 'GE' },
-  { name: 'Germany', id: 'DE' },
-  { name: 'Ghana', id: 'GH' },
-  { name: 'Gibraltar', id: 'GI' },
-  { name: 'Greece', id: 'GR' },
-  { name: 'Greenland', id: 'GL' },
-  { name: 'Grenada', id: 'GD' },
-  { name: 'Guadeloupe', id: 'GP' },
-  { name: 'Guam', id: 'GU' },
-  { name: 'Guatemala', id: 'GT' },
-  { name: 'Guernsey', id: 'GG' },
-  { name: 'Guinea', id: 'GN' },
-  { name: 'Guinea-Bissau', id: 'GW' },
-  { name: 'Guyana', id: 'GY' },
-  { name: 'Haiti', id: 'HT' },
-  { name: 'Heard Island and McDonald Islands', id: 'HM' },
-  { name: 'Vatican City', id: 'VA' },
-  { name: 'Honduras', id: 'HN' },
-  { name: 'Hungary', id: 'HU' },
-  { name: 'Hong Kong', id: 'HK' },
-  { name: 'Iceland', id: 'IS' },
-  { name: 'India', id: 'IN' },
-  { name: 'Indonesia', id: 'ID' },
-  { name: 'Ivory Coast', id: 'CI' },
-  { name: 'Iran (Islamic Republic of)', id: 'IR' },
-  { name: 'Iraq', id: 'IQ' },
-  { name: 'Ireland', id: 'IE' },
-  { name: 'Isle of Man', id: 'IM' },
-  { name: 'Israel', id: 'IL' },
-  { name: 'Italy', id: 'IT' },
-  { name: 'Jamaica', id: 'JM' },
-  { name: 'Japan', id: 'JP' },
-  { name: 'Jersey', id: 'JE' },
-  { name: 'Jordan', id: 'JO' },
-  { name: 'Kazakhstan', id: 'KZ' },
-  { name: 'Kenya', id: 'KE' },
-  { name: 'Kiribati', id: 'KI' },
-  { name: 'Kuwait', id: 'KW' },
-  { name: 'Kyrgyzstan', id: 'KG' },
-  { name: "Lao People's Democratic Republic", id: 'LA' },
-  { name: 'Latvia', id: 'LV' },
-  { name: 'Lebanon', id: 'LB' },
-  { name: 'Lesotho', id: 'LS' },
-  { name: 'Liberia', id: 'LR' },
-  { name: 'Libya', id: 'LY' },
-  { name: 'Liechtenstein', id: 'LI' },
-  { name: 'Lithuania', id: 'LT' },
-  { name: 'Luxembourg', id: 'LU' },
-  { name: 'Macao', id: 'MO' },
-  { name: 'North Macedonia', id: 'MK' },
-  { name: 'Madagascar', id: 'MG' },
-  { name: 'Malawi', id: 'MW' },
-  { name: 'Malaysia', id: 'MY' },
-  { name: 'Maldives', id: 'MV' },
-  { name: 'Mali', id: 'ML' },
-  { name: 'Malta', id: 'MT' },
-  { name: 'Marshall Islands', id: 'MH' },
-  { name: 'Martinique', id: 'MQ' },
-  { name: 'Mauritania', id: 'MR' },
-  { name: 'Mauritius', id: 'MU' },
-  { name: 'Mayotte', id: 'YT' },
-  { name: 'Mexico', id: 'MX' },
-  { name: 'Micronesia (Federated States of)', id: 'FM' },
-  { name: 'Moldova (Republic of)', id: 'MD' },
-  { name: 'Monaco', id: 'MC' },
-  { name: 'Mongolia', id: 'MN' },
-  { name: 'Montenegro', id: 'ME' },
-  { name: 'Montserrat', id: 'MS' },
-  { name: 'Morocco', id: 'MA' },
-  { name: 'Mozambique', id: 'MZ' },
-  { name: 'Myanmar', id: 'MM' },
-  { name: 'Namibia', id: 'NA' },
-  { name: 'Nauru', id: 'NR' },
-  { name: 'Nepal', id: 'NP' },
-  { name: 'Netherlands', id: 'NL' },
-  { name: 'New Caledonia', id: 'NC' },
-  { name: 'New Zealand', id: 'NZ' },
-  { name: 'Nicaragua', id: 'NI' },
-  { name: 'Niger', id: 'NE' },
-  { name: 'Nigeria', id: 'NG' },
-  { name: 'Niue', id: 'NU' },
-  { name: 'Norfolk Island', id: 'NF' },
-  { name: "Korea (Democratic People's Republic of)", id: 'KP' },
-  { name: 'Northern Mariana Islands', id: 'MP' },
-  { name: 'Norway', id: 'NO' },
-  { name: 'Oman', id: 'OM' },
-  { name: 'Pakistan', id: 'PK' },
-  { name: 'Palau', id: 'PW' },
-  { name: 'Palestine, State of', id: 'PS' },
-  { name: 'Panama', id: 'PA' },
-  { name: 'Papua New Guinea', id: 'PG' },
-  { name: 'Paraguay', id: 'PY' },
-  { name: 'Peru', id: 'PE' },
-  { name: 'Philippines', id: 'PH' },
-  { name: 'Pitcairn', id: 'PN' },
-  { name: 'Poland', id: 'PL' },
-  { name: 'Portugal', id: 'PT' },
-  { name: 'Puerto Rico', id: 'PR' },
-  { name: 'Qatar', id: 'QA' },
-  { name: 'Republic of Kosovo', id: 'XK' },
-  { name: 'Réunion', id: 'RE' },
-  { name: 'Romania', id: 'RO' },
-  { name: 'Russian Federation', id: 'RU' },
-  { name: 'Rwanda', id: 'RW' },
-  { name: 'Saint Barthélemy', id: 'BL' },
-  { name: 'Saint Helena, Ascension and Tristan da Cunha', id: 'SH' },
-  { name: 'Saint Kitts and Nevis', id: 'KN' },
-  { name: 'Saint Lucia', id: 'LC' },
-  { name: 'Saint Martin (French part)', id: 'MF' },
-  { name: 'Saint Pierre and Miquelon', id: 'PM' },
-  { name: 'Saint Vincent and the Grenadines', id: 'VC' },
-  { name: 'Samoa', id: 'WS' },
-  { name: 'San Marino', id: 'SM' },
-  { name: 'Sao Tome and Principe', id: 'ST' },
-  { name: 'Saudi Arabia', id: 'SA' },
-  { name: 'Senegal', id: 'SN' },
-  { name: 'Serbia', id: 'RS' },
-  { name: 'Seychelles', id: 'SC' },
-  { name: 'Sierra Leone', id: 'SL' },
-  { name: 'Singapore', id: 'SG' },
-  { name: 'Sint Maarten (Dutch part)', id: 'SX' },
-  { name: 'Slovakia', id: 'SK' },
-  { name: 'Slovenia', id: 'SI' },
-  { name: 'Solomon Islands', id: 'SB' },
-  { name: 'Somalia', id: 'SO' },
-  { name: 'South Africa', id: 'ZA' },
-  { name: 'South Georgia and the South Sandwich Islands', id: 'GS' },
-  { name: 'Korea (Republic of)', id: 'KR' },
-  { name: 'Spain', id: 'ES' },
-  { name: 'Sri Lanka', id: 'LK' },
-  { name: 'Sudan', id: 'SD' },
-  { name: 'South Sudan', id: 'SS' },
-  { name: 'Suriname', id: 'SR' },
-  { name: 'Svalbard and Jan Mayen', id: 'SJ' },
-  { name: 'Swaziland', id: 'SZ' },
-  { name: 'Sweden', id: 'SE' },
-  { name: 'Switzerland', id: 'CH' },
-  { name: 'Syrian Arab Republic', id: 'SY' },
-  { name: 'Taiwan', id: 'TW' },
-  { name: 'Tajikistan', id: 'TJ' },
-  { name: 'Tanzania, United Republic of', id: 'TZ' },
-  { name: 'Thailand', id: 'TH' },
-  { name: 'Timor-Leste', id: 'TL' },
-  { name: 'Togo', id: 'TG' },
-  { name: 'Tokelau', id: 'TK' },
-  { name: 'Tonga', id: 'TO' },
-  { name: 'Trinidad and Tobago', id: 'TT' },
-  { name: 'Tunisia', id: 'TN' },
-  { name: 'Turkey', id: 'TR' },
-  { name: 'Turkmenistan', id: 'TM' },
-  { name: 'Turks and Caicos Islands', id: 'TC' },
-  { name: 'Tuvalu', id: 'TV' },
-  { name: 'Uganda', id: 'UG' },
-  { name: 'Ukraine', id: 'UA' },
-  { name: 'United Arab Emirates', id: 'AE' },
   {
-    name: 'United Kingdom of Great Britain and Northern Ireland',
+    name: 'Afghanistan',
+    dial_code: '+93',
+    emoji: '🇦🇫',
+    id: 'AF',
+  },
+  {
+    name: 'Aland Islands',
+    dial_code: '+358',
+    emoji: '🇦🇽',
+    id: 'AX',
+  },
+  {
+    name: 'Albania',
+    dial_code: '+355',
+    emoji: '🇦🇱',
+    id: 'AL',
+  },
+  {
+    name: 'Algeria',
+    dial_code: '+213',
+    emoji: '🇩🇿',
+    id: 'DZ',
+  },
+  {
+    name: 'AmericanSamoa',
+    dial_code: '+1684',
+    emoji: '🇦🇸',
+    id: 'AS',
+  },
+  {
+    name: 'Andorra',
+    dial_code: '+376',
+    emoji: '🇦🇩',
+    id: 'AD',
+  },
+  {
+    name: 'Angola',
+    dial_code: '+244',
+    emoji: '🇦🇴',
+    id: 'AO',
+  },
+  {
+    name: 'Anguilla',
+    dial_code: '+1264',
+    emoji: '🇦🇮',
+    id: 'AI',
+  },
+  {
+    name: 'Antarctica',
+    dial_code: '+672',
+    emoji: '🇦🇶',
+    id: 'AQ',
+  },
+  {
+    name: 'Antigua and Barbuda',
+    dial_code: '+1268',
+    emoji: '🇦🇬',
+    id: 'AG',
+  },
+  {
+    name: 'Argentina',
+    dial_code: '+54',
+    emoji: '🇦🇷',
+    id: 'AR',
+  },
+  {
+    name: 'Armenia',
+    dial_code: '+374',
+    emoji: '🇦🇲',
+    id: 'AM',
+  },
+  {
+    name: 'Aruba',
+    dial_code: '+297',
+    emoji: '🇦🇼',
+    id: 'AW',
+  },
+  {
+    name: 'Australia',
+    dial_code: '+61',
+    emoji: '🇦🇺',
+    id: 'AU',
+  },
+  {
+    name: 'Austria',
+    dial_code: '+43',
+    emoji: '🇦🇹',
+    id: 'AT',
+  },
+  {
+    name: 'Azerbaijan',
+    dial_code: '+994',
+    emoji: '🇦🇿',
+    id: 'AZ',
+  },
+  {
+    name: 'Bahamas',
+    dial_code: '+1242',
+    emoji: '🇧🇸',
+    id: 'BS',
+  },
+  {
+    name: 'Bahrain',
+    dial_code: '+973',
+    emoji: '🇧🇭',
+    id: 'BH',
+  },
+  {
+    name: 'Bangladesh',
+    dial_code: '+880',
+    emoji: '🇧🇩',
+    id: 'BD',
+  },
+  {
+    name: 'Barbados',
+    dial_code: '+1246',
+    emoji: '🇧🇧',
+    id: 'BB',
+  },
+  {
+    name: 'Belarus',
+    dial_code: '+375',
+    emoji: '🇧🇾',
+    id: 'BY',
+  },
+  {
+    name: 'Belgium',
+    dial_code: '+32',
+    emoji: '🇧🇪',
+    id: 'BE',
+  },
+  {
+    name: 'Belize',
+    dial_code: '+501',
+    emoji: '🇧🇿',
+    id: 'BZ',
+  },
+  {
+    name: 'Benin',
+    dial_code: '+229',
+    emoji: '🇧🇯',
+    id: 'BJ',
+  },
+  {
+    name: 'Bermuda',
+    dial_code: '+1441',
+    emoji: '🇧🇲',
+    id: 'BM',
+  },
+  {
+    name: 'Bhutan',
+    dial_code: '+975',
+    emoji: '🇧🇹',
+    id: 'BT',
+  },
+  {
+    name: 'Bolivia, Plurinational State of',
+    dial_code: '+591',
+    emoji: '🇧🇴',
+    id: 'BO',
+  },
+  {
+    name: 'Bosnia and Herzegovina',
+    dial_code: '+387',
+    emoji: '🇧🇦',
+    id: 'BA',
+  },
+  {
+    name: 'Botswana',
+    dial_code: '+267',
+    emoji: '🇧🇼',
+    id: 'BW',
+  },
+  {
+    name: 'Brazil',
+    dial_code: '+55',
+    emoji: '🇧🇷',
+    id: 'BR',
+  },
+  {
+    name: 'British Indian Ocean Territory',
+    dial_code: '+246',
+    emoji: '🇮🇴',
+    id: 'IO',
+  },
+  {
+    name: 'Brunei Darussalam',
+    dial_code: '+673',
+    emoji: '🇧🇳',
+    id: 'BN',
+  },
+  {
+    name: 'Bulgaria',
+    dial_code: '+359',
+    emoji: '🇧🇬',
+    id: 'BG',
+  },
+  {
+    name: 'Burkina Faso',
+    dial_code: '+226',
+    emoji: '🇧🇫',
+    id: 'BF',
+  },
+  {
+    name: 'Burundi',
+    dial_code: '+257',
+    emoji: '🇧🇮',
+    id: 'BI',
+  },
+  {
+    name: 'Cambodia',
+    dial_code: '+855',
+    emoji: '🇰🇭',
+    id: 'KH',
+  },
+  {
+    name: 'Cameroon',
+    dial_code: '+237',
+    emoji: '🇨🇲',
+    id: 'CM',
+  },
+  {
+    name: 'Canada',
+    dial_code: '+1',
+    emoji: '🇨🇦',
+    id: 'CA',
+  },
+  {
+    name: 'Cape Verde',
+    dial_code: '+238',
+    emoji: '🇨🇻',
+    id: 'CV',
+  },
+  {
+    name: 'Cayman Islands',
+    dial_code: '+345',
+    emoji: '🇰🇾',
+    id: 'KY',
+  },
+  {
+    name: 'Central African Republic',
+    dial_code: '+236',
+    emoji: '🇨🇫',
+    id: 'CF',
+  },
+  {
+    name: 'Chad',
+    dial_code: '+235',
+    emoji: '🇹🇩',
+    id: 'TD',
+  },
+  {
+    name: 'Chile',
+    dial_code: '+56',
+    emoji: '🇨🇱',
+    id: 'CL',
+  },
+  {
+    name: 'China',
+    dial_code: '+86',
+    emoji: '🇨🇳',
+    id: 'CN',
+  },
+  {
+    name: 'Christmas Island',
+    dial_code: '+61',
+    emoji: '🇨🇽',
+    id: 'CX',
+  },
+  {
+    name: 'Cocos (Keeling) Islands',
+    dial_code: '+61',
+    emoji: '🇨🇨',
+    id: 'CC',
+  },
+  {
+    name: 'Colombia',
+    dial_code: '+57',
+    emoji: '🇨🇴',
+    id: 'CO',
+  },
+  {
+    name: 'Comoros',
+    dial_code: '+269',
+    emoji: '🇰🇲',
+    id: 'KM',
+  },
+  {
+    name: 'Congo',
+    dial_code: '+242',
+    emoji: '🇨🇬',
+    id: 'CG',
+  },
+  {
+    name: 'Congo, The Democratic Republic of the Congo',
+    dial_code: '+243',
+    emoji: '🇨🇩',
+    id: 'CD',
+  },
+  {
+    name: 'Cook Islands',
+    dial_code: '+682',
+    emoji: '🇨🇰',
+    id: 'CK',
+  },
+  {
+    name: 'Costa Rica',
+    dial_code: '+506',
+    emoji: '🇨🇷',
+    id: 'CR',
+  },
+  {
+    name: "Cote d'Ivoire",
+    dial_code: '+225',
+    emoji: '🇨🇮',
+    id: 'CI',
+  },
+  {
+    name: 'Croatia',
+    dial_code: '+385',
+    emoji: '🇭🇷',
+    id: 'HR',
+  },
+  {
+    name: 'Cuba',
+    dial_code: '+53',
+    emoji: '🇨🇺',
+    id: 'CU',
+  },
+  {
+    name: 'Cyprus',
+    dial_code: '+357',
+    emoji: '🇨🇾',
+    id: 'CY',
+  },
+  {
+    name: 'Czech Republic',
+    dial_code: '+420',
+    emoji: '🇨🇿',
+    id: 'CZ',
+  },
+  {
+    name: 'Denmark',
+    dial_code: '+45',
+    emoji: '🇩🇰',
+    id: 'DK',
+  },
+  {
+    name: 'Djibouti',
+    dial_code: '+253',
+    emoji: '🇩🇯',
+    id: 'DJ',
+  },
+  {
+    name: 'Dominica',
+    dial_code: '+1767',
+    emoji: '🇩🇲',
+    id: 'DM',
+  },
+  {
+    name: 'Dominican Republic',
+    dial_code: '+1849',
+    emoji: '🇩🇴',
+    id: 'DO',
+  },
+  {
+    name: 'Ecuador',
+    dial_code: '+593',
+    emoji: '🇪🇨',
+    id: 'EC',
+  },
+  {
+    name: 'Egypt',
+    dial_code: '+20',
+    emoji: '🇪🇬',
+    id: 'EG',
+  },
+  {
+    name: 'El Salvador',
+    dial_code: '+503',
+    emoji: '🇸🇻',
+    id: 'SV',
+  },
+  {
+    name: 'Equatorial Guinea',
+    dial_code: '+240',
+    emoji: '🇬🇶',
+    id: 'GQ',
+  },
+  {
+    name: 'Eritrea',
+    dial_code: '+291',
+    emoji: '🇪🇷',
+    id: 'ER',
+  },
+  {
+    name: 'Estonia',
+    dial_code: '+372',
+    emoji: '🇪🇪',
+    id: 'EE',
+  },
+  {
+    name: 'Ethiopia',
+    dial_code: '+251',
+    emoji: '🇪🇹',
+    id: 'ET',
+  },
+  {
+    name: 'Falkland Islands (Malvinas)',
+    dial_code: '+500',
+    emoji: '🇫🇰',
+    id: 'FK',
+  },
+  {
+    name: 'Faroe Islands',
+    dial_code: '+298',
+    emoji: '🇫🇴',
+    id: 'FO',
+  },
+  {
+    name: 'Fiji',
+    dial_code: '+679',
+    emoji: '🇫🇯',
+    id: 'FJ',
+  },
+  {
+    name: 'Finland',
+    dial_code: '+358',
+    emoji: '🇫🇮',
+    id: 'FI',
+  },
+  {
+    name: 'France',
+    dial_code: '+33',
+    emoji: '🇫🇷',
+    id: 'FR',
+  },
+  {
+    name: 'French Guiana',
+    dial_code: '+594',
+    emoji: '🇬🇫',
+    id: 'GF',
+  },
+  {
+    name: 'French Polynesia',
+    dial_code: '+689',
+    emoji: '🇵🇫',
+    id: 'PF',
+  },
+  {
+    name: 'Gabon',
+    dial_code: '+241',
+    emoji: '🇬🇦',
+    id: 'GA',
+  },
+  {
+    name: 'Gambia',
+    dial_code: '+220',
+    emoji: '🇬🇲',
+    id: 'GM',
+  },
+  {
+    name: 'Georgia',
+    dial_code: '+995',
+    emoji: '🇬🇪',
+    id: 'GE',
+  },
+  {
+    name: 'Germany',
+    dial_code: '+49',
+    emoji: '🇩🇪',
+    id: 'DE',
+  },
+  {
+    name: 'Ghana',
+    dial_code: '+233',
+    emoji: '🇬🇭',
+    id: 'GH',
+  },
+  {
+    name: 'Gibraltar',
+    dial_code: '+350',
+    emoji: '🇬🇮',
+    id: 'GI',
+  },
+  {
+    name: 'Greece',
+    dial_code: '+30',
+    emoji: '🇬🇷',
+    id: 'GR',
+  },
+  {
+    name: 'Greenland',
+    dial_code: '+299',
+    emoji: '🇬🇱',
+    id: 'GL',
+  },
+  {
+    name: 'Grenada',
+    dial_code: '+1473',
+    emoji: '🇬🇩',
+    id: 'GD',
+  },
+  {
+    name: 'Guadeloupe',
+    dial_code: '+590',
+    emoji: '🇬🇵',
+    id: 'GP',
+  },
+  {
+    name: 'Guam',
+    dial_code: '+1671',
+    emoji: '🇬🇺',
+    id: 'GU',
+  },
+  {
+    name: 'Guatemala',
+    dial_code: '+502',
+    emoji: '🇬🇹',
+    id: 'GT',
+  },
+  {
+    name: 'Guernsey',
+    dial_code: '+44',
+    emoji: '🇬🇬',
+    id: 'GG',
+  },
+  {
+    name: 'Guinea',
+    dial_code: '+224',
+    emoji: '🇬🇳',
+    id: 'GN',
+  },
+  {
+    name: 'Guinea-Bissau',
+    dial_code: '+245',
+    emoji: '🇬🇼',
+    id: 'GW',
+  },
+  {
+    name: 'Guyana',
+    dial_code: '+595',
+    emoji: '🇬🇾',
+    id: 'GY',
+  },
+  {
+    name: 'Haiti',
+    dial_code: '+509',
+    emoji: '🇭🇹',
+    id: 'HT',
+  },
+  {
+    name: 'Holy See (Vatican City State)',
+    dial_code: '+379',
+    emoji: '🇻🇦',
+    id: 'VA',
+  },
+  {
+    name: 'Honduras',
+    dial_code: '+504',
+    emoji: '🇭🇳',
+    id: 'HN',
+  },
+  {
+    name: 'Hong Kong',
+    dial_code: '+852',
+    emoji: '🇭🇰',
+    id: 'HK',
+  },
+  {
+    name: 'Hungary',
+    dial_code: '+36',
+    emoji: '🇭🇺',
+    id: 'HU',
+  },
+  {
+    name: 'Iceland',
+    dial_code: '+354',
+    emoji: '🇮🇸',
+    id: 'IS',
+  },
+  {
+    name: 'India',
+    dial_code: '+91',
+    emoji: '🇮🇳',
+    id: 'IN',
+  },
+  {
+    name: 'Indonesia',
+    dial_code: '+62',
+    emoji: '🇮🇩',
+    id: 'ID',
+  },
+  {
+    name: 'Iran, Islamic Republic of Persian Gulf',
+    dial_code: '+98',
+    emoji: '🇮🇷',
+    id: 'IR',
+  },
+  {
+    name: 'Iraq',
+    dial_code: '+964',
+    emoji: '🇮🇷',
+    id: 'IQ',
+  },
+  {
+    name: 'Ireland',
+    dial_code: '+353',
+    emoji: '🇮🇪',
+    id: 'IE',
+  },
+  {
+    name: 'Isle of Man',
+    dial_code: '+44',
+    emoji: '🇮🇲',
+    id: 'IM',
+  },
+  {
+    name: 'Israel',
+    dial_code: '+972',
+    emoji: '🇮🇱',
+    id: 'IL',
+  },
+  {
+    name: 'Italy',
+    dial_code: '+39',
+    emoji: '🇮🇹',
+    id: 'IT',
+  },
+  {
+    name: 'Jamaica',
+    dial_code: '+1876',
+    emoji: '🇯🇲',
+    id: 'JM',
+  },
+  {
+    name: 'Japan',
+    dial_code: '+81',
+    emoji: '🇯🇵',
+    id: 'JP',
+  },
+  {
+    name: 'Jersey',
+    dial_code: '+44',
+    emoji: '🇯🇪',
+    id: 'JE',
+  },
+  {
+    name: 'Jordan',
+    dial_code: '+962',
+    emoji: '🇯🇴',
+    id: 'JO',
+  },
+  {
+    name: 'Kazakhstan',
+    dial_code: '+77',
+    emoji: '🇰🇿',
+    id: 'KZ',
+  },
+  {
+    name: 'Kenya',
+    dial_code: '+254',
+    emoji: '🇰🇪',
+    id: 'KE',
+  },
+  {
+    name: 'Kiribati',
+    dial_code: '+686',
+    emoji: '🇰🇮',
+    id: 'KI',
+  },
+  {
+    name: "Korea, Democratic People's Republic of Korea",
+    dial_code: '+850',
+    emoji: '🇰🇵',
+    id: 'KP',
+  },
+  {
+    name: 'Korea, Republic of South Korea',
+    dial_code: '+82',
+    emoji: '🇰🇷',
+    id: 'KR',
+  },
+  {
+    name: 'Kuwait',
+    dial_code: '+965',
+    emoji: '🇰🇼',
+    id: 'KW',
+  },
+  {
+    name: 'Kyrgyzstan',
+    dial_code: '+996',
+    emoji: '🇰🇬',
+    id: 'KG',
+  },
+  {
+    name: 'Laos',
+    dial_code: '+856',
+    emoji: '🇱🇦',
+    id: 'LA',
+  },
+  {
+    name: 'Latvia',
+    dial_code: '+371',
+    emoji: '🇱🇻',
+    id: 'LV',
+  },
+  {
+    name: 'Lebanon',
+    dial_code: '+961',
+    emoji: '🇱🇧',
+    id: 'LB',
+  },
+  {
+    name: 'Lesotho',
+    dial_code: '+266',
+    emoji: '🇱🇸',
+    id: 'LS',
+  },
+  {
+    name: 'Liberia',
+    dial_code: '+231',
+    emoji: '🇱🇷',
+    id: 'LR',
+  },
+  {
+    name: 'Libyan Arab Jamahiriya',
+    dial_code: '+218',
+    emoji: '🇱🇾',
+    id: 'LY',
+  },
+  {
+    name: 'Liechtenstein',
+    dial_code: '+423',
+    emoji: '🇱🇮',
+    id: 'LI',
+  },
+  {
+    name: 'Lithuania',
+    dial_code: '+370',
+    emoji: '🇱🇹',
+    id: 'LT',
+  },
+  {
+    name: 'Luxembourg',
+    dial_code: '+352',
+    emoji: '🇱🇺',
+    id: 'LU',
+  },
+  {
+    name: 'Macao',
+    dial_code: '+853',
+    emoji: '🇲🇴',
+    id: 'MO',
+  },
+  {
+    name: 'Macedonia',
+    dial_code: '+389',
+    emoji: '🇲🇰',
+    id: 'MK',
+  },
+  {
+    name: 'Madagascar',
+    dial_code: '+261',
+    emoji: '🇲🇬',
+    id: 'MG',
+  },
+  {
+    name: 'Malawi',
+    dial_code: '+265',
+    emoji: '🇲🇼',
+    id: 'MW',
+  },
+  {
+    name: 'Malaysia',
+    dial_code: '+60',
+    emoji: '🇲🇾',
+    id: 'MY',
+  },
+  {
+    name: 'Maldives',
+    dial_code: '+960',
+    emoji: '🇲🇻',
+    id: 'MV',
+  },
+  {
+    name: 'Mali',
+    dial_code: '+223',
+    emoji: '🇲🇱',
+    id: 'ML',
+  },
+  {
+    name: 'Malta',
+    dial_code: '+356',
+    emoji: '🇲🇹',
+    id: 'MT',
+  },
+  {
+    name: 'Marshall Islands',
+    dial_code: '+692',
+    emoji: '🇲🇭',
+    id: 'MH',
+  },
+  {
+    name: 'Martinique',
+    dial_code: '+596',
+    emoji: '🇲🇶',
+    id: 'MQ',
+  },
+  {
+    name: 'Mauritania',
+    dial_code: '+222',
+    emoji: '🇲🇷',
+    id: 'MR',
+  },
+  {
+    name: 'Mauritius',
+    dial_code: '+230',
+    emoji: '🇲🇺',
+    id: 'MU',
+  },
+  {
+    name: 'Mayotte',
+    dial_code: '+262',
+    emoji: '🇾🇹',
+    id: 'YT',
+  },
+  {
+    name: 'Mexico',
+    dial_code: '+52',
+    emoji: '🇲🇽',
+    id: 'MX',
+  },
+  {
+    name: 'Micronesia, Federated States of Micronesia',
+    dial_code: '+691',
+    emoji: '🇫🇲',
+    id: 'FM',
+  },
+  {
+    name: 'Moldova',
+    dial_code: '+373',
+    emoji: '🇲🇩',
+    id: 'MD',
+  },
+  {
+    name: 'Monaco',
+    dial_code: '+377',
+    emoji: '🇲🇨',
+    id: 'MC',
+  },
+  {
+    name: 'Mongolia',
+    dial_code: '+976',
+    emoji: '🇲🇳',
+    id: 'MN',
+  },
+  {
+    name: 'Montenegro',
+    dial_code: '+382',
+    emoji: '🇲🇪',
+    id: 'ME',
+  },
+  {
+    name: 'Montserrat',
+    dial_code: '+1664',
+    emoji: '🇲🇸',
+    id: 'MS',
+  },
+  {
+    name: 'Morocco',
+    dial_code: '+212',
+    emoji: '🇲🇦',
+    id: 'MA',
+  },
+  {
+    name: 'Mozambique',
+    dial_code: '+258',
+    emoji: '🇲🇿',
+    id: 'MZ',
+  },
+  {
+    name: 'Myanmar',
+    dial_code: '+95',
+    emoji: '🇲🇲',
+    id: 'MM',
+  },
+  {
+    name: 'Namibia',
+    emoji: '🇳🇦',
+    dial_code: '+264',
+    id: 'NA',
+  },
+  {
+    name: 'Nauru',
+    dial_code: '+674',
+    emoji: '🇳🇷',
+    id: 'NR',
+  },
+  {
+    name: 'Nepal',
+    dial_code: '+977',
+    emoji: '🇳🇵',
+    id: 'NP',
+  },
+  {
+    name: 'Netherlands',
+    dial_code: '+31',
+    emoji: '🇳🇱',
+    id: 'NL',
+  },
+  {
+    name: 'Netherlands Antilles',
+    dial_code: '+599',
+    emoji: '🇧🇶',
+    id: 'AN',
+  },
+  {
+    name: 'New Caledonia',
+    dial_code: '+687',
+    emoji: '🇳🇨',
+    id: 'NC',
+  },
+  {
+    name: 'New Zealand',
+    dial_code: '+64',
+    emoji: '🇳🇿',
+    id: 'NZ',
+  },
+  {
+    name: 'Nicaragua',
+    dial_code: '+505',
+    emoji: '🇳🇮',
+    id: 'NI',
+  },
+  {
+    name: 'Niger',
+    dial_code: '+227',
+    emoji: '🇳🇪',
+    id: 'NE',
+  },
+  {
+    name: 'Nigeria',
+    dial_code: '+234',
+    emoji: '🇳🇬',
+    id: 'NG',
+  },
+  {
+    name: 'Niue',
+    dial_code: '+683',
+    emoji: '🇳🇺',
+    id: 'NU',
+  },
+  {
+    name: 'Norfolk Island',
+    dial_code: '+672',
+    emoji: '🇳🇫',
+    id: 'NF',
+  },
+  {
+    name: 'Northern Mariana Islands',
+    dial_code: '+1670',
+    emoji: '🇲🇵',
+    id: 'MP',
+  },
+  {
+    name: 'Norway',
+    dial_code: '+47',
+    emoji: '🇳🇴',
+    id: 'NO',
+  },
+  {
+    name: 'Oman',
+    dial_code: '+968',
+    emoji: '🇴🇲',
+    id: 'OM',
+  },
+  {
+    name: 'Pakistan',
+    dial_code: '+92',
+    emoji: '🇵🇰',
+    id: 'PK',
+  },
+  {
+    name: 'Palau',
+    dial_code: '+680',
+    emoji: '🇵🇼',
+    id: 'PW',
+  },
+  {
+    name: 'Palestinian Territory, Occupied',
+    dial_code: '+970',
+    emoji: '🇵🇸',
+    id: 'PS',
+  },
+  {
+    name: 'Panama',
+    dial_code: '+507',
+    emoji: '🇵🇦',
+    id: 'PA',
+  },
+  {
+    name: 'Papua New Guinea',
+    dial_code: '+675',
+    emoji: '🇵🇬',
+    id: 'PG',
+  },
+  {
+    name: 'Paraguay',
+    dial_code: '+595',
+    emoji: '🇵🇾',
+    id: 'PY',
+  },
+  {
+    name: 'Peru',
+    dial_code: '+51',
+    emoji: '🇵🇪',
+    id: 'PE',
+  },
+  {
+    name: 'Philippines',
+    dial_code: '+63',
+    emoji: '🇵🇭',
+    id: 'PH',
+  },
+  {
+    name: 'Pitcairn',
+    dial_code: '+872',
+    emoji: '🇵🇳',
+    id: 'PN',
+  },
+  {
+    name: 'Poland',
+    dial_code: '+48',
+    emoji: '🇵🇱',
+    id: 'PL',
+  },
+  {
+    name: 'Portugal',
+    dial_code: '+351',
+    emoji: '🇵🇹',
+    id: 'PT',
+  },
+  {
+    name: 'Puerto Rico',
+    dial_code: '+1939',
+    emoji: '🇵🇷',
+    id: 'PR',
+  },
+  {
+    name: 'Qatar',
+    dial_code: '+974',
+    emoji: '🇶🇦',
+    id: 'QA',
+  },
+  {
+    name: 'Romania',
+    dial_code: '+40',
+    emoji: '🇷🇴',
+    id: 'RO',
+  },
+  {
+    name: 'Russia',
+    dial_code: '+7',
+    emoji: '🇷🇺',
+    id: 'RU',
+  },
+  {
+    name: 'Rwanda',
+    dial_code: '+250',
+    emoji: '🇷🇼',
+    id: 'RW',
+  },
+  {
+    name: 'Reunion',
+    dial_code: '+262',
+    emoji: '🇷🇪',
+    id: 'RE',
+  },
+  {
+    name: 'Saint Barthelemy',
+    dial_code: '+590',
+    emoji: '🇧🇱',
+    id: 'BL',
+  },
+  {
+    name: 'Saint Helena, Ascension and Tristan Da Cunha',
+    dial_code: '+290',
+    emoji: '🇸🇭',
+    id: 'SH',
+  },
+  {
+    name: 'Saint Kitts and Nevis',
+    dial_code: '+1869',
+    emoji: '🇰🇳',
+    id: 'KN',
+  },
+  {
+    name: 'Saint Lucia',
+    dial_code: '+1758',
+    emoji: '🇱🇨',
+    id: 'LC',
+  },
+  {
+    name: 'Saint Martin',
+    dial_code: '+590',
+    emoji: '🇲🇫',
+    id: 'MF',
+  },
+  {
+    name: 'Saint Pierre and Miquelon',
+    dial_code: '+508',
+    emoji: '🇵🇲',
+    id: 'PM',
+  },
+  {
+    name: 'Saint Vincent and the Grenadines',
+    dial_code: '+1784',
+    emoji: '🇻🇨',
+    id: 'VC',
+  },
+  {
+    name: 'Samoa',
+    dial_code: '+685',
+    emoji: '🇼🇸',
+    id: 'WS',
+  },
+  {
+    name: 'San Marino',
+    dial_code: '+378',
+    emoji: '🇸🇲',
+    id: 'SM',
+  },
+  {
+    name: 'Sao Tome and Principe',
+    dial_code: '+239',
+    emoji: '🇸🇹',
+    id: 'ST',
+  },
+  {
+    name: 'Saudi Arabia',
+    dial_code: '+966',
+    emoji: '🇸🇦',
+    id: 'SA',
+  },
+  {
+    name: 'Senegal',
+    dial_code: '+221',
+    emoji: '🇸🇳',
+    id: 'SN',
+  },
+  {
+    name: 'Serbia',
+    dial_code: '+381',
+    emoji: '🇷🇸',
+    id: 'RS',
+  },
+  {
+    name: 'Seychelles',
+    dial_code: '+248',
+    emoji: '🇸🇨',
+    id: 'SC',
+  },
+  {
+    name: 'Sierra Leone',
+    dial_code: '+232',
+    emoji: '🇸🇱',
+    id: 'SL',
+  },
+  {
+    name: 'Singapore',
+    dial_code: '+65',
+    emoji: '🇸🇬',
+    id: 'SG',
+  },
+  {
+    name: 'Slovakia',
+    dial_code: '+421',
+    emoji: '🇸🇰',
+    id: 'SK',
+  },
+  {
+    name: 'Slovenia',
+    dial_code: '+386',
+    emoji: '🇸🇮',
+    id: 'SI',
+  },
+  {
+    name: 'Solomon Islands',
+    dial_code: '+677',
+    emoji: '🇸🇧',
+    id: 'SB',
+  },
+  {
+    name: 'Somalia',
+    dial_code: '+252',
+    emoji: '🇸🇴',
+    id: 'SO',
+  },
+  {
+    name: 'South Africa',
+    dial_code: '+27',
+    emoji: '🇿🇦',
+    id: 'ZA',
+  },
+  {
+    name: 'South Sudan',
+    dial_code: '+211',
+    emoji: '🇸🇸',
+    id: 'SS',
+  },
+  {
+    name: 'South Georgia and the South Sandwich Islands',
+    dial_code: '+500',
+    emoji: '🇬🇸',
+    id: 'GS',
+  },
+  {
+    name: 'Spain',
+    dial_code: '+34',
+    emoji: '🇪🇸',
+    id: 'ES',
+  },
+  {
+    name: 'Sri Lanka',
+    dial_code: '+94',
+    emoji: '🇱🇰',
+    id: 'LK',
+  },
+  {
+    name: 'Sudan',
+    dial_code: '+249',
+    emoji: '🇸🇩',
+    id: 'SD',
+  },
+  {
+    name: 'Suriname',
+    dial_code: '+597',
+    emoji: '🇸🇷',
+    id: 'SR',
+  },
+  {
+    name: 'Svalbard and Jan Mayen',
+    dial_code: '+47',
+    emoji: '🇸🇯',
+    id: 'SJ',
+  },
+  {
+    name: 'Swaziland',
+    dial_code: '+268',
+    emoji: '🇸🇿',
+    id: 'SZ',
+  },
+  {
+    name: 'Sweden',
+    dial_code: '+46',
+    emoji: '🇸🇪',
+    id: 'SE',
+  },
+  {
+    name: 'Switzerland',
+    dial_code: '+41',
+    emoji: '🇨🇭',
+    id: 'CH',
+  },
+  {
+    name: 'Syrian Arab Republic',
+    dial_code: '+963',
+    emoji: '🇸🇾',
+    id: 'SY',
+  },
+  {
+    name: 'Taiwan',
+    dial_code: '+886',
+    emoji: '🇹🇼',
+    id: 'TW',
+  },
+  {
+    name: 'Tajikistan',
+    dial_code: '+992',
+    emoji: '🇹🇯',
+    id: 'TJ',
+  },
+  {
+    name: 'Tanzania, United Republic of Tanzania',
+    dial_code: '+255',
+    emoji: '🇹🇿',
+    id: 'TZ',
+  },
+  {
+    name: 'Thailand',
+    dial_code: '+66',
+    emoji: '🇹🇭',
+    id: 'TH',
+  },
+  {
+    name: 'Timor-Leste',
+    dial_code: '+670',
+    emoji: '🇹🇱',
+    id: 'TL',
+  },
+  {
+    name: 'Togo',
+    dial_code: '+228',
+    emoji: '🇹🇬',
+    id: 'TG',
+  },
+  {
+    name: 'Tokelau',
+    dial_code: '+690',
+    emoji: '🇹🇰',
+    id: 'TK',
+  },
+  {
+    name: 'Tonga',
+    dial_code: '+676',
+    emoji: '🇹🇴',
+    id: 'TO',
+  },
+  {
+    name: 'Trinidad and Tobago',
+    dial_code: '+1868',
+    emoji: '🇹🇹',
+    id: 'TT',
+  },
+  {
+    name: 'Tunisia',
+    dial_code: '+216',
+    emoji: '🇹🇳',
+    id: 'TN',
+  },
+  {
+    name: 'Turkey',
+    dial_code: '+90',
+    emoji: '🇹🇷',
+    id: 'TR',
+  },
+  {
+    name: 'Turkmenistan',
+    dial_code: '+993',
+    emoji: '🇹🇲',
+    id: 'TM',
+  },
+  {
+    name: 'Turks and Caicos Islands',
+    dial_code: '+1649',
+    emoji: '🇹🇨',
+    id: 'TC',
+  },
+  {
+    name: 'Tuvalu',
+    dial_code: '+688',
+    emoji: '🇹🇻',
+    id: 'TV',
+  },
+  {
+    name: 'Uganda',
+    dial_code: '+256',
+    emoji: '🇺🇬',
+    id: 'UG',
+  },
+  {
+    name: 'Ukraine',
+    dial_code: '+380',
+    emoji: '🇺🇦',
+    id: 'UA',
+  },
+  {
+    name: 'United Arab Emirates',
+    dial_code: '+971',
+    emoji: '🇦🇪',
+    id: 'AE',
+  },
+  {
+    name: 'United Kingdom',
+    dial_code: '+44',
+    emoji: '🇬🇧',
     id: 'GB',
   },
-  { name: 'United States of America', id: 'US' },
-  { name: 'Uruguay', id: 'UY' },
-  { name: 'Uzbekistan', id: 'UZ' },
-  { name: 'Vanuatu', id: 'VU' },
-  { name: 'Venezuela (Bolivarian Republic of)', id: 'VE' },
-  { name: 'Vietnam', id: 'VN' },
-  { name: 'Wallis and Futuna', id: 'WF' },
-  { name: 'Western Sahara', id: 'EH' },
-  { name: 'Yemen', id: 'YE' },
-  { name: 'Zambia', id: 'ZM' },
-  { name: 'Zimbabwe', id: 'ZW' },
+  {
+    name: 'United States',
+    dial_code: '+1',
+    emoji: '🇺🇸',
+    id: 'US',
+  },
+  {
+    name: 'Uruguay',
+    dial_code: '+598',
+    emoji: '🇺🇾',
+    id: 'UY',
+  },
+  {
+    name: 'Uzbekistan',
+    dial_code: '+998',
+    emoji: '🇺🇿',
+    id: 'UZ',
+  },
+  {
+    name: 'Vanuatu',
+    dial_code: '+678',
+    emoji: '🇻🇺',
+    id: 'VU',
+  },
+  {
+    name: 'Venezuela, Bolivarian Republic of Venezuela',
+    dial_code: '+58',
+    emoji: '🇻🇪',
+    id: 'VE',
+  },
+  {
+    name: 'Vietnam',
+    dial_code: '+84',
+    emoji: '🇻🇳',
+    id: 'VN',
+  },
+  {
+    name: 'Virgin Islands, British',
+    dial_code: '+1284',
+    emoji: '🇻🇬',
+    id: 'VG',
+  },
+  {
+    name: 'Virgin Islands, U.S.',
+    dial_code: '+1340',
+    emoji: '🇻🇮',
+    id: 'VI',
+  },
+  {
+    name: 'Wallis and Futuna',
+    dial_code: '+681',
+    emoji: '🇼🇫',
+    id: 'WF',
+  },
+  {
+    name: 'Yemen',
+    dial_code: '+967',
+    emoji: '🇾🇪',
+    id: 'YE',
+  },
+  {
+    name: 'Zambia',
+    dial_code: '+260',
+    emoji: '🇿🇲',
+    id: 'ZM',
+  },
+  {
+    name: 'Zimbabwe',
+    dial_code: '+263',
+    emoji: '🇿🇼',
+    id: 'ZW',
+  },
 ];
 
 export default countries;
diff --git a/app/javascript/shared/helpers/Validators.js b/app/javascript/shared/helpers/Validators.js
index cb3246e7e..3a53af9da 100644
--- a/app/javascript/shared/helpers/Validators.js
+++ b/app/javascript/shared/helpers/Validators.js
@@ -1,4 +1,8 @@
 export const isPhoneE164 = value => !!value.match(/^\+[1-9]\d{1,14}$/);
+export const isPhoneNumberValid = (value, dialCode) => {
+  const number = value.replace(dialCode, '');
+  return !!number.match(/^[0-9]{1,14}$/);
+};
 export const isPhoneE164OrEmpty = value => isPhoneE164(value) || value === '';
 export const shouldBeUrl = (value = '') =>
   value ? value.startsWith('http') : true;
diff --git a/package.json b/package.json
index 39afb1529..44e36b62a 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "idb": "^7.1.1",
     "ionicons": "~2.0.1",
     "js-cookie": "^2.2.1",
+    "libphonenumber-js": "^1.10.24",
     "logrocket": "^3.0.1",
     "logrocket-vuex": "^0.0.3",
     "markdown-it": "^13.0.1",
diff --git a/yarn.lock b/yarn.lock
index 795f52851..27e5a915b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10949,6 +10949,11 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+libphonenumber-js@^1.10.24:
+  version "1.10.24"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.24.tgz#a1744cf29df86d5a587562ea28dde12320eb6ab6"
+  integrity sha512-3Dk8f5AmrcWqg+oHhmm9hwSTqpWHBdSqsHmjCJGroULFubi0+x7JEIGmRZCuL3TI8Tx39xaKqfnhsDQ4ALa/Nw==
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"