From 93fff4f731da3b0cf1eabaa1b7d8439c1db68551 Mon Sep 17 00:00:00 2001
From: Sutirtha <sdas@republicfinance.com>
Date: Wed, 6 Sep 2023 22:01:49 +0530
Subject: [PATCH 1/8] #170-ENH: Created custom dropdown phone input

---
 resources/js/app.js                           |   2 +
 resources/js/components/forms/PhoneInput.vue  | 119 ++++++++++++++++++
 resources/js/components/forms/index.js        |   1 +
 .../components/open/forms/OpenFormField.vue   |   9 +-
 .../form-logic-components/ColumnCondition.vue |   2 +-
 5 files changed, 129 insertions(+), 4 deletions(-)
 create mode 100644 resources/js/components/forms/PhoneInput.vue

diff --git a/resources/js/app.js b/resources/js/app.js
index 3571def23..1eb952036 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -10,7 +10,9 @@ import '~/plugins'
 import '~/components'
 
 import '../sass/app.scss'
+import CountryFlag from 'vue-country-flag'
 
+Vue.component('country-flag', CountryFlag)
 Vue.config.productionTip = false
 
 Vue.mixin(Base)
diff --git a/resources/js/components/forms/PhoneInput.vue b/resources/js/components/forms/PhoneInput.vue
new file mode 100644
index 000000000..8825e2426
--- /dev/null
+++ b/resources/js/components/forms/PhoneInput.vue
@@ -0,0 +1,119 @@
+<template>
+  <div :class="wrapperClass" :style="inputStyle">
+    <slot name="label">
+      <label v-if="label" :for="id ? id : name"
+        :class="[theme.default.label, { 'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels }]">
+        {{ label }}
+        <span v-if="required" class="text-red-500 required-dot">*</span>
+      </label>
+    </slot>
+    <div v-if="help && helpPosition == 'above_input'" class="flex mb-1">
+      <small :class="theme.default.help" class="grow">
+        <slot name="help"><span class="field-help" v-html="help" /></slot>
+      </small>
+    </div>
+    <div v-on-clickaway="closeDropdown" class="relative">
+      <div :id="id ? id : name" :disabled="disabled" :name="name" class="flex">
+        <div class="dropdown" :style="inputStyle">
+          <div class="selected-option flex items-center justify-center space-x-2" @click="isOpen = !isOpen"
+            :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
+            :style="inputStyle">
+            <country-flag :country="selectedCountryCode.code" />
+            <span>{{ selectedCountryCode.dial_code }} </span>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform" :class="{ 'rotate-180': isOpen }"
+              fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </div>
+          <div class="options rounded-md bg-white dark:bg-notion-dark-light shadow-lg z-10" v-if="isOpen">
+            <div
+              class="option bg-white dark:bg-notion-dark-light z-10 flex items-center space-x-2 text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9  cursor-pointer group hover:text-white hover:bg-nt-blue focus:outline-none focus:text-white focus:bg-nt-blue"
+              v-for="country in countries" :key="country.code" @click="onCountryChange(country)" :style="inputStyle">
+              <span><country-flag :country="country.code" /></span>
+              <span>{{ country.name }}</span>
+              <span>{{ country.code }}</span>
+              <span>{{ country.dial_code }}</span>
+            </div>
+          </div>
+        </div>
+        <input type="number" class="phone" v-model="inputVal"
+          :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
+          :placeholder="placeholder" :style="inputStyle">
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { directive as onClickaway } from 'vue-clickaway'
+import inputMixin from '~/mixins/forms/input.js'
+import countryCodes from '../../../data/country_codes.json'
+
+export default {
+  phone: 'PhoneInput',
+  components: {},
+  directives: {
+    onClickaway: onClickaway
+  },
+  mixins: [inputMixin],
+
+  data() {
+    return {
+      selectedCountryCode: countryCodes[234],
+      countries: countryCodes,
+      isOpen: false,
+      inputVal: ''
+    }
+  },
+  watch: {
+    inputVal(newVal, oldVal) {
+      this.compVal = this.selectedCountryCode.dial_code + newVal;
+    },
+    selectedCountryCode(newVal, oldVal) {
+      this.compVal = this.compVal.replace(oldVal.dial_code, newVal.dial_code);
+    }
+  },
+  methods: {
+    onCountryChange(country) {
+      this.selectedCountryCode = country
+      this.closeDropdown()
+    },
+    closeDropdown() {
+      this.isOpen = false
+    },
+  }
+}
+</script>
+
+<style scoped>
+.dropdown {
+  position: relative;
+  width: 25%;
+}
+
+.options {
+  z-index: 10;
+  position: absolute;
+  width: 474px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.option {
+  padding: 10px;
+  cursor: pointer;
+}
+
+.selected-option {
+  padding: 10px;
+  cursor: pointer;
+}
+
+.phone {
+  flex-grow: 1;
+  margin-left: 10px;
+  padding: 10px;
+}
+
+</style>
\ No newline at end of file
diff --git a/resources/js/components/forms/index.js b/resources/js/components/forms/index.js
index 563a730c3..a81e16e50 100644
--- a/resources/js/components/forms/index.js
+++ b/resources/js/components/forms/index.js
@@ -41,3 +41,4 @@ import ToggleSwitchInput from './ToggleSwitchInput.vue'
 Vue.component('SignatureInput', () => import('./SignatureInput.vue'))
 Vue.component('RichTextAreaInput', () => import('./RichTextAreaInput.vue'))
 Vue.component('DateInput', () => import('./DateInput.vue'))
+Vue.component('PhoneInput', () => import('./PhoneInput.vue'))
diff --git a/resources/js/components/open/forms/OpenFormField.vue b/resources/js/components/open/forms/OpenFormField.vue
index c97fe1435..080fcb901 100644
--- a/resources/js/components/open/forms/OpenFormField.vue
+++ b/resources/js/components/open/forms/OpenFormField.vue
@@ -69,10 +69,13 @@
 <script>
 import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
 import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
+import PhoneInput from '../../forms/PhoneInput.vue'
 
 export default {
   name: 'OpenFormField',
-  components: { },
+  components: { 
+    PhoneInput 
+  },
   mixins: [FormPendingSubmissionKey],
   props: {
     form: {
@@ -117,7 +120,7 @@ export default {
         checkbox: 'CheckboxInput',
         url: 'TextInput',
         email: 'TextInput',
-        phone_number: 'TextInput',
+        phone_number: 'PhoneInput'
       }
     },
     /**
@@ -232,7 +235,7 @@ export default {
         placeholder: field.placeholder,
         help: field.help,
         helpPosition: (field.help_position) ? field.help_position : 'below_input',
-        uppercaseLabels: this.form.uppercase_labels,
+        uppercaseLabels: this.form.uppercase_labels  == 1 || this.form.uppercase_labels == true,
         theme: this.theme,
         maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
         showCharLimit: field.show_char_limit || false
diff --git a/resources/js/components/open/forms/components/form-logic-components/ColumnCondition.vue b/resources/js/components/open/forms/components/form-logic-components/ColumnCondition.vue
index 2942ab3fd..39cbdb34d 100644
--- a/resources/js/components/open/forms/components/form-logic-components/ColumnCondition.vue
+++ b/resources/js/components/open/forms/components/form-logic-components/ColumnCondition.vue
@@ -43,7 +43,7 @@ export default {
         checkbox: 'CheckboxInput',
         url: 'TextInput',
         email: 'TextInput',
-        phone_number: 'TextInput',
+        phone_number: 'PhoneInput'
       }
     }
   },

From 946fac4810d305303d8cc868d1de3ad30170a7a8 Mon Sep 17 00:00:00 2001
From: Sutirtha <sdas@republicfinance.com>
Date: Wed, 6 Sep 2023 22:03:53 +0530
Subject: [PATCH 2/8] #170-ENH: Added phone_number rules

---
 app/Http/Requests/AnswerFormRequest.php     | 3 ++-
 tests/Helpers/FormSubmissionDataFactory.php | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/Http/Requests/AnswerFormRequest.php b/app/Http/Requests/AnswerFormRequest.php
index 8b59b492c..196df9ce3 100644
--- a/app/Http/Requests/AnswerFormRequest.php
+++ b/app/Http/Requests/AnswerFormRequest.php
@@ -150,7 +150,6 @@ private function getPropertyRules($property): array
     {
         switch ($property['type']) {
             case 'text':
-            case 'phone_number':
             case 'signature':
                 return ['string'];
             case 'number':
@@ -189,6 +188,8 @@ private function getPropertyRules($property): array
                     return ['array', 'min:2'];
                 }
                 return $this->getRulesForDate($property);
+            case 'phone_number':
+                return ['string', 'min:10', 'starts_with:+'];
             default:
                 return [];
         }
diff --git a/tests/Helpers/FormSubmissionDataFactory.php b/tests/Helpers/FormSubmissionDataFactory.php
index 0b6fa9bca..aaecda1e2 100644
--- a/tests/Helpers/FormSubmissionDataFactory.php
+++ b/tests/Helpers/FormSubmissionDataFactory.php
@@ -44,7 +44,7 @@ public function createSubmissionData($mergeData = [])
                     $value = $this->faker->url();
                     break;
                 case 'phone_number':
-                    $value = $this->faker->phoneNumber();
+                    $value = '+1' .$this->faker->phoneNumber();
                     break;
                 case 'date':
                     $value = $this->faker->date();

From 3773426c4ac0e920f9565266fef1fb1566c9f9e4 Mon Sep 17 00:00:00 2001
From: Sutirtha <sdas@republicfinance.com>
Date: Fri, 8 Sep 2023 19:00:42 +0530
Subject: [PATCH 3/8] #170-ENH: Added phone_number rules

---
 package-lock.json                 |   18 +
 package.json                      |    1 +
 resources/data/country_codes.json | 1232 +++++++++++++++++++++++++++++
 3 files changed, 1251 insertions(+)
 create mode 100644 resources/data/country_codes.json

diff --git a/package-lock.json b/package-lock.json
index 09b2fecb5..4e959487c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "vue-clickaway": "^2.2.2",
         "vue-codemirror": "^4.0.6",
         "vue-confetti": "^2.3.0",
+        "vue-country-flag": "^2.3.2",
         "vue-i18n": "^8.25.0",
         "vue-meta": "^2.4.0",
         "vue-notion": "^0.4.0",
@@ -12462,6 +12463,17 @@
       "resolved": "https://registry.npmjs.org/vue-confetti/-/vue-confetti-2.3.0.tgz",
       "integrity": "sha512-zmPniVzBKv0ie/BEXBR6Isi08hYSd6lS18b8VduG5BzZ2tv6bO/rlwISg+IpGY2XsqAFTXFdTC28YR+UPocnAw=="
     },
+    "node_modules/vue-country-flag": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/vue-country-flag/-/vue-country-flag-2.3.2.tgz",
+      "integrity": "sha512-YhSS+GbLT9tp8tjMXxJKlqpBUd6dbhQJrttKj8ZbHtBocorIomFDMVMxraWVMs3hxaCW6SsAYaREkoYM00ORiA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.12"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -22348,6 +22360,12 @@
       "resolved": "https://registry.npmjs.org/vue-confetti/-/vue-confetti-2.3.0.tgz",
       "integrity": "sha512-zmPniVzBKv0ie/BEXBR6Isi08hYSd6lS18b8VduG5BzZ2tv6bO/rlwISg+IpGY2XsqAFTXFdTC28YR+UPocnAw=="
     },
+    "vue-country-flag": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/vue-country-flag/-/vue-country-flag-2.3.2.tgz",
+      "integrity": "sha512-YhSS+GbLT9tp8tjMXxJKlqpBUd6dbhQJrttKj8ZbHtBocorIomFDMVMxraWVMs3hxaCW6SsAYaREkoYM00ORiA==",
+      "requires": {}
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
diff --git a/package.json b/package.json
index bc19dbc48..861bd87fd 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "vue-clickaway": "^2.2.2",
     "vue-codemirror": "^4.0.6",
     "vue-confetti": "^2.3.0",
+    "vue-country-flag": "^2.3.2",
     "vue-i18n": "^8.25.0",
     "vue-meta": "^2.4.0",
     "vue-notion": "^0.4.0",
diff --git a/resources/data/country_codes.json b/resources/data/country_codes.json
new file mode 100644
index 000000000..71da66b6a
--- /dev/null
+++ b/resources/data/country_codes.json
@@ -0,0 +1,1232 @@
+[
+    {
+        "name": "Afghanistan",
+        "code": "AF",
+        "dial_code": "+93"
+    },
+    {
+        "name": "Åland Islands",
+        "code": "AX",
+        "dial_code": "+358"
+    },
+    {
+        "name": "Albania",
+        "code": "AL",
+        "dial_code": "+355"
+    },
+    {
+        "name": "Algeria",
+        "code": "DZ",
+        "dial_code": "+213"
+    },
+    {
+        "name": "American Samoa",
+        "code": "AS",
+        "dial_code": "+1684"
+    },
+    {
+        "name": "Andorra",
+        "code": "AD",
+        "dial_code": "+376"
+    },
+    {
+        "name": "Angola",
+        "code": "AO",
+        "dial_code": "+244"
+    },
+    {
+        "name": "Anguilla",
+        "code": "AI",
+        "dial_code": "+1264"
+    },
+    {
+        "name": "Antarctica",
+        "code": "AQ",
+        "dial_code": "+672"
+    },
+    {
+        "name": "Antigua and Barbuda",
+        "code": "AG",
+        "dial_code": "+1268"
+    },
+    {
+        "name": "Argentina",
+        "code": "AR",
+        "dial_code": "+54"
+    },
+    {
+        "name": "Armenia",
+        "code": "AM",
+        "dial_code": "+374"
+    },
+    {
+        "name": "Aruba",
+        "code": "AW",
+        "dial_code": "+297"
+    },
+    {
+        "name": "Australia",
+        "code": "AU",
+        "dial_code": "+61"
+    },
+    {
+        "name": "Austria",
+        "code": "AT",
+        "dial_code": "+43"
+    },
+    {
+        "name": "Azerbaijan",
+        "code": "AZ",
+        "dial_code": "+994"
+    },
+    {
+        "name": "Bahamas",
+        "code": "BS",
+        "dial_code": "+1242"
+    },
+    {
+        "name": "Bahrain",
+        "code": "BH",
+        "dial_code": "+973"
+    },
+    {
+        "name": "Bangladesh",
+        "code": "BD",
+        "dial_code": "+880"
+    },
+    {
+        "name": "Barbados",
+        "code": "BB",
+        "dial_code": "+1246"
+    },
+    {
+        "name": "Belarus",
+        "code": "BY",
+        "dial_code": "+375"
+    },
+    {
+        "name": "Belgium",
+        "code": "BE",
+        "dial_code": "+32"
+    },
+    {
+        "name": "Belize",
+        "code": "BZ",
+        "dial_code": "+501"
+    },
+    {
+        "name": "Benin",
+        "code": "BJ",
+        "dial_code": "+229"
+    },
+    {
+        "name": "Bermuda",
+        "code": "BM",
+        "dial_code": "+1441"
+    },
+    {
+        "name": "Bhutan",
+        "code": "BT",
+        "dial_code": "+975"
+    },
+    {
+        "name": "Bolivia, Plurinational State of bolivia",
+        "code": "BO",
+        "dial_code": "+591"
+    },
+    {
+        "name": "Bosnia and Herzegovina",
+        "code": "BA",
+        "dial_code": "+387"
+    },
+    {
+        "name": "Botswana",
+        "code": "BW",
+        "dial_code": "+267"
+    },
+    {
+        "name": "Bouvet Island",
+        "code": "BV",
+        "dial_code": "+47"
+    },
+    {
+        "name": "Brazil",
+        "code": "BR",
+        "dial_code": "+55"
+    },
+    {
+        "name": "British Indian Ocean Territory",
+        "code": "IO",
+        "dial_code": "+246"
+    },
+    {
+        "name": "Brunei Darussalam",
+        "code": "BN",
+        "dial_code": "+673"
+    },
+    {
+        "name": "Bulgaria",
+        "code": "BG",
+        "dial_code": "+359"
+    },
+    {
+        "name": "Burkina Faso",
+        "code": "BF",
+        "dial_code": "+226"
+    },
+    {
+        "name": "Burundi",
+        "code": "BI",
+        "dial_code": "+257"
+    },
+    {
+        "name": "Cambodia",
+        "code": "KH",
+        "dial_code": "+855"
+    },
+    {
+        "name": "Cameroon",
+        "code": "CM",
+        "dial_code": "+237"
+    },
+    {
+        "name": "Canada",
+        "code": "CA",
+        "dial_code": "+1"
+    },
+    {
+        "name": "Cape Verde",
+        "code": "CV",
+        "dial_code": "+238"
+    },
+    {
+        "name": "Cayman Islands",
+        "code": "KY",
+        "dial_code": "+345"
+    },
+    {
+        "name": "Central African Republic",
+        "code": "CF",
+        "dial_code": "+236"
+    },
+    {
+        "name": "Chad",
+        "code": "TD",
+        "dial_code": "+235"
+    },
+    {
+        "name": "Chile",
+        "code": "CL",
+        "dial_code": "+56"
+    },
+    {
+        "name": "China",
+        "code": "CN",
+        "dial_code": "+86"
+    },
+    {
+        "name": "Christmas Island",
+        "code": "CX",
+        "dial_code": "+61"
+    },
+    {
+        "name": "Cocos (Keeling) Islands",
+        "code": "CC",
+        "dial_code": "+61"
+    },
+    {
+        "name": "Colombia",
+        "code": "CO",
+        "dial_code": "+57"
+    },
+    {
+        "name": "Comoros",
+        "code": "KM",
+        "dial_code": "+269"
+    },
+    {
+        "name": "Congo",
+        "code": "CG",
+        "dial_code": "+242"
+    },
+    {
+        "name": "Congo, The Democratic Republic of the Congo",
+        "code": "CD",
+        "dial_code": "+243"
+    },
+    {
+        "name": "Cook Islands",
+        "code": "CK",
+        "dial_code": "+682"
+    },
+    {
+        "name": "Costa Rica",
+        "code": "CR",
+        "dial_code": "+506"
+    },
+    {
+        "name": "Cote d'Ivoire",
+        "code": "CI",
+        "dial_code": "+225"
+    },
+    {
+        "name": "Croatia",
+        "code": "HR",
+        "dial_code": "+385"
+    },
+    {
+        "name": "Cuba",
+        "code": "CU",
+        "dial_code": "+53"
+    },
+    {
+        "name": "Cyprus",
+        "code": "CY",
+        "dial_code": "+357"
+    },
+    {
+        "name": "Czech Republic",
+        "code": "CZ",
+        "dial_code": "+420"
+    },
+    {
+        "name": "Denmark",
+        "code": "DK",
+        "dial_code": "+45"
+    },
+    {
+        "name": "Djibouti",
+        "code": "DJ",
+        "dial_code": "+253"
+    },
+    {
+        "name": "Dominica",
+        "code": "DM",
+        "dial_code": "+1767"
+    },
+    {
+        "name": "Dominican Republic",
+        "code": "DO",
+        "dial_code": "+1849"
+    },
+    {
+        "name": "Ecuador",
+        "code": "EC",
+        "dial_code": "+593"
+    },
+    {
+        "name": "Egypt",
+        "code": "EG",
+        "dial_code": "+20"
+    },
+    {
+        "name": "El Salvador",
+        "code": "SV",
+        "dial_code": "+503"
+    },
+    {
+        "name": "Equatorial Guinea",
+        "code": "GQ",
+        "dial_code": "+240"
+    },
+    {
+        "name": "Eritrea",
+        "code": "ER",
+        "dial_code": "+291"
+    },
+    {
+        "name": "Estonia",
+        "code": "EE",
+        "dial_code": "+372"
+    },
+    {
+        "name": "Ethiopia",
+        "code": "ET",
+        "dial_code": "+251"
+    },
+    {
+        "name": "Falkland Islands (Malvinas)",
+        "code": "FK",
+        "dial_code": "+500"
+    },
+    {
+        "name": "Faroe Islands",
+        "code": "FO",
+        "dial_code": "+298"
+    },
+    {
+        "name": "Fiji",
+        "code": "FJ",
+        "dial_code": "+679"
+    },
+    {
+        "name": "Finland",
+        "code": "FI",
+        "dial_code": "+358"
+    },
+    {
+        "name": "France",
+        "code": "FR",
+        "dial_code": "+33"
+    },
+    {
+        "name": "French Guiana",
+        "code": "GF",
+        "dial_code": "+594"
+    },
+    {
+        "name": "French Polynesia",
+        "code": "PF",
+        "dial_code": "+689"
+    },
+    {
+        "name": "French Southern Territories",
+        "code": "TF",
+        "dial_code": "+262"
+    },
+    {
+        "name": "Gabon",
+        "code": "GA",
+        "dial_code": "+241"
+    },
+    {
+        "name": "Gambia",
+        "code": "GM",
+        "dial_code": "+220"
+    },
+    {
+        "name": "Georgia",
+        "code": "GE",
+        "dial_code": "+995"
+    },
+    {
+        "name": "Germany",
+        "code": "DE",
+        "dial_code": "+49"
+    },
+    {
+        "name": "Ghana",
+        "code": "GH",
+        "dial_code": "+233"
+    },
+    {
+        "name": "Gibraltar",
+        "code": "GI",
+        "dial_code": "+350"
+    },
+    {
+        "name": "Greece",
+        "code": "GR",
+        "dial_code": "+30"
+    },
+    {
+        "name": "Greenland",
+        "code": "GL",
+        "dial_code": "+299"
+    },
+    {
+        "name": "Grenada",
+        "code": "GD",
+        "dial_code": "+1473"
+    },
+    {
+        "name": "Guadeloupe",
+        "code": "GP",
+        "dial_code": "+590"
+    },
+    {
+        "name": "Guam",
+        "code": "GU",
+        "dial_code": "+1671"
+    },
+    {
+        "name": "Guatemala",
+        "code": "GT",
+        "dial_code": "+502"
+    },
+    {
+        "name": "Guernsey",
+        "code": "GG",
+        "dial_code": "+44"
+    },
+    {
+        "name": "Guinea",
+        "code": "GN",
+        "dial_code": "+224"
+    },
+    {
+        "name": "Guinea-Bissau",
+        "code": "GW",
+        "dial_code": "+245"
+    },
+    {
+        "name": "Guyana",
+        "code": "GY",
+        "dial_code": "+592"
+    },
+    {
+        "name": "Haiti",
+        "code": "HT",
+        "dial_code": "+509"
+    },
+    {
+        "name": "Heard Island and Mcdonald Islands",
+        "code": "HM",
+        "dial_code": "+672"
+    },
+    {
+        "name": "Holy See (Vatican City State)",
+        "code": "VA",
+        "dial_code": "+379"
+    },
+    {
+        "name": "Honduras",
+        "code": "HN",
+        "dial_code": "+504"
+    },
+    {
+        "name": "Hong Kong",
+        "code": "HK",
+        "dial_code": "+852"
+    },
+    {
+        "name": "Hungary",
+        "code": "HU",
+        "dial_code": "+36"
+    },
+    {
+        "name": "Iceland",
+        "code": "IS",
+        "dial_code": "+354"
+    },
+    {
+        "name": "India",
+        "code": "IN",
+        "dial_code": "+91"
+    },
+    {
+        "name": "Indonesia",
+        "code": "ID",
+        "dial_code": "+62"
+    },
+    {
+        "name": "Iran, Islamic Republic of Persian Gulf",
+        "code": "IR",
+        "dial_code": "+98"
+    },
+    {
+        "name": "Iraq",
+        "code": "IQ",
+        "dial_code": "+964"
+    },
+    {
+        "name": "Ireland",
+        "code": "IE",
+        "dial_code": "+353"
+    },
+    {
+        "name": "Isle of Man",
+        "code": "IM",
+        "dial_code": "+44"
+    },
+    {
+        "name": "Israel",
+        "code": "IL",
+        "dial_code": "+972"
+    },
+    {
+        "name": "Italy",
+        "code": "IT",
+        "dial_code": "+39"
+    },
+    {
+        "name": "Jamaica",
+        "code": "JM",
+        "dial_code": "+1876"
+    },
+    {
+        "name": "Japan",
+        "code": "JP",
+        "dial_code": "+81"
+    },
+    {
+        "name": "Jersey",
+        "code": "JE",
+        "dial_code": "+44"
+    },
+    {
+        "name": "Jordan",
+        "code": "JO",
+        "dial_code": "+962"
+    },
+    {
+        "name": "Kazakhstan",
+        "code": "KZ",
+        "dial_code": "+7"
+    },
+    {
+        "name": "Kenya",
+        "code": "KE",
+        "dial_code": "+254"
+    },
+    {
+        "name": "Kiribati",
+        "code": "KI",
+        "dial_code": "+686"
+    },
+    {
+        "name": "Korea, Democratic People's Republic of Korea",
+        "code": "KP",
+        "dial_code": "+850"
+    },
+    {
+        "name": "Korea, Republic of South Korea",
+        "code": "KR",
+        "dial_code": "+82"
+    },
+    {
+        "name": "Kosovo",
+        "code": "XK",
+        "dial_code": "+383"
+    },
+    {
+        "name": "Kuwait",
+        "code": "KW",
+        "dial_code": "+965"
+    },
+    {
+        "name": "Kyrgyzstan",
+        "code": "KG",
+        "dial_code": "+996"
+    },
+    {
+        "name": "Laos",
+        "code": "LA",
+        "dial_code": "+856"
+    },
+    {
+        "name": "Latvia",
+        "code": "LV",
+        "dial_code": "+371"
+    },
+    {
+        "name": "Lebanon",
+        "code": "LB",
+        "dial_code": "+961"
+    },
+    {
+        "name": "Lesotho",
+        "code": "LS",
+        "dial_code": "+266"
+    },
+    {
+        "name": "Liberia",
+        "code": "LR",
+        "dial_code": "+231"
+    },
+    {
+        "name": "Libyan Arab Jamahiriya",
+        "code": "LY",
+        "dial_code": "+218"
+    },
+    {
+        "name": "Liechtenstein",
+        "code": "LI",
+        "dial_code": "+423"
+    },
+    {
+        "name": "Lithuania",
+        "code": "LT",
+        "dial_code": "+370"
+    },
+    {
+        "name": "Luxembourg",
+        "code": "LU",
+        "dial_code": "+352"
+    },
+    {
+        "name": "Macao",
+        "code": "MO",
+        "dial_code": "+853"
+    },
+    {
+        "name": "Macedonia",
+        "code": "MK",
+        "dial_code": "+389"
+    },
+    {
+        "name": "Madagascar",
+        "code": "MG",
+        "dial_code": "+261"
+    },
+    {
+        "name": "Malawi",
+        "code": "MW",
+        "dial_code": "+265"
+    },
+    {
+        "name": "Malaysia",
+        "code": "MY",
+        "dial_code": "+60"
+    },
+    {
+        "name": "Maldives",
+        "code": "MV",
+        "dial_code": "+960"
+    },
+    {
+        "name": "Mali",
+        "code": "ML",
+        "dial_code": "+223"
+    },
+    {
+        "name": "Malta",
+        "code": "MT",
+        "dial_code": "+356"
+    },
+    {
+        "name": "Marshall Islands",
+        "code": "MH",
+        "dial_code": "+692"
+    },
+    {
+        "name": "Martinique",
+        "code": "MQ",
+        "dial_code": "+596"
+    },
+    {
+        "name": "Mauritania",
+        "code": "MR",
+        "dial_code": "+222"
+    },
+    {
+        "name": "Mauritius",
+        "code": "MU",
+        "dial_code": "+230"
+    },
+    {
+        "name": "Mayotte",
+        "code": "YT",
+        "dial_code": "+262"
+    },
+    {
+        "name": "Mexico",
+        "code": "MX",
+        "dial_code": "+52"
+    },
+    {
+        "name": "Micronesia, Federated States of Micronesia",
+        "code": "FM",
+        "dial_code": "+691"
+    },
+    {
+        "name": "Moldova",
+        "code": "MD",
+        "dial_code": "+373"
+    },
+    {
+        "name": "Monaco",
+        "code": "MC",
+        "dial_code": "+377"
+    },
+    {
+        "name": "Mongolia",
+        "code": "MN",
+        "dial_code": "+976"
+    },
+    {
+        "name": "Montenegro",
+        "code": "ME",
+        "dial_code": "+382"
+    },
+    {
+        "name": "Montserrat",
+        "code": "MS",
+        "dial_code": "+1664"
+    },
+    {
+        "name": "Morocco",
+        "code": "MA",
+        "dial_code": "+212"
+    },
+    {
+        "name": "Mozambique",
+        "code": "MZ",
+        "dial_code": "+258"
+    },
+    {
+        "name": "Myanmar",
+        "code": "MM",
+        "dial_code": "+95"
+    },
+    {
+        "name": "Namibia",
+        "code": "NA",
+        "dial_code": "+264"
+    },
+    {
+        "name": "Nauru",
+        "code": "NR",
+        "dial_code": "+674"
+    },
+    {
+        "name": "Nepal",
+        "code": "NP",
+        "dial_code": "+977"
+    },
+    {
+        "name": "Netherlands",
+        "code": "NL",
+        "dial_code": "+31"
+    },
+    {
+        "name": "Netherlands Antilles",
+        "code": "AN",
+        "dial_code": "+599"
+    },
+    {
+        "name": "New Caledonia",
+        "code": "NC",
+        "dial_code": "+687"
+    },
+    {
+        "name": "New Zealand",
+        "code": "NZ",
+        "dial_code": "+64"
+    },
+    {
+        "name": "Nicaragua",
+        "code": "NI",
+        "dial_code": "+505"
+    },
+    {
+        "name": "Niger",
+        "code": "NE",
+        "dial_code": "+227"
+    },
+    {
+        "name": "Nigeria",
+        "code": "NG",
+        "dial_code": "+234"
+    },
+    {
+        "name": "Niue",
+        "code": "NU",
+        "dial_code": "+683"
+    },
+    {
+        "name": "Norfolk Island",
+        "code": "NF",
+        "dial_code": "+672"
+    },
+    {
+        "name": "Northern Mariana Islands",
+        "code": "MP",
+        "dial_code": "+1670"
+    },
+    {
+        "name": "Norway",
+        "code": "NO",
+        "dial_code": "+47"
+    },
+    {
+        "name": "Oman",
+        "code": "OM",
+        "dial_code": "+968"
+    },
+    {
+        "name": "Pakistan",
+        "code": "PK",
+        "dial_code": "+92"
+    },
+    {
+        "name": "Palau",
+        "code": "PW",
+        "dial_code": "+680"
+    },
+    {
+        "name": "Palestinian Territory, Occupied",
+        "code": "PS",
+        "dial_code": "+970"
+    },
+    {
+        "name": "Panama",
+        "code": "PA",
+        "dial_code": "+507"
+    },
+    {
+        "name": "Papua New Guinea",
+        "code": "PG",
+        "dial_code": "+675"
+    },
+    {
+        "name": "Paraguay",
+        "code": "PY",
+        "dial_code": "+595"
+    },
+    {
+        "name": "Peru",
+        "code": "PE",
+        "dial_code": "+51"
+    },
+    {
+        "name": "Philippines",
+        "code": "PH",
+        "dial_code": "+63"
+    },
+    {
+        "name": "Pitcairn",
+        "code": "PN",
+        "dial_code": "+64"
+    },
+    {
+        "name": "Poland",
+        "code": "PL",
+        "dial_code": "+48"
+    },
+    {
+        "name": "Portugal",
+        "code": "PT",
+        "dial_code": "+351"
+    },
+    {
+        "name": "Puerto Rico",
+        "code": "PR",
+        "dial_code": "+1939"
+    },
+    {
+        "name": "Qatar",
+        "code": "QA",
+        "dial_code": "+974"
+    },
+    {
+        "name": "Romania",
+        "code": "RO",
+        "dial_code": "+40"
+    },
+    {
+        "name": "Russia",
+        "code": "RU",
+        "dial_code": "+7"
+    },
+    {
+        "name": "Rwanda",
+        "code": "RW",
+        "dial_code": "+250"
+    },
+    {
+        "name": "Reunion",
+        "code": "RE",
+        "dial_code": "+262"
+    },
+    {
+        "name": "Saint Barthelemy",
+        "code": "BL",
+        "dial_code": "+590"
+    },
+    {
+        "name": "Saint Helena, Ascension and Tristan Da Cunha",
+        "code": "SH",
+        "dial_code": "+290"
+    },
+    {
+        "name": "Saint Kitts and Nevis",
+        "code": "KN",
+        "dial_code": "+1869"
+    },
+    {
+        "name": "Saint Lucia",
+        "code": "LC",
+        "dial_code": "+1758"
+    },
+    {
+        "name": "Saint Martin",
+        "code": "MF",
+        "dial_code": "+590"
+    },
+    {
+        "name": "Saint Pierre and Miquelon",
+        "code": "PM",
+        "dial_code": "+508"
+    },
+    {
+        "name": "Saint Vincent and the Grenadines",
+        "code": "VC",
+        "dial_code": "+1784"
+    },
+    {
+        "name": "Samoa",
+        "code": "WS",
+        "dial_code": "+685"
+    },
+    {
+        "name": "San Marino",
+        "code": "SM",
+        "dial_code": "+378"
+    },
+    {
+        "name": "Sao Tome and Principe",
+        "code": "ST",
+        "dial_code": "+239"
+    },
+    {
+        "name": "Saudi Arabia",
+        "code": "SA",
+        "dial_code": "+966"
+    },
+    {
+        "name": "Senegal",
+        "code": "SN",
+        "dial_code": "+221"
+    },
+    {
+        "name": "Serbia",
+        "code": "RS",
+        "dial_code": "+381"
+    },
+    {
+        "name": "Seychelles",
+        "code": "SC",
+        "dial_code": "+248"
+    },
+    {
+        "name": "Sierra Leone",
+        "code": "SL",
+        "dial_code": "+232"
+    },
+    {
+        "name": "Singapore",
+        "code": "SG",
+        "dial_code": "+65"
+    },
+    {
+        "name": "Slovakia",
+        "code": "SK",
+        "dial_code": "+421"
+    },
+    {
+        "name": "Slovenia",
+        "code": "SI",
+        "dial_code": "+386"
+    },
+    {
+        "name": "Solomon Islands",
+        "code": "SB",
+        "dial_code": "+677"
+    },
+    {
+        "name": "Somalia",
+        "code": "SO",
+        "dial_code": "+252"
+    },
+    {
+        "name": "South Africa",
+        "code": "ZA",
+        "dial_code": "+27"
+    },
+    {
+        "name": "South Sudan",
+        "code": "SS",
+        "dial_code": "+211"
+    },
+    {
+        "name": "South Georgia and the South Sandwich Islands",
+        "code": "GS",
+        "dial_code": "+500"
+    },
+    {
+        "name": "Spain",
+        "code": "ES",
+        "dial_code": "+34"
+    },
+    {
+        "name": "Sri Lanka",
+        "code": "LK",
+        "dial_code": "+94"
+    },
+    {
+        "name": "Sudan",
+        "code": "SD",
+        "dial_code": "+249"
+    },
+    {
+        "name": "Suriname",
+        "code": "SR",
+        "dial_code": "+597"
+    },
+    {
+        "name": "Svalbard and Jan Mayen",
+        "code": "SJ",
+        "dial_code": "+47"
+    },
+    {
+        "name": "Eswatini",
+        "code": "SZ",
+        "dial_code": "+268"
+    },
+    {
+        "name": "Sweden",
+        "code": "SE",
+        "dial_code": "+46"
+    },
+    {
+        "name": "Switzerland",
+        "code": "CH",
+        "dial_code": "+41"
+    },
+    {
+        "name": "Syrian Arab Republic",
+        "code": "SY",
+        "dial_code": "+963"
+    },
+    {
+        "name": "Taiwan",
+        "code": "TW",
+        "dial_code": "+886"
+    },
+    {
+        "name": "Tajikistan",
+        "code": "TJ",
+        "dial_code": "+992"
+    },
+    {
+        "name": "Tanzania, United Republic of Tanzania",
+        "code": "TZ",
+        "dial_code": "+255"
+    },
+    {
+        "name": "Thailand",
+        "code": "TH",
+        "dial_code": "+66"
+    },
+    {
+        "name": "Timor-Leste",
+        "code": "TL",
+        "dial_code": "+670"
+    },
+    {
+        "name": "Togo",
+        "code": "TG",
+        "dial_code": "+228"
+    },
+    {
+        "name": "Tokelau",
+        "code": "TK",
+        "dial_code": "+690"
+    },
+    {
+        "name": "Tonga",
+        "code": "TO",
+        "dial_code": "+676"
+    },
+    {
+        "name": "Trinidad and Tobago",
+        "code": "TT",
+        "dial_code": "+1868"
+    },
+    {
+        "name": "Tunisia",
+        "code": "TN",
+        "dial_code": "+216"
+    },
+    {
+        "name": "Turkey",
+        "code": "TR",
+        "dial_code": "+90"
+    },
+    {
+        "name": "Turkmenistan",
+        "code": "TM",
+        "dial_code": "+993"
+    },
+    {
+        "name": "Turks and Caicos Islands",
+        "code": "TC",
+        "dial_code": "+1649"
+    },
+    {
+        "name": "Tuvalu",
+        "code": "TV",
+        "dial_code": "+688"
+    },
+    {
+        "name": "Uganda",
+        "code": "UG",
+        "dial_code": "+256"
+    },
+    {
+        "name": "Ukraine",
+        "code": "UA",
+        "dial_code": "+380"
+    },
+    {
+        "name": "United Arab Emirates",
+        "code": "AE",
+        "dial_code": "+971"
+    },
+    {
+        "name": "United Kingdom",
+        "code": "GB",
+        "dial_code": "+44"
+    },
+    {
+        "name": "United States",
+        "code": "US",
+        "dial_code": "+1"
+    },
+    {
+        "name": "Uruguay",
+        "code": "UY",
+        "dial_code": "+598"
+    },
+    {
+        "name": "Uzbekistan",
+        "code": "UZ",
+        "dial_code": "+998"
+    },
+    {
+        "name": "Vanuatu",
+        "code": "VU",
+        "dial_code": "+678"
+    },
+    {
+        "name": "Venezuela, Bolivarian Republic of Venezuela",
+        "code": "VE",
+        "dial_code": "+58"
+    },
+    {
+        "name": "Vietnam",
+        "code": "VN",
+        "dial_code": "+84"
+    },
+    {
+        "name": "Virgin Islands, British",
+        "code": "VG",
+        "dial_code": "+1284"
+    },
+    {
+        "name": "Virgin Islands, U.S.",
+        "code": "VI",
+        "dial_code": "+1340"
+    },
+    {
+        "name": "Wallis and Futuna",
+        "code": "WF",
+        "dial_code": "+681"
+    },
+    {
+        "name": "Yemen",
+        "code": "YE",
+        "dial_code": "+967"
+    },
+    {
+        "name": "Zambia",
+        "code": "ZM",
+        "dial_code": "+260"
+    },
+    {
+        "name": "Zimbabwe",
+        "code": "ZW",
+        "dial_code": "+263"
+    }
+]
\ No newline at end of file

From 0545412515a954616da345c080e299fe1c8b12bd Mon Sep 17 00:00:00 2001
From: Sutirtha <sdas@republicfinance.com>
Date: Fri, 8 Sep 2023 20:36:38 +0530
Subject: [PATCH 4/8] #170-ENH: Added separate Rule for phone number input,
 starting 0 phone number is ignored, added regex to ignore non digit phone
 input

---
 app/Http/Requests/AnswerFormRequest.php      |  3 +-
 app/Rules/ValidPhoneInputRule.php            | 29 ++++++++++++++++++++
 resources/js/components/forms/PhoneInput.vue | 22 +++++++++++----
 tests/Helpers/FormSubmissionDataFactory.php  |  2 +-
 4 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 app/Rules/ValidPhoneInputRule.php

diff --git a/app/Http/Requests/AnswerFormRequest.php b/app/Http/Requests/AnswerFormRequest.php
index 196df9ce3..59617da96 100644
--- a/app/Http/Requests/AnswerFormRequest.php
+++ b/app/Http/Requests/AnswerFormRequest.php
@@ -11,6 +11,7 @@
 use Illuminate\Validation\Rule;
 use Illuminate\Http\Request;
 use App\Rules\ValidHCaptcha;
+use App\Rules\ValidPhoneInputRule;
 
 class AnswerFormRequest extends FormRequest
 {
@@ -189,7 +190,7 @@ private function getPropertyRules($property): array
                 }
                 return $this->getRulesForDate($property);
             case 'phone_number':
-                return ['string', 'min:10', 'starts_with:+'];
+                return [new ValidPhoneInputRule];
             default:
                 return [];
         }
diff --git a/app/Rules/ValidPhoneInputRule.php b/app/Rules/ValidPhoneInputRule.php
new file mode 100644
index 000000000..d0e5026f8
--- /dev/null
+++ b/app/Rules/ValidPhoneInputRule.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Rules;
+
+use Illuminate\Contracts\Validation\Rule;
+use Illuminate\Support\Str;
+
+class ValidPhoneInputRule implements Rule
+{
+    public function passes($attribute, $value)
+    {
+        if (!is_string($value)) {
+            return false;
+        }
+        if (!Str::startsWith($value, '+')) {
+            return false;
+        }
+        $parts = explode(' ', $value);
+        if (count($parts) < 2) {
+            return false;
+        }
+        return strlen($parts[1]) >= 10;
+    }
+
+    public function message()
+    {
+        return 'The :attribute must be a string that starts with a "+" character and must be at least 10 digits long.';
+    }
+}
\ No newline at end of file
diff --git a/resources/js/components/forms/PhoneInput.vue b/resources/js/components/forms/PhoneInput.vue
index 8825e2426..a6810ebbe 100644
--- a/resources/js/components/forms/PhoneInput.vue
+++ b/resources/js/components/forms/PhoneInput.vue
@@ -36,9 +36,9 @@
             </div>
           </div>
         </div>
-        <input type="number" class="phone" v-model="inputVal"
+        <input type="text" class="phone" v-model="inputVal"
           :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
-          :placeholder="placeholder" :style="inputStyle">
+          :placeholder="placeholder" :style="inputStyle" @input="onInput">
       </div>
 
     </div>
@@ -49,10 +49,14 @@
 import { directive as onClickaway } from 'vue-clickaway'
 import inputMixin from '~/mixins/forms/input.js'
 import countryCodes from '../../../data/country_codes.json'
+import CountryFlag from 'vue-country-flag'
+
 
 export default {
   phone: 'PhoneInput',
-  components: {},
+  components: {
+    CountryFlag
+  },
   directives: {
     onClickaway: onClickaway
   },
@@ -68,10 +72,13 @@ export default {
   },
   watch: {
     inputVal(newVal, oldVal) {
-      this.compVal = this.selectedCountryCode.dial_code + newVal;
+      if (newVal.startsWith('0')) {
+        newVal = newVal.replace(/^0+/, '')
+      }
+      this.compVal = this.selectedCountryCode.dial_code + ' ' + newVal
     },
     selectedCountryCode(newVal, oldVal) {
-      this.compVal = this.compVal.replace(oldVal.dial_code, newVal.dial_code);
+      this.compVal = this.compVal.replace(oldVal.dial_code, newVal.dial_code)
     }
   },
   methods: {
@@ -82,6 +89,11 @@ export default {
     closeDropdown() {
       this.isOpen = false
     },
+    onInput(event) {
+      const input = event.target.value
+      const digitsOnly = input.replace(/[^0-9]/g, '')
+      this.inputVal = digitsOnly
+    },
   }
 }
 </script>
diff --git a/tests/Helpers/FormSubmissionDataFactory.php b/tests/Helpers/FormSubmissionDataFactory.php
index aaecda1e2..4ee062bb1 100644
--- a/tests/Helpers/FormSubmissionDataFactory.php
+++ b/tests/Helpers/FormSubmissionDataFactory.php
@@ -44,7 +44,7 @@ public function createSubmissionData($mergeData = [])
                     $value = $this->faker->url();
                     break;
                 case 'phone_number':
-                    $value = '+1' .$this->faker->phoneNumber();
+                    $value = '+1 ' .$this->faker->phoneNumber();
                     break;
                 case 'date':
                     $value = $this->faker->date();

From 9e0777430a6d5ceaa22f565ec3dc54a62bce3a59 Mon Sep 17 00:00:00 2001
From: Sutirtha <sdas@republicfinance.com>
Date: Fri, 8 Sep 2023 20:42:29 +0530
Subject: [PATCH 5/8] #170-ENH: Removed global registration of CountryFlag

---
 resources/js/app.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index 1eb952036..3571def23 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -10,9 +10,7 @@ import '~/plugins'
 import '~/components'
 
 import '../sass/app.scss'
-import CountryFlag from 'vue-country-flag'
 
-Vue.component('country-flag', CountryFlag)
 Vue.config.productionTip = false
 
 Vue.mixin(Base)

From 8ef193b6bb0044a4716677d55c868fbbeb6fa5f0 Mon Sep 17 00:00:00 2001
From: Sutirtha <sdas@republicfinance.com>
Date: Sun, 10 Sep 2023 16:59:59 +0530
Subject: [PATCH 6/8] #170-ENH: Using VSelect component for country selection,
 added prop for dropdown styling

---
 resources/js/components/forms/PhoneInput.vue  | 92 +++++++------------
 .../components/forms/components/VSelect.vue   |  4 +-
 2 files changed, 34 insertions(+), 62 deletions(-)

diff --git a/resources/js/components/forms/PhoneInput.vue b/resources/js/components/forms/PhoneInput.vue
index a6810ebbe..ddbd6327b 100644
--- a/resources/js/components/forms/PhoneInput.vue
+++ b/resources/js/components/forms/PhoneInput.vue
@@ -12,35 +12,33 @@
         <slot name="help"><span class="field-help" v-html="help" /></slot>
       </small>
     </div>
-    <div v-on-clickaway="closeDropdown" class="relative">
-      <div :id="id ? id : name" :disabled="disabled" :name="name" class="flex">
-        <div class="dropdown" :style="inputStyle">
-          <div class="selected-option flex items-center justify-center space-x-2" @click="isOpen = !isOpen"
-            :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
-            :style="inputStyle">
-            <country-flag :country="selectedCountryCode.code" />
-            <span>{{ selectedCountryCode.dial_code }} </span>
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform" :class="{ 'rotate-180': isOpen }"
-              fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
+    <div :id="id ? id : name" :disabled="disabled" :name="name" :style="inputStyle" class="flex items-center">
+      <v-select class="w-1/4" :data="countries" :value="selectedCountryCode" :inner-style="{ width: '474px' }"
+        :searchable="true" :search-keys="['name']" :option-key="'code'" :color="'#3B82F6'"
+        :placeholder="'Select a country'" :uppercase-labels="true" :theme="theme" @input="onCountryChange">
+        <template #option="props">
+          <div class="flex items-center space-x-2">
+            <country-flag :country="props.option.code" />
+            <span>{{ props.option.name }}</span>
+            <span>{{ props.option.code }}</span>
+            <span>{{ props.option.dial_code }}</span>
           </div>
-          <div class="options rounded-md bg-white dark:bg-notion-dark-light shadow-lg z-10" v-if="isOpen">
-            <div
-              class="option bg-white dark:bg-notion-dark-light z-10 flex items-center space-x-2 text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9  cursor-pointer group hover:text-white hover:bg-nt-blue focus:outline-none focus:text-white focus:bg-nt-blue"
-              v-for="country in countries" :key="country.code" @click="onCountryChange(country)" :style="inputStyle">
-              <span><country-flag :country="country.code" /></span>
-              <span>{{ country.name }}</span>
-              <span>{{ country.code }}</span>
-              <span>{{ country.dial_code }}</span>
-            </div>
+        </template>
+        <template #selected="props">
+          <div class="flex items-center space-x-2 justify-start">
+            <country-flag :country="props.option.code" :style="{
+              'margin-top': '-0.7em',
+              'margin-left': '-0.9em',
+              'margin-right': '-0.6em',
+              'margin-bottom': '-0.7em'
+            }" />
+            <span>{{ props.option.dial_code }}</span>
           </div>
-        </div>
-        <input type="text" class="phone" v-model="inputVal"
-          :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
-          :placeholder="placeholder" :style="inputStyle" @input="onInput">
-      </div>
-
+        </template>
+      </v-select>
+      <input v-model="inputVal" type="text" class="inline-flex-grow ml-5"
+        :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
+        :placeholder="placeholder" :style="inputStyle" @input="onInput">
     </div>
   </div>
 </template>
@@ -50,12 +48,12 @@ import { directive as onClickaway } from 'vue-clickaway'
 import inputMixin from '~/mixins/forms/input.js'
 import countryCodes from '../../../data/country_codes.json'
 import CountryFlag from 'vue-country-flag'
-
+import VSelect from './components/VSelect.vue'
 
 export default {
   phone: 'PhoneInput',
   components: {
-    CountryFlag
+    CountryFlag, VSelect
   },
   directives: {
     onClickaway: onClickaway
@@ -78,7 +76,9 @@ export default {
       this.compVal = this.selectedCountryCode.dial_code + ' ' + newVal
     },
     selectedCountryCode(newVal, oldVal) {
-      this.compVal = this.compVal.replace(oldVal.dial_code, newVal.dial_code)
+      if (this.compVal) {
+        this.compVal = this.compVal.replace(oldVal.dial_code, newVal.dial_code)
+      }
     }
   },
   methods: {
@@ -98,34 +98,4 @@ export default {
 }
 </script>
 
-<style scoped>
-.dropdown {
-  position: relative;
-  width: 25%;
-}
-
-.options {
-  z-index: 10;
-  position: absolute;
-  width: 474px;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.option {
-  padding: 10px;
-  cursor: pointer;
-}
-
-.selected-option {
-  padding: 10px;
-  cursor: pointer;
-}
-
-.phone {
-  flex-grow: 1;
-  margin-left: 10px;
-  padding: 10px;
-}
-
-</style>
\ No newline at end of file
+<style scoped></style>
\ No newline at end of file
diff --git a/resources/js/components/forms/components/VSelect.vue b/resources/js/components/forms/components/VSelect.vue
index 6c68cc823..dbb8b8cb9 100644
--- a/resources/js/components/forms/components/VSelect.vue
+++ b/resources/js/components/forms/components/VSelect.vue
@@ -41,8 +41,9 @@
           </span>
         </button></span>
       <!-- Select popover, show/hide based on select state. -->
-      <div v-show="isOpen" :dusk="dusk+'_dropdown'"
+      <div v-show="isOpen" :dusk="dusk+'_dropdown' "
            class="absolute mt-1 w-full rounded-md bg-white dark:bg-notion-dark-light shadow-lg z-10"
+           :style="innerStyle"
       >
         <ul tabindex="-1" role="listbox" aria-labelled by="listbox-label" aria-activedescendant="listbox-item-3"
             class="rounded-md text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5 relative"
@@ -99,6 +100,7 @@ export default {
   props: {
     data: Array,
     value: { default: null },
+    innerStyle: { type: Object, default: null },
     label: { type: String, default: null },
     dusk: { type: String, default: null },
     loading: { type: Boolean, default: false },

From 06b15ba1e49f875594975fe94187d6906d7044c8 Mon Sep 17 00:00:00 2001
From: Sutirtha <sdas@republicfinance.com>
Date: Sun, 10 Sep 2023 17:00:11 +0530
Subject: [PATCH 7/8] #170-ENH: Updated phone number rule

---
 app/Rules/ValidPhoneInputRule.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/Rules/ValidPhoneInputRule.php b/app/Rules/ValidPhoneInputRule.php
index d0e5026f8..612bd9cf0 100644
--- a/app/Rules/ValidPhoneInputRule.php
+++ b/app/Rules/ValidPhoneInputRule.php
@@ -19,11 +19,11 @@ public function passes($attribute, $value)
         if (count($parts) < 2) {
             return false;
         }
-        return strlen($parts[1]) >= 10;
+        return strlen($parts[1]) >= 5;
     }
 
     public function message()
     {
-        return 'The :attribute must be a string that starts with a "+" character and must be at least 10 digits long.';
+        return 'The :attribute must be a string that starts with a "+" character and must be at least 5 digits long.';
     }
 }
\ No newline at end of file

From e7ded97cf6795af1b853731f6ad4ff0f799a4477 Mon Sep 17 00:00:00 2001
From: Sutirtha <sdas@republicfinance.com>
Date: Sun, 10 Sep 2023 17:11:10 +0530
Subject: [PATCH 8/8] #170-ENH: Added margins to country selector

---
 resources/js/components/forms/PhoneInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/forms/PhoneInput.vue b/resources/js/components/forms/PhoneInput.vue
index ddbd6327b..5d6fbfc7d 100644
--- a/resources/js/components/forms/PhoneInput.vue
+++ b/resources/js/components/forms/PhoneInput.vue
@@ -13,7 +13,7 @@
       </small>
     </div>
     <div :id="id ? id : name" :disabled="disabled" :name="name" :style="inputStyle" class="flex items-center">
-      <v-select class="w-1/4" :data="countries" :value="selectedCountryCode" :inner-style="{ width: '474px' }"
+      <v-select class="w-1/4 mt-1" :data="countries" :value="selectedCountryCode" :inner-style="{ width: '474px' }"
         :searchable="true" :search-keys="['name']" :option-key="'code'" :color="'#3B82F6'"
         :placeholder="'Select a country'" :uppercase-labels="true" :theme="theme" @input="onCountryChange">
         <template #option="props">