You are here:
Lightning Web Components for Enterprise Sales Management (Managed Services)
Enterprise Sales Management Lightning web components (LWCs) supplement Vlocity Lightning Web Components by incorporating calls to the Enterprise Sales Management SDK, which makes calls to Enterprise Sales Management APIs, Cart-Based APIs, Digital Commerce cacheable APIs, and Integration Procedures.
This feature is part of the Communications Cloud managed package.
Vlocity Lightning web components are industry-specific components and widgets built on Web Component standards that work with all modern browsers and can be distributed with any JavaScript library or framework. Web components allow you to create new custom, reusable, encapsulated HTML tags to use in your web pages or applications.
Component | Description |
|---|---|
b2bAdjustPriceModal |
Render a modal on the offer configuration page that is used to adjust and override one-time or recurring prices for a product. |
| b2bAmendOrderPauseModal | Refer to the Ammend Order OmniScript to pause the order fulfillment or create a follow-on order. |
b2bApplyDiscountModal |
Render a modal on the offer configuration page that is used to display any available discounts for the product and will display any discounts that have already been applied. |
| b2bApplyDiscountProductSelection | Refer to the cpqCreateCustomDiscountApplyToggle CPQ Flexcard. |
| b2bAssetDataTableCellList | Represents individual cells in the asset data table for each asset. |
| b2bAssetUtils | It's an asset utility Javascript library. |
| b2bAssetViewer | Used in the asset viewer that lists all the assets. |
| b2bAssetToQuoteModal | To add assets to the Enterprise Quote page. It enhances the asset selection process within quotes. |
| b2bAssets | Represents the data table that lists all the assets. |
b2bAttributeConfigOffer |
Render options for making changes to the product attribute configuration. |
B2BBaseComponent |
A base class that is extended by other lightning web components B2BBaseComponent includes methods to load the Newport Design System (NDS) and to show a toast message. |
| b2bBulkEditLineItems | Represents individual line items in the Old Bulk Edit Modal view. |
| b2bBulkEditProductGroup | Represents the product group from which individual products can be added in the Old Bulk Edit Modal view. |
| b2bBulkQuoteProductConfigAttribute | Represents each product attribute during bulk edit. |
| b2bBulkQuoteProductConfigChangedAttribute | Shows the changed attributes in the Bulk Edit save popup. |
| b2bBulkQuoteProductConfiguration | Used in the Old Bulk Edit Modal view to configure the product attribute values. |
b2bButton |
Render a generic button for configuring actions and inputs. Examples: Add and Preview buttons in the cart summary, group and product buttons on the Location and Subscriber subtabs. |
| b2bCOPTargetOfferConfig | Used in the Change of Plan OmniScript guided workflow to configure and compare plans. |
| b2bCOPCompareConfirmModal | Addresses a critical step in the Change of Plan workflow, warning users about irreversible changes during offer comparison. |
B2BCartSummary |
Render the cart summary, including name, price info and actions. |
| b2bCheckboxSelectionMenu | Allows to select and deselect columns and attributes from the Edit Attributes Inline modal view. |
| b2bCloneQuoteModal | Displays options available when you clone a quote. |
| b2bCompareOfferCard | It's the HTML representation of the b2bCompareOffers component. |
| b2bCompareOffers | It shows the user a side-by-side look at the source and the target plans in the Change of Plan workflow. |
b2bConfigCard |
Render each line item on the offer configuration page if the configuration of the product can be done in its line item. |
| b2bConfigPromotion | Displays promotions in b2bOfferconfig that’re added to the working cart. |
b2bConfigPriceValidationModal |
Manages the transition between on-demand and real-time pricing modes. |
b2bDataRowDetail |
Render additional details (if any) for a row on the Locations or Subscriber subtabs |
b2bDataTable |
Render data uploaded for locations or subscribers, grouping, filters, search, sorting, and pagination. |
| b2bDataTableBase | Prevents code duplication while reducing complexity in the child components. |
b2bDataTableCell |
Render editable cells in each row of the Location and Subscriber subtabs. |
b2bDataTableCellList |
Render a list of inline row cells for each record in the data table on the Locations and Subscribers subtabs and the quote summary. |
b2bDataTableWrapper |
A container for the file upload, data table, and map components. |
| b2bDiscountPanel | Displays application of discounts and promotions. |
b2bFileUpload |
Render file selector and field mapping options. |
| b2bFlexCardAssetRelationship | Renders when you open the asset relationship dialog. |
| b2bFlexCardProductRelationship | Render when you modify related product of product relationship rules. |
| b2bGrid | Enables the inline attribute edit for multiple products at the same time. |
| b2bGuidedAddUploadLocation | Allows addition of locations in the guided journey of quote creation. |
| b2bGuidedAdjustPriceModal | It’s the guided journey equivalent of a price adjustment modal. |
| b2bGuidedAttributeConfigOffer | It’s the guided journey equivalent of an offer attribute configuration. |
| b2bGuidedBaseComponent | It’s the guided journey equivalent of b2bBaseComponent. |
| b2bGuidedCartPopupNavigation | Shows a warning popup in the guided journeys to alert the user about locations where the serviceability check or validation wasn't performed. |
| b2bGuidedCategoriesList | It’s the guided journey equivalent of a categories list of product in a working cart. |
| b2bGuidedCategoryItem | Render all the catalog and sub-catalog categories. You can also select catalogs for guided journeys. |
| b2bGuidedConfigCard | Render cartItem and its properties for guided journey in configuration cart |
| b2bGuidedConfigPromotion | Render promotion for cartItem in guided journey. |
| b2bGuidedDataTable | Render data table for locations and quote summary in guided journey. |
| b2bGuidedDataTableCell | Render a cell of data table in b2bGuidedDataTable. |
| b2bGuidedDataTableWrapper | Store and manage metadata for b2bGuidedDataTable. |
| b2bGuidedItemsGrid | Render all the list of items in a grid container. It acts as a container to show the title and list of items in a grid container for guided journeys. |
| b2bGuidedItemsList | Render all the promotions and products. It’s used to list all the promotions and products for guided journey |
| b2bGuidedOfferAddons | Render add-on products and child products in working cart for guided journey. |
| b2bGuidedOfferConfig | Render products and child products in working cart for guided journey. |
| b2bGuidedOfferConfigToolbar | Render toolbar to show properties such as total price and number of products. It also provides a button action to add products to Enterprise cart for a guided journey. |
| b2bGuidedOfferSelection | Lists cart items of working cart and provide a search capability in guided journey. |
| b2bGuidedProductItem | Render specific product cart item in guided journey. |
| b2bGuidedProductItemAddOn | Render specific add-on product cart item in guided journey. |
| b2bGuidedProductRelationship | Render display of any product relationship rules present for a cart item in guided journey. |
| b2bGuidedProductRelationshipDialogue | Manage and display information about product relationships during a Guided Setup process. |
| b2bGuidedPromoItem | Manage and display the promotion items within a Guided Setup process. |
| b2bGuidedSeeProductDetailsDialog | Shows product details in a modal dialog, allowing users to view attributes, conditions, and pricing information in a structured format during a Guided Setup process. |
| b2bGuidedTotalBar | Used for the Total Bar of the working cart. |
b2bHeader |
Render a header on the offer selection and configuration pages with options for searching, sorting, selecting and assigning services to quote members, and so on. |
| b2bIllustration | Render an illustrative image or graphic within a Lightning web component, enhancing the visual representation and communication of the content in a user interface. |
B2BItemsGrid |
A container for rendering product items and promotions from the selected price list in a grid. |
| b2bItemsList | Lists all the promotions and products. |
| b2bLanguageTranslationUtil | Facilitates language translation for a user interface, enabling user to select and show content in their preferred language. |
b2bMap |
Render addresses of locations or subscribers in a Google Map view when a user selects the Show Map toggle. |
| b2bMassDiscountUtil | Manage and update pricing information for multiple items simultaneously, improving the efficiency of discount administration. |
| b2bMoveInputDates | Used for Move-in and Move-out date inputs in the Move Plan modal. |
| b2bMoveReviewSummary | Used for review summary in the Move Plan modal. |
| b2bMoveSelectLocation | Used for selecting a new location in the Move Plan modal. |
| b2bMoveSelectLocationModal | Display New Location modal Select Location in the Move Plan modal. |
b2bNavigationUtil |
Stores and updates route data. A |
| b2bNoProductsIllustration | Provides a "No product found" view in the Relationship modal of the Asset viewer, Quote Summary cart, and Quote Working cart. |
b2bOfferAddons |
Container for rendering child line items or virtual group items recursively |
B2BOfferConfig |
Retrieve the selected offer details and support offer configuration, such as applying adjustments. |
| b2bOfferSelection | Lists cart items of the working cart and provide a search capability in guided journey. |
| b2bPagination | Provides pagination functionality. |
| b2bPreviewCart | Provides preview cart functionality in Product Catalog page. |
B2BProductItem |
Render the products based on the selected category. |
| b2bProductRelationship | Display and Manage relationship rules for a product. |
| b2bProductRelationshipDialogue | Manage and display information about product relationships. It helps users navigate and modify relationships between products. |
| b2bProductTile | Display a single product or offer. It shows product details, pricing, and a call-to-action button, so that the user select and manage products or offers. |
| b2bPromoItem | Display details of promotion. |
| b2bPubsubController | Manages opening and closing of aura popup modals. |
| b2bQuickQuoteCreate | Uses the functionality of Quick Quote to create a quote using Einstein. |
| b2bQuickQuoteQuestionnaire | Display a Quick Quote page that allows users to send queries and receive answers related to products and services. |
| b2bQuickQuoteSetCache | Manages caching recommendations data for Quick Quote. |
| b2bQuickQuoteWrapper | Gathers quote information for Quick Quote. |
b2bQuoteSummary |
Render a summary of the entire quote, including quote line items per subscriber and location. |
| b2bResizeHandler | Creates a resizeable component that allows to resize an element using the resizer handle. |
b2bSDKFactory |
Stores user data and generic methods used by VIPs and Data Mappers. |
b2bSampleApp |
Conditionally render application components based on the current route. |
| b2bSelfServiceAssetUtil | Displays and interact with assets in self-service portal. You can select, sort, and paginate through assets. It also supports features like group by view, select all checkbox, and root asset expansion. |
| b2bSelfServiceAttributeView | Display a list of attributes and their values in self-service portal. |
| b2bSelfServiceClientDetails | Manage communication between different Lightning web components and Flexcards used in self-service portal. |
| b2bSelfServiceConfigureUtil | Manage and configure cart items in self-service portal. |
| b2bSelfServiceOrderSummaryUtil | Manage and show order summary information in self-service portal. |
| b2bSelfServicePasswordInput | Contains a password input field for self-service portal. |
b2bShowMore |
Render product title on the offer selection page. |
| b2bSpreadsheetTreeViewer | Display and interact with hierarchical tree data that allows to search, select, and view items in a spreadsheet-like format. |
| b2bSpreadsheetTreeViewerRoot | Display hierarchical data with expandable and collapsible nodes. It's used to present and navigate through structured information in a compact, and organized way. |
b2bStatusBar |
Render the number of records when users add quote members to a group or add products to the selection. |
| b2bStepDescription | Render step description in Guided and Classic journeys. It displays information such as active tab, selected members count, and allows to navigate through different tabs related to members and products. |
| b2bSubOrder | Allows to view, sort, and perform actions on a list of sub-orders. It supports pagination, row-level actions, and bulk actions, such as canceling, submitting, and deleting sub-orders. |
| b2bTargetOffers | Display target offers for a selected product. |
b2bTotalBar |
Render price totals, the selected number of locations or subscribers, and the add button to add quote members and navigate to the quote summary. |
| b2bTypeahead | Used to implement typeahead functionality. It allows you to select items from a dropdown list while providing a flexible interface. |
b2bUtils |
Provides generic functions of Apex remote calls, Data Mappers, and VIPs. |
b2bPromotionsDetailsModal |
Shows the details of the promotion applied in the quote. |
b2bDeletePromotionModal |
Opens when you disconnect a promotion and displays the associated penalty. |
Retired Components and Their Equivalent Components
Here are the retired components and their equivalent components. You can reimplement or migrate customizations using the equivalent components.
| Retired components | Equivalent components that you can use |
|---|---|
| Classic Journey Product Catalog Page | |
| Guided Journey Configure Products Page | |
If you’re using a retired component, follow these steps to reimplement or migrate customizations:
- Identify customizations: Identify customizations made to the retired components.
- Find equivalent components: Locate equivalent components. Functionality, input attributes, or slots may differ, and direct copy or paste of customizations require reimplementation.
- Reimplement or migrate: Reimplement or migrate your customizations to equivalent components to ensure your application functions correctly without relying on retired components.
If you’re using the Newport Design System (NDS), follow these steps to reimplement or migrate customizations:
- Find equivalent classes: Transition to equivalent classes in the Lightning Design System, typically found under the utilities section.
- Manage custom CSS:
- Create a custom static resource style file.
- Upload the file to your static resources. To learn about uploading and using custom static resource style files effectively, refer to Use Your Custom Static Resource Instead of the Default ESMClassic Static Resource.
See Also: Vlocity Lightning Web Components
