Skip to content

Commit

Permalink
auto login feature + log out bolt session feature (#117)
Browse files Browse the repository at this point in the history 
Implement 2 features:
1)auto login before inputting email
2)logout both bolt session and clear bolt oauth data in SFCC session within one click.
  • Loading branch information
@justinBolt1987
justinBolt1987 authored Oct 31, 2022
1 parent af0446b commit bdc325f
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 18 deletions.
74 changes: 62 additions & 12 deletions cartridges/int_bolt_embedded_sfra/cartridge/client/default/js/account.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ var util = require('./util.js');
var constants = require('./constant.js');

/**
* Authorize With Email. This function creates the Bolt component from embed.js,
* This function creates the Bolt component from embed.js,
* mount it on the page and renders the OTP modal to do authentication & authorization with Bolt
* @param {string} customerEmail - input email
* @returns {Promise} - the returned promise waits for the user to enter the 6 digis OTP code
*/
async function authorizeWithEmail(customerEmail) {
async function authorize(customerEmail) {
const boltPublishableKey = $('.bolt-publishable-key').val();
const locale = $('.bolt-locale').val();

Expand All @@ -18,11 +18,15 @@ async function authorizeWithEmail(customerEmail) {
});

const authorizationComponent = boltEmbedded.create('authorization_component', { style: { position: 'right' } });
const containerToMount = $('#email-guest').parent().get(0); // there is only 1 occurance of $('#email-guest')
containerToMount.classList.add('containerToMount');
await authorizationComponent.mount('.containerToMount'); // mount on the div container otherwise the iframe won't render

return authorizationComponent.authorize({ email: customerEmail });
if (customerEmail != null) {
const containerToMount = $('#email-guest').parent().get(0); // there is only 1 occurance of $('#email-guest')
containerToMount.classList.add('containerToMount');
await authorizationComponent.mount('.containerToMount'); // mount on the div container otherwise the iframe won't render
return authorizationComponent.authorize({ email: customerEmail });
}
// if no email, then auto login
await authorizationComponent.mount('.auto-login-div'); // mount on the div container
return authorizationComponent.authorize({});
}

/**
Expand All @@ -31,12 +35,12 @@ async function authorizeWithEmail(customerEmail) {
* @returns {Promise} The returned promise to fetch account details
*/
async function login(email) {
const authorizeWithEmailResp = await authorizeWithEmail(email);
const authorizeResp = await authorize(email);
$('.submit-customer').removeAttr('disabled'); // enable checkout button after OTP modal is rendered
if (!authorizeWithEmailResp) return;
if (!authorizeResp) return;
const OAuthResp = await authenticateUserWithCode(
authorizeWithEmailResp.authorizationCode,
authorizeWithEmailResp.scope
authorizeResp.authorizationCode,
authorizeResp.scope
);
return getAccountDetails(OAuthResp.accessToken); // eslint-disable-line consistent-return
}
Expand Down Expand Up @@ -132,7 +136,7 @@ exports.checkAccountAndFetchDetail = function () {
* making an ajax call to sfcc backend to clear bolt account data
*/
exports.logout = function () {
var url = $('#bolt-logout').attr('data-bolt-logout-url');
var url = $('.data-bolt-platform-side-logout-url').val();
$.ajax({
url: url,
method: 'POST',
Expand All @@ -149,3 +153,49 @@ exports.logout = function () {
}
});
};

/**
* detect bolt auto login
*/
exports.detectAutoLogin = function () {
login(null);
};

/**
* mount bolt login status component
*/
exports.mountLoginStatusComponent = function () {
const boltPublishableKey = $('.bolt-publishable-key').val();
const locale = $('.bolt-locale').val();
const boltEmbedded = Bolt(boltPublishableKey, { // eslint-disable-line no-undef
language: util.getISOCodeByLocale(locale)
});
const loginStatusComponent = boltEmbedded.create('login_status', {
listeners: {
logout: () => {
this.logout();
}
}
});
if ($('#login-status').length > 0) {
loginStatusComponent.mount('#login-status');
}
};

/**
* Display Bolt login status from iframe
*/
exports.displayBoltStatus = function () {
$('#login-status').show();
$('#bolt-platform-side-logout').hide();
$('#default-customer-status').hide();
};

/**
* Display Storefront Customer Information
*/
exports.displayCustomerInfo = function () {
$('#bolt-platform-side-logout').show();
$('#default-customer-status').show();
$('#login-status').hide();
};
54 changes: 53 additions & 1 deletion cartridges/int_bolt_embedded_sfra/cartridge/client/default/js/eventListenerRegistration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ $(document).ready(function () {
});

// register the event listener on the logout button
$('#bolt-logout').click(function () {
$('#bolt-platform-side-logout').click(function () {
account.logout();
});

Expand Down Expand Up @@ -81,3 +81,55 @@ $(document).ready(function () {
}
}, 100);
});

