From 170e08dc83bb7b80c1c4007c82079438a7ac78f4 Mon Sep 17 00:00:00 2001
From: LarisaStar <61147963+Larisa-Staroverova@users.noreply.github.com>
Date: Tue, 18 Jul 2023 16:29:05 +0200
Subject: [PATCH] Quote List: Display correct colors for quote statuses plus
 carets (#17626)

---
 .../quote-list/quote-list.component.html      |  55 ++-
 .../quote-list/quote-list.component.spec.ts   | 358 +++++++++++++++++-
 .../quote-list/quote-list.component.ts        |  92 ++++-
 .../quote-list/quote-list.module.ts           |   2 +
 .../quote/core/testing/quote-test-utils.ts    |   3 +-
 .../occ-quote-entry-normalizer.spec.ts        |   2 +
 feature-libs/quote/root/model/quote.model.ts  |   2 +-
 feature-libs/quote/styles/_quote-list.scss    | 127 +++++--
 8 files changed, 569 insertions(+), 72 deletions(-)

diff --git a/feature-libs/quote/components/quote-list/quote-list.component.html b/feature-libs/quote/components/quote-list/quote-list.component.html
index c59ba0f12a0..44e619cc8f9 100644
--- a/feature-libs/quote/components/quote-list/quote-list.component.html
+++ b/feature-libs/quote/components/quote-list/quote-list.component.html
@@ -5,8 +5,8 @@
     <ng-container
       *ngIf="quotesState.data.quotes.length > 0; else emptyQuoteList"
     >
-      <div class="cx-quote-list-sort top">
-        <label class="cx-quote-list-form-group form-group"
+      <div class="cx-sort top">
+        <label class="cx-form-group form-group"
           ><span class="sortBy-heading">
             {{ 'quote.list.sortBy' | cxTranslate }}
           </span>
@@ -28,23 +28,24 @@
       >
         <thead>
           <tr role="row">
-            <th scope="col" class="col-4">
+            <th role="columnheader">
               {{ 'quote.list.name' | cxTranslate }}
             </th>
-            <th scope="col" class="col-3">
+            <th role="columnheader">
               {{ 'quote.commons.id' | cxTranslate }}
             </th>
-            <th scope="col" class="col-2">
+            <th role="columnheader">
               {{ 'quote.commons.status' | cxTranslate }}
             </th>
-            <th scope="col" class="col-3">
+            <th role="columnheader">
               {{ 'quote.list.updated' | cxTranslate }}
             </th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let quote of quotesState.data.quotes">
-            <td class="cx-quote-list-quote-name">
+          <tr role="row" *ngFor="let quote of quotesState.data.quotes">
+            <td role="cell" class="cx-name">
               <div class="cx-mobile-header">
                 {{ 'quote.list.name' | cxTranslate }}
               </div>
@@ -52,14 +53,14 @@
                 [routerLink]="
                   {
                     cxRoute: 'quoteDetails',
-                    params: { quoteId: quote?.code }
+                    params: { quoteId: quote.code }
                   } | cxUrl
                 "
               >
-                {{ quote?.name }}
+                {{ quote.name }}
               </a>
             </td>
-            <td class="cx-quote-list-quote-code">
+            <td role="cell" class="cx-code">
               <div class="cx-mobile-header">
                 {{ 'quote.commons.id' | cxTranslate }}
               </div>
@@ -67,14 +68,14 @@
                 [routerLink]="
                   {
                     cxRoute: 'quoteDetails',
-                    params: { quoteId: quote?.code }
+                    params: { quoteId: quote.code }
                   } | cxUrl
                 "
               >
-                {{ quote?.code }}
+                {{ quote.code }}
               </a>
             </td>
-            <td class="cx-quote-list-quote-status">
+            <td role="cell" class="cx-status">
               <div class="cx-mobile-header">
                 {{ 'quote.commons.status' | cxTranslate }}
               </div>
@@ -82,15 +83,15 @@
                 [routerLink]="
                   {
                     cxRoute: 'quoteDetails',
-                    params: { quoteId: quote?.code }
+                    params: { quoteId: quote.code }
                   } | cxUrl
                 "
-                [ngClass]="getQuoteStateClass(quote?.state || 'TODO CHHI')"
+                [ngClass]="getQuoteStateClass(quote.state)"
               >
-                {{ 'quote.states.' + quote?.state | cxTranslate }}
+                {{ 'quote.states.' + quote.state | cxTranslate }}
               </a>
             </td>
-            <td class="cx-quote-list-quote-updatedDate">
+            <td role="cell" class="cx-updated-date">
               <div class="cx-mobile-header">
                 {{ 'quote.list.updated' | cxTranslate }}
               </div>
@@ -98,17 +99,29 @@
                 [routerLink]="
                   {
                     cxRoute: 'quoteDetails',
-                    params: { quoteId: quote?.code }
+                    params: { quoteId: quote.code }
                   } | cxUrl
                 "
               >
                 {{ quote?.updatedTime | cxDate: dateFormat }}
               </a>
             </td>
+            <td role="cell" class="cx-nav-caret">
+              <a
+                [routerLink]="
+                  {
+                    cxRoute: 'quoteDetails',
+                    params: { quoteId: quote.code }
+                  } | cxUrl
+                "
+              >
+                <cx-icon [type]="iconTypes.CARET_RIGHT"></cx-icon>
+              </a>
+            </td>
           </tr>
         </tbody>
       </table>
-      <div class="cx-quote-list-sort bottom">
+      <div class="cx-sort bottom">
         <div
           *ngIf="
             quotesState.data.pagination.totalPages &&
@@ -132,7 +145,7 @@
 </ng-template>
 
 <ng-template #emptyQuoteList>
-  <div class="cx-quote-list-empty">
+  <div class="cx-empty">
     {{ 'quote.list.empty' | cxTranslate }}
   </div>
 </ng-template>
diff --git a/feature-libs/quote/components/quote-list/quote-list.component.spec.ts b/feature-libs/quote/components/quote-list/quote-list.component.spec.ts
index d7fb4e7f1d4..314b8f1a4fb 100644
--- a/feature-libs/quote/components/quote-list/quote-list.component.spec.ts
+++ b/feature-libs/quote/components/quote-list/quote-list.component.spec.ts
@@ -23,9 +23,13 @@ import {
 } from '@spartacus/core';
 import { BehaviorSubject, of } from 'rxjs';
 import { QuoteListComponentService } from './quote-list-component.service';
-import { QuoteListComponent } from './quote-list.component';
+import {
+  QuoteListComponent,
+  ResponsiblePersonPrefix,
+} from './quote-list.component';
 import createSpy = jasmine.createSpy;
 import { createEmptyQuote } from '../../core/testing/quote-test-utils';
+import { ICON_TYPE } from '@spartacus/storefront';
 
 const mockCartId = '1234';
 const mockPagination: PaginationModel = {
@@ -85,6 +89,14 @@ class MockUrlPipe implements PipeTransform {
   transform() {}
 }
 
+@Component({
+  selector: 'cx-icon',
+  template: '',
+})
+class MockCxIconComponent {
+  @Input() type: ICON_TYPE;
+}
+
 class MockCommerceQuotesListComponentService
   implements Partial<QuoteListComponentService>
 {
@@ -115,6 +127,7 @@ describe('QuoteListComponent', () => {
         MockUrlPipe,
         MockPaginationComponent,
         MockSortingComponent,
+        MockCxIconComponent,
       ],
       providers: [
         {
@@ -177,7 +190,7 @@ describe('QuoteListComponent', () => {
 
     //when
     fixture.detectChanges();
-    const header = fixture.debugElement.query(By.css('.cx-quote-list-empty'));
+    const header = fixture.debugElement.query(By.css('.cx-empty'));
 
     //then
     expect(header.nativeElement.textContent.trim()).toEqual('quote.list.empty');
@@ -201,32 +214,351 @@ describe('QuoteListComponent', () => {
     expect(elements.length).toEqual(1);
   });
 
+  describe('isResponsible', () => {
+    it("should return 'true' in case state contains 'BUYER'", () => {
+      expect(
+        component['isResponsible'](
+          ResponsiblePersonPrefix.BUYER,
+          QuoteState.BUYER_ACCEPTED
+        )
+      ).toBe(true);
+    });
+
+    it("should return 'true' in case state contains 'SELLER'", () => {
+      expect(
+        component['isResponsible'](
+          ResponsiblePersonPrefix.SELLER,
+          QuoteState.SELLER_DRAFT
+        )
+      ).toBe(true);
+    });
+
+    it("should return 'true' in case state contains 'SELLERAPPROVER'", () => {
+      expect(
+        component['isResponsible'](
+          ResponsiblePersonPrefix.SELLERAPPROVER,
+          QuoteState.SELLERAPPROVER_APPROVED
+        )
+      ).toBe(true);
+    });
+  });
+
+  describe('getBuyerQuoteStatus', () => {
+    it('should return an empty string in case state is not a buyer one', () => {
+      expect(component['getBuyerQuoteStatus'](QuoteState.SELLER_DRAFT)).toBe(
+        ''
+      );
+    });
+  });
+
+  describe('getSellerQuoteStatus', () => {
+    it('should return an empty string in case state is not a seller one', () => {
+      expect(component['getSellerQuoteStatus'](QuoteState.BUYER_DRAFT)).toBe(
+        ''
+      );
+    });
+  });
+
+  describe('getSellerApproverQuoteStatus', () => {
+    it('should return an empty string in case state is not a seller approver one', () => {
+      expect(
+        component['getSellerApproverQuoteStatus'](QuoteState.BUYER_DRAFT)
+      ).toBe('');
+    });
+  });
+
+  describe('getGeneralQuoteStatus', () => {
+    it('should return an empty string in case state is not a general one', () => {
+      expect(component['getGeneralQuoteStatus'](QuoteState.BUYER_DRAFT)).toBe(
+        ''
+      );
+    });
+  });
+
   describe('getQuoteStateClass', () => {
-    it('should apply the quote class depending on the given quote state', () => {
+    it("should apply a class for 'BUYER_DRAFT' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.BUYER_DRAFT }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-draft');
+    });
+
+    it("should apply a class for 'SELLER_DRAFT' quote status", () => {
       //given
       mockQuoteListState$.next({
         ...mockQuoteListState,
         data: {
           ...mockQuoteList,
-          quotes: [
-            { ...mockQuote, state: QuoteState.BUYER_DRAFT },
-            { ...mockQuote, cartId: '1235', state: QuoteState.BUYER_REJECTED },
-            { ...mockQuote, cartId: '1235', state: QuoteState.CANCELLED },
-            { ...mockQuote, cartId: '1235', state: QuoteState.BUYER_SUBMITTED },
-          ],
+          quotes: [{ ...mockQuote, state: QuoteState.SELLER_DRAFT }],
         },
       });
       //when
       fixture.detectChanges();
       //then
       const quoteStateLinks = fixture.debugElement.queryAll(
-        By.css('.cx-quote-list-quote-status a')
+        By.css('.cx-status a')
       );
 
       expect(quoteStateLinks[0].attributes.class).toContain('quote-draft');
-      expect(quoteStateLinks[1].attributes.class).toContain('quote-rejected');
-      expect(quoteStateLinks[2].attributes.class).toContain('quote-cancelled');
-      expect(quoteStateLinks[3].attributes.class).toContain('quote-submitted');
+    });
+
+    it("should apply a class for 'BUYER_SUBMITTED' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.BUYER_SUBMITTED }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-submitted');
+    });
+
+    it("should apply a class for 'SELLER_SUBMITTED' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.SELLER_SUBMITTED }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-submitted');
+    });
+
+    it("should apply a class for 'BUYER_ACCEPTED' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.BUYER_ACCEPTED }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-accepted');
+    });
+
+    it("should apply a class for 'BUYER_APPROVED' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.BUYER_APPROVED }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-approved');
+    });
+
+    it("should apply a class for 'SELLERAPPROVER_APPROVED' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.SELLERAPPROVER_APPROVED }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-approved');
+    });
+
+    it("should apply a class for 'BUYER_REJECTED' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.BUYER_REJECTED }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-rejected');
+    });
+
+    it("should apply a class for 'SELLERAPPROVER_REJECTED' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.SELLERAPPROVER_REJECTED }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-rejected');
+    });
+
+    it("should apply a class for 'BUYER_OFFER' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.BUYER_OFFER }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-offer');
+    });
+
+    it("should apply a class for 'BUYER_ORDERED' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.BUYER_ORDERED }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-ordered');
+    });
+
+    it("should apply a class for 'SELLER_REQUEST' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.SELLER_REQUEST }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-request');
+    });
+
+    it("should apply a class for 'SELLERAPPROVER_PENDING' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.SELLERAPPROVER_PENDING }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-pending');
+    });
+
+    it("should apply a class for 'CANCELLED' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.CANCELLED }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-cancelled');
+    });
+
+    it("should apply a class for 'EXPIRED' quote status", () => {
+      //given
+      mockQuoteListState$.next({
+        ...mockQuoteListState,
+        data: {
+          ...mockQuoteList,
+          quotes: [{ ...mockQuote, state: QuoteState.EXPIRED }],
+        },
+      });
+      //when
+      fixture.detectChanges();
+      //then
+      const quoteStateLinks = fixture.debugElement.queryAll(
+        By.css('.cx-status a')
+      );
+
+      expect(quoteStateLinks[0].attributes.class).toContain('quote-expired');
     });
   });
 });
