feat(simple buy): expiration date format

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
+    )
+  })
+})

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) => {