@openeventkit/event-site 1.0.40 → 1.0.42

package/env.template

@@ -30,4 +30,5 @@ GATSBY_SENTRY_AUTH_TOKEN=
 GATSBY_SENTRY_RELEASE=
 GATSBY_METADATA_TITLE=
 GATSBY_METADATA_DESCRIPTION=
-GATSBY_CMS_BACKEND_REPO=
+GATSBY_CMS_BACKEND_REPO=
+GATSBY_CMS_BACKEND_BRANCH=

package/gatsby-node.js

@@ -27,7 +27,8 @@ const {
   SPEAKERS_IDX_FILE_PATH,
   VOTEABLE_PRESENTATIONS_FILE_PATH,
   MARKETING_SETTINGS_FILE_PATH,
-  MAINTENANCE_FILE_PATH
+  MAINTENANCE_FILE_PATH,
+  SPONSORS_FILE_PATH
 } = require("./src/utils/filePath");
 
 const fileBuildTimes = [];
@@ -99,6 +100,53 @@ const SSR_getEvents = async (baseUrl, summitId, accessToken) => {
   }).catch(e => console.log("ERROR: ", e));
 };
 
+const SSR_getSponsors = async (baseUrl, summitId, accessToken) => {
+
+  const endpoint = `${baseUrl}/api/v1/summits/${summitId}/sponsors`;
+
+  const params = {
+        access_token: accessToken,
+        per_page: 50,
+        page: 1,
+        expand: 'company,sponsorship,sponsorship.type',
+  }
+
+  return await axios.get(endpoint, { params }).then(async ({data}) => {
+
+    console.log(`SSR_getSponsors then data.current_page ${data.current_page} data.last_page ${data.last_page} total ${data.total}`)
+
+    let remainingPages = await SSR_GetRemainingPages(endpoint, params, data.last_page);
+
+    return [...data.data, ...remainingPages];
+
+  }).catch(e => console.log('ERROR: ', e));
+};
+
+const SSR_getSponsorCollections = async (allSponsors, baseUrl, summitId, accessToken) => {
+
+  const params = {
+        access_token: accessToken,
+        per_page: 50,
+        page: 1,
+  }
+
+  const getSponsorCollection = async (endpoint, params) => await axios.get(endpoint, { params }).then(async ({data}) => {
+    console.log(`SSR_getSponsorCollection then data.current_page ${data.current_page} data.last_page ${data.last_page} total ${data.total}`)
+    let remainingPages = await SSR_GetRemainingPages(endpoint, params, data.last_page);
+    return [...data.data, ...remainingPages];
+  }).catch(e => console.log('ERROR: ', e));
+
+  const sponsorsWithCollections = await Promise.all(allSponsors.map(async (sponsor) => {
+    console.log(`Collections for ${sponsor.company.name}...`);
+    const ads = await getSponsorCollection(`${baseUrl}/api/v1/summits/${summitId}/sponsors/${sponsor.id}/ads`, params);
+    const materials = await getSponsorCollection(`${baseUrl}/api/v1/summits/${summitId}/sponsors/${sponsor.id}/materials`, params);
+    const social_networks = await getSponsorCollection(`${baseUrl}/api/v1/summits/${summitId}/sponsors/${sponsor.id}/social-networks`, params);
+    return ({...sponsor, ads, materials, social_networks})
+  }));
+
+  return sponsorsWithCollections;
+};
+
 const SSR_getSpeakers = async (baseUrl, summitId, accessToken, filter = null) => {
 
   const params = {
@@ -259,6 +307,16 @@ exports.onPreBootstrap = async () => {
   });
   fs.writeFileSync(SPEAKERS_IDX_FILE_PATH, JSON.stringify(allSpeakersIDX), "utf8");
 
+  // Show Sponsors
+  const allSponsors = await SSR_getSponsors(summitApiBaseUrl, summitId, accessToken);
+  console.log(`allSponsors ${allSponsors.length}`);
+  const sponsorsWithCollections  = await SSR_getSponsorCollections(allSponsors, summitApiBaseUrl, summitId, accessToken);
+  fileBuildTimes.push({
+    "file": SPONSORS_FILE_PATH,
+    "build_time": Date.now()
+  });
+  fs.writeFileSync(SPONSORS_FILE_PATH, JSON.stringify(sponsorsWithCollections), 'utf8');
+
   // Voteable Presentations
   const allVoteablePresentations = await SSR_getVoteablePresentations(summitApiBaseUrl, summitId, accessToken);
   console.log(`allVoteablePresentations ${allVoteablePresentations.length}`);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",
@@ -75,7 +75,7 @@
     "netlify-cms-app": "^2.15.72",
     "netlify-cms-lib-widgets": "^1.8.0",
     "node-sass-utils": "^1.1.3",
-    "openstack-uicore-foundation": "^4.1.30",
+    "openstack-uicore-foundation": "^4.1.39",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.6.0",
     "react": "^18.2.0",

package/src/actions/schedule-actions.js

@@ -79,9 +79,10 @@ export const updateFiltersFromHash =
     // clear hash that match filters
     fragmentParser.deleteParams([...filterKeys, "view"]);
 
-    // reset url hash
+    // remove from hash all params that are related to filters
     if (windowExists) {
-      window.history.replaceState(null, null, " ");
+        const fragment = fragmentParser.serialize();
+        window.location.hash = fragment;
     }
 
     // escape if no filter hash

package/src/cms/config/index.js

@@ -3,6 +3,7 @@ import defaultPagesCollection from "./collections/defaultPagesCollection";
 import contentPagesCollection from "./collections/contentPagesCollection";
 
 const CMS_BACKEND_REPO = process.env.GATSBY_CMS_BACKEND_REPO;
+const CMS_BACKEND_BRANCH = process.env.GATSBY_CMS_BACKEND_BRANCH ||  "main";
 
 export const collections = [
   configurationsCollection,
@@ -14,7 +15,7 @@ const config = {
   backend: {
     name: "github",
     repo: CMS_BACKEND_REPO,
-    branch: "main",
+    branch: CMS_BACKEND_BRANCH,
     commit_messages: {
       create: "Create {{collection}} “{{slug}}”",
       update: "Update {{collection}} “{{slug}}”",

package/src/components/DocumentsComponent.js

@@ -9,7 +9,7 @@ import styles from "../styles/documents.module.scss";
  * @returns {JSX.Element|null}
  * @constructor
  */
-const DocumentsComponent = ({ event }) => {
+const DocumentsComponent = ({ event, sponsorPage = false }) => {
 
   const getMaterials = (event) => {
     const allMaterials = [
@@ -24,7 +24,7 @@ const DocumentsComponent = ({ event }) => {
       .sort((a, b) => a.order - b.order);
   };
 
-  const sortedMaterials = getMaterials(event);
+  const sortedMaterials = sponsorPage === true ? event :getMaterials(event);
   if (sortedMaterials.length === 0) return null;
 
   return (
@@ -34,11 +34,13 @@ const DocumentsComponent = ({ event }) => {
         <hr />
         {sortedMaterials.map((material, index) => {
           let faIcon = "fa-link";
-          switch (material.class_name) {
+          switch (material.class_name || material.type) {
             case "PresentationSlide":
+            case "Slide":
               faIcon = "fa-file-o";
               break;
             case "PresentationVideo":
+            case "Video":
               faIcon = "fa-video-camera";
               break;
             case "PresentationMediaUpload":
@@ -56,7 +58,8 @@ const DocumentsComponent = ({ event }) => {
           return (
             <React.Fragment key={index}>
               {material.class_name === "PresentationSlide" ||
-              material.class_name === "PresentationMediaUpload" ? (
+              material.class_name === "PresentationMediaUpload" ||
+              material.type === "Slide" ? (
                 <div
                   className={`${styles.documentColumn} columns is-mobile is-vcentered`}
                   key={index}

package/src/components/SponsorComponent.js

@@ -6,40 +6,53 @@ import { getSponsorURL } from '../utils/urlFormating'
 
 import styles from '../styles/sponsor.module.scss'
 
-const SponsorComponent = ({ page, sponsorsState, tiers, lobbyButton }) => {
+const SponsorComponent = ({ page, sponsorsState, lobbyButton }) => {
   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);
+    return memo;
+  }, {});
+
+  Object.keys(sponsorsByTier).forEach((s) => {
+    sponsorsByTier[s] = { ...sponsorsByTier[s][0].sponsorship, sponsors: sponsorsByTier[s] }
+  });
+
   return (
     <React.Fragment>
-      {sponsorsState.map((s, tierIndex) => {
-        const sponsors = s.sponsors;
-        const tier = tiers.find(t => t.id === s.tier[0].value);
+      {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.lobbyTemplate : page === 'event' ? tier.eventTemplate : '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.lobby.display) {
+              if (page === 'lobby' && !tier.should_display_on_lobby_page) {
                 return null
               } else {
                 return (
                   <div className={`${tierIndex === 0 ? styles.firstContainer : ''} ${styles.bigImageContainer}`} key={tierIndex}>
-                    {tier.widgetTitle &&
-                      <span><b>{tier.widgetTitle}</b></span>
+                    {tier.widget_title &&
+                      <span><b>{tier.widget_title}</b></span>
                     }
                     {sponsors.map((sponsor, index) => {
                       return (
-                        sponsor.externalLink ?
-                          <Link to={sponsor.externalLink} key={`${s.tier.label}-${index}`}>
-                            <img src={sponsor.logo.file} alt={sponsor.logo.alt} />
+                        (!sponsor.company.big_logo && !sponsor.company.logo) ?
+                        null 
+                        :
+                        sponsor.is_published ?
+                          <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}`} key={`${tier.type.label}-${index}`}>
+                            <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
                           </Link>
                           :
-                          sponsor.usesSponsorPage ?
-                            <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.name)}`} key={`${s.tier.label}-${index}`}>
-                              <img src={sponsor.logo.file} alt={sponsor.logo.alt} />
+                          sponsor.external_link ?
+                            <Link to={sponsor.external_link} key={`${tier.type.label}-${index}`}>
+                              <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
                             </Link>
                             :
-                            <img src={sponsor.logo.file} alt={sponsor.logo.alt} />
+                            <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
                       )
                     })}
                   </div>
@@ -47,32 +60,35 @@ const SponsorComponent = ({ page, sponsorsState, tiers, lobbyButton }) => {
               }
             }
             case 'small-images': {
-              if (page === 'lobby' && !tier.lobby.display) {
+              if (page === 'lobby' && !tier.should_display_on_lobby_page) {
                 return null
               } else {
                 return (
                   <div className={`${tierIndex === 0 ? styles.firstContainer : ''} ${styles.smallImageContainer}`} key={tierIndex}>
-                    {tier.widgetTitle &&
-                      <span><b>{tier.widgetTitle}</b></span>
+                    {tier.widget_title &&
+                      <span><b>{tier.widget_title}</b></span>
                     }
                     {sponsors.map((sponsor, index) => {
                       if (page === 'event' && !sponsor.showLogoInEventPage) return null
                       return (
-                        sponsor.externalLink ?
-                          <div className={styles.imageBox} key={`${s.tier.label}-${index}`}>
-                            <Link to={sponsor.externalLink}>
-                              <img src={sponsor.logo.file} alt={sponsor.logo.alt} />
+                        (!sponsor.company.big_logo && !sponsor.company.logo) ?
+                        null 
+                        :
+                        sponsor.is_published ?
+                          <div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
+                            <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}`}>
+                              <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
                             </Link>
                           </div>
-                          : sponsor.usesSponsorPage ?
-                            <div className={styles.imageBox} key={`${s.tier.label}-${index}`}>
-                              <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.name)}`}>
-                                <img src={sponsor.logo.file} alt={sponsor.logo.alt} />
+                          : sponsor.external_link ?
+                            <div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
+                              <Link to={sponsor.external_link}>
+                                <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
                               </Link>
                             </div>
                             :
-                            <div className={styles.imageBox} key={`${s.tier.label}-${index}`}>
-                              <img src={sponsor.logo.file} alt={sponsor.logo.alt} />
+                            <div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
+                              <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
                             </div>
                       )
                     })}
@@ -85,21 +101,24 @@ const SponsorComponent = ({ page, sponsorsState, tiers, lobbyButton }) => {
                 <div className={`${tierIndex === 0 ? styles.firstContainer : ''} ${styles.horizontalContainer} px-6`} key={tierIndex}>
                   {sponsors.map((sponsor, index) => {
                     return (
-                      sponsor.externalLink ?
-                        <div className={styles.imageBox} key={`${s.tier.label}-${index}`}>
-                          <Link to={sponsor.externalLink}>
-                            <img src={sponsor.logo} alt={sponsor.name} />
+                      (!sponsor.company.big_logo && !sponsor.company.logo) ?
+                        null 
+                        :
+                      sponsor.is_published ?
+                        <div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
+                          <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}`}>
+                            <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
                           </Link>
                         </div>
-                        : sponsor.usesSponsorPage ?
-                          <div className={styles.imageBox} key={`${s.tier.label}-${index}`}>
-                            <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.name)}`}>
-                              <img src={sponsor.logo.file} alt={sponsor.logo.alt} />
+                        : sponsor.external_link ?
+                          <div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
+                            <Link to={sponsor.external_link}>
+                              <img src={sponsor.logo} alt={sponsor.company.name} />
                             </Link>
                           </div>
                           :
-                          <div className={styles.imageBox} key={`${s.tier.label}-${index}`}>
-                            <img src={sponsor.logo.file} alt={sponsor.logo.alt} />
+                          <div className={styles.imageBox} key={`${tier.type.label}-${index}`}>
+                            <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
                           </div>
                     )
                   })}
@@ -107,45 +126,48 @@ const SponsorComponent = ({ page, sponsorsState, tiers, lobbyButton }) => {
               )
             }
             case 'expo-hall': {
-              return tier.expoHallPage?.display === true && (
+              return tier.should_display_on_expo_hall_page === true && (
                 <div className={`${styles.expoContainer} px-6`} key={tierIndex}>
                   {sponsors.map((sponsor, index) => {
                     return (
-                      sponsor.externalLink ?
+                      (!sponsor.company.big_logo && !sponsor.company.logo) ?
+                        null 
+                      :
+                      sponsor.is_published ?
                         <div className={`
                           ${styles.imageBox} 
-                          ${tier.expoHallPage?.expoHallTemplate === 'big-images' ? styles.large : tier.expoHallPage?.expoHallTemplate === 'medium-images' ? styles.medium : styles.small}`}
-                          key={`${s.tier.label}-${index}`}
+                          ${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.externalLink}>
-                            <img src={sponsor.logo.file} alt={sponsor.logo.alt} />
+                          <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}`}>
+                            <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
                           </Link>
                         </div>
-                        : sponsor.usesSponsorPage ?
+                        : sponsor.external_link ?
                           <div className={`
                           ${styles.imageBox} 
-                          ${tier.expoHallPage?.expoHallTemplate === 'big-images' ? styles.large : tier.expoHallPage?.expoHallTemplate === 'medium-images' ? styles.medium : styles.small}`}
-                            key={`${s.tier.label}-${index}`}
+                          ${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.name)}`}>
-                              <img src={sponsor.logo.file} alt={sponsor.logo.alt} />
+                            <Link to={sponsor.external_link}>
+                              <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
                             </Link>
                           </div>
                           :
                           <div className={`
                           ${styles.imageBox} 
-                          ${tier.expoHallPage?.expoHallTemplate === 'big-images' ? styles.large : tier.expoHallPage?.expoHallTemplate === 'medium-images' ? styles.medium : styles.small}`}
-                            key={`${s.tier.label}-${index}`}
+                          ${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.logo.file} alt={sponsor.logo.alt} />
+                            <img src={sponsor.company.big_logo ? sponsor.company.big_logo : sponsor.company.logo} alt={sponsor.company.name} />
                           </div>
-                    )
+                    )                    
                   })}
                 </div>
               )
             }
             case 'carousel': {
-              if (page === 'lobby' && !tier.lobby.display) {
+              if (page === 'lobby' && !tier.should_display_on_lobby_page) {
                 return null
               } else {
                 const sliderSettings = {
@@ -159,25 +181,28 @@ const SponsorComponent = ({ page, sponsorsState, tiers, lobbyButton }) => {
                 };
                 return (
                   <div className={`${tierIndex === 0 ? styles.firstContainer : ''} ${styles.carouselContainer}`} key={tierIndex}>
-                    {tier.widgetTitle &&
-                      <span style={{ marginBottom: '0' }}><b>{tier.widgetTitle}</b></span>
+                    {tier.widget_title &&
+                      <span style={{ marginBottom: '0' }}><b>{tier.widget_title}</b></span>
                     }
                     <Slider {...sliderSettings}>
                       {sponsors.map((sponsor, index) => {
-                        const img = sponsor.advertiseImage ? sponsor.advertiseImage : sponsor.logo;
+                        const img = sponsor.carousel_advertise_image ? sponsor.carousel_advertise_image : sponsor.logo;
                         return (
-                          sponsor.externalLink ?
-                            <Link to={sponsor.externalLink} key={`${s.tier.label}-${index}`}>
-                              <img src={img.file} alt={img.alt} />
+                          (!sponsor.company.big_logo && !sponsor.company.logo) ?
+                          null 
+                          :
+                          sponsor.is_published ?
+                            <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.company.name)}`} key={`${tier.type.label}-${index}`}>
+                              <img src={sponsor.carousel_advertise_image} alt={sponsor.carousel_advertise_image_alt_text} />
                             </Link>
                             :
-                            sponsor.usesSponsorPage ?
-                              <Link to={`/a/sponsor/${getSponsorURL(sponsor.id, sponsor.name)}`} key={`${s.tier.label}-${index}`}>
-                                <img src={img.file} alt={img.alt} />
+                            sponsor.external_link ?
+                              <Link to={sponsor.external_link} key={`${tier.type.label}-${index}`}>
+                                <img src={sponsor.carousel_advertise_image} alt={sponsor.carousel_advertise_image_alt_text} />
                               </Link>
                               :
-                              <Link key={`${s.tier.label}-${index}`}>
-                                <img src={img.file} alt={img.alt} />
+                              <Link key={`${tier.type.label}-${index}`}>
+                                <img src={sponsor.carousel_advertise_image} alt={sponsor.carousel_advertise_image_alt_text} />
                               </Link>
                         )
                       })}
@@ -207,7 +232,6 @@ const SponsorComponent = ({ page, sponsorsState, tiers, lobbyButton }) => {
 
 const mapStateToProps = ({ sponsorState }) => ({
   sponsorsState: sponsorState.sponsors,
-  tiers: sponsorState.tiers,
   lobbyButton: sponsorState.lobbyButton
 });
 

package/src/components/SponsorHeader.js

@@ -4,7 +4,9 @@ import Link from './Link'
 
 import styles from '../styles/sponsor-page.module.scss'
 
-const SponsorHeader = ({ sponsor, tier, scanBadge }) => {
+const SponsorHeader = ({ sponsor, scanBadge }) => {
+
+  const { sponsorship } = sponsor;  
 
   const [isMuted, _setIsMuted] = useState(true);
   const [isMobile, setIsMobile] = useState(null);
@@ -35,24 +37,24 @@ const SponsorHeader = ({ sponsor, tier, scanBadge }) => {
   return (
     <section className={styles.hero}>
       <div className={`${isMobile ? styles.heroSponsorMobile : styles.heroSponsor}`}>
-        {!sponsor.headerVideo &&
+        {!sponsor.video_link &&
           <div className={styles.heroSponsorImageBg} style={{
-              backgroundImage: `url(${isMobile ? sponsor.headerImageMobile.file : sponsor.headerImage.file})`,
-              paddingBottom: `${isMobile ? '82.77%' : tier.sponsorPage.sponsorTemplate === 'big-header' ? '27.77%' : '18.88%'}`,
-              maxHeight: `${tier.sponsorPage.sponsorTemplate === 'big-header' ? '400px' : '200px'}`
-            }}
+            backgroundImage: `url(${isMobile ? sponsor.header_image_mobile : sponsor.header_image})`,
+            paddingBottom: `${isMobile ? '82.77%' : sponsorship.sponsor_page_template === 'big-header' ? '27.77%' : '18.88%'}`,
+            maxHeight: `${sponsorship.sponsor_page_template === 'big-header' ? '400px' : '200px'}`
+          }}
           />
         }
-        {sponsor.headerVideo &&
+        {sponsor.video_link &&
           <div ref={videoParentRef}
             style={{
-              paddingBottom: `${tier.sponsorPage.sponsorTemplate === 'big-header' ? '27.77%' : '18.88%'}`,
-              maxHeight: `${tier.sponsorPage.sponsorTemplate === 'big-header' ? '400px' : '200px'}`
+              paddingBottom: `${sponsorship.sponsor_page_template === 'big-header' ? '27.77%' : '18.88%'}`,
+              maxHeight: `${sponsorship.sponsor_page_template === 'big-header' ? '400px' : '200px'}`
             }}
             dangerouslySetInnerHTML={{
               __html: `
               <video class=${styles.heroVideo} preload="auto" autoPlay loop muted playsinline>
-                <source src=${sponsor.headerVideo} type="video/mp4" />
+                <source src=${sponsor.video_link} type="video/mp4" />
               </video>
               `
             }} />
@@ -60,32 +62,32 @@ const SponsorHeader = ({ sponsor, tier, scanBadge }) => {
         <div className={`${styles.heroBody}`}>
           <div className={`${styles.heroSponsorContainer}`}>
             <div className={styles.leftContainer}>
-              {sponsor.socialNetworks && sponsor.socialNetworks.map((net, index) => (
-                net.display && net.icon &&
+              {sponsor.social_networks && sponsor.social_networks.map((net, index) => (
+                net.is_enabled && net.icon_css_class &&
                 <Link to={net.link} className={styles.link} key={index}>
-                  <i className={`fa icon is-large ${net.icon}`} />
+                  <i className={`fa icon is-large ${net.icon_css_class}`} />
                 </Link>
               ))}
             </div>
             <div className={styles.rightContainer}>
               <div className={styles.category}>
-                {sponsor.headerVideo &&
+                {sponsor.video_link &&
                   <button className="link" onClick={() => setIsMuted(!isMuted)}>
                     <i className={`${styles.volumeButton} fa fa-2x ${isMuted ? 'fa-volume-off' : 'fa-volume-up'} icon is-large`} />
                   </button>
-                }
-                {tier.badge && <img alt="badge" src={tier.badge} />}
+                }                
+                {sponsorship.badge_image && <img alt={sponsorship.badge_image_alt_text} src={sponsorship.badge_image} />}
               </div>
-              <div className={`${tier.sponsorPage.sponsorTemplate === 'big-header' ? styles.buttons : styles.buttonsSmall}`}>
+              <div className={`${sponsorship.sponsor_page_template === 'big-header' ? styles.buttons : styles.buttonsSmall}`}>
                 <Link className={styles.link} onClick={scanBadge}>
-                  <button className={`${styles.button} button is-large`} style={{ backgroundColor: `${sponsor.sponsorColor}` }}>
+                  <button className={`${styles.button} button is-large`} style={{ backgroundColor: `${sponsor.company.color}` }}>
                     <i className={`fa fa-2x fa-qrcode icon is-large`} />
                     <b>Scan your badge</b>
                   </button>
                 </Link>
-                {sponsor.email &&
-                  <Link className={styles.link} to={sponsor.email}>
-                    <button className={`${styles.button} button is-large`} style={{ backgroundColor: `${sponsor.sponsorColor}` }}>
+                {sponsor.company.contact_email &&
+                  <Link className={styles.link} to={sponsor.company.contact_email}>
+                    <button className={`${styles.button} button is-large`} style={{ backgroundColor: `${sponsor.company.color}` }}>
                       <i className={`fa fa-2x fa-envelope icon is-large`} />
                       <b>Contact Us!</b>
                     </button>
@@ -97,7 +99,7 @@ const SponsorHeader = ({ sponsor, tier, scanBadge }) => {
         </div>
       </div>
       {sponsor.marquee &&
-        <div className={`${tier.sponsorPage.sponsorTemplate === 'big-header' ? styles.bottomBar : styles.bottomBarSmall}`} style={{ backgroundColor: `${sponsor.sponsorColor}` }}>
+        <div className={`${sponsorship.sponsor_page_template === 'big-header' ? styles.bottomBar : styles.bottomBarSmall}`} style={{ backgroundColor: `${sponsor.company.color}` }}>
           <div className={styles.track}>
             <div>
               {`${sponsor.marquee} `.repeat(100).slice(0, 459)}

package/src/components/SponsorNavigation.js

@@ -7,12 +7,12 @@ import styles from '../styles/sponsor-page.module.scss'
 
 const SponsorNavigation = ({ currentSponsor, sponsors }) => {
     
-    const localSponsors = sponsors.map(e => e.sponsors).flat().filter(e => !e.externalLink)
+    const localSponsors = sponsors.filter(e => e.is_published);
 
     const sponsorIndex = localSponsors.findIndex(e => e.id === currentSponsor.id)
 
     const formatUrl = (index) => {
-        return getSponsorURL(localSponsors[index].id, localSponsors[index].name);
+        return getSponsorURL(localSponsors[index].id, localSponsors[index].company.name);
     }
 
     const goToPrevSponsor = () => {

package/src/content/expo-hall.json

@@ -0,0 +1,10 @@
+{
+    "imageHeader": {
+      "file": "/img/tier1-default-sponsor-headerimage-expopage.png",
+      "alt": "header"
+    },
+    "lobbyButton": {
+      "text": "Visit the Expo Hall",
+      "link": "/a/sponsors/"
+    }
+}

package/src/reducers/sponsor-reducer.js

@@ -3,13 +3,12 @@ import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
 import {RESET_STATE, SYNC_DATA} from "../actions/base-actions-definitions";
 
 import sponsorData from "content/sponsors";
-import tierData from "content/sponsors-tiers";
+import expoHallData from '../content/expo-hall.json';
 
 const DEFAULT_STATE = {
-  sponsors: sponsorData.tierSponsors,
-  tiers: tierData.tiers,
-  imageHeader: tierData.imageHeader,
-  lobbyButton: tierData.lobbyButton
+  sponsors: sponsorData,
+  imageHeader: expoHallData.imageHeader,
+  lobbyButton: expoHallData.lobbyButton
 };
 
 const sponsorReducer = (state = DEFAULT_STATE, action) => {

package/src/templates/sponsor-page.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { navigate } from 'gatsby'
 import { connect } from 'react-redux'
@@ -21,175 +21,154 @@ import { getEnvVariable, LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS } from "../util
 import styles from '../styles/sponsor-page.module.scss'
 import SponsorNavigation from '../components/SponsorNavigation'
 
+const SponsorPageTemplate = ({ sponsorId, sponsors, scanBadge, eventId }) => {
 
-export const SponsorPageTemplate = class extends React.Component {
+  const [sponsorLoading, setSponsorLoading] = useState(true);
+  const [sponsor, setSponsor] = useState(null)
+  const [notFound, setNotFound] = useState(false)
+  const [parsedIntro, setParsedIntro] = useState('')
+  const [sponsorship, setSponsorship] = useState(null);
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      sponsor: null,
-      notFound: null,
-      parsedIntro: null,
-      tier: null
-    }
-  }
-
-  componentWillMount() {
-    this.setSponsor();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { sponsorId } = this.props;
-    const { sponsorId: prevSponsorId } = prevProps;
-    // sponsor id came as param at uri    
-    if (sponsorId !== prevSponsorId) {
-      this.setSponsor();
-    }
-  }
-
-
-  onEventChange = (ev) => {
-    const { eventId } = this.props;
-    if (eventId !== `${ev.id}`) {
-      navigate(`/a/event/${ev.id}`);
-    }
-  };
-
-  onBadgeScan = () => {
-    const { sponsor: { sponsorId } } = this.state;
-    this.props.scanBadge(sponsorId);
-  };
-
-  setSponsor = () => {
-    const { sponsorId, sponsors, tiers } = this.props;
-    const sponsor = sponsors.map(t => t.sponsors?.find(s => s.id === parseInt(sponsorId)))
-      .filter(e => e !== undefined)[0];
+  useEffect(() => {
+    const sponsor = sponsors.find(s => s.id === parseInt(sponsorId)) || null;
     if (!sponsor) {
-      this.setState({ notFound: true });
+      setNotFound(true)
     } else {
-      const tier = sponsors.find(t => t.sponsors.find(s => s === sponsor)).tier[0];
-      const tierData = tiers.find(t => t.id === tier.value);
+      const sponsorship = sponsor.sponsorship;
       const parser = new MarkdownIt({
-        html: false,
+        html: true,
         breaks: true,
         linkify: true,
         xhtmlOut: true,
         typographer: true,
       });
       const parsedIntro = parser.render(sponsor.intro ?? '');
-      if (sponsor) this.setState({ sponsor: sponsor, tier: tierData, parsedIntro: parsedIntro });
+      if (sponsor) setSponsor(sponsor); setSponsorship(sponsorship); setParsedIntro(parsedIntro);
+    }
+    setSponsorLoading(false)
+  }, [sponsorId]);
+
+  const onEventChange = (ev) => {
+    if (eventId !== `${ev.id}`) {
+      navigate(`/a/event/${ev.id}`);
     }
+  };
+
+  const onBadgeScan = () => {
+    scanBadge(sponsor.id);
+  };
+
+  if (notFound) {
+    return <HeroComponent title="Sponsor not found" redirectTo="/a/sponsors" />
   }
 
-  render() {
-    const { user, summit, sponsors } = this.props;
-    const { sponsor, tier, notFound, parsedIntro } = this.state;
+  const {
+    sponsor_page_use_banner_widget: bannerWidget,
+    sponsor_page_use_disqus_widget: disqusWidget,
+    sponsor_page_use_live_event_widget: liveEventWidget,
+    sponsor_page_use_schedule_widget: scheduleWidget
+  } = sponsorship || {};
 
-    if (notFound) {
-      return <HeroComponent title="Sponsor not found" redirectTo="/a/sponsors" />
-    }
+  if (sponsorLoading) {
+    return <HeroComponent title="Loading..." />
+  }
 
-    const { disqus, liveEvent, schedule, banner } = tier.sponsorPage.widgets || {};
-      return (
-          <React.Fragment>
-            <AttendanceTrackerComponent
-                sourceName="SPONSOR"
-                sourceId={sponsor.sponsorId}
-            />
-            <AccessTracker />
-            <SponsorHeader sponsor={sponsor} tier={tier} scanBadge={() => this.onBadgeScan()} />
-            <SponsorNavigation currentSponsor={sponsor} sponsors={sponsors} />
-            <section className={`section px-0 ${tier.sponsorPage.sponsorTemplate === 'big-header' ? 'pt-5' : 'pt-0'} pb-0`}>
-              {sponsor.sideImage && sponsor?.sideImage?.file &&
-              <div className="columns mx-0 mt-0 mb-6">
-                <div className={`column is-half px-5 py-0 ${styles.introHalf}`}>
-                  {sponsor.title && <h1>{sponsor.title}</h1>}
-                  {sponsor.intro && <span dangerouslySetInnerHTML={{ __html: parsedIntro }} />}
-                </div>
-                <div className="column is-half px-0 py-0">
-                  <img alt={sponsor.sideImage.alt} src={sponsor.sideImage.file} className={styles.sideImage} />
-                </div>
+  return (
+    <React.Fragment>
+      <AttendanceTrackerComponent
+        sourceName="SPONSOR"
+        sourceId={sponsor?.id}
+      />
+      <AccessTracker />
+      <SponsorHeader sponsor={sponsor} sponsorship={sponsorship} scanBadge={() => onBadgeScan()} />
+      <SponsorNavigation currentSponsor={sponsor} sponsors={sponsors} />
+      <section className={`section px-0 ${sponsorship?.sponsor_page_template === 'big-header' ? 'pt-5' : 'pt-0'} pb-0`}>
+        {sponsor?.side_image &&
+          <div className="columns mx-0 mt-0 mb-6">
+            <div className={`column is-half px-5 py-0 ${styles.introHalf}`}>
+              {sponsor?.company.name && <h1>{sponsor?.company.name}</h1>}
+              {sponsor?.intro && <span dangerouslySetInnerHTML={{ __html: parsedIntro }} />}
+            </div>
+            <div className="column is-half px-0 py-0">
+              <img alt={sponsor?.side_image_alt_text} src={sponsor?.side_image} className={styles.sideImage} />
+            </div>
+          </div>
+        }
+        <div className="columns mx-0 my-0">
+          <div className="column is-three-quarters px-5 py-0">
+            {!sponsor?.side_image &&
+              <div className={styles.sponsorIntro}>
+                {sponsor?.company.name && <h1>{sponsor?.company.name}</h1>}
+                {sponsor?.intro && <span dangerouslySetInnerHTML={{ __html: parsedIntro }} />}
               </div>
-              }
-              <div className="columns mx-0 my-0">
-                <div className="column is-three-quarters px-5 py-0">
-                  {!sponsor?.sideImage?.file &&
-                  <div className={styles.sponsorIntro}>
-                    {sponsor.title && <h1>{sponsor.title}</h1>}
-                    {sponsor.intro && <span dangerouslySetInnerHTML={{ __html: parsedIntro }} />}
-                  </div>
-                  }
-                  {liveEvent &&
-                  <LiveEventWidgetComponent
-                      onEventClick={(ev) => this.onEventChange(ev)}
-                      onlyPresentations={true}
-                      sponsorId={sponsor.companyId}
-                      showSponsor={!!sponsor.companyId}
-                      featuredEventId={sponsor.featuredEventId}
-                      streamThumbnailGifCaptureStarts={parseInt(getEnvVariable(LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS))}
-                  />
-                  }
-                  {schedule &&
-                  <UpcomingEventsComponent
-                      eventCount={3}
-                      sponsorId={sponsor.companyId}
-                      renderEventLink={(event) => <Link to={`/a/event/${event.id}`}>{event.title}</Link>}
-                      allEventsLink={<Link to={`/a/schedule#company=${encodeURIComponent(sponsor.name)}`}>View all <span className="sr-only">events</span></Link>}
-                  />
-                  }
-                  {banner && <SponsorBanner sponsor={sponsor} bgColor={sponsor.sponsorColor} scanBadge={() => this.onBadgeScan()} />}
-                </div>
-                <div className="column is-one-quarter px-5 py-0">
-                  {sponsor.chatLink &&
-                  <div className={styles.videoChatButton}>
-                    <Link className={styles.link} to={sponsor.chatLink}>
-                      <button className={`${styles.button} button is-large`} style={{ backgroundColor: `${sponsor.sponsorColor}` }}>
-                        <b>LIVE VIDEO CHAT!</b>
-                      </button>
-                    </Link>
-                  </div>
-                  }
-                  {disqus &&
-                  <DisqusComponent className={styles.disqusContainerSponsor} title="" sponsor={sponsor} />
-                  }
-                  {sponsor.documents &&
-                  <DocumentsComponent event={sponsor.documents} />
-                  }
-                  {sponsor.columnAds &&
-                  <AdvertiseSponsorsComponent ads={sponsor.columnAds} style={{ marginTop: '2em' }} />
-                  }
-                </div>
+            }
+            {liveEventWidget &&
+              <LiveEventWidgetComponent
+                onEventClick={(ev) => onEventChange(ev)}
+                onlyPresentations={true}
+                sponsorId={sponsor?.company.id}
+                showSponsor={!!sponsor?.company.id}
+                featuredEventId={sponsor?.featured_event_id}
+                streamThumbnailGifCaptureStarts={parseInt(getEnvVariable(LIVE_EVENT_THUMBNAIL_GIF_CAPTURE_STARTS))}
+              />
+            }
+            {scheduleWidget &&
+              <UpcomingEventsComponent
+                eventCount={3}
+                sponsorId={sponsor?.company.id}
+                renderEventLink={(event) => <Link to={`/a/event/${event.id}`}>{event.title}</Link>}
+                allEventsLink={<Link to={`/a/schedule#company=${encodeURIComponent(sponsor?.name)}`}>View all <span className="sr-only">events</span></Link>}
+              />
+            }
+            {bannerWidget && <SponsorBanner sponsor={sponsor} bgColor={sponsor?.company.color} scanBadge={() => onBadgeScan()} />}
+          </div>
+          <div className="column is-one-quarter px-5 py-0">
+            {sponsor?.chat_link &&
+              <div className={styles.videoChatButton}>
+                <Link className={styles.link} to={sponsor?.chat_link}>
+                  <button className={`${styles.button} button is-large`} style={{ backgroundColor: `${sponsor?.company.color}` }}>
+                    <b>LIVE VIDEO CHAT!</b>
+                  </button>
+                </Link>
               </div>
-            </section>
-          </React.Fragment>
-      )
-  }
+            }
+            {disqusWidget &&
+              <DisqusComponent className={styles.disqusContainerSponsor} title="" sponsor={sponsor} />
+            }
+            {sponsor?.materials && sponsor.materials.length > 0 &&
+              <DocumentsComponent event={sponsor?.materials} sponsorPage={true} />
+            }
+            {sponsor?.ads && sponsor.ads.length > 0 &&
+              <AdvertiseSponsorsComponent ads={sponsor?.ads} style={{ marginTop: '2em' }} />
+            }            
+          </div>
+        </div>
+      </section>
+    </React.Fragment>
+  )
 };
 
 const SponsorPage = (
-    {
-      location,
-      user,
-      scanBadge,
-      sponsorId,
-      summit,
-      sponsors,
-      tiers
-    }
+  {
+    location,
+    user,
+    scanBadge,
+    sponsorId,
+    summit,
+    sponsors
+  }
 ) => {
 
   return (
-      <Layout location={location}>
-        <SponsorPageTemplate
-            user={user}
-            scanBadge={scanBadge}
-            sponsorId={sponsorId}
-            summit={summit}
-            sponsors={sponsors}
-            tiers={tiers}
-        />
-      </Layout>
+    <Layout location={location}>
+      <SponsorPageTemplate
+        user={user}
+        scanBadge={scanBadge}
+        sponsorId={sponsorId}
+        summit={summit}
+        sponsors={sponsors}
+      />
+    </Layout>
   )
 };
 
@@ -208,7 +187,6 @@ SponsorPageTemplate.propTypes = {
 const mapStateToProps = ({ userState, sponsorState, summitState }) => ({
   user: userState,
   sponsors: sponsorState.sponsors,
-  tiers: sponsorState.tiers,
   summit: summitState.summit
 });
 

package/src/utils/filePath.js

@@ -33,6 +33,8 @@ const VOTEABLE_PRESENTATIONS_FILE_PATH = `${DATA_DIR_PATH}/${VOTEABLE_PRESENTATI
 const POSTERS_PAGES_FILE_PATH = `${STATIC_CONTENT_DIR_PATH}/posters-pages.json`;
 const MARKETING_SETTINGS_FILE_PATH = `${DATA_DIR_PATH}/marketing-settings.json`;
 const MAINTENANCE_FILE_PATH = `${STATIC_CONTENT_DIR_PATH}/maintenance.json`;
+const SPONSORS_FILE_NAME = "sponsors.json";
+const SPONSORS_FILE_PATH = `${STATIC_CONTENT_DIR_PATH}/${SPONSORS_FILE_NAME}`;
 
 exports.REQUIRED_DIR_PATHS = [
 	DATA_DIR_PATH,
@@ -72,4 +74,5 @@ exports.VOTEABLE_PRESENTATIONS_FILE_NAME = VOTEABLE_PRESENTATIONS_FILE_NAME;
 exports.VOTEABLE_PRESENTATIONS_FILE_PATH = VOTEABLE_PRESENTATIONS_FILE_PATH;
 exports.POSTERS_PAGES_FILE_PATH = POSTERS_PAGES_FILE_PATH;
 exports.MARKETING_SETTINGS_FILE_PATH = MARKETING_SETTINGS_FILE_PATH;
-exports.MAINTENANCE_FILE_PATH = MAINTENANCE_FILE_PATH;
+exports.MAINTENANCE_FILE_PATH = MAINTENANCE_FILE_PATH;
+exports.SPONSORS_FILE_PATH = SPONSORS_FILE_PATH;

package/src/content/sponsors-tiers.json

@@ -1,81 +0,0 @@
-{
-  "tiers": [
-    {
-      "id": "tier-cYGYq5-ae",
-      "name": "Top-Tier",
-      "badge": "/img/tier1-default-sessionbar-logo.png",
-      "lobby": {
-        "lobbyTemplate": "big-images",
-        "display": true
-      },
-      "sponsorPage": {
-        "sponsorTemplate": "big-header",
-        "widgets": {
-          "disqus": true,
-          "liveEvent": true,
-          "schedule": true,
-          "banner": true
-        }
-      },
-      "eventTemplate": "",
-      "expoHallPage": {
-        "expoHallTemplate": "large",
-        "display": true
-      }
-    },
-    {
-      "id": "tier-DHcI3dWGk",
-      "name": "Mid-Tier",
-      "badge": "/img/tier1-default-sessionbar-logo.png",
-      "lobby": {
-        "lobbyTemplate": "small-images",
-        "display": true
-      },
-      "sponsorPage": {
-        "sponsorTemplate": "big-header",
-        "widgets": {
-          "disqus": true,
-          "liveEvent": true,
-          "schedule": true,
-          "banner": true
-        }
-      },
-      "eventTemplate": "",
-      "expoHallPage": {
-        "expoHallTemplate": "medium",
-        "display": true
-      }
-    },
-    {
-      "id": "tier-U_wEwGX8a",
-      "name": "Lower-Tier",
-      "badge": "/img/tier1-default-sessionbar-logo.png",
-      "lobby": {
-        "lobbyTemplate": "small-images",
-        "display": true
-      },
-      "sponsorPage": {
-        "sponsorTemplate": "small-header",
-        "widgets": {
-          "disqus": true,
-          "liveEvent": true,
-          "schedule": true,
-          "banner": true
-        }
-      },
-      "eventTemplate": "",
-      "expoHallPage": {
-        "expoHallTemplate": "small",
-        "display": true
-      }
-    }
-  ],
-  "imageHeader": {
-    "file": "/img/tier1-default-sponsor-headerimage-expopage.png",
-    "alt": "header"
-  },
-  "lobbyButton": {
-    "text": "Visit the Expo Hall",
-    "link": "/a/sponsors/"
-  }
-}