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

package/src/styles/tickets.css

@@ -0,0 +1,285 @@
+/* ============================ Tickets section ============================ */
+.tf-checkout-tickets__loading {
+  display: grid;
+  min-height: 160px;
+  place-items: center;
+  color: var(--tf-checkout-muted);
+}
+
+.tf-checkout-tickets__loading-spinner {
+  width: 36px;
+  height: 36px;
+  border-width: 3px;
+}
+
+.tf-checkout-tickets.tf-checkout-card {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.tf-checkout-tickets__row {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  min-height: 78px;
+  padding: 11px 0;
+  border: 0;
+}
+.tf-checkout-tickets__info {
+  flex: 1;
+  min-width: 0;
+}
+.tf-checkout-tickets__name {
+  display: flex;
+  align-items: baseline;
+  gap: var(--tf-checkout-space-2);
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1.25;
+}
+.tf-checkout-tickets__description-toggle {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  color: var(--tf-checkout-accent);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+}
+.tf-checkout-tickets__description {
+  margin: calc(-1 * var(--tf-checkout-space-2)) 0 var(--tf-checkout-space-3);
+  color: var(--tf-checkout-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.tf-checkout-tickets__description > :first-child {
+  margin-top: 0;
+}
+.tf-checkout-tickets__description > :last-child {
+  margin-bottom: 0;
+}
+/* Price block — bold amount, an optional struck original, a muted "(… with
+   fees)" sub-line, and a deposit tag for tables. Stacked like the old checkout. */
+.tf-checkout-tickets__price {
+  margin-top: 5px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.tf-checkout-tickets__old {
+  font-size: 13px;
+  color: var(--tf-checkout-muted);
+  text-decoration: line-through;
+}
+.tf-checkout-tickets__amount {
+  font-size: 17px;
+  line-height: 1.15;
+  font-weight: 800;
+  color: var(--tf-checkout-text);
+}
+.tf-checkout-tickets__amount--free {
+  color: var(--tf-checkout-text);
+  letter-spacing: 0.02em;
+}
+.tf-checkout-tickets__fees {
+  font-size: 14px;
+  line-height: 1.3;
+  color: var(--tf-checkout-text);
+}
+.tf-checkout-tickets__deposit {
+  margin-top: 2px;
+  font-size: 16px;
+  font-weight: 800;
+  letter-spacing: 0.03em;
+  color: var(--tf-checkout-text);
+}
+.tf-checkout-tickets__soldout {
+  font-size: 15px;
+  font-weight: 400;
+  color: var(--tf-checkout-text);
+  text-align: right;
+  white-space: nowrap;
+}
+/* "Tables" divider — groups table types below the regular tickets. */
+.tf-checkout-tickets__group {
+  margin: 14px 0 8px;
+  padding: 12px 16px;
+  border: 0;
+  border-radius: 4px;
+  background: var(--tf-checkout-surface-muted);
+  color: var(--tf-checkout-muted);
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  text-align: center;
+}
+/* Time-slot session heading */
+.tf-checkout-tickets__slot-time {
+  margin: var(--tf-checkout-space-3) 0 2px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--tf-checkout-accent);
+}
+/* Promo / access code */
+.tf-checkout-tickets__promo {
+  margin: 18px 0;
+}
+/* Promo/access toggle — a full-width secondary button, like the old checkout's
+   "Got a promo code?" bar (not a bare text link). */
+.tf-checkout-tickets__promo-toggle {
+  display: block;
+  width: 100%;
+  padding: 12px 16px;
+  border: 0;
+  border-radius: 0;
+  background: var(--tf-checkout-text);
+  color: var(--tf-checkout-surface);
+  font: inherit;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.12s, background 0.12s;
+}
+.tf-checkout-tickets__promo-toggle:hover {
+  background: color-mix(in srgb, var(--tf-checkout-text) 78%, var(--tf-checkout-surface));
+}
+.tf-checkout-tickets__wl-toggle {
+  border: 0;
+  background: transparent;
+  color: var(--tf-checkout-accent);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 4px 0;
+}
+/* Waiting list */
+.tf-checkout-tickets__wl {
+  margin: var(--tf-checkout-space-2) 0 var(--tf-checkout-space-3);
+  padding: var(--tf-checkout-space-3);
+  border-radius: var(--tf-checkout-radius-control);
+  background: var(--tf-checkout-surface-muted);
+}
+.tf-checkout-tickets__wl-done {
+  color: var(--tf-checkout-success);
+}
+/* Compact quantity dropdown (tickets + add-ons). */
+.tf-checkout-qty {
+  width: 70px;
+  height: 45px;
+  padding: 6px 12px;
+  font: inherit;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--tf-checkout-text);
+  background: var(--tf-checkout-surface);
+  border: 2px solid var(--tf-checkout-text);
+  border-radius: 0;
+  cursor: pointer;
+}
+.tf-checkout-qty:focus {
+  outline: none;
+  border-color: var(--tf-checkout-accent);
+}
+/* Quantity cell — the dropdown, prefixed with a "Guests" label on table types
+   (whose quantity is a guest count, not a ticket count). */
+.tf-checkout-tickets__qty {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+.tf-checkout-tickets__guests {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  color: var(--tf-checkout-text);
+}
+
+.tf-checkout-tickets > .tf-checkout-button {
+  min-height: 48px;
+  margin-top: 18px;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+@media (max-width: 520px) {
+  .tf-checkout-tickets__row {
+    gap: 12px;
+  }
+  .tf-checkout-qty {
+    width: 64px;
+  }
+}
+
+/* ============================ Timer banner ============================ */
+.tf-checkout-timerbanner {
+  position: fixed;
+  top: 125px;
+  right: 15px;
+  z-index: 9;
+  box-sizing: border-box;
+  width: min(300px, calc(100vw - 30px));
+  padding: 25px 42px 15px 50px;
+  overflow: hidden;
+  border-radius: 20px;
+  background: #000;
+  box-shadow: 0 0 12px rgb(0 0 0 / 38%);
+  color: #fff;
+  font-size: 13px;
+  line-height: 1.4;
+  pointer-events: auto;
+}
+.tf-checkout-timerbanner::before {
+  content: '!';
+  position: absolute;
+  top: 50%;
+  left: 17px;
+  display: grid;
+  width: 20px;
+  height: 20px;
+  place-items: center;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1;
+  transform: translateY(-50%);
+}
+.tf-checkout-timerbanner__msg {
+  display: block;
+}
+.tf-checkout-timerbanner__clock {
+  display: block;
+  margin-top: 10px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.tf-checkout-timerbanner--urgent {
+  color: #fff;
+}
+.tf-checkout-timerbanner__close {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  border: 0;
+  background: transparent;
+  color: #fff;
+  cursor: pointer;
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  opacity: 0.75;
+  padding: 1px 3px;
+}
+.tf-checkout-timerbanner__close:hover {
+  opacity: 1;
+}

package/src/styles/verification-confirmation.css

@@ -0,0 +1,258 @@
+/* ============================ ID verification ============================ */
+.tf-checkout-idverify__done {
+  color: var(--tf-checkout-success);
+  font-weight: 600;
+}
+
+.tf-checkout-confirmation-page__loading {
+  padding: 32px;
+  text-align: center;
+  color: var(--tf-checkout-muted);
+  display: grid;
+  min-height: 220px;
+  place-items: center;
+}
+
+.tf-checkout-loader--page {
+  width: 40px;
+  height: 40px;
+  border-width: 4px;
+}
+
+.tf-checkout-section-loader {
+  display: grid;
+  min-height: 96px;
+  color: var(--tf-checkout-muted);
+  place-items: center;
+}
+
+.tf-checkout-confirmation-page {
+  gap: 24px;
+}
+
+.tf-checkout-confirmation-page__header {
+  display: grid;
+  gap: 12px;
+  text-align: center;
+}
+
+.tf-checkout-confirmation-page__event {
+  display: grid;
+  gap: 4px;
+  padding: 16px 0;
+  border-top: 1px solid var(--tf-checkout-border);
+  border-bottom: 1px solid var(--tf-checkout-border);
+}
+
+.tf-checkout-confirmation-page__custom {
+  line-height: 1.5;
+}
+
+.tf-checkout-confirmation-page__rewards {
+  display: grid;
+  gap: 8px;
+}
+
+.tf-checkout-confirmation-page__rewards > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+/* Legacy-compatible confirmation structure. White-labels that already style
+ * these selectors keep their proven UX; unstyled consumers get the same clean
+ * two-column confirmation and referral layout by default. */
+.tf-checkout .confirmation-page {
+  width: 100%;
+  max-width: 960px;
+  margin: 20px auto 30px;
+  padding: 20px;
+  overflow: hidden;
+  color: var(--tf-checkout-text);
+  font-family: var(--tf-checkout-font);
+  font-weight: 300;
+  text-align: center;
+}
+.tf-checkout .confirmation-page .header-container {
+  display: flex;
+  width: 100%;
+  padding: 16px;
+  border-radius: var(--tf-checkout-radius-card);
+}
+.tf-checkout .confirmation-page .header-product-text {
+  width: 100%;
+  text-align: left;
+}
+.tf-checkout .confirmation-page .title {
+  margin: 8px 0;
+  font-size: 22px;
+  font-weight: 600;
+}
+.tf-checkout .confirmation-page .event-details {
+  margin: 20px 0;
+  padding: 15px 0;
+  border-top: 1px solid var(--tf-checkout-border);
+  border-bottom: 1px solid var(--tf-checkout-border);
+}
+.tf-checkout .confirmation-page .event-title {
+  margin-bottom: 10px;
+  font-size: 18px;
+  font-weight: 700;
+}
+.tf-checkout .confirmation-page .event-date,
+.tf-checkout .confirmation-page .event-location {
+  color: var(--tf-checkout-muted);
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+.tf-checkout .confirmation-page .share-message-section {
+  line-height: 20px;
+}
+.tf-checkout .confirmation-page .main,
+.tf-checkout .confirmation-page .helper {
+  display: block;
+}
+.tf-checkout .confirmation-page .helper {
+  margin-top: 4px;
+}
+.tf-checkout .confirmation-page .order-details-button-container {
+  margin: 10px;
+}
+.tf-checkout .confirmation-page .view-order-button {
+  display: inline-block;
+  min-width: 150px;
+  padding: 10px 18px;
+  border-radius: var(--tf-checkout-radius-control);
+  background: var(--tf-checkout-text);
+  color: var(--tf-checkout-surface);
+  font-weight: 600;
+  line-height: 1.75;
+  text-decoration: none;
+}
+.tf-checkout .confirmation-page .referral_text_image_section {
+  width: 55%;
+  margin-top: 28px;
+  text-align: left;
+}
+.tf-checkout .confirmation-page .referral_title_text {
+  font-size: 31px;
+  font-weight: 500;
+}
+.tf-checkout .confirmation-page .strong-text {
+  font-weight: 700;
+}
+.tf-checkout .confirmation-page .referral_text {
+  margin: 8px 0;
+  color: var(--tf-checkout-muted);
+}
+.tf-checkout .confirmation-page .invitation_section {
+  float: left;
+  width: 55%;
+  text-align: left;
+}
+.tf-checkout .confirmation-page .invitation_title {
+  margin: 17px 32px 21px;
+  font-size: 22px;
+  font-weight: 600;
+  text-align: center;
+}
+.tf-checkout .confirmation-page .share-by-link {
+  display: flex;
+  align-items: center;
+}
+.tf-checkout .confirmation-page .share-by-link.label {
+  color: var(--tf-checkout-muted);
+  font-size: 16px;
+  font-weight: 400;
+}
+.tf-checkout .confirmation-page .share-btn-inner {
+  display: flex;
+  width: 71%;
+  margin-left: 12px;
+}
+.tf-checkout .confirmation-page .share-input {
+  width: 100%;
+  min-width: 180px;
+  height: 40px;
+  padding: 0 10px;
+  border: 1px dashed var(--tf-checkout-border);
+  background: var(--tf-checkout-surface);
+  color: var(--tf-checkout-muted);
+  font: inherit;
+}
+.tf-checkout .confirmation-page .share-by-link-copy-icon {
+  height: 40px;
+  padding: 0 22px;
+  border: 0;
+  border-radius: 0 4px 4px 0;
+  background: #3bb599;
+  color: #fff;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.tf-checkout .confirmation-page .pricing-section {
+  float: right;
+  width: 36%;
+  margin-top: -157px;
+  padding-bottom: 30px;
+  text-align: right;
+}
+.tf-checkout .confirmation-page .pricing-section_wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  font-size: 16px;
+  text-align: left;
+}
+.tf-checkout .confirmation-page .pricing-section_label {
+  max-width: 145px;
+  margin-right: 14px;
+  font-size: 16px;
+  font-weight: 600;
+}
+.tf-checkout .confirmation-page .pricing-section_sublabel {
+  font-size: 13px;
+  font-weight: 400;
+}
+.tf-checkout .confirmation-page .pricing-section_price {
+  margin-left: auto;
+  font-size: 20px;
+  font-weight: 700;
+}
+.tf-checkout .confirmation-page .social-media-btns {
+  display: flex;
+  gap: 4px;
+  margin: 13px 0;
+}
+.tf-checkout .confirmation-page .social-media-sharing {
+  padding: 9px 18px;
+  border-radius: 5px;
+  background: #1877f2;
+  color: #fff;
+  font-size: 12px;
+  text-decoration: none;
+}
+.tf-checkout .confirmation-page .social-media-sharing:nth-child(2) {
+  background: #25d366;
+}
+@media (max-width: 700px) {
+  .tf-checkout .confirmation-page .referral_text_image_section,
+  .tf-checkout .confirmation-page .invitation_section,
+  .tf-checkout .confirmation-page .pricing-section {
+    float: none;
+    width: 100%;
+  }
+  .tf-checkout .confirmation-page .pricing-section {
+    margin-top: 5px;
+  }
+  .tf-checkout .confirmation-page .share-by-link {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .tf-checkout .confirmation-page .share-btn-inner {
+    width: 100%;
+    margin-left: 0;
+  }
+}

package/src/typings.d.ts

@@ -1,4 +1,4 @@
 declare module '*.css' {
-  const content: {[className: string]: string}
+  const content: { [className: string]: string }
   export default content
-}
+}

package/src/ui/Button.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef, type ButtonHTMLAttributes } from 'react'
+
+import { cx } from './cx'
+import { Loader } from './Loader'
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual weight. */
+  variant?: 'primary' | 'secondary' | 'ghost'
+  /** Stretch to full width. */
+  block?: boolean
+  /** Show a spinner and disable. */
+  loading?: boolean
+}
+
+/** The one shared button — token-driven variants, loading state, `className`. */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { variant = 'primary', block, loading, className, disabled, children, ...rest },
+    ref
+  ) => (
+    <button
+      ref={ref}
+      type="button"
+      className={cx(
+        'tf-checkout-button',
+        `tf-checkout-button--${variant}`,
+        block && 'tf-checkout-button--block',
+        className
+      )}
+      disabled={disabled || loading}
+      {...rest}
+    >
+      {loading && <Loader />}
+      {children}
+    </button>
+  )
+)
+Button.displayName = 'Button'

package/src/ui/Card.tsx

@@ -0,0 +1,54 @@
+/**
+ * `Card` + `SectionHeader` — the shell every checkout section shares: a rounded
+ * surface with a numbered step badge, a title, and optional right-aligned pills
+ * (totals, a countdown, a loading chip). Keeps all sections visually identical
+ * without each re-authoring the header markup.
+ */
+import React, { type FC, type HTMLAttributes, type ReactNode } from 'react'
+
+import { cx } from './cx'
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
+
+/** A themed surface (`.tf-checkout-card`). Spreads through any div props. */
+export const Card: FC<CardProps> = ({ className, children, ...rest }) => (
+  <div className={cx('tf-checkout-card', className)} {...rest}>
+    {children}
+  </div>
+)
+
+export interface SectionHeaderProps {
+  /** Badge content — a step number, an icon, `✓`. Omit for no badge. */
+  step?: ReactNode
+  title: ReactNode
+  /** Right-aligned chips (total, timer, "loading…"). */
+  pills?: ReactNode
+  className?: string
+}
+
+export const SectionHeader: FC<SectionHeaderProps> = ({
+  step,
+  title,
+  pills,
+  className,
+}) => (
+  <div className={cx('tf-checkout-card__header', className)}>
+    {step != null && <span className="tf-checkout-card__step">{step}</span>}
+    <span className="tf-checkout-card__title">{title}</span>
+    {pills != null && <span className="tf-checkout-card__pills">{pills}</span>}
+  </div>
+)
+
+/** A single right-aligned chip for a `SectionHeader`'s `pills`. */
+export const Pill: FC<{ muted?: boolean; children: ReactNode }> = ({
+  muted,
+  children,
+}) => (
+  <span
+    className={cx('tf-checkout-card__pill', muted && 'tf-checkout-card__pill--muted')}
+  >
+    {children}
+  </span>
+)