@openeventkit/event-site 2.1.22 → 2.1.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.1.22",
+  "version": "2.1.23",
   "author": "Tipit LLC",
   "dependencies": {
     "@emotion/server": "^11.11.0",

package/src/components/CertificatePDF.js

@@ -89,6 +89,7 @@ const registerCustomFont = (siteFont) => {
   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
@@ -118,13 +119,33 @@ const calculateOptimalFontSize = (text, maxWidth = 650, initialFontSize = 48, mi
   return finalSize;
 };
 
+// Validate image URL before PDF generation
+const validateImageUrl = async (url) => {
+  if (!url) return null;
+  
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+      mode: 'cors'
+    });
+    
+    if (response.ok) {
+      return url;
+    }
+    return null;
+  } catch (error) {
+    console.warn("Image validation failed:", error);
+    return null;
+  }
+};
+
 const CertificatePDF = ({ 
   attendee, 
   summit, 
   settings, 
-  isCheckedIn = true 
+  isCheckedIn = true,
+  logoUrl = null
 }) => {
-
   const role = attendee.role || "Attendee";
   const position = attendee.jobTitle || "";
   const company = attendee.company || "";
@@ -181,7 +202,7 @@ const CertificatePDF = ({
     },
     logo: {
       maxWidth: settings.logoWidth || 250,
-      ...(settings.logoHeight && { maxHeight: settings.logoHeight }),
+      maxHeight: settings.logoHeight || 150,
       marginBottom: 25,
       objectFit: "contain",
     },
@@ -244,10 +265,11 @@ const CertificatePDF = ({
         <View style={styles.whiteCard}>
           <View style={styles.content}>
             {/* Logo */}
-            {(settings.logo || summit.logo) && (
+            {logoUrl && (
               <Image 
-                src={settings.logo || summit.logo} 
-                style={styles.logo} 
+                src={logoUrl} 
+                style={styles.logo}
+                debug={false} // When true, shows a visible error placeholder if image fails to load
               />
             )}
             
@@ -292,7 +314,16 @@ const CertificatePDF = ({
 // 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} />;
+    // Validate logo URL before generating PDF
+    const logoUrlToValidate = settings.logo || summit.logo;
+    const validatedLogoUrl = await validateImageUrl(logoUrlToValidate);
+    
+    const doc = <CertificatePDF 
+      attendee={attendee} 
+      summit={summit} 
+      settings={settings}
+      logoUrl={validatedLogoUrl}
+    />;
     const blob = await pdf(doc).toBlob();
     
     // create download link

package/src/components/CertificateSection.js

@@ -22,7 +22,7 @@ const CertificateSection = ({
   const siteSettings = useSiteSettings();
 
   // Get certificate settings
-  const certificateSettings = useCertificateSettings(summit, siteSettings?.siteFont);
+  const certificateSettings = useCertificateSettings(siteSettings?.siteFont);
   
   // Check if certificates are enabled
   const certificatesEnabled = getSettingByKey(MARKETING_SETTINGS_KEYS.certificateEnabled) !== DISPLAY_OPTIONS.hide;
@@ -107,27 +107,29 @@ const CertificateSection = ({
   };
 
   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>
+    <>
+      <div style={{ marginTop: '20px' }}>
+        <button 
+          className={`button is-large ${styles.certificateButton}`}
+          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 of Attendance
+        </button>
+        
+        {error && (
+          <div style={{ color: '#d32f2f', fontSize: '14px', marginTop: '10px' }}>
+            {error}
+          </div>
+        )}
+      </div>
+    </>
   );
 };
 

package/src/styles/full-profile.module.scss

@@ -161,4 +161,9 @@
             left: 47%;
         }
     }
+}
+
+// Certificate button focus state fix
+.certificateButton:focus {
+    color: var(--color_input_text_color) !important;
 }

package/src/utils/real_time_updates/strategies/AblyRealTimeStrategy.js

@@ -15,6 +15,10 @@ class AblyRealTimeStrategy extends AbstractRealTimeStrategy {
         console.log('AblyRealTimeStrategy::constructor');
         this._client = null;
         this._wsError = false;
+        this._closing = false;
+        this._channel = null;
+        this._onConn = null;
+        this._onMessage = null;
     }
 
     /**
@@ -29,12 +33,12 @@ class AblyRealTimeStrategy extends AbstractRealTimeStrategy {
         const key = getEnvVariable(ABLY_API_KEY);
 
         if(this._wsError) {
-            console.log('AblyRealTimeStrategy::create error state');
+            console.warn('AblyRealTimeStrategy::create error state');
             return;
         }
 
         if(!key){
-            console.log('AblyRealTimeStrategy::create ABLY_KEY is not set');
+            console.warn('AblyRealTimeStrategy::create ABLY_KEY is not set');
             this._wsError = true;
             return;
         }
@@ -50,22 +54,17 @@ class AblyRealTimeStrategy extends AbstractRealTimeStrategy {
             this._client.close();
         }
 
-        this._client = new Ably.Realtime({ key });
-
-        // start listening for event
-
-        const channel = this._client.channels.get(`${summitId}:*:*`);
-
-        channel.subscribe((message) => {
-            const { data : payload } = message;
-            console.log('AblyRealTimeStrategy::create Change received', payload)
-            this._callback(payload);
+        this._client = new Ably.Realtime({
+            key,
+            // see https://faqs.ably.com/ably-js-page-unload-behaviour
+            closeOnUnload: false,
         });
 
         // connect handler
-        this._client.connection.on((stateChange) => {
-            const { current: state } = stateChange;
-            console.log(`AblyRealTimeStrategy::connection WS ${state}`);
+
+        this._onConn = (stateChange) => {
+            const { current: state, reason } = stateChange;
+            console.log(`AblyRealTimeStrategy::connection WS ${state}`, reason || '');
             if(state  === 'connected') {
                 this._wsError = false;
                 // RELOAD
@@ -76,29 +75,80 @@ class AblyRealTimeStrategy extends AbstractRealTimeStrategy {
                 this.stopUsingFallback();
                 return;
             }
-            if(state  === 'suspended') {
+
+            if ((state === 'suspended' || state === 'failed') && !this._closing) {
                 if(!this._wsError) {
                     this._wsError = true;
                     this.startUsingFallback(summitId);
                 }
                 return;
             }
-            if(state  === 'failed') {
-                if(!this._wsError) {
-                    this._wsError = true;
-                    this.startUsingFallback(summitId);
-                }
-                return;
+            if (state === 'closed') {
+                // Expected on unmount, don’t start fallback, don’t log as error
+                this._wsError = false;
             }
-        });
+        };
+
+        this._client.connection.on(this._onConn);
+
+        // start listening for event
+
+        this._channel = this._client.channels.get(`${summitId}:*:*`);
+
+        this._onMessage = (message) => {
+            try {
+                const {data: payload} = message;
+                console.log('AblyRealTimeStrategy::create Change received', payload)
+                this._callback(payload);
+            }
+            catch (e) {
+                console.error('AblyRealTimeStrategy::message handler failed', e);
+            }
+        };
+
+        this._channel.subscribe(this._onMessage);
+
     }
 
     close() {
+        console.log("AblyRealTimeStrategy::close");
         super.close();
-        if(this._client){
-            console.log("AblyRealTimeStrategy::close");
-            this._client.close();
+        this._closing = true;
+        try { this.stopUsingFallback(); } catch {}
+
+        try { this._onMessage && this._channel?.unsubscribe(this._onMessage); }
+        catch (e){ console.warn('AblyRealTimeStrategy::close channel.unsubscribe',e); }
+        try { this._channel?.off(); }
+        catch(e) { console.warn('AblyRealTimeStrategy::close channel.off', e);}
+        try { this._onConn && this._client?.connection.off(this._onConn); }
+        catch(e) { console.warn('AblyRealTimeStrategy::close AblyRealTimeStrategy::close.off', e); }
+        this._onMessage = null;
+        this._onConn = null;
+
+        const client = this._client;
+        const channel = this._channel;
+
+        const tryRelease = () => {
+            try {
+                const releasable = ['initialized','detached','failed'].includes(channel?.state);
+                if (releasable) client?.channels.release(channel.name);
+            } catch {}
+            try { client?.close(); } catch(e) {
+                console.warn('AblyRealTimeStrategy::close client.close', e);
+            }
             this._client = null;
+            this._channel = null;
+            this._closing = false;
+            this._wsError = false;
+        };
+
+        if (client && channel && client.connection.state !== 'closed' &&
+            ['attached','attaching','detaching'].includes(channel.state)) {
+            // Detach asynchronously, then release if allowed
+            channel.detach(() => tryRelease());
+        } else {
+            // Already detached/failed/closed (or no channel) → just release if possible and close
+            tryRelease();
         }
     }
 }