tf-checkout-react 1.6.6-beta.11 → 1.6.6-beta.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.6-beta.11",
+  "version": "1.6.6-beta.13",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -110,4 +110,4 @@
     "tf-seat-map-view": "9.4.7-beta.33",
     "yup": "^0.32.11"
   }
-}
+}

package/src/api/index.ts

@@ -155,7 +155,7 @@ export const getCheckoutPageConfigs = async (): Promise<ResponseConfigs> => {
 
 
 export const getCustomFields = async (eventId: string) => {
-  const response = await publicRequest.get(`/v1/event/${eventId}/custom_fields`)
+  const response = await publicRequest.get(`/v1/event/${eventId}/fields`)
   const customFields = _get(response, 'data.data.attributes', [])
   const adaptedResponse = customFieldsDataAdapter(customFields)
   return adaptedResponse

package/src/components/orderDetailsContainer/index.tsx

@@ -1,12 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import './style.css'
 
+import { ThemeOptions } from "@mui/material"
 import Paper from '@mui/material/Paper'
+import { createTheme, ThemeProvider } from "@mui/material/styles"
 import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
 import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
+import { CSSProperties } from "@mui/styles"
 import _find from 'lodash/find'
 import _get from 'lodash/get'
 import _has from 'lodash/has'
@@ -31,9 +35,6 @@ import { InitialValuesTypes, TicketResaleModal } from '../ticketResaleModal'
 import { CustomFieldsForm } from './CustomFieldsForm'
 import TicketsTable, { IActionColumns, ITicketTypes } from './ticketsTable'
 import { isFieldUpdatable, renderCustomFieldValue } from './utils'
-import {ThemeOptions} from "@mui/material";
-import {CSSProperties} from "@mui/styles";
-import {createTheme, ThemeProvider} from "@mui/material/styles";
 
 interface TicketTypes {
   currency: string;
@@ -505,12 +506,12 @@ export const OrderDetailsContainer = ({
             ticketsTableColumns?.length
               ? ticketsTableColumns
               : [
-                {key: 'hash' as never, label: 'Ticket ID'},
-                {key: 'ticket_type' as never, label: 'Ticket Type'},
-                {key: 'holder_name' as never, label: 'Ticket Holder'},
-                {key: 'status' as never, label: 'Status'},
-                {key: 'download' as never, label: ''},
-                {key: 'sell_ticket' as never, label: ''},
+                { key: 'hash' as never, label: 'Ticket ID' },
+                { key: 'ticket_type' as never, label: 'Ticket Type' },
+                { key: 'holder_name' as never, label: 'Ticket Holder' },
+                { key: 'status' as never, label: 'Status' },
+                { key: 'download' as never, label: '' },
+                { key: 'sell_ticket' as never, label: '' },
               ]
           }
           handleSellTicket={handleSellTicket}

package/src/components/ticketsContainer/InfoIcon.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+
+const InfoIcon = () => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="17"
+      height="17"
+      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/TicketsSection.tsx

@@ -2,10 +2,17 @@ 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 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;
@@ -20,6 +27,7 @@ interface ITicketsSectionProps {
   showGroupNameBlock?: boolean;
   currencySybmol?: string;
   isSeatMapAllowed?: boolean;
+  descriptionTrigger?: "click" | "hover";
 }
 
 export const TicketsSection = ({
@@ -36,13 +44,21 @@ export const TicketsSection = ({
   currencySybmol,
   isSeatMapAllowed,
   tableTickets,
+  descriptionTrigger = 'click',
 }: ITicketsSectionProps) => {
-  const symbol = _get(event, "currency.symbol")
+  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 = currencySybmol || symbol
+
+  const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
+
+  const handleDescriptionToggle = (ticketId: string) => {
+    setVisibleDescription(current => (current === ticketId ? null : ticketId))
+  }
+
   return (
     <>
       {!hideTicketsHeader && ticketsHeaderComponent}
@@ -62,11 +78,7 @@ export const TicketsSection = ({
         }
 
         const ticketIsFree = +ticket.price === 0
-        const ticketPriceElem = isSoldOut
-          ? 'SOLD OUT'
-          : ticketIsFree
-          ? 'FREE'
-          : ticketPrice
+        const ticketPriceElem = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : ticketPrice
         const isNewGroupTicket = ticket?.groupName !== arr[i - 1]?.groupName
 
         return (
@@ -79,7 +91,36 @@ export const TicketsSection = ({
             <div className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}>
               <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" }}
+                  >
+                    <InfoIcon />
+                  </span>
+                )}
               </div>
+              {visibleDescription === ticket.id && (
+                <div className="ticket-description">
+                  <div dangerouslySetInnerHTML={{ __html: decodeHTML(ticket.descriptionRich) }} />
+                </div>
+              )}
               <div className="event-tickets-container">
                 <div className="event-detail__tier-price">
                   {ticketIsDiscounted && <p className="old-price">{ticketOldPrice}</p>}
@@ -124,8 +165,8 @@ export const TicketsSection = ({
         const ticketPriceElem = isSoldOut
           ? 'SOLD OUT'
           : ticketIsFree
-          ? 'FREE'
-          : ticketPrice
+            ? 'FREE'
+            : ticketPrice
         const isNewGroupTicket = ticket?.groupName !== arr[i - 1]?.groupName
 
         return (
@@ -139,7 +180,36 @@ export const TicketsSection = ({
               <div className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}>
                 <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" }}
+                    >
+                      <InfoIcon />
+                    </span>
+                  )}
                 </div>
+                {visibleDescription === ticket.id && (
+                  <div className="ticket-description">
+                    <div dangerouslySetInnerHTML={{ __html: decodeHTML(ticket.descriptionRich) }} />
+                  </div>
+                )}
                 <div className="event-tickets-container">
                   <div className="event-detail__tier-price">
                     {ticketIsDiscounted && <p className="old-price">{ticketOldPrice}</p>}

package/src/hoc/CustomFields/index.tsx

@@ -30,7 +30,7 @@ const withCustomFields = (Children: any) => (props: any) => {
 
   const getFields = async () => {
     try {
-      const eventId = getQueryVariable('event_id') || ''
+      const eventId = getQueryVariable('event_id') || getQueryVariable("eventId") || ''
       const customFields = await getCustomFields(eventId)
 
       const orderFieldsKeys = getFieldsKeys(_get(customFields, 'orderFields', []))