tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/auth/RegisterForm.tsx

@@ -0,0 +1,333 @@
+import { useT } from '../ui/I18nProvider'
+import React, { useEffect, useMemo, useState, type FC, type FormEvent } from 'react'
+import { PhoneInput, type CountryIso2 } from 'react-international-phone'
+
+import {
+  hooks,
+  type AuthFieldErrors,
+  type AuthFieldName,
+  type AuthRegistrationInput,
+} from 'tf-checkout-shared'
+
+import { Button } from '../ui/Button'
+import { Field, FieldRow, Input, Select } from '../ui/Field'
+import { PasswordInput } from './PasswordInput'
+
+export interface RegisterFormProps {
+  initialEmail?: string
+  errors?: AuthFieldErrors
+  error?: string
+  loading?: boolean
+  requireAddress?: boolean
+  onSubmit: (
+    input: AuthRegistrationInput,
+    options: { requireState: boolean }
+  ) => void | Promise<unknown>
+  onFieldChange?: (field: AuthFieldName) => void
+}
+
+const emptyRegistration = (email: string): AuthRegistrationInput => ({
+  firstName: '',
+  lastName: '',
+  email,
+  password: '',
+  passwordConfirmation: '',
+  phone: '',
+  streetAddress: '',
+  city: '',
+  zip: '',
+  countryId: '',
+  stateId: '',
+})
+
+/** Legacy-compatible account fields with no API or validation logic inside. */
+export const RegisterForm: FC<RegisterFormProps> = ({
+  initialEmail = '',
+  errors = {},
+  error,
+  loading = false,
+  requireAddress = true,
+  onSubmit,
+  onFieldChange,
+}) => {
+  const t = useT()
+  const [values, setValues] = useState<AuthRegistrationInput>(() =>
+    emptyRegistration(initialEmail)
+  )
+  const countriesQuery = hooks.useCountries()
+  const countries = useMemo(() => countriesQuery.data ?? [], [countriesQuery.data])
+  const statesQuery = hooks.useStates(values.countryId, {
+    enabled: requireAddress && Boolean(values.countryId),
+  })
+  const states = useMemo(() => statesQuery.data ?? [], [statesQuery.data])
+
+  useEffect(() => {
+    if (initialEmail && !values.email)
+      setValues((current) => ({ ...current, email: initialEmail }))
+  }, [initialEmail, values.email])
+
+  // The old form defaults to the US. Resolve it by ISO code rather than the
+  // old hard-coded country id so this remains backend/environment safe.
+  useEffect(() => {
+    if (!requireAddress || values.countryId || countries.length === 0) return
+    const preferred =
+      countries.find((country) => country.code?.toLowerCase() === 'us') ?? countries[0]
+    setValues((current) => ({
+      ...current,
+      countryId: String(preferred.id),
+      phone:
+        current.phone || (preferred.code?.toLowerCase() === 'us' ? '+1' : current.phone),
+    }))
+  }, [countries, requireAddress, values.countryId])
+
+  const patch = (next: Partial<AuthRegistrationInput>) =>
+    setValues((current) => ({ ...current, ...next }))
+  const setField = (field: AuthFieldName, value: string) => {
+    setValues((current) => ({ ...current, [field]: value }))
+    onFieldChange?.(field)
+  }
+
+  const selectedCountry = countries.find(
+    (country) => String(country.id) === String(values.countryId)
+  )
+  const phoneCountry = (selectedCountry?.code?.toLowerCase() ?? 'us') as CountryIso2
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault()
+    void onSubmit(values, { requireState: states.length > 0 })
+  }
+
+  return (
+    <form
+      className="tf-checkout-auth__form tf-checkout-auth__form--register"
+      onSubmit={submit}
+      noValidate
+    >
+      {error && (
+        <div className="tf-checkout-auth__alert" role="alert">
+          {error}
+        </div>
+      )}
+
+      <FieldRow>
+        <Field
+          className="tf-checkout-auth__input-field"
+          label={t('auth.firstName')}
+          error={errors.firstName}
+        >
+          <Input
+            name="firstName"
+            placeholder={t('auth.firstNamePlaceholder')}
+            autoComplete="given-name"
+            autoFocus
+            required
+            value={values.firstName}
+            invalid={Boolean(errors.firstName)}
+            onChange={(event) => setField('firstName', event.target.value)}
+          />
+        </Field>
+        <Field
+          className="tf-checkout-auth__input-field"
+          label={t('auth.lastName')}
+          error={errors.lastName}
+        >
+          <Input
+            name="lastName"
+            placeholder={t('auth.lastNamePlaceholder')}
+            autoComplete="family-name"
+            required
+            value={values.lastName}
+            invalid={Boolean(errors.lastName)}
+            onChange={(event) => setField('lastName', event.target.value)}
+          />
+        </Field>
+      </FieldRow>
+
+      {requireAddress ? (
+        <>
+          <FieldRow>
+            <Field
+              className="tf-checkout-auth__input-field"
+              label={t('auth.email')}
+              error={errors.email}
+            >
+              <Input
+                type="email"
+                name="email"
+                placeholder={t('auth.emailPlaceholder')}
+                autoComplete="email"
+                required
+                value={values.email}
+                invalid={Boolean(errors.email)}
+                onChange={(event) => setField('email', event.target.value)}
+              />
+            </Field>
+            <Field
+              className="tf-checkout-auth__input-field"
+              label={t('auth.streetAddress')}
+              error={errors.streetAddress}
+            >
+              <Input
+                name="streetAddress"
+                placeholder={t('auth.streetAddressPlaceholder')}
+                autoComplete="street-address"
+                required
+                value={values.streetAddress}
+                invalid={Boolean(errors.streetAddress)}
+                onChange={(event) => setField('streetAddress', event.target.value)}
+              />
+            </Field>
+          </FieldRow>
+          <FieldRow>
+            <Field
+              className="tf-checkout-auth__input-field"
+              label={t('auth.postcode')}
+              error={errors.zip}
+            >
+              <Input
+                name="zip"
+                placeholder={t('auth.postcodePlaceholder')}
+                autoComplete="postal-code"
+                required
+                value={values.zip}
+                invalid={Boolean(errors.zip)}
+                onChange={(event) => setField('zip', event.target.value)}
+              />
+            </Field>
+            <Field
+              className="tf-checkout-auth__select-field"
+              label={t('auth.country')}
+              error={errors.countryId}
+            >
+              <Select
+                name="countryId"
+                autoComplete="country"
+                required
+                value={values.countryId}
+                invalid={Boolean(errors.countryId)}
+                onChange={(event) => {
+                  patch({ countryId: event.target.value, stateId: '' })
+                  onFieldChange?.('countryId')
+                  onFieldChange?.('stateId')
+                }}
+              >
+                <option value="">{t('auth.selectCountry')}</option>
+                {countries.map((country) => (
+                  <option key={country.id} value={country.id}>
+                    {country.name}
+                  </option>
+                ))}
+              </Select>
+            </Field>
+          </FieldRow>
+          <FieldRow>
+            <Field
+              className="tf-checkout-auth__select-field"
+              label={t('auth.state')}
+              error={errors.stateId}
+            >
+              <Select
+                name="stateId"
+                autoComplete="address-level1"
+                value={values.stateId}
+                disabled={!values.countryId || states.length === 0}
+                required={states.length > 0}
+                invalid={Boolean(errors.stateId)}
+                onChange={(event) => setField('stateId', event.target.value)}
+              >
+                <option value="">
+                  {states.length > 0 ? 'Select state / region' : 'Not required'}
+                </option>
+                {states.map((state) => (
+                  <option key={state.id} value={state.id}>
+                    {state.name}
+                  </option>
+                ))}
+              </Select>
+            </Field>
+            <Field
+              className="tf-checkout-auth__input-field"
+              label={t('auth.city')}
+              error={errors.city}
+            >
+              <Input
+                name="city"
+                placeholder={t('auth.cityPlaceholder')}
+                autoComplete="address-level2"
+                required
+                value={values.city}
+                invalid={Boolean(errors.city)}
+                onChange={(event) => setField('city', event.target.value)}
+              />
+            </Field>
+          </FieldRow>
+        </>
+      ) : (
+        <Field
+          className="tf-checkout-auth__input-field"
+          label={t('auth.email')}
+          error={errors.email}
+        >
+          <Input
+            type="email"
+            name="email"
+            placeholder={t('auth.emailPlaceholder')}
+            autoComplete="email"
+            required
+            value={values.email}
+            invalid={Boolean(errors.email)}
+            onChange={(event) => setField('email', event.target.value)}
+          />
+        </Field>
+      )}
+
+      <Field className="tf-checkout-auth__phone-field" label={t('auth.phone')}>
+        <PhoneInput
+          className="tf-checkout-phone"
+          inputClassName="tf-checkout-input tf-checkout-phone__input"
+          defaultCountry={phoneCountry}
+          value={values.phone ?? ''}
+          placeholder=""
+          inputProps={{ autoComplete: 'tel', 'aria-label': 'Phone' }}
+          onChange={(phone) => setField('phone', phone)}
+        />
+      </Field>
+
+      <FieldRow>
+        <Field
+          className="tf-checkout-auth__input-field"
+          label={t('auth.password')}
+          error={errors.password}
+        >
+          <PasswordInput
+            name="password"
+            placeholder={t('auth.passwordPlaceholder')}
+            autoComplete="new-password"
+            required
+            value={values.password}
+            invalid={Boolean(errors.password)}
+            onChange={(event) => setField('password', event.target.value)}
+          />
+        </Field>
+        <Field
+          className="tf-checkout-auth__input-field"
+          label={t('auth.confirmPassword')}
+          error={errors.passwordConfirmation}
+        >
+          <PasswordInput
+            name="passwordConfirmation"
+            placeholder={t('auth.confirmPasswordPlaceholder')}
+            autoComplete="new-password"
+            required
+            value={values.passwordConfirmation}
+            invalid={Boolean(errors.passwordConfirmation)}
+            onChange={(event) => setField('passwordConfirmation', event.target.value)}
+          />
+        </Field>
+      </FieldRow>
+      <Button type="submit" block loading={loading}>
+        Create Account
+      </Button>
+    </form>
+  )
+}

