tf-checkout-react 1.7.31 → 2.0.0-beta.1

package/src/ui/PaymentMethods.tsx

@@ -0,0 +1,133 @@
+/**
+ * `<PaymentMethods>` — a controlled radio-list of payment methods (icon + label
+ * per row), matching the hosted checkout's iconed selector. Presentational only:
+ * it renders the choices + the selected row's extra input (and hosts a card
+ * field in the card row via `children`/`inputSlotFor`). It does NOT own the Pay
+ * button or `placeOrder` — `<Payment/>` builds the options and maps a selection
+ * back to a `placeOrder` request.
+ */
+import React, { type FC, type ReactNode } from 'react'
+
+import { cx } from './cx'
+import { Field, Input } from './Field'
+
+// The method descriptor + row shape live in the SDK so both platforms render
+// the SAME option list. Imported for local use and re-exported for consumers
+// that already import them from here.
+import type {
+  PaymentMethodId,
+  PaymentMethodOption,
+} from 'tf-checkout-shared'
+
+export type { PaymentMethodId, PaymentMethodOption }
+
+export interface PaymentMethodsProps {
+  options: PaymentMethodOption[]
+  /** Selected `option.value` (controlled). */
+  selected: string
+  onSelect: (value: string) => void
+  /** Extra-field values keyed by `option.value`. */
+  extraValues: Record<string, { cashtag?: string; phoneNumber?: string }>
+  onExtraChange: (
+    value: string,
+    patch: { cashtag?: string; phoneNumber?: string }
+  ) => void
+  /** Reveal required extra-field errors after the buyer attempts payment. */
+  showValidation?: boolean
+  /** Rendered inside the row whose `value === inputSlotFor` (e.g. `<CardInput/>`). */
+  children?: ReactNode
+  inputSlotFor?: string
+  className?: string
+}
+
+const EXTRA_LABEL: Record<'cashtag' | 'phoneNumber', string> = {
+  cashtag: 'Jenius $cashtag',
+  phoneNumber: 'OVO phone number',
+}
+
+export const PaymentMethods: FC<PaymentMethodsProps> = ({
+  options,
+  selected,
+  onSelect,
+  extraValues,
+  onExtraChange,
+  showValidation = false,
+  children,
+  inputSlotFor,
+  className,
+}) => (
+  <div
+    className={cx('tf-checkout-payment__methods', className)}
+    role="radiogroup"
+    aria-label="Payment method"
+  >
+    {options.map((o) => {
+      const isSelected = o.value === selected
+      const extraValue =
+        o.extra === 'phoneNumber'
+          ? extraValues[o.value]?.phoneNumber
+          : extraValues[o.value]?.cashtag
+      const extraInvalid =
+        Boolean(isSelected && o.extra && showValidation) && !extraValue?.trim()
+      return (
+        <label
+          key={o.value}
+          className={cx(
+            'tf-checkout-payment__method',
+            isSelected && 'tf-checkout-payment__method--selected'
+          )}
+        >
+          <span className="tf-checkout-payment__method-head">
+            <input
+              type="radio"
+              name="tf-pay-method"
+              className="tf-checkout-payment__method-radio"
+              checked={isSelected}
+              onChange={() => onSelect(o.value)}
+            />
+            {o.iconUrl && (
+              <img className="tf-checkout-payment__method-icon" src={o.iconUrl} alt="" />
+            )}
+            <span className="tf-checkout-payment__method-label">{o.label}</span>
+          </span>
+
+          {isSelected && (o.value === inputSlotFor || o.extra) && (
+            <div className="tf-checkout-payment__method-body">
+              {o.value === inputSlotFor && children}
+              {o.extra && (
+                <Field
+                  label={`${EXTRA_LABEL[o.extra]} *`}
+                  error={extraInvalid ? 'This field is required.' : undefined}
+                  invalid={extraInvalid}
+                >
+                  <Input
+                    inputMode={o.extra === 'phoneNumber' ? 'tel' : 'text'}
+                    required
+                    invalid={extraInvalid}
+                    aria-invalid={extraInvalid}
+                    placeholder={
+                      o.extra === 'phoneNumber' ? 'e.g. 081234567890' : '$cashtag'
+                    }
+                    value={
+                      o.extra === 'phoneNumber'
+                        ? (extraValues[o.value]?.phoneNumber ?? '')
+                        : (extraValues[o.value]?.cashtag ?? '')
+                    }
+                    onChange={(e) =>
+                      onExtraChange(
+                        o.value,
+                        o.extra === 'phoneNumber'
+                          ? { phoneNumber: e.target.value }
+                          : { cashtag: e.target.value }
+                      )
+                    }
+                  />
+                </Field>
+              )}
+            </div>
+          )}
+        </label>
+      )
+    })}
+  </div>
+)

