@xyo-network/react-form-credit-card 2.81.2

package/src/controls/CreditCardCvv.ts

@@ -0,0 +1,84 @@
+import { assertEx } from '@xylabs/assert'
+import { EmptyObject } from '@xylabs/object'
+import { AbstractControl, FormControlBase } from '@xyo-network/react-form-group'
+import valid from 'card-validator'
+
+import { unmask } from '../utils/index.js'
+
+const CONTROL_NAME = 'cvv'
+
+export class CreditCardCvvFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {
+  override invalidMessage = 'Your card cvc is invalid.'
+
+  override pattern = /^\d{0,4}$/
+  override patternStrict = /^\d{1,4}$/
+
+  override props = {
+    autoComplete: 'cc-csc',
+    autoCorrect: 'off',
+    id: CONTROL_NAME,
+    inputMode: 'numeric',
+    name: CONTROL_NAME,
+    placeholder: 'CVC',
+    spellCheck: false,
+  } as TProps
+
+  override required = true
+
+  override unmask = unmask
+
+  private _cardNumberFormControl: AbstractControl | undefined = undefined
+
+  constructor() {
+    super()
+    super.setName(CONTROL_NAME)
+    this.setSerializeSettings({ sensitive: true, serializable: true })
+  }
+
+  get cardNumberFormControl() {
+    return assertEx(this._cardNumberFormControl, () => 'Card number form control is not set')
+  }
+
+  override blurError(value: string) {
+    const num = this.cardNumberFormControl.value
+    const max = this.getCardNumberCvcMax(num)
+    const cvvValidation = valid.cvv(value, max)
+    if (cvvValidation.isValid) {
+      this.setError('')
+      this.setStatus('VALID')
+    } else {
+      this.setError(this.invalidMessage)
+      this.setStatus('INVALID')
+    }
+  }
+
+  override changeError(value: string) {
+    const unmasked = this.unmask(value)
+    const match = unmasked.match(this.patternStrict)
+    if (match) {
+      const num = this.cardNumberFormControl.value
+      const max = this.getCardNumberCvcMax(num)
+      const cvvValidation = valid.cvv(value, max)
+      if (cvvValidation.isPotentiallyValid) {
+        this.setError('')
+        this.setStatus('VALID')
+      } else {
+        this.setError('Your card cvc is invalid.')
+        this.setStatus('INVALID')
+      }
+    } else {
+      this.setError(this.invalidMessage)
+      this.setStatus('INVALID')
+    }
+  }
+
+  setCardNumberFormControl(cardNumberFormControl: AbstractControl) {
+    this._cardNumberFormControl = cardNumberFormControl
+  }
+
+  private getCardNumberCvcMax(num?: string) {
+    if (!num) return 3
+    const numberValidation = valid.number(num)
+    return numberValidation.card ? numberValidation.card.code.size : 3
+  }
+}

package/src/controls/CreditCardExpiry.ts