package/src/auth/ResetPasswordForm.tsx

@@ -0,0 +1,112 @@
+import { useT } from '../ui/I18nProvider'
+import React, { useMemo, useState, type FC, type FormEvent } from 'react'
+
+import { errorMessage, hooks } from 'tf-checkout-shared'
+
+import { Button } from '../ui/Button'
+import { Field, Input } from '../ui/Field'
+
+export interface ResetPasswordFormProps {
+  /** Token from the password-reset email. */
+  token: string
+  onSuccess?: () => void
+  onBackToLogin?: () => void
+}
+
+/** Complete the password-reset flow started by `<ForgotPasswordForm/>`. */
+export const ResetPasswordForm: FC<ResetPasswordFormProps> = ({
+  token,
+  onSuccess,
+  onBackToLogin,
+}) => {
+  const t = useT()
+  const [password, setPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+  const [success, setSuccess] = useState(false)
+
+  const validation = useMemo(() => {
+    if (!submitted) return {}
+    return {
+      token: token ? '' : 'This password-reset link is missing its token.',
+      password:
+        password.length < 8
+          ? 'Password must have at least 8 characters.'
+          : !/[@$!%*#?&]/.test(password)
+            ? 'Password must contain at least one special character.'
+            : '',
+      confirmation: password !== confirmation ? 'Passwords must match.' : '',
+    }
+  }, [confirmation, password, submitted, token])
+
+  const reset = hooks.useResetPassword({
+    onSuccess: () => {
+      setSuccess(true)
+      onSuccess?.()
+    },
+  })
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault()
+    setSubmitted(true)
+    const passwordValid = password.length >= 8 && /[@$!%*#?&]/.test(password)
+    if (!token || !passwordValid || password !== confirmation) return
+    reset.mutate({ token, password, passwordConfirmation: confirmation })
+  }
+
+  if (success) {
+    return (
+      <div className="tf-checkout-auth__form">
+        <div className="tf-checkout-auth__success" role="status">
+          Your password has been changed. You can now log in.
+        </div>
+        {onBackToLogin && (
+          <Button type="button" block onClick={onBackToLogin}>
+            Log in
+          </Button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <form className="tf-checkout-auth__form" onSubmit={submit} noValidate>
+      <h2 className="tf-checkout-auth__title">{t('auth.changePassword')}</h2>
+      {validation.token && (
+        <div className="tf-checkout-auth__alert" role="alert">
+          {validation.token}
+        </div>
+      )}
+      {reset.error && (
+        <div className="tf-checkout-auth__alert" role="alert">
+          {errorMessage(reset.error)}
+        </div>
+      )}
+      <Field label={t('auth.newPassword')} error={validation.password}>
+        <Input
+          type="password"
+          name="password"
+          autoComplete="new-password"
+          required
+          value={password}
+          invalid={Boolean(validation.password)}
+          onChange={(event) => setPassword(event.target.value)}
+        />
+      </Field>
+      <Field label={t('auth.confirmPassword')} error={validation.confirmation}>
+        <Input
+          type="password"
+          name="password_confirmation"
+          autoComplete="new-password"
+          required
+          value={confirmation}
+          invalid={Boolean(validation.confirmation)}
+          onChange={(event) => setConfirmation(event.target.value)}
+        />
+      </Field>
+      <Button type="submit" block loading={reset.isPending} disabled={!token}>
+        Submit
+      </Button>
+    </form>
+  )
+}

package/src/auth/index.ts

@@ -0,0 +1,5 @@
+export { AuthModal, type AuthModalProps } from './AuthModal'
+export { LoginForm, type LoginFormProps } from './LoginForm'
+export { RegisterForm, type RegisterFormProps } from './RegisterForm'
+export { ForgotPasswordForm, type ForgotPasswordFormProps } from './ForgotPasswordForm'
+export { ResetPasswordForm, type ResetPasswordFormProps } from './ResetPasswordForm'

package/src/checkout.css

@@ -0,0 +1,17 @@
+/*
+ * Public checkout stylesheet entry point.
+ *
+ * Feature styles live in small, responsibility-based files. Keep this import
+ * order stable: it preserves the checkout's existing cascade and public
+ * `tf-checkout-*` override contract for white-label consumers.
+ */
+@import './styles/foundation.css';
+@import './styles/primitives.css';
+@import './styles/tickets.css';
+@import './styles/payment.css';
+@import './styles/confirmation.css';
+@import './styles/billing.css';
+@import './styles/auth.css';
+@import './styles/addons.css';
+@import './styles/verification-confirmation.css';
+@import './styles/seat-map.css';

package/src/configure.ts

@@ -0,0 +1,29 @@
+/**
+ * One-time SDK setup for the web. Wraps the shared `configure()` and defaults
+ * the storage adapter to `localStorage` (SSR-safe — no-ops on the server). Call
+ * once at app start, before any `useCheckout`/`ttf` call:
+ *
+ *   configureCheckout({ env: 'PROD', clientId, clientSecret })
+ */
+import {
+  configure,
+  type StorageAdapter,
+  type TtfConfig,
+} from 'tf-checkout-shared'
+
+const isBrowser =
+  typeof window !== 'undefined' && typeof window.localStorage !== 'undefined'
+
+/** localStorage-backed token storage. No-ops on the server (SSR). */
+export const localStorageAdapter: StorageAdapter = {
+  getItem: (key) => (isBrowser ? window.localStorage.getItem(key) : null),
+  setItem: (key, value) => {
+    if (isBrowser) window.localStorage.setItem(key, value)
+  },
+  removeItem: (key) => {
+    if (isBrowser) window.localStorage.removeItem(key)
+  },
+}
+
+export const configureCheckout = (config: TtfConfig): void =>
+  configure({ storage: localStorageAdapter, ...config })