@moneybar.online/moneybar 5.0.0 → 5.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/index.bundle.js +1 -1
  2. package/dist/index.bundle.js.map +1 -1
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.esm.js +1 -1
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.js +1 -1
  8. package/dist/index.js.map +1 -1
  9. package/dist/types.d.ts +1 -3
  10. package/dist/types.d.ts.map +1 -1
  11. package/example-template.html +56 -54
  12. package/moneybar-config-template.js +42 -86
  13. package/package.json +1 -2
  14. package/src/index.ts +0 -3428
  15. package/src/types.ts +0 -180
package/example-template.html CHANGED
@@ -36,6 +36,15 @@
36
36
  margin: 1rem 0;
37
37
  border-left: 4px solid #f59e0b;
38
38
  }
39
+ .user-context {
40
+ background: #e0f2fe;
41
+ padding: 1rem;
42
+ border-radius: 6px;
43
+ margin: 1rem 0;
44
+ border-left: 4px solid #0ea5e9;
45
+ font-family: monospace;
46
+ font-size: 0.9rem;
47
+ }
39
48
  </style>
40
49
  </head>
41
50
  <body>
@@ -43,75 +52,68 @@
43
52
 
44
53
  <div class="demo-section">
45
54
  <h2>🎨 Try the Demo</h2>
46
- <p>This button uses the configuration from <code>moneybar-config-template.js</code></p>
55
+ <p>Click the button to see MoneyBar in action. Check the console and alert for userContext details.</p>
47
56
  <button id="action-btn">Try Action (Free Trial)</button>
48
57
 
49
58
  <div class="config-note">
50
- <strong>🔧 Change Configuration:</strong> Edit <code>window.APP_CONFIG = VALUE_FIRST_CONFIG;</code> in <code>moneybar-config-template.js</code> to switch between:
59
+ <strong>⚙️ Configuration:</strong> Edit <code>moneybar-config-template.js</code> to customize:
51
60
  <ul>
52
- <li><code>VALUE_FIRST_CONFIG</code> - PDF generator demo</li>
53
- <li><code>FEEDBACK_INTELLIGENCE_CONFIG</code> - SaaS analytics demo</li>
54
- <li><code>INSTANT_PAYMENT_CONFIG</code> - Template creator demo</li>
61
+ <li><code>appId</code> - Your app name</li>
62
+ <li><code>security_key</code> - Generate in Supabase SQL</li>
63
+ <li><code>freeAttemptLimit</code> - Number of free attempts</li>
64
+ <li><code>payment</code> - Dodo payment configuration</li>
65
+ <li><code>theme</code> - UI customization</li>
55
66
  </ul>
56
67
  </div>
68
+
69
+ <div class="user-context">
70
+ <strong>📊 UserContext Object:</strong><br>
71
+ When your action runs, you receive a <code>userContext</code> object with:<br>
72
+ • <strong>isPremium</strong>: boolean - Is user premium?<br>
73
+ • <strong>isAuthenticated</strong>: boolean - Is user signed in?<br>
74
+ • <strong>email</strong>: string - User's email (if authenticated)<br>
75
+ • <strong>name</strong>: string - User's name (if available)<br>
76
+ • <strong>currentCount</strong>: number - Current usage count<br>
77
+ • <strong>remaining</strong>: number - Attempts remaining<br>
78
+ • <strong>limit</strong>: number - Free attempt limit<br>
79
+ • <strong>user</strong>: object - Full Supabase user object
80
+ </div>
57
81
  </div>
58
82
 
59
83
  <!-- Load MoneyBar configuration and initialization -->
60
84
  <script type="module" src="moneybar-config-template.js"></script>
61
85
 
62
- <!-- App-specific action functions -->
63
- <script type="module">
64
- // 🎯 App-specific action functions (customize these for your app)
65
-
66
- window.generatePDF = function(userContext) {
67
- if (userContext.isPremium) {
68
- alert('Premium PDF generated with watermark removal, custom fonts, and high quality!');
69
- // Your premium PDF generation logic here
70
- } else {
71
- alert(`Basic PDF generated! ${userContext.remaining} free attempts left.`);
72
- // Your basic PDF generation logic here
73
- }
74
- };
75
-
76
- window.runAnalysis = function(userContext) {
77
- if (userContext.isPremium) {
78
- alert('Complete analysis ready! Access to all metrics, exports, and AI insights.');
79
- // Your premium analytics logic here
80
- } else {
81
- alert(`Analysis complete! Limited data shown. ${userContext.remaining} attempts left.`);
82
- // Your basic analytics logic here
83
- }
84
- };
85
-
86
- window.createTemplate = function(userContext) {
87
- if (userContext.isPremium) {
88
- alert('Premium template created! Full customization, commercial license, and PSD files included.');
89
- // Your premium template logic here
90
- } else {
91
- alert(`Template created! Basic version only. ${userContext.remaining} attempts left.`);
92
- // Your basic template logic here
93
- }
94
- };
95
- </script>
96
-
97
86
  <div class="demo-section">
