tf-checkout-react 1.6.6 → 1.7.1

package/src/components/resetPasswordContainer/index.tsx

@@ -1,31 +1,38 @@
-import React, { FC, useState } from 'react'
-import { Field, Form, Formik } from 'formik'
+import './style.css'
+
 import { CircularProgress } from '@mui/material'
-import { CustomField } from '../common/CustomField'
 import axios, { AxiosError } from 'axios'
+import { Field, Form, Formik } from 'formik'
+import _identity from 'lodash/identity'
+import React, { FC, useState } from 'react'
 import * as Yup from 'yup'
+
 import { resetPassword } from '../../api'
-import './style.css'
+import { CustomField } from '../common/CustomField'
 
 interface IResetPasswordProps {
-  token?: string
-  onResetPasswordSuccess?: (res: any) => void
-  onResetPasswordError?: (e: AxiosError) => void
+  token?: string;
+  onResetPasswordSuccess?: (res: any) => void;
+  onResetPasswordError?: (e: AxiosError) => void;
 }
 
 const Schema = Yup.object().shape({
   password: Yup.string()
-    .min(6, 'Password must have 5+ characters')
-    .required('Required'),
-    password_confirmation: Yup.string()
+    .min(8, 'Password must have 8+ characters')
+    .required('Required')
+    .matches(
+      new RegExp('^(?=.*[@$!%*#?&])'),
+      'Password must contain at least one special character'
+    ),
+  password_confirmation: Yup.string()
     .required('Required')
     .oneOf([Yup.ref('password'), null], 'Passwords must match'),
 })
 
 export const ResetPasswordContainer: FC<IResetPasswordProps> = ({
   token: tokenProps = '',
-  onResetPasswordSuccess = () => {},
-  onResetPasswordError = () => {},
+  onResetPasswordSuccess = _identity,
+  onResetPasswordError = _identity,
 }) => {
   const [loading, setLoading] = useState(false)
   return (
@@ -42,8 +49,7 @@ export const ResetPasswordContainer: FC<IResetPasswordProps> = ({
               token = tokenProps
             } else {
               if (typeof window !== 'undefined') {
-                const params: URLSearchParams = new URL(`${window.location}`)
-                  .searchParams
+                const params: URLSearchParams = new URL(`${window.location}`).searchParams
                 token = params.get('token')
               }
             }

package/src/components/seatMapContainer/TicketsSection.tsx

@@ -1,11 +1,11 @@
 import { CSSProperties } from '@emotion/serialize'
-import { createTheme, Select, SelectChangeEvent, ThemeOptions } from '@mui/material'
+import { Select, SelectChangeEvent, ThemeOptions } from '@mui/material'
 import CircularProgress from '@mui/material/CircularProgress'
 import FormControl from '@mui/material/FormControl'
 import InputLabel from '@mui/material/InputLabel'
 import MenuItem from '@mui/material/MenuItem'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 import Tooltip from '@mui/material/Tooltip'
-import { ThemeProvider } from '@mui/private-theming'
 import _find from 'lodash/find'
 import _identity from 'lodash/identity'
 import _isEmpty from 'lodash/isEmpty'

package/src/components/signupModal/index.tsx

@@ -3,6 +3,7 @@ import './style.css'
 import { Box, CircularProgress, Modal } from '@mui/material'
 import axios, { AxiosError } from 'axios'
 import { Field, Form, Formik } from 'formik'
+import _identity from 'lodash/identity'
 import React, { FC, useState } from 'react'
 import * as Yup from 'yup'
 
@@ -43,17 +44,23 @@ const SignupSchema = Yup.object().shape({
   firstName: Yup.string().required('Required'),
   lastName: Yup.string().required('Required'),
   email: Yup.string().email('Invalid email').required('Required'),
-  password: Yup.string().min(6, 'Password must have 5+ characters').required('Required'),
+  password: Yup.string()
+    .min(8, 'Password must have 8+ characters')
+    .required('Required')
+    .matches(
+      new RegExp('^(?=.*[@$!%*#?&])'),
+      'Password must contain at least one special character'
+    ),
   confirmPassword: Yup.string()
     .required('Required')
     .oneOf([Yup.ref('password'), null], 'Passwords must match'),
 })
 
 export const SignupModal: FC<ISignupProps> = ({
-  onClose = () => {},
-  onLogin = () => {},
-  onRegisterSuccess = () => {},
-  onRegisterError = () => {},
+  onClose = _identity,
+  onLogin = _identity,
+  onRegisterSuccess = _identity,
+  onRegisterError = _identity,
   showPoweredByImage = false,
 }) => {
   const [loading, setLoading] = useState(false)
@@ -89,7 +96,7 @@ export const SignupModal: FC<ISignupProps> = ({
     }
   }
 
-  const _onClose = loading ? () => {} : onClose
+  const _onClose = loading ? _identity : onClose
 
   return (
     <Modal

package/src/components/ticketResale/index.tsx

@@ -33,6 +33,7 @@ export const TicketResaleContainer = ({
         const params: URLSearchParams = new URL(`${window.location}`).searchParams
         const hash = params.get('invitation_hash') || orderHash || null
         const isDeclined = params.get('decline') || false
+        window.localStorage.removeItem('checkoutAdditionalConfigs')
 
         if (hash) {
           // Process of declining ticket purchase invitation
@@ -53,6 +54,12 @@ export const TicketResaleContainer = ({
           try {
             const response = await processTicket(hash)
             const event_id = _get(response.data.data.attributes, 'event_id')
+            const eventHasAddons = _get(response.data.data.attributes, 'has_add_on')
+            const invitationIncludesAddons = _get(response.data.data.attributes, 'include_add_on')
+            window.localStorage.setItem('checkoutAdditionalConfigs', JSON.stringify({
+              resale: true,
+              resaleWithAddons: eventHasAddons && invitationIncludesAddons,
+            }))
 
             onProcessTicketSuccess(response.data)
             if (defaultRedirection) {

package/src/components/ticketsContainer/InfoIcon.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+
+const InfoIcon = ({ size = 17 }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 17 17"
+    fill="none"
+  >
+    <circle
+      cx="8.5"
+      cy="8.5"
+      r="8"
+      stroke="black"
+      strokeWidth="1"
+    />
+    <rect
+      x="7.5"
+      y="4"
+      width="2"
+      height="2"
+      fill="black"
+    />
+    <rect
+      x="7.5"
+      y="7"
+      width="2"
+      height="5"
+      fill="black"
+    />
+  </svg>
+)
+
+export default InfoIcon

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -33,38 +33,39 @@ export const PromoCodeSection = ({
   showAlertIcons
 }: IPromoCodeSectionProps) => {
   const isPromoCodeHasValue = !!code.trim()
+  const appliedPromoCode = window?.localStorage?.getItem('appliedPromoCode')
 
   const renderInputField = () => (
+    <div className="promo-code-block">
       <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>
+        <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>
@@ -81,6 +82,11 @@ export const PromoCodeSection = ({
           <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 && (

package/src/components/ticketsContainer/TicketRow.tsx

@@ -83,7 +83,7 @@ export const TicketRow = ({
   // ticketTier.soldOut === false --> means that ticket is in the stock
   const isSoldOut =
     ticketTier.sold_out ||
-    !ticketTier.displayTicket ||
+    !(ticketTier.displayTicket || ticketTier.slotGroupId) ||
     ticketTier.soldOut ||
     ticketTier.soldOut === false
 

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -1,10 +1,22 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import './style.css'
 
+import _get from 'lodash/get'
 import _sortBy from 'lodash/sortBy'
-import React, { ReactNode } from 'react'
+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;
@@ -17,12 +29,13 @@ interface ITicketsSectionProps {
   ticketsHeaderComponent?: ReactNode;
   tableTicketsHeaderComponent?: ReactNode;
   showGroupNameBlock?: boolean;
-  currencySybmol?: string;
+  currencySymbol?: string;
   isSeatMapAllowed?: boolean;
+  descriptionTrigger?: 'click' | 'hover';
 }
 
 export const TicketsSection = ({
-  event = { currency: {} },
+  event,
   ticketsList,
   selectedTickets,
   handleTicketSelect,
@@ -32,26 +45,37 @@ export const TicketsSection = ({
   hideTicketsHeader,
   hideTableTicketsHeader,
   showGroupNameBlock,
-  currencySybmol,
+  currencySymbol,
   isSeatMapAllowed,
   tableTickets,
+  descriptionTrigger = 'click',
 }: ITicketsSectionProps) => {
-  const {
-    currency: { symbol },
-  } = event
+  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 = currencySybmol ? currencySybmol : symbol
+  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 ticketPrice = `${priceSymbol} ${(+ticket.price).toFixed(2)}`
-        const ticketOldPrice = `${priceSymbol} ${(+ticket.oldPrice).toFixed(2)}`
+        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 isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut
+        const isSoldOut =
+          ticket.sold_out ||
+          !(ticket.displayTicket || ticket.slotGroupId) ||
+          ticket.soldOut
         const ticketSelect = (event: any) => {
           const { value } = event.target
           handleTicketSelect(ticket.id, value)
@@ -63,11 +87,15 @@ export const TicketsSection = ({
         }
 
         const ticketIsFree = +ticket.price === 0
+        const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ?
+          ticketOldPriceWithoutFees : ticketOldPriceWithFees
         const ticketPriceElem = isSoldOut
           ? 'SOLD OUT'
           : ticketIsFree
-          ? 'FREE'
-          : ticketPrice
+            ? 'FREE'
+            : (CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded)
+              ? ticketPriceWithoutFees
+              : ticketPriceWithFees
         const isNewGroupTicket = ticket?.groupName !== arr[i - 1]?.groupName
 
         return (
@@ -77,17 +105,59 @@ export const TicketsSection = ({
                 {ticket.groupName || ''}
               </div>
             ) : null}
-            <div className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}>
+            <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">{ticketOldPrice}</p>}
+                  {ticketIsDiscounted && <p className="old-price">{discountTicketPriceElem}</p>}
                   <p className={isSoldOut ? 'sold-out' : ''}>{ticketPriceElem}</p>
                   {!isSoldOut && !ticketIsFree && (
                     <p className="fees">
-                      {ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}
+                      {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
+                        (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')}
+                      {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
+                        `(${ticketPriceWithFees} with fees)`}
                     </p>
                   )}
                 </div>
@@ -101,16 +171,30 @@ export const TicketsSection = ({
                   />
                 </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 ticketPrice = `${priceSymbol} ${(+ticket.price).toFixed(2)}`
-        const ticketOldPrice = `${priceSymbol} ${(+ticket.oldPrice).toFixed(2)}`
+        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 isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut
+        const isSoldOut =
+          ticket.sold_out ||
+          !(ticket.displayTicket || ticket.slotGroupId) ||
+          ticket.soldOut
         const ticketSelect = (event: any) => {
           const { value } = event.target
           handleTicketSelect(ticket.id, value, true)
@@ -122,53 +206,101 @@ export const TicketsSection = ({
         }
 
         const ticketIsFree = +ticket.price === 0
+        const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ?
+          ticketOldPriceWithoutFees : ticketOldPriceWithFees
         const ticketPriceElem = isSoldOut
           ? 'SOLD OUT'
           : ticketIsFree
-          ? 'FREE'
-          : ticketPrice
+            ? 'FREE'
+            : (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' : ''}`}>
-                <div className="event-detail__tier-name">
-                  {ticket.displayName || ticket.name}
+          <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)`}
+                    </p>
+                  )}
+                  {ticket.depositPercent && (
+                    <p className="deposits">{ticket.depositPercent + '% DEPOSIT'}</p>
+                  )}
                 </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}
-                      event={event}
-                    />
-                  </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>
-            </React.Fragment>
-          </>
+              {visibleDescription === ticket.id && (
+                <div className="ticket-description">
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html: decodeHTML(ticket.descriptionRich),
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          </React.Fragment>
         )
       })}
     </>