feat: obiz used and feedback form

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)
 

webapp/src/components/forms/payload/Form.tsx

@@ -2,8 +2,9 @@ import React, { useState, useCallback } from "react";
 import { buildInitialFormState } from "./buildInitialFormState";
 import { fields } from "./fields";
 import {
-  CountryField,
   Form as FormType,
+  CountryField,
+  SelectField,
   TextAreaField,
 } from "@payloadcms/plugin-form-builder/dist/types";
 import { useForm } from "react-hook-form";
@@ -33,7 +34,9 @@ export type FormBlockType = {
   blockName?: string;
   blockType?: "formBlock";
   enableIntro: Boolean;
-  form: Omit<FormType, "fields"> & { fields: (CountryField | TextAreaField)[] };
+  form: Omit<FormType, "fields"> & {
+    fields: (CountryField | TextAreaField | SelectField)[];
+  };
 };
 
 export const FormBlock: React.FC<

webapp/src/components/forms/payload/Ladder/index.tsx

@@ -6,13 +6,7 @@ import {
   FieldErrorsImpl,
   Controller,
 } from "react-hook-form";
-import {
-  Flex,
-  FormControl,
-  FormLabel,
-  IconButton,
-  Text,
-} from "@chakra-ui/react";
+import { Flex, FormControl, IconButton, Text } from "@chakra-ui/react";
 
 export const Ladder: React.FC<{
   register: UseFormRegister<FieldValues & any>;
@@ -53,7 +47,7 @@ export const Ladder: React.FC<{
                 {ladderArr.map((item) => (
                   <IconButton
                     flex={1}
-                    key={item}
+                    key={`${currentField.name}-${item}`}
                     aria-label="Test"
                     icon={<>{item}</>}
                     h={10}

webapp/src/components/forms/payload/Select/index.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { TextField } from "@payloadcms/plugin-form-builder/dist/types";
+import {
+  UseFormRegister,
+  FieldValues,
+  FieldErrorsImpl,
+  Controller,
+} from "react-hook-form";
+import { Center, Flex, FormControl, Text } from "@chakra-ui/react";
+import ReactIcon from "~/utils/dynamicIcon";
+
+export const Select: React.FC<{
+  register: UseFormRegister<FieldValues & any>;
+  control: any;
+  errors: Partial<
+    FieldErrorsImpl<{
+      [x: string]: any;
+    }>
+  >;
+  field: TextField & {
+    options: { id: string; label: string; value: string; icon: string }[];
+  };
+}> = ({ field: currentField, control }) => {
+  const options = currentField.options;
+
+  return (
+    <FormControl>
+      <Controller
+        control={control}
+        name={currentField.name}
+        render={({ field: { onChange, value } }) => {
+          return (
+            <Center gap={5} alignItems="center">
+              {options.map((item) => (
+                <Flex
+                  key={item.id}
+                  flexDir="column"
+                  gap={0.5}
+                  onClick={() => onChange(item.value)}
+                >
+                  <Center
+                    p={5.5}
+                    alignSelf="center"
+                    borderRadius="2.5xl"
+                    bgColor={value === item.value ? "primary" : "bgGray"}
+                  >
+                    <ReactIcon
+                      icon={item.icon}
+                      color={value === item.value ? "white" : "black"}
+                      size={24}
+                    />
+                  </Center>
+                  <Text fontSize={14} fontWeight={800} textAlign="center">
+                    {item.label}
+                  </Text>
+                </Flex>
+              ))}
+            </Center>
+          );
+        }}
+      />
+    </FormControl>
+  );
+};

webapp/src/components/forms/payload/fields.tsx

@@ -1,7 +1,9 @@
 import { Ladder } from "./Ladder";
 import { Textarea } from "./Textarea";
+import { Select } from "./Select";
 
 export const fields = {
   country: Ladder,
   textarea: Textarea,
+  select: Select,
 };

webapp/src/components/modals/IssueModal.tsx

@@ -178,10 +178,7 @@ type IssueModalProps = IssueModalOrder | IssueModalCoupon;
 
 const IssueModal = (props: IssueModalProps) => {
   const { isOpen, onClose, kind } = props;
-  const { user } = useAuth();
-  const CrispWithNoSSR = dynamic(() => import("../support/Crisp"));
-
-  const [isOpenCrisp, setIsOpenCrisp] = useState(false);
+  const { showCrispModal, setShowCrispModal } = useAuth();
 
   const id = kind === "order" ? props.order_id : props.coupon_id;
 
@@ -203,74 +200,59 @@ const IssueModal = (props: IssueModalProps) => {
         ];
 
   return (
-    <>
-      <Modal isOpen={isOpen} onClose={onClose} isCentered={kind === "coupon"}>
-        <ModalOverlay />
-        {!isOpenCrisp && (
-          <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>
-      {isOpenCrisp && user && (
-        <CrispWithNoSSR
-          crispToken={CRISP_TOKEN}
-          user={user}
-          onClose={() => {
-            setIsOpenCrisp(false);
-          }}
-        />
+                  </Flex>
+                </>
+              )}
+            </Flex>
+          </ModalBody>
+        </ModalContent>
       )}
-    </>
+    </Modal>
   );
 };
 

webapp/src/components/modals/CouponUsedFeedbackModal.tsx → webapp/src/components/modals/UsedFeedbackModal.tsx

@@ -16,14 +16,14 @@ import { FormBlock } from "../forms/payload/Form";
 import { Form } from "~/payload/payload-types";
 import { useAuth } from "~/providers/Auth";
 import { UserIncluded } from "~/server/api/routers/user";
-import { OfferIncluded } from "~/server/api/routers/offer";
 import { CouponIncluded } from "~/server/api/routers/coupon";
 
 type CouponUsedFeedbackModalProps = {
   isOpen: boolean;
   onClose: () => void;
   onConfirm: () => void;
-  offer: CouponIncluded["offer"];
+  kind: "coupon" | "order";
+  offer_id: number;
 };
 
 const CouponUsedFeedbackModalContent = ({
@@ -32,14 +32,14 @@ const CouponUsedFeedbackModalContent = ({
   setCurrentStep,
   onClose,
   user,
-  offer,
+  offer_id,
 }: {
   couponUsedFeedbackForm: Form | undefined;
   currentStep: "form" | "finish" | undefined;
   setCurrentStep: (step: "form" | "finish" | undefined) => void;
   user: UserIncluded | null;
   onClose: () => void;
-  offer: CouponIncluded["offer"];
+  offer_id: number;
 }) => {
   switch (currentStep) {
     case "form":
@@ -50,7 +50,7 @@ const CouponUsedFeedbackModalContent = ({
               form={couponUsedFeedbackForm as any}
               afterOnSubmit={() => setCurrentStep("finish")}
               enableIntro={true}
-              offer_id={offer.id}
+              offer_id={offer_id}
             />
           )}
         </Box>
@@ -121,16 +121,16 @@ const CouponUsedFeedbackModalContent = ({
   }
 };
 
-const CouponUsedFeedbackModal = (props: CouponUsedFeedbackModalProps) => {
-  const { isOpen, onClose, onConfirm, offer } = props;
+const UsedFeedbackModal = (props: CouponUsedFeedbackModalProps) => {
+  const { isOpen, onClose, onConfirm, offer_id, kind } = props;
   const { user } = useAuth();
 
   const [currentStep, setCurrentStep] = useState<"form" | "finish" | undefined>(
     undefined
   );
 
   const { data: resultForm } = api.form.getFormBySlug.useQuery({
-    slug: "coupon-used-feedback-form",
+    slug: `${kind}-used-feedback-form`,
   });
 
   const { data: form } = resultForm || {};
@@ -158,12 +158,12 @@ const CouponUsedFeedbackModal = (props: CouponUsedFeedbackModalProps) => {
             currentStep={currentStep}
             setCurrentStep={setCurrentStep}
             onClose={closeModal}
-            offer={offer}
+            offer_id={offer_id}
           />
         </ModalBody>
       </ModalContent>
     </Modal>
   );
 };
 
-export default CouponUsedFeedbackModal;
+export default UsedFeedbackModal;

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

@@ -20,7 +20,7 @@ import { CouponIncluded } from "~/server/api/routers/coupon";
 import { OfferIncluded } from "~/server/api/routers/offer";
 import { getExpiryObject } from "../ExpiryTag";
 import InStoreSection from "../InStoreSection";
-import CouponUsedBox from "./CouponUsedBox";
+import OfferUsedBox from "./OfferUsedBox";
 import IssueModal from "~/components/modals/IssueModal";
 
 type CouponContentProps = {
@@ -53,7 +53,13 @@ const CouponContent = (props: CouponContentProps) => {
   return (
     <Flex flexDir="column">
       {!coupon.used && (
-        <CouponUsedBox coupon={coupon} confirmCouponUsed={onCouponUsed} />
+        <Box mt={6}>
+          <OfferUsedBox
+            kind="coupon"
+            coupon={coupon}
+            onConfirm={onCouponUsed}
+          />
+        </Box>
       )}
       <Flex
         p={4}