@openeventkit/event-site 2.1.50 → 2.1.51

package/gatsby-node.js

@@ -454,6 +454,7 @@ exports.createPages = async ({ actions, graphql }) => {
           }
           frontmatter {
             templateKey
+            slug
           }
           internal {
             contentFilePath
@@ -471,17 +472,33 @@ exports.createPages = async ({ actions, graphql }) => {
   const nodes = result.data.allMdx.nodes;
 
   nodes.forEach((node) => {
-    const { id, fields: { slug }, frontmatter: { templateKey }, internal: { contentFilePath } } = node;
+    const { id, fields: { slug }, frontmatter: { templateKey, slug: frontmatterSlug }, internal: { contentFilePath } } = node;
     const template = require.resolve(`./src/templates/${String(templateKey)}`);
-    // remove content pages namespace from path
-    const path = slug.replace(`${CONTENT_PAGES_PATH_NAME}`, "/");
+    // use frontmatter slug if set, otherwise derive from filename
+    const pagePath = frontmatterSlug
+      ? `/${frontmatterSlug.replace(/^\/+/, '')}/`
+      : slug.replace(`/${CONTENT_PAGES_PATH_NAME}`, "");
     const page = {
-      path: path,
+      path: pagePath,
       component: `${template}?__contentFilePath=${contentFilePath}`,
       context: { id }
     };
     createPage(page);
   });
+
+  // Conditionally create /register page based on registrationMode
+  if (fs.existsSync(SITE_SETTINGS_FILE_PATH)) {
+    const siteSettings = JSON.parse(fs.readFileSync(SITE_SETTINGS_FILE_PATH));
+    const { REGISTRATION_MODE } = require('./src/utils/registrationConstants');
+    const registrationMode = siteSettings.registration?.registrationMode;
+    if (registrationMode === REGISTRATION_MODE.standalone) {
+      createPage({
+        path: '/register/',
+        component: require.resolve('./src/templates/register-page.js'),
+        context: {}
+      });
+    }
+  }
 };
 
 exports.onCreatePage = async ({ page, actions }) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.1.50",
+  "version": "2.1.51",
   "author": "Tipit LLC",
   "dependencies": {
     "@emotion/server": "^11.11.0",
@@ -55,7 +55,7 @@
     "font-awesome": "^4.7.0",
     "formik": "^2.4.6",
     "fs-extra": "^11.3.0",
-    "full-schedule-widget": "3.1.2-beta.1",
+    "full-schedule-widget": "3.1.3",
     "gatsby": "^5.13.5",
     "gatsby-alias-imports": "^1.0.6",
     "gatsby-plugin-decap-cms": "^4.0.4",
@@ -135,7 +135,7 @@
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",
-    "summit-registration-lite": "6.0.8",
+    "summit-registration-lite": "7.0.0",
     "superagent": "8.0.9",
     "sweetalert2": "^11.11.1",
     "upcoming-events-widget": "3.0.7",

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

@@ -24,6 +24,7 @@ import {
 } from "@utils/envVariables";
 
 import { mapObjectToSelectOptions } from "../../../utils";
+import { REGISTRATION_MODE } from "@utils/registrationConstants";
 
 const FONT_FORMATS = {
   truetype: "ttf",
@@ -179,6 +180,26 @@ const siteSettings = {
         })
       ]
     }),
