tf-checkout-react 1.6.6-beta.3 → 1.6.6-beta.31

package/src/components/stripePayment/index.tsx

@@ -1,17 +1,24 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import './style.css'
 
 import CircularProgress from '@mui/material/CircularProgress'
 import {
+  AddressElement,
   CardCvcElement,
   CardExpiryElement,
   CardNumberElement,
   useElements,
   useStripe,
 } from '@stripe/react-stripe-js'
-import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
+import {
+  Stripe,
+  StripeCardNumberElement,
+  StripeCardNumberElementOptions,
+  StripeError,
+} from '@stripe/stripe-js'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 
 import { refreshSeatReservation } from '../../api'
 import { getCurrencySymbolByCurrency } from '../../normalizers'
@@ -20,6 +27,17 @@ import { adaptStripeError } from '../../utils/adaptStripeErrors'
 import { Checkbox } from '../common/index'
 import ConfirmModal from '../confirmModal'
 
+interface PaymentFieldsData {
+  billing_info: {
+    city?: string;
+    street_address?: string;
+    state?: string;
+  };
+  postalCode?: string;
+  disableZipSection?: boolean;
+  cardComplete?: boolean;
+}
+
 const options: StripeCardNumberElementOptions = {
   style: {
     base: {
@@ -51,11 +69,21 @@ export interface ICheckoutForm {
   isLoading: any;
   handleSetLoading: (loading: any) => void;
   conditions: any;
-  disableZipSection: boolean;
+  disableZipSection?: boolean;
   paymentButtonText?: string;
   forPaymentPlan?: boolean;
   orderId?: string;
   hasSeatMapActions: boolean;
+  enableAddressElement?: boolean;
+  collectPaymentMethodOnly?: boolean;
+  displayPaymentButton?: boolean;
+  onPaymentFieldsUpdate?: (
+    error: any,
+    paymentFieldsData: PaymentFieldsData,
+    stripe: Stripe | null,
+    card: StripeCardNumberElement | null
+  ) => void;
+  stripeCardError?: StripeError | null;
 }
 
 interface AddressTypes {
@@ -81,13 +109,20 @@ const CheckoutForm = ({
   paymentButtonText,
   forPaymentPlan = false,
   hasSeatMapActions = false,
+  enableAddressElement = false,
+  displayPaymentButton = true,
+  onPaymentFieldsUpdate = _identity,
+  stripeCardError = null,
 }: ICheckoutForm) => {
   const stripe = useStripe()
   const elements = useElements()
   const [postalCode, setPostalCode] = useState<any>('')
-  const [stripeError, setStripeError] = useState<any>(null)
+  const [stripeError, setStripeError] = useState<StripeError | null>(
+    stripeCardError || null
+  )
   const [checkboxes, setCheckboxes] = useState<any>([])
   const [allowSubmit, setAllowSubmit] = useState(false)
+  const [cardElementComplete, setCardElementComplete] = useState(false)
   const eventId = getQueryVariable('event_id') || ''
 
   const handleSubmit = async (event: React.SyntheticEvent) => {
@@ -96,7 +131,7 @@ const CheckoutForm = ({
       event.preventDefault()
 
       if (!postalCode && !disableZipSection) {
-        setStripeError({ message: 'Please enter your zip code.' })
+        setStripeError({ message: 'Please enter your zip code.' } as StripeError)
         handleSetLoading(false)
         return
       }
@@ -176,9 +211,43 @@ const CheckoutForm = ({
     setPostalCode(e.target.value)
   }
 
+  // Pass payment fields data to parent component for validation and payment method creation
+  const notifyPaymentFieldsUpdate = useCallback(() => {
+    if (!onPaymentFieldsUpdate || !elements) return
+
+    const paymentFieldsData = {
+      billing_info,
+      postalCode,
+      disableZipSection,
+      cardComplete: cardElementComplete,
+    }
+
+    const card = elements.getElement(CardNumberElement)
+    // Pass the fields data to parent component
+    // Parent will handle validation and payment method creation when Stripe is ready
+    onPaymentFieldsUpdate(null, paymentFieldsData, stripe, card)
+  }, [
+    onPaymentFieldsUpdate,
+    billing_info,
+    postalCode,
+    disableZipSection,
+    cardElementComplete,
+    stripe,
+    elements,
+  ])
+
+  const handleCardChange = (event: any) => {
+    setCardElementComplete(event.complete)
+
+    // Notify parent about field changes when card is complete and payment button is hidden
+    if (event.complete && !displayPaymentButton) {
+      notifyPaymentFieldsUpdate()
+    }
+  }
+
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      const userData = JSON.parse(window.localStorage.getItem('user_data') || '')
+      const userData = JSON.parse(window.localStorage.getItem('user_data') || '{}')
       const zipCode = _get(userData, 'zip', '')
       zipCode && setPostalCode(zipCode)
     }
@@ -199,6 +268,19 @@ const CheckoutForm = ({
     }
   }, [checkboxes])
 
+  // Notify parent when payment fields change (for cases when payment button is hidden)
+  useEffect(() => {
+    if (!displayPaymentButton && postalCode && cardElementComplete) {
+      notifyPaymentFieldsUpdate()
+    }
+  }, [postalCode, displayPaymentButton, cardElementComplete, notifyPaymentFieldsUpdate])
+
+  useEffect(() => {
+    if (stripeCardError) {
+      setStripeError(stripeCardError)
+    }
+  }, [stripeCardError])
+
   const buttonIsDiabled = !stripe || !!error || isLoading || !allowSubmit
   return (
     <div className="stripe_payment_container">
@@ -209,17 +291,29 @@ const CheckoutForm = ({
             setStripeError(null)
             onSubmit(stripeError)
           }}
-          message={stripeError?.message}
+          message={stripeError?.message || ''}
         />
       )}
       <form onSubmit={handleSubmit}>
         <div className="card_form_inner">
+          {enableAddressElement && (
+            <div className="card_number_element">
+              <span className="card_label_text">Card holder name</span>
+              <AddressElement
+                options={{ ...options, ...stripeCardOptions, mode: 'billing' }}
+                onReady={_identity}
+                onChange={handleCardChange}
+                onBlur={_identity}
+                onFocus={_identity}
+              />
+            </div>
+          )}
           <div className="card_number_element">
             <span className="card_label_text">Card number</span>
             <CardNumberElement
               options={{ ...options, ...stripeCardOptions }}
               onReady={_identity}
-              onChange={_identity}
+              onChange={handleCardChange}
               onBlur={_identity}
               onFocus={_identity}
             />
@@ -227,11 +321,17 @@ const CheckoutForm = ({
           <div className="elements">
             <div className="expiration_element">
               <span className="card_label_text">Expiration date</span>
-              <CardExpiryElement options={{ ...options, ...stripeCardOptions }} />
+              <CardExpiryElement
+                options={{ ...options, ...stripeCardOptions }}
+                onChange={handleCardChange}
+              />
             </div>
             <div className="cvc_element">
               <span className="card_label_text">CVC</span>
-              <CardCvcElement options={{ ...options, ...stripeCardOptions }} />
+              <CardCvcElement
+                options={{ ...options, ...stripeCardOptions }}
+                onChange={handleCardChange}
+              />
             </div>
           </div>
           {!disableZipSection && (
@@ -259,20 +359,25 @@ const CheckoutForm = ({
             </div>
           </div>
         ))}
-        <div
-          className={`payment_button ${buttonIsDiabled ? 'disabled-payment-button' : ''}`}
-        >
-          <button disabled={buttonIsDiabled} type="submit">
-            {isLoading ? (
-              <CircularProgress size={26} />
-            ) : forPaymentPlan ? (
-              'Confirm Payment Plan'
-            ) : (
-              `${paymentButtonText ? paymentButtonText : 'Pay'
-              } ${getCurrencySymbolByCurrency(currency)}${total}`
-            )}
-          </button>
-        </div>
+        {displayPaymentButton && (
+          <div
+            className={`payment_button ${
+              buttonIsDiabled ? 'disabled-payment-button' : ''
+            }`}
+          >
+            <button disabled={buttonIsDiabled} type="submit">
+              {isLoading ? (
+                <CircularProgress size={26} />
+              ) : forPaymentPlan ? (
+                'Confirm Payment Plan'
+              ) : (
+                `${
+                  paymentButtonText ? paymentButtonText : 'Pay'
+                } ${getCurrencySymbolByCurrency(currency)}${total}`
+              )}
+            </button>
+          </div>
+        )}
       </form>
     </div>
   )

package/src/components/ticketsContainer/InfoIcon.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+
+const InfoIcon = ({ size = 17 }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 17 17"
+    fill="none"
+  >
+    <circle
+      cx="8.5"
+      cy="8.5"
+      r="8"
+      stroke="black"
+      strokeWidth="1"
+    />
+    <rect
+      x="7.5"
+      y="4"
+      width="2"
+      height="2"
+      fill="black"
+    />
+    <rect
+      x="7.5"
+      y="7"
+      width="2"
+      height="5"
+      fill="black"
+    />
+  </svg>
+)
+
+export default InfoIcon

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -33,38 +33,39 @@ export const PromoCodeSection = ({
   showAlertIcons
 }: IPromoCodeSectionProps) => {
   const isPromoCodeHasValue = !!code.trim()
+  const appliedPromoCode = window?.localStorage?.getItem('appliedPromoCode')
 
   const renderInputField = () => (
+    <div className="promo-code-block">
       <div className="promo-code-block">
-        <div className="promo-code-block">
-          <p className="promo-code-text">Promo code</p>
-        </div>
-        <input
-          className="promo-code-input"
-          placeholder=""
-          onChange={e => {
-            setCode(e.target.value)
-          }}
-          onKeyPress={event => {
-            if (event.key === 'Enter' && isPromoCodeHasValue) {
-              setShowPromoInput(false)
-              updateTickets(true, 'promo')
-            }
-          }}
-        />
-        <Button
-          className="promo-submit-button"
-          onClick={() => {
-            if (isPromoCodeHasValue) {
-              setShowPromoInput(false)
-              updateTickets(true, 'promo')
-            }
-          }}
-        >
-          APPLY
-        </Button>
+        <p className="promo-code-text">Promo code</p>
       </div>
-    )
+      <input
+        className="promo-code-input"
+        placeholder=""
+        onChange={e => {
+          setCode(e.target.value)
+        }}
+        onKeyPress={event => {
+          if (event.key === 'Enter' && isPromoCodeHasValue) {
+            setShowPromoInput(false)
+            updateTickets(true, 'promo')
+          }
+        }}
+      />
+      <Button
+        className="promo-submit-button"
+        onClick={() => {
+          if (isPromoCodeHasValue) {
+            setShowPromoInput(false)
+            updateTickets(true, 'promo')
+          }
+        }}
+      >
+        APPLY
+      </Button>
+    </div>
+  )
 
   return (
     <div>
@@ -81,6 +82,11 @@ export const PromoCodeSection = ({
           <p className="promo-code-success">PROMO CODE APPLIED SUCCESSFULLY</p>
         </div>
       ) : null}
+      {codeIsApplied ? (
+        <div className="alert-info">
+          <p className="promo-code-success">PROMO CODE: {appliedPromoCode}</p>
+        </div>
+      ) : null}
       {codeIsInvalid ? (
         <div className="alert-info fail">
           {showAlertIcons && (

package/src/components/ticketsContainer/TicketRow.tsx

@@ -83,7 +83,7 @@ export const TicketRow = ({
   // ticketTier.soldOut === false --> means that ticket is in the stock
   const isSoldOut =
     ticketTier.sold_out ||
-    !ticketTier.displayTicket ||
+    !(ticketTier.displayTicket || ticketTier.slotGroupId) ||
     ticketTier.soldOut ||
     ticketTier.soldOut === false