package/src/ui/PriceLine.tsx

@@ -0,0 +1,24 @@
+import React, { type FC, type ReactNode } from 'react'
+
+import { cx } from './cx'
+
+/** A price with optional struck-through original + a fees/deposit note. */
+export const PriceLine: FC<{
+  currency?: string
+  amount: number | string
+  /** Struck-through pre-discount price. */
+  original?: number | string
+  /** e.g. "incl. fees" or "50% deposit". */
+  note?: ReactNode
+  className?: string
+}> = ({ currency, amount, original, note, className }) => (
+  <span className={cx('tf-checkout-price', className)}>
+    {original != null && (
+      <span className="tf-checkout-price__original">
+        {currency} {original}
+      </span>
+    )}
+    {currency} {amount}
+    {note != null && <span className="tf-checkout-price__fees">{note}</span>}
+  </span>
+)

package/src/ui/QuantitySelect.tsx

@@ -0,0 +1,50 @@
+/**
+ * `<QuantitySelect>` — a compact quantity dropdown (0…max), the control the old
+ * checkout used for tickets and add-ons (not a +/- stepper).
+ */
+import React, { type FC } from 'react'
+
+import { cx } from './cx'
+
+export interface QuantitySelectProps {
+  value: number
+  onChange: (value: number) => void
+  /** Minimum purchasable quantity when buying (0 = none is always allowed). */
+  min?: number
+  max?: number
+  /** Step between options (the old checkout's `multiplier`). */
+  step?: number
+  disabled?: boolean
+  className?: string
+}
+
+export const QuantitySelect: FC<QuantitySelectProps> = ({
+  value,
+  onChange,
+  min = 0,
+  max = 10,
+  step = 1,
+  disabled,
+  className,
+}) => {
+  // 0 (buy none) is always offered; the first non-zero option honors the ticket's
+  // minimum, then steps up to the cap — so a min-2 type offers 0, 2, 3, … not 1.
+  const cap = Math.min(max, 50)
+  const lo = Math.max(1, min)
+  const options: number[] = [0]
+  for (let n = lo; n <= cap; n += step) options.push(n)
+  return (
+    <select
+      className={cx('tf-checkout-qty', className)}
+      value={value}
+      disabled={disabled}
+      onChange={(e) => onChange(Number(e.target.value))}
+    >
+      {options.map((n) => (
+        <option key={n} value={n}>
+          {n}
+        </option>
+      ))}
+    </select>
+  )
+}

package/src/ui/Stepper.tsx

@@ -0,0 +1,36 @@
+import React, { type FC } from 'react'
+
+import { cx } from './cx'
+
+/** Quantity ± control (ticket / add-on quantities). */
+export const Stepper: FC<{
+  value: number
+  onChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  className?: string
+}> = ({ value, onChange, min = 0, max = Infinity, step = 1, disabled, className }) => (
+  <div className={cx('tf-checkout-stepper', className)}>
+    <button
+      type="button"
+      className="tf-checkout-stepper__btn"
+      aria-label="Decrease"
+      disabled={disabled || value <= min}
+      onClick={() => onChange(Math.max(min, value - step))}
+    >
+      −
+    </button>
+    <span className="tf-checkout-stepper__value">{value}</span>
+    <button
+      type="button"
+      className="tf-checkout-stepper__btn"
+      aria-label="Increase"
+      disabled={disabled || value >= max}
+      onClick={() => onChange(Math.min(max, value + step))}
+    >
+      +
+    </button>
+  </div>
+)

package/src/ui/Timer.tsx

@@ -0,0 +1,34 @@
+import React, { type FC, type ReactNode } from 'react'
+
+import { cx } from './cx'
+
+const clock = (s: number) => {
+  const v = Math.max(0, Math.floor(s))
+  return v >= 3600
+    ? `${Math.floor(v / 3600)}:${String(Math.floor((v % 3600) / 60)).padStart(
+        2,
+        '0'
+      )}:${String(v % 60).padStart(2, '0')}`
+    : `${Math.floor(v / 60)}:${String(v % 60).padStart(2, '0')}`
+}
+
+/** Reservation countdown. Pass `checkout.secondsLeft`. */
+export const Timer: FC<{
+  seconds: number
+  /** Below this many seconds it turns urgent (default 60). */
+  urgentAt?: number
+  /** Text before the clock, e.g. "Reserved for". */
+  label?: ReactNode
+  className?: string
+}> = ({ seconds, urgentAt = 60, label, className }) => (
+  <span
+    className={cx(
+      'tf-checkout-timer',
+      seconds <= urgentAt && 'tf-checkout-timer--urgent',
+      className
+    )}
+  >
+    {label != null && <span>{label}</span>}
+    {clock(seconds)}
+  </span>
+)

