@openeventkit/event-site 2.0.110 → 2.0.112

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

@@ -121,9 +121,9 @@ const siteSettings = {
               name: "allowClick",
               required: false,
               default: true
-            }),
+            })
           ]
-        }),
+        })
       ]
     }),
     objectField({
@@ -172,8 +172,8 @@ const siteSettings = {
               required: false,
               options: getFontFormatOptions()
             })
-          ],
-        }),
+          ]
+        })
       ]
     }),
     objectField({
@@ -194,7 +194,7 @@ const siteSettings = {
           label: "Logo Alt",
           name: "idpLogoAlt",
           required: false
-        }),
+        })
       ]
     }),
     listField({
@@ -237,6 +237,26 @@ const siteSettings = {
           required: true
         })
       ]
+    }),
+    objectField({
+      label: "Maintenance Mode",
+      name: "maintenanceMode",
+      fields: [
+        booleanField({
+          label: "Enabled",
+          name: "enabled",
+          required: false,
+          default: false
+        }),
+        stringField({
+          label: "Title",
+          name: "title"
+        }),
+        stringField({
+          label: "Subtitle",
+          name: "subtitle"
+        })
+      ]
     })
   ]
 };

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

@@ -34,11 +34,17 @@ module.exports = `
     providerLogo: File @fileByRelativePath
     providerLogoSize: Float
   }
+  type MaintenanceMode {
+    enabled: Boolean
+    title: String
+    subtitle: String
+  }
   type SiteSettingsJson implements Node {
     siteMetadata: SiteMetadata
     favicon: Favicon
     widgets: Widgets
     idpLogo: IdpLogo
     identityProviderButtons: [IdentityProviderButton]
+    maintenanceMode: MaintenanceMode
   }
 `;

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

@@ -1,8 +1,15 @@
 
 module.exports = `
-  type MarkdownRemarkFrontmatter {
+  type MdxFields {
+    slug: String
+  }
+  type MdxFrontmatter {
     templateKey: String
     title: String
     userRequirement: String
   }
+  type Mdx {
+    frontmatter: MdxFrontmatter
+    fields: MdxFields
+  }
 `;

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

@@ -126,8 +126,8 @@ const marketingPage = {
       name: "widgets",
       fields: [
         objectField({
-          label: "Text",
-          name: "text",
+          label: "Content",
+          name: "content",
           fields: [
             booleanField({
               label: "Display",
@@ -135,10 +135,10 @@ const marketingPage = {
               required: false
             }),
             markdownField({
-              label: "Content",
-              name: "content",
+              label: "Body",
+              name: "body",
               buttons: markdownFieldButtons,
-              editor_components: []
+              editor_components: ["image"]
             })
           ]
         }),

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

@@ -23,9 +23,9 @@ module.exports = `
     display: Boolean
     title: String
   }
-  type MarketingPageTextWidget {
+  type MarketingPageContentWidget {
     display: Boolean
-    content: String
+    body: String @resolveImages
   }
   type MarketingPageImageWidget {
     display: Boolean
@@ -33,10 +33,10 @@ module.exports = `
     image: ImageWithAlt
   }
   type MarketingPageWidgets {
-    text: MarketingPageTextWidget
-    image: MarketingPageImageWidget
+    content: MarketingPageContentWidget
     schedule: MarketingPageWidget
     disqus: MarketingPageWidget
+    image: MarketingPageImageWidget
   }
   type MarketingPageCountdown {
     display: Boolean

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

@@ -1,21 +1,49 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { ContentPageTemplate } from '../../templates/content-page'
+import React from "react";
+import PropTypes from "prop-types";
+import Mdx from "@mdx-js/runtime";
+import ContentPageTemplate from "../../templates/content-page/template";
+import shortcodes from "../../templates/content-page/shortcodes";
 
-const ContentPagePreview = ({ entry, getAsset, widgetFor }) => {
+// function to transform content by replacing relative image URLs with absolute ones
+const transformContent = (mdx, getAsset) => {
+  // regex to identify Markdown image tags ![alt](url)
+  const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
+
+  return mdx.replace(imageRegex, (match, alt, url) => {
+    // check if the URL is relative (does not start with http:// or https://)
+    if (!url.startsWith("http://") && !url.startsWith("https://")) {
+      const asset = getAsset(url);
+      if (asset && asset.url) {
+        return `![${alt}](${asset.url})`;
+      }
+    }
+    return match; // return the original match if it's already an absolute URL
+  });
+};
+
+// function to render transformed content with Mdx
+const renderContent = (mdx, getAsset) => (
+  <Mdx components={shortcodes}>
+    {transformContent(mdx, getAsset)}
+  </Mdx>
+);
+
+const ContentPagePreview = ({ entry, getAsset }) => {
+  const title = entry.getIn(["data", "title"]);
+  const body = entry.getIn(["data", "body"]);
   return (
     <ContentPageTemplate
-      title={entry.getIn(['data', 'title'])}
-      content={widgetFor('body')}
+      title={title}
+      content={renderContent(body, getAsset)}
     />
-  )
-}
+  );
+};
 
 ContentPagePreview.propTypes = {
   entry: PropTypes.shape({
-    getIn: PropTypes.func,
-  }),
-  getAsset: PropTypes.func,
-}
+    getIn: PropTypes.func.isRequired
+  }).isRequired,
+  getAsset: PropTypes.func.isRequired
+};
 
