Phone Input - option for simple text input (#207)

Co-authored-by: Julien Nahum <julien@nahum.net>

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 [];

app/Rules/ValidPhoneInputRule.php

@@ -13,8 +13,12 @@ class ValidPhoneInputRule implements Rule
             return false;
         }
         
-        $phoneUtil = \libphonenumber\PhoneNumberUtil::getInstance();
+        try {
-        return $phoneUtil->isValidNumber($phoneUtil->parse($value));
+            $phoneUtil = \libphonenumber\PhoneNumberUtil::getInstance();
+            return $phoneUtil->isValidNumber($phoneUtil->parse($value));
+        } catch (\Exception $e) {
+            return false;
+        }
     }
 
     public function message()

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"

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() {

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 => {

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"