Mises à jour sur le panier d'actions

incubateur-ademe · May 7, 2024 · d1141b3 · d1141b3
1 parent 7fc809d
commit d1141b3
Show file tree

Hide file tree

Showing 9 changed files with 217 additions and 180 deletions.
diff --git a/packages/panier/app/panier/[id]/PagePanier.tsx b/packages/panier/app/panier/[id]/PagePanier.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import PanierRealtime from '@components/PanierRealtime';
+import Section from '@components/Section';
+import {
+  ActionImpactFourchetteBudgetaire,
+  ActionImpactTempsMiseEnOeuvre,
+  ActionImpactThematique,
+  Panier,
+} from '@tet/api';
+import {ControlledAlert} from '@tet/ui';
+
+type PagePanierProps = {
+  panier: Panier;
+  budgets: ActionImpactFourchetteBudgetaire[];
+  temps: ActionImpactTempsMiseEnOeuvre[];
+  thematiques: ActionImpactThematique[];
+};
+
+const PagePanier = ({panier, budgets, temps, thematiques}: PagePanierProps) => {
+  return (
+    <>
+      <ControlledAlert
+        title="Contenu en cours de validation par l’ADEME et en amélioration continue"
+        fullPageWidth
+      />
+
+      <Section>
+        <PanierRealtime {...{panier, budgets, temps, thematiques}} />
+      </Section>
+    </>
+  );
+};
+
+export default PagePanier;
diff --git a/packages/panier/app/panier/[id]/page.tsx b/packages/panier/app/panier/[id]/page.tsx
@@ -3,10 +3,9 @@
 import React from 'react';
 import {notFound} from 'next/navigation';
 import dynamic from 'next/dynamic';
-import Section from '@components/Section';
 import {extractIdsFromParam} from 'src/utils/extractIdsFromParam';
 import {fetchNiveaux, fetchPanier, fetchThematiques} from './utils';
