Skip to main content

max / makenotwork

5.2 KB · 114 lines History Blame Raw
1 {% include "wizards/partials/step_nav.html" %}
2
3 <div class="wizard-step">
4 <h2 class="subtitle-h2">Monetization</h2>
5 <p class="step-description">Choose how people access your project. 0% platform fee — only ~3% payment processing fee.</p>
6
7 <form hx-post="/dashboard/new-project/{{ slug }}/step/monetization"
8 hx-target="#wizard-step" hx-swap="innerHTML"
9 hx-push-url="/dashboard/new-project/{{ slug }}/step/first-content">
10
11 {% if !stripe_connected %}
12 <div class="info-box mb-5">
13 <strong>Stripe not connected.</strong> To accept payments, connect your Stripe account in
14 <a href="/dashboard">Dashboard &rarr; Payments</a>. You can still configure pricing now and connect later.
15 </div>
16 {% endif %}
17
18 <div class="form-group">
19 <label>Project pricing</label>
20 <select name="pricing_model" id="pricing-model" onchange="updatePricingUI()">
21 <option value="free"{% if pricing_model == "free" %} selected{% endif %}>Free — anyone can access</option>
22 <option value="buy_once"{% if pricing_model == "buy_once" %} selected{% endif %}>One-time purchase</option>
23 <option value="pwyw"{% if pricing_model == "pwyw" %} selected{% endif %}>Pay what you want</option>
24 <option value="subscription"{% if pricing_model == "subscription" %} selected{% endif %}>Membership — recurring monthly</option>
25 </select>
26 </div>
27
28 <div id="buy-once-fields" class="hidden">
29 <div class="form-group">
30 <label for="price_dollars">Price ($)</label>
31 <input type="number" name="price_dollars" id="price_dollars" min="0.50" step="0.01"
32 placeholder="9.99" value="{{ price_dollars }}" disabled>
33 </div>
34 </div>
35
36 <div id="pwyw-fields" class="hidden">
37 <div class="form-group">
38 <label for="pwyw_min_dollars">Minimum price ($, 0 for no minimum)</label>
39 <input type="number" name="pwyw_min_dollars" id="pwyw_min_dollars" min="0" step="0.01"
40 placeholder="0.00" value="{{ pwyw_min_dollars }}" disabled>
41 </div>
42 </div>
43
44 <div id="subscription-fields" class="hidden">
45 <div class="info-box mb-4">
46 Members get access to all paid items in this project.
47 Individual item pricing (pay-once, pay-what-you-want, free) is configured when you create each item.
48 </div>
49
50 <div id="tier-list">
51 {% for tier in tiers %}
52 <div class="tier-row">
53 <span class="tier-name">{{ tier.name }}</span>
54 <span class="tier-price">{{ tier.price_display }}/mo</span>
55 </div>
56 {% endfor %}
57 </div>
58 <div id="tier-forms"></div>
59 <button type="button" class="btn-secondary mt-2"
60 onclick="addTierForm()">Add Tier</button>
61 </div>
62
63 <div class="wizard-actions">
64 <button type="button" class="btn-secondary"
65 hx-get="/dashboard/new-project/{{ slug }}/step/appearance"
66 hx-target="#wizard-step" hx-swap="innerHTML"
67 hx-push-url="/dashboard/new-project/{{ slug }}/step/appearance">Back</button>
68 <button type="button" class="btn-secondary"
69 hx-get="/dashboard/new-project/{{ slug }}/step/first-content"
70 hx-target="#wizard-step" hx-swap="innerHTML"
71 hx-push-url="/dashboard/new-project/{{ slug }}/step/first-content">Skip</button>
72 <button type="submit" class="btn-primary">Continue</button>
73 </div>
74 </form>
75 </div>
76
77 <script>
78 var tierIndex = {{ tiers.len() }};
79
80 function updatePricingUI() {
81 var model = document.getElementById('pricing-model').value;
82
83 var sections = [
84 { id: 'buy-once-fields', active: model === 'buy_once' },
85 { id: 'pwyw-fields', active: model === 'pwyw' },
86 { id: 'subscription-fields', active: model === 'subscription' }
87 ];
88
89 sections.forEach(function(s) {
90 var el = document.getElementById(s.id);
91 el.classList.toggle('hidden', !s.active);
92 // Disable hidden inputs so they don't block form validation
93 var inputs = el.querySelectorAll('input, select');
94 inputs.forEach(function(inp) { inp.disabled = !s.active; });
95 });
96 }
97
98 function addTierForm() {
99 var container = document.getElementById('tier-forms');
100 var html = '<div class="tier-form-row">' +
101 '<div class="form-group"><label>Tier Name</label>' +
102 '<input type="text" name="tier_name_' + tierIndex + '" placeholder="e.g. Supporter" required></div>' +
103 '<div class="form-group"><label>Price ($/month)</label>' +
104 '<input type="number" name="tier_price_' + tierIndex + '" min="1" step="0.01" placeholder="5.00" required></div>' +
105 '<div class="form-group"><label>Description</label>' +
106 '<input type="text" name="tier_desc_' + tierIndex + '" placeholder="What members get..."></div>' +
107 '</div>';
108 container.insertAdjacentHTML('beforeend', html);
109 tierIndex++;
110 }
111
112 updatePricingUI();
113 </script>
114