vlocity-dc-asset-item-details/vlocity-dc-asset-item-details.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 assetDetailsTemplate from "./vlocity-dc-asset-item-details.template";
import { digitalCommerceSDKInstance } from "../vlocity-dc-utils/vlocity-dc-sdk-utils";
import VlocityDCBaseComponent from "../vlocity-dc-base-component/vlocity-dc-base-component";
import { getPromotions } from "../vlocity-dc-utils/vlocity-dc-common-util";

/**
 * @class VlocityDCAssetItemDetails
 * @extends {LitElement} Extend the LitElement base class
 *
 * @classdesc
 * vlocity-dc-asset-item-details is a component used for displaying asset details for each asset.
 * @property {Object} asset - an object containing current child asset
 * @property {Boolean} isParent - a boolean value which determines if current asset is parent
 *
 * @example
 * Sample Usage -
 *
 * Include the component in your template by adding vlocity-dc-asset-item-details custom tag
 *
 * <vlocity-dc-asset-item-details .asset="${asset} isParent="{true}"></vlocity-dc-asset-item-details>
 *
 * | Attribute Name    | Type Expected                                                                   | Required |
 * |-------------------|---------------------------------------------------------------------------------|----------|
 * | assets            | It expects an object which contains current child asset                         |   Yes    |
 * | isParent          | It expects a boolean value determines if current asset is parent                |   Yes    |
 *
 *  KEY INFO -
 *
 *  events fired : "none"
 *
 *  events registered : "none"
 *
 *  Dependency - vlocity-dc-asset-item-details is a child level component which is commonly used inside the vlocity-dc-asset-details
 *  component to display the child and nested child assets.
 *
 *
 *                | Parent Component          | Expected Children Components |
 *                |---------------------------|------------------------------|
 *                | vlocity-dc-asset-details  | none                         |
 *
 *
 * Sample with slots -
 *
 * <vlocity-dc-asset-item-details>
 *    <span slot="{slot_name}">
 *      Custom HTML elements goes here
 *    </span>
 * </vlocity-dc-asset-item-details>
 *
 * List of available slots -
 *
 * | Slot names                  | Dynamic     | Description                        | Impact                                 |
 * |--------------------------   |-------------|------------------------------------|----------------------------------------|
 * | nds-dc-asset-item-details   | -           | Wrapper for asset item details     | Replaces each asset detail view        |
 *
 */

export default class VlocityDCAssetItemDetails extends VlocityDCBaseComponent {
  constructor() {
    super(); // always call super() first in the ctor.
    this.root = this;
    this.template = assetDetailsTemplate;
    this.digitalCommerceTranslation =
      digitalCommerceSDKInstance() &&
      digitalCommerceSDKInstance().digitalCommerceTranslation;
  }

  /**
   *  Properties that will be available in the template binding
   * @readonly
   * @memberof VlocityDCAssetItemDetails
   * @static
   */
  static get properties() {
    return {
      asset: Object,
      isParent: String
    };
  }
  connectedCallback() {
    super.connectedCallback();
  }

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

  /**
   * Method to fetch promotion string from getPromotions utility
   * @memberof VlocityDCAssetItemDetails
   */
  getPromotions() {
    return getPromotions(this.asset);
  }
}

customElements.define(
  "vlocity-dc-asset-item-details",
  VlocityDCAssetItemDetails
);