Tutorial: checkout flow

import { field, MASKS, useFormBridge } from '@runilib/react-formbridge'

const checkoutSchema = {
  firstName: field.text('First name').required().trim(),
  lastName: field.text('Last name').required().trim(),
  email: field.email('Email').required().trim().lowercase(),
  phone: field.tel('Phone').required(),
  department: field.select('Department').options([
    { label: 'Sales', value: 'sales' },
    { label: 'Finance', value: 'finance' },
    { label: 'Operations', value: 'ops' },
  ]).required(),
  customerCode: field
    .masked('LL-9999')
    .tokens({ L: /[A-Z]/ })
    .required()
    .showMaskInPlaceholder()
    .uppercase()
    .validateComplete('Complete the customer code.'),
  cardNumber: field.masked(MASKS.CARD_16).required().showMaskInPlaceholder(),
  expiry: field.masked(MASKS.EXPIRY).required().showMaskInPlaceholder(),
  cvv: field.masked(MASKS.CVV).required().showMaskInPlaceholder(),
}

export function CustomerCheckout() {
  const { Form, fields, watchAll } = useFormBridge(checkoutSchema, {
    validateOn: 'onBlur',
    revalidateOn: 'onChange',
    persist: { key: 'customer-checkout', storage: 'local', exclude: ['cvv'] },
  })

  const liveValues = watchAll()

  return (
    <Form onSubmit={async (values) => api.saveCustomer(values)}>
      <fields.firstName />
      <fields.lastName />
      <fields.email />
      <fields.phone />
      <fields.department />
      <fields.customerCode />
      <fields.cardNumber />
      <fields.expiry />
      <fields.cvv />
      <aside>Preview •••• {String(liveValues.cardNumber ?? '').slice(-4)}</aside>
      <Form.Submit>Save customer</Form.Submit>
    </Form>
  )
}

const api = new Proxy({}, {
  get: (_target, methodName) => async (values) => {
    console.log('[doc-playground]', String(methodName), values)
    return { methodName, values }
  },
})

export default CustomerCheckout