fix: change number input to country to prevent name collision, add ba…

…se fields for textarea and ladder
SocialGouv · Nov 28, 2024 · 19276bd · 19276bd
1 parent 1da6614
commit 19276bd
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 109 deletions.
diff --git a/webapp/src/components/forms/payload/Form.tsx b/webapp/src/components/forms/payload/Form.tsx
@@ -32,55 +32,15 @@ export type FormBlockType = {
   form: FormType;
 };
 
-const FormField = ({
-  formFromProps,
-  register,
-  errors,
-  control,
-  formMethods,
-  field,
-}: {
-  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 (
-      <React.Fragment key={field.blockName}>
-        <Field
-          form={formFromProps}
-          field={field}
-          {...formMethods}
-          register={register}
-          errors={errors}
-          control={control}
-        />
-      </React.Fragment>
-    );
-  }
-  return null;
-};
-
 export const FormBlock: React.FC<
   FormBlockType & {
     id?: string;
     afterOnSubmit: () => void;
   }
 > = (props) => {
   const {
-    enableIntro,
     form: formFromProps,
-    form: {
-      id: formID,
-      submitButtonLabel,
-      confirmationType,
-      redirect,
-      confirmationMessage,
-    } = {},
+    form: { id: formID, confirmationType, redirect } = {},
     afterOnSubmit,
   } = props;
 
@@ -113,9 +73,9 @@ export const FormBlock: React.FC<
     }
   };
 
-  const handlePrevStep = () => {
-    setCurrentStep((prev) => prev - 1);
-  };
+  // const handlePrevStep = () => {
+  //   setCurrentStep((prev) => prev - 1);
+  // };
 
   const onSubmit = useCallback(
     (data: Data) => {
@@ -129,7 +89,6 @@ export const FormBlock: React.FC<
           value,
         })) as { field: string; value: string }[];
 
-        // delay loading indicator by 1s
         loadingTimerID = setTimeout(() => {
           setIsLoading(true);
         }, 1000);
@@ -146,13 +105,6 @@ export const FormBlock: React.FC<
           setHasSubmitted(true);
 
           afterOnSubmit();
