tf-checkout-react 1.3.50 → 1.4.0

package/src/components/ticketsContainer/TicketRow.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
 import './style.css'
-import _has from 'lodash/has'
-import _get from 'lodash/get'
+
 import Box from '@mui/material/Box'
 import FormControl from '@mui/material/FormControl'
 import MenuItem from '@mui/material/MenuItem'
 import Select from '@mui/material/Select'
+import _get from 'lodash/get'
+import React from 'react'
 
 import { getTicketSelectOptions } from './utils'
 
@@ -14,6 +14,8 @@ interface ITicketRowProps {
   prevTicketTier: any;
   selectedTickets: any;
   handleTicketSelect: any;
+  isSeatMapAllowed?: any;
+  tableType?: boolean;
 }
 
 export const TicketRow = ({
@@ -21,26 +23,31 @@ export const TicketRow = ({
   prevTicketTier,
   selectedTickets,
   handleTicketSelect,
+  isSeatMapAllowed,
+  tableType,
 }: ITicketRowProps) => {
   const soldOutMessage = ticketTier.soldOutMessage
     ? `${ticketTier.soldOutMessage}`.toUpperCase()
     : 'SOLD OUT'
   const isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded
-  const options = getTicketSelectOptions(
-    ticketTier.maxQuantity,
-    ticketTier.minQuantity,
-    ticketTier.multiplier
-  )
-  const ticketsClosedMessage = !ticketTier.salesStarted ?  'Sales not started' : 'Sales Ended'
+  const maxCount = tableType ? ticketTier.maxGuests : ticketTier.maxQuantity
+  const minCount = tableType ? ticketTier.minGuests : ticketTier.minQuantity
+  const { multiplier } = ticketTier
+  const options = getTicketSelectOptions(maxCount, minCount, multiplier)
+
+  const ticketsClosedMessage = !ticketTier.salesStarted
+    ? 'Sales not started'
+    : 'Sales Ended'
+  const canPurchaseTicket = ticketTier.displayTicket && ticketTier.maxQuantity
+  const isDirectPurchaseAllowed = _get(ticketTier, 'allowDirectPurchase', false)
 
   const onSaleContent = (
     <div className="get-tickets">
+      {ticketTier.isTable && <span>GUESTS</span>}
       <Box className="get-tickets__selectbox">
         <FormControl fullWidth>
           <Select
-            sx={{
-              borderRadius: 0,
-            }}
+            sx={{ borderRadius: 0 }}
             value={
               selectedTickets[ticketTier.id]
                 ? selectedTickets[ticketTier.id]
@@ -68,6 +75,7 @@ export const TicketRow = ({
   )
 
   let returnValue: any = ''
+
   // ticketTier.soldOut === false --> means that ticket is in the stock
   const isSoldOut =
     ticketTier.sold_out ||
@@ -79,7 +87,14 @@ export const TicketRow = ({
     returnValue = soldOutMessage
   } else if (isSalesClosed) {
     returnValue = ticketsClosedMessage
-  } else if (ticketTier.displayTicket && ticketTier.maxQuantity) {
+  } else if (
+    canPurchaseTicket &&
+    isSeatMapAllowed &&
+    !isDirectPurchaseAllowed
+  ) {
+    // Seat Map Tickets renderer logic
+    returnValue = null
+  } else if (canPurchaseTicket) {
     returnValue = onSaleContent
   } else if (_get(prevTicketTier, 'in_stock')) {
     returnValue = 'SOON'

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -12,10 +12,13 @@ interface ITicketsSectionProps {
   handleTicketSelect: any;
   sortBySoldOut: boolean;
   hideTicketsHeader: boolean;
-
+  hideTableTicketsHeader: boolean;
+  tableTickets: any;
   ticketsHeaderComponent?: ReactNode;
+  tableTicketsHeaderComponent?: ReactNode;
   showGroupNameBlock?: boolean;
   currencySybmol?: string;
+  isSeatMapAllowed?: boolean;
 }
 
 export const TicketsSection = ({
@@ -25,9 +28,13 @@ export const TicketsSection = ({
   handleTicketSelect,
   sortBySoldOut,
   ticketsHeaderComponent,
+  tableTicketsHeaderComponent,
   hideTicketsHeader,
+  hideTableTicketsHeader,
   showGroupNameBlock,
   currencySybmol,
+  isSeatMapAllowed,
+  tableTickets,
 }: ITicketsSectionProps) => {
   const {
     currency: { symbol },
@@ -37,7 +44,6 @@ export const TicketsSection = ({
     : _sortBy(ticketsList, 'sortOrder')
   const showGroup = !!sortedTicketsList.find(ticket => ticket.groupName)
   const priceSymbol = currencySybmol ? currencySybmol : symbol
-
   return (
     <>
       {!hideTicketsHeader && ticketsHeaderComponent}
@@ -108,6 +114,83 @@ export const TicketsSection = ({
           </React.Fragment>
         )
       })}
+      {!hideTableTicketsHeader && tableTicketsHeaderComponent}
+      {tableTickets.map((ticket: any, i: any, arr: any) => {
+        const ticketPrice = `${priceSymbol} ${(+ticket.price).toFixed(2)}`
+        const ticketOldPrice = `${priceSymbol} ${(+ticket.oldPrice).toFixed(2)}`
+
+        const isSoldOut =
+          ticket.sold_out || !ticket.displayTicket || ticket.soldOut
+        const ticketSelect = (event: any) => {
+          const { value } = event.target
+          handleTicketSelect(ticket.id, value, true)
+        }
+
+        let ticketIsDiscounted = false
+        if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
+          ticketIsDiscounted = true
+        }
+
+        const ticketIsFree = +ticket.price === 0
+        const ticketPriceElem = isSoldOut
+          ? 'SOLD OUT'
+          : ticketIsFree
+          ? 'FREE'
+          : ticketPrice
+        const isNewGroupTicket = ticket?.groupName !== arr[i - 1]?.groupName
+
+        return (
+          <>
+            <React.Fragment key={ticket.id || ticket.name}>
+              {showGroupNameBlock && showGroup && isNewGroupTicket ? (
+                <div className="event-detail__tier group-title">
+                  {ticket.groupName || ''}
+                </div>
+              ) : null}
+              <div
+                className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}
+              >
+                <div className="event-detail__tier-name">
+                  {ticket.displayName || ticket.name}
+                </div>
+                <div className="event-tickets-container">
+                  <div className="event-detail__tier-price">
+                    {ticketIsDiscounted && (
+                      <p className="old-price">{ticketOldPrice}</p>
+                    )}
+                    <p className={isSoldOut ? 'sold-out' : ''}>
+                      {ticketPriceElem}
+                    </p>
+                    {!isSoldOut && !ticketIsFree && (
+                      <p className="fees">
+                        {ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}
+                      </p>
+                    )}
+                    {ticket.depositPercent && (
+                      <p className="deposits">
+                        {ticket.depositPercent + '% DEPOSIT'}
+                      </p>
+                    )}
+                  </div>
+                  <div
+                    className="event-detail__tier-state"
+                    style={{ minWidth: 55 }}
+                  >
+                    <TicketRow
+                      tableType={true}
+                      ticketTier={ticket}
+                      prevTicketTier={arr[i - 1]}
+                      selectedTickets={selectedTickets}
+                      handleTicketSelect={ticketSelect}
+                      isSeatMapAllowed={isSeatMapAllowed}
+                    />
+                  </div>
+                </div>
+              </div>
+            </React.Fragment>
+          </>
+        )
+      })}
     </>
   )
 }

package/src/components/ticketsContainer/index.tsx

@@ -6,7 +6,9 @@ import { ThemeProvider } from '@mui/private-theming'
 import { CSSProperties } from '@mui/styles'
 import axios, { AxiosError } from 'axios'
 import jwt_decode from 'jwt-decode'
+import _filter from 'lodash/filter'
 import _find from 'lodash/find'
+import _forEach from 'lodash/forEach'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _includes from 'lodash/includes'
@@ -95,6 +97,8 @@ export interface IGetTickets {
   actionsSectionComponent?: any;
   ticketsHeaderComponent?: ReactNode;
   hideTicketsHeader?: boolean;
+  tableTicketsHeaderComponent?: ReactNode;
+  hideTableTicketsHeader?: boolean;
   enableInfluencersSection?: boolean;
   enableAddOns?: boolean;
   ordersPath?: string;
@@ -102,6 +106,7 @@ export interface IGetTickets {
   promoText?: string;
   showGroupNameBlock?: boolean;
   currencySybmol?: string;
+  onReserveButtonClick?: () => void;
   onPendingVerification?: () => void;
 }
 
@@ -114,7 +119,8 @@ interface IInfluencer {
   [key: string]: string | undefined;
 }
 export interface ISelectedTickets {
-  [key: string]: string | number;
+  isTable: boolean;
+  [key: string]: string | number | boolean;
 }
 
 export const TicketsContainer = ({
@@ -145,6 +151,8 @@ export const TicketsContainer = ({
   actionsSectionComponent: ActionsSectionComponent,
   ticketsHeaderComponent,
   hideTicketsHeader = false,
+  tableTicketsHeaderComponent,
+  hideTableTicketsHeader = false,
   enableInfluencersSection = true,
   enableAddOns = true,
   handleNotInvitedModalClose = _identity,
@@ -154,6 +162,7 @@ export const TicketsContainer = ({
   promoText,
   showGroupNameBlock = false,
   currencySybmol = '',
+  onReserveButtonClick = _identity,
   onPendingVerification = _identity,
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState({} as ISelectedTickets)
@@ -290,13 +299,18 @@ export const TicketsContainer = ({
     }
   }
 
-  const handleTicketSelect = (key: string, value: number | string) => {
+  const handleTicketSelect = (
+    key: string,
+    value: number | string,
+    isTable = false
+  ) => {
     setSelectedTickets(prevState => {
       if (Object.keys(prevState)[0] !== key && !value) {
         return prevState
       }
       return {
         [key]: value,
+        isTable,
       }
     })
   }
@@ -317,12 +331,14 @@ export const TicketsContainer = ({
       _find(tickets, item => selectedTickets[item.id] > 0) || ({} as ITicket)
     const optionName = _get(ticket, 'optionName')
     const ticketId = _get(ticket, 'id')
-    const ticketQuantity = +selectedTickets[ticket.id]
+    const isTableType = _get(ticket, 'isTable', false)
+    const productCartQuantity = +selectedTickets[ticket.id]
+    const ticketQuantity = isTableType ? 1 : +selectedTickets[ticket.id]
 
     const data = {
       attributes: {
         alternative_view_id: null,
-        product_cart_quantity: ticketQuantity,
+        product_cart_quantity: productCartQuantity,
         product_options: {
           [optionName]: ticketId,
         },
@@ -496,9 +512,10 @@ export const TicketsContainer = ({
   }
 
   const bookButtonIsDisabled =
-    handleBookIsLoading ||
-    _isEmpty(selectedTickets) ||
-    Object.values(selectedTickets)[0] === 0
+    (handleBookIsLoading ||
+      _isEmpty(selectedTickets) ||
+      Object.values(selectedTickets)[0] === 0) &&
+    !event?.flagSeatMapAllowed
 
   const isTicketAvailable = _some(
     tickets,
@@ -543,8 +560,17 @@ export const TicketsContainer = ({
     setIsNotInvitedError('')
     setIsInvalidLinkError('')
   }
-
   const hideTopInfluencers = event?.hideTopInfluencers
+  const isSeatMapAllowed = _get(event, 'seatMapAllowed', false)
+  const isTableMapEnabled = _get(event, 'tableMapEnabled', false)
+
+  const tableTickets = _filter(tickets, (ticket: any) => ticket.isTable)
+  const ordinarTickets = {} as ITicket
+  _forEach(tickets, (ticket: any, key: string) => {
+    if (!ticket.isTable) {
+      ordinarTickets[key] = ticket
+    }
+  })
 
   return (
     <ThemeProvider theme={themeMui}>
@@ -584,14 +610,22 @@ export const TicketsContainer = ({
             {!isSalesClosed && (
               <TicketsSection
                 event={event}
-                ticketsList={tickets}
+                ticketsList={ordinarTickets}
+                tableTickets={tableTickets}
                 selectedTickets={selectedTickets}
                 handleTicketSelect={handleTicketSelect}
                 sortBySoldOut={sortBySoldOut}
                 ticketsHeaderComponent={ticketsHeaderComponent}
-                hideTicketsHeader={hideTicketsHeader || _isEmpty(tickets)}
+                tableTicketsHeaderComponent={tableTicketsHeaderComponent}
+                hideTableTicketsHeader={
+                  hideTableTicketsHeader || _isEmpty(tableTickets)
+                }
+                hideTicketsHeader={
+                  hideTicketsHeader || _isEmpty(ordinarTickets)
+                }
                 showGroupNameBlock={showGroupNameBlock}
                 currencySybmol={currencySybmol}
+                isSeatMapAllowed={isSeatMapAllowed}
               />
             )}
             {externalUrl ? null : isSalesClosed ? (
@@ -616,7 +650,7 @@ export const TicketsContainer = ({
             ) : null}
             {showWaitingList && event.salesStarted && !hideWaitingList && (
               <WaitingList
-                tickets={tickets}
+                tickets={ordinarTickets}
                 eventId={eventId}
                 defaultMaxQuantity={event.waitingListMaxQuantity}
               />
@@ -654,7 +688,18 @@ export const TicketsContainer = ({
                 `}
                 onClick={handleGetTicketClick}
               >
-                {getTicketsLabel || 'GET TICKETS'}
+                {selectedTickets.isTable
+                  ? 'RESERVE TABLES'
+                  : getTicketsLabel || 'GET TICKETS'}
+              </Button>
+            )}
+            {isSeatMapAllowed && !event?.salesEnded && isTicketAvailable && (
+              <Button
+                className="reserve-button"
+                aria-hidden={true}
+                onClick={onReserveButtonClick}
+              >
+                {isTableMapEnabled ? 'Select on map' : 'Select your seats'}
               </Button>
             )}
             {isLogged && !hideSessionButtons ? (

package/src/components/ticketsContainer/style.css

@@ -2,9 +2,6 @@ body {
   margin: 0;
   padding: 0;
 }
-.get-tickets-page {
-  width: 100%;
-}
 .event-detail__tier {
   padding: 17px 35px 20px;
   background-color: #fff;

package/src/hooks/usePixel.ts

@@ -32,6 +32,33 @@ function appendScriptsToHeader(code: string) {
   }
 }
 
+const addGTagToHeader = (tagId?: string, links?: string[]) => {
+  if (document?.head && document?.body && tagId) {
+    const script = document.createElement('script')
+    script.innerHTML = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','${tagId}');`.trim()
+    document.head.append(script)
+
+    const scriptBody = document.createElement('noscript')
+    scriptBody.innerHTML = `<iframe src="https://www.googletagmanager.com/ns.html?id=${tagId}"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe>`
+    document.body.append(scriptBody);
+
+    (window as any).dataLayer = (window as any).dataLayer || [];
+    (window as any).gtag = function gtag(...args: any){(window as any).dataLayer.push(args)}
+    if (links) {
+      (window as any)?.gtag('set', 'linker', {
+        'domains': links
+      })
+    }
+    (window as any).gtag('js', new Date());
+    (window as any).gtag('config', tagId)
+  }
+}
+
 export const usePixel = async (
   eventId: string | number,
   options: pageOptions
@@ -43,6 +70,13 @@ export const usePixel = async (
       const response = await getPixelScript(eventId, options)
       const pixels = _get(response, 'data.data.attributes.pixels', '')
       appendScriptsToHeader(pixels)
+      const brandGoogleTagKey = _get(response, 'data.data.attributes.brandGoogleTagKey', '')
+      const eventGoogleTagKey = _get(response, 'data.data.attributes.eventGoogleTagKey', '')
+      const eventGoogleTagManagerLinkerDomains = _get(response, 'data.data.attributes.eventGoogleTagManagerLinkerDomains', '')
+      addGTagToHeader(brandGoogleTagKey, eventGoogleTagManagerLinkerDomains)
+      if (eventGoogleTagKey) {
+        addGTagToHeader(eventGoogleTagKey, eventGoogleTagManagerLinkerDomains)
+      }
     } catch (e) {
       console.error(e)
     }
@@ -51,4 +85,4 @@ export const usePixel = async (
   useEffect(() => {
     getScript()
   }, [eventId])
-}
+}

package/src/index.ts

@@ -17,5 +17,6 @@ export { ResetPasswordContainer } from './components/resetPasswordContainer'
 export { ForgotPasswordModal } from './components/forgotPasswordModal'
 export { AddonsContainter } from './components/addonsContainer'
 export { PoweredBy } from './components/common/PoweredBy'
+export { SeatMapContainer } from './components/seatMapContainer'
 export { IDVerification } from './components/idVerificationContainer'
-export { VERIFICATION_STATUSES } from './components/idVerificationContainer/constants'
+export { VERIFICATION_STATUSES } from './components/idVerificationContainer/constants'

package/src/types/order-data.ts

@@ -1,11 +1,14 @@
 import { IAddOn } from './add_on'
 
 export interface IOrderData {
+  id: string;
   product_name: string;
   ticketType: string;
   quantity: string;
   price: string;
   total: string;
   currency: string;
+  guest_count: string;
+  pay_now: string;
   add_ons: IAddOn[];
 }

package/src/types/seatMap.d.ts

@@ -0,0 +1,154 @@
+interface SeatMapResponse {
+  data: any;
+  success: boolean;
+  error: boolean;
+  message: string;
+  status: number;
+}
+
+interface IMapContainerProps {
+  event: any;
+  mapContainerId?: string;
+  timerMessage?: string | Node;
+  onAddToCartSuccess?: (data: any) => void;
+  onCountdownFinish?: any;
+  ticketDeleteButtonContent?: string | Node;
+}
+
+interface ISeatMapContainerProps {
+  seatMapProps: {
+    seatData: any;
+    statuses: any;
+    seatMapEvents: any;
+    seatMapType: string | null;
+    ticketTypeTierRelations: any;
+    tierPrices: any;
+    isReserving: boolean;
+    predefinedSeats: any;
+  };
+  loading?: boolean;
+  mapContainerId?: string;
+}
+
+interface SeatMapResponseData {
+  attributes: any;
+  relationships: any[];
+  type: string;
+}
+
+interface TicketTypeTierRelationsData {
+  ticket_type_id: string;
+  ticket_type_deposit: string;
+  ticket_type_max_number_of_guests: string;
+  ticket_type_min_number_of_guests: string;
+  ticket_type_tier_id: number;
+  ticket_type_name: string;
+  ticket_type_option: string;
+  ticket_type_price: number;
+  ticket_quantity: number;
+  multiplier: number;
+  sort_order: string;
+  ticket_quantity_limit_type: string;
+  guest_price: string;
+}
+
+interface TicketTypeTierRelations {
+  [key: string]: {
+    [key: string]: TicketTypeTierRelationsData;
+  };
+}
+
+interface SeatMapDataAttributes {
+  seatMapType: string | null;
+  seatReservationTime: number;
+  ticketTypeTierRelations: TicketTypeTierRelations;
+  tierNames: {
+    [key: string]: string;
+  };
+  tierPrices: {
+    [key: string]: string;
+  };
+  seatData: string;
+  eventSeats: EventSeat[];
+  predefinedSeats: any;
+}
+
+interface SeatMapData extends SeatMapResponseData {
+  attributes: SeatMapDataAttributes;
+}
+
+interface SeatMapStatuses extends SeatMapResponseData {
+  attributes: any;
+}
+
+interface SeatMapDataResponse extends SeatMapResponse {
+  data: SeatMapData;
+}
+
+interface SeatMapStatusesResponse extends SeatMapResponse {
+  data: SeatMapStatuses;
+}
+
+interface ISeatMapContainerProps {
+  seatMapProps: {
+    seatData: any;
+    statuses: any;
+    seatMapEvents: any;
+    seatMapType?: string;
+    ticketTypeTierRelations: any;
+    isReserving: boolean;
+    predefinedSeats: any;
+  };
+  mapContainerId?: string;
+}
+
+interface SeatReservationData {
+  seatId: string;
+  tierId: string;
+  type: string;
+}
+
+interface EventSeat {
+  label: string;
+  ticket_type_id: Array<string>;
+  seats: any;
+  ticketing_engine_id: number | string;
+  tier_id: number | string;
+  seats: {
+    [key: string]: number;
+  };
+}
+
+interface ITicketsSectionProps {
+  ticketTypeTierRelations: TicketTypeTierRelations;
+  reservedSeats: Array<SeatReservationData>;
+  handleCancelReservation: any;
+  isAddingToCart: boolean;
+  handleGetTicketClick: any;
+  currencySymbol: string;
+  handleTicketSelect: any;
+  selectedTickets: { [seatId: string]: string };
+
+  theme?: 'light' | 'dark';
+  getTicketsBtnLabel?: string;
+  contentStyle?: React.CSSProperties;
+  isButtonScrollable?: boolean;
+  ticketDeleteButtonContent?: string | Node;
+  tableMapEnabled?: boolean;
+
+  guestCounts?: any;
+  setGuestCounts?: any;
+}
+
+interface ITicketDropdownOption {
+  ticket_type_tier_id: number | string;
+  ticket_type_name: string;
+  ticket_type_price: number | string;
+  ticket_type_id: string;
+}
+
+interface ITicketsDropdownsData {
+  seatId: string;
+  tierId: string;
+  ticketsData: Array<ITicketDropdownOption | TicketTypeTierRelationsData>;
+}

package/src/utils/createCheckoutDataBodyWithDefaultHolder.ts

@@ -1,8 +1,12 @@
 import _get from 'lodash/get'
 
+type Type1 = string | number | null | undefined
 interface ICheckoutBody {
   attributes: {
-    [key: string]: any;
+    [key: string]:
+      | Type1
+      | Record<string | number, Type1>
+      | Array<Type1 | IticketHolder>;
   };
 }
 
@@ -21,7 +25,7 @@ interface IUserCredentialsValues {
 
 export const createCheckoutDataBodyWithDefaultHolder = (
   ticketsQuantity: number,
-  logedInValues: {},
+  logedInValues: Record<string, string | undefined>,
   includeDob = false,
   userCredentials: IUserCredentialsValues = {}
 ): ICheckoutBody => {