From ddf4b981de602d6d81b6f82b24492d73355533a1 Mon Sep 17 00:00:00 2001
From: Antoine Lelong <azenoxe@gmail.com>
Date: Tue, 3 Dec 2024 15:08:49 +0100
Subject: [PATCH] fix: layout header in obiz offer journey

---
 webapp/CHANGELOG.md                           |  3 +-
 .../modals/ObizOrderProcessModal.tsx          | 34 +++++++++++++++----
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/webapp/CHANGELOG.md b/webapp/CHANGELOG.md
index 5079828b..ec5e1c2e 100644
--- a/webapp/CHANGELOG.md
+++ b/webapp/CHANGELOG.md
@@ -1,9 +1,8 @@
 ## [0.73.11](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.73.10...v0.73.11) (2024-12-03)
 
-
 ### Bug Fixes
 
-* add icons on ladder input, add offer relationship on form submission table and change label for forms and forms submissions ([230a1b4](https://github.com/SocialGouv/carte-jeune-engage/commit/230a1b4132979a12cb4123edfd18e8b219e55488))
+- add icons on ladder input, add offer relationship on form submission table and change label for forms and forms submissions ([230a1b4](https://github.com/SocialGouv/carte-jeune-engage/commit/230a1b4132979a12cb4123edfd18e8b219e55488))
 
 ## [0.73.10](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.73.9...v0.73.10) (2024-12-03)
 
diff --git a/webapp/src/components/modals/ObizOrderProcessModal.tsx b/webapp/src/components/modals/ObizOrderProcessModal.tsx
index 01e74dfd..b466d315 100644
--- a/webapp/src/components/modals/ObizOrderProcessModal.tsx
+++ b/webapp/src/components/modals/ObizOrderProcessModal.tsx
@@ -1,6 +1,7 @@
 import {
   Box,
   Button,
+  Flex,
   Icon,
   Modal,
   ModalBody,
@@ -16,9 +17,10 @@ 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";
+import { HiMiniShieldCheck, HiQuestionMarkCircle } from "react-icons/hi2";
 import { formatter2Digits } from "~/utils/tools";
 import { useRouter } from "next/router";
+import PartnerImage from "../ui/PartnerImage";
 
 const ObizOfferVariableContent = ({
   step,
@@ -257,13 +259,31 @@ export default function ObizOrderProcessModal(
       <ModalContent minH="full">
         <ModalBody display="flex" flexDir="column" px={8} minH="full">
           {step !== "payment" && (
-            <Box mt={8}>
-              <BackButton
-                onClick={() =>
-                  step == "amount" ? onClose() : setStep("amount")
-                }
+            <Flex mt={8} alignItems="center">
+              <Box mr={4}>
+                <BackButton
+                  onClick={() =>
+                    step == "amount" ? onClose() : setStep("amount")
+                  }
+                />
+              </Box>
+              <PartnerImage partner={offer.partner} width={42} height={42} />
+              <Flex flexDir="column" gap={0.5} ml={2}>
+                <Text fontSize={14} fontWeight={500}>
+                  {offer.partner.name}
+                </Text>
+                <Text fontSize={12} fontWeight={800}>
+                  {offer.title} {offer.subtitle ?? ""}
+                </Text>
+              </Flex>
+              <Icon
+                as={HiQuestionMarkCircle}
+                w={6}
+                h={6}
+                ml="auto"
+                color="disabled"
               />
-            </Box>
+            </Flex>
           )}
           <ObizOfferVariableContent
             step={step}