@openeventkit/event-site 2.0.136 → 2.0.138

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.136",
+  "version": "2.0.138",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -130,7 +130,7 @@
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",
-    "summit-registration-lite": "5.0.37",
+    "summit-registration-lite": "5.0.39",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
     "upcoming-events-widget": "3.0.5",

package/src/components/ClockComponent.js

@@ -1,20 +1,17 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import Clock from 'openstack-uicore-foundation/lib/components/clock';
-import { updateClock } from '../actions/clock-actions';
+import React from "react";
+import { connect } from "react-redux";
+import Clock from "openstack-uicore-foundation/lib/components/clock";
+import { updateClock } from "../actions/clock-actions";
 
 const ClockComponent = ({
   active,
   summit,
   updateClock
 }) => {
+  if (!active || !summit) return null;
   return (
-    <div>
-      {active && summit &&
-      <Clock onTick={(timestamp) => updateClock(timestamp)} timezone={summit.time_zone_id} />
-      }
-    </div>
+    <Clock onTick={(timestamp) => updateClock(timestamp)} timezone={summit.time_zone_id} />
   );
 }
 
-export default connect(null, { updateClock })(ClockComponent);
+export default connect(null, { updateClock })(ClockComponent);

package/src/components/Interstitial/index.js

@@ -0,0 +1,61 @@
+import React, { useEffect } from "react";
+import { navigate } from "gatsby";
+import { Box, Typography } from "@mui/material";
+
+const containerStyles = (contained) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  width: "100%",
+  height: contained ? "100%" : "100vh"
+});
+
+const titleStyle = {
+  color: "var(--color_text_dark)",
+  fontFamily: "var(--font_family)",
+  fontSize: "2rem",
+  fontWeight: 600,
+  lineHeight: 1.125,
+};
+
+const subtitleStyle = {
+  color: "var(--color_text_dark)",
+  fontFamily: "var(--font_family)",
+  fontSize: "1.25rem",
+  fontWeight: 400,
+  lineHeight: 1.25,
+};
+
+const Interstitial = ({
+  children,
+  title,
+  subtitle,
+  navigateTo,
+  navigateOptions = {},
+  timeout = 3000,
+  contained = false
+}) => {
+  useEffect(() => {
+    if (navigateTo) {
+      const timer = setTimeout(() => navigate(navigateTo, navigateOptions), timeout);
+      return () => clearTimeout(timer);
+    }
+  }, [navigateTo, navigateOptions, timeout]);
+
+  return (
+    <Box sx={containerStyles(contained)}>
+      {children ? (
+        children
+      ) : (
+        <Box sx={{ width: "100%", textAlign: "center" }}>
+          <Typography sx={titleStyle} gutterBottom>
+            {title}
+          </Typography>
+          <Typography sx={subtitleStyle}>{subtitle}</Typography>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default Interstitial;

package/src/components/PrePostEventSlide/index.js

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { Box, Typography } from "@mui/material";
+import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
+import { PHASES } from "@utils/phasesUtils";
+
+const containerStyles = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  color: "var(--color_text_light)",
+  backgroundColor: "var(--color_secondary)",
+  aspectRatio: "auto 16/9",
+  px: 3,
+  py: 5
+};
+
+const titleStyle = {
+  color: "var(--color_text_light)",
+  fontFamily: "var(--font_family)",
+  fontSize: "40px",
+  fontWeight: 600,
+  lineHeight: 1.125
+};
+
+const subtitleStyle = {
+  color: "var(--color_text_light)",
+  fontFamily: "var(--font_family)",
+  fontSize: "42px",
+  fontWeight: 400,
+  lineHeight: 1.25
+};
+
+const getSubtitle = (eventClassName, eventPhase, streamingUrl, startDate, timeZoneId) => {
+  if (eventClassName !== "Presentation") {
+    return "Next session will start soon...";
+  }
+
+  if (eventPhase === PHASES.AFTER && !streamingUrl) {
+    return "Session is over. Recording will be available soon.";
+  }
+
+  if (eventPhase < PHASES.DURING || !streamingUrl) {
+    const formattedTime = epochToMomentTimeZone(startDate, timeZoneId).format("MMMM D hh:mm A (z)");
+    return `This session will be available on ${formattedTime}`;
+  }
+
+  return "";
+};
+
+const PrePostEventSlide = ({ summit, event, eventPhase }) => {
+  const { title, class_name: eventClassName, start_date: startDate, streaming_url: streamingUrl } = event;
+  const { time_zone_id: timeZoneId } = summit;
+
+  const subtitle = getSubtitle(eventClassName, eventPhase, streamingUrl, startDate, timeZoneId);
+
+  return (
+    <Box sx={containerStyles}>
+      <Typography gutterBottom sx={titleStyle}>
+        {title}
+      </Typography>
+      <Typography sx={subtitleStyle}>{subtitle}</Typography>
+    </Box>
+  );
+};
+
+export default PrePostEventSlide;

package/src/pages/maintenance.js

@@ -1,14 +1,12 @@
 import React from "react";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 import useSiteSettings from "@utils/useSiteSettings";
 
-import "../styles/bulma.scss";
-
 const MaintenancePage = () => {
   const { maintenanceMode: { title, subtitle } } = useSiteSettings();
 
   return (
-    <HeroComponent
+    <Interstitial
       title={title}
       subtitle={subtitle}
     />

package/src/routes/ShowOpenRoute.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 
 import { PHASES } from "../utils/phasesUtils";
 import { requireExtraQuestions, doVirtualCheckIn } from "../actions/user-actions";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 import  FragmentParser from "openstack-uicore-foundation/lib/utils/fragment-parser";
 import moment from "moment-timezone";
 
@@ -37,7 +37,7 @@ const ShowOpenRoute = ({
       if(attendee)
         doVirtualCheckIn(attendee);
     }
-  },[summitPhase, hasTicket, userProfile, doVirtualCheckIn]);
+  }, [summitPhase, hasTicket, userProfile, doVirtualCheckIn]);
 
   const userCanByPassAuthz = () => {
     return isAuthorized;
@@ -61,14 +61,14 @@ const ShowOpenRoute = ({
 
   // if summit didnt started yet ...
   if (!shouldBypassCheck && !userCanByPassAuthz() && summitPhase === PHASES.BEFORE) {
-    return <HeroComponent title="You are now logged in. Additional event info is now available on the website." redirectTo="/" />;
+    return <Interstitial title="You are now logged in. Additional event info is now available on the website." navigateTo="/" />;
   }
 
   if (requireExtraQuestions()) {
     return (
-      <HeroComponent
+      <Interstitial
         title="You need to complete some extra questions before entering the event"
-        redirectTo="/a/extra-questions"
+        navigateTo="/a/extra-questions"
       />
     );
   }

package/src/routes/WithAuthzRoute.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { navigate } from "gatsby";
 import { pick } from "@gatsbyjs/reach-router";
 import { getUserProfile, requireExtraQuestions } from "../actions/user-actions";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 import { userHasAccessLevel, VIRTUAL_ACCESS_LEVEL } from "@utils/authorizedGroups";
 
 const pathsRequiringVirtualBadge = [
@@ -79,20 +79,20 @@ const WithAuthzRoute = ({
     }, [fetchedUserProfile, isLoggedIn, hasTicket, isAuthorized, userProfile, getUserProfile, userIsAuthz]);
 
     if (!isLoggedIn) {
-        navigate("/", {state: {backUrl: `${location.pathname}`,},});
+        navigate("/", { state: { backUrl: `${location.pathname}` } });
         return null;
     }
 
     // we are checking credentials if userProfile is being loading yet or
     // if we are re-fetching the user profile to check new data ( user currently is not a authz
     if (!userIsReady() || checkingCredentials()) {
-        return <HeroComponent title="Checking credentials..."/>;
+        return <Interstitial title="Checking credentials..."/>;
     }
 
     // has no ticket -> redirect
     if (!userIsAuthz) {
-        const options = { state: { error: !hasTicket ? 'no-ticket' : 'no-virtual-access' } };
-        return <HeroComponent title="Checking credentials..." redirectTo="/authz/ticket" options={options}/>;
+        const options = { state: { error: !hasTicket ? "no-ticket" : "no-virtual-access" } };
+        return <Interstitial title="Checking credentials..." navigateTo="/authz/ticket" navigateOptions={options} />;
     }
 
     return children;

package/src/routes/WithBadgeRoute.js

@@ -1,8 +1,8 @@
 import React, {useEffect} from "react";
 import { connect } from "react-redux";
 import { isAuthorizedBadge } from "../utils/authorizedGroups";
-import HeroComponent from "../components/HeroComponent";
-import {getEventById, getEventStreamingInfoById} from "../actions/event-actions";
+import Interstitial from "../components/Interstitial";
+import { getEventById, getEventStreamingInfoById } from "../actions/event-actions";
 import { isMuxVideo } from "../utils/videoUtils";
 import {navigate} from "gatsby";
 
@@ -26,7 +26,7 @@ const WithBadgeRoute = ({ children, location, eventId, event, loading, userProfi
       getEventById(eventId).then((res) => {
         const { err }  = res;
         // check error
-        if(err && err?.status === 404){
+        if (err && err?.status === 404){
            navigate('/a/schedule');
         }        
         getEventStreamingInfoById(eventId)
@@ -37,11 +37,11 @@ const WithBadgeRoute = ({ children, location, eventId, event, loading, userProfi
   }, [eventId, getEventById, event, getEventStreamingInfoById]);
 
   if (loading || needsToLoadEvent) {
-    return <HeroComponent title="Loading event" />;
+    return <Interstitial title="Loading event" />;
   }
 
   if (!userIsAuthz || !hasBadgeForEvent) {
-    return <HeroComponent title={getTitle()} redirectTo={location.state?.previousUrl || "/"}/>;
+    return <Interstitial title={getTitle()} navigateTo={location.state?.previousUrl || "/"} />;
   }
 
   return children;

package/src/routes/WithTicketRoute.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 
 const WithTicketRoute = ({ children, location, userProfile, hasTicket, isAuthorized }) => {
   const userIsAuthz = hasTicket || isAuthorized;
@@ -13,7 +13,7 @@ const WithTicketRoute = ({ children, location, userProfile, hasTicket, isAuthori
   };
 
   if (!userIsAuthz || !userProfile) {
-    return <HeroComponent title={getTitle()} redirectTo={location.state?.previousUrl || "/"} />;
+    return <Interstitial title={getTitle()} navigateTo={location.state?.previousUrl || "/"} />;
   }
 
   return children;
@@ -22,7 +22,7 @@ const WithTicketRoute = ({ children, location, userProfile, hasTicket, isAuthori
 const mapStateToProps = ({ userState }) => ({
   userProfile: userState.userProfile,
   hasTicket: userState.hasTicket,
-  isAuthorized: userState.isAuthorized,
+  isAuthorized: userState.isAuthorized
 });
 
 export default connect(mapStateToProps)(WithTicketRoute);

package/src/routes/authorization-callback-route.js

@@ -18,7 +18,7 @@ import { Redirect } from "@gatsbyjs/reach-router";
 import { connect } from "react-redux";
 import AbstractAuthorizationCallbackRoute from "openstack-uicore-foundation/lib/security/abstract-auth-callback-route";
 import { getUserProfile, addToSchedule, removeFromSchedule } from "../actions/user-actions";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 import { getEnvVariable, IDP_BASE_URL, OAUTH2_CLIENT_ID } from "@utils/envVariables";
 import { getPendingAction } from "@utils/schedule";
 
@@ -58,7 +58,7 @@ class AuthorizationCallbackRoute extends AbstractAuthorizationCallbackRoute {
             error.includes("access_denied") ||
             error.includes("consent_required")
         ) return <Redirect to={"/"} noThrow />;
-        return <Redirect to={`/error?error=${error}`} noThrow/>;
+        return <Redirect to={`/error?error=${error}`} noThrow />;
     }
 
     render() {
@@ -75,13 +75,13 @@ class AuthorizationCallbackRoute extends AbstractAuthorizationCallbackRoute {
         if (!id_token_is_valid) {
             return this._redirect2Error("token_validation_error");
         }
-        return <HeroComponent title="Checking credentials..."/>;
+        return <Interstitial title="Checking credentials..." />;
     }
 }
 
 
 const mapStateToProps = ({ userState }) => ({
-    userProfile: userState.userProfile,
+    userProfile: userState.userProfile
 });
 
 export default connect(mapStateToProps, {

package/src/styles/style.scss

@@ -120,10 +120,6 @@ footer {
   padding-top: 12px;
 }
 
-#content-wrapper {
-  min-height: 95vh;
-}
-
 div.login-form {
   display: block;
   background-color: #f5f5f5;
@@ -204,26 +200,12 @@ h2 {
 .talk {
   color: var(--color_text_dark);
 
-  &__break {
-    background-color: var(--color_secondary);
-    width: 100%;
-    aspect-ratio: auto 16 / 9;
-
-    h1,
-    h2 {
-      color: var(--color_text_light);
-      font-size: 42px;
-    }
-  }
-
   h1 {
     font-size: 40px;
-    color: var(--color_text_dark);
   }
 
   &__date {
     font-weight: bold;
-    color: var(--color_text_dark);
   }
 
   &__speaker, &__moderator {

package/src/templates/event-page.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import PropTypes from "prop-types";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
 import { isEqual } from "lodash";
 import Layout from "../components/Layout";
 import DisqusComponent from "../components/DisqusComponent";
@@ -11,14 +11,14 @@ import TalkComponent from "../components/TalkComponent";
 import DocumentsComponent from "../components/DocumentsComponent";
 import VideoBanner from "../components/VideoBanner";
 import SponsorComponent from "../components/SponsorComponent";
-import NoTalkComponent from "../components/NoTalkComponent";
-import HeroComponent from "../components/HeroComponent";
+import PrePostEventSlide from "../components/PrePostEventSlide";
+import Interstitial from "../components/Interstitial";
 import UpcomingEventsComponent from "../components/UpcomingEventsComponent";
 import Link from "../components/Link";
 import AccessTracker, {AttendeesWidget} from "../components/AttendeeToAttendeeWidgetComponent"
 import AttendanceTrackerComponent from "../components/AttendanceTrackerComponent";
 import EventFeedbackComponent from "../components/EventFeedbackComponent"
-import {PHASES} from "../utils/phasesUtils";
+import { PHASES } from "../utils/phasesUtils";
 import { getEventById, getEventStreamingInfoById } from "../actions/event-actions";
 import URI from "urijs";
 import useMarketingSettings, { MARKETING_SETTINGS_KEYS } from "@utils/useMarketingSettings";
@@ -41,7 +41,7 @@ export const EventPageTemplate = class extends React.Component {
     if (!isEqual(event, nextProps.event)) return true;
     if (!isEqual(eventTokens, nextProps.eventTokens)) return true;
     // a synch did happened!
-    if(lastDataSync !== nextProps.lastDataSync) return true;
+    if (lastDataSync !== nextProps.lastDataSync) return true;
     // compare current event phase with next one
     const currentPhase = eventsPhases.find((e) => parseInt(e.id) === parseInt(eventId))?.phase;
     const nextCurrentPhase = nextProps.eventsPhases.find(
@@ -92,15 +92,15 @@ export const EventPageTemplate = class extends React.Component {
 
     // if event is loading or we are still calculating the current phase ...
     if (loading || currentPhase === undefined || currentPhase === null) {
-      return <HeroComponent title="Loading event"/>;
+      return <Interstitial title="Loading event" contained />;
     }
 
     if (!event) {
-      return <HeroComponent title="Event not found" redirectTo="/a/schedule"/>;
+      return <Interstitial title="Event not found" navigateTo="/a/schedule" contained />;
     }
 
-    if(isMuxVideo(event?.streaming_url) && event?.stream_is_secure && ! checkMuxTokens(eventTokens)){
-      return <HeroComponent title="Loading secure event"/>;
+    if (isMuxVideo(event?.streaming_url) && event?.stream_is_secure && !checkMuxTokens(eventTokens)) {
+      return <Interstitial title="Loading secure event" contained />;
     }
 
     return (
@@ -109,25 +109,25 @@ export const EventPageTemplate = class extends React.Component {
           <div className="columns is-gapless">
             {this.canRenderVideo(currentPhase) ? (
               <div className="column is-three-quarters px-0 py-0">
-                    <VideoComponent
-                        url={event.streaming_url}
-                        tokens={eventTokens}
-                        isLive={event.streaming_type === "LIVE"}
-                        title={event.title}
-                        namespace={summit.name}
-                        firstHalf={firstHalf}
-                        autoPlay={autoPlay}
-                        start={startTime}
-                        onError={this.onError}
-                    />
+                <VideoComponent
+                  url={event.streaming_url}
+                  tokens={eventTokens}
+                  isLive={event.streaming_type === "LIVE"}
+                  title={event.title}
+                  namespace={summit.name}
+                  firstHalf={firstHalf}
+                  autoPlay={autoPlay}
+                  start={startTime}
+                  onError={this.onError}
+                />
                 {event.meeting_url && <VideoBanner event={event} ctaText={activityCtaText} />}
               </div>
             ) : (
               <div className="column is-three-quarters px-0 py-0 is-full-mobile">
-                <NoTalkComponent
-                  currentEventPhase={currentPhase}
-                  event={event}
+                <PrePostEventSlide
                   summit={summit}
+                  event={event}
+                  eventPhase={currentPhase}
                 />
               </div>
             )}
@@ -151,9 +151,8 @@ export const EventPageTemplate = class extends React.Component {
             <div className="column is-three-quarters is-full-mobile">
               <div className="px-5 py-5">
                 <TalkComponent
-                  currentEventPhase={currentPhase}
-                  event={event}
                   summit={summit}
+                  event={event}
                 />
               </div>
               { event.allow_feedback &&

package/src/templates/extra-questions-page.js

@@ -17,9 +17,10 @@ import ExtraQuestionsForm from 'openstack-uicore-foundation/lib/components/extra
 
 import { DefaultScrollBehaviour as ScrollBehaviour } from '@utils/scroll';
 
-import styles from '../styles/extra-questions.module.scss';
 import { getAttendeeData } from '../actions/extra-questions-actions';
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
+
+import styles from '../styles/extra-questions.module.scss';
 
 const noOpFn = () => {};
 
@@ -146,7 +147,7 @@ export const ExtraQuestionsPageTemplate = ({ user, summit, extraQuestions, atten
     };
 
     if ((!ticket && !attendeeId) || (attendeeId && someoneElseLoaded === false)) {
-        return <HeroComponent title={"Sorry. You don't have a ticket for this event."} redirectTo={"/"} />;
+        return <Interstitial title={"Sorry. You don't have a ticket for this event."} navigateTo={"/"} contained />;
     }
 
     const getAttendeeFullname = (attendee) => {

package/src/templates/poster-detail-page.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { navigate } from 'gatsby';
 
 import Layout from "../components/Layout";
-import HeroComponent from '../components/HeroComponent';
+import Interstitial from '../components/Interstitial';
 import DisqusComponent from '../components/DisqusComponent';
 import VideoComponent from '../components/VideoComponent';
 import PosterButton from '../components/PosterButton';
@@ -140,12 +140,12 @@ export const PosterDetailPage = ({
 
   const { getSettingByKey } = useMarketingSettings();
 
-  if (loading) return <HeroComponent title="Loading poster" />;
+  if (loading) return <Interstitial title="Loading poster" contained />;
 
-  if (!poster) return <HeroComponent title="Poster not found" />;
+  if (!poster) return <Interstitial title="Poster not found" contained />;
 
   if (!posterViewable) {
-    return <HeroComponent title={"Sorry. You need a special badge to view this poster."} redirectTo={location.state?.previousUrl || '/a/'} />;
+    return <Interstitial title={"Sorry. You need a special badge to view this poster."} navigateTo={location.state?.previousUrl || "/a/"} contained />;
   }
 
   const mediaUpload = poster.media_uploads?.find((e) => e?.media_upload_type?.name === 'Poster');

package/src/templates/sponsor-page.js

@@ -12,7 +12,7 @@ import AdvertiseSponsorsComponent from '../components/AdvertiseSponsorsComponent
 import DocumentsComponent from '../components/DocumentsComponent'
 import DisqusComponent from '../components/DisqusComponent'
 import SponsorBanner from '../components/SponsorBanner'
-import HeroComponent from '../components/HeroComponent'
+import Interstitial from '../components/Interstitial'
 import Link from '../components/Link'
 import Layout from '../components/Layout'
 import { scanBadge } from '../actions/user-actions'
@@ -59,7 +59,7 @@ const SponsorPageTemplate = ({ sponsorId, sponsors, scanBadge, eventId, lastData
   };
 
   if (notFound) {
-    return <HeroComponent title="Sponsor not found" redirectTo="/a/sponsors" />
+    return <Interstitial title="Sponsor not found" navigateTo="/a/sponsors" ontained />
   }
 
   const {
@@ -70,7 +70,7 @@ const SponsorPageTemplate = ({ sponsorId, sponsors, scanBadge, eventId, lastData
   } = sponsorship || {};
 
   if (sponsorLoading) {
-    return <HeroComponent title="Loading..." />
+    return <Interstitial title="Loading..." contained />
   }
 
   return (

package/src/templates/ticket-error-page.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { Redirect } from "@gatsbyjs/reach-router";
 import { getEnvVariable, REGISTRATION_BASE_URL } from "../utils/envVariables";
-import HeroComponent from "../components/HeroComponent";
+import Interstitial from "../components/Interstitial";
 import { navigate } from "gatsby";
 
 export const TicketErrorPageTemplate = class extends React.Component {
@@ -94,7 +94,7 @@ export const TicketErrorPageTemplate = class extends React.Component {
         if (error) {
             this.redirect();
             return (
-                <HeroComponent
+                <Interstitial
                     title={this.getErrorMessage()}
                     subtitle={this.getRedirectMessage()}
                 />
@@ -117,11 +117,11 @@ const TicketErrorPage = ({ location, summit }) => (
 );
 
 TicketErrorPage.propTypes = {
-    location: PropTypes.object,
+    location: PropTypes.object
 };
 
 const mapStateToProps = ({ summitState }) => ({
-    summit: summitState.summit,
+    summit: summitState.summit
 });
 
 export default connect(mapStateToProps, null)(TicketErrorPage);

package/src/utils/withScheduleData.js

@@ -1,9 +1,9 @@
 import React, {useEffect, useState} from "react";
 import { connect } from "react-redux";
-import {compose} from "redux";
+import { compose } from "redux";
 import { useLocation } from '@reach/router';
-import HeroComponent from "../components/HeroComponent";
-import {clearFilters, callAction, updateFilter, updateFiltersFromHash} from "../actions/schedule-actions";
+import Interstitial from "../components/Interstitial";
+import { clearFilters, callAction, updateFilter, updateFiltersFromHash } from "../actions/schedule-actions";
 import { reloadScheduleData } from '../actions/base-actions';
 
 // This HOC makes sure the schedules array in allSchedulesState is populated before render.
@@ -23,7 +23,7 @@ const componentWrapper = (WrappedComponent) => ({schedules, ...props}) => {
   }, [key, location.hash]);
 
   if (!loaded)
-    return <HeroComponent title="Loading schedule data" />;
+    return <Interstitial title="Loading schedule data" />;
 
   return <WrappedComponent {...props} scheduleState={scheduleState} />;
 };

package/src/components/EventHeroComponent.js

@@ -1,34 +0,0 @@
-import React from 'react'
-import { connect } from "react-redux";
-
-import styles from '../styles/event-hero.module.scss'
-
-const EventHeroComponent = ({marketingPageSettings}) => (
-  <section className="hero">
-    <div className={`${styles.heroEvents} columns`}>
-      <div className={'column is-12'}>
-        <div className={`${styles.heroBody} hero-body`}>
-          <div className={`${styles.heroEventContainer}`}>
-            <div>
-              <span className={styles.title}>
-                {marketingPageSettings.hero.title}
-              </span>
-              <span className={styles.subtitle}>
-              {marketingPageSettings.hero.subTitle}
-              </span>
-            </div>
-            <div className={styles.date}>
-              <span>{marketingPageSettings.hero.date}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-);
-
-const mapStateToProps = ({settingState}) => ({
-  marketingPageSettings: settingState.marketingPageSettings
-});
-
-export default connect(mapStateToProps, {})(EventHeroComponent);

package/src/components/NoTalkComponent.js

@@ -1,33 +0,0 @@
-import React from "react"
-import HeroComponent from './HeroComponent'
-import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
-import { PHASES } from '../utils/phasesUtils';
-
-const NoTalkComponent = ({ event, currentEventPhase, summit }) => {
-
-  const { class_name, start_date, title } = event;
-  const { time_zone_id } = summit;
-
-  return (
-    <div className={`columns talk px-3 py-3`}>
-      <HeroComponent
-        title={title}
-        subtitle={
-          class_name !== 'Presentation' ?
-            'Next session will start soon...'
-            :
-              currentEventPhase === PHASES.AFTER && !event.streaming_url ?
-              'Session is over. Recording will be available soon.'
-              :
-                 currentEventPhase < PHASES.DURING || !event.streaming_url ?
-                `This session will be available on ${epochToMomentTimeZone(start_date, time_zone_id).format('MMMM D hh:mm A (z)')}`
-                :
-                ''
-        }
-        event={true}
-      />
-    </div>
-  )
-};
-
-export default NoTalkComponent;

package/src/styles/event-hero.module.scss

@@ -1,92 +0,0 @@
-@import "colors.scss";
-
-div.column:first-of-type {
-  background-color: var(--color_secondary_contrast);
-}
-
-.hero-events {
-  .hero-body {
-    display: flex;
-    background-color: black;
-    flex-direction: row;
-    text-transform: uppercase;
-    padding: 1rem 6rem;
-
-    .hero-event-container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-    }
-
-    .title {
-      font-size: 48px;
-      color: var(--color_text_light);
-      font-weight: bold;
-      letter-spacing: 0.5rem;
-      padding-left: 1rem;
-    }
-
-    .subtitle {
-      font-size: 38px;
-      color: var(--color_text_light);
-      padding-left: 1rem;
-    }
-
-    .date {
-      background-color: var(--color_secondary);
-      color: var(--color_text_light);
-      font-size: 32px;
-      letter-spacing: 0.5rem;
-      padding: 0.5rem 0;
-      transform: skew(-25deg);
-
-      span:before {
-        content: "";
-        margin-right: 1.1em;
-      }
-
-      span:after {
-        content: "";
-        margin-left: 1.2em;
-      }
-
-      span {
-        transform: skew(25deg);
-        display: inline-block;
-      }
-    }
-  }
-}
-
-@media (max-width: 1400px) {
-  .hero-events {
-    .hero-body {
-      padding: 2rem 1.5rem;
-
-      .hero-event-container {
-        flex-direction: column;
-
-        .subtitle {
-          display: inline-block;
-        }
-
-        .date {
-          text-align: center;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 890px) {
-  .hero-events {
-    .hero-body {
-      .hero-event-container {
-        .subtitle {
-          padding-left: 0;
-        }
-      }
-    }
-  }
-}