tf-checkout-react 1.6.6-beta.3 → 1.6.6-beta.31

package/src/components/ticketsContainer/index.tsx

@@ -1,17 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import './style.css'
 
-import { createTheme, ThemeOptions } from '@mui/material'
+import { ThemeOptions } from '@mui/material'
 import Alert from '@mui/material/Alert'
-import { ThemeProvider } from '@mui/private-theming'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { CSSProperties } from '@mui/styles'
 import axios, { AxiosError } from 'axios'
 import _filter from 'lodash/filter'
 import _find from 'lodash/find'
+import _flatten from 'lodash/flatten'
 import _forEach from 'lodash/forEach'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _includes from 'lodash/includes'
 import _isEmpty from 'lodash/isEmpty'
+import _map from 'lodash/map'
 import _some from 'lodash/some'
 import moment from 'moment-timezone'
 import React, { ReactNode, useEffect, useRef, useState } from 'react'
@@ -23,22 +26,22 @@ import {
   getEvent,
   getProfileData,
   getTickets,
-  logout,
   postOnCheckout,
 } from '../../api'
-import { getPreRegistrationInfluancers } from '../../api/preRegistrationComplete'
+import { getTimeSlotsByDate } from '../../api/common'
+import { getPreRegistrationInfluencers } 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,
-  deleteCookieByName,
   getCookieByName,
   getQueryVariable,
   isBrowser,
   setLoggedUserData,
 } from '../../utils'
+import { logoutUser } from '../../utils/auth'
 import { Loader } from '../common/index'
 import { PoweredBy } from '../common/PoweredBy'
 import ConfirmModal from '../confirmModal'
@@ -50,6 +53,24 @@ import { AccessCodeSection } from './AccessCodeSection'
 import { PromoCodeSection } from './PromoCodeSection'
 import { ReferralLogic } from './ReferralLogic'
 import { TicketsSection } from './TicketsSection'
