dcSampleApp/dcSampleApp.js

/*************************************************************************
 *
 * 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 componentTemplate from "./dcSampleApp.html";
import { DCBaseComponent } from "c/dcBaseComponent";

/**
 * @class DCSampleApp
 * @extends {DCBaseComponent} Extends the DCBaseComponent base class
 *
 * @classdesc
 * DCSampleApp is a container class where all components are rendered conditionally.<br/><br/>
 *
 * <b>DCOffersList methods</b> <br/>
 *  1. getSDKInstance - Method to get digital commerce SDK instance.<br/>
 *  2. handleRouter - Method to handle routing between components.<br/>
 *  3. handleUserLogin - Method to handle user login details by storing details into session storage.<br/>
 *  4. updateParentCatalogCode - Method to update catalog Code.<br/>
 *  5. updateCatalogCode - Method to update child catalog Code.<br/>
 *
 *  <b>Features</b> <br>
 *  1. Render the components conditionally.<br/>
 *  2. Handle all the routing details.<br/>
 *
 *  @property {String} apiUrl - URL used to make rest API calls.
 *  @property {String} checkoutApiUrl - URL for making checkout related API's.
 *  @property {String} secureServerApiRequestCredentials - secureServerApiRequestCredentials. eg:include
 *  @property {string} customCatalogCode - optional parameter - custom catalog code to be rendered.
 *  @property {string} checkoutPaymentUrl - optional parameter - payment URL to be rendered.
 *  @property {string} isCommunity - optional parameter - whether components loaded inside community page or not.
 *  @property {string} nameSpace - optional parameter - namespace need to be updated in the SDK.
 *  @example
 *  Sample Usage -
 *
 *  Include the component in your template by adding <c-dc-sample-app> custom tag
 *
 *  <c-dc-sample-app></c-dc-offers-list>
 *
 *
 *  KEY INFO -
 *  events fired : none
 *
 *  Events registered :
 *
 *     | Event Name                       | Event source component    | Callback Function        | Description                                     |
 *     |----------------------------------|---------------------------|--------------------------|-------------------------------------------------|
 *     | vlocity-dc-router                | c-dc-assets-list          | handleRouter()           | Event triggered on routing                      |
 *     | vlocity-dc-update-parent-catalog | c-dc-catalog              | updateParentCatalogCode()| Event triggered on change of catalog code       |
 *     | vlocity-dc-update-catalog-code   | c-dc-child-catalog        | updateCatalogCode()      | Event triggered on change of child catalog code |
 *     | vlocity-dc-login-complete        | c-dc-global-header        | handleUserLogin()        | Event triggered on login complete               |
 *     | vlocity-dc-sign-out              | c-dc-global-header        | handleUserLogin()        | Event triggered on sign out                     |
 *  
 *  List of available slots - 
 *  
 *     | Slot names             | Dynamic     | Description                 | Impact                        |
 *     |------------------------|-------------|-------------------------------------------------------------|
 *     | dc-global-header       | -           | Wrapper for global header   | Replaces <c-dc-global-header> |
 *     | dc-catalog             | -           | Wrapper for parent catalog  | Replaces <c-dc-catalog>       |
 *     | dc-child-catalogs      | -           | Wrapper for child catalogs  | Replaces <c-dc-child-catalogs>|
 *     | dc-offers-list         | -           | Wrapper for offers list     | Replaces <c-dc-offers-list>   |
 *     | dc-offer-config        | -           | Wrapper for offer config    | Replaces <c-dc-offer-config>  |
 *     | dc-offer-addons        | -           | Wrapper for offer addons    | Replaces <c-dc-offer-addons>  |
 *     | dc-shopping-cart       | -           | Wrapper for shopping cart   | Replaces <c-dc-shopping-cart> |
 *     | dc-check-out           | -           | Wrapper for check out       | Replaces <c-dc-check-out>     |
 *     | dc-my-account          | -           | Wrapper for my account      | Replaces <c-dc-my-account>    |
 *
 */

export default class DCSampleApp extends DCBaseComponent(LightningElement) {
  @api apiUrl;
  @api checkoutApiUrl = "";
  @api secureServerApiRequestCredentials = "include";
  @api customCatalogCode = "";
  @api checkoutPaymentUrl = "";
  @api isCommunity = false;
  @api nameSpace = "";
  @track userInfo = {};
  @track isLoggedIn = sessionStorage.getItem("isLoggedIn") || false;
  @track
  route = {
    getOffers: false,
    getOffer: false,
    addons: false,
    shoppingCart: false,
    checkoutCart: false,
    myAccount: false
  };
  @track catalogCode = "";
  @track offerCode = "";
  @track parentCatalogCode;
  @track loading = true;
  @track paymentDetails = {'EffectiveOneTimeTotal__c':0, 'EffectiveRecurringTotal__c':0};
  @track cartContextKey = "";
  @track cartResponse = null;
  @track isAsset = false;
  digitalCommerceSDK = null;
  userInfo = sessionStorage.getItem("userInfo") || {};
  orderId = "";

