komponent do wyboru tel kierunkowego

app/Http/Forms/Job/JobForm.php

@@ -290,7 +290,7 @@ public function buildForm()
                 'rules' => 'sometimes|required|email',
                 'help' => 'Adres e-mail nie będzie widoczny dla osób postronnych.'
             ])
-            ->add('phone', 'text', [
+            ->add('phone', 'tel', [
                 'rules' => 'sometimes|string',
                 'label' => 'Numer telefonu',
                 'help' => 'Wpisz swój numer telefonu, a wyślemy Ci powiadomienie o nadesłanej aplikacji.',

app/Services/FormBuilder/Fields/Tel.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace Coyote\Services\FormBuilder\Fields;
+
+class Tel extends Text
+{
+    //
+}

package.json

@@ -35,6 +35,7 @@
   "author": "adam-boduch <adam@boduch.net>",
   "license": "MIT",
   "dependencies": {
-    "chosen-js": "^1.7.0"
+    "chosen-js": "^1.7.0",
+    "intl-tel-input": "^12.1.5"
   }
 }

resources/assets/js/pages/job/submit.js

@@ -5,6 +5,7 @@ import Dialog from '../../libs/dialog';
 import Map from '../../libs/map';
 import VueThumbnail from '../../components/thumbnail.vue';
 import 'chosen-js';
+import 'intl-tel-input';
 
 /**
  * Cast data from bool to int to properly display radio buttons (0 and 1 instade of true and false).
@@ -320,4 +321,27 @@ $(() => {
     });
 
     $('i[data-toggle="tooltip"]').tooltip();
+
+    require.ensure([], require => {
+        require('intl-tel-input/build/js/utils');
+
+        $('input[type="tel"]').intlTelInput({
+            preferredCountries: ['pl'],
+            separateDialCode: true,
+            nationalMode: true,
+            initialCountry: 'auto',
+            geoIpLookup: function (callback) {
+                $.getJSON('//geo-ip.io/1.0/ip/?callback=?', {}, function (json) {
+                    callback(json.country_code.toLowerCase());
+                });
+            },
+        });
+
+        $('.submit-form').submit(function () {
+            let input = $('input[type="tel"]');
+            let number = input.intlTelInput('getNumber');
+
+            input.val(number.length > 3 ? number : null);
+        });
+    });
 });

resources/assets/sass/pages/job.scss

@@ -10,6 +10,7 @@
 @import "job/submit";
 @import "job/payment";
 @import "job/application";
+@import "../../../../node_modules/intl-tel-input/src/css/intlTelInput";
 
 .benefits,
 .features,

resources/views/forms/widgets/tel_widget.twig

@@ -0,0 +1 @@
+{{ form_input('tel', name, value, attr|merge({class: (attr.class|default('') ~  ' form-control')|trim})) }}

yarn.lock

@@ -2147,6 +2147,10 @@ interpret@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
 
+intl-tel-input@^12.1.5:
+  version "12.1.5"
+  resolved "https://registry.yarnpkg.com/intl-tel-input/-/intl-tel-input-12.1.5.tgz#36984b350d61ffbbd09e058be02c1303a54f70b3"
+
 invariant@^2.2.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"