From b524ceeca14e99cbca4b8d0357fa5337f1ea99e7 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Mon, 23 Sep 2024 23:25:38 -0700
Subject: [PATCH] feat: Auto-populate the telephone code based on the browser
 timezone (#10146)

Fixes https://github.com/chatwoot/chatwoot/issues/6228


There is a country code selector for the phone input field. This is
often a point of frustration. See the response below.

> We are using the phone number field however this can be frustrating
for customers, especially mobile users, to select the +1 US country
code. Our users are typically local businesses and being able to default
to +1 country code in the phone number field or the account would
improve the interaction they have with customers.


Most people who run local businesses don't need a country selector.
However, to preserve the quality of the data we store, we need a country
code.

A balance between these two issues can be found with an auto-populating
country code field based on the browser's timezone. This is what I did
in this PR. Based on the browser timezone, we will resolve it to the
closest country code.
---
 .../components/widgets/forms/PhoneInput.vue         |  8 ++++++--
 .../shared/components/PhoneInput/helper.js          | 13 +++++++++++++
 .../widget/components/Form/PhoneInput.vue           |  9 +++++++--
 package.json                                        |  2 ++
 yarn.lock                                           | 10 ++++++++++
 5 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 app/javascript/shared/components/PhoneInput/helper.js

diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
index e08c52e1b..833984683 100644
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -1,6 +1,10 @@
 <script>
 import countries from 'shared/constants/countries.js';
 import parsePhoneNumber from 'libphonenumber-js';
+import {
+  getActiveCountryCode,
+  getActiveDialCode,
+} from 'shared/components/PhoneInput/helper';
 
 export default {
   props: {
@@ -30,8 +34,8 @@ export default {
       selectedIndex: -1,
       showDropdown: false,
       searchCountry: '',
-      activeCountryCode: '',
-      activeDialCode: '',
+      activeCountryCode: getActiveCountryCode(),
+      activeDialCode: getActiveDialCode(),
       phoneNumber: this.value,
     };
   },
diff --git a/app/javascript/shared/components/PhoneInput/helper.js b/app/javascript/shared/components/PhoneInput/helper.js
new file mode 100644
index 000000000..e80f08cee
--- /dev/null
+++ b/app/javascript/shared/components/PhoneInput/helper.js
@@ -0,0 +1,13 @@
+import { getPhoneCodeByTimezone } from 'timezone-phone-codes';
+import ct from 'countries-and-timezones';
+
+const getTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+export const getActiveDialCode = () => {
+  return getPhoneCodeByTimezone(getTimezone()) || '';
+};
+
+export const getActiveCountryCode = () => {
+  const country = ct.getCountryForTimezone(getTimezone()) || {};
+  return country.id || '';
+};
diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index 06929322b..1b7da562d 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -3,6 +3,10 @@ import countries from 'shared/constants/countries.js';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import FormulateInputMixin from '@braid/vue-formulate/src/FormulateInputMixin';
 import { useDarkMode } from 'widget/composables/useDarkMode';
+import {
+  getActiveCountryCode,
+  getActiveDialCode,
+} from 'shared/components/PhoneInput/helper';
 
 export default {
   components: {
@@ -28,8 +32,8 @@ export default {
       selectedIndex: -1,
       showDropdown: false,
       searchCountry: '',
-      activeCountryCode: '',
-      activeDialCode: '',
+      activeCountryCode: getActiveCountryCode(),
+      activeDialCode: getActiveDialCode(),
       phoneNumber: '',
     };
   },
@@ -322,6 +326,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
+
 .phone-input--wrap {
   .phone-input {
     height: 2.8rem;
diff --git a/package.json b/package.json
index c2736d227..68d831041 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "color2k": "^2.0.2",
     "company-email-validator": "^1.0.8",
     "core-js": "3.11.0",
+    "countries-and-timezones": "^3.6.0",
     "date-fns": "2.21.1",
     "date-fns-tz": "^1.3.3",
     "dompurify": "2.2.7",
@@ -74,6 +75,7 @@
     "postcss-loader": "^4.2.0",
     "semver": "7.5.3",
     "tailwindcss": "^3.3.2",
+    "timezone-phone-codes": "^0.0.2",
     "tinykeys": "^2.1.0",
     "turbolinks": "^5.2.0",
     "url-loader": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
index 56c7c42b3..dc33952ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8957,6 +8957,11 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+countries-and-timezones@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/countries-and-timezones/-/countries-and-timezones-3.6.0.tgz#80716f05ebef270842fd72010f9b33e2848e24c7"
+  integrity sha512-8/nHBCs1eKeQ1jnsZVGdqrLYxS8nPcfJn8PnmxdJXWRLZdXsGFR8gnVhRjatGDBjqmPm7H+FtYpBYTPWd0Eiqg==
+
 cp-file@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/cp-file/-/cp-file-7.0.0.tgz#b9454cfd07fe3b974ab9ea0e5f29655791a9b8cd"
@@ -19112,6 +19117,11 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+timezone-phone-codes@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/timezone-phone-codes/-/timezone-phone-codes-0.0.2.tgz#f56ad22453d891db4ce91676b4fc263ed3dd8d6f"
+  integrity sha512-KRPfuCfb7nSxBJqFrUAgRzWlEG0/4bu5D/3Hvw1hvl7BLhWIxQ5F8G/qKeT04DQSIenq/jQ1cZu0xOsHjAC3Jg==
+
 timsort@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"