tf-checkout-react v1.6.6-beta.4

tf-checkout-react

• tf-checkout-react
• Introduction
• Intergrations
  • WebFlow
• Prerequisites
• Installation
  • Run Independently
• Usage
  • Set configuration
    • Configurations for production
    • Configurations for development/testing
• Functionalities
  • Login
  • Register
  • Forgot Password
  • Promo Code
    • Note that package automatically calls component in TicketsContainer
  • Access Code
    • Note that package automatically calls component in TicketsContainer
  • Waiting List
    • Note that package automatically calls component in TicketsContainer
  • Pixel Usage
• Components
  • TicketsContainer
  • AddOnsContainer
  • BillingInfoContainer
  • PaymentContainer
  • ConfirmationContainer
  • MyTicketsContainer
  • Orders Container
  • Order Details Container
  • Ticket Resale Container
• Commands
  • Rollup
  • TypeScript
  • GitHub Actions

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.
• 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.
• 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.

Together, these components and functionalities provide a comprehensive set of tools to manage the checkout process and related activities for a TicketFairy-powered event.
 
 

Intergrations

WebFlow

Prerequisites

• node >= v16.19.0
• npm >= 8.19.3

Installation

npm i tf-checkout-react

or

yarn add tf-checkout-react

Run Independently

• 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

Project will run under localhost:3002. Port can be changed from package.json.

Usage

Set configuration

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.

import { setConfigs } from 'tf-checkout-react'

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.

Functionalities

Login

The LoginModal component is designed to be used inside package to authenticate users. 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 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 and 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:

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
}

Register

The RegisterModal component is designed to be used inside package to allows users to register for an account.

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.

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.

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

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.

Note that package automatically calls component in TicketsContainer

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

Pixel Usage

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.

The purpose of the usePixel hook is to enable event tracking and analytics for various user actions within the application.

Here is the list of pages where the usePixel function is automatically used:

• Billing Info Container
• Confirmation Container
• Payment Container
• Tickets Container

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. 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 or Promo Code that applies a discount to the ticket price or hide/unhide some tickets via Access Code. It also containes WaitingLsit that manages and displays waiting list functionality for the event. Props interface partially extends Promo Code Props Interface, Access Code Props Interface, Waiting List Props Interface.

Tickets component displays a list of the top influencers who have promoted the event.

Tickets component is flexible and customizable, allowing for different layouts and behaviors depending on the event's requirements.

Example of usage:

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={() => {}}
/>

AddOnsContainer

Add-Ons component will retrieve and show a list of add-ons corresponding to selected event.

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 also phone field, which validation functionality is provided by Twilio and integrated into the component. It provides an additional layer of verification and security during the ticket purchase process.

Props interface extends Login Modal Interface, Register Modal Interface, Forgot Password Modal Interface.

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.

ConfirmationContainer

The component is responsible for displaying the confirmation page after a successful payment.

MyTicketsContainer

The component is responsible for rendering a list of orders with details and some customization options.

Orders Container

Will show the purchased orders for the logged user.
Orders container interface extends Login Modal Interface.

Order Details Container

Will show the purchased order details. Contains order PDF download and ticket resale functionalities. Currently both functionalities are enabled by default.

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.

IShareButton {
  mainLabel: string;
  subLabel: string;
  platform: string;
  shareData: any;
}

Default share options if `showDefaultShareButtons` is true, are: "Share on Facebook", "Tweet to your Followers", "Message friends on Facebook" and "Message friends on WhatsApp".

IConfirmationLabels {
  confirmationTitle?: string;
  confirmationMain?: string;
  confirmationHelper?: string
}

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"
}

interface ITicketsTableColumns {
  id?: string | number;
  key: keyof ITicketTypes & keyof IActionColumns;
  label: string | number | null | undefined;
}

interface IActionColumns {
  download?: boolean;
  sell_ticket?: boolean;
}

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: '' }
]

Commands

TSDX scaffolds your new library inside /src, and also sets up a Parcel-based playground for it inside /example.

The recommended workflow is to run TSDX in one terminal:

npm start # or yarn start

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:

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.

To do a one-off build, use npm run build or yarn build.

Rollup

TSDX uses Rollup as a bundler and generates multiple rollup configs for various module formats and build settings. See Optimizations for details.

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

Two actions are added by default:

• 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