@openeventkit/event-site 1.0.48 → 1.0.50

package/gatsby-node.js

@@ -20,6 +20,7 @@ const {
   COLORS_SASS_FILE_PATH,
   SITE_SETTINGS_FILE_PATH,
   LOBBY_PAGE_FILE_PATH,
+  EXPO_HALL_PAGE_FILE_PATH,
   SUMMIT_FILE_PATH,
   EVENTS_FILE_PATH,
   EVENTS_IDX_FILE_PATH,
@@ -224,10 +225,11 @@ exports.onPreBootstrap = async () => {
 
   const summitId = process.env.GATSBY_SUMMIT_ID;
   const summitApiBaseUrl = process.env.GATSBY_SUMMIT_API_BASE_URL;
-  const marketingSettings = await SSR_getMarketingSettings(process.env.GATSBY_MARKETING_API_BASE_URL, summitId);
+  let   marketingSettings = await SSR_getMarketingSettings(process.env.GATSBY_MARKETING_API_BASE_URL, summitId);
   const colorSettings = fs.existsSync(COLORS_FILE_PATH) ? JSON.parse(fs.readFileSync(COLORS_FILE_PATH)) : require(`./${DEFAULT_COLORS_FILE_PATH}`);
   const globalSettings = fs.existsSync(SITE_SETTINGS_FILE_PATH) ? JSON.parse(fs.readFileSync(SITE_SETTINGS_FILE_PATH)) : {};
   const lobbyPageSettings = fs.existsSync(LOBBY_PAGE_FILE_PATH) ? JSON.parse(fs.readFileSync(LOBBY_PAGE_FILE_PATH)) : {};
+  const expoHallPageSettings = fs.existsSync(EXPO_HALL_PAGE_FILE_PATH) ? JSON.parse(fs.readFileSync(EXPO_HALL_PAGE_FILE_PATH)) : {};
 
   const config = {
     client: {
@@ -245,9 +247,12 @@ exports.onPreBootstrap = async () => {
 
   const accessToken = await getAccessToken(config, process.env.GATSBY_BUILD_SCOPES).then(({ token }) => token.access_token);
 
+  const FileType = 'FILE';
   // extract colors from marketing settings
-  marketingSettings.map(({ key, value }) => {
-    if (key.startsWith("color_")) colorSettings[key] = value;
+  marketingSettings = marketingSettings.map( entry => {
+    if (entry.key.startsWith("color_")) colorSettings[entry.key] = entry.value;
+    if(entry.type === FileType) return {...entry, value: entry.file};
+    return {...entry};
   });
 
   // create required directories
@@ -260,6 +265,7 @@ exports.onPreBootstrap = async () => {
   fs.writeFileSync(MARKETING_SETTINGS_FILE_PATH, JSON.stringify(marketingSettings), "utf8");
   fs.writeFileSync(COLORS_FILE_PATH, JSON.stringify(colorSettings), "utf8");
   fs.writeFileSync(LOBBY_PAGE_FILE_PATH, JSON.stringify(lobbyPageSettings), "utf8");
+  fs.writeFileSync(EXPO_HALL_PAGE_FILE_PATH, JSON.stringify(expoHallPageSettings), "utf8");
 
   let sassColors = "";
   Object.entries(colorSettings).forEach(([key, value]) => sassColors += `$${key} : ${value};\n`);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",
@@ -42,7 +42,7 @@
     "font-awesome": "^4.7.0",
     "formik": "^2.2.9",
     "fs-extra": "^9.0.1",
-    "full-schedule-widget": "^2.0.35",
+    "full-schedule-widget": "^2.0.36",
     "gatsby": "^5.8.1",
     "gatsby-alias-imports": "^1.0.6",
     "gatsby-plugin-image": "^3.8.0",
@@ -117,7 +117,7 @@
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",
-    "summit-registration-lite": "^4.0.18",
+    "summit-registration-lite": "4.0.21",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
     "upcoming-events-widget": "2.0.8",

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

@@ -55,7 +55,7 @@ const fetchBucket = async (etagKeyPre, dataKeyPre, fileName, summitId, lastBuild
 
     if (eTag) headers.headers = {'If-None-Match': eTag};
 
-    console.log(`fetchBucket ${url} eTag ${eTag} lastModifiedStored ${lastModifiedStored} lastBuildTime ${lastBuildTime}`);
+    //console.log(`fetchBucket ${url} eTag ${eTag} lastModifiedStored ${lastModifiedStored} lastBuildTime ${lastBuildTime}`);
 
     return fetch(url, {
         method: 'GET',

package/src/cms/config/collections/configurationsCollection/siteSettings/index.js

@@ -62,6 +62,12 @@ const siteSettings = {
           label: "Chat",
           name: "chat",
           fields: [
+            booleanField({
+              label: "Enabled?",
+              name: "enabled",
+              required: true,
+              default: true
+            }),
             booleanField({
               label: "Show QA",
               name: "showQA",

package/src/cms/config/collections/configurationsCollection/siteSettings/typeDefs.js

@@ -13,6 +13,7 @@ module.exports = `
     allowClick: Boolean
   }
   type Chat {
+    enabled: Boolean
     showQA: Boolean
     showHelp: Boolean
     defaultScope: String

package/src/cms/config/collections/defaultPagesCollection/expoHallPage/index.js

@@ -0,0 +1,39 @@
+import {    
+  stringField,
+  objectField,
+  imageWithAltField
+} from "../../../fields";
+
+import {
+  EXPO_HALL_PAGE_FILE_PATH
+} from "@utils/filePath";
+
+const expoHallPage = {
+  label: "Expo Hall Page",
+  name: "expo-hall-page",
+  file: EXPO_HALL_PAGE_FILE_PATH,
+  fields: [
+    objectField({
+      label: "Hero",
+      name: "hero",
+      fields: [
+        stringField({
+          label: "Title",
+          name: "title"
+        }),
+        stringField({
+          label: "Subtitle",
+          name: "subTitle",
+          required: false
+        }),
+        imageWithAltField({
+          label: "Background Image",
+          name: "background"
+        })
+      ]
+    })
+  ]
+};
+
+export default expoHallPage;
+  

package/src/cms/config/collections/defaultPagesCollection/expoHallPage/typeDefs.js

@@ -0,0 +1,15 @@
+
+module.exports = `
+  type ImageWithAlt {
+    src: File @fileByRelativePath
+    alt: String
+  }
+  type ExpoHallPageHero {
+    title: String
+    subTitle: String
+    background: ImageWithAlt
+  }
+  type ExpoHallPageJson implements Node {
+    hero: ExpoHallPageHero
+  }
+`;

package/src/cms/config/collections/defaultPagesCollection/index.js

@@ -4,6 +4,7 @@ import {
 
 import marketingPage from "./marketingPage";
 import lobbyPage from "./lobbyPage";
+import expoHallPage from "./expoHallPage";
 
 const defaultPagesCollection = {
   ...collectionDefaults({
@@ -12,7 +13,8 @@ const defaultPagesCollection = {
   }),
   files: [
     marketingPage,
-    lobbyPage
+    lobbyPage,
+    expoHallPage
   ]
 };
 

package/src/cms/config/collections/defaultPagesCollection/lobbyPage/index.js

@@ -60,6 +60,22 @@ const lobbyPage = {
       label: "Live Event Widget - Featured Event",
       name: "liveNowFeaturedEventId",
       required: false
+    }),
+    objectField({
+      label: "Sponsors Widget Button",
+      name: "sponsorsWidgetButton",
+      fields: [
+        stringField({
+          label: "Text",
+          name: "text",
+          required: false
+        }),
+        stringField({
+          label: "Link",
+          name: "link",
+          required: false
+        }),
+      ]
     })
   ]
 };

package/src/cms/config/collections/defaultPagesCollection/lobbyPage/typeDefs.js

@@ -1,5 +1,9 @@
 
 module.exports = `
+  type Button {
+    text: String
+    link: String
+  }
   type ImageWithAlt {
     src: File @fileByRelativePath
     alt: String
@@ -20,5 +24,6 @@ module.exports = `
     hero: LobbyPageHero
     centerColumn: LobbyPageCenterColumn
     liveNowFeaturedEventId: String
+    sponsorsWidgetButton: Button
   }
 `;

package/src/cms/config/collections/defaultPagesCollection/typeDefs.js

@@ -1,7 +1,9 @@
 const marketingPageTypeDefs = require("./marketingPage/typeDefs");
 const lobbyPageTypeDefs = require("./lobbyPage/typeDefs");
+const expoHallPageTypeDefs = require("./expoHallPage/typeDefs");
 
 module.exports = [
   marketingPageTypeDefs,
-  lobbyPageTypeDefs
+  lobbyPageTypeDefs,
+  expoHallPageTypeDefs
 ].join("");

package/src/cms/config/index.js

@@ -32,4 +32,8 @@ const config = {
   collections: collections
 };
 
+if (!!CMS_BACKEND_REPO && !!CMS_BACKEND_BRANCH) {
+  config.local_backend = true;
+}
+
 export default config;

package/src/components/AttendeeToAttendeeWidgetComponent.js

@@ -32,7 +32,7 @@ const sbAuthProps = {
 
 const adminGroups = ["administrators", "super-admins"];
 
-export const AttendeesWidget = ({ user, event, chatSettings }) => {
+const AttendeesWidgetComponent = ({ user, event, chatSettings }) => {
   const [loading, setLoading] = useState(true);
 
   //Deep linking support
@@ -163,6 +163,8 @@ export const AttendeesWidget = ({ user, event, chatSettings }) => {
     ...sbAuthProps,
   };
 
+  if (!chatSettings?.enabled) return null;
+
   return (
     <div style={{ margin: "20px auto", position: "relative" }}>
         <Sentry.ErrorBoundary fallback={SentryFallbackFunction({componentName: 'Attendee To Attendee'})}>
@@ -175,7 +177,13 @@ export const AttendeesWidget = ({ user, event, chatSettings }) => {
   );
 };
 
-const AccessTracker = ({ user, isLoggedUser, summitPhase }) => {
+const mapState = ({ settingState }) => ({
+  chatSettings: settingState.widgets.chat,
+});
+
+export const AttendeesWidget = connect(mapState)(AttendeesWidgetComponent);
+
+const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
   const trackerRef = useRef();
 
   const handleLogout = useCallback(() => {
@@ -260,6 +268,8 @@ const AccessTracker = ({ user, isLoggedUser, summitPhase }) => {
     ...sbAuthProps,
   };
 
+  if (!chatSettings.enabled) return null;
+
   return <Tracker {...widgetProps} ref={trackerRef} />;
 };
 
@@ -267,7 +277,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/FullSchedule.js

@@ -28,6 +28,7 @@ const FullSchedule = ({
 }) => {
   const { getSettingByKey } = useMarketingSettings();
   const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.schedultDefaultImage);
+  const summitLogoPrint = getSettingByKey(MARKETING_SETTINGS_KEYS.fullScheduleSummitLogoPrint);
   const componentProps = {
     title: "Schedule",
     summit,
@@ -35,6 +36,7 @@ const FullSchedule = ({
     userProfile,
     withThumbs: false,
     defaultImage: defaultImage,
+    summitLogoPrint: summitLogoPrint ? summitLogoPrint : null,
     showSendEmail: false,
     onStartChat: null,
     shareLink: getShareLink(filters, view),

package/src/components/HeroComponent.js

@@ -8,7 +8,7 @@ const HeroComponent = ({ title, subtitle, event, redirectTo, options = {} }) =>
   }, [redirectTo]);
 
   return (
-    <section className={`hero is-fullheight ${event ? 'talk__break' : ''}`}>
+    <section className={`hero ${event ? 'talk__break' : 'is-fullheight'}`}>
       <div className="hero-body">
         <div className={`${event ? '' : 'container has-text-centered'}`}>
           <h1 className="title">{title}</h1>

package/src/components/RegistrationLiteComponent.js

@@ -111,7 +111,6 @@ const RegistrationLiteComponent = ({
 
     const inPersonDisclaimer = getSettingByKey(MARKETING_SETTINGS_KEYS.registrationInPersonDisclaimer);
     const allowPromoCodes = !!Number(getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteAllowPromoCodes));
-    const companyInputPlaceholder = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteCompanyInputPlaceholder);
     const companyDDLPlaceholder = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteCompanyDDLPlaceholder);
     const initialOrderComplete1stParagraph = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteInitialOrderComplete1stParagraph)
     const initialOrderComplete2ndParagraph = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteInitialOrderComplete2ndParagraph)
@@ -178,7 +177,6 @@ const RegistrationLiteComponent = ({
             });
         },
         allowPromoCodes: allowPromoCodes,
-        companyInputPlaceholder: companyInputPlaceholder,
         companyDDLPlaceholder: companyDDLPlaceholder,
         supportEmail: getEnvVariable(SUPPORT_EMAIL),
         initialOrderComplete1stParagraph: initialOrderComplete1stParagraph,

package/src/components/SponsorComponent.js

@@ -1,17 +1,17 @@
-import React from 'react'
+import * as React from "react";
 import { connect } from "react-redux";
 import Slider from "react-slick";
-import Link from '../components/Link'
-import { getSponsorURL } from '../utils/urlFormating'
+import Link from "../components/Link";
+import { getSponsorURL } from "../utils/urlFormating";
 
-import styles from '../styles/sponsor.module.scss'
+import styles from "../styles/sponsor.module.scss";
 
-const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
+const SponsorComponent = ({ page, sponsorsState, linkButton }) => {
   let renderButton = false;
 
   let sponsorsByTier = sponsorsState.reduce((memo, x) => {
-    if (!memo[x['sponsorship'].type.name]) { memo[x['sponsorship'].type.name] = []; }
-    memo[x['sponsorship'].type.name].push(x);
+    if (!memo[x["sponsorship"].type.name]) { memo[x["sponsorship"].type.name] = []; }
+    memo[x["sponsorship"].type.name].push(x);
     return memo;
   }, {});
 
@@ -24,16 +24,16 @@ const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
       {Object.values(sponsorsByTier).sort((a, b) => a.order - b.order).map((tier, tierIndex) => {        
         const sponsors = tier.sponsors.sort((a, b) => a.order - b.order);
         if (!tier) return null;
-        const template = page === 'lobby' ? tier.lobby_template : page === 'event' ? tier.event_page_template : 'expo-hall';
+        const template = page === "lobby" ? tier.lobby_template : page === "event" ? tier.event_page_template : "expo-hall";
         if (sponsors?.length > 0) {
           renderButton = true;
           switch (template) {
-            case 'big-images': {
-              if (page === 'lobby' && !tier.should_display_on_lobby_page) {
+            case "big-images": {
+              if (page === "lobby" && !tier.should_display_on_lobby_page) {
                 return null
               } else {
                 return (
-                  <div className={`${tierIndex === 0 ? styles.firstContainer : ''} ${styles.bigImageContainer}`} key={tierIndex}>
+                  <div className={`${tierIndex === 0 ? styles.firstContainer : ""} ${styles.bigImageContainer}`} key={tierIndex}>
                     {tier.widget_title &&
                       <span><b>{tier.widget_title}</b></span>
                     }
@@ -59,17 +59,17 @@ const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
                 )
               }
             }
-            case 'small-images': {
-              if (page === 'lobby' && !tier.should_display_on_lobby_page) {
+            case "small-images": {
+              if (page === "lobby" && !tier.should_display_on_lobby_page) {
                 return null
               } else {
                 return (
-                  <div className={`${tierIndex === 0 ? styles.firstContainer : ''} ${styles.smallImageContainer}`} key={tierIndex}>
+                  <div className={`${tierIndex === 0 ? styles.firstContainer : ""} ${styles.smallImageContainer}`} key={tierIndex}>
                     {tier.widget_title &&
                       <span><b>{tier.widget_title}</b></span>
                     }
                     {sponsors.map((sponsor, index) => {
-                      if (page === 'event' && !sponsor.showLogoInEventPage) return null
+                      if (page === "event" && !sponsor.showLogoInEventPage) return null
                       return (
                         (!sponsor.company.big_logo && !sponsor.company.logo) ?
                         null 
@@ -96,9 +96,9 @@ const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
                 )
               }
             }
-            case 'horizontal-images': {
+            case "horizontal-images": {
               return (
-                <div className={`${tierIndex === 0 ? styles.firstContainer : ''} ${styles.horizontalContainer} px-6`} key={tierIndex}>
+                <div className={`${tierIndex === 0 ? styles.firstContainer : ""} ${styles.horizontalContainer} px-6`} key={tierIndex}>
                   {sponsors.map((sponsor, index) => {
                     return (
                       (!sponsor.company.big_logo && !sponsor.company.logo) ?
@@ -125,7 +125,7 @@ const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
                 </div>
               )
             }
-            case 'expo-hall': {
+            case "expo-hall": {
               return tier.should_display_on_expo_hall_page === true && (
                 <div className={`${styles.expoContainer} px-6`} key={tierIndex}>
                   {sponsors.map((sponsor, index) => {
@@ -136,7 +136,7 @@ const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
                       sponsor.is_published ?
                         <div className={`
                           ${styles.imageBox} 
-                          ${tier.expo_hall_template === 'big-images' ? styles.large : tier.expo_hall_template === 'medium-images' ? styles.medium : styles.small}`}
+                          ${tier.expo_hall_template === "big-images" ? styles.large : tier.expo_hall_template === "medium-images" ? styles.medium : styles.small}`}
                           key={`${tier.type.label}-${index}`}
                         >
                           <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}`}>
@@ -146,7 +146,7 @@ const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
                         : sponsor.external_link ?
                           <div className={`
                           ${styles.imageBox} 
-                          ${tier.expo_hall_template === 'big-images' ? styles.large : tier.expo_hall_template === 'medium-images' ? styles.medium : styles.small}`}
+                          ${tier.expo_hall_template === "big-images" ? styles.large : tier.expo_hall_template === "medium-images" ? styles.medium : styles.small}`}
                             key={`${tier.type.label}-${index}`}
                           >
                             <Link to={sponsor.external_link}>
@@ -156,7 +156,7 @@ const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
                           :
                           <div className={`
                           ${styles.imageBox} 
-                          ${tier.expo_hall_template === 'big-images' ? styles.large : tier.expo_hall_template === 'medium-images' ? styles.medium : styles.small}`}
+                          ${tier.expo_hall_template === "big-images" ? styles.large : tier.expo_hall_template === "medium-images" ? styles.medium : styles.small}`}
                             key={`${tier.type.label}-${index}`}
                           >
                             <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
@@ -166,23 +166,23 @@ const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
                 </div>
               )
             }
-            case 'carousel': {
-              if (page === 'lobby' && !tier.should_display_on_lobby_page) {
+            case "carousel": {
+              if (page === "lobby" && !tier.should_display_on_lobby_page) {
                 return null
               } else {
                 const sliderSettings = {
                   autoplay: true,
                   autoplaySpeed: 5000,
                   infinite: true,
-                  className: 'sponsor-carousel',
+                  className: "sponsor-carousel",
                   dots: false,
                   slidesToShow: 1,
                   slidesToScroll: 1
                 };
                 return (
-                  <div className={`${tierIndex === 0 ? styles.firstContainer : ''} ${styles.carouselContainer}`} key={tierIndex}>
+                  <div className={`${tierIndex === 0 ? styles.firstContainer : ""} ${styles.carouselContainer}`} key={tierIndex}>
                     {tier.widget_title &&
-                      <span style={{ marginBottom: '0' }}><b>{tier.widget_title}</b></span>
+                      <span style={{ marginBottom: "0" }}><b>{tier.widget_title}</b></span>
                     }
                     <Slider {...sliderSettings}>
                       {sponsors.map((sponsor, index) => {
@@ -219,10 +219,10 @@ const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
           return null;
         }
       })}
-      {page === 'lobby' && lobbyButton.text && lobbyButton.link && renderButton &&
-        <Link className={styles.link} to={lobbyButton.link}>
+      {linkButton?.text && linkButton?.link && renderButton &&
+        <Link className={styles.link} to={linkButton.link}>
           <button className={`${styles.button} button is-large`}>
-            {lobbyButton.text}
+            {linkButton.text}
           </button>
         </Link>
       }
@@ -231,8 +231,7 @@ const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
 };
 
 const mapStateToProps = ({ sponsorState }) => ({
-  sponsorsState: sponsorState.sponsors,
-  lobbyButton: sponsorState.lobbyButton
+  sponsorsState: sponsorState.sponsors
 });
 
-export default connect(mapStateToProps, {})(SponsorComponent);
+export default connect(mapStateToProps, {})(SponsorComponent);

package/src/components/summit-my-orders-tickets/components/MyOrdersTickets.js

@@ -6,7 +6,6 @@ import { AjaxLoader } from "openstack-uicore-foundation/lib/components";
 import { getUserOrders } from '../store/actions/order-actions';
 import { getUserTickets } from '../store/actions/ticket-actions';
 import { OrderList } from './OrderList/OrderList';
-import { OrderListContextProvider } from './OrderList/OrderList.helpers';
 import { TicketList } from './TicketList/TicketList';
 
 export const MyOrdersTickets = ({ className }) => {
@@ -63,10 +62,8 @@ export const MyOrdersTickets = ({ className }) => {
             )}
 
             <div className={classNames('my-orders-tickets', className)}>
-                {hasOrders && (
-                    <OrderListContextProvider>
-                        <OrderList />
-                    </OrderListContextProvider>
+                {hasOrders && (                    
+                    <OrderList />
                 )}
 
                 {(hasOrders && hasTickets) && (

package/src/components/summit-my-orders-tickets/components/OrderDetails/OrderDetails.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react"
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import classNames from 'classnames';
 import { getNow } from "../../store/actions/timer-actions";
@@ -11,7 +11,7 @@ import {
     getSummitFormattedDate,
     formatCurrency
 } from "../../util";
-import { useOrderListContext } from "../OrderList/OrderList.helpers";
+import { setActiveOrderId } from "../../store/actions/order-actions";
 
 import './order-details.scss';
 
@@ -20,16 +20,21 @@ export const OrderDetails = ({ order, summit, className }) => {
 
     const { t } = useTranslation();
     const dispatch = useDispatch();
-    const { state, actions } = useOrderListContext();
+
+    const {
+        activeOrderId
+    } = useSelector(state => state.orderState || {});
 
     const isSummitPast = checkSummitPast(summit, dispatch(getNow()));
     const statusData = getOrderStatusData(order, isSummitPast);
-    const isActive = state.activeOrderId === order.id;
+    const isActive = activeOrderId === order.id;
+
+    const handleSetOrderActive = (orderId) => dispatch(setActiveOrderId( orderId ));
 
     const handleClick = (event) => {
-        if (isActive) return actions.setActiveOrderId(null);
+        if (isActive) return handleSetOrderActive(null);
 
-        actions.setActiveOrderId(order.id);
+        handleSetOrderActive(order.id);
 
         setTimeout(() => {
             const offset = getDocumentOffset(elementRef.current);
@@ -42,7 +47,7 @@ export const OrderDetails = ({ order, summit, className }) => {
     };
 
     // Clear active order on unmount (i.e., when page pagination changes)
-    useEffect(() => () => actions.setActiveOrderId(null), []);
+    useEffect(() => () => setActiveOrderId(null), []);
 
     return (
         <div

package/src/components/summit-my-orders-tickets/components/OrderList/OrderList.js

@@ -6,7 +6,6 @@ import classNames from 'classnames';
 import { getUserOrders } from "../../store/actions/order-actions";
 import { getTicketsByOrder } from "../../store/actions/ticket-actions";
 import { OrderListItem } from './OrderListItem';
-import { useOrderListContext } from "./OrderList.helpers";
 
 import './order-list.scss';
 
@@ -19,6 +18,7 @@ export const OrderList = ({ className }) => {
         current_page: currentPage,
         last_page: lastPage,
         per_page: perPage,
+        activeOrderId,
         total
     } = useSelector(state => state.orderState || {});
 
@@ -28,8 +28,6 @@ export const OrderList = ({ className }) => {
         }        
     } = useSelector(state => state.ticketState || {});
 
-    const { state : { activeOrderId } } = useOrderListContext();
-
     const handlePageChange = (page) => dispatch(getUserOrders({ page, perPage }));
 
     const handleTicketPageChange = (orderId, page) => dispatch(getTicketsByOrder({ orderId, page }));

package/src/components/summit-my-orders-tickets/components/OrderList/OrderListItem.js

@@ -5,21 +5,24 @@ import { OrderDetails } from '../OrderDetails/OrderDetails';
 import { OrderSummary } from '../OrderSummary/OrderSummary';
 import { OrderTicketList } from '../OrderTicketList/OrderTicketList';
 import { OrderOptions } from "../OrderOptions/OrderOptions";
-import { useOrderListContext } from "./OrderList.helpers";
 import Pager from "../../../Pager";
 
 export const OrderListItem = ({ order, className, changeTicketsPage }) => {
     const summit = useSelector(state => state.summitState.summit);
-    const { state } = useOrderListContext();
 
     const {
         orderTickets: {
             total, per_page, current_page, last_page, tickets
         },
-        loading
+        loading,
     } = useSelector(state => state.ticketState || {});
 
-    const isActive = state.activeOrderId === order.id;
+    const {
+        activeOrderId,
+        isOrderLoading
+    } = useSelector(state => state.orderState || {});
+
+    const isActive = activeOrderId === order.id;
 
     return (
         <li className={classNames('order-list__item', { 'order-list__item--active': isActive }, className)}>
@@ -27,7 +30,7 @@ export const OrderListItem = ({ order, className, changeTicketsPage }) => {
                 <div className="col-md-8">
                     <OrderDetails order={order} summit={summit} />
 
-                    {isActive && tickets.length > 0 && (
+                    {!isOrderLoading && isActive && tickets.length > 0 && (
                         <>
                             <OrderSummary type="mobile" order={order} summit={summit} tickets={tickets}/>
 

package/src/components/summit-my-orders-tickets/store/actions/order-actions.js

@@ -23,6 +23,7 @@ import history from '../history';
 
 export const GET_USER_ORDERS = 'GET_ORDERS';
 export const REFUND_ORDER = 'REFUND_ORDER';
+export const SET_ACTIVE_ORDER_ID = 'SET_ACTIVE_ORDER_ID';
 
 export const getUserOrders = ({ page = 1, perPage = 5 }) => async (dispatch, getState, { getAccessToken, apiBaseUrl, loginUrl }) => {
     const { summitState: { summit } } = getState();
@@ -81,4 +82,8 @@ export const cancelOrder = ({ order }) => async (dispatch, getState, { getAccess
         dispatch(stopLoading());
         return e;
     });
-};
+};
+
+export const setActiveOrderId = (orderId) => async (dispatch, getState) => {
+    return dispatch(createAction(SET_ACTIVE_ORDER_ID)(orderId));
+}