dcMyAccount/dcMyAccount.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 { DCBaseComponent } from "c/dcBaseComponent";
import { images } from "c/dcMockData";

/**
 * @class DCMyAccount
 * @extends {LitElement} Extend the DCBaseComponent base class
 *
 * @classdesc
 * c-dc-my-account is the component for rendering user account.
 * @example
 * Sample Usage -
 *
 * Include the component in your template by adding c-dc-my-account custom tag
 *
 * <c-dc-my-account></c-dc-my-account>
 *
 *
 *  KEY INFO -
 *
 *  events fired : none
 *
 *  events registered : "vlocity-dc-update-asset-list-to-os"
 *
 *  Dependency - c-dc-my-account is an independent component and has no dependency on parent component.
 *  User needs to be logged in to access c-dc-my-account.
 *
 *
 *                | Parent Component | Expected Children Components |
 *                |------------------|------------------------------|
 *                | none             | c-dc-assets-lists            |
 *
 *
 * Sample with slots -
 *
 * <c-dc-my-account>
 *    <span slot="{slot_name}">
 *      Custom HTML elements goes here
 *    </span>
 * </c-dc-my-account>
 *
 * List of available slots -
 *
 * | Slot names                  | Dynamic     | Description                   | Impact                                 |
 * |-----------------------------|-------------|------------------------------------------------------------------------|
 * | dc-loading-message          | -           | Slot for loading message      | Allows adding of loading message       |
 * | dc-assets-list              | -           | Wrapper for assets list       | Replaces assets list                   |
 *
 *
 */
export default class DCMyAccount extends DCBaseComponent(LightningElement) {
  @track loading = false;
  @track assets = [];
  @track translatedLabelsObj = {};

  connectedCallback() {
    if (
      this.isOmniScriptLoaded &&
      this.omniJsonData &&
      this.omniJsonData.showAssets === "hide"
    ) {
      this.omniApplyCallResp({ showAssets: "show" });
      this.advanceOSNextStep();
    } else {
      this.getSDKInstance();
      this.getAccountSDKInstance();
      this.getTranslationLabels();
    }
    this.updateAssetListToOSEventHandler = {
      result: this.updateAssetListToOS.bind(this),
    };
  }

  /**
   * Method to get digital commerce SDK instance.
   * @memberof DCMyAccount
   */
  getSDKInstance() {
    this.getDigitalCommerceSDK()
      .then((sdkInstance) => {
        this.digitalCommerceSDK = sdkInstance;
        if (this.digitalCommerceSDK) {
          this.sdkInstance.accountId = this.accountId;
        }
        this.digitalCommerceSDK.register(
          "vlocity-dc-update-asset-list-to-os",
          this.updateAssetListToOSEventHandler
        );
      })
      .catch((e) => {
        this.loading = false;
        console.error("Error in getting SDK instance ", e);
      });
  }

  /**
   * Method to update assetToBasket details to OmniScript.
   * Callback method for vlocity-dc-update-asset-list-to-os event
   * @memberof DCMyAccount
   */
  updateAssetListToOS(data) {
    this.omniApplyCallResp({
      isAsset: data.isAsset,
      cartContextKey: data.cartContextKey,
      cartResponse: data.cartResponse
    });
    this.advanceOSNextStep();
  }

  /**
   * Method to get account SDK instance.
   * @memberof DCMyAccount
   */
  getAccountSDKInstance() {
    this.loading = true;
    this.getAccountSDK()
      .then((sdkInstance) => {
        this.accountSDK = sdkInstance;
        this.getAssets();
      })
      .catch((e) => {
        this.loading = false;
        console.error("Error in getting SDK instance ", e);
      });
  }

  /**
   * This function is used to make SDK call for getAssets
   * @param {object} input - Current Input Object.
   * @memberof DCMyAccount
   */
  getTranslationLabels() {
    const labelsToFetch = ["DCMyAssets"];
    this.fetchTranslatedLabels(labelsToFetch).then((labels) => {
      this.translatedLabelsObj = labels;
    });
  }

  /**
   * Method to get assets for logged in user
   * @memberof DCMyAccount
   */
  async getAssets() {
    const input = this.getAssetsGetInput();
    const updatedInput = await this.getAssetsPreHook(input);
    this.getAssetsPreSDKCalls();
    this.getAssetsSDKCall(updatedInput);
  }

  /**
   * This function is used to get getAssets input object
   * @memberof DCMyAccount
   */
  getAssetsGetInput() {
    const input =
      this.accountSDK && this.accountSDK.createGetAssetsByAccountInput();
    input.includeCatalogCodes = true;
    if (this.isOmniScriptLoaded && this.accountId) {
      input.accountId = this.accountId;
    }
    return input;
  }

  /**
   * This function is used to execute any action before getAssets SDK call is made.
   *  @memberof DCMyAccount
   */
  getAssetsPreSDKCalls() {
    this.loading = true;
  }

  /**
   * A custom function to be used by customers for customisation, any custom action prior to getAssets call can be written here
   *  @param {object} input - Current Input Object.
   *  @memberof DCMyAccount
   */
  getAssetsPreHook(input) {
    return Promise.resolve(input);
  }

  /**
   * This function is used to make SDK call for getAssets
   * @param {object} input - Current Input Object.
   * @memberof DCMyAccount
   */
  getAssetsSDKCall(input) {
    this.accountSDK
      .getAssetsByAccount(input)
      .then((assets) => {
        this.getAssetsProcessResponse(assets);
        this.getAssetsPostHook(assets);
      })
      .catch((error) => {
        this.getAssetsHandleFailure(error);
      });
  }

  /**
   * This function is used to process getAssets response
   * @param {object} assets - Assets list from SDK call.
   * @memberof DCMyAccount
   */
  getAssetsProcessResponse(assets) {
    this.assets = assets && assets.assetItems;
    this.loading = false;
  }

  /**
   * This function is used to handle getAssets failure
   * @param {object} error - Error Object from SDK call.
   * @memberof DCMyAccount
   */
  getAssetsHandleFailure(error) {
    this.loading = false;
    console.error(error);
  }

  /**
   * A custom function to be used by customers for customisation, any custom action after getAssets call is successfull can be written here
   *  @param {object} response - SDK Response object.
   *  @memberof DCMyAccount
   */
  getAssetsPostHook() {}

  disconnectedCallback() {
    if (this.digitalCommerceSDK) {
      this.digitalCommerceSDK.unregister(
        "vlocity-dc-update-asset-list-to-os",
        this.updateAssetListToOSEventHandler
      );
    }
  }
}