fix: back button on order page, issue modal merge conflict and add mi…

…ssing migrations
SocialGouv · Dec 5, 2024 · 59220e8 · 59220e8
1 parent 12087ff
commit 59220e8
Show file tree

Hide file tree

Showing 7 changed files with 5,716 additions and 133 deletions.
diff --git a/webapp/CHANGELOG.md b/webapp/CHANGELOG.md
@@ -1,10 +1,9 @@
 ## [0.73.20](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.73.19...v0.73.20) (2024-12-05)
 
-
 ### Bug Fixes
 
-* desactivate reminder auchan and offer user preferences notifications and group offer activated reminder by user instead by offer ([d52879d](https://github.com/SocialGouv/carte-jeune-engage/commit/d52879d1f07bcbbd4711457fac499ba02691e44e))
-* remove unused import ([fe1bb94](https://github.com/SocialGouv/carte-jeune-engage/commit/fe1bb94cc13ee929b93fd8270523e6cbd0403518))
+- desactivate reminder auchan and offer user preferences notifications and group offer activated reminder by user instead by offer ([d52879d](https://github.com/SocialGouv/carte-jeune-engage/commit/d52879d1f07bcbbd4711457fac499ba02691e44e))
+- remove unused import ([fe1bb94](https://github.com/SocialGouv/carte-jeune-engage/commit/fe1bb94cc13ee929b93fd8270523e6cbd0403518))
 
 ## [0.73.19](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.73.18...v0.73.19) (2024-12-04)
 

diff --git a/webapp/src/components/modals/IssueModal.tsx b/webapp/src/components/modals/IssueModal.tsx
@@ -200,63 +200,59 @@ const IssueModal = (props: IssueModalProps) => {
         ];
 
   return (
-      <Modal isOpen={isOpen} onClose={onClose} isCentered={kind === "coupon"}>
-        <ModalOverlay />
-        {!showCrispModal && (
-          <ModalContent
-            mx={2.5}
-            mt={kind == "order" ? 5 : "auto"}
-            borderRadius="2.5xl"
-          >
-            <ModalCloseButton size="lg" top={4} right={4} />
-            <ModalBody display="flex" flexDir="column" px={9} pb={16} pt={4}>
-              <OrderIssueContent kind={kind} id={id} issues={issues} />
-              <Divider my={6} />
-              <Flex direction="column" gap={4}>
-                <ItemLink
-                  onClick={() => setIsOpenCrisp(true)}
-                  icon={HiMiniChatBubbleOvalLeftEllipsis}
-                  text="Discutez avec nous en direct"
-                />
-                {kind === "order" && (
-                  <>
-                    <Text
-                      my={2}
-                      fontSize={14}
-                      fontWeight={500}
-                      textAlign="center"
-                      color="disabled"
-                    >
-                      ou
+    <Modal isOpen={isOpen} onClose={onClose} isCentered={kind === "coupon"}>
+      <ModalOverlay />
+      {!showCrispModal && (
+        <ModalContent
+          mx={2.5}
+          mt={kind == "order" ? 5 : "auto"}
+          borderRadius="2.5xl"
+        >
+          <ModalCloseButton size="lg" top={4} right={4} />
+          <ModalBody display="flex" flexDir="column" px={9} pb={16} pt={4}>
+            <OrderIssueContent kind={kind} id={id} issues={issues} />
+            <Divider my={6} />
+            <Flex direction="column" gap={4}>
+              <ItemLink
+                onClick={() => setShowCrispModal(true)}
+                icon={HiMiniChatBubbleOvalLeftEllipsis}
+                text="Discutez avec nous en direct"
+              />
+              {kind === "order" && (
+                <>
+                  <Text
+                    my={2}
+                    fontSize={14}
+                    fontWeight={500}
+                    textAlign="center"
+                    color="disabled"
+                  >
+                    ou
+                  </Text>
+                  <ItemLink
+                    href="telto:0472402828"
+                    icon={HiPhone}
+                    text="04 72 40 28 28"
+                  />
+                  <ItemLink
+                    href="mailto:[email protected]"
+                    icon={HiEnvelope}
+                    text="[email protected]"
+                  />
+                  <Flex direction="column" gap={4} fontSize={"sm"}>
+                    <Text fontWeight={500} textAlign="center" color="disabled">
+                      Disponible du lundi au vendredi de
+                      <br />
+                      09h à 12h30 puis de 14h à 17h30
                     </Text>
-                    <ItemLink
-                      href="telto:0472402828"
-                      icon={HiPhone}
-                      text="04 72 40 28 28"
-                    />
-                    <ItemLink
-                      href="mailto:[email protected]"
-                      icon={HiEnvelope}
-                      text="[email protected]"
-                    />
-                    <Flex direction="column" gap={4} fontSize={"sm"}>
-                      <Text
-                        fontWeight={500}
-                        textAlign="center"
-                        color="disabled"
-                      >
-                        Disponible du lundi au vendredi de
-                        <br />
-                        09h à 12h30 puis de 14h à 17h30
-                      </Text>
-                    </Flex>
-                  </>
-                )}
-              </Flex>
-            </ModalBody>
-          </ModalContent>
-        )}
-      </Modal>
+                  </Flex>
+                </>
+              )}
+            </Flex>
+          </ModalBody>
+        </ModalContent>
+      )}
+    </Modal>
   );
 };
 

diff --git a/webapp/src/components/ui/BackButton.tsx b/webapp/src/components/ui/BackButton.tsx
@@ -1,5 +1,6 @@
 import { Icon, IconButton } from "@chakra-ui/react";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 import { IconType } from "react-icons/lib";
 import { TbChevronLeft } from "react-icons/tb";
 
@@ -13,6 +14,23 @@ const BackButton = (props: BackButtonProps) => {
   const router = useRouter();
   const { variant, onClick, icon } = props;
 
+  const [canGoBack, setCanGoBack] = useState(false);
+
+  useEffect(() => {
+    console.log("window.history.length", window.history);
+    setCanGoBack(window.history.length > 1);
+  }, []);
+
+  const handleBack = () => {
+    if (onClick) {
+      onClick();
+    } else if (canGoBack) {
+      router.back();
+    } else {
+      router.push("/dashboard");
+    }
+  };
+
   return (
     <IconButton
       alignSelf="start"
@@ -22,7 +40,7 @@ const BackButton = (props: BackButtonProps) => {
       aria-label="Retour"
       colorScheme="whiteBtn"
       bgColor="white"
-      onClick={onClick ? onClick : () => router.back()}
+      onClick={handleBack}
       borderRadius="2.25xl"
       size="md"
       icon={<Icon as={icon ? icon : TbChevronLeft} w={6} h={6} color="black" />}

diff --git a/webapp/src/pages/dashboard/account/history.tsx b/webapp/src/pages/dashboard/account/history.tsx
@@ -7,6 +7,7 @@ import {
   Heading,
   Icon,
   IconButton,
+  Link,
   Text,
 } from "@chakra-ui/react";
 import { TinyColor } from "@ctrl/tinycolor";
@@ -19,6 +20,9 @@ import { OrderIncluded } from "~/server/api/routers/order";
 import { CouponExtanded } from "~/server/api/routers/saving";
 import { UserIncluded } from "~/server/api/routers/user";
 import { api } from "~/utils/api";
+import NextLink from "next/link";
+import ConditionalLink from "~/components/ConditionalLink";
+import BackButton from "~/components/ui/BackButton";
 
 const UserSavingsNoData = () => {
   return (
@@ -70,19 +74,7 @@ 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" />}
-      />
+      <BackButton />
       <Heading as="h2" size="xl" fontWeight={800} mt={6}>
         Historique de mes réductions
       </Heading>
@@ -94,7 +86,9 @@ export default function AccountHistory() {
               ("usedAt" in userHistoryItem
                 ? userHistoryItem.usedAt
                   ? userHistoryItem.usedAt
-                  : userHistoryItem.assignUserAt
+                  : "assignUserAt" in userHistoryItem
+                    ? userHistoryItem.assignUserAt
+                    : userHistoryItem.createdAt
                 : userHistoryItem.createdAt) as string
             );
             const previousCoupon = history[index - 1];
@@ -103,7 +97,9 @@ export default function AccountHistory() {
                   ("usedAt" in previousCoupon
                     ? previousCoupon.usedAt
                       ? previousCoupon.usedAt
-                      : previousCoupon.assignUserAt
+                      : "assignUserAt" in userHistoryItem
+                        ? userHistoryItem.assignUserAt
+                        : userHistoryItem.createdAt
                     : previousCoupon.createdAt) as string
                 )
               : new Date();
@@ -151,64 +147,81 @@ export default function AccountHistory() {
                   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>
-                        )}
+                  <ConditionalLink
+                    condition={"status" in userHistoryItem}
+                    to={`/dashboard/order/${userHistoryItem.id}?from=history`}
+                    props={{
+                      width: "full",
+                      _hover: { textDecoration: "none" },
+                    }}
+                  >
+                    <Flex alignItems="center" gap={2} w="full">
+                      <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>
+                  </ConditionalLink>
                 </Flex>
                 <Divider mt={2} />
               </>

diff --git a/webapp/src/pages/dashboard/order/[id]/index.tsx b/webapp/src/pages/dashboard/order/[id]/index.tsx
@@ -45,8 +45,9 @@ export default function OrderObizPage() {
   const utils = api.useUtils();
   const { user, setShowCrispModal } = useAuth();
 
-  const { id } = router.query as {
+  const { id, from } = router.query as {
     id: string;
+    from?: string;
   };
 
   const [showDetails, setShowDetails] = useState(false);
@@ -320,7 +321,15 @@ export default function OrderObizPage() {
       >
         <Flex direction="column" gap={10}>
           <Flex alignItems="center" justifyContent="space-between">
-            <BackButton onClick={() => router.push("/dashboard/wallet")} />
+            <BackButton
+              onClick={() =>
+                router.push(
+                  from === "history"
+                    ? "/dashboard/account/history"
+                    : "/dashboard/wallet"
+                )
+              }
+            />
             {order.status === "delivered" && order.used && (
               <Flex
                 alignItems="center"