From 5ced8aea3f39ffe60d7413f9e483a5c7cee9c334 Mon Sep 17 00:00:00 2001 From: Antoine Lelong Date: Mon, 18 Nov 2024 15:07:52 +0100 Subject: [PATCH 1/5] feat: refactor wallet page with new layout and add filters for cje and obiz offers --- webapp/CHANGELOG.md | 9 +- webapp/src/components/BottomNavigation.tsx | 2 +- .../src/components/wrappers/WalletWrapper.tsx | 152 +++++++++++++++--- webapp/src/pages/dashboard/wallet/index.tsx | 43 +++-- webapp/src/server/api/routers/saving.ts | 43 +++-- webapp/src/utils/chakra-theme.ts | 1 + 6 files changed, 182 insertions(+), 68 deletions(-) diff --git a/webapp/CHANGELOG.md b/webapp/CHANGELOG.md index ce7623db..1cdee13e 100644 --- a/webapp/CHANGELOG.md +++ b/webapp/CHANGELOG.md @@ -1,23 +1,20 @@ # [0.66.0](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.65.6...v0.66.0) (2024-11-18) - ### Features -* increase prod config ([6f68cbe](https://github.com/SocialGouv/carte-jeune-engage/commit/6f68cbea8b76769ca66e6a3665ccdb111dbcc5bc)) +- increase prod config ([6f68cbe](https://github.com/SocialGouv/carte-jeune-engage/commit/6f68cbea8b76769ca66e6a3665ccdb111dbcc5bc)) ## [0.65.6](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.65.5...v0.65.6) (2024-11-18) - ### Bug Fixes -* path on next.config images ([9d3266f](https://github.com/SocialGouv/carte-jeune-engage/commit/9d3266f8f2f38055138f316eb32e8e04202a1515)) +- path on next.config images ([9d3266f](https://github.com/SocialGouv/carte-jeune-engage/commit/9d3266f8f2f38055138f316eb32e8e04202a1515)) ## [0.65.5](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.65.4...v0.65.5) (2024-11-18) - ### Bug Fixes -* hostname images remotePattern config ([04bd7ad](https://github.com/SocialGouv/carte-jeune-engage/commit/04bd7add6e4f88269a04dbbddeb72583595f94ae)) +- hostname images remotePattern config ([04bd7ad](https://github.com/SocialGouv/carte-jeune-engage/commit/04bd7add6e4f88269a04dbbddeb72583595f94ae)) ## [0.65.4](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.65.3...v0.65.4) (2024-11-18) diff --git a/webapp/src/components/BottomNavigation.tsx b/webapp/src/components/BottomNavigation.tsx index e84827d7..3bccf2f1 100644 --- a/webapp/src/components/BottomNavigation.tsx +++ b/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", diff --git a/webapp/src/components/wrappers/WalletWrapper.tsx b/webapp/src/components/wrappers/WalletWrapper.tsx index f63b43d2..640057a0 100644 --- a/webapp/src/components/wrappers/WalletWrapper.tsx +++ b/webapp/src/components/wrappers/WalletWrapper.tsx @@ -1,43 +1,149 @@ -import { Box, Button, Flex, Heading } from "@chakra-ui/react"; -import { ReactNode } from "react"; +import { Box, Center, Flex, Icon, Text } from "@chakra-ui/react"; +import { Dispatch, ReactNode, SetStateAction, useState } from "react"; import { PassIcon } from "../icons/pass"; import { useRouter } from "next/router"; +import Image from "../ui/Image"; +import { + HiMiniInformationCircle, + HiMiniTag, + HiMiniTicket, + HiRectangleGroup, +} from "react-icons/hi2"; +import { BarcodeIcon } from "../icons/barcode"; +import { api } from "~/utils/api"; -type WalletWrapperProps = { - children: ReactNode; +type WalletFilterProps = { + label: string; + slug: string; + filterSelected: string; + setFilterSelected: Dispatch>; + icon: ReactNode; + onClick?: () => void; + disabled?: boolean; }; -const WalletWrapper = ({ children }: WalletWrapperProps) => { - const router = useRouter(); +const WalletFilter = ({ + label, + icon, + filterSelected, + slug, + setFilterSelected, + disabled, + onClick, +}: WalletFilterProps) => { + const selected = filterSelected === slug; return ( - - + {label} + + + ); +}; + +type WalletWrapperProps = { + children: ReactNode; + filterSelected: string; + setFilterSelected: Dispatch>; +}; + +const WalletWrapper = ({ + children, + filterSelected, + setFilterSelected, +}: WalletWrapperProps) => { + const router = useRouter(); + + const { data: resultTotalAmount } = + api.saving.getTotalAmountByCurrentUser.useQuery(); + const { data: userTotalAmount } = resultTotalAmount || { data: 0 }; + + return ( + +
+ + Logo + + Vous avez économisé + + + {userTotalAmount}€ + +
- - Mes Réductions - + + } + filterSelected={filterSelected} + setFilterSelected={setFilterSelected} + /> + } + filterSelected={filterSelected} + setFilterSelected={setFilterSelected} + /> + } + filterSelected={filterSelected} + setFilterSelected={setFilterSelected} + /> + } + filterSelected={filterSelected} + setFilterSelected={setFilterSelected} + disabled + /> + } + filterSelected={filterSelected} + setFilterSelected={setFilterSelected} + onClick={() => router.push("/dashboard/account")} + /> + {children} diff --git a/webapp/src/pages/dashboard/wallet/index.tsx b/webapp/src/pages/dashboard/wallet/index.tsx index 2eeeea60..b3eac703 100644 --- a/webapp/src/pages/dashboard/wallet/index.tsx +++ b/webapp/src/pages/dashboard/wallet/index.tsx @@ -21,10 +21,13 @@ import Image from "next/image"; import { CouponIncluded } from "~/server/api/routers/coupon"; import { OrderIncluded } from "~/server/api/routers/order"; import OrderCard from "~/components/cards/OrderCard"; +import { useMemo, useState } from "react"; export default function Wallet() { const router = useRouter(); + const [filterSelected, setFilterSelected] = useState("all"); + const { data: resultOffers, isLoading: isLoadingOffers } = api.offer.getListOfAvailables.useQuery({ page: 1, @@ -40,24 +43,38 @@ export default function Wallet() { const { data: currentUserOrders } = resultUserOrders || { data: [] }; const { data: offers } = resultOffers || { data: [] }; + const walletOffers = useMemo(() => { + let filteredOffers: (CouponIncluded | OrderIncluded)[] = []; + if (filterSelected === "all") { + filteredOffers = [...currentUserCoupons, ...currentUserOrders]; + } else if (filterSelected === "coupons") { + filteredOffers = currentUserCoupons; + } else if (filterSelected === "orders") { + filteredOffers = currentUserOrders; + } + return filteredOffers.sort( + (a, b) => + new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() + ); + }, [filterSelected, currentUserCoupons, currentUserOrders]); + if (isLoadingUserCoupons || isLoadingOffers || isLoadingUserOrders) return ( - +
); - const walletOffers: (CouponIncluded | OrderIncluded)[] = [ - ...currentUserCoupons, - ...currentUserOrders, - ].sort( - (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() - ); - return ( - + {walletOffers && walletOffers.length > 0 ? ( <> @@ -69,7 +86,7 @@ export default function Wallet() { pt={index !== 0 ? 3 : 0} zIndex={1} borderTopWidth={index !== 0 ? 1 : 0} - px={8} + px={7} > {"code" in walletOffer ? ( ))} - + ) : ( - + )} - +
{ - const { userId } = input; - const userSavings = await ctx.payload.find({ - collection: "savings", - depth: 0, - where: { - "coupon.user": { - equals: userId, - }, + getTotalAmountByCurrentUser: userProtectedProcedure.query(async ({ ctx }) => { + const userSavings = await ctx.payload.find({ + collection: "savings", + depth: 0, + where: { + "coupon.user": { + equals: ctx.session.id, }, - }); + }, + }); - const totalAmount = userSavings.docs.reduce( - (total, saving) => - total + (typeof saving.amount === "number" ? saving.amount : 0), - 0 - ); + const totalAmount = userSavings.docs.reduce( + (total, saving) => + total + (typeof saving.amount === "number" ? saving.amount : 0), + 0 + ); - return { - data: Math.round(totalAmount * 100) / 100, - }; - }), + return { + data: Math.round(totalAmount * 100) / 100, + }; + }), }); diff --git a/webapp/src/utils/chakra-theme.ts b/webapp/src/utils/chakra-theme.ts index 340c0120..34d61bba 100644 --- a/webapp/src/utils/chakra-theme.ts +++ b/webapp/src/utils/chakra-theme.ts @@ -243,6 +243,7 @@ export const theme = extendTheme({ "installation-banner-icon": "0px 16px 14px -9px #1698FC70, 0px 1px 40px 6px #A8CEEC", icon: "0px 4px 13px 0px rgba(32, 32, 44, 0.20)", + "wallet-header": "0px -4px 13px 0px rgba(32, 32, 44, 0.20)", }, radii: { "2lg": "0.625rem", From 9dbaab119cc6a71f31686bf21497426fbbd8c854 Mon Sep 17 00:00:00 2001 From: Antoine Lelong Date: Mon, 18 Nov 2024 16:01:06 +0100 Subject: [PATCH 2/5] fix: move wallet filter component to own file and add help modal on wallet page --- webapp/src/components/wallet/Filter.tsx | 51 +++ webapp/src/components/wallet/HelpSection.tsx | 42 +++ .../src/components/wrappers/WalletWrapper.tsx | 297 +++++++++++------- 3 files changed, 273 insertions(+), 117 deletions(-) create mode 100644 webapp/src/components/wallet/Filter.tsx create mode 100644 webapp/src/components/wallet/HelpSection.tsx diff --git a/webapp/src/components/wallet/Filter.tsx b/webapp/src/components/wallet/Filter.tsx new file mode 100644 index 00000000..8726653c --- /dev/null +++ b/webapp/src/components/wallet/Filter.tsx @@ -0,0 +1,51 @@ +import { Center, Box, Text } from "@chakra-ui/react"; +import { Dispatch, SetStateAction, ReactNode } from "react"; + +type WalletFilterProps = { + label: string; + slug: string; + filterSelected: string; + setFilterSelected: Dispatch>; + icon: ReactNode; + onClick?: () => void; + disabled?: boolean; +}; + +const WalletFilter = ({ + label, + icon, + filterSelected, + slug, + setFilterSelected, + disabled, + onClick, +}: WalletFilterProps) => { + const selected = filterSelected === slug; + + return ( +
+ !disabled && setFilterSelected(slug)} + aria-label="Account" + > + {icon} + + + {label} + +
+ ); +}; + +export default WalletFilter; diff --git a/webapp/src/components/wallet/HelpSection.tsx b/webapp/src/components/wallet/HelpSection.tsx new file mode 100644 index 00000000..e4b1affb --- /dev/null +++ b/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 ( + + {title} + + {icon} + {iconName} + + + {description} + + + ); +}; + +export default HelpSection; diff --git a/webapp/src/components/wrappers/WalletWrapper.tsx b/webapp/src/components/wrappers/WalletWrapper.tsx index 640057a0..80695f01 100644 --- a/webapp/src/components/wrappers/WalletWrapper.tsx +++ b/webapp/src/components/wrappers/WalletWrapper.tsx @@ -1,63 +1,60 @@ -import { Box, Center, Flex, Icon, Text } from "@chakra-ui/react"; -import { Dispatch, ReactNode, SetStateAction, useState } 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"; -type WalletFilterProps = { - label: string; - slug: string; - filterSelected: string; - setFilterSelected: Dispatch>; - icon: ReactNode; - onClick?: () => void; - disabled?: boolean; -}; - -const WalletFilter = ({ - label, - icon, - filterSelected, - slug, - setFilterSelected, - disabled, - onClick, -}: WalletFilterProps) => { - const selected = filterSelected === slug; - - return ( -
- !disabled && setFilterSelected(slug)} - aria-label="Account" - > - {icon} - - - {label} - -
- ); -}; +const helpItems = [ + { + title: "Quand ce sont des codes", + icon: , + 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: , + 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: , + 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; @@ -71,84 +68,150 @@ const WalletWrapper = ({ 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 ( - -
- - Logo - - Vous avez économisé - - - {userTotalAmount}€ - -
- - - } - filterSelected={filterSelected} - setFilterSelected={setFilterSelected} - /> - } - filterSelected={filterSelected} - setFilterSelected={setFilterSelected} - /> - } - filterSelected={filterSelected} - setFilterSelected={setFilterSelected} - /> - } - filterSelected={filterSelected} - setFilterSelected={setFilterSelected} - disabled - /> - } - filterSelected={filterSelected} - setFilterSelected={setFilterSelected} - onClick={() => router.push("/dashboard/account")} + <> + +
+ + Logo + + Vous avez économisé + + + {userTotalAmount}€ + +
+ + + } + filterSelected={filterSelected} + setFilterSelected={setFilterSelected} + /> + } + filterSelected={filterSelected} + setFilterSelected={setFilterSelected} + /> + } + filterSelected={filterSelected} + setFilterSelected={setFilterSelected} + /> + + } + filterSelected={filterSelected} + setFilterSelected={setFilterSelected} + disabled + /> + } + filterSelected={filterSelected} + setFilterSelected={setFilterSelected} + onClick={() => router.push("/dashboard/account")} + /> + + + {children} + - - {children} - - + + + + + + + + Comment sont calculées mes économies ? + + + Vos économies sont calculées à partir des offres que vous avez + utilisées. + + + + + + + Historique des réductions + + + + + + {helpItems.map(({ title, icon, iconName, description }, index) => ( + <> + + {index !== helpItems.length - 1 && ( + + )} + + ))} + + + + ); }; From a86ebb15f8f9434e4e08205c46945aa51b39d9c0 Mon Sep 17 00:00:00 2001 From: Antoine Lelong Date: Mon, 18 Nov 2024 16:25:31 +0100 Subject: [PATCH 3/5] fix: change design of header in history of wallet --- .../src/pages/dashboard/account/history.tsx | 312 ++++++++++-------- 1 file changed, 173 insertions(+), 139 deletions(-) diff --git a/webapp/src/pages/dashboard/account/history.tsx b/webapp/src/pages/dashboard/account/history.tsx index c226231d..c022732d 100644 --- a/webapp/src/pages/dashboard/account/history.tsx +++ b/webapp/src/pages/dashboard/account/history.tsx @@ -43,9 +43,12 @@ export default function AccountHistory() { api.order.getList.useQuery({ status: "delivered", }); + const { data: resultTotalAmount } = + api.saving.getTotalAmountByCurrentUser.useQuery(); const { data: userSavings } = resultUserSavings || {}; const { data: userOrders } = resultUserOrders || {}; + const { data: userTotalAmount } = resultTotalAmount || { data: 0 }; if ( !user || @@ -68,155 +71,186 @@ export default function AccountHistory() { ); return ( - - { - router.back(); - }} - borderRadius="2.25xl" - size="md" - icon={} - /> - - Historique de mes réductions - - {history.length > 0 ? ( - - {history.map((userHistoryItem, index) => { - const currentDate = new Date(); - const currentCouponUsedAt = new Date( - ("usedAt" in userHistoryItem - ? userHistoryItem.usedAt + + + { + router.back(); + }} + borderRadius="2.25xl" + size="md" + icon={} + /> + + Historique de mes économies + +
+ + Vous avez économisé + + + 125€ + + + vous avez la carte “jeune engagé” depuis le{" "} + {new Date(user.createdAt).toLocaleDateString("fr-FR", { + day: "2-digit", + month: "2-digit", + year: "numeric", + })} + +
+ + + + {history.length > 0 ? ( + + {history.map((userHistoryItem, index) => { + const currentDate = new Date(); + const currentCouponUsedAt = new Date( + ("usedAt" in userHistoryItem ? userHistoryItem.usedAt - : userHistoryItem.assignUserAt - : userHistoryItem.createdAt) as string - ); - const previousCoupon = history[index - 1]; - const previousCouponUsedAt = previousCoupon - ? new Date( - ("usedAt" in previousCoupon - ? previousCoupon.usedAt + ? userHistoryItem.usedAt + : userHistoryItem.assignUserAt + : userHistoryItem.createdAt) as string + ); + console.log("currentCouponUsedAt", currentCouponUsedAt); + const previousCoupon = history[index - 1]; + const previousCouponUsedAt = previousCoupon + ? new Date( + ("usedAt" in previousCoupon ? previousCoupon.usedAt - : previousCoupon.assignUserAt - : previousCoupon.createdAt) as string - ) - : new Date(); + ? previousCoupon.usedAt + : previousCoupon.assignUserAt + : previousCoupon.createdAt) as string + ) + : new Date(); - const currentMonth = currentCouponUsedAt.toLocaleString("fr-FR", { - month: "long", - }); + const currentMonth = currentCouponUsedAt.toLocaleString("fr-FR", { + month: "long", + }); - const darkenPartnerColor = new TinyColor( - userHistoryItem.offer.partner.color - ) - .darken(10) - .toHexString(); + const darkenPartnerColor = new TinyColor( + userHistoryItem.offer.partner.color + ) + .darken(10) + .toHexString(); - const formatedCurrentMonth = - index === 0 && - currentDate.getMonth() === currentCouponUsedAt.getMonth() && - currentDate.getFullYear() === currentCouponUsedAt.getFullYear() - ? "Ce mois-ci" - : `${ - currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1) - } ${ - currentDate.getFullYear() !== - currentCouponUsedAt.getFullYear() - ? currentCouponUsedAt.getFullYear() - : "" - }`; + const formatedCurrentMonth = + index === 0 && + currentDate.getMonth() === currentCouponUsedAt.getMonth() && + currentDate.getFullYear() === currentCouponUsedAt.getFullYear() + ? "Ce mois-ci" + : `${ + currentMonth.charAt(0).toUpperCase() + + currentMonth.slice(1) + } ${ + currentDate.getFullYear() !== + currentCouponUsedAt.getFullYear() + ? currentCouponUsedAt.getFullYear() + : "" + }`; - return ( - <> - {currentCouponUsedAt.getMonth() !== - previousCouponUsedAt.getMonth() && ( - - {formatedCurrentMonth} - - )} - - - + {currentCouponUsedAt.getMonth() !== + previousCouponUsedAt.getMonth() && ( + - {userHistoryItem.offer.partner.icon.alt - - - - {userHistoryItem.offer.partner.name} - - - {userHistoryItem.offer.title} - - - {"used" in userHistoryItem && !userHistoryItem.used ? ( - - - - Fin{" "} - {currentCouponUsedAt.toLocaleDateString("fr-FR", { - day: "2-digit", - month: "2-digit", - })} - - - ) : ( - - - Déjà utilisée - - )} + {formatedCurrentMonth} + + )} + + + + {userHistoryItem.offer.partner.icon.alt + + + {userHistoryItem.offer.partner.name} + + + {userHistoryItem.offer.title} + + + {"used" in userHistoryItem && + !userHistoryItem.used ? ( + + + + Fin{" "} + {currentCouponUsedAt.toLocaleDateString( + "fr-FR", + { + day: "2-digit", + month: "2-digit", + } + )} + + + ) : ( + + + Déjà utilisée + + )} + + - - - - ); - })} - - ) : ( - - )} + + + ); + })} + + ) : ( + + )} + ); } From 8d8ba390ac4cc4d7bf3140736dd1e77f7e6accad Mon Sep 17 00:00:00 2001 From: Antoine Lelong Date: Mon, 18 Nov 2024 17:59:23 +0100 Subject: [PATCH 4/5] fix: put total amount in history of wallet --- webapp/CHANGELOG.md | 3 +-- webapp/src/pages/dashboard/account/history.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/webapp/CHANGELOG.md b/webapp/CHANGELOG.md index 0377a3df..28586e37 100644 --- a/webapp/CHANGELOG.md +++ b/webapp/CHANGELOG.md @@ -1,9 +1,8 @@ ## [0.66.3](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.66.2...v0.66.3) (2024-11-18) - ### Bug Fixes -* rows order home ([ebd0b41](https://github.com/SocialGouv/carte-jeune-engage/commit/ebd0b41ca7f8af775577988cf22ec520635851df)) +- rows order home ([ebd0b41](https://github.com/SocialGouv/carte-jeune-engage/commit/ebd0b41ca7f8af775577988cf22ec520635851df)) ## [0.66.2](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.66.1...v0.66.2) (2024-11-18) diff --git a/webapp/src/pages/dashboard/account/history.tsx b/webapp/src/pages/dashboard/account/history.tsx index c022732d..2e0912ad 100644 --- a/webapp/src/pages/dashboard/account/history.tsx +++ b/webapp/src/pages/dashboard/account/history.tsx @@ -94,7 +94,7 @@ export default function AccountHistory() { Vous avez économisé - 125€ + {userTotalAmount}€ vous avez la carte “jeune engagé” depuis le{" "} From 1c82d792e67e1f7a45a5a14e882e9118b45695b1 Mon Sep 17 00:00:00 2001 From: Antoine Lelong Date: Tue, 19 Nov 2024 15:42:17 +0100 Subject: [PATCH 5/5] fix: move card link from filters list to wallet wrapper header --- webapp/src/components/wallet/Filter.tsx | 8 ++++++-- .../src/components/wrappers/WalletWrapper.tsx | 18 ++++++++++-------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/webapp/src/components/wallet/Filter.tsx b/webapp/src/components/wallet/Filter.tsx index 8726653c..93c819a4 100644 --- a/webapp/src/components/wallet/Filter.tsx +++ b/webapp/src/components/wallet/Filter.tsx @@ -23,7 +23,12 @@ const WalletFilter = ({ const selected = filterSelected === slug; return ( -
+
!disabled && setFilterSelected(slug)} + > !disabled && setFilterSelected(slug)} aria-label="Account" > {icon} diff --git a/webapp/src/components/wrappers/WalletWrapper.tsx b/webapp/src/components/wrappers/WalletWrapper.tsx index 80695f01..c3eaf285 100644 --- a/webapp/src/components/wrappers/WalletWrapper.tsx +++ b/webapp/src/components/wrappers/WalletWrapper.tsx @@ -92,6 +92,16 @@ const WalletWrapper = ({ color="disabled" onClick={onOpenInfoModal} /> + + } + filterSelected={filterSelected} + setFilterSelected={setFilterSelected} + onClick={() => router.push("/dashboard/account")} + /> + Logo Vous avez économisé @@ -141,14 +151,6 @@ const WalletWrapper = ({ setFilterSelected={setFilterSelected} disabled /> - } - filterSelected={filterSelected} - setFilterSelected={setFilterSelected} - onClick={() => router.push("/dashboard/account")} - /> {children}