diff --git a/src/pages/campaigns/components/campaignForm/FormProvider.tsx b/src/pages/campaigns/components/campaignForm/FormProvider.tsx index ca725288..c74c4904 100644 --- a/src/pages/campaigns/components/campaignForm/FormProvider.tsx +++ b/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) diff --git a/src/pages/campaigns/components/campaignForm/fields/TargetSize.tsx b/src/pages/campaigns/components/campaignForm/fields/TargetSize.tsx new file mode 100644 index 00000000..afa1e5f0 --- /dev/null +++ b/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(); + const [hasCap, setHasCap] = useState(!!targetCap); + return ( + <> +
+ + Set the target + +
+ +
+
+
+ + Set the maximum candidates capacity + + + { + setHasCap(e.target.checked); + if (!e.target.checked) setFieldValue("targetCap", ""); + }} + /> + +
+ + ); +}; + +export default TargetSize; diff --git a/src/pages/campaigns/components/campaignForm/index.tsx b/src/pages/campaigns/components/campaignForm/index.tsx index 8262c3b8..c0146940 100644 --- a/src/pages/campaigns/components/campaignForm/index.tsx +++ b/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 ( @@ -268,44 +266,7 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => { > -
- - Set the target - -
- -
-
-
- - Set the maximum candidates capacity - -
- setTesterCapState(e.target.checked)} - /> - -
-
+