@lancom/shared 0.0.373 → 0.0.375

package/assets/js/utils/custom-validation-rules.js

@@ -1,6 +1,13 @@
+
+const phoneValidators = {
+  '+61': /^[0-9]{9,10}$/
+}
+
 export const phone = {
-  validate: value => {
-    return /^[0-9-()\s+]+$/.test(`${value}`); // todo add validation for phone number
+  validate: (value, params) => {
+    const [code] = params || [];
+    const exp = phoneValidators[code] || /^[0-9-()\s+]+$/;
+    return exp.test(`${value || ''}`);
   },
   message: 'Phone number is not valid'
 };

package/components/asides/contact_us/contact-us.vue

@@ -66,35 +66,10 @@
           {{ errors[0] }}
         </span>
       </validation-provider>
-      <validation-provider
-        v-slot="{ errors }"
-        tag="div"
-        name="Phone"
-        :rules="phoneRules"
-        class="form-row">
-        <input
-          id="phone"
-          ref="phone"
-          v-model="form.phone"
-          name="phone"
-          type="phone"
-          class="form-field"
-          :class="{
-            'is-danger': errors.length,
-            filled: form.phone
-          }"
-          @keyup.enter="$refs.phone.focus()" />
-        <label
-          for="phone"
-          class="form-label label-inner">
-          Phone number
-        </label>
-        <span
-          v-if="errors.length"
-          class="form-help is-danger">
-          {{ errors[0] }}
-        </span>
-      </validation-provider>
+      <phone-input
+        :labelless="false"
+        :required="requiredPhone"
+        v-model="form.phone" />
       <validation-provider
         v-slot="{ errors }"
         tag="div"
@@ -170,11 +145,13 @@ import { mapGetters } from 'vuex';
 import api from '@lancom/shared/assets/js/api';
 import gtm from '@lancom/shared/assets/js/utils/gtm';
 import EmailLink from '@lancom/shared/components/email_link/email-link';
+import PhoneInput from '@lancom/shared/components/common/phone_input/phone-input';
 
 export default {
   name: 'LancomContactUs',
   components: {
-    EmailLink
+    EmailLink,
+    PhoneInput
   },
   props: {
     btnClass: {
@@ -193,10 +170,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['contacts', 'shop', 'googleClickId']),
-    phoneRules() {
-      return this.requiredPhone ? 'required|phone' : 'phone';
-    }
+    ...mapGetters(['contacts', 'shop', 'googleClickId'])
   },
   // mounted() {
   //   this.preloadReCaptcha();

package/components/asides/offer_screen_printing/offer-screen-printing.vue

@@ -66,35 +66,9 @@
           {{ errors[0] }}
         </span>
       </validation-provider>
-      <validation-provider
-        v-slot="{ errors }"
-        tag="div"
-        name="Phone"
-        rules="required|phone"
-        class="form-row">
-        <input
-          id="phone"
-          ref="phone"
-          v-model="form.phone"
-          name="phone"
-          type="phone"
-          class="form-field"
-          :class="{
-            'is-danger': errors.length,
-            filled: form.phone
-          }"
-          @keyup.enter="$refs.phone.focus()" />
-        <label
-          for="phone"
-          class="form-label label-inner">
-          Phone number
-        </label>
-        <span
-          v-if="errors.length"
-          class="form-help is-danger">
-          {{ errors[0] }}
-        </span>
-      </validation-provider>
+      <phone-input
+        :labelless="false"
+        v-model="form.phone" />
       <validation-provider
         v-slot="{ errors }"
         tag="div"
@@ -142,12 +116,16 @@ import api from '@lancom/shared/assets/js/api';
 import { side } from '@lancom/shared/assets/js/utils/filters';
 import { generateCartProducts } from '@lancom/shared/assets/js/utils/product';
 import { populateProductsFields } from '@lancom/shared/assets/js/utils/order';
