@moneybar.online/moneybar 3.1.0 → 3.2.0

package/example-template.html

@@ -15,7 +15,7 @@
     <script type="importmap">
     {
         "imports": {
-            "@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm"
+            "@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.86.0/+esm"
         }
     }
     </script>
@@ -25,9 +25,10 @@
     <!-- OPTION 2: Self-contained bundle (No import map needed) -->
     <!-- Comment out the import map above and use this: -->
     <script type="module">
-        import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js';
+        import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@3.1.0/dist/index.bundle.js';
 
         const moneyBar = new MoneyBar({
+            actionFunction: 'myAction',
             appId: 'test-app',
             freeDownloadLimit: 3,
             supabase: {
@@ -56,12 +57,20 @@
     <!-- Uncomment this for traditional script tag usage: -->
     <!--
     <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@3.1.0/dist/index.umd.js"></script>
     <script>
         const moneyBar = new MoneyBar.MoneyBar({
+            actionFunction: 'myAction',
             appId: 'test-app',
             freeDownloadLimit: 3,
-            // ... configuration
+            supabase: {
+                url: 'your-supabase-url',
+                anonKey: 'your-anon-key'
+            },
+            payment: {
+                productId: 'your-product-id',
+                mode: 'test'
+            }
         });
     </script>
     -->

package/moneybar-config-template.js

@@ -8,21 +8,25 @@ Add to your HTML:
 <script type="importmap">
 {
   "imports": {
-    "@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm"
+    "@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.86.0/+esm"
   }
 }
 </script>
 */
 
-import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.browser.js';
+import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@3.1.0/dist/index.browser.js';
 
 // Option 2: Self-contained bundle (No import map needed)
-// import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js';
+// import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@3.1.0/dist/index.bundle.js';
 
 // Option 3: NPM install usage (for projects with bundlers)
 // import { MoneyBar } from '@moneybar.online/moneybar';
 
-const moneyBar = new MoneyBar({
+// Configuration object (matches examples structure)
+window.APP_CONFIG = {
+  // REQUIRED: Function name that gets called
+  actionFunction: 'myAction',
+
   // REQUIRED: Your unique app identifier
   appId: 'my-app',
 
@@ -78,32 +82,52 @@ const moneyBar = new MoneyBar({
       fromEmail: 'hello@yourapp.com'
     }
   }
-});
+};
 
-// Attach to button with your business logic
-moneyBar.attachToButton('#your-button-id', (userContext) => {
-  // Your app's functionality here
-  console.log('User context:', userContext);
+// Initialize MoneyBar with the configuration
+const moneyBar = new MoneyBar(window.APP_CONFIG);
 
-  if (userContext.isPremium) {
-    console.log('Premium user - unlock all features');
-    // Premium functionality
+// Attach to button with your business logic
+moneyBar.attachToButton('#action-btn', (userContext) => {
+  // Call the specified action function
+  if (typeof window[window.APP_CONFIG.actionFunction] === 'function') {
+    window[window.APP_CONFIG.actionFunction](userContext);
   } else {
-    console.log(`Free user - ${userContext.remaining} uses remaining`);
-    // Free tier functionality
+    // Fallback action
+    myAction(userContext);
   }
-
-  // Example: Your app logic
-  // generatePDF();
-  // downloadFile();
-  // processData();
 });
 
-// Global function for easy HTML usage
+// Global function for easy HTML usage (matches actionFunction)
 window.myAction = function(userContext) {
+  console.log('User context:', userContext);
+
   if (userContext.isPremium) {
     alert('Premium features unlocked!');
+    // Your premium functionality here
   } else {
     alert(`Free trial: ${userContext.remaining} uses left`);
+    // Your free tier functionality here
+  }
+};
+
+// Example alternative action functions
+window.createTemplate = function(userContext) {
+  if (userContext.isPremium) {
+    console.log('Creating premium template...');
+    alert('Premium template created!');
+  } else {
+    console.log('Creating basic template...');
+    alert(`Basic template created! ${userContext.remaining} uses remaining`);
+  }
+};
+
+window.downloadFile = function(userContext) {
+  if (userContext.isPremium) {
+    console.log('Downloading premium file...');
+    // Premium download logic
+  } else {
+    console.log('Downloading basic file...');
+    // Basic download logic
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneybar.online/moneybar",
-  "version": "3.1.0",
+  "version": "3.2.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",
   "module": "dist/index.esm.js",