@thead-vantage/react 2.22.0 → 2.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thead-vantage/react",
-  "version": "2.22.0",
+  "version": "2.24.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');
           }

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,65 @@
+/**
+ * TheAd Vantage Asset Utilities
+ * 
+ * Provides fallback assets that work both in the library and when installed from npm.
+ * 
+ * The logo is imported as a module so it gets bundled with the library.
+ * Next.js will process this import and create a URL that works in consuming applications.
+ */
+
+// Import the logo image - Next.js will process this and bundle it
+// When the library is used in other Next.js apps, the image will be available
+import theadVantageLogoSrc from '../assets/TheAd-Vantage-Logo.png';
+
+/**
+ * Get the URL for the TheAd Vantage logo fallback ad
+ * 
+ * Uses the imported image module. Next.js processes image imports and creates
+ * a URL that points to the bundled asset. This works when the library is installed
+ * from npm because the image is included in the library bundle.
+ */
+export function getTheadVantageLogoUrl(): string {
+  // Next.js processes image imports and returns either:
+  // - A string URL (in some configurations)
+  // - An object with src, width, height properties (typical Next.js behavior)
+  
+  if (typeof theadVantageLogoSrc === 'string') {
+    return theadVantageLogoSrc;
+  }
+  
+  // Next.js Image import typically returns an object with src property
+  if (typeof theadVantageLogoSrc === 'object' && theadVantageLogoSrc !== null) {
+    // Check for src property (Next.js ImageStaticImport type)
+    if ('src' in theadVantageLogoSrc) {
+      return (theadVantageLogoSrc as { src: string }).src;
+    }
+    // Some bundlers might return the object directly with a default export
+    if ('default' in theadVantageLogoSrc) {
+      const defaultExport = (theadVantageLogoSrc as { default: string | { src: string } }).default;
+      if (typeof defaultExport === 'string') {
+        return defaultExport;
+      }
+      if (typeof defaultExport === 'object' && defaultExport !== null && 'src' in defaultExport) {
+        return (defaultExport as { src: string }).src;
+      }
+    }
+  }
+  
+  // Fallback to CDN if import doesn't work as expected
+  return 'https://www.thead-vantage.com/assets/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,
+};
+