File

feature-libs/product-configurator/common/components/configurator-cart-entry-info/configurator-cart-entry-info.component.ts

Metadata

selector cx-configurator-cart-entry-info
templateUrl ./configurator-cart-entry-info.component.html

Index

Properties
Methods

Constructor

constructor(cartItemContext: CartItemContext, commonConfigUtilsService: CommonConfiguratorUtilsService)
Parameters :
Name Type Optional
cartItemContext CartItemContext No
commonConfigUtilsService CommonConfiguratorUtilsService No

Methods

hasStatus
hasStatus(item: OrderEntry)

Verifies whether the configuration infos have any entries and the first entry has a status. Only in this case we want to display the configuration summary

Parameters :
Name Type Optional Description
item OrderEntry No
  • Cart item
Returns : boolean
  • whether the status of configuration infos entry has status
isAttributeBasedConfigurator
isAttributeBasedConfigurator(item: OrderEntry)

Verifies whether the configurator type is attribute based one.

Parameters :
Name Type Optional Description
item OrderEntry No
  • Order entry item
Returns : boolean
  • 'True' if the expected configurator type, otherwise 'fasle'

Properties

Readonly orderEntry$
Type : Observable<OrderEntry>
Default value : this.cartItemContext?.item$ ?? EMPTY
Readonly quantityControl$
Type : Observable<FormControl>
Default value : this.cartItemContext?.quantityControl$ ?? EMPTY
Readonly readonly$
Type : Observable<boolean>
Default value : this.cartItemContext?.readonly$ ?? EMPTY
Readonly shouldShowButton$
Type : Observable<boolean>
Default value : this.commonConfigUtilsService.isActiveCartContext(this.cartItemContext)
import { Component, Optional } from '@angular/core';
import { FormControl } from '@angular/forms';
import { OrderEntry } from '@spartacus/core';
import { CartItemContext } from '@spartacus/storefront';
import { EMPTY, Observable } from 'rxjs';
import { CommonConfiguratorUtilsService } from '../../shared/utils/common-configurator-utils.service';

@Component({
  selector: 'cx-configurator-cart-entry-info',
  templateUrl: './configurator-cart-entry-info.component.html',
})
export class ConfiguratorCartEntryInfoComponent {
  constructor(
    @Optional() protected cartItemContext: CartItemContext,
    protected commonConfigUtilsService: CommonConfiguratorUtilsService
  ) {}

  readonly orderEntry$: Observable<OrderEntry> =
    this.cartItemContext?.item$ ?? EMPTY;

  readonly quantityControl$: Observable<FormControl> =
    this.cartItemContext?.quantityControl$ ?? EMPTY;

  readonly readonly$: Observable<boolean> =
    this.cartItemContext?.readonly$ ?? EMPTY;

  // TODO: remove the logic below when configurable products support "Saved Cart" and "Save For Later"
  readonly shouldShowButton$: Observable<boolean> =
    this.commonConfigUtilsService.isActiveCartContext(this.cartItemContext);

  /**
   * Verifies whether the configuration infos have any entries and the first entry has a status.
   * Only in this case we want to display the configuration summary
   *
   * @param {OrderEntry} item - Cart item
   * @returns {boolean} - whether the status of configuration infos entry has status
   */
  hasStatus(item: OrderEntry): boolean {
    const configurationInfos = item.configurationInfos;

    return configurationInfos
      ? configurationInfos.length > 0 &&
          configurationInfos[0]?.status !== 'NONE'
      : false;
  }

  /**
   * Verifies whether the configurator type is attribute based one.
   *
   * @param {OrderEntry} item - Order entry item
   * @returns {boolean} - 'True' if the expected configurator type, otherwise 'fasle'
   */
  isAttributeBasedConfigurator(item: OrderEntry): boolean {
    const configurationInfos = item.configurationInfos;

    const attributeBased = configurationInfos
      ? this.commonConfigUtilsService.isAttributeBasedConfigurator(
          configurationInfos[0]?.configuratorType
        )
      : false;
    return attributeBased ? attributeBased : false;
  }
}
<ng-container *ngIf="orderEntry$ | async as orderEntry">
  <ng-container *ngIf="isAttributeBasedConfigurator(orderEntry)">
    <ng-container *ngIf="hasStatus(orderEntry)">
      <div
        class="cx-configuration-info"
        *ngFor="let info of orderEntry.configurationInfos"
      >
        <div class="cx-label">{{ info?.configurationLabel }}:</div>
        <div class="cx-value">
          {{ info?.configurationValue }}
        </div>
      </div>
    </ng-container>

    <cx-configure-cart-entry
      *ngIf="
        (shouldShowButton$ | async) &&
          orderEntry?.product?.configurable &&
          quantityControl$ | async as quantityControl
      "
      [cartEntry]="orderEntry"
      [readOnly]="readonly$ | async"
      [msgBanner]="false"
      [disabled]="quantityControl.disabled"
    ></cx-configure-cart-entry>
  </ng-container>
</ng-container>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""