CXSPA-4762 Support 2 more statuses, simplify (#17846)

feature-libs/quote/assets/translations/en/quote.i18n.ts

@@ -24,9 +24,11 @@ export const quote = {
       SELLER_DRAFT: 'Draft',
       SELLER_REQUEST: 'Requested',
       SELLER_SUBMITTED: 'Submitted',
+      SELLERAPPROVER_DRAFT: 'Draft',
       SELLERAPPROVER_PENDING: 'Pending Approval',
       SELLERAPPROVER_APPROVED: 'Approved',
       SELLERAPPROVER_REJECTED: 'Rejected',
+      CREATED: 'Created',
       CANCELLED: 'Cancelled',
       EXPIRED: 'Expired',
     },

feature-libs/quote/components/quote-list/quote-list.component.spec.ts

@@ -215,40 +215,56 @@ describe('QuoteListComponent', () => {
       1
     );
   });
-
-  describe('getBuyerQuoteStatus', () => {
-    it('should return an empty string in case state is not a buyer one', () => {
-      expect(component['getBuyerQuoteStatus'](QuoteState.SELLER_DRAFT)).toBe(
-        ''
+  describe('getQuoteStateClass', () => {
+    it('should find proper style class for quote state', () => {
+      expect(
+        component.getQuoteStateClass(QuoteState.SELLERAPPROVER_DRAFT)
+      ).toBe('quote-draft');
+    });
+    it('should find proper style class for quote state in case quote state does not contain underscore', () => {
+      expect(component.getQuoteStateClass(QuoteState.EXPIRED)).toBe(
+        'quote-expired'
       );
     });
   });
 
-  describe('getSellerQuoteStatus', () => {
-    it('should return an empty string in case state is not a seller one', () => {
-      expect(component['getSellerQuoteStatus'](QuoteState.BUYER_DRAFT)).toBe(
-        ''
+  describe('Rendering using getQuoteStateClass', () => {
+    it("should apply corresponding class for 'CREATED' quote status", () => {
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.CREATED }],
+        },
+      });
+      fixture.detectChanges();
+
+      CommonQuoteTestUtilsService.expectElementToContainText(
+        expect,
+        htmlElem,
+        'tbody tr:first-child .cx-status a.quote-created',
+        'quote.states.CREATED'
       );
     });
-  });
 
-  describe('getSellerApproverQuoteStatus', () => {
-    it('should return an empty string in case state is not a seller approver one', () => {
-      expect(
-        component['getSellerApproverQuoteStatus'](QuoteState.BUYER_DRAFT)
-      ).toBe('');
-    });
-  });
+    it("should apply corresponding class for 'SELLERAPPROVER_DRAFT' quote status", () => {
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.SELLERAPPROVER_DRAFT }],
+        },
+      });
+      fixture.detectChanges();
 
-  describe('getGeneralQuoteStatus', () => {
-    it('should return an empty string in case state is not a general one', () => {
-      expect(component['getGeneralQuoteStatus'](QuoteState.BUYER_DRAFT)).toBe(
-        ''
+      CommonQuoteTestUtilsService.expectElementToContainText(
+        expect,
+        htmlElem,
+        'tbody tr:first-child .cx-status a.quote-draft',
+        'quote.states.SELLERAPPROVER_DRAFT'
       );
     });
-  });
 
-  describe('getQuoteStateClass', () => {
     it("should apply a class for 'BUYER_DRAFT' quote status", () => {
       mockQuoteListState$.next({
         ...mockQuoteListState,

feature-libs/quote/components/quote-list/quote-list.component.ts

@@ -5,8 +5,7 @@
  */
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { QuoteRoleService } from '@spartacus/quote/core';
-import { QuoteRoleType, QuoteState } from '@spartacus/quote/root';
+import { QuoteState } from '@spartacus/quote/root';
 import { ICON_TYPE } from '@spartacus/storefront';
 import { QuoteListComponentService } from './quote-list-component.service';
 
@@ -22,10 +21,7 @@ export class QuoteListComponent {
   dateFormat: string = 'MMMM d, YYYY h:mm aa';
   iconTypes = ICON_TYPE;
 
-  constructor(
-    protected quoteListService: QuoteListComponentService,
-    protected quoteRoleService: QuoteRoleService
-  ) {
+  constructor(protected quoteListService: QuoteListComponentService) {
     this.changePage(0);
     this.changeSortCode('byCode');
   }
@@ -38,81 +34,19 @@ export class QuoteListComponent {
     this.quoteListService.setCurrentPage(page);
   }
 
-  protected getBuyerQuoteStatus(state: QuoteState): string {
-    switch (state) {
-      case QuoteState.BUYER_DRAFT:
-        return 'quote-draft';
-      case QuoteState.BUYER_SUBMITTED:
-        return 'quote-submitted';
-      case QuoteState.BUYER_ACCEPTED:
-        return 'quote-accepted';
-      case QuoteState.BUYER_APPROVED:
-        return 'quote-approved';
-      case QuoteState.BUYER_REJECTED:
-        return 'quote-rejected';
-      case QuoteState.BUYER_OFFER:
-        return 'quote-offer';
-      case QuoteState.BUYER_ORDERED:
-        return 'quote-ordered';
-      default:
-        return '';
-    }
-  }
-
-  protected getSellerQuoteStatus(state: QuoteState): string {
-    switch (state) {
-      case QuoteState.SELLER_DRAFT:
-        return 'quote-draft';
-      case QuoteState.SELLER_SUBMITTED:
-        return 'quote-submitted';
-      case QuoteState.SELLER_REQUEST:
-        return 'quote-request';
-      default:
-        return '';
-    }
-  }
-
-  protected getSellerApproverQuoteStatus(state: QuoteState): string {
-    switch (state) {
-      case QuoteState.SELLERAPPROVER_APPROVED:
-        return 'quote-approved';
-      case QuoteState.SELLERAPPROVER_REJECTED:
-        return 'quote-rejected';
-      case QuoteState.SELLERAPPROVER_PENDING:
-        return 'quote-pending';
-      default:
-        return '';
-    }
-  }
-
-  protected getGeneralQuoteStatus(state: QuoteState): string {
-    switch (state) {
-      case QuoteState.CANCELLED:
-        return 'quote-cancelled';
-      case QuoteState.EXPIRED:
-        return 'quote-expired';
-      default:
-        return '';
-    }
-  }
-
   /**
-   * Retrieves the class name for the quote state.
+   * Retrieves the class name for the quote state. This class name is composed
+   * using 'quote-' as prefix and the last part of the status name in lower case
+   * (like e.g. draft for SELLER_DRAFT)
    *
    * @param {QuoteState} state - quote state
-   * @returns {string} - if the quote state is known then returns a class name, otherwise returns an empty string.
+   * @returns {string} - class name corresponding to quote state.
    */
   getQuoteStateClass(state: QuoteState): string {
-    const role: QuoteRoleType = this.quoteRoleService.stateToRole(state);
-    switch (role) {
-      case QuoteRoleType.BUYER:
-        return this.getBuyerQuoteStatus(state);
-      case QuoteRoleType.SELLER:
-        return this.getSellerQuoteStatus(state);
-      case QuoteRoleType.SELLERAPPROVER:
-        return this.getSellerApproverQuoteStatus(state);
-      default:
-        return this.getGeneralQuoteStatus(state);
-    }
+    const stateAsString = state.toString();
+    const indexSeparator = stateAsString.indexOf('_');
+    //note: in case not found: indexSeparator is -1, lastPart will be stateAsString
+    const lastPart = stateAsString.substring(indexSeparator + 1);
+    return 'quote-' + lastPart.toLowerCase();
   }
 }

feature-libs/quote/root/model/quote.model.ts

@@ -76,9 +76,11 @@ export enum QuoteState {
   SELLER_DRAFT = 'SELLER_DRAFT',
   SELLER_REQUEST = 'SELLER_REQUEST',
   SELLER_SUBMITTED = 'SELLER_SUBMITTED',
+  SELLERAPPROVER_DRAFT = 'SELLERAPPROVER_DRAFT',
   SELLERAPPROVER_PENDING = 'SELLERAPPROVER_PENDING',
   SELLERAPPROVER_APPROVED = 'SELLERAPPROVER_APPROVED',
   SELLERAPPROVER_REJECTED = 'SELLERAPPROVER_REJECTED',
+  CREATED = 'CREATED',
   CANCELLED = 'CANCELLED',
   EXPIRED = 'EXPIRED',
 }

feature-libs/quote/styles/_quote-list.scss

@@ -125,6 +125,7 @@
       }
 
       .quote-draft,
+      .quote-created,
       .quote-expired {
         color: var(--cx-color-dark);
       }