-export default ContentPagePreview
+export default ContentPagePreview;

package/src/cms/widgets/IdentityProviderParamControl.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
-import CMS from "netlify-cms-app";
 import PropTypes from "prop-types";
 import ImmutablePropTypes from "react-immutable-proptypes";
 import { List } from "immutable";
+import CMS from "decap-cms-app";
 
 const StringControl = CMS.getWidget("string").control;
 const SelectControl = CMS.getWidget("select").control;

package/src/components/DisqusComponent.js

@@ -161,7 +161,7 @@ const DisqusComponent = class extends React.Component {
     };
 
     const { title, style, className, page, skipTo } = this.props;
-    const sectionClass = className ? className : style ? '' : page === 'marketing-site' ? 'disqus-container-marketing' : 'disqus-container';
+    const sectionClass = className ? className : style || page === 'marketing-site' ? '' : 'disqus-container';
 
     return (
       <section aria-labelledby={title ? 'disqus-title' : ''} className={sectionClass} style={style}>

package/src/components/LiteScheduleComponent.js

@@ -3,30 +3,28 @@ import * as Sentry from "@sentry/react";
 import {connect} from "react-redux";
 
 // these two libraries are client-side only
-import LiteSchedule from 'lite-schedule-widget/dist';
-import 'lite-schedule-widget/dist/index.css';
+import LiteSchedule from "lite-schedule-widget/dist";
+import "lite-schedule-widget/dist/index.css";
 // 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
 
-import {addToSchedule, removeFromSchedule} from '../actions/user-actions';
+import {addToSchedule, removeFromSchedule} from "../actions/user-actions";
 
 import useMarketingSettings, { MARKETING_SETTINGS_KEYS } from "@utils/useMarketingSettings";
 import { SentryFallbackFunction } from "./SentryErrorComponent";
 
 const LiteScheduleComponent = ({
-   className,
+   className = "schedule-container",
    userProfile,
    colorSettings,
-   page,
    addToSchedule,
    removeFromSchedule,
    schedules,
    summit,
-   schedKey = 'schedule-main',
+   schedKey = "schedule-main",
    ...rest
 }) => {
-  const wrapperClass = page === 'marketing-site' ? 'schedule-container-marketing' : 'schedule-container';
   const { getSettingByKey } = useMarketingSettings();
   const defaultImage = getSettingByKey(MARKETING_SETTINGS_KEYS.schedultDefaultImage);
   const scheduleState = schedules?.find( s => s.key === schedKey);
@@ -39,10 +37,10 @@ const LiteScheduleComponent = ({
     userProfile: userProfile,
     triggerAction: (action, {event}) => {
       switch (action) {
-        case 'ADDED_TO_SCHEDULE': {
+        case "ADDED_TO_SCHEDULE": {
           return addToSchedule(event);
         }
-        case 'REMOVED_FROM_SCHEDULE': {
+        case "REMOVED_FROM_SCHEDULE": {
           return removeFromSchedule(event);
         }
         default: {
@@ -53,8 +51,8 @@ const LiteScheduleComponent = ({
   };
 
   return (
-    <div className={className || wrapperClass}>
-      <Sentry.ErrorBoundary fallback={SentryFallbackFunction({componentName: 'Schedule Lite'})}>
+    <div className={className}>
+      <Sentry.ErrorBoundary fallback={SentryFallbackFunction({componentName: "Schedule Lite"})}>
         <LiteSchedule {...componentProps} {...rest} />
       </Sentry.ErrorBoundary>
     </div>

package/src/components/ResponsiveImage.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const imageStyles = {
+  maxWidth: "100%",
+  height: "auto"
+};
+
+const ResponsiveImage = ({ src, alt, maxWidth = "100%", padding = "0" }) => {
+  const containerStyles = {
+    maxWidth: maxWidth,
+    padding: padding,
+    display: "flex",
+    justifyContent: "center"
+  };
+  return (
+    <div style={containerStyles}>
+      <img src={src} alt={alt} style={imageStyles} />
+    </div>
+  );
+};
+
+ResponsiveImage.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+
+export default ResponsiveImage;

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

@@ -22,7 +22,7 @@ import { DefaultScrollBehaviour as ScrollBehaviour } from '@utils/scroll';
 import './ticket-popup-edit-details-form.scss';
 import { useTicketAssignedContext } from '../../../context/TicketAssignedContext';
 
-const noOpFn = () => {};
+const noop = () => {};
 
 export const TicketPopupEditDetailsForm = ({
     ticket,
@@ -277,7 +277,7 @@ export const TicketPopupEditDetailsForm = ({
                         placeholder={t("ticket_popup.edit_first_name_placeholder")}
                         value={formik.values[TicketKeys.firstName]}
                         onBlur={formik.handleBlur}
-                        onChange={!!initialValues[TicketKeys.firstName] ? noOpFn : formik.handleChange}
+                        onChange={!!initialValues[TicketKeys.firstName] ? noop : formik.handleChange}
                         disabled={!!initialValues[TicketKeys.firstName]}
                     />
                     {(formik.touched[TicketKeys.firstName] || triedSubmitting) && formik.errors[TicketKeys.firstName] &&
@@ -297,7 +297,7 @@ export const TicketPopupEditDetailsForm = ({
                         placeholder={t("ticket_popup.edit_last_name_placeholder")}
                         value={formik.values[TicketKeys.lastName]}
                         onBlur={formik.handleBlur}
-                        onChange={!!initialValues[TicketKeys.lastName] ? noOpFn : formik.handleChange}
+                        onChange={!!initialValues[TicketKeys.lastName] ? noop : formik.handleChange}
                         disabled={!!initialValues[TicketKeys.lastName]}
                     />
                     {(formik.touched[TicketKeys.lastName] || triedSubmitting) && formik.errors[TicketKeys.lastName] &&
@@ -317,7 +317,7 @@ export const TicketPopupEditDetailsForm = ({
                         placeholder={t("ticket_popup.edit_company_placeholder")}
                         value={formik.values[TicketKeys.company]}
                         onBlur={formik.handleBlur}
-                        onChange={!!initialValues[TicketKeys.company].name ? noOpFn : formik.handleChange}
+                        onChange={!!initialValues[TicketKeys.company].name ? noop : formik.handleChange}
                         disabled={!!initialValues[TicketKeys.company].name}
                         tabSelectsValue={false}
                     />

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

@@ -46,5 +46,10 @@
       "providerLogo": "logo_facebook.svg",
       "providerLogoSize": 20
     }
-  ]
+  ],
+  "maintenanceMode" : {
+    "enabled": false,
+    "title": "Site under maintenance",
+    "subtitle": "Please reload page shortly"
+  }
 }

package/src/pages/index.js

@@ -54,8 +54,12 @@ export const marketingPageQuery = graphql`
         text
       }
       widgets {
-        text {
-          content
+        content {
+          display
+          body
+        }
+        schedule {
+          title
           display
         }
         disqus {
@@ -78,10 +82,6 @@ export const marketingPageQuery = graphql`
             alt
           }
         }
-        schedule {
-          title
-          display
-        }
       }
       masonry {
         display

package/src/pages/maintenance.js

@@ -0,0 +1,18 @@
+import React from "react";
+import HeroComponent from "../components/HeroComponent";
+import useSiteSettings from "@utils/useSiteSettings";
+
+import "../styles/bulma.scss";
+
+const MaintenancePage = () => {
+  const { maintenanceMode: { title, subtitle } } = useSiteSettings();
+
+  return (
+    <HeroComponent
+      title={title}
+      subtitle={subtitle}
+    />
+  );
+};
+
+export default MaintenancePage;

package/src/styles/colors.scss

@@ -14,10 +14,12 @@ $color_gray_light : #DFDFDF;
 $color_gray_lighter : #F2F2F2;
 $color_text_input_hints : #c4c4c4;
 $color_input_text_color_light: #363636;
+$color_input_text_color_disabled_light: #FFFFFF;
 $color_icon_light: #FFFFFF;
 $color_input_background_color_light:#fff;
 $color_input_border_color_light:#dbdbdb;
 $color_input_text_color_dark: #FFFFFF;
+$color_input_text_color_disabled_dark: #FFFFFF;
 $color_input_background_color_dark:rgb(24, 26, 27);
 $color_input_border_color_dark:rgb(58, 63, 65);
 $color_horizontal_rule_dark: #7B7B7B;
@@ -43,6 +45,7 @@ $color_alerts:#FF0000;
   --color_gray_light: #{$color_gray_light};
   --color_gray_lighter: #{$color_gray_lighter};
   --color_input_text_color: #{$color_input_text_color_light};
+  --color_input_text_color_disabled:  #{$color_input_text_color_disabled_light};
   --color_input_background_color: #{$color_input_background_color_light};
   --color_input_border_color: #{$color_input_border_color_light};
   --color_text_input_hints: #{$color_text_input_hints_light};
@@ -63,6 +66,7 @@ html[data-theme="DARK"] {
   --color_gray_light: #{$color_gray_dark} !important;
   --color_gray_lighter: #{$color_gray_darker} !important;
   --color_input_text_color: #{$color_input_text_color_dark} !important;
+  --color_input_text_color_disabled: #{$color_input_text_color_disabled_dark} !important;
   --color_input_background_color: #{$color_input_background_color_dark} !important;
   --color_input_border_color: #{$color_input_border_color_dark} !important;
   --color_text_input_hints: #{$color_text_input_hints_dark} !important;

package/src/styles/marketing.module.scss

@@ -1,8 +1,10 @@
 
-.left-column {
+.leftColumn {
+  overflow-y: auto;
 }
-.right-column {
-  .image-slider {
+
+.rightColumn {
+  .imageSlider {
     height: auto;
     background-position: center;
     background-repeat: no-repeat;
@@ -10,4 +12,4 @@
     min-height: 100%;
     overflow: hidden;
   }
-}
+}

package/src/styles/style.scss

@@ -531,32 +531,6 @@ div.event-feedback-container {
     bottom: 0;
     left: 0;
     right: 0;
-
-    &-marketing {
-      position: absolute;
-      overflow-y: auto;
-      top: 95px;
-      right: 0;
-      left: 20px;
-      bottom: 0;
-      padding-right: 20px;
-    }
-  }
-
-  .schedule-container {
-    &-marketing {
-      display: flex;
-      flex-direction: column;
-      margin-top: 15px;
-      position: absolute;
-      overflow-y: auto;
-      top: 95px;
-      right: 0;
-      left: 20px;
-      bottom: 0;
-      padding-right: 20px;
-      padding-bottom: 30px;
-    }
   }
 }
 

package/src/templates/content-page/index.js

@@ -0,0 +1,74 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { graphql } from "gatsby";
+import { Redirect } from "@gatsbyjs/reach-router";
+import { MDXProvider } from "@mdx-js/react";
+import ContentPageTemplate from "./template";
+import Layout from "../../components/Layout";
+import Seo from "../../components/Seo";
+import { titleFromPathname } from "../../utils/urlFormating";
+
+import { USER_REQUIREMENTS } from "../../cms/config/collections/contentPagesCollection";
+
+const ContentPage = ({
+  data,
+  isAuthorized,
+  isLoggedUser,
+  hasTicket,
+  children
+}) => {
+  const { frontmatter: { title, userRequirement } } = data.mdx;
+  if (!isAuthorized && (
+    (userRequirement === USER_REQUIREMENTS.loggedIn && !isLoggedUser) ||
+    (userRequirement === USER_REQUIREMENTS.hasTicket && !hasTicket)
+  )) {
+    return <Redirect to="/" noThrow />;
+  }
+  return (
+    <Layout>
+      <ContentPageTemplate
+        title={title}
+        content={children}
+      />
+    </Layout>
+  );
+};
+
+ContentPage.propTypes = {
+  data: PropTypes.object.isRequired,
+  isAuthorized: PropTypes.bool.isRequired,
+  isLoggedUser: PropTypes.bool.isRequired,
+  hasTicket: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired
+};
+
+const mapStateToProps = ({ loggedUserState, userState }) => ({
+  isLoggedUser: loggedUserState.isLoggedUser,
+  hasTicket: userState.hasTicket,
+  isAuthorized: userState.isAuthorized
+});
+
+const StoreConnectedContentPage = connect(mapStateToProps)(ContentPage);
+
+export default StoreConnectedContentPage;
+
+export const query = graphql`
+  query($id: String!) {
+    mdx(id: { eq: $id }) {
+      frontmatter {
+        title
+        userRequirement
+      }
+    }
+  }
+`;
+
+export const Head = ({
+  location
+}) => (
+  <Seo
+    title={titleFromPathname(location.pathname)}
+    location={location}
+  />
+);

package/src/templates/content-page/shortcodes.js

@@ -0,0 +1,17 @@
+// This file is intended to allow for theme extension with component shadowing.
+// You can add your component imports and map them here to be used as shortcodes in MDX content.
+
+// Import components here when needed
+// import Grid from "../../components/Grid";
+// import SpeakerCard from "../../components/SpeakerCard";
+import ResponsiveImage from "../../components/ResponsiveImage";
+
+const shortcodes = {
+  // Map your components here
+  // Example:
+  // Grid,
+  // SpeakerCard,
+  img: ResponsiveImage
+};
+
+export default shortcodes;

package/src/templates/content-page/template.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { MDXProvider } from "@mdx-js/react";
+
+import shortcodes from "./shortcodes";
+
+const ContentPageTemplate = ({ title, content }) => (
+  <div className="content">
+    <h1>{title}</h1>
+    <MDXProvider components={shortcodes}>
+      {content}
+    </MDXProvider>
+  </div>
+);
+
+export default ContentPageTemplate;
+
+ContentPageTemplate.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.node.isRequired
+};