Merge branch 'feat/obiz-offer-variable' of https://github.com/SocialG…

…ouv/carte-jeune-engage-v2 into feat/obiz-offer-variable
SocialGouv · Nov 6, 2024 · f1e250f · f1e250f
2 parents d283218 + a9d0e20
commit f1e250f
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 50 deletions.
diff --git a/webapp/src/components/modals/ObizOrderProcessModal.tsx b/webapp/src/components/modals/ObizOrderProcessModal.tsx
@@ -4,11 +4,12 @@ import {
   Center,
   Flex,
   Heading,
+  Icon,
   Modal,
   ModalBody,
-  ModalCloseButton,
   ModalContent,
   ModalOverlay,
+  Text,
 } from "@chakra-ui/react";
 import { Dispatch, SetStateAction, useState } from "react";
 import LoadingLoader from "~/components/LoadingLoader";
@@ -18,6 +19,8 @@ import BackButton from "~/components/ui/BackButton";
 import { OfferIncluded } from "~/server/api/routers/offer";
 import { OfferArticle } from "~/server/types";
 import { api } from "~/utils/api";
+import LayoutOrderStatus from "../obiz/LayoutOrderStatus";
+import { HiMiniShieldCheck } from "react-icons/hi2";
 
 const ObizOfferVariableContent = ({
   step,
@@ -40,14 +43,16 @@ const ObizOfferVariableContent = ({
     case "amount":
       return (
         <>
-          <DiscountAmountBlock
-            discount={article.reductionPercentage}
-            amount={amount}
-            setAmount={setAmount}
-            minAmount={article.minimumPrice || 0}
-            maxAmount={article.maximumPrice || 1000}
-          />
-          <Button mt={10} onClick={() => setStep("summary")}>
+          <Box mt={10}>
+            <DiscountAmountBlock
+              discount={article.reductionPercentage}
+              amount={amount}
+              setAmount={setAmount}
+              minAmount={article.minimumPrice || 0}
+              maxAmount={article.maximumPrice || 1000}
+            />
+          </Box>
+          <Button mt="auto" mb={24} onClick={() => setStep("summary")} w="full">
             Acheter mon bon
           </Button>
         </>
@@ -56,29 +61,35 @@ const ObizOfferVariableContent = ({
       if (!offer) return null;
       return (
         <>
-          <RecapOrder
-            discount={article.reductionPercentage}
-            amount={amount}
-            offer={offer}
-          />
-          <Button mt={10} onClick={() => createOrder()}>
+          <Box mt={10}>
+            <RecapOrder
+              discount={article.reductionPercentage}
+              amount={amount}
+              offer={offer}
+            />
+          </Box>
+          <Button mt={10} onClick={() => createOrder()} w="full">
             Passer au paiement
           </Button>
         </>
       );
     case "payment":
       return (
-        <Center
-          h="full"
-          w="full"
-          flexDirection={"column"}
-          justifyContent={"center"}
-        >
-          <LoadingLoader />
-          <Heading textAlign={"center"} mt={6} size="md" fontWeight={900}>
-            Votre commande est en cours de traitement...
-          </Heading>
-        </Center>
+        <LayoutOrderStatus
+          status="loading"
+          title={`Vous allez payer ${amount}€`}
+          footer={
+            <Box mt="auto" textAlign="center">
+              <Icon as={HiMiniShieldCheck} color="primary" boxSize={6} />
+              <Text fontSize={12} fontWeight={700} mt={4}>
+                Tous les paiements et tous vos bons sont entièrement sécurisés
+              </Text>
+              <Text fontSize={12} fontWeight={700} mt={4}>
+                L’application carte “jeune engagé” est un dispositif de l’État.
+              </Text>
+            </Box>
+          }
+        />
       );
   }
 };
@@ -119,30 +130,32 @@ export default function ObizOrderProcessModal(
   return (
     <Modal isOpen={isOpen} onClose={onClose} size="full">
       <ModalOverlay />
-      <ModalContent>
-        <ModalBody px={8}>
-          <Box mt={8}>
-            <BackButton
-              onClick={() => (step == "amount" ? onClose() : setStep("amount"))}
-            />
-          </Box>
-          <Flex flexDir="column" mt={10}>
-            <ObizOfferVariableContent
-              step={step}
-              setStep={setStep}
-              amount={amount}
-              setAmount={setAmount}
-              offer={offer}
-              article={article}
-              createOrder={() => {
-                createTestOrder({
-                  offer_id: offer.id,
-                  article_reference: article.reference,
-                  input_value: amount,
-                });
-              }}
-            />
-          </Flex>
+      <ModalContent h="100dvh">
+        <ModalBody display="flex" flexDir="column" px={8} h="100dvh">
+          {step !== "payment" && (
+            <Box mt={8}>
+              <BackButton
+                onClick={() =>
+                  step == "amount" ? onClose() : setStep("amount")
+                }
+              />
+            </Box>
+          )}
+          <ObizOfferVariableContent
+            step={step}
+            setStep={setStep}
+            amount={amount}
+            setAmount={setAmount}
+            offer={offer}
+            article={article}
+            createOrder={() => {
+              createTestOrder({
+                offer_id: offer.id,
+                article_reference: article.reference,
+                input_value: amount,
+              });
+            }}
+          />
         </ModalBody>
       </ModalContent>
     </Modal>

diff --git a/webapp/src/components/obiz/LayoutOrderStatus.tsx b/webapp/src/components/obiz/LayoutOrderStatus.tsx
@@ -0,0 +1,49 @@
+import { Box, Center, CircularProgress, Flex, Text } from "@chakra-ui/react";
+import Image from "../ui/Image";
+
+type LayoutOrderStatusProps = {
+  status: "loading" | "success" | "error";
+  title: string;
+  subtitle?: string;
+  footer: React.ReactNode;
+};
+
+const LayoutOrderStatusIcon = ({
+  status,
+}: {
+  status: LayoutOrderStatusProps["status"];
+}) => {
+  switch (status) {
+    case "loading":
+      return <CircularProgress color="blackLight" isIndeterminate />;
+  }
+};
+
+const LayoutOrderStatus = (props: LayoutOrderStatusProps) => {
+  const { status, title, subtitle, footer } = props;
+
+  return (
+    <Center display="flex" flexDir="column" py={14} px={10} minH="full">
+      <Image
+        src="/images/cje-logo.png"
+        alt='Logo de carte "jeune engagé"'
+        height={32}
+        width={60}
+      />
+      <Box mt={18}>
+        <LayoutOrderStatusIcon status={status} />
+      </Box>
+      <Text fontSize={24} fontWeight={800} color="blackLight" mt={14}>
+        {title}
+      </Text>
+      {subtitle && (
+        <Text fontSize="lg" color="blackLight" textAlign="center">
+          {subtitle}
+        </Text>
+      )}
+      {footer}
+    </Center>
+  );
+};
+
+export default LayoutOrderStatus;