Interface: GroupContainerWithStatus

Represents a container of block groups with aggregated selection status.

This interface extends the basic BlockGroupContainer with comprehensive status information about all block groups within the container. It provides a high-level view of configuration completeness across multiple related groups, enabling efficient validation and UI state management for complex, multi-tiered product configurations.

GroupContainerWithStatus is essential for implementing two-level navigation structures where groups are organized into logical containers. It aggregates validation states from all contained groups, making it easy to identify which containers need user attention and which are fully configured.

This status-enriched container is particularly valuable for:

• Building accordion or tab interfaces with validation indicators
• Implementing progressive configuration workflows
• Showing configuration progress across different product aspects
• Highlighting incomplete sections in complex products

Example

// Container for "Performance" options with multiple groups
{
  id: "performance-container",
  containerName: "Performance",
  groupNames: ["engine-group", "transmission-group", "suspension-group"],
  values: [
    {
      name: "Engine",
      value: [{ name: "Type", value: "V8" }, { name: "Turbo", value: "Twin" }],
      hasErrors: false
    },
    {
      name: "Transmission",
      value: [{ name: "Type", value: "" }],
      hasErrors: true  // Missing required selection
    }
  ],
  hasErrors: true  // Aggregated from groups
}

Extends

• BlockGroupContainer

Properties

containerId

containerId: string

Unique identifier for this container instance.

A stable, unique string that identifies this container within the system. This ID is used for programmatic access, state management, event handling, and maintaining relationships between containers and other system components.

Container IDs should follow consistent naming conventions within the system:

• Use kebab-case or snake_case consistently
• Include semantic meaning when possible
• Avoid special characters that might cause issues in URLs or attributes
• Consider prefixing with container type for clarity

Once assigned, this ID should not change as other parts of the system may maintain references to it. Changes to the ID could break saved configurations, user preferences, or analytics tracking.

Example

"interior-options-container"
"performance_settings_container"
"cat_premium_features"
"workflow-step-1"

Inherited from

BlockGroupContainer.containerId

---

containerName

containerName: string

Display name for this container.

The container's name can be a simple string or a more complex type based on the generic parameter T. This flexibility allows the same container structure to support both single-language and multi-language implementations, or even custom naming schemes with additional metadata.

Common name types include:

• string: Simple text name for single-language implementations
• Translatable<string>: Object with locale keys for multi-language support
• Custom types: Objects containing name with additional display metadata

The name is typically displayed in UI elements like navigation menus, breadcrumbs, accordion headers, or tab labels. The UI implementation determines how to extract and display the appropriate name based on its type.

Template

The type of the name (string by default)

Example

// Simple string name
"Interior Options"

// Translatable name object
{
  en: "Performance Settings",
  es: "Configuración de Rendimiento",
  fr: "Paramètres de Performance"
}

// Custom name with metadata
{
  text: "Advanced Options",
  icon: "gear",
  description: "Fine-tune your configuration"
}

Inherited from

BlockGroupContainer.containerName

---

hasErrors

hasErrors: boolean

Aggregated validation state across all groups in this container.

This boolean is true if ANY group within the container has validation errors or missing required selections. It provides a quick way to determine if a container needs user attention without checking individual groups.

UI implementations typically use this flag to:

• Add error indicators to container headers
• Automatically expand containers with errors
• Show warning badges or counts
• Prevent form submission until resolved
• Guide users to incomplete sections

Example

// In a UI component
if (container.hasErrors) {
  containerElement.classList.add('has-errors');
  errorBadge.textContent = container.values.filter(g => g.hasErrors).length;
  accordion.expand(container.id);
}

---

value

value: string[]

Array of IDs for items contained within this container.

This array holds string references to the elements that belong to this container, maintaining the organizational hierarchy. The IDs reference the actual objects (groups, options, products, etc.) that are logically grouped together.

The order of IDs in this array typically determines the display order of contained items in the UI, making sequence important for user experience. Empty arrays are valid and indicate an empty container that might be populated dynamically based on rules or user permissions.

These IDs should correspond to existing entities in the system

The system uses these IDs to look up the actual objects when building the UI or processing configuration logic.

Example

["group-seats", "group-dashboard", "group-console", "group-ambient"]

Inherited from

BlockGroupContainer.value

---

values

values: BlockGroupSelectedValue[]

Aggregated selection data from all visible block groups within this container.

Array of BlockGroupSelectedValue objects, each representing a block group that belongs to this container and has at least one visible option or selected value. Groups without any selections or visible options are filtered out to keep the interface clean and focused on relevant configuration areas.

This array provides a complete snapshot of the configuration state for all groups in the container, making it easy to:

• Display configuration summaries
• Track progress through the container
• Identify which groups need attention
• Generate specification documents

The order typically matches the order of group IDs in the value property, maintaining consistency in presentation.

Example

values: [
  {
    name: "Exterior Color",
    value: [
      { name: "Paint Type", value: "Metallic" },
      { name: "Color", value: "Deep Blue" }
    ],
    hideOnSpecification: false,
    hasErrors: false
  },
  {
    name: "Wheels",
    value: [
      { name: "Size", value: "20 inch" },
      { name: "Style", value: "Sport Alloy" }
    ],
    hideOnSpecification: false,
    hasErrors: false
  }
]