tf-checkout-react 1.4.21 → 1.4.22

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.21",
+  "version": "1.4.22",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/seatMapContainer/index.tsx

@@ -11,7 +11,7 @@ import _map from 'lodash/map'
 import _values from 'lodash/values'
 import moment from 'moment'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import Countdown from 'react-countdown'
+import Countdown, { CountdownRenderProps } from 'react-countdown'
 
 import {
   getSeatMapData,
@@ -19,6 +19,7 @@ import {
   removeSeatReserve,
   reserveSeat,
 } from '../../api'
+import { useOnline } from '../../hooks/useOnline'
 import { showZero } from '../../utils/showZero'
 import { ReferralLogic } from '../ticketsContainer/ReferralLogic'
 import { addToCartFunc } from './addToCart'
@@ -31,6 +32,8 @@ import {
   getTierIdBasedOnSeatId,
 } from './utils'
 
+const OFFLINE_MESSAGE = 'Offline.'
+
 interface IGuestCounts {
   [key: string]: number;
 }
@@ -76,8 +79,11 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
     Date.now() <= Number(localStorage.getItem(`reservationStart-${eventId}`))
   )
   const [guestCounts, setGuestCounts] = useState<IGuestCounts>({} as IGuestCounts)
+  const [isOnline, setIsOnline] = useState(true)
   const isGuestCountsSet = useRef(false)
 
+  useOnline(setIsOnline)
+
   const updateGuestCounts = (data: any) => {
     _forEach(data, (item: any) => {
       const tierTickets = ticketTypeTierRelationsRef.current[item.tierId]
@@ -123,62 +129,64 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
   }, [eventId])
 
   const fetchSeatMapReservations = useCallback(async () => {
-    try {
-      const statusesResponse = await getSeatMapStatuses(eventId)
-      const statuses = _get(statusesResponse, 'data.attributes') || {}
-      const reservationData: Array<SeatReservationData> = []
-      const ownReservations: string[] = getOwnReservationsBasedOnStatuses(statuses)
-
-      _forEach(ownReservations, reservation => {
-        const tierIdOfReservation = getTierIdBasedOnSeatId(
-          reservation,
-          eventSeatsRef.current
-        ) as string
-        reservationData.push({
-          seatId: reservation,
-          tierId: tierIdOfReservation,
-          type: 'reserve',
+    if (isOnline) {
+      try {
+        const statusesResponse = await getSeatMapStatuses(eventId)
+        const statuses = _get(statusesResponse, 'data.attributes') || {}
+        const reservationData: Array<SeatReservationData> = []
+        const ownReservations: string[] = getOwnReservationsBasedOnStatuses(statuses)
+
+        _forEach(ownReservations, reservation => {
+          const tierIdOfReservation = getTierIdBasedOnSeatId(
+            reservation,
+            eventSeatsRef.current
+          ) as string
+          reservationData.push({
+            seatId: reservation,
+            tierId: tierIdOfReservation,
+            type: 'reserve',
+          })
         })
-      })
 
-      localStorage.setItem('reservationData', JSON.stringify(reservationData))
+        localStorage.setItem('reservationData', JSON.stringify(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 &&
-        !_isEqual(reservationData, reservedSeats)
-      ) {
-        if (!isGuestCountsSet.current) {
-          updateGuestCounts(reservationData)
-          isGuestCountsSet.current = true
+        if (!_isEqual(seatMapStatuses, statusesResponse.data.attributes)) {
+          setSeatMapStatuses(statusesResponse.data.attributes)
+        }
+        if (!_isEqual(reservationData, reservedSeats)) {
+          setReservedSeats(reservationData)
         }
-        _forEach(reservationData, (item: any) => {
-          const tierTickets = ticketTypeTierRelationsRef.current[item.tierId]
-          const seatTicketsArray = _values(tierTickets)
-
-          setSelectedTickets((prevState: any) => ({
-            ...prevState,
-            [item.seatId]:
-              seatTicketsArray.length === 1 ? seatTicketsArray[0].ticket_type_id : '',
-          }))
-        })
 
-        if (_isEmpty(reservationData)) {
-          setGuestCounts({})
-          setSelectedTickets({})
+        // automatically set ticket/table type if it's the only one
+        if (
+          ticketTypeTierRelationsRef.current &&
+          !_isEqual(reservationData, reservedSeats)
+        ) {
+          if (!isGuestCountsSet.current) {
+            updateGuestCounts(reservationData)
+            isGuestCountsSet.current = true
+          }
+          _forEach(reservationData, (item: any) => {
+            const tierTickets = ticketTypeTierRelationsRef.current[item.tierId]
+            const seatTicketsArray = _values(tierTickets)
+
+            setSelectedTickets((prevState: any) => ({
+              ...prevState,
+              [item.seatId]:
+                seatTicketsArray.length === 1 ? seatTicketsArray[0].ticket_type_id : '',
+            }))
+          })
+
+          if (_isEmpty(reservationData)) {
+            setGuestCounts({})
+            setSelectedTickets({})
+          }
         }
+      } catch (error) {
+        setError('Something went wrong')
       }
-    } catch (error) {
-      setError('Something went wrong')
     }
-  }, [eventId, seatMapStatuses, reservedSeats])
+  }, [eventId, seatMapStatuses, reservedSeats, isOnline])
 
   const startTimer = useCallback(
     (duration: number) => {
@@ -217,7 +225,7 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
       handleTicketSelect(relations.length === 1 ? firstItem : '', seatId)
     } catch (error) {
       setError(
-        (error as any)?.response?.data?.message === 'Selected seat is not available'
+        error?.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'
@@ -251,7 +259,13 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
     }
   }
 
-  const onSeatClick = async (seatInfo: any) => {
+  const onSeatClick = async (seatInfo: {
+    seat: {
+      tierId: string;
+      seatId: string;
+      status: string;
+    };
+  }) => {
     const {
       seat: { tierId, seatId, status },
     } = seatInfo
@@ -347,6 +361,14 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
     }
   }, [fetchSeatMapReservations])
 
+  useEffect(() => {
+    if (!isOnline) {
+      setError(OFFLINE_MESSAGE)
+    } else if (isOnline && error === OFFLINE_MESSAGE) {
+      setError(null)
+    }
+  }, [error, isOnline])
+
   return (
     <>
       {error && (
@@ -366,7 +388,7 @@ export const SeatMapContainer = (props: IMapContainerProps) => {
           date={moment(
             Number(localStorage.getItem(`reservationStart-${eventId}`))
           ).valueOf()}
-          renderer={(props: any) => (
+          renderer={(props: CountdownRenderProps) => (
             <div className="reservation-countdown">
               <span className="reservation-message">{timerMessage}</span>
               <span className="reservation-timer">

package/src/hooks/useOnline.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+
+export const useOnline = (handler: (value: boolean) => void) => {
+  useEffect(() => {
+    const handleOffline = () => {
+      handler(false)
+    }
+    const handleOnline = () => {
+      handler(true)
+    }
+
+    window.addEventListener('offline', handleOffline)
+    window.addEventListener('online', handleOnline)
+
+    return () => {
+      window.removeEventListener('offline', handleOffline)
+      window.removeEventListener('online', handleOnline)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}