@@ -0,0 +1,88 @@
+import { assertEx } from '@xylabs/assert'
+import { EmptyObject } from '@xylabs/object'
+import { AbstractControl, FormControlBase } from '@xyo-network/react-form-group'
+import valid from 'card-validator'
+
+import { unmask } from '../utils/index.js'
+
+const CONTROL_NAME = 'expiration'
+
+export class CreditCardExpirationFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase {
+  override invalidMessage = 'Card Expiration is invalid'
+
+  override pattern = /^\d{0,4}$/
+  override patternStrict = /^\d{1,4}$/
+
+  override props = {
+    autoComplete: 'cc-exp',
+    autoCorrect: 'off',
+    id: CONTROL_NAME,
+    inputMode: 'numeric',
+    name: CONTROL_NAME,
+    placeholder: 'MM / YY',
+    spellCheck: false,
+  } as TProps
+
+  override required = true
+
+  override unmask = unmask
+
+  private _cardNumberFormControl: AbstractControl | undefined = undefined
+
+  constructor() {
+    super()
+    super.setName(CONTROL_NAME)
+    this.setSerializeSettings({ sensitive: true, serializable: true })
+  }
+
+  get cardNumberFormControl() {
+    return assertEx(this._cardNumberFormControl, () => 'Card number form control is not set')
+  }
+
+  override blurError(value: string) {
+    const unmasked = unmask(value)
+    const expirationValid = valid.expirationDate(unmasked)
+    if (!unmasked || (unmasked && unmasked.length !== 4)) {
+      this.setErrorAndValidity('Your card expiration is incomplete.', 'INVALID')
+    } else if (expirationValid.isValid) {
+      this.setErrorAndValidity('', 'VALID')
+    } else {
+      this.setErrorAndValidity("Your card's expiration year is in the past.", 'INVALID')
+    }
+  }
+
+  override changeError(value: string) {
+    const unmasked = this.unmask(value)
+    const expirationValid = valid.expirationDate(unmasked)
+    if (expirationValid.isPotentiallyValid) {
+      this.setErrorAndValidity('', 'VALID')
+    } else if (expirationValid.isValid) {
+      this.setErrorAndValidity('', 'VALID')
+    } else {
+      this.setErrorAndValidity("Your card's expiration year is in the past.", 'INVALID')
+    }
+  }
+
+  override mask(value: string) {
+    if (/^[2-9]/.test(unmask(value))) {
+      return this.makeMask(' / ', 2)(`0${value}`)
+    }
+    return this.makeMask(' / ', 2)(value)
+  }
+
+  private makeMask(separator: string, limit: number) {
+    return (value: string) => {
+      const output: string[] = []
+      // eslint-disable-next-line unicorn/no-for-loop
+      for (let i = 0; i < value.length; i++) {
+        if (i !== 0 && i % limit === 0) {
+          output.push(separator)
+        }
+
+        output.push(value[i])
+      }
+
+      return output.join('')
+    }
+  }
+}

package/src/controls/CreditCardNumber.ts

@@ -0,0 +1,139 @@
+import { EmptyObject } from '@xylabs/object'
+import { FormControlBase, SetOptions, ValidControlValue } from '@xyo-network/react-form-group'
+import valid from 'card-validator'
+
+import { unmask } from '../utils/index.js'
+
+const CONTROL_NAME = 'cardNumber2'
+
+export class CreditCardNumberFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {
+  creditCardType: string = ''
+
+  override invalidMessage = 'Card Number is invalid'
+
+  override pattern = /^(\d+)?$/
+  override patternStrict = /^\d+$/
+
+  override props = {
+    autoComplete: 'cc-number',
+    autoCorrect: 'off',
+    id: CONTROL_NAME,
+    inputMode: 'numeric',
+    name: CONTROL_NAME,
+    placeholder: '1234 1234 1234 1234',
+    spellCheck: false,
+  } as TProps
+
+  override required = true
+
+  override unmask = unmask
+
+  constructor() {
+    super()
+    super.setName(CONTROL_NAME)
+    this.setSerializeSettings({ sensitive: true, serializable: true })
+  }
+
+  override blurError(value: string) {
+    const unmasked = unmask(value)
+    const numberValidation = valid.number(unmasked)
+    if (!numberValidation.isValid) {
+      this.setErrorAndValidity(this.invalidMessage, 'INVALID')
+      return
+    }
+    this.setErrorAndValidity('', 'VALID')
+  }
+
+  override changeError(value: string) {
+    const unmasked = unmask(value)
+    const match = unmasked.match(this.patternStrict)
+    if (match) {
+      const numberValidation = valid.number(unmasked)
+      if (!numberValidation.isPotentiallyValid) {
+        this.setErrorAndValidity(this.invalidMessage, 'INVALID')
+        return
+      }
+      this.setErrorAndValidity('', 'VALID')
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, 'INVALID')
+    }
+  }
+
+  earlyNumberCheck(number: string) {
+    switch (number) {
+      case '4': {
+        this.setCreditCardType('visa')
+        break
+      }
+      case '5': {
+        this.setCreditCardType('mastercard')
+        break
+      }
+      case '3': {
+        this.setCreditCardType('amex')
+        break
+      }
+      case '6': {
+        this.setCreditCardType('discover')
+        break
+      }
+      default: {
+        this.setCreditCardType('')
+      }
+    }
+  }
+
+  override getCursorPosition() {
+    if (this.value) {
+      const previousValue = this.previousValue ?? ''
+      const unmasked = unmask(this.value)
+      const numberValidation = valid.number(unmasked)
+      const card = numberValidation.card
+      const lengthChange = this.value.length - (previousValue?.length ?? 0)
+      const unmaskedChange = unmask(this.value).length - unmask(previousValue).length
+
+      if (card) {
+        const gaps = card.gaps
+        const oldCursor = this.cursorPosition.previous ?? 0
+        const oldSeparation = gaps.filter((gap, i) => gap + i < oldCursor).length
+        const newSeparation = gaps.filter((gap, i) => gap + i < oldCursor + lengthChange).length
+        const newCursor = oldCursor - oldSeparation + newSeparation + unmaskedChange
+        return newCursor
+      }
+    }
+
+    return
+  }
+
+  override mask(value: ValidControlValue = '') {
+    const unmasked = unmask(value)
+    const numberValidation = valid.number(unmasked)
+    const card = numberValidation.card
+
+    if (card) {
+      const max = card.lengths.includes(16) ? 16 : card.lengths[0]
+      const gaps = [...card.gaps, max]
+      const newVal = gaps
+        .map((gap, i) => unmasked.slice(gaps[i - 1] || 0, gap))
+        .filter(Boolean)
+        .join(' ')
+
+      return newVal
+    }
+
+    return value
+  }
+
+  onCreditCardTypeChange: (type: string) => void = () => {}
+
+  setCreditCardType(type: string) {
+    this.creditCardType = type
+    this.onCreditCardTypeChange(type)
+  }
+
+  override setValue(value = '', options: SetOptions) {
+    const umMasked = this.unmask(value)
+    super.setValue(umMasked, options)
+    this.earlyNumberCheck(umMasked.charAt(0))
+  }
+}

