@openeventkit/event-site 2.0.77 → 2.0.79

package/env.template

@@ -31,4 +31,5 @@ GATSBY_SENTRY_RELEASE=
 GATSBY_METADATA_TITLE=
 GATSBY_METADATA_DESCRIPTION=
 GATSBY_CMS_BACKEND_REPO=
-GATSBY_CMS_BACKEND_BRANCH=
+GATSBY_CMS_BACKEND_BRANCH=
+GATSBY_URL=

package/gatsby-ssr.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import ReduxWrapper from "./src/state/ReduxWrapper";
+import ReduxSSRWrapper from "./src/state/ReduxSSRWrapper";
 import { 
   HtmlAttributes,
   HeadComponents,
@@ -9,7 +9,7 @@ import {
 import { JSDOM } from "jsdom";
 import { XMLHttpRequest } from "xmlhttprequest";
 
-export const wrapRootElement = ReduxWrapper;
+export const wrapRootElement = ReduxSSRWrapper;
 
 export const onRenderBody = ({
   setHtmlAttributes,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.77",
+  "version": "2.0.79",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",

package/src/components/Seo.js

@@ -1,29 +1,34 @@
 import * as React from "react";
 import PropTypes from "prop-types";
+import useSiteMetadata from "@utils/useSiteMetadata";
 import useSiteSettings from "@utils/useSiteSettings";
-import { Helmet } from "react-helmet";
 import { getSrc } from "gatsby-plugin-image";
-import { getUrl } from "@utils/urlFormating";
+import { buildUrl } from "@utils/urlFormating";
+import { getEnvVariable, SITE_URL } from "@utils/envVariables";
 
 const Seo = ({ title, description, location, children }) => {
   const {
-    siteMetadata: {
-      title: siteTitle,
-      description: defaultDescription,
-      image
-    }
-  } = useSiteSettings();
-  const host = typeof window !== "undefined" ? window.location.host : null;
-  const scheme = typeof window !== "undefined" ? window.location.protocol.replace(":", "") : "https";
+    title: siteTitle,
+    description: defaultDescription
+  } = useSiteMetadata();
+
+  const siteSettings = useSiteSettings();
+  const image = siteSettings.siteMetadata?.image
+
+  const siteUrl = getEnvVariable(SITE_URL);
+  const siteUrlInfo = siteUrl ? new URL(siteUrl) : null;
+  const scheme = siteUrlInfo ? siteUrlInfo.protocol.replace(":", "") : "https";
+  const host = siteUrlInfo ? siteUrlInfo.host : null;
   const { pathname } = location;
+
   const seo = {
     title: title ? `${siteTitle} - ${title}` : siteTitle,
     description: description || defaultDescription,
-    url: getUrl(scheme, host, pathname),
-    image: host && image ? getUrl(scheme, host, getSrc(image)) : null,
+    url: buildUrl(scheme, host, pathname),
+    image: host && image ? buildUrl(scheme, host, getSrc(image)) : null,
   };
   return (
-    <Helmet>
+    <>
       {seo.title && <title>{seo.title}</title>}
       {seo.description && <meta name="description" content={seo.description} />}
       {seo.url && <meta property="og:url" content={seo.url} />}
@@ -38,7 +43,7 @@ const Seo = ({ title, description, location, children }) => {
       {seo.description && <meta name="twitter:description" content={seo.description} />}
       {seo.image && <meta name="twitter:image" content={seo.image} />}
       {children}
-    </Helmet>
+    </>
   );
 };
 

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

@@ -140,18 +140,20 @@ export const TicketPopup = ({ ticket, order, summit, onClose, fromTicketList, fr
                             </TabPanel>
                         )}
 
-                        <TabPanel className="ticket-popup-panel ticket-popup-panel--edit">
-                            <div className="ticket-popup-scroll">
-                                <TicketPopupEditDetailsForm
-                                    ticket={ticket}
-                                    summit={summit}
-                                    order={order}
-                                    canEditTicketData={canEditTicketData}
-                                    goToReassignPanel={() => setTabIndex(1)}
-                                    context={fromTicketList ? 'ticket-list' : 'order-list'}
-                                />
-                            </div>
-                        </TabPanel>
+                        {!isUnassigned && (
+                            <TabPanel className="ticket-popup-panel ticket-popup-panel--edit">
+                                <div className="ticket-popup-scroll">
+                                    <TicketPopupEditDetailsForm
+                                        ticket={ticket}
+                                        summit={summit}
+                                        order={order}
+                                        canEditTicketData={canEditTicketData}
+                                        goToReassignPanel={() => setTabIndex(1)}
+                                        context={fromTicketList ? 'ticket-list' : 'order-list'}
+                                    />
+                                </div>
+                            </TabPanel>
+                        )}
 
                         {!isUnassigned && isReassignable && isUserOrderOwner && (
                             <TabPanel className="ticket-popup-panel ticket-popup-panel--reassign">

package/src/reducers/index.js

@@ -0,0 +1,23 @@
+import { loggedUserReducer } from "openstack-uicore-foundation/lib/security/reducers";
+import settingReducer from "./setting-reducer";
+import userReducer from "./user-reducer";
+import clockReducer from "./clock-reducer";
+import summitReducer from "./summit-reducer";
+import allSchedulesReducer from "./all-schedules-reducer";
+import presentationsReducer from "./presentations-reducer";
+import eventReducer from "./event-reducer";
+import speakerReducer from "./speaker-reducer";
+import sponsorReducer from "./sponsor-reducer";
+
+export {
+  loggedUserReducer,
+  settingReducer,
+  userReducer,
+  clockReducer,
+  summitReducer,
+  allSchedulesReducer,
+  presentationsReducer,
+  eventReducer,
+  speakerReducer,
+  sponsorReducer,
+};

package/src/routes/WithAuthRoute.js

@@ -1,31 +1,21 @@
-import React from "react";
-import {connect} from "react-redux";
-import {navigate} from "gatsby";
+import * as React from "react";
+import { navigate } from "gatsby";
 
 /**
- *
- * @param isLoggedIn
- * @param location
- * @param children
- * @returns {null|*}
- * @constructor
+ * @param {boolean} isLoggedIn - Indicates whether the user is logged in.
+ * @param {object} location - The location object from React Router.
+ * @param {ReactNode} children - The children components to be rendered.
+ * @returns {ReactNode|null} - Returns children if isLoggedIn is true, otherwise redirects to login.
  */
-const WithAuthRoute = ({
-
-                           isLoggedIn,
-                           location,
-                           children
-                       }) => {
-
+const WithAuthRoute = ({ isLoggedIn, location, children }) => {
+  React.useEffect(() => {
     if (!isLoggedIn) {
-        // reject it and redirect with current location to login
-        navigate("/#login=1", {state: {backUrl: `${location.pathname}`,},});
-        return null;
+      // Use navigate with state to redirect and add data to navigation state
+      navigate("/#login=1", { state: { backUrl: `${location.pathname}` } });
     }
+  }, [isLoggedIn, location.pathname]);
 
-    return children;
+  return isLoggedIn ? children : null;
 };
 
-const mapStateToProps = ({}) => ({});
-
-export default connect(mapStateToProps, {})(WithAuthRoute);
+export default WithAuthRoute;

package/src/state/ReduxSSRWrapper.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Provider } from "react-redux";
+import { storeWithoutPersistor } from "./store";
+
+export default ({ element }) => (
+  <Provider store={storeWithoutPersistor}>
+    {element}
+  </Provider>
+);

package/src/state/ReduxWrapper.js

@@ -1,23 +1,23 @@
-import React  from "react";
+import * as React from "react";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
-import store, { persistor } from "./store";
+import { store, persistor } from "./store";
 
 import { RESET_STATE } from "../actions/base-actions-definitions";
 
 const onBeforeLift = () => {
-    const params = new URLSearchParams(window.location.search);
-    const flush = params.has("flushState");
+  const params = new URLSearchParams(window.location.search);
+  const flush = params.has("flushState");
 
-    if (flush) {
-        store.dispatch({ type: RESET_STATE, payload: null });
-    }
+  if (flush) {
+    store.dispatch({ type: RESET_STATE, payload: null });
+  }
 };
 
 export default ({ element }) => (
-    <Provider store={store}>
-        <PersistGate onBeforeLift={onBeforeLift} persistor={persistor}>
-            {element}
-        </PersistGate>
-    </Provider>
+  <Provider store={store}>
+    <PersistGate onBeforeLift={onBeforeLift} persistor={persistor}>
+      {element}
+    </PersistGate>
+  </Provider>
 );

package/src/state/store.js

@@ -1,68 +1,67 @@
-import { applyMiddleware, compose, createStore } from "redux";
+import { applyMiddleware, compose, createStore, combineReducers } from "redux";
 import { persistCombineReducers, persistStore } from "redux-persist";
+import storage from "redux-persist/lib/storage";
 import thunk from "redux-thunk";
-import storage from "./reduxPersistStorage";
 
-import { loggedUserReducer } from "openstack-uicore-foundation/lib/security/reducers";
-import settingReducer from "../reducers/setting-reducer";
-import userReducer from "../reducers/user-reducer";
-import clockReducer from "../reducers/clock-reducer";
-import summitReducer from "../reducers/summit-reducer";
-import allSchedulesReducer from "../reducers/all-schedules-reducer";
-import presentationsReducer from "../reducers/presentations-reducer";
-import eventReducer from "../reducers/event-reducer";
-import speakerReducer from "../reducers/speaker-reducer";
-import sponsorReducer from "../reducers/sponsor-reducer";
-import extraQuestionReducer from "../reducers/extra-questions-reducer";
+import * as reducers from "../reducers";
 
-// get from process.env bc window is not set yet
+// Get from process.env because window is not set yet
 const clientId = process.env.GATSBY_OAUTH2_CLIENT_ID;
 const summitID = process.env.GATSBY_SUMMIT_ID;
 
 const config = {
   key: `root_${clientId}_${summitID}`,
-  storage: storage,
+  storage,
   blacklist: [
     // this will be not saved to persistent storage see
     // https://github.com/rt2zz/redux-persist#blacklist--whitelist
-    'summitState',
-    'allSchedulesState',
-    'presentationsState',
-    'eventState',
-    'speakerState',
-    'sponsorState',
-  ]
+    "summitState",
+    "allSchedulesState",
+    "presentationsState",
+    "eventState",
+    "speakerState",
+    "sponsorState",
+  ],
 };
 
-const persistedReducers = persistCombineReducers(config, {
-  loggedUserState: loggedUserReducer,
-  settingState: settingReducer,
-  userState: userReducer,
-  allSchedulesState: allSchedulesReducer,
-  clockState: clockReducer,
-  eventState: eventReducer,
-  presentationsState: presentationsReducer,
-  summitState: summitReducer,
-  speakerState: speakerReducer,
-  sponsorState: sponsorReducer,
-  extraQuestionState: extraQuestionReducer
-});
+const states = {
+  loggedUserState: reducers.loggedUserReducer,
+  settingState: reducers.settingReducer,
+  userState: reducers.userReducer,
+  clockState: reducers.clockReducer,
+  summitState: reducers.summitReducer,
+  allSchedulesState: reducers.allSchedulesReducer,
+  presentationsState: reducers.presentationsReducer,
+  eventState: reducers.eventReducer,
+  speakerState: reducers.speakerReducer,
+  sponsorState: reducers.sponsorReducer,
+};
+
+const appendLoggedUser = ({ getState }) => (next) => (action) => {
+  const { userState: { userProfile } } = getState();
+  action.userProfile = userProfile;
+  return next(action);
+};
 
-function appendLoggedUser({ getState }) {
-  return next => action => {
-    const { userState: { userProfile } } = getState();
-    // Call the next dispatch method in the middleware chain.
-    action.userProfile = userProfile;
-    return next(action);
-  }
-}
+const composeEnhancers = typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    : compose;
 
-const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
+const enhancer = composeEnhancers(applyMiddleware(appendLoggedUser, thunk));
 
-const store = createStore(persistedReducers, composeEnhancers(applyMiddleware(appendLoggedUser, thunk)));
+// Create store without persistor
+export const storeWithoutPersistor = createStore(
+    combineReducers(states),
+    enhancer
+);
 
-const onRehydrateComplete = () => {};
+// Create store with persistor
+export const { store, persistor } = (() => {
+  const persistedReducers = persistCombineReducers(config, states);
 
-export const persistor = persistStore(store, null, onRehydrateComplete);
+  const store = createStore(persistedReducers, enhancer);
+  const onRehydrateComplete = () => {};
+  const persistor = persistStore(store, null, onRehydrateComplete);
 
-export default store;
+  return { store, persistor };
+})();

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

@@ -1,16 +1,16 @@
-import React from 'react'
-import {connect} from "react-redux";
-import PropTypes from 'prop-types'
-import {navigate} from 'gatsby'
-import {getEnvVariable, REGISTRATION_BASE_URL} from '../utils/envVariables'
-import HeroComponent from '../components/HeroComponent'
+import * as React from "react";
+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";
 
 export const TicketErrorPageTemplate = class extends React.Component {
 
     constructor(props) {
         super(props);
 
-        const {location} = this.props;
+        const { location } = this.props;
 
         this.state = {
             error: location.state?.error
@@ -18,21 +18,21 @@ export const TicketErrorPageTemplate = class extends React.Component {
     }
 
     redirect() {
-        const {error} = this.state;
+        const { error } = this.state;
 
         if (getEnvVariable(REGISTRATION_BASE_URL)) {
 
             let targetUrl = null;
 
             switch (error) {
-                case 'no-virtual-access':
-                    targetUrl = `/`;
+                case "no-virtual-access":
+                    targetUrl = "/";
                     break
-                case 'no-ticket':
-                    targetUrl = `/#registration=1`;
+                case "no-ticket":
+                    targetUrl = "/#registration=1";
                     break;
-                case 'incomplete':
-                    targetUrl = `/a/extra-questions`;
+                case "incomplete":
+                    targetUrl = "/a/extra-questions";
                     break;
                 default:
                     break;
@@ -46,25 +46,23 @@ export const TicketErrorPageTemplate = class extends React.Component {
             return;
         }
 
-        setTimeout(() => {
-            navigate('/')
-        }, 5000);
+        setTimeout(() => navigate("/"), 5000);
     }
 
     getErrorMessage() {
-        const {error} = this.state;
+        const { error } = this.state;
 
-        let message = '';
+        let message = "";
 
         switch (error) {
-            case 'no-virtual-access':
-                message = 'I’m sorry your badge does not allow access to this section.';
+            case "no-virtual-access":
+                message = "I’m sorry your badge does not allow access to this section.";
                 break;
-            case 'no-ticket':
-                message = 'I’m sorry you are not registered for this event.';
+            case "no-ticket":
+                message = "I’m sorry you are not registered for this event.";
                 break;
-            case 'incomplete':
-                message = 'You have not answered questions required to join the event.';
+            case "incomplete":
+                message = "You have not answered questions required to join the event.";
                 break;
             default:
                 break;
@@ -74,11 +72,13 @@ export const TicketErrorPageTemplate = class extends React.Component {
     }
 
     getRedirectMessage() {
-        const {error} = this.state;
-        let message = '';
+        const { error } = this.state;
+
+        let message = "";
+
         switch (error) {
-            case 'no-ticket':
-                message = getEnvVariable(REGISTRATION_BASE_URL) ? 'You will be redirected to registration.' : '';
+            case "no-ticket":
+                message = getEnvVariable(REGISTRATION_BASE_URL) ? "You will be redirected to registration." : "";
                 break;
             default:
                 break;
@@ -88,7 +88,7 @@ export const TicketErrorPageTemplate = class extends React.Component {
     }
 
     render() {
-        const {error} = this.state;
+        const { error } = this.state;
 
         if (error) {
             this.redirect();
@@ -100,8 +100,7 @@ export const TicketErrorPageTemplate = class extends React.Component {
             )
         }
 
-        navigate('/');
-        return null
+        return <Redirect to={"/"} noThrow />;
     }
 };
 
@@ -109,23 +108,19 @@ TicketErrorPageTemplate.propTypes = {
     location: PropTypes.object,
 };
 
-const TicketErrorPage = ({location, summit}) => {
-
-    return (
-        <TicketErrorPageTemplate
-            location={location}
-            summit={summit}
-        />
-    )
-
-};
+const TicketErrorPage = ({ location, summit }) => (
+    <TicketErrorPageTemplate
+        location={location}
+        summit={summit}
+    />
+);
 
 TicketErrorPage.propTypes = {
     location: PropTypes.object,
 };
 
-const mapStateToProps = ({summitState}) => ({
+const mapStateToProps = ({ summitState }) => ({
     summit: summitState.summit,
 });
 
-export default connect(mapStateToProps, {})(TicketErrorPage);
+export default connect(mapStateToProps, null)(TicketErrorPage);

package/src/utils/envVariables.js

@@ -1,3 +1,4 @@
+export const SITE_URL = 'SITE_URL';
 export const IDP_BASE_URL = 'IDP_BASE_URL';
 export const SUMMIT_API_BASE_URL = 'SUMMIT_API_BASE_URL';
 export const SUMMIT_ID = 'SUMMIT_ID';
@@ -26,6 +27,15 @@ export const TIMEINTERVALSINCE1970_API_URL = 'TIMEINTERVALSINCE1970_API_URL';
 export const ABLY_API_KEY = 'ABLY_API_KEY';
 
 const processEnv = {
+    /**
+     * Retrieve the site URL from environment variable set by the deploy provider.
+     * See documentation for more details:
+     * - Netlify: {@link https://docs.netlify.com/configure-builds/environment-variables/#deploy-urls-and-metadata}
+     * - Cloudflare Pages: {@link https://developers.cloudflare.com/pages/platform/build-configuration#environment-variables}
+     *
+     * If not available, fallback to user-defined GATSBY_SITE_URL env var.
+     */
+    SITE_URL: process.env.GATSBY_URL || process.env.GATSBY_CF_PAGES_URL || process.env.GATSBY_SITE_URL,
     IDP_BASE_URL: process.env.GATSBY_IDP_BASE_URL,
     SUMMIT_API_BASE_URL: process.env.GATSBY_SUMMIT_API_BASE_URL,
     API_BASE_URL: process.env.GATSBY_SUMMIT_API_BASE_URL,
@@ -62,6 +72,7 @@ export const getEnvVariable = (name) => {
 }
 
 if (typeof window === 'object') {
+    window.SITE_URL = processEnv[SITE_URL];
     window.OAUTH2_FLOW = processEnv[OAUTH2_FLOW];
     window.OAUTH2_CLIENT_ID = processEnv[OAUTH2_CLIENT_ID];
     window.SCOPES = processEnv[SCOPES];

package/src/utils/urlFormating.js

@@ -1,5 +1,5 @@
 
-export const getUrl = (scheme, host, pathname) => {
+export const buildUrl = (scheme, host, pathname) => {
   if (!host) return null;
   const domain = `${scheme}://${host}`;
   return `${domain}${pathname ?? "/"}`;

package/src/state/reduxPersistStorage.js

@@ -1,26 +0,0 @@
-/**
- * Create dummy storage on the server-side and wrapper for localStorage on the client-side.
- * @see https://github.com/rt2zz/redux-persist/issues/1208#issuecomment-658695446
- * @see https://stackoverflow.com/questions/57781527/how-to-solve-console-error-redux-persist-failed-to-create-sync-storage-falli
- * @see https://github.com/vercel/next.js/discussions/15687#discussioncomment-45319
- */
-
-import createWebStorage from 'redux-persist/lib/storage/createWebStorage';
-
-const createNoopStorage = () => {
-  return {
-    getItem(_key) {
-      return Promise.resolve(null);
-    },
-    setItem(_key, value) {
-      return Promise.resolve(value);
-    },
-    removeItem(_key) {
-      return Promise.resolve();
-    },
-  };
-};
-
-const storage = typeof window !== 'undefined' ? createWebStorage('local') : createNoopStorage();
-
-export default storage;