/*************************************************************************
*
* VLOCITY, INC. CONFIDENTIAL
* __________________
*
* [2014] - [2020] Vlocity, Inc.
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Vlocity, Inc. and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Vlocity, Inc. and its suppliers and may be
* covered by U.S. and Foreign Patents, patents in process, and are
* protected by trade secret or copyright law. Dissemination of this
* information and reproduction, modification or reverse-engineering
* of this material, is prohibited unless prior written permission
* is obtained from Vlocity, Inc.
*
*/
import { LightningElement, track, api } from "lwc";
import { DCBaseComponent } from "c/dcBaseComponent";
import { images } from "c/dcMockData";
import * as Authentication from "c/dcCustomAuthenticationUtil";
/**
* @class DCGlobalHeader
* @extends {DCBaseComponent} Extends the DCBaseComponent base class
*
* @classdesc
* c-dc-global-header is a component used for rendering a global header which is available accross all components except checkout.
*
* @example
* Sample Usage -
*
* Include the component in your template simply by adding c-dc-global-header custom tag
*
* <c-dc-global-header></c-dc-global-header>
*
* KEY INFO -
*
* events fired : "vlocity-dc-router", "vlocity-dc-sign-in" and "vlocity-dc-sign-out"
*
* events registered :
*
* | Event Name | Event source component | Callback Function | Description |
* |--------------------------------|---------------------------------|------------------------|--------------------------------------------|
* | vlocity-dc-login-complete | c-dc-sign-in | loginSuccess() | Event triggered on login |
*
* Dependency - c-dc-global-header is a global component and doesn't have any dependency
*
* Sample with slots -
*
* <c-dc-global-header>
* <div slot="{slot_name}">
* Custom header HTML elements goes here
* </div>
* </c-dc-global-header>
*
* List of available slots -
*
* | Slot names | Dynamic | Description | Impact |
* |-----------------------------|-------------|---------------------------------|----------------------------------------|
* | dc-global-header | - | Wrapper for header elements | Replaces header elements |
*
*/
export default class DCGlobalHeader extends DCBaseComponent(LightningElement) {
@track icons;
@track _isLoggedIn = false;
@track loading = false;
@track translatedLabelsObj = {};
_checkoutApiUrl = null;
@api
set isLoggedIn(val) {
if (val != null || val != undefined) {
this._isLoggedIn = val;
}
}
get isLoggedIn() {
return this._isLoggedIn;
}
@api
set checkoutApiUrl(val) {
if (val) {
this._checkoutApiUrl = val;
this.checkoutNodeServerUrl = val;
}
}
get checkoutApiUrl() {
return this._checkoutApiUrl;
}
connectedCallback() {
this.getSDKInstance();
this.getTranslationLabels();
this.icons = images;
this.loginSuccessEventHandler = {
result: this.loginSuccess.bind(this),
};
}
/**
* Method to get digital commerce SDK instance.
* @memberof DCGlobalHeader
*/
getSDKInstance() {
this.getDigitalCommerceSDK()
.then((sdkInstance) => {
this.digitalCommerceSDK = sdkInstance;
this.digitalCommerceSDK.register(
"vlocity-dc-login-complete",
this.loginSuccessEventHandler
);
})
.catch((e) => {
this.loading = false;
console.error("Error in getting SDK instance ", e);
});
}
/**
* Method to get digital commerce translations.
* @memberof DCGlobalHeader
*/
getTranslationLabels() {
const labelsToFetch = ["CPQSubmit", "DCSignIn", "DCSignOut", "DCMyAccount"];
this.fetchTranslatedLabels(labelsToFetch).then((labels) => {
this.translatedLabelsObj = labels;
});
}
/**
* Method to navigate to my accounts
* @memberof DCGlobalHeader
*/
openAccount() {
this.advanceOSNextStep("MyAccount");
if (this.isLoggedIn) {
this.digitalCommerceSDK &&
this.digitalCommerceSDK.fire("vlocity-dc-router", "result", {
path: "myAccount",
});
} else {
this.accountNavigation = true;
this.openLoginModal();
}
}
/**
* Method to navigate to home screen
* @memberof DCGlobalHeader
*/
navigateToHome() {
this.omniApplyCallResp({
isAsset: false,
cartContextKey: "",
cartResponse: null
});
this.advanceOSNextStep("SelectOffer");
this.digitalCommerceSDK &&
this.digitalCommerceSDK.fire("vlocity-dc-router", "result", {
path: "getOffers",
});
}
/**
* Method to open login modal
* @memberof DCGlobalHeader
*/
openLoginModal() {
let ele = this.template.querySelector(".nds-dc-login-modal");
ele && ele.openModal();
}
/**
* callback function for event vlocity-dc-login-complete
* @memberof DCGlobalHeader
*/
loginSuccess(data) {
this.closeLoginModal();
this.loading = false;
if (data && data.email) {
this.isLoggedIn = true;
if (this.accountNavigation) {
this.openAccount();
}
}
}
/**
* Method to signOut the user.
* @memberof DCGlobalHeader
*/
async doSignOut() {
this.loading = true;
Authentication.signOut()
.then(async () => {
let input = this.signOutGetInput();
let udpatedInput = await this.signOutPreHook(input);
this.signOutPreSDKCalls();
this.signOutSDKCall(udpatedInput);
})
.catch((error) => {
this.signOutHandleFailure(error);
});
}
/**
* Function to fetch the sign in user sdk call inputs
* @memberof DCGlobalHeader
*/
signOutGetInput() {
return Object.assign(this.digitalCommerceSDK.createSignOutUserInput(), {});
}
/**
* A custom function to be used by customers for customisation, any custom action prior to sign out call can be written here
* @memberof DCGlobalHeader
*/
signOutPreHook(input) {
return Promise.resolve(input);
}
/**
* This function is used to do any changes prior to sdk calls
* @memberof DCGlobalHeader
*/
signOutPreSDKCalls() {
this.loading = true;
}
/**
* This function is used to do actual sdk calls
* @memberof DCGlobalHeader
*/
signOutSDKCall(input) {
this.digitalCommerceSDK
.signOutUser(input)
.then((response) => {
this.signOutProcessResponse(response);
this.signOutPostHook(response);
})
.catch((error) => {
this.signOutHandleFailure(error);
});
}
/**
* This function is used to process signOut response
* @param {object} response - Response Object from SDK call.
* @memberof DCGlobalHeader
*/
signOutProcessResponse(response) {
this.isLoggedIn = false;
this.loading = false;
this.digitalCommerceSDK.fire("vlocity-dc-sign-out", "result", {});
sessionStorage.setItem("isLoggedIn", false);
this.navigateToHome();
}
/**
* A custom function to be used by customers for customisation, any custom action after sign in call can be written here
* @memberof DCGlobalHeader
*/
signOutPostHook(response) {}
/**
* A custom function to be used by customers for handling api failures
* @memberof DCGlobalHeader
*/
signOutHandleFailure(error) {
this.loading = false;
}
/**
* Method to close login modal
* @memberof DCGlobalHeader
*/
closeLoginModal() {
this.template.querySelector(".nds-dc-login-modal").closeModal();
}
/**
* Method to initiate login/signup SDK call.
* @memberof DCGlobalHeader
*/
initLogin() {
this.loading = true;
this.digitalCommerceSDK &&
this.digitalCommerceSDK.fire("vlocity-dc-sign-in", "result", {});
}
disconnectedCallback() {
this.digitalCommerceSDK &&
this.digitalCommerceSDK.unregister(
"vlocity-dc-login-complete",
this.loginSuccessEventHandler
);
}
}