Release 2025 06 18

package.json

@@ -19,6 +19,7 @@
     "@zendeskgarden/react-dropdowns": "^8.75.0",
     "@zendeskgarden/react-theming": "^8.75.0",
     "analytics": "^0.8.1",
+    "comuni-province-regioni": "^0.4.3",
     "husky": "^7.0.4",
     "i18n-iso-countries": "^7.11.0",
     "lzutf8": "^0.6.0",

src/pages/agreements/components/AgreementForm.tsx

@@ -95,6 +95,7 @@ const AgreementForm = ({ agreement, onSubmit }: AgreementFormProps) => {
                         field.onChange(e);
                         // if agreement change to not token based, calculate number of tokens based on amount
                         if (e.target.checked === false) {
+                          form.setFieldValue("tokenUnitPrice", 1, true);
                           form.setFieldValue(
                             "tokens",
                             roundNumberTwoDecimals(
@@ -118,6 +119,7 @@ const AgreementForm = ({ agreement, onSubmit }: AgreementFormProps) => {
                   <FormLabel htmlFor={field.name} label="Token Unit Price" />
                   <div className="input-group">
                     <Input
+                      disabled={!isTokenBased}
                       value={field.value}
                       id={field.name}
                       type="number"

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

@@ -13,6 +13,7 @@ import {
 } from "src/services/tryberApi";
 import { useAppDispatch } from "src/store";
 import * as yup from "yup";
+import { useAllFieldsByCuf } from "./fields/CufCriteria";
 import { dateTimeToISO, formatDate, formatTime } from "./formatDate";
 import { getPm, getResearcher, getTl } from "./getAssistantIdByRole";
 
@@ -50,13 +51,48 @@ export interface NewCampaignValues {
   deviceRequirements?: string;
   targetNotes?: string;
   targetSize?: string;
+  genderRequirements?: {
+    options: number[];
+  };
+  ageRequirements?: {
+    min: number;
+    max: number;
+  }[];
   targetCap?: string;
   checkboxCap?: boolean;
   browsersList?: string[];
   productType?: string;
   notes?: string;
+  cuf?: { id: string; value: string[] }[];
+  provinces?: string[];
 }
 
+const useGetInitialCufCriteria = ({
+  dossier,
+}: {
+  dossier: FormProviderInterface["dossier"];
+}) => {
+  const getAllFieldsByCuf = useAllFieldsByCuf();
+  if (!dossier) return [];
+  if (!dossier.visibilityCriteria || !dossier.visibilityCriteria.cuf) {
+    return [];
+  }
+
+  return dossier.visibilityCriteria.cuf.map((cuf) => {
+    const cufFields = getAllFieldsByCuf(cuf.cufId);
+    if (cufFields.every((field) => cuf.cufValueIds.includes(field.id))) {
+      return {
+        id: cuf.cufId.toString(),
+        value: ["-1"],
+      };
+    }
+    return {
+      id: cuf.cufId.toString(),
+      value: cuf.cufValueIds.map((value) => value.toString()),
+    };
+  });
+};
+
 const FormProvider = ({
   children,
   dossier,
@@ -67,10 +103,12 @@ const FormProvider = ({
   const history = useHistory();
   const [postDossiers] = usePostDossiersMutation();
   const [putDossiers] = usePutDossiersByCampaignMutation();
+  const getAllFieldsByCuf = useAllFieldsByCuf();
   const { data, isLoading } = useGetUsersMeQuery({ fields: "id" });
   const { data: devices } = useGetDevicesByDeviceTypeOperatingSystemsQuery({
     deviceType: "all",
   });
+  const initialCufCriteria = useGetInitialCufCriteria({ dossier });
   const selectedTypes = useMemo(() => {
     if (!dossier) return ["Smartphone", "PC"];
 
@@ -139,6 +177,16 @@ const FormProvider = ({
       dossier?.browsers?.map((browser) => browser.id.toString()) || [],
     productType: dossier?.productType?.id.toString() || "",
     notes: dossier?.notes || "",
+    genderRequirements: {
+      options: dossier?.visibilityCriteria?.gender || [],
+    },
+    ageRequirements:
+      dossier?.visibilityCriteria?.ageRanges?.map((r) => ({
+        min: r.min,
+        max: r.max,
+      })) || [],
+    cuf: initialCufCriteria,
+    provinces: dossier?.visibilityCriteria?.province || [],
   };
 
   const validationSchema = yup.object({
@@ -193,10 +241,62 @@ const FormProvider = ({
           return true;
         }
       ),
-    countries: yup.array(),
+    genderRequirements: yup.object().shape({
+      options: yup.array().of(yup.number().oneOf([-1, 0, 1, 2])),
+    }),
+    countries: yup
+      .array()
+      .test(
+        "contry-no-italy-with-provinces",
+        "You cannot select an Italian province if you have chosen another country. Please modify your selection to find available testers",
+        function (value) {
+          const { provinces } = this.parent;
+          if (
+            value &&
+            value?.length > 0 &&
+            provinces.length > 0 &&
+            (value.length > 1 || value[0] !== "IT")
+          )
+            return false;
+          return true;
+        }
+      ),
     languages: yup.array(),
     targetNotes: yup.string(),
     notes: yup.string(),
+    cuf: yup.array().of(
+      yup.object().shape({
+        id: yup
+          .number()
+          .required("CUF ID is required")
+          .min(1, "CUF ID is required"),
+        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")
+          .min(16, "Min age must be at least 16")
+          .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;
+            }
+          ),
+      })
+    ),
+    provinces: yup.array().of(yup.string()),
   });
   return (
     <Formik
@@ -254,6 +354,41 @@ const FormProvider = ({
               ? parseInt(values.productType, 10)
               : undefined,
             notes: values.notes,
+            visibilityCriteria: {
+              gender: values.genderRequirements?.options || [],
+              cuf: values.cuf
+                ? values.cuf.map((cuf) => {
+                    if (cuf.value.includes("-1")) {
+                      return {
+                        cufId: parseInt(cuf.id, 10),
+                        cufValueIds: getAllFieldsByCuf(Number(cuf.id)).map(
+                          (field) => field.id
+                        ),
+                      };
+                    }
+
+                    return {
+                      cufId: Number(cuf.id),
+                      cufValueIds: cuf.value.map((value) => Number(value)),
+                    };
+                  })
+                : [],
+              ageRanges: values.ageRequirements
+                ? values.ageRequirements
+                    .filter(
+                      (age) =>
+                        age.min !== null &&
+                        age.min !== undefined &&
+                        age.max !== null &&
+                        age.max !== undefined
+                    )
+                    .map((age) => ({
+                      min: Number(age.min),
+                      max: Number(age.max),
+                    }))
+                : [],
+              provinces: values.provinces || [],
+            },
           };
 
           if (isEdit) {

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

@@ -0,0 +1,99 @@
+import {
+  Button,
+  ErrorMessage,
+  Input,
+  Text,
+} from "@appquality/appquality-design-system";
+import {
+  Field as FormikField,
+  FieldArray,
+  FieldProps,
+  useFormikContext,
+} from "formik";
+import { ReactComponent as DeleteIcon } from "src/assets/trash.svg";
+import styled from "styled-components";
+import { NewCampaignValues } from "../FormProvider";
+
+const StyledRow = styled.div`
+  .container {
+    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, errors, touched } = useFormikContext<NewCampaignValues>();
+  const ageRanges: NonNullable<NewCampaignValues["ageRequirements"]> =
+    values.ageRequirements || [];
+
+  return (
+    <FieldArray name="ageRequirements">
+      {({ remove, push }) => (
+        <>
+          {ageRanges.map((age, index) => (
+            <StyledRow key={index}>
+              <div className="container">
+                <FormikField name={`ageRequirements[${index}].min`}>
+                  {({ form, field }: FieldProps) => (
+                    <>
+                      <Text style={{ fontWeight: "bold" }}>From</Text>
+                      <Input
+                        id={field.name}
+                        type="number"
+                        extra={{
+                          min: 16,
+                          max: age.max || undefined,
+                          onBlur: () => form.setFieldTouched(field.name),
+                        }}
+                        value={field.value || ""}
+                        onChange={(val) => form.setFieldValue(field.name, val)}
+                        placeholder="Min"
+                      />
+                    </>
+                  )}
+                </FormikField>
+                <FormikField name={`ageRequirements[${index}].max`}>
+                  {({ form, field }: FieldProps) => (
+                    <>
+                      <Text style={{ fontWeight: "bold" }}>to</Text>
+                      <Input
+                        id={field.name}
+                        type="number"
+                        extra={{
+                          min: age.min || 14,
+                          onBlur: () => form.setFieldTouched(field.name),
+                        }}
+                        value={field.value || ""}
+                        onChange={(val) => form.setFieldValue(field.name, val)}
+                        placeholder="Max"
+                      />
+                    </>
+                  )}
+                </FormikField>
+                <Button size="sm" kind="danger" onClick={() => remove(index)}>
+                  <DeleteIcon />
+                </Button>
+              </div>
+              <div>
+                <ErrorMessage name={`ageRequirements[${index}].min`} />
+                <ErrorMessage name={`ageRequirements[${index}].max`} />
+              </div>
+            </StyledRow>
+          ))}
+          <Button
+            size="sm"
+            kind="secondary"
+            onClick={() => push({ min: "", max: "" })}
+          >
+            + Add age range
+          </Button>
+        </>
+      )}
+    </FieldArray>
+  );
+};
+
+export default AgeRequirements;

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

@@ -4,7 +4,7 @@ import {
   FormGroup,
   FormLabel,
 } from "@appquality/appquality-design-system";
-import { FieldProps, Field as FormikField, useFormikContext } from "formik";
+import { Field as FormikField, FieldProps, useFormikContext } from "formik";
 import countryList from "i18n-iso-countries";
 import { useCallback, useMemo } from "react";
 import { NewCampaignValues } from "../FormProvider";
@@ -71,11 +71,12 @@ const CountrySelect = () => {
 
   return (
     <FormikField name="countries">
-      {({ field }: FieldProps<NewCampaignValues["countries"]>) => (
+      {({ field, form }: FieldProps<NewCampaignValues["countries"]>) => (
         <FormGroup>
           <FormLabel htmlFor={field.name} label="Countries" />
           <Dropdown
             isMulti
+            onBlur={() => form.setFieldTouched(field.name, true)}
             name={field.name}
             id={field.name}
             options={getOptions()}