@thead-vantage/react 2.22.0 → 2.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.22.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

@@ -140,18 +140,25 @@ export function AdBanner({
           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: 'thead-vantage-fallback',
-              name: 'TheAd Vantage',
-              type: 'image',
-              contentUrl: '/TheAd-Vantage-Logo.png',
-              targetUrl: 'https://www.thead-vantage.com',
-              width: 300,
-              height: 250,
+            // 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,
@@ -164,18 +171,25 @@ export function AdBanner({
           // 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: 'thead-vantage-fallback',
-              name: 'TheAd Vantage',
-              type: 'image',
-              contentUrl: '/TheAd-Vantage-Logo.png',
-              targetUrl: 'https://www.thead-vantage.com',
-              width: 300,
-              height: 250,
+            // 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');
           }
@@ -239,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

@@ -332,18 +332,13 @@ export async function fetchAdBanner(params: FetchAdBannerParams): Promise<AdBann
         // 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: {
-              id: 'thead-vantage-fallback',
-              name: 'TheAd Vantage',
-              type: 'image',
-              contentUrl: '/TheAd-Vantage-Logo.png',
-              targetUrl: 'https://www.thead-vantage.com',
-              width: 300,
-              height: 250,
-            },
+            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.',
           };

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,
+};
+