@openeventkit/event-site 2.1.18 → 2.1.21

package/src/styles/rsvp-page.module.scss

@@ -0,0 +1,63 @@
+.speakerWrapper {
+  color: var(--color_text_dark);
+  display: flex;
+  margin-top: 15px;
+
+  .name {
+    width: max-content;
+  }
+
+  .moderator {
+    font-size: 12px;
+    margin-top: -2px;
+  }
+
+  .job {
+    font-size: 10px;
+
+    .company {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: inherit;
+    }
+  }
+
+  .speaker {
+    height: 55px;
+    margin: 0 15px 15px 0;
+    border-radius: 4px;
+    display: flex;
+    flex: 1 0 auto;
+
+    .picWrapper {
+      height: 100%;
+      width: 55px;
+
+      .pic {
+        height: 100%;
+        width: 100%;
+        background-size: cover;
+        border-radius: 50%;
+      }
+    }
+
+    .nameWrapper {
+      background-color: var(--color_background_light);
+      height: 100%;
+      padding: 5px;
+      border-radius: 0 4px 4px 0;
+      overflow: hidden;
+      flex: 1 0;
+      min-width: 150px;
+      max-width: 300px;
+      margin-left: 5px;
+    }
+  }
+}
+
+.buttonWrapper {
+  margin-top: 15px;
+  display: flex;
+  gap: 15px;
+}

package/src/templates/full-profile-page.js

@@ -17,6 +17,11 @@ import LiteScheduleComponent from '../components/LiteScheduleComponent'
 import AvatarEditorModal from '../components/AvatarEditorModal'
 import ChangePasswordComponent from '../components/ChangePasswordComponent';
 import AccessTracker from "../components/AttendeeToAttendeeWidgetComponent";
+import CertificateSection from '../components/CertificateSection';
+import useMarketingSettings from '../utils/useMarketingSettings';
+import { MARKETING_SETTINGS_KEYS, DISPLAY_OPTIONS } from '../utils/useMarketingSettings';
+import { getAccessTokenSafely } from '../utils/loginUtils';
+import { getEnvVariable, SUMMIT_API_BASE_URL } from '../utils/envVariables';
 
 import { updateProfilePicture, updateProfile, getIDPProfile, updatePassword } from '../actions/user-actions'
 
@@ -24,9 +29,12 @@ import styles from '../styles/full-profile.module.scss'
 
 import "openstack-uicore-foundation/lib/css/components/inputs/datetimepicker.css";
 
