hiding action buttons row for cancelled orders

integration-libs/s4-service/order/components/s4-service-order-detail-actions/s4-service-order-detail-actions.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="order$ | async as order">
- <div class="cx-order-details-actions row" *ngIf="displayActions$">
+ <div class="cx-order-details-actions row" *ngIf="checkServiceStatus(order)">
  <span class="col-sm-12 col-md-4 col-xl-3">
  <span class="cx-action-button">
  <a

integration-libs/s4-service/order/components/s4-service-order-detail-actions/s4-service-order-detail-actions.component.spec.ts

@@ -47,12 +47,6 @@ class MockTranslationService {
  }
 }
 
-class MockCheckoutServiceSchedulePickerService {
- getHoursFromServiceSchedule(_dateTime: string) {
- return 0;
- }
-}
-
 class MockGlobalMessageService implements Partial<GlobalMessageService> {
  add(_: string | Translatable, __: GlobalMessageType, ___?: number): void {}
 }
@@ -69,12 +63,19 @@ describe('S4ServiceOrderDetailActionsComponent', () => {
  let el: DebugElement;
  let checkoutServiceSchedulePickerService: CheckoutServiceSchedulePickerService;
  let globalMessageService: GlobalMessageService;
- let beforeEachFn = (order: Order) => {
+ let beforeEachFn = (order: Order, hours?: number) => {
  class MockOrderDetailsService {
  getOrderDetails() {
  return of(order);
  }
  }
+
+ class MockCheckoutServiceSchedulePickerService {
+ getHoursFromServiceSchedule(_dateTime: string) {
+ return hours || 0;
+ }
+ }
+
  TestBed.configureTestingModule({
  imports: [I18nModule, RouterTestingModule],
  providers: [
@@ -106,19 +107,18 @@ describe('S4ServiceOrderDetailActionsComponent', () => {
  spyOn(globalMessageService, 'add').and.callThrough();
  };
 
- describe('serviceReschedulable', () => {
+ describe('serviceReschedulable after 24 hours', () => {
  beforeEach(() => {
- beforeEachFn(mockOrder1);
+ beforeEachFn(mockOrder1, 40);
  });
 
  it('should create', () => {
  expect(component).toBeTruthy();
  });
  it('should show Reschedule button when service is reschedulable', () => {
- component.displayActions$ = of(true);
  fixture.detectChanges();
  expect(el.query(By.css('.cx-order-details-actions'))).toBeTruthy();
- const elements = fixture.debugElement.queryAll(By.css('a'));
+ const elements = el.queryAll(By.css('a'));
  expect(elements.length).toEqual(1);
  });
  it('should display action buttons when time to service is more than 24 hours', () => {
@@ -127,23 +127,20 @@ describe('S4ServiceOrderDetailActionsComponent', () => {
  'getHoursFromServiceSchedule'
  ).and.returnValue(40);
  fixture.detectChanges();
- component.displayActions$.subscribe((res) => {
- expect(res).toBe(true);
- });
+ const btnRow = el.query(By.css('.cx-order-details-actions.row'));
+ expect(btnRow.nativeElement).toBeTruthy();
  });
+ });
+
+ describe('serviceReschedulable within 24 hours', () => {
+ beforeEach(() => {
+ beforeEachFn(mockOrder1, 10);
+ });
+
  it('should not display action buttons when time to service is within 24 hours', () => {
- spyOn(
- checkoutServiceSchedulePickerService,
- 'getHoursFromServiceSchedule'
- ).and.returnValue(10);
  fixture.detectChanges();
- component.displayActions$.subscribe((res) => {
- expect(res).toBe(false);
- });
- expect(globalMessageService.add).toHaveBeenCalledWith(
- { key: 'rescheduleService.serviceNotAmendable' },
- GlobalMessageType.MSG_TYPE_INFO
- );
+ const btnRow = el.query(By.css('.cx-order-details-actions.row'));
+ expect(btnRow).toBeFalsy();
  });
  });
 
@@ -152,18 +149,10 @@ describe('S4ServiceOrderDetailActionsComponent', () => {
  beforeEachFn(mockOrder2);
  });
 
- it('should not show Reschedule button when service is not reschedulable', () => {
- component.displayActions$ = of(true);
- fixture.detectChanges();
- const elements = fixture.debugElement.queryAll(By.css('a'));
- expect(elements.length).toEqual(0);
- });
-
  it('should not display action buttons when service is cancelled', () => {
  fixture.detectChanges();
- component.displayActions$.subscribe((res) => {
- expect(res).toBe(false);
- });
+ const btnRow = el.query(By.css('.cx-order-details-actions.row'));
+ expect(btnRow).toBeFalsy();
  });
  });
 
@@ -172,11 +161,17 @@ describe('S4ServiceOrderDetailActionsComponent', () => {
  beforeEachFn(mockOrder3);
  });
 
+ it('should not show Reschedule button when service is not reschedulable', () => {
+ fixture.detectChanges();
+ const elements = el.queryAll(By.css('a'));
+ expect(elements.length).toEqual(0);
+ });
+
  it('should display action buttons row as a failsafe', () => {
  fixture.detectChanges();
- component.displayActions$.subscribe((res) => {
- expect(res).toBe(true);
- });
+ const btnRow = el.query(By.css('.cx-order-details-actions.row'));
+
+ expect(btnRow.nativeElement).toBeTruthy();
  });
  });
 });

integration-libs/s4-service/order/components/s4-service-order-detail-actions/s4-service-order-detail-actions.component.ts

@@ -9,7 +9,6 @@ import { GlobalMessageService, GlobalMessageType } from '@spartacus/core';
 import { OrderDetailActionsComponent } from '@spartacus/order/components';
 import { Order } from '@spartacus/order/root';
 import { CheckoutServiceSchedulePickerService } from '@spartacus/s4-service/root';
-import { map, Observable } from 'rxjs';
 
 @Component({
  selector: 'cx-s4-service-order-detail-actions',
@@ -22,10 +21,6 @@ export class S4ServiceOrderDetailActionsComponent extends OrderDetailActionsComp
  );
  protected globalMessageService = inject(GlobalMessageService);
 
- displayActions$: Observable<boolean> = this.order$.pipe(
- map((order) => this.checkServiceStatus(order))
- );
-
  protected checkServiceStatus(order: Order): boolean {
  if (order && order.status === 'CANCELLED') {
  return false;