Ensure Boleto validates properly (#2096)

* Ensure Boleto validates properly (with a more robust Field.tsx for when a comp doesn't)

* Adding new, more accessible, error messages to Boleto first & last name fields

packages/lib/src/components/Boleto/components/BoletoInput/validate.ts

@@ -5,13 +5,23 @@ import { personalDetailsValidationRules } from '../../../internal/PersonalDetail
 export const boletoValidationRules: ValidatorRules = {
     socialSecurityNumber: {
         validate: validateSSN,
-        errorMessage: '',
+        errorMessage: 'error.va.gen.02',
         modes: ['blur']
     },
     shopperEmail: personalDetailsValidationRules.shopperEmail,
     default: {
         validate: value => !!value && value.length > 0,
-        errorMessage: '',
+        errorMessage: 'error.va.gen.02',
+        modes: ['blur']
+    },
+    firstName: {
+        validate: value => !!value && value.length > 0,
+        errorMessage: 'firstName.invalid',
+        modes: ['blur']
+    },
+    lastName: {
+        validate: value => !!value && value.length > 0,
+        errorMessage: 'lastName.invalid',
         modes: ['blur']
     }
 };

packages/lib/src/components/internal/FormFields/Field/Field.tsx

@@ -131,7 +131,7 @@ const Field: FunctionalComponent<FieldProps> = props => {
                     {...(errorVisibleToSR && { id: `${uniqueId.current}${ARIA_ERROR_SUFFIX}` })}
                     aria-hidden={errorVisibleToSR ? null : 'true'}
                 >
-                    {errorMessage}
+                    {errorMessage && typeof errorMessage === 'string' && errorMessage.length ? errorMessage : null}
                 </span>
             </Fragment>
         );

packages/lib/src/components/internal/SendCopyToEmail/SendCopyToEmail.tsx

@@ -27,7 +27,12 @@ export default function SendCopyToEmail(props) {
             </Field>
 
             {sendCopyToEmail && (
-                <Field label={i18n.get('shopperEmail')} classNameModifiers={['shopperEmail']} errorMessage={errors}>
+                <Field
+                    label={i18n.get('shopperEmail')}
+                    classNameModifiers={['shopperEmail']}
+                    errorMessage={errors && errors.errorMessage ? i18n.get(errors.errorMessage) : !!errors}
+                    name={'shopperEmail'}
+                >
                     {renderFormField('emailAddress', {
                         name: 'shopperEmail',
                         autoCorrect: 'off',

packages/lib/src/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.tsx

@@ -5,12 +5,13 @@ import { h } from 'preact';
 
 export function BrazilPersonalDetail(props) {
     const { i18n, data, handleChangeFor, errors, valid } = props;
+    const getErrorMessage = error => (error && error.errorMessage ? i18n.get(error.errorMessage) : !!error);
     return (
         <div className={'adyen-checkout__fieldset adyen-checkout__fieldset--address adyen-checkout__fieldset--personalDetails'}>
             <div className="adyen-checkout__fieldset__title">{i18n.get('personalDetails')}</div>
 
             <div className="adyen-checkout__fieldset__fields">
-                <Field label={i18n.get('firstName')} classNameModifiers={['firstName', 'col-50']} errorMessage={!!errors.firstName}>
+                <Field label={i18n.get('firstName')} classNameModifiers={['firstName', 'col-50']} errorMessage={getErrorMessage(errors.firstName)}>
                     {renderFormField('text', {
                         name: 'firstName',
                         autocorrect: 'off',
@@ -21,7 +22,7 @@ export function BrazilPersonalDetail(props) {
                     })}
                 </Field>
 
-                <Field label={i18n.get('lastName')} classNameModifiers={['lastName', 'col-50']} errorMessage={!!errors.lastName}>
+                <Field label={i18n.get('lastName')} classNameModifiers={['lastName', 'col-50']} errorMessage={getErrorMessage(errors.lastName)}>
                     {renderFormField('text', {
                         name: 'lastName',
                         autocorrect: 'off',