add selector config

BoltApp · Feb 27, 2024 · 9d16b99 · 9d16b99
1 parent e414b31
commit 9d16b99
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 23 deletions.
diff --git a/cartridges/int_bolt_embedded_sfra/cartridge/client/default/js/account.js b/cartridges/int_bolt_embedded_sfra/cartridge/client/default/js/account.js
@@ -202,7 +202,8 @@ exports.setupListeners = async function () {
         }
     });
 
-    Bolt.on('authorize_modal_closed', () => {
+    Bolt.on('login_modal_closed', () => {
+        console.log('login modal closed');
         var disabledAttr = $('.submit-customer').prop('disabled');
         if (disabledAttr) {
             $('.submit-customer').removeAttr('disabled');
@@ -211,6 +212,7 @@ exports.setupListeners = async function () {
 
     Bolt.on('auto_account_check_complete', response => {
         const $accountCheckbox = $('#acct-checkbox');
+        console.log('aaaa account check complete', response);
         if (response.result instanceof Error) {
             if (response.result.message === 'Invalid email') {
                 $('.submit-customer').attr('disabled', 'true');

diff --git a/cartridges/int_bolt_embedded_sfra/cartridge/client/default/js/checkout/checkout.js b/cartridges/int_bolt_embedded_sfra/cartridge/client/default/js/checkout/checkout.js
@@ -213,7 +213,7 @@ var constants = require('../constant');
                             }
                         });
                     }
-                    const isBoltShopperLoggedIn = $('.bolt-is-shopper-logged-in').val();
+                    const isBoltShopperLoggedIn = $('.bolt-is-shopper-logged-in').val() === 'true';
                     const eventPayload = { loginStatus: isBoltShopperLoggedIn ? 'logged-in' : 'guest' };
 
                     // sending both shipping event here as we don't know

diff --git a/cartridges/int_bolt_embedded_sfra/cartridge/client/default/js/eventListenerRegistration.js b/cartridges/int_bolt_embedded_sfra/cartridge/client/default/js/eventListenerRegistration.js
@@ -3,31 +3,31 @@
 const account = require('./account');
 const boltStoredPayment = require('./boltStoredPayments');
 
-// register the event listener on the $('#email-guest') component
-// change the html element ID if you make change to $('#email-guest')
 $(document).ready(async function () {
-    await account.waitForBoltReady();
-
     $('.submit-customer').attr('disabled', 'true');
-    const containerToMount = $('#email-guest').parent().get(0);
-    if (typeof containerToMount === 'undefined') {
+
+    // mount on the div container otherwise the iframe won't render
+    const emailField = document.querySelector(window.BoltSelectors.checkoutEmailField).parentElement;
+
+    if (emailField == null) {
         return;
     }
-    if (containerToMount.offsetParent === null) {
-        return;
+
+    await account.waitForBoltReady();
+
+    const loginModalComponent = Bolt.getComponent('login_modal') || Bolt.create('login_modal');
+
+    if (emailField != null) {
+        loginModalComponent.attach(emailField);
     }
 
-    const loginModalComponent = Bolt.create('login_modal', {
-        autoDetectEmail: true
-    });
-    containerToMount.classList.add('containerToMount');
-    await loginModalComponent.mount('.containerToMount'); // mount on the div container otherwise the iframe won't render
+    const isBoltShopperLoggedIn = $('.bolt-is-shopper-logged-in').val() === 'true';
+    const boltSFCCSessionLogoutCookie = account.getCookie('bolt_sfcc_session_logout');
 
-    const isBoltShopperLoggedIn = $('.bolt-is-shopper-logged-in').val();
-    var boltSFCCSessionLogoutCookie = account.getCookie('bolt_sfcc_session_logout');
-    if (isBoltShopperLoggedIn === 'false' && boltSFCCSessionLogoutCookie !== 'true') {
+    if (!isBoltShopperLoggedIn && boltSFCCSessionLogoutCookie !== 'true') {
         account.detectSessionLogin(loginModalComponent);
     }
+
     account.setupListeners();
 });
 

diff --git a/cartridges/int_bolt_embedded_sfra/cartridge/client/default/js/signIn.js b/cartridges/int_bolt_embedded_sfra/cartridge/client/default/js/signIn.js
@@ -5,15 +5,34 @@ const account = require('./account');
 (async () => {
     await account.waitForBoltReady();
 
-    const loginModalComponent = Bolt.create('login_modal', {
-        autoDetectEmail: true
-    });
+    const loginModalComponent = Bolt.getComponent('login_modal') || Bolt.create('login_modal');
 
-    const loginFormEmail = document.querySelector('#login-form-email').parentElement;
+    const loginFormEmail = document.querySelector(window.BoltSelectors.signInEmailField).parentElement;
     loginModalComponent.attach(loginFormEmail, { context: 'sign_in' });
 
-    const registerFormEmail = document.querySelector('#registration-form-email').parentElement;
+    const registerFormEmail = document.querySelector(window.BoltSelectors.registerEmailField).parentElement;
     loginModalComponent.attach(registerFormEmail, { context: 'register' });
 
+    const passwordReset = document.querySelector('#password-reset');
+    let detach = loginModalComponent.attach(passwordReset, { context: 'forgot_password' });
+
+    const href = passwordReset.getAttribute('href');
+    passwordReset.setAttribute('href', '#');
+    passwordReset.removeAttribute('data-toggle');
+
+    passwordReset.addEventListener('click', event => {
+        event.preventDefault();
+    });
+
+    const unsubscribe = Bolt.on('forgot_password_continue', () => {
+        detach();
+        passwordReset.setAttribute('href', href);
+        passwordReset.setAttribute('data-toggle', 'modal');
+        passwordReset.click();
+        unsubscribe();
+
+        detach = loginModalComponent.attach(passwordReset, { context: 'forgot_password' });
+    });
+
     account.setupListenersLogin();
 })();
diff --git a/cartridges/int_bolt_embedded_sfra/cartridge/templates/default/checkout/boltEmbed.isml b/cartridges/int_bolt_embedded_sfra/cartridge/templates/default/checkout/boltEmbed.isml
@@ -14,5 +14,22 @@
         assets.addJs('/js/tokenization.js');
         assets.addJs('/js/eventListenerRegistration.js');
     </isscript>
+
+    <script>
+        window.BoltSelectors = {
+            signInEmailField: "#login-form-email",
+            registerEmailField: "#registration-form-email",
+            forgetPasswordButton: "#password-reset",
+
+            checkoutEmailField: "#email-guest",
+            checkoutEmailSummary: ".customer-summary-email",
+
+            editShippingHeader: ".shipping-section h2",
+            shippingSummary: ".address-summary",
+
+            editPaymentHeader: ".payment-form h2",
+            paymentSummary: ".payment-details",
+        }
+    </script>
 </isif>
 <div class="auto-login-div"></div>