⏫ Forwardport of #12253 to 2.3-develop branch

Applied pull request patch https://github.com/magento/magento2/pull/12253.patch (created by @KarlDeux) based on commit(s):
  1. b64e470
  2. c21229c

Fixed GitHub Issues in 2.3-develop branch:
  - #12058: Can't save emoji in custom product options (reported by @archonkulis)

Author: magento-engcom-team

app/code/Magento/Catalog/view/frontend/templates/product/view/options/type/text.phtml

@@ -29,6 +29,7 @@ $class = ($_option->getIsRequire()) ? ' required' : '';
             if ($_option->getMaxCharacters()) {
                 $_textValidate['maxlength'] = $_option->getMaxCharacters();
             }
+            $_textValidate['validate-no-utf8mb4-characters'] = true;
             ?>
             <input type="text"
                    id="options_<?= /* @escapeNotVerified */ $_option->getId() ?>_text"
@@ -47,6 +48,7 @@ $class = ($_option->getIsRequire()) ? ' required' : '';
             if ($_option->getMaxCharacters()) {
                 $_textAreaValidate['maxlength'] = $_option->getMaxCharacters();
             }
+            $_textAreaValidate['validate-no-utf8mb4-characters'] = true;
             ?>
             <textarea id="options_<?= /* @escapeNotVerified */ $_option->getId() ?>_text"
                       class="product-custom-option"

dev/tests/js/jasmine/tests/lib/mage/validation.test.js

@@ -183,4 +183,76 @@ define([
             )).toEqual(true);
         });
     });
+
+    describe('Testing 3 bytes characters only policy (UTF-8)', function () {
+        it('rejects data, if any of the characters cannot be stored using UTF-8 collation', function () {
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '😅😂', null
+            )).toEqual(false);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '😅 test 😂', null
+            )).toEqual(false);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '💩 👻 💀', null
+            )).toEqual(false);
+        });
+
+        it('approves data, if all the characters can be stored using UTF-8 collation', function () {
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '!$-_%ç&#?!', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '1234567890', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '   ', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'test', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'испытание', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'тест', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'փորձարկում', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'परीक्षण', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'テスト', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '테스트', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '测试', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '測試', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'ทดสอบ', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'δοκιμή', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'اختبار', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'تست', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'מִבְחָן', null
+            )).toEqual(true);
+        });
+    });
+
 });

lib/web/i18n/en_US.csv

@@ -99,6 +99,7 @@ Submit,Submit
 "Password cannot be the same as email address.","Password cannot be the same as email address."
 "Please fix this field.","Please fix this field."
 "Please enter a valid email address.","Please enter a valid email address."
+"Please remove invalid characters: {0}.", "Please remove invalid characters: {0}."
 "Please enter a valid URL.","Please enter a valid URL."
 "Please enter a valid date (ISO).","Please enter a valid date (ISO)."
 "Please enter only digits.","Please enter only digits."

lib/web/mage/validation.js

@@ -395,6 +395,24 @@
             $.mage.__('Please enter at least {0} characters')
         ],
 
+        /* detect chars that would require more than 3 bytes */
+        'validate-no-utf8mb4-characters': [
+            function (value) {
+                var validator = this,
+                    message = $.mage.__('Please remove invalid characters: {0}.'),
+                    matches = value.match(/(?:[\uD800-\uDBFF][\uDC00-\uDFFF])/g),
+                    result = matches === null;
+
+                if (!result) {
+                    validator.charErrorMessage = message.replace('{0}', matches.join());
+                }
+
+                return result;
+            }, function () {
+                return this.charErrorMessage;
+            }
+        ],
+
         /* eslint-disable max-len */
         'email2': [
             function (value, element) {