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.

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,
     };
   },

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 || '';
+};

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;