(PC-32277)[PRO] feat: add Statistics new page (with mock data)

pro/src/app/AppRouter/subroutesReimbursements.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { Navigate } from 'react-router'
 
 import { BankInformations } from 'pages/Reimbursements/BankInformations/BankInformations'
+import { Income } from 'pages/Reimbursements/Income/Income'
 import { ReimbursementsInvoices } from 'pages/Reimbursements/ReimbursementsInvoices/ReimbursementsInvoices'
 
 import type { RouteConfig } from './routesMap'
@@ -25,4 +26,9 @@ export const routesReimbursements: RouteConfig[] = [
     path: '/remboursements/informations-bancaires',
     title: 'Informations bancaires',
   },
+  {
+    element: <Income />,
+    path: '/remboursements/revenus',
+    title: 'Revenus générés',
+  },
 ]

pro/src/components/ReimbursementsTabs/ReimbursementsTabs.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 
 import { GetOffererResponseModel } from 'apiClient/v1'
+import { useActiveFeature } from 'hooks/useActiveFeature'
 import { useActiveStep } from 'hooks/useActiveStep'
 import fullErrorIcon from 'icons/full-error.svg'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 import { Tab, Tabs } from 'ui-kit/Tabs/Tabs'
 
 import {
   STEP_ID_BANK_INFORMATIONS,
+  STEP_ID_INCOMES,
   STEP_ID_INVOICES,
   STEP_NAMES,
 } from './constants'
@@ -20,6 +22,8 @@ type ReimbursementsTabsProps = {
 export const ReimbursementsTabs = ({
   selectedOfferer,
 }: ReimbursementsTabsProps) => {
+  const isOffererStatsV2Active = useActiveFeature('WIP_OFFERER_STATS_V2')
+
   const activeStep = useActiveStep(STEP_NAMES)
   const hasWarning =
     (selectedOfferer &&
@@ -28,11 +32,12 @@ export const ReimbursementsTabs = ({
     false
 
   const getSteps = () => {
-    return [
+    const steps = [
       {
         id: STEP_ID_INVOICES,
         label: 'Justificatifs',
         url: '/remboursements',
+        isNew: false,
       },
       {
         id: STEP_ID_BANK_INFORMATIONS,
@@ -50,14 +55,27 @@ export const ReimbursementsTabs = ({
           </>
         ),
         url: '/remboursements/informations-bancaires',
+        isNew: false,
       },
     ]
+
+    if (isOffererStatsV2Active) {
+      steps.push({
+        id: STEP_ID_INCOMES,
+        label: 'Revenus générés',
+        url: '/remboursements/revenus',
+        isNew: true,
+      })
+    }
+
+    return steps
   }
 
-  const tabs: Tab[] = getSteps().map(({ id, label, url }) => ({
+  const tabs: Tab[] = getSteps().map(({ id, label, url, isNew }) => ({
     key: id,
     label,
     url,
+    isNew,
   }))
 
   return <Tabs tabs={tabs} selectedKey={activeStep} />

pro/src/components/ReimbursementsTabs/constants.ts

@@ -1,4 +1,9 @@
 export const STEP_ID_INVOICES = 'justificatifs'
 export const STEP_ID_BANK_INFORMATIONS = 'informations-bancaires'
+export const STEP_ID_INCOMES = 'revenus'
 
-export const STEP_NAMES = [STEP_ID_INVOICES, STEP_ID_BANK_INFORMATIONS]
+export const STEP_NAMES = [
+  STEP_ID_INVOICES,
+  STEP_ID_BANK_INFORMATIONS,
+  STEP_ID_INCOMES,
+]

pro/src/components/SideNavLinks/SideNavLinks.tsx

@@ -51,6 +51,8 @@ const COLLECTIVE_LINKS = ['/offres/collectives']
 
 export const SideNavLinks = ({ isLateralPanelOpen }: SideNavLinksProps) => {
   const isOffererStatsActive = useActiveFeature('ENABLE_OFFERER_STATS')
+  const isOffererStatsV2Active = useActiveFeature('WIP_OFFERER_STATS_V2')
+
   const isNewCollectiveOffersStructureEnabled = useActiveFeature(
     'WIP_ENABLE_NEW_COLLECTIVE_OFFERS_AND_BOOKINGS_STRUCTURE'
   )
@@ -342,7 +344,7 @@ export const SideNavLinks = ({ isLateralPanelOpen }: SideNavLinksProps) => {
             </ul>
           )}
         </li>
-        {isOffererStatsActive && (
+        {isOffererStatsActive && !isOffererStatsV2Active && (
           <li>
             <NavLink
               to="/statistiques"

pro/src/pages/Reimbursements/Income/Income.module.scss

@@ -0,0 +1,100 @@
+@use "styles/mixins/_fonts.scss" as fonts;
+@use "styles/variables/_size.scss" as size;
+@use "styles/mixins/_rem.scss" as rem;
+
+.income-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-grey-semi-dark);
+  text-align: center;
+
+  .icon {
+    margin-bottom: rem.torem(32px);
+  }
+}
+
+.income-filters {
+  display: flex;
+  flex-flow: row wrap;
+  margin-bottom: rem.torem(24px);
+  row-gap: rem.torem(10px);
+}
+
+.income-filters-divider {
+  display: none;
+
+  @media (min-width: size.$tablet) {
+    display: block;
+    margin: 0 rem.torem(24px);
+    width: rem.torem(1px);
+    height: rem.torem(40px);
+    background: var(--color-grey-semi-dark);
+  }
+}
+
+.income-year-filters {
+  display: flex;
+  flex-flow: row wrap;
+  flex-direction: row;
+  gap: rem.torem(8px);
+  margin-left: rem.torem(8px);
+
+  @media (min-width: size.$tablet) {
+    margin-left: 0;
+  }
+
+  li button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: none;
+    cursor: pointer;
+    padding: rem.torem(10px);
+    color: var(--color-black);
+    border: solid rem.torem(1px) var(--color-grey-dark);
+    border-radius: rem.torem(4px);
+  }
+
+  li button:hover, li button:focus {
+    outline: rem.torem(1px) solid var(--color-primary);
+  }
+
+  .active-year button {
+    @include fonts.button;
+
+    border-color: var(--color-black);
+
+    &::before {
+      content: '';
+      display: block;
+      width: rem.torem(8px);
+      height: rem.torem(8px);
+      background-color: var(--color-secondary-light);
+      border-radius: 50%;
+      margin-right: rem.torem(8px);
+    }
+  }
+}
+
+.income-no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .icon {
+    margin-bottom: rem.torem(20px);
+  }
+
+  .text-with-link {
+    display: flex;
+    margin-top: rem.torem(10px);
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .link {
+    margin: 0 rem.torem(10px);
+  }
+}