Improve Pendo trackability and fix XPS validation issues

src/locales/en/translation.json

@@ -126,7 +126,9 @@
   "__EXPRESS_3_WIZARD_STEP_WHO_FIELD_LITERACY_ALL_HINT": "Testers equally divided by literacy level",
   "__EXPRESS_3_WIZARD_STEP_WHO_FIELD_LITERACY_LABEL": "Digital literacy level",
   "__EXPRESS_3_WIZARD_STEP_WHO_GENDER_FEMALE": "Female",
+  "__EXPRESS_3_WIZARD_STEP_WHO_GENDER_FEMALE_PLURAL": "women",
   "__EXPRESS_3_WIZARD_STEP_WHO_GENDER_MALE": "Male",
+  "__EXPRESS_3_WIZARD_STEP_WHO_GENDER_MALE_PLURAL": "men",
   "__EXPRESS_3_WIZARD_STEP_WHO_LABEL_SELECTION_CRITERIA": "Specify selection criteria for the 6 users who will browse your product",
   "__EXPRESS_3_WIZARD_STEP_WHO_LITERACY_BEGINNER": "Beginner",
   "__EXPRESS_3_WIZARD_STEP_WHO_LITERACY_BEGINNER_DESCRIPTION": "This tester has no autonomy, needs help from family and friens",
@@ -254,6 +256,7 @@
   "__EXPRESS_WIZARD_STEP_WHERE_DEFAULT_BROWSER_DESCRIPTION": "We guarantee you the right balance between the devices type and browsers based on market share and usage",
   "__EXPRESS_WIZARD_STEP_WHERE_DEFAULT_BROWSER_TITLE": "Which browser will be used? we'll take care of it",
   "__EXPRESS_WIZARD_STEP_WHERE_DESCRIPTION": "Where is the campaign going to be executed?",
+  "__EXPRESS_WIZARD_STEP_WHERE_DEVICE_OPERATING_SYSTEM_ERROR": "You have to select one operating system",
   "__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_DESKTOP": "Desktop",
   "__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_ERROR": "You have to select at least one device type",
   "__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_SMARTPHONE": "Smartphone",

src/locales/it/translation.json

@@ -105,7 +105,7 @@
   "__EXPRESS_3_WIZARD_STEP_HOW_USE_CASE_MODAL_TITLE_FIELD_TITLE": "Titolo user task",
   "__EXPRESS_3_WIZARD_STEP_HOW_USE_CASE_MODAL_TITLE_REQUIRED": "Campo obbligatorio",
   "__EXPRESS_3_WIZARD_STEP_HOW_USE_CASE_MODAL_USE_CASE_LABEL": "User Task",
-  "__EXPRESS_3_WIZARD_STEP_RECAP_WHO_AGE_RANGE_TEXT": "Hanno un’età compresa fra i <1><0>{{age_range_start}}</0> e i <2>{{age_range_end}}</2></1> anni.",
+  "__EXPRESS_3_WIZARD_STEP_RECAP_WHO_AGE_RANGE_TEXT": "Hanno un'età compresa fra i <1><0>{{age_range_start}}</0> e i <2>{{age_range_end}}</2></1> anni.",
   "__EXPRESS_3_WIZARD_STEP_RECAP_WHO_AGE_RANGE_TEXT_ALL": "Sono <1>equamente distribuiti</1> per <3>età</3>.",
   "__EXPRESS_3_WIZARD_STEP_RECAP_WHO_DIGITALIZATION_TEXT_ALL": "Sono <1>equamente distribuiti</1> per <4>alfabetizzazione digitale</4>.",
   "__EXPRESS_3_WIZARD_STEP_RECAP_WHO_DIGITALIZATION_TEXT_BEGINNER": "Hanno un <1>livello basso</1> di <4>alfabetizzazione digitale</4>.",
@@ -126,7 +126,9 @@
   "__EXPRESS_3_WIZARD_STEP_WHO_FIELD_LITERACY_ALL_HINT": "Gruppo eterogeneo per alfabetizzazione digitale",
   "__EXPRESS_3_WIZARD_STEP_WHO_FIELD_LITERACY_LABEL": "Livello di alfabetizzazione digitale",
   "__EXPRESS_3_WIZARD_STEP_WHO_GENDER_FEMALE": "Donna",
