@openeventkit/event-site 2.0.143 → 2.0.145

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.143",
+  "version": "2.0.145",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -30,7 +30,7 @@
     "@vimeo/player": "^2.16.3",
     "ably": "^1.2.34",
     "assert": "^2.1.0",
-    "attendee-to-attendee-widget": "3.1.1-beta.34",
+    "attendee-to-attendee-widget": "3.2.1-beta.6",
     "autoprefixer": "10.4.14",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "axios": "^0.19.2",
@@ -78,14 +78,14 @@
     "jsdom": "^24.1.0",
     "klaro": "^0.7.21",
     "lite-schedule-widget": "3.0.3",
-    "live-event-widget": "4.0.2",
+    "live-event-widget": "4.0.4",
     "lodash": "^4.17.19",
     "lz-string": "^1.4.4",
     "markdown-it": "^12.0.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
     "object.assign": "^4.1.5",
-    "openstack-uicore-foundation": "4.1.76",
+    "openstack-uicore-foundation": "4.1.90",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.6.0",
     "react": "^18.2.0",
@@ -130,10 +130,10 @@
     "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.41",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
-    "upcoming-events-widget": "3.0.5",
+    "upcoming-events-widget": "3.0.7",
     "urijs": "^1.19.2",
     "use-fit-text": "^2.4.0",
     "uuid": "^7.0.0",

package/src/actions/fetch-entities-actions.js

