Bug/gh 8595 synchronization issues (#8623)

* GH-8595 Disable addToCart button when pending changes are present

* GH-8595 Simplify effects and add tests

feature-libs/product/configurators/common/src/components/config-add-to-cart-button/config-add-to-cart-button.component.html

@@ -4,6 +4,7 @@
       <button
         class="cx-btn btn btn-block btn-primary"
         (click)="onAddToCart(container.configuration, container.routerData)"
+        [disabled]="container.hasPendingChanges"
       >
         {{
           getButtonResourceKey(container.routerData, container.configuration)

feature-libs/product/configurators/common/src/components/config-add-to-cart-button/config-add-to-cart-button.component.spec.ts

@@ -40,14 +40,17 @@ const mockRouterData: ConfigurationRouter.Data = {
 
 let component: ConfigAddToCartButtonComponent;
 let fixture: ComponentFixture<ConfigAddToCartButtonComponent>;
+let htmlElem: HTMLElement;
 let routerStateObservable = null;
 let productConfigurationObservable = null;
+let pendingChangesObservable = null;
 
 function initialize() {
   routerStateObservable = of(mockRouterState);
   productConfigurationObservable = of(mockProductConfiguration);
   fixture = TestBed.createComponent(ConfigAddToCartButtonComponent);
   component = fixture.componentInstance;
+  htmlElem = fixture.nativeElement;
   fixture.detectChanges();
 }
 
@@ -61,6 +64,9 @@ class MockConfiguratorCommonsService {
   }
   removeConfiguration() {}
   removeUiState() {}
+  hasPendingChanges() {
+    return pendingChangesObservable;
+  }
 }
 
 class MockConfiguratorCartService {
@@ -192,6 +198,7 @@ describe('ConfigAddToCartButtonComponent', () => {
   beforeEach(() => {
     routerStateObservable = null;
     productConfigurationObservable = null;
+    pendingChangesObservable = of(false);
     initialize();
     routingService = TestBed.inject(RoutingService as Type<RoutingService>);
     configuratorCommonsService = TestBed.inject(
@@ -214,6 +221,25 @@ describe('ConfigAddToCartButtonComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should render button that is not disabled in case there are no pending changes', () => {
+    initialize();
+    expect(
+      htmlElem
+        .querySelector('.cx-config-add-to-cart-btn')
+        .innerHTML.includes('disabled')
+    ).toBe(false);
+  });
+
+  it('should render disabled button in case there are pending changes', () => {
+    pendingChangesObservable = of(true);
+    initialize();
+    expect(
+      htmlElem
+        .querySelector('.cx-config-add-to-cart-btn')
+        .innerHTML.includes('disabled')
+    ).toBe(true);
+  });
+
   describe('onAddToCart', () => {
     it('should navigate to OV in case configuration is cart bound and we are on product config page', () => {
       mockRouterData.pageType = ConfigurationRouter.PageType.CONFIGURATION;

feature-libs/product/configurators/common/src/components/config-add-to-cart-button/config-add-to-cart-button.component.ts

@@ -25,15 +25,27 @@ export class ConfigAddToCartButtonComponent {
   container$: Observable<{
     routerData: ConfigurationRouter.Data;
     configuration: Configurator.Configuration;
-  }> = this.configRouterExtractorService
-    .extractRouterData()
-    .pipe(
-      switchMap((routerData) =>
-        this.configuratorCommonsService
-          .getConfiguration(routerData.owner)
-          .pipe(map((configuration) => ({ routerData, configuration })))
-      )
-    );
+    hasPendingChanges: boolean;
+  }> = this.configRouterExtractorService.extractRouterData().pipe(
+    switchMap((routerData) =>
+      this.configuratorCommonsService
+        .getConfiguration(routerData.owner)
+        .pipe(map((configuration) => ({ routerData, configuration })))
+        .pipe(
+          switchMap((cont) =>
+            this.configuratorCommonsService
+              .hasPendingChanges(cont.configuration.owner)
+              .pipe(
+                map((hasPendingChanges) => ({
+                  routerData: cont.routerData,
+                  configuration: cont.configuration,
+                  hasPendingChanges,
+                }))
+              )
+          )
+        )
+    )
+  );
 
   constructor(
     protected routingService: RoutingService,

projects/core/src/configurator/commons/store/effects/configurator.effect.ts

@@ -317,37 +317,30 @@ export class ConfiguratorEffects {
     ofType(ConfiguratorActions.ADD_TO_CART),
     map((action: ConfiguratorActions.AddToCart) => action.payload),
     switchMap((payload: Configurator.AddToCartParameters) => {
-      return this.store.pipe(
-        select(ConfiguratorSelectors.hasPendingChanges(payload.ownerKey)),
-        take(1),
-        filter((hasPendingChanges) => hasPendingChanges === false),
-        switchMap(() => {
-          return this.configuratorCommonsConnector.addToCart(payload).pipe(
-            switchMap((entry: CartModification) => {
-              return [
-                new ConfiguratorActions.AddNextOwner({
-                  ownerKey: payload.ownerKey,
-                  cartEntryNo: '' + entry.entry.entryNumber,
-                }),
-                new CartActions.CartAddEntrySuccess({
-                  ...entry,
-                  userId: payload.userId,
-                  cartId: payload.cartId,
-                  productCode: payload.productCode,
-                  quantity: entry.quantity,
-                  deliveryModeChanged: entry.deliveryModeChanged,
-                  entry: entry.entry,
-                  quantityAdded: entry.quantityAdded,
-                  statusCode: entry.statusCode,
-                  statusMessage: entry.statusMessage,
-                }),
-              ];
+      return this.configuratorCommonsConnector.addToCart(payload).pipe(
+        switchMap((entry: CartModification) => {
+          return [
+            new ConfiguratorActions.AddNextOwner({
+              ownerKey: payload.ownerKey,
+              cartEntryNo: '' + entry.entry.entryNumber,
             }),
-            catchError((error) =>
-              of(new CartActions.CartAddEntryFail(makeErrorSerializable(error)))
-            )
-          );
-        })
+            new CartActions.CartAddEntrySuccess({
+              ...entry,
+              userId: payload.userId,
+              cartId: payload.cartId,
+              productCode: payload.productCode,
+              quantity: entry.quantity,
+              deliveryModeChanged: entry.deliveryModeChanged,
+              entry: entry.entry,
+              quantityAdded: entry.quantityAdded,
+              statusCode: entry.statusCode,
+              statusMessage: entry.statusMessage,
+            }),
+          ];
+        }),
+        catchError((error) =>
+          of(new CartActions.CartAddEntryFail(makeErrorSerializable(error)))
+        )
       );
     })
   );
@@ -360,39 +353,28 @@ export class ConfiguratorEffects {
     map((action: ConfiguratorActions.UpdateCartEntry) => action.payload),
     switchMap(
       (payload: Configurator.UpdateConfigurationForCartEntryParameters) => {
-        return this.store.pipe(
-          select(
-            ConfiguratorSelectors.hasPendingChanges(
-              payload.configuration.owner.key
-            )
-          ),
-          take(1),
-          filter((hasPendingChanges) => hasPendingChanges === false),
-          switchMap(() => {
-            return this.configuratorCommonsConnector
-              .updateConfigurationForCartEntry(payload)
-              .pipe(
-                switchMap((entry: CartModification) => {
-                  return [
-                    new CartActions.CartUpdateEntrySuccess({
-                      ...entry,
-                      userId: payload.userId,
-                      cartId: payload.cartId,
-                      entryNumber: entry.entry.entryNumber.toString(),
-                      quantity: entry.quantity,
-                    }),
-                  ];
+        return this.configuratorCommonsConnector
+          .updateConfigurationForCartEntry(payload)
+          .pipe(
+            switchMap((entry: CartModification) => {
+              return [
+                new CartActions.CartUpdateEntrySuccess({
+                  ...entry,
+                  userId: payload.userId,
+                  cartId: payload.cartId,
+                  entryNumber: entry.entry.entryNumber.toString(),
+                  quantity: entry.quantity,
                 }),
-                catchError((error) =>
-                  of(
-                    new CartActions.CartUpdateEntryFail(
-                      makeErrorSerializable(error)
-                    )
-                  )
+              ];
+            }),
+            catchError((error) =>
+              of(
+                new CartActions.CartUpdateEntryFail(
+                  makeErrorSerializable(error)
                 )
-              );
-          })
-        );
+              )
+            )
+          );
       }
     )
   );