-import PanierRealtime from '@components/PanierRealtime';
+import PagePanier from './PagePanier';
 
 const TrackPageView = dynamic(() => import('components/TrackPageView'), {
   ssr: false,
@@ -42,7 +41,7 @@ async function Page({
     panierId,
     thematique_ids,
     budget_ids,
-    temps_ids
+    temps_ids,
   );
 
   if (!panier) return notFound();
@@ -60,14 +59,7 @@ async function Page({
           panier_id: panier.id,
         }}
       />
-      <Section>
-        <PanierRealtime
-          panier={panier}
-          budgets={budgets}
-          temps={temps}
-          thematiques={thematiques}
-        />
-      </Section>
+      <PagePanier {...{panier, budgets, temps, thematiques}} />
     </>
   );
 }

diff --git a/packages/panier/components/ActionImpact/LienExterneModale.tsx b/packages/panier/components/ActionImpact/LienExterneModale.tsx
@@ -7,11 +7,11 @@ type LienExterneModaleProps = {
 
 const LienExterneModale = ({url, label}: LienExterneModaleProps) => {
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-start gap-2">
       <Icon icon="external-link-line" size="lg" className="text-primary-4" />
       <a
         href={url}
-        className="text-primary-10 text-sm font-bold bg-none active:!bg-transparent after:hidden border-b border-primary-10 hover:border-b-2 p-px hover:pb-0"
+        className="text-primary-10 text-sm leading-6 font-bold hover:text-primary-8 bg-none active:!bg-transparent after:hidden underline underline-offset-4"
         target="_blank"
         rel="noreferrer noopener"
       >

diff --git a/packages/panier/components/ActionImpact/NiveauBudget.tsx b/packages/panier/components/ActionImpact/NiveauBudget.tsx
@@ -1,60 +1,51 @@
 import {ActionImpactFourchetteBudgetaire} from '@tet/api';
-import {Icon, Tooltip} from '@tet/ui';
+import {Icon} from '@tet/ui';
 import classNames from 'classnames';
 
 type NiveauBudgetProps = {
   budget: ActionImpactFourchetteBudgetaire;
 };
 
 const NiveauBudget = ({budget}: NiveauBudgetProps) => {
-  const tooltipText = (
-    <div className="flex flex-col gap-2 text-primary-10">
-      <div className="font-bold">{budget.nom}</div>
-      <div>
-        Estimation budgétaire HT (investissement et fonctionnement, hors
-        subvention).
-      </div>
-      <div>
-        Une évaluation précise du budget sera à réaliser lors du dimensionnement
-        exacte de l’action.
-      </div>
-    </div>
-  );
+  // Mise en forme du label à partir du nom stocké en base
+  // ex : "De 40 000€ à 100 000€" => "40k à 100k"
+  // attention en cas de mise à jour des budgets
+  const label = budget.nom
+    .split('000')
+    .join('')
+    .replaceAll(' €', 'k')
+    .replace('De ', '');
 
   return (
-    <Tooltip
-      label={
-        <div className="w-52 !font-normal">
-          {budget.niveau === 1
-            ? 'Ordre de grandeur budgétaire non estimé.'
-            : tooltipText}
-        </div>
-      }
-    >
-      <div className="flex items-center justify-center px-1.5 py-1 border rounded border-grey-3 bg-grey-1">
-        <Icon
-          icon="money-euro-circle-fill"
-          className={classNames({
-            'text-secondary-1': budget.niveau > 1,
-            'text-grey-4': budget.niveau === 1,
-          })}
-        />
-        <Icon
-          icon="money-euro-circle-fill"
-          className={classNames({
-            'text-secondary-1': budget.niveau > 2,
-            'text-grey-4': budget.niveau <= 2,
-          })}
-        />
-        <Icon
-          icon="money-euro-circle-fill"
-          className={classNames({
-            'text-secondary-1': budget.niveau > 3,
-            'text-grey-4': budget.niveau <= 3,
-          })}
-        />
-      </div>
-    </Tooltip>
+    <div className="flex shrink-0 items-center justify-center px-1 py-0.5 border-[0.5px] rounded border-grey-3 bg-grey-1 gap-x-1">
+      <Icon
+        icon="money-euro-circle-fill"
+        size="sm"
+        className={classNames({
+          'text-secondary-1': budget.niveau > 1,
+          'text-grey-4': budget.niveau === 1,
+        })}
+      />
+      <Icon
+        icon="money-euro-circle-fill"
+        size="sm"
+        className={classNames({
+          'text-secondary-1': budget.niveau > 2,
+          'text-grey-4': budget.niveau <= 2,
+        })}
+      />
+      <Icon
+        icon="money-euro-circle-fill"
+        size="sm"
+        className={classNames({
+          'text-secondary-1': budget.niveau > 3,
+          'text-grey-4': budget.niveau <= 3,
+        })}
+      />
+      <span className="leading-3 pt-0.5 text-grey-6 text-sm font-bold">
+        {label}
+      </span>
+    </div>
   );
 };
 

diff --git a/packages/panier/components/FiltresActions/index.tsx b/packages/panier/components/FiltresActions/index.tsx
@@ -116,9 +116,9 @@ const FiltresActions = ({budgets, temps, thematiques}: FiltresActionsProps) => {
           multiple: true,
         },
       ]}
-      className="mt-2 mb-4"
-      btnMenuClassName="-mt-12"
-      menuClassName="-mt-12"
+      className="my-4"
+      btnMenuClassName="-mt-14"
+      menuClassName="-mt-14"
     />
   );
 };

diff --git a/packages/panier/components/PanierRealtime/index.tsx b/packages/panier/components/PanierRealtime/index.tsx
@@ -9,7 +9,7 @@ import {
   ActionImpactThematique,
   Panier,
 } from '@tet/api';
-import {Alert, PanierOngletName, useEventTracker, useOngletTracker} from '@tet/ui';
+import {PanierOngletName, useEventTracker, useOngletTracker} from '@tet/ui';
 import {panierAPI, supabase} from 'src/clientAPI';
 import ListeActions from '@components/ListeActions';
 import PanierActions from '@components/PanierActions';
