Skip to content

Commit

Permalink
fix: change design of header in history of wallet
Browse files Browse the repository at this point in the history
  • Loading branch information
@HoreKk
HoreKk committed Nov 18, 2024
1 parent 9dbaab1 commit a86ebb1
Showing 1 changed file with 173 additions and 139 deletions.
312 changes: 173 additions & 139 deletions webapp/src/pages/dashboard/account/history.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ||
Expand All @@ -68,155 +71,186 @@ export default function AccountHistory() {
);

return (
<Box pt={12} pb={36} px={8}>
<IconButton
alignSelf="start"
shadow="default"
flexShrink={0}
aria-label="Retour"
colorScheme="whiteBtn"
onClick={() => {
router.back();
}}
borderRadius="2.25xl"
size="md"
icon={<ChevronLeftIcon w={6} h={6} color="black" />}
/>
<Heading as="h2" size="xl" fontWeight={800} mt={6}>
Historique de mes réductions
</Heading>
{history.length > 0 ? (
<Flex flexDir="column" mt={8}>
{history.map((userHistoryItem, index) => {
const currentDate = new Date();
const currentCouponUsedAt = new Date(
("usedAt" in userHistoryItem
? userHistoryItem.usedAt
<Box pt={12} pb={36}>
<Box px={8}>
<IconButton
alignSelf="start"
shadow="default"
flexShrink={0}
aria-label="Retour"
colorScheme="whiteBtn"
onClick={() => {
router.back();
}}
borderRadius="2.25xl"
size="md"
icon={<ChevronLeftIcon w={6} h={6} color="black" />}
/>
<Heading as="h2" size="xl" fontWeight={800} mt={6}>
Historique de mes économies
</Heading>
<Center flexDir="column" mt={6}>
<Text fontSize={14} fontWeight={500}>
Vous avez économisé
</Text>
<Text fontSize={24} fontWeight={800} lineHeight="normal">
125€
</Text>
<Text fontSize={12} color="disabled" fontWeight={500} mt={0.5}>
vous avez la carte “jeune engagé” depuis le{" "}
{new Date(user.createdAt).toLocaleDateString("fr-FR", {
day: "2-digit",
month: "2-digit",
year: "numeric",
})}
</Text>
</Center>
</Box>
<Divider mt={8} borderColor="bgGray" borderWidth={8} w="auto" />
<Box px={8}>
{history.length > 0 ? (
<Flex flexDir="column" mt={7}>
{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() && (
<Text
key={currentCouponUsedAt.getMonth()}
fontWeight={500}
color="disabled"
mt={index === 0 ? 0 : 6}
>
{formatedCurrentMonth}
</Text>
)}
<Flex
key={userHistoryItem.id}
alignItems="center"
justifyContent="space-between"
mt={4}
>
<Flex alignItems="center" gap={2}>
<Box
borderRadius="2xl"
flexShrink={0}
bgColor={darkenPartnerColor}
p={1.5}
return (
<>
{currentCouponUsedAt.getMonth() !==
previousCouponUsedAt.getMonth() && (
<Text
key={currentCouponUsedAt.getMonth()}
fontWeight={500}
color="disabled"
mt={index === 0 ? 0 : 6}
>
<Image
src={userHistoryItem.offer.partner.icon.url as string}
alt={userHistoryItem.offer.partner.icon.alt as string}
width={36}
height={36}
style={{ borderRadius: "8px" }}
/>
</Box>
<Flex flexDir="column" justifyContent="start" w="full">
<Text fontSize={14} fontWeight={500}>
{userHistoryItem.offer.partner.name}
</Text>
<Text fontSize={12} fontWeight={500} noOfLines={1}>
{userHistoryItem.offer.title}
</Text>
<Box mt={1}>
{"used" in userHistoryItem && !userHistoryItem.used ? (
<Flex alignItems="center" color="disabled" gap={0.5}>
<Icon as={HiMiniClock} w={3} h={3} />
<Text fontWeight={500} fontSize={12}>
Fin{" "}
{currentCouponUsedAt.toLocaleDateString("fr-FR", {
day: "2-digit",
month: "2-digit",
})}
</Text>
</Flex>
) : (
<Flex
alignItems="center"
fontSize={12}
px={1}
color="success"
bgColor="successLight"
w="fit-content"
borderRadius="2.5xl"
gap={0.5}
fontWeight={500}
>
<Icon
as={HiMiniCheckCircle}
stroke="white"
w={3}
h={3}
/>
Déjà utilisée
</Flex>
)}
{formatedCurrentMonth}
</Text>
)}
<Flex
key={userHistoryItem.id}
alignItems="center"
justifyContent="space-between"
mt={4}
>
<Flex alignItems="center" gap={2}>
<Box
borderRadius="2xl"
flexShrink={0}
bgColor={darkenPartnerColor}
p={1.5}
>
<Image
src={userHistoryItem.offer.partner.icon.url as string}
alt={userHistoryItem.offer.partner.icon.alt as string}
width={36}
height={36}
style={{ borderRadius: "8px" }}
/>
</Box>
<Flex flexDir="column" justifyContent="start" w="full">
<Text fontSize={14} fontWeight={500}>
{userHistoryItem.offer.partner.name}
</Text>
<Text fontSize={12} fontWeight={500} noOfLines={1}>
{userHistoryItem.offer.title}
</Text>
<Box mt={1}>
{"used" in userHistoryItem &&
!userHistoryItem.used ? (
<Flex
alignItems="center"
color="disabled"
gap={0.5}
>
<Icon as={HiMiniClock} w={3} h={3} />
<Text fontWeight={500} fontSize={12}>
Fin{" "}
{currentCouponUsedAt.toLocaleDateString(
"fr-FR",
{
day: "2-digit",
month: "2-digit",
}
)}
</Text>
</Flex>
) : (
<Flex
alignItems="center"
fontSize={12}
px={1}
color="success"
bgColor="successLight"
w="fit-content"
borderRadius="2.5xl"
gap={0.5}
fontWeight={500}
>
<Icon
as={HiMiniCheckCircle}
stroke="white"
w={3}
h={3}
/>
Déjà utilisée
</Flex>
)}
</Box>
</Flex>
</Flex>
</Flex>
</Flex>
<Divider mt={2} />
</>
);
})}
</Flex>
) : (
<UserSavingsNoData />
)}
<Divider mt={2} />
</>
);
})}
</Flex>
) : (
<UserSavingsNoData />
)}
</Box>
</Box>
);
}

0 comments on commit a86ebb1

Please sign in to comment.