Merge remote-tracking branch 'origin/MAGETWO-96659' into 2.2-develop-pr19

Author: serhii-balko

app/code/Magento/Checkout/view/frontend/web/js/model/postcode-validator.js

@@ -14,11 +14,13 @@ define([
         /**
          * @param {*} postCode
          * @param {*} countryId
+         * @param {Array} postCodesPatterns
          * @return {Boolean}
          */
-        validate: function (postCode, countryId) {
-            var patterns = window.checkoutConfig.postCodes[countryId],
-                pattern, regex;
+        validate: function (postCode, countryId, postCodesPatterns) {
+            var pattern, regex,
+                patterns = postCodesPatterns ? postCodesPatterns[countryId] :
+                    window.checkoutConfig.postCodes[countryId];
 
             this.validatedPostCodeExample = [];
 

app/code/Magento/Checkout/view/frontend/web/js/model/shipping-rates-validator.js

@@ -42,6 +42,7 @@ define([
 
     return {
         validateAddressTimeout: 0,
+        validateZipCodeTimeout: 0,
         validateDelay: 2000,
 
         /**
@@ -133,16 +134,20 @@ define([
                 });
             } else {
                 element.on('value', function () {
+                    clearTimeout(self.validateZipCodeTimeout);
+                    self.validateZipCodeTimeout = setTimeout(function () {
+                        if (element.index === postcodeElementName) {
+                            self.postcodeValidation(element);
+                        } else {
+                            $.each(postcodeElements, function (index, elem) {
+                                self.postcodeValidation(elem);
+                            });
+                        }
+                    }, delay);
+
                     if (!formPopUpState.isVisible()) {
                         clearTimeout(self.validateAddressTimeout);
                         self.validateAddressTimeout = setTimeout(function () {
-                            if (element.index === postcodeElementName) {
-                                self.postcodeValidation(element);
-                            } else {
-                                $.each(postcodeElements, function (index, elem) {
-                                    self.postcodeValidation(elem);
-                                });
-                            }
                             self.validateFields();
                         }, delay);
                     }

app/code/Magento/Customer/Block/DataProviders/PostCodesPatternsAttributeData.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento\Customer\Block\DataProviders;
+
+use Magento\Framework\Serialize\SerializerInterface;
+use Magento\Framework\View\Element\Block\ArgumentInterface;
+use Magento\Directory\Model\Country\Postcode\Config as PostCodeConfig;
+
+/**
+ * Provides postcodes patterns into template.
+ */
+class PostCodesPatternsAttributeData implements ArgumentInterface
+{
+    /**
+     * @var PostCodeConfig
+     */
+    private $postCodeConfig;
+
+    /**
+     * @var SerializerInterface
+     */
+    private $serializer;
+
+    /**
+     * Constructor
+     *
+     * @param PostCodeConfig $postCodeConfig
+     * @param SerializerInterface $serializer
+     */
+    public function __construct(PostCodeConfig $postCodeConfig, SerializerInterface $serializer)
+    {
+        $this->postCodeConfig = $postCodeConfig;
+        $this->serializer = $serializer;
+    }
+
+    /**
+     * Get serialized post codes
+     *
+     * @return string
+     */
+    public function getSerializedPostCodes(): string
+    {
+        return $this->serializer->serialize($this->postCodeConfig->getPostCodes());
+    }
+}

app/code/Magento/Customer/view/frontend/layout/customer_address_form.xml

@@ -20,6 +20,7 @@
             <block class="Magento\Customer\Block\Address\Edit" name="customer_address_edit" template="Magento_Customer::address/edit.phtml" cacheable="false">
                 <arguments>
                     <argument name="attribute_data" xsi:type="object">Magento\Customer\Block\DataProviders\AddressAttributeData</argument>
+                    <argument name="post_code_config" xsi:type="object">Magento\Customer\Block\DataProviders\PostCodesPatternsAttributeData</argument>
                 </arguments>
             </block>
         </referenceContainer>

app/code/Magento/Customer/view/frontend/templates/address/edit.phtml

@@ -126,6 +126,9 @@
                        title="<?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('postcode') ?>"
                        id="zip"
                        class="input-text validate-zip-international <?= $block->escapeHtmlAttr($this->helper(\Magento\Customer\Helper\Address::class)->getAttributeValidationClass('postcode')) ?>">
+                <div role="alert" class="message warning" style="display:none">
+                    <span></span>
+                </div>
             </div>
         </div>
         <div class="field country required">
@@ -184,7 +187,9 @@
 <script type="text/x-magento-init">
     {
         "#form-validate": {
-            "addressValidation": {}
+            "addressValidation": {
+                "postCodes": <?= /* @noEscape */ $block->getPostCodeConfig()->getSerializedPostCodes(); ?>
+            }
         },
         "#country": {
             "regionUpdater": {

app/code/Magento/Customer/view/frontend/web/js/addressValidation.js

@@ -5,25 +5,38 @@
 
 define([
     'jquery',
+    'underscore',
+    'mageUtils',
+    'mage/translate',
+    'Magento_Checkout/js/model/postcode-validator',
     'jquery/ui',
     'validation'
-], function ($) {
+], function ($, __, utils, $t, postCodeValidator) {
     'use strict';
 
     $.widget('mage.addressValidation', {
         options: {
             selectors: {
-                button: '[data-action=save-address]'
+                button: '[data-action=save-address]',
+                zip: '#zip',
+                country: 'select[name="country_id"]:visible'
             }
         },
 
+        zipInput: null,
+        countrySelect: null,
+
         /**
          * Validation creation
+         *
          * @protected
          */
         _create: function () {
             var button = $(this.options.selectors.button, this.element);
 
+            this.zipInput = $(this.options.selectors.zip, this.element);
+            this.countrySelect = $(this.options.selectors.country, this.element);
+
             this.element.validation({
 
                 /**
@@ -36,6 +49,75 @@ define([
                     form.submit();
                 }
             });
+
+            this._addPostCodeValidation();
+        },
+
+        /**
+         * Add postcode validation
+         *
+         * @protected
+         */
+        _addPostCodeValidation: function () {
+            var self = this;
+
+            this.zipInput.on('keyup', __.debounce(function (event) {
+                    var valid = self._validatePostCode(event.target.value);
+
+                    self._renderValidationResult(valid);
+                }, 500)
+            );
+
+            this.countrySelect.on('change', function () {
+                var valid = self._validatePostCode(self.zipInput.val());
+
+                self._renderValidationResult(valid);
+            });
+        },
+
+        /**
+         * Validate post code value.
+         *
+         * @protected
+         * @param {String} postCode - post code
+         * @return {Boolean} Whether is post code valid
+         */
+        _validatePostCode: function (postCode) {
+            var countryId = this.countrySelect.val();
+
+            if (postCode === null) {
+                return true;
+            }
+
+            return postCodeValidator.validate(postCode, countryId, this.options.postCodes);
+        },
+
+        /**
+         * Renders warning messages for invalid post code.
+         *
+         * @protected
+         * @param {Boolean} valid
+         */
+        _renderValidationResult: function (valid) {
+            var warnMessage,
+                alertDiv = this.zipInput.next();
+
+            if (!valid) {
+                warnMessage = $t('Provided Zip/Postal Code seems to be invalid.');
+
+                if (postCodeValidator.validatedPostCodeExample.length) {
+                    warnMessage += $t(' Example: ') + postCodeValidator.validatedPostCodeExample.join('; ') + '. ';
+                }
+                warnMessage += $t('If you believe it is the right one you can ignore this notice.');
+            }
+
+            alertDiv.children(':first').text(warnMessage);
+
+            if (valid) {
+                alertDiv.hide();
+            } else {
+                alertDiv.show();
+            }
         }
     });
 

app/code/Magento/Multishipping/view/frontend/layout/multishipping_checkout_customer_address.xml

@@ -12,6 +12,7 @@
             <block class="Magento\Customer\Block\Address\Edit" name="customer_address_edit" template="Magento_Customer::address/edit.phtml" cacheable="false">
                 <arguments>
                     <argument name="attribute_data" xsi:type="object">Magento\Customer\Block\DataProviders\AddressAttributeData</argument>
+                    <argument name="post_code_config" xsi:type="object">Magento\Customer\Block\DataProviders\PostCodesPatternsAttributeData</argument>
                 </arguments>
             </block>
         </referenceContainer>