@openeventkit/event-site 2.0.143 → 2.0.145

package/src/components/UpcomingEventsComponent.js

@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 // these two libraries are client-side only
 import UpcomingEvents from "upcoming-events-widget/dist";
 import "upcoming-events-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
 
@@ -27,7 +27,7 @@ const UpcomingEventsComponent = ({
 }) => {
   const wrapperClass = page === "marketing-site" ? "schedule-container-marketing" : "schedule-container";
   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 componentProps = {

package/src/components/VimeoPlayer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Player from '@vimeo/player';
+import * as Sentry from "@sentry/react";
 import eventNames from './VimeoPlayerEventNames';
 import Swal from 'sweetalert2';
 
@@ -387,6 +388,7 @@ VimeoPlayer.defaultProps = {
     onError: (error) => {
         Swal.fire('Error', 'This video stream will begin momentarily. Please standby.', "warning");
         console.log(error);
+        Sentry.captureException(error)
     }
 };
 

package/src/components/summit-my-orders-tickets/components/TicketPopup/TicketPopupEditDetailsForm/TicketPopupEditDetailsForm.js

@@ -28,13 +28,13 @@ import { DelegatePopup } from '../../DelegatePopup/DelegatePopup';
 const noop = () => {};
 
 export const TicketPopupEditDetailsForm = ({
-    ticket,
-    summit,
-    order,
-    canEditTicketData,
-    goToReassignPanel,
-    context
-}) => {
+                                               ticket,
+                                               summit,
+                                               order,
+                                               canEditTicketData,
+                                               goToReassignPanel,
+                                               context
+                                           }) => {
     const formRef = useRef(null);
     const { t } = useTranslation();
     const dispatch = useDispatch();
@@ -53,7 +53,7 @@ export const TicketPopupEditDetailsForm = ({
         daysUntilReassignDeadline,
         isUnassigned,
         allowsDelegate
-    } = useTicketDetails({ ticket, summit });    
+    } = useTicketDetails({ ticket, summit });
 
     const { onTicketAssignChange } = useTicketAssignedContext();
 
@@ -73,9 +73,9 @@ export const TicketPopupEditDetailsForm = ({
         } = ticket.owner || {};
 
         const formattedExtraQuestions = extra_questions ?
-            extra_questions.map(({ question_id, value }) => (
-                { question_id, value }
-            )) : [];
+          extra_questions.map(({ question_id, value }) => (
+            { question_id, value }
+          )) : [];
 
         return {
             [TicketKeys.email]: email,
@@ -129,22 +129,22 @@ export const TicketPopupEditDetailsForm = ({
 
         if(isDelegating) {
             dispatch(delegateTicket(params))
-                .then(() => toggleSaveMessage())
-                .catch((error) => console.error(error))
-                .then(() => {
-                    formikHelpers.resetForm({ values });
-                    formikHelpers.setSubmitting(false);
-                    setIsDelegating(false);
-                });
+              .then(() => toggleSaveMessage())
+              .catch((error) => console.error(error))
+              .then(() => {
+                  formikHelpers.resetForm({ values });
+                  formikHelpers.setSubmitting(false);
+                  setIsDelegating(false);
+              });
         } else {
             dispatch(editOwnedTicket(params))
-                .then(() => toggleSaveMessage())
-                .catch((error) => console.error(error))
-                .then(() => {
-                    // Note: Need to do this to persist the extra question values
-                    formikHelpers.resetForm({ values });
-                    formikHelpers.setSubmitting(false);
-                });
+              .then(() => toggleSaveMessage())
+              .catch((error) => console.error(error))
+              .then(() => {
+                  // Note: Need to do this to persist the extra question values
+                  formikHelpers.resetForm({ values });
+                  formikHelpers.setSubmitting(false);
+              });
         }
 
     };
@@ -163,16 +163,16 @@ export const TicketPopupEditDetailsForm = ({
 
     const handleDelegateAccept = () => {
         setShowDelegate(false);
-        setIsDelegating(true);        
+        setIsDelegating(true);
         formik.resetForm({
             values: {
-              ...formik.values,
-              [TicketKeys.firstName]: "",
-              [TicketKeys.lastName]: "",
-              [TicketKeys.disclaimerAccepted]: false,
-              [TicketKeys.extraQuestions]: []
+                ...formik.values,
+                [TicketKeys.firstName]: "",
+                [TicketKeys.lastName]: "",
+                [TicketKeys.disclaimerAccepted]: false,
+                [TicketKeys.extraQuestions]: []
             }
-          });
+        });
     };
 
     const handleDelegateReject = () => {
@@ -255,46 +255,46 @@ export const TicketPopupEditDetailsForm = ({
     }
 
     return (
-        <div className="ticket-popup-edit-details-form">
-            {showSaveMessage &&
+      <div className="ticket-popup-edit-details-form">
+          {showSaveMessage &&
             <CSSTransition
-                unmountOnExit
-                in={showSaveMessage}
-                timeout={2000}
-                classNames="fade-in-out"
+              unmountOnExit
+              in={showSaveMessage}
+              timeout={2000}
+              classNames="fade-in-out"
             >
                 <Alert bsStyle="success" className="ticket-popup-form-alert text-center">
                     {t("tickets.save_message")}
                 </Alert>
             </CSSTransition>
-            }
+          }
 
-            {showUnassignMessage &&
+          {showUnassignMessage &&
             <CSSTransition
-                unmountOnExit
-                in={showUnassignMessage}
-                timeout={2000}
-                classNames="fade-in-out"
+              unmountOnExit
+              in={showUnassignMessage}
+              timeout={2000}
+              classNames="fade-in-out"
             >
                 <Alert bsStyle="success" className="ticket-popup-form-alert text-center">
                     {t("tickets.unassign_success_message")}
                 </Alert>
             </CSSTransition>
-            }
-
-            <div className="ticket-popup-form-body columns is-multiline">
-
-                <div className="attendee-info column is-full">
-                    <h4 className="pb-3">{t("ticket_popup.edit_basic_info")}</h4>
-                    <label htmlFor={TicketKeys.email}>Email</label>
-                    <Input
-                        id={TicketKeys.email}
-                        name={TicketKeys.email}
-                        className="form-control"
-                        value={initialValues[TicketKeys.email]}
-                        disabled={true}
-                    />
-                    {isUserTicketOwner && isReassignable &&
+          }
+
+          <div className="ticket-popup-form-body columns is-multiline">
+
+              <div className="attendee-info column is-full">
+                  <h4 className="pb-3">{t("ticket_popup.edit_basic_info")}</h4>
+                  <label htmlFor={TicketKeys.email}>Email</label>
+                  <Input
+                    id={TicketKeys.email}
+                    name={TicketKeys.email}
+                    className="form-control"
+                    value={initialValues[TicketKeys.email]}
+                    disabled={true}
+                  />
+                  {isUserTicketOwner && isReassignable &&
                     <div className="mt-1">
                         <span onClick={() => goToReassignPanel()}>
                             <u>Reassign</u>
@@ -304,124 +304,122 @@ export const TicketPopupEditDetailsForm = ({
                             <u>Unassign</u>
                         </span>
                     </div>
-                    }
-                </div>
+                  }
+              </div>
+
+              <div className="attendee-info column is-full">
+                  <label htmlFor={TicketKeys.firstName}>
+                      {t("ticket_popup.edit_first_name")}
+                      {!initialValues[TicketKeys.firstName] && <b> *</b>}
+                  </label>
+                  <Input
+                    id={TicketKeys.firstName}
+                    name={TicketKeys.firstName}
+                    className="form-control"
+                    placeholder={t("ticket_popup.edit_first_name_placeholder")}
+                    value={formik.values[TicketKeys.firstName]}
+                    onBlur={formik.handleBlur}
+                    onChange={!!initialValues[TicketKeys.firstName] && !isDelegating ? noop : formik.handleChange}
+                    disabled={!!initialValues[TicketKeys.firstName] && !isDelegating}
+                  />
+                  {(formik.touched[TicketKeys.firstName] || triedSubmitting) && formik.errors[TicketKeys.firstName] &&
+                    <p className="error-label">{t("ticket_popup.edit_required")}</p>
+                  }
+              </div>
+
+              <div className="attendee-info column is-full">
+                  <label htmlFor={TicketKeys.lastName}>
+                      {t("ticket_popup.edit_last_name")}
+                      {!initialValues[TicketKeys.lastName] && <b> *</b>}
+                  </label>
+                  <Input
+                    id={TicketKeys.lastName}
+                    name={TicketKeys.lastName}
+                    className="form-control"
+                    placeholder={t("ticket_popup.edit_last_name_placeholder")}
+                    value={formik.values[TicketKeys.lastName]}
+                    onBlur={formik.handleBlur}
+                    onChange={!!initialValues[TicketKeys.lastName] && !isDelegating ? noop : formik.handleChange}
+                    disabled={!!initialValues[TicketKeys.lastName] && !isDelegating}
+                  />
+                  {(formik.touched[TicketKeys.lastName] || triedSubmitting) && formik.errors[TicketKeys.lastName] &&
+                    <p className="error-label">{t("ticket_popup.edit_required")}</p>
+                  }
+              </div>
 
+              {allowsDelegate &&
                 <div className="attendee-info column is-full">
-                    <label htmlFor={TicketKeys.firstName}>
-                        {t("ticket_popup.edit_first_name")}
-                        {!initialValues[TicketKeys.firstName] && <b> *</b>}
-                    </label>
-                    <Input
-                        id={TicketKeys.firstName}
-                        name={TicketKeys.firstName}
-                        className="form-control"
-                        placeholder={t("ticket_popup.edit_first_name_placeholder")}
-                        value={formik.values[TicketKeys.firstName]}
-                        onBlur={formik.handleBlur}
-                        onChange={!!initialValues[TicketKeys.firstName] && !isDelegating ? noop : formik.handleChange}
-                        disabled={!!initialValues[TicketKeys.firstName] && !isDelegating}
-                    />
-                    {(formik.touched[TicketKeys.firstName] || triedSubmitting) && formik.errors[TicketKeys.firstName] &&
-                    <p className="error-label">{t("ticket_popup.edit_required")}</p>
-                    }
+                    <button className="button-text" type='button' onClick={() => setShowDelegate(true)}>Delegate</button>
                 </div>
+              }
 
+              {showCompanyInput &&
                 <div className="attendee-info column is-full">
-                    <label htmlFor={TicketKeys.lastName}>
-                        {t("ticket_popup.edit_last_name")}
-                        {!initialValues[TicketKeys.lastName] && <b> *</b>}
+                    <label htmlFor={TicketKeys.company}>
+                        {t("ticket_popup.edit_company")}
+                        {!initialValues[TicketKeys.company].name && <b> *</b>}
                     </label>
-                    <Input
-                        id={TicketKeys.lastName}
-                        name={TicketKeys.lastName}
-                        className="form-control"
-                        placeholder={t("ticket_popup.edit_last_name_placeholder")}
-                        value={formik.values[TicketKeys.lastName]}
-                        onBlur={formik.handleBlur}
-                        onChange={!!initialValues[TicketKeys.lastName] && !isDelegating ? noop : formik.handleChange}
-                        disabled={!!initialValues[TicketKeys.lastName] && !isDelegating}
+                    <RegistrationCompanyInput
+                      id={TicketKeys.company}
+                      name={TicketKeys.company}
+                      summitId={summit.id}
+                      placeholder={t("ticket_popup.edit_company_placeholder")}
+                      value={formik.values[TicketKeys.company]}
+                      onBlur={formik.handleBlur}
+                      onChange={!!initialValues[TicketKeys.company].name ? noop : formik.handleChange}
+                      disabled={!!initialValues[TicketKeys.company].name}
+                      defaultOptions={showCompanyInputDefaultOptions}
+                      openMenuOnFocus={showCompanyInputDefaultOptions}
+                      openMenuOnClick={showCompanyInputDefaultOptions}
+                      styles={{
+                          menu: (base) => ({ ...base, zIndex: 9999 }),
+                      }}
+                      tabSelectsValue={false}
                     />
-                    {(formik.touched[TicketKeys.lastName] || triedSubmitting) && formik.errors[TicketKeys.lastName] &&
-                    <p className="error-label">{t("ticket_popup.edit_required")}</p>
+                    {(formik.touched[TicketKeys.company] || triedSubmitting) && formik.errors[TicketKeys.company] &&
+                      <p className="error-label">{t("ticket_popup.edit_required")}</p>
                     }
                 </div>
+              }
 
-                {allowsDelegate && 
-                    <div className="attendee-info column is-full">
-                        <button className="button-text" type='button' onClick={() => setShowDelegate(true)}>Delegate</button>
-                    </div>
-                }
-
-                {showCompanyInput &&
-                    <div className="attendee-info column is-full">
-                        <label htmlFor={TicketKeys.company}>
-                            {t("ticket_popup.edit_company")}
-                            {!initialValues[TicketKeys.company].name && <b> *</b>}
-                        </label>
-                        <RegistrationCompanyInput
-                            id={TicketKeys.company}
-                            name={TicketKeys.company}
-                            summitId={summit.id}
-                            placeholder={t("ticket_popup.edit_company_placeholder")}
-                            value={formik.values[TicketKeys.company]}
-                            onBlur={formik.handleBlur}
-                            onChange={!!initialValues[TicketKeys.company].name ? noop : formik.handleChange}
-                            disabled={!!initialValues[TicketKeys.company].name}
-                            defaultOptions={showCompanyInputDefaultOptions}
-                            openMenuOnFocus={showCompanyInputDefaultOptions}
-                            openMenuOnClick={showCompanyInputDefaultOptions}
-                            menuPortalTarget={document.body}
-                            menuPosition="fixed"
-                            styles={{
-                                menuPortal: (base) => ({ ...base, zIndex: 9999 }),                            
-                            }}
-                            tabSelectsValue={false}
-                        />
-                        {(formik.touched[TicketKeys.company] || triedSubmitting) && formik.errors[TicketKeys.company] &&
-                        <p className="error-label">{t("ticket_popup.edit_required")}</p>
-                        }
-                    </div>
-                }
-
-                {(initialValues[TicketKeys.firstName] || initialValues[TicketKeys.lastName] || initialValues[TicketKeys.company].name) &&
+              {(initialValues[TicketKeys.firstName] || initialValues[TicketKeys.lastName] || initialValues[TicketKeys.company].name) &&
                 <div className="column is-full pb-5">
                     {t("ticket_popup.assign_note")}
                 </div>
-                }
+              }
 
-                {hasExtraQuestions &&
+              {hasExtraQuestions &&
                 <div className="column is-full pt-5">
                     <h4 className="pb-2">{t("ticket_popup.edit_preferences")}</h4>
                     <ExtraQuestionsForm
-                        // This key is added to trigger a new render when the extra questions are resetted on delegation
-                        key={formik.values[TicketKeys.extraQuestions].length}
-                        ref={formRef}
-                        extraQuestions={extraQuestions}
-                        userAnswers={formik.values[TicketKeys.extraQuestions]}
-                        onAnswerChanges={onExtraQuestionsAnswersSet}
-                        allowExtraQuestionsEdit={canEditTicketData || isDelegating}
-                        questionContainerClassName={`columns is-multiline extra-question pt-3`}
-                        questionLabelContainerClassName={'column is-full pb-0'}
-                        questionControlContainerClassName={`column is-full pt-0`}
-                        shouldScroll2FirstError={false}
-                        onError={handleExtraQuestionError}
+                      // This key is added to trigger a new render when the extra questions are resetted on delegation
+                      key={formik.values[TicketKeys.extraQuestions].length}
+                      ref={formRef}
+                      extraQuestions={extraQuestions}
+                      userAnswers={formik.values[TicketKeys.extraQuestions]}
+                      onAnswerChanges={onExtraQuestionsAnswersSet}
+                      allowExtraQuestionsEdit={canEditTicketData || isDelegating}
+                      questionContainerClassName={`columns is-multiline extra-question pt-3`}
+                      questionLabelContainerClassName={'column is-full pb-0'}
+                      questionControlContainerClassName={`column is-full pt-0`}
+                      shouldScroll2FirstError={false}
+                      onError={handleExtraQuestionError}
                     />
                 </div>
-                }
+              }
 
-                {summit.registration_disclaimer_content &&
+              {summit.registration_disclaimer_content &&
                 <div className="column is-full attendee-info abc-checkbox disclaimer mt-3">
                     <div className='input-wrapper'>
                         <input
-                            type="checkbox"
-                            id={TicketKeys.disclaimerAccepted}
-                            name={TicketKeys.disclaimerAccepted}
-                            onBlur={formik.handleBlur}
-                            onChange={(e) =>
-                                formik.setFieldTouched(TicketKeys.disclaimerAccepted, true) && formik.handleChange(e)
-                            }
-                            checked={formik.values[TicketKeys.disclaimerAccepted]}
+                          type="checkbox"
+                          id={TicketKeys.disclaimerAccepted}
+                          name={TicketKeys.disclaimerAccepted}
+                          onBlur={formik.handleBlur}
+                          onChange={(e) =>
+                            formik.setFieldTouched(TicketKeys.disclaimerAccepted, true) && formik.handleChange(e)
+                          }
+                          checked={formik.values[TicketKeys.disclaimerAccepted]}
                         />
                         <label htmlFor={TicketKeys.disclaimerAccepted}>
                             {summit.registration_disclaimer_mandatory && <b> *</b>}
@@ -433,36 +431,36 @@ export const TicketPopupEditDetailsForm = ({
                         </RawHTML>
                     </div>
                     {(formik.touched[TicketKeys.disclaimerAccepted] || triedSubmitting) && formik.errors[TicketKeys.disclaimerAccepted] &&
-                        <p className="error-label">{t("ticket_popup.edit_required")}</p>
+                      <p className="error-label">{t("ticket_popup.edit_required")}</p>
                     }
                 </div>
-                }
-            </div>
+              }
+          </div>
 
-            {canSubmitChanges() &&
+          {canSubmitChanges() &&
             <div className="ticket-popup-footer">
                 <button
-                    type="button"
-                    className="btn btn-primary"
-                    disabled={formik.isSubmitting}
-                    onClick={triggerSubmit}
+                  type="button"
+                  className="btn btn-primary"
+                  disabled={formik.isSubmitting}
+                  onClick={triggerSubmit}
                 >
                     {!formik.isSubmitting && <>{t("ticket_popup.save_changes")}</>}
                     {formik.isSubmitting && <>{t("ticket_popup.saving_changes")}...</>}
                 </button>
             </div>
-            }
-            <ConfirmPopup
-                isOpen={showConfirm}
-                popupCase={CONFIRM_POPUP_CASE.UNASSIGN_TICKET}
-                onAccept={handleConfirmAccept}
-                onReject={handleConfirmReject}
-            />
-            <DelegatePopup
-                isOpen={showDelegate}                
-                onAccept={handleDelegateAccept}
-                onReject={handleDelegateReject}
-            />
-        </div>
+          }
+          <ConfirmPopup
+            isOpen={showConfirm}
+            popupCase={CONFIRM_POPUP_CASE.UNASSIGN_TICKET}
+            onAccept={handleConfirmAccept}
+            onReject={handleConfirmReject}
+          />
+          <DelegatePopup
+            isOpen={showDelegate}
+            onAccept={handleDelegateAccept}
+            onReject={handleDelegateReject}
+          />
+      </div>
     );
 };

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/reducers/event-reducer.js

@@ -1,7 +1,7 @@
 import { START_LOADING, STOP_LOADING } from "openstack-uicore-foundation/lib/utils/actions";
 import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
 import {GET_EVENT_DATA, GET_EVENT_DATA_ERROR, RELOAD_EVENT_STATE, SET_EVENT_LAST_UPDATE, GET_EVENT_STREAMING_INFO} from "../actions/event-actions-definitions";
-import {RESET_STATE} from "../actions/base-actions-definitions";
+import {RESET_STATE, SYNC_DATA} from "../actions/base-actions-definitions";
 
 const DEFAULT_STATE = {
   loading: false,
@@ -14,6 +14,7 @@ const eventReducer = (state = DEFAULT_STATE, action) => {
   const { type, payload } = action
 
   switch (type) {
+
     case RESET_STATE:
     case LOGOUT_USER:
     {
@@ -32,6 +33,18 @@ const eventReducer = (state = DEFAULT_STATE, action) => {
       const updatedEvent = event.id  === state?.event?.id ? {...state, ...event} : event;
       return { ...state, loading: false, event: updatedEvent, tokens: null };
     }
+    case SYNC_DATA:{
+      // update current event if we have one on data sync
+      const {eventsData, eventsIDXData } = payload;
+      if(state?.event){
+        const idx = eventsIDXData[state?.event?.id] || null;
+        if(idx) {
+          const updatedEvent = eventsData[idx];
+          return {...state, loading: false, event: updatedEvent, tokens: null};
+        }
+      }
+      return state;
+    }
     case GET_EVENT_DATA_ERROR: {
       return { ...state, loading: false, event: null, tokens: null }
     }

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;