feat: Descriptive error messages (#18874)

This PR introduce the option to provide more descriptive error messages in form-errors.component and additional fallback keys. Closes: https://jira.tools.sap/browse/CXSPA-1025
SAP · Jun 14, 2024 · d0a619f · d0a619f
1 parent a13f0a0
commit d0a619f
Show file tree

Hide file tree

Showing 112 changed files with 2,490 additions and 375 deletions.
diff --git a/feature-libs/asm/components/asm-components.module.ts b/feature-libs/asm/components/asm-components.module.ts
@@ -8,7 +8,11 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { I18nModule, provideDefaultConfig } from '@spartacus/core';
+import {
+  FeaturesConfigModule,
+  I18nModule,
+  provideDefaultConfig,
+} from '@spartacus/core';
 import {
   FormErrorsModule,
   IconModule,
@@ -58,6 +62,7 @@ import { DotSpinnerComponent } from './dot-spinner/dot-spinner.component';
     SortingModule,
     PaginationModule,
     MessageComponentModule,
+    FeaturesConfigModule,
   ],
   declarations: [
     AsmBindCartDialogComponent,

diff --git a/feature-libs/asm/components/csagent-login-form/csagent-login-form.component.html b/feature-libs/asm/components/csagent-login-form/csagent-login-form.component.html
@@ -13,7 +13,20 @@
       formControlName="userId"
       [attr.aria-label]="'asm.loginForm.userId.label' | cxTranslate"
     />
-    <cx-form-errors [control]="csAgentLoginForm.get('userId')"></cx-form-errors>
+
+    <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
+    <cx-form-errors
+      *cxFeature="'formErrorsDescriptiveMessages'"
+      [translationParams]="{
+        label: 'asm.loginForm.userId.label' | cxTranslate
+      }"
+      [control]="csAgentLoginForm.get('userId')"
+    ></cx-form-errors>
+
+    <cx-form-errors
+      *cxFeature="'!formErrorsDescriptiveMessages'"
+      [control]="csAgentLoginForm.get('userId')"
+    ></cx-form-errors>
   </label>
 
   <span class="label-content">
@@ -27,7 +40,18 @@
       [attr.aria-label]="'asm.loginForm.password.label' | cxTranslate"
       cxPasswordVisibilitySwitch
     />
+
+    <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
+    <cx-form-errors
+      *cxFeature="'formErrorsDescriptiveMessages'"
+      [translationParams]="{
+        label: 'asm.loginForm.password.label' | cxTranslate
+      }"
+      [control]="csAgentLoginForm.get('password')"
+    ></cx-form-errors>
+
     <cx-form-errors
+      *cxFeature="'!formErrorsDescriptiveMessages'"
       [control]="csAgentLoginForm.get('password')"
     ></cx-form-errors>
   </label>

diff --git a/feature-libs/asm/components/csagent-login-form/csagent-login-form.component.spec.ts b/feature-libs/asm/components/csagent-login-form/csagent-login-form.component.spec.ts
@@ -7,8 +7,9 @@ import {
   FormErrorsModule,
   PasswordVisibilityToggleModule,
 } from '@spartacus/storefront';
-import { CSAgentLoginFormComponent } from './csagent-login-form.component';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { DotSpinnerComponent } from '../dot-spinner/dot-spinner.component';
+import { CSAgentLoginFormComponent } from './csagent-login-form.component';
 
 describe('CSAgentLoginFormComponent', () => {
   let component: CSAgentLoginFormComponent;
@@ -29,7 +30,11 @@ describe('CSAgentLoginFormComponent', () => {
           FormErrorsModule,
           PasswordVisibilityToggleModule,
         ],
-        declarations: [CSAgentLoginFormComponent, DotSpinnerComponent],
+        declarations: [
+          CSAgentLoginFormComponent,
+          DotSpinnerComponent,
+          MockFeatureDirective,
+        ],
       }).compileComponents();
     })
   );

