@moneybar.online/moneybar 5.0.1 → 5.0.4
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.
- package/dist/index.bundle.js +1 -1
- package/dist/index.bundle.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +3 -3
- package/dist/types.d.ts.map +1 -1
- package/example-template.html +56 -54
- package/moneybar-config-template.js +47 -88
- package/package.json +1 -1
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>
|
|
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
|
|
59
|
+
<strong>⚙️ Configuration:</strong> Edit <code>moneybar-config-template.js</code> to customize:
|
|
51
60
|
<ul>
|
|
52
|
-
<li><code>
|
|
53
|
-
<li><code>
|
|
54
|
-
<li><code>
|
|
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>📚
|
|
99
|
-
<
|
|
100
|
-
<
|
|
101
|
-
<li>
|
|
102
|
-
<li>
|
|
103
|
-
<li>
|
|
104
|
-
|
|
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
|
|
95
|
+
<h3>2. Configure MoneyBar</h3>
|
|
108
96
|
<ol>
|
|
109
|
-
<li>
|
|
110
|
-
<li>Update
|
|
111
|
-
<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>
|
|
@@ -8,68 +8,48 @@
|
|
|
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@
|
|
11
|
+
import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@5.0.3/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
|
|
17
|
+
// CONFIGURATION
|
|
18
18
|
// ========================================
|
|
19
19
|
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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_c1d2cc257c1930c205a67c62e4a787797664ba5e6eff5c7b920218291390fc10',
|
|
51
25
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
26
|
+
// Label for your action (shown in UI: "PDF Generations: 2/3")
|
|
27
|
+
actionLabel: 'PDF Generations', // e.g., 'Image Exports', 'iPad Syncs', 'Conversions'
|
|
28
|
+
|
|
29
|
+
// Number of free attempts before paywall
|
|
56
30
|
freeAttemptLimit: 3,
|
|
31
|
+
|
|
32
|
+
// Supabase configuration
|
|
57
33
|
supabase: {
|
|
58
34
|
url: 'https://qhlzdkwcrrjjcqvupyaa.supabase.co',
|
|
59
35
|
anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFobHpka3djcnJqamNxdnVweWFhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQzNDYyNTYsImV4cCI6MjA3OTkyMjI1Nn0.Qy-IsmGxakvZ6JBtSoEjFefeXMBsUuSD551f6hfIIZw'
|
|
60
36
|
},
|
|
61
|
-
|
|
37
|
+
|
|
38
|
+
// Payment configuration (optional)
|
|
39
|
+
payment: [{
|
|
62
40
|
provider: 'dodo',
|
|
63
|
-
productId: '
|
|
64
|
-
mode: '
|
|
65
|
-
}],
|
|
41
|
+
productId: 'pdt_U8cQ7xFXw2IsAL0jpuI6e',
|
|
42
|
+
mode: 'live'
|
|
43
|
+
} ],
|
|
44
|
+
|
|
45
|
+
// Feedback form (optional)
|
|
66
46
|
feedback: {
|
|
67
47
|
form: {
|
|
68
48
|
title: 'Quick Feedback',
|
|
69
49
|
description: 'What stopped you from upgrading?',
|
|
70
|
-
option1: 'Too
|
|
71
|
-
option2: 'Not enough
|
|
72
|
-
option3: 'Need more
|
|
50
|
+
option1: 'Too expensive',
|
|
51
|
+
option2: 'Not enough features',
|
|
52
|
+
option3: 'Need more time to evaluate'
|
|
73
53
|
},
|
|
74
54
|
email: [{
|
|
75
55
|
provider: 'resend',
|
|
@@ -77,69 +57,48 @@ const FEEDBACK_INTELLIGENCE_CONFIG = {
|
|
|
77
57
|
fromEmail: 'feedback@yourapp.com'
|
|
78
58
|
}]
|
|
79
59
|
},
|
|
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
60
|
|
|
93
|
-
|
|
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
|
-
}],
|
|
61
|
+
// Theme customization (optional)
|
|
107
62
|
theme: {
|
|
108
|
-
name: '
|
|
109
|
-
primaryColor: '#
|
|
63
|
+
name: 'emerald', // DaisyUI theme name
|
|
64
|
+
primaryColor: '#059669'
|
|
110
65
|
},
|
|
66
|
+
|
|
67
|
+
// Title bar configuration (optional)
|
|
111
68
|
titleBar: {
|
|
112
|
-
title: '
|
|
69
|
+
title: '🚀 My App1',
|
|
113
70
|
links: [
|
|
114
|
-
{ text: '
|
|
71
|
+
{ text: 'Features', url: '#features', target: '_self' },
|
|
115
72
|
{ text: 'Pricing', url: '#pricing', target: '_self' }
|
|
116
73
|
]
|
|
117
74
|
},
|
|
75
|
+
|
|
76
|
+
// Success message after action (optional)
|
|
118
77
|
successMessage: {
|
|
119
78
|
enabled: true,
|
|
120
|
-
title: '
|
|
121
|
-
message: 'Your
|
|
79
|
+
title: 'Action Completed!',
|
|
80
|
+
message: 'Your action was successful. Try more features!'
|
|
122
81
|
}
|
|
123
82
|
};
|
|
124
83
|
|
|
125
|
-
// ========================================
|
|
126
|
-
// CHOOSE YOUR CONFIGURATION
|
|
127
|
-
// ========================================
|
|
128
|
-
|
|
129
|
-
// Select one of the configs above:
|
|
130
|
-
window.APP_CONFIG = FEEDBACK_INTELLIGENCE_CONFIG;
|
|
131
|
-
|
|
132
84
|
// ========================================
|
|
133
85
|
// INITIALIZE MONEYBAR
|
|
134
86
|
// ========================================
|
|
135
87
|
|
|
136
|
-
const moneyBar = new MoneyBar(
|
|
88
|
+
const moneyBar = new MoneyBar(CONFIG);
|
|
137
89
|
|
|
90
|
+
// Attach to your action button
|
|
138
91
|
moneyBar.attachToButton('#action-btn', (userContext) => {
|
|
139
|
-
//
|
|
140
|
-
|
|
141
|
-
|
|
92
|
+
// Your app logic here
|
|
93
|
+
// userContext contains: isPremium, isAuthenticated, email, name, currentCount, remaining, limit
|
|
94
|
+
|
|
95
|
+
console.log('User Context:', userContext);
|
|
96
|
+
|
|
97
|
+
if (userContext.isPremium) {
|
|
98
|
+
alert('Premium user! Full access granted.');
|
|
99
|
+
// Your premium logic here
|
|
142
100
|
} else {
|
|
143
|
-
|
|
101
|
+
alert(`Free user. ${userContext.remaining} attempts remaining.`);
|
|
102
|
+
// Your free tier logic here
|
|
144
103
|
}
|
|
145
104
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moneybar.online/moneybar",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.4",
|
|
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",
|