fix: CXINT-2321 and CXINT-2322 (#17766)

feature-libs/requested-delivery-date/root/components/delivery-mode-date-picker/delivery-mode-date-picker.component.spec.ts

@@ -229,6 +229,77 @@ describe('DeliveryModeDatePickerComponent', () => {
       });
   });
 
+  it('should NOT call setRequestedDeliveryDate when a date less than earliestRetrievalAt is provided', () => {
+    spyOn(component, 'setRequestedDeliveryDate');
+
+    component['requestedDelDateFacade'].setRequestedDeliveryDate = jasmine
+      .createSpy('setRequestedDeliveryDate')
+      .and.returnValue(of({}));
+
+    const requestedRetrievalAt = '2023-05-03';
+    const earliestRetrievalAt = '2023-09-15';
+    const data = TestBed.inject(OutletContextData);
+    data.context$ = of({
+      item: {
+        requestedRetrievalAt,
+        earliestRetrievalAt,
+        code: '123',
+        user: {
+          uid: 'current',
+        },
+      },
+      readonly: false,
+    });
+
+    component.ngOnInit();
+    fixture.detectChanges();
+    const newRequestedRetrievalAt = '2023-01-01';
+    component['form'].patchValue({
+      requestDeliveryDate: newRequestedRetrievalAt,
+    });
+
+    //Manually trigger change event for date picker.
+    const event = new Event('update');
+    const datePickerEl: HTMLInputElement = fixture.debugElement.query(
+      By.css('cx-date-picker')
+    )?.nativeElement;
+    datePickerEl.dispatchEvent(event);
+
+    expect(component['setRequestedDeliveryDate']).toHaveBeenCalled();
+    expect(
+      component['requestedDelDateFacade'].setRequestedDeliveryDate
+    ).not.toHaveBeenCalled();
+  });
+
+  it('should NOT show the date picker when the component outlet value is read only', () => {
+    spyOn(component, 'setRequestedDeliveryDate');
+    const requestedRetrievalAt = '2023-05-03';
+    const earliestRetrievalAt = '2023-09-15';
+    const data = TestBed.inject(OutletContextData);
+    data.context$ = of({
+      item: {
+        requestedRetrievalAt,
+        earliestRetrievalAt,
+        code: '123',
+        user: {
+          uid: 'current',
+        },
+      },
+      readonly: true,
+    });
+
+    component.ngOnInit();
+    fixture.detectChanges();
+    const datePickerEl: HTMLInputElement = fixture.debugElement.query(
+      By.css('cx-date-picker')
+    )?.nativeElement;
+    expect(datePickerEl).toBeUndefined();
+    const datePickerReadOnlyEl: HTMLInputElement = fixture.debugElement.query(
+      By.css('cx-card')
+    )?.nativeElement;
+    expect(datePickerReadOnlyEl.innerHTML).not.toBeNull();
+  });
+
   it('should show error message when backend OCC API returns UnknownResourceError', (done) => {
     spyOn(component['globalMessageService'], 'add');
 

feature-libs/requested-delivery-date/root/components/delivery-mode-date-picker/delivery-mode-date-picker.component.ts

@@ -67,6 +67,9 @@ export class DeliveryModeDatePickerComponent implements OnInit, OnDestroy {
     } else {
       //set the value of requestedRetrievalAt as earliestRetrievalAt and update occ.
       this.requestedRetrievalAt = this.earliestRetrievalAt;
+      this.form.patchValue({
+        requestDeliveryDate: this.requestedRetrievalAt,
+      });
       this.setRequestedDeliveryDate();
     }
     this.form.patchValue({
@@ -104,15 +107,17 @@ export class DeliveryModeDatePickerComponent implements OnInit, OnDestroy {
   setRequestedDeliveryDate() {
     const userId = this.cartEntry?.user?.uid || '';
     const cartId = this.cartEntry?.code || '';
-    const requestedDate =
-      this.form?.get('requestDeliveryDate')?.value ||
-      this.requestedRetrievalAt ||
-      '';
+    const requestedDate = this.form?.get('requestDeliveryDate')?.value || '';
 
     if (
       userId.length === 0 ||
       cartId.length === 0 ||
-      requestedDate.length === 0
+      requestedDate.length === 0 ||
+      !this.dateValidationService.isDateStringValid(requestedDate) ||
+      !this.dateValidationService.isDateGreaterOrEqual(
+        requestedDate,
+        this.earliestRetrievalAt || ''
+      )
     ) {
       return;
     }

feature-libs/requested-delivery-date/root/components/shared/date-validation.service.spec.ts

@@ -6,6 +6,8 @@ const mockInvalidDate1 = '32-09-2023';
 const mockInvalidDate2 = '29-02-rddo';
 const mockInvalidDate3 = '';
 const mockInvalidDate4 = 'abcd';
+const mockValidGreaterDate = '31-12-2023';
+const mockValidLesserDate = '01-01-2023';
 
 describe('DateValidationService', () => {
   let service: DateValidationService;
@@ -22,14 +24,40 @@ describe('DateValidationService', () => {
     expect(service).toBeTruthy();
   });
 
-  it('should validate correct Dates', () => {
-    expect(service.isDateStringValid(mockValidDate)).toBeTruthy();
+  describe('isDateStringValid', () => {
+    it('should validate correct Dates', () => {
+      expect(service.isDateStringValid(mockValidDate)).toBeTruthy();
+    });
+
+    it('should invalidate wrong Dates', () => {
+      expect(service.isDateStringValid(mockInvalidDate1)).toBeFalsy();
+      expect(service.isDateStringValid(mockInvalidDate2)).toBeFalsy();
+      expect(service.isDateStringValid(mockInvalidDate3)).toBeFalsy();
+      expect(service.isDateStringValid(mockInvalidDate4)).toBeFalsy();
+    });
   });
 
-  it('should invalidate wrong Dates', () => {
-    expect(service.isDateStringValid(mockInvalidDate1)).toBeFalsy();
-    expect(service.isDateStringValid(mockInvalidDate2)).toBeFalsy();
-    expect(service.isDateStringValid(mockInvalidDate3)).toBeFalsy();
-    expect(service.isDateStringValid(mockInvalidDate4)).toBeFalsy();
+  describe('isDateGreaterOrEqual', () => {
+    it('should return false for invalid dates', () => {
+      expect(service.isDateGreaterOrEqual(mockValidDate, '')).toBeFalsy();
+    });
+
+    it('should return false when source date is less than target', () => {
+      expect(
+        service.isDateGreaterOrEqual(mockValidLesserDate, mockValidDate)
+      ).toBeFalsy();
+    });
+
+    it('should return true for equal dates', () => {
+      expect(
+        service.isDateGreaterOrEqual(mockValidDate, mockValidDate)
+      ).toBeTruthy();
+    });
+
+    it('should return true when source date is greater than target', () => {
+      expect(
+        service.isDateGreaterOrEqual(mockValidGreaterDate, mockValidDate)
+      ).toBeTruthy();
+    });
   });
 });

feature-libs/requested-delivery-date/root/components/shared/date-validation.service.ts

@@ -21,8 +21,32 @@ export class DateValidationService {
       value !== undefined &&
       value.length > 0 &&
       !isNaN(
-        new Date(value.replace(/(\d{2})-(\d{2})-(\d{4})/, '$2/$1/$3')).getDate() //convert 'dd-mm-yyyy' into 'mm/dd/yyyy'
+        this.getDateFromDateString(value).getDate() //convert 'dd-mm-yyyy' into 'mm/dd/yyyy'
       )
     );
   }
+
+  /**
+   * Returns a Date object from a date string in the format 'dd-mm-yyy'
+   * @param value Date string in the format 'dd-mm-yyy'
+   */
+  getDateFromDateString(value: string): Date {
+    return new Date(value.replace(/(\d{2})-(\d{2})-(\d{4})/, '$2/$1/$3'));
+  }
+
+  /**
+   * Checks if the source date is greater than or equal to the target
+   * @param source Date string in the format 'dd-mm-yyy'
+   * @param target Date string in the format 'dd-mm-yyy'
+   * @returns true if `source` date is greater than or equal to `target` date
+   */
+  isDateGreaterOrEqual(source: string, target: string): boolean {
+    if (source.length === 0 || target.length === 0) {
+      return false;
+    }
+    const d1 = this.getDateFromDateString(source);
+    const d2 = this.getDateFromDateString(target);
+
+    return d1 < d2 ? false : true;
+  }
 }

projects/storefrontapp-e2e-cypress/cypress/e2e/vendor/requested-delivery-date/requested-delivery-date.e2e.cy.ts

@@ -74,7 +74,7 @@ describe('Requested Delivery Date', { testIsolation: false }, () => {
     });
 
     it('should show an error when an invalid delivery date is provided', () => {
-      rddHelper.updateRequestedDeliveryDate('1000-01-01');
+      rddHelper.updateRequestedDeliveryDate('10000-01-01');
       rddHelper.verifyDeliveryDateErrorMessage();
     });
 

projects/storefrontapp-e2e-cypress/cypress/helpers/vendor/requested-delivery-date/requested-delivery-date.ts

@@ -99,8 +99,10 @@ export function verifyRDDDatePickerExists() {
 export function updateRequestedDeliveryDate(date: string) {
   interceptPutRequestedRetrievalAtEndpoint();
   cy.get('cx-date-picker').within(() => {
-    cy.get('input[type="date"]', { timeout: 3000 })
+    cy.get('input', { timeout: 3000 })
       .should('not.be.disabled')
+      .invoke('removeAttr', 'type')
+      .clear()
       .type(date)
       .trigger('update');
   });