@moneybar.online/moneybar 3.2.0 → 3.4.0

package/moneybar-config-template.js

@@ -1,28 +1,175 @@
 // MoneyBar Configuration Template
 // Copy this file and customize for your project
 
+// ========================================
+// THE 3 MONEY-BLOCKING STAGES FOR INDIE HACKERS
+// ========================================
+
+// PROBLEM #1: "Forced Sign-In Before Value" (40-60% conversion boost)
+// Solution: Value-first trials - let users try before they buy
+// Use case: PDF generators, image tools, converters
+
+// PROBLEM #2: "Silent Drop-Off" (20-30% conversion boost)
+// Solution: Exit feedback capture - learn why users don't convert
+// Use case: SaaS trials, B2B tools, complex products
+
+// PROBLEM #3: "Broken Money Flow" (25-40% conversion boost)
+// Solution: Seamless auth + instant payments
+// Use case: Templates, premium features, instant upgrades
+
+// ========================================
+// IMPORT OPTIONS
+// ========================================
+
 // Option 1: Browser CDN Usage (Recommended for simple projects)
-// Use this import and add the import map to your HTML
+// Add this import map to your HTML:
 /*
-Add to your HTML:
 <script type="importmap">
 {
   "imports": {
-    "@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.86.0/+esm"
+    "@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm"
   }
 }
 </script>
 */
-
-import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@3.1.0/dist/index.browser.js';
+import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.browser.js';
 
 // Option 2: Self-contained bundle (No import map needed)
-// import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@3.1.0/dist/index.bundle.js';
+// import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js';
 
 // Option 3: NPM install usage (for projects with bundlers)
 // import { MoneyBar } from '@moneybar.online/moneybar';
 
