tf-checkout-react 1.0.106 → 1.1.0

package/src/components/ticketsContainer/index.tsx

@@ -8,6 +8,7 @@ import {
   getEvent,
   addToCart,
   postOnCheckout,
+  logout,
 } from '../../api'
 import _get from 'lodash/get'
 import _some from 'lodash/some'
@@ -22,7 +23,12 @@ import { PromoCodeSection } from './PromoCodeSection'
 import { AccessCodeSection } from './AccessCodeSection'
 import { LoginModal } from '../loginModal'
 import Countdown from '../countdown'
-import { createCheckoutDataBodyWithDefaultHolder, getQueryVariable } from '../../utils'
+import {
+  createCheckoutDataBodyWithDefaultHolder,
+  getQueryVariable,
+  deleteCookieByName,
+  getCookieByName,
+} from '../../utils'
 import { ThemeProvider } from '@mui/private-theming'
 import { createTheme, ThemeOptions } from '@mui/material'
 import { CSSProperties } from '@mui/styles'
@@ -46,15 +52,21 @@ 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;
@@ -65,12 +77,12 @@ export interface IGetTickets {
 }
 
 export interface ITicket {
-  id: string | number;
-  [key: string]: string | number;
+  id: string | number
+  [key: string]: string | number
 }
 
 export interface ISelectedTickets {
-  [key: string]: string | number;
+  [key: string]: string | number
 }
 
 export const TicketsContainer = ({
@@ -82,6 +94,8 @@ export const TicketsContainer = ({
   onAddToCartError = () => {},
   onGetTicketsSuccess = () => {},
   onGetTicketsError = () => {},
+  onLogoutSuccess = () => {},
+  onLogoutError = () => {},
   theme = 'light',
   queryPromoCode = '',
   isPromotionsEnabled = true,
@@ -89,6 +103,7 @@ export const TicketsContainer = ({
   isAccessCodeEnabled = false,
   hideSessionButtons = false,
   hideWaitingList = false,
+  enableBillingInfoAutoCreate = true,
   isButtonScrollable = false,
   sortBySoldOut = false,
   disableCountdownLeadingZero = false,
@@ -97,12 +112,12 @@ export const TicketsContainer = ({
   ticketsHeaderComponent,
   hideTicketsHeader = false
 }: 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 +151,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 +176,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 +198,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)
@@ -282,10 +306,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')
@@ -310,17 +333,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,24 +361,36 @@ 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,
@@ -370,23 +408,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 +437,9 @@ export const TicketsContainer = ({
             {showWaitingList && event.salesStarted && !hideWaitingList && (
               <WaitingList tickets={tickets} eventId={eventId} />
             )}
-            {
-              codeIsLoading ? (
+            {codeIsLoading ? (
                 <Loader /> 
-              ) : showAccessCodeSection ? (
+              ) : isSalesClosed ? null : showAccessCodeSection ? (
                 <AccessCodeSection
                   code={code}
                   setCode={setCode}
@@ -408,6 +449,7 @@ export const TicketsContainer = ({
                 <PromoCodeSection
                   code={code}
                   codeIsApplied={codeIsApplied}
+                  setCodeIsApplied={setCodeIsApplied}
                   showPromoInput={showPromoInput}
                   setShowPromoInput={setShowPromoInput}
                   setCode={setCode}

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'