From 29524624465d0d3dc1ee95176ddee39bd1e8c579 Mon Sep 17 00:00:00 2001
From: Petar Markov <petarmarkov9449@gmail.com>
Date: Thu, 28 Nov 2024 17:03:45 +0100
Subject: [PATCH 1/3] add missing labels for comboboxes in Order Summary

---
 .../en/checkoutScheduledReplenishment.json    |   3 +-
 ...chedule-replenishment-order.component.html | 102 ++++++++++++++++--
 .../feature-toggles/config/feature-toggles.ts |   2 +-
 3 files changed, 96 insertions(+), 11 deletions(-)

diff --git a/feature-libs/checkout/scheduled-replenishment/assets/translations/en/checkoutScheduledReplenishment.json b/feature-libs/checkout/scheduled-replenishment/assets/translations/en/checkoutScheduledReplenishment.json
index 61a3d54a97d..19e00cc1033 100644
--- a/feature-libs/checkout/scheduled-replenishment/assets/translations/en/checkoutScheduledReplenishment.json
+++ b/feature-libs/checkout/scheduled-replenishment/assets/translations/en/checkoutScheduledReplenishment.json
@@ -9,6 +9,7 @@
     "recurrencePeriodType_MONTHLY": "Month",
     "dayOfMonth": "On day",
     "startOn": "Start on",
-    "repeatOnDays": "Repeat on the following days"
+    "repeatOnDays": "Repeat on the following days",
+    "duration": "Duration"
   }
 }
diff --git a/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html b/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
index c5ba958fae3..d7a23dd42c1 100644
--- a/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
+++ b/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
@@ -50,11 +50,36 @@
   >
     <div class="cx-replenishment-form-data-container">
       <div *ngIf="!isMonthly" class="cx-days">
-        <span class="form-data-label">{{
-          'checkoutScheduledReplenishment.every' | cxTranslate
-        }}</span>
+        <span
+          class="form-data-label"
+          *cxFeature="'!a11yScheduleReplenishment'"
+          >{{ 'checkoutScheduledReplenishment.every' | cxTranslate }}</span
+        >
+        <label
+          class="form-data-label"
+          *cxFeature="'a11yScheduleReplenishment'"
+          for="order-replenishment-period-type"
+          >{{ 'checkoutScheduledReplenishment.every' | cxTranslate }}</label
+        >
         <ng-container *ngIf="isWeekly; else isDaily">
           <select
+            *cxFeature="'!a11yScheduleReplenishment'"
+            class="form-control"
+            (change)="changeNumberOfWeeks($event.target.value)"
+          >
+            <option
+              *ngFor="let nWeeks of numberOfWeeks"
+              [value]="nWeeks"
+              [selected]="
+                nWeeks === scheduleReplenishmentFormData.numberOfWeeks
+              "
+            >
+              {{ nWeeks }}
+            </option>
+          </select>
+          <select
+            *cxFeature="'a11yScheduleReplenishment'"
+            id="order-replenishment-period-type"
             class="form-control"
             (change)="changeNumberOfWeeks($event.target.value)"
           >
@@ -71,6 +96,21 @@
         </ng-container>
         <ng-template #isDaily>
           <select
+            *cxFeature="'!a11yScheduleReplenishment'"
+            class="form-control"
+            (change)="changeNumberOfDays($event.target.value)"
+          >
+            <option
+              *ngFor="let nDays of numberOfDays"
+              [value]="nDays"
+              [selected]="nDays === scheduleReplenishmentFormData.numberOfDays"
+            >
+              {{ nDays }}
+            </option>
+          </select>
+          <select
+            *cxFeature="'a11yScheduleReplenishment'"
+            id="order-replenishment-period-type"
             class="form-control"
             (change)="changeNumberOfDays($event.target.value)"
           >
@@ -85,10 +125,29 @@
         </ng-template>
       </div>
       <div class="cx-month">
-        <span *ngIf="isMonthly" class="form-data-label">{{
-          'checkoutScheduledReplenishment.every' | cxTranslate
-        }}</span>
+        <div *cxFeature="'!a11yScheduleReplenishment'">
+          <span *ngIf="isMonthly" class="form-data-label">{{
+            'checkoutScheduledReplenishment.every' | cxTranslate
+          }}</span>
+        </div>
+        <div *cxFeature="'a11yScheduleReplenishment'">
+          <label
+            *ngIf="isMonthly"
+            class="form-data-label"
+            for="order-replenishment-recurrence-period"
+            >{{ 'checkoutScheduledReplenishment.every' | cxTranslate }}</label
+          >
+          <label
+            *ngIf="!isMonthly"
+            class="form-data-label"
+            for="order-replenishment-recurrence-period"
+            >{{
+              'checkoutScheduledReplenishment.duration' | cxTranslate
+            }}</label
+          >
+        </div>
         <select
+          id="order-replenishment-recurrence-period"
           class="form-control"
           (change)="changeRecurrencePeriodType($event.target.value)"
         >
@@ -105,11 +164,36 @@
         </select>
       </div>
       <div *ngIf="isMonthly" class="cx-dayMonth">
-        <span class="form-data-label">{{
-          'checkoutScheduledReplenishment.dayOfMonth' | cxTranslate
-        }}</span>
+        <span
+          class="form-data-label"
+          *cxFeature="'!a11yScheduleReplenishment'"
+          >{{ 'checkoutScheduledReplenishment.dayOfMonth' | cxTranslate }}</span
+        >
+        <label
+          class="form-data-label"
+          *cxFeature="'a11yScheduleReplenishment'"
+          for="order-replenishment-day-of-month"
+          >{{
+            'checkoutScheduledReplenishment.dayOfMonth' | cxTranslate
+          }}</label
+        >
         <div class="cx-day-of-month">
           <select
