Merge pull request #346 from AppQuality/UN-2378

feat(UN-2378): media type constraints for autoApprove campaigns in BugForm

Author: sinatragianpaolo

src/App.tsx

@@ -16,6 +16,11 @@ import Page from "./Page";
 
 import isStagingEnvironment from "./features/isStagingEnvironment";
 
+const store = setupStore();
+if (process.env.NODE_ENV !== "production") {
+  (window as any).__store = store;
+}
+
 if (process.env.REACT_APP_GTM_ID) {
   TagManager.initialize({
     gtmId: process.env.REACT_APP_GTM_ID,
@@ -31,7 +36,7 @@ if (process.env.REACT_APP_GTM_ID) {
 function App() {
   const { t } = useTranslation();
   return (
-    <Provider store={setupStore()}>
+    <Provider store={store}>
       <ThemeProvider theme={aqBootstrapTheme}>
         <GlobalStyle />
         <Helmet>

src/locales/en/translation.json

@@ -76,6 +76,12 @@
   "Approved bugs": "Approved bugs",
   "Area is a required field.": "Area is a required field.",
   "As first step to be done, complete your profile with authentic and real data. This is the only way to be selected for the Campaigns and get your reward.": "Enter your details in the Profile section: they are important to be selected for suitable campaign and to request the payments.",
+  "At least one image is required": {
+    "BUGFORM_UPLOAD_ERROR_IMAGEREQUIRED": "At least one image is required"
+  },
+  "At least one video is required": {
+    "BUGFORM_UPLOAD_ERROR_VIDEOREQUIRED": "At least one video is required"
+  },
   "Attribution date": "Attribution date",
   "Available booty": "Available booty",
   "Available tags \n<a> - Link to help article for fiscal type": {
@@ -555,6 +561,9 @@
     "BUGFORM_UPLOAD_TXT": "Upload at least {{num}} media",
     "BUGFORM_UPLOAD_TXT_plural": "Upload at least {{num}} media"
   },
+  "Upload at least {{num}} files, including one video and one image (both are required)": {
+    "BUGFORM_UPLOAD_TXT_VIDEO_IMAGE": "Upload at least {{num}} files, including one video and one image (both are required)"
+  },
   "Uploaded Bugs": "Uploaded Bugs",
   "User mail validation": {
     "An Email has been sent to the provided address": "An Email has been sent to the provided address"

src/locales/es/translation.json

@@ -76,6 +76,12 @@
   "Approved bugs": "Bugs aprobados",
   "Area is a required field.": "El área / La esfera es un campo obligatorio",
   "As first step to be done, complete your profile with authentic and real data. This is the only way to be selected for the Campaigns and get your reward.": "Añade todos tus datos en la sección Perfil: los necesitaremos para seleccionarte cuando haya una campaña adecuada y para que puedas solicitar los pagos.",
+  "At least one image is required": {
+    "BUGFORM_UPLOAD_ERROR_IMAGEREQUIRED": "Se requiere al menos una imagen"
+  },
+  "At least one video is required": {
+    "BUGFORM_UPLOAD_ERROR_VIDEOREQUIRED": "Se requiere al menos un video"
+  },
   "Attribution date": "Fecha de atribución",
   "Available booty": "Saldo Disponible",
   "Available tags \n<a> - Link to help article for fiscal type": {
@@ -555,6 +561,9 @@
     "BUGFORM_UPLOAD_TXT": "Sube al menos {{num}} archivo",
     "BUGFORM_UPLOAD_TXT_plural": "Sube al menos {{num}} archivos"
   },
+  "Upload at least {{num}} files, including one video and one image (both are required)": {
+    "BUGFORM_UPLOAD_TXT_VIDEO_IMAGE": "Sube al menos {{num}} archivos, incluyendo un video y una imagen (ambos son obligatorios)"
+  },
   "Uploaded Bugs": "Bugs Cargados",
   "User mail validation": {
     "An Email has been sent to the provided address": "Se ha enviado un correo electrónico a la dirección proporcionada"

src/locales/fr/translation.json

@@ -76,6 +76,12 @@
   "Approved bugs": "Bugs approuvés",
   "Area is a required field.": "Le domaine est un champ obligatoire.",
   "As first step to be done, complete your profile with authentic and real data. This is the only way to be selected for the Campaigns and get your reward.": "Indiquez vos coordonnées dans la section Profil : elles sont importantes pour être sélectionné pour des campagnes adaptées et pour demander les paiements.",
+  "At least one image is required": {
+    "BUGFORM_UPLOAD_ERROR_IMAGEREQUIRED": "Au moins une image est requise"
+  },
+  "At least one video is required": {
+    "BUGFORM_UPLOAD_ERROR_VIDEOREQUIRED": "Au moins une vidéo est requise"
+  },
   "Attribution date": "Date d'attribution",
   "Available booty": "Butin disponible",
   "Available tags \n<a> - Link to help article for fiscal type": {
@@ -338,7 +344,7 @@
   "Manufacturer: <bold>{{manufacturer}}</bold>": "Fabricant : <bold>{{manufacturer}}</bold>",
   "Mark as completed": "",
   "Media field must have at least {{num}} items": {
-    "BUGFORM_UPLOAD_ERROR_MINIMUMFILES": "Vous devez télécharger au moins {{num}} médias pour cette campagne",
+    "BUGFORM_UPLOAD_ERROR_MINIMUMFILES": "Vous devez télécharger au moins {{num}} média pour cette campagne",
     "BUGFORM_UPLOAD_ERROR_MINIMUMFILES_plural": "Vous devez télécharger au moins {{num}} médias pour cette campagne"
   },
   "Messages for you": "Messages pour vous",
@@ -552,9 +558,12 @@
   "USECASE_MEDIA_DROPZONE_MISSING_PARAMS": "Informations de campagne ou de tâche manquantes.",
   "Update your device list": "Mettez à jour votre liste d'appareils",
   "Upload a minimum number of {{num}} files": {
-    "BUGFORM_UPLOAD_TXT": "Téléchargez au moins {{num}} médias",
+    "BUGFORM_UPLOAD_TXT": "Téléchargez au moins {{num}} média",
     "BUGFORM_UPLOAD_TXT_plural": "Téléchargez au moins {{num}} médias"
   },
+  "Upload at least {{num}} files, including one video and one image (both are required)": {
+    "BUGFORM_UPLOAD_TXT_VIDEO_IMAGE": "Téléchargez au moins {{num}} fichiers, dont une vidéo et une image (les deux sont obligatoires)"
+  },
   "Uploaded Bugs": "Bugs téléchargés",
   "User mail validation": {
     "An Email has been sent to the provided address": "Un email a été envoyé à l'adresse fournie"

src/locales/it/translation.json

@@ -76,6 +76,12 @@
   "Approved bugs": "Bug approvati",
   "Area is a required field.": "L'area è un campo obbligatorio",
   "As first step to be done, complete your profile with authentic and real data. This is the only way to be selected for the Campaigns and get your reward.": "Inserisci tutti i tuoi dati nella sezione Profilo: servirà a noi per selezionarti quando c'è una campagna adatta e a te per richiedere il pagamento.",
+  "At least one image is required": {
+    "BUGFORM_UPLOAD_ERROR_IMAGEREQUIRED": "È richiesta almeno un'immagine"
+  },
+  "At least one video is required": {
+    "BUGFORM_UPLOAD_ERROR_VIDEOREQUIRED": "È richiesto almeno un video"
+  },
   "Attribution date": "Data di attribuzione",
   "Available booty": "Guadagni disponibili",
   "Available tags \n<a> - Link to help article for fiscal type": {
@@ -555,6 +561,9 @@
     "BUGFORM_UPLOAD_TXT": "Carica almeno {{num}} file",
     "BUGFORM_UPLOAD_TXT_plural": "Carica almeno {{num}} file"
   },
+  "Upload at least {{num}} files, including one video and one image (both are required)": {
+    "BUGFORM_UPLOAD_TXT_VIDEO_IMAGE": "Carica almeno {{num}} file, inclusi un video e un'immagine (entrambi obbligatori)"
+  },
   "Uploaded Bugs": "Bug caricati",
   "User mail validation": {
     "An Email has been sent to the provided address": "Un'email è stata inviata all'indirizzo fornito"

src/pages/BugForm/BugFormContainer.tsx

@@ -94,6 +94,9 @@ export const BugFormContainer = () => {
     );
   }
 
+  const needsVideoAndImage =
+    data?.autoApprove === 1 && (data?.minimumMedia || 0) > 1;
+
   const validationSchema = {
     title: yup.string().required(t("This is a required field")),
     severity: yup.string().required(t("This is a required field")),
@@ -115,17 +118,45 @@ export const BugFormContainer = () => {
       .required(t("BUGFORM_BUGDTLS_TYPE_ERROR", "This is a required field")),
     expected: yup.string().required(t("This is a required field")),
     current: yup.string().required(t("This is a required field")),
-    media: yup.array().min(
-      data?.minimumMedia || 0,
-      t(
-        "Media field must have at least {{num}} items:::BUGFORM_UPLOAD_ERROR_MINIMUMFILES",
-        {
-          defaultValue: "Media field must have at least {{num}} items",
-          num: data?.minimumMedia || 0,
-          count: data?.minimumMedia,
+    media: yup
+      .array()
+      .min(
+        data?.minimumMedia || 0,
+        t(
+          "Media field must have at least {{num}} items:::BUGFORM_UPLOAD_ERROR_MINIMUMFILES",
+          {
+            defaultValue: "Media field must have at least {{num}} items",
+            num: data?.minimumMedia || 0,
+            count: data?.minimumMedia,
+          }
+        )
+      )
+      .test(
+        "has-video",
+        t(
+          "At least one video is required:::BUGFORM_UPLOAD_ERROR_VIDEOREQUIRED",
+          { defaultValue: "At least one video is required" }
+        ),
+        () => {
+          if (!needsVideoAndImage) return true;
+          return mediaList.some(
+            (m) => m.status === "success" && m.fileType === "video"
+          );
         }
       )
-    ),
+      .test(
+        "has-image",
+        t(
+          "At least one image is required:::BUGFORM_UPLOAD_ERROR_IMAGEREQUIRED",
+          { defaultValue: "At least one image is required" }
+        ),
+        () => {
+          if (!needsVideoAndImage) return true;
+          return mediaList.some(
+            (m) => m.status === "success" && m.fileType === "image"
+          );
+        }
+      ),
     additional: yup.object(),
   };
   if (data.titleRule) {

src/pages/BugForm/FileUploader/index.tsx

@@ -24,20 +24,27 @@ export const FileUploader = () => {
   const { data } = useCampaignData();
   const { t } = useTranslation();
 
+  const needsVideoAndImage =
+    data?.autoApprove === 1 && (data?.minimumMedia || 0) > 1;
+
   return (
     <Card
       title={t("BUGFORM_UPLOAD_TITLE", { defaultValue: "Uploading media" })}
     >
       <Text className="aq-text-primaryVariant">
-        <Trans
-          i18nKey="Upload a minimum number of {{num}} files:::BUGFORM_UPLOAD_TXT"
-          values={{
+        {needsVideoAndImage ? (
+          <Trans
+            i18nKey="Upload at least {{num}} files, including one video and one image (both are required):::BUGFORM_UPLOAD_TXT_VIDEO_IMAGE"
+            values={{ num: data?.minimumMedia || 0 }}
+            defaults="Upload at least {{num}} files, including one video and one image (both are required)"
+          />
+        ) : (
+          t("Upload a minimum number of {{num}} files:::BUGFORM_UPLOAD_TXT", {
+            defaultValue: "Upload at least {{num}} media",
             num: data?.minimumMedia || 0,
-          }}
-          tOptions={{ count: data?.minimumMedia }}
-          count={data?.minimumMedia}
-          defaults={"Upload a minimum number of {{num}} files"}
-        />
+            count: data?.minimumMedia,
+          })
+        )}
       </Text>
       <StyledFilesTypes className="aq-mb-3">
         <FileType className="file-type-margin" type="image" />