WIP feat: Pickup options displayed as tabs

feature-libs/cart/base/components/add-to-cart/add-to-cart.component.html

@@ -23,9 +23,14 @@
  <ng-template
  [cxOutlet]="CartOutlets.ADD_TO_CART_PICKUP_OPTION"
  [(cxComponentRef)]="pickupOptionCompRef"
+ (cxComponentRefChange)="onPickupOptionsCompLoaded()"
  ></ng-template>
  </ng-container>
 
+ <span *ngIf="disableReason" class="cx-invalid-message" tabindex="0">{{
+ disableReason
+ }}</span>
+
  <button
  #addToCartDialogTriggerEl
  *ngIf="hasStock"
@@ -35,7 +40,7 @@
  : 'btn btn-primary btn-block'
  "
  type="submit"
- [disabled]="quantity <= 0 || quantity > maxQuantity"
+ [disabled]="quantity <= 0 || quantity > maxQuantity || disableReason"
  >
  <span
  *ngIf="

feature-libs/cart/base/components/add-to-cart/add-to-cart.component.ts

@@ -32,6 +32,7 @@ import {
  Product,
  isNotNullable,
 } from '@spartacus/core';
+import { AugmentedPointOfService } from '@spartacus/pickup-in-store/root';
 import {
  CmsComponentData,
  CurrentProductService,
@@ -63,7 +64,7 @@ export class AddToCartComponent implements OnInit, OnDestroy {
  @ViewChild('addToCartDialogTriggerEl') addToCartDialogTriggerEl: ElementRef;
 
  maxQuantity: number;
-
+ disableReason: string | null = null;
  hasStock: boolean = false;
  inventoryThreshold: boolean = false;
 
@@ -72,7 +73,7 @@ export class AddToCartComponent implements OnInit, OnDestroy {
 
  quantity = 1;
 
- subscription: Subscription;
+ subscription = new Subscription();
 
  addToCartForm = new UntypedFormGroup({
  quantity: new UntypedFormControl(1, { updateOn: 'blur' }),
@@ -125,17 +126,18 @@ export class AddToCartComponent implements OnInit, OnDestroy {
  this.hasStock = true;
  this.cd.markForCheck();
  } else {
- this.subscription = (
- this.productListItemContext
+ this.subscription.add(
+ (this.productListItemContext
  ? this.productListItemContext.product$
  : this.currentProductService.getProduct()
- )
- .pipe(filter(isNotNullable))
- .subscribe((product) => {
- this.productCode = product.code ?? '';
- this.setStockInfo(product);
- this.cd.markForCheck();
- });
+ )
+ .pipe(filter(isNotNullable))
+ .subscribe((product) => {
+ this.productCode = product.code ?? '';
+ this.setStockInfo(product);
+ this.cd.markForCheck();
+ })
+ );
  }
  }
 
@@ -239,9 +241,24 @@ export class AddToCartComponent implements OnInit, OnDestroy {
  return newEvent;
  }
 
+ onPickupOptionsCompLoaded() {
+ this.subscription.add(
+ this.pickupOptionCompRef.instance.intendedPickupChange.subscribe(
+ (intendedPickupLocation: AugmentedPointOfService | undefined) => {
+ if (
+ intendedPickupLocation?.pickupOption === 'pickup' &&
+ !intendedPickupLocation.displayName
+ ) {
+ this.disableReason = 'Store for Pick Up is not selected';
+ } else {
+ this.disableReason = null;
+ }
+ }
+ )
+ );
+ }
+
  ngOnDestroy() {
- if (this.subscription) {
- this.subscription.unsubscribe();
- }
+ this.subscription.unsubscribe();
  }
 }

feature-libs/cart/base/styles/components/_add-to-cart.scss

@@ -29,4 +29,50 @@
  .buyItAgainLink {
  color: var(--cx-color-primary);
  }
+
+ .cx-invalid-message {
+ font-size: 14px;
+ margin: 6px 0;
+ padding-inline-start: 25px;
+ position: relative;
+ word-break: break-word;
+
+ @include forFeature('a11yImproveContrast') {
+ @include type('7');
+ }
+
+ &::before,
+ &::after {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ width: 20px;
+ height: 20px;
+ }
+
+ &::before {
+ content: '';
+ background-color: var(--cx-color-danger);
+ border-radius: 50%;
+ }
+
+ &::after {
+ content: '!';
+ // TODO: (CXSPA-7588) - Remove feature flag next major release
+ @include forFeature('a11yFormErrorMuteIcon') {
+ content: '!' / '';
+ }
+ color: var(--cx-color-inverse);
+ font-weight: var(--cx-font-weight-bold);
+ text-align: center;
+ line-height: 20px;
+ }
+
+ &:focus {
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ }
+ }
 }

feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.ts

@@ -8,8 +8,10 @@ import {
  Component,
  ElementRef,
  inject,
+ EventEmitter,
  OnDestroy,
  OnInit,
+ Output,
  ViewChild,
  ViewContainerRef,
 } from '@angular/core';
@@ -63,14 +65,16 @@ export class PdpPickupOptionsContainerComponent implements OnInit, OnDestroy {
  * The 'triggerElement' is passed through 'PickupOptionChange' event instead.
  */
  @ViewChild('open') element: ElementRef;
+ @Output() intendedPickupChange = new EventEmitter<
+ AugmentedPointOfService | undefined
+ >();
  subscription = new Subscription();
 
  availableForPickup = false;
  displayPickupLocation$: Observable<string | undefined>;
  pickupOption$: Observable<PickupOption>;
  intendedPickupLocation$: Observable<AugmentedPointOfService | undefined>;
  private productCode: string;
- private displayNameIsSet = false;
 
  private featureConfigService = inject(FeatureConfigService);
  constructor(
@@ -135,8 +139,7 @@ export class PdpPickupOptionsContainerComponent implements OnInit, OnDestroy {
  })
  )
  )
- ),
- tap(() => (this.displayNameIsSet = true))
+ )
  );
 
  this.intendedPickupLocation$ = this.currentProductService.getProduct().pipe(
@@ -147,6 +150,10 @@ export class PdpPickupOptionsContainerComponent implements OnInit, OnDestroy {
  )
  );
 