-// Configuration object (matches examples structure)
+// ========================================
+// CONFIGURATION EXAMPLES BY USE CASE
+// ========================================
+
+// 🎯 USE CASE 1: VALUE-FIRST DEMO (Problem #1 Solution)
+// Perfect for: PDF generators, image tools, converters
+const VALUE_FIRST_CONFIG = {
+  actionFunction: 'generatePDF',
+  appId: 'pdf-generator',
+  freeAttemptLimit: 3, // Give enough attempts to prove value
+  supabase: {
+    url: 'your-supabase-url',
+    anonKey: 'your-anon-key'
+  },
+  payment: [{
+    provider: 'dodo',
+    productId: 'your-product-id',
+    mode: 'test'
+  }],
+  theme: {
+    name: 'emerald', // Trustworthy, fresh
+    primaryColor: '#059669'
+  },
+  titleBar: {
+    title: '💰 PDF Generator',
+    links: [
+      { text: 'How it Works', url: '#how', target: '_self' },
+      { text: 'Examples', url: '#examples', target: '_self' }
+    ]
+  },
+  successMessage: {
+    enabled: true,
+    title: 'PDF Generated!',
+    message: 'Your PDF has been created successfully. Try more examples!'
+  }
+};
+
+// 🎯 USE CASE 2: FEEDBACK INTELLIGENCE (Problem #2 Solution)
+// Perfect for: SaaS trials, B2B tools, complex products
+const FEEDBACK_INTELLIGENCE_CONFIG = {
+  actionFunction: 'runAnalysis',
+  appId: 'saas-analytics',
+  freeAttemptLimit: 3,
+  supabase: {
+    url: 'your-supabase-url',
+    anonKey: 'your-anon-key'
+  },
+  payment: [{
+    provider: 'dodo',
+    productId: 'your-product-id',
+    mode: 'test'
+  }],
+  // KEY FEATURE: Feedback collection on cancel/exit
+  feedback: {
+    form: {
+      title: 'Quick Feedback',
+      description: 'What stopped you from upgrading?',
+      option1: 'Too complex to implement',
+      option2: 'Not enough ROI for my team',
+      option3: 'Need more features first'
+    },
+    email: [
+      {
+        provider: 'resend',
+        apiKey: 'your-resend-api-key',
+        fromEmail: 'feedback@yourapp.com'
+      }
+      // Future providers can be added:
+      // {
+      //   provider: 'sendgrid',
+      //   apiKey: 'your-sendgrid-api-key',
+      //   fromEmail: 'feedback@yourapp.com'
+      // }
+    ]
+  },
+  theme: {
+    name: 'corporate', // Professional B2B
+    primaryColor: '#0066cc'
+  },
+  titleBar: {
+    title: '📈 Analytics Tool',
+    links: [
+      { text: 'Features', url: '#features', target: '_self' },
+      { text: 'ROI Calculator', url: '#roi', target: '_self' }
+    ]
+  }
+};
+
+// 🎯 USE CASE 3: INSTANT PAYMENT FLOW (Problem #3 Solution)
+// Perfect for: Templates, premium features, instant upgrades
+const INSTANT_PAYMENT_CONFIG = {
+  actionFunction: 'createTemplate',
+  appId: 'template-creator',
+  freeAttemptLimit: 5, // Lower to trigger payment faster
+  supabase: {
+    url: 'your-supabase-url',
+    anonKey: 'your-anon-key'
+  },
+  payment: [{
+    provider: 'dodo',
+    productId: 'your-product-id',
+    mode: 'test'
+  }],
+  theme: {
+    name: 'dark', // Modern, premium feel
+    primaryColor: '#7c3aed'
+  },
+  titleBar: {
+    title: '⚡ Template Creator',
+    links: [
+      { text: 'Templates', url: '#templates', target: '_self' },
+      { text: 'Pricing', url: '#pricing', target: '_self' }
+    ]
+  },
+  successMessage: {
+    enabled: true,
+    title: 'Template Created!',
+    message: 'Your professional template is ready. Download and customize!'
+  }
+};
+
+// ========================================
+// CHOOSE YOUR CONFIGURATION
+// ========================================
+
+// Pick one of the configs above or create your own:
+window.APP_CONFIG = FEEDBACK_INTELLIGENCE_CONFIG; // Change this to your preferred config
+
+// Or create a custom configuration:
+/*
 window.APP_CONFIG = {
   // REQUIRED: Function name that gets called
   actionFunction: 'myAction',
@@ -31,7 +178,7 @@ window.APP_CONFIG = {
   appId: 'my-app',
 
   // REQUIRED: Number of free attempts before paywall
-  freeDownloadLimit: 3,
+  freeAttemptLimit: 3,
 
   // REQUIRED: Supabase configuration
   supabase: {
@@ -40,10 +187,11 @@ window.APP_CONFIG = {
   },
 
   // REQUIRED: Payment configuration
-  payment: {
+  payment: [{
+    provider: 'dodo',
     productId: 'your-dodo-payments-product-id',
     mode: 'test' // Change to 'live' for production
-  },
+  }],
 
   // OPTIONAL: UI Theme (29 themes available)
   theme: {
@@ -68,7 +216,7 @@ window.APP_CONFIG = {
     message: 'Your action completed successfully!'
   },
 
-  // OPTIONAL: Feedback collection
+  // OPTIONAL: Feedback collection (Problem #2 solution)
   feedback: {
     form: {
       title: 'Quick Feedback',
@@ -77,12 +225,20 @@ window.APP_CONFIG = {
       option2: 'Need more features',
       option3: 'Just testing'
     },
-    email: {
-      resendApiKey: 'your-resend-api-key',
-      fromEmail: 'hello@yourapp.com'
-    }
+    email: [
+      {
+        provider: 'resend',
+        apiKey: 'your-resend-api-key',
+        fromEmail: 'hello@yourapp.com'
+      }
+    ]
   }
 };
+*/
+
+// ========================================
+// INITIALIZE MONEYBAR
+// ========================================
 
 // Initialize MoneyBar with the configuration
 const moneyBar = new MoneyBar(window.APP_CONFIG);
@@ -98,36 +254,74 @@ moneyBar.attachToButton('#action-btn', (userContext) => {
   }
 });
 