package/src/ui/TimerBanner.tsx

@@ -0,0 +1,55 @@
+/**
+ * `<TimerBanner>` — the reservation countdown banner the old checkout showed at
+ * the top of the add-ons / billing / payment steps: "Please complete your
+ * purchase before the timer reaches zero." + mm:ss, with a dismiss X. Feed it
+ * `checkout.secondsLeft`. Renders nothing when there's no live reservation.
+ */
+import React, { useState, type FC } from 'react'
+
+import { cx } from './cx'
+
+const clock = (s: number) => {
+  const m = String(Math.floor(s / 60)).padStart(2, '0')
+  const ss = String(s % 60).padStart(2, '0')
+  return `${m}:${ss}`
+}
+
+export interface TimerBannerProps {
+  seconds?: number
+  /** Show red styling at/under this many seconds. Default 60. */
+  urgentAt?: number
+  message?: string
+  className?: string
+}
+
+export const TimerBanner: FC<TimerBannerProps> = ({
+  seconds,
+  urgentAt = 60,
+  message = 'Please complete your purchase before the timer reaches zero.',
+  className,
+}) => {
+  const [dismissed, setDismissed] = useState(false)
+  if (seconds === undefined || seconds <= 0 || dismissed) return null
+  const urgent = seconds <= urgentAt
+  return (
+    <div
+      role="status"
+      className={cx(
+        'tf-checkout-timerbanner',
+        urgent && 'tf-checkout-timerbanner--urgent',
+        className
+      )}
+    >
+      <span className="tf-checkout-timerbanner__msg">{message}</span>
+      <span className="tf-checkout-timerbanner__clock">{clock(seconds)}</span>
+      <button
+        type="button"
+        className="tf-checkout-timerbanner__close"
+        aria-label="Dismiss"
+        onClick={() => setDismissed(true)}
+      >
+        ×
+      </button>
+    </div>
+  )
+}

package/src/ui/cx.ts

@@ -0,0 +1,3 @@
+/** Join truthy class names (tiny, dependency-free). */
+export const cx = (...parts: Array<string | false | null | undefined>): string =>
+  parts.filter(Boolean).join(' ')

package/src/ui/index.ts

@@ -0,0 +1,54 @@
+/**
+ * tf-checkout UI kit — the themeable primitives every section composes.
+ * All scoped under `.tf-checkout`, all `tf-checkout-*` BEM classes, all take a
+ * `className`. Styles load automatically from the package entry point.
+ */
+export {
+  CheckoutProvider,
+  useCheckoutContext,
+  useCheckoutValidation,
+  type CheckoutProviderProps,
+} from './CheckoutProvider'
+export { themeToVars, type CheckoutTheme } from './theme'
+export { cx } from './cx'
+export {
+  Card,
+  SectionHeader,
+  Pill,
+  type CardProps,
+  type SectionHeaderProps,
+} from './Card'
+export { Button, type ButtonProps } from './Button'
+export {
+  Field,
+  FieldRow,
+  Input,
+  Textarea,
+  Select,
+  Checkbox,
+  type InputProps,
+  type TextareaProps,
+  type SelectProps,
+  type CheckboxProps,
+} from './Field'
+export {
+  CustomFieldInput,
+  CustomFieldGroupFields,
+  customFieldsComplete,
+  type CustomFieldInputProps,
+  type CustomFieldGroupFieldsProps,
+} from './CustomFields'
+export {
+  PaymentMethods,
+  type PaymentMethodsProps,
+  type PaymentMethodOption,
+  type PaymentMethodId,
+} from './PaymentMethods'
+export { Stepper } from './Stepper'
+export { QuantitySelect, type QuantitySelectProps } from './QuantitySelect'
+export { PriceLine } from './PriceLine'
+export { Timer } from './Timer'
+export { TimerBanner, type TimerBannerProps } from './TimerBanner'
+export { Loader } from './Loader'
+export { useInstallmentPicker } from './InstallmentPicker'
+export { I18nProvider, useT, type I18nProviderProps } from './I18nProvider'

package/src/ui/theme.ts