-export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, updateProfilePicture, updatePassword }) => {
+export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, updateProfilePicture, updatePassword, summit }) => {
 
     const [showProfile, setShowProfile] = useState(false);
+    const [freshTickets, setFreshTickets] = useState([]);
+    const [ticketsFetched, setTicketsFetched] = useState(false);
+    const { getSettingByKey } = useMarketingSettings();
     const [personalProfile, setPersonalProfile] = useState({
         firstName: '',
         lastName: '',
@@ -193,6 +201,51 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
         navigate('/a/my-schedule')
     };
 
+    // Fetch fresh tickets for certificate validation
+    const fetchFreshTickets = async () => {
+        try {
+            const accessToken = await getAccessTokenSafely();
+            if (!accessToken || !summit) return;
+
+            const params = new URLSearchParams({
+                access_token: accessToken,
+                fields: 'id,status',
+                expand: 'owner'
+            });
+
+            const apiBaseUrl = getEnvVariable(SUMMIT_API_BASE_URL);
+            const url = `${apiBaseUrl}/api/v1/summits/${summit.id}/orders/all/tickets/me?${params}`;
+            
+            const response = await fetch(url);
+
+            if (response.ok) {
+                const data = await response.json();
+                setFreshTickets(data.data || []);
+            }
+        } catch (err) {
+            console.error('Profile page - Error fetching tickets:', err);
+        } finally {
+            setTicketsFetched(true);
+        }
+    };
+
+    useEffect(() => {
+        if (summit && user.idpProfile && !ticketsFetched) {
+            fetchFreshTickets();
+        }
+    }, [summit, user.idpProfile, ticketsFetched]);
+
+    // Check if certificates are enabled and user has checked-in tickets
+    const certificatesEnabled = getSettingByKey(MARKETING_SETTINGS_KEYS.certificateEnabled) !== DISPLAY_OPTIONS.hide;
+    const checkedInTickets = freshTickets.filter(ticket => {
+        const isCheckedIn = ticket.owner?.summit_hall_checked_in === true;
+        console.log(ticket)
+        const isValidTicket = ticket.status === 'Paid';
+        return isCheckedIn && isValidTicket;
+    });
+    
+    const showCertificate = certificatesEnabled && checkedInTickets.length > 0;
+
     const discardChanges = (state) => {
         switch (state) {
             case 'profile':
@@ -264,6 +317,9 @@ export const FullProfilePageTemplate = ({ user, getIDPProfile, updateProfile, up
                         <h4>
                             @{user.idpProfile?.nickname}
                         </h4>
+                        {showCertificate && (
+                            <CertificateSection freshTickets={freshTickets} />
+                        )}
                         <ChangePasswordComponent updatePassword={handlePasswordUpdate} />
                     </div>
                     <div className="column">
@@ -661,6 +717,7 @@ const FullProfilePage = (
     {
         location,
         user,
+        summit,
         getIDPProfile,
         updateProfile,
         updateProfilePicture,
@@ -671,6 +728,7 @@ const FullProfilePage = (
         <Layout location={location}>
             <OrchestedTemplate
                 user={user}
+                summit={summit}
                 getIDPProfile={getIDPProfile}
                 updateProfile={updateProfile}
                 updateProfilePicture={updateProfilePicture}
@@ -695,8 +753,9 @@ FullProfilePageTemplate.propTypes = {
     updatePassword: PropTypes.func
 };
 
-const mapStateToProps = ({ userState }) => ({
+const mapStateToProps = ({ userState, summitState }) => ({
     user: userState,
+    summit: summitState.summit,
 });
 
 export default connect(mapStateToProps,

package/src/templates/marketing-page-template/MainColumn.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { navigate } from "gatsby";
 import PropTypes from "prop-types";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
-import Mdx from "@mdx-js/runtime";
+import Mdx from "../../components/Mdx";
 import Container from "./Container";
 import LiteScheduleComponent from "../../components/LiteScheduleComponent";
 import DisqusComponent from "../../components/DisqusComponent";
@@ -22,49 +22,47 @@ const onEventClick = (ev) => navigate(`/a/event/${ev.id}`);
 
 const MainColumn = ({ widgets, summitPhase, isLoggedUser, onEventClick, lastDataSync, fullWidth, maxHeight }) => {
   const { content, schedule, disqus, image } = widgets || {};
-  
+
   const scheduleProps = schedule && isLoggedUser && summitPhase !== PHASES.BEFORE ? { onEventClick } : {};
 
   return (
-    <div
-      className={`column pt-6 pb-5 px-6 ${!fullWidth ? "is-half" : ""} ${styles.mainColumn || ""}`}
-      style={{ maxHeight: !fullWidth && maxHeight ? maxHeight : "none", overflowY: "auto" }}
-    >
-      <Container>
-        {content?.display && content?.body && (
-          <Mdx components={shortcodes}>
-            {content.body}
-          </Mdx>
-        )}
-        {schedule?.display && (
-          <>
-            <h2><b>{schedule.title}</b></h2>
-            <LiteScheduleComponent
-              {...scheduleProps}
-              lastDataSync={lastDataSync}
-              id={`marketing_lite_schedule_${lastDataSync}`}
-              page="marketing-site"
-              showAllEvents={true}
-              showSearch={false}
-              showNav={true}
-            />
-          </>
-        )}
-        {disqus?.display && (
-          <>
-            <h2><b>{disqus.title}</b></h2>
-            <DisqusComponent page="marketing-site" />
-          </>
-        )}
-        {image?.display && image?.image?.src && (
-          <>
-            <h2><b>{image.title}</b></h2>
-            <br/>
-            <GatsbyImage image={getImage(image.image.src)} alt={image.image.alt ?? ""} />
-          </>
-        )}
-      </Container>
-    </div>
+      <div
+          className={`column pt-6 pb-5 px-6 ${!fullWidth ? "is-half" : ""} ${styles.mainColumn || ""}`}
+          style={{ maxHeight: !fullWidth && maxHeight ? maxHeight : "none", overflowY: "auto" }}
+      >
+        <Container>
+          {content?.display && content?.body && (
+              <Mdx shortcodes={shortcodes} content={content.body}/>
+          )}
+          {schedule?.display && (
+              <>
+                <h2><b>{schedule.title}</b></h2>
+                <LiteScheduleComponent
+                    {...scheduleProps}
+                    lastDataSync={lastDataSync}
+                    id={`marketing_lite_schedule_${lastDataSync}`}
+                    page="marketing-site"
+                    showAllEvents={true}
+                    showSearch={false}
+                    showNav={true}
+                />
+              </>
+          )}
+          {disqus?.display && (
+              <>
+                <h2><b>{disqus.title}</b></h2>
+                <DisqusComponent page="marketing-site" />
+              </>
+          )}
+          {image?.display && image?.image?.src && (
+              <>
+                <h2><b>{image.title}</b></h2>
+                <br/>
+                <GatsbyImage image={getImage(image.image.src)} alt={image.image.alt ?? ""} />
+              </>
+          )}
+        </Container>
+      </div>
   );
 };
 
@@ -77,4 +75,4 @@ MainColumn.propTypes = {
   maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 
-export default MainColumn;
+export default MainColumn;

package/src/templates/rsvp-page.js

@@ -0,0 +1,144 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { connect } from "react-redux";
+import { Redirect } from "@gatsbyjs/reach-router";
+import { useTranslation } from "react-i18next";
+import AjaxLoader from 'openstack-uicore-foundation/lib/components/ajaxloader'
+import Layout from "../components/Layout";
+import { acceptRSVPInvitation, declineRSVPInvitation, getRSVPInvitation } from "../actions/user-actions";
+import { getEventById } from "../actions/event-actions";
+import styles from "../styles/rsvp-page.module.scss"
+import { RSVP_STATUS } from "@utils/rsvpConstants";
+import { Badge } from "react-bootstrap";
+import "../i18n";
+
+const RSVPPage = ({ location, rsvpInvitation, event, getRSVPInvitation, acceptRSVPInvitation, declineRSVPInvitation, getEventById }) => {
+
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(true);
+
+  const queryParams = useMemo(() => {
+    const search = location?.search || "";
+    const searchParams = new URLSearchParams(search);
+    const k = searchParams.get("k");
+    const eventId = searchParams.get("event_id");
+    return {
+      invitationToken: k ? k : null,
+      eventId: eventId ? Number(eventId) : null,
+    };
+  }, [location?.search]);
+
+  const { invitationToken, eventId } = queryParams;
+
+  useEffect(() => {
+    if (!invitationToken) return;
+    getRSVPInvitation(invitationToken, eventId)
+      .then(() => getEventById(eventId))
+      .finally(() => setIsLoading(false));
+  }, [invitationToken, eventId]);
+
+  const moderatorId = event?.moderator_speaker_id;
+  const errorMessage = rsvpInvitation?.errorMessage;
+
+  const handleConfirmRSVP = (isAccepted) => {
+    setIsLoading(true);
+    const action = isAccepted ? acceptRSVPInvitation : declineRSVPInvitation;
+    return action(invitationToken, eventId).finally(() => setIsLoading(false));
+  }
+
+  if (!invitationToken || !eventId) {
+    return <Redirect to="/" noThrow />;
+  }
+
+  return (
+    <Layout location={location}>
+      <AjaxLoader show={isLoading} size={120} />
+      {!isLoading && (
+        <div className={`container`}>
+          {event ?
+            (<>
+              <h2>{t("rsvp_page.invite_message", { event: event?.title })} </h2>
+
+              <br />
+
+              <div dangerouslySetInnerHTML={{ __html: event?.description || "" }} />
+
+              <br />
+
+              {event?.speakers?.length > 0 &&
+                <div>
+                  <b>{t("rsvp_page.speakers")}</b>
+                  <div className={styles.speakerWrapper}>
+                    {event.speakers.map((speaker) => {
+                      const isModerator = speaker.id === moderatorId;
+                      return (
+                        <div className={styles.speaker}>
+                          {speaker.pic && (
+                            <div className={styles.picWrapper}>
+                              <div className={styles.pic} style={{ backgroundImage: `url(${speaker.pic})` }} />
+                            </div>
+                          )}
+                          <div className={styles.nameWrapper}>
+                            <div className={styles.name}>
+                              {speaker.first_name} {speaker.last_name} {isModerator && <Badge className={styles.moderator} pill>Moderator</Badge>}
+                            </div>
+                            {speaker.title &&
+                              <div className={styles.job}>
+                                <span>{speaker.title}</span>
+                                {speaker.company && <span className={styles.company}> - {speaker.company}</span>}
+                              </div>
+                            }
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              }
+              <div className={styles.buttonWrapper}>
+                {errorMessage && (
+                    <h3 dangerouslySetInnerHTML={{ __html: errorMessage }} />
+                )}
+                {rsvpInvitation?.status === RSVP_STATUS.rejected && (
+                  <h4>{t("rsvp_page.decline_message")} </h4>
+                )}
+                {rsvpInvitation?.status === RSVP_STATUS.accepted && (
+                  <h4>{t("rsvp_page.confirm_message")} </h4>
+                )}
+                {rsvpInvitation?.status === RSVP_STATUS.pending && (
+                  <>
+                    <button className="button is-large" onClick={() => handleConfirmRSVP(true)}>
+                      {t("rsvp_page.accept_button")}
+                    </button>
+                    <button className="button is-large" onClick={() => handleConfirmRSVP(false)}>
+                      {t("rsvp_page.decline_button")}
+                    </button>
+                  </>
+                )}
+              </div>
+            </>)
+            :
+            (
+              <>
+                  <h3>Activity not found.</h3>
+              </>
+            )
+          }
+        </div>
+      )}
+    </Layout>
+  );
+};
+
+const mapStateToProps = ({ userState, eventState }) => ({
+  rsvpInvitation: userState.rsvpInvitation,
+  event: eventState.event,
+});
+
+export default connect(mapStateToProps,
+  {
+    getRSVPInvitation,
+    acceptRSVPInvitation,
+    declineRSVPInvitation,
+    getEventById
+  }
+)(RSVPPage);

package/src/utils/alerts.js

@@ -30,8 +30,8 @@ export const alertPopup = (title, html, confirmLabel, confirmAction, cancelLabel
     })
 };
 
-
 export const needsLogin = (action, msg = null) => {
+
     const defaultMessage = "Please log in to add sessions to My Schedule.";
 
     const login = () => {

package/src/utils/build-json/BaseAPIRequest.js

@@ -0,0 +1,25 @@
+class BaseAPIRequest {
+    constructor(fields = [], relations = [], expands = []) {        
+        this.fields = fields;
+        this.relations = relations;
+        this.expands = expands;
+    }
+    
+    getFields() {
+        return this.fields.join(",");
+    }
+
+    getExpands() {
+        return this.expands.join(",");
+    }
+
+    getRelations() {
+        return this.relations.join(",");
+    }
+    
+    static build(apiUrl) {        
+        throw new Error("This method should not be used from BaseAPIRequest class.");
+    }
+}
+
+module.exports = BaseAPIRequest;

package/src/utils/build-json/EventsAPIRequest.js

@@ -0,0 +1,171 @@
+const BaseAPIRequest = require("./BaseAPIRequest");
+
+const SPEAKER_MODERATOR_FIELDS = ['id', 'first_name', 'last_name', 'title', 'bio', 'member_id', 'pic', 'big_pic', 'company', 'featured'];
+const DOCUMENTS_FIELDS = ['display_on_site', 'name', 'order', 'class_name', 'type', 'public_url', 'link'];
+const CURRENT_ATTENDANCE_FIELDS = ['member_first_name', 'member_last_name', 'member_pic'];
+
+class EventAPIRequest extends BaseAPIRequest {
+    static instance;
+
+    constructor() {
+        const primary_fields = [
+            "id",
+            "created",
+            "start_date",
+            "end_date",
+            "title",
+            "abstract",
+            "description",
+            "level",
+            "image",
+            "stream_thumbnail",
+            "location_id",
+            "class_name",
+            "allow_feedback",
+            "head_count",
+            "attendance_count",
+            "current_attendance_count",
+            "to_record",
+            "etherpad_link",
+            "streaming_url",
+            "streaming_type",
+            "meeting_url",
+            "current_attendance",
+            "attendees_expected_learnt",
+            "show_sponsors",
+            "duration",
+            // RSVP fields
+            'rsvp_type',
+            'rsvp_capacity',
+        ];
+
+        const type_fields = ["type.id", "type.name", "type.allows_publishing_dates", "type.color"];
+        const tags_fields = ["tags.id", "tags.tag"];
+        const location_fields = ["location.id", "location.class_name", "location.name", "location.venue.name", "location.floor.name"];
+        const track_fields = ["track.id", "track.name", "track.icon_url", "track.color", "track.text_color", "track.parent_id"];
+        const track_groups_fields = ["track_groups.id", "track_groups.name", "track_groups.parent_id", "track_groups.color", "track_groups.order"];
+        const speakers_badge_feature_fields = ["speakers.badge_features.id", "speakers.badge_features.name", "speakers.badge_features.image"];
+        const sponsors_fields = ["sponsors.id", "sponsors.name", "sponsors.logo"];
+
+        const speakers_fields = SPEAKER_MODERATOR_FIELDS.map((e) => `speakers.${e}`);
+        const moderator_fields = SPEAKER_MODERATOR_FIELDS.map((e) => `moderator.${e}`);
+        const media_upload_fields = DOCUMENTS_FIELDS.map((e) => `media_uploads.${e}`)
+        const slides_fields = DOCUMENTS_FIELDS.map((e) => `slides.${e}`)
+        const links_fields = DOCUMENTS_FIELDS.map((e) => `links.${e}`)
+        const video_fields = DOCUMENTS_FIELDS.map((e) => `videos.${e}`)
+        const current_attendance_fields = CURRENT_ATTENDANCE_FIELDS.map((e) => `current_attendance.${e}`)
+
+        const primary_relations = [
+            "slides",
+            "links",
+            "videos",
+            "media_uploads",
+            "type",
+            "track",
+            "location",
+            "speakers",
+            "moderator",
+            "sponsors",
+            "tags",
+            "current_attendance",
+            "allowed_ticket_types"
+        ];
+
+        const speakers_relations = ["speakers.badge_features", "speakers.presentations", "speakers.moderated_presentations"];
+
+        const track_relations = ["track.track_groups"];
+
+        const type_relations = ["type.allowed_ticket_types"];
+
+        const locations_relations = ["location.venue", "location.floor", "location.venue.none", "location.floor.none"];
+
+        // TODO: review relations for "current_attendance"
+
+        const relations = [
+            ...track_relations,
+            ...type_relations,
+            ...speakers_relations,
+            ...locations_relations,
+            ...primary_relations,
+        ];
+
+        const speakers_expand = ["speakers.badge_features"];
+
+        const location_expand = ["location.venue", "location.floor"];
+
+        const track_expand = [
+            "track.subtracks",
+            "track.allowed_access_levels",
+        ]
+
+        const expands = [
+            "slides",
+            "links",
+            "videos",
+            "media_uploads",
+            "type",
+            "track",
+            "location",
+            "speakers",
+            "moderator",
+            "sponsors",
+            "tags",
+            "current_attendance",
+            ...track_expand,
+            ...speakers_expand,
+            ...location_expand
+        ];
+
+        super(
+            [
+                ...primary_fields,
+                ...type_fields,
+                ...tags_fields,
+                ...location_fields,
+                ...track_fields,
+                ...track_groups_fields,
+                ...sponsors_fields,
+                ...speakers_fields,
+                ...moderator_fields,
+                ...media_upload_fields,
+                ...slides_fields,
+                ...links_fields,
+                ...video_fields,
+                ...current_attendance_fields,
+                ...speakers_badge_feature_fields
+            ],
+            relations,
+            expands
+        );
+
+        if (!EventAPIRequest.instance) {
+            EventAPIRequest.instance = this;
+        }
+    }
+
+    static getInstance() {
+        if (!EventAPIRequest.instance) {
+            new EventAPIRequest();
+        }
+        return EventAPIRequest.instance;
+    }
+
+    static getParams(apiUrl) {
+        const instance = EventAPIRequest.getInstance();
+        apiUrl.addQuery("fields", instance.getFields());
+        apiUrl.addQuery("expand", instance.getExpands());
+        apiUrl.addQuery("relations", instance.getRelations());
+        return apiUrl.query(true);
+    }
+
+    static build(apiUrl) {
+        const instance = EventAPIRequest.getInstance();
+        apiUrl.addQuery("fields", instance.getFields());
+        apiUrl.addQuery("expand", instance.getExpands());
+        apiUrl.addQuery("relations", instance.getRelations());
+
+        return apiUrl.toString();
+    }
+}
+
+module.exports = EventAPIRequest;