Add province criteria

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/campaigns/components/campaignForm/FormProvider.tsx

@@ -52,7 +52,6 @@ export interface NewCampaignValues {
   targetNotes?: string;
   targetSize?: string;
   genderRequirements?: {
-    customerChoice: string;
     options: number[];
   };
   ageRequirements?: {
@@ -65,6 +64,7 @@ export interface NewCampaignValues {
   productType?: string;
   notes?: string;
   cuf?: { id: string; value: string[] }[];
+  provinces?: string[];
 }
 
 const useGetInitialCufCriteria = ({
@@ -178,7 +178,6 @@ const FormProvider = ({
     productType: dossier?.productType?.id.toString() || "",
     notes: dossier?.notes || "",
     genderRequirements: {
-      customerChoice: dossier?.target?.genderQuote || "",
       options: dossier?.visibilityCriteria?.gender || [],
     },
     ageRequirements:
@@ -187,6 +186,7 @@ const FormProvider = ({
         max: r.max,
       })) || [],
     cuf: initialCufCriteria,
+    provinces: dossier?.visibilityCriteria?.province || [],
   };
 
   const validationSchema = yup.object({
@@ -242,7 +242,6 @@ const FormProvider = ({
         }
       ),
     genderRequirements: yup.object().shape({
-      customerChoice: yup.string(),
       options: yup.array().of(yup.number().oneOf([-1, 0, 1, 2])),
     }),
     countries: yup.array(),
@@ -277,6 +276,7 @@ const FormProvider = ({
           ),
       })
     ),
+    provinces: yup.array().of(yup.string()),
   });
   return (
     <Formik
@@ -326,7 +326,6 @@ const FormProvider = ({
                 ? parseInt(values.targetSize)
                 : undefined,
               cap: !!values.targetCap ? parseInt(values.targetCap) : -1, // -1 is passed for no tester cap required
-              genderQuote: values.genderRequirements?.customerChoice ?? "",
             },
             browsers: values.browsersList?.map((browser) =>
               parseInt(browser, 10)
@@ -368,6 +367,7 @@ const FormProvider = ({
                       max: Number(age.max),
                     }))
                 : [],
+              provinces: values.provinces || [],
             },
           };
 

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

@@ -44,6 +44,7 @@ const AgeRequirements = () => {
                         id={field.name}
                         type="number"
                         extra={{
+                          min: 14,
                           max: age.max || undefined,
                           onBlur: () => form.setFieldTouched(field.name),
                         }}
@@ -62,7 +63,7 @@ const AgeRequirements = () => {
                         id={field.name}
                         type="number"
                         extra={{
-                          min: age.min || undefined,
+                          min: age.min || 14,
                           onBlur: () => form.setFieldTouched(field.name),
                         }}
                         value={field.value || ""}

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

@@ -2,7 +2,6 @@ import {
   Checkbox,
   FormikField,
   FormLabel,
-  TextareaField,
 } from "@appquality/appquality-design-system";
 import { FieldProps, useFormikContext } from "formik";
 import styled from "styled-components";
@@ -31,7 +30,7 @@ const GenderRequirements = () => {
         field,
         form,
       }: FieldProps<NewCampaignValues["genderRequirements"]>) => {
-        const value = field.value || { customerChoice: "", options: [] };
+        const value = field.value || { options: [] as number[] };
         return (
           <div>
             <FormLabel htmlFor={field.name} label={""} />
@@ -53,12 +52,6 @@ const GenderRequirements = () => {
                 />
               ))}
             </CheckboxGrid>
-            <TextareaField
-              {...getFieldProps(`${field.name}.customerChoice`)}
-              label="Customer requirements:"
-              resize="vertical"
-              placeholder="Specify any custom gender requirements here"
-            />
           </div>
         );
       }}

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

@@ -0,0 +1,42 @@
+import {
+  ErrorMessage,
+  FormGroup,
+  Select,
+} from "@appquality/appquality-design-system";
+import provinces from "comuni-province-regioni/lib/province";
+import { Field as FormikField, FieldProps } from "formik";
+import { NewCampaignValues } from "../FormProvider";
+
+const ProvinceSelect = () => {
+  return (
+    <FormikField name="provinces">
+      {({ field, form }: FieldProps<NewCampaignValues["provinces"]>) => {
+        return (
+          <FormGroup>
+            <Select
+              isMulti
+              name={field.name}
+              options={Object.entries(provinces).map(([name, province]) => ({
+                label: name,
+                value: province,
+              }))}
+              onBlur={field.onBlur}
+              onChange={(value) => {
+                form.setFieldValue(
+                  field.name,
+                  value.map((v: SelectOptionType) => v.value),
+                  true
+                );
+              }}
+              label={"Provinces"}
+              value={field.value?.map((p) => ({ value: p, label: "" })) || []}
+            />
+            <ErrorMessage name={field.name} />
+          </FormGroup>
+        );
+      }}
+    </FormikField>
+  );
+};
+
+export default ProvinceSelect;

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

@@ -34,6 +34,7 @@ import GenderRequirements from "./fields/GenderRequirements";
 import InputField from "./fields/InputField";
 import LanguageSelect from "./fields/LanguagesSelect";
 import ProductType from "./fields/ProductTypeSelect";
+import ProvinceSelect from "./fields/ProvinceSelect";
 import CsmSelect from "./fields/roles/CsmSelect";
 import PmSelect from "./fields/roles/PMSelect";
 import ResearcherSelect from "./fields/roles/ResearcherSelect";
@@ -274,6 +275,9 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => {
                 </FieldWrapper>
                 <FieldWrapper>
                   <CountrySelect />
+                  <div>
+                    <ProvinceSelect />
+                  </div>
                   <LanguageSelect />
                 </FieldWrapper>
                 <FieldWrapper>
@@ -291,9 +295,6 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => {
                   </div>
                 </FieldWrapper>
                 <CufCriteria />
-                <Title size="s" className="aq-mb-2 aq-pt-4">
-                  Add additional requirements or notes
-                </Title>
                 <FieldWrapper>
                   <div>
                     <Title size="s" className="aq-mb-2 aq-pt-4">
@@ -305,6 +306,8 @@ const CampaignFormContent = ({ dossier, isEdit, duplicate }: FormProps) => {
                       resize="vertical"
                       placeholder="The target has to..."
                     />
+                  </div>
+                  <div style={{ alignSelf: "flex-end", justifySelf: "center" }}>
                     {dossier && dossier.id && (
                       <SurveyButton campaign_id={dossier.id.toString()} />
                     )}