Merge branch 'main' of https://github.com/SocialGouv/carte-jeune-enga…

…ge-v2

webapp/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [0.67.0](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.66.5...v0.67.0) (2024-11-18)
+
+
+### Bug Fixes
+
+* add ok/ko to condition block in bo ([0ef3aee](https://github.com/SocialGouv/carte-jeune-engage/commit/0ef3aee5b9dbe6ce9dc81ad48015d55927e6d6b1))
+* dynamic icon io path import ([3b3abd1](https://github.com/SocialGouv/carte-jeune-engage/commit/3b3abd1d93b7be9e3b17a44e05cdf84e6674d150))
+* wording for terms of use in cje offer ([c39ca18](https://github.com/SocialGouv/carte-jeune-engage/commit/c39ca1834b2c4662315df6244ec9d0c06ccab1e2))
+
+
+### Features
+
+* refactor conditions blocks for cje and obiz offer ([8cd7934](https://github.com/SocialGouv/carte-jeune-engage/commit/8cd7934b5cfead45591ae36a409a83f7d75d848c))
+
+## [0.66.5](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.66.4...v0.66.5) (2024-11-18)
+
+
+### Bug Fixes
+
+* small minor design issues ([805d361](https://github.com/SocialGouv/carte-jeune-engage/commit/805d361aaf728d0a68f2ba325620180d131a63af))
+
 ## [0.66.4](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.66.3...v0.66.4) (2024-11-18)
 
 ### Bug Fixes

webapp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webapp",
-  "version": "0.66.4",
+  "version": "0.67.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

webapp/src/components/cards/OfferCard.tsx

@@ -8,7 +8,6 @@ import { dottedPattern } from "~/utils/chakra-theme";
 import ConditionalLink from "../ConditionalLink";
 import ExpiryTag from "../offer/ExpiryTag";
 import { BsEyeFill } from "react-icons/bs";
-import Cookies from "js-cookie";
 import { ObizCard } from "./ObizCard";
 import PartnerImage from "../ui/PartnerImage";
 

webapp/src/components/offer/ConditionBlocksSection.tsx

@@ -0,0 +1,55 @@
+import { Flex, Icon, Text } from "@chakra-ui/react";
+import { HiCheckCircle, HiXCircle } from "react-icons/hi2";
+import { getItemsConditionBlocks } from "~/payload/components/CustomSelectBlocksOfUse";
+import { Offer } from "~/payload/payload-types";
+import { theme } from "~/utils/chakra-theme";
+import ReactIcon from "~/utils/dynamicIcon";
+
+const disabledColor = theme.colors["disabled"] as string;
+
+type ConditionBlocksSectionProps = {
+  offerConditionBlocks: { text: string; icon: string; isCrossed: boolean }[];
+  offerSource: Offer["source"];
+};
+
+const ConditionBlocksSection = ({
+  offerConditionBlocks,
+  offerSource,
+}: ConditionBlocksSectionProps) => {
+  return (
+    <Flex flexDir="column" gap={4} w="full" px={4}>
+      {offerConditionBlocks.map(({ text, icon, isCrossed }) => {
+        return (
+          <Flex key={text} alignItems="center" w="full">
+            {typeof icon === "string" && (
+              <ReactIcon
+                icon={icon}
+                size={20}
+                color={!isCrossed ? "black" : disabledColor}
+              />
+            )}
+            <Text
+              fontWeight={500}
+              textAlign="start"
+              ml={4}
+              w="70%"
+              color={!isCrossed ? "black" : "disabled"}
+              textDecor={!isCrossed ? "none" : "line-through"}
+            >
+              {text}
+            </Text>
+            <Icon
+              as={!isCrossed ? HiCheckCircle : HiXCircle}
+              w={5}
+              h={5}
+              color={!isCrossed ? "primary" : "error"}
+              ml="auto"
+            />
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default ConditionBlocksSection;

webapp/src/components/offer/page/OfferContent.tsx

@@ -1,34 +1,27 @@
 import {
   Box,
   Button,
-  Center,
   Divider,
   Flex,
   HStack,
   Icon,
   ListItem,
   OrderedList,
-  Tag,
   Text,
   UnorderedList,
-  useDisclosure,
 } from "@chakra-ui/react";
 import { push } from "@socialgouv/matomo-next";
 import Image from "next/image";
 import { useMemo, useRef, useState } from "react";
-import { HiArrowRight } from "react-icons/hi";
 import { HiBookmark, HiMiniEye, HiOutlineBookmark } from "react-icons/hi2";
-import ConfirmModal from "~/components/modals/ConfirmModal";
-import { getItemsConditionBlocks } from "~/payload/components/CustomSelectBlocksOfUse";
 import { getItemsTermsOfUse } from "~/payload/components/CustomSelectTermsOfUse";
 import { CouponIncluded } from "~/server/api/routers/coupon";
 import { OfferIncluded } from "~/server/api/routers/offer";
-import { api } from "~/utils/api";
 import { dottedPattern } from "~/utils/chakra-theme";
-import ReactIcon from "~/utils/dynamicIcon";
 import InStoreSection from "../InStoreSection";
-import { StackItem } from "../StackItems";
 import TextWithLinks from "../TextWithLinks";
+import ConditionBlocksSection from "../ConditionBlocksSection";
+import { getItemsConditionBlocks } from "~/payload/components/CustomSelectBlocksOfUse";
 
 type OfferContentProps = {
   offer: OfferIncluded;
@@ -49,11 +42,18 @@ const OfferContent = (props: OfferContentProps) => {
 
   const offerConditionBlocks = useMemo(() => {
     if (!offer) return [];
-    return getItemsConditionBlocks(offer.kind).filter((item) =>
-      offer.conditionBlocks
-        ?.map((conditionBlock) => conditionBlock.slug)
-        .includes(item.slug)
-    ) as StackItem[];
+    return getItemsConditionBlocks(offer.source)
+      .filter((conditionBlock) =>
+        offer.conditionBlocks
+          ?.map((cb) => cb.slug)
+          .includes(conditionBlock.slug)
+      )
+      .map((conditionBlock) => ({
+        ...conditionBlock,
+        isCrossed:
+          offer.conditionBlocks?.find((cb) => cb.slug === conditionBlock.slug)
+            ?.isCrossed ?? false,
+      }));
   }, [offer]);
 
   const itemsTermsOfUse = useMemo(() => {
@@ -101,77 +101,12 @@ const OfferContent = (props: OfferContentProps) => {
         )}
       </Box>
       {offerConditionBlocks.length > 0 && (
-        <Flex
-          gap={3}
-          mt={7}
-          w="full"
-          h="max-content"
-          py={1}
-          pl={4}
-          overflowX="scroll"
-          sx={{
-            "&::-webkit-scrollbar": {
-              display: "none",
-            },
-          }}
-        >
-          {offerConditionBlocks.map(({ text, icon }, index) => (
-            <Flex
-              key={text}
-              position="relative"
-              minW="43%"
-              flexDir="column"
-              alignItems="center"
-              justifyContent="center"
-              py={4}
-              px={6}
-            >
-              <Box
-                position="absolute"
-                inset={0}
-                bg="bgGray"
-                zIndex={1}
-                borderRadius="3xl"
-                transform={`rotate(${index % 2 === 0 ? 3 : -2}deg)`}
-              />
-              <Box p={4} bg="white" borderRadius="full" zIndex={2}>
-                {typeof icon === "string" && (
-                  <ReactIcon icon={icon} size={24} color="inherit" />
-                )}
-              </Box>
-              <Text fontWeight={500} textAlign="center" mt={2} zIndex={2}>
-                {text}
-              </Text>
-            </Flex>
-          ))}
-          <Center minW="43%" mr={4} key="read-all-conditions">
-            <Text
-              fontWeight={800}
-              color="blackLight"
-              textDecor="underline"
-              textDecorationThickness="2px"
-              textUnderlineOffset={2}
-              onClick={() => {
-                setIsConditionsOpen(true);
-                conditionsRef.current?.scrollIntoView({
-                  behavior: "smooth",
-                });
-              }}
-            >
-              Lire toutes
-              <br />
-              les conditions{" "}
-              <Icon
-                as={HiArrowRight}
-                w={4}
-                h={4}
-                borderBottom="2px solid black"
-                pb="1px"
-                mb={-1}
-              />
-            </Text>
-          </Center>
-        </Flex>
+        <Box mt={8}>
+          <ConditionBlocksSection
+            offerConditionBlocks={offerConditionBlocks}
+            offerSource={offer.source}
+          />
+        </Box>
       )}
       {offer.kind.startsWith("voucher") && (
         <Box mt={8} px={4} w="full">

webapp/src/pages/dashboard/offer/obiz/[id]/index.tsx

@@ -1,5 +1,4 @@
 import {
-  Box,
   Button,
   Center,
   Divider,
@@ -19,14 +18,13 @@ import { useEffect, useMemo, useState } from "react";
 import { BarcodeIcon } from "~/components/icons/barcode";
 import LoadingLoader from "~/components/LoadingLoader";
 import ObizOrderProcessModal from "~/components/modals/ObizOrderProcessModal";
-import { StackItem } from "~/components/offer/StackItems";
+import ConditionBlocksSection from "~/components/offer/ConditionBlocksSection";
 import BackButton from "~/components/ui/BackButton";
 import Image from "~/components/ui/Image";
 import PartnerImage from "~/components/ui/PartnerImage";
 import { getItemsConditionBlocks } from "~/payload/components/CustomSelectBlocksOfUse";
 import { getItemsTermsOfUse } from "~/payload/components/CustomSelectTermsOfUse";
 import { api } from "~/utils/api";
-import ReactIcon from "~/utils/dynamicIcon";
 import { cleanHtml } from "~/utils/tools";
 
 type OfferObizPageProps = {
@@ -52,14 +50,25 @@ export default function OfferObizPage({ offer_id }: OfferObizPageProps) {
 
   const { data: offer } = resultOffer || {};
 
-  const itemsTermsOfUse = useMemo(() => {
+  const offerConditionBlocks = useMemo(() => {
     if (!offer) return [];
-    return getItemsTermsOfUse(offer.kind);
+    return getItemsConditionBlocks(offer.source)
+      .filter((conditionBlock) =>
+        offer.conditionBlocks
+          ?.map((cb) => cb.slug)
+          .includes(conditionBlock.slug)
+      )
+      .map((conditionBlock) => ({
+        ...conditionBlock,
+        isCrossed:
+          offer.conditionBlocks?.find((cb) => cb.slug === conditionBlock.slug)
+            ?.isCrossed ?? false,
+      }));
   }, [offer]);
 
-  const offerConditionBlocks = useMemo(() => {
+  const itemsTermsOfUse = useMemo(() => {
     if (!offer) return [];
-    return getItemsConditionBlocks(offer.kind) as StackItem[];
+    return getItemsTermsOfUse(offer.kind);
   }, [offer]);
 
   const onRedirectPayment = () => {
@@ -153,52 +162,10 @@ export default function OfferObizPage({ offer_id }: OfferObizPageProps) {
             Acheter un bon
           </Button>
         </Flex>
-        {offerConditionBlocks.length > 0 && (
-          <Flex
-            gap={3}
-            w="full"
-            h="max-content"
-            py={1}
-            px={4}
-            pl={4}
-            overflowX="scroll"
-            sx={{
-              "&::-webkit-scrollbar": {
-                display: "none",
-              },
-            }}
-          >
-            {offerConditionBlocks.map(({ text, icon }, index) => (
-              <Flex
-                key={text}
-                position="relative"
-                minW="43%"
-                flexDir="column"
-                alignItems="center"
-                justifyContent="center"
-                py={4}
-                px={6}
-              >
-                <Box
-                  position="absolute"
-                  inset={0}
-                  bg="bgGray"
-                  zIndex={1}
-                  borderRadius="3xl"
-                  transform={`rotate(${index % 2 === 0 ? 3 : -2}deg)`}
-                />
-                <Box p={4} bg="white" borderRadius="full" zIndex={2}>
-                  {typeof icon === "string" && (
-                    <ReactIcon icon={icon} size={24} color="inherit" />
-                  )}
-                </Box>
-                <Text fontWeight={500} textAlign="center" mt={2} zIndex={2}>
-                  {text}
-                </Text>
-              </Flex>
-            ))}
-          </Flex>
-        )}
+        <ConditionBlocksSection
+          offerConditionBlocks={offerConditionBlocks}
+          offerSource={offer.source}
+        />
         <Flex direction={"column"} px={4} pb={8} gap={8}>
           <Flex flexDir="column" mt={10}>
             <Text fontWeight="extrabold" fontSize={20}>

webapp/src/payload/collections/Offer.ts

@@ -287,10 +287,6 @@ export const Offers: CollectionConfig = {
         singular: "Condition Bloc",
         plural: "Condition Blocs",
       },
-      admin: {
-        condition: (_, siblingData) =>
-          !!siblingData.source && siblingData.source === "cje",
-      },
       fields: [
         {
           name: "slug",
@@ -301,7 +297,11 @@ export const Offers: CollectionConfig = {
               Field: CustomSelectConditionBlocks,
             },
           },
-          required: true,
+        },
+        {
+          name: "isCrossed",
+          type: "checkbox",
+          label: "Barré",
         },
       ],
     },