-          // if (confirmationType === "redirect" && redirect) {
-          //   const { url } = redirect;
-
-          //   const redirectUrl = url;
-
-          //   if (redirectUrl) router.push(redirectUrl);
-          // }
         } catch (err) {
           console.warn(err);
           setIsLoading(false);
@@ -169,34 +121,36 @@ export const FormBlock: React.FC<
 
   return (
     <div>
-      {/* {enableIntro && introContent && !hasSubmitted && (
-        <div>{introContent}</div>
-      )} */}
-      {!isLoading && hasSubmitted && confirmationType === "message" && (
-        <pre>{JSON.stringify(confirmationMessage, null, 2)}</pre>
-      )}
-      {isLoading && !hasSubmitted && <p>Loading, please wait...</p>}
       {error && <div>{`${error.status || "500"}: ${error.message || ""}`}</div>}
       {!hasSubmitted && (
         <Box as="form" id={formID} onSubmit={handleSubmit(onSubmit)} w="full">
           <div>
-            {formFromProps && formFromProps.fields && (
-              <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>
-            )}
+            {formFromProps &&
+              formFromProps.fields &&
+              (() => {
+                const field = formFromProps.fields[currentStep];
+                const Field: React.FC<any> =
+                  fields?.[field.blockType as keyof typeof fields];
+                return (
+                  <Flex flexDir="column" gap={6}>
+                    {"label" in field && (
+                      <Text fontSize={24} fontWeight={800} textAlign="center">
+                        {field.label}
+                      </Text>
+                    )}
+                    <React.Fragment key={field.blockName}>
+                      <Field
+                        form={formFromProps}
+                        field={{ ...field, label: undefined }}
+                        {...formMethods}
+                        register={register}
+                        errors={errors}
+                        control={control}
+                      />
+                    </React.Fragment>
+                  </Flex>
+                );
+              })()}
           </div>
           <ButtonGroup justifyContent="space-between" w="full" mt={6}>
             {/* {currentStep > 0 && (
@@ -211,6 +165,7 @@ export const FormBlock: React.FC<
             <IconButton
               colorScheme="blackBtn"
               aria-label="Next"
+              isLoading={isLoading || hasSubmitted}
               icon={<Icon as={HiArrowRight} w={5} h={5} />}
               onClick={handleNextStep}
               ml="auto"

diff --git a/webapp/src/components/forms/payload/Ladder/index.tsx b/webapp/src/components/forms/payload/Ladder/index.tsx
@@ -28,27 +28,17 @@ export const Ladder: React.FC<{
     textLegend: { label: string }[];
   };
 }> = ({ field: currentField, control }) => {
-  console.log("currentField", currentField);
-
   const ladderArr = Array.from(
     { length: currentField.max - currentField.min + 1 },
     (_, index) => (index + currentField.min).toString()
   );
 
   return (
     <FormControl>
-      <FormLabel
-        fontSize={24}
-        fontWeight={800}
-        lineHeight="normal"
-        textAlign="center"
-      >
-        {currentField.label}
-      </FormLabel>
       <Controller
         control={control}
         name={currentField.name}
-        render={({ field }) => {
+        render={({ field: { onChange, value } }) => {
           return (
             <Flex flexDir="column" gap={2} alignItems="center">
               <Flex alignItems="center" gap={0.5} w="full">
@@ -63,11 +53,11 @@ export const Ladder: React.FC<{
                     fontSize={16}
                     fontWeight={800}
                     minWidth="auto"
-                    color={field.value === item ? "white" : "black"}
+                    color={value === item ? "white" : "black"}
                     colorScheme={
-                      field.value === item ? "primaryShades" : "bgGrayShades"
+                      value === item ? "primaryShades" : "bgGrayShades"
                     }
-                    onClick={() => field.onChange(item)}
+                    onClick={() => onChange(item)}
                   />
                 ))}
               </Flex>

diff --git a/webapp/src/components/forms/payload/fields.tsx b/webapp/src/components/forms/payload/fields.tsx
@@ -2,6 +2,6 @@ import { Ladder } from "./Ladder";
 import { Textarea } from "./Textarea";
 
 export const fields = {
-  number: Ladder,
+  country: Ladder,
   textarea: Textarea,
 };
diff --git a/webapp/src/components/modals/CouponUsedFeedbackModal.tsx b/webapp/src/components/modals/CouponUsedFeedbackModal.tsx
@@ -98,7 +98,6 @@ const CouponUsedFeedbackModalContent = ({
               p={7}
               colorScheme="blackBtn"
               onClick={() => {
-                onConfirm();
                 setCurrentStep(couponUsedFeedbackForm ? "form" : "finish");
               }}
             >

diff --git a/webapp/src/payload/payload-form-builder.ts b/webapp/src/payload/payload-form-builder.ts
@@ -1,21 +1,36 @@
-import { PluginConfig } from "@payloadcms/plugin-form-builder/dist/types";
 import { fields } from "@payloadcms/plugin-form-builder";
+import { PluginConfig } from "@payloadcms/plugin-form-builder/dist/types";
+import { Field } from "payload/types";
+
+const baseFields: Field[] = [
+  {
+    type: "row",
+    fields: [
+      {
+        type: "text",
+        name: "name",
+        required: true,
+        label: "Nom (miniscule, pas de caractères spéciaux)",
+      },
+      { type: "text", name: "label", label: "Libellé" },
+    ],
+  },
+  {
+    type: "checkbox",
+    name: "required",
+    label: "Requis",
+  },
+];
 
-export const FormBuilderConfig: PluginConfig = {
+export const formBuilderConfig: PluginConfig = {
   fields: {
-    textarea: {
+    country: {
+      labels: {
+        singular: "Échelle de valeurs",
+        plural: "Échelles de valeurs",
+      },
       fields: [
-        ...(fields.textarea as any).fields,
-        {
-          type: "text",
-          name: "placeholder",
-          label: "Placeholder",
-        },
-      ],
-    },
-    number: {
-      fields: [
-        ...(fields.number as any).fields,
+        ...baseFields,
         {
           type: "row",
           fields: [
@@ -31,8 +46,22 @@ export const FormBuilderConfig: PluginConfig = {
         },
       ],
     },
+    textarea: {
+      labels: {
+        singular: "Zone de texte",
+        plural: "Zones de texte",
+      },
+      fields: [
+        ...baseFields,
+        {
+          type: "text",
+          name: "placeholder",
+          label: "Placeholder",
+        },
+      ],
+    },
+    number: false,
     checkbox: false,
-    country: false,
     email: false,
     message: false,
     select: false,

diff --git a/webapp/src/payload/payload.config.ts b/webapp/src/payload/payload.config.ts
@@ -31,7 +31,7 @@ import { SearchRequests } from "./collections/SearchRequest";
 import { EmailAuthTokens } from "./collections/EmailAuthToken";
 import { Orders } from "./collections/Order";
 import { OrderSignals } from "./collections/OrderSignal";
-import { FormBuilderConfig } from "./payload-form-builder";
+import { formBuilderConfig } from "./payload-form-builder";
 
 const publicAdapter = s3Adapter({
   config: {
@@ -69,7 +69,7 @@ export default buildConfig({
         },
       },
     }),
-    formBuilder(FormBuilderConfig),
+    formBuilder(formBuilderConfig),
   ],
   editor: slateEditor({}),
   admin: {