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

@@ -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,

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>

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": {

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

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;

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",

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"