+  "__EXPRESS_3_WIZARD_STEP_WHO_GENDER_FEMALE_PLURAL": "donne",
   "__EXPRESS_3_WIZARD_STEP_WHO_GENDER_MALE": "Uomo",
+  "__EXPRESS_3_WIZARD_STEP_WHO_GENDER_MALE_PLURAL": "uomini",
   "__EXPRESS_3_WIZARD_STEP_WHO_LABEL_SELECTION_CRITERIA": "Specifica i criteri di selezione per i 6 utenti che esplorano il tuo prodotto.",
   "__EXPRESS_3_WIZARD_STEP_WHO_LITERACY_BEGINNER": "Principiante",
   "__EXPRESS_3_WIZARD_STEP_WHO_LITERACY_BEGINNER_DESCRIPTION": "Non ha autonomia, si fa aiutare da parenti e amici",
@@ -254,6 +256,7 @@
   "__EXPRESS_WIZARD_STEP_WHERE_DEFAULT_BROWSER_DESCRIPTION": "Ti garantiamo il giusto equilibrio tra le tipologie di dispositivi e browser in base alle statistiche di mercato e alla nostra esperienza.",
   "__EXPRESS_WIZARD_STEP_WHERE_DEFAULT_BROWSER_TITLE": "Scelta dei browser? Ci pensiamo noi.",
   "__EXPRESS_WIZARD_STEP_WHERE_DESCRIPTION": "I dispositivi del test",
+  "__EXPRESS_WIZARD_STEP_WHERE_DEVICE_OPERATING_SYSTEM_ERROR": "Seleziona un sistema operativo",
   "__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_DESKTOP": "Desktop",
   "__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_ERROR": "Seleziona almeno un dispositivo",
   "__EXPRESS_WIZARD_STEP_WHERE_DEVICE_TYPE_SMARTPHONE": "Smartphone",

src/pages/Campaign/ReportRow.tsx

