tf-checkout-react 1.6.6 → 1.7.1

package/src/components/addonsContainer/index.tsx

@@ -1,21 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/no-unescaped-entities */
 
 import { CircularProgress } from '@mui/material'
 import { Form, Formik } from 'formik'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
-import React, { useEffect, useState } from 'react'
+import _map from 'lodash/map'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Tooltip } from 'react-tooltip'
 
 import { getAddons, getCart, getCheckoutPageConfigs, postOnCheckout } from '../../api'
+import { FEES_STYLES } from '../../constants'
 import { currencyNormalizerCreator } from '../../normalizers'
 import { ICheckoutPageConfigs } from '../../types'
 import {
+  CONFIGS,
   createCheckoutDataBodyWithDefaultHolder,
   createMarkup,
   getQueryVariable,
   isBrowser,
 } from '../../utils'
 import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
+import InfoIcon from '../ticketsContainer/InfoIcon'
 import TimerWidget from '../timerWidget'
 import { addonsWithGroupsAdapter, cartAdapter } from './adapters'
 import AddonComponent from './AddonComponent'
@@ -40,6 +46,12 @@ export interface IAddonContainterProps {
   onConfirmSelectionError?: (error: any) => void;
   onCountdownFinish?: () => void;
   onPendingVerification?: () => void;
+  samePage?: boolean;
+  descriptionTrigger?: 'click' | 'hover' | 'always';
+  addOnDataWithCustomFields: any;
+  configs: any;
+
+  onAddOnSelect?: (id: string, value: string, addon: any) => void;
 }
 
 export interface ObjectLiteral {
@@ -58,6 +70,11 @@ export const AddonsContainter = ({
   onConfirmSelectionError = _identity,
   onCountdownFinish = _identity,
   onPendingVerification = _identity,
+  samePage,
+  descriptionTrigger = 'click',
+  addOnDataWithCustomFields,
+  configs,
+  onAddOnSelect = _identity,
 }: IAddonContainterProps) => {
   const eventId = getQueryVariable('event_id')
   const [addons, setAddons] = useState<any>([])
@@ -69,7 +86,16 @@ export const AddonsContainter = ({
   const [cartExpirationTime, setCartExpirationTime] = useState(0)
   const [pendingVerificationMessage, setPendingVerificationMessage] = useState()
 
+  const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
+
+  const handleDescriptionToggle = (ticketId: string) => {
+    setVisibleDescription(current => (current === ticketId ? null : ticketId))
+  }
+
   useEffect(() => {
+    if (samePage) {
+      window.localStorage.removeItem('add_ons')
+    }
     const getAddonsPageInfo = async () => {
       try {
         if (eventId) {
@@ -222,8 +248,8 @@ export const AddonsContainter = ({
             total,
           })
         } catch (error) {
-          if (error.response?.data?.data?.hasUnverifiedOrder) {
-            setPendingVerificationMessage(error.response?.data?.message)
+          if ((error as any).response?.data?.data?.hasUnverifiedOrder) {
+            setPendingVerificationMessage((error as any).response?.data?.message)
           } else {
             onPostCheckoutError(error)
             onConfirmSelectionError(error)
@@ -255,6 +281,22 @@ export const AddonsContainter = ({
     window.localStorage.removeItem('add_ons')
   }
 
+  const initialValues = useMemo(() => {
+    const addOnsData: any = {}
+    if (addons?.length > 0 && addOnDataWithCustomFields?.fields?.length > 0) {
+      _map(addons, addon => {
+        _map(addOnDataWithCustomFields.fields, field => {
+          const { id, groupItems } = field
+          _map(groupItems, item => {
+            addOnsData[`${addon.id}-${id}-${item.name}`] = item.value
+          })
+        })
+      })
+    }
+
+    return addOnsData
+  }, [addons, addOnDataWithCustomFields])
+
   if (loading) {
     return (
       <div className={`${classNamePrefix}_loader`}>
@@ -263,9 +305,17 @@ export const AddonsContainter = ({
     )
   }
 
+  if (addons?.length === 0) {
+    return null
+  }
+
+  const params = new URL(`${window.location}`).searchParams
+  const addOnIsIncluded = params.get('include_add_on') === 'true'
+  const isResale = params.get('resale') === 'true'
+
   return (
     <>
-      {!!cartExpirationTime && enableTimer && (
+      {!!cartExpirationTime && enableTimer && !samePage && (
         <TimerWidget
           expires_at={cartExpirationTime}
           onCountdownFinish={() => {
@@ -277,44 +327,72 @@ export const AddonsContainter = ({
       <div className={`${classNamePrefix}_container`}>
         <div className={`${classNamePrefix}_block`}>
           <div className={`${classNamePrefix}_line_block`}>
-            <p className={`${classNamePrefix}_info_title`}>Get Your Tickets</p>
-            <div className={`${classNamePrefix}_title`}>UPGRADES & ADD-ONS</div>
-            <button
-              type="button"
-              className={`${classNamePrefix}_skip`}
-              onClick={() => {
-                handleClearAddons()
-                handleConfirm({}, true)
-              }}
-            >
-              Skip
-            </button>
-          </div>
-          <div className={`${classNamePrefix}_subtitle`}>
-            PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW
+            {samePage ? null : (
+              <p className={`${classNamePrefix}_info_title`}>Get Your Tickets</p>
+            )}
+            {(!addons?.length || (isResale && addOnIsIncluded)) && samePage ? null : (
+              <div className={`${classNamePrefix}_title`}>UPGRADES & ADD-ONS</div>
+            )}
+            {samePage ? null : (
+              <button
+                type="button"
+                className={`${classNamePrefix}_skip`}
+                onClick={() => {
+                  handleClearAddons()
+                  handleConfirm({}, true)
+                }}
+              >
+                Skip
+              </button>
+            )}
           </div>
+          {(!addons?.length || (isResale && addOnIsIncluded)) && samePage ? null : (
+            <div className={`${classNamePrefix}_subtitle`}>
+              PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW
+            </div>
+          )}
           <Formik
-            initialValues={{}}
+            initialValues={initialValues}
             onSubmit={values => {
               handleConfirm(values)
             }}
+            validate={
+              samePage
+                ? values => {
+                    if (isBrowser) {
+                      window.localStorage.setItem('add_ons', JSON.stringify(values))
+                    }
+                  }
+                : undefined
+            }
           >
-            {({ values }) => {
+            {({ values, errors, setFieldTouched }) => {
               const isConfirmDisabled = !isAtLeastOneAddonSelected(values)
 
               return (
                 <Form autoComplete="off" className="form_holder">
                   <>
-                    {addons.map((addon: any) => {
+                    {(isResale && addOnIsIncluded ? [] : addons).map((addon: any) => {
                       const price = addon.feeIncluded ? addon.price : addon.cost
-                      const isAddonFree = Number(price) === 0
+                      const isAddonFree = Number(addon?.price) === 0
+
+                      const addOnNormalizedCost = isAddonFree
+                        ? 'FREE'
+                        : currencyNormalizerCreator(
+                            getNormalizedPrice(addon?.cost ?? 0),
+                            addon.currency
+                          )
 
                       const addonNormalizedPrice = isAddonFree
                         ? 'FREE'
                         : currencyNormalizerCreator(
-                          getNormalizedPrice(price),
-                          addon.currency
-                        )
+                            getNormalizedPrice(
+                              CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH
+                                ? addon?.price ?? price
+                                : price
+                            ),
+                            addon.currency
+                          )
 
                       return (
                         <div
@@ -331,20 +409,69 @@ export const AddonsContainter = ({
                           <div className={`${classNamePrefix}_product_info_block`}>
                             <div className={`${classNamePrefix}_product_title`}>
                               {addon.name}
+                              {addon.description && descriptionTrigger !== 'always' && (
+                                <>
+                                  <span
+                                    aria-hidden
+                                    className="info-icon"
+                                    onClick={
+                                      descriptionTrigger === 'click'
+                                        ? () => handleDescriptionToggle(addon.id)
+                                        : undefined
+                                    }
+                                    onMouseEnter={
+                                      descriptionTrigger === 'hover'
+                                        ? () => setVisibleDescription(addon.id)
+                                        : undefined
+                                    }
+                                    onMouseLeave={
+                                      descriptionTrigger === 'hover'
+                                        ? () => setVisibleDescription(null)
+                                        : undefined
+                                    }
+                                    style={{
+                                      marginLeft: 8,
+                                      cursor: 'pointer',
+                                      display: 'flex',
+                                    }}
+                                    data-tooltip-id={`tooltip-${addon.id}`}
+                                    data-tooltip-content="View Add-On info"
+                                  >
+                                    <InfoIcon size={14} />
+                                  </span>
+                                  <Tooltip id={`tooltip-${addon.id}`} place="top">
+                                    {addon.description || 'No description available'}
+                                  </Tooltip>
+                                </>
+                              )}
                             </div>
                             <div className={`${classNamePrefix}_product_price`}>
-                              {addonNormalizedPrice}
-                              {!isAddonFree && (
-                                <span className={`${classNamePrefix}_product_fee`}>
-                                  {addon.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}
-                                </span>
-                              )}
+                              {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL
+                                ? addonNormalizedPrice
+                                : addOnNormalizedCost}
+                              {!isAddonFree &&
+                                CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && (
+                                  <span className={`${classNamePrefix}_product_fee`}>
+                                    {addon.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}
+                                  </span>
+                                )}
+                              {!isAddonFree &&
+                                CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
+                                  <>
+                                    <span className={`${classNamePrefix}_product_fee`}>
+                                      {`(${addonNormalizedPrice} with fees)`}
+                                    </span>
+                                  </>
+                                )}
                             </div>
                           </div>
-                          <div
-                            className={`${classNamePrefix}_product_desc`}
-                            dangerouslySetInnerHTML={createMarkup(addon.description)}
-                          />
+                          {(visibleDescription === addon.id ||
+                            descriptionTrigger === 'always') && (
+                            <div
+                              className={`${classNamePrefix}_product_desc`}
+                              dangerouslySetInnerHTML={createMarkup(addon.description)}
+                            />
+                          )}
                           <div className={`${classNamePrefix}_product_select_container`}>
                             {addon.variants ? (
                               addon.variants.map((variant: any) => (
@@ -354,9 +481,14 @@ export const AddonsContainter = ({
                                   data={variant}
                                   selectOptions={addonsOptions[variant.id]}
                                   classNamePrefix={classNamePrefix}
-                                  handleAddonChange={(id, value) =>
+                                  handleAddonChange={(id, value) => {
+                                    onAddOnSelect(id, value, addon)
                                     onFieldChange(id, value, addon)
-                                  }
+                                  }}
+                                  addOnDataWithCustomFields={addOnDataWithCustomFields}
+                                  configs={configs}
+                                  values={values}
+                                  errors={errors}
                                 />
                               ))
                             ) : (
@@ -366,23 +498,42 @@ export const AddonsContainter = ({
                                 data={addon}
                                 selectOptions={addonsOptions[addon.id]}
                                 classNamePrefix={classNamePrefix}
-                                handleAddonChange={(id, value) =>
+                                handleAddonChange={(id, value) => {
+                                  onAddOnSelect(id, value, addon)
                                   onFieldChange(id, value, addon)
-                                }
+
+                                  _map(addOnDataWithCustomFields.fields, fieldGroup => {
+                                    const { id, groupItems } = fieldGroup
+                                    _map(groupItems, field => {
+                                      setFieldTouched(
+                                        `${addon.id}-${id}-${field.name}`,
+                                        true,
+                                        true
+                                      )
+                                    })
+                                  })
+                                }}
+                                addOnDataWithCustomFields={addOnDataWithCustomFields}
+                                configs={configs}
+                                values={values}
+                                errors={errors}
                               />
                             )}
                           </div>
                         </div>
                       )
                     })}
-                    <button
-                      type="submit"
-                      className={`${isConfirmDisabled ? `${classNamePrefix}_is_disabled` : ''
+                    {samePage ? null : (
+                      <button
+                        type="submit"
+                        className={`${
+                          isConfirmDisabled ? `${classNamePrefix}_is_disabled` : ''
                         } ${classNamePrefix}_submit_button`}
-                      disabled={isConfirmDisabled}
-                    >
-                      CONFIRM SELECTION
-                    </button>
+                        disabled={isConfirmDisabled}
+                      >
+                        CONFIRM SELECTION
+                      </button>
+                    )}
                   </>
                 </Form>
               )

package/src/components/billing-info-container/hooks/index.ts

@@ -0,0 +1,3 @@
+export { usePaymentRedirect } from './usePaymentRedirect'
+export { useStripePayment } from './useStripePayment'
+export { usePaymentContext } from './usePaymentContext'

package/src/components/billing-info-container/hooks/usePaymentContext.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react'
+
+export const usePaymentContext = () => {
+  const storePaymentContext = useCallback((context: any) => {
+    localStorage.setItem('stripe_payment_context', JSON.stringify(context))
+  }, [])
+
+  const getPaymentContext = useCallback(() => {
+    const storedContext = localStorage.getItem('stripe_payment_context')
+    return storedContext ? JSON.parse(storedContext) : null
+  }, [])
+
+  const clearPaymentContext = useCallback(() => {
+    localStorage.removeItem('stripe_payment_context')
+  }, [])
+
+  return {
+    storePaymentContext,
+    getPaymentContext,
+    clearPaymentContext
+  }
+}

package/src/components/billing-info-container/hooks/usePaymentRedirect.ts

@@ -0,0 +1,147 @@
+import { Stripe } from '@stripe/stripe-js'
+import { FormikHelpers } from 'formik'
+import _identity from 'lodash/identity'
+import { useEffect } from 'react'
+
+import { handlePaymentMiddleWare } from '../../paymentContainer/handlePayment'
+
+interface PaymentContext {
+  attributes: any
+  isFreeTickets: boolean
+  updatedOrderData: any
+  eventId: string
+  values: any
+  formikHelpers: FormikHelpers<any>
+  checkoutResponse: any
+  checkoutUpdateResponse: any
+  timestamp: number
+}
+
+interface UsePaymentRedirectProps {
+  stripeRef: React.MutableRefObject<Stripe | null>
+  setError: (error: string | null) => void
+  setLoading: (loading: boolean) => void
+  removeReferralKey: () => void
+  removeAdditionalConfigs: () => void
+  handleSubmit: (
+    values: any,
+    formikHelpers: FormikHelpers<any>,
+    eventId: any,
+    checkoutResponse: any,
+    checkoutUpdateResponse: any,
+    paymentResponse: any
+  ) => void
+  isBrowser: boolean
+}
+
+export const usePaymentRedirect = ({
+  stripeRef,
+  setError,
+  setLoading,
+  removeReferralKey,
+  removeAdditionalConfigs,
+  handleSubmit,
+  isBrowser,
+}: UsePaymentRedirectProps) => {
+  useEffect(() => {
+    const handlePaymentReturn = async () => {
+      const urlParams = new URLSearchParams(window.location.search)
+      const isPaymentReturn = urlParams.get('payment_return')
+      const clientSecret = urlParams.get('payment_intent_client_secret')
+
+      if (isPaymentReturn && clientSecret && stripeRef.current) {
+        console.log('Detected payment redirect return, checking status')
+        setLoading(true)
+
+        try {
+          // Get stored payment context
+          const storedContext = localStorage.getItem('stripe_payment_context')
+          if (!storedContext) {
+            setError('Payment context not found')
+            setLoading(false)
+            return
+          }
+
+          const paymentContext: PaymentContext = JSON.parse(storedContext)
+          const { paymentIntent } = await stripeRef.current.retrievePaymentIntent(
+            clientSecret
+          )
+
+          if (paymentIntent?.status === 'succeeded') {
+            console.log('Payment succeeded after redirect, continuing flow')
+
+            // Clean up stored context
+            localStorage.removeItem('stripe_payment_context')
+
+            // Continue with the success flow using stored context
+            let paymentResponse = null
+            await handlePaymentMiddleWare(
+              null,
+              {},
+              {
+                reviewData: paymentContext.attributes,
+                isFreeTickets: paymentContext.isFreeTickets,
+                paymentPlanIsAvailable: false,
+                showPaymentPlanSection: false,
+                handlePayment: (data: any) => {
+                  paymentResponse = data
+                },
+                setPaymentIsLoading: _identity,
+                setError: _identity,
+                orderData: paymentContext.updatedOrderData,
+                eventId: paymentContext.eventId,
+                isBrowser,
+                onPaymentError: (error: any) => {
+                  throw error
+                },
+              }
+            )
+
+            // Complete the flow with cleanup and handleSubmit
+            removeReferralKey()
+            removeAdditionalConfigs()
+            handleSubmit(
+              paymentContext.values,
+              paymentContext.formikHelpers,
+              paymentContext.eventId,
+              paymentContext.checkoutResponse,
+              paymentContext.checkoutUpdateResponse,
+              paymentResponse
+            )
+
+            // Clean URL parameters
+            window.history.replaceState({}, document.title, window.location.pathname)
+          } else if (paymentIntent?.status === 'requires_action') {
+            setError('Payment requires additional action')
+            // Clean up stored context and URL to prevent infinite loop
+            localStorage.removeItem('stripe_payment_context')
+            window.history.replaceState({}, document.title, window.location.pathname)
+          } else {
+            setError(`Payment failed or was cancelled.`)
+            // Clean up stored context and URL to prevent infinite loop
+            localStorage.removeItem('stripe_payment_context')
+            window.history.replaceState({}, document.title, window.location.pathname)
+          }
+        } catch (error) {
+          console.error('Error handling payment return:', error)
+          setError('Error processing payment return')
+          // Clean up stored context and URL to prevent infinite loop
+          localStorage.removeItem('stripe_payment_context')
+          window.history.replaceState({}, document.title, window.location.pathname)
+        } finally {
+          setLoading(false)
+        }
+      }
+    }
+
+    handlePaymentReturn()
+  }, [
+    stripeRef.current,
+    setError,
+    setLoading,
+    removeReferralKey,
+    removeAdditionalConfigs,
+    handleSubmit,
+    isBrowser,
+  ])
+}

package/src/components/billing-info-container/hooks/useStripePayment.ts

@@ -0,0 +1,121 @@
+import { FormikHelpers } from 'formik'
+import _identity from 'lodash/identity'
+
+import { handlePaymentMiddleWare } from '../../paymentContainer/handlePayment'
+
+interface PaymentData {
+  attributes: any
+  isFreeTickets: boolean
+  updatedOrderData: any
+  eventId: string
+}
+
+interface UseStripePaymentProps {
+  stripeRef: any
+  elementsRef: React.MutableRefObject<any>
+  setError: (error: string | null) => void
+  isBrowser: boolean
+}
+
+export const useStripePayment = ({
+  stripeRef,
+  elementsRef,
+  setError,
+  isBrowser,
+}: UseStripePaymentProps) => {
+  const processPayment = async (
+    paymentDataResponse: any,
+    values: any,
+    formikHelpers: FormikHelpers<any>,
+    checkoutResponse: any,
+    checkoutUpdateResponse: any,
+    paymentData: PaymentData
+  ) => {
+    const { attributes, isFreeTickets, updatedOrderData, eventId } = paymentData
+
+    if (!isFreeTickets) {
+      if (!stripeRef.current) {
+        setError('Stripe is not ready')
+        console.log('Stripe is not ready in billing-info-container')
+        return null
+      }
+
+      console.log('Stripe confirmPayment in billing-info-container')
+
+      // Step 1: Submit elements first
+      const { error: submitError } = await elementsRef.current.submit()
+      if (submitError) {
+        setError('' + submitError?.message)
+        console.log(
+          'Stripe elements.submit() error in billing-info-container',
+          submitError
+        )
+        return null
+      }
+
+      // Step 2: Store payment context before potential redirect
+      const paymentContext = {
+        attributes,
+        isFreeTickets,
+        updatedOrderData,
+        eventId,
+        values,
+        formikHelpers,
+        checkoutResponse,
+        checkoutUpdateResponse,
+        timestamp: Date.now(),
+      }
+      localStorage.setItem('stripe_payment_context', JSON.stringify(paymentContext))
+
+      // Step 3: Confirm payment with current page return URL
+      const { error: confirmError } = await stripeRef.current.confirmPayment({
+        clientSecret:
+          paymentDataResponse.data.attributes.payment_method.stripe_client_secret,
+        elements: elementsRef.current,
+        confirmParams: {
+          return_url:
+            window.location.href +
+            (window.location.href.includes('?') ? '&' : '?') +
+            'payment_return=true',
+        },
+        redirect: 'if_required',
+      })
+
+      if (confirmError) {
+        setError('' + confirmError?.message)
+        console.log('Stripe confirmPayment error in billing-info-container')
+        return null
+      }
+    }
+
+    console.log('Stripe confirmPayment success in billing-info-container')
+
+    // Handle payment middleware for non-redirect payments
+    let paymentResponse = null
+    await handlePaymentMiddleWare(
+      null,
+      {},
+      {
+        reviewData: attributes,
+        isFreeTickets,
+        paymentPlanIsAvailable: false,
+        showPaymentPlanSection: false,
+        handlePayment: (data: any) => {
+          paymentResponse = data
+        },
+        setPaymentIsLoading: _identity,
+        setError: _identity,
+        orderData: updatedOrderData,
+        eventId,
+        isBrowser,
+        onPaymentError: (error: any) => {
+          throw error
+        },
+      }
+    )
+
+    return paymentResponse
+  }
+
+  return { processPayment }
+}