// detect auto login
$(document).ready(function () {
var isBoltEmbeddedExists = setInterval(function () {
if (typeof Bolt !== 'undefined') {
clearInterval(isBoltEmbeddedExists);
const isBoltShopperLoggedIn = $('.bolt-is-shopper-logged-in').val();
if (isBoltShopperLoggedIn === 'false') {
account.detectAutoLogin();
}
}
}, 500);
});

// mount login status component
$(document).ready(function () {
var isBoltEmbeddedExists = setInterval(function () {
if (typeof Bolt !== 'undefined') {
clearInterval(isBoltEmbeddedExists);
account.mountLoginStatusComponent();
}
}, 500);
});

/**
* Due to a limitation of login status component
* Some browser like safari/chrome incognito is not
* able to display the login status component.
* The purpose of this function is to wait 2 seconds
* and see if the login status component is able to be
* displayed, otherwise display the default content, which
* is same as the previous one.
*/
$(document).ready(function () {
const isBoltShopperLoggedIn = $('.bolt-is-shopper-logged-in').val();
if (isBoltShopperLoggedIn === 'true') {
setTimeout(function () {
var isBoltStatusComponentDisplay = false;
var $boltLoginStatusDiv = $('#login-status');
if ($boltLoginStatusDiv.contents().length > 0) {
isBoltStatusComponentDisplay = $boltLoginStatusDiv.contents().get(0).style.display !== '';
}
if (isBoltStatusComponentDisplay) {
account.displayBoltStatus();
} else {
account.displayCustomerInfo();
}
}, 2000);
} else {
account.displayCustomerInfo();
}
});
4 changes: 3 additions & 1 deletion cartridges/int_bolt_embedded_sfra/cartridge/templates/default/checkout/boltEmbed.isml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@
<input type="hidden" class="bolt-publishable-key" value="${pdict.config.boltMultiPublishableKey}" />
<input type="hidden" class="bolt-locale" value="${pdict.locale}" />
<input type="hidden" class="bolt-is-shopper-logged-in" value="${pdict.isBoltShopperLoggedIn}" />
<input type="hidden" class="data-bolt-platform-side-logout-url" value="${URLUtils.https('Bolt-AccountLogOut')}" />
<script id="bolt-embed" type="text/javascript" src="${pdict.config.boltCdnUrl}/embed.js"
data-publishable-key="${pdict.config.boltMultiPublishableKey}" defer> </script>
<isscript>
var assets = require('*/cartridge/scripts/assets.js');
assets.addJs('/js/tokenization.js');
assets.addJs('/js/eventListenerRegistration.js');
</isscript>
</isif>
</isif>
<div class="auto-login-div"></div>
18 changes: 14 additions & 4 deletions cartridges/int_bolt_embedded_sfra_custom/cartridge/templates/default/checkout/checkout.isml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
<h1 class="page-title">
${Resource.msg('title.checkout', 'checkout', null)}
</h1>
<div id="checkout-main" class="container data-checkout-stage <isif condition=" ${pdict.order.usingMultiShipping && pdict.order.shipping.length > 1}">multi-ship</isif>" data-customer-type="${pdict.isBoltShopperLoggedIn ? 'boltShopper' : (pdict.customer.registeredUser ? 'registered' : 'guest')}" data-checkout-stage="${pdict.currentStage}"
<div id="checkout-main" class="container data-checkout-stage <isif condition=" ${pdict.order.usingMultiShipping && pdict.order.shipping.length > 1}">multi-ship</isif>" data-customer-type="${pdict.isBoltShopperLoggedIn ? 'boltShopper' : (pdict.customer.registeredUser ? 'registered' : 'guest')}"
data-checkout-stage="${pdict.currentStage}"
data-checkout-get-url="${URLUtils.https('CheckoutServices-Get')}">
<!----------------------------------------------------------------------------------->
<!-- Help and Phone -->
Expand Down Expand Up @@ -59,8 +60,8 @@
<div class="card-header clearfix">
<h2 class="pull-left card-header-custom">${Resource.msg('heading.checkout.customer', 'checkout', null)}</h2>
<isif condition="${pdict.isBoltShopperLoggedIn}">
<button class="pull-right" id="bolt-logout"
data-bolt-logout-url="${URLUtils.https('Bolt-AccountLogOut')}">${Resource.msg('customer.logout', 'bolt', null)}</button>
<button class="pull-right" id="bolt-platform-side-logout"
style="display:none;">${Resource.msg('customer.logout', 'bolt', null)}</button>
<iselse/>
<isif condition="${!pdict.customer.registeredUser}">
<button class="edit-button pull-right"
Expand All @@ -69,7 +70,16 @@
</isif>
</div>
<div class="card-body">
<isinclude template="checkout/customer/customerSummary" />
<isif condition="${pdict.isBoltShopperLoggedIn}">
<div id="login-status" style="height:60px;display:none;"></div>
<div id="default-customer-status" style="display:none;">
<isinclude template="checkout/customer/customerSummary" />
</div>
<iselse/>
<div id="default-customer-status">
<isinclude template="checkout/customer/customerSummary" />
</div>
</isif>
</div>
</div>

Expand Down

0 comments on commit bdc325f

Please sign in to comment.