tf-checkout-react 1.4.26 → 1.5.0

package/src/components/ticketsContainer/index.tsx

@@ -14,6 +14,7 @@ import _identity from 'lodash/identity'
 import _includes from 'lodash/includes'
 import _isEmpty from 'lodash/isEmpty'
 import _some from 'lodash/some'
+import moment from 'moment-timezone'
 import React, { ReactNode, useEffect, useRef, useState } from 'react'
 import Button from 'react-bootstrap/Button'
 
@@ -26,8 +27,10 @@ import {
   logout,
   postOnCheckout,
 } from '../../api'
+import { getPreRegistrationInfluancers } from '../../api/preRegistrationComplete'
 import { X_TF_ECOMMERCE } from '../../constants'
 import { useCookieListener } from '../../hooks/useCookieListener'
+import { useLocalStorageListener } from '../../hooks/useLocalStorageListener'
 import { usePixel } from '../../hooks/usePixel'
 import {
   createCheckoutDataBodyWithDefaultHolder,
@@ -168,6 +171,7 @@ export const TicketsContainer = ({
   showAlertIcons = true,
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState({} as ISelectedTickets)
+  const isWindowDefined = typeof window !== 'undefined'
   const [isLogged, setIsLogged] = useState(Boolean(getCookieByName(X_TF_ECOMMERCE)))
   const [showLoginModal, setShowLoginModal] = useState(false)
   const [tickets, setTickets] = useState([] as ITicketData[])
@@ -186,15 +190,20 @@ export const TicketsContainer = ({
   const [isNotInvitedError, setIsNotInvitedError] = useState('')
   const [isInvalidLinkError, setIsInvalidLinkError] = useState('')
   const [pendingVerificationMessage, setPendingVerificationMessage] = useState()
-
+  const [preregistereds, setPreregistereds] = useState([] as Array<IInfluancerData>)
+  const [ticketsNotAvailableModalOpen, setTicketsNotAvailableModalOpen] = useState(false)
+  const [isPreregistred, setIsPreregisred] = useState(checkUserPreregistration())
   const ticketsContainerRef = useRef<HTMLDivElement>(null)
   const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
-
   useCookieListener(X_TF_ECOMMERCE, value => setIsLogged(Boolean(value)))
+  useLocalStorageListener('user_data', (user: any) => {
+    const isPreregistredUser = _some(preregistereds, item => item.email === user?.email)
+    setIsPreregisred(isPreregistredUser)
+  })
   usePixel(eventId, { pageUrl })
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (isWindowDefined) {
       const access_token = window.localStorage.getItem('access_token')
       if (access_token) {
         const decoded = jwt_decode<{ exp: number }>(access_token)
@@ -208,9 +217,16 @@ export const TicketsContainer = ({
   }, [])
 
   useEffect(() => {
-    !!eventId && getTicketsApi()
+    if (eventId) {
+      getTicketsApi()
+      fetchPreregisteredsData()
+    }
   }, [eventId])
 
+  useEffect(() => {
+    setIsPreregisred(checkUserPreregistration())
+  }, [preregistereds])
+
   useEffect(() => {
     if (isLogged) {
       fetchUserData()
@@ -295,6 +311,19 @@ export const TicketsContainer = ({
     }
   }
 
+  async function fetchPreregisteredsData() {
+    try {
+      const preregistrationData = await getPreRegistrationInfluancers({
+        eventId,
+      })
+      setPreregistereds(preregistrationData.data.attributes.influencers)
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        setError(_get(error, 'response.data.message'))
+      }
+    }
+  }
+
   const handleTicketSelect = (key: string, value: number | string, isTable = false) => {
     setSelectedTickets(prevState => {
       if (Object.keys(prevState)[0] !== key && !value) {
@@ -307,6 +336,16 @@ export const TicketsContainer = ({
     })
   }
 
+  function checkUserPreregistration() {
+    const userDataString = isWindowDefined ? window.localStorage.getItem('user_data') : ''
+    let isPreregistredUser = false
+    if (userDataString) {
+      const user = JSON.parse(userDataString)
+      isPreregistredUser = _some(preregistereds, item => item.email === user?.email)
+    }
+    return isPreregistredUser
+  }
+
   const handleOrdersClick = () => {
     if (isBrowser) {
       window.location.href = ordersPath ?? '/orders'
@@ -460,7 +499,8 @@ export const TicketsContainer = ({
 
   const isTicketOnSale = _some(
     tickets,
-    item => item.salesStarted && !item.salesEnded && !item.soldOut
+    item =>
+      (item.salesStarted || event?.presalesStarted) && !item.salesEnded && !item.soldOut
   )
 
   const eventHasTickets = !_isEmpty(tickets)
@@ -496,6 +536,12 @@ export const TicketsContainer = ({
     }
   }
 
+  const handleNotAvailableTicketsClick = () => {
+    if (!_isEmpty(selectedTickets)) {
+      setTicketsNotAvailableModalOpen(true)
+    }
+  }
+
   const bookButtonIsDisabled =
     (handleBookIsLoading ||
       _isEmpty(selectedTickets) ||
@@ -504,7 +550,10 @@ export const TicketsContainer = ({
 
   const isTicketAvailable = _some(
     tickets,
-    ticket => ticket.displayTicket && !ticket.soldOut && ticket.salesStarted
+    ticket =>
+      ticket.displayTicket &&
+      !ticket.soldOut &&
+      (ticket.salesStarted || (event?.presalesStarted && !event?.presalesEnded))
   )
 
   const wrappedActionsSectionComponent = React.isValidElement(ActionsSectionComponent)
@@ -547,6 +596,12 @@ export const TicketsContainer = ({
   const isSeatMapAllowed = _get(event, 'seatMapAllowed', false)
   const isTableMapEnabled = _get(event, 'tableMapEnabled', false)
 
+  const notAvailableTicketsMessage = `Tickets for this event are not available until ${moment(
+    event?.salesStart
+  ).format(
+    'dddd, DD MMMM YYYY'
+  )}. \n If you pre-registered, log into your account first to buy your pre-sale ticket.`
+
   const tableTickets = _filter(tickets, (ticket: any) => ticket.isTable)
   const ordinarTickets = {} as ITicket
   _forEach(tickets, (ticket: any, key: string) => {
@@ -554,7 +609,6 @@ export const TicketsContainer = ({
       ordinarTickets[key] = ticket
     }
   })
-
   return (
     <ThemeProvider theme={themeMui}>
       {!isLoading && <ReferralLogic eventId={eventId} />}
@@ -586,6 +640,14 @@ export const TicketsContainer = ({
             {error}
           </Alert>
         )}
+        {ticketsNotAvailableModalOpen && (
+          <ConfirmModal
+            message={notAvailableTicketsMessage}
+            hideCancelBtn={true}
+            onClose={() => onClose('invalidLink')}
+            onConfirm={() => setTicketsNotAvailableModalOpen(false)}
+          />
+        )}
         {isLoading ? (
           <Loader />
         ) : (
@@ -666,7 +728,14 @@ export const TicketsContainer = ({
                   ${isButtonScrollable ? 'is-scrollable' : ''}
                   ${!isLoggedIn ? 'on-bottom' : ''}
                 `}
-                onClick={handleGetTicketClick}
+                onClick={
+                  event?.salesStart &&
+                  event?.presalesStarted &&
+                  !event?.presalesEnded &&
+                  (!isPreregistred || !isLogged)
+                    ? handleNotAvailableTicketsClick
+                    : handleGetTicketClick
+                }
               >
                 {selectedTickets.isTable
                   ? 'RESERVE TABLES'

package/src/components/ticketsContainer/utils.ts

@@ -1,11 +1,35 @@
-export const getTicketSelectOptions = (
-  maxCount = 10,
-  minCount = 1,
-  multiplier = 1
-) => {
+export const getTicketSelectOptions = (maxCount = 10, minCount = 1, multiplier = 1) => {
   const options = [{ label: 0, value: 0 }]
-  for (let i = minCount; i <= Math.min(50, maxCount); i += multiplier) {
+  for (let i = minCount || 1; i <= Math.min(50, maxCount); i += multiplier) {
     options.push({ label: i, value: i })
   }
   return options
 }
+
+interface eventDatesInfo {
+  salesStarted: boolean;
+  salesEnded: boolean;
+  presalesStarted: boolean;
+  presalesEnded: boolean;
+  presalesEnabled: boolean;
+}
+
+export const defineIsSalesClosed = (eventDatesInfo: eventDatesInfo): boolean => {
+  const { salesStarted, salesEnded, presalesStarted, presalesEnded, presalesEnabled } =
+    eventDatesInfo
+  let isSalesClosed = false
+  if (!salesStarted || (salesStarted && salesEnded)) {
+    isSalesClosed = true
+  }
+  if (presalesEnabled) {
+    if (
+      (!presalesStarted && !presalesEnded) ||
+      (presalesStarted && presalesEnded && !salesStarted)
+    ) {
+      isSalesClosed = true
+    } else {
+      isSalesClosed = false
+    }
+  }
+  return isSalesClosed
+}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useCookieListener } from './useCookieListener'

package/src/hooks/useEventListener.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react'
+
+export const useEventListener = (
+  eventName: string,
+  handler: () => void,
+  element = window
+) => {
+  // Create a ref that stores handler
+  const savedHandler = useRef<{ current: () => void }>()
+  // Update ref.current value if handler changes.
+
+  useEffect(() => {
+    savedHandler.current = handler
+  }, [handler])
+
+  useEffect(
+    () => {
+      // Make sure element supports addEventListener
+      const isSupported = element && element.addEventListener
+      if (!isSupported) return
+      // Create event listener that calls handler function stored in ref
+      const eventListener = (event: Event) => savedHandler.current(event)
+      // Add event listener
+      element.addEventListener(eventName, eventListener)
+      // Remove event listener on cleanup
+      return () => {
+        element.removeEventListener(eventName, eventListener)
+      }
+    },
+    [eventName, element] // Re-run if eventName or element changes
+  )
+}

package/src/hooks/useLocalStorageListener.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+export function useLocalStorageListener(
+  key: string,
+  callback: (value: string | null) => void
+): string | null {
+  const isWindowDefined = typeof window !== 'undefined'
+  const [value, setValue] = useState<string | null>(
+    isWindowDefined ? localStorage.getItem(key) : ''
+  )
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      const newValue = localStorage.getItem(key)
+      if (newValue !== value) {
+        setValue(newValue)
+        callback(JSON.parse(newValue || ''))
+      }
+    }, 100)
+
+    return () => {
+      clearInterval(intervalId)
+    }
+  }, [key, value, callback])
+
+  return value
+}

package/src/index.ts

@@ -13,9 +13,13 @@ export { RsvpContainer } from './components/rsvpContainer'
 export { ResetPasswordContainer } from './components/resetPasswordContainer'
 export { ForgotPasswordModal } from './components/forgotPasswordModal'
 export { AddonsContainter } from './components/addonsContainer'
+export { PreRegistration } from './components/preRegistration'
+export { PreRegistrationComplete } from './components/preRegistration/PreRegistrationComplete'
+export { PreRegistrationInformations } from './components/preRegistration/PreRegistrationInformations'
+
+export { useCookieListener } from './hooks'
 export { DelegationsContainer } from './components/delegationsContainer'
 export { PoweredBy } from './components/common/PoweredBy'
 export { SeatMapContainer } from './components/seatMapContainer'
 export { IDVerification } from './components/idVerificationContainer'
-export { VERIFICATION_STATUSES } from './components/idVerificationContainer/constants'
-export { useCookieListener } from './hooks/useCookieListener'
+export { VERIFICATION_STATUSES } from './components/idVerificationContainer/constants'

package/src/types/api/preRegistration.d.ts

@@ -0,0 +1,11 @@
+interface IConfirmPreRegistrationRequestData {
+  brandOptIn: boolean;
+  confirmEmail: string;
+  dobDay: number;
+  dobMonth: number;
+  dobYear: number;
+  email: string;
+  numTickets: string | number;
+  password: string;
+  zip: string | number;
+}

package/src/types/api/preRegistrationComplete.d.ts

@@ -0,0 +1,95 @@
+interface IInfluancerData {
+  customer_id: string;
+  data_capture: any;
+  email: string;
+  date: string;
+  dateOfBirth: string;
+  event_id: string;
+  first_name: string;
+  last_name: string;
+  name: string;
+  points: string;
+  prereg_id: string;
+  quantity: string;
+  refferer_customer_ids: Array<string | number> | null;
+}
+
+interface IPrizeData {
+  name: string;
+  id: string;
+
+  description?: string;
+  image?: string;
+  tour_id?: string;
+}
+
+interface IInfluancersData {
+  attributes: {
+    influencers: IInfluancerData[];
+    prizes: IPrizeData[];
+  };
+  relationships: Array<unknown>;
+  type: string;
+}
+
+interface IShareOptionsActionData {
+  action: string;
+  alreadyApplied: boolean;
+  gropName: string | null;
+  id: string;
+  oneTimeAction: boolean;
+  phase: string;
+  point: string;
+  socialUrl: string | null;
+}
+
+interface IShareOptionsData {
+  attributes: {
+    actions: IShareOptionsActionData[];
+    shareActionToken: string;
+    shareUrl: string;
+    tokenShuffleMethod: string;
+  };
+  relationships: Array<unknown>;
+  type: string;
+}
+
+interface ISubmitShareActionAttributes {
+  shareActionToken: string;
+  tokenShuffleMethod: string;
+}
+
+interface ISubmitShareActionData {
+  attributes: {
+    shareActionToken: string;
+    tokenShuffleMethod: string;
+  };
+  relationships: Array<unknown>;
+  type: string;
+}
+
+interface IInfluancersRequestData {
+  eventId: string | number;
+}
+
+interface IShareOptionsRequestData {
+  hash: string;
+}
+
+interface ISubmitShareActionRequestData {
+  eventActionId: string;
+  hash: string | null;
+  accessToken: string;
+}
+
+interface IInfluancersResponseData extends IAxiosResponseData {
+  data: IInfluancersData;
+}
+
+interface IShareOptionsResponseData extends IAxiosResponseData {
+  data: IShareOptionsData;
+}
+
+interface ISubmitShareActionResponseData extends IAxiosResponseData {
+  data: ISubmitShareActionData;
+}

package/src/types/pre-registration-complete.d.ts

@@ -0,0 +1,42 @@
+interface IPrewardsProps {
+  data: Array<IPrizeData>;
+  classNamePrefix: string;
+  headerNode?: string | Node;
+}
+
+interface IInfluancersProps {
+  data: Array<IInfluancerData>;
+  classNamePrefix: string;
+  headerNode?: string | Node;
+}
+
+interface IShareOptionsProps {
+  data: IShareOptionsData;
+  classNamePrefix: string;
+  hasCopyIcon?: boolean;
+  onLinkCopied: () => void;
+  updateShareActionData: () => void;
+  headerText?: string | Node;
+  hash: string | null;
+  shareActionData: ISubmitShareActionAttributes;
+}
+
+interface IPreRegistrationInformationProps {
+  eventId: string | number;
+  classNamePrefix: string;
+  onGetPreregistrationDataSuccess?: () => void;
+  onGetPreregistrationDataError?: () => void;
+  influancersHeaderNode?: string | Node;
+  prewardsHeaderNode?: string | Node;
+}
+
+interface IPreRegistrationCompleteProps extends IShareOptionsProps {
+  eventId: string | number;
+  pageHeader?: string | Node;
+  pageMessage?: string | Node;
+  onLoginSuccess?: (response: IProfileData) => void;
+  onLoginError?: () => void;
+  logo?: string;
+  showForgotPasswordButton?: boolean;
+  onGetConfirmationDataSuccess?: () => void;
+}

package/src/utils/cookies.ts

@@ -1,29 +1,29 @@
 import { getDomain } from './getDomain'
 
-export function setCustomCookie(name: string, value: string, days: number = 5) {
+export function setCustomCookie(name: string, value: string, days = 5) {
   let expires = ''
   if (days) {
-    let date = new Date()
+    const date = new Date()
     date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
     expires = '; expires=' + date.toUTCString()
   }
   if (typeof window !== 'undefined') {
     const domain = getDomain(window.location.hostname)
     document.cookie =
-      name + '=' + (value || '') + expires + '; path=/' + `; domain=${domain}`
+      name + '=' + (value || '') + expires + `; path=/; domain=${domain}`
   }
 }
 
 export function getCookieByName(cname: string) {
   if (typeof window === 'undefined') return ''
-  let name = cname + '='
-  let ca = document.cookie.split(';')
+  const name = cname + '='
+  const ca = document.cookie.split(';')
   for (let i = 0; i < ca.length; i++) {
     let c = ca[i]
-    while (c.charAt(0) == ' ') {
+    while (c.charAt(0) === ' ') {
       c = c.substring(1)
     }
-    if (c.indexOf(name) == 0) {
+    if (c.indexOf(name) === 0) {
       return c.substring(name.length, c.length)
     }
   }

package/src/utils/isValidNumber.ts

@@ -0,0 +1,8 @@
+import _isNumber from 'lodash/isNumber'
+
+export const isValidNumber = (value?: number | string): boolean => {
+  if (isNaN(Number(value))) {
+    return false
+  }
+  return _isNumber(Number(value))
+}