tf-checkout-react 1.4.18 → 1.4.20

package/src/components/seatMapContainer/TicketsSection.tsx

@@ -140,10 +140,7 @@ export const TicketsSection = (
                   <Button
                     className="ticket-delete"
                     onClick={() => {
-                      handleCancelReservation(
-                        dropdownData.seatId,
-                        dropdownData.tierId
-                      )
+                      handleCancelReservation(dropdownData.seatId, dropdownData.tierId)
                     }}
                   >
                     {ticketDeleteButtonContent}
@@ -166,7 +163,9 @@ export const TicketsSection = (
                             {`${currencySymbol} ${finalPrice}`}
                           </span>
                           <span className="fees">
-                            {selectedTicketData.fee_included ? ' (incl. Fees)' : ' (excl. Fees)'}
+                            {selectedTicketData.fee_included
+                              ? ' (incl. Fees)'
+                              : ' (excl. Fees)'}
                           </span>
                         </div>
                         {!_isEmpty(selectedTicketData.ticket_type_deposit) && (
@@ -190,7 +189,7 @@ export const TicketsSection = (
                         {showDescription && (
                           <Tooltip
                             title="View Ticket Info"
-                            placement='left'
+                            placement="left"
                             arrow
                             componentsProps={{
                               tooltip: {
@@ -201,7 +200,7 @@ export const TicketsSection = (
                                     color: 'common.black',
                                   },
                                 },
-                              }
+                              },
                             }}
                           >
                             <div
@@ -251,12 +250,14 @@ export const TicketsSection = (
                         )}
                       </div>
                     </div>
-                    {selectedTicketsInfo[dropdownData.seatId] &&
+                    {selectedTicketsInfo[dropdownData.seatId] && (
                       <div
                         className="ticket-description-content"
-                        dangerouslySetInnerHTML={createMarkup(selectedTicketData.description || "")}
+                        dangerouslySetInnerHTML={createMarkup(
+                          selectedTicketData.description || ''
+                        )}
                       />
-                    }
+                    )}
                   </>
                 )}
               </div>

package/src/components/seatMapContainer/index.tsx

@@ -1,15 +1,16 @@
 import { Alert } from '@mui/material'
 import axios from 'axios'
-import { identity } from 'lodash'
 import _find from 'lodash/find'
 import _forEach from 'lodash/forEach'
 import _get from 'lodash/get'
+import _identity from 'lodash/identity'
 import _isEmpty from 'lodash/isEmpty'
+import _isEqual from 'lodash/isEqual'
 import _keys from 'lodash/keys'
 import _map from 'lodash/map'
 import _values from 'lodash/values'
 import moment from 'moment'
-import React, { useCallback, useEffect, useRef,useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import Countdown from 'react-countdown'
 
 import {
@@ -44,8 +45,8 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
     },
     mapContainerId,
     timerMessage = '',
-    onAddToCartSuccess = identity,
-    onCountdownFinish = identity,
+    onAddToCartSuccess = _identity,
+    onCountdownFinish = _identity,
     ticketDeleteButtonContent,
     ticketInfoContent,
   } = props
@@ -65,20 +66,16 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
     [seatId: string]: string;
   }>({})
   const [seatMapStatuses, setSeatMapStatuses] = useState('')
-  const [reservedSeats, setReservedSeats] = useState<
-    Array<SeatReservationData>
-  >([])
+  const [reservedSeats, setReservedSeats] = useState<Array<SeatReservationData>>([])
   const [isLoadingSeatMapData, setIsLoadingSeatMapData] = useState(true)
-  const [isLoadingStatuses, setIsLoadingStatuses] = useState(true)
+  const [isLoadingStatuses, setIsLoadingStatuses] = useState(false)
   const [isReserving, setIsReserving] = useState(false)
   const [isAddingToCart, setIsAddingToCart] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [showTimer, setShowTimer] = useState(
     Date.now() <= Number(localStorage.getItem(`reservationStart-${eventId}`))
   )
-  const [guestCounts, setGuestCounts] = useState<IGuestCounts>(
-    {} as IGuestCounts
-  )
+  const [guestCounts, setGuestCounts] = useState<IGuestCounts>({} as IGuestCounts)
   const isGuestCountsSet = useRef(false)
 
   const updateGuestCounts = (data: any) => {
@@ -87,9 +84,7 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
       const seatTicketsArray = _values(tierTickets)
 
       setGuestCounts((prevState: any) => ({
-        [item.seatId]: Number(
-          seatTicketsArray[0].ticket_type_min_number_of_guests
-        ),
+        [item.seatId]: Number(seatTicketsArray[0].ticket_type_min_number_of_guests),
         ...prevState,
       }))
     })
