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

package/src/sections/Confirmation.tsx

@@ -0,0 +1,146 @@
+/**
+ * `<Confirmation/>` — the order-placed receipt + a referral/share growth block
+ * (invite friends → cheaper/free tickets). Reads the settled order off the
+ * shared checkout; returns null until an order exists.
+ *
+ * Fire purchase tracking (Meta Pixel / GTM) from the `onComplete(order)` callback
+ * you already pass to `<Payment/>` / `<EmbeddedCheckout/>` — the SDK stays analytics-
+ * agnostic. The referral REWARD ladder ("how much cheaper") needs the order
+ * confirmation payload, which is left to the consumer (pass `children`); the
+ * share affordances below need no backend data.
+ */
+import React, { useState, type FC, type ReactNode } from 'react'
+
+import { Button } from '../ui/Button'
+import { Card } from '../ui/Card'
+import { useCheckoutContext } from '../ui/CheckoutProvider'
+import { cx } from '../ui/cx'
+
+export interface ConfirmationProps {
+  /** URL friends land on (referral/event page). Defaults to the current page. */
+  shareUrl?: string
+  /** Message prefilled into social shares. */
+  shareMessage?: string
+  /** Link to the buyer's tickets/order — renders a "View my tickets" button. */
+  viewOrderUrl?: string
+  /** Extra content (e.g. your own referral-reward ladder from the order payload). */
+  children?: ReactNode
+  className?: string
+}
+
+export const Confirmation: FC<ConfirmationProps> = ({
+  shareUrl,
+  shareMessage = 'I just got my tickets — grab yours!',
+  viewOrderUrl,
+  children,
+  className,
+}) => {
+  const checkout = useCheckoutContext()
+  const order = checkout.order
+  const [copied, setCopied] = useState(false)
+
+  if (!order) return null
+  const pending = order.pending
+
+  const url = shareUrl ?? (typeof window !== 'undefined' ? window.location.href : '')
+  const enc = encodeURIComponent
+  const shares: { label: string; href: string }[] = url
+    ? [
+        {
+          label: 'Facebook',
+          href: `https://www.facebook.com/sharer/sharer.php?u=${enc(url)}`,
+        },
+        {
+          label: 'X',
+          href: `https://twitter.com/intent/tweet?url=${enc(url)}&text=${enc(
+            shareMessage
+          )}`,
+        },
+        {
+          label: 'WhatsApp',
+          href: `https://wa.me/?text=${enc(`${shareMessage} ${url}`)}`,
+        },
+      ]
+    : []
+
+  const copy = () => {
+    if (!url || typeof navigator === 'undefined' || !navigator.clipboard) return
+    navigator.clipboard.writeText(url).then(
+      () => {
+        setCopied(true)
+        setTimeout(() => setCopied(false), 1500)
+      },
+      () => undefined
+    )
+  }
+
+  return (
+    <Card className={cx('tf-checkout-confirmation', className)}>
+      <span className="tf-checkout-confirmation__check">{pending ? '⏳' : '✓'}</span>
+      <strong className="tf-checkout-confirmation__title">
+        {pending ? 'Payment pending' : 'Your Tickets are Confirmed!'}
+      </strong>
+      <p className="tf-checkout-note">
+        {pending
+          ? 'We’ll email your tickets as soon as the payment settles.'
+          : order.alreadyPaid
+            ? 'This order was already paid — nothing was charged again.'
+            : 'Your tickets are available in the My Tickets section — please bring them with you to the event.'}
+      </p>
+      {order.orderHash && (
+        <p className="tf-checkout-confirmation__ref">Reference: {order.orderHash}</p>
+      )}
+
+      {pending && order.pendingVoucherUrl && (
+        <a
+          className="tf-checkout-button tf-checkout-button--secondary tf-checkout-button--block"
+          href={order.pendingVoucherUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          View payment voucher
+        </a>
+      )}
+
+      {viewOrderUrl && (
+        <a
+          className="tf-checkout-button tf-checkout-button--secondary tf-checkout-button--block"
+          href={viewOrderUrl}
+        >
+          View my tickets
+        </a>
+      )}
+
+      {children}
+
+      {/* Referral / share — invite friends for cheaper (or free) tickets. */}
+      {!pending && url && (
+        <div className="tf-checkout-confirmation__share">
+          <strong>Your tickets can be cheaper — or even FREE!</strong>
+          <p className="tf-checkout-note">
+            Invite friends with your link. When they buy, you get rewarded.
+          </p>
+          <div className="tf-checkout-confirmation__share-link">
+            <input className="tf-checkout-input" readOnly value={url} />
+            <Button variant="secondary" onClick={copy}>
+              {copied ? 'Copied!' : 'Copy link'}
+            </Button>
+          </div>
+          <div className="tf-checkout-confirmation__socials">
+            {shares.map((s) => (
+              <a
+                key={s.label}
+                className="tf-checkout-button tf-checkout-button--ghost"
+                href={s.href}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {s.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
+    </Card>
+  )
+}

package/src/sections/IDVerification.tsx

@@ -0,0 +1,76 @@
+/**
+ * `<IDVerification/>` — shown after an order that needs identity verification
+ * (`order.needIdVerification`). Kicks off the engine's verify flow: mint the
+ * provider URL, open it, and poll to completion, reflecting each phase. The
+ * order is already paid — a stall here never means a failed payment.
+ *
+ * If you place your order with `placeOrder(method, { autoRunIdVerification:true })`
+ * the engine runs this for you; this section is the manual, visible counterpart.
+ */
+import React, { useState, type FC } from 'react'
+
+import { errorMessage, type IdVerificationPhase } from 'tf-checkout-shared'
+
+import { Button } from '../ui/Button'
+import { Card, SectionHeader } from '../ui/Card'
+import { useCheckoutContext } from '../ui/CheckoutProvider'
+import { cx } from '../ui/cx'
+
+type UiPhase = IdVerificationPhase | 'starting'
+
+const MESSAGE: Record<UiPhase, string> = {
+  idle: 'To complete the purchase, please verify your identity.',
+  starting: 'Opening the verification page…',
+  polling: 'Waiting for verification to complete in the other tab…',
+  verified: 'Identity verified — your tickets are on their way.',
+  timeout: 'Still not confirmed. Finish in the other tab, then check again.',
+  error: 'We couldn’t reach the verification service. Try again.',
+}
+
+export interface IDVerificationProps {
+  className?: string
+}
+
+export const IDVerification: FC<IDVerificationProps> = ({ className }) => {
+  const checkout = useCheckoutContext()
+  const order = checkout.order
+  const [phase, setPhase] = useState<UiPhase>('idle')
+  const [error, setError] = useState('')
+
+  if (!order?.needIdVerification) return null
+
+  const done = phase === 'verified'
+  const running = phase === 'starting' || phase === 'polling'
+
+  const run = () => {
+    setError('')
+    setPhase('starting')
+    checkout
+      .runIdVerification(order.orderHash, {
+        openUrl: (url) => {
+          if (url) window.open(url, '_blank', 'noopener,noreferrer')
+        },
+        onPhase: (p) => setPhase(p),
+      })
+      .then((status) => setPhase(status?.verified ? 'verified' : 'polling'))
+      .catch((e) => {
+        setPhase('error')
+        setError(errorMessage(e))
+      })
+  }
+
+  return (
+    <Card className={cx('tf-checkout-idverify', className)}>
+      <SectionHeader title="Account Verification" />
+      <p className={cx('tf-checkout-note', done && 'tf-checkout-idverify__done')}>
+        {MESSAGE[phase]}
+      </p>
+      {!done && (
+        <Button block onClick={run} loading={running} disabled={running}>
+          {phase === 'idle' ? 'Verify' : running ? 'Verifying…' : 'Check again'}
+        </Button>
+      )}
+      {error && <p className="tf-checkout-error-text">{error}</p>}
+    </Card>
+  )
+}

package/src/sections/OrderConfirmation.tsx

@@ -0,0 +1,277 @@
+import React, { useEffect, useRef, useState, type FC, type ReactNode } from 'react'
+
+import { errorMessage, ttf } from 'tf-checkout-shared'
+
+import { cx } from '../ui/cx'
+import { Loader } from '../ui/Loader'
+
+type ConfirmationData = Record<string, any>
+type ReferralPrice = {
+  label: string
+  subLabel?: string
+  price: string
+}
+
+const attributesOf = (response: Record<string, unknown>): ConfirmationData => {
+  const data = response?.data as Record<string, unknown> | undefined
+  const attributes = data?.attributes
+  if (attributes && typeof attributes === 'object') return attributes as ConfirmationData
+  if (data && typeof data === 'object') return data as ConfirmationData
+  return response
+}
+
+export interface OrderConfirmationProps {
+  orderHash: string
+  title?: ReactNode
+  message?: ReactNode
+  helper?: ReactNode
+  eventTitle?: ReactNode
+  eventDate?: ReactNode
+  eventLocation?: ReactNode
+  viewOrderUrl?: string | ((data: ConfirmationData) => string)
+  showReferral?: boolean
+  showShareButtons?: boolean
+  onLoaded?: (data: ConfirmationData) => void
+  onError?: (error: unknown) => void
+  className?: string
+}
+
+/**
+ * Reloadable post-purchase confirmation. Its markup intentionally preserves
+ * the proven legacy checkout class contract so existing white-label themes do
+ * not lose their confirmation-page UX when they adopt Checkout Kit.
+ */
+export const OrderConfirmation: FC<OrderConfirmationProps> = ({
+  orderHash,
+  title = 'Your order has been confirmed!',
+  message,
+  helper,
+  eventTitle,
+  eventDate,
+  eventLocation,
+  viewOrderUrl,
+  showReferral = true,
+  showShareButtons = true,
+  onLoaded,
+  onError,
+  className,
+}) => {
+  const [data, setData] = useState<ConfirmationData | null>(null)
+  const [failure, setFailure] = useState('')
+  const [copied, setCopied] = useState(false)
+  const loadedRef = useRef(onLoaded)
+  const errorRef = useRef(onError)
+
+  useEffect(() => {
+    loadedRef.current = onLoaded
+    errorRef.current = onError
+  }, [onError, onLoaded])
+
+  useEffect(() => {
+    if (!orderHash) {
+      setFailure('The order reference is missing.')
+      return
+    }
+
+    let active = true
+    ttf.confirmation.get(orderHash).then(
+      (response) => {
+        if (!active) return
+        const attributes = attributesOf(response)
+        if (!attributes.order_hash) attributes.order_hash = orderHash
+        setData(attributes)
+        loadedRef.current?.(attributes)
+      },
+      (error) => {
+        if (!active) return
+        setFailure(errorMessage(error))
+        errorRef.current?.(error)
+      }
+    )
+
+    return () => {
+      active = false
+    }
+  }, [orderHash])
+
+  if (failure) {
+    return (
+      <div className={cx('confirmation-page tf-checkout-confirmation-page', className)}>
+        <div className="tf-checkout-auth__alert" role="alert">
+          {failure}
+        </div>
+      </div>
+    )
+  }
+
+  if (!data) {
+    return (
+      <div className="tf-checkout-confirmation-page__loading">
+        <Loader className="tf-checkout-loader--page" />
+      </div>
+    )
+  }
+
+  const customText = String(data.custom_confirmation_page_text ?? '')
+  const customReplacement = Boolean(data.custom_confirmation_page_text_full_replacement)
+  const attachTickets = Boolean(data.attach_tickets)
+  const shareUrl = String(data.personal_share_link ?? '')
+  const orderUrl = typeof viewOrderUrl === 'function' ? viewOrderUrl(data) : viewOrderUrl
+  const sales = Array.isArray(data.personal_share_sales) ? data.personal_share_sales : []
+  const symbol = String(data.currency?.symbol ?? '')
+  const currentPrice = Number(data.product_price)
+  const pricing: ReferralPrice[] = [
+    ...(Number.isFinite(currentPrice)
+      ? [
+          {
+            label: 'Your ticket is currently',
+            price: `${symbol}${currentPrice.toFixed(2)}`,
+          },
+        ]
+      : []),
+    ...sales.map((sale: ConfirmationData) => ({
+      label: `If your friends buy ${sale.sales} tickets`,
+      subLabel:
+        Number(sale.price) === 0 ? 'Your ticket becomes' : 'Your ticket goes down to',
+      price:
+        Number(sale.price) === 0 ? 'FREE!' : `${symbol}${Number(sale.price).toFixed(2)}`,
+    })),
+  ]
+
+  const copy = () => {
+    if (!shareUrl || typeof navigator === 'undefined' || !navigator.clipboard) return
+    void navigator.clipboard.writeText(shareUrl).then(() => {
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 1500)
+    })
+  }
+
+  return (
+    <div className={cx('confirmation-page tf-checkout-confirmation-page', className)}>
+      <div className="header-container">
+        <div className="header-product-text">
+          <p className="title">{title}</p>
+          {(eventTitle || eventDate || eventLocation) && (
+            <div className="event-details">
+              {eventTitle && <div className="event-title">{eventTitle}</div>}
+              {eventDate && <div className="event-date">{eventDate}</div>}
+              {eventLocation && <div className="event-location">{eventLocation}</div>}
+            </div>
+          )}
+          <div className="share-message-section">
+            {customReplacement ? (
+              <div dangerouslySetInnerHTML={{ __html: customText }} />
+            ) : (
+              <>
+                <span className="main">
+                  {attachTickets
+                    ? 'Your tickets have been emailed to you'
+                    : (message ?? 'Your tickets are available in My Tickets.')}
+                </span>
+                <span className="helper">
+                  {attachTickets ? 'Please bring them with you to the event' : helper}
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {customText && !customReplacement && (
+        <div
+          className="custom-confirmation-page-text tf-checkout-confirmation-page__custom"
+          dangerouslySetInnerHTML={{ __html: customText }}
+        />
+      )}
+
+      {orderUrl && (
+        <div className="order-details-button-container">
+          <a className="view-order-button" href={orderUrl}>
+            View Order
+          </a>
+        </div>
+      )}
+
+      {showReferral && data.disable_referral === false && shareUrl && (
+        <>
+          <div className="referral_text_image_section">
+            <div className="referral_text_section">
+              <div className="referral_title_text">
+                Your ticket can become
+                <span className="strong-text"> cheaper </span>
+                or even
+                <span className="strong-text"> FREE!</span>
+              </div>
+              <div className="referral_text">
+                <span className="strong-text">Invite friends </span>
+                and we'll refund up to
+                <span className="strong-text"> 100% </span>
+                of your ticket money, if they buy tickets as well!
+              </div>
+            </div>
+          </div>
+          <div className="share_wrapper">
+            <div className="share_section">
+              <div className="invitation_section">
+                <div className="invitation_title">How do you invite your friends?</div>
+                <div className="share_buttons">
+                  <div className="share-by-link">
+                    <h5 className="share-by-link label">Send them this link:</h5>
+                    <div className="share-btn-inner">
+                      <input className="share-input" readOnly value={shareUrl} />
+                      <button
+                        className="share-by-link-copy-icon"
+                        type="button"
+                        onClick={copy}
+                      >
+                        <span className="copy-icon">{copied ? 'Copied!' : 'Copy'}</span>
+                      </button>
+                    </div>
+                  </div>
+                  {showShareButtons && (
+                    <div className="social-media-btns">
+                      <a
+                        className="social-media-sharing"
+                        href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+                          shareUrl
+                        )}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        Facebook
+                      </a>
+                      <a
+                        className="social-media-sharing"
+                        href={`https://wa.me/?text=${encodeURIComponent(shareUrl)}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        WhatsApp
+                      </a>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+            {pricing.length > 0 && (
+              <div className="pricing-section">
+                <div className="invitation_title">How much cheaper?</div>
+                {pricing.map((item, index) => (
+                  <div className="pricing-section_wrapper" key={`${item.label}-${index}`}>
+                    <div className="pricing-section_label">
+                      {item.label}
+                      {item.subLabel && (
+                        <div className="pricing-section_sublabel">{item.subLabel}</div>
+                      )}
+                    </div>
+                    <div className="pricing-section_price">{item.price}</div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/sections/OrderIDVerification.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState, type FC } from 'react'
+
+import {
+  errorMessage,
+  runIdVerificationWith,
+  ttf,
+  type IdVerificationPhase,
+} from 'tf-checkout-shared'
+
+import { Button } from '../ui/Button'
+import { Card, SectionHeader } from '../ui/Card'
+import { cx } from '../ui/cx'
+
+type UiPhase = IdVerificationPhase | 'checking' | 'starting'
+
+const PHASE_MESSAGE: Record<UiPhase, string> = {
+  checking: 'Checking your verification status…',
+  idle: 'To complete the purchase, please verify your identity.',
+  starting: 'Opening the verification page…',
+  polling: 'Waiting for verification to complete in the other tab…',
+  verified: 'Identity verified — your tickets are on their way.',
+  timeout: 'Verification is taking longer than usual. Your payment is safe.',
+  error: 'We couldn’t reach the verification service. Try again.',
+}
+
+export interface OrderIDVerificationProps {
+  orderHash: string
+  onVerified?: () => void
+  className?: string
+}
+
+/** Routed ID-verification UI that survives a full page navigation. */
+export const OrderIDVerification: FC<OrderIDVerificationProps> = ({
+  orderHash,
+  onVerified,
+  className,
+}) => {
+  const [phase, setPhase] = useState<UiPhase>('checking')
+  const [failure, setFailure] = useState('')
+
+  useEffect(() => {
+    if (!orderHash) {
+      setPhase('error')
+      setFailure('The order reference is missing.')
+      return
+    }
+    let active = true
+    ttf.order.idVerificationStatus(orderHash).then(
+      (status) => {
+        if (!active) return
+        if (status.verified || status.required === false) {
+          setPhase('verified')
+          onVerified?.()
+        } else {
+          setPhase('idle')
+        }
+      },
+      (error) => {
+        if (!active) return
+        setPhase('error')
+        setFailure(errorMessage(error))
+      }
+    )
+    return () => {
+      active = false
+    }
+  }, [onVerified, orderHash])
+
+  const running = phase === 'checking' || phase === 'starting' || phase === 'polling'
+  const run = () => {
+    setFailure('')
+    setPhase('starting')
+    runIdVerificationWith(orderHash, {
+      openUrl: (url) => {
+        window.open(url, '_blank', 'noopener,noreferrer')
+      },
+      onPhase: (next) => setPhase(next),
+      registerForegroundListener: (recheck) => {
+        const listener = () => {
+          if (document.visibilityState === 'visible') recheck()
+        }
+        document.addEventListener('visibilitychange', listener)
+        return () => document.removeEventListener('visibilitychange', listener)
+      },
+    }).then(
+      (status) => {
+        if (status?.verified || status?.required === false) {
+          setPhase('verified')
+          onVerified?.()
+        }
+      },
+      (error) => {
+        setPhase('error')
+        setFailure(errorMessage(error))
+      }
+    )
+  }
+
+  return (
+    <Card className={cx('tf-checkout-idverify', className)}>
+      <SectionHeader title="Account Verification" />
+      <p
+        className={cx(
+          'tf-checkout-note',
+          phase === 'verified' && 'tf-checkout-idverify__done'
+        )}
+      >
+        {failure || PHASE_MESSAGE[phase]}
+      </p>
+      {phase !== 'verified' && orderHash && (
+        <Button block onClick={run} loading={running} disabled={running || !orderHash}>
+          {phase === 'idle' ? 'Verify' : running ? 'Verifying…' : 'Try again'}
+        </Button>
+      )}
+    </Card>
+  )
+}