Merge pull request #262 from AppQuality/UN-48-express-validation-issues

UN-48-express-validation-issues

Author: cannarocks

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/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>
   );