/*************************************************************************
*
* 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 DCAssetDetails
* @extends {LitElement} Extend the LitElement base class
*
* @classdesc
* c-dc-asset-details is the component for rendering each asset.
* @property {Object} asset - object containing a single asset.
*
* @example
* Sample Usage -
*
* Include the component in your template by adding c-dc-asset-details custom tag
*
* <c-dc-asset-details .asset="${asset}"></c-dc-asset-details>
*
* | Attribute Name | Type Expected | Required |
* |-------------------|---------------------------------------------------------------------------------|----------|
* | asset | It expects an object which contains a current asset from asset list | Yes |
*
* KEY INFO -
*
* events fired : "vlocity-dc-toggle-asset"
*
* events registered : none
*
* Dependency - c-dc-asset-details is a child component of c-dc-assets-list.
* It is used inside c-dc-assets-list for each iteration of assets.
*
*
* | Parent Component | Expected Children Components |
* |--------------------------|------------------------------|
* | c-dc-assets-list | c-dc-asset-attributes |
* | | c-dc-asset-item-details |
*
* Sample with slots -
*
* <c-dc-asset-details >
* <span slot="{slot_name}">
* Custom HTML elements goes here
* </span>
* </c-dc-asset-details >
*
* List of available slots -
*
* | Slot names | Dynamic | Description | Impact |
* |-------------------------- |-------------|---------------------------------|----------------------------------------|
* | dc-asset-name | - | Wrapper for asset name | Replaces asset name |
* | dc-asset-header | - | Wrapper for asset header | Replaces asset header |
* | dc-loading-toggle-icon | - | Wrapper for toggle icon | Replaces toggle icon |
* | dc-asset-details | - | Wrapper for each asset details | Replaces each asset detail view |
* | dc-asset-attributes | - | Wrapper for asset attributes | Replaces asset attributes |
*
*/
export default class DCAssetDetails extends DCBaseComponent(LightningElement) {
@track isDetailsOpen = false;
@track asset = {};
@track currencySymbol = "$";
@track selectedAssets = [];
@track translatedLabelsObj = {};
@track icons;
@api
set asset(val) {
if (val) {
this._asset = val;
}
}
get asset() {
return this._asset;
}
connectedCallback() {
this.icons = images;
this.getSDKInstance();
this.getTranslationLabels();
}
/**
* This function is used to handle toggle of detail view of assets
* @memberof DCAssetDetails
*/
toggleDetails() {
this.isDetailsOpen = !this.isDetailsOpen;
}
/**
* Method to get digital commerce SDK instance.
* @memberof DCAssetDetails
*/
getSDKInstance() {
this.getDigitalCommerceSDK()
.then((sdkInstance) => {
this.digitalCommerceSDK = sdkInstance;
})
.catch((e) => {
this.loading = false;
console.error("Error in getting SDK instance ", e);
});
}
/**
* Method to get translation SDK instance.
* @memberof DCAssetDetails
*/
getTranslationLabels() {
const labelsToFetch = [
"Quantity",
"OneTime",
"DCRecurring",
"CPQPromotions",
];
this.fetchTranslatedLabels(labelsToFetch).then((labels) => {
this.translatedLabelsObj = labels;
});
}
/**
* This function is used to fire event on toggling of checkboxes
* @param {object} event - Current Event Object.
* @memberof DCAssetDetails
*/
toggleCheckbox(event) {
const catalogCode =
this.asset && this.asset.catalogCodes && this.asset.catalogCodes[0];
this.digitalCommerceSDK &&
this.digitalCommerceSDK.fire("vlocity-dc-toggle-asset", "result", {
assetId: event.target.value,
checked: event.target.checked,
catalogCode: catalogCode,
});
}
/**
* This function is used as getter for attributes
* @memberof DCAssetDetails
*/
get assetAttributes() {
return this.asset && this.asset.attributes[0];
}
/**
* Method to fetch promotion string from getPromotions utility
* @memberof DCAssetDetails
*/
get assetPromotions() {
return this.getPromotions(this.asset);
}
}