+import TimeSlotsSection from './TimeSlotsSection'
+
+const checkUserPreregistration = (preregisteredUsers: IInfluencerData[]) => {
+  const isWindowDefined = typeof window !== 'undefined'
+  const userDataString = isWindowDefined ? window.localStorage.getItem('user_data') : ''
+  let isPreregisteredUser = false
+  if (userDataString) {
+    const user = JSON.parse(userDataString)
+    isPreregisteredUser = _some(preregisteredUsers, item => item.email === user?.email)
+  }
+  return isPreregisteredUser
+}
+
+interface TimeSlotsAttributes {
+  ValidPromoCode: boolean;
+  is_access_code: boolean;
+  isPromotionsEnabled: boolean;
+}
 
 interface CartSuccess {
   skip_billing_page: boolean;
@@ -57,6 +78,7 @@ interface CartSuccess {
   hash?: string | number;
   total?: string | number;
   hasAddOn?: boolean;
+  eventSlug?: string;
 }
 
 export interface IGetTickets {
@@ -65,12 +87,16 @@ export interface IGetTickets {
   getTicketsLabel?: string;
   contentStyle?: React.CSSProperties;
   onAddToCartError: (e: AxiosError) => void;
-  onGetTicketsSuccess: (response: any) => void;
+  onGetTicketsSuccess: (response: {
+    data: { attributes: { tickets: ITicketData[] } };
+  }) => void;
   onGetTicketsPress: () => void;
   onGetTicketsError: (e: AxiosError) => void;
   onLogoutSuccess: () => void;
   onLogoutError: (e: AxiosError) => void;
-  onGetProfileDataSuccess: (response: any) => void;
+  onGetProfileDataSuccess: (response: {
+    data: { attributes: { [key: string]: string | number | boolean | null } };
+  }) => void;
   onGetProfileDataError: (e: AxiosError) => void;
   onLoginSuccess: () => void;
   handleNotInvitedModalClose: () => void;
@@ -90,7 +116,7 @@ export interface IGetTickets {
   sortBySoldOut?: boolean;
   disableCountdownLeadingZero?: boolean;
   isLoggedIn?: boolean;
-  actionsSectionComponent?: any;
+  actionsSectionComponent?: ReactNode;
   ticketsHeaderComponent?: ReactNode;
   hideTicketsHeader?: boolean;
   tableTicketsHeaderComponent?: ReactNode;
@@ -101,7 +127,7 @@ export interface IGetTickets {
   showPoweredByImage?: boolean;
   promoText?: string;
   showGroupNameBlock?: boolean;
-  currencySybmol?: string;
+  currencySymbol?: string;
   onReserveButtonClick?: () => void;
   onPendingVerification?: () => void;
   showAlertIcons?: boolean;
@@ -159,13 +185,12 @@ export const TicketsContainer = ({
   showPoweredByImage = false,
   promoText,
   showGroupNameBlock = false,
-  currencySybmol = '',
+  currencySymbol = '',
   onReserveButtonClick = _identity,
   onPendingVerification = _identity,
   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[])
@@ -180,19 +205,31 @@ export const TicketsContainer = ({
   const [codeIsInvalid, setCodeIsInvalid] = useState(false)
   const [showAccessCodeSection, setShowAccessCodeSection] = useState(isAccessCodeEnabled)
   const [showPromoCodeSection, setShowPromoCodeSection] = useState(isPromotionsEnabled)
-  const [error, setError] = useState(null)
+  const [error, setError] = useState<string | null>(null)
   const [isNotInvitedError, setIsNotInvitedError] = useState('')
   const [isInvalidLinkError, setIsInvalidLinkError] = useState('')
   const [pendingVerificationMessage, setPendingVerificationMessage] = useState()
-  const [preregistereds, setPreregistereds] = useState([] as Array<IInfluancerData>)
+  const [preregisteredUsers, setPreregisteredUsers] = useState(
+    [] as Array<IInfluencerData>
+  )
   const [ticketsNotAvailableModalOpen, setTicketsNotAvailableModalOpen] = useState(false)
-  const [isPreregistred, setIsPreregisred] = useState(checkUserPreregistration())
+  const [isPreregistered, setIsPreregistered] = useState(
+    checkUserPreregistration(preregisteredUsers)
+  )
   const ticketsContainerRef = useRef<HTMLDivElement>(null)
   const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
+  const isTimeSlotEvent = event?.isTimeSlotEvent
+  const [availableDates, setAvailableDates] = useState<string[]>([])
+  const [selectedDate, setSelectedDate] = useState<string | null>(null)
+  const [timeSlotGroups, setTimeSlotGroups] = useState<{ [key: string]: any[] }>({})
+
   useCookieListener(X_TF_ECOMMERCE, value => setIsLogged(Boolean(value)))
   useLocalStorageListener('user_data', (user: any) => {
-    const isPreregistredUser = _some(preregistereds, item => item.email === user?.email)
-    setIsPreregisred(isPreregistredUser)
+    const isPreregisteredUser = _some(
+      preregisteredUsers,
+      item => item.email === user?.email
+    )
+    setIsPreregistered(isPreregisteredUser)
   })
   usePixel(eventId, { pageUrl })
 
@@ -203,20 +240,20 @@ export const TicketsContainer = ({
   useEffect(() => {
     if (eventId) {
       getTicketsApi()
-      fetchPreregisteredsData()
+      fetchPreregisteredData()
     }
-  }, [eventId])
+  }, [eventId, isTimeSlotEvent])
 
   useEffect(() => {
-    setIsPreregisred(checkUserPreregistration())
-  }, [preregistereds])
+    setIsPreregistered(checkUserPreregistration(preregisteredUsers))
+  }, [preregisteredUsers])
 
   useEffect(() => {
     if (isLogged) {
       fetchUserData()
         .then(res => {
           window.localStorage.setItem('user_data', JSON.stringify(res))
-          onGetProfileDataSuccess(res)
+          onGetProfileDataSuccess({ data: { attributes: res } })
         })
         .catch(e => {
           if (axios.isAxiosError(e)) {
@@ -226,20 +263,8 @@ export const TicketsContainer = ({
     }
   }, [isLogged])
 
-  const handleLogout = async () => {
-    try {
-      await logout()
-      onLogoutSuccess()
-      if (isBrowser) {
-        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)
-    }
+  const handleLogout = () => {
+    logoutUser({ onLogoutError, onLogoutSuccess, setIsLogged })
   }
 
   const handleExternalLogin = () => {
@@ -258,23 +283,58 @@ export const TicketsContainer = ({
     }
   }
 
-  async function getTicketsApi(isUpdateingCode?: boolean, type?: string) {
+  const getTimeSlots = async (date: string | null, type?: string): Promise<void> => {
+    if (!date) {
+      setShowPromoCodeSection(false)
+      return
+    }
+
     try {
-      isUpdateingCode ? setCodeIsLoading(true) : setIsLoading(true)
-      const previewKey = getQueryVariable('pk') || undefined
-      const response = await getTickets(eventId, code, previewKey)
-      const eventResponse = await getEvent(eventId, previewKey)
-      if (response.success) {
-        const attributes = response?.data?.attributes
-        type === 'promo' && setCodeIsApplied(attributes.ValidPromoCode)
-        type === 'promo' && setCodeIsInvalid(!attributes.ValidPromoCode)
-        setTickets(attributes.tickets)
-        setShowWaitingList(attributes.showWaitingList)
-        onGetTicketsSuccess(response.data)
+      const timeSlotsResponse = await getTimeSlotsByDate(
+        eventId,
+        moment(date).format('YYYY-MM-DD'),
+        code
+      )
+
+      const groupedTickets: any = {}
+      _map(timeSlotsResponse.data.attributes.timeslots, (timeslots, date) => {
+        const dateKeyChunks = date.split('-')
+        const dateKey = [dateKeyChunks[0], dateKeyChunks[1], dateKeyChunks[2]].join('-')
+
+        _forEach(timeslots, ticketList => {
+          if (!groupedTickets[dateKey]) {
+            groupedTickets[dateKey] = []
+          }
+          groupedTickets[dateKey] = groupedTickets[dateKey].concat(ticketList)
+        })
+      })
+
+      setTimeSlotGroups(groupedTickets)
+      setShowPromoCodeSection(true)
+
+      const attributes: TimeSlotsAttributes = timeSlotsResponse?.data?.attributes
+
+      if (type === 'promo') {
+        setCodeIsApplied(attributes.ValidPromoCode)
+        setCodeIsInvalid(!attributes.ValidPromoCode)
         setCode('')
+        window.localStorage.setItem('appliedPromoCode', code)
         setShowAccessCodeSection(attributes.is_access_code)
         setShowPromoCodeSection(attributes.isPromotionsEnabled)
       }
+    } catch (error) {}
+  }
+
+  async function getTicketsApi(isUpdatingCode?: boolean, type?: string) {
+    try {
+      if (isUpdatingCode) {
+        setCodeIsLoading(true)
+      } else {
+        setIsLoading(true)
+      }
+
+      const previewKey = getQueryVariable('pk') || undefined
+      const eventResponse = await getEvent(eventId, previewKey)
       if (eventResponse.success) {
         const event = eventResponse.data.attributes
         setEvent(event)
@@ -282,11 +342,36 @@ export const TicketsContainer = ({
         if (event.country && isBrowser) {
           window.localStorage.setItem('eventCountry', event.country)
         }
+
+        if (event.isTimeSlotEvent) {
+          getTimeSlots(selectedDate, code)
+          // For timeslots we shouldn't fetch all tickets at once
+          setAvailableDates(event?.timeslotSettings?.availableDates ?? [])
+          return
+        }
+      }
+
+      const response = await getTickets(eventId, code, previewKey)
+
+      if (response.success) {
+        const attributes = response?.data?.attributes
+        type === 'promo' && setCodeIsApplied(attributes.ValidPromoCode)
+        type === 'promo' && setCodeIsInvalid(!attributes.ValidPromoCode)
+        setTickets(attributes.tickets)
+        setShowWaitingList(attributes.showWaitingList)
+        onGetTicketsSuccess({
+          data: { attributes: { tickets: response.data.attributes.tickets } },
+        })
+        setCode('')
+        window.localStorage.setItem('appliedPromoCode', code)
+        setShowAccessCodeSection(attributes.is_access_code)
+        setShowPromoCodeSection(attributes.isPromotionsEnabled)
       }
     } catch (e) {
       if (axios.isAxiosError(e)) {
         onGetTicketsError(e)
-        setError(_get(e, 'response.data.message'))
+        setError(_get(e, 'response.data.message', ''))
+        window.localStorage.removeItem('appliedPromoCode')
       }
     } finally {
       setIsLoading(false)
@@ -294,15 +379,15 @@ export const TicketsContainer = ({
     }
   }
 
-  async function fetchPreregisteredsData() {
+  async function fetchPreregisteredData() {
     try {
-      const preregistrationData = await getPreRegistrationInfluancers({
+      const preregistrationData = await getPreRegistrationInfluencers({
         eventId,
       })
-      setPreregistereds(preregistrationData.data.attributes.influencers)
+      setPreregisteredUsers(preregistrationData.data.attributes.influencers)
     } catch (error) {
       if (axios.isAxiosError(error)) {
-        setError(_get(error, 'response.data.message'))
+        setError(_get(error, 'response.data.message', ''))
       }
     }
   }
@@ -320,16 +405,6 @@ 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'
@@ -341,8 +416,13 @@ export const TicketsContainer = ({
   }
 
   const handleBook = async () => {
+    const timeSlotTickets = _flatten(_map(timeSlotGroups, slots => slots))
+
     setHandleBookIsLoading(true)
-    const ticket = _find(tickets, item => selectedTickets[item.id] > 0) || ({} as ITicket)
+    const ticket = event?.isTimeSlotEvent
+      ? _find(timeSlotTickets || [], item => Number(selectedTickets[item.id]) > 0) ||
+        ({} as ITicket)
+      : _find(tickets, item => Number(selectedTickets[item.id]) > 0) || ({} as ITicket)
     const optionName = _get(ticket, 'optionName')
     const ticketId = _get(ticket, 'id')
     const isTableType = _get(ticket, 'isTable', false)
@@ -375,12 +455,13 @@ export const TicketsContainer = ({
       const pageConfigsDataResponse = enableAddOns
         ? await getCheckoutPageConfigs()
         : {
-          status: 200,
-          data: { attributes: _get(result, 'data.attributes') },
-        }
+            status: 200,
+            data: { attributes: _get(result, 'data.attributes') },
+          }
 
-      if (result.status === 200 && pageConfigsDataResponse.status === 200) {
-        const pageConfigsData = _get(pageConfigsDataResponse, 'data.attributes') || {}
+      if (pageConfigsDataResponse.status === 200) {
+        const pageConfigsData: any =
+          _get(pageConfigsDataResponse, 'data.attributes') || {}
 
         const skipBillingPage = pageConfigsData.skip_billing_page ?? false
         const hasAddOn = pageConfigsData.has_add_on ?? false
@@ -395,7 +476,7 @@ export const TicketsContainer = ({
           // Get user data for checkout data
           const userData =
             isBrowser && window.localStorage.getItem('user_data')
-              ? JSON.parse(window.localStorage.getItem('user_data') || '')
+              ? JSON.parse(window.localStorage.getItem('user_data') || '{}')
               : {}
 
           const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
@@ -417,11 +498,13 @@ export const TicketsContainer = ({
           hash,
           total,
           hasAddOn,
+          eventSlug: event?.slug,
         })
       }
     } catch (e) {
-      if (e.response?.data?.data?.hasUnverifiedOrder) {
-        setPendingVerificationMessage(e.response?.data?.message)
+      const errorResponse: any = _get(e, 'response', {})
+      if (errorResponse?.data?.data?.hasUnverifiedOrder) {
+        setPendingVerificationMessage(errorResponse?.data?.message)
       } else if (axios.isAxiosError(e)) {
         onAddToCartError(e)
         const message = _get(e, 'response.data.message', '')
@@ -447,8 +530,8 @@ export const TicketsContainer = ({
     }
   }
 
-  const updateTickets = (isUpdateingCode?: boolean, type?: string) => {
-    getTicketsApi(isUpdateingCode, type)
+  const updateTickets = (isUpdatingCode?: boolean, type?: string) => {
+    getTicketsApi(isUpdatingCode, type)
   }
 
   const fetchUserData = async () => {
@@ -458,11 +541,15 @@ export const TicketsContainer = ({
     return profileDataObj
   }
 
-  const isTicketOnSale = _some(
-    tickets,
-    item =>
-      (item.salesStarted || event?.presalesStarted) && !item.salesEnded && !item.soldOut
-  )
+  const isTicketOnSale = event?.isTimeSlotEvent
+    ? true
+    : _some(
+        tickets,
+        item =>
+          (item.salesStarted || event?.presalesStarted) &&
+          !item.salesEnded &&
+          !item.soldOut
+      )
 
   const eventHasTickets = !_isEmpty(tickets)
   const isSalesClosed = event?.salesEnded
@@ -483,7 +570,7 @@ export const TicketsContainer = ({
     if (
       !handleBookIsLoading &&
       !_isEmpty(selectedTickets) &&
-      Object.values(selectedTickets)[0] > 0
+      Number(Object.values(selectedTickets)[0]) > 0
     ) {
       handleBook()
     } else {
@@ -519,10 +606,10 @@ export const TicketsContainer = ({
 
   const wrappedActionsSectionComponent = React.isValidElement(ActionsSectionComponent)
     ? React.cloneElement(ActionsSectionComponent as React.ReactElement<any>, {
-      handleGetTicketClick,
-      isTicketOnSale,
-      isTicketAvailable,
-    })
+        handleGetTicketClick,
+        isTicketOnSale,
+        isTicketAvailable,
+      })
     : null
 
   const externalUrl = event?.redirectUrl
@@ -564,16 +651,17 @@ export const TicketsContainer = ({
   )}. \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
+  const ordinaryTickets = {} as ITicket
   _forEach(tickets, (ticket: any, key: string) => {
     if (!ticket.isTable) {
-      ordinarTickets[key] = ticket
+      ordinaryTickets[key] = ticket
     }
   })
+
   return (
     <ThemeProvider theme={themeMui}>
       {!isLoading && <ReferralLogic eventId={eventId} />}
-      <div className={`get-tickets-page ${theme}`} style={contentStyle}>
+      <div className={`get-tickets-page ${theme} open-ground`} style={contentStyle}>
         {isInvalidLinkError && (
           <ConfirmModal
             message={isInvalidLinkError}
@@ -588,7 +676,7 @@ export const TicketsContainer = ({
             message={isNotInvitedError}
             onClose={() => onClose('notInvited')}
             onConfirm={() => onClose('notInvited')}
-          // loading={removeFromResaleLoading}
+            // loading={removeFromResaleLoading}
           />
         )}
         {error && (
@@ -612,11 +700,31 @@ export const TicketsContainer = ({
         {isLoading ? (
           <Loader />
         ) : (
-          <div ref={ticketsContainerRef}>
-            {!isSalesClosed && (
+          <div ref={ticketsContainerRef} className="tickets-section-container">
+            {isTimeSlotEvent && (
+              <TimeSlotsSection
+                event={event}
+                eventId={eventId}
+                availableDates={availableDates}
+                selectedDate={selectedDate}
+                setSelectedDate={setSelectedDate}
+                timeSlotGroups={timeSlotGroups}
+                setTimeSlotGroups={setTimeSlotGroups}
+                selectedTickets={selectedTickets}
+                handleTicketSelect={handleTicketSelect}
+                sortBySoldOut={sortBySoldOut}
+                ticketsHeaderComponent={ticketsHeaderComponent}
+                hideTicketsHeader={hideTicketsHeader}
+                showGroupNameBlock={showGroupNameBlock}
+                currencySymbol={currencySymbol}
+                isSeatMapAllowed={isSeatMapAllowed}
+                getTimeSlots={getTimeSlots}
+              />
+            )}
+            {!isSalesClosed && !isTimeSlotEvent && (
               <TicketsSection
                 event={event}
-                ticketsList={ordinarTickets}
+                ticketsList={ordinaryTickets}
                 tableTickets={tableTickets}
                 selectedTickets={selectedTickets}
                 handleTicketSelect={handleTicketSelect}
@@ -624,15 +732,17 @@ export const TicketsContainer = ({
                 ticketsHeaderComponent={ticketsHeaderComponent}
                 tableTicketsHeaderComponent={tableTicketsHeaderComponent}
                 hideTableTicketsHeader={hideTableTicketsHeader || _isEmpty(tableTickets)}
-                hideTicketsHeader={hideTicketsHeader || _isEmpty(ordinarTickets)}
+                hideTicketsHeader={hideTicketsHeader || _isEmpty(ordinaryTickets)}
                 showGroupNameBlock={showGroupNameBlock}
-                currencySybmol={currencySybmol}
+                currencySymbol={currencySymbol}
                 isSeatMapAllowed={isSeatMapAllowed}
               />
             )}
             {externalUrl ? null : isSalesClosed ? (
               <p
-                className={`event-closed-message ${!isLoggedIn ? 'event-closed-on-bottom' : ''}`}
+                className={`event-closed-message ${
+                  !isLoggedIn ? 'event-closed-on-bottom' : ''
+                }`}
               >
                 Sales for this event are closed.
               </p>
@@ -650,7 +760,7 @@ export const TicketsContainer = ({
             ) : null}
             {showWaitingList && event.salesStarted && !hideWaitingList && (
               <WaitingList
-                tickets={ordinarTickets}
+                tickets={ordinaryTickets}
                 eventId={eventId}
                 defaultMaxQuantity={event.waitingListMaxQuantity}
               />
@@ -682,16 +792,16 @@ export const TicketsContainer = ({
             {canShowGetTicketBtn() && (
               <Button
                 aria-hidden={true}
-                className={`book-button 
-                  ${bookButtonIsDisabled ? 'disabled' : ''}  
+                className={`book-button
+                  ${bookButtonIsDisabled ? 'disabled' : ''}
                   ${isButtonScrollable ? 'is-scrollable' : ''}
                   ${!isLoggedIn ? 'on-bottom' : ''}
                 `}
                 onClick={
                   event?.salesStart &&
-                    event?.presalesStarted &&
-                    !event?.presalesEnded &&
-                    (!isPreregistred || !isLogged)
+                  event?.presalesStarted &&
+                  !event?.presalesEnded &&
+                  (!isPreregistered || !isLogged)
                     ? handleNotAvailableTicketsClick
                     : handleGetTicketClick
                 }

package/src/components/timerWidget/index.tsx

@@ -3,6 +3,7 @@ import './style.css'
 import _identity from 'lodash/identity'
 import React, { memo, useState } from 'react'
 import Countdown from 'react-countdown'
+import ReactDOM from 'react-dom'
 import SVG from 'react-inlinesvg'
 
 import Cross from '../../assets/images/cross.svg'
@@ -12,6 +13,7 @@ export interface ITimerWidgetPage {
   expires_at: number;
   buyLoading?: boolean;
   onCountdownFinish?: () => void;
+  container?: string;
 }
 
 export interface IRenderer {
@@ -25,6 +27,7 @@ const TimerWidget = ({
   expires_at,
   buyLoading,
   onCountdownFinish = _identity,
+  container,
 }: ITimerWidgetPage) => {
   const [showTimer, setShowTimer] = useState(true)
 
@@ -59,9 +62,9 @@ const TimerWidget = ({
     }
   }
 
-  return showTimer && !!expires_at ? (
+  const timerComponent = (
     <div className="timer">
-      <div className="close-icon" onClick={hideTimer}>
+      <div aria-hidden className="close-icon" onClick={hideTimer}>
         <SVG src={Cross} width="10" height="10" fill="#fff" />
       </div>
       <div className="toast-message">
@@ -79,7 +82,16 @@ const TimerWidget = ({
         </p>
       </div>
     </div>
-  ) : null
+  )
+
+  return showTimer && !!expires_at
+    ? container
+      ? ReactDOM.createPortal(
+          timerComponent,
+          document.querySelector(container) as HTMLElement
+        )
+      : timerComponent
+    : null
 }
 
 export default memo(TimerWidget)

package/src/constants/index.ts

@@ -1 +1,3 @@
 export const X_TF_ECOMMERCE = 'X-TF-ECOMMERCE'
+export const FEES_STYLES = { TRADITIONAL: 'TRADITIONAL', DISPLAY_BOTH: 'DISPLAY_BOTH' }
+export const DEFAULT_FEES_STYLE = FEES_STYLES.TRADITIONAL