@@ -132,14 +127,12 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
       const statusesResponse = await getSeatMapStatuses(eventId)
       const statuses = _get(statusesResponse, 'data.attributes') || {}
       const reservationData: Array<SeatReservationData> = []
-      const ownReservations: string[] = getOwnReservationsBasedOnStatuses(
-        statuses
-      )
+      const ownReservations: string[] = getOwnReservationsBasedOnStatuses(statuses)
 
       _forEach(ownReservations, reservation => {
         const tierIdOfReservation = getTierIdBasedOnSeatId(
           reservation,
-          eventSeatsRef.current,
+          eventSeatsRef.current
         ) as string
         reservationData.push({
           seatId: reservation,
@@ -149,10 +142,19 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
       })
 
       localStorage.setItem('reservationData', JSON.stringify(reservationData))
-      setSeatMapStatuses(statusesResponse.data.attributes)
-      setReservedSeats(reservationData)
+
+      if (!_isEqual(seatMapStatuses, statusesResponse.data.attributes)) {
+        setSeatMapStatuses(statusesResponse.data.attributes)
+      }
+      if (!_isEqual(reservationData, reservedSeats)) {
+        setReservedSeats(reservationData)
+      }
+
       // automatically set ticket/table type if it's the only one
-      if (ticketTypeTierRelationsRef.current) {
+      if (
+        ticketTypeTierRelationsRef.current &&
+        !_isEqual(reservationData, reservedSeats)
+      ) {
         if (!isGuestCountsSet.current) {
           updateGuestCounts(reservationData)
           isGuestCountsSet.current = true
@@ -164,9 +166,7 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
           setSelectedTickets((prevState: any) => ({
             ...prevState,
             [item.seatId]:
-              seatTicketsArray.length === 1
-                ? seatTicketsArray[0].ticket_type_id
-                : '',
+              seatTicketsArray.length === 1 ? seatTicketsArray[0].ticket_type_id : '',
           }))
         })
 
@@ -177,26 +177,24 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
       }
     } catch (error) {
       setError('Something went wrong')
-    } finally {
-      setIsLoadingStatuses(false)
     }
-  }, [eventId])
+  }, [eventId, seatMapStatuses, reservedSeats])
 
