fix: integrate form in coupon used feedback modal and add missing fie…

…lds in textarea and number fields
SocialGouv · Nov 28, 2024 · 46b3d5f · 46b3d5f
1 parent c5d837a
commit 46b3d5f
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 120 deletions.
diff --git a/webapp/src/components/forms/FormInput.tsx b/webapp/src/components/forms/FormInput.tsx
@@ -80,9 +80,11 @@ const FormInput = ({
           : {}
       }
     >
-      <FormLabel fontWeight="medium" color="disabled" fontSize={12} mb={1}>
-        {label}
-      </FormLabel>
+      {label && (
+        <FormLabel fontWeight="medium" color="disabled" fontSize={12} mb={1}>
+          {label}
+        </FormLabel>
+      )}
       <Input
         id={name}
         as={kind === "textarea" ? Textarea : Input}

diff --git a/webapp/src/components/forms/payload/Form.tsx b/webapp/src/components/forms/payload/Form.tsx
@@ -4,7 +4,14 @@ import { fields } from "./fields";
 import { Form as FormType } from "@payloadcms/plugin-form-builder/dist/types";
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/router";
-import { Box, ButtonGroup, Icon, IconButton } from "@chakra-ui/react";
+import {
+  Box,
+  ButtonGroup,
+  Flex,
+  Icon,
+  IconButton,
+  Text,
+} from "@chakra-ui/react";
 import { api } from "~/utils/api";
 import { HiArrowLeft, HiArrowRight } from "react-icons/hi2";
 
@@ -32,7 +39,14 @@ const FormField = ({
   control,
   formMethods,
   field,
-}: any) => {
+}: {
+  formFromProps: FormType;
+  register: any;
+  errors: any;
+  control: any;
+  formMethods: any;
+  field: any;
+}) => {
   const Field: React.FC<any> = fields?.[field.blockType as keyof typeof fields];
   if (Field) {
     return (
@@ -54,6 +68,7 @@ const FormField = ({
 export const FormBlock: React.FC<
   FormBlockType & {
     id?: string;
+    afterOnSubmit: () => void;
   }
 > = (props) => {
   const {
@@ -66,6 +81,7 @@ export const FormBlock: React.FC<
       redirect,
       confirmationMessage,
     } = {},
+    afterOnSubmit,
   } = props;
 
   const formMethods = useForm({
@@ -119,7 +135,7 @@ export const FormBlock: React.FC<
         }, 1000);
 
         try {
-          mutateAsync({
+          await mutateAsync({
             formId: formID as unknown as number,
             submissionData: dataToSend,
           });
@@ -129,13 +145,14 @@ export const FormBlock: React.FC<
           setIsLoading(false);
           setHasSubmitted(true);
 
-          if (confirmationType === "redirect" && redirect) {
-            const { url } = redirect;
+          afterOnSubmit();
+          // if (confirmationType === "redirect" && redirect) {
+          //   const { url } = redirect;
 
-            const redirectUrl = url;
+          //   const redirectUrl = url;
 
-            if (redirectUrl) router.push(redirectUrl);
-          }
+          //   if (redirectUrl) router.push(redirectUrl);
+          // }
         } catch (err) {
           console.warn(err);
           setIsLoading(false);
@@ -164,26 +181,33 @@ export const FormBlock: React.FC<
         <Box as="form" id={formID} onSubmit={handleSubmit(onSubmit)} w="full">
           <div>
             {formFromProps && formFromProps.fields && (
-              <FormField
-                formFromProps={formFromProps}
-                register={register}
-                errors={errors}
-                control={control}
-                formMethods={formMethods}
-                field={formFromProps.fields[currentStep]}
-              />
+              <Flex flexDir="column" gap={6}>
+                {"label" in formFromProps.fields[currentStep] && (
+                  <Text fontSize={24} fontWeight={800} textAlign="center">
+                    {formFromProps.fields[currentStep].label}
+                  </Text>
+                )}
+                <FormField
+                  formFromProps={formFromProps}
+                  register={register}
+                  errors={errors}
+                  control={control}
+                  formMethods={formMethods}
+                  field={{ ...formFromProps.fields[currentStep], label: "" }}
+                />
+              </Flex>
             )}
           </div>
           <ButtonGroup justifyContent="space-between" w="full" mt={6}>
-            {currentStep > 0 && (
+            {/* {currentStep > 0 && (
               <IconButton
                 colorScheme="blackBtn"
                 aria-label="Next"
                 icon={<Icon as={HiArrowLeft} w={5} h={5} />}
                 onClick={handlePrevStep}
                 px={6}
               />
-            )}
+            )} */}
             <IconButton
               colorScheme="blackBtn"
               aria-label="Next"

diff --git a/webapp/src/components/forms/payload/Ladder/index.tsx b/webapp/src/components/forms/payload/Ladder/index.tsx
@@ -27,7 +27,7 @@ export const Ladder: React.FC<{
     max: number;
     textLegend: { label: string }[];
   };
-}> = ({ field: currentField, register, control, errors }) => {
+}> = ({ field: currentField, control }) => {
   console.log("currentField", currentField);
 
   const ladderArr = Array.from(
@@ -51,14 +51,14 @@ export const Ladder: React.FC<{
         render={({ field }) => {
           return (
             <Flex flexDir="column" gap={2} alignItems="center">
-              <Flex alignItems="center" gap={1} w="full">
+              <Flex alignItems="center" gap={0.5} w="full">
                 {ladderArr.map((item) => (
                   <IconButton
                     flex={1}
                     key={item}
                     aria-label="Test"
                     icon={<>{item}</>}
-                    px={2.5}
+                    h={10}
                     borderRadius="base"
                     fontSize={16}
                     fontWeight={800}
@@ -73,7 +73,9 @@ export const Ladder: React.FC<{
               </Flex>
               <Flex w="full" alignItems="center" justifyContent="space-between">
                 {currentField.textLegend.map((item) => (
-                  <Text>{item.label}</Text>
+                  <Text fontSize={14} fontWeight={500}>
+                    {item.label}
+                  </Text>
                 ))}
               </Flex>
             </Flex>

diff --git a/webapp/src/components/modals/ConfirmModal.tsx b/webapp/src/components/modals/ConfirmModal.tsx
@@ -10,7 +10,7 @@ import {
 
 type ConfirmModalProps = {
   title: string;
-  description?: string;
+  description?: string | React.ReactNode;
   labels?: {
     primary?: string;
     secondary?: string;

diff --git a/webapp/src/components/modals/CouponUsedFeedbackModal.tsx b/webapp/src/components/modals/CouponUsedFeedbackModal.tsx
@@ -6,58 +6,130 @@ import {
   ModalContent,
   ModalOverlay,
   Button,
+  ButtonGroup,
+  ModalCloseButton,
+  Box,
 } from "@chakra-ui/react";
+import { useState } from "react";
+import { api } from "~/utils/api";
+import { FormBlock } from "../forms/payload/Form";
+import { Form } from "~/payload/payload-types";
 
 type CouponUsedFeedbackModalProps = {
   isOpen: boolean;
   onClose: () => void;
   onConfirm: () => void;
 };
 
-const CouponUsedFeedbackModal = (props: CouponUsedFeedbackModalProps) => {
-  const { isOpen, onClose, onConfirm } = props;
+const CouponUsedFeedbackModalContent = ({
+  couponUsedFeedbackForm,
+  onConfirm,
+  onClose,
+}: {
+  couponUsedFeedbackForm: Form | undefined;
+  onConfirm: () => void;
+  onClose: () => void;
+}) => {
+  const [currentStep, setCurrentStep] = useState<"form" | "finish" | undefined>(
+    undefined
+  );
 
-  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent borderRadius="2.5xl" bgColor="white" mx={4} my="auto">
-        <ModalBody>
-          <Flex flexDir="column" textAlign="center" px={2} py={4} gap={2}>
-            <Text
-              fontSize={24}
-              color="blackLight"
-              fontWeight={800}
-              mt={5}
-              mx={8}
-            >
-              Tout s'est bien passé quand vous avez utilisé le code ?
-            </Text>
+  switch (currentStep) {
+    case "form":
+      return (
+        <Box mt={8} px={2}>
+          {couponUsedFeedbackForm && (
+            <FormBlock
+              form={couponUsedFeedbackForm as any}
+              afterOnSubmit={() => setCurrentStep("finish")}
+              enableIntro={true}
+            />
+          )}
+        </Box>
+      );
+    case "finish":
+      return (
+        <Flex mt={10} px={2} flexDir="column" alignItems="center" gap={6}>
+          <Text fontSize={24} textAlign="center" fontWeight={800}>
+            Merci pour votre avis !
+          </Text>
+          <Button
+            w="fit-content"
+            size="md"
+            px={8}
+            colorScheme="blackBtn"
+            onClick={onClose}
+          >
+            Ok
+          </Button>
+        </Flex>
+      );
+    default:
+      return (
+        <Flex flexDir="column" textAlign="center" px={2} py={4} gap={2}>
+          <Text fontSize={24} color="blackLight" fontWeight={800} mt={5} mx={8}>
+            Vous avez utilisé ce code ?
+          </Text>
+          <Text fontWeight={500} lineHeight="normal">
+            Ce code là n’est valable qu’1 fois
+            <br />
+            <br />
+            Vous ne pourrez plus le réutiliser ensuite
+            <br />
+            <br />
+            Vous pouvez obtenir un nouveau code dans 24h
+            <br />
+            <br />
+            Confirmer que vous avez utilisé ce code ?
+          </Text>
+          <ButtonGroup justifyContent="center" mt={6} gap={4}>
             <Button
+              colorScheme="blackBtn"
+              fontSize="sm"
+              p={7}
               fontWeight={800}
-              fontSize={"sm"}
-              mx={16}
-              colorScheme="primaryShades"
-              mt={6}
-              onClick={() => {
-                onConfirm();
-                onClose();
-              }}
+              onClick={() => onClose()}
             >
-              Oui! Parfait
+              Non
             </Button>
             <Button
-              colorScheme="errorShades"
-              fontSize={"sm"}
-              mx={16}
               fontWeight={800}
+              fontSize="sm"
+              p={7}
+              colorScheme="blackBtn"
               onClick={() => {
                 onConfirm();
-                onClose();
+                setCurrentStep(couponUsedFeedbackForm ? "form" : "finish");
               }}
             >
-              Non vraiment pas...
+              Oui
             </Button>
-          </Flex>
+          </ButtonGroup>
+        </Flex>
+      );
+  }
+};
+
+const CouponUsedFeedbackModal = (props: CouponUsedFeedbackModalProps) => {
+  const { isOpen, onClose, onConfirm } = props;
+
+  const { data: resultForm } = api.form.getFormBySlug.useQuery({
+    slug: "coupon-used-feedback-form",
+  });
+
+  const { data: form } = resultForm || {};
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
+      <ModalOverlay />
+      <ModalContent borderRadius="2.5xl" bgColor="white" mx={4} my="auto">
+        <ModalCloseButton onClick={onClose} />
+        <ModalBody pb={8}>
+          <CouponUsedFeedbackModalContent
+            couponUsedFeedbackForm={form}
+            onConfirm={onConfirm}
+            onClose={onClose}
+          />
         </ModalBody>
       </ModalContent>
     </Modal>