tf-checkout-react 1.0.75 → 1.0.79

package/src/components/ticketsContainer/index.tsx

@@ -2,7 +2,13 @@ import React, { useState, useEffect } from 'react'
 import axios, { AxiosError } from 'axios'
 import './style.css'
 
-import { getTickets, addToCart, setCustomHeader } from '../../api'
+import {
+  getTickets,
+  getEvent,
+  addToCart,
+  setCustomHeader,
+  postOnCheckout,
+} from '../../api'
 import _get from 'lodash/get'
 import _some from 'lodash/some'
 import _find from 'lodash/find'
@@ -13,6 +19,12 @@ import jwt_decode from 'jwt-decode'
 import { TicketsSection } from './TicketsSection'
 import WaitingList from '../waitingList'
 import { PromoCodeSection } from './PromoCodeSection'
+import { LoginModal } from '../loginModal'
+import Countdown from '../countdown'
+import { createCheckoutDataBodyWithDefaultHolder } from '../../utils'
+import { ThemeProvider } from '@mui/private-theming'
+import { createTheme, ThemeOptions } from '@mui/material'
+import { CSSProperties } from '@mui/styles'
 
 function Loader() {
   return (
@@ -27,6 +39,7 @@ interface CartSuccess {
   names_required: boolean;
   age_required: boolean;
   event_id: string;
+  hash?: string;
 }
 
 export interface IGetTickets {
@@ -37,10 +50,12 @@ export interface IGetTickets {
   onAddToCartError: (e: AxiosError) => void;
   onGetTicketsSuccess: (response: any) => void;
   onGetTicketsError: (e: AxiosError) => void;
+  onLoginSuccess: () => void;
 
   theme?: 'light' | 'dark';
   queryPromoCode?: string;
   isPromotionsEnabled?: boolean;
+  themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties }
 }
 
 export interface ITicket {
@@ -53,21 +68,29 @@ export interface ISelectedTickets {
 }
 
 export const TicketsContainer = ({
+  onLoginSuccess,
   getTicketsLabel,
   eventId,
   onAddToCartSuccess,
   contentStyle = {},
-  onAddToCartError = () => { },
-  onGetTicketsSuccess = () => { },
-  onGetTicketsError = () => { },
+  onAddToCartError = () => {},
+  onGetTicketsSuccess = () => {},
+  onGetTicketsError = () => {},
   theme = 'light',
   queryPromoCode = '',
   isPromotionsEnabled = true,
+  themeOptions,
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState(
     {} as ISelectedTickets
   )
+  const isWindowDefined = typeof window !== 'undefined'
+  const [isLogged, setIsLogged] = useState(
+    isWindowDefined ? !!window.localStorage.getItem('access_token') : false
+  )
+  const [showLoginModal, setShowLoginModal] = React.useState(false)
   const [tickets, setTickets] = useState([] as ITicket[])
+  const [event, setEvent] = useState<any>(null)
   const [showWaitingList, setShowWaitingList] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [handleBookIsLoading, setHandleBookIsLoading] = useState(false)
@@ -90,29 +113,59 @@ export const TicketsContainer = ({
   }, [])
 
   useEffect(() => {
-    async function getTicketsApi() {
-      try {
-        setIsLoading(true)
-        const response = await getTickets(eventId, promoCodeUpdated)
-        if (response.data.success) {
-          setCustomHeader(response)
-          const attributes = _get(response, 'data.data.attributes')
-          setPromoCodeIsApplied(attributes.ValidPromoCode)
-          setTickets(_get(attributes, 'tickets'))
-          setShowWaitingList(attributes.showWaitingList)
-          onGetTicketsSuccess(response.data)
-        }
-      } catch (e) {
-        if (axios.isAxiosError(e)) {
-          onGetTicketsError(e)
-        }
-      } finally {
-        setIsLoading(false)
-      }
-    }
     getTicketsApi()
   }, [eventId, promoCodeUpdated])
 
+  const handleLogout = () => {
+    if (isWindowDefined) {
+      window.localStorage.removeItem('access_token')
+      window.localStorage.removeItem('user_data')
+      setIsLogged(false)
+      const event = new window.CustomEvent('tf-logout')
+      window.document.dispatchEvent(event)
+    }
+  }
+
+  const handleExternalLogin = () => {
+    setIsLogged(true)
+  }
+  const handleOnClose = () => {
+    setShowLoginModal(false)
+  }
+  const handleOnLogin = () => {
+    setShowLoginModal(false)
+    setIsLogged(true)
+    if (onLoginSuccess) {
+      onLoginSuccess()
+    }
+  }
+
+  async function getTicketsApi() {
+    try {
+      setIsLoading(true)
+      const response = await getTickets(eventId, promoCodeUpdated)
+      const eventResponse = await getEvent(eventId)
+      if (response.data.success) {
+        setCustomHeader(response)
+        const attributes = _get(response, 'data.data.attributes')
+        setPromoCodeIsApplied(attributes.ValidPromoCode)
+        setTickets(_get(attributes, 'tickets'))
+        setShowWaitingList(attributes.showWaitingList)
+        onGetTicketsSuccess(response.data)
+      }
+      if (eventResponse.data.success) {
+        const event = _get(eventResponse, 'data.data.attributes')
+        setEvent(event)
+      }
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        onGetTicketsError(e)
+      }
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
   const handleTicketSelect = (key: string, value: number | string) => {
     setSelectedTickets(prevState => {
       if (Object.keys(prevState)[0] !== key && !value) {
@@ -124,6 +177,12 @@ export const TicketsContainer = ({
     })
   }
 
+  const handleOrdersClick = () => {
+    if (isWindowDefined) {
+      window.location.href = '/orders'
+    }
+  }
+
   const handleBook = async () => {
     setHandleBookIsLoading(true)
     const ticket =
@@ -156,13 +215,50 @@ export const TicketsContainer = ({
       const result = await addToCart(eventId, data)
       if (result.status === 200) {
         setCustomHeader(result)
+
+        const skipBillingPage =
+          result?.data?.data?.attributes?.skip_billing_page ?? false
+        const nameIsRequired =
+          result?.data?.data?.attributes?.names_required ?? false
+        const ageIsRequired =
+          result?.data?.data?.attributes?.age_required ?? false
+
+        let hash = ''
+
+        if (skipBillingPage) {
+          // Get user data for checkout data
+          const isWindowDefined = typeof window !== 'undefined'
+          const userData =
+            isWindowDefined && window.localStorage.getItem('user_data')
+              ? JSON.parse(window.localStorage.getItem('user_data') || '')
+              : {}
+
+          const access_token =
+            isWindowDefined && window.localStorage.getItem('access_token')
+              ? window.localStorage.getItem('access_token') || ''
+              : ''
+
+          const ticketsQuantity = Object.keys(selectedTickets).length
+
+          const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
+            ticketsQuantity,
+            userData
+          )
+
+          const checkoutResult = await postOnCheckout(
+            checkoutBody,
+            access_token
+          )
+
+          hash = _get(checkoutResult, 'data.data.attributes.hash')
+        }
+
         onAddToCartSuccess({
-          skip_billing_page:
-            result?.data?.data?.attributes?.skip_billing_page ?? false,
-          names_required:
-            result?.data?.data?.attributes?.names_required ?? false,
-          age_required: result?.data?.data?.attributes?.age_required ?? false,
-          event_id: String(eventId)
+          skip_billing_page: skipBillingPage,
+          names_required: nameIsRequired,
+          age_required: ageIsRequired,
+          event_id: String(eventId),
+          hash,
         })
       }
     } catch (e) {
@@ -174,62 +270,126 @@ export const TicketsContainer = ({
     }
   }
 
+  const updateTickets = () => {
+    getTicketsApi()
+  }
+
   const isAllTicketsSoldOut = !_some(
     tickets,
     item => !(item.sold_out || item.soldOut)
   )
 
+  const themeMui = createTheme(themeOptions)
+  
+  useEffect(() => {
+    isWindowDefined &&
+      window.document.addEventListener('custom-logout', handleLogout)
+    return () => {
+      isWindowDefined &&
+        window.document.removeEventListener('custom-logout', handleLogout)
+    }
+  }, [])
+
+  useEffect(() => {
+    isWindowDefined &&
+      window.document.addEventListener('custom-login', handleExternalLogin)
+    return () => {
+      isWindowDefined &&
+        window.document.removeEventListener(
+          'custom-login',
+          handleExternalLogin
+        )
+    }
+  }, [])
+
   return (
-    <div className={`get-tickets-page ${theme}`} style={contentStyle}>
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <div>
-          <TicketsSection
-            ticketsList={tickets}
-            selectedTickets={selectedTickets}
-            handleTicketSelect={handleTicketSelect}
-            promoCodeIsApplied={promoCodeIsApplied}
-          />
-          {showWaitingList && (
-            <WaitingList
-              tickets={tickets}
-              eventId={eventId}
+    <ThemeProvider theme={themeMui}>
+      <div className={`get-tickets-page ${theme}`} style={contentStyle}>
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <div>
+            <TicketsSection
+              ticketsList={tickets}
+              selectedTickets={selectedTickets}
+              handleTicketSelect={handleTicketSelect}
+              promoCodeIsApplied={promoCodeIsApplied}
+            />
+            {event?.salesEnded ? (
+              <p>Sales for this event are closed.</p>
+            ) : event?.salesStart ? (
+                <Countdown
+                  startDate={event.salesStart}
+                  timezone={event.timezone}
+                  title="Sales start in:"
+                  message="No tickets are currently available for this event."
+                  callback={updateTickets}
+                />
+            ) : null}
+            {showWaitingList && event.salesStarted && (
+              <WaitingList tickets={tickets} eventId={eventId} />
+            )}
+            <PromoCodeSection
+              promoCode={promoCode}
+              promoCodeIsApplied={promoCodeIsApplied}
+              showPromoInput={showPromoInput}
+              setPromoCode={setPromoCode}
+              setPromoCodeUpdated={setPromoCodeUpdated}
+              setShowPromoInput={setShowPromoInput}
               isPromotionsEnabled={isPromotionsEnabled}
+              isAllTicketsSoldOut={isAllTicketsSoldOut}
             />
-          )}
-          <PromoCodeSection
-            promoCode={promoCode}
-            promoCodeIsApplied={promoCodeIsApplied}
-            showPromoInput={showPromoInput}
-            setPromoCode={setPromoCode}
-            setPromoCodeUpdated={setPromoCodeUpdated}
-            setShowPromoInput={setShowPromoInput}
-            isPromotionsEnabled={isPromotionsEnabled}
-            isAllTicketsSoldOut={isAllTicketsSoldOut}
-          />
-          {!isAllTicketsSoldOut && (
-            <Button
-              aria-hidden={true}
-              className={`book-button ${handleBookIsLoading ||
-                _isEmpty(selectedTickets) ||
-                Object.values(selectedTickets)[0] === 0
-                ? 'disabled'
-                : ''
+            {!isAllTicketsSoldOut && (
+              <Button
+                aria-hidden={true}
+                className={`book-button ${
+                  handleBookIsLoading ||
+                  _isEmpty(selectedTickets) ||
+                  Object.values(selectedTickets)[0] === 0
+                    ? 'disabled'
+                    : ''
                 }`}
-              onClick={
-                !handleBookIsLoading &&
+                onClick={
+                  !handleBookIsLoading &&
                   !_isEmpty(selectedTickets) &&
                   Object.values(selectedTickets)[0] > 0
-                  ? handleBook
-                  : () => { }
-              }
-            >
-              {getTicketsLabel || 'GET TICKETS'}
-            </Button>
-          )}
-        </div>
-      )}
-    </div>
+                    ? handleBook
+                    : () => {}
+                }
+              >
+                {getTicketsLabel || 'GET TICKETS'}
+              </Button>
+            )}
+            {isLogged ? (
+              <div className="session-wrapper">
+                <span className="session-container">
+                  <Button
+                    variant="outline-light"
+                    className="session-buttons"
+                    onClick={handleOrdersClick}
+                  >
+                    My Orders
+                  </Button>
+                </span>
+                <span className="session-container">
+                  <Button
+                    variant="outline-light"
+                    className="session-buttons"
+                    onClick={handleLogout}
+                  >
+                    Log out
+                  </Button>
+                </span>
+              </div>
+            ) : (
+              ''
+            )}
+          </div>
+        )}
+        {showLoginModal ? (
+          <LoginModal onClose={handleOnClose} onLogin={handleOnLogin} />
+        ) : null}
+      </div>
+    </ThemeProvider>
   )
 }

package/src/components/ticketsContainer/style.css

@@ -108,6 +108,13 @@ body {
   text-transform: uppercase;
 }
 
+.event-detail__tier-state .ticket-not-started-message {
+  color: #000000;
+  text-transform: initial;
+  width: 50px;
+  text-align: left;
+}
+
 .promo-code-block input {
   font-size: 14px;
   padding: 1px 8px;

package/src/components/waitingList/index.tsx

@@ -16,7 +16,6 @@ import './style.css'
 interface WaitingListProps {
   tickets: any;
   eventId: number;
-  isPromotionsEnabled: boolean;
 }
 
 interface WaitingListFields {
@@ -35,7 +34,7 @@ const generateQuantity = (n: number) => {
   return quantityList
 }
 
-const WaitingList = ({ tickets = {}, eventId, isPromotionsEnabled }: WaitingListProps) => {
+const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
   const [showSuccessMessage, setShowSuccessMessage] = useState(false)
   const [loading, setLoading] = useState(false)
   const ticketTypesList = Object.values(tickets).map((d: any) => ({
@@ -68,16 +67,11 @@ const WaitingList = ({ tickets = {}, eventId, isPromotionsEnabled }: WaitingList
     <div className="waiting-list">
       {showSuccessMessage ? (
         <div className="success-message">
-          <p className="added-success-message">{`You've been added to the waiting list!`}</p>
-          <p>{`You'll be notified if tickets become available.`}</p>
+          <p className="added-success-message">You've been added to the waiting list!</p>
+          <p>You'll be notified if tickets become available.</p>
         </div>
       ) : (
         <>
-          {!isPromotionsEnabled && (
-            <p className="no-tickets-text">
-              No tickets are currently available for this event.
-            </p>
-          )}
           <h2>WAITING LIST</h2>
           <Formik
             initialValues={{

package/src/components/waitingList/style.css

@@ -10,8 +10,9 @@
 .waiting-list .waiting-list-button:hover {
   background-color: #505050;
 }
-.waiting-list .success-message h3 {
-  margin: 10px 0;
+.waiting-list .success-message {
+  text-align: center;
+  margin-bottom: 15px;
 }
 .waiting-list .success-message p {
   margin: 0;
@@ -22,4 +23,5 @@
 }
 .waiting-list .added-success-message {
   font-size: 22px;
+  margin-bottom: 10px;
 }

package/src/utils/createCheckoutDataBodyWithDefaultHolder.ts

@@ -0,0 +1,51 @@
+import _get from 'lodash/get'
+
+interface ICheckoutBody {
+  attributes: {
+    [key: string]: any;
+  };
+}
+
+interface IticketHolder {
+  first_name?: string;
+  last_name?: string;
+  phone?: string;
+  email?: string;
+}
+
+export const createCheckoutDataBodyWithDefaultHolder = (
+  ticketsQuantity: number,
+  logedInValues: {}
+): ICheckoutBody => {
+  const ticket_holders: IticketHolder[] = []
+
+  const first_name =
+    _get(logedInValues, 'firstName') || _get(logedInValues, 'first_name') || ''
+  const last_name =
+    _get(logedInValues, 'lastName', '') ||
+    _get(logedInValues, 'last_name') ||
+    ''
+  const phone = _get(logedInValues, 'phone', '')
+  const email = _get(logedInValues, 'email', '')
+
+  for (let i = 0; i <= ticketsQuantity - 1; i++) {
+    const individualHolder = i
+      ? { first_name: '', last_name: '', phone: '', email: '' }
+      : { first_name, last_name, phone, email }
+
+    ticket_holders.push(individualHolder)
+  }
+
+  const body: ICheckoutBody = {
+    attributes: {
+      ...logedInValues,
+      email,
+      confirm_email: email,
+      first_name,
+      last_name,
+      ticket_holders,
+    },
+  }
+
+  return body
+}

package/src/utils/downloadPDF.tsx

@@ -0,0 +1,22 @@
+export const downloadPDF = (pdfUrl: string) => {
+  if (typeof window === 'undefined') return
+
+  const accessToken: string | null = localStorage.getItem('access_token')
+
+  if (!accessToken) return
+
+  fetch(pdfUrl, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  })
+    .then(async response => {
+      const blobValue = await response.blob()
+      return blobValue
+    })
+    .then(blobValue => {
+      const file = new Blob([blobValue], { type: 'application/pdf' })
+      const fileURL = URL.createObjectURL(file)
+      window.open(fileURL)
+    })
+}

package/src/utils/index.ts

@@ -1,3 +1,5 @@
 export { setConfigs, CONFIGS } from './setConfigs'
 export { getQueryVariable } from './getQueryVariable'
 export { ErrorFocus } from './formikErrorFocus'
+export { downloadPDF } from './downloadPDF'
+export { createCheckoutDataBodyWithDefaultHolder } from './createCheckoutDataBodyWithDefaultHolder'