File

feature-libs/product-configurator/common/components/configurator-issues-notification/configurator-issues-notification.component.ts

Metadata

selector cx-configurator-issues-notification
templateUrl ./configurator-issues-notification.component.html

Index

Properties
Methods

Constructor

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

Methods

getNumberOfIssues
getNumberOfIssues(item: OrderEntry)

Retrieves the number of issues at the cart item.

Parameters :
Name Type Optional Description
item OrderEntry No
  • Cart item
Returns : number
  • the number of issues at the cart item
hasIssues
hasIssues(item: OrderEntry)

Verifies whether the item has any issues.

Parameters :
Name Type Optional Description
item OrderEntry No
  • Cart item
Returns : boolean
  • whether there are any issues

Properties

iconTypes
Default value : ICON_TYPE
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, ICON_TYPE } from '@spartacus/storefront';
import { EMPTY, Observable } from 'rxjs';
import { CommonConfiguratorUtilsService } from '../../shared/utils/common-configurator-utils.service';

@Component({
  selector: 'cx-configurator-issues-notification',
  templateUrl: './configurator-issues-notification.component.html',
})
export class ConfiguratorIssuesNotificationComponent {
  iconTypes = ICON_TYPE;

  constructor(
    protected commonConfigUtilsService: CommonConfiguratorUtilsService,
    @Optional() protected cartItemContext: CartItemContext
  ) {}

  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 item has any issues.
   *
   * @param {OrderEntry} item - Cart item
   * @returns {boolean} - whether there are any issues
   */
  hasIssues(item: OrderEntry): boolean {
    return this.commonConfigUtilsService.hasIssues(item);
  }

  /**
   * Retrieves the number of issues at the cart item.
   *
   * @param {OrderEntry} item - Cart item
   * @returns {number} - the number of issues at the cart item
   */
  getNumberOfIssues(item: OrderEntry): number {
    return this.commonConfigUtilsService.getNumberOfIssues(item);
  }
}
<ng-container *ngIf="orderEntry$ | async as orderEntry">
  <ng-container *ngIf="hasIssues(orderEntry) && !(readonly$ | async)">
    <cx-icon [type]="iconTypes.ERROR"></cx-icon>
    <div class="cx-error-msg">
      {{
        'configurator.notificationBanner.numberOfIssues'
          | cxTranslate: { count: getNumberOfIssues(orderEntry) }
      }}
      <cx-configure-cart-entry
        class="cx-error-msg-action"
        *ngIf="
          (shouldShowButton$ | async) &&
            orderEntry?.product?.configurable &&
            quantityControl$ | async as quantityControl
        "
        [cartEntry]="orderEntry"
        [readOnly]="readonly$ | async"
        [msgBanner]="true"
        [disabled]="quantityControl.disabled"
      ></cx-configure-cart-entry>
    </div>
  </ng-container>
</ng-container>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""