Merge pull request #175 from SocialGouv/fix/banner-end-app

fix: add banner end app to home, search and wallet pages

webapp/CHANGELOG.md

@@ -1,9 +1,8 @@
 ## [0.75.2](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.75.1...v0.75.2) (2024-12-19)
 
-
 ### Bug Fixes
 
-* clean db user with cej_id at first login process ([abd600b](https://github.com/SocialGouv/carte-jeune-engage/commit/abd600bbb4e39dbf73f53709efa4d4b7af470279))
+- clean db user with cej_id at first login process ([abd600b](https://github.com/SocialGouv/carte-jeune-engage/commit/abd600bbb4e39dbf73f53709efa4d4b7af470279))
 
 ## [0.75.1](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.75.0...v0.75.1) (2024-12-17)
 

webapp/src/components/BannerEndApp.tsx

@@ -0,0 +1,39 @@
+import {
+  Center,
+  Flex,
+  Icon,
+  ListItem,
+  Text,
+  UnorderedList,
+} from "@chakra-ui/react";
+import { HiMiniExclamationTriangle } from "react-icons/hi2";
+
+export default function BannerEndApp() {
+  return (
+    <Center
+      textAlign="center"
+      flexDir="column"
+      py={4}
+      px={6}
+      bgColor="error"
+      color="white"
+    >
+      <Icon as={HiMiniExclamationTriangle} w={8} h={8} />
+      <Text fontSize={18} fontWeight={800} lineHeight="normal" mt={2}>
+        15 janvier 2025
+        <br />
+        Fin de la carte “jeune engagé”
+      </Text>
+      <UnorderedList
+        mt={4}
+        fontWeight={500}
+        fontSize={18}
+        textAlign="start"
+        spacing={2}
+      >
+        <ListItem>Téléchargez vos bons d’achat</ListItem>
+        <ListItem>Derniers jours pour utiliser les codes de réduction</ListItem>
+      </UnorderedList>
+    </Center>
+  );
+}

webapp/src/components/wrappers/SearchWrapper.tsx

@@ -10,6 +10,7 @@ import { TagIncluded } from "~/server/api/routers/tag";
 import { Media, Offer, Partner } from "~/payload/payload-types";
 import LoadingLoader from "../LoadingLoader";
 import { PartnerIncluded } from "~/server/api/routers/partner";
+import BannerEndApp from "../BannerEndApp";
 
 type SearchWrapperProps = {
   onSearchChange?: (search: string) => void;
@@ -78,7 +79,6 @@ const SearchWrapper = ({
           pb={4}
           borderBottomWidth={1}
           borderBottomColor="cje-gray.400"
-          mb={6}
         >
           <IconButton
             variant="unstyled"
@@ -100,6 +100,9 @@ const SearchWrapper = ({
             placeholder={fromWidget ? "Rechercher" : undefined}
           />
         </Flex>
+        <Box mb={6}>
+          <BannerEndApp />
+        </Box>
         {children}
       </Box>
     );

webapp/src/components/wrappers/WalletWrapper.tsx

@@ -2,6 +2,7 @@ import { Box, Button, Flex, Heading, Icon, Link } from "@chakra-ui/react";
 import { ReactNode } from "react";
 import { HiCog6Tooth, HiUser } from "react-icons/hi2";
 import NextLink from "next/link";
+import BannerEndApp from "../BannerEndApp";
 
 type WalletWrapperProps = {
   children: ReactNode;
@@ -55,6 +56,9 @@ const WalletWrapper = ({ children }: WalletWrapperProps) => {
         <Heading as="h2" fontWeight={800} px={8}>
           Mes Réductions
         </Heading>
+        <Box mt={6}>
+          <BannerEndApp />
+        </Box>
         <Box flex={1} mt={8} pb={28}>
           {children}
         </Box>

webapp/src/pages/dashboard/index.tsx

@@ -11,6 +11,7 @@ import dynamic from "next/dynamic";
 import NextLink from "next/link";
 import { useState } from "react";
 import { HiMiniTag } from "react-icons/hi2";
+import BannerEndApp from "~/components/BannerEndApp";
 import InstallationBanner from "~/components/InstallationBanner";
 import LoadingLoader from "~/components/LoadingLoader";
 import SearchBar from "~/components/SearchBar";
@@ -68,7 +69,6 @@ export default function Dashboard() {
         pb={4}
         borderBottomWidth={1}
         borderBottomColor="cje-gray.400"
-        mb={6}
         position={"relative"}
       >
         <Heading as="h2" fontSize="2xl" fontWeight="extrabold" mb={9}>
@@ -97,6 +97,9 @@ export default function Dashboard() {
           <SearchBar search="" setSearch={() => ""} />
         </Link>
       </Box>
+      <Box mb={6}>
+        <BannerEndApp />
+      </Box>
       <CategoriesList offers={allOffers} />
       <Box px={8} mt={6}>
         <InstallationBanner

webapp/src/pages/widget/index.tsx

@@ -13,6 +13,7 @@ import { GetServerSideProps } from "next";
 import NextImage from "next/image";
 import NextLink from "next/link";
 import { HiMiniTag } from "react-icons/hi2";
+import BannerEndApp from "~/components/BannerEndApp";
 import OfferCard from "~/components/cards/OfferCard";
 import { BarcodeIcon } from "~/components/icons/barcode";
 import Jumbotron from "~/components/landing/Jumbotron";
@@ -102,6 +103,9 @@ export default function Widget() {
       </Flex>
       <Jumbotron />
       <Box mt={8}>
+        <BannerEndApp />
+      </Box>
+      <Box mt={6}>
         <CategoriesList offers={allOffers} baseLink="/widget/category" />
       </Box>
       {offersObiz && offersObiz?.length > 0 && (