+import PhoneInput from '@lancom/shared/components/common/phone_input/phone-input';
 
 export default {
   name: 'OfferScreenPrinting',
   filters: {
     side
   },
+  components: {
+    PhoneInput
+  },
   data() {
     return {
       form: {},

package/components/checkout/order/address-form/address-form.vue

@@ -93,36 +93,7 @@
             {{ errors[0] }}
           </span>
         </validation-provider>
-        <validation-provider
-          v-slot="{ errors }"
-          tag="div"
-          :name="namePrefix + 'Phone'"
-          rules="required|phone"
-          class="form-col col-half">
-          <label
-            :for="'phone'+uniqueKey"
-            class="form-label">
-            Phone number
-          </label>
-          <input
-            :id="'phone'+uniqueKey"
-            ref="phone"
-            v-model="address.phone"
-            placeholder="Phone"
-            :name="'phone'+uniqueKey"
-            type="text"
-            class="form-field labelless"
-            :class="{
-              'is-danger': errors.length,
-              filled: address.phone
-            }"
-            @keyup.enter="$refs.phone.focus()" />
-          <span
-            v-if="errors.length"
-            class="form-help is-danger">
-            {{ errors[0] }}
-          </span>
-        </validation-provider>
+        <phone-input v-model="address.phone" class="form-col col-half" />
       </div>
       <validation-provider
         v-slot="{ errors }"
@@ -248,11 +219,13 @@
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex';
 import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import PhoneInput from '@lancom/shared/components/common/phone_input/phone-input';
 
 export default {
   name: 'AddressForm',
   components: {
-    PostcodeSelect
+    PostcodeSelect,
+    PhoneInput
   },
   data() {
     return {

package/components/common/phone_input/phone-input.scss

@@ -0,0 +1,12 @@
+@import "@/assets/scss/variables";
+
+.CustomerAddressForm {
+  &__copy-btn {
+    position: absolute;
+    top: 7px;
+    right: 5px;
+    border-bottom: dashed;
+    cursor: pointer;
+    font-size: 14px;
+  }
+}

package/components/common/phone_input/phone-input.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <div class="form-row">
+      <label
+        v-if="labelless"
+        class="form-label"
+        @click="$refs.phone.$el.focus()">
+        {{ displayLabelText }}
+      </label>
+      <div style="display: flex">
+      <div >
+        <multiselect
+          class="labelless"
+          v-model="code"
+          :options="codes"
+          style="margin-right: 5px; width: 130px;" />
+      </div>
+      <div style="flex-grow: 1;">
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          class="form-row"
+          style="margin-bottom: 0;"
+          :name="namePrefix + 'Phone'"
+          :rules="required ? `required|phone:${code}` : `phone:${code}`">
+          <input
+            :id="'phone' + uniqueKey"
+            ref="phone"
+            v-model="model"
+            :placeholder="labelless ? placeholder : ''"
+            :disabled="disabled"
+            :name="'phone' + uniqueKey"
+            type="text"
+            class="form-field"
+            :class="{
+              'is-danger': errors.length,
+              filled: model,
+              labelless
+            }" />
+          <label
+            v-if="!labelless"
+            class="form-label label-inner"
+            :for="'phone' + uniqueKey">
+            {{ displayLabelText }}
+          </label>
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+      </div>
+        
+      </div>
+    </div>
+    <span
+      v-if="copyFrom"
+      class="CustomerAddressForm__copy-btn"
+      @click="$emit('copy')">
+      copy
+    </span>
+  </div>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect';
+
+export default {
+  name: 'PhoneInput',
+  components: {
+    Multiselect
+  },
+  props: {
+    codeCountry: {
+      type: Object
+    },
+    value: {
+      type: String
+    },
+    labelText: {
+      type: String
+    },
+    containerClass: {
+      type: String
+    },
+    placeholder: {
+      type: String,
+      default: 'Phone'
+    },
+    copyFrom: {
+      type: Boolean,
+      default: false
+    },
+    labelless: {
+      type: Boolean,
+      default: true
+    },
+    required: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    namePrefix: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      code: '+61',
+      uniqueKey: Math.random(),
+      codes: ['+44','+61'],
+    };
+  },
+  computed: {
+    displayLabelText() {
+      return this.labelText || 'Phone number';
+    },
+    model: {
+      get() {
+        return (this.value || '').replace(/^\+[0-9]{2}/, '');
+      },
+      set(phone) {
+        if (this.code === '+61' && phone?.length === 10 && phone[0] === '0') {
+          phone = phone.slice(1);
+        }
+        this.$emit('input', `${this.code}${phone}`);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'phone-input';
+</style>

package/components/customer/customer_form/customer-form.vue

@@ -62,33 +62,9 @@
                 {{ errors[0] }}
               </span>
             </validation-provider>
-            <validation-provider
-              v-slot="{ errors }"
-              tag="div"
-              name="Phone"
-              class="form-row">
-              <label
-                for="phone"
-                class="form-label">
-                Phone (optional)
-              </label>
-              <input
-                id="phone"
-                v-model="customer.phone"
-                name="phone"
-                type="number"
-                class="form-field labelless"
-                placeholder="Phone"
-                :class="{
-                  'is-invalid': errors.length,
-                  filled: customer.phone
-                }" />
-              <span
-                v-if="errors.length"
-                class="form-help is-danger">
-                {{ errors[0] }}
-              </span>
-            </validation-provider>
+            <phone-input
+              v-model="customer.phone"
+              label-text="Phone (optional)" />
           </div>
           <div class="col-6">
             <validation-provider
@@ -222,12 +198,14 @@
 <script>
 import { mapGetters } from 'vuex';
 import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import PhoneInput from '@lancom/shared/components/common/phone_input/phone-input';
 import api from '@lancom/shared/assets/js/api';
 
 export default {
   name: 'CustomerForm',
   components: {
-    PostcodeSelect
+    PostcodeSelect,
+    PhoneInput
   },
   props: {
     customer: {

package/components/modals/failed_conversion_modal/failed-conversion-modal.vue

@@ -51,35 +51,9 @@
               {{ errors[0] }}
             </span>
           </validation-provider>
-          <validation-provider
-            v-slot="{ errors }"
-            tag="div"
-            name="Phone"
-            rules="required"
-            class="form-col col-half">
-            <input
-              id="phone"
-              ref="phone"
-              v-model="form.phone"
-              name="phone"
-              type="text"
-              class="form-field"
-              :class="{
-                'is-danger': errors.length,
-                filled: form.phone
-              }"
-              @keyup.enter="$refs.phone.focus()" />
-            <label
-              for="phone"
-              class="form-label label-inner">
-              Phone number
-            </label>
-            <span
-              v-if="errors.length"
-              class="form-help is-danger">
-              {{ errors[0] }}
-            </span>
-          </validation-provider>
+          <phone-input
+            v-model="form.phone"
+            class="form-col col-half" />
         </div>
         <validation-provider
           v-if="!isSent"
@@ -136,9 +110,13 @@
 <script>
 import api from '@lancom/shared/assets/js/api';
 import { mapGetters } from 'vuex';
+import PhoneInput from '@lancom/shared/components/common/phone_input/phone-input';
 
 export default {
   name: 'FailedConversionModal',
+  components: {
+    PhoneInput
+  },
   props: {
     file: {
       type: Object,

package/components/modals/order_modal/order-modal.vue

@@ -40,35 +40,9 @@
               {{ errors[0] }}
             </span>
           </validation-provider>
-          <validation-provider
-            v-slot="{ errors }"
-            tag="div"
-            name="Phone"
-            rules="required"
-            class="form-col col-half">
-            <input
-              id="phone"
-              ref="phone"
-              v-model="form.phone"
-              name="phone"
-              type="text"
-              class="form-field"
-              :class="{
-                'is-danger': errors.length,
-                filled: form.phone
-              }"
-              @keyup.enter="$refs.phone.focus()" />
-            <label
-              for="phone"
-              class="form-label label-inner">
-              Phone number
-            </label>
-            <span
-              v-if="errors.length"
-              class="form-help is-danger">
-              {{ errors[0] }}
-            </span>
-          </validation-provider>
+          <phone-input
+            v-model="form.phone"
+            class="form-col col-half" />
         </div>
         <validation-provider
           v-slot="{ errors }"
@@ -269,6 +243,7 @@
 <script>
 import { mapGetters, mapActions, mapMutations } from 'vuex';
 import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import PhoneInput from '@lancom/shared/components/common/phone_input/phone-input';
 import ProductTotalPricing from '@lancom/shared/components/common/products_total_pricing/products-total-pricing';
 import { price } from '@lancom/shared/assets/js/utils/filters';
 
@@ -277,7 +252,8 @@ export default {
   filters: { price },
   components: {
     PostcodeSelect,
-    ProductTotalPricing
+    ProductTotalPricing,
+    PhoneInput
   },
   props: {
     switchModal: {

package/components/quotes/quote_request/quote-request.vue

@@ -35,35 +35,9 @@
                 {{ errors[0] }}
               </span>
             </validation-provider>
-            <validation-provider
-              v-slot="{ errors }"
-              tag="div"
-              name="Phone"
-              rules="required|phone"
-              class="form-row">
-              <label
-                for="quote-request-name"
-                class="form-label">
-                Your Phone
-              </label>
-              <input
-                id="quote-request-phone"
-                ref="name"
-                v-model="quote.address.phone"
-                name="phone"
-                placeholder="Phone"
-                type="text"
-                class="form-field labelless"
-                :class="{
-                  'is-danger': errors.length,
-                  filled: quote.address.phone
-                }" />
-              <span
-                v-if="errors.length"
-                class="form-help is-danger">
-                {{ errors[0] }}
-              </span>
-            </validation-provider>
+            <phone-input
+              class="form-row"
+              v-model="quote.address.phone" />
             <validation-provider
               v-slot="{ errors }"
               tag="div"
@@ -322,6 +296,7 @@ import { mapGetters } from 'vuex';
 import CheckedIcon from '@lancom/shared/components/common/checked-icon';
 import FileUploader from '@lancom/shared/components/common/file_uploader';
 import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import PhoneInput from '@lancom/shared/components/common/phone_input/phone-input';
 
 export default {
   name: 'QuoteRequest',
@@ -329,7 +304,8 @@ export default {
     CheckedIcon,
     FileUploader,
     PostcodeSelect,
-    Multiselect
+    Multiselect,
+    PhoneInput
   },
   data() {
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.373",
+  "version": "0.0.375",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {