diff --git a/src/pages/campaigns/components/campaignForm/FormProvider.tsx b/src/pages/campaigns/components/campaignForm/FormProvider.tsx index 83abcd68..79ac5b66 100644 --- a/src/pages/campaigns/components/campaignForm/FormProvider.tsx +++ b/src/pages/campaigns/components/campaignForm/FormProvider.tsx @@ -55,6 +55,10 @@ export interface NewCampaignValues { customerChoice: string; options: number[]; }; + ageRequirements?: { + min: number; + max: number; + }[]; targetCap?: string; checkboxCap?: boolean; browsersList?: string[]; @@ -177,6 +181,10 @@ const FormProvider = ({ customerChoice: dossier?.target?.genderQuote || "", options: dossier?.visibilityCriteria?.gender || [], }, + ageRequirements: dossier?.visibilityCriteria?.ageRanges?.map((r) => ({ + min: r.min, + max: r.max, + })) || [{ min: 0, max: 0 }], cuf: initialCufCriteria, }; @@ -249,6 +257,25 @@ const FormProvider = ({ value: yup.array().min(1, "Almeno un elemento รจ richiesto"), }) ), + ageRequirements: yup.array().of( + yup.object().shape({ + min: yup.number().typeError("Min age must be a number").nullable(), + max: yup + .number() + .typeError("Max age must be a number") + .nullable() + .test( + "is-greater-or-equal", + "Max age must be greater than min age", + function (value) { + const { min } = this.parent; + if (min === null || min === "" || value === null || !value) + return true; + return value >= min; + } + ), + }) + ), }); return ( + age.min !== null && + age.min !== undefined && + age.max !== null && + age.max !== undefined + ) + .map((age) => ({ + min: Number(age.min), + max: Number(age.max), + })) + : [], }, }; diff --git a/src/pages/campaigns/components/campaignForm/fields/AgeRequirements.tsx b/src/pages/campaigns/components/campaignForm/fields/AgeRequirements.tsx new file mode 100644 index 00000000..0b56338c --- /dev/null +++ b/src/pages/campaigns/components/campaignForm/fields/AgeRequirements.tsx @@ -0,0 +1,74 @@ +import { + Button, + FormLabel, + Input, + Text, +} from "@appquality/appquality-design-system"; +import { FieldArray, useFormikContext } from "formik"; +import { NewCampaignValues } from "../FormProvider"; +import { ReactComponent as DeleteIcon } from "src/assets/trash.svg"; +import styled from "styled-components"; + +const StyledRow = styled.div` + display: flex; + gap: ${({ theme }) => theme.grid.sizes[4]}; + align-items: center; + flex-direction: row; + margin-bottom: ${({ theme }) => theme.grid.sizes[3]}; +`; + +const AgeRequirements = () => { + const { values, setFieldValue } = useFormikContext(); + const ageRanges = values.ageRequirements || [{ min: "", max: "" }]; + + const handleChange = (index: number, field: "min" | "max", value: string) => { + const num = value === "" ? "" : Number(value); + const updated = [...ageRanges]; + updated[index] = { ...updated[index], [field]: num }; + setFieldValue("ageRequirements", updated); + }; + + return ( + + {({ remove, push }) => ( + <> + {ageRanges.map((age, index) => ( +
+ + + From + handleChange(index, "min", val)} + placeholder="Min age" + /> + to + handleChange(index, "max", val)} + placeholder="Max age" + /> + + +
+ ))} + + + )} +
+ ); +}; + +export default AgeRequirements; diff --git a/src/pages/campaigns/components/campaignForm/index.tsx b/src/pages/campaigns/components/campaignForm/index.tsx index eab34f09..59703370 100644 --- a/src/pages/campaigns/components/campaignForm/index.tsx +++ b/src/pages/campaigns/components/campaignForm/index.tsx @@ -20,6 +20,7 @@ import { styled } from "styled-components"; import { PhaseSelector } from "../PhaseSelector"; import { CampaignFormContext } from "./campaignFormContext"; import FormOverlay from "./feedbackMessages/FormOverlay"; +import AgeRequirements from "./fields/AgeRequirements"; import BrowsersMultiselect from "./fields/BrowsersMultiselect"; import CountrySelect from "./fields/CountrySelect"; import CufCriteria from "./fields/CufCriteria"; @@ -274,12 +275,20 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => { + +
Gender
+
+ + Age range + + +