From bc79918ec8fcc2d73ccc81f8f7ae1ccc32cbb247 Mon Sep 17 00:00:00 2001
From: sponglord <nicholas.spong@adyen.com>
Date: Fri, 7 Apr 2023 12:53:59 +0200
Subject: [PATCH] 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
---
 .../Boleto/components/BoletoInput/validate.ts      | 14 ++++++++++++--
 .../components/internal/FormFields/Field/Field.tsx |  2 +-
 .../internal/SendCopyToEmail/SendCopyToEmail.tsx   |  7 ++++++-
 .../BrazilPersonalDetail.tsx                       |  5 +++--
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/lib/src/components/Boleto/components/BoletoInput/validate.ts b/packages/lib/src/components/Boleto/components/BoletoInput/validate.ts
index 95bc20e6..aeab9ffd 100644
--- a/packages/lib/src/components/Boleto/components/BoletoInput/validate.ts
+++ b/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']
     }
 };
diff --git a/packages/lib/src/components/internal/FormFields/Field/Field.tsx b/packages/lib/src/components/internal/FormFields/Field/Field.tsx
index 6bfea659..818e1a38 100644
--- a/packages/lib/src/components/internal/FormFields/Field/Field.tsx
+++ b/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>
         );
diff --git a/packages/lib/src/components/internal/SendCopyToEmail/SendCopyToEmail.tsx b/packages/lib/src/components/internal/SendCopyToEmail/SendCopyToEmail.tsx
index 44dd8e22..16873531 100644
--- a/packages/lib/src/components/internal/SendCopyToEmail/SendCopyToEmail.tsx
+++ b/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',
diff --git a/packages/lib/src/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.tsx b/packages/lib/src/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.tsx
index b464266a..1780423e 100644
--- a/packages/lib/src/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.tsx
+++ b/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',