From 4c56e8ba8545b7e105eb7e924b4bfcf5d3aed3ee Mon Sep 17 00:00:00 2001
From: formsdev <136701234+formsdev@users.noreply.github.com>
Date: Wed, 20 Sep 2023 15:44:08 +0530
Subject: [PATCH] Phone Input - option for simple text input (#207)

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 app/Http/Requests/AnswerFormRequest.php                |  3 +++
 app/Rules/ValidPhoneInputRule.php                      |  8 ++++++--
 resources/js/components/forms/PhoneInput.vue           |  2 +-
 resources/js/components/open/forms/OpenFormField.vue   |  5 ++++-
 .../form-logic-components/ColumnCondition.vue          |  6 +++++-
 .../open/forms/fields/components/FieldOptions.vue      | 10 ++++++++--
 6 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/app/Http/Requests/AnswerFormRequest.php b/app/Http/Requests/AnswerFormRequest.php
index d7c0244..41073bb 100644
--- a/app/Http/Requests/AnswerFormRequest.php
+++ b/app/Http/Requests/AnswerFormRequest.php
@@ -190,6 +190,9 @@ class AnswerFormRequest extends FormRequest
                 }
                 return $this->getRulesForDate($property);
             case 'phone_number':
+                if (isset($property['use_simple_text_input']) && $property['use_simple_text_input']) {
+                    return ['string'];
+                }
                 return ['string', 'min:6', new ValidPhoneInputRule];
             default:
                 return [];
diff --git a/app/Rules/ValidPhoneInputRule.php b/app/Rules/ValidPhoneInputRule.php
index 9e6c728..440ed5c 100644
--- a/app/Rules/ValidPhoneInputRule.php
+++ b/app/Rules/ValidPhoneInputRule.php
@@ -13,8 +13,12 @@ class ValidPhoneInputRule implements Rule
             return false;
         }
         
-        $phoneUtil = \libphonenumber\PhoneNumberUtil::getInstance();
-        return $phoneUtil->isValidNumber($phoneUtil->parse($value));
+        try {
+            $phoneUtil = \libphonenumber\PhoneNumberUtil::getInstance();
+            return $phoneUtil->isValidNumber($phoneUtil->parse($value));
+        } catch (\Exception $e) {
+            return false;
+        }
     }
 
     public function message()
diff --git a/resources/js/components/forms/PhoneInput.vue b/resources/js/components/forms/PhoneInput.vue
index 9809af0..68a16ce 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" :name="name" :style="inputStyle" class="flex items-center">
-      <v-select class="w-[110px]" dropdown-class="w-[400px]" input-class="rounded-r-none" :data="countries"
+      <v-select class="w-[110px]" dropdown-class="w-[350px]" input-class="rounded-r-none" :data="countries"
                 v-model="selectedCountryCode"
                 :has-error="hasValidation && form.errors.has(name)"
                 :disabled="disabled" :searchable="true" :search-keys="['name']" :option-key="'code'" :color="color"
diff --git a/resources/js/components/open/forms/OpenFormField.vue b/resources/js/components/open/forms/OpenFormField.vue
index c8f59b8..7df16e7 100644
--- a/resources/js/components/open/forms/OpenFormField.vue
+++ b/resources/js/components/open/forms/OpenFormField.vue
@@ -133,7 +133,7 @@ export default {
         checkbox: 'CheckboxInput',
         url: 'TextInput',
         email: 'TextInput',
-        phone_number: 'PhoneInput'
+        phone_number: 'TextInput'
       }
     },
     /**
@@ -159,6 +159,9 @@ export default {
       if (field.type === 'signature') {
         return 'SignatureInput'
       }
+      if (field.type === 'phone_number' && !field.use_simple_text_input) {
+        return 'PhoneInput'
+      }
       return this.fieldComponents[field.type]
     },
     isPublicFormPage() {
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 39cbdb3..5c963dd 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: 'PhoneInput'
+        phone_number: 'TextInput'
       }
     }
   },
@@ -57,6 +57,10 @@ export default {
         required: true
       }
 
+      if (this.property.type === 'phone_number' && !this.property.use_simple_text_input) {
+        componentData.component = 'PhoneInput'
+      }
+
       if (['select', 'multi_select'].includes(this.property.type)) {
         componentData.multiple = false;
         componentData.options = this.property[this.property.type].options.map(option => {
diff --git a/resources/js/components/open/forms/fields/components/FieldOptions.vue b/resources/js/components/open/forms/fields/components/FieldOptions.vue
index 994ea6d..e243cab 100644
--- a/resources/js/components/open/forms/fields/components/FieldOptions.vue
+++ b/resources/js/components/open/forms/fields/components/FieldOptions.vue
@@ -193,12 +193,18 @@
                   label="Field Name"
       />
 
-      <v-checkbox v-model="field.hide_field_name" class="mb-3"
+      <v-checkbox v-model="field.hide_field_name" class="mt-3"
                   :name="field.id+'_hide_field_name'"
       >
         Hide field name
       </v-checkbox>
 
+      <v-checkbox v-model="field.use_simple_text_input" class="mt-3"
+                  :name="field.id+'_use_simple_text_input'"
+      >
+        Use simple text input
+      </v-checkbox>
+
       <!-- Pre-fill depends on type -->
       <v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-3"
                   :name="field.id+'_prefill'"
@@ -216,7 +222,7 @@
                   :date-range="field.date_range===true"
                   label="Pre-filled value"
       />
-      <phone-input v-else-if="field.type === 'phone_number'"
+      <phone-input v-else-if="field.type === 'phone_number' && !field.use_simple_text_input"
                         name="prefill" class="mt-3"
                         :form="field" :can-only-country="true"
                         label="Pre-filled value"