feat: wallet refactor

webapp/src/components/BottomNavigation.tsx

@@ -34,7 +34,7 @@ const BottomNavigation = () => {
 
   const navigationItems = [
     {
-      label: "Mes réductions",
+      label: "Mon portefeuille",
       icon: ReductionOutlineIcon,
       activeIcon: ReductionIcon,
       href: "/dashboard/wallet",

webapp/src/components/wallet/Filter.tsx

@@ -0,0 +1,55 @@
+import { Center, Box, Text } from "@chakra-ui/react";
+import { Dispatch, SetStateAction, ReactNode } from "react";
+
+type WalletFilterProps = {
+  label: string;
+  slug: string;
+  filterSelected: string;
+  setFilterSelected: Dispatch<SetStateAction<string>>;
+  icon: ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+};
+
+const WalletFilter = ({
+  label,
+  icon,
+  filterSelected,
+  slug,
+  setFilterSelected,
+  disabled,
+  onClick,
+}: WalletFilterProps) => {
+  const selected = filterSelected === slug;
+
+  return (
+    <Center
+      flexDir="column"
+      gap={1}
+      flex={1}
+      onClick={onClick ? onClick : () => !disabled && setFilterSelected(slug)}
+    >
+      <Box
+        bgColor={selected ? "primary" : "bgGray"}
+        color={selected ? "white" : "black"}
+        px={4}
+        py={1.5}
+        fontWeight={500}
+        borderRadius="2.5xl"
+        aria-label="Account"
+      >
+        {icon}
+      </Box>
+      <Text
+        fontSize={12}
+        fontWeight={500}
+        textAlign="center"
+        color={!disabled ? "black" : "disabled"}
+      >
+        {label}
+      </Text>
+    </Center>
+  );
+};
+
+export default WalletFilter;

webapp/src/components/wallet/HelpSection.tsx

@@ -0,0 +1,42 @@
+import { Flex, Icon, Text } from "@chakra-ui/react";
+import { ReactNode } from "react";
+import { HiMiniTag } from "react-icons/hi2";
+
+type HelpSectionProps = {
+  title: string;
+  icon: ReactNode;
+  iconName: string;
+  description: string;
+};
+
+const HelpSection = ({
+  title,
+  icon,
+  iconName,
+  description,
+}: HelpSectionProps) => {
+  return (
+    <Flex flexDir="column">
+      <Text fontWeight={700}>{title}</Text>
+      <Flex
+        alignItems="center"
+        mt={2}
+        bgColor="bgGray"
+        borderRadius="full"
+        alignSelf="start"
+        py={1}
+        px={2}
+        gap={1}
+        fontWeight={500}
+      >
+        {icon}
+        {iconName}
+      </Flex>
+      <Text fontWeight={500} mt={3}>
+        {description}
+      </Text>
+    </Flex>
+  );
+};
+
+export default HelpSection;

webapp/src/components/wrappers/WalletWrapper.tsx

@@ -1,48 +1,219 @@
-import { Box, Button, Flex, Heading } from "@chakra-ui/react";
-import { ReactNode } from "react";
+import {
+  Box,
+  Center,
+  Divider,
+  Flex,
+  Heading,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalContent,
+  Text,
+  useDisclosure,
+  Link,
+} from "@chakra-ui/react";
+import { Dispatch, ReactNode, SetStateAction } from "react";
 import { PassIcon } from "../icons/pass";
 import { useRouter } from "next/router";
+import Image from "../ui/Image";
+import {
+  HiChevronRight,
+  HiMiniInformationCircle,
+  HiMiniTag,
+  HiMiniTicket,
+  HiReceiptRefund,
+  HiRectangleGroup,
+  HiXMark,
+} from "react-icons/hi2";
+import { BarcodeIcon } from "../icons/barcode";
+import { api } from "~/utils/api";
+import BackButton from "../ui/BackButton";
+import WalletFilter from "../wallet/Filter";
+import HelpSection from "../wallet/HelpSection";
+import NextLink from "next/link";
+
+const helpItems = [
+  {
+    title: "Quand ce sont des codes",
+    icon: <Icon as={HiMiniTag} w={4} h={4} />,
+    iconName: "Code",
+    description:
+      "Le montant que vous économisez grâce aux codes de réduction ne peut as toujours être calculé et ajouté à votre somme d’économies. Par exemple si le code vous offre -10% sur votre commande, l’application carte “jeune engagé” ne peut savoir combien vous avez dépensé dans votre commande et donc combien représentent les 10% d’économies finales.",
+  },
+  {
+    title: "Quand ce sont des bons d’achat",
+    icon: <BarcodeIcon w={4} h={4} />,
+    iconName: "Bons d’achat",
+    description:
+      "Pour les bons d’achat calculons les économies que vous réalisez directement au moment où vous achetez votre bon d’achat. Par exemple si vous achetez un bon d’une valeur de 10€ avec 10% de réduction, l’application carte “jeune engagé” vous affiche 1€ d’économie réalisée.",
+  },
+  {
+    title: "Quand ce sont des billets",
+    icon: <Icon as={HiMiniTicket} w={4} h={4} />,
+    iconName: "Billets",
+    description:
+      "Pour les billets nous calculons directement les économies que vous faite grâce à la différence entre le prix public qui est affiché sur l’offre et le prix réel avec la réduction qui vous est proposé sur la carte “jeune engagé”.",
+  },
+];
 
 type WalletWrapperProps = {
   children: ReactNode;
+  filterSelected: string;
+  setFilterSelected: Dispatch<SetStateAction<string>>;
 };
 
-const WalletWrapper = ({ children }: WalletWrapperProps) => {
+const WalletWrapper = ({
+  children,
+  filterSelected,
+  setFilterSelected,
+}: WalletWrapperProps) => {
   const router = useRouter();
+  const {
+    isOpen: isOpenInfoModal,
+    onOpen: onOpenInfoModal,
+    onClose: onCloseInfoModal,
+  } = useDisclosure();
+
+  const { data: resultTotalAmount } =
+    api.saving.getTotalAmountByCurrentUser.useQuery();
+  const { data: userTotalAmount } = resultTotalAmount || { data: 0 };
 
   return (
-    <Flex flexDir="column" pt={14} h="full" bgColor="bgGray">
-      <Button
-        colorScheme="whiteBtn"
-        color="black"
-        alignSelf="start"
-        leftIcon={<PassIcon w={6} h={6} />}
-        ml={8}
-        mb={4}
-        py={5}
-        px={3}
-        fontWeight={500}
-        borderRadius="2.5xl"
-        size="xs"
-        onClick={() => router.push("/dashboard/account")}
-      >
-        Ma carte
-      </Button>
-      <Flex
-        flexDir="column"
-        h="full"
-        bgColor="white"
-        borderTopRadius="2.5xl"
-        pt={5}
-      >
-        <Heading as="h2" fontWeight={800} px={8}>
-          Mes Réductions
-        </Heading>
-        <Box flex={1} mt={8} pb={28}>
-          {children}
-        </Box>
+    <>
+      <Flex flexDir="column" minH="full" pt={14}>
+        <Center flexDir="column" position="relative">
+          <Icon
+            as={HiMiniInformationCircle}
+            position="absolute"
+            top={-1}
+            right={10}
+            w={5}
+            h={5}
+            color="disabled"
+            onClick={onOpenInfoModal}
+          />
+          <Box position="absolute" top={-3.5} left={8}>
+            <WalletFilter
+              label="Ma carte"
+              slug="card"
+              icon={<PassIcon w={5} h={5} mt={-1} />}
+              filterSelected={filterSelected}
+              setFilterSelected={setFilterSelected}
+              onClick={() => router.push("/dashboard/account")}
+            />
+          </Box>
+          <Image src="/images/cje-logo.png" alt="Logo" width={73} height={40} />
+          <Text fontSize={14} fontWeight={500} mt={4}>
+            Vous avez économisé
+          </Text>
+          <Text fontSize={36} fontWeight={800} lineHeight="normal" mt={2}>
+            {userTotalAmount}€
+          </Text>
+        </Center>
+        <Flex
+          flexDir="column"
+          minH="full"
+          bgColor="white"
+          borderTopRadius="2.5xl"
+          mt={10}
+          pt={5}
+          shadow="wallet-header"
+        >
+          <Flex alignItems="center" px={7}>
+            <WalletFilter
+              label="Tout"
+              slug="all"
+              icon={<Icon as={HiRectangleGroup} w={6} h={6} mb={-1} />}
+              filterSelected={filterSelected}
+              setFilterSelected={setFilterSelected}
+            />
+            <WalletFilter
+              label="Mes codes"
+              slug="coupons"
+              icon={<Icon as={HiMiniTag} w={6} h={6} mb={-1} />}
+              filterSelected={filterSelected}
+              setFilterSelected={setFilterSelected}
+            />
+            <WalletFilter
+              label="Mes bons"
+              slug="orders"
+              icon={<BarcodeIcon w={6} h={6} mt={-1.5} />}
+              filterSelected={filterSelected}
+              setFilterSelected={setFilterSelected}
+            />
+            <WalletFilter
+              label="Mes billets"
+              slug="tickets"
+              icon={
+                <Icon as={HiMiniTicket} w={6} h={6} mb={-1} opacity={0.2} />
+              }
+              filterSelected={filterSelected}
+              setFilterSelected={setFilterSelected}
+              disabled
+            />
+          </Flex>
+          <Box flex={1} mt={8} pb={28}>
+            {children}
+          </Box>
+        </Flex>
       </Flex>
-    </Flex>
+      <Modal isOpen={isOpenInfoModal} onClose={onCloseInfoModal} size="full">
+        <ModalContent>
+          <ModalBody display="flex" flexDirection="column" mt={10} pb={12}>
+            <Box ml={-2}>
+              <BackButton
+                onClick={onCloseInfoModal}
+                variant="ghost"
+                icon={HiXMark}
+              />
+            </Box>
+            <Heading size="xl" fontWeight={800} mt={5}>
+              Comment sont calculées mes économies ?
+            </Heading>
+            <Text fontWeight={500} mt={6}>
+              Vos économies sont calculées à partir des offres que vous avez
+              utilisées.
+            </Text>
+            <Divider borderColor="cje-gray.100" mt={4} />
+            <Link
+              as={NextLink}
+              href="/dashboard/account/history"
+              _hover={{ textDecoration: "none" }}
+              passHref
+            >
+              <Flex alignItems="center" justifyContent="space-between" py={5}>
+                <Flex alignItems="center" gap={4}>
+                  <Icon
+                    as={HiReceiptRefund}
+                    w={5}
+                    h={5}
+                    mt={0.5}
+                    color="blackLight"
+                  />
+                  <Text fontWeight={500}>Historique des réductions</Text>
+                </Flex>
+                <Icon as={HiChevronRight} w={6} h={6} />
+              </Flex>
+            </Link>
+            <Divider borderColor="cje-gray.100" mb={4} />
+            {helpItems.map(({ title, icon, iconName, description }, index) => (
+              <>
+                <HelpSection
+                  key={index}
+                  title={`${index + 1}. ${title}`}
+                  icon={icon}
+                  iconName={iconName}
+                  description={description}
+                />
+                {index !== helpItems.length - 1 && (
+                  <Divider borderColor="cje-gray.100" my={4} />
+                )}
+              </>
+            ))}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
   );
 };