From 29ee49ebf10a2acb53a954068cc08651d7d2ca12 Mon Sep 17 00:00:00 2001
From: Stanislav Sukhanov <sukhanov.stas@gmail.com>
Date: Mon, 16 Dec 2024 13:36:06 +0100
Subject: [PATCH] fix: (CXSPA-9034) UnitLevelOrderHistory Truncation on
 applying text spacing settings (#19707)

---
 .../unit-level-order-history.component.html     | 17 +++++++++++++----
 .../unit-level-order-history.component.ts       |  1 +
 .../_unit-level-order-history.scss              |  5 ++++-
 .../feature-toggles/config/feature-toggles.ts   |  7 +++++++
 .../app/spartacus/spartacus-features.module.ts  |  1 +
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/feature-libs/organization/unit-order/components/unit-level-order-history/unit-level-order-history.component.html b/feature-libs/organization/unit-order/components/unit-level-order-history/unit-level-order-history.component.html
index e59ed3f9a8b..70aa5287313 100644
--- a/feature-libs/organization/unit-order/components/unit-level-order-history/unit-level-order-history.component.html
+++ b/feature-libs/organization/unit-order/components/unit-level-order-history/unit-level-order-history.component.html
@@ -168,10 +168,19 @@
                     class="cx-unit-level-order-history-value"
                   >
                     {{ order?.orgCustomer?.name }}
-                    <span class="text-ellipsis">{{
-                      order?.orgCustomer?.email
-                    }}</span></a
-                  >
+                    <ng-container
+                      *cxFeature="'a11yTruncatedTextUnitLevelOrderHistory'"
+                    >
+                      <span>{{ order?.orgCustomer?.email }}</span>
+                    </ng-container>
+                    <ng-container
+                      *cxFeature="'!a11yTruncatedTextUnitLevelOrderHistory'"
+                    >
+                      <span class="text-ellipsis">{{
+                        order?.orgCustomer?.email
+                      }}</span>
+                    </ng-container>
+                  </a>
                 </td>
                 <td class="cx-unit-level-order-history-unit">
                   <div class="cx-unit-level-order-history-label">
diff --git a/feature-libs/organization/unit-order/components/unit-level-order-history/unit-level-order-history.component.ts b/feature-libs/organization/unit-order/components/unit-level-order-history/unit-level-order-history.component.ts
index 6ca0c42be09..be8667d94c9 100644
--- a/feature-libs/organization/unit-order/components/unit-level-order-history/unit-level-order-history.component.ts
+++ b/feature-libs/organization/unit-order/components/unit-level-order-history/unit-level-order-history.component.ts
@@ -38,6 +38,7 @@ export class UnitLevelOrderHistoryComponent implements OnDestroy {
     protected translation: TranslationService
   ) {
     useFeatureStyles('a11yTruncatedTextForResponsiveView');
+    useFeatureStyles('a11yTruncatedTextUnitLevelOrderHistory');
   }
 
   orders$: Observable<OrderHistoryList | undefined> = this.unitOrdersFacade
diff --git a/feature-libs/organization/unit-order/styles/components/unit-level-order-history/_unit-level-order-history.scss b/feature-libs/organization/unit-order/styles/components/unit-level-order-history/_unit-level-order-history.scss
index ba68d4329d0..82cfb8df943 100644
--- a/feature-libs/organization/unit-order/styles/components/unit-level-order-history/_unit-level-order-history.scss
+++ b/feature-libs/organization/unit-order/styles/components/unit-level-order-history/_unit-level-order-history.scss
@@ -23,6 +23,9 @@
 
   .cx-unit-level-order-history-filter-label-wrapper {
     width: 200px;
+    @include forFeature('a11yTruncatedTextUnitLevelOrderHistory') {
+      width: unset;
+    }
     border: 1px solid var(--cx-color-secondary);
     border-radius: 3px;
   }
@@ -106,7 +109,7 @@
           padding-bottom: 1.25rem;
         }
       }
-
+      // TODO: Remove following .text-ellipsis block once 'a11yTruncatedTextUnitLevelOrderHistory' feature flag is removed
       .text-ellipsis {
         @include media-breakpoint-up(md) {
           overflow: hidden;
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
index ef4128b8fa8..aef0c93c00e 100644
--- a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
+++ b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -405,6 +405,12 @@ export interface FeatureTogglesInterface {
    */
   a11yTruncatedTextStoreFinder?: boolean;
 
+  /**
+   * `UnitLevelOrderHistoryComponent` filter input label and table email address
+   * are not truncated
+   */
+  a11yTruncatedTextUnitLevelOrderHistory?: boolean;
+
   /**
    * When enabled focus outline on the close button inside `ProductImageZoomDialogComponent`
    * will be fully visible
@@ -942,6 +948,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yVisibleFocusOverflows: true,
   a11yTruncatedTextForResponsiveView: true,
   a11yTruncatedTextStoreFinder: false,
+  a11yTruncatedTextUnitLevelOrderHistory: false,
   a11ySemanticPaginationLabel: true,
   a11yPreventCartItemsFormRedundantRecreation: false,
   a11yPreventSRFocusOnHiddenElements: true,
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
index 0e32a288569..8ea22a2bd93 100644
--- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -350,6 +350,7 @@ if (environment.cpq) {
         a11yVisibleFocusOverflows: true,
         a11yTruncatedTextForResponsiveView: true,
         a11yTruncatedTextStoreFinder: true,
+        a11yTruncatedTextUnitLevelOrderHistory: true,
         a11ySemanticPaginationLabel: true,
         a11yPreventCartItemsFormRedundantRecreation: true,
         a11yMyAccountLinkOutline: true,