@xyo-network/react-form-credit-card 7.5.8 → 7.5.11

package/src/controls/CreditCardNumber.ts

@@ -1,138 +0,0 @@
-import type { EmptyObject } from '@xylabs/sdk-js'
-import type { SetOptions, ValidControlValue } from '@xyo-network/react-form-group'
-import { FormControlBase } from '@xyo-network/react-form-group'
-import valid from 'card-validator'
-
-import { unmask } from '../utils/index.ts'
-
-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 = RegExp(this.patternStrict).exec(unmasked)
-    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
-      }
-    }
-  }
-
-  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

@@ -1,47 +0,0 @@
-import type { EmptyObject } from '@xylabs/sdk-js'
-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 = RegExp(this.patternStrict).exec(value)
-    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

@@ -1,40 +0,0 @@
-import type { EmptyObject } from '@xylabs/sdk-js'
-import { FormControlBase } from '@xyo-network/react-form-group'
-
-export class NameFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {
-  override required = true
-
-  private nameLabel: string
-
-  constructor(
-    nameLabel: string,
-    autoCompleteLabel: string,
-    placeHolder: string,
-  ) {
-    super()
-    this.nameLabel = nameLabel
-    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

@@ -1,54 +0,0 @@
-import type { EmptyObject } from '@xylabs/sdk-js'
-import { FormControlBase } from '@xyo-network/react-form-group'
-import valid from 'card-validator'
-
-import { unmask } from '../utils/index.ts'
-
-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 = RegExp(this.patternStrict).exec(unmasked)
-    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

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

package/src/index.ts

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

package/src/models/CreditCardInput.ts

@@ -1,20 +0,0 @@
-import type { Payload } from '@xyo-network/payload-model'
-import { asSchema, isPayloadOfSchemaType } from '@xyo-network/payload-model'
-
-export const CreditCardInputSchema = asSchema('network.xyo.credit.card.input', true)
-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 = isPayloadOfSchemaType<CreditCardInput>(CreditCardInputSchema)

package/src/models/index.ts

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

package/src/stories/form.stories.tsx

@@ -1,26 +0,0 @@
-import { Button } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { CreditCardFormFlexboxWithFormGroupProvider } from '../components/index.ts'
-import type { CreditCardInput } from '../models/index.ts'
-
-export default { title: 'form/CreditCardForm' } as Meta<typeof CreditCardFormFlexboxWithFormGroupProvider>
-
-const Template: StoryFn<typeof CreditCardFormFlexboxWithFormGroupProvider> = (args) => {
-  return <CreditCardFormFlexboxWithFormGroupProvider ConfirmationButton={Button} {...args} />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithCallbacks = Template.bind({})
-WithCallbacks.args = {
-  displayErrors: true,
-  onErrorDuringSubmit: (error: Error) => console.log('onErrorDuringSubmit', error),
-  onInvalidSubmit: errorSummary => console.log('onInvalidSubmit', errorSummary),
-  onSuccessfulSubmit: () => console.log('onSuccessfulSubmit'),
-  onValidSubmit: (args: CreditCardInput) => Promise.resolve(console.log('onValidSubmit', args)),
-}
-
-export { Default, WithCallbacks }

package/src/types/images.d.ts

@@ -1,29 +0,0 @@
-declare module '*.svg' {
-  const content: string
-  export default content
-}
-
-declare module '*.png' {
-  const content: string
-  export default content
-}
-
-declare module '*.jpg' {
-  const content: string
-  export default content
-}
-
-declare module '*.jpeg' {
-  const content: string
-  export default content
-}
-
-declare module '*.gif' {
-  const content: string
-  export default content
-}
-
-declare module '*.webp' {
-  const content: string
-  export default content
-}

package/src/utils/index.ts

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

package/src/utils/umask.ts

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