  connectedCallback() {
    this.handleRouterEventHandler = {
      result: this.handleRouter.bind(this)
    }
    this.updateParentCatalogCodeEventHandler = {
      result: this.updateParentCatalogCode.bind(this)
    }
    this.updateCatalogCodeEventHandler = {
      result: this.updateCatalogCode.bind(this)
    }
    this.handleUserLoginEventHandler = {
      result: this.handleUserLogin.bind(this),
    };
    this.updateApiUrl = this.apiUrl;
    this.checkoutNodeServerUrl = this.checkoutApiUrl;
    this.secureServerRequestCredentials = this.secureServerApiRequestCredentials;
    this.updateNamespace = this.nameSpace;
    this.getSDKInstance();
  }

  /**
   * Method to get digital commerce SDK instance.
   * @memberof DCSampleApp
   */
  getSDKInstance() {
    this.getDigitalCommerceSDK()
      .then(sdkInstance => {
        this.loading = false;
        this.route.getOffers = true;
        this.digitalCommerceSDK = sdkInstance;
        this.digitalCommerceSDK.register("vlocity-dc-router", this.handleRouterEventHandler);
        this.digitalCommerceSDK.register("vlocity-dc-update-parent-catalog", this.updateParentCatalogCodeEventHandler);
        this.digitalCommerceSDK.register("vlocity-dc-update-catalog-code", this.updateCatalogCodeEventHandler);
        this.digitalCommerceSDK.register("vlocity-dc-login-complete", this.handleUserLoginEventHandler);
        this.digitalCommerceSDK.register("vlocity-dc-sign-out", this.handleUserLoginEventHandler);
      })
      .catch(e => {
        console.error("Error in getting SDK instance ", e);
        this.loading = false;
      });
  }

  /**
   * Callback method for router (vlocity-dc-router).
   * @param {object} data - data to be passed while routing
   * @memberof DCSampleApp
   */
  handleRouter(data) {
    if (this.customCatalogCode !== "") {
      this.catalogCode = this.customCatalogCode;
    } else if (data.catalogCode) {
      this.catalogCode = data.catalogCode;
    }
    if (data.offerCode) {
      this.offerCode = data.offerCode;
    }
    if (this.digitalCommerceSDK && this.digitalCommerceSDK.cartResponse) {
      this.paymentDetails = this.digitalCommerceSDK.cartResponse.result.totals;
    }
    if (data.userInfo) {
      this.userInfo = data.userInfo;
    }
    if (data.orderId) {
      this.orderId = data.orderId;
    }
    if (data.source === "assets") {
      this.isAsset = true;
    }
    if (data.cartResponse) {
      this.cartResponse = data.cartResponse;
    }

    this.digitalCommerceSDK.cartContextKey = data.cartContextKey
      ? data.cartContextKey
      : this.digitalCommerceSDK.cartContextKey;

    this.route = {
      getOffers: false,
      getOffer: false,
      addons: false,
      shoppingCart: false,
      checkoutCart: false,
      myAccount: false
    };
    this.route[data.path] = true;
  }

  /**
   * Callback method for login success (vlocity-dc-login-complete).
   * @param {object} data - data to be passed while routing
   * @memberof DCSampleApp
   */
  handleUserLogin(data) {
    if (data && data.email) {
      this.isLoggedIn = true;
      this.userInfo = {
        email: data.email,
        name: data.name,
      };
      sessionStorage.setItem("isLoggedIn", true);
      sessionStorage.setItem("userInfo", this.userInfo);
    } else {
      this.isLoggedIn = false;
      this.userInfo = {};
      sessionStorage.setItem("isLoggedIn", false);
      sessionStorage.setItem("userInfo", {});
      this.route = {
        getOffers: false,
        getOffer: false,
        addons: false,
        shoppingCart: false,
        checkoutCart: false,
        myAccount: false,
      };
      this.route["getOffers"] = true;
    }
  }

  /**
   * Callback method for update catalog code (vlocity-dc-update-parent-catalog).
   * @param {string} data - selected catalog code.
   * @memberof DCSampleApp
   */
  updateParentCatalogCode(data) {
    this.parentCatalogCode = null;
    Promise.resolve().then(() => {
      this.parentCatalogCode = data.parentCatalogCode;
    });
  }

  /**
   * Callback method for update child catalog code (vlocity-dc-update-catalog-code).
   * @param {string} data - selected child catalog code.
   * @memberof DCSampleApp
   */
  updateCatalogCode(data) {
    this.catalogCode = null;
    Promise.resolve().then(() => {
      if (this.customCatalogCode) {
        this.catalogCode = this.customCatalogCode;
      } else {
        this.catalogCode = data.catalogCode;
      }
    });
  }

  render() {
    return componentTemplate;
  }
  disconnectedCallback() {
    if (this.digitalCommerceSDK) {
      this.digitalCommerceSDK.unregister("vlocity-dc-router", this.handleRouterEventHandler);
      this.digitalCommerceSDK.unregister("vlocity-dc-update-parent-catalog", this.updateParentCatalogCodeEventHandler);
      this.digitalCommerceSDK.unregister("vlocity-dc-update-catalog-code", this.updateCatalogCodeEventHandler);
      this.digitalCommerceSDK.unregister("vlocity-dc-login-complete", this.handleUserLoginEventHandler);
      this.digitalCommerceSDK.unregister("vlocity-dc-sign-out", this.handleUserLoginEventHandler);
    }
  }
}