wip: add cap logic

src/pages/campaigns/components/campaignForm/FormProvider.tsx

@@ -50,6 +50,7 @@ export interface NewCampaignValues {
   deviceRequirements?: string;
   targetNotes?: string;
   targetSize?: string;
+  targetCap?: string;
   browsersList?: string[];
   productType?: string;
   notes?: string;
@@ -130,6 +131,7 @@ const FormProvider = ({
     deviceRequirements: dossier?.deviceRequirements || "",
     targetNotes: dossier?.target?.notes || "",
     targetSize: dossier?.target?.size?.toString(),
+    targetCap: dossier?.target?.cap?.toString(),
     browsersList:
       dossier?.browsers?.map((browser) => browser.id.toString()) || [],
     productType: dossier?.productType?.id.toString() || "",
@@ -161,7 +163,16 @@ const FormProvider = ({
     deviceList: yup.array().min(1, "At least one device is required"),
     browsersList: yup.array(),
     deviceRequirements: yup.string(),
-    targetSize: yup.number(),
+    targetSize: yup.string(),
+    targetCap: yup.string().when("targetSize", {
+      is: (val: string) => val && val > 0,
+      then: yup
+        .string()
+        .min(
+          yup.ref("targetSize"),
+          "Cap must be at least equal to the number of participants"
+        ),
+    }),
     countries: yup.array(),
     languages: yup.array(),
     targetNotes: yup.string(),
@@ -216,6 +227,7 @@ const FormProvider = ({
               size: !!values.targetSize
                 ? parseInt(values.targetSize)
                 : undefined,
+              cap: !!values.targetCap ? parseInt(values.targetCap) : undefined,
             },
             browsers: values.browsersList?.map((browser) =>
               parseInt(browser, 10)

src/pages/campaigns/components/campaignForm/fields/TargetSize.tsx

@@ -0,0 +1,55 @@
+import { Title, Checkbox } 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 },
+  } = useFormikContext<NewCampaignValues>();
+  const [hasCap, setHasCap] = useState(!!targetCap);
+  return (
+    <>
+      <div>
+        <Title size="s" className="aq-mb-2">
+          Set the target
+        </Title>
+        <div>
+          <InputField
+            type="number"
+            name="targetSize"
+            label="Number of participants"
+            style={{ maxWidth: "225px" }}
+          />
+        </div>
+      </div>
+      <div>
+        <Title size="s" className="q-mb-2">
+          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", "");
+          }}
+        />
+        <InputField
+          disabled={!hasCap}
+          type="number"
+          name="targetCap"
+          label=""
+          style={{ maxWidth: "225px" }}
+        />
+      </div>
+    </>
+  );
+};
+
+export default TargetSize;

src/pages/campaigns/components/campaignForm/index.tsx

@@ -3,7 +3,6 @@ import {
   BSGrid,
   Button,
   Card,
-  Checkbox,
   Form,
   FormLabel,
   Skeleton,
@@ -42,7 +41,7 @@ import PmSelect from "./fields/roles/PMSelect";
 import ResearcherSelect from "./fields/roles/ResearcherSelect";
 import TlSelect from "./fields/roles/TLSelect";
 import { SurveyButton } from "./SurveyButton";
-import { useState } from "react";
+import TargetSize from "./fields/TargetSize";
 
 interface FormProps {
   dossier?: GetDossiersByCampaignApiResponse;
@@ -96,7 +95,6 @@ const CampaignForm = (props: FormProps) => (
 );
 
 const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => {
-  const [testerCapState, setTesterCapState] = useState(false);
   return (
     <FormProvider dossier={dossier} isEdit={isEdit} duplicate={duplicate}>
       <FullGrid>
@@ -268,44 +266,7 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => {
             >
               <Card className="aq-mb-4" title="Who are we testing with?">
                 <FieldWrapper>
-                  <div>
-                    <Title size="s" className="aq-mb-2">
-                      Set the target
-                    </Title>
-                    <div>
-                      <InputField
-                        type="number"
-                        name="targetSize"
-                        label="Number of participants"
-                        style={{ maxWidth: "225px" }}
-                      />
-                    </div>
-                  </div>
-                  <div>
-                    <Title size="s" className="q-mb-2">
-                      Set the maximum candidates capacity
-                    </Title>
-                    <div
-                      style={{
-                        marginTop: "20px",
-                        display: "flex",
-                        flexDirection: "row",
-                      }}
-                    >
-                      <Checkbox
-                        name="checkboxCap"
-                        id="checkboxCap"
-                        onChange={(e) => setTesterCapState(e.target.checked)}
-                      />
-                      <InputField
-                        disabled={!testerCapState}
-                        type="number"
-                        name="testerCap"
-                        label="Limit the number of participants"
-                        style={{ maxWidth: "225px" }}
-                      />
-                    </div>
-                  </div>
+                  <TargetSize />
                 </FieldWrapper>
                 <FieldWrapper>
                   <CountrySelect />