package/src/controls/Email.ts

@@ -0,0 +1,47 @@
+import { EmptyObject } from '@xylabs/object'
+import { FormControlBase } from '@xyo-network/react-form-group'
+
+const CONTROL_NAME = 'Email'
+
+export class CreditCardEmailFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {
+  override invalidMessage = 'Your email is invalid.'
+
+  override pattern = /^.*$/
+  override patternStrict = /^([\w+.\-])+@(([\dA-Za-z-])+\.)+([\dA-Za-z]{2,4})+$/
+
+  override props = {
+    autoComplete: 'email',
+    autoCorrect: 'off',
+    id: CONTROL_NAME.toLocaleLowerCase(),
+    name: CONTROL_NAME.toLocaleLowerCase(),
+    placeholder: 'jerry.smith@email.com',
+    spellCheck: false,
+  } as TProps
+
+  override required = true
+
+  constructor() {
+    super()
+    super.setName(CONTROL_NAME)
+    this.setSerializeSettings({ sensitive: false, serializable: true })
+  }
+
+  override blurError(value: string) {
+    const match = value.match(this.patternStrict)
+    this.updateValidation(match)
+  }
+
+  override changeError(value: string) {
+    if (this.error) {
+      this.blurError(value)
+    }
+  }
+
+  private updateValidation(match: RegExpMatchArray | null) {
+    if (match) {
+      this.setErrorAndValidity('', 'VALID')
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, 'INVALID')
+    }
+  }
+}

package/src/controls/Name.ts

@@ -0,0 +1,37 @@
+import { EmptyObject } from '@xylabs/object'
+import { FormControlBase } from '@xyo-network/react-form-group'
+
+export class NameFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {
+  override required = true
+
+  constructor(
+    private nameLabel: string,
+    autoCompleteLabel: string,
+    placeHolder: string,
+  ) {
+    super()
+    super.setName(nameLabel)
+    this.setSerializeSettings({ sensitive: false, serializable: true })
+    this.invalidMessage = `${nameLabel} name is missing.`
+    this.props = {
+      autoComplete: autoCompleteLabel,
+      autoCorrect: 'off',
+      id: this.nameLabel,
+      name: this.nameLabel,
+      placeholder: placeHolder,
+      spellCheck: false,
+    } as TProps
+  }
+
+  override blurError(value: string) {
+    if (value) {
+      this.setErrorAndValidity('', 'VALID')
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, 'INVALID')
+    }
+  }
+
+  override changeError(value: string): void {
+    this.blurError(value)
+  }
+}