98
- <h2>📚 Integration Guide</h2>
99
- <p>See the <a href="README.md">README.md</a> file for complete integration instructions including:</p>
100
- <ul>
101
- <li>Multiple integration methods (CDN, NPM, self-contained)</li>
102
- <li>Configuration options and themes</li>
103
- <li>Backend setup instructions</li>
104
- <li>Use case examples and best practices</li>
105
- </ul>
87
+ <h2>📚 Quick Start</h2>
88
+ <h3>1. Setup Supabase</h3>
89
+ <ol>
90
+ <li>Run the migration SQL to create tables</li>
91
+ <li>Generate security key: <code>SELECT generate_security_key('my-app', 'yourdomain.com', 3)</code></li>
92
+ <li>Copy the generated key to config</li>
93
+ </ol>
106
94
 
107
- <h3>🔧 Quick Setup</h3>
95
+ <h3>2. Configure MoneyBar</h3>
108
96
  <ol>
109
- <li>Copy <code>moneybar-config-template.js</code> to your project</li>
110
- <li>Update Supabase and payment credentials in the config</li>
111
- <li>Choose your use case configuration</li>
112
- <li>Add your app-specific action functions to your HTML</li>
113
- <li>Include the import map and script tags</li>
97
+ <li>Edit <code>moneybar-config-template.js</code></li>
98
+ <li>Update <code>security_key</code>, <code>appId</code>, and other settings</li>
99
+ <li>Customize theme and payment options</li>
114
100
  </ol>
101
+
102
+ <h3>3. Implement Your Action</h3>
103
+ <p>The button callback receives <code>userContext</code> - use it to control features:</p>
104
+ <pre style="background: #1f2937; color: #f9fafb; padding: 1rem; border-radius: 6px; overflow-x: auto;">
105
+ moneyBar.attachToButton('#action-btn', (userContext) => {
106
+ console.log('User Context:', userContext);
107
+
108
+ if (userContext.isPremium) {
109
+ // Premium features
110
+ } else {
111
+ // Free tier features
112
+ console.log(`${userContext.remaining} attempts left`);
113
+ }
114
+ });</pre>
115
+
116
+ <p>📖 See <a href="README.md">README.md</a> for complete documentation</p>
115
117
  </div>
116
118
  </body>
117
119
  </html>
package/moneybar-config-template.js CHANGED
@@ -8,68 +8,45 @@
8
8
 
9
9
  // Self-contained bundle (works without import map)
10
10
  // Use specific version to avoid CDN cache issues
11
- import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@4.2.4/dist/index.bundle.js';
11
+ import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@5.0.1/dist/index.bundle.js';
12
12
 
13
13
  // For NPM projects:
14
14
  // import { MoneyBar } from '@moneybar.online/moneybar';
15
15
 
16
16
  // ========================================
17
- // CONFIGURATION OPTIONS
17
+ // CONFIGURATION
18
18
  // ========================================
19
19
 
