vlocity-dc-my-account/vlocity-dc-my-account.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 { LitElement, html } from "lit-element";
import accountTemplate from "./vlocity-dc-my-account.template";
import { digitalCommerceSDKInstance } from "../vlocity-dc-utils/vlocity-dc-sdk-utils";
import VlocityDCBaseComponent from "../vlocity-dc-base-component/vlocity-dc-base-component";

/**
 * @class VlocityDCMyAccount
 * @extends {LitElement} Extend the LitElement base class
 *
 * @classdesc
 * vlocity-my-account is the component for rendering user account.
 * @example
 * Sample Usage -
 *
 * Include the component in your template by adding vlocity-my-account custom tag
 *
 * <vlocity-my-account></vlocity-my-account>
 *
 *
 *  KEY INFO -
 *
 *  events fired : none
 *
 *  events registered : none
 *
 *  Dependency - vlocity-my-account is an independent component and has no dependency on parent component.
 *  User needs to be logged in to access vlocity-my-account.
 *
 *
 *                | Parent Component | Expected Children Components |
 *                |------------------|------------------------------|
 *                | none             | vlocity-dc-assets-lists      |
 *
 *
 * Sample with slots -
 *
 * <vlocity-my-account>
 *    <span slot="{slot_name}">
 *      Custom HTML elements goes here
 *    </span>
 * </vlocity-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 VlocityDCMyAccount extends VlocityDCBaseComponent {
  constructor() {
    super(); // always call super() first in the ctor.
    this.root = this;
    this.template = accountTemplate;
    this.assets = [];
    this.loading = false;
    this.accountSDK =
      digitalCommerceSDKInstance() && digitalCommerceSDKInstance().account;
    this.digitalCommerceTranslation =
      digitalCommerceSDKInstance() &&
      digitalCommerceSDKInstance().digitalCommerceTranslation;
  }

  connectedCallback() {
    super.connectedCallback();
    this.getAssets();
  }

  /**
   *  Properties that will be available in the binding system
   * @readonly
   * @memberof VlocityDCShoppingCart
   * @static
   * @property {Array} assets - assets list.
   */
  static get properties() {
    return {
      assets: Array,
      loading: Boolean
    };
  }

  /**
   * Method to get assets for logged in user
   * @memberof VlocityDCMyAccount
   */
  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 VlocityDCMyAccount
   */
  getAssetsGetInput() {
    const input =
      this.accountSDK && this.accountSDK.createGetAssetsByAccountInput();
    input.includeCatalogCodes = true;
    return input;
  }

  /**
   * This function is used to execute any action before getAssets SDK call is made.
   *  @memberof VlocityDCMyAccount
   */
  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 VlocityDCMyAccount
   */
  getAssetsPreHook(input) {
    return Promise.resolve(input);
  }

  /**
   * This function is used to make SDK call for getAssets
   * @param {object} input - Current Input Object.
   * @memberof VlocityDCMyAccount
   */
  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 VlocityDCMyAccount
   */
  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 VlocityDCMyAccount
   */
  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 VlocityDCMyAccount
   */
  getAssetsPostHook() {}

  render() {
    return this.template(this);
  }
}

customElements.define("vlocity-dc-my-account", VlocityDCMyAccount);