import React, { useEffect, useState } from "react" import { Link } from "gatsby" import { DateTime } from "luxon" import HelperFunc from "../global/javascript/Helpers.js" import { renderHTML } from "../agility/utils" import { AgilityImage } from "@agility/gatsby-image-agilitycms" import "./EventDetails.scss" import "./RichTextArea.scss" const EventDetails = ({ item, dynamicPageItem, page }) => { const [loaded, setLoaded] = useState(false) const event = dynamicPageItem.customFields const eventDate = DateTime.fromISO(event.date) const isPastEvent = eventDate.diffNow("seconds").seconds < 0 let externalLink = null let exernalTarget = null if (event.externalLink) { externalLink = event.externalLink.href exernalTarget = event.externalLink.target } useEffect(() => { //load the eventbrites cript - but only if we have to if (typeof window === "undefined") return //only load the event brite stuff if we are NOT on a past event... if (loaded || isPastEvent) return setTimeout(function() { if (event.demioID) { //add the demo embed... let script = document.createElement("script") script.src = "https://cdn.demio.com/production/dashboard/embed.bundle.js" script.async = true document.body.appendChild(script) } else if (event.eventbriteID) { //add the script embed... let script = document.createElement("script") script.src = "https://www.eventbrite.com/static/widgets/eb_widgets.js" script.async = true document.body.appendChild(script) loadEventBriteForm() } setLoaded(true) }, 100) scrollToform() }) const scrollToform = () => { document .getElementsByClassName("scroll-to-form")[0] .addEventListener("click", e => { e.preventDefault() let id = document.querySelectorAll(e.target.getAttribute("href")) // console.log(id) if (id.length) { let header = document.querySelectorAll("#header")[0].offsetHeight HelperFunc.animateScrollTop(id[0].offsetTop - header - 100, 350) } }) } const loadEventBriteForm = () => { if (!window.EBWidgets) { setTimeout(loadEventBriteForm, 100) return } window.EBWidgets.createWidget({ widgetType: "checkout", eventId: event.eventbriteID, modal: true, modalTriggerElementId: `eventbrite-widget-button-${event.eventbriteID}`, }) setTimeout(function() { window.EBWidgets.createWidget({ // Required widgetType: "checkout", eventId: event.eventbriteID, iframeContainerId: `eventbrite-widget-container-${event.eventbriteID}`, // Optional iframeContainerHeight: 425, // Widget height in pixels. Defaults to a minimum of 425px if not provided //onOrderComplete: exampleCallback // Method called when an order has successfully completed }) }, 1000) } return ( <section className="event-details"> <div className="container p-w-small rich-text"> <h1 className="title-component">{event.title}</h1> <div className="event-date"> <span className="event-type"> {event.eventType.customFields.title} </span> <span className="date">{eventDate.toFormat("MMM d, yyyy")}</span> <span className="time">{eventDate.toFormat("h:mma")}</span> </div> <div className="event-image"> {event.mainImage && ( <a href={externalLink} target={exernalTarget}> <AgilityImage image={event.mainImage} layout="fullWidth" /> </a> )} </div> <div className="event"> <div className="form-container"> {event.demioID && !isPastEvent && ( <section className="demio-register" id="register-now"> <h2>Register Now</h2> <div> <span className="demio-embed-registration" data-hash={event.demioID} data-api="api/v1" data-base-uri="https://my.demio.com/" data-form-width="100%" data-color="#4600a8" data-text="REGISTER" ></span> </div> </section> )} {event.eventbriteID && !isPastEvent && ( <div id={`eventbrite-widget-container-${event.eventbriteID}`} ></div> )} </div> <div className="event-content" dangerouslySetInnerHTML={renderHTML(event.textblob)} ></div> <div> {event.externalLink && ( <div className="event-link"> <a href={externalLink} target={exernalTarget} className="btn"> {event.externalLink.text} </a> </div> )} {event.demioID && !isPastEvent && ( <div className="event-link"> <a href="#register-now" className="btn scroll-to-form"> Register Now </a> </div> )} {event.eventbriteID && !isPastEvent && ( <div className="event-link"> <a className="btn" id={`eventbrite-widget-button-${event.eventbriteID}`} type="button" > Register Now </a> </div> )} </div> </div> <Link to="/resources/events" className="back d-flex ai-center"> <img src="https://static.agilitycms.com/layout/img/ico/gray.svg" alt="" /> <span>Back to Event Listing</span> </Link> </div> </section> ) } export default EventDetails