@thead-vantage/react 2.21.0 → 2.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.21.0",
+  "version": "2.23.0",
   "description": "React components and utilities for TheAd Vantage ad platform integration",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -35,6 +35,7 @@
   "files": [
     "src/components",
     "src/lib",
+    "src/assets",
     "src/index.ts",
     "README.md"
   ],

package/src/components/AdBanner.tsx

@@ -129,23 +129,36 @@ export function AdBanner({
       } catch (err) {
         console.error('[AdBanner] Error fetching ad:', err);
         
-        // For CORS errors, handle differently in development mode
+        // Check if we're on localhost
+        const isLocalhost = typeof window !== 'undefined' && 
+          (window.location.hostname === 'localhost' || 
+           window.location.hostname === '127.0.0.1' || 
+           window.location.hostname === '[::1]');
+        
+        // For CORS errors, handle differently in development mode or localhost
         if (err instanceof Error && err.message.includes('CORS error')) {
-          if (development) {
-            // In development mode, don't show error - just log it and show a placeholder ad
-            console.warn('[AdBanner] CORS error in development mode - this is expected. Tracking is disabled.');
-            // Create a placeholder ad for development so the component still renders
-            setAd({
-              id: 'dev-placeholder',
-              name: 'Development Placeholder Ad',
-              type: 'image',
-              contentUrl: '/placeholder-ad.png',
-              targetUrl: '#',
-              width: 300,
-              height: 250,
+          if (development || isLocalhost) {
+            // In development mode or localhost, show TheAd Vantage logo as fallback ad
+            console.warn('[AdBanner] CORS error in development mode - showing TheAd Vantage fallback ad. Tracking is disabled.');
+            // Import and use fallback ad configuration
+            import('../lib/thead-vantage-assets').then(({ THEAD_VANTAGE_FALLBACK_AD }) => {
+              setAd(THEAD_VANTAGE_FALLBACK_AD);
+              setDevMode(true);
+              setError(null); // Don't show error in dev mode
+            }).catch(() => {
+              // If import fails, use inline fallback
+              setAd({
+                id: 'thead-vantage-fallback',
+                name: 'TheAd Vantage',
+                type: 'image',
+                contentUrl: '/TheAd-Vantage-Logo.png',
+                targetUrl: 'https://www.thead-vantage.com',
+                width: 300,
+                height: 250,
+              });
+              setDevMode(true);
+              setError(null);
             });
-            setDevMode(true);
-            setError(null); // Don't show error in dev mode
           } else {
             console.error('[AdBanner] CORS Error Details:', {
               message: err.message,
@@ -155,21 +168,28 @@ export function AdBanner({
             setError('Ad unavailable');
           }
         } else {
-          // For other errors, show the error message (unless in development)
-          if (development) {
-            console.warn('[AdBanner] Error in development mode:', err);
-            // Create a placeholder ad for development
-            setAd({
-              id: 'dev-placeholder',
-              name: 'Development Placeholder Ad',
-              type: 'image',
-              contentUrl: '/placeholder-ad.png',
-              targetUrl: '#',
-              width: 300,
-              height: 250,
+          // For other errors, show the error message (unless in development or localhost)
+          if (development || isLocalhost) {
+            console.warn('[AdBanner] Error in development mode - showing TheAd Vantage fallback ad:', err);
+            // Import and use fallback ad configuration
+            import('../lib/thead-vantage-assets').then(({ THEAD_VANTAGE_FALLBACK_AD }) => {
+              setAd(THEAD_VANTAGE_FALLBACK_AD);
+              setDevMode(true);
+              setError(null); // Don't show errors in dev mode
+            }).catch(() => {
+              // If import fails, use inline fallback
+              setAd({
+                id: 'thead-vantage-fallback',
+                name: 'TheAd Vantage',
+                type: 'image',
+                contentUrl: '/TheAd-Vantage-Logo.png',
+                targetUrl: 'https://www.thead-vantage.com',
+                width: 300,
+                height: 250,
+              });
+              setDevMode(true);
+              setError(null);
             });
-            setDevMode(true);
-            setError(null); // Don't show errors in dev mode
           } else {
             setError(err instanceof Error ? err.message : 'Failed to fetch ad');
           }
@@ -233,6 +253,14 @@ export function AdBanner({
             height={ad.height || 250}
             className="rounded"
             unoptimized
+            onError={(e) => {
+              // If the logo fails to load (e.g., not in public folder when installed from npm),
+              // try loading from CDN
+              if (ad.id === 'thead-vantage-fallback' && ad.contentUrl === '/TheAd-Vantage-Logo.png') {
+                const target = e.target as HTMLImageElement;
+                target.src = 'https://www.thead-vantage.com/assets/TheAd-Vantage-Logo.png';
+              }
+            }}
           />
         ) : (
           <div className="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded" style={{ width: ad.width || 300, height: ad.height || 250 }}>

package/src/lib/ads.ts

@@ -321,8 +321,29 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
         message: data.message || 'No ads available in response',
       };
     } catch (error) {
+      // Check if we're on localhost (client-side only)
+      const isLocalhost = typeof window !== 'undefined' && 
+        (window.location.hostname === 'localhost' || 
+         window.location.hostname === '127.0.0.1' || 
+         window.location.hostname === '[::1]');
+      
       // Handle CORS errors specifically
       if (error instanceof TypeError && (error.message.includes('CORS') || error.message.includes('Failed to fetch'))) {
+        // On localhost, return TheAd Vantage fallback ad instead of throwing
+        if (isLocalhost) {
+          console.warn('[AdBanner] CORS error on localhost - returning TheAd Vantage fallback ad. Tracking is disabled.');
+          // Import fallback ad configuration
+          const { THEAD_VANTAGE_FALLBACK_AD } = await import('./thead-vantage-assets');
+          
+          return {
+            success: true,
+            dev_mode: true,
+            ad: THEAD_VANTAGE_FALLBACK_AD,
+            message: 'Localhost development: Using TheAd Vantage fallback ad due to CORS',
+            _dev_note: 'CORS error on localhost - showing fallback ad. This is expected in development.',
+          };
+        }
+        
         // Check if this might be a 308 redirect issue
         // Vercel redirects thead-vantage.com → www.thead-vantage.com at edge level
         // This breaks CORS preflight because browsers don't allow redirects on OPTIONS requests

package/src/lib/thead-vantage-assets.ts

@@ -0,0 +1,43 @@
+/**
+ * TheAd Vantage Asset Utilities
+ * 
+ * Provides fallback assets that work both in the library and when installed from npm.
+ * 
+ * Note: When the library is installed from npm, the public folder isn't available.
+ * The logo is loaded from a CDN URL that works in all environments.
+ */
+
+/**
+ * Get the URL for the TheAd Vantage logo fallback ad
+ * 
+ * Uses a CDN URL that works when the library is installed from npm.
+ * For local development of the library itself, it will try the public folder first.
+ */
+export function getTheadVantageLogoUrl(): string {
+  // Check if we're in the library's own development environment
+  // (where the public folder exists)
+  if (typeof window !== 'undefined') {
+    // Try public folder first (works in library's own dev environment)
+    // This will 404 when installed from npm, but that's okay - the Image component will handle it
+    // and we can add error handling if needed
+    return '/TheAd-Vantage-Logo.png';
+  }
+  
+  // Server-side: return public folder path
+  return '/TheAd-Vantage-Logo.png';
+}
+
+/**
+ * TheAd Vantage fallback ad configuration
+ * Used when CORS errors occur on localhost
+ */
+export const THEAD_VANTAGE_FALLBACK_AD = {
+  id: 'thead-vantage-fallback',
+  name: 'TheAd Vantage',
+  type: 'image' as const,
+  contentUrl: getTheadVantageLogoUrl(),
+  targetUrl: 'https://www.thead-vantage.com',
+  width: 300,
+  height: 250,
+};
+