@@ -133,6 +133,9 @@ export const ReportRow = ({
 
               <SpecialCard.Footer direction="column" justifyContent="center">
                 <Button
+                  className={`report-btn report-btn-${
+                    report.file_type?.type === 'link' ? 'link' : 'download'
+                  } report-btn-${report.file_type?.type ?? ''}`}
                   isPill
                   isStretched
                   onClick={() => {

src/pages/ExpressWizard/index.tsx

@@ -315,7 +315,7 @@ export const ExpressWizardContainer = () => {
     };
 
     // eslint-disable-next-line consistent-return
-    const wordpressHandle = async (cp: Campaign, next: any) => {
+    const wordpressHandle = async (cp: Campaign) => {
       try {
         // Post on webhook WordPress axios call
         if (!values.use_cases) {
@@ -325,9 +325,9 @@ export const ExpressWizardContainer = () => {
         await createPages(cp.id);
         await createCrons(cp.id);
         await createTasks(cp.id);
-        next(null, cp);
+        return [cp];
       } catch (error) {
-        next(null, cp); // Skip error handling
+        return null; // Skip error handling
       }
     };
 

src/pages/ExpressWizard/steps/express-1/whereApp.tsx

@@ -228,6 +228,16 @@ export const WhereAppStep = (props: FormikProps<WizardModel>) => {
             )}
           </Fieldset>
         </WizardCol>
+        <WizardCol xs={12}>
+          {(errors.isIOS || errors.isAndroid) && (
+            <Message
+              validation="error"
+              style={{ marginTop: globalTheme.space.sm }}
+            >
+              {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_OPERATING_SYSTEM_ERROR')}
+            </Message>
+          )}
+        </WizardCol>
       </StyledRow>
     </ContainerCard>
   );

src/pages/ExpressWizard/steps/express-1/whereWeb.tsx

@@ -290,8 +290,16 @@ export const WhereWebStep = (props: FormikProps<WizardModel>) => {
 export const WhereStepValidationSchema = Yup.object().shape(
   {
     // Where APP STEP
-    isIOS: Yup.bool(),
-    isAndroid: Yup.bool(),
+    isIOS: Yup.bool().when(['isAndroid', 'product_type'], {
+      is: (isAndroid: boolean, product_type: string) =>
+        !isAndroid && product_type === 'mobileapp',
+      then: Yup.bool().oneOf([true], 'Operating system is required'),
+    }),
+    isAndroid: Yup.bool().when(['isIOS', 'product_type'], {
+      is: (isIOS: boolean, product_type: string) =>
+        !isIOS && product_type === 'mobileapp',
+      then: Yup.bool().oneOf([true], 'Operating system is required'),
+    }),
     iOSLink: Yup.string().url().when('isIOS', {
       is: true,
       then: Yup.string().url().required(),
@@ -331,5 +339,8 @@ export const WhereStepValidationSchema = Yup.object().shape(
     ['withTablet', 'withDesktop'],
     ['withSmartphone', 'withDesktop'],
     ['withSmartphone', 'withTablet'],
+    ['isIOS', 'product_type'],
+    ['isAndroid', 'product_type'],
+    ['isIOS', 'isAndroid'],
   ]
 );

src/pages/ExpressWizard/steps/express-2/whereApp.tsx

@@ -228,6 +228,16 @@ export const WhereAppStep = (props: FormikProps<WizardModel>) => {
             )}
           </Fieldset>
         </WizardCol>
+        <WizardCol xs={12}>
+          {(errors.isIOS || errors.isAndroid) && (
+            <Message
+              validation="error"
+              style={{ marginTop: globalTheme.space.sm }}
+            >
+              {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_OPERATING_SYSTEM_ERROR')}
+            </Message>
+          )}
+        </WizardCol>
       </StyledRow>
     </ContainerCard>
   );

src/pages/ExpressWizard/steps/express-2/whereWeb.tsx

@@ -290,8 +290,16 @@ export const WhereWebStep = (props: FormikProps<WizardModel>) => {
 export const WhereStepValidationSchema = Yup.object().shape(
   {
     // Where APP STEP
-    isIOS: Yup.bool(),
-    isAndroid: Yup.bool(),
+    isIOS: Yup.bool().when(['isAndroid', 'product_type'], {
+      is: (isAndroid: boolean, product_type: string) =>
+        !isAndroid && product_type === 'mobileapp',
+      then: Yup.bool().oneOf([true], 'Operating system is required'),
+    }),
+    isAndroid: Yup.bool().when(['isIOS', 'product_type'], {
+      is: (isIOS: boolean, product_type: string) =>
+        !isIOS && product_type === 'mobileapp',
+      then: Yup.bool().oneOf([true], 'Operating system is required'),
+    }),
     iOSLink: Yup.string().url().when('isIOS', {
       is: true,
       then: Yup.string().url().required(),
@@ -331,5 +339,8 @@ export const WhereStepValidationSchema = Yup.object().shape(
     ['withTablet', 'withDesktop'],
     ['withSmartphone', 'withDesktop'],
     ['withSmartphone', 'withTablet'],
+    ['isIOS', 'product_type'],
+    ['isAndroid', 'product_type'],
+    ['isIOS', 'isAndroid'],
   ]
 );

src/pages/ExpressWizard/steps/express-3/confirm/ageRange.tsx

@@ -19,10 +19,10 @@ export const AgeRange = (props: FormikProps<WizardModel>) => {
 
   return range.length ? (
     <Trans i18nKey="__EXPRESS_3_WIZARD_STEP_RECAP_WHO_AGE_RANGE_TEXT">
-      Are aged between{' '}
+      Are aged between
       <Span isBold>
         {{ age_range_start: range[0] }} and {{ age_range_end: range[1] }}
-      </Span>{' '}
+      </Span>
       years.
     </Trans>
   ) : null;

src/pages/ExpressWizard/steps/express-3/confirm/gender.tsx

@@ -1,9 +1,10 @@
 import { Span } from '@appquality/unguess-design-system';
 import { FormikProps } from 'formik';
-import { Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
 
 export const Gender = (props: FormikProps<WizardModel>) => {
+  const { t } = useTranslation();
   const { values } = props;
   const { gender } = values;
 
@@ -15,9 +16,14 @@ export const Gender = (props: FormikProps<WizardModel>) => {
       </Trans>
     );
 
+  const translatedGender =
+    gender === 'male'
+      ? t('__EXPRESS_3_WIZARD_STEP_WHO_GENDER_MALE_PLURAL')
+      : t('__EXPRESS_3_WIZARD_STEP_WHO_GENDER_FEMALE_PLURAL');
+
   return (
     <Trans i18nKey="__EXPRESS_3_WIZARD_STEP_RECAP_WHO_GENDER_TEXT">
-      Are <Span isBold>{{ gender }}</Span>.
+      Are <Span isBold>{{ gender: translatedGender }}</Span>.
     </Trans>
   );
 };

src/pages/ExpressWizard/steps/express-3/whereApp.tsx

@@ -228,6 +228,16 @@ export const WhereAppStep = (props: FormikProps<WizardModel>) => {
             )}
           </Fieldset>
         </WizardCol>
+        <WizardCol xs={12}>
+          {(errors.isIOS || errors.isAndroid) && (
+            <Message
+              validation="error"
+              style={{ marginTop: globalTheme.space.sm }}
+            >
+              {t('__EXPRESS_WIZARD_STEP_WHERE_DEVICE_OPERATING_SYSTEM_ERROR')}
+            </Message>
+          )}
+        </WizardCol>
       </StyledRow>
     </ContainerCard>
   );

src/pages/ExpressWizard/steps/express-3/whereWeb.tsx

@@ -22,7 +22,6 @@ import { ReactComponent as TabletIconActive } from 'src/assets/icons/device-tabl
 import { ReactComponent as LaptopIcon } from 'src/assets/icons/device-laptop.svg';
 import { ReactComponent as LaptopIconActive } from 'src/assets/icons/device-laptop-active.svg';
 import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
-import { useEffect } from 'react';
 import { WizardModel } from 'src/pages/ExpressWizard/wizardModel';
 import { CardDivider } from 'src/pages/ExpressWizard/cardDivider';
 import { WizardCol } from 'src/pages/ExpressWizard/wizardCol';
@@ -37,12 +36,6 @@ export const WhereWebStep = (props: FormikProps<WizardModel>) => {
 
   const { t } = useTranslation();
 
-  useEffect(() => {
-    if (!values.withSmartphone && !values.withTablet && !values.withDesktop) {
-      setFieldValue('withSmartphone', true);
-    }
-  }, []);
-
   const handleRadioClick = (value: string) => {
     setFieldValue('withSmartphone', value === 'smartphone');
     setFieldValue('withTablet', value === 'tablet');
@@ -150,8 +143,16 @@ export const WhereWebStep = (props: FormikProps<WizardModel>) => {
 export const WhereStepValidationSchema = Yup.object().shape(
   {
     // Where APP STEP
-    isIOS: Yup.bool(),
-    isAndroid: Yup.bool(),
+    isIOS: Yup.bool().when(['isAndroid', 'product_type'], {
+      is: (isAndroid: boolean, product_type: string) =>
+        !isAndroid && product_type === 'mobileapp',
+      then: Yup.bool().oneOf([true], 'Operating system is required'),
+    }),
+    isAndroid: Yup.bool().when(['isIOS', 'product_type'], {
+      is: (isIOS: boolean, product_type: string) =>
+        !isIOS && product_type === 'mobileapp',
+      then: Yup.bool().oneOf([true], 'Operating system is required'),
+    }),
     iOSLink: Yup.string().url().when('isIOS', {
       is: true,
       then: Yup.string().url().required(),
@@ -186,5 +187,8 @@ export const WhereStepValidationSchema = Yup.object().shape(
     ['withTablet', 'withDesktop'],
     ['withSmartphone', 'withDesktop'],
     ['withSmartphone', 'withTablet'],
+    ['isIOS', 'product_type'],
+    ['isAndroid', 'product_type'],
+    ['isIOS', 'isAndroid'],
   ]
 );