Skip to content

Commit 487bf76

Browse files
lsabaevalsabaeva
committed
Add README.md
1 parent 191839a commit 487bf76

5 files changed

Lines changed: 121 additions & 15 deletions

File tree

‎osComponents/ProductConfiguration/lwc/productConfiguration/README.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# Product Configuration Lightning Web Component
2+
3+
## Overview
4+
5+
The `productConfiguration` Lightning Web Component (LWC) is designed for Digital Insurance Product Configuration workflows. It extends `OmniscriptBaseMixin` to integrate seamlessly with OmniScripts, and makes it easy for users to view, configure, and rate insurance products.
6+
7+
---
8+
9+
## Dependencies
10+
11+
- **Apex Controller**: `InsuranceRatingApexService.postRatingFromLwc`
12+
- **Apex Controller**: `InsuranceRatingApexService.patchRatingFromLwc`
13+
- **Mixin**: `c/omniscriptBaseMixin` (follow the steps under [Prerequisites](../../../README.md#prerequisites))
14+
- **Helper Modules**:
15+
- `dataManager.js` – Tree building and grid transformation utilities
16+
- `labelsAndConstants.js` – Validation messages, labels, and constants
17+
18+
## Components Included
19+
20+
| Component | Description |
21+
| :---- | :---- |
22+
| `productConfiguration` | Main component for displaying, configuring and rating insurance products.|
23+
| `productConfigurationMessageItem` | Notification component used to display validation results, configuration errors, or informational messages within the product.|
24+
25+
### Supporting Files
26+
27+
| File | Type | Description |
28+
| :---- | :---- | :---- |
29+
| `InsuranceRatingApexService.cls` | Apex Class | Service class that wraps the createInsuranceRating and repriceInsuranceProduct invocable action.|
30+
| `ProductSelectionLabels.labels` | Custom Labels | UI text labels for translation support |
31+
32+
---
33+
34+
## Public Properties (`@api`)
35+
36+
| Property | Type | Default | Description |
37+
| :---- | :---- | :---- | :---- |
38+
| `additionalFields` | `Object` | `{}` | Additional fields to include in the rating request payload. |
39+
| `clearStateOnChange` | `String` | — | JSON stringified array of element names whose state should be cleared when selection changes. |
40+
| `clearStateOnPrev` | `Boolean/String` | — | When `true` or `'true'`, enables custom navigation buttons and clears state when navigating to the previous step. |
41+
| `ratingInputs` | `Array` | `[]` | Array of rating input objects containing product configuration data. Supports reusable and non-reusable inputs with `instanceKeys`. |
42+
| `ratingOptions` | `Object` | `{}` | Rating options passed to the API. Defaults `executePricing` and `executeConfigurationRules` to `true`. |
43+
| `transactionType` | `String` | — | The transaction type for the rating request |
44+
| `contextId` | `String` | — | Input property for PATCH first scenario |
45+
46+
Rating inputs and options are based on the [Insurance Product Rating API](https://developer.salesforce.com/docs/atlas.en-us.insurance_developer_guide.meta/insurance_developer_guide/connect_resources_product_rating.htm%20%20).
47+
48+
## HTML Markup
49+
50+
### Side Panel Layout
51+
52+
Displays a tree navigation showing the product hierarchy, allowing users to select products/coverages to configure.
53+
54+
- First product selected as default
55+
- Selected item highlights and drives the main area content
56+
57+
### Main Section Layout
58+
59+
Shows the selected product's details, attributes (read-only), and associated coverages with their configurable attributes.
60+
61+
**Attribute Details Card:**
62+
- Displays product title, attributes and price with tax info.
63+
- Product attributes grouped by category (read-only display)
64+
65+
**Coverages Card (conditional):**
66+
- Displays if product has coverages
67+
- When selected, expands to show editable coverage attributes
68+
- Coverage attributes grouped by category in two-column layout
69+
70+
### Configuration Messages Layout
71+
- Collapsible message notification area with toggle button
72+
- Uses the product-configuration-message-item component
73+
74+
---
75+
76+
## Component Usage
77+
78+
Embed the productConfiguration LWC in an Omniscript by using the Custom Lightning Web Component element in a step.
79+
80+
### Adding to an OmniScript Step
81+
82+
1. Open your OmniScript in OmniStudio Designer
83+
2. Add a **Custom Lightning Web Component** element to your step
84+
3. Set the **LWC Component Name** to `c-product-configuration`
85+
4. Configure the component properties (see [Public Properties](#public-properties-api))
86+
87+
If you set `clearStateOnPrev` to `true`, hide the standard Previous and Next buttons in the step by reducing their width to 0\. The productSelection LWC shows Previous and Next buttons for navigation.
88+
89+
### Data Output Structure
90+
91+
The component outputs data to OmniScript via `omniUpdateDataJson()`:
92+
93+
```javascript
94+
{ contextId: "contextId-123" }
95+
```
96+
97+
---
98+
99+
## Troubleshooting
100+
101+
### Common Issues
102+
103+
| Issue | Possible Cause | Solution |
104+
| :---- | :---- | :---- |
105+
| "No products are available" | Rating API returned no products or ran into error | Verify `rootProductCodes` and `ratingInputs` are correct. |
106+
| OmniscriptBaseMixin not found on component deployment | Missing Omniscript customization package | Ensure `omniscriptBaseMixin` and utility modules are deployed by following the [Prerequisites](../../../README.md#prerequisites). |
107+
| Missing context or product details on rating call response | Wrong API version | Ensure that all components and supporting files use Salesforce API version **66.0** or later. |
108+
| State not persisting | clearStateOnPrev is not set to true | Hide step buttons by setting width to 0 and set `clearStateOnPrev` to true. |
109+
110+
### Debugging
111+
112+
1. **Debug Logs:** Enable debug logs for the `InsuranceRatingApexService` class.
113+
2. **Browser console:** The component logs errors to the console.
114+
3. **OmniScript data panel:** Check the data JSON for output values.
115+
116+
## API Version
117+
118+
All components and supporting files must use Salesforce API version **66.0** or later.

‎osComponents/ProductConfiguration/lwc/productConfiguration/dataManager.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CONSTANTS } from './productConfigurationConstantsAndLabels';
1+
import { CONSTANTS } from './labelsAndConstants';
22

33
/**
44
* Builds tree structure from contextJSON for lightning-tree component

osComponents/ProductConfiguration/lwc/productConfiguration/productConfigurationConstantsAndLabels.js renamed to osComponents/ProductConfiguration/lwc/productConfiguration/labelsAndConstants.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,6 @@ export const LABELS = {
6969
export const CONSTANTS = {
7070
// Component constants
7171
REFERENCE_FIELD_ID: 'id',
72-
// Instrumentation constants
73-
PRODUCT_FEATURE_ID: 'aLUEE0000000Uue4AE',
7472
EVENT_NAMES: {
7573
VIEW: 'productConfiguration.view',
7674
ATTRIBUTE_CHANGE: 'productConfiguration.attributechange',

‎osComponents/ProductConfiguration/lwc/productConfiguration/productConfiguration.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,6 @@ <h2 class="slds-text-heading_small">{labels.MESSAGES} ({configMessageCount})</h2
3939
<template if:true={treeItems.length}>
4040
<lightning-tree items={treeItems} selected-item={selectedNode.name} onselect={handleSelect}></lightning-tree>
4141
</template>
42-
<!-- <template if:false={treeItems.length}>
43-
<div class="slds-align_absolute-center slds-p-vertical_large">
44-
<lightning-spinner alternative-text={labels.LOADING} size="medium"></lightning-spinner>
45-
</div>
46-
</template> -->
4742
</div>
4843

4944
<!-- Right Panel: Details and Coverages -->

‎osComponents/ProductConfiguration/lwc/productConfiguration/productConfiguration.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import CURRENCY from '@salesforce/i18n/currency';
55
import postRatingFromLwc from '@salesforce/apex/InsuranceRatingApexService.postRatingFromLwc';
66
import patchRatingFromLwc from '@salesforce/apex/InsuranceRatingApexService.patchRatingFromLwc';
77
import { OmniscriptBaseMixin } from 'c/omniscriptBaseMixin';
8-
import { LABELS } from './productConfigurationConstantsAndLabels';
8+
import { LABELS } from './labelsAndConstants';
99

1010
const DELIMITERS = ['/', '#'];
1111

@@ -38,11 +38,6 @@ export default class ProdCfg extends OmniscriptBaseMixin(LightningElement) {
3838
super();
3939
}
4040

41-
42-
// get isLookup() {
43-
// return this.type === FIELD_TYPES.LOOKUP;
44-
// }
45-
4641
connectedCallback() {
4742
const stateData = this.omniGetSaveState();
4843
if (stateData && stateData.savedProduct) {
@@ -52,7 +47,7 @@ export default class ProdCfg extends OmniscriptBaseMixin(LightningElement) {
5247
}
5348
}
5449

55-
/**
50+
/**
5651
* OS - Set UI to previous saved state
5752
* @param {Object} stateData
5853
*/

0 commit comments

Comments
 (0)