(PC-30689)[PRO] feat: Use displayedStatus in collective offers filter…

…s and status tag.
pass-culture · Sep 17, 2024 · 4485aca · 4485aca
1 parent c9b4b58
commit 4485aca
Show file tree

Hide file tree

Showing 11 changed files with 117 additions and 76 deletions.
diff --git a/pro/src/components/OfferEducationalActions/OfferEducationalActions.tsx b/pro/src/components/OfferEducationalActions/OfferEducationalActions.tsx
@@ -205,7 +205,7 @@ export const OfferEducationalActions = ({
               <div className={style.separator} />{' '}
             </>
           )}
-          {getCollectiveStatusLabel(offer.status, lastBookingStatus || '')}
+          {getCollectiveStatusLabel(offer.status, offer.displayedStatus)}
         </div>
       )}
     </>

diff --git a/pro/src/components/OfferEducationalActions/__specs__/OfferEducationalActions.spec.tsx b/pro/src/components/OfferEducationalActions/__specs__/OfferEducationalActions.spec.tsx
@@ -3,7 +3,11 @@ import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 
 import { api } from 'apiClient/api'
-import { CollectiveBookingStatus, CollectiveOfferStatus } from 'apiClient/v1'
+import {
+  CollectiveBookingStatus,
+  CollectiveOfferDisplayedStatus,
+  CollectiveOfferStatus,
+} from 'apiClient/v1'
 import * as useAnalytics from 'app/App/analytics/firebase'
 import { GET_COLLECTIVE_OFFER_TEMPLATE_QUERY_KEY } from 'config/swrQueryKeys'
 import { CollectiveBookingsEvents } from 'core/FirebaseEvents/constants'