diff --git a/feature-libs/asm/components/customer-selection/customer-selection.component.html b/feature-libs/asm/components/customer-selection/customer-selection.component.html
@@ -10,7 +10,18 @@
       (keydown.arrowdown)="focusFirstItem($event)"
       (keydown.end)="setSelectionEnd($event)"
     />
+
+    <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
+    <cx-form-errors
+      *cxFeature="'formErrorsDescriptiveMessages'"
+      [translationParams]="{
+        label: 'asm.customerSearch.searchTerm.label' | cxTranslate
+      }"
+      [control]="customerSelectionForm.get('searchTerm')"
+    ></cx-form-errors>
+
     <cx-form-errors
+      *cxFeature="'!formErrorsDescriptiveMessages'"
       [control]="customerSelectionForm.get('searchTerm')"
     ></cx-form-errors>
   </label>

diff --git a/feature-libs/asm/components/customer-selection/customer-selection.component.spec.ts b/feature-libs/asm/components/customer-selection/customer-selection.component.spec.ts
@@ -23,6 +23,7 @@ import {
   LAUNCH_CALLER,
   LaunchDialogService,
 } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, EMPTY, Observable, Subject } from 'rxjs';
 import { DotSpinnerComponent } from '../dot-spinner/dot-spinner.component';
 import { CustomerSelectionComponent } from './customer-selection.component';
