(PC-32278)[PRO] feat: cover no venue selection case in income page - …

…TESTS BREAK

pro/src/apiClient/v1/models/StatisticsModel.ts

@@ -4,6 +4,6 @@
 /* eslint-disable */
 import type { AggregatedRevenue } from './AggregatedRevenue';
 export type StatisticsModel = {
-  incomeByYear: Record<string, (AggregatedRevenue | Record<string, any>)>;
+  incomeByYear: Record<string, (AggregatedRevenue | Record<string, never>)>;
 };
 

pro/src/commons/utils/factories/statisticsFactories.ts

@@ -0,0 +1,57 @@
+import { StatisticsModel } from "apiClient/v1";
+
+export const statisticsFactory = (): StatisticsModel => {
+  return {
+    incomeByYear: {
+      '2020': {},
+      '2021': {
+        revenue: {
+          total: 0,
+          individual: 0,
+          collective: 0,
+        },
+        expectedRevenue: {
+          total: 0,
+          individual: 0,
+          collective: 0,
+        },
+      },
+      '2022': {
+        expectedRevenue: {
+          total: 0,
+          individual: 0,
+          collective: 0,
+        },
+        revenue: {
+          total: 2000.27,
+          individual: 2000,
+          collective: 0,
+        },
+      },
+      '2023': {
+        expectedRevenue: {
+          total: 0,
+          individual: 0,
+          collective: 0,
+        },
+        revenue: {
+          total: 3000,
+          individual: 1500,
+          collective: 1500,
+        },
+      },
+      '2024': {
+        revenue: {
+          total: 4000,
+          individual: 2000,
+          collective: 2000,
+        },
+        expectedRevenue: {
+          total: 5000,
+          individual: 2500,
+          collective: 2500,
+        },
+      },
+    }
+  }
+}

pro/src/pages/Reimbursements/Income/Income.tsx

@@ -11,6 +11,7 @@ import { IncomeError } from './IncomeError/IncomeError'
 import { IncomeNoData } from './IncomeNoData/IncomeNoData'
 import { IncomeResultsBox } from './IncomeResultsBox/IncomeResultsBox'
 import { IncomeVenueSelector } from './IncomeVenueSelector/IncomeVenueSelector'
+import { hasIncomeByYearData } from './utils'
 
 export const Income = () => {
   const venueSelectorRef = useRef<HTMLInputElement>(null)
@@ -32,8 +33,13 @@ export const Income = () => {
   } = useIncome(selectedVenues)
   const finalActiveYear = activeYear || years[0]
   const activeYearIncome = incomeByYear?.[finalActiveYear] || {}
-  const activeYearHasData =
-    activeYearIncome.revenue || activeYearIncome.expectedRevenue
+  const activeYearHasData = hasIncomeByYearData(activeYearIncome)
+
+  useEffect(() => {
+    if (venuesDataReady && selectedVenues.length === 0) {
+      setSelectedVenues(venues.map((venue) => venue.value))
+    }
+  }, [venuesDataReady, venues, selectedVenues])
 
   useEffect(() => {
     if (!hasSingleVenue) {
@@ -49,8 +55,20 @@ export const Income = () => {
 
   const onChange = useCallback(
     (formiklySelectedVenues: string[]) => {
-      if (!isEqual(formiklySelectedVenues, selectedVenues)) {
+      const selectedVenuesWereInitiated = selectedVenues.length > 0
+      const formiklySelectionIsNotEmpty = formiklySelectedVenues.length > 0
+      const parentStateIsOutdated = !isEqual(
+        formiklySelectedVenues,
+        selectedVenues
+      )
+
+      if (
+        selectedVenuesWereInitiated &&
+        formiklySelectionIsNotEmpty &&
+        parentStateIsOutdated
+      ) {
         setSelectedVenues(formiklySelectedVenues)
+        setActiveYear(undefined)
       }
     },
     [selectedVenues]
@@ -62,7 +80,7 @@ export const Income = () => {
         {!venuesDataReady && (
           <>
             {areVenuesLoading ? (
-              <Spinner />
+              <Spinner testId="venues-spinner" />
             ) : venuesApiError ? (
               <IncomeError />
             ) : (
@@ -125,7 +143,7 @@ export const Income = () => {
             {!incomeDataReady && (
               <>
                 {isIncomeLoading ? (
-                  <Spinner />
+                  <Spinner testId="income-spinner"/>
                 ) : incomeApiError ? (
                   <IncomeError />
                 ) : (

pro/src/pages/Reimbursements/Income/IncomeResultsBox/IncomeResultsBox.tsx

@@ -3,6 +3,7 @@ import fullHelpIcon from 'icons/full-help.svg'
 import { BoxRounded } from 'ui-kit/BoxRounded/BoxRounded'
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { hasRevenueData } from '../utils'
 
 import styles from './IncomeResultsBox.module.scss'
 
@@ -42,11 +43,11 @@ const IncomeResultsSubBox = ({ title, number, help }: IncomeSubBoxProps) => {
 
 type IncomeResultsBoxProps = {
   type: keyof AggregatedRevenue
-  income?: Revenue
+  income: Revenue
 }
 
 export const IncomeResultsBox = ({ type, income }: IncomeResultsBoxProps) => {
-  if (!income) {
+  if (!hasRevenueData(income)) {
     return null
   }
 
@@ -58,7 +59,7 @@ export const IncomeResultsBox = ({ type, income }: IncomeResultsBoxProps) => {
     type === 'revenue'
       ? 'Montant des réservations validées et remboursées.'
       : 'Montant des réservations en cours, validées et remboursées.'
-  const shouldDisplayIncomeDetails = income.individual && income.collective
+  const shouldDisplayIncomeDetails = income.individual !== 0 && income.collective !== 0
 
   return (
     <BoxRounded
@@ -72,13 +73,13 @@ export const IncomeResultsBox = ({ type, income }: IncomeResultsBoxProps) => {
       />
       {shouldDisplayIncomeDetails && (
         <div className={styles['income-results-box-subbox']}>
-          {income.individual && (
+          {income.individual !== 0 && (
             <IncomeResultsSubBox
               title="Part individuelle"
               number={income.individual}
             />
           )}
-          {income.collective && (
+          {income.collective !== 0 && (
             <IncomeResultsSubBox
               title="Part collective"
               number={income.collective}

pro/src/pages/Reimbursements/Income/IncomeVenueSelector/IncomeVenueSelector.tsx

@@ -1,6 +1,7 @@
 import { FormikProvider, useFormik } from 'formik'
 import { useEffect, ForwardedRef } from 'react'
 import { useDebounce } from 'use-debounce'
+import * as yup from 'yup'
 
 import { SelectAutocomplete } from 'ui-kit/form/SelectAutoComplete/SelectAutocomplete'
 
@@ -23,10 +24,23 @@ export const IncomeVenueSelector = ({
   refForInput,
 }: IncomeVenueSelectorProps) => {
   const formik = useFormik<VenueFormValues>({
+    // SelectAutocomplete has two fields:
+    // - selectedVenues: for the <select> menu & SelectedValuesTags
+    // - 'search-selectedVenues': for the search input
     initialValues: {
       selectedVenues: venues.map((v) => v.value),
       'search-selectedVenues': '',
     },
+    validationSchema: yup.object().shape({
+      selectedVenues: yup.array().test({
+        name: 'selectedVenues',
+        message: 'Vous devez sélectionner au moins un partenaire',
+        test: (value) => {
+          return (value || []).length > 0
+        },
+      }),
+      'search-selectedVenues': yup.string(),
+    }),
     onSubmit: () => {},
   })