Merge 0d14560 into ebcb4c9

SAP · Jun 30, 2021 · c0221d3 · c0221d3
2 parents ebcb4c9 + 0d14560
commit c0221d3
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 14 deletions.
diff --git a/docs/migration/css-changes-in-version-4.md b/docs/migration/css-changes-in-version-4.md
@@ -116,6 +116,17 @@ title: Changes to Styles in 4.0
 - `width` set to 60% on `%cx-configurator-overview-attribute` for `cx-attribute-label` selector to use only 60% of the width for the small widgets.
 - `font-weight` set to 600 on `%cx-configurator-overview-attribute` for `cx-attribute-value` to make the attribute values bold
 
+## Changes in Product Configurator Card Component
+
+- `.cx-card-title` class added (a11y)
+- `.deselection-error-message` class added
+- `display` set to inline-block on `%cx-configurator-attribute-product-card`for `&.deselection-error-message` to prevent line break in the deselection error message 
+- `width` set to 80% on `%cx-configurator-attribute-product-card`for `&.deselection-error-message` to set the element's box size and prevent line break
+- `flex-wrap` set to wrap on `%cx-configurator-attribute-product-card` for `.cx-product-card-selected` to align the deselection error to the desired position
+- `padding-top` set to 5px  on `%cx-configurator-attribute-product-card` for `.deselection-error-message` to create space between value description and the error message 
+- `color` set to var(--cx-color-danger) on `%cx-configurator-attribute-product-card` for `.deselection-error-message` to signal the message as error message
+- `padding-right` set to 5px on `%cx-configurator-attribute-product-card` for `.deselection-error-message-symbol` to create space between the message and the 'error' icon
+
 ## Change in Cart Item Component
 
 - `h2` added under `.cx-name` to account for the change in markup template for improved screen reader support (a11y)
@@ -140,9 +151,6 @@ title: Changes to Styles in 4.0
 
 - `h5` changed to `span` under `.flyout`, `@include media-breakpoint-down(md)`, `nav` and `nav >` to account for the change in markup template for improved screen reader support (a11y)
 
-## Changes in Card Component 
-
-- `.cx-card-title` class added (a11y)
 
 ## Changes in Carousel Component
 

