feat: Display container related message

core-libs/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -707,9 +707,12 @@ export interface FeatureTogglesInterface {
    * Nested container products
    * are also reflected in the configurator product title (slash-separated
    * path) and in the product-title details.
+   * When a CPQ configuration has `hasFullConfigurationState`, root-level
+   * conflict and error messages are taken from the typed `messages` list.
    *
    * Affects: `ConfiguratorAttributeProductCardComponent`,
-   * `ConfiguratorProductTitleComponent`
+   * `ConfiguratorProductTitleComponent`,
+   * `ConfiguratorConflictAndErrorMessagesComponent`
    */
   productConfiguratorCPQContainer?: boolean;
 

feature-libs/product-configurator/common/assets/translations/en/configurator.json

@@ -49,6 +49,8 @@
       "singleSelectRequiredMessage": "Select a value",
       "singleSelectAdditionalRequiredMessage": "Select or enter a value",
       "multiSelectRequiredMessage": "Select one or more values",
+      "containerRequiredMessage": "Add {{count}} more product",
+      "containerRequiredMessage_other": "Add {{count}} more products",
       "wrongNumericFormat": "Wrong format, this numerical attribute should be entered according to pattern {{pattern}}",
       "wrongNumericFormatMessage": "Enter the number in the following format: {{pattern}}",
       "wrongIntervalFormat": "Enter a value within the indicated boundaries",
@@ -60,7 +62,14 @@
       "availableProducts": "Available Products ({{count}})",
       "selectAvailableProducts": "Select products",
       "searchAvailableProducts": "Search",
-      "noAvailableProductsFound": "No results found"
+      "noAvailableProductsFound": "No results found",
+      "containerMinMaxRows": "Select {{minRows}} to {{maxRows}} products",
+      "containerMinRows": "Select at least {{count}} product",
+      "containerMinRows_other": "Select at least {{count}} products",
+      "containerMaxRows": "Select up to {{count}} product",
+      "containerMaxRows_other": "Select up to {{count}} products",
+      "containerExactRows": "Select {{count}} product",
+      "containerExactRows_other": "Select {{count}} products"
     },
     "button": {
       "previous": "Previous",

feature-libs/product-configurator/rulebased/_index.scss

@@ -6,7 +6,8 @@ $configurator-rulebased-components:
   cx-required-error-msg, cx-configurator-footer-container,
   cx-configurator-footer-container-item, cx-configurator-form-group,
   cx-configurator-attribute-input-field, cx-configurator-attribute-radio-button,
-  cx-configurator-show-more, cx-configurator-attribute-product-card,
+  cx-configurator-show-more, cx-configurator-message,
+  cx-configurator-attribute-product-card,
   cx-configurator-attribute-single-selection-bundle-dropdown,
   cx-configurator-attribute-single-selection-bundle,
   cx-configurator-attribute-multi-selection-bundle,

feature-libs/product-configurator/rulebased/components/attribute/header/configurator-attribute-header.component.html

@@ -32,6 +32,23 @@
   [productName]="getLabel(expMode, attribute.label, attribute.name)"
   [tabIndex]="0"
 ></cx-configurator-show-more>
+<cx-configurator-message
+  *ngFor="
+    let group of getMessageGroups(
+      (showRequiredMessageForDomainAttribute$ | async) ?? false
+    )
+  "
+  [messages]="group.messages"
+  [messageClass]="group.messageClass"
+  [iconType]="group.iconType"
+  [showIcon]="group.showIcon"
+  [role]="group.role"
+  [idPrefix]="
+    createAttributeUiKey('attribute-msg', attribute.name) +
+    '-' +
+    group.uiKeyPrefix
+  "
+/>
 <div
   *ngIf="attribute.hasConflicts"
   class="cx-conflict-msg"
@@ -73,15 +90,6 @@
     </ng-container>
   </ng-container>
 </div>
-<div
-  *ngIf="showRequiredMessageForDomainAttribute$ | async"
-  class="cx-required-error-msg"
-  id="{{ createAttributeUiKey('attribute-msg', attribute.name) }}"
-  [attr.aria-label]="getRequiredMessageKey() | cxTranslate"
->
-  <cx-icon [type]="iconTypes.ERROR"></cx-icon>
-  {{ getRequiredMessageKey() | cxTranslate }}
-</div>
 <img
   *ngIf="hasImage"
   class="cx-attribute-img"