Merge pull request #611 from vtex/fix/shouldShowNumberKeyboard-myAccount

Fix: shouldShowNumberKeyboard logic

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

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 (
           <InputFieldContainer

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 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})$/,
+      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',

react/transforms/shouldShowNumberKeyboard.js

@@ -0,0 +1,30 @@
+/**
+ * Removes non-numeric characters from a string, keeping only digits, spaces, and dashes.
+ * @param {string} string
+ * @returns {string}
+ */
+function removeNonWords(string) {
+  return (string || '').replace(/[^\d\s-]/g, '')
+}
+
+/**
+ * Determines whether to show the number keyboard based on the input mask.
+ * @param {string|number|null|undefined|NaN} [mask]
+ * @returns {boolean}
+ */
+export function shouldShowNumberKeyboard(mask) {
+  if (mask === undefined || mask === null || mask === '') {
+    return true
+  }
+
+  if (Number.isNaN(mask)) {
+    return false
+  }
+
+  const maskString = typeof mask === 'number' ? mask.toString() : mask
+
+  const numericString = removeNonWords(maskString)
+  const isPurelyNumeric = /^[\d\s-]+$/.test(numericString)
+
+  return isPurelyNumeric && !/[a-zA-Z]/.test(maskString)
+}

react/transforms/shouldShowNumberKeyboard.test.js

@@ -0,0 +1,43 @@
+import { shouldShowNumberKeyboard } from './shouldShowNumberKeyboard'
+
+describe('shouldShowNumberKeyboard', () => {
+  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)
+  })
+})