tf-checkout-react 1.7.31 → 2.0.0-beta.1

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -1,116 +0,0 @@
-import React from 'react'
-import Button from 'react-bootstrap/Button'
-import SVG from 'react-inlinesvg'
-
-import DoneSvg from '../../assets/images/done.svg'
-import XmarkSvg from '../../assets/images/xmark.svg'
-
-export interface IPromoCodeSectionProps {
-  code: string;
-  codeIsApplied: boolean;
-  showPromoInput: boolean;
-  setCode: (value: string) => void;
-  setShowPromoInput: (value: boolean) => void;
-  updateTickets: (value: boolean, type: string) => void;
-  setCodeIsApplied: (value: boolean) => void;
-  codeIsInvalid: boolean;
-  setCodeIsInvalid: (value: boolean) => void;
-  promoText?: string;
-  showAlertIcons?: boolean;
-}
-
-export const PromoCodeSection = ({
-  code,
-  codeIsApplied,
-  showPromoInput,
-  setCode,
-  setShowPromoInput,
-  updateTickets,
-  setCodeIsApplied,
-  codeIsInvalid,
-  setCodeIsInvalid,
-  promoText,
-  showAlertIcons
-}: IPromoCodeSectionProps) => {
-  const isPromoCodeHasValue = !!code.trim()
-  const appliedPromoCode = window?.localStorage?.getItem('appliedPromoCode')
-
-  const renderInputField = () => (
-    <div className="promo-code-block">
-      <div className="promo-code-block">
-        <p className="promo-code-text">Promo code</p>
-      </div>
-      <input
-        className="promo-code-input"
-        placeholder=""
-        onChange={e => {
-          setCode(e.target.value)
-        }}
-        onKeyPress={event => {
-          if (event.key === 'Enter' && isPromoCodeHasValue) {
-            setShowPromoInput(false)
-            updateTickets(true, 'promo')
-          }
-        }}
-      />
-      <Button
-        className="promo-submit-button"
-        onClick={() => {
-          if (isPromoCodeHasValue) {
-            setShowPromoInput(false)
-            updateTickets(true, 'promo')
-          }
-        }}
-      >
-        APPLY
-      </Button>
-    </div>
-  )
-
-  return (
-    <div>
-      {codeIsApplied ? (
-        <div className="alert-info">
-          {showAlertIcons && (
-            <SVG
-              src={DoneSvg}
-              preProcessor={code =>
-                code.replace(/fill=".*?"/g, 'fill="currentColor"')
-              }
-            />
-          )}
-          <p className="promo-code-success">PROMO CODE APPLIED SUCCESSFULLY</p>
-        </div>
-      ) : null}
-      {codeIsApplied ? (
-        <div className="alert-info">
-          <p className="promo-code-success">PROMO CODE: {appliedPromoCode}</p>
-        </div>
-      ) : null}
-      {codeIsInvalid ? (
-        <div className="alert-info fail">
-          {showAlertIcons && (
-            <SVG
-              src={XmarkSvg}
-            />
-          )}
-          <p className="promo-code-fail">Invalid Promo Code</p>
-        </div>
-      ) : null}
-      {!showPromoInput && (
-        <Button
-          className="promo-code-button"
-          placeholder="Promo Codes"
-          onClick={() => {
-            setCodeIsApplied(false)
-            setShowPromoInput(true)
-            setCodeIsInvalid(false)
-          }}
-        >
-          {promoText ?? 'Got a promo code? Click here'}
-        </Button>
-      )}
-      {showPromoInput && renderInputField()}
-    </div>
-  )
-}

package/src/components/ticketsContainer/ReferralLogic.tsx

@@ -1,33 +0,0 @@
-import { useEffect } from 'react'
-
-import { postReferralVisits } from '../../api'
-
-interface IReferralLogicProps {
-  eventId: string | number;
-}
-
-export const ReferralLogic = (props: IReferralLogicProps) => {
-  const { eventId } = props
-
-  useEffect(() => {
-    const isWindowDefined = typeof window !== 'undefined'
-
-    if (isWindowDefined) {
-      const params: URLSearchParams = new URL(`${window.location}`).searchParams
-      const referralId = params.get('ttf_r') || params.get('referrer_id') || ''
-      const referralValue = [eventId, '.', referralId].join('')
-      const isAlreadyCounted = localStorage.getItem('referral_key') === referralValue
-
-      if (referralId && eventId && !isAlreadyCounted) {
-        (async () => {
-          try {
-            await postReferralVisits(`${eventId}`, referralId)
-            localStorage.setItem('referral_key', referralValue)
-          } catch (error) {}
-        })()
-      }
-    }
-  }, [eventId])
-
-  return null
-}

package/src/components/ticketsContainer/TicketRow.tsx

