tf-checkout-react 1.0.106 → 1.2.1

package/src/components/ticketsContainer/index.tsx

@@ -1,32 +1,38 @@
-import React, { useState, useEffect, useRef, ReactNode } from 'react'
-import axios, { AxiosError } from 'axios'
-import { Loader } from '../common/index'
 import './style.css'
 
+import { createTheme, ThemeOptions } from '@mui/material'
+import { ThemeProvider } from '@mui/private-theming'
+import { CSSProperties } from '@mui/styles'
+import axios, { AxiosError } from 'axios'
+import jwt_decode from 'jwt-decode'
+import _find from 'lodash/find'
+import _get from 'lodash/get'
+import _isEmpty from 'lodash/isEmpty'
+import _some from 'lodash/some'
+import React, { ReactNode,useEffect, useRef, useState } from 'react'
+import Button from 'react-bootstrap/Button'
+
 import {
-  getTickets,
-  getEvent,
   addToCart,
+  getEvent,
+  getTickets,
+  logout,
   postOnCheckout,
 } from '../../api'
-import _get from 'lodash/get'
-import _some from 'lodash/some'
-import _every from 'lodash/every'
-import _find from 'lodash/find'
-import _isEmpty from 'lodash/isEmpty'
-import Button from 'react-bootstrap/Button'
-import jwt_decode from 'jwt-decode'
-import { TicketsSection } from './TicketsSection'
+import {
+  createCheckoutDataBodyWithDefaultHolder,
+  deleteCookieByName,
+  getCookieByName,
+  getQueryVariable,
+} from '../../utils'
+import { Loader } from '../common/index'
+import Countdown from '../countdown'
+import { LoginModal } from '../loginModal'
 import WaitingList from '../waitingList'
-import { PromoCodeSection } from './PromoCodeSection'
 import { AccessCodeSection } from './AccessCodeSection'
-import { LoginModal } from '../loginModal'
-import Countdown from '../countdown'
-import { createCheckoutDataBodyWithDefaultHolder, getQueryVariable } from '../../utils'
-import { ThemeProvider } from '@mui/private-theming'
-import { createTheme, ThemeOptions } from '@mui/material'
-import { CSSProperties } from '@mui/styles'
+import { PromoCodeSection } from './PromoCodeSection'
 import { ReferralLogic } from './ReferralLogic'