+ this.subscription.add(
+ this.intendedPickupLocation$.subscribe(this.intendedPickupChange)
+ );
+
  this.subscription.add(
  combineLatest([
  productCode$,
@@ -206,28 +213,16 @@ export class PdpPickupOptionsContainerComponent implements OnInit, OnDestroy {
  this.featureConfigService.isEnabled('a11yDialogTriggerRefocus') &&
  typeof event === 'object'
  ) {
- const { option, triggerElement = undefined } = event;
+ const { option } = event;
  this.intendedPickupLocationService.setPickupOption(
  this.productCode,
  option
  );
- if (option === 'delivery') {
- return;
- }
- if (!this.displayNameIsSet) {
- this.openDialog(triggerElement);
- }
  } else if (typeof event === 'string') {
  this.intendedPickupLocationService.setPickupOption(
  this.productCode,
  event
  );
- if (event === 'delivery') {
- return;
- }
- if (!this.displayNameIsSet) {
- this.openDialog();
- }
  }
  }
 }

feature-libs/pickup-in-store/components/container/pickup-option-dialog/pickup-option-dialog.component.ts

@@ -29,7 +29,7 @@ import {
 } from '@spartacus/storefront';
 
 import { Observable, Subscription } from 'rxjs';
-import { filter, map, take, tap } from 'rxjs/operators';
+import { filter, tap } from 'rxjs/operators';
 
 /**
  * The dialog box to select the pickup location for a product.
@@ -164,25 +164,6 @@ export class PickupOptionDialogComponent implements OnInit, OnDestroy {
  close(reason: string): void {
  this.launchDialogService.closeDialog(reason);
  if (reason === this.CLOSE_WITHOUT_SELECTION) {
- this.intendedPickupLocationService
- .getIntendedLocation(this.productCode)
- .pipe(
- filter(
- (store: AugmentedPointOfService | undefined) =>
- typeof store !== 'undefined'
- ),
- map((store) => store as AugmentedPointOfService),
- filter((store) => !store.name),
- take(1),
- tap(() =>
- this.intendedPickupLocationService.setPickupOption(
- this.productCode,
- 'delivery'
- )
- )
- )
- .subscribe();
- this.pickupOptionFacade.setPickupOption(this.entryNumber, 'delivery');
  return;
  }
  this.subscription.add(