-  const startTimer = useCallback((duration: number) => {
-    setShowTimer(true)
+  const startTimer = useCallback(
+    (duration: number) => {
+      setShowTimer(true)
 
-    if (!localStorage.getItem(`reservationStart-${eventId}`)) {
-      localStorage.setItem(
-        `reservationStart-${eventId}`,
-        String(Date.now() + duration)
-      )
-    }
-  }, [])
+      if (!localStorage.getItem(`reservationStart-${eventId}`)) {
+        localStorage.setItem(`reservationStart-${eventId}`, String(Date.now() + duration))
+      }
+    },
+    [eventId]
+  )
 
   const endTimer = useCallback(() => {
     localStorage.removeItem(`reservationStart-${eventId}`)
     setShowTimer(false)
-  }, [])
+  }, [eventId])
 
   const handleSeatReservation = async (
     eventId: string,
@@ -209,9 +207,7 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
       await fetchSeatMapReservations()
 
       startTimer(seatMapData.seatReservationTime * 60000)
-      const reservationData = JSON.parse(
-        localStorage.getItem('reservationData') || ''
-      )
+      const reservationData = JSON.parse(localStorage.getItem('reservationData') || '')
       setReservedSeats(reservationData)
       updateGuestCounts(reservationData)
 
@@ -220,9 +216,11 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
       const [firstItem] = _keys(ticketTypeTierRelationsRef.current[tierId])
       handleTicketSelect(relations.length === 1 ? firstItem : '', seatId)
     } catch (error) {
-      setError((error as any)?.response?.data?.message === 'Selected seat is not available'
-        ? 'No more of this ticket type are available right now - they’re either sold out or in people’s shopping carts. Try refreshing the page!'
-        : 'Something went wrong'
+      setError(
+        (error as any)?.response?.data?.message === 'Selected seat is not available'
+          ? // eslint-disable-next-line max-len
+            'No more of this ticket type are available right now - they’re either sold out or in people’s shopping carts. Try refreshing the page!'
+          : 'Something went wrong'
       )
     } finally {
       setIsReserving(false)
@@ -238,14 +236,10 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
     try {
       await removeSeatReserve(eventId, tierId, [seatId])
       await fetchSeatMapReservations()
-      if (
-        _isEmpty(JSON.parse(localStorage.getItem('reservationData') as string))
-      ) {
+      if (_isEmpty(JSON.parse(localStorage.getItem('reservationData') as string))) {
         endTimer()
       }
-      const reservationData = JSON.parse(
-        localStorage.getItem('reservationData') || ''
-      )
+      const reservationData = JSON.parse(localStorage.getItem('reservationData') || '')
       const currentSelectedTickets = { ...selectedTickets }
       delete currentSelectedTickets[seatId]
       setReservedSeats(reservationData)
@@ -262,10 +256,9 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
       seat: { tierId, seatId, status },
     } = seatInfo
 
-    const reservationData = JSON.parse(
-      localStorage.getItem('reservationData') || '[]'
-    )
-    if (status === 'B' || status === 'R' || status === 'BLOCKED' || status === 'RE') return
+    const reservationData = JSON.parse(localStorage.getItem('reservationData') || '[]')
+    if (status === 'B' || status === 'R' || status === 'BLOCKED' || status === 'RE')
+      return
     if (_find(reservationData, data => data.seatId === seatId)) {
       handleCancelSeatReservtion(eventId, tierId, seatId)
     } else if (reservationData.length >= 10) {
@@ -320,19 +313,20 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
   }
 
   useEffect(() => {
-    if (
-      Date.now() > Number(localStorage.getItem(`reservationStart-${eventId}`))
-    ) {
+    if (Date.now() > Number(localStorage.getItem(`reservationStart-${eventId}`))) {
       setSelectedTickets({})
       setReservedSeats([])
     }
 
     const makeRequests = async () => {
       try {
+        setIsLoadingStatuses(true)
         await fetchSeatMapData()
         await fetchSeatMapReservations()
       } catch (error) {
         setError('Something went wrong')
+      } finally {
+        setIsLoadingStatuses(false)
       }
     }
 
@@ -341,7 +335,9 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
     if (country) {
       localStorage.setItem('eventCountry', country)
     }
+  }, [country, eventId, fetchSeatMapData])
 
+  useEffect(() => {
     const intervalId = setInterval(() => {
       fetchSeatMapReservations()
     }, 3000)
@@ -349,7 +345,7 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
     return () => {
       clearInterval(intervalId)
     }
-  }, [fetchSeatMapData, fetchSeatMapReservations])
+  }, [fetchSeatMapReservations])
 
   return (
     <>
@@ -406,21 +402,20 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
         guestCounts={guestCounts}
         setGuestCounts={setGuestCounts}
       />
-      {seatMapData.seatMap && seatMapStatuses && (
-        <SeatMapComponent
-          seatMapProps={{
-            seatData: seatMapData.seatMap,
-            statuses: seatMapStatuses,
-            tierPrices: seatMapData.tierPrices,
-            seatMapType: seatMapData.seatMapType,
-            ticketTypeTierRelations: ticketTypeTierRelationsRef.current,
-            seatMapEvents: { onSeatClick },
-            isReserving,
-            predefinedSeats: seatMapData.predefinedSeats,
-          }}
-          mapContainerId={mapContainerId}
-        />
-      )}
+      <SeatMapComponent
+        seatMapProps={{
+          seatData: seatMapData.seatMap,
+          statuses: seatMapStatuses,
+          tierPrices: seatMapData.tierPrices,
+          seatMapType: seatMapData.seatMapType,
+          ticketTypeTierRelations: ticketTypeTierRelationsRef.current,
+          seatMapEvents: { onSeatClick },
+          isReserving,
+          predefinedSeats: seatMapData.predefinedSeats,
+          isLoadingSeatMapData,
+        }}
+        mapContainerId={mapContainerId}
+      />
     </>
   )
 }

package/src/components/stripePayment/index.tsx

@@ -39,7 +39,7 @@ const options: StripeCardNumberElementOptions = {
 export interface ICheckoutForm {
   total: string;
   currency: string;
-  onSubmit: (error: any) => Promise<any>;
+  onSubmit: (error: any, data?: object) => Promise<any>;
   error?: string | null;
   stripeCardOptions?: StripeCardNumberElementOptions;
   stripe_client_secret: string;
@@ -49,6 +49,7 @@ export interface ICheckoutForm {
   conditions: any;
   disableZipSection: boolean;
   paymentButtonText?: string;
+  forPaymentPlan?: boolean;
 }
 
 interface AddressTypes {
@@ -67,10 +68,11 @@ const CheckoutForm = ({
   currency,
   billing_info,
   isLoading = false,
-  handleSetLoading = () => {},
+  handleSetLoading = _identity,
   conditions = [],
   disableZipSection,
   paymentButtonText,
+  forPaymentPlan = false,
 }: ICheckoutForm) => {
   const stripe = useStripe()
   const elements = useElements()
@@ -109,6 +111,14 @@ const CheckoutForm = ({
         address.postal_code = postalCode
       }
 
+      if (forPaymentPlan) {
+        const setupResponse = await stripe.confirmCardSetup(stripe_client_secret, {
+          payment_method: { card: card || { token: '' } },
+        })
+        onSubmit(null, { paymentMethodId: setupResponse.setupIntent?.payment_method })
+        return
+      }
+
       const paymentMethodReq = await stripe.createPaymentMethod({
         type: 'card',
         card: card || { token: '' },
@@ -158,9 +168,7 @@ const CheckoutForm = ({
 
   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)
     }
@@ -185,9 +193,7 @@ const CheckoutForm = ({
 
   return (
     <div className="stripe_payment_container">
-      {!!stripeError && (
-        <div className="checkout_error_block">{stripeError}</div>
-      )}
+      {!!stripeError && <div className="checkout_error_block">{stripeError}</div>}
       <form onSubmit={handleSubmit}>
         <div className="card_form_inner">
           <div className="card_number_element">
@@ -203,9 +209,7 @@ 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 }} />
             </div>
             <div className="cvc_element">
               <span className="card_label_text">CVC</span>
@@ -225,10 +229,7 @@ const CheckoutForm = ({
           )}
         </div>
         {checkboxes?.map((checkbox: any) => (
-          <div
-            className={'billing-info-container__singleField'}
-            key={checkbox.id}
-          >
+          <div className={'billing-info-container__singleField'} key={checkbox.id}>
             <div className="conditions-block">
               <CheckboxField
                 name={checkbox.id}
@@ -241,13 +242,13 @@ const CheckoutForm = ({
           </div>
         ))}
         <div
-          className={`payment_button ${
-            buttonIsDiabled ? 'disabled-payment-button' : ''
-          }`}
+          className={`payment_button ${buttonIsDiabled ? 'disabled-payment-button' : ''}`}
         >
           <button disabled={buttonIsDiabled} type="submit">
             {isLoading ? (
               <CircularProgress size={26} />
+            ) : forPaymentPlan ? (
+              'Confirm Payment Plan'
             ) : (
               `${
                 paymentButtonText ? paymentButtonText : 'Pay'

package/src/types/payment-plan-configuration.ts

@@ -0,0 +1,19 @@
+export interface IPaymentPlanConfig {
+  requires_deposit: boolean;
+  deposit: number;
+  interval: number;
+  non_refundable_type: string | null;
+  non_refundable_amount: number;
+  has_admin_fee: boolean;
+  admin_fee: number;
+  total_installments: number;
+  price_per_installment: number;
+  total: number;
+  stripe_setup_intent_secret: string;
+  saved_card: IPaymentPlanConfigCard;
+}
+
+export interface IPaymentPlanConfigCard {
+  last_4_digits: string | null;
+  stripe_payment_method_id: string | null;
+}

package/src/types/seatMap.d.ts

@@ -26,6 +26,7 @@ interface ISeatMapContainerProps {
     tierPrices: any;
     isReserving: boolean;
     predefinedSeats: any;
+    isLoadingSeatMapData: boolean;
   };
   loading?: boolean;
   mapContainerId?: string;