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(