@@ -123,6 +127,7 @@ describe('OfferEducationalActions', () => {
   it('should display booking link for booked offer', () => {
     const offer = getCollectiveOfferFactory({
       status: CollectiveOfferStatus.SOLD_OUT,
+      displayedStatus: CollectiveOfferDisplayedStatus.BOOKED,
       lastBookingId: 1,
       lastBookingStatus: CollectiveBookingStatus.CONFIRMED,
     })
@@ -142,6 +147,7 @@ describe('OfferEducationalActions', () => {
   it('should display booking link for used booking', () => {
     const offer = getCollectiveOfferFactory({
       status: CollectiveOfferStatus.EXPIRED,
+      displayedStatus: CollectiveOfferDisplayedStatus.REIMBURSED,
       lastBookingId: 1,
       lastBookingStatus: CollectiveBookingStatus.USED,
     })

diff --git a/pro/src/pages/CollectiveOffers/__specs__/CollectiveOffersQueryParams.spec.tsx b/pro/src/pages/CollectiveOffers/__specs__/CollectiveOffersQueryParams.spec.tsx
@@ -214,7 +214,7 @@ describe('route CollectiveOffers', () => {
       )
       const list = screen.getByTestId('list')
       await userEvent.click(within(list).getByText('Réservée'))
-      await userEvent.click(within(list).getByText('Validation en attente'))
+      await userEvent.click(within(list).getByText('En instruction'))
       await userEvent.click(within(list).getByText('Archivée'))
 
       await userEvent.click(screen.getByRole('button', { name: 'Rechercher' }))

diff --git a/.../Offers/OffersTable/Cells/CollectiveOfferStatusCell/CollectiveOfferStatusCell.module.scss b/.../Offers/OffersTable/Cells/CollectiveOfferStatusCell/CollectiveOfferStatusCell.module.scss
@@ -11,7 +11,8 @@
 .status {
   &-expired,
   &-pending,
-  &-inactive {
+  &-inactive,
+  &-cancelled {
     background-color: var(--color-grey-dark);
   }
 
@@ -32,16 +33,14 @@
     }
   }
 
-  &-booked {
-    background-color: var(--color-secondary);
-  }
-
   &-active,
-  &-validated {
+  &-validated,
+  &-reimbursed {
     background-color: var(--color-valid);
   }
 
-  &-draft {
+  &-draft,
+  &-booked {
     background-color: var(--color-secondary);
   }
 

diff --git a/...rc/pages/Offers/OffersTable/Cells/CollectiveOfferStatusCell/CollectiveOfferStatusCell.tsx b/...rc/pages/Offers/OffersTable/Cells/CollectiveOfferStatusCell/CollectiveOfferStatusCell.tsx
@@ -1,6 +1,7 @@
 import cn from 'classnames'
 
 import {
+  CollectiveOfferDisplayedStatus,
   CollectiveOfferResponseModel,
   CollectiveOfferStatus,
 } from 'apiClient/v1'
@@ -21,10 +22,10 @@ import style from './CollectiveOfferStatusCell.module.scss'
 
 export const getCollectiveStatusLabel = (
   offerStatus: CollectiveOfferStatus,
-  lastBookingStatus?: string
+  offerDisplayedStatus: CollectiveOfferDisplayedStatus
 ) => {
-  switch (offerStatus) {
-    case CollectiveOfferStatus.PENDING:
+  switch (offerDisplayedStatus) {
+    case CollectiveOfferDisplayedStatus.PENDING:
       return (
         <CollectiveStatusLabel
           className={style['status-pending']}
@@ -35,11 +36,11 @@ export const getCollectiveStatusLabel = (
               alt=""
             />
           }
-          label="en attente"
+          label="en instruction"
         />
       )
 
-    case CollectiveOfferStatus.REJECTED:
+    case CollectiveOfferDisplayedStatus.REJECTED:
       return (
         <CollectiveStatusLabel
           className={style['status-rejected']}
@@ -50,10 +51,10 @@ export const getCollectiveStatusLabel = (
               className={style['status-label-icon']}
             />
           }
-          label="refusée"
+          label="non conforme"
         />
       )
-    case CollectiveOfferStatus.INACTIVE:
+    case CollectiveOfferDisplayedStatus.INACTIVE:
       return (
         <CollectiveStatusLabel
           className={style['status-inactive']}
@@ -67,7 +68,7 @@ export const getCollectiveStatusLabel = (
           label="masquée"
         />
       )
-    case CollectiveOfferStatus.ACTIVE:
+    case CollectiveOfferDisplayedStatus.ACTIVE:
       return (
         <CollectiveStatusLabel
           className={style['status-active']}
@@ -81,8 +82,8 @@ export const getCollectiveStatusLabel = (
           label="publiée"
         />
       )
-    case CollectiveOfferStatus.SOLD_OUT:
-      return lastBookingStatus === 'PENDING' ? (
+    case CollectiveOfferDisplayedStatus.PREBOOKED:
+      return (
         <CollectiveStatusLabel
           className={style['status-pre-booked']}
           icon={
@@ -97,21 +98,38 @@ export const getCollectiveStatusLabel = (
           }
           label="préréservée"
         />
-      ) : (
+      )
+    case CollectiveOfferDisplayedStatus.BOOKED:
+      return (
         <CollectiveStatusLabel
           className={style['status-booked']}
           icon={
             <SvgIcon
-              src={strokeCheckIcon}
+              src={strokeClockIcon}
               alt=""
               className={style['status-label-icon']}
             />
           }
           label="réservée"
         />
       )
-    case CollectiveOfferStatus.EXPIRED:
-      return lastBookingStatus && lastBookingStatus !== 'CANCELLED' ? (
+    case CollectiveOfferDisplayedStatus.EXPIRED:
+      return (
+        <CollectiveStatusLabel
+          className={style['status-expired']}
+          icon={
+            <SvgIcon
+              alt=""
+              src={strokeCalendarIcon}
+              className={style['status-label-icon']}
+            />
+          }
+          label="expirée"
+        />
+      )
+    case CollectiveOfferDisplayedStatus.REIMBURSED:
+    case CollectiveOfferDisplayedStatus.ENDED:
+      return (
         <CollectiveStatusLabel
           className={style['status-ended']}
           icon={
@@ -123,37 +141,48 @@ export const getCollectiveStatusLabel = (
           }
           label="terminée"
         />
+      )
+    case CollectiveOfferDisplayedStatus.CANCELLED:
+      return offerStatus === CollectiveOfferStatus.ACTIVE ? (
+        <CollectiveStatusLabel
+          className={style['status-active']}
+          icon={
+            <SvgIcon
+              src={strokeCheckIcon}
+              alt=""
+              className={style['status-label-icon']}
+            />
+          }
+          label="publiée"
+        />
       ) : (
         <CollectiveStatusLabel
-          className={style['status-expired']}
+          className={style['status-inactive']}
           icon={
             <SvgIcon
               alt=""
-              src={strokeCalendarIcon}
+              src={fullHideIcon}
               className={style['status-label-icon']}
             />
           }
-          label="expirée"
+          label="masquée"
         />
       )
-    case CollectiveOfferStatus.ARCHIVED:
+    case CollectiveOfferDisplayedStatus.ARCHIVED:
       return (
         <CollectiveStatusLabel
           className={style['status-archived']}
           icon={
             <SvgIcon
               alt=""
               src={strokeThing}
-              className={cn(
-                style['status-label-icon'],
-                style['status-archived-icon']
-              )}
+              className={style['status-label-icon']}
             />
           }
           label="archivée"
         />
       )
-    case CollectiveOfferStatus.DRAFT:
+    case CollectiveOfferDisplayedStatus.DRAFT:
       return (
         <CollectiveStatusLabel
           className={style['status-draft']}
@@ -170,8 +199,6 @@ export const getCollectiveStatusLabel = (
           label="brouillon"
         />
       )
-    default:
-      throw Error('Le statut de l’offre n’est pas valide')
   }
 }
 
@@ -188,6 +215,6 @@ export const CollectiveOfferStatusCell = ({
     className={cn(styles['offers-table-cell'], styles['status-column'])}
     headers={headers}
   >
-    {getCollectiveStatusLabel(offer.status, offer.booking?.booking_status)}
+    {getCollectiveStatusLabel(offer.status, offer.displayedStatus)}
   </td>
 )
diff --git a/.../OffersTable/Cells/CollectiveOfferStatusCell/__specs__/CollectiveOfferStatusCell.spec.tsx b/.../OffersTable/Cells/CollectiveOfferStatusCell/__specs__/CollectiveOfferStatusCell.spec.tsx
@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react'
 
 import {
+  CollectiveOfferDisplayedStatus,
   CollectiveOfferResponseModel,
   CollectiveOfferStatus,
 } from 'apiClient/v1'
@@ -21,59 +22,69 @@ const renderCollectiveStatusLabel = (offer: CollectiveOfferResponseModel) => {
 }
 
 interface TestCaseProps {
-  offerStatus: CollectiveOfferStatus
-  bookingStatus?: string
+  status?: CollectiveOfferStatus
+  displayedStatus: CollectiveOfferDisplayedStatus
   expectedLabel: string
 }
 
 describe('CollectiveStatusLabel', () => {
   const testCases: TestCaseProps[] = [
-    { offerStatus: CollectiveOfferStatus.PENDING, expectedLabel: 'en attente' },
-    { offerStatus: CollectiveOfferStatus.REJECTED, expectedLabel: 'refusée' },
     {
-      offerStatus: CollectiveOfferStatus.INACTIVE,
+      displayedStatus: CollectiveOfferDisplayedStatus.PENDING,
+      expectedLabel: 'en instruction',
+    },
+    {
+      displayedStatus: CollectiveOfferDisplayedStatus.REJECTED,
+      expectedLabel: 'non conforme',
+    },
+    {
+      displayedStatus: CollectiveOfferDisplayedStatus.INACTIVE,
       expectedLabel: 'masquée',
     },
-    { offerStatus: CollectiveOfferStatus.ACTIVE, expectedLabel: 'publiée' },
     {
-      offerStatus: CollectiveOfferStatus.SOLD_OUT,
+      displayedStatus: CollectiveOfferDisplayedStatus.ACTIVE,
+      expectedLabel: 'publiée',
+    },
+    {
+      displayedStatus: CollectiveOfferDisplayedStatus.PREBOOKED,
       expectedLabel: 'préréservée',
-      bookingStatus: 'PENDING',
     },
     {
-      offerStatus: CollectiveOfferStatus.SOLD_OUT,
+      displayedStatus: CollectiveOfferDisplayedStatus.BOOKED,
       expectedLabel: 'réservée',
-      bookingStatus: 'CONFIRMED',
     },
     {
-      offerStatus: CollectiveOfferStatus.EXPIRED,
-      expectedLabel: 'terminée',
-      bookingStatus: 'USED',
+      displayedStatus: CollectiveOfferDisplayedStatus.EXPIRED,
+      expectedLabel: 'expirée',
+    },
+    {
+      displayedStatus: CollectiveOfferDisplayedStatus.CANCELLED,
+      expectedLabel: 'masquée',
+    },
+    {
+      displayedStatus: CollectiveOfferDisplayedStatus.CANCELLED,
+      status: CollectiveOfferStatus.ACTIVE,
+      expectedLabel: 'publiée',
+    },
+    {
+      displayedStatus: CollectiveOfferDisplayedStatus.ARCHIVED,
+      expectedLabel: 'archivée',
+    },
+    {
+      displayedStatus: CollectiveOfferDisplayedStatus.DRAFT,
+      expectedLabel: 'brouillon',
     },
-    { offerStatus: CollectiveOfferStatus.EXPIRED, expectedLabel: 'expirée' },
-    { offerStatus: CollectiveOfferStatus.ARCHIVED, expectedLabel: 'archivée' },
-    { offerStatus: CollectiveOfferStatus.DRAFT, expectedLabel: 'brouillon' },
   ]
 
   it.each(testCases)(
     'should render %s status',
-    ({ offerStatus, expectedLabel, bookingStatus }) => {
+    ({ displayedStatus, status, expectedLabel }: TestCaseProps) => {
       const collectiveOffer = collectiveOfferFactory({
-        status: offerStatus,
-        booking: bookingStatus
-          ? { id: 1, booking_status: bookingStatus }
-          : null,
+        displayedStatus: displayedStatus,
+        status: status,
       })
       renderCollectiveStatusLabel(collectiveOffer)
       expect(screen.getByText(expectedLabel)).toBeInTheDocument()
     }
   )
-  it('should throw error is offer status does not exist', () => {
-    const collectiveOffer = collectiveOfferFactory({
-      status: 'toto' as CollectiveOfferStatus,
-    })
-    expect(() => renderCollectiveStatusLabel(collectiveOffer)).toThrowError(
-      'Le statut de l’offre n’est pas valide'
-    )
-  })
 })
diff --git a/pro/src/pages/TemplateCollectiveOffers/__specs__/TemplateCollectiveOffers.spec.tsx b/pro/src/pages/TemplateCollectiveOffers/__specs__/TemplateCollectiveOffers.spec.tsx
@@ -86,7 +86,7 @@ describe('route TemplateCollectiveOffers', () => {
           })
         )
         const list = screen.getByTestId('list')
-        await userEvent.click(within(list).getByText('Refusée'))
+        await userEvent.click(within(list).getByText('Non conforme'))
 
         await userEvent.click(
           screen.getByRole('button', { name: 'Rechercher' })
@@ -118,7 +118,7 @@ describe('route TemplateCollectiveOffers', () => {
           })
         )
         const list = screen.getByTestId('list')
-        await userEvent.click(within(list).getByText('Refusée'))
+        await userEvent.click(within(list).getByText('Non conforme'))
         await userEvent.click(within(list).getByText('Archivée'))
 
         await userEvent.click(

diff --git a/...src/pages/TemplateCollectiveOffers/__specs__/TemplateCollectiveOffersQueryParams.spec.tsx b/...src/pages/TemplateCollectiveOffers/__specs__/TemplateCollectiveOffersQueryParams.spec.tsx
@@ -209,7 +209,7 @@ describe('route TemplateCollectiveOffers', () => {
         })
       )
       const list = screen.getByTestId('list')
-      await userEvent.click(within(list).getByText('Validation en attente'))
+      await userEvent.click(within(list).getByText('En instruction'))
       await userEvent.click(within(list).getByText('Archivée'))
 
       await userEvent.click(screen.getByRole('button', { name: 'Rechercher' }))