feat: Feature/cxcds 12248 redesign search spa (#19260)

Co-authored-by: Konrad Dzikowski <[email protected]> Co-authored-by: darvsorceix <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Peter Kurajsky <[email protected]> Co-authored-by: Peter Kurajsky <[email protected]> Co-authored-by: Artur Lasocha <[email protected]>
SAP · Oct 16, 2024 · d9fc090 · d9fc090
1 parent 121ea4b
commit d9fc090
Show file tree

Hide file tree

Showing 16 changed files with 1,366 additions and 280 deletions.
diff --git a/integration-libs/cds/src/recent-searches/recent-searches.component.html b/integration-libs/cds/src/recent-searches/recent-searches.component.html
@@ -1,35 +1,40 @@
 <ng-container *ngIf="result$ | async as results">
   <ng-container *ngIf="results?.length">
-    <div class="message">
-      {{ 'cdsRecentSearches.recentSearches' | cxTranslate }}
+    <div class="recent-searches">
+      <h3>
+        {{ 'cdsRecentSearches.recentSearches' | cxTranslate }}
+      </h3>
+      <ul
+        tabindex="0"
+        [ariaLabel]="'cdsRecentSearches.ariaRecentSearches' | cxTranslate"
+        role="listbox"
+      >
+        <li *ngFor="let recentSearch of results">
+          <a
+            role="option"
+            [innerHTML]="
+              recentSearch
+                | cxHighlight: (outletContext$ | async)?.search : false
+            "
+            [routerLink]="
+              {
+                cxRoute: 'search',
+                params: { query: recentSearch },
+              } | cxUrl
+            "
+            (mousedown)="$event.preventDefault()"
+            (keydown.arrowup)="shareEvent($any($event))"
+            (keydown.arrowdown)="shareEvent($any($event))"
+            (keydown.arrowleft)="shareEvent($any($event))"
+            (keydown.arrowright)="shareEvent($any($event))"
+            (keydown.enter)="shareEvent($any($event))"
+            (keydown.escape)="shareEvent($any($event))"
+            (blur)="shareEvent($any($event))"
+            (click)="updateChosenWord(recentSearch)"
+          >
+          </a>
+        </li>
+      </ul>
     </div>
-    <ul
-      class="recent-searches"
-      [ariaLabel]="'cdsRecentSearches.ariaRecentSearches' | cxTranslate"
-      role="listbox"
-    >
-      <li *ngFor="let recentSearch of results">
-        <a
-          role="option"
-          [innerHTML]="
-            recentSearch | cxHighlight: (outletContext$ | async)?.search : false
-          "
-          [routerLink]="
-            {
-              cxRoute: 'search',
-              params: { query: recentSearch },
-            } | cxUrl
-          "
-          (mousedown)="$event.preventDefault()"
-          (keydown.arrowup)="shareEvent($any($event))"
-          (keydown.arrowdown)="shareEvent($any($event))"
-          (keydown.enter)="shareEvent($any($event))"
-          (keydown.escape)="shareEvent($any($event))"
-          (blur)="shareEvent($any($event))"
-          (click)="updateChosenWord(recentSearch)"
-        >
-        </a>
-      </li>
-    </ul>
   </ng-container>
 </ng-container>
diff --git a/integration-libs/cds/src/trending-searches/trending-searches.component.html b/integration-libs/cds/src/trending-searches/trending-searches.component.html
@@ -1,26 +1,34 @@
 <ng-container *ngIf="searchPhrases$ | async as searchPhrases">
   <ng-container *ngIf="searchPhrases?.length">
-    <div class="message">
-      {{ 'cdsTrendingSearches.trendingSearches' | cxTranslate }}
+    <div class="trending-searches">
+      <h3>
+        {{ 'cdsTrendingSearches.trendingSearches' | cxTranslate }}
+      </h3>
+      <ul
+        tabindex="0"
+        [ariaLabel]="'cdsTrendingSearches.ariaTrendingSearches' | cxTranslate"
+      >
+        <li *ngFor="let phrase of searchPhrases">
+          <a
+            role="option"
+            [routerLink]="
+              {
+                cxRoute: 'search',
+                params: { query: phrase.searchPhrase },
+              } | cxUrl
+            "
+            (mousedown)="$event.preventDefault()"
+            (keydown.arrowup)="shareEvent($any($event))"
+            (keydown.arrowdown)="shareEvent($any($event))"
+            (keydown.arrowleft)="shareEvent($any($event))"
+            (keydown.arrowright)="shareEvent($any($event))"
+            (keydown.enter)="shareEvent($any($event))"
+            (keydown.escape)="shareEvent($any($event))"
+          >
+            {{ phrase.searchPhrase }}
+          </a>
+        </li>
+      </ul>
     </div>
-
-    <ul
-      class="recent-searches"
-      [ariaLabel]="'cdsTrendingSearches.ariaTrendingSearches' | cxTranslate"
-    >
-      <li *ngFor="let phrase of searchPhrases">
-        <a
-          role="option"
-          [routerLink]="
-            {
-              cxRoute: 'search',
-              params: { query: phrase.searchPhrase },
-            } | cxUrl
-          "
-        >
-          {{ phrase.searchPhrase }}
-        </a>
-      </li>
-    </ul>
   </ng-container>
 </ng-container>
diff --git a/integration-libs/cds/src/trending-searches/trending-searches.component.ts b/integration-libs/cds/src/trending-searches/trending-searches.component.ts
@@ -60,4 +60,11 @@ export class TrendingSearchesComponent implements OnInit {
   get contextObservable() {
     return this.outletContext?.context$ ?? EMPTY;
   }
+
+  shareEvent(event: KeyboardEvent) {
+    if (!event) {
+      throw new Error('Missing Event');
+    }
+    this.searchBoxComponentService.shareEvent(event);
+  }
 }
diff --git a/projects/assets/src/translations/en/common.json b/projects/assets/src/translations/en/common.json
@@ -84,7 +84,8 @@
       "noMatch": "We could not find any results",
       "exactMatch": "{{ term }}",
       "empty": "Ask us anything"
-    }
+    },
+    "closeSearchPanel": "Close"
   },
   "sorting": {
     "date": "Date",

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
@@ -61,6 +61,11 @@ export interface FeatureTogglesInterface {
    */
   showSearchingCustomerByOrderInASM?: boolean;
 
+  /**
+   * New REDESIGNED search-box component
+   */
+  searchBoxV2?: boolean;
+
   /**
    * Some Changes for input of cart Number and text of Customer360View in ASM view
    */
@@ -638,6 +643,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   showBillingAddressInDigitalPayments: false,
   showDownloadProposalButton: false,
   showPromotionsInPDP: true,
+  searchBoxV2: false,
   recentSearches: true,
   trendingSearches: false,
   pdfInvoicesSortByInvoiceDate: true,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -293,6 +293,7 @@ if (environment.cpq) {
         showBillingAddressInDigitalPayments: false,
         showDownloadProposalButton: false,
         showPromotionsInPDP: false,
+        searchBoxV2: false,
         recentSearches: true,
         trendingSearches: false,
         pdfInvoicesSortByInvoiceDate: true,

diff --git a/projects/storefrontlib/cms-components/navigation/search-box/search-box-features.model.ts b/projects/storefrontlib/cms-components/navigation/search-box/search-box-features.model.ts
@@ -5,6 +5,7 @@
  */
 
 export enum SearchBoxFeatures {
+  SEARCH_BOX_V2 = 'searchBoxV2',
   RECENT_SEARCHES_FEATURE = 'recentSearches',
   TRENDING_SEARCHES_FEATURE = 'trendingSearches',
 }