@@ -118,7 +119,11 @@ describe('CustomerSelectionComponent', () => {
 
       TestBed.configureTestingModule({
         imports: [ReactiveFormsModule, I18nTestingModule, FormErrorsModule],
-        declarations: [CustomerSelectionComponent, DotSpinnerComponent],
+        declarations: [
+          CustomerSelectionComponent,
+          DotSpinnerComponent,
+          MockFeatureDirective,
+        ],
         providers: [
           { provide: AsmService, useClass: MockAsmService },
           { provide: GlobalMessageService, useClass: MockGlobalMessageService },

diff --git a/feature-libs/cart/base/components/cart-coupon/cart-coupon.component.html b/feature-libs/cart/base/components/cart-coupon/cart-coupon.component.html
@@ -32,7 +32,18 @@
         >
           {{ 'voucher.apply' | cxTranslate }}
         </button>
+
+        <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
+        <cx-form-errors
+          *cxFeature="'formErrorsDescriptiveMessages'"
+          [translationParams]="{
+            label: 'voucher.placeholder' | cxTranslate
+          }"
+          [control]="couponForm.get('couponCode')"
+        ></cx-form-errors>
+
         <cx-form-errors
+          *cxFeature="'!formErrorsDescriptiveMessages'"
           [control]="couponForm.get('couponCode')"
         ></cx-form-errors>
       </div>

diff --git a/feature-libs/cart/base/components/cart-coupon/cart-coupon.component.spec.ts b/feature-libs/cart/base/components/cart-coupon/cart-coupon.component.spec.ts
@@ -15,6 +15,7 @@ import {
 } from '@spartacus/core';
 import { FormErrorsModule } from '@spartacus/storefront';
 import { cold, getTestScheduler, hot } from 'jasmine-marbles';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { EMPTY, of } from 'rxjs';
 import { CartCouponComponent } from './cart-coupon.component';
 
@@ -73,7 +74,11 @@ describe('CartCouponComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [I18nTestingModule, ReactiveFormsModule, FormErrorsModule],
-        declarations: [CartCouponComponent, MockAppliedCouponsComponent],
+        declarations: [
+          CartCouponComponent,
+          MockAppliedCouponsComponent,
+          MockFeatureDirective,
+        ],
         providers: [
           { provide: ActiveCartFacade, useValue: mockActiveCartService },
           { provide: CartVoucherFacade, useValue: mockCartVoucherService },

diff --git a/...bs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html b/...bs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html
@@ -53,12 +53,34 @@
         >
           {{ 'quickOrderCartForm.add' | cxTranslate }}
         </button>
+
+        <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
+        <cx-form-errors
+          *cxFeature="'formErrorsDescriptiveMessages'"
+          [translationParams]="{
+            label: 'quickOrderCartForm.productCodeLabel' | cxTranslate
+          }"
+          [control]="quickOrderForm.get('productCode')"
+        ></cx-form-errors>
+
         <cx-form-errors
+          *cxFeature="'!formErrorsDescriptiveMessages'"
           [control]="quickOrderForm.get('productCode')"
         ></cx-form-errors>
+
         <cx-form-errors
+          *cxFeature="'formErrorsDescriptiveMessages'"
+          [translationParams]="{
+            label: 'quickOrderCartForm.quantityLabel' | cxTranslate
+          }"
+          [control]="quickOrderForm.get('quantity')"
+        ></cx-form-errors>
+
+        <cx-form-errors
+          *cxFeature="'!formErrorsDescriptiveMessages'"
           [control]="quickOrderForm.get('quantity')"
         ></cx-form-errors>
       </div>
-    </form></div
-></ng-container>
+    </form>
+  </div>
+</ng-container>
diff --git a/...cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.spec.ts b/...cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.spec.ts
@@ -16,7 +16,8 @@ import {
   Translatable,
 } from '@spartacus/core';
 import { FormErrorsModule } from '@spartacus/storefront';
-import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
+import { BehaviorSubject, Observable, Subject, of } from 'rxjs';
 import { CartQuickOrderFormComponent } from './cart-quick-order-form.component';
 
 const mockCart: Cart = {
@@ -111,7 +112,7 @@ describe('CartQuickOrderFormComponent', () => {
         I18nTestingModule,
         ReactiveFormsModule,
       ],
-      declarations: [CartQuickOrderFormComponent],
+      declarations: [CartQuickOrderFormComponent, MockFeatureDirective],
       providers: [
         { provide: ActiveCartFacade, useClass: MockActiveCartService },
         {

diff --git a/...s/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html b/...s/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html
@@ -202,7 +202,20 @@
                   required
                   type="text"
                 />
-                <cx-form-errors [control]="form.get('name')"></cx-form-errors>
+
+                <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
+                <cx-form-errors
+                  *cxFeature="'formErrorsDescriptiveMessages'"
+                  [translationParams]="{
+                    label: 'savedCartDialog.savedCartName' | cxTranslate
+                  }"
+                  [control]="form.get('name')"
+                ></cx-form-errors>
+
+                <cx-form-errors
+                  *cxFeature="'!formErrorsDescriptiveMessages'"
+                  [control]="form.get('name')"
+                ></cx-form-errors>
               </label>
             </ng-container>
           </div>
@@ -221,7 +234,18 @@
                 formControlName="description"
                 rows="5"
               ></textarea>
+
+              <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
+              <cx-form-errors
+                *cxFeature="'formErrorsDescriptiveMessages'"
+                [translationParams]="{
+                  label: 'savedCartDialog.savedCartDescription' | cxTranslate
+                }"
+                [control]="form.get('description')"
+              ></cx-form-errors>
+
               <cx-form-errors
+                *cxFeature="'!formErrorsDescriptiveMessages'"
                 [control]="form.get('description')"
               ></cx-form-errors>
 

diff --git a/...art/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.spec.ts b/...art/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.spec.ts
@@ -21,6 +21,7 @@ import {
   KeyboardFocusTestingModule,
   LaunchDialogService,
 } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, EMPTY, Observable, of } from 'rxjs';
 import {
   SavedCartFormDialogComponent,
@@ -132,7 +133,7 @@ describe('SavedCartFormDialogComponent', () => {
         KeyboardFocusTestingModule,
         IconTestingModule,
       ],
-      declarations: [SavedCartFormDialogComponent],
+      declarations: [SavedCartFormDialogComponent, MockFeatureDirective],
       providers: [
         { provide: LaunchDialogService, useClass: MockLaunchDialogService },
         { provide: SavedCartFacade, useClass: MockSavedCartFacade },

diff --git a/...e-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.module.ts b/...e-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.module.ts
@@ -7,7 +7,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { I18nModule } from '@spartacus/core';
+import { FeaturesConfigModule, I18nModule } from '@spartacus/core';
 import {
   FormErrorsModule,
   IconModule,
@@ -24,6 +24,7 @@ import { SavedCartFormDialogComponent } from './saved-cart-form-dialog.component
     I18nModule,
     IconModule,
     KeyboardFocusModule,
+    FeaturesConfigModule,
   ],
   declarations: [SavedCartFormDialogComponent],
   exports: [SavedCartFormDialogComponent],

diff --git a/feature-libs/checkout/base/components/checkout-login/checkout-login.component.html b/feature-libs/checkout/base/components/checkout-login/checkout-login.component.html
@@ -14,7 +14,18 @@
           'checkoutLogin.emailAddress.placeholder' | cxTranslate
         }}"
       />
+
+      <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
+      <cx-form-errors
+        *cxFeature="'formErrorsDescriptiveMessages'"
+        [translationParams]="{
+          label: 'checkoutLogin.emailAddress.label' | cxTranslate
+        }"
+        [control]="checkoutLoginForm.get('email')"
+      ></cx-form-errors>
+
       <cx-form-errors
+        *cxFeature="'!formErrorsDescriptiveMessages'"
         [control]="checkoutLoginForm.get('email')"
       ></cx-form-errors>
     </label>
@@ -35,7 +46,18 @@
           'checkoutLogin.confirmEmail.placeholder' | cxTranslate
         }}"
       />
+
+      <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
+      <cx-form-errors
+        *cxFeature="'formErrorsDescriptiveMessages'"
+        [translationParams]="{
+          label: 'checkoutLogin.confirmEmail.label' | cxTranslate
+        }"
+        [control]="checkoutLoginForm.get('emailConfirmation')"
+      ></cx-form-errors>
+
       <cx-form-errors
+        *cxFeature="'!formErrorsDescriptiveMessages'"
         [control]="checkoutLoginForm.get('emailConfirmation')"
       ></cx-form-errors>
     </label>

diff --git a/feature-libs/checkout/base/components/checkout-login/checkout-login.component.spec.ts b/feature-libs/checkout/base/components/checkout-login/checkout-login.component.spec.ts
@@ -3,6 +3,7 @@ import { AbstractControl, ReactiveFormsModule } from '@angular/forms';
 import { ActiveCartFacade } from '@spartacus/cart/base/root';
 import { AuthRedirectService, I18nTestingModule, User } from '@spartacus/core';
 import { FormErrorsModule } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { EMPTY, of } from 'rxjs';
 import { CheckoutLoginComponent } from './checkout-login.component';
 import createSpy = jasmine.createSpy;
@@ -31,7 +32,7 @@ describe('CheckoutLoginComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [ReactiveFormsModule, I18nTestingModule, FormErrorsModule],
-        declarations: [CheckoutLoginComponent],
+        declarations: [CheckoutLoginComponent, MockFeatureDirective],
         providers: [
           { provide: ActiveCartFacade, useClass: MockActiveCartService },
           {

diff --git a/feature-libs/checkout/base/components/checkout-login/checkout-login.module.ts b/feature-libs/checkout/base/components/checkout-login/checkout-login.module.ts
@@ -7,7 +7,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CmsConfig, I18nModule, provideDefaultConfig } from '@spartacus/core';
+import {
+  CmsConfig,
+  FeaturesConfigModule,
+  I18nModule,
+  provideDefaultConfig,
+} from '@spartacus/core';
 import { FormErrorsModule } from '@spartacus/storefront';
 import { NotCheckoutAuthGuard } from '../guards/not-checkout-auth.guard';
 import { CheckoutLoginComponent } from './checkout-login.component';
@@ -18,9 +23,8 @@ import { CheckoutLoginComponent } from './checkout-login.component';
     I18nModule,
     FormsModule,
     ReactiveFormsModule,
-    FormsModule,
-    ReactiveFormsModule,
     FormErrorsModule,
+    FeaturesConfigModule,
   ],
   providers: [
     provideDefaultConfig(<CmsConfig>{