+import { TicketsSection } from './TicketsSection'
 
 interface CartSuccess {
   skip_billing_page: boolean;
@@ -46,22 +52,29 @@ export interface IGetTickets {
   onAddToCartError: (e: AxiosError) => void;
   onGetTicketsSuccess: (response: any) => void;
   onGetTicketsError: (e: AxiosError) => void;
+  onLogoutSuccess: () => void;
+  onLogoutError: (e: AxiosError) => void;
   onLoginSuccess: () => void;
 
   theme?: 'light' | 'dark';
   queryPromoCode?: string;
   isPromotionsEnabled?: boolean;
-  themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties }
+  themeOptions?: ThemeOptions & {
+    input?: CSSProperties;
+    checkbox?: CSSProperties;
+  };
   isAccessCodeEnabled?: boolean;
   hideSessionButtons?: boolean;
   hideWaitingList?: boolean;
+  enableBillingInfoAutoCreate?: boolean;
   isButtonScrollable?: boolean;
   sortBySoldOut?: boolean;
   disableCountdownLeadingZero?: boolean;
   isLoggedIn?: boolean;
   actionsSectionComponent?: any;
-  ticketsHeaderComponent?: ReactNode,
-  hideTicketsHeader?: boolean,
+  ticketsHeaderComponent?: ReactNode;
+  hideTicketsHeader?: boolean;
+  enableInfluencersSection?: boolean;
 }
 
 export interface ITicket {
@@ -69,6 +82,9 @@ export interface ITicket {
   [key: string]: string | number;
 }
 
+interface IInfluencer {
+  [key: string]: string | undefined;
+}
 export interface ISelectedTickets {
   [key: string]: string | number;
 }
@@ -82,6 +98,8 @@ export const TicketsContainer = ({
   onAddToCartError = () => {},
   onGetTicketsSuccess = () => {},
   onGetTicketsError = () => {},
+  onLogoutSuccess = () => {},
+  onLogoutError = () => {},
   theme = 'light',
   queryPromoCode = '',
   isPromotionsEnabled = true,
@@ -89,20 +107,22 @@ export const TicketsContainer = ({
   isAccessCodeEnabled = false,
   hideSessionButtons = false,
   hideWaitingList = false,
+  enableBillingInfoAutoCreate = true,
   isButtonScrollable = false,
   sortBySoldOut = false,
   disableCountdownLeadingZero = false,
   isLoggedIn = false,
-  actionsSectionComponent : ActionsSectionComponent,
+  actionsSectionComponent: ActionsSectionComponent,
   ticketsHeaderComponent,
-  hideTicketsHeader = false
+  hideTicketsHeader = false,
+  enableInfluencersSection = true
 }: IGetTickets) => {
-  const [selectedTickets, setSelectedTickets] = useState(
-    {} as ISelectedTickets
-  )
+  const [selectedTickets, setSelectedTickets] = useState({} as ISelectedTickets)
   const isWindowDefined = typeof window !== 'undefined'
+  const xtfCookie = getCookieByName('X-TF-ECOMMERCE')
   const [isLogged, setIsLogged] = useState(
-    isWindowDefined ? !!window.localStorage.getItem('access_token') : false
+    (isWindowDefined ? !!window.localStorage.getItem('access_token') : false) ||
+      !!xtfCookie
   )
   const [showLoginModal, setShowLoginModal] = useState(false)
   const [tickets, setTickets] = useState([] as ITicket[])
@@ -136,13 +156,20 @@ export const TicketsContainer = ({
     !!eventId && getTicketsApi()
   }, [eventId])
 
-  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 handleLogout = async () => {
+    try {
+      await logout()
+      onLogoutSuccess()
+      if (isWindowDefined) {
+        window.localStorage.removeItem('access_token')
+        window.localStorage.removeItem('user_data')
+        setIsLogged(false)
+        const event = new window.CustomEvent('tf-logout')
+        deleteCookieByName('X-TF-ECOMMERCE')
+        window.document.dispatchEvent(event)
+      }
+    } catch (e) {
+      onLogoutError(e)
     }
   }
 
@@ -154,10 +181,12 @@ export const TicketsContainer = ({
           : {}
         if (userData.country === '') {
           handleLogout()
-          window.open("https://www.ticketfairy.com/account/change_information?need_country=true");
+          window.open(
+            'https://www.ticketfairy.com/account/change_information?need_country=true'
+          )
         }
       }
-    } catch(e) {}
+    } catch (e) {}
   }, [])
 
   const handleExternalLogin = () => {
@@ -174,14 +203,14 @@ export const TicketsContainer = ({
     }
   }
 
-  async function getTicketsApi(isUpdateingCode?: boolean) {
+  async function getTicketsApi(isUpdateingCode?: boolean, type?: string) {
     try {
       isUpdateingCode ? setCodeIsLoading(true) : setIsLoading(true)
       const response = await getTickets(eventId, code)
       const eventResponse = await getEvent(eventId)
       if (response.data.success) {
         const attributes = _get(response, 'data.data.attributes')
-        setCodeIsApplied(attributes.ValidPromoCode)
+        type === 'promo' && setCodeIsApplied(attributes.ValidPromoCode)
         setTickets(_get(attributes, 'tickets'))
         setShowWaitingList(attributes.showWaitingList)
         onGetTicketsSuccess(response.data)
@@ -251,7 +280,6 @@ export const TicketsContainer = ({
     try {
       const result = await addToCart(eventId, data)
       if (result.status === 200) {
-
         const skipBillingPage =
           result?.data?.data?.attributes?.skip_billing_page ?? false
         const nameIsRequired =
@@ -282,10 +310,9 @@ export const TicketsContainer = ({
             userData
           )
 
-          const checkoutResult = await postOnCheckout(
-            checkoutBody,
-            access_token
-          )
+          const checkoutResult = enableBillingInfoAutoCreate
+            ? await postOnCheckout(checkoutBody, access_token)
+            : null
 
           hash = _get(checkoutResult, 'data.data.attributes.hash')
           total = _get(checkoutResult, 'data.data.attributes.total')
@@ -298,7 +325,7 @@ export const TicketsContainer = ({
           age_required: ageIsRequired,
           event_id: String(eventId),
           hash,
-          total
+          total,
         })
       }
     } catch (e) {
@@ -310,17 +337,20 @@ export const TicketsContainer = ({
     }
   }
 
-  const updateTickets = (isUpdateingCode?: boolean) => {
-    getTicketsApi(isUpdateingCode)
+  const updateTickets = (isUpdateingCode?: boolean, type?: string) => {
+    getTicketsApi(isUpdateingCode, type)
   }
 
   const isTicketOnSale = _some(
     tickets,
-    item => (item.salesStarted && !item.salesEnded && !item.soldOut)
+    item => item.salesStarted && !item.salesEnded && !item.soldOut
   )
 
+  const eventHasTickets = !_isEmpty(tickets)
+  const isSalesClosed = event?.salesEnded
+
   const themeMui = createTheme(themeOptions)
-  
+
   useEffect(() => {
     isWindowDefined &&
       window.document.addEventListener('custom-logout', handleLogout)
@@ -335,32 +365,49 @@ export const TicketsContainer = ({
       window.document.addEventListener('custom-login', handleExternalLogin)
     return () => {
       isWindowDefined &&
-        window.document.removeEventListener(
-          'custom-login',
-          handleExternalLogin
-        )
+        window.document.removeEventListener('custom-login', handleExternalLogin)
     }
   }, [])
 
   const handleGetTicketClick = () => {
-    if (!handleBookIsLoading && !_isEmpty(selectedTickets) && Object.values(selectedTickets)[0] > 0) {
+    if (
+      !handleBookIsLoading &&
+      !_isEmpty(selectedTickets) &&
+      Object.values(selectedTickets)[0] > 0
+    ) {
       handleBook()
     } else {
-      if (isButtonScrollable && ticketsContainerRef && ticketsContainerRef.current) {
-        ticketsContainerRef.current.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
+      if (
+        isButtonScrollable &&
+        ticketsContainerRef &&
+        ticketsContainerRef.current
+      ) {
+        ticketsContainerRef.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'nearest',
+        })
       }
     }
   }
 
-  const bookButtonIsDisabled = handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0
+  const bookButtonIsDisabled =
+    handleBookIsLoading ||
+    _isEmpty(selectedTickets) ||
+    Object.values(selectedTickets)[0] === 0
 
-  const wrappedActionsSectionComponent = React.isValidElement(ActionsSectionComponent) ? React.cloneElement(ActionsSectionComponent as React.ReactElement<any>, { 
-    handleGetTicketClick,
-    isTicketOnSale
-  }) : null
+  const wrappedActionsSectionComponent = React.isValidElement(
+    ActionsSectionComponent
+  )
+    ? React.cloneElement(ActionsSectionComponent as React.ReactElement<any>, {
+        handleGetTicketClick,
+        isTicketOnSale,
+      })
+    : null
 
   const externalUrl = event?.redirectUrl
   const eventSaleIsNotStarted = !event?.salesStarted && event?.salesStart
+  const influencers = event?.referralsEnabled ? event?.referrals : []
 
   return (
     <ThemeProvider theme={themeMui}>
@@ -370,23 +417,27 @@ export const TicketsContainer = ({
           <Loader />
         ) : (
           <div ref={ticketsContainerRef}>
-            <TicketsSection
-              ticketsList={tickets}
-              selectedTickets={selectedTickets}
-              handleTicketSelect={handleTicketSelect}
-              codeIsApplied={codeIsApplied}
-              sortBySoldOut={sortBySoldOut}
-              ticketsHeaderComponent={ticketsHeaderComponent}
-              hideTicketsHeader={hideTicketsHeader || _isEmpty(tickets)}
-            />
-            {externalUrl ? null : event?.salesEnded ? (
-              <p className={`event-closed-message ${!isLoggedIn ? 'event-closed-on-bottom' : ''}`}>Sales for this event are closed.</p>
+            {!isSalesClosed && (
+              <TicketsSection
+                ticketsList={tickets}
+                selectedTickets={selectedTickets}
+                handleTicketSelect={handleTicketSelect}
+                sortBySoldOut={sortBySoldOut}
+                ticketsHeaderComponent={ticketsHeaderComponent}
+                hideTicketsHeader={hideTicketsHeader || _isEmpty(tickets)}
+              />
+            )}
+            {externalUrl ? null : isSalesClosed ? (
+              <p className={`event-closed-message ${!isLoggedIn ? 'event-closed-on-bottom' : ''}`}>
+                Sales for this event are closed.
+              </p>
             ) : eventSaleIsNotStarted ? (
                 <Countdown
                   startDate={event.salesStart}
                   timezone={event.timezone}
                   title="Sales start in:"
                   message="No tickets are currently available for this event."
+                  showMessage={!eventHasTickets}
                   callback={updateTickets}
                   disableLeadingZero={disableCountdownLeadingZero}
                   isLoggedIn={isLoggedIn}
@@ -395,10 +446,9 @@ export const TicketsContainer = ({
             {showWaitingList && event.salesStarted && !hideWaitingList && (
               <WaitingList tickets={tickets} eventId={eventId} />
             )}
-            {
-              codeIsLoading ? (
-                <Loader /> 
-              ) : showAccessCodeSection ? (
+            {codeIsLoading ? (
+                <Loader />
+              ) : isSalesClosed ? null : showAccessCodeSection ? (
                 <AccessCodeSection
                   code={code}
                   setCode={setCode}
@@ -408,6 +458,7 @@ export const TicketsContainer = ({
                 <PromoCodeSection
                   code={code}
                   codeIsApplied={codeIsApplied}
+                  setCodeIsApplied={setCodeIsApplied}
                   showPromoInput={showPromoInput}
                   setShowPromoInput={setShowPromoInput}
                   setCode={setCode}
@@ -416,19 +467,23 @@ export const TicketsContainer = ({
               ) : null
             }
             {wrappedActionsSectionComponent}
-            {!wrappedActionsSectionComponent && !eventSaleIsNotStarted && isTicketOnSale && !event?.salesEnded && !externalUrl && (
-              <Button
-                aria-hidden={true}
-                className={`book-button 
+            {!wrappedActionsSectionComponent &&
+              !eventSaleIsNotStarted &&
+              isTicketOnSale &&
+              !event?.salesEnded &&
+              !externalUrl && (
+                <Button
+                  aria-hidden={true}
+                  className={`book-button 
                   ${bookButtonIsDisabled ? 'disabled' : ''}  
                   ${isButtonScrollable ? 'is-scrollable' : ''}
                   ${!isLoggedIn ? 'on-bottom' : ''}
                 `}
-                onClick={handleGetTicketClick}
-              >
-                {getTicketsLabel || 'GET TICKETS'}
-              </Button>
-            )}
+                  onClick={handleGetTicketClick}
+                >
+                  {getTicketsLabel || 'GET TICKETS'}
+                </Button>
+              )}
             {isLogged && !hideSessionButtons ? (
               <div className="session-wrapper">
                 <span className="session-container">
@@ -459,6 +514,20 @@ export const TicketsContainer = ({
           <LoginModal onClose={handleOnClose} onLogin={handleOnLogin} />
         ) : null}
       </div>
+      {enableInfluencersSection && influencers.length ? (
+        <div className="event-influencers">
+          <h3>
+            <span>TOP</span> INFLUENCERS
+          </h3>
+          <ol className="influencer-list">
+            {influencers.map((influencer: IInfluencer, i: number) => (
+              <li className="influencer-item" key={i}>
+                {`${influencer.firstName} ${influencer.lastName?.charAt(0)}`}{' '}
+              </li>
+            ))}
+          </ol>
+        </div>
+      ) : null}
     </ThemeProvider>
   )
 }

package/src/env.ts

@@ -1,8 +1,8 @@
 // preview
 export const ENV = {
-  EVENT_ID: 160,
-  BASE_URL: 'https://preview.ttf.fluxtech.me',
-  CLIENT_ID: '4792a61f2fcb49197ab4c2d2f44df570',
+  EVENT_ID: 12906,
+  BASE_URL: 'https://test.ticketfairy.com',
+  CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
   CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
   STRIPE_PUBLISHABLE_KEY:
     'pk_test_51H4BkOGqveRD6EShliLrT9vd7mPOBPvQSuqmvc3wIinDqxWsCLeS2N7HonPPn6MhjU35ayYy5v4I6MLlD4jNWrd000NSgAF6UL',

package/src/index.ts

@@ -12,4 +12,6 @@ export { OrderDetailsContainer } from './components/orderDetailsContainer'
 export { setConfigs } from './utils/setConfigs'
 export { TicketResaleContainer } from './components'
 export { RedirectModal } from './components/common/RedirectModal'
-export { RsvpContainer } from './components/rsvpContainer'
+export { RsvpContainer } from './components/rsvpContainer'
+export { ResetPasswordContainer } from './components/resetPasswordContainer'
+export { ForgotPasswordModal } from './components/forgotPasswordModal'

package/src/utils/cookies.ts

@@ -0,0 +1,42 @@
+import { getDomain } from './getDomain'
+
+export function setCustomCookie(name: string, value: string, days: number = 5) {
+  let expires = ''
+  if (days) {
+    let 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}`
+  }
+}
+
+export function getCookieByName(cname: string) {
+  if (typeof window === 'undefined') return ''
+  let name = cname + '='
+  let ca = document.cookie.split(';')
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i]
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1)
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length)
+    }
+  }
+  return ''
+}
+
+export function deleteCookieByName(name: string) {
+  if (typeof window !== 'undefined') {
+    const domain = getDomain(window.location.hostname)
+    document.cookie =
+      name +
+      '=; Path=/' +
+      `; domain=${domain}` +
+      '; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
+  }
+}

package/src/utils/createCheckoutDataBodyWithDefaultHolder.ts

@@ -13,21 +13,33 @@ interface IticketHolder {
   email?: string;
 }
 
+interface IUserCredentialsValues {
+  emailLogged?: string;
+  firstNameLogged?: string;
+  lastNameLogged?: string;
+}
+
 export const createCheckoutDataBodyWithDefaultHolder = (
   ticketsQuantity: number,
   logedInValues: {},
-  includeDob: boolean = false
+  includeDob: boolean = false,
+  userCredentials: IUserCredentialsValues = {}
 ): ICheckoutBody => {
   const ticket_holders: IticketHolder[] = []
 
   const first_name =
-    _get(logedInValues, 'firstName') || _get(logedInValues, 'first_name') || ''
+    _get(logedInValues, 'firstName') || 
+    _get(logedInValues, 'first_name') || 
+    _get(userCredentials, 'firstNameLogged') || 
+    ''
+    
   const last_name =
-    _get(logedInValues, 'lastName', '') ||
+    _get(logedInValues, 'lastName') ||
     _get(logedInValues, 'last_name') ||
+    _get(userCredentials, 'lastNameLogged') ||
     ''
   const phone = _get(logedInValues, 'phone', '')
-  const email = _get(logedInValues, 'email', '')
+  const email = _get(logedInValues, 'email') || _get(userCredentials, 'emailLogged') || ''
 
   for (let i = 0; i <= ticketsQuantity - 1; i++) {
     const individualHolder = i

package/src/utils/downloadPDF.tsx

@@ -1,23 +1,42 @@
+import { getCookieByName } from './cookies'
+
 export const downloadPDF = (pdfUrl: string) => {
   if (typeof window === 'undefined') return
 
+  const xtfCookie = getCookieByName('X-TF-ECOMMERCE')
   const accessToken: string | null = localStorage.getItem('access_token')
 
-  if (!accessToken) return
+  if (!accessToken && !xtfCookie) return
+
+  let headers = {}
 
-  fetch(pdfUrl, {
-    headers: {
+  if (accessToken) {
+    headers = {
       Authorization: `Bearer ${accessToken}`,
-    },
+    }
+  }
+
+  if (xtfCookie) {
+    headers = {
+      'X-TF-ECOMMERCE': xtfCookie,
+    }
+  }
+
+  return fetch(pdfUrl, {
+    headers,
+    credentials: 'include',
   })
     .then(async response => {
       const blobValue = await response.blob()
-      const fileNameHeader = response.headers.get("content-disposition") || ''
+      const fileNameHeader = response.headers.get('content-disposition') || ''
       const fileName = fileNameHeader.split('"')[1]
       return { blobValue, fileName }
     })
     .then(({ blobValue, fileName }) => {
-      if (!fileName) return
+      if (!fileName) {
+        throw Error('Something went wrong.')
+        return
+      }
       const file = new Blob([blobValue], { type: 'application/pdf' })
       const fileURL = URL.createObjectURL(file)
       const link = document.createElement('a')
@@ -27,4 +46,7 @@ export const downloadPDF = (pdfUrl: string) => {
       link.click()
       document.body.removeChild(link)
     })
+    .catch(error => {
+      return error
+    })
 }

package/src/utils/getDomain.ts

@@ -0,0 +1,15 @@
+export function getDomain(url: string, subdomain?: string): string {
+  let updatedUrl: any = url.replace(/(https?:\/\/)?(www.)?/i, '')
+
+  if (!subdomain) {
+    updatedUrl = updatedUrl.split('.')
+
+    updatedUrl = updatedUrl.slice(updatedUrl.length - 2).join('.')
+  }
+
+  if (updatedUrl.indexOf('/') !== -1) {
+    return updatedUrl.split('/')[0]
+  }
+
+  return updatedUrl
+}

package/src/utils/index.ts

@@ -3,3 +3,5 @@ export { getQueryVariable } from './getQueryVariable'
 export { ErrorFocus } from './formikErrorFocus'
 export { downloadPDF } from './downloadPDF'
 export { createCheckoutDataBodyWithDefaultHolder } from './createCheckoutDataBodyWithDefaultHolder'
+export { setCustomCookie, getCookieByName, deleteCookieByName } from './cookies'
+export { getDomain } from './getDomain'