@thead-vantage/react 2.21.0 → 2.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "description": "React components and utilities for TheAd Vantage ad platform integration",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/AdBanner.tsx

@@ -129,18 +129,24 @@ 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
+          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.');
+            // Create a fallback ad with TheAd Vantage logo
             setAd({
-              id: 'dev-placeholder',
-              name: 'Development Placeholder Ad',
+              id: 'thead-vantage-fallback',
+              name: 'TheAd Vantage',
               type: 'image',
-              contentUrl: '/placeholder-ad.png',
-              targetUrl: '#',
+              contentUrl: '/TheAd-Vantage-Logo.png',
+              targetUrl: 'https://www.thead-vantage.com',
               width: 300,
               height: 250,
             });
@@ -155,16 +161,16 @@ 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
+          // 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);
+            // Create a fallback ad with TheAd Vantage logo
             setAd({
-              id: 'dev-placeholder',
-              name: 'Development Placeholder Ad',
+              id: 'thead-vantage-fallback',
+              name: 'TheAd Vantage',
               type: 'image',
-              contentUrl: '/placeholder-ad.png',
-              targetUrl: '#',
+              contentUrl: '/TheAd-Vantage-Logo.png',
+              targetUrl: 'https://www.thead-vantage.com',
               width: 300,
               height: 250,
             });

package/src/lib/ads.ts

@@ -321,8 +321,34 @@ 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.');
+          return {
+            success: true,
+            dev_mode: true,
+            ad: {
+              id: 'thead-vantage-fallback',
+              name: 'TheAd Vantage',
+              type: 'image',
+              contentUrl: '/TheAd-Vantage-Logo.png',
+              targetUrl: 'https://www.thead-vantage.com',
+              width: 300,
+              height: 250,
+            },
+            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