tf-checkout-react 1.6.6 → 1.7.2

package/README.md

@@ -3,9 +3,12 @@
  
 
 <details open>
-  <summary><strong>Table of Contents</strong></summary>
+  <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)
@@ -21,11 +24,11 @@
   - [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)
+    - [**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)
+    - [**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)
+    - [**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)
@@ -38,33 +41,53 @@
   - [Order Details Container](#order-details-container)
   - [Ticket Resale Container](#ticket-resale-container)
 - [Commands](#commands)
-    - [Rollup](#rollup)
-    - [TypeScript](#typescript)
-    - [GitHub Actions](#github-actions)
+  - [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 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.
+- `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.
+- `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.  
+- `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.   
+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;
 
@@ -74,7 +97,6 @@ Together, these components and functionalities provide a comprehensive set of to
 
 &nbsp;
 
-
 # Prerequisites
 
 - node >= v16.19.0
@@ -82,13 +104,13 @@ Together, these components and functionalities provide a comprehensive set of to
 
 # Installation
 
-```
+```bash
 npm i tf-checkout-react
 ```
 
 or
 
-```
+```bash
 yarn add tf-checkout-react
 ```
 
@@ -107,11 +129,13 @@ Project will run under `localhost:3002`. Port can be changed from `package.json`
 
 ## 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.
+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'
 ```
 
@@ -130,21 +154,298 @@ Call it in the root and pass neccesary options. Here are available options:
 
 &nbsp;
 
+# Single Page Checkout Implementation
+
+## 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
+
+### **Single Page Flow:**
+
+- 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
+
+## Implementation Patterns
+
+### **1. State Management**
+
+```jsx
+import React, { useState } from 'react'
+import {
+  TicketsContainer,
+  BillingInfoContainer,
+  PaymentContainer,
+  ConfirmationContainer
+} 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
+    })
+  }
+
+  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']))
+            }}
+          />
+        )}
+      </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>
+  )
+}
+```
+
+## Important Considerations
+
+### **Component Props Modifications**
+
+- **`enableBillingInfoAutoCreate: false`** - Prevents automatic navigation to billing page
+- **`skipPage: false`** - Controls whether billing page can be skipped
+- **Custom callback handlers** - Override default navigation behavior
+
+### **State Persistence**
+
+```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)
+  }
+}, [])
+```
+
+### **Error Handling**
+
+```jsx
+const [errors, setErrors] = useState({})
+
+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}
+/>
+```
+
+### **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.
 
-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.
+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.
+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).
+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:
+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'
@@ -154,7 +455,7 @@ const MyComponent = () => {
   const [isLogged, setIsLogged] = useState(false)
 
   // Listen for changes to the __X-TF-ECOMMERCE__ cookie
-  useCookieListener("X_TF_ECOMMERCE", value => setIsLogged(Boolean(value)))
+  useCookieListener('X_TF_ECOMMERCE', value => setIsLogged(Boolean(value)))
 
   // ... rest of component logic
 }
@@ -187,9 +488,12 @@ const MyComponent = () => {
 
 ## Register
 
-The `RegisterModal` component is designed to be used inside package to allows users to register for an account.  <br />
+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.
+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>
@@ -208,7 +512,9 @@ When the user submits the form, the component calls the register API function to
 
 ## 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.
+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>
@@ -226,13 +532,14 @@ The `ForgotPasswordModal` component is a modal dialog for users to reset their p
 
 ## 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.
+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 />
+### **Note that package automatically calls component in [`TicketsContainer`](#ticketscontainer)**
 
+<br />
 
 <details open>
 <summary><b>Promo Code Props Interface:</b></summary>
@@ -257,11 +564,14 @@ To use this component, simply import it and include it in your JSX with the requ
 
 ## 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.
+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 /> 
+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)__
+### **Note that package automatically calls component in [`TicketsContainer`](#ticketscontainer)**
 
 <br />
 
@@ -280,10 +590,11 @@ To integrate the `AccessCodeSection` component, import it into your JSX and prov
 
 ## 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.
+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)__
+### **Note that package automatically calls component in [`TicketsContainer`](#ticketscontainer)**
 
 <br />
 
@@ -317,33 +628,40 @@ Here is the list of pages where the `usePixel` function is automatically used:
 
 # 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 />
+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 containes `WaitingLsit` that manages and displays waiting list functionality for the event.<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
+**_Example of usage_**:
 
+```jsx
 import { TicketsContainer } from 'tf-checkout-react'
 
 <TicketsContainer
   theme="light"
   eventId={event?.id}
-  handleNotInvitedModalClose={() => { }}
-  handleInvalidLinkModalClose={() => { }}
+  handleNotInvitedModalClose={() => {}}
+  handleInvalidLinkModalClose={() => {}}
   onAddToCartSuccess={() => {}}
   isPromotionsEnabled={event?.is_promotions_enabled}
   isAccessCodeEnabled={event?.is_access_code}
@@ -351,7 +669,9 @@ import { TicketsContainer } from 'tf-checkout-react'
   hideSessionButtons={true}
   enableAddOns={false}
   showGroupNameBlock={true}
-  tableTicketsHeaderComponent={<div className="tickets-container-header">RESERVE TABLES</div>}
+  tableTicketsHeaderComponent={
+    <div className="tickets-container-header">RESERVE TABLES</div>
+  }
   onPendingVerification={() => {}}
 />
 ```
@@ -431,9 +751,18 @@ Add-Ons component will retrieve and show a list of add-ons corresponding to sele
 &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 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.
+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).
 
@@ -480,7 +809,16 @@ Props interface extends [Login Modal Interface](#login), [Register Modal Interfa
 &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.  
+
+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>
 
@@ -512,7 +850,8 @@ The component provides a form for users to enter their payment information and c
 &nbsp;
 
 ## `ConfirmationContainer`
-The component is responsible for displaying the confirmation page after a successful payment.  
+
+The component is responsible for displaying the confirmation page after a successful payment.
 
 <details open>
 
@@ -539,7 +878,8 @@ The component is responsible for displaying the confirmation page after a succes
 &nbsp;
 
 ## `MyTicketsContainer`
-The component is responsible for rendering a list of orders with details and some customization options.  
+
+The component is responsible for rendering a list of orders with details and some customization options.
 
 <details open>
 
@@ -636,8 +976,8 @@ Container renders information about accepting or declining of resold tickets. It
 <details open>
   <summary><small id="1">1. Share buttons</small></summary>
 
-```
-IShareButton {
+```ts
+interface IShareButton {
   mainLabel: string;
   subLabel: string;
   platform: string;
@@ -645,7 +985,7 @@ IShareButton {
 }
 ```
 
-```
+```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".
 ```
 
@@ -654,15 +994,15 @@ Default share options if `showDefaultShareButtons` is true, are: "Share on Faceb
 <details open>
   <summary><small id="2">2. Confirmation Labels</small></summary>
 
-```
-IConfirmationLabels {
+```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",
@@ -675,7 +1015,7 @@ const defaultConfirmationLabels = {
 <details open>
   <summary><small id="3">3. Tickets table columns</small></summary>
 
-```
+```ts
 interface ITicketsTableColumns {
   id?: string | number;
   key: keyof ITicketTypes & keyof IActionColumns;
@@ -688,7 +1028,7 @@ interface IActionColumns {
 }
 ```
 
-```
+```ts
 const defaultTicketsTableColumns = [
   { key: 'ticket_type', label: 'Ticket Type' },
   { key: 'holder_name', label: 'Ticket Holder' },
@@ -726,7 +1066,7 @@ To do a one-off build, use `npm run build` or `yarn build`.
 
 &nbsp;
 
-### Rollup
+## 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.
 
@@ -742,3 +1082,5 @@ 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`](https://github.com/ai/size-limit)
+
+## Optimizations