#224: Recaptcha badge is not shown on checkout login form if 'Invisible Badge Position' is 'Bottom Left/Right'

Merge pull request #5738 from magento-honey-badgers/2.4-develop-241-sync

[honey] MC-33700: TransportBuilder unable to send emails of Content-Type "text/plain"

Author: engcom-Foxtrot

ReCaptchaFrontendUi/view/frontend/web/js/nonInlineReCaptchaRenderer.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery'
+], function ($) {
+    'use strict';
+
+    var reCaptchaEntities = [],
+        initialized = false,
+        rendererRecaptchaId = 'recaptcha-invisible',
+        rendererReCaptcha = null;
+
+    return {
+        add: function (reCaptchaEntity, parameters) {
+            if (parameters.size === 'invisible' && parameters.badge !== 'inline') {
+                if (!initialized) {
+                    this._init();
+                    grecaptcha.render(rendererRecaptchaId, parameters);
+                    setInterval(this._resolveVisibility, 100);
+                    initialized = true;
+                }
+
+                reCaptchaEntities.push(reCaptchaEntity);
+            }
+        },
+
+        _resolveVisibility: function () {
+            reCaptchaEntities.some(
+                (entity) => {
+                    return entity.is(":visible")
+                        // 900 is some magic z-index value of modal popups.
+                        && (entity.closest("[data-role='modal']").length == 0 || entity.zIndex() > 900)
+                }) ? rendererReCaptcha.show() : rendererReCaptcha.hide();
+        },
+
+        _init: function () {
+            rendererReCaptcha = $('<div/>', {
+                'id': rendererRecaptchaId
+            });
+            $('body').append(rendererReCaptcha);
+        }
+    };
+});

ReCaptchaFrontendUi/view/frontend/web/js/reCaptcha.js

@@ -11,9 +11,10 @@ define(
         'jquery',
         'ko',
         'Magento_ReCaptchaFrontendUi/js/registry',
-        'Magento_ReCaptchaFrontendUi/js/reCaptchaScriptLoader'
+        'Magento_ReCaptchaFrontendUi/js/reCaptchaScriptLoader',
+        'Magento_ReCaptchaFrontendUi/js/nonInlineReCaptchaRenderer',
     ],
-    function (Component, $, ko, registry, reCaptchaLoader, undefined) {
+    function (Component, $, ko, registry, reCaptchaLoader,nonInlineReCaptchaRenderer, undefined) {
         'use strict';
 
         return Component.extend({
@@ -117,6 +118,8 @@ define(
                     this.settings.rendering
                 );
 
+                nonInlineReCaptchaRenderer.add($reCaptcha, parameters);
+
                 // eslint-disable-next-line no-undef
                 widgetId = grecaptcha.render(this.getReCaptchaId(), parameters);
                 this.initParentForm($parentForm, widgetId);