diff --git a/feature-libs/quote/components/quote-list/quote-list.component.ts b/feature-libs/quote/components/quote-list/quote-list.component.ts
index e6dbdfe4c61..092bfe024cf 100644
--- a/feature-libs/quote/components/quote-list/quote-list.component.ts
+++ b/feature-libs/quote/components/quote-list/quote-list.component.ts
@@ -6,6 +6,14 @@
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { QuoteListComponentService } from './quote-list-component.service';
+import { QuoteState } from '@spartacus/quote/root';
+import { ICON_TYPE } from '@spartacus/storefront';
+
+export enum ResponsiblePersonPrefix {
+  BUYER = 'BUYER_',
+  SELLER = 'SELLER_',
+  SELLERAPPROVER = 'SELLERAPPROVER_',
+}
 
 @Component({
   selector: 'cx-quote-list',
@@ -17,6 +25,7 @@ export class QuoteListComponent {
   sortLabels$ = this.quoteListService.sortLabels$;
   quotesState$ = this.quoteListService.quotesState$;
   dateFormat: string = 'MMMM d, YYYY h:mm aa';
+  iconTypes = ICON_TYPE;
 
   constructor(protected quoteListService: QuoteListComponentService) {
     this.changePage(0);
@@ -31,18 +40,91 @@ export class QuoteListComponent {
     this.quoteListService.setCurrentPage(page);
   }
 
-  getQuoteStateClass(state: string): string {
+  protected getBuyerQuoteStatus(state: QuoteState): string {
     switch (state) {
-      case 'BUYER_DRAFT':
+      case QuoteState.BUYER_DRAFT:
         return 'quote-draft';
-      case 'BUYER_SUBMITTED':
+      case QuoteState.BUYER_SUBMITTED:
         return 'quote-submitted';
-      case 'BUYER_REJECTED':
+      case QuoteState.BUYER_ACCEPTED:
+        return 'quote-accepted';
+      case QuoteState.BUYER_APPROVED:
+        return 'quote-approved';
+      case QuoteState.BUYER_REJECTED:
         return 'quote-rejected';
-      case 'CANCELLED':
+      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 '';
     }
   }
+
+  protected isResponsible(
+    prefix: ResponsiblePersonPrefix,
+    state: QuoteState
+  ): boolean {
+    if (state.indexOf(prefix) >= 0) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Retrieves the class name for the quote state.
+   *
+   * @param {QuoteState} state - quote state
+   * @returns {string} - if the quote state is known then returns a class name, otherwise returns an empty string.
+   */
+  getQuoteStateClass(state: QuoteState): string {
+    if (this.isResponsible(ResponsiblePersonPrefix.BUYER, state)) {
+      return this.getBuyerQuoteStatus(state);
+    } else if (this.isResponsible(ResponsiblePersonPrefix.SELLER, state)) {
+      return this.getSellerQuoteStatus(state);
+    } else if (
+      this.isResponsible(ResponsiblePersonPrefix.SELLERAPPROVER, state)
+    ) {
+      return this.getSellerApproverQuoteStatus(state);
+    } else {
+      return this.getGeneralQuoteStatus(state);
+    }
+  }
 }
diff --git a/feature-libs/quote/components/quote-list/quote-list.module.ts b/feature-libs/quote/components/quote-list/quote-list.module.ts
index 40045994de6..8a3b061443b 100644
--- a/feature-libs/quote/components/quote-list/quote-list.module.ts
+++ b/feature-libs/quote/components/quote-list/quote-list.module.ts
@@ -15,6 +15,7 @@ import {
   UrlModule,
 } from '@spartacus/core';
 import {
+  IconModule,
   ListNavigationModule,
   SpinnerModule,
   ViewConfig,
@@ -26,6 +27,7 @@ import { QuoteListComponent } from './quote-list.component';
   imports: [
     CommonModule,
     I18nModule,
+    IconModule,
     UrlModule,
     RouterModule,
     ListNavigationModule,
diff --git a/feature-libs/quote/core/testing/quote-test-utils.ts b/feature-libs/quote/core/testing/quote-test-utils.ts
index 20402d79453..2eb85e3d510 100644
--- a/feature-libs/quote/core/testing/quote-test-utils.ts
+++ b/feature-libs/quote/core/testing/quote-test-utils.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Quote } from '@spartacus/quote/root';
+import { Quote, QuoteState } from '@spartacus/quote/root';
 
 /**
  * Quote test utils
@@ -14,6 +14,7 @@ export function createEmptyQuote(): Quote {
   return {
     code: QUOTE_CODE,
     name: 'Quote',
+    state: QuoteState.BUYER_DRAFT,
     allowedActions: [],
     totalPrice: {},
     comments: [],
diff --git a/feature-libs/quote/occ/converters/occ-quote-entry-normalizer.spec.ts b/feature-libs/quote/occ/converters/occ-quote-entry-normalizer.spec.ts
index 421eb813297..4a016e20222 100644
--- a/feature-libs/quote/occ/converters/occ-quote-entry-normalizer.spec.ts
+++ b/feature-libs/quote/occ/converters/occ-quote-entry-normalizer.spec.ts
@@ -1,5 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { ConverterService, PRODUCT_NORMALIZER } from '@spartacus/core';
+import { QuoteState } from '@spartacus/quote/root';
 import { OccQuoteEntryNormalizer } from './occ-quote-entry-normalizer';
 
 class MockConverterService {
@@ -33,6 +34,7 @@ describe('OccQuoteEntryNormalizer', () => {
     const quote = {
       allowedActions: [],
       code: 'testquote',
+      state: QuoteState.BUYER_DRAFT,
       comments: [],
       description: 'test description',
       entries: [{ product }],
diff --git a/feature-libs/quote/root/model/quote.model.ts b/feature-libs/quote/root/model/quote.model.ts
index 70660e1481a..a046aff47ce 100644
--- a/feature-libs/quote/root/model/quote.model.ts
+++ b/feature-libs/quote/root/model/quote.model.ts
@@ -22,7 +22,7 @@ export interface OccQuote {
   previousEstimatedTotal?: Price;
   productDiscounts?: Price;
   quoteDiscounts?: Price;
-  state?: QuoteState;
+  state: QuoteState;
   subTotalWithDiscounts?: Price;
   threshold?: number;
   totalItems?: number;
diff --git a/feature-libs/quote/styles/_quote-list.scss b/feature-libs/quote/styles/_quote-list.scss
index 8e6a30117f8..720cb03ff38 100644
--- a/feature-libs/quote/styles/_quote-list.scss
+++ b/feature-libs/quote/styles/_quote-list.scss
@@ -1,53 +1,117 @@
 %cx-quote-list {
   @extend .cx-agnostic-table;
+
   table {
-    th {
-      text-transform: capitalize;
-      text-align: start;
-      &:nth-last-of-type(1) {
-        text-align: start;
-      }
-    }
     tr {
       &:hover {
-        background-color: var(--cx-color-background);
         cursor: pointer;
+        background-color: var(--cx-color-background);
       }
-    }
-    td {
-      text-align: start;
-      &:nth-last-of-type(1) {
+
+      th {
+        text-align: start;
+        text-transform: capitalize;
+      }
+
+      td {
         text-align: start;
+
+        &:nth-last-of-type(1) {
+          text-align: center;
+        }
       }
     }
 
     tbody {
+      @include media-breakpoint-down(md) {
+        tr {
+          position: relative;
+
+          td {
+            align-items: start;
+
+            .cx-mobile-header {
+              min-width: 30%;
+            }
+          }
+        }
+      }
+
+      .cx-name {
+        a {
+          font-weight: var(--cx-font-weight-semi);
+        }
+      }
+
+      .cx-status {
+        a {
+          font-weight: var(--cx-font-weight-semi);
+        }
+      }
+
+      .cx-code,
+      .cx-updated-date {
+        a {
+          color: var(--cx-color-text);
+        }
+      }
+
+      .cx-nav-caret {
+        a {
+          color: var(--cx-color-secondary);
+        }
+      }
+
+      @include media-breakpoint-down(md) {
+        .cx-nav-caret {
+          position: absolute;
+          top: 40%;
+          right: 5px;
+
+          a {
+            min-height: 5px;
+            min-width: 5px;
+          }
+        }
+      }
+
       a {
-        color: var(--cx-color-text);
-        text-decoration: none;
+        &:hover {
+          text-decoration: none;
+        }
       }
-      .quote-draft {
-        color: var(--cx-color-dark);
+
+      .quote-approved {
+        color: var(--cx-color-primary);
       }
-      .quote-rejected {
+
+      .quote-cancelled {
         color: var(--cx-color-warning);
       }
-      .quote-submitted {
-        color: var(--cx-color-success);
+
+      .quote-draft,
+      .quote-expired {
+        color: var(--cx-color-dark);
       }
-      .quote-cancelled {
+
+      .quote-ordered,
+      .quote-offer,
+      .quote-pending,
+      .quote-request {
+        color: var(--cx-color-text);
+      }
+
+      .quote-rejected {
         color: var(--cx-color-danger);
       }
-    }
-  }
 
-  @include media-breakpoint-down(md) {
-    .cx-mobile-header {
-      min-width: 140px;
+      .quote-submitted {
+        color: var(--cx-color-success);
+      }
     }
   }
 
-  .cx-quote-list-sort {
+  .cx-sort {
     &.top {
       display: flex;
       justify-content: space-between;
@@ -69,14 +133,15 @@
     }
   }
 
-  .cx-quote-list-pagination {
+  .cx-pagination {
     @include media-breakpoint-down(sm) {
       margin: 0 auto;
     }
   }
 
-  .cx-quote-list-form-group {
+  .cx-form-group {
     width: 40%;
+
     .sortBy-heading {
       font-size: var(--cx-font-size, 1rem);
       font-weight: var(--cx-font-weight-semi);
@@ -86,13 +151,13 @@
       width: 100%;
     }
 
-    @include media-breakpoint-down(sm) {
-      padding: 1.25rem;
+    @include media-breakpoint-down(md) {
+      padding-inline-start: 0;
       width: 100%;
     }
   }
 
-  .cx-quote-list-empty {
+  .cx-empty {
     font-size: var(--cx-font-size, 1rem);
     font-weight: $font-weight-normal;
   }