@@ -163,7 +163,8 @@ export const fetchSpeakerById = async(summitId, speakerId, accessToken = null) =
     apiUrl.addQuery('fields', speakers_fields.join(','));
 
     return fetch(apiUrl.toString(), {
-        method: 'GET'
+        method: 'GET',
+        cache: "no-store",
     }).then(async (response) => {
         if (response.status === 200) {
             return await response.json();
@@ -181,7 +182,21 @@ export const fetchSpeakerById = async(summitId, speakerId, accessToken = null) =
 export const fetchSummitById =  async(summitId, accessToken = null) => {
     let apiUrl = URI(`${process.env.GATSBY_SUMMIT_API_BASE_URL}/api/public/v1/summits/${summitId}`);
 
-    apiUrl.addQuery('expand', 'event_types,tracks,track_groups,presentation_levels,locations.rooms,locations.floors,order_extra_questions.values,schedule_settings,schedule_settings.filters,schedule_settings.pre_filters');
+    const expand = [
+        'event_types',
+        'tracks',
+        'tracks.subtracks',
+        'track_groups',
+        'presentation_levels',
+        'locations.rooms',
+        'locations.floors',
+        'order_extra_questions.values',
+        'schedule_settings',
+        'schedule_settings.filters',
+        'schedule_settings.pre_filters',
+    ]
+
+    apiUrl.addQuery('expand', expand.join(','));
 
     return fetch(apiUrl.toString(), {
         method: 'GET'

package/src/actions/update-data-actions.js

@@ -239,4 +239,20 @@ export const synchEntityData = (
         dispatch(createAction(RELOAD_EVENT_STATE)(entity));
     }
 
-}
+    // check if it's a presentation to reload event state
+    if (entity && entity_type === 'PresentationSpeaker' && entity_operator === 'UPDATE' && event &&
+      (
+        // current loaded event is a presentation on where speakers is a presenter
+        (entity.all_presentations && entity.all_presentations.find(id => id == event?.id))
+          ||
+        // current loaded event is a presentation on where speakers is a moderator
+        (entity.all_moderated_presentations && entity.all_moderated_presentations.find(id => id == event?.id))
+      )
+    )
+    {
+        const idx = allIDXEvents[event?.id];
+        const updatedEvent = eventsData[idx];
+        dispatch(createAction(RELOAD_EVENT_STATE)(updatedEvent));
+    }
+
+}

package/src/actions/user-actions.js

@@ -9,6 +9,8 @@ import {
   stopLoading,
 } from 'openstack-uicore-foundation/lib/utils/actions';
 
+import {putOnLocalStorage, getFromLocalStorage} from 'openstack-uicore-foundation/lib/utils/methods';
+
 import {
   getAccessToken,
   clearAccessToken,
@@ -23,6 +25,7 @@ import { navigate } from 'gatsby';
 import { customErrorHandler, customBadgeHandler, voidErrorHandler } from '../utils/customErrorHandler';
 import { getEnvVariable, SUMMIT_API_BASE_URL, SUMMIT_ID } from "../utils/envVariables";
 import expiredToken from "../utils/expiredToken";
+import * as Sentry from "@sentry/react";
 
 export const GET_DISQUS_SSO = 'GET_DISQUS_SSO';
 export const GET_USER_PROFILE = 'GET_USER_PROFILE';
@@ -55,11 +58,15 @@ export const REQUEST_INVITATION = 'REQUEST_INVITATION';
 export const RECEIVE_INVITATION = 'RECEIVE_INVITATION';
 export const REJECT_INVITATION = 'REJECT_INVITATION';
 
+const DISQUS_SSO_EXPIRATION = "DISQUS_SSO_EXPIRATION";
+
 // shortName is the unique identifier assigned to a Disqus site.
 export const getDisqusSSO = (shortName) => async (dispatch, getState) => {
   const { userState: { disqusSSO } } = getState();
+  const almostTwoHours = 1000 * 60 * 60 * 1.9;
+  const disqusSsoExpiration = parseInt(getFromLocalStorage(DISQUS_SSO_EXPIRATION)) || 0;
 
-  if (disqusSSO !== null) return;
+  if (disqusSSO && disqusSsoExpiration > Date.now()) return;
 
   let accessToken;
   try {
@@ -74,11 +81,16 @@ export const getDisqusSSO = (shortName) => async (dispatch, getState) => {
     createAction(GET_DISQUS_SSO),
     `${window.IDP_BASE_URL}/api/v1/sso/disqus/${shortName}/profile?access_token=${accessToken}`,
     customErrorHandler
-  )({})(dispatch).catch(e => {
-    console.log('ERROR: ', e);
-    clearAccessToken();
+  )({})(dispatch)
+    .then(() => {
+      putOnLocalStorage(DISQUS_SSO_EXPIRATION, Date.now() + almostTwoHours)
+    })
+    .catch(e => {
+      console.log('ERROR: ', e);
+      Sentry.captureException(e)
+      clearAccessToken();
 
-    return Promise.reject(e);
+      return Promise.reject(e);
   });
 }
 

package/src/components/AttendeeToAttendeeWidgetComponent.js

@@ -34,7 +34,7 @@ const sbAuthProps = {
 
 const adminGroups = ["administrators", "super-admins"];
 
-const AttendeesWidgetComponent = ({ user, event, chatSettings }) => {
+const AttendeesWidgetComponent = ({ user, event, summit, chatSettings }) => {
   const [loading, setLoading] = useState(true);
 
   //Deep linking support
@@ -127,11 +127,14 @@ const AttendeesWidgetComponent = ({ user, event, chatSettings }) => {
         twitterName: twitter_name,
         wechatUser: wechat_user,
       },
-      getBadgeFeatures: () =>
-        summit_tickets
+      getBadgeFeatures: () => {
+        const attendeeBadgeFeatureIds = [...new Set(summit_tickets
           .filter((st) => st.badge)
           .flatMap((st) => st.badge.features)
-          .filter((v, i, a) => a.map((item) => item.id).indexOf(v.id) === i),
+          .map((feature) => feature.id))]
+    
+        return summit.badge_features_types.filter((bft) => attendeeBadgeFeatureIds.includes(bft.id));
+      },
       bio: bio,
       showEmail: public_profile_show_email === true,
       allowChatWithMe: public_profile_allow_chat_with_me === true,
@@ -170,7 +173,7 @@ const AttendeesWidgetComponent = ({ user, event, chatSettings }) => {
         }
       },
     },
-    summitId: parseInt(getEnvVariable(SUMMIT_ID)),
+    summit: summit,
     height: 400,
     defaultScope: chatSettings?.defaultScope || scopes.PAGE,  //Default attendees filter scope (scopes.PAGE | scopes.SHOW)
     ...chatProps,
@@ -197,7 +200,7 @@ const mapState = ({ settingState }) => ({
 
 export const AttendeesWidget = connect(mapState)(AttendeesWidgetComponent);
 
-const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
+const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings, updateChatProfileEnabled=false }) => {
   const chatProps = {
     streamApiKey: getEnvVariable(STREAM_IO_API_KEY),
     apiBaseUrl: getEnvVariable(IDP_BASE_URL),
@@ -297,8 +300,11 @@ const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
       showSocialInfo: public_profile_show_social_media_info === true,
       showBio: public_profile_show_bio === true
     },
-    summitId: parseInt(getEnvVariable(SUMMIT_ID)),
+    summit: {
+      id: parseInt(getEnvVariable(SUMMIT_ID)),
+    },
     keepAliveEnabled: true,
+    updateChatProfileEnabled: updateChatProfileEnabled,
     ...chatProps,
     ...sbAuthProps
   };
@@ -312,7 +318,7 @@ const mapStateToProps = ({ loggedUserState, userState, clockState, settingState
   isLoggedUser: loggedUserState.isLoggedUser,
   user: userState,
   summitPhase: clockState.summit_phase,
-  chatSettings: settingState.widgets.chat,
+  chatSettings: settingState.widgets.chat
 });
 
 export default connect(mapStateToProps)(AccessTracker);

package/src/components/AuthComponent.js

@@ -129,10 +129,13 @@ const AuthComponent = ({
 
     const sendCode = (email) => {
         setUserEmail(email);
-        getPasswordlessCode(email).then(({ response }) => {
+        return getPasswordlessCode(email).then(({ response }) => {
             setOtpLength(response.otp_length);
             setOtpLogin(true);
-        });
+        }).catch((err) => {
+            const errorMessage = err.response?.body?.error || err.message;
+            return Promise.reject(new Error(errorMessage));
+        })
     }
 
     const siteSettings = useSiteSettings();

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/DisqusComponent.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import { connect } from "react-redux";
 import { DiscussionEmbed } from "disqus-react";
 import { withMarketingSettings, MARKETING_SETTINGS_KEYS } from "@utils/useMarketingSettings";
@@ -6,61 +6,53 @@ import { getEnvVariable, DISQUS_SHORTNAME } from "@utils/envVariables";
 import { getDisqusSSO } from "../actions/user-actions";
 import PropTypes from "prop-types";
 
-const DisqusComponent = class extends React.Component {
+const DisqusComponent = ({summit, sponsor, event, disqusSSO, hideMobile, title, style, className, page, skipTo, ...props}) => {
+  const [isMobile, setIsMobile] = useState(false);
+  const shortname = getEnvVariable(DISQUS_SHORTNAME);
+  const { auth: remoteAuthS3, public_key: apiKey } = disqusSSO || {};
+  const almostTwoHours = 1000 * 60 * 60 * 1.9;
 
-  constructor(props) {
-    super(props);
+  useEffect(() => {
+    // Resize Handler
+    window.addEventListener('resize', onResize);
+    setIsMobile(window.innerWidth <= 768);
 
-    this.state = {
-      isMobile: false
-    };
+    return () => {
+      window.removeEventListener('resize', onResize);
+    }
+  }, []);
 
-    this.getIdentifier = this.getIdentifier.bind(this);
-    this.getTitle = this.getTitle.bind(this);
-  }
+  // check Disqus SSO on every render
+  useEffect(() => {
+    let disqusSsoInterval = null;
 
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.onResize);
-  }
+    if (shortname) {
+      props.getDisqusSSO(shortname);
 
-  componentDidMount() {
-    const shortname = getEnvVariable(DISQUS_SHORTNAME);
-    if (shortname)
-      this.props.getDisqusSSO(shortname).catch((e) => console.log(e));
-
-    window.addEventListener('resize', this.onResize);
-    if (window.innerWidth <= 768) {
-      this.setState({ isMobile: true })
-    } else {
-      this.setState({ isMobile: false })
+      // Edge case: if component has not rendered for more than 2hrs, we need to force a SSO token refresh.
+      disqusSsoInterval = setInterval(() => {
+        props.getDisqusSSO(shortname);
+      }, almostTwoHours);
     }
-  }
 
-  onResize = () => {
-    if (window.innerWidth <= 768 && this.state.isMobile === false) {
-      this.setState({ isMobile: true })
-    }
-    if (window.innerWidth > 768 && this.state.isMobile === true) {
-      this.setState({ isMobile: false })
+    return () => {
+      if (disqusSsoInterval) {
+        clearInterval(disqusSsoInterval);
+      }
     }
-  };
-
-  getIdentifier() {
-    const {
-      summit,
-      page,
-      sponsor,
-      event,
-      getMarketingSettingByKey
-    } = this.props;
+  });
 
-    let threadsBy = getMarketingSettingByKey(MARKETING_SETTINGS_KEYS.disqusThreadsBy) ?? "event";
+  const onResize = () => {
+    setIsMobile(window.innerWidth <= 768);
+  };
 
+  const getIdentifier = () => {
+    const threadsBy = props.getMarketingSettingByKey(MARKETING_SETTINGS_KEYS.disqusThreadsBy) ?? "event";
     let identifier = null;
 
     if (event) {
-      let eventExcludes = getMarketingSettingByKey(MARKETING_SETTINGS_KEYS.disqusExcludeEvents) ?? [];
-      let trackExcludes = getMarketingSettingByKey(MARKETING_SETTINGS_KEYS.disqusExcludeTracks) ?? [];
+      const eventExcludes = props.getMarketingSettingByKey(MARKETING_SETTINGS_KEYS.disqusExcludeEvents) ?? [];
+      const trackExcludes = props.getMarketingSettingByKey(MARKETING_SETTINGS_KEYS.disqusExcludeTracks) ?? [];
 
       identifier = eventExcludes.includes(event.id) ? `summit/${summit.id}/event/${event.id}` : null;
 
@@ -95,20 +87,12 @@ const DisqusComponent = class extends React.Component {
     return identifier;
   }
 
-  getTitle() {
-    const {
-      summit,
-      page,
-      sponsor,
-      event,
-      getMarketingSettingByKey
-    } = this.props;
-
+  const getTitle = () => {
     let suffix = '';
-    const threadsBy = getMarketingSettingByKey(MARKETING_SETTINGS_KEYS.disqusThreadsBy) ?? "event";
+    const threadsBy = props.getMarketingSettingByKey(MARKETING_SETTINGS_KEYS.disqusThreadsBy) ?? "event";
 
     if (event) {
-      const trackExcludes = getMarketingSettingByKey(MARKETING_SETTINGS_KEYS.disqusExcludeTracks) ?? [];
+      const trackExcludes = props.getMarketingSettingByKey(MARKETING_SETTINGS_KEYS.disqusExcludeTracks) ?? [];
       if (event.track && event.track.id && (threadsBy === 'track' || trackExcludes.includes(event.track.id))) {
         suffix += ' - ';
         suffix += event.track.name;
@@ -133,49 +117,40 @@ const DisqusComponent = class extends React.Component {
     return `${summit.name}${suffix}`;
   }
 
-  render() {
-    const { isMobile } = this.state || null;
-    const { disqusSSO, hideMobile = null } = this.props;
-
-    if (!disqusSSO || (hideMobile !== null && hideMobile === isMobile)) {
-      return null;
-    }
+  if (!disqusSSO || (hideMobile !== null && hideMobile === isMobile)) {
+    return null;
+  }
 
-    const { auth: remoteAuthS3, public_key: apiKey } = disqusSSO;
-    const shortname = getEnvVariable(DISQUS_SHORTNAME);
+  if (!remoteAuthS3 || !apiKey || !shortname) {
+    let error = 'Disqus misconfiguration: ';
+    if (!remoteAuthS3) error = ` ${error} ${!remoteAuthS3 ? 'SSO remoteAuthS3 missing' : ''}`;
+    if (!apiKey) error = ` ${error} ${!apiKey ? 'SSO apiKey missing' : ''}`;
+    if (!shortname) error = ` ${error} ${!shortname ? 'DISQUS_SHORTNAME env var missing' : ''}`;
+    return error;
+  }
 
-    if (!remoteAuthS3 || !apiKey || !shortname) {
-      let error = 'Disqus misconfiguration: ';
-      if (!remoteAuthS3) error = ` ${error} ${!remoteAuthS3 ? 'SSO remoteAuthS3 missing' : ''}`;
-      if (!apiKey) error = ` ${error} ${!apiKey ? 'SSO apiKey missing' : ''}`;
-      if (!shortname) error = ` ${error} ${!shortname ? 'DISQUS_SHORTNAME env var missing' : ''}`;
-      return error;
-    }
+  const disqusConfig = {
+    url: window.location.href,
+    identifier: getIdentifier(),
+    title: getTitle(),
+    remoteAuthS3: remoteAuthS3,
+    apiKey: apiKey
+  };
 
-    const disqusConfig = {
-      url: window.location.href,
-      identifier: this.getIdentifier(),
-      title: this.getTitle(),
-      remoteAuthS3: remoteAuthS3,
-      apiKey: apiKey
-    };
-
-    const { title, style, className, page, skipTo } = this.props;
-    const sectionClass = className ? className : style || page === 'marketing-site' ? '' : 'disqus-container';
-
-    return (
-      <section aria-labelledby={title ? 'disqus-title' : ''} className={sectionClass} style={style}>
-        <div className="disqus-header">
-          {skipTo && <a className="sr-only skip-to-next" href={skipTo}>Skip to next section</a>}
-          {title && <h2 id="disqus-title" className="title">{title}</h2>}
-        </div>
-        <DiscussionEmbed
-          shortname={shortname}
-          config={disqusConfig}
-        />
-      </section>
-    );
-  }
+  const sectionClass = className ? className : style || page === 'marketing-site' ? '' : 'disqus-container';
+
+  return (
+    <section aria-labelledby={title ? 'disqus-title' : ''} className={sectionClass} style={style}>
+      <div className="disqus-header">
+        {skipTo && <a className="sr-only skip-to-next" href={skipTo}>Skip to next section</a>}
+        {title && <h2 id="disqus-title" className="title">{title}</h2>}
+      </div>
+      <DiscussionEmbed
+        shortname={shortname}
+        config={disqusConfig}
+      />
+    </section>
+  );
 };
 
 const mapStateToProps = ({ summitState, userState }) => ({

package/src/components/FullSchedule.js

@@ -27,7 +27,7 @@ const FullSchedule = ({
   ...rest
 }) => {
   const { getSettingByKey } = useMarketingSettings();
-  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.schedultDefaultImage);
+  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.scheduleDefaultImage);
   const summitLogoPrint = getSettingByKey(MARKETING_SETTINGS_KEYS.fullScheduleSummitLogoPrint);
   const componentProps = {
     title: "Schedule",

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/LiteScheduleComponent.js

@@ -5,7 +5,7 @@ import {connect} from "react-redux";
 // these two libraries are client-side only
 import LiteSchedule from "lite-schedule-widget/dist";
 import "lite-schedule-widget/dist/index.css";
-// awesome-bootstrap-checkbox css dependency 
+// awesome-bootstrap-checkbox css dependency
 // https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.2/awesome-bootstrap-checkbox.min.css
 // injected through HeadComponents
 
@@ -26,7 +26,7 @@ const LiteScheduleComponent = ({
    ...rest
 }) => {
   const { getSettingByKey } = useMarketingSettings();
-  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.schedultDefaultImage);
+  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.scheduleDefaultImage);
   const scheduleState = schedules?.find( s => s.key === schedKey);
 
   const componentProps = {

package/src/components/LiveEventWidgetComponent.js

@@ -5,7 +5,7 @@ import {connect} from "react-redux";
 // these two libraries are client-side only
 import LiveEventWidget from 'live-event-widget/dist/index.js';
 import 'live-event-widget/dist/index.css';
-// awesome-bootstrap-checkbox css dependency 
+// awesome-bootstrap-checkbox css dependency
 // https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.2/awesome-bootstrap-checkbox.min.css
 // injected through HeadComponents
 
@@ -20,9 +20,8 @@ const LiveEventWidgetComponent = ({
   ...rest
 }) => {
   const { getSettingByKey } = useMarketingSettings();
-  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.schedultDefaultImage);
+  const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.scheduleDefaultImage);
   const scheduleState = schedules?.find( s => s.key === 'schedule-main');
-
   const widgetProps = {
     title: "",
     defaultImage: defaultImage,

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: "42px",
+  fontWeight: 600,
+  lineHeight: 1.125
+};
+
+const subtitleStyle = {
+  color: "var(--color_text_light)",
+  fontFamily: "var(--font_family)",
+  fontSize: "36px",
+  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;