Feature/improve brazilian postcode validation

.changeset/rare-dodos-drop.md

@@ -0,0 +1,6 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Better regex & error message for validation/formatting of Brazilian post codes.
+We now allow a hyphen between the 5th & 6th digits

packages/e2e/tests/address/address.postalCode.test.js

@@ -16,8 +16,10 @@ test('should show error when switching from country that has valid postal code t
     await addressComponent.selectCountry('United States');
     await addressComponent.fillPostalCode('12345');
 
+    await t.expect(addressComponent.postalCodeInputError.exists).ok(); // error fields should always be in DOM
+
     await addressComponent.selectCountry('Brazil');
-    await t.expect(addressComponent.postalCodeInputError.innerText).contains('Invalid format. Expected format: 99999999');
+    await t.expect(addressComponent.postalCodeInputError.innerText).contains('Invalid format. Expected format: 12345678 or 12345-678');
 
     await addressComponent.selectCountry('Netherlands');
     await t.expect(addressComponent.postalCodeInputError.innerText).contains('Invalid format. Expected format: 9999AA');
@@ -37,12 +39,11 @@ test('should show error when remove focus from postal code with invalid value',
     await addressComponent.fillPostalCode('12345');
     await removeFocusFromElement(addressComponent.postalCodeInput);
 
-    await t.expect(addressComponent.postalCodeInputError.innerText).contains('Invalid format. Expected format: 99999999');
+    await t.expect(addressComponent.postalCodeInputError.innerText).contains('Invalid format. Expected format: 12345678 or 12345-678');
 
     await addressComponent.fillPostalCode('678');
 
     await t.expect(addressComponent.postalCodeInput.value).eql('12345678');
-    await t.expect(addressComponent.postalCodeInputError.exists).notOk();
 
     // US
     await addressComponent.selectCountry('United States');
@@ -62,7 +63,6 @@ test('should show error when remove focus from postal code with invalid value',
     await addressComponent.fillPostalCode('AB');
 
     await t.expect(addressComponent.postalCodeInput.value).eql('1234AB');
-    await t.expect(addressComponent.postalCodeInputError.exists).notOk();
 });
 
 test('should format input according to the country pattern', async t => {

packages/lib/src/components/internal/Address/validate.formats.ts

@@ -6,7 +6,7 @@ const createFormatByDigits = (digits: number): Formatter => {
     const format = new Array(digits).fill('9').join('');
     return {
         // Formatter - excludes non digits and limits to maxlength
-        formatterFn: val => val.replace(getFormattingRegEx('^\\d', 'g'), '').substr(0, digits),
+        formatterFn: val => val.replace(getFormattingRegEx('^\\d', 'g'), '').substring(0, digits),
         format,
         maxlength: digits
     };
@@ -58,7 +58,16 @@ export const countrySpecificFormatters: CountryFormatRules = {
         postalCode: createFormatByDigits(4)
     },
     BR: {
-        postalCode: createFormatByDigits(8)
+        postalCode: {
+            // Formatter - excludes non digits, but allows hyphens, and limits to a maxlength that varies depending on whether a hyphen is present or not
+            formatterFn: val => {
+                const nuVal = val.replace(getFormattingRegEx('^\\d-', 'g'), '');
+                const maxlength = nuVal.indexOf('-') > -1 ? 9 : 8;
+                return nuVal.substring(0, maxlength);
+            },
+            format: '12345678 or 12345-678',
+            maxlength: 9
+        }
     },
     CA: {
         postalCode: {
@@ -102,7 +111,7 @@ export const countrySpecificFormatters: CountryFormatRules = {
     GB: {
         postalCode: {
             // Disallow special chars & set to maxlength
-            formatterFn: val => val.replace(getFormattingRegEx(SPECIAL_CHARS), '').substr(0, 8),
+            formatterFn: val => val.replace(getFormattingRegEx(SPECIAL_CHARS), '').substring(0, 8),
             format: 'AA99 9AA or A99 9AA or A9 9AA',
             maxlength: 8
         }
@@ -181,11 +190,11 @@ export const countrySpecificFormatters: CountryFormatRules = {
     },
     PL: {
         postalCode: {
-            // Formatter - excludes non digits & hyphens and limits to a maxlength that varies depending on whether a hyphen is present or not
+            // Formatter - excludes non digits, but allows hyphens, and limits to a maxlength that varies depending on whether a hyphen is present or not
             formatterFn: val => {
                 const nuVal = val.replace(getFormattingRegEx('^\\d-', 'g'), '');
                 const maxlength = nuVal.indexOf('-') > -1 ? 6 : 5;
-                return nuVal.substr(0, maxlength);
+                return nuVal.substring(0, maxlength);
             },
             format: '99999 or 99-999',
             maxlength: 6
@@ -195,7 +204,7 @@ export const countrySpecificFormatters: CountryFormatRules = {
         postalCode: {
             formatterFn: val => {
                 const nuVal = val.replace(getFormattingRegEx('^\\d-', 'g'), '');
-                return nuVal.substr(0, 8);
+                return nuVal.substring(0, 8);
             },
             format: '9999-999',
             maxlength: 8
@@ -233,7 +242,7 @@ export const countrySpecificFormatters: CountryFormatRules = {
             formatterFn: val => {
                 const nuVal = val.replace(getFormattingRegEx('^\\d-', 'g'), '');
                 const maxlength = nuVal.indexOf('-') > -1 ? 10 : 5;
-                return nuVal.substr(0, maxlength);
+                return nuVal.substring(0, maxlength);
             },
             format: '99999 or 99999-9999'
         }

packages/lib/src/components/internal/Address/validate.ts

@@ -35,7 +35,7 @@ const postalCodePatterns = {
     AU: createPatternByDigits(4),
     BE: { pattern: /(?:(?:[1-9])(?:\d{3}))/ },
     BG: createPatternByDigits(4),
-    BR: createPatternByDigits(8),
+    BR: { pattern: /^\d{5}-?\d{3}$/ },
     CA: { pattern: /(?:[ABCEGHJ-NPRSTVXY]\d[A-Z][ -]?\d[A-Z]\d)/ },
     CH: { pattern: /[1-9]\d{3}/ },
     CY: createPatternByDigits(4),