20
- const VALUE_FIRST_CONFIG = {
21
- actionFunction: 'generatePDF',
22
- appId: 'pdf-generator',
23
- security_key: 'sk_308a2e91d68e2a0dad02de6755591a5ba77b8e90c227c5d541819136728b6b451', // 🔐 Add your security key from Supabase
24
- freeAttemptLimit: 3,
25
- supabase: {
26
- url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
27
- anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
28
- },
29
- payment: [{
30
- provider: 'dodo',
31
- productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
32
- mode: 'test'
33
- }],
34
- theme: {
35
- name: 'emerald',
36
- primaryColor: '#059669'
37
- },
38
- titleBar: {
39
- title: '💰 PDF Generator',
40
- links: [
41
- { text: 'How it Works', url: '#how', target: '_self' },
42
- { text: 'Examples', url: '#examples', target: '_self' }
43
- ]
44
- },
45
- successMessage: {
46
- enabled: true,
47
- title: 'PDF Generated!',
48
- message: 'Your PDF has been created successfully. Try more examples!'
49
- }
50
- };
20
+ const CONFIG = {
21
+ // Security key from Supabase (contains your app identifier)
22
+ // Generate using: SELECT generate_security_key('my-app', 'yourdomain.com', 'your@email.com', 3)
23
+ // The app name in the security key will be used throughout MoneyBar
24
+ security_key: 'sk_YOUR_SECURITY_KEY_HERE',
51
25
 
52
- const FEEDBACK_INTELLIGENCE_CONFIG = {
53
- actionFunction: 'runAnalysis',
54
- appId: 'saas-analytics',
55
- security_key: 'sk_308a2e91d68e2a0dad02de6755591a5ba77b8e90c227c5d541819136728b6b45', // 🔐 Add your security key from Supabase
26
+ // Number of free attempts before paywall
56
27
  freeAttemptLimit: 3,
28
+
29
+ // Supabase configuration
57
30
  supabase: {
58
31
  url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
59
32
  anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
60
33
  },
34
+
35
+ // Payment configuration (optional)
61
36
  payment: [{
62
37
  provider: 'dodo',
63
- productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
64
- mode: 'test'
38
+ productId: 'pdt_YOUR_PRODUCT_ID',
39
+ mode: 'test' // or 'live'
65
40
  }],
41
+
42
+ // Feedback form (optional)
66
43
  feedback: {
67
44
  form: {
68
45
  title: 'Quick Feedback',
69
46
  description: 'What stopped you from upgrading?',
70
- option1: 'Too complex to implement',
71
- option2: 'Not enough ROI for my team',
72
- option3: 'Need more features first'
47
+ option1: 'Too expensive',
48
+ option2: 'Not enough features',
49
+ option3: 'Need more time to evaluate'
73
50
  },
74
51
  email: [{
75
52
  provider: 'resend',
@@ -77,69 +54,48 @@ const FEEDBACK_INTELLIGENCE_CONFIG = {
77
54
  fromEmail: 'feedback@yourapp.com'
78
55
  }]
79
56
  },
80
- theme: {
81
- name: 'corporate',
82
- primaryColor: '#0066cc'
83
- },
84
- titleBar: {
85
- title: '📈 Analytics Tool',
86
- links: [
87
- { text: 'Features', url: '#features', target: '_self' },
88
- { text: 'ROI Calculator', url: '#roi', target: '_self' }
89
- ]
90
- }
91
- };
92
57
 
93
- const INSTANT_PAYMENT_CONFIG = {
94
- actionFunction: 'createTemplate',
95
- appId: 'template-creator',
96
- security_key: 'sk_YOUR_SECURITY_KEY_HERE', // 🔐 Add your security key from Supabase
97
- freeAttemptLimit: 5,
98
- supabase: {
99
- url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
100
- anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
101
- },
102
- payment: [{
103
- provider: 'dodo',
104
- productId: 'pdt_BSS7M6oKqRTEaxqgJfprq',
105
- mode: 'test'
106
- }],
58
+ // Theme customization (optional)
107
59
  theme: {
108
- name: 'dark',
109
- primaryColor: '#7c3aed'
60
+ name: 'emerald', // DaisyUI theme name
61
+ primaryColor: '#059669'
110
62
  },
63
+
64
+ // Title bar configuration (optional)
111
65
  titleBar: {
112
- title: '⚡ Template Creator',
66
+ title: '🚀 My App',
113
67
  links: [
114
- { text: 'Templates', url: '#templates', target: '_self' },
68
+ { text: 'Features', url: '#features', target: '_self' },
115
69
  { text: 'Pricing', url: '#pricing', target: '_self' }
116
70
  ]
117
71
  },
72
+
73
+ // Success message after action (optional)
118
74
  successMessage: {
119
75
  enabled: true,
120
- title: 'Template Created!',
121
- message: 'Your professional template is ready. Download and customize!'
76
+ title: 'Action Completed!',
77
+ message: 'Your action was successful. Try more features!'
122
78
  }
123
79
  };
124
80
 
125
- // ========================================
126
- // CHOOSE YOUR CONFIGURATION
127
- // ========================================
128
-
129
- // Select one of the configs above:
130
- window.APP_CONFIG = FEEDBACK_INTELLIGENCE_CONFIG;
131
-
132
81
  // ========================================
133
82
  // INITIALIZE MONEYBAR
134
83
  // ========================================
135
84
 
136
- const moneyBar = new MoneyBar(window.APP_CONFIG);
85
+ const moneyBar = new MoneyBar(CONFIG);
137
86
 
87
+ // Attach to your action button
138
88
  moneyBar.attachToButton('#action-btn', (userContext) => {
139
- // Call the function specified in actionFunction
140
- if (typeof window[window.APP_CONFIG.actionFunction] === 'function') {
141
- window[window.APP_CONFIG.actionFunction](userContext);
89
+ // Your app logic here
90
+ // userContext contains: isPremium, isAuthenticated, email, name, currentCount, remaining, limit
91
+
92
+ console.log('User Context:', userContext);
93
+
94
+ if (userContext.isPremium) {
95
+ alert('Premium user! Full access granted.');
96
+ // Your premium logic here
142
97
  } else {
143
- console.error(`Function '${window.APP_CONFIG.actionFunction}' not found`);
98
+ alert(`Free user. ${userContext.remaining} attempts remaining.`);
99
+ // Your free tier logic here
144
100
  }
145
101
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moneybar.online/moneybar",
3
- "version": "5.0.0",
3
+ "version": "5.0.3",
4
4
  "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.",
5
5
  "main": "dist/index.esm.js",
6
6
  "module": "dist/index.esm.js",
@@ -15,7 +15,6 @@
15
15
  },
16
16
  "files": [
17
17
  "dist/",
18
- "src/",
19
18
  "README.md",
20
19
  "moneybar-config-template.js",
21
20
  "example-template.html"