@@ -0,0 +1,83 @@
+/**
+ * The checkout theme — a structured, documented token set. Pass any subset to
+ * `<CheckoutProvider theme={…}>`; each token maps to a `--tf-checkout-*` CSS
+ * custom property that `checkout.css` (and every component) reads. Anything you
+ * omit falls back to the stylesheet default.
+ */
+import type { CSSProperties } from 'react'
+
+export interface CheckoutTheme {
+  /** `'dark'` adds the `tf-checkout--dark` class (dark default palette). */
+  colorScheme?: 'light' | 'dark'
+
+  // color
+  /** Primary color — buttons, step badges, focus ring, links. */
+  accent?: string
+  /** Hover state for `accent` (defaults near `accent`). */
+  accentHover?: string
+  /** Text/icon color on top of `accent`. */
+  accentContrast?: string
+  /** Card background. */
+  surface?: string
+  /** Subtle fill (summary rows, muted pills). */
+  surfaceMuted?: string
+  /** Primary text. */
+  text?: string
+  /** Secondary text (labels, "incl. fees", hints). */
+  muted?: string
+  /** Borders + dividers. */
+  border?: string
+  /** Error text + invalid field borders. */
+  error?: string
+  /** Success (confirmation check). */
+  success?: string
+
+  // shape
+  /** Corner radius for cards. */
+  radiusCard?: string
+  /** Corner radius for inputs / buttons. */
+  radiusControl?: string
+  /** Card shadow. */
+  shadow?: string
+
+  // type
+  /** Font family for the whole component tree. */
+  font?: string
+  /** Base font size (e.g. `15px`). */
+  fontSize?: string
+
+  // layout
+  /** Max width of the checkout column. */
+  maxWidth?: string
+}
+
+const MAP: Record<keyof Omit<CheckoutTheme, 'colorScheme'>, string> = {
+  accent: '--tf-checkout-accent',
+  accentHover: '--tf-checkout-accent-hover',
+  accentContrast: '--tf-checkout-accent-contrast',
+  surface: '--tf-checkout-surface',
+  surfaceMuted: '--tf-checkout-surface-muted',
+  text: '--tf-checkout-text',
+  muted: '--tf-checkout-muted',
+  border: '--tf-checkout-border',
+  error: '--tf-checkout-error',
+  success: '--tf-checkout-success',
+  radiusCard: '--tf-checkout-radius-card',
+  radiusControl: '--tf-checkout-radius-control',
+  shadow: '--tf-checkout-shadow',
+  font: '--tf-checkout-font',
+  fontSize: '--tf-checkout-font-size',
+  maxWidth: '--tf-checkout-max-width',
+}
+
+/** Turn a theme into inline `--tf-checkout-*` custom properties for the root. */
+export const themeToVars = (theme?: CheckoutTheme): CSSProperties => {
+  const out: Record<string, string> = {}
+  if (theme) {
+    for (const key of Object.keys(MAP) as (keyof typeof MAP)[]) {
+      const value = theme[key]
+      if (value != null) out[MAP[key]] = value
+    }
+  }
+  return out as CSSProperties
+}

package/src/useCheckout.ts

@@ -0,0 +1,35 @@
+/**
+ * Web `useCheckout` — a thin injector: the SDK's `useCheckout` with the web
+ * platform ports pre-wired (Stripe confirmer, popup provider page, inline
+ * Xendit). ALL the DX (countdown, isBusy, promo/referrer/waiting-list, auto ID
+ * verification, the flat snapshot) lives in the SDK's hook, so web and React
+ * Native share it — this file only supplies what's browser-specific.
+ *
+ *   configureCheckout({ env: 'PROD', clientId, clientSecret })  // once, at app start
+ *   const checkout = useCheckout()
+ *   await checkout.setTickets(eventId, selections)
+ *   checkout.setBilling(b)
+ *   await checkout.placeOrder('card')                           // <CardInput/> rendered
+ */
+import {
+  useCheckout as useSharedCheckout,
+  type CheckoutOptions,
+  type CheckoutPorts,
+  type UseCheckout,
+} from 'tf-checkout-shared'
+
+import { webConfirmer, webPorts } from './instance'
+
+export interface UseCheckoutOptions {
+  /** Extra platform ports merged over the web defaults — e.g. MSI's
+   *  `onInstallmentOffers` picker. Read once, at first render. */
+  ports?: Omit<CheckoutPorts, 'confirmer'>
+  /** Wallet/redirect engine options (merchant identity, redirect URL). */
+  options?: CheckoutOptions
+}
+
+export const useCheckout = (opts: UseCheckoutOptions = {}): UseCheckout =>
+  useSharedCheckout({
+    ports: { confirmer: webConfirmer, ...webPorts, ...opts.ports },
+    options: opts.options,
+  })