Merge branch 'ACP2E-3273' of https://github.com/adobe-commerce-tier-4/magento2ce into Tier4-09-12-2024

Author: thiaramus

app/code/Magento/Checkout/view/frontend/web/template/form/element/email.html

@@ -25,14 +25,14 @@
                             mageInit: {'mage/trim-input':{}}"
                        name="username"
                        data-validate="{required:true, 'validate-email':true}"
-                       id="customer-email" />
+                       id="customer-email"></input>
                 <!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko -->
                 <span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account after checkout.'--><!-- /ko --></span>
             </div>
         </div>
 
         <!--Hidden fields -->
-        <fieldset class="fieldset hidden-fields" data-bind="fadeVisible: isPasswordVisible">
+        <fieldset class="fieldset hidden-fields" data-bind="dimVisible: isPasswordVisible">
             <div class="field">
                 <label class="label" for="customer-password"><span data-bind="i18n: 'Password'"></span></label>
                 <div class="control">
@@ -44,7 +44,7 @@
                            type="password"
                            name="password"
                            id="customer-password"
-                           data-validate="{required:true}" autocomplete="off"/>
+                           data-validate="{required:true}" autocomplete="off"></input>
                     <span class="note" data-bind="i18n: 'You already have an account with us. Sign in or continue as guest.'"></span>
                 </div>
 
@@ -53,7 +53,7 @@
             <!-- ko template: getTemplate() --><!-- /ko -->
             <!-- /ko -->
             <div class="actions-toolbar">
-                <input name="context" type="hidden" value="checkout" />
+                <input name="context" type="hidden" value="checkout"></input>
                 <div class="primary">
                     <button type="submit" class="action login primary" data-action="checkout-method-login"><span data-bind="i18n: 'Login'"></span></button>
                 </div>

app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/bootstrap.js

@@ -31,6 +31,7 @@ define(function (require) {
         datepicker:     require('./datepicker'),
         outerClick:     require('./outer_click'),
         fadeVisible:    require('./fadeVisible'),
+        dimVisible:    require('./dimVisible'),
         collapsible:    require('./collapsible'),
         staticChecked:  require('./staticChecked'),
         simpleChecked:  require('./simple-checked'),

app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/dimVisible.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright 2024 Adobe
+ * All Rights Reserved.
+ */
+
+define([
+    'jquery',
+    'ko'
+], function ($, ko) {
+    'use strict';
+
+    ko.bindingHandlers.dimVisible = {
+        /**
+         * Initially set the element to be instantly visible/hidden depending on the value.
+         *
+         * @param {HTMLElement} element
+         * @param {Function} valueAccessor
+         */
+        init: function (element, valueAccessor) {
+            let value = valueAccessor();
+
+            // Use "unwrapObservable" so we can handle values that may or may not be observable
+            if (ko.unwrap(value)) {
+                $(element).css('visibility','visible').css('height','auto').css('position','relative');
+            } else {
+                $(element).css('visibility', 'hidden').css('height', '0').css('position', 'absolute');
+            }
+        },
+
+        /**
+         * Whenever the value subsequently changes, update the state of the element accordingly.
+         *
+         * @param {HTMLElement} element
+         * @param {Function} valueAccessor
+         */
+        update: function (element, valueAccessor) {
+            let value = valueAccessor();
+
+            if (ko.unwrap(value)) {
+                $(element).css('visibility', 'visible').css('height', 'auto').css('position', 'relative');
+            } else {
+                $(element).css('visibility', 'hidden').css('height', '0').css('position', 'absolute');
+            }
+        }
+    };
+});

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/lib/ko/bind/dimVisible.test.js

@@ -0,0 +1,61 @@
+/**
+ * Copyright 2024 Adobe
+ * All Rights Reserved.
+ */
+
+define([
+    'ko',
+    'jquery',
+    'Magento_Ui/js/lib/knockout/bindings/dimVisible'
+], function (ko, $) {
+    'use strict';
+
+    describe('dimVisible binding', function () {
+        var elementToHide = $('<fieldset class="hidden-fields"></fieldset>');
+
+        beforeEach(function () {
+            $(document.body).append(elementToHide);
+        });
+
+        afterEach(function () {
+            elementToHide.remove();
+        });
+
+        it('Check that html element is hidden based on flag value', function () {
+            let value = false,
+                valueAccessor = jasmine.createSpy().and.returnValue(value);
+
+            ko.bindingHandlers.dimVisible.init(elementToHide, valueAccessor);
+            expect(
+                elementToHide.attr('style').indexOf('visibility: hidden; height: 0px; position: absolute;') !== -1
+            ).toBeTrue();
+        });
+
+        it('Check that html element is displayed based on flag value', function () {
+            let value = true,
+                valueAccessor = jasmine.createSpy().and.returnValue(value);
+
+            ko.bindingHandlers.dimVisible.init(elementToHide, valueAccessor);
+            expect(
+                elementToHide.attr('style').indexOf('visibility: visible; height: auto; position: relative;') !== -1
+            ).toBeTrue();
+        });
+
+        it('Check that html element is updated based on flags changing value', function () {
+            let valueFalse = false,
+                valueFalseAccessor = jasmine.createSpy().and.returnValue(valueFalse),
+                valueTrue = true,
+                valueTrueAccessor = jasmine.createSpy().and.returnValue(valueTrue);
+
+            ko.bindingHandlers.dimVisible.update(elementToHide, valueFalseAccessor);
+            expect(
+                elementToHide.attr('style').indexOf('visibility: hidden; height: 0px; position: absolute;') !== -1
+            ).toBeTrue();
+
+            ko.bindingHandlers.dimVisible.update(elementToHide, valueTrueAccessor);
+            expect(
+                elementToHide.attr('style').indexOf('visibility: visible; height: auto; position: relative;') !== -1
+            ).toBeTrue();
+        });
+    });
+});