diff --git a/feature-libs/product-configurator/common/assets/translations/en/configurator-common.ts b/feature-libs/product-configurator/common/assets/translations/en/configurator-common.ts
@@ -40,6 +40,8 @@ export const configurator = {
       multiSelectRequiredMessage: 'Select one or more values',
       wrongNumericFormat:
         'Wrong format, this numerical attribute should be entered according to pattern {{pattern}}',
+      deselectionNotPossible:
+        'Add a different product before removing this one',
     },
     button: {
       previous: 'Previous',

diff --git a/...ased/components/attribute/product-card/configurator-attribute-product-card.component.html b/...ased/components/attribute/product-card/configurator-attribute-product-card.component.html
@@ -62,15 +62,11 @@
               "
               class="btn btn-action"
               (click)="onHandleDeselect()"
-              [disabled]="
-                productCardOptions?.disableAllButtons ||
-                productCardOptions?.hideRemoveButton ||
-                (loading$ | async)
-              "
               [cxFocus]="focusConfig"
             >
               {{ 'configurator.button.remove' | cxTranslate }}
             </button>
+
             <ng-template #select>
               <button
                 class="btn btn-primary"
@@ -84,6 +80,7 @@
               </button>
             </ng-template>
           </ng-container>
+
           <ng-template #single>
             <button
               class="btn btn-primary"
@@ -124,5 +121,11 @@
         </div>
       </div>
     </div>
+    <ng-container *ngIf="showDeselectionNotPossible">
+      <div class="cx-product-card-rows deselection-error-message">
+        <cx-icon class="deselection-error-symbol" type="ERROR"></cx-icon>
+        {{ 'configurator.attribute.deselectionNotPossible' | cxTranslate }}
+      </div>
+    </ng-container>
   </div>
 </ng-container>
diff --git a/...d/components/attribute/product-card/configurator-attribute-product-card.component.spec.ts b/...d/components/attribute/product-card/configurator-attribute-product-card.component.spec.ts
@@ -329,6 +329,22 @@ describe('ConfiguratorAttributeProductCardComponent', () => {
 
       expect(button.innerText).toContain('configurator.button.remove');
     });
+
+    it('should show deselection error message when removing required attribute', () => {
+      component.productCardOptions.multiSelect = true;
+      component.productCardOptions.hideRemoveButton = true;
+      setProductBoundValueAttributes(component);
+
+      fixture.detectChanges();
+
+      const button = fixture.debugElement.query(By.css('button.btn'))
+        .nativeElement;
+
+      button.click();
+
+      expect(component.onHandleDeselect).toHaveBeenCalled();
+      expect(component.showDeselectionNotPossible).toBe(true);
+    });
   });
 
   describe('quantity', () => {

diff --git a/...ebased/components/attribute/product-card/configurator-attribute-product-card.component.ts b/...ebased/components/attribute/product-card/configurator-attribute-product-card.component.ts
@@ -8,7 +8,11 @@ import {
 } from '@angular/core';
 import { Product, ProductService } from '@spartacus/core';
 import { ConfiguratorProductScope } from '@spartacus/product-configurator/common';
-import { FocusConfig, KeyboardFocusService } from '@spartacus/storefront';
+import {
+  FocusConfig,
+  ICON_TYPE,
+  KeyboardFocusService,
+} from '@spartacus/storefront';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { Configurator } from '../../../core/model/configurator.model';
@@ -47,6 +51,7 @@ export class ConfiguratorAttributeProductCardComponent
   implements OnInit {
   product$: Observable<Product>;
   loading$ = new BehaviorSubject<boolean>(true);
+  showDeselectionNotPossible = false;
 
   @Input()
   productCardOptions: ConfiguratorAttributeProductCardComponentOptions;
@@ -61,6 +66,7 @@ export class ConfiguratorAttributeProductCardComponent
   ) {
     super();
   }
+  iconType = ICON_TYPE;
 
   ngOnInit() {
     this.loading$.next(true);
@@ -115,10 +121,19 @@ export class ConfiguratorAttributeProductCardComponent
   }
 
   onHandleDeselect(): void {
-    this.loading$.next(true);
-    this.handleDeselect.emit(
-      this.productCardOptions.productBoundValue.valueCode
-    );
+    {
+      if (
+        this.productCardOptions.productBoundValue.selected &&
+        this.productCardOptions.hideRemoveButton
+      ) {
+        this.showDeselectionNotPossibleMessage();
+        return;
+      }
+      this.loading$.next(true);
+      this.handleDeselect.emit(
+        this.productCardOptions.productBoundValue.valueCode
+      );
+    }
   }
 
   onChangeQuantity(eventObject: any): void {
@@ -230,4 +245,8 @@ export class ConfiguratorAttributeProductCardComponent
       valueCode: this.productCardOptions.productBoundValue.valueCode,
     });
   }
+
+  showDeselectionNotPossibleMessage() {
+    this.showDeselectionNotPossible = true;
+  }
 }
diff --git a/...rulebased/components/attribute/product-card/configurator-attribute-product-card.module.ts b/...rulebased/components/attribute/product-card/configurator-attribute-product-card.module.ts
@@ -3,7 +3,11 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { I18nModule, UrlModule } from '@spartacus/core';
-import { KeyboardFocusModule, MediaModule } from '@spartacus/storefront';
+import {
+  IconModule,
+  KeyboardFocusModule,
+  MediaModule,
+} from '@spartacus/storefront';
 import { ConfiguratorPriceModule } from '../../price/configurator-price.module';
 import { ConfiguratorShowMoreModule } from '../../show-more/configurator-show-more.module';
 import { ConfiguratorAttributeQuantityModule } from '../quantity/configurator-attribute-quantity.module';
@@ -24,6 +28,7 @@ import { ConfiguratorAttributeProductCardComponent } from './configurator-attrib
     MediaModule,
     ConfiguratorPriceModule,
     KeyboardFocusModule,
+    IconModule,
   ],
 })
 export class ConfiguratorAttributeProductCardModule {}
diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-product-card.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-product-card.scss
@@ -97,6 +97,11 @@
           align-self: flex-end;
         }
       }
+
+      &.deselection-error-message {
+        display: inline-block;
+        width: 80%;
+      }
     }
 
     .cx-product-card-imgs {
@@ -164,10 +169,20 @@
   }
 
   .cx-product-card-selected {
+    flex-wrap: wrap;
     background-color: var(--cx-color-background);
 
     cx-item-counter {
       background-color: #fff;
     }
   }
+
+  .deselection-error-message {
+    padding-top: 5px;
+    color: var(--cx-color-danger);
+  }
+
+  .deselection-error-symbol {
+    padding: 5px;
+  }
 }