+    objectField({
+      label: "Registration",
+      name: "registration",
+      fields: [
+        selectField({
+          label: "Registration Mode",
+          name: "registrationMode",
+          default: REGISTRATION_MODE.modal,
+          required: false,
+          options: mapObjectToSelectOptions(REGISTRATION_MODE),
+          hint: "MODAL: opens the registration form as a popup overlay. STANDALONE: redirects to a dedicated registration page. LINK: redirects to the URL specified in Registration Link, which can be an internal content page with an embedded registration form or an external URL."
+        }),
+        stringField({
+          label: "Registration Link",
+          name: "registrationLink",
+          required: false,
+          hint: "Only used when Registration Mode is LINK. Use a relative path (e.g. /my-page) for an internal page, or a full URL (e.g. https://example.com) for an external site. To embed the registration form in a content page, add the <RegistrationForm /> shortcode in the page body."
+        })
+      ]
+    }),
     objectField({
       label: "IDP Logo",
       name: "idpLogo",

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

@@ -43,12 +43,17 @@ module.exports = `
     providerLogo: File @fileByRelativePath
     providerLogoSize: Float
   }
+  type Registration {
+    registrationMode: String
+    registrationLink: String
+  }
   type MaintenanceMode {
     enabled: Boolean
     title: String
     subtitle: String
   }
   type SiteSettingsJson implements Node {
+    registration: Registration
     siteMetadata: SiteMetadata
     favicon: Favicon
     siteFont: SiteFont

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

@@ -11,6 +11,9 @@ import { CONTENT_PAGES_DIR_PATH } from "@utils/filePath";
 import { USER_REQUIREMENTS } from "@utils/pageAccessConstants";
 
 import { mapObjectToSelectOptions } from "../../utils";
+import shortcodes from "../../../../templates/content-page/shortcodes";
+
+const shortcodesHint = `Available shortcodes: ${Object.keys(shortcodes).map(name => `<${name} />`).join(", ")}`;
 
 const contentPagesCollection = {
   ...collectionDefaults({
@@ -33,6 +36,12 @@ const contentPagesCollection = {
       label: "Title",
       name: "title"
     }),
+    stringField({
+      label: "Slug",
+      name: "slug",
+      required: false,
+      hint: "URL path for this page (e.g. registration). Leave empty to use the default path based on the title. Changing this will change the page URL."
+    }),
     selectField({
       label: "User Requirement",
       name: "userRequirement",
@@ -42,7 +51,8 @@ const contentPagesCollection = {
     }),
     markdownField({
       label: "Body",
-      name: "body"
+      name: "body",
+      hint: shortcodesHint
     })
   ]
 };

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

@@ -6,6 +6,7 @@ module.exports = `
   type MdxFrontmatter {
     templateKey: String
     title: String
+    slug: String
     userRequirement: String
   }
   type Mdx {

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

@@ -78,12 +78,8 @@ const marketingPage = {
                 booleanField({
                   label: "Display",
                   name: "display",
-                  required: false
-                }),
-                stringField({
-                  label: "External Registration Link",
-                  name: "externalRegistrationLink",
-                  required: false
+                  required: false,
+                  hint: "Show or hide the register button on the hero. To change the register button behavior (open registration popup, navigate to standalone registration page, or redirect to an internal page or external URL), go to Site Settings > Registration."
                 }),
               ]
             }),

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

@@ -45,7 +45,6 @@ module.exports = `
   type MarketingPageHeroRegistrationButton {
     text: String
     display: Boolean
-    externalRegistrationLink: String
   }
   type MarketingPageHeroLoginButton {
     text: String

package/src/cms/preview-templates/ContentPagePreview.js

@@ -6,6 +6,7 @@ import Mdx from "../../components/Mdx";
 
 // function to transform content by replacing relative image URLs with absolute ones
 const transformContent = (mdx, getAsset) => {
+    if (!mdx) return "";
     // regex to identify Markdown image tags ![alt](url)
     const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
 
@@ -21,9 +22,19 @@ const transformContent = (mdx, getAsset) => {
     });
 };
 
+// Override shortcodes that require Redux/Gatsby context with placeholders for CMS preview
+const previewShortcodes = {
+    ...shortcodes,
+    RegistrationForm: () => (
+        <div style={{ border: '2px dashed #ccc', padding: '2rem', textAlign: 'center', margin: '1rem 0' }}>
+            <p style={{ fontSize: '1.2rem', color: '#666' }}>Registration Form Widget (preview not available)</p>
+        </div>
+    )
+};
+
 // function to render transformed content with Mdx
 const renderContent = (mdx, getAsset) => (
-    <Mdx shortcodes={shortcodes} content={transformContent(mdx, getAsset)}/>
+    <Mdx shortcodes={previewShortcodes} content={transformContent(mdx, getAsset)}/>
 );
 
 const ContentPagePreview = ({ entry, getAsset }) => {

package/src/components/AuthComponent.js

@@ -12,7 +12,8 @@ import { getThirdPartyProviders } from "../actions/base-actions";
 // these two libraries are client-side only
 import LoginComponent from "summit-registration-lite/dist/components/login";
 import PasswordlessLoginComponent from "summit-registration-lite/dist/components/login-passwordless";
-import "summit-registration-lite/dist/index.css";
+import "summit-registration-lite/dist/components/login.css";
+import "summit-registration-lite/dist/components/login-passwordless.css";
 import IconButton from "./IconButton";
 import Link from "./Link";
 

package/src/components/MarketingHero/MainColumn.js

@@ -1,20 +1,32 @@
 import * as React from "react";
 import { getSrc } from "gatsby-plugin-image";
 import AuthComponent from "../AuthComponent";
-import RegistrationLiteComponent from "../RegistrationLiteComponent";
+import RegistrationModalComponent from "../RegistrationModalComponent";
+import RegisterButton from "../RegisterButton";
+import { REGISTRATION_MODE } from "@utils/registrationConstants";
+import useSiteSettings from "@utils/useSiteSettings";
 
 import styles from "./styles.module.scss";
 
-const ButtonGroup = ({ location, registerButton, loginButton }) => (
-  <>
-    {registerButton?.display && (
-      <span className={styles.link}>
-        <RegistrationLiteComponent location={location} />
-      </span>
-    )}
-    {loginButton?.display && <AuthComponent location={location} />}
-  </>
-);
+const ButtonGroup = ({ location, registerButton, loginButton }) => {
+  const siteSettings = useSiteSettings();
+  const mode = siteSettings?.registration?.registrationMode || REGISTRATION_MODE.modal;
+  return (
+    <>
+      {registerButton?.display && (mode === REGISTRATION_MODE.standalone || mode === REGISTRATION_MODE.link) && (
+        <span className={styles.link}>
+          <RegisterButton />
+        </span>
+      )}
+      {registerButton?.display && mode === REGISTRATION_MODE.modal && (
+        <span className={styles.link}>
+          <RegistrationModalComponent location={location} />
+        </span>
+      )}
+      {loginButton?.display && <AuthComponent location={location} />}
+    </>
+  );
+};
 
 const MainColumn = ({ location, title, subTitle, date, time, buttons, backgroundSrc, fullWidth }) => {
   const backgroundImageStyle = backgroundSrc

package/src/components/RegisterButton.js

@@ -0,0 +1,59 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { navigate } from "gatsby";
+import { connect } from "react-redux";
+
+import IconButton from "./IconButton";
+import iconButtonStyles from "./IconButton/styles.module.scss";
+import { REGISTRATION_MODE } from "@utils/registrationConstants";
+import useSiteSettings from "@utils/useSiteSettings";
+
+const RegisterButton = ({
+   marketingPageSettings,
+   children,
+}) => {
+    const siteSettings = useSiteSettings();
+    const registration = siteSettings?.registration;
+    const mode = registration?.registrationMode || REGISTRATION_MODE.modal;
+
+    const handleClick = () => {
+        if (mode === REGISTRATION_MODE.link && registration?.registrationLink) {
+            const url = registration.registrationLink;
+            const isInternal = /^\/(?!\/)/.test(url);
+            if (isInternal) {
+                navigate(url);
+            } else {
+                window.location = url;
+            }
+            return;
+        }
+        navigate("/register");
+    }
+
+    const { registerButton } = marketingPageSettings.hero.buttons;
+
+    if (children) {
+        return React.cloneElement(children, { onClick: handleClick });
+    }
+
+    if (!registerButton.display) return null;
+
+    return (
+        <IconButton
+            className={iconButtonStyles.register}
+            iconClass="fa fa-2x fa-edit"
+            buttonText={registerButton.text}
+            onClick={handleClick}
+        />
+    );
+};
+
+RegisterButton.propTypes = {
+    children: PropTypes.node,
+};
+
+const mapStateToProps = ({ settingState }) => ({
+    marketingPageSettings: settingState.marketingPageSettings
+});
+
+export default connect(mapStateToProps)(RegisterButton);

package/src/components/RegistrationFormShortcode.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { connect } from "react-redux";
+import { navigate } from "gatsby";
+import * as Sentry from "@sentry/react";
+import NoSsr from "@mui/material/NoSsr";
+
+import { SentryFallbackFunction } from "./SentryErrorComponent";
+import RegistrationForm from "summit-registration-lite/dist/components/registration-form";
+import "summit-registration-lite/dist/components/registration-form.css";
+
+import { setPasswordlessLogin, setUserOrder, checkOrderData, getUserProfile, checkRequireExtraQuestionsByAttendee } from "../actions/user-actions";
+import { getThirdPartyProviders } from "../actions/base-actions";
+import { getExtraQuestions } from "../actions/summit-actions";
+
+import useRegistrationWidgetProps from "@utils/useRegistrationWidgetProps";
+
+const RegistrationFormShortcode = ({
+    summit,
+    userProfile,
+    idpProfile,
+    colorSettings,
+    attendee,
+    availableThirdPartyProviders,
+    allowsNativeAuth,
+    allowsOtpAuth,
+    loadingProfile,
+    loadingIDP,
+    setPasswordlessLogin,
+    setUserOrder,
+    checkOrderData,
+    getUserProfile,
+    getThirdPartyProviders,
+    getExtraQuestions,
+    checkRequireExtraQuestionsByAttendee
+}) => {
+    const backUrl = typeof window !== 'undefined' ? window.location.pathname : '/';
+
+    const widgetProps = useRegistrationWidgetProps({
+        summit, userProfile, idpProfile, attendee, colorSettings,
+        loadingProfile, loadingIDP, availableThirdPartyProviders,
+        allowsNativeAuth, allowsOtpAuth,
+        setPasswordlessLogin, setUserOrder, checkOrderData,
+        getThirdPartyProviders, getExtraQuestions, checkRequireExtraQuestionsByAttendee,
+        backUrl,
+        closeWidget: () => navigate("/"),
+    });
+
+    if (!summit) return null;
+
+    return (
+        <NoSsr>
+            <Sentry.ErrorBoundary fallback={SentryFallbackFunction({componentName: "Registration Form"})}>
+                <div className="summit-registration-lite">
+                    <RegistrationForm {...widgetProps} />
+                </div>
+            </Sentry.ErrorBoundary>
+        </NoSsr>
+    );
+};
+
+const mapStateToProps = ({ userState, summitState, settingState }) => ({
+    loadingProfile: userState.loading,
+    loadingIDP: userState.loadingIDP,
+    userProfile: userState.userProfile,
+    idpProfile: userState.idpProfile,
+    attendee: userState.attendee,
+    availableThirdPartyProviders: summitState.third_party_providers,
+    allowsNativeAuth: summitState.allows_native_auth,
+    allowsOtpAuth: summitState.allows_otp_auth,
+    summit: summitState.summit,
+    colorSettings: settingState.colorSettings,
+});
+
+export default connect(mapStateToProps, {
+    setPasswordlessLogin,
+    setUserOrder,
+    checkOrderData,
+    getUserProfile,
+    getThirdPartyProviders,
+    getExtraQuestions,
+    checkRequireExtraQuestionsByAttendee
+})(RegistrationFormShortcode);

package/src/components/RegistrationModalComponent.js

@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import * as Sentry from "@sentry/react";
+import { connect } from "react-redux";
+
+import FragmentParser from "openstack-uicore-foundation/lib/utils/fragment-parser";
+
+import { getUserProfile, setPasswordlessLogin, setUserOrder, checkOrderData, checkRequireExtraQuestionsByAttendee } from "../actions/user-actions";
+import { getThirdPartyProviders } from "../actions/base-actions";
+import { getExtraQuestions } from "../actions/summit-actions";
+
+import IconButton from "./IconButton";
+import iconButtonStyles from "./IconButton/styles.module.scss";
+import { SentryFallbackFunction } from "./SentryErrorComponent";
+
+import RegistrationModal from "summit-registration-lite/dist/components/registration-modal";
+import "summit-registration-lite/dist/components/registration-modal.css";
+
+import useRegistrationWidgetProps from "@utils/useRegistrationWidgetProps";
+
+const RegistrationModalComponent = ({
+    summit,
+    userProfile,
+    idpProfile,
+    colorSettings,
+    attendee,
+    availableThirdPartyProviders,
+    allowsNativeAuth,
+    allowsOtpAuth,
+    loadingProfile,
+    loadingIDP,
+    marketingPageSettings,
+    setPasswordlessLogin,
+    setUserOrder,
+    checkOrderData,
+    getUserProfile,
+    getThirdPartyProviders,
+    getExtraQuestions,
+    checkRequireExtraQuestionsByAttendee,
+    children,
+    ignoreAutoOpen
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    useEffect(() => {
+        const fragmentParser = new FragmentParser();
+        if (!ignoreAutoOpen && fragmentParser.getParam("registration")) {
+            setIsOpen(true);
+        }
+    }, [ignoreAutoOpen]);
+
+    const handleOpenPopup = () => {
+        setIsOpen(true);
+    };
+
+    const handleClosePopup = () => {
+        setIsOpen(false);
+    };
+
+    const widgetProps = useRegistrationWidgetProps({
+        summit, userProfile, idpProfile, attendee, colorSettings,
+        loadingProfile, loadingIDP, availableThirdPartyProviders,
+        allowsNativeAuth, allowsOtpAuth,
+        setPasswordlessLogin, setUserOrder, checkOrderData,
+        getUserProfile, getThirdPartyProviders, getExtraQuestions,
+        checkRequireExtraQuestionsByAttendee,
+        backUrl: '/#registration=1',
+        closeWidget: handleClosePopup,
+    });
+
+    const { registerButton } = marketingPageSettings.hero.buttons;
+
+    if (!summit) return null;
+
+    return (
+        <Sentry.ErrorBoundary fallback={SentryFallbackFunction({componentName: "Registration Modal"})}>
+            {children ?
+                React.cloneElement(children, { onClick: handleOpenPopup })
+                :
+                registerButton.display &&
+                <IconButton
+                    className={iconButtonStyles.register}
+                    iconClass="fa fa-2x fa-edit"
+                    buttonText={registerButton.text}
+                    onClick={handleOpenPopup}
+                    disabled={isOpen}
+                />
+            }
+            {isOpen && <RegistrationModal {...widgetProps} />}
+        </Sentry.ErrorBoundary>
+    );
+};
+
+RegistrationModalComponent.defaultProps = {
+    ignoreAutoOpen: false,
+};
+
+RegistrationModalComponent.propTypes = {
+    ignoreAutoOpen: PropTypes.bool,
+};
+
+const mapStateToProps = ({ userState, summitState, settingState }) => ({
+    loadingProfile: userState.loading,
+    loadingIDP: userState.loadingIDP,
+    userProfile: userState.userProfile,
+    idpProfile: userState.idpProfile,
+    attendee: userState.attendee,
+    availableThirdPartyProviders: summitState.third_party_providers,
+    allowsNativeAuth: summitState.allows_native_auth,
+    allowsOtpAuth: summitState.allows_otp_auth,
+    summit: summitState.summit,
+    colorSettings: settingState.colorSettings,
+    marketingPageSettings: settingState.marketingPageSettings
+});
+
+export default connect(mapStateToProps, {
+    setPasswordlessLogin,
+    setUserOrder,
+    checkOrderData,
+    getUserProfile,
+    getThirdPartyProviders,
+    getExtraQuestions,
+    checkRequireExtraQuestionsByAttendee
+})(RegistrationModalComponent);

package/src/content/marketing-page/index.json

@@ -6,8 +6,7 @@
     "buttons": {
       "registerButton": {
         "text": "Register Now",
-        "display": true,
-        "externalRegistrationLink": ""
+        "display": true
       },
       "loginButton": {
         "text": "Log In",

package/src/content/site-settings/index.json

@@ -1 +1 @@
-{"favicon":{"asset":"icon.png"},"widgets":{"chat":{"enabled":true,"showQA":false,"showHelp":false,"defaultScope":"page"},"schedule":{"allowClick":true}},"identityProviderButtons":[{"buttonColor":"#082238","providerLabel":"Continue with FNid","providerLogo":"logo_fn.svg","providerLogoSize":27},{"buttonColor":"#0A66C2","providerLabel":"Sign in with LinkedIn","providerParam":"linkedin","providerLogo":"logo_linkedin.svg","providerLogoSize":18},{"buttonColor":"#000000","providerLabel":"Sign in with Apple","providerParam":"apple","providerLogoSize":17,"providerLogo":"logo_apple.svg"},{"buttonColor":"#1877F2","providerLabel":"Login with Facebook","providerParam":"facebook","providerLogo":"logo_facebook.svg","providerLogoSize":20}],"maintenanceMode":{"enabled":false,"title":"Site under maintenance","subtitle":"Please reload page shortly"},"staticJsonFilesBuildTime":[{"file":"src/data/summit.json","build_time":1757078904637},{"file":"src/data/events.json","build_time":1757078906503},{"file":"src/data/events.idx.json","build_time":1757078906506},{"file":"src/data/speakers.json","build_time":1757078907177},{"file":"src/data/speakers.idx.json","build_time":1757078907177},{"file":"src/content/sponsors.json","build_time":1757078912121},{"file":"src/data/voteable-presentations.json","build_time":1757078912473}],"lastBuild":1757078912473}
+{"favicon":{"asset":"icon.png"},"widgets":{"chat":{"enabled":true,"showQA":false,"showHelp":false,"defaultScope":"page"},"schedule":{"allowClick":true}},"identityProviderButtons":[{"buttonColor":"#082238","providerLabel":"Continue with FNid","providerLogo":"logo_fn.svg","providerLogoSize":27},{"buttonColor":"#0A66C2","providerLabel":"Sign in with LinkedIn","providerParam":"linkedin","providerLogo":"logo_linkedin.svg","providerLogoSize":18},{"buttonColor":"#000000","providerLabel":"Sign in with Apple","providerParam":"apple","providerLogoSize":17,"providerLogo":"logo_apple.svg"},{"buttonColor":"#1877F2","providerLabel":"Login with Facebook","providerParam":"facebook","providerLogo":"logo_facebook.svg","providerLogoSize":20}],"maintenanceMode":{"enabled":false,"title":"Site under maintenance","subtitle":"Please reload page shortly"},"staticJsonFilesBuildTime":[{"file":"src/data/summit.json","build_time":1777290117148},{"file":"src/data/events.json","build_time":1777290119814},{"file":"src/data/events.idx.json","build_time":1777290119815},{"file":"src/data/speakers.json","build_time":1777290120736},{"file":"src/data/speakers.idx.json","build_time":1777290120737},{"file":"src/content/sponsors.json","build_time":1777290130468},{"file":"src/data/voteable-presentations.json","build_time":1777290130851}],"lastBuild":1777290130851,"registration":{"registrationMode":"STANDALONE"}}