-// Global function for easy HTML usage (matches actionFunction)
-window.myAction = function(userContext) {
-  console.log('User context:', userContext);
+// ========================================
+// ACTION FUNCTIONS BY USE CASE
+// ========================================
+
+// 🎯 USE CASE 1: Value-First Demo Actions
+window.generatePDF = function(userContext) {
+  console.log('🎯 VALUE-FIRST: Generating PDF...');
 
   if (userContext.isPremium) {
-    alert('Premium features unlocked!');
-    // Your premium functionality here
+    console.log('✅ Premium PDF with all features');
+    alert('Premium PDF generated with watermark removal, custom fonts, and high quality!');
+    // Your premium PDF generation logic here
   } else {
-    alert(`Free trial: ${userContext.remaining} uses left`);
-    // Your free tier functionality here
+    console.log(`📄 Basic PDF generated. ${userContext.remaining} attempts remaining`);
+    alert(`Basic PDF generated! ${userContext.remaining} free attempts left.`);
+    // Your basic PDF generation logic here
+  }
+};
+
+// 🎯 USE CASE 2: Feedback Intelligence Actions
+window.runAnalysis = function(userContext) {
+  console.log('🎯 FEEDBACK INTELLIGENCE: Running analysis...');
+
+  if (userContext.isPremium) {
+    console.log('✅ Full analytics suite access');
+    alert('Complete analysis ready! Access to all metrics, exports, and AI insights.');
+    // Your premium analytics logic here
+  } else {
+    console.log(`📊 Basic analysis complete. ${userContext.remaining} attempts remaining`);
+    alert(`Analysis complete! Limited data shown. ${userContext.remaining} attempts left.`);
+    // Your basic analytics logic here
   }
 };
 
-// Example alternative action functions
+// 🎯 USE CASE 3: Instant Payment Actions
 window.createTemplate = function(userContext) {
+  console.log('🎯 INSTANT PAYMENT: Creating template...');
+
   if (userContext.isPremium) {
-    console.log('Creating premium template...');
-    alert('Premium template created!');
+    console.log('✅ Premium template with full customization');
+    alert('Premium template created! Full customization, commercial license, and PSD files included.');
+    // Your premium template logic here
   } else {
-    console.log('Creating basic template...');
-    alert(`Basic template created! ${userContext.remaining} uses remaining`);
+    console.log(`🎨 Basic template created. ${userContext.remaining} attempts remaining`);
+    alert(`Template created! Basic version only. ${userContext.remaining} attempts left.`);
+    // Your basic template logic here
   }
 };
 
-window.downloadFile = function(userContext) {
+// 🎯 DEFAULT: Fallback Action
+window.myAction = function(userContext) {
+  console.log('User context:', userContext);
+
   if (userContext.isPremium) {
-    console.log('Downloading premium file...');
-    // Premium download logic
+    alert('Premium features unlocked!');
+    // Your premium functionality here
   } else {
-    console.log('Downloading basic file...');
-    // Basic download logic
+    alert(`Free trial: ${userContext.remaining} uses left`);
+    // Your free tier functionality here
   }
-};
+};
+
+// ========================================
+// QUICK REFERENCE: Available Themes
+// ========================================
+
+// Light themes: light, cupcake, bumblebee, emerald, corporate, garden
+// Dark themes: dark, synthwave, retro, cyberpunk, valentine, halloween
+// Professional: corporate, business, luxury
+// Creative: fantasy, cyberpunk, synthwave
+// And 20+ more themes available!

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@moneybar.online/moneybar",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "The navbar of monetization. Fix the 3 money-blocking stages: forced sign-ins, silent drop-offs, and broken payment flows. Turn browsers into buyers.",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "browser": "dist/index.browser.js",
-  "unpkg": "dist/index.umd.js",
+  "unpkg": "dist/index.bundle.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js",
       "browser": "./dist/index.browser.js",
       "types": "./dist/index.d.ts"
     }

package/src/index.ts

@@ -23,13 +23,13 @@ import { createClient } from '@supabase/supabase-js';
  *
  * const moneyBar = new MoneyBar({
  *   appId: 'my-pdf-app',
- *   freeDownloadLimit: 3,
+ *   freeAttemptLimit: 3,
  *   supabase: { url: 'https://xyz.supabase.co', anonKey: 'anon_key' },
  *   payment: { productId: 'prod_xyz' }
  * });
  *
  * // Single button - handles all monetization automatically