+            *cxFeature="'!a11yScheduleReplenishment'"
+            class="form-control"
+            (change)="changeDayOfTheMonth($event.target.value)"
+          >
+            <option
+              *ngFor="let nDays of numberOfDays"
+              [value]="nDays"
+              [selected]="nDays === scheduleReplenishmentFormData.nthDayOfMonth"
+            >
+              {{ nDays }}
+            </option>
+          </select>
+          <select
+            *cxFeature="'a11yScheduleReplenishment'"
+            id="order-replenishment-day-of-month"
             class="form-control"
             (change)="changeDayOfTheMonth($event.target.value)"
           >
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 01458f6976c..66126aeaa01 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
@@ -212,7 +212,7 @@ export interface FeatureTogglesInterface {
   a11yPopoverFocus?: boolean;
 
   /**
-   * Adds Datepicker label and corrects heading order for 'CheckoutScheduleReplenishmentOrderComponent'.
+   * Adds Datepicker and Combobox label and corrects heading order for 'CheckoutScheduleReplenishmentOrderComponent'.
    */
   a11yScheduleReplenishment?: boolean;
 

From c83738a780eeadf030d90093c944dcecd640dd6a Mon Sep 17 00:00:00 2001
From: Petar Markov <petarmarkov9449@gmail.com>
Date: Fri, 29 Nov 2024 12:11:45 +0100
Subject: [PATCH 2/3] replace div with ng-container

---
 .../checkout-schedule-replenishment-order.component.html  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html b/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
index d7a23dd42c1..56c525c4f2a 100644
--- a/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
+++ b/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
@@ -125,12 +125,12 @@
         </ng-template>
       </div>
       <div class="cx-month">
-        <div *cxFeature="'!a11yScheduleReplenishment'">
+        <ng-container *cxFeature="'!a11yScheduleReplenishment'">
           <span *ngIf="isMonthly" class="form-data-label">{{
             'checkoutScheduledReplenishment.every' | cxTranslate
           }}</span>
-        </div>
-        <div *cxFeature="'a11yScheduleReplenishment'">
+        </ng-container>
+        <ng-container *cxFeature="'a11yScheduleReplenishment'">
           <label
             *ngIf="isMonthly"
             class="form-data-label"
@@ -145,7 +145,7 @@
               'checkoutScheduledReplenishment.duration' | cxTranslate
             }}</label
           >
-        </div>
+        </ng-container>
         <select
           id="order-replenishment-recurrence-period"
           class="form-control"

From e58d0012ad7a7ae10f3a68b1dafcb66538a8bdba Mon Sep 17 00:00:00 2001
From: Petar Markov <petarmarkov9449@gmail.com>
Date: Fri, 29 Nov 2024 16:05:33 +0100
Subject: [PATCH 3/3] remove unncessary works using feature flag

---
 ...chedule-replenishment-order.component.html | 44 -------------------
 1 file changed, 44 deletions(-)

diff --git a/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html b/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
index 56c525c4f2a..ac54c190feb 100644
--- a/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
+++ b/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
@@ -63,22 +63,6 @@
         >
         <ng-container *ngIf="isWeekly; else isDaily">
           <select
-            *cxFeature="'!a11yScheduleReplenishment'"
-            class="form-control"
-            (change)="changeNumberOfWeeks($event.target.value)"
-          >
-            <option
-              *ngFor="let nWeeks of numberOfWeeks"
-              [value]="nWeeks"
-              [selected]="
-                nWeeks === scheduleReplenishmentFormData.numberOfWeeks
-              "
-            >
-              {{ nWeeks }}
-            </option>
-          </select>
-          <select
-            *cxFeature="'a11yScheduleReplenishment'"
             id="order-replenishment-period-type"
             class="form-control"
             (change)="changeNumberOfWeeks($event.target.value)"
@@ -96,20 +80,6 @@
         </ng-container>
         <ng-template #isDaily>
           <select
-            *cxFeature="'!a11yScheduleReplenishment'"
-            class="form-control"
-            (change)="changeNumberOfDays($event.target.value)"
-          >
-            <option
-              *ngFor="let nDays of numberOfDays"
-              [value]="nDays"
-              [selected]="nDays === scheduleReplenishmentFormData.numberOfDays"
-            >
-              {{ nDays }}
-            </option>
-          </select>
-          <select
-            *cxFeature="'a11yScheduleReplenishment'"
             id="order-replenishment-period-type"
             class="form-control"
             (change)="changeNumberOfDays($event.target.value)"
@@ -179,20 +149,6 @@
         >
         <div class="cx-day-of-month">
           <select
-            *cxFeature="'!a11yScheduleReplenishment'"
-            class="form-control"
-            (change)="changeDayOfTheMonth($event.target.value)"
-          >
-            <option
-              *ngFor="let nDays of numberOfDays"
-              [value]="nDays"
-              [selected]="nDays === scheduleReplenishmentFormData.nthDayOfMonth"
-            >
-              {{ nDays }}
-            </option>
-          </select>
-          <select
-            *cxFeature="'a11yScheduleReplenishment'"
             id="order-replenishment-day-of-month"
             class="form-control"
             (change)="changeDayOfTheMonth($event.target.value)"