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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.6-beta.11",
+  "version": "1.6.6-beta.12",
   "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/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>}