From 9ce71bc44a76275a5f2f896d5755e8ee4ce36eb2 Mon Sep 17 00:00:00 2001 From: Alex Efremov Date: Thu, 5 Sep 2024 14:39:38 +0700 Subject: [PATCH 1/9] Add disabled and invalid classNames to the StyleguideInput component --- react/inputs/StyleguideInput/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/react/inputs/StyleguideInput/index.js b/react/inputs/StyleguideInput/index.js index fca9d470..49f6b546 100644 --- a/react/inputs/StyleguideInput/index.js +++ b/react/inputs/StyleguideInput/index.js @@ -82,6 +82,8 @@ class StyleguideInput extends Component { const disabled = !!address[field.name].disabled + const valid = address[field.name].valid === false ? false : true + const loading = loadingProp != null ? loadingProp : address[field.name].loading @@ -137,6 +139,10 @@ class StyleguideInput extends Component { field.name } vtex-address-form__field--${field.size || 'xlarge'} ${ field.hidden ? 'dn' : '' + } ${ + disabled ? 'vtex-address-form__field-disabled' : '' + } ${ + !valid ? 'vtex-address-form__field-invalid' : '' }` if (field.name === 'postalCode') { From b77b610ccd852a7717e1237dce4fec24329ba10a Mon Sep 17 00:00:00 2001 From: Alex Efremov Date: Thu, 5 Sep 2024 14:40:48 +0700 Subject: [PATCH 2/9] Update CHANGELOG.md --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7909800a..93098d33 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added +- "disabled" and "invalid" classNames for the StyleguideInput component. + ## [4.24.7] - 2024-08-30 ### Added From 6b9e7976d523d42c1f093fae1db141a97fa6f27b Mon Sep 17 00:00:00 2001 From: Alex Efremov Date: Wed, 11 Sep 2024 23:40:42 +0700 Subject: [PATCH 3/9] Add empty and focused classNames --- CHANGELOG.md | 2 +- react/inputs/StyleguideInput/index.js | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 93098d33..c277efca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] ### Added -- "disabled" and "invalid" classNames for the StyleguideInput component. +- "...-disabled", "...-empty", "...-focused" and "...-invalid" classNames for the StyleguideInput component. ## [4.24.7] - 2024-08-30 diff --git a/react/inputs/StyleguideInput/index.js b/react/inputs/StyleguideInput/index.js index 49f6b546..6fc919f3 100644 --- a/react/inputs/StyleguideInput/index.js +++ b/react/inputs/StyleguideInput/index.js @@ -23,6 +23,7 @@ class StyleguideInput extends Component { this.state = { isInputValid: props.address[props.field.name].valid || true, showErrorMessage: false, + isFocused: false, } } @@ -50,7 +51,7 @@ class StyleguideInput extends Component { } handleFocus = () => { - this.setState({ showErrorMessage: false }) + this.setState({ showErrorMessage: false, isFocused: true }) } handleSubmit = (event) => { @@ -60,7 +61,7 @@ class StyleguideInput extends Component { } handleBlur = (event) => { - this.setState({ showErrorMessage: true }) + this.setState({ showErrorMessage: true, isFocused: false }) this.props.onBlur && this.props.onBlur(event) } @@ -143,6 +144,10 @@ class StyleguideInput extends Component { disabled ? 'vtex-address-form__field-disabled' : '' } ${ !valid ? 'vtex-address-form__field-invalid' : '' + } ${ + !address[field.name].value ? 'vtex-address-form__field-empty' : '' + } ${ + this.state.isFocused ? 'vtex-address-form__field-focused' : '' }` if (field.name === 'postalCode') { From cc1d9329168fad9513e81dd299af58ef5d040cce Mon Sep 17 00:00:00 2001 From: beatrizmaselli Date: Sat, 14 Sep 2024 14:23:00 +0200 Subject: [PATCH 4/9] add test cases and fix shouldShowNumberKeyboard logic --- CHANGELOG.md | 6 +++ react/PostalCodeGetter.js | 10 ++--- react/transforms/shouldShowNumberKeyboard.js | 30 +++++++++++++ .../shouldShowNumberKeyboard.test.js | 43 +++++++++++++++++++ 4 files changed, 82 insertions(+), 7 deletions(-) create mode 100644 react/transforms/shouldShowNumberKeyboard.js create mode 100644 react/transforms/shouldShowNumberKeyboard.test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e886598..a1221438 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added +- Tests to validate if a country should use Number Keyboard (shouldShowNumberKeyboard). + +### Fixed +- Logic to validate if a country should use Number Keyboard (shouldShowNumberKeyboard). + ## [4.25.0] - 2024-09-13 ### Fixed diff --git a/react/PostalCodeGetter.js b/react/PostalCodeGetter.js index f1e5d2be..ceae6563 100644 --- a/react/PostalCodeGetter.js +++ b/react/PostalCodeGetter.js @@ -15,7 +15,7 @@ import { injectAddressContext, addressContextPropTypes, } from './addressContainerContext' -import { removeNonWords } from './transforms/utils' +import { shouldShowNumberKeyboard as determineShouldShowNumberKeyboard } from './transforms/shouldShowNumberKeyboard' class PostalCodeGetter extends Component { render() { @@ -89,12 +89,8 @@ class PostalCodeGetter extends Component { default: case POSTAL_CODE: { const field = getField('postalCode', rules) - const numericString = field.mask ? removeNonWords(field.mask) : '' - const isPurelyNumeric = - numericString === '' || /^\d+$/.test(numericString) - const shouldShowNumberKeyboard = isNaN(field.mask) - ? isPurelyNumeric - : false + const mask = field?.mask + const shouldShowNumberKeyboard = determineShouldShowNumberKeyboard(mask) return ( { + test('Should return true for mask rule undefined', () => { + expect(shouldShowNumberKeyboard(undefined)).toBe(true) + }) + + test('Should return true for mask rule null', () => { + expect(shouldShowNumberKeyboard(null)).toBe(true) + }) + + test('Should return true for mask rule empty string', () => { + expect(shouldShowNumberKeyboard('')).toBe(true) + }) + + test('Should return true for mask rule numeric string without separators', () => { + expect(shouldShowNumberKeyboard('9999')).toBe(true) + }) + + test('Should return true for mask rule numeric string with spaces', () => { + expect(shouldShowNumberKeyboard('999 99')).toBe(true) + }) + + test('Should return true for mask rule numeric string with dashes', () => { + expect(shouldShowNumberKeyboard('9999-99')).toBe(true) + }) + + test('Should return false for mask rulee for string with letters', () => { + expect(shouldShowNumberKeyboard('999AA')).toBe(false) + }) + + test('Should return false for mask rulee for string with mixed letters and spaces', () => { + expect(shouldShowNumberKeyboard('999 AA')).toBe(false) + }) + + test('Should return false for mask rulee for mixed numeric and letter string with dashes', () => { + expect(shouldShowNumberKeyboard('9AA9-99')).toBe(false) + }) + + test('Should return false for mask rulee for NaN', () => { + expect(shouldShowNumberKeyboard(NaN)).toBe(false) + }) +}) From 3fb94aa2b8bb6bad19491952f6b6596029f58d2c Mon Sep 17 00:00:00 2001 From: beatrizmaselli Date: Sat, 14 Sep 2024 14:30:24 +0200 Subject: [PATCH 5/9] remove utils folder --- react/transforms/utils.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 react/transforms/utils.js diff --git a/react/transforms/utils.js b/react/transforms/utils.js deleted file mode 100644 index 1fb2b0f8..00000000 --- a/react/transforms/utils.js +++ /dev/null @@ -1,3 +0,0 @@ -export function removeNonWords(string) { - return string && string.replace(/\W/g, '') -} From 8b394ec90135b5a052ce54674e64667cd5e9cf24 Mon Sep 17 00:00:00 2001 From: beatrizmaselli Date: Sat, 14 Sep 2024 14:44:04 +0200 Subject: [PATCH 6/9] adjust comment --- react/country/GBR.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/react/country/GBR.js b/react/country/GBR.js index 38c1c731..59f10756 100644 --- a/react/country/GBR.js +++ b/react/country/GBR.js @@ -17,9 +17,10 @@ export default { maxLength: 50, fixedLabel: 'Postcode', required: true, - // UK has different patterns for postal codes alphanumericals, so we need can't use a mask. + // UK has different patterns for postal codes alphanumericals, so we can't use a mask. mask: NaN, - regex: /^([A-Za-z][A-Ha-hJ-Yj-y]?[0-9][A-Za-z0-9]? ?[0-9][A-Za-z]{2}|[Gg][Ii][Rr] ?0[Aa]{2})$/, + regex: + /^([A-Za-z][A-Ha-hJ-Yj-y]?[0-9][A-Za-z0-9]? ?[0-9][A-Za-z]{2}|[Gg][Ii][Rr] ?0[Aa]{2})$/, postalCodeAPI: false, size: 'small', autoComplete: 'nope', From 00876e3514cde50c28ed4deb913a2d2fa42b1e95 Mon Sep 17 00:00:00 2001 From: beatrizmaselli Date: Sat, 14 Sep 2024 14:44:35 +0200 Subject: [PATCH 7/9] adjust comment --- react/country/GBR.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/country/GBR.js b/react/country/GBR.js index 59f10756..fa0c0606 100644 --- a/react/country/GBR.js +++ b/react/country/GBR.js @@ -17,7 +17,7 @@ export default { maxLength: 50, fixedLabel: 'Postcode', required: true, - // UK has different patterns for postal codes alphanumericals, so we can't use a mask. + // UK postal codes have various alphanumeric patterns, so a simple mask cannot be used. mask: NaN, regex: /^([A-Za-z][A-Ha-hJ-Yj-y]?[0-9][A-Za-z0-9]? ?[0-9][A-Za-z]{2}|[Gg][Ii][Rr] ?0[Aa]{2})$/, From 407cf59ab67fe859cb15aa2f2ed7d040b1c6e34d Mon Sep 17 00:00:00 2001 From: jeffersontuc <12574426+jeffersontuc@users.noreply.github.com> Date: Tue, 17 Sep 2024 13:12:29 +0000 Subject: [PATCH 8/9] Release v4.25.1 --- CHANGELOG.md | 2 ++ manifest.json | 2 +- react/package.json | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a1221438..71fb914a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +## [4.25.1] - 2024-09-17 + ### Added - Tests to validate if a country should use Number Keyboard (shouldShowNumberKeyboard). diff --git a/manifest.json b/manifest.json index ce62ac44..8bc72fa8 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "address-form", "vendor": "vtex", - "version": "4.25.0", + "version": "4.25.1", "title": "address-form React component", "description": "address-form React component", "defaultLocale": "en", diff --git a/react/package.json b/react/package.json index c825cea1..87456077 100644 --- a/react/package.json +++ b/react/package.json @@ -1,6 +1,6 @@ { "name": "@vtex/address-form", - "version": "4.25.0", + "version": "4.25.1", "description": "address-form React component", "main": "lib/index.js", "files": [ From edc893b9f83685cf47bc2e5270640d4cf9cb4825 Mon Sep 17 00:00:00 2001 From: jeffersontuc <12574426+jeffersontuc@users.noreply.github.com> Date: Wed, 18 Sep 2024 14:06:13 +0000 Subject: [PATCH 9/9] Release v4.25.2 --- CHANGELOG.md | 2 ++ manifest.json | 2 +- react/package.json | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 71f7aabf..7b0b5bc1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +## [4.25.2] - 2024-09-18 + ### Added - "...-disabled", "...-empty", "...-focused" and "...-invalid" classNames for the StyleguideInput component. diff --git a/manifest.json b/manifest.json index 8bc72fa8..b006bbc5 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "address-form", "vendor": "vtex", - "version": "4.25.1", + "version": "4.25.2", "title": "address-form React component", "description": "address-form React component", "defaultLocale": "en", diff --git a/react/package.json b/react/package.json index 87456077..0c890f02 100644 --- a/react/package.json +++ b/react/package.json @@ -1,6 +1,6 @@ { "name": "@vtex/address-form", - "version": "4.25.1", + "version": "4.25.2", "description": "address-form React component", "main": "lib/index.js", "files": [