@@ -1,107 +0,0 @@
-import './style.css'
-
-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 { defineIsSalesClosed, getTicketSelectOptions } from './utils'
-
-interface ITicketRowProps {
-  ticketTier: any;
-  prevTicketTier: any;
-  selectedTickets: any;
-  handleTicketSelect: any;
-  event: any;
-  isSeatMapAllowed?: boolean;
-  tableType?: boolean;
-}
-
-export const TicketRow = ({
-  ticketTier,
-  prevTicketTier,
-  selectedTickets,
-  handleTicketSelect,
-  event,
-  isSeatMapAllowed,
-  tableType,
-}: ITicketRowProps) => {
-  const soldOutMessage = ticketTier.soldOutMessage
-    ? `${ticketTier.soldOutMessage}`.toUpperCase()
-    : 'SOLD OUT'
-  const isSalesClosed = defineIsSalesClosed({
-    salesStarted: ticketTier.salesStarted,
-    salesEnded: ticketTier.salesEnded,
-    presalesStarted: event?.presalesStarted,
-    presalesEnded: event?.presalesEnded,
-    presalesEnabled: event?.presales_enabled,
-  })
-  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 }}
-            value={selectedTickets[ticketTier.id] ? selectedTickets[ticketTier.id] : 0}
-            onChange={handleTicketSelect}
-            displayEmpty
-            inputProps={{ 'aria-label': 'Without label' }}
-            MenuProps={{
-              PaperProps: {
-                sx: { maxHeight: 150 },
-                className: 'get-tickets-paper',
-              },
-            }}
-          >
-            {options.map((option, index) => (
-              <MenuItem key={index} value={option.value}>
-                {option.value}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </Box>
-    </div>
-  )
-
-  let returnValue: any = ''
-
-  // ticketTier.soldOut === false --> means that ticket is in the stock
-  const isSoldOut =
-    ticketTier.sold_out ||
-    !(ticketTier.displayTicket || ticketTier.slotGroupId) ||
-    ticketTier.soldOut ||
-    ticketTier.soldOut === false
-
-  if (isSoldOut) {
-    returnValue = soldOutMessage
-  } else if (isSalesClosed) {
-    returnValue = ticketsClosedMessage
-  } else if (canPurchaseTicket && isSeatMapAllowed && !isDirectPurchaseAllowed) {
-    // Seat Map Tickets renderer logic
-    returnValue = null
-  } else if (
-    canPurchaseTicket ||
-    (canPurchaseTicket && event?.presalesStarted && !event?.presalesEnded)
-  ) {
-    returnValue = onSaleContent
-  } else if (_get(prevTicketTier, 'in_stock')) {
-    returnValue = 'SOON'
-  }
-
-  return <>{returnValue} </>
-}

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -1,350 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import './style.css'
-
-import _get from 'lodash/get'
-import _sortBy from 'lodash/sortBy'
-import React, { ReactNode, useState } from 'react'
-import { Tooltip } from 'react-tooltip'
-
-import { FEES_STYLES } from '../../constants'
-import { CONFIGS } from '../../utils'
-import InfoIcon from './InfoIcon'
-import { TicketRow } from './TicketRow'
-
-function decodeHTML(html: string): string {
-  const textArea = document.createElement('textarea')
-  textArea.innerHTML = html
-  return textArea.value
-}
-
-interface ITicketsSectionProps {
-  event: any;
-  ticketsList: any;
-  selectedTickets: any;
-  handleTicketSelect: any;
-  sortBySoldOut: boolean;
-  hideTicketsHeader: boolean;
-  hideTableTicketsHeader: boolean;
-  tableTickets: any;
-  ticketsHeaderComponent?: ReactNode;
-  tableTicketsHeaderComponent?: ReactNode;
-  showGroupNameBlock?: boolean;
-  currencySymbol?: string;
-  isSeatMapAllowed?: boolean;
-  descriptionTrigger?: 'click' | 'hover';
-}
-
-export const TicketsSection = ({
-  event,
-  ticketsList,
-  selectedTickets,
-  handleTicketSelect,
-  sortBySoldOut,
-  ticketsHeaderComponent,
-  tableTicketsHeaderComponent,
-  hideTicketsHeader,
-  hideTableTicketsHeader,
-  showGroupNameBlock,
-  currencySymbol,
-  isSeatMapAllowed,
-  tableTickets,
-  descriptionTrigger = 'click',
-}: ITicketsSectionProps) => {
-  const symbol = _get(event, 'currency.symbol')
-  const sortedTicketsList = sortBySoldOut
-    ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut')
-    : _sortBy(ticketsList, 'sortOrder')
-  const showGroup = !!sortedTicketsList.find(ticket => ticket.groupName)
-  const priceSymbol = currencySymbol || symbol
-
-  const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
-
-  const handleDescriptionToggle = (ticketId: string) => {
-    setVisibleDescription(current => (current === ticketId ? null : ticketId))
-  }
-
-  return (
-    <>
-      {!hideTicketsHeader && ticketsHeaderComponent}
-      {sortedTicketsList.map((ticket, i, arr) => {
-        const ticketPriceWithoutFees = `${priceSymbol} ${(+ticket.cost).toFixed(2)}`
-        const ticketPriceWithFees = `${priceSymbol} ${(+ticket.basePrice).toFixed(2)}`
-        const ticketOldPriceWithFees = `${priceSymbol} ${(+ticket.oldBasePrice).toFixed(2)}`
-        const ticketOldPriceWithoutFees = `${priceSymbol} ${(+ticket.oldCost).toFixed(2)}`
-        const ticketFinalPrice = ticket.feeIncluded && !ticket.isForward
-          ? +(ticket.x_face_value || ticket.basePrice)
-          : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost
-        const ticketFinalPriceFormatted = `${priceSymbol} ${parseFloat(ticketFinalPrice.toFixed(2))}`
-        const ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward
-          ? +(ticket.x_face_value || ticket.basePrice)
-          : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost
-        const ticketOldFinalPriceFormatted = `${priceSymbol} ${parseFloat(ticketOldFinalPrice.toFixed(2))}`
-        const ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2)
-        const ticketBreakdown = !ticket.feeIncluded
-          ? '(+ fees at checkout)'
-          : !ticket.isForward
-            ? null
-            : (parseFloat(ticketFeeAmount) > 0 ? `(${priceSymbol} ${(+ticket.cost).toFixed(2)} + ${priceSymbol} ${ticketFeeAmount} fee)` : null)
-
-        const isSoldOut =
-          ticket.sold_out ||
-          !(ticket.displayTicket || ticket.slotGroupId) ||
-          ticket.soldOut
-        const ticketSelect = (event: any) => {
-          const { value } = event.target
-          handleTicketSelect(ticket.id, value)
-        }
-
-        let ticketIsDiscounted = false
-        if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
-          ticketIsDiscounted = true
-        }
-
-        const ticketIsFree = +ticket.price === 0
-        const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
-          ? ticketOldFinalPriceFormatted
-          : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
-            ? ticketOldPriceWithoutFees
-            : ticketOldPriceWithFees
-        const ticketPriceElem = isSoldOut
-          ? 'SOLD OUT'
-          : ticketIsFree
-            ? 'FREE'
-            : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
-              ? ticketFinalPriceFormatted
-              : (CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded)
-                ? ticketPriceWithoutFees
-                : ticketPriceWithFees
-        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' : ''}`}
-              id={ticket.id || ticket.name}
-            >
-              <div className="event-detail__tier-name">
-                {ticket.displayName || ticket.name}
-                {ticket.descriptionRich && (
-                  <>
-                    <span
-                      aria-hidden
-                      className="info-icon"
-                      onClick={
-                        descriptionTrigger === 'click'
-                          ? () => handleDescriptionToggle(ticket.id)
-                          : undefined
-                      }
-                      onMouseEnter={
-                        descriptionTrigger === 'hover'
-                          ? () => setVisibleDescription(ticket.id)
-                          : undefined
-                      }
-                      onMouseLeave={
-                        descriptionTrigger === 'hover'
-                          ? () => setVisibleDescription(null)
-                          : undefined
-                      }
-                      data-tooltip-id={`tooltip-${ticket.id}`}
-                      data-tooltip-content="View ticket info"
-                      style={{
-                        marginLeft: 8,
-                        cursor: 'pointer',
-                        display: 'flex',
-                      }}
-                    >
-                      <InfoIcon />
-                    </span>
-
-                    <Tooltip id={`tooltip-${ticket.id}`} place="top">
-                      {ticket.description || 'No description available'}
-                    </Tooltip>
-                  </>
-                )}
-              </div>
-              <div className="event-tickets-container">
-                <div className="event-detail__tier-price">
-                  {ticketIsDiscounted && <p className="old-price">{discountTicketPriceElem}</p>}
-                  <p className={isSoldOut ? 'sold-out' : ''}>{ticketPriceElem}</p>
-                  {!isSoldOut && !ticketIsFree && (
-                    <p className="fees">
-                      {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
-                        (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')}
-                      {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
-                        `(${ticketPriceWithFees} with fees)`}
-                      {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
-                        ticketBreakdown}
-                    </p>
-                  )}
-                </div>
-                <div className="event-detail__tier-state" style={{ minWidth: 55 }}>
-                  <TicketRow
-                    ticketTier={ticket}
-                    prevTicketTier={arr[i - 1]}
-                    selectedTickets={selectedTickets}
-                    handleTicketSelect={ticketSelect}
-                    event={event}
-                  />
-                </div>
-              </div>
-              {visibleDescription === ticket.id && (
-                <div className="ticket-description">
-                  <div
-                    dangerouslySetInnerHTML={{
-                      __html: decodeHTML(ticket.descriptionRich),
-                    }}
-                  />
-                </div>
-              )}
-            </div>
-          </React.Fragment>
-        )
-      })}
-      {!hideTableTicketsHeader && tableTicketsHeaderComponent}
-      {tableTickets.map((ticket: any, i: any, arr: any) => {
-        const ticketPriceWithoutFees = `${priceSymbol} ${(+ticket.cost).toFixed(2)}`
-        const ticketPriceWithFees = `${priceSymbol} ${(+ticket.basePrice).toFixed(2)}`
-        const ticketOldPriceWithFees = `${priceSymbol} ${(+ticket.oldBasePrice).toFixed(2)}`
-        const ticketOldPriceWithoutFees = `${priceSymbol} ${(+ticket.oldCost).toFixed(2)}`
-        const ticketFinalPrice = ticket.feeIncluded && !ticket.isForward
-          ? +(ticket.x_face_value || ticket.basePrice)
-          : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost
-        const ticketFinalPriceFormatted = `${priceSymbol} ${parseFloat(ticketFinalPrice.toFixed(2))}`
-        const ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward
-          ? +(ticket.x_face_value || ticket.basePrice)
-          : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost
-        const ticketOldFinalPriceFormatted = `${priceSymbol} ${parseFloat(ticketOldFinalPrice.toFixed(2))}`
-        const ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2)
-        const ticketBreakdown = !ticket.feeIncluded
-          ? '(+ fees at checkout)'
-          : !ticket.isForward
-            ? null
-            : (parseFloat(ticketFeeAmount) > 0 ? `(${priceSymbol} ${(+ticket.cost).toFixed(2)} + ${priceSymbol} ${ticketFeeAmount} fee)` : null)
-
-        const isSoldOut =
-          ticket.sold_out ||
-          !(ticket.displayTicket || ticket.slotGroupId) ||
-          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 discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
-          ? ticketOldFinalPriceFormatted
-          : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
-            ? ticketOldPriceWithoutFees
-            : ticketOldPriceWithFees
-        const ticketPriceElem = isSoldOut
-          ? 'SOLD OUT'
-          : ticketIsFree
-            ? 'FREE'
-            : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
-              ? ticketFinalPriceFormatted
-              : (CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded)
-                ? ticketPriceWithoutFees
-                : ticketPriceWithFees
-        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' : ''}`}
-              id={ticket.id || ticket.name}
-            >
-              <div className="event-detail__tier-name">
-                {ticket.displayName || ticket.name}
-                {ticket.descriptionRich && (
-                  <>
-                    <span
-                      aria-hidden
-                      className="info-icon"
-                      onClick={
-                        descriptionTrigger === 'click'
-                          ? () => handleDescriptionToggle(ticket.id)
-                          : undefined
-                      }
-                      onMouseEnter={
-                        descriptionTrigger === 'hover'
-                          ? () => setVisibleDescription(ticket.id)
-                          : undefined
-                      }
-                      onMouseLeave={
-                        descriptionTrigger === 'hover'
-                          ? () => setVisibleDescription(null)
-                          : undefined
-                      }
-                      style={{ marginLeft: 8, cursor: 'pointer', display: 'flex' }}
-                      data-tooltip-id={`tooltip-${ticket.id}`}
-                      data-tooltip-content="View ticket info"
-                    >
-                      <InfoIcon />
-                    </span>
-                    <Tooltip id={`tooltip-${ticket.id}`} place="top">
-                      {ticket.description || 'No description available'}
-                    </Tooltip>
-                  </>
-                )}
-              </div>
-              <div className="event-tickets-container">
-                <div className="event-detail__tier-price">
-                  {ticketIsDiscounted && <p className="old-price">{discountTicketPriceElem}</p>}
-                  <p className={isSoldOut ? 'sold-out' : ''}>{ticketPriceElem}</p>
-                  {!isSoldOut && !ticketIsFree && (
-                    <p className="fees">
-                      {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
-                        (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')}
-                      {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
-                        `(${ticketPriceWithFees} with fees)`}
-                      {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
-                        ticketBreakdown}
-                    </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}
-                    event={event}
-                  />
-                </div>
-              </div>
-              {visibleDescription === ticket.id && (
-                <div className="ticket-description">
-                  <div
-                    dangerouslySetInnerHTML={{
-                      __html: decodeHTML(ticket.descriptionRich),
-                    }}
-                  />
-                </div>
-              )}
-            </div>
-          </React.Fragment>
-        )
-      })}
-    </>
-  )
-}