@@ -42,7 +42,6 @@ const PanierRealtime = ({
   thematiques,
 }: PanierRealtimeProps) => {
   const [currentTab, setCurrentTab] = useState<PanierOngletName>('selection');
-  const [openAlert, setOpenAlert] = useState(true);
 
   const router = useRouter();
   const {setCollectiviteId} = useCollectiviteContext();
@@ -113,18 +112,12 @@ const PanierRealtime = ({
 
   return (
     <div className="grow flex max-lg:flex-col gap-8 max-lg:mb-6 min-h-[101vh]">
-      <div className="lg:w-3/5 xl:w-2/3 py-12 max-lg:pb-2 flex flex-col">
-        <Alert
-          isOpen={openAlert}
-          onClose={() => setOpenAlert(false)}
-          title="Contenu en cours de validation par l’ADEME et en amélioration continue"
-          classname="mb-8 -mt-4"
-        />
-        <h1 className="mb-4">
+      <div className="lg:w-3/5 xl:w-2/3 py-8 max-lg:pb-2 flex flex-col">
+        <h1 className="mb-6">
           Initiez <span className="text-primary">des actions impactantes</span>{' '}
           et valorisez le chemin déjà parcouru
         </h1>
-        <p className="text-grey-9 text-lg font-medium mt-0 mb-2">
+        <p className="text-grey-9 text-lg font-medium mb-6">
           Ajoutez les actions à votre panier. Vous pouvez aussi les classer en
           fonction de leur état d'avancement.
         </p>

diff --git a/packages/panier/components/Section/index.tsx b/packages/panier/components/Section/index.tsx
@@ -8,9 +8,7 @@ type SectionProps = {
 
 const Section = ({children, className, containerClassName}: SectionProps) => {
   return (
-    <div
-      className={classNames('w-full px-4 lg:px-6 xl:px-2', containerClassName)}
-    >
+    <div className={classNames('w-full px-4 lg:px-6', containerClassName)}>
       <div
         className={classNames(
           'grow flex flex-col w-full mx-auto xl:max-w-7xl 2xl:max-w-8xl',

diff --git a/packages/ui/src/design-system/Alert/Alert.tsx b/packages/ui/src/design-system/Alert/Alert.tsx
@@ -14,6 +14,8 @@ type AlertProps = {
   state?: AlertState;
   /** Initialisation de l'état open */
   isOpen?: boolean;
+  /** Gestion de l'affichage pour les alertes sur toute la largeur de page */
+  fullPageWidth?: boolean;
   /** Classname custom */
   classname?: string;
   /** Détecte la fermeture du bloc */
@@ -30,6 +32,7 @@ export const Alert = ({
   footer,
   state = 'info',
   isOpen = true,
+  fullPageWidth = false,
   classname,
   onClose,
 }: AlertProps) => {
@@ -41,38 +44,49 @@ export const Alert = ({
   return (
     <div
       className={classNames(
-        'py-3 px-4 flex gap-4',
-        {hidden: !isOpen},
-        styles.background,
-        classname
+        {'w-full px-4 lg:px-6': fullPageWidth},
+        styles.background
       )}
     >
-      {/* Icône à gauche du bloc */}
-      <Icon
-        icon={stateToIcon[state]}
-        className={classNames('mt-0.5', styles.text)}
-      />
+      <div
+        className={classNames(
+          'py-3 flex gap-4',
+          {
+            hidden: !isOpen,
+            'px-4': !fullPageWidth,
+            'w-full mx-auto xl:max-w-7xl 2xl:max-w-8xl': fullPageWidth,
+          },
+          styles.background,
+          classname
+        )}
+      >
+        {/* Icône à gauche du bloc */}
+        <Icon
+          icon={stateToIcon[state]}
+          className={classNames('mt-0.5', styles.text)}
+        />
 
-      {/* Titre et texte additionnel */}
-      <div className="flex flex-col gap-3">
-        <div className={classNames('text-base font-bold', styles.text)}>
-          {title}
+        {/* Titre et texte additionnel */}
+        <div className="flex flex-col gap-3">
+          <div className={classNames('text-base font-bold', styles.text)}>
+            {title}
+          </div>
+          {!!description && (
+            <div className="text-sm font-medium text-grey-9">{description}</div>
+          )}
+          {!!footer && footer}
         </div>
-        {!!description && (
-          <div className="text-sm font-medium text-grey-9">{description}</div>
+
+        {/* Bouton close, optionnel */}
+        {!disableClose && (
+          <div
+            onClick={handleOnClose}
+            className="ml-auto cursor-pointer h-fit w-fit"
+          >
+            <Icon icon="close-line" className={styles.text} />
+          </div>
         )}
-        {!!footer && footer}
       </div>
-
-      {/* Bouton close, optionnel */}
-      {!disableClose && (
-        <div
-          onClick={handleOnClose}
-          className="ml-auto cursor-pointer h-fit w-fit"
-        >
-          <Icon icon="close-line" className={styles.text} />
-        </div>
-      )}
     </div>
   );
 };