fix: (CXSPA-1042) - Empty wishlist notification, heading to paragraph…

… change (SAP#18866) Co-authored-by: Piotr Bartkowiak <pbartkowiak@divante.pl> Co-authored-by: Miguel Estrada <15113219+developpeurweb@users.noreply.github.com>
crisli001 · May 28, 2024 · eed52ab · eed52ab
1 parent cc0fe68
commit eed52ab
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 1 deletion.
diff --git a/feature-libs/cart/wish-list/components/wish-list-components.module.ts b/feature-libs/cart/wish-list/components/wish-list-components.module.ts
@@ -10,6 +10,7 @@ import { RouterModule } from '@angular/router';
 import {
   AuthGuard,
   CmsConfig,
+  FeaturesConfigModule,
   I18nModule,
   provideDefaultConfig,
   UrlModule,
@@ -35,6 +36,7 @@ import { WishListComponent } from './wish-list/wish-list.component';
     RouterModule,
     StarRatingModule,
     UrlModule,
+    FeaturesConfigModule,
   ],
   providers: [
     provideDefaultConfig(<CmsConfig>{

diff --git a/feature-libs/cart/wish-list/components/wish-list/wish-list.component.html b/feature-libs/cart/wish-list/components/wish-list/wish-list.component.html
@@ -33,5 +33,11 @@
 </ng-container>
 
 <ng-template #emptyWishList>
-  <h2>{{ 'wishlist.empty' | cxTranslate }}</h2>
+  <!-- TODO: (CXSPA-7288) - Remove feature flag next major release -->
+  <p *cxFeature="'a11yEmptyWishlistHeading'" class="cx-empty-wish-list">
+    {{ 'wishlist.empty' | cxTranslate }}
+  </p>
+  <h2 *cxFeature="'!a11yEmptyWishlistHeading'">
+    {{ 'wishlist.empty' | cxTranslate }}
+  </h2>
 </ng-template>
diff --git a/feature-libs/cart/wish-list/styles/_wish-list.scss b/feature-libs/cart/wish-list/styles/_wish-list.scss
@@ -21,6 +21,10 @@
     }
   }
 
+  .cx-empty-wish-list {
+    text-align: center;
+  }
+
   @include media-breakpoint-down(md) {
     --cx-max-width: 75%;
 

diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -238,6 +238,12 @@ export interface FeatureTogglesInterface {
    * will be fully visible
    */
   a11yCloseProductImageBtnFocus?: boolean;
+
+  /**
+   * Modifies the template of 'WishListComponent'.
+   * Empty wishlist notification will be displayed in a paragraph instead of a heading.
+   */
+  a11yEmptyWishlistHeading?: boolean;
 }
 
 export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
@@ -280,4 +286,5 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yTruncatedTextForResponsiveView: false,
   a11yMyAccountLinkOutline: false,
   a11yCloseProductImageBtnFocus: false,
+  a11yEmptyWishlistHeading: false,
 };
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -308,6 +308,7 @@ if (environment.estimatedDeliveryDate) {
         a11yTruncatedTextForResponsiveView: true,
         a11yMyAccountLinkOutline: true,
         a11yCloseProductImageBtnFocus: true,
+        a11yEmptyWishlistHeading: true,
       };
       return appFeatureToggles;
     }),