diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/CreditCardExpiryBox/index.spec.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/CreditCardExpiryBox/index.spec.js new file mode 100644 index 00000000000..cb6e4582cae --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/components/Form/CreditCardExpiryBox/index.spec.js @@ -0,0 +1,14 @@ +import { normalizeCreditCardExpiry } from './index.tsx' + +describe('normalizeCreditCardExpiry', () => { + it('should normalize a cc expiry date', () => { + expect(normalizeCreditCardExpiry('1 ')).toBe('1') + expect(normalizeCreditCardExpiry('12')).toBe('12/') + expect(normalizeCreditCardExpiry('09/')).toBe('09/') + expect(normalizeCreditCardExpiry('/', '9')).toBe('09/') + expect(normalizeCreditCardExpiry('12/20')).toBe('12/20') + expect(normalizeCreditCardExpiry('invalid_characters!@#$%^&&*()+')).toBe( + undefined + ) + }) +}) diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/CreditCardExpiryBox/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Form/CreditCardExpiryBox/index.tsx index 09e3246121f..0022f37dbaa 100644 --- a/packages/blockchain-wallet-v4-frontend/src/components/Form/CreditCardExpiryBox/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/components/Form/CreditCardExpiryBox/index.tsx @@ -8,9 +8,27 @@ export const normalizeCreditCardExpiry = (value, previousValue) => { if (!value) return value if (value.length > 5) return previousValue - const onlyNumsOrSlash = value.replace(/[^\d/]/g, '') + const onlyNumsOrSlash = value.replace(/[^\d/]/g, '').replace(/\/{1,}/, '/') + const prevOnlyNumsOrSlash = previousValue || '' - return onlyNumsOrSlash + if (!prevOnlyNumsOrSlash && onlyNumsOrSlash === '/') return '' + + if ( + prevOnlyNumsOrSlash.length === 1 && + onlyNumsOrSlash[onlyNumsOrSlash.length - 1] === '/' + ) { + return '0' + prevOnlyNumsOrSlash + '/' + } + + if (onlyNumsOrSlash.length < prevOnlyNumsOrSlash.length) { + return onlyNumsOrSlash + } else { + if (onlyNumsOrSlash.length === 2) { + return onlyNumsOrSlash + '/' + } else { + return onlyNumsOrSlash + } + } } export const validateCreditCardExpiry = (value: string) => {