Merge pull request #157 from AppQuality/fix-cap-not-empty-input-test

fix: added form check to test that cap input is not empty
AppQuality · Jul 1, 2024 · 2bf05d9 · 2bf05d9
2 parents f33c70b + 7d80533
commit 2bf05d9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/src/pages/campaigns/components/campaignForm/FormProvider.tsx b/src/pages/campaigns/components/campaignForm/FormProvider.tsx
@@ -51,6 +51,7 @@ export interface NewCampaignValues {
   targetNotes?: string;
   targetSize?: string;
   targetCap?: string;
+  checkboxCap?: boolean;
   browsersList?: string[];
   productType?: string;
   notes?: string;
@@ -132,6 +133,7 @@ const FormProvider = ({
     targetNotes: dossier?.target?.notes || "",
     targetSize: dossier?.target?.size?.toString(),
     targetCap: dossier?.target?.cap?.toString(),
+    checkboxCap: !!dossier?.target?.cap?.toString(),
     browsersList:
       dossier?.browsers?.map((browser) => browser.id.toString()) || [],
     productType: dossier?.productType?.id.toString() || "",
@@ -176,6 +178,11 @@ const FormProvider = ({
       ),
     targetCap: yup
       .string()
+      .test("is-not-empty", "Cap must be a number", function (value) {
+        const { checkboxCap } = this.parent;
+        if (!value && checkboxCap) return false;
+        return true;
+      })
       .test(
         "is-greater-or-equal",
         "Cap must be at least equal to the number of participants",

diff --git a/src/pages/campaigns/components/campaignForm/fields/TargetSize.tsx b/src/pages/campaigns/components/campaignForm/fields/TargetSize.tsx
@@ -1,15 +1,18 @@
-import { Title, Checkbox } from "@appquality/appquality-design-system";
+import {
+  Title,
+  Checkbox,
+  FormikField,
+  FieldProps,
+} from "@appquality/appquality-design-system";
 import InputField from "./InputField";
-import { useState } from "react";
 import { NewCampaignValues } from "../FormProvider";
 import { useFormikContext } from "formik";
 
 const TargetSize = () => {
   const {
     setFieldValue,
-    values: { targetCap },
+    values: { checkboxCap },
   } = useFormikContext<NewCampaignValues>();
-  const [hasCap, setHasCap] = useState(!!targetCap);
   return (
     <>
       <div>
@@ -30,18 +33,22 @@ const TargetSize = () => {
           Set the maximum candidates capacity
         </Title>
 
-        <Checkbox
-          name="checkboxCap"
-          id="checkboxCap"
-          label="Limit the number of candidates"
-          checked={hasCap}
-          onChange={(e) => {
-            setHasCap(e.target.checked);
-            if (!e.target.checked) setFieldValue("targetCap", "");
-          }}
-        />
+        <FormikField name="checkboxCap">
+          {({ field, form }: FieldProps) => (
+            <Checkbox
+              name={field.name}
+              id="checkboxCap"
+              label="Limit the number of candidates"
+              checked={field.value}
+              onChange={(e) => {
+                setFieldValue("checkboxCap", e.target.checked);
+                if (!e.target.checked) setFieldValue("targetCap", "");
+              }}
+            />
+          )}
+        </FormikField>
         <InputField
-          disabled={!hasCap}
+          disabled={!checkboxCap}
           type="number"
           name="targetCap"
           label=""