package/src/controls/Zip.ts

@@ -0,0 +1,54 @@
+import { EmptyObject } from '@xylabs/object'
+import { FormControlBase } from '@xyo-network/react-form-group'
+import valid from 'card-validator'
+
+import { unmask } from '../utils/index.js'
+
+const CONTROL_NAME = 'Zip'
+
+export class CreditCardZipFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {
+  override invalidMessage = 'Your zip code is invalid.'
+
+  override props = {
+    autoComplete: 'postal-code',
+    autoCorrect: 'off',
+    id: CONTROL_NAME.toLocaleLowerCase(),
+    name: CONTROL_NAME.toLocaleLowerCase(),
+    placeholder: '12345',
+    spellCheck: false,
+  } as TProps
+
+  override required = true
+
+  override unmask = unmask
+
+  constructor() {
+    super()
+    super.setName(CONTROL_NAME)
+    this.setSerializeSettings({ sensitive: true, serializable: true })
+  }
+
+  override blurError(value: string) {
+    const postalCodeValidation = valid.postalCode(value)
+    if (postalCodeValidation.isValid) {
+      this.setErrorAndValidity('', 'VALID')
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, 'INVALID')
+    }
+  }
+
+  override changeError(value: string) {
+    const unmasked = this.unmask(value)
+    const match = unmasked.match(this.patternStrict)
+    if (match) {
+      const postalCodeValidation = valid.postalCode(value)
+      if (postalCodeValidation.isPotentiallyValid) {
+        this.setErrorAndValidity('', 'VALID')
+      } else {
+        this.setErrorAndValidity('Your zip code is invalid.', 'INVALID')
+      }
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, 'INVALID')
+    }
+  }
+}

package/src/controls/index.ts

@@ -0,0 +1,6 @@
+export * from './CreditCardCvv.js'
+export * from './CreditCardExpiry.js'
+export * from './CreditCardNumber.js'
+export * from './Email.js'
+export * from './Name.js'
+export * from './Zip.js'

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components/index.js'
+export * from './context/index.js'
+export * from './controls/index.js'
+export * from './models/index.js'
+export * from './utils/index.js'

package/src/models/CreditCardInput.ts

@@ -0,0 +1,19 @@
+import { isPayloadOfSchemaTypeWithMeta, Payload } from '@xyo-network/payload-model'
+
+export const CreditCardInputSchema = 'network.xyo.credit.card.input' as const
+export type CreditCardInputSchema = typeof CreditCardInputSchema
+
+export type CreditCardInputFields = {
+  cardNumber: string
+  cvc: string
+  emailAddress: string
+  expiration: string
+  firstName: string
+  lastName: string
+  timestamp: number
+  zip: string
+}
+
+export type CreditCardInput = Payload<CreditCardInputFields, CreditCardInputSchema>
+
+export const isCreditCardInput = isPayloadOfSchemaTypeWithMeta<CreditCardInput>(CreditCardInputSchema)

package/src/models/index.ts

@@ -0,0 +1 @@
+export * from './CreditCardInput.js'

package/src/stories/test.stories.tsx

@@ -0,0 +1,20 @@
+/**
+ * More to come...
+ */
+
+import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: 'modules/form/test',
+} as Meta
+
+const Template: StoryFn<React.FC> = (args) => {
+  return <div {...args}></div>
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }

package/src/types/images.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.svg'
+declare module '*.gif'
+declare module '*.webp'

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './umask.js'

package/src/utils/umask.ts

@@ -0,0 +1,3 @@
+export function unmask(value: string) {
+  return value.replaceAll(/\D/g, '')
+}

package/typedoc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["src/index.ts"],
+  "tsconfig": "./tsconfig.typedoc.json"
+}