/*************************************************************************
*
* 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";
/**
* @class DCAssetsList
* @extends {LitElement} Extend the DCBaseComponent base class
*
* @classdesc
* c-dc-assets-list is the component for displaying all the assets.
* @property {Array} assets - array containing list of all assets.
*
* @example
* Sample Usage -
*
* Include the component in your template by adding c-dc-assets-list custom tag
*
* <c-dc-assets-list .assets="${assetsList}"></c-dc-assets-list>
*
* | Attribute Name | Type Expected | Required |
* |-------------------|---------------------------------------------------------------------------------|----------|
* | assets | It expects an array which contains a list of all assets | Yes |
*
* KEY INFO -
*
* events fired : "vlocity-dc-route-navigation", "vlocity-dc-update-asset-list-to-os"
*
* events registered :
*
* | Event Name | Event source component | Callback Function | Description |
* |---------------------------------------|----------------------------------------------------|---------------------------|------------------------------------------------|
* | vlocity-dc-toggle-asset | vlocity-dc-asset-details | toggleAssetSelection | toggle asset selection in the asset list |
*
* Dependency - c-dc-assets-list is an independent component and has no dependency on parent component.
* It is commonly used in the account page to display the list of all assets for the logged in users.
*
*
* | Parent Component | Expected Children Components |
* |------------------|------------------------------|
* | none | c-dc-asset-details |
*
*
* Sample with slots -
*
* <c-dc-assets-list>
* <span slot="{slot_name}">
* Custom HTML elements goes here
* </span>
* </c-dc-assets-list>
*
* List of available slots -
*
* | Slot names | Dynamic | Description | Impact |
* |-------------------------- |-------------|------------------------------------------------------------------------|
* | dc-asset-details | - | Wrapper for asset details | Replaces each asset detail view |
* | dc-asset-modify | - | Wrapper for modify button | Replaces modify button |
* | dc-loading-message | - | Wrapper for loading message | Allows adding of loading message |
*
*/
export default class DCAssetsList extends DCBaseComponent(LightningElement) {
@track _assets = [];
@track errorCondition = false;
@track modifyDisabled = true;
@track loading = false;
@track translatedLabelsObj = {};
selectedAssets = [];
catalogCode = "";
@api
set assets(val) {
if (val) {
this._assets = val;
}
}
get assets() {
return this._assets;
}
connectedCallback() {
this.getSDKInstance();
this.getTranslationLabels();
}
/**
* Method to get digital commerce SDK instance.
* @memberof DCAssetsList
*/
getSDKInstance() {
this.getDigitalCommerceSDK()
.then((sdkInstance) => {
this.digitalCommerceSDK = sdkInstance;
this.digitalCommerceSDK.register("vlocity-dc-toggle-asset", {
result: this.toggleAssetSelection.bind(this),
});
})
.catch((e) => {
this.loading = false;
console.error("Error in getting SDK instance ", e);
});
}
/**
* Method to get digital commerce translations.
* @memberof DCAssetsList
*/
getTranslationLabels() {
const labelsToFetch = ["ASSETNoAssets", "DCModify"];
this.fetchTranslatedLabels(labelsToFetch).then((labels) => {
this.translatedLabelsObj = labels;
});
}
/**
* Method to move selected assets to basket
* @memberof DCAssetsList
*/
async modifyAssets() {
const input = this.modifyAssetsGetInput();
const updatedInput = await this.modifyAssetsPreHook(input);
this.modifyAssetsPreSDKCalls();
this.modifyAssetsSDKCall(updatedInput);
}
/**
* This function is used to get assetToBasket input object
* @memberof DCAssetsList
*/
modifyAssetsGetInput() {
const input =
this.digitalCommerceSDK &&
this.digitalCommerceSDK.createAssetToBasketInput();
const newDate = new Date();
newDate.setDate(newDate.getDate() + 1);
input.basketAction = "AssetToBasket";
input.rootAssetIds = this.selectedAssets.join(",");
input.catalogCode = "Phones";
input.requestDateTime = newDate;
if(this.digitalCommerceSDK && this.digitalCommerceSDK.accountId) {
input.context = '{"accountId":"' + this.digitalCommerceSDK.accountId + '"}';
}
return input;
}
/**
* This function is used to execute any action before assetToBasket SDK call is made.
* @memberof DCAssetsList
*/
modifyAssetsPreSDKCalls() {
this.loading = true;
}
/**
* A custom function to be used by customers for customisation, any custom action prior to assetToBasket call can be written here
* @param {object} input - Current Input Object.
* @memberof DCAssetsList
*/
modifyAssetsPreHook(input) {
return Promise.resolve(input);
}
/**
* This function is used to make SDK call for modifyAssets
* @param {object} input - Current Input Object.
* @memberof DCAssetsList
*/
modifyAssetsSDKCall(input) {
this.digitalCommerceSDK &&
this.digitalCommerceSDK
.assetToBasket(input)
.then((atbResponse) => {
this.modifyAssetsProcessResponse(atbResponse);
this.modifyAssetsPostHook(atbResponse);
})
.catch((error) => {
this.modifyAssetsHandleFailure(error);
});
}
/**
* This function is used to process assetToBasket response
* @param {object} assets - Assets list from SDK call.
* @memberof DCAssetsList
*/
modifyAssetsProcessResponse(atbResponse) {
this.loading = false;
if (atbResponse.cartContextKey) {
sessionStorage.setItem("rootAssetIds", this.selectedAssets);
const data = {
path: "shoppingCart",
catalogCode: this.catalogCode,
cartContextKey: atbResponse.cartContextKey,
cartResponse: atbResponse,
source: "assets",
isAsset: true
};
this.digitalCommerceSDK.fire("vlocity-dc-router", "result", data);
this.digitalCommerceSDK.fire("vlocity-dc-update-asset-list-to-os", "result", data);
}
}
/**
* This function is used to handle assetToBasket failure
* @param {object} error - Error Object from SDK call.
* @memberof DCAssetsList
*/
modifyAssetsHandleFailure(error) {
this.loading = false;
console.error(error);
}
/**
* A custom function to be used by customers for customisation, any custom action after assetToBasket call is successfull can be written here
* @param {object} response - SDK Response object.
* @memberof DCAssetsList
*/
modifyAssetsPostHook() {}
/**
* This function is used as event handler for vlocity-dc-toggle-asset event.
* @param {object} assetSelectionData - Event Data.
* @memberof DCAssetsList
*/
toggleAssetSelection(assetSelectionData) {
if (assetSelectionData.checked) {
this.selectedAssets.push(assetSelectionData.assetId);
this.catalogCode = assetSelectionData.catalogCode;
} else {
const index = this.selectedAssets.indexOf(assetSelectionData.assetId);
this.selectedAssets.splice(index, 1);
}
this.modifyDisabled = this.selectedAssets.length === 0;
}
}