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

package/README.md

@@ -1,1086 +1,194 @@
 # tf-checkout-react
 
- 
+The TicketFairy checkout for the web. Drop in one component and you have ticket
+selection, add-ons, buyer details, payment, ID verification, and the receipt —
+or compose the sections yourself.
 
-<details open>
-  <summary>
-    <strong>Table of Contents</strong>
-  </summary>
-
-- [tf-checkout-react](#tf-checkout-react)
-- [Code style and formatting](#code-style-and-formatting)
-- [Introduction](#introduction)
-- [Intergrations](#intergrations)
-  - [WebFlow](#webflow)
-- [Prerequisites](#prerequisites)
-- [Installation](#installation)
-  - [Run Independently](#run-independently)
-- [Usage](#usage)
-  - [Set configuration](#set-configuration)
-    - [Configurations for production](#configurations-for-production)
-    - [Configurations for development/testing](#configurations-for-developmenttesting)
-- [Functionalities](#functionalities)
-  - [Login](#login)
-  - [Register](#register)
-  - [Forgot Password](#forgot-password)
-  - [Promo Code](#promo-code)
-    - [**Note that package automatically calls component in `TicketsContainer`**](#note-that-package-automatically-calls-component-in-ticketscontainer)
-  - [Access Code](#access-code)
-    - [**Note that package automatically calls component in `TicketsContainer`**](#note-that-package-automatically-calls-component-in-ticketscontainer-1)
-  - [Waiting List](#waiting-list)
-    - [**Note that package automatically calls component in `TicketsContainer`**](#note-that-package-automatically-calls-component-in-ticketscontainer-2)
-  - [Pixel Usage](#pixel-usage)
-- [Components](#components)
-  - [`TicketsContainer`](#ticketscontainer)
-  - [`AddOnsContainer`](#addonscontainer)
-  - [`BillingInfoContainer`](#billinginfocontainer)
-  - [`PaymentContainer`](#paymentcontainer)
-  - [`ConfirmationContainer`](#confirmationcontainer)
-  - [`MyTicketsContainer`](#myticketscontainer)
-  - [Orders Container](#orders-container)
-  - [Order Details Container](#order-details-container)
-  - [Ticket Resale Container](#ticket-resale-container)
-- [Commands](#commands)
-  - [Rollup](#rollup)
-    - [Optimizations](#optimizations)
-  - [TypeScript](#typescript)
-  - [GitHub Actions](#github-actions)
-
-</details>
-
-## Code style and formatting
-
-1. **Install Prettier ESLint extension (v5.1.0)**
-   - VSCode: <https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint>
-   - JetBrains' products: <https://blog.jetbrains.com/webstorm/2016/08/using-external-tools/>
-     Notes:
-     - The Prettier extension is not required.
-     - The ESLint extension is not required. However, it is needed to have lint errors show while editing your file.
-2. **Set Prettier ESLint default formatter**
-
-- VSCode: Open commands (CMD/Win + Stift + P) -> Format document with -> Configure default formatter
-- JetBrains' products: <https://blog.jetbrains.com/webstorm/2016/08/using-external-tools/>
-
-3. **Enable format on save**
-
-- VSCode: Open settings (CMD + ,) -> Search "Format On Save"
-- JetBrains' products: <https://blog.jetbrains.com/webstorm/2016/08/using-external-tools/>
-
-&nbsp;
-
-# Introduction
-
-This package includes TicketFairy's checkout functionality, as well as various related functionalities. These functionalities include login/register, order management, resale, referrals, and more.
-
-This package provides a set of components and functionalities designed to manage various aspects of the TicketFairy event experience. These include:
-
-- `AccountSettings`: A component for managing user account settings, such as email address and password.
-- `AddonsContainter`: A component for displaying a list of available add-ons and allowing the user to purchase them.
-- `BillingInfoContainer`: A component for managing billing information, such as addresses and ticket holders. Features enhanced field rendering, improved validation, and better user experience.
-- `ConfirmationContainer`: A component for displaying a confirmation page after a purchase is made.
-- `IDVerification`: A component for verifying the identity of the user during the checkout process.
-- `MyTicketsContainer`: A component for displaying a list of purchased orders.
-- `OrderDetailsContainer`: A component for displaying detailed information about a purchase, such as the ticket types, add-ons and pricing.
-- `PaymentContainer`: A component for managing payment processing during the checkout process. Includes enhanced Stripe integration, improved payment validation, and better error handling.
-- `ResetPasswordContainer`: A component for resetting a user's password.
-- `SeatMapContainer`: A component for displaying and selecting seats on a venue map.
-- `TicketResaleContainer`: A component for managing the resale of tickets or add-ons by the user.
-- `TicketsContainer`: A component for displaying a list of available tickets and allowing the user to purchase them. Features optimized API calls, better state management, and enhanced user interactions.
-
-Together, these components and functionalities provide a comprehensive set of tools to manage the checkout process and related activities for a TicketFairy-powered event.  
-&nbsp;  
-&nbsp;
-
-# Intergrations
-
-## [WebFlow](/webflow/public/INTEGRATION.md)
-
-&nbsp;
-
-# Prerequisites
-
-- node >= v16.19.0
-- npm >= 8.19.3
-
-# Installation
-
-```bash
-npm i tf-checkout-react
-```
-
-or
+## Install
 
 ```bash
-yarn add tf-checkout-react
+npm install tf-checkout-react @tanstack/react-query react react-dom
 ```
 
-## Run Independently
+`@tanstack/react-query`, `react`, and `react-dom` are peer dependencies, so
+there is exactly one copy in your app. Everything else — the SDK core, Stripe.js,
+Xendit, the seat map — ships inside the package.
 
-- Clone this repo: `git clone https://github.com/theticketfairy/tf-checkout-react.git`
-- Install dependencies: `npm install`
-- Install example app dependencies: `cd example && npm install`
-- Run example app from example folder: `npm start`
+Styles load automatically. There is no CSS import to remember.
 
-Project will run under `localhost:3002`. Port can be changed from `package.json`.
+## Use it
 
-&nbsp;
+```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { configureCheckout, EmbeddedCheckout } from 'tf-checkout-react'
 
-# Usage
+configureCheckout({ env: 'PROD', clientId: '…', clientSecret: '…' })
 
-## Set configuration
+const queryClient = new QueryClient()
 
-In order to make this package work properly, you need to set some configurations, otherwise the default configurations will be used.
-Currently only configuration which is needed for production, is `BASE_URL`.
-Other configurations written below are only for development/test environments.
-
-Import `setConfigs` function from the package.
-
-```js
-import { setConfigs } from 'tf-checkout-react'
+export const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <EmbeddedCheckout eventId="14304" onComplete={(order) => console.log(order)} />
+  </QueryClientProvider>
+)
 ```
 
-Call it in the root and pass neccesary options. Here are available options:
-
-### Configurations for production
-
-- BASE_URL - need for making API calls (default: `https://www.ticketfairy.com`)
-
-### Configurations for development/testing
-
-- BASE_URL - need for making API calls
-- EVENT_ID - get and use specific event data
-- BRAND_SLUG - slug of the event's parent/owner brand
-- X_SOURCE_ORIGIN - need for local environment. This header will be included in every API request.
-
-&nbsp;
+That is the whole integration. `configureCheckout` runs once at app start and
+defaults token storage to `localStorage` (SSR-safe — it no-ops on the server).
 
-# Single Page Checkout Implementation
+### Environments
 
-## Overview
-
-While the default implementation uses separate pages for each checkout step (`TicketsContainer` → `BillingInfoContainer` → `PaymentContainer` → `ConfirmationContainer`), the package also supports a **single page checkout flow** where all components are rendered on the same page with conditional visibility and state management.
-
-## Key Differences from Default Flow
-
-### **Default Multi-Page Flow:**
-
-- Each component handles its own routing and navigation
-- State is managed through URL parameters and localStorage
-- Components are mounted/unmounted as user navigates
-- Each step is a separate page/route
+```ts
+configureCheckout({ env: 'STAG', clientId, clientSecret })
+```
+
+`PROD` → `www.ticketfairy.com`, `STAG` → `test.ticketfairy.com`, `DEV` →
+`sandbox.ticketfairy.com`. Pass `baseUrl` instead to point somewhere else;
+`baseUrl: ''` means same-origin, which is what you want behind a dev proxy.
+
+## `<EmbeddedCheckout />`
+
+| Prop                                | Type                                | Default     | Does                                                                    |
+| ----------------------------------- | ----------------------------------- | ----------- | ----------------------------------------------------------------------- |
+| `eventId`                           | `string`                            | —           | The event to sell. Required.                                            |
+| `onComplete`                        | `(order: PlaceOrderResult) => void` | —           | Fires once payment settles.                                             |
+| `confirmationMode`                  | `'inline' \| 'redirect'`            | `'inline'`  | `redirect` leaves routing to `onComplete`.                              |
+| `initialView`                       | `'tickets' \| 'seats'`              | `'tickets'` | Opening screen — preserves an existing `/seat-map` route.               |
+| `onViewChange`                      | `(view) => void`                    | —           | Reports the visible view so hosts can coordinate UI.                    |
+| `autoScroll`                        | `boolean`                           | `true`      | Smooth-scroll to buyer details once the cart is reserved.               |
+| `requireEmailConfirmation`          | `boolean`                           | `true`      | Make guests repeat their email.                                         |
+| `collectTicketHolders`              | `boolean`                           | `true`      | One named holder per ticket.                                            |
+| `collectHolderContact`              | `boolean`                           | `true`      | Also collect holder email/phone.                                        |
+| `skipBillingWhenProfileComplete`    | `boolean`                           | `false`     | Skip billing for complete signed-in profiles. Payment is never skipped. |
+| `auth`                              | `false \| AuthOptions`              | built-in    | Configure or remove the login modal.                                    |
+| `onLogin`                           | `(email?: string) => void`          | —           | Open your own login UI instead of the built-in modal.                   |
+| `privacyPolicy`                     | `CheckoutPrivacyPolicy`             | —           | Your privacy policy link and brand name.                                |
+| `additionalConditions`              | `EventCondition[]`                  | —           | Extra required/optional acknowledgements.                               |
+| `ttfOptInLabel` / `brandOptInLabel` | `string`                            | —           | Override the marketing opt-in copy.                                     |
+| `initialPromoCode`                  | `string`                            | —           | Apply a promo code on load.                                             |
+| `referrer`                          | `string \| number`                  | —           | Attribute the sale.                                                     |
+| `readAttributionFromUrl`            | `boolean`                           | —           | Read promo/referrer from the query string.                              |
+| `showTestCardHint`                  | `boolean`                           | `false`     | Show sandbox card copy. Demos only.                                     |
+| `theme`                             | `CheckoutTheme`                     | —           | Recolor via design tokens.                                              |
+| `className`                         | `string`                            | —           | Class on the root element.                                              |
+
+### Resuming a checkout
+
+`<ResumedCheckout />` attaches to a cart created elsewhere — an accepted resale
+invitation, or a session restored after a redirect.
+
+## Theming
+
+Pass design tokens; the component maps them to CSS variables.
+
+```tsx
+<EmbeddedCheckout
+  eventId="14304"
+  theme={{
+    colorScheme: 'dark',
+    accent: '#ff2d55',
+    radiusCard: '16px',
+  }}
+/>
+```
 
-### **Single Page Flow:**
+Tokens cover color (`accent`, `accentHover`, `accentContrast`, `surface`,
+`surfaceMuted`, `text`, `muted`, `border`, `error`, `success`), shape
+(`radiusCard`, `radiusControl`), and typography.
 
-- All components are conditionally rendered on the same page
-- State management requires careful coordination between components
-- Components remain mounted but visibility is controlled
-- Navigation is handled through state changes rather than routing
+Everything is scoped under `.tf-checkout` with `tf-checkout-*` BEM classes, so
+plain CSS overrides work too and nothing leaks into your page.
 
-## Implementation Patterns
+## Composing your own layout
 
-### **1. State Management**
+Every section reads the same `useCheckout()` store from the provider, so you can
+arrange them however you like.
 
-```jsx
-import React, { useState } from 'react'
+```tsx
 import {
-  TicketsContainer,
-  BillingInfoContainer,
-  PaymentContainer,
-  ConfirmationContainer
+  CheckoutProvider,
+  Tickets,
+  AddOns,
+  BillingInfo,
+  Payment,
+  OrderSummary,
+  useCheckout,
 } from 'tf-checkout-react'
 
-const SinglePageCheckout = () => {
-  const [currentStep, setCurrentStep] = useState('tickets')
-  const [checkoutData, setCheckoutData] = useState({})
-  const [cartData, setCartData] = useState(null)
-  
-  const handleTicketsSuccess = (data) => {
-    setCartData(data)
-    setCurrentStep('billing')
-  }
-  
-  const handleBillingSuccess = (data) => {
-    setCheckoutData(prev => ({ ...prev, billing: data }))
-    setCurrentStep('payment')
-  }
-  
-  const handlePaymentSuccess = (data) => {
-    setCheckoutData(prev => ({ ...prev, payment: data }))
-    setCurrentStep('confirmation')
-  }
-
-  return (
-    <div className="single-page-checkout">
-      {currentStep === 'tickets' && (
-        <TicketsContainer
-          eventId={eventId}
-          onAddToCartSuccess={handleTicketsSuccess}
-          // Disable auto-navigation
-          enableBillingInfoAutoCreate={false}
-        />
-      )}
-      
-      {currentStep === 'billing' && (
-        <BillingInfoContainer
-          handleSubmit={handleBillingSuccess}
-          // Skip automatic payment redirect
-          skipPage={false}
-        />
-      )}
-      
-      {currentStep === 'payment' && (
-        <PaymentContainer
-          checkoutData={checkoutData}
-          handlePayment={handlePaymentSuccess}
-        />
-      )}
-      
-      {currentStep === 'confirmation' && (
-        <ConfirmationContainer
-          orderHash={checkoutData.payment?.orderHash}
-        />
-      )}
-    </div>
-  )
-}
-```
-
-### **2. Progressive Enhancement Pattern**
-
-```jsx
-const ProgressiveCheckout = () => {
-  const [completedSteps, setCompletedSteps] = useState(new Set())
-  const [activeStep, setActiveStep] = useState('tickets')
-  
-  const markStepComplete = (step) => {
-    setCompletedSteps(prev => new Set([...prev, step]))
-  }
-  
-  const isStepAccessible = (step) => {
-    const stepOrder = ['tickets', 'billing', 'payment', 'confirmation']
-    const stepIndex = stepOrder.indexOf(step)
-    const prevStep = stepOrder[stepIndex - 1]
-    return stepIndex === 0 || completedSteps.has(prevStep)
-  }
-
-  return (
-    <div className="progressive-checkout">
-      {/* Step Navigation */}
-      <div className="checkout-steps">
-        {['tickets', 'billing', 'payment', 'confirmation'].map(step => (
-          <button
-            key={step}
-            disabled={!isStepAccessible(step)}
-            className={`step ${activeStep === step ? 'active' : ''} ${completedSteps.has(step) ? 'completed' : ''}`}
-            onClick={() => setActiveStep(step)}
-          >
-            {step.charAt(0).toUpperCase() + step.slice(1)}
-          </button>
-        ))}
-      </div>
-      
-      {/* Component Rendering */}
-      <div className="checkout-content">
-        {activeStep === 'tickets' && (
-          <TicketsContainer
-            onAddToCartSuccess={(data) => {
-              markStepComplete('tickets')
-              setActiveStep('billing')
-            }}
-          />
-        )}
-        {/* ... other components */}
-      </div>
-    </div>
-  )
-}
-```
-
-### **3. Accordion/Collapsible Pattern**
-
-```jsx
-const AccordionCheckout = () => {
-  const [openSections, setOpenSections] = useState(new Set(['tickets']))
-  const [completedSections, setCompletedSections] = useState(new Set())
-  
-  const toggleSection = (section) => {
-    setOpenSections(prev => {
-      const newSet = new Set(prev)
-      if (newSet.has(section)) {
-        newSet.delete(section)
-      } else {
-        newSet.add(section)
-      }
-      return newSet
-    })
-  }
+const MyCheckout = () => {
+  const checkout = useCheckout({ eventId: '14304' })
 
   return (
-    <div className="accordion-checkout">
-      <div className="checkout-section">
-        <div 
-          className="section-header"
-          onClick={() => toggleSection('tickets')}
-        >
-          <h3>Select Tickets</h3>
-          {completedSections.has('tickets') && <span>✓</span>}
-        </div>
-        {openSections.has('tickets') && (
-          <TicketsContainer
-            onAddToCartSuccess={(data) => {
-              setCompletedSections(prev => new Set([...prev, 'tickets']))
-              setOpenSections(new Set(['billing']))
-            }}
-          />
-        )}
+    <CheckoutProvider theme={{ colorScheme: 'dark' }}>
+      <Tickets />
+      <AddOns />
+      <div className="my-two-column">
+        <BillingInfo />
+        <OrderSummary />
       </div>
-      
-      <div className="checkout-section">
-        <div 
-          className="section-header"
-          onClick={() => toggleSection('billing')}
-        >
-          <h3>Billing Information</h3>
-          {completedSections.has('billing') && <span>✓</span>}
-        </div>
-        {openSections.has('billing') && (
-          <BillingInfoContainer
-            handleSubmit={(values, helpers, eventId, res) => {
-              setCompletedSections(prev => new Set([...prev, 'billing']))
-              setOpenSections(new Set(['payment']))
-            }}
-          />
-        )}
-      </div>
-      
-      {/* ... other sections */}
-    </div>
+      <Payment />
+    </CheckoutProvider>
   )
 }
 ```
 
-## Important Considerations
-
-### **Component Props Modifications**
+**Sections** — `Tickets`, `SeatMap`, `AddOns`, `BillingInfo`, `Payment`,
+`OrderSummary`, `IDVerification`, `Confirmation`, `OrderConfirmation`,
+`OrderIDVerification`.
 
-- **`enableBillingInfoAutoCreate: false`** - Prevents automatic navigation to billing page
-- **`skipPage: false`** - Controls whether billing page can be skipped
-- **Custom callback handlers** - Override default navigation behavior
+**UI primitives** — `Card`, `SectionHeader`, `Pill`, `Button`, `Field`,
+`FieldRow`, `Input`, `Textarea`, `Select`, `Checkbox`, `PaymentMethods`,
+`QuantitySelect`, `PriceLine`, `Stepper`, `Timer`, `TimerBanner`, `Loader`.
 
-### **State Persistence**
+**Auth** — `AuthModal`, `LoginForm`, `RegisterForm`, `ForgotPasswordForm`,
+`ResetPasswordForm`.
 
-```jsx
-// Save state to localStorage for page refreshes
-useEffect(() => {
-  localStorage.setItem('checkoutState', JSON.stringify({
-    currentStep,
-    checkoutData,
-    cartData
-  }))
-}, [currentStep, checkoutData, cartData])
-
-// Restore state on component mount
-useEffect(() => {
-  const savedState = localStorage.getItem('checkoutState')
-  if (savedState) {
-    const { currentStep, checkoutData, cartData } = JSON.parse(savedState)
-    setCurrentStep(currentStep)
-    setCheckoutData(checkoutData)
-    setCartData(cartData)
-  }
-}, [])
-```
+## Headless
 
-### **Error Handling**
+`useCheckout()` gives you the whole flow with no UI at all.
 
-```jsx
-const [errors, setErrors] = useState({})
+```tsx
+const checkout = useCheckout({ eventId: '14304' })
 
-const handleStepError = (step, error) => {
-  setErrors(prev => ({ ...prev, [step]: error }))
-  // Optionally navigate back to error step
-  setCurrentStep(step)
-}
-
-// Pass error handlers to each component
-<BillingInfoContainer
-  onSubmitError={(error) => handleStepError('billing', error)}
-  handleSubmit={handleBillingSuccess}
-/>
+await checkout.setTickets('14304', [{ ticketTypeId: '1', quantity: 2 }])
+checkout.setBilling({ firstName, lastName, email, phone })
+checkout.setHolders(holders)
+checkout.setConsent({ ttfOptIn: true, brandOptIn: false })
+const order = await checkout.placeOrder('card')
 ```
 
-### **Timer Coordination**
-
-When using timers across multiple components in single page flow:
-
-```jsx
-const [globalTimer, setGlobalTimer] = useState(null)
-
-// Share timer state across components
-<TicketsContainer enableTimer={false} />
-<BillingInfoContainer enableTimer={false} />
-<PaymentContainer enableTimer={true} onCountdownFinish={handleTimeout} />
-
-// Or implement global timer
-<TimerWidget 
-  onCountdownFinish={handleGlobalTimeout}
-  className="global-timer"
-/>
-```
-
-&nbsp;
-
-# Functionalities
-
-## Login
-
-The `LoginModal` component is designed to be used inside package to authenticate users. <br /> To use the `LoginModal`, simply include it in your React component and pass in the required **onLogin** and **onClose** callbacks as props.
-
-You can authenticate users from the Billing page too, here you can either provide **onLogin** callback as a prop to the [`BillingInfoContainer`](#billinginfocontainer) component so that you can open your custom component for authentication or
-you can ommit it and the package inside provided `LoginModal` component will be called and opened.
-
-Package can detect whether a user is logged in or not by checking for the presence of the **X-TF-ECOMMERCE** cookie, which is automatically set by the system when the user successfully logs in.
-If the **X-TF-ECOMMERCE** cookie is present, the package assumes that the user is logged in and displays the appropriate content.
-
-The `LoginModal` component also is used in [`MyTicketsContainer`](#myticketscontainer) and [`TicketsContainer`](#ticketscontainer).
-
-To detect whether a user is logged in or not, you can use the **useCookieListener** hook provided by the package.
-Here's an example of how to use the **useCookieListener** hook to automatically detect whether the user is logged in:
-
-```jsx
-import { useEffect, useRef, useState } from 'react'
-import { useCookieListener } from 'tf-checkout-react'
-
-const MyComponent = () => {
-  const [isLogged, setIsLogged] = useState(false)
-
-  // Listen for changes to the __X-TF-ECOMMERCE__ cookie
-  useCookieListener('X_TF_ECOMMERCE', value => setIsLogged(Boolean(value)))
-
-  // ... rest of component logic
-}
-```
-
-<br />
-
-<details open>
-<summary><b>Login Modal Props Interface:</b></summary>
-
-| Property                 | Type                | Required | Default Value                   | Description                                                                                                                 |
-| ------------------------ | ------------------- | -------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| onLogin                  | () => void          | yes      | N/A                             | Called after the user successfully authorizes.                                                                              |
-| onClose                  | () => void          | yes      | N/A                             | Called on modal close.                                                                                                      |
-| onGetProfileDataSuccess  | (data) => void      | no       | value => value                  | A callback function that is called when the profile data is successfully retrieved.                                         |
-| onGetProfileDataError    | (error) => void     | no       | value => value                  | A callback function that is called when retrieving the profile data fails.                                                  |
-| onForgotPassword         | () => void          | no       | value => value                  | Called on “Forgot Password” button click.                                                                                   |
-| onSignup                 | () => void          | no       | value => value                  | Called on “Sign Up” button click.                                                                                           |
-| modalClassname           | string              | no       | " "                             | Login modal main container class.                                                                                           |
-| logo                     | string / URL / path | no       | TheTicketFairy black logo (URL) | Login modal top section’s logo.                                                                                             |
-| showForgotPasswordButton | boolean             | no       | false                           | Display “Forgot Password” button.                                                                                           |
-| showSignUpButton         | boolean             | no       | false                           | Display “Sign Up” button.                                                                                                   |
-| alreadyHasUser           | boolean             | no       | false                           | Whether or not to show the "email is already attached to an account" message block.                                         |
-| userExpired              | boolean             | no       | false                           | Whether or not to show the "session expired" message block.                                                                 |
-| showPoweredByImage       | boolean             | no       | false                           | Whether or not to show the <a href="https://cdn-checkout.s3.us-east-2.amazonaws.com/IconTicketFairy.svg">Powered image</a>. |
-
-</details>
-
-&nbsp;
-
-## Register
-
-The `RegisterModal` component is designed to be used inside package to allows users to register for an account. <br />
-
-When the user submits the form, the component calls the register API function to create the user's account.
-If account creation is successful, the component then retrieves the user's profile data. The **onGetProfileDataSuccess** and **onGetProfileDataError** callbacks are then called depending on whether the profile data retrieval succeeds or fails.
-If profile data retrieval succeeds, the component maps the profile data to a format used by the application and saves the resulting data to the browser's localStorage.
-Finally, the **onClose** callback is called to close the modal.
-
-<details open>
-<summary><b>Register Modal Props Interface:</b></summary>
-
-| Property                | Type            | Required | Default Value  | Description                                                                                                                 |
-| ----------------------- | --------------- | -------- | -------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| onRegister (deprecated) | () => void      | no       | N/A            | -                                                                                                                           |
-| onClose                 | () => void      | yes      | N/A            | Called on modal close, after register request's success.                                                                    |
-| onGetProfileDataSuccess | (data) => void  | no       | value => value | A callback function that is called when the profile data is successfully retrieved.                                         |
-| onGetProfileDataError   | (error) => void | no       | value => value | A callback function that is called when retrieving the profile data fails.                                                  |
-| showPoweredByImage      | boolean         | no       | false          | Whether or not to show the <a href="https://cdn-checkout.s3.us-east-2.amazonaws.com/IconTicketFairy.svg">Powered image</a>. |
-
-</details>
-
-&nbsp;
-
-## Forgot Password
-
-The `ForgotPasswordModal` component is a modal dialog for users to reset their passwords.
-To use it, simply import the component, manage its open state, and provide callback functions for closing the modal, navigating back to the login page or component, handling successful password reset requests, and handling errors in password reset requests.
-Optionally, you can also display a "Powered By" image within the modal by setting the **showPoweredByImage** prop to true.
-
-<details open>
-<summary><b>Forgot Password Modal Props Interface:</b></summary>
-
-| Property                | Type            | Required | Default Value  | Description                                                                                                                 |
-| ----------------------- | --------------- | -------- | -------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| onLogin                 | () => void      | yes      | N/A            | Called on "Back to Log In" button click.                                                                                    |
-| onClose                 | () => void      | yes      | N/A            | Called on modal close, after register request's success.                                                                    |
-| onForgotPasswordSuccess | (data) => void  | no       | value => value | A callback function that is called when the user successfully resets their password.                                        |
-| onForgotPasswordError   | (error) => void | no       | value => value | A callback function that is called when there is an error resetting the password.                                           |
-| showPoweredByImage      | boolean         | no       | false          | Whether or not to show the <a href="https://cdn-checkout.s3.us-east-2.amazonaws.com/IconTicketFairy.svg">Powered image</a>. |
-
-</details>
-&nbsp;
-
-## Promo Code
-
-The `PromoCodeSection` is a React component for handling promo code input, validation, and displaying success or error messages.
-It accepts various props to control its appearance and behavior, such as the promo code value, validation status, input visibility, and callback functions for updating the state which you can see in the below provided table.
-
-To use this component, simply import it and include it in your JSX with the required props, managing the component's state and callback functions in the parent component as needed.
-
-### **Note that package automatically calls component in [`TicketsContainer`](#ticketscontainer)**
-
-<br />
-
-<details open>
-<summary><b>Promo Code Props Interface:</b></summary>
-
-| Property          | Type                                   | Required | Default Value | Description                                                           |
-| ----------------- | -------------------------------------- | -------- | ------------- | --------------------------------------------------------------------- |
-| code              | string                                 | yes      | ' '           | The promo code.                                                       |
-| codeIsApplied     | boolean                                | yes      | false         | Whether or not the promo code is currently applied.                   |
-| showPromoInput    | boolean                                | yes      | false         | Whether or not to show the promo code input field.                    |
-| codeIsInvalid     | boolean                                | yes      | false         | Whether or not the promo code is invalid.                             |
-| showAlertIcons    | boolean                                | no       | false         | Whether or not to show the alert icons.                               |
-| promoText         | string                                 | no       | false         | Button label, which click displays promo code input.                  |
-| -                 | -                                      | -        | -             | -                                                                     |
-| setCode           | (value: string) => void                | yes      | -             | A function to set the promo code.                                     |
-| setCodeIsApplied  | (value: boolean) => void               | yes      | -             | A function to set whether or not the promo code is currently applied. |
-| setCodeIsInvalid  | (value: boolean) => void               | yes      | -             | A function to set whether or not the promo code is invalid.           |
-| setShowPromoInput | (value: boolean) => void               | yes      | -             | A function to set whether or not to show the promo code input field.  |
-| updateTickets     | (value: boolean, type: string) => void | yes      | -             | A function to update the tickets based on the promo code.             |
-
-</details>
-&nbsp;
-
-## Access Code
-
-The `AccessCodeSection` is a React component designed for handling access code input and submission.
-It allows users to enter an access code and triggers an update to the ticket information based on the submitted access code.
-The component accepts a set of props to manage the access code value and provide callback functions for updating the state which you can see in below table.
-
-To integrate the `AccessCodeSection` component, import it into your JSX and provide the required props, such as the access code value, and callback functions for updating the state.
-Make sure to manage the component's state and callback functions within the parent component as needed. <br />
-
-### **Note that package automatically calls component in [`TicketsContainer`](#ticketscontainer)**
-
-<br />
-
-<details open>
-<summary><b>Access Code Props Interface:</b></summary>
-
-| Property      | Type                     | Required | Default Value | Description                                                |
-| ------------- | ------------------------ | -------- | ------------- | ---------------------------------------------------------- |
-| code          | string                   | yes      | ' '           | The access code.                                           |
-| -             | -                        | -        | -             | -                                                          |
-| setCode       | (value: string) => void  | yes      | -             | A function to set the access code.                         |
-| updateTickets | (value: boolean) => void | yes      | -             | A function to update the tickets based on the access code. |
-
-</details>
-&nbsp;
-
-## Waiting List
-
-The `WaitingList` component is a React component designed to handle user registration for a waiting list.
-It displays a form that allows users to input their information, including first name, last name, email, ticket type, and quantity.
-Upon submission, the component adds the user to the waiting list and displays a success message.
-
-### **Note that package automatically calls component in [`TicketsContainer`](#ticketscontainer)**
-
-<br />
-
-<details open>
-<summary><b>Waiting List Props Interface:</b></summary>
-
-| Property           | Type            | Required | Default Value | Description                                                   |
-| ------------------ | --------------- | -------- | ------------- | ------------------------------------------------------------- |
-| tickets            | Object          | yes      | ' '           | The list of tickets to be displayed.                          |
-| eventId            | string / number | yes      | N/A           | The ID of the event for which the tickets are displayed.      |
-| defaultMaxQuantity | number          | yes      | 10            | The default maximum quantity of tickets that can be selected. |
+It exposes the live snapshot (status, cart, pricing, errors), `isBusy`,
+`secondsLeft` for the reservation countdown, `buyerFields` (the extra fields
+this event gates — render them from data), `missingRequiredAddonNames`, and
+`isLoggedIn`.
 
-</details>
+`placeOrder` is retry-safe: one order, one charge, however many times the button
+is pressed.
 
-<br />
+For direct API access, the full SDK is re-exported from this package — `ttf`,
+`api`, `hooks`, `dtos`, `logic`, and the engine. See the
+[SDK reference](../tf-checkout-shared/README.md).
 
-## Pixel Usage
+## Card fields
 
-The `usePixel` hook is a utility function used to load a pixel script for tracking events on the page. It is commonly used in multiple components throughout the application to track various user actions, such as the completion of a checkout or a purchase. <br />
+`<CardInput />` renders Stripe Elements. `<XenditCardInput />` renders the
+Xendit card form for gateways that use it — both are wired into `<Payment />`
+automatically based on the event's gateway, so you only reach for them directly
+when building a custom payment step.
 
-The purpose of the `usePixel` hook is to enable event tracking and analytics for various user actions within the application.
+## Development
 
-Here is the list of pages where the `usePixel` function is automatically used:
-
-- Billing Info Container
-- Confirmation Container
-- Payment Container
-- Tickets Container
-
-&nbsp;
-
-# Components
-
-## `TicketsContainer`
-
-Tickets component will retrieve and show a list of tickets corresponding to selected event,
-which allows the user to select the desired ticket type and quantity.
-
-The **"Get Tickets"** button which name is also customizable, allows the user to add the selected tickets to their cart and proceed to the checkout process.<br />
-Other buttons can be displayed to handle various actions, such as viewing the user's orders or logging out.
-
-Tickets component provides a section for entering an [Access Code](#access-code) or [Promo Code](#promo-code) that applies a discount to the ticket price or hide/unhide some tickets via [Access Code](#access-code).<br />
-It also contains `WaitingList` that manages and displays waiting list functionality for the event.<br />
-Props interface partially extends [Promo Code Props Interface](#promo-code), [Access Code Props Interface](#access-code), [Waiting List Props Interface](#waiting-list).
-
-Tickets component displays a list of the top influencers who have promoted the event.
-
-**Recent Improvements:**
-
-- Fixed duplicate API calls issue by optimizing useEffect dependencies
-- Enhanced error handling and loading states
-- Improved time slot management for events
-- Better integration with promo codes and access codes
-- Optimized component re-rendering patterns
-
-Tickets component is flexible and customizable, allowing for different layouts and behaviors depending on the event's requirements.
-
-**_Example of usage_**:
-
-```jsx
-import { TicketsContainer } from 'tf-checkout-react'
-
-<TicketsContainer
-  theme="light"
-  eventId={event?.id}
-  handleNotInvitedModalClose={() => {}}
-  handleInvalidLinkModalClose={() => {}}
-  onAddToCartSuccess={() => {}}
-  isPromotionsEnabled={event?.is_promotions_enabled}
-  isAccessCodeEnabled={event?.is_access_code}
-  onLogoutSuccess={() => {}}
-  hideSessionButtons={true}
-  enableAddOns={false}
-  showGroupNameBlock={true}
-  tableTicketsHeaderComponent={
-    <div className="tickets-container-header">RESERVE TABLES</div>
-  }
-  onPendingVerification={() => {}}
-/>
-```
-
-<details open>
-  <summary><b>Tickets Container Props Interface</b></summary>
-
-| Property                                 | Type             | Required | Default value  | Description                                                                                    |
-| ---------------------------------------- | ---------------- | -------- | -------------- | ---------------------------------------------------------------------------------------------- |
-| eventId                                  | string / number  | yes      | N/A            | The unique identifier for the event that the tickets belong to.                                |
-| getTicketsLabel                          | string           | no       | “Get Tickets"  | The label for the "Get Tickets" button.                                                        |
-| contentStyle                             | CSSProperties    | no       | {}             | An object containing styles to apply to the tickets list container.                            |
-| theme                                    | ‘light’, ‘dark'  | no       | ‘light'        | The theme to use for the tickets list container. Sets as `className`.                          |
-| themeOptions                             | MUI ThemeOptions | no       | N/A            | MUI Theme Provider’s theme options.                                                            |
-| queryPromoCode (deprecated)              | -                | -        | -              | -                                                                                              |
-| isButtonScrollable (deprecated)          | -                | -        | -              | -                                                                                              |
-| disableCountdownLeadingZero (deprecated) | -                | -        | -              | -                                                                                              |
-| isLoggedIn (deprecated)                  | -                | -        | -              | -                                                                                              |
-| isPromotionsEnabled                      | boolean          | no       | false          | Whether or not promotions are enabled for the tickets list.                                    |
-| isAccessCodeEnabled                      | boolean          | no       | false          | Whether or not access codes are enabled for the tickets list.                                  |
-| hideTicketsHeader                        | boolean          | no       | false          | Whether to hide the tickets header.                                                            |
-| hideSessionButtons                       | boolean          | no       | false          | Whether to hide “My Tickets” and “Log Out” buttons.                                            |
-| hideWaitingList                          | boolean          | no       | false          | Whether to hide the waiting list.                                                              |
-| enableBillingInfoAutoCreate              | boolean          | no       | true           | Whether to enable auto-creation of billing information, instead of manually creation by user.  |
-| enableInfluencersSection                 | boolean          | no       | true           | Whether to display the influencers section.                                                    |
-| enableAddOns                             | boolean          | no       | true           | Whether to enable add-ons.                                                                     |
-| sortBySoldOut                            | boolean          | no       | false          | Whether to sort tickets by sold-out status. By default tickets will be sorted by sort order.   |
-| hideTableTicketsHeader                   | boolean          | no       | false          | Whether to hide table type tickets section header.                                             |
-| showPoweredByImage                       | boolean          | no       | false          | Whether to show the "Powered by TheTicketFairy" image.                                         |
-| showGroupNameBlock                       | boolean          | no       | false          | Whether to show the ticket group name block.                                                   |
-| actionsSectionComponent                  | ReactNode        | no       | N/A            | Custom component instead of “Get Tickets” button.                                              |
-| ticketsHeaderComponent                   | ReactNode        | no       | N/A            | A React component to render the tickets section header.                                        |
-| tableTicketsHeaderComponent              | ReactNode        | no       | N/A            | A React component to render the table type tickets section header.                             |
-| ordersPath                               | string           | no       | '/orders'      | The URL path to the orders page.                                                               |
-| currencySybmol                           | string           | no       | ' '            | The currency symbol to use.                                                                    |
-| -                                        | -                | -        | -              | -                                                                                              |
-| onAddToCartSuccess                       | (data) => void   | no       | value => value | A callback function to be called when a ticket is successfully added to the cart.              |
-| onAddToCartError                         | (error) => void  | no       | value => value | A callback function to be called when there is an error adding a ticket to the cart.           |
-| onGetTicketsSuccess                      | (data) => void   | no       | value => value | A callback function to be called when the tickets are successfully retrieved.                  |
-| onGetTicketsError                        | (error) => void  | no       | value => value | A callback function to be called when there is an error retrieving the tickets.                |
-| onLogoutSuccess                          | () => void       | no       | value => value | A callback function to be called when the user successfully logs out.                          |
-| onLogoutError                            | (error) => void  | no       | value => value | A callback function to be called when there is an error logging out.                           |
-| onLoginSuccess                           | () => void       | no       | value => value | A callback function to be called when the user successfully logs in.                           |
-| handleNotInvitedModalClose               | () => void       | no       | value => value | A callback function to be called when the "Not Invited" modal is closed.                       |
-| handleInvalidLinkModalClose              | () => void       | no       | value => value | A callback function to be called when the "Invalid Link" modal is closed.                      |
-| onReserveButtonClick                     | () => void       | no       | value => value | A callback function to be called when the 'Select on map' button is clicked.                   |
-| onPendingVerification                    | () => void       | no       | value => value | A callback function to be called when the verification process is passed and pending response. |
-
-</details>
-
-&nbsp;
-
-## `AddOnsContainer`
-
-Add-Ons component will retrieve and show a list of add-ons corresponding to selected event.
-
-<details open>
-  <summary><b>Add-Ons Container Props Interface</b></summary>
-
-| Property                    | Type            | Required | Default value  | Description                                                                                          |
-| --------------------------- | --------------- | -------- | -------------- | ---------------------------------------------------------------------------------------------------- |
-| classNamePrefix             | string          | no       | 'add_on'       | Prefix to use for the CSS class names of the component.                                              |
-| enableBillingInfoAutoCreate | boolean         | no       | true           | Whether to enable auto-creation of billing information, instead of manually creation by user.        |
-| enableTimer                 | boolean         | no       | true           | Whether to show a timer for the user.                                                                |
-| -                           | -               | -        | -              | -                                                                                                    |
-| onGetAddonsPageInfoSuccess  | (data) => void  | no       | value => value | A callback function to be called when the add-ons page information is successfully fetched.          |
-| onGetAddonsPageInfoError    | (error) => void | no       | value => value | A callback function to be called when there is an error while fetching the add-ons page information. |
-| onPostCheckoutSuccess       | (data) => void  | no       | value => value | A callback function to be called when the add-ons are successfully added to the cart.                |
-| onPostCheckoutError         | (error) => void | no       | value => value | A callback function to be called when there is an error while adding add-ons to the cart.            |
-| onConfirmSelectionSuccess   | (data) => void  | no       | value => value | A callback function to be called when the add-ons selection is successfully confirmed.               |
-| onConfirmSelectionError     | (error) => void | no       | value => value | A callback function to be called when there is an error while confirming the add-ons selection.      |
-| onCountdownFinish           | () => void      | no       | value => value | A callback function that is called when the countdown timer finishes.                                |
-| onPendingVerification       | () => void      | no       | value => value | A callback function to be called when the verification process is passed and pending response.       |
-
-</details>
-
-&nbsp;
-
-## `BillingInfoContainer`
-
-The component is responsible for managing the billing information during the checkout process. It provides a form that allows users to enter their billing information, including addresses and ticket holders' information.
-
-Component includes phone field validation functionality provided by Twilio, which adds an additional layer of verification and security during the ticket purchase process.
-
-**Recent Improvements:**
-
-- Enhanced architecture with better separation of concerns
-- Improved form validation and error handling
-- Better TypeScript typing throughout the component
-- Optimized API call patterns to prevent duplicate requests
-- Enhanced field rendering system for better customization
-
-Props interface extends [Login Modal Interface](#login), [Register Modal Interface](#register), [Forgot Password Modal Interface](#forgot-password).
-
-<details open>
-
-| Property                          | Type                                         | Required | Default Value           | Description                                                                                         |
-| --------------------------------- | -------------------------------------------- | -------- | ----------------------- | --------------------------------------------------------------------------------------------------- |
-| data                              | IBillingInfoData[]                           | no       | []                      | Form fields list to be rendered to collect billing info data.                                       |
-| ticketHoldersFields               | IBillingInfoData[]                           | no       | [{ id: 1, fields: [] }] | Form fields list to be rendered to collect ticket holders data.                                     |
-| initialValues (deprecated)        | { [key: string]: any }                       | no       | {}                      | Form’s initial values.                                                                              |
-| theme                             | 'light' / 'dark'                             | no       | 'light'                 | MUI Theme Provider’s theme.                                                                         |
-| isLoggedIn (deprecated)           | -                                            | -        | -                       | -                                                                                                   |
-| onLogin (deprecated)              | -                                            | -        | -                       | -                                                                                                   |
-| brandOptIn (deprecated)           | -                                            | -        | -                       | -                                                                                                   |
-| shouldFetchCountries (deprecated) | -                                            | -        | -                       | -                                                                                                   |
-| accountInfoTitle                  | string / JSX.Element                         | no       | “”                      | Render some text or JSX component above Login section. Do not available if there is logged in user. |
-| hideLogo                          | boolean                                      | no       | false                   | Hide TicketFairy logo under “Login” button.                                                         |
-| themeOptions                      | MUI ThemeOptions                             | no       | N/A                     | MUI Theme Provider’s theme.                                                                         |
-| hideErrorsAlertSection            | boolean                                      | no       | false                   | Hide form submit errors rendered by package.                                                        |
-| skipPage                          | boolean                                      | no       | false                   | Enable skipping Billing Info page.                                                                  |
-| canSkipHolderNames                | boolean                                      | no       | false                   | Allows the user to skip entering ticket holders' names.                                             |
-| enableTimer                       | boolean                                      | no       | false                   | Enables the countdown timer.                                                                        |
-| buttonName                        | string                                       | no       | false                   | The text to display on the submit button.                                                           |
-| showPoweredByImage                | boolean                                      | no       | false                   | Displays the "Powered by TheTicketFairy" image.                                                     |
-| isCountryCodeEditable             | boolean                                      | no       | true                    | Allows the user to edit the country code.                                                           |
-| -                                 | -                                            | -        | -                       | -                                                                                                   |
-| handleSubmit                      | (values, helpers, eventId, response) => void | no       | value => value          | A callback function that is called when the form is submitted.                                      |
-| onSubmitError                     | (error) => void                              | no       | value => value          | A callback function that is called when form submission fails.                                      |
-| onGetCartSuccess                  | (data) => void                               | no       | value => value          | A callback function that is called when the cart data is successfully retrieved.                    |
-| onGetCartError                    | (error) => void                              | no       | value => value          | A callback function that is called when retrieving the cart data fails.                             |
-| onErrorClose                      | () => void                                   | no       | value => value          | A callback function that is called when the error message is closed.                                |
-| onSkipBillingPage                 | (data) => void                               | no       | value => value          | A callback function that is called when the billing page skips.                                     |
-| onGetCountriesSuccess             | (data) => void                               | no       | value => value          | A callback function that is called when the list of countries is successfully retrieved.            |
-| onGetCountriesError               | (error) => void                              | no       | value => value          | A callback function that is called when retrieving the list of countries fails.                     |
-| onGetStatesSuccess                | (data) => void                               | no       | value => value          | A callback function that is called when the list of states is successfully retrieved.               |
-| onGetCountriesError               | (error) => void                              | no       | value => value          | A callback function that is called when retrieving the list of states fails.                        |
-| onAuthorizeSuccess                | (data) => void                               | no       | value => value          | A callback function that is called when authorization is successful.                                |
-| onAuthorizeError                  | (error) => void                              | no       | value => value          | A callback function that is called when authorization fails.                                        |
-| onCountdownFinish                 | () => void                                   | no       | value => value          | A callback function that is called when the countdown timer finishes.                               |
-| onPendingVerification             | () => void                                   | no       | value => value          | A callback function that is called when the verification process is passed and pending response.    |
-
-</details>
-
-&nbsp;
-
-## `PaymentContainer`
-
-The component provides a form for users to enter their payment information and checkout. It accepts various props to customize the form and handle the checkout process.
-
-**Recent Improvements:**
-
-- Enhanced Stripe integration with better error handling
-- Improved payment field validation and user feedback
-- Better handling of payment method creation and confirmation
-- Enhanced payment plan support with improved UI
-- Optimized payment flow for better user experience
-
-<details open>
-
-| Property                | Type                            | Required | Default Value        | Description                                                                         |
-| ----------------------- | ------------------------------- | -------- | -------------------- | ----------------------------------------------------------------------------------- |
-| paymentFields           | IPaymentField[]                 | yes      | []                   | An array of payment fields to render in the form.                                   |
-| checkoutData            | { hash: string, total: number } | yes      | N/A                  | An object containing checkout data, such as the order total and hash.               |
-| formTitle               | string                          | no       | 'Get Your Tickets'   | Text to display above the payment form.                                             |
-| errorText               | string                          | no       | ''                   | Text to display if there is an error during the payment process.                    |
-| paymentButtonText       | string                          | no       | 'Pay'                | Text to display on the payment button.                                              |
-| paymentInfoLabel        | string                          | no       | 'Order Confirmation' | Text to display above the payment information section.                              |
-| orderInfoLabel          | string                          | no       | 'Order Review'       | Text to display above the order information section.                                |
-| stripeCardOptions       | StripeCardNumberElementOptions  | no       | {}                   | Options for the Stripe card input element.                                          |
-| elementsOptions         | StripeElementsOptions           | no       | {}                   | Options for the Stripe Elements instance.                                           |
-| themeOptions            | ThemeOptions                    | no       | {}                   | An object containing theme options for the payment form.                            |
-| enableTimer             | boolean                         | no       | false                | Whether to show a timer for the user.                                               |
-| disableZipSection       | boolean                         | no       | false                | Whether to show the zip code input field.                                           |
-| enablePaymentPlan       | boolean                         | no       | true                 | Whether to enable payment plans.                                                    |
-| -                       | -                               | -        | -                    | -                                                                                   |
-| handlePayment           | (data) => void                  | yes      | value => value       | A callback function to handle the payment process.                                  |
-| onPaymentError          | (error) => void                 | no       | value => value       | A callback function that is called when the payment process fails.                  |
-| onErrorClose            | () => void                      | no       | value => value       | A callback function that is called when the error message is closed.                |
-| onGetPaymentDataSuccess | (data) => void                  | no       | value => value       | A callback function that is called when the payment data is successfully retrieved. |
-| onGetPaymentDataError   | (error) => void                 | no       | value => value       | A callback function that is called when retrieving the payment data fails.          |
-| onCountdownFinish       | () => void                      | no       | value => value       | A callback function that is called when the countdown timer finishes.               |
-
-</details>
-
-&nbsp;
-
-## `ConfirmationContainer`
-
-The component is responsible for displaying the confirmation page after a successful payment.
-
-<details open>
-
-| Property                     | Type                | Required | Default Value  | Description                                                                              |
-| ---------------------------- | ------------------- | -------- | -------------- | ---------------------------------------------------------------------------------------- |
-| isReferralEnabled            | boolean             | yes      | false          | Whether referral functionality is enabled.                                               |
-| showDefaultShareButtons      | boolean             | yes      | false          | Whether to display default share buttons.                                                |
-| shareButtons                 | IShareButton[]      | yes      | []             | Array of objects representing the share buttons.                                         |
-| messengerAppId               | string              | yes      | N/A            | Messenger App ID for Facebook share button.                                              |
-| orderHash                    | string              | no       | N/A            | Hash value of the order.                                                                 |
-| clientLabel                  | string              | no       | 'Ticket Fairy' | Client's name.                                                                           |
-| confirmationLabels           | IConfirmationLabels | no       | {}             | Object containing labels for the confirmation page.                                      |
-| hasCopyIcon                  | boolean             | no       | true           | Whether to display a copy icon beside the referral link.                                 |
-| showReferralsInfoText        | boolean             | no       | false          | Whether to display referral information text.                                            |
-| showCopyInfoModal            | boolean             | no       | false          | Whether to display a copy info modal after the link is copied.                           |
-| showPricingNoteSection       | boolean             | no       | false          | Whether to display the pricing note section.                                             |
-| -                            | -                   | -        | -              | -                                                                                        |
-| onGetConfirmationDataSuccess | (data) => void      | yes      | value => value | A callback function that is called when the confirmation data is successfully retrieved. |
-| onGetConfirmationDataError   | (error) => void     | yes      | value => value | A callback function that is called when retrieving the confirmation data fails.          |
-| onLinkCopied                 | () => void          | no       | value => value | A callback function that is called when the referral link is copied.                     |
-
-</details>
-
-&nbsp;
-
-## `MyTicketsContainer`
-
-The component is responsible for rendering a list of orders with details and some customization options.
-
-<details open>
-
-| Property                     | Type                | Required | Default Value  | Description                                                                              |
-| ---------------------------- | ------------------- | -------- | -------------- | ---------------------------------------------------------------------------------------- |
-| isReferralEnabled            | boolean             | yes      | false          | Whether referral functionality is enabled.                                               |
-| showDefaultShareButtons      | boolean             | yes      | false          | Whether to display default share buttons.                                                |
-| shareButtons                 | IShareButton[]      | yes      | []             | Array of objects representing the share buttons.                                         |
-| messengerAppId               | string              | yes      | N/A            | Messenger App ID for Facebook share button.                                              |
-| orderHash                    | string              | no       | N/A            | Hash value of the order.                                                                 |
-| clientLabel                  | string              | no       | 'Ticket Fairy' | Client's name.                                                                           |
-| confirmationLabels           | IConfirmationLabels | no       | {}             | Object containing labels for the confirmation page.                                      |
-| hasCopyIcon                  | boolean             | no       | true           | Whether to display a copy icon beside the referral link.                                 |
-| showReferralsInfoText        | boolean             | no       | false          | Whether to display referral information text.                                            |
-| showCopyInfoModal            | boolean             | no       | false          | Whether to display a copy info modal after the link is copied.                           |
-| showPricingNoteSection       | boolean             | no       | false          | Whether to display the pricing note section.                                             |
-| -                            | -                   | -        | -              | -                                                                                        |
-| onGetConfirmationDataSuccess | (data) => void      | yes      | value => value | A callback function that is called when the confirmation data is successfully retrieved. |
-| onGetConfirmationDataError   | (error) => void     | yes      | value => value | A callback function that is called when retrieving the confirmation data fails.          |
-| onLinkCopied                 | () => void          | no       | value => value | A callback function that is called when the referral link is copied.                     |
-
-</details>
-
-&nbsp;
-
-## Orders Container
-
-Will show the purchased orders for the logged user.  
-Orders container interface extends [Login Modal Interface](#login-modal-interface).
-
-<details open>
-  <summary><b>Orders Container Props Interface:</b></summary>
-
-| Property           | Type                           | Required | Default Value  | Description                                          |
-| ------------------ | ------------------------------ | -------- | -------------- | ---------------------------------------------------- |
-| handleDetailsInfo  | Function: (id: string) => void | yes      | value => value | Called on "Order Details" button click.              |
-| onGetOrdersSuccess | Function: (data) => void       | yes      | value => value | Called after fetching orders data request’s success. |
-| onGetOrdersError   | Function: (error) => void      | yes      | value => value | Called after fetching orders data request’s failure. |
-| theme              | 'light' / 'dark'               | no       | ‘dark'         | Main container class.                                |
-
-</details>
-
-&nbsp;
-
-## Order Details Container
-
-Will show the purchased order details. Contains `order PDF download` and `ticket resale` functionalities. Currently both functionalities are enabled by default.
-
-<details open>
-  <summary><b>Order Container Props Interface:</b></summary>
-
-| Property                  | Type                                      | Required | Default Value                                | Description                                                                                                                                                                         |
-| ------------------------- | ----------------------------------------- | -------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| columns                   | [ { label: string } ]                     | yes      | []                                           | Order details table’s columns’ labels.                                                                                                                                              |
-| ticketsTableColumns       | ITicketsTableColumns[] <sup>[3](#3)</sup> | no       | defaultTicketsTableColumns<sup>[3](#3)</sup> | Order’s tickets table’s columns.                                                                                                                                                    |
-| displayColumnNameInRow    | boolean                                   | no       | false                                        | Display column’s names in row, instead of table header.                                                                                                                             |
-| canSellTicket             | boolean                                   | no       | true                                         | A boolean value indicating whether the user can sell tickets.                                                                                                                       |
-| ordersPath                | string                                    | no       |                                              | A string representing the URL of the page to which the "Back to Orders" and "Return to Order History" buttons will redirect the user.                                               |
-| orderId                   | string or number                          | no       |                                              | A string or number representing the ID of the order to be displayed. If this prop is not provided, the component will try to get the order ID from the query parameters of the URL. |
-| referralTitle             | string                                    | no       | ""                                           | A string representing the title of the referral section.                                                                                                                            |
-| itemsTitle                | string                                    | no       | ""                                           | A string representing the title of the items section.                                                                                                                               |
-| ticketsTitle              | string                                    | no       | "Your Tickets"                               | A string representing the title of the tickets table section.                                                                                                                       |
-| personalLinkIcon          | string                                    | no       | “”                                           | Custom icon to display near personal share link.                                                                                                                                    |
-| onGetOrdersSuccess        | Function: (data) => void                  | no       | value => value                               | Called after fetching order data request’s success.                                                                                                                                 |
-| onGetOrdersError          | Function: (error) => void                 | no       | value => value                               | Called after fetching order data request’s failure.                                                                                                                                 |
-| onResaleTicketSuccess     | Function: (data) => void                  | no       | value => value                               | Called after resale ticket request’s success.                                                                                                                                       |
-| onResaleTicketError       | Function: (error) => void                 | no       | value => value                               | Called after resale ticket request’s failure.                                                                                                                                       |
-| onRemoveFromResaleSuccess | Function: (data) => void                  | no       | value => value                               | Called after remove from resale ticket request’s success.                                                                                                                           |
-| onRemoveFromResaleError   | Function: (error) => void                 | no       | value => value                               | Called after remove from resale ticket request’s failure.                                                                                                                           |
-| onReturnButtonClick       | Function: () => void                      | no       | N/A                                          | Called on “Return” button click. If not passed, button click will redirect to ‘/orders’.                                                                                            |
-
-</details>
-
-&nbsp;
-
-## Ticket Resale Container
-
-Container renders information about accepting or declining of resold tickets. It will automatically redirect to home page, if not valid hash is provided in URL.
-
-<details open>
-  <summary><b>Ticket Resale Container Props Interface:</b></summary>
-
-| Property                       | Type                      | Required | Default Value  | Description                                    |
-| ------------------------------ | ------------------------- | -------- | -------------- | ---------------------------------------------- |
-| onProcessTicketSuccess         | Function: (data) => void  | no       | value => value | Called after process ticket request’s success. |
-| onGetOrdersError               | Function: (error) => void | no       | value => value | Called after process ticket request’s failure. |
-| onDeclineTicketPurchaseSuccess | Function: (data) => void  | no       | value => value | Called after decline ticket request’s success. |
-| onDeclineTicketPurchaseError   | Function: (error) => void | no       | value => value | Called after decline ticket request’s failure. |
-
-</details>
-
-&nbsp;
-
-<details open>
-  <summary><small id="1">1. Share buttons</small></summary>
-
-```ts
-interface IShareButton {
-  mainLabel: string;
-  subLabel: string;
-  platform: string;
-  shareData: any;
-}
-```
-
-```yaml
-Default share options if `showDefaultShareButtons` is true, are: "Share on Facebook", "Tweet to your Followers", "Message friends on Facebook" and "Message friends on WhatsApp".
-```
-
-</details>
-
-<details open>
-  <summary><small id="2">2. Confirmation Labels</small></summary>
-
-```ts
-interface IConfirmationLabels {
-  confirmationTitle?: string;
-  confirmationMain?: string;
-  confirmationHelper?: string
-}
-```
-
-```js
-const defaultConfirmationLabels = {
-  confirmationTitle = "Your Tickets are Confirmed!",
-  confirmationMain = "Your tickets are available in My Tickets section",
-  confirmationHelper = "Please bring them with you to the event"
-}
-```
-
-</details>
-
-<details open>
-  <summary><small id="3">3. Tickets table columns</small></summary>
-
-```ts
-interface ITicketsTableColumns {
-  id?: string | number;
-  key: keyof ITicketTypes & keyof IActionColumns;
-  label: string | number | null | undefined;
-}
-
-interface IActionColumns {
-  download?: boolean;
-  sell_ticket?: boolean;
-}
-```
-
-```ts
-const defaultTicketsTableColumns = [
-  { key: 'ticket_type', label: 'Ticket Type' },
-  { key: 'holder_name', label: 'Ticket Holder' },
-  { key: 'status', label: 'Status' },
-  { key: 'download', label: '' },
-  { key: 'sell_ticket', label: '' }
-]
-```
-
-</details>
-
-# Commands
-
-TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
-
-The recommended workflow is to run TSDX in one terminal:
+From the repo root:
 
 ```bash
-npm start # or yarn start
+pnpm run start:react
 ```
 
-This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
-
-Then run the example inside another:
-
-```bash
-cd example
-npm i # or yarn to install dependencies
-npm start # or yarn start
-```
-
-The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
-
-To do a one-off build, use `npm run build` or `yarn build`.
-
-&nbsp;
-
-## Rollup
-
-TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
-
-&nbsp;
-
-### TypeScript
-
-`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
-
-### GitHub Actions
+`pnpm run playground:react` opens the docs-style playground instead, with a
+live preview and source for each panel.
 
-Two actions are added by default:
+Set credentials in `example/.env`; see `example/.env.example`.
 
-- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
-- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
+---
 
-## Optimizations
+Part of the [TicketFairy checkout monorepo](../../README.md).