- * moneyBar.attachToButton('#download-btn', (userContext) => {
+ * moneyBar.attachToButton('#action-btn', (userContext) => {
  *   // Your action logic here - with user context for personalization
  *   if (userContext.isPremium) {
  *     generatePremiumPDF();
@@ -243,10 +243,10 @@ export class MoneyBar {
 
       const status: DownloadStatus = {
         currentCount: count,
-        limit: this.config.freeDownloadLimit,
+        limit: this.config.freeAttemptLimit,
         isPremium,
         isAuthenticated: !!this.currentUser,
-        remaining: Math.max(0, this.config.freeDownloadLimit - count)
+        remaining: Math.max(0, this.config.freeAttemptLimit - count)
       };
 
       // Cache the status
@@ -259,10 +259,10 @@ export class MoneyBar {
       // Return safe defaults on error
       const errorStatus: DownloadStatus = {
         currentCount: 0,
-        limit: this.config.freeDownloadLimit,
+        limit: this.config.freeAttemptLimit,
         isPremium: false,
         isAuthenticated: false,
-        remaining: this.config.freeDownloadLimit
+        remaining: this.config.freeAttemptLimit
       };
 
       // Cache error status for short time to avoid repeated failures
@@ -333,26 +333,37 @@ export class MoneyBar {
       throw new Error('Payment configuration not provided');
     }
 
+    const payment = this.config.payment?.find(p => p.provider === 'dodo');
+    if (!payment) {
+      throw new Error('No dodo payment provider configured');
+    }
+
     const requestBody = {
       email: this.currentUser.email,
-      product_id: this.config.payment.productId,
-      mode: this.config.payment.mode || 'test',
+      product_id: payment.productId,
+      mode: payment.mode || 'test',
       app_id: this.config.appId,
       return_url: `${window.location.origin}${window.location.pathname}?payment=success`
     };
 
-    console.log(`🔥 [SUPABASE API] createPayment called for email: ${this.currentUser.email} | Time: ${new Date().toISOString()}`);
+    console.log(`🔥 [PAYMENT API] createPayment called for provider: ${payment.provider}, email: ${this.currentUser.email} | Time: ${new Date().toISOString()}`);
 
     try {
-      const response = await fetch(`${this.config.supabase.url}/functions/v1/create-payment`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${this.config.supabase.anonKey}`
-        },
-        body: JSON.stringify(requestBody)
-      });
-      console.log(`🔥 [SUPABASE API] createPayment response: ${response.status}`);
+      // Route to appropriate payment API based on provider
+      let response;
+      if (payment.provider === 'dodo') {
+        response = await fetch(`${this.config.supabase.url}/functions/v1/create-payment`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.config.supabase.anonKey}`
+          },
+          body: JSON.stringify(requestBody)
+        });
+      } else {
+        throw new Error(`Payment provider '${payment.provider}' is not yet supported`);
+      }
+      console.log(`🔥 [PAYMENT API] createPayment response for ${payment.provider}: ${response.status}`);
 
       if (this.config.options?.debug) {
         //console.log('🔍 DEBUG: createPayment response status:', response.status);
@@ -595,8 +606,8 @@ export class MoneyBar {
       const newCount = await this.incrementDownloadCount();
 
       // Double-check: if server returned count exceeding limit, something went wrong
-      if (newCount > this.config.freeDownloadLimit) {
-        console.error(`⚠️ Server returned count (${newCount}) exceeding limit (${this.config.freeDownloadLimit})`);
+      if (newCount > this.config.freeAttemptLimit) {
+        console.error(`⚠️ Server returned count (${newCount}) exceeding limit (${this.config.freeAttemptLimit})`);
         // Don't update UI with invalid state
         return;
       }
@@ -2441,7 +2452,25 @@ export class MoneyBar {
   }
 
   private async sendFeedbackEmail(feedbackData: any): Promise<void> {
-    const emailConfig = this.config.feedback?.email || this.config.email;
+    // Get email config - handle both new array format and legacy format
+    let emailConfig;
+    if (this.config.feedback?.email) {
+      // New array format - use first provider (typically resend)
+      if (Array.isArray(this.config.feedback.email)) {
+        emailConfig = this.config.feedback.email[0];
+      } else {
+        // Legacy format fallback
+        emailConfig = this.config.feedback.email as any;
+      }
+    } else if (this.config.email) {
+      // Deprecated legacy email config
+      emailConfig = {
+        provider: 'resend',
+        apiKey: (this.config.email as any).resendApiKey,
+        fromEmail: (this.config.email as any).fromEmail
+      };
+    }
+
     if (!emailConfig) {
       throw new Error('Email configuration not available');
     }
@@ -2456,19 +2485,25 @@ Timestamp: ${feedbackData.timestamp}
 User Agent: ${feedbackData.userAgent}
     `.trim();
 
-    const response = await fetch('https://api.resend.com/emails', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${emailConfig.resendApiKey}`
-      },
-      body: JSON.stringify({
-        from: emailConfig.fromEmail,
-        to: [emailConfig.fromEmail], // Send feedback to yourself
-        subject: `Feedback from ${this.config.appId}`,
-        text: emailBody
-      })
-    });
+    // Handle different email providers
+    let response;
+    if (emailConfig.provider === 'resend' || !emailConfig.provider) {
+      response = await fetch('https://api.resend.com/emails', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${emailConfig.apiKey || (emailConfig as any).resendApiKey}`
+        },
+        body: JSON.stringify({
+          from: emailConfig.fromEmail,
+          to: [emailConfig.fromEmail], // Send feedback to yourself
+          subject: `Feedback from ${this.config.appId}`,
+          text: emailBody
+        })
+      });
+    } else {
+      throw new Error(`Unsupported email provider: ${emailConfig.provider}`);
+    }
 
     if (!response.ok) {
       throw new Error(`Email API error: ${response.status}`);
@@ -2959,8 +2994,8 @@ User Agent: ${feedbackData.userAgent}
     if (!this.config.appId) throw new Error('appId is required');
     if (!this.config.supabase?.url) throw new Error('supabase.url is required');
     if (!this.config.supabase?.anonKey) throw new Error('supabase.anonKey is required');
-    if (typeof this.config.freeDownloadLimit !== 'number' || this.config.freeDownloadLimit < 0) {
-      throw new Error('freeDownloadLimit must be a non-negative number');
+    if (typeof this.config.freeAttemptLimit !== 'number' || this.config.freeAttemptLimit < 0) {
+      throw new Error('freeAttemptLimit must be a non-negative number');
     }
   }
 
@@ -2986,7 +3021,15 @@ User Agent: ${feedbackData.userAgent}
     }
 
     // Validate product ID format
-    const productId = this.config.payment.productId;
+    const payment = this.config.payment?.find(p => p.provider === 'dodo');
+    if (!payment) {
+      this.paymentConnectionFailed = true;
+      if (this.config.options?.debug) {
+        console.warn('No dodo payment provider configured');
+      }
+      return;
+    }
+    const productId = payment.productId;
     if (!productId || !productId.startsWith('pdt_') || productId.length < 10) {
       this.paymentConnectionFailed = true;
       if (this.config.options?.debug) {

package/src/types.ts

@@ -3,7 +3,7 @@ export interface MoneyBarConfig {
   appId: string;
 
   /** Number of free attempts allowed before paywall */
-  freeDownloadLimit: number;
+  freeAttemptLimit: number;
 
   /** Supabase configuration */
   supabase: {
@@ -11,11 +11,14 @@ export interface MoneyBarConfig {
     anonKey: string;
   };
 
-  /** DodoPayments product configuration */
-  payment?: {
+  /** Payment configuration - extensible for multiple providers */
+  payment?: Array<{
+    provider: 'dodo' | 'stripe' | 'paypal' | 'square' | 'paddle'; // Extensible for future providers
     productId: string;
     mode?: 'test' | 'live';
-  };
+    apiKey?: string; // For providers that need API keys
+    publishableKey?: string; // For client-side keys (Stripe, etc.)
+  }>;
 
   /** Optional: Feedback form configuration */
   feedback?: {
@@ -26,10 +29,11 @@ export interface MoneyBarConfig {
       option2: string;
       option3: string;
     };
-    email: {
-      resendApiKey: string;
+    email: Array<{
+      provider: 'resend' | 'sendgrid' | 'mailgun' | 'ses'; // Extensible for future providers
+      apiKey: string;
       fromEmail: string;
-    };
+    }>;
   };
 
   /** @deprecated Use feedback.email instead - Email service configuration (for feedback and notifications) */