@openeventkit/event-site 2.1.18 → 2.1.21

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

@@ -148,6 +148,7 @@ const siteSettings = {
             selectField({
               label: "Font Format",
               name: "fontFormat",
+              hint: "TTF format is required for certificate PDF generation",
               multiple: false,
               required: false,
               options: mapObjectToSelectOptions(FONT_FORMATS)
@@ -167,6 +168,7 @@ const siteSettings = {
             selectField({
               label: "Font Format",
               name: "fontFormat",
+              hint: "TTF format is required for certificate PDF generation",
               multiple: false,
               required: false,
               options: mapObjectToSelectOptions(FONT_FORMATS)

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

@@ -8,6 +8,15 @@ module.exports = `
   type Favicon {
     asset: File @fileByRelativePath
   }
+  type FontFile {
+    fontFile: String
+    fontFormat: String
+  }
+  type SiteFont {
+    fontFamily: String
+    regularFont: FontFile
+    boldFont: FontFile
+  }
   type Schedule {
     allowClick: Boolean
   }
@@ -42,6 +51,7 @@ module.exports = `
   type SiteSettingsJson implements Node {
     siteMetadata: SiteMetadata
     favicon: Favicon
+    siteFont: SiteFont
     widgets: Widgets
     idpLogo: IdpLogo
     identityProviderButtons: [IdentityProviderButton]

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

@@ -1,49 +1,47 @@
 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";
+import Mdx from "../../components/Mdx";
 
 // 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;
+    // 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
-  });
+    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>
+    <Mdx shortcodes={shortcodes} content={transformContent(mdx, getAsset)}/>
 );
 
 const ContentPagePreview = ({ entry, getAsset }) => {
-  const title = entry.getIn(["data", "title"]);
-  const body = entry.getIn(["data", "body"]);
-  return (
-    <ContentPageTemplate
-      title={title}
-      content={renderContent(body, getAsset)}
-    />
-  );
+    const title = entry.getIn(["data", "title"]);
+    const body = entry.getIn(["data", "body"]);
+    return (
+        <ContentPageTemplate
+            title={title}
+            content={renderContent(body, getAsset)}
+        />
+    );
 };
 
 ContentPagePreview.propTypes = {
-  entry: PropTypes.shape({
-    getIn: PropTypes.func.isRequired
-  }).isRequired,
-  getAsset: PropTypes.func.isRequired
+    entry: PropTypes.shape({
+        getIn: PropTypes.func.isRequired
+    }).isRequired,
+    getAsset: PropTypes.func.isRequired
 };
 
-export default ContentPagePreview;
+export default ContentPagePreview;

package/src/components/AvatarEditorModal/index.js

@@ -51,6 +51,7 @@ const AvatarUploadButton = ({
 const AvatarEditorContent = ({
   editorRef,
   image,
+  newImageSelected,
   onUpload,
   handleSave,
   handleClose
@@ -60,6 +61,12 @@ const AvatarEditorContent = ({
   const [rotate, setRotate] = useState(0);
   const [newImage, setNewImage] = useState(false);
 
+  useEffect(() => {
+    if (newImageSelected) {
+      setNewImage(true);
+    }
+  }, [newImageSelected]);
+
   const handleScale = (e, newValue) => {
     setScale(newValue);
     setNewImage(true);
@@ -203,6 +210,7 @@ const AvatarEditorModal = ({
   const fileInputRef = useRef(null);
 
   const [image, setImage] = useState(null);
+  const [newImageSelected, setNewImageSelected] = useState(false);
   const [loadingPicture, setLoadingPicture] = useState(false);
   const [fetchError, setFetchError] = useState(false);
 
@@ -223,6 +231,7 @@ const AvatarEditorModal = ({
 
   const handleNewImage = (e) => {
     setImage(e.target.files[0]);
+    setNewImageSelected(true);
     setFetchError(false);
   };
 
@@ -340,6 +349,7 @@ const AvatarEditorModal = ({
             <AvatarEditorContent
               editorRef={editorRef}
               image={image}
+              newImageSelected={newImageSelected}
               onUpload={() => fileInputRef.current.click()}
               handleSave={handleSave}
               handleClose={handleClose}

package/src/components/CertificatePDF.js

@@ -0,0 +1,313 @@
+import React from "react";
+import { Document, Page, Text, View, Image, StyleSheet, Font, pdf } from "@react-pdf/renderer";
+
+import fontRegular from "../../static/fonts/nunito-sans/nunito-sans-v18-latin-400.ttf";
+import fontBold from "../../static/fonts/nunito-sans/nunito-sans-v18-latin-700.ttf";
+
+const registerDefaultFont = () => {
+  try {
+    Font.register({
+      family: "Nunito Sans", 
+      fonts: [
+        {
+          src: fontRegular,
+          fontWeight: "normal"
+        },
+        {
+          src: fontBold,
+          fontWeight: "bold"
+        },
+      ]
+    });
+    return true;
+  } catch (error) {
+    console.error("Failed to register default font:", error);
+    return false;
+  }
+};
+
+// helper to convert relative font paths to absolute URLs
+const getFontUrl = (fontPath) => {
+  if (!fontPath) return null;
+  
+  if (fontPath.startsWith("http://") || fontPath.startsWith("https://")) {
+    return fontPath;
+  }
+
+  // For relative paths, prepend the origin
+  // Site settings fonts are served from /fonts/ (not /static/fonts/)
+  if (typeof window !== "undefined") {
+    // Remove /static prefix if present since fonts are served at root /fonts/
+    const cleanPath = fontPath.replace("/static/fonts/", "/fonts/");
+    return `${window.location.origin}${cleanPath}`;
+  }
+  
+  return fontPath;
+};
+
+// register custom font from site settings if available
+const registerCustomFont = (siteFont) => {
+  if (!siteFont || !siteFont.fontFamily || !siteFont.regularFont || !siteFont.boldFont) {
+    return false;
+  }
+  
+  const fonts = [];
+
+  if (siteFont.regularFont.fontFile && siteFont.regularFont.fontFormat === "ttf") {
+    const fontUrl = getFontUrl(siteFont.regularFont.fontFile);
+    if (fontUrl) {
+      fonts.push({
+        src: fontUrl,
+        fontWeight: "normal"
+      });
+    }
+  }
+
+  if (siteFont.boldFont.fontFile && siteFont.boldFont.fontFormat === "ttf") {
+    const fontUrl = getFontUrl(siteFont.boldFont.fontFile);
+    if (fontUrl) {
+      fonts.push({
+        src: fontUrl,
+        fontWeight: "bold"
+      });
+    }
+  }
+
+  if (fonts.length > 0) {
+    try {
+      Font.register({
+        family: siteFont.fontFamily,
+        fonts: fonts
+      });
+      return true;
+    } catch (error) {
+      console.warn("Failed to register custom font:", error);
+      return false;
+    }
+  }
+  
+  return false;
+};
+
+const calculateOptimalFontSize = (text, maxWidth = 650, initialFontSize = 48, minFontSize = 24) => {
+  // estimate average character width based on font size
+  // for most fonts, character width is roughly 0.5-0.6 times the font size
+  const avgCharWidthRatio = 0.55;
+  
+  // start with initial font size
+  let fontSize = initialFontSize;
+  
+  // calculate the approximate text width
+  const estimatedWidth = text.length * fontSize * avgCharWidthRatio;
+  
+  // if text fits within maxWidth, use initial font size
+  if (estimatedWidth <= maxWidth) {
+    return fontSize;
+  }
+  
+  // calculate optimal font size to fit within maxWidth
+  fontSize = Math.floor(maxWidth / (text.length * avgCharWidthRatio));
+  
+  // ensure font size is within bounds
+  fontSize = Math.max(minFontSize, Math.min(initialFontSize, fontSize));
+  
+  // round to common font sizes for better appearance
+  const commonSizes = [48, 44, 40, 36, 32, 28, 24];
+  const finalSize = commonSizes.find(size => size <= fontSize) || minFontSize;
+  
+  return finalSize;
+};
+
+const CertificatePDF = ({ 
+  attendee, 
+  summit, 
+  settings, 
+  isCheckedIn = true 
+}) => {
+
+  const role = attendee.role || "Attendee";
+  const position = attendee.jobTitle || "";
+  const company = attendee.company || "";
+
+  const fullName = `${attendee.firstName} ${attendee.lastName}`;
+
+  const nameFontSize = calculateOptimalFontSize(fullName);
+
+
+  let fontFamily = "Nunito Sans";
+
+  if (settings?.siteFont && settings.siteFont.fontFamily) {
+    const customFontRegistered = registerCustomFont(settings.siteFont);
+    if (customFontRegistered) {
+      fontFamily = settings.siteFont.fontFamily;
+    } else {
+      registerDefaultFont();
+    }
+  } else {
+    registerDefaultFont();
+  }
+
+  const styles = StyleSheet.create({
+    page: {
+      width: settings.width || "11in",
+      height: settings.height || "8.5in",
+      backgroundColor: settings.mainColor || settings.colorAccent || "#ff5e32",
+      fontFamily: fontFamily,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 40,
+    },
+    whiteCard: {
+      width: "100%",
+      maxWidth: 680,
+      height: "100%",
+      maxHeight: 502,
+      backgroundColor: "#ffffff",
+      borderRadius: 4,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    content: {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      padding: 60,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    logo: {
+      maxWidth: settings.logoWidth || 250,
+      ...(settings.logoHeight && { maxHeight: settings.logoHeight }),
+      marginBottom: 25,
+      objectFit: "contain",
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: "normal",
+      color: "#000000",
+      textAlign: "center",
+      letterSpacing: 0.15,
+      lineHeight: "160%",
+    },
+    summitName: {
+      fontSize: 24,
+      fontWeight: "bold",
+      color: settings.mainColor || settings.colorAccent || "#ff5e32",
+      textAlign: "center",
+      textTransform: "uppercase",
+      letterSpacing: 0,
+      lineHeight: "133%",
+    },
+    name: {
+      fontSize: nameFontSize,
+      fontWeight: "normal",
+      color: "#000000",
+      textAlign: "center",
+      letterSpacing: 0,
+      lineHeight: "117%",
+      marginTop: 36,
+    },
+    nameUnderline: {
+      width: 500,
+      height: 1.2,
+      backgroundColor: "#000000",
+      marginTop: 8,
+      marginBottom: 20,
+    },
+    details: {
+      fontSize: 14,
+      fontWeight: "normal",
+      color: "#000000",
+      textAlign: "center",
+      letterSpacing: 0.4,
+      lineHeight: "166%",
+    },
+    role: {
+      fontSize: 14,
+      fontWeight: "normal",
+      color: "#000000",
+      textAlign: "center",
+      letterSpacing: 0.4,
+      lineHeight: "166%",
+      marginTop: 6,
+    },
+  });
+
+  return (
+    <Document>
+      <Page size="LETTER" orientation="landscape" style={styles.page}>
+        {/* White Card Container */}
+        <View style={styles.whiteCard}>
+          <View style={styles.content}>
+            {/* Logo */}
+            {(settings.logo || summit.logo) && (
+              <Image 
+                src={settings.logo || summit.logo} 
+                style={styles.logo} 
+              />
+            )}
+            
+            {/* Title */}
+            <Text style={styles.title}>
+              {settings.titleText || "CERTIFICATE OF ATTENDANCE"}
+            </Text>
+            
+            {/* Event Name */}
+            <Text style={styles.summitName}>
+              {settings.summitName || summit.name || "EVENT NAME"}
+            </Text>
+            
+            {/* Attendee Name */}
+            <Text style={styles.name}>
+              {fullName}
+            </Text>
+            
+            {/* Underline */}
+            <View style={styles.nameUnderline} />
+            
+            {/* Position and Company */}
+            {(position || company) && (
+              <Text style={styles.details}>
+                {position}{position && company ? ", " : ""}{company}
+              </Text>
+            )}
+            
+            {/* Role */}
+            {settings.showRole && (
+              <Text style={styles.role}>
+                {role}
+              </Text>
+            )}
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+};
+
+// helper function to generate and download the certificate
+export const generateCertificatePDF = async (attendee, summit, settings) => {
+  try {
+    const doc = <CertificatePDF attendee={attendee} summit={summit} settings={settings} />;
+    const blob = await pdf(doc).toBlob();
+    
+    // create download link
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `certificate-${attendee.firstName}-${attendee.lastName}.pdf`.toLowerCase().replace(/\s+/g, "-");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  } catch (error) {
+    console.error("Error generating certificate PDF:", error);
+    throw error;
+  }
+};
+
+export default CertificatePDF;

package/src/components/CertificateSection.js

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { generateCertificatePDF } from './CertificatePDF';
+import { useCertificateSettings } from '../utils/certificateSettings';
+import useMarketingSettings from '../utils/useMarketingSettings';
+import { MARKETING_SETTINGS_KEYS, DISPLAY_OPTIONS } from '../utils/useMarketingSettings';
+import useSiteSettings from '../utils/useSiteSettings';
+import styles from '../styles/full-profile.module.scss';
+
+const USER_ROLES = {
+  SPEAKER: 'Speaker',
+  ATTENDEE: 'Attendee'
+};
+
+const CertificateSection = ({ 
+  user, 
+  summit, 
+  freshTickets = []
+}) => {
+  const [error, setError] = useState(null);
+  const { getSettingByKey } = useMarketingSettings();
+  const siteSettings = useSiteSettings();
+
+  // Get certificate settings
+  const certificateSettings = useCertificateSettings(summit, siteSettings?.siteFont);
+  
+  // Check if certificates are enabled
+  const certificatesEnabled = getSettingByKey(MARKETING_SETTINGS_KEYS.certificateEnabled) !== DISPLAY_OPTIONS.hide;
+  
+  if (!certificatesEnabled) {
+    return null;
+  }
+
+  // Filter tickets that are checked in
+  const checkedInTickets = freshTickets.filter(ticket => {
+    const isCheckedIn = ticket.owner?.summit_hall_checked_in === true;
+    const isValidTicket = 
+      ticket.status !== 'Cancelled' &&
+      ticket.status !== 'RefundRequested' &&
+      ticket.owner !== null;
+    
+    return isCheckedIn && isValidTicket;
+  });
+
+  if (checkedInTickets.length === 0) {
+    return (
+      <div>
+        <h3 className={styles.header}>Certificate of Attendance</h3>
+        <div style={{ padding: '15px 0', color: '#666' }}>
+          Check-in required to download certificate.
+        </div>
+      </div>
+    );
+  }
+
+  // Get user role from tickets/badges - prioritize Speaker role across all tickets
+  const getUserRole = (allTickets) => {
+    // Check if any ticket has speaker role
+    const hasSpeakerTicket = allTickets.some(ticket => {
+      // Check badge type name for speaker
+      const badgeType = summit?.badge_types?.find(bt => bt.id === ticket.badge?.type_id);
+      if (badgeType?.name?.toLowerCase().includes('speaker')) {
+        return true;
+      }
+      
+      // Check badge features for speaker
+      const featureIds = ticket.badge?.features || [];
+      const badgeFeaturesTypes = summit?.badge_features_types || [];
+      
+      return featureIds.some(featureId => {
+        const feature = badgeFeaturesTypes.find(f => f.id === featureId);
+        return feature?.name?.toLowerCase().includes('speaker');
+      });
+    });
+    
+    return hasSpeakerTicket ? USER_ROLES.SPEAKER : USER_ROLES.ATTENDEE;
+  };
+
+  // Determine the user's role across all tickets (prioritize Speaker)
+  const userRole = getUserRole(checkedInTickets);
+
+  const handleDownloadCertificate = async (ticket) => {
+    setError(null);
+    
+    try {
+      const attendeeData = {
+        firstName: user.first_name || user.given_name || ticket.owner?.first_name,
+        lastName: user.last_name || user.family_name || ticket.owner?.last_name,
+        company: user.company || ticket.owner?.company || '',
+        jobTitle: user.job_title || user.jobTitle || '',
+        email: user.email || ticket.owner?.email,
+        role: userRole // Use the prioritized role across all tickets
+      };
+
+      const summitData = {
+        name: summit.name,
+        logo: summit.logo,
+        start_date: summit.start_date,
+        end_date: summit.end_date
+      };
+
+      await generateCertificatePDF(attendeeData, summitData, certificateSettings);
+    } catch (err) {
+      console.error('Error downloading certificate:', err);
+      setError('Failed to download certificate. Please try again.');
+    }
+  };
+
+  return (
+    <div style={{ marginTop: '20px' }}>
+      <button 
+        className="button is-large"
+        onClick={() => handleDownloadCertificate(checkedInTickets[0])}
+        style={{ 
+          width: '100%', 
+          height: '5.5rem',
+          color: 'var(--color_input_text_color)',
+          backgroundColor: 'var(--color_input_background_color)',
+          borderColor: 'var(--color_input_border_color)'
+        }}
+      >
+        Download Certificate
+      </button>
+      
+      {error && (
+        <div style={{ color: '#d32f2f', fontSize: '14px', marginTop: '10px' }}>
+          {error}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const mapStateToProps = ({ summitState, userState }) => ({
+  summit: summitState.summit,
+  user: userState.userProfile || userState.idpProfile
+});
+
+export default connect(mapStateToProps)(CertificateSection);