tenseleyflow/shithub / f0a59f2

Browse files

web/templates: user-tier billing settings + result pages

Authored by mfwolffe <wolffemf@dukes.jmu.edu>
SHA
f0a59f2a9769cd2205de59db4b97be3ef19df25e
Parents
3cbc8b3
Tree
e97793f

2 changed files

StatusFile+-
A internal/web/templates/settings/billing.html 183 0
A internal/web/templates/settings/billing_result.html 22 0
internal/web/templates/settings/billing.htmladded
@@ -0,0 +1,183 @@
1
+{{ define "page" -}}
2
+<div class="shithub-settings-page">
3
+  {{ template "settings-nav" . }}
4
+  <div class="shithub-settings-content">
5
+    <h1>Billing and plans</h1>
6
+
7
+    {{ with .Error }}<p class="shithub-flash shithub-flash-error" role="alert">{{ . }}</p>{{ end }}
8
+    {{ with .Notice }}<p class="shithub-flash shithub-flash-notice" role="status">{{ . }}</p>{{ end }}
9
+    {{ with .BillingAlert }}{{ if .Message }}
10
+    <p class="shithub-flash {{ .Class }}" role="status">
11
+      {{ .Message }}
12
+      {{ if .ActionHref }}<a href="{{ .ActionHref }}">{{ .ActionText }}</a>{{ end }}
13
+    </p>
14
+    {{ end }}{{ end }}
15
+
16
+    <section class="shithub-settings-section" aria-labelledby="user-billing-summary-heading">
17
+      <h2 id="user-billing-summary-heading" class="sr-only">Billing summary</h2>
18
+      <div class="shithub-org-billing-summary">
19
+        {{ range .Summary }}
20
+        <section class="Box shithub-org-billing-card">
21
+          <div class="Box-header">
22
+            <h3 class="Box-title">{{ .Label }}</h3>
23
+          </div>
24
+          <div class="Box-body">
25
+            <p class="shithub-org-billing-card-value">{{ .Value }}</p>
26
+            {{ with .Detail }}<p class="shithub-org-billing-card-detail">{{ . }}</p>{{ end }}
27
+          </div>
28
+        </section>
29
+        {{ end }}
30
+      </div>
31
+    </section>
32
+
33
+    <section id="manage-plan" class="shithub-settings-section" aria-labelledby="user-billing-manage-heading">
34
+      <div class="Subhead Subhead--spacious border-bottom-0 mb-0 tmp-mb-0">
35
+        <h2 id="user-billing-manage-heading" class="Subhead-heading">Manage plan</h2>
36
+      </div>
37
+      <div class="shithub-org-settings-box">
38
+        <div class="shithub-org-settings-row">
39
+          <div>
40
+            <strong>Pro plan</strong>
41
+            <p>A single-seat paid plan that unlocks Pro-only features for your personal account. You can downgrade to Free at any time from the Stripe billing portal.</p>
42
+          </div>
43
+          {{ if .CanManageSubscription }}
44
+          <form method="POST" action="/settings/billing/portal">
45
+            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
46
+            <button type="submit" class="shithub-button">Manage or cancel</button>
47
+          </form>
48
+          {{ else if .CanStartCheckout }}
49
+          <form method="POST" action="/settings/billing/checkout">
50
+            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
51
+            <button type="submit" class="shithub-button shithub-button-primary">Upgrade to Pro</button>
52
+          </form>
53
+          {{ else }}
54
+          <span class="shithub-empty-note">Billing is not configured on this instance.</span>
55
+          {{ end }}
56
+        </div>
57
+        {{ if .CanManageSubscription }}
58
+        <div class="shithub-org-settings-row">
59
+          <div>
60
+            <strong>Downgrade to Free</strong>
61
+            <p>Use Stripe Billing Portal to cancel or schedule cancellation. shithub preserves your Pro configuration and makes Pro-only features read-only after downgrade.</p>
62
+          </div>
63
+          <form method="POST" action="/settings/billing/portal">
64
+            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
65
+            <button type="submit" class="shithub-button shithub-button-danger">Open billing portal</button>
66
+          </form>
67
+        </div>
68
+        {{ end }}
69
+        <div class="shithub-org-settings-row">
70
+          <div>
71
+            <strong>Payment failures</strong>
72
+            <p>Past-due subscriptions enter a grace period before paid entitlements are cut off.</p>
73
+          </div>
74
+          <span>{{ .GracePeriodLabel }}</span>
75
+        </div>
76
+      </div>
77
+    </section>
78
+
79
+    <section id="compare-plans" class="shithub-settings-section" aria-labelledby="user-billing-compare-heading">
80
+      <div class="Subhead Subhead--spacious border-bottom-0 mb-0 tmp-mb-0">
81
+        <h2 id="user-billing-compare-heading" class="Subhead-heading">Compare plans</h2>
82
+      </div>
83
+      <div class="Box shithub-billing-plan-compare shithub-org-billing-compare">
84
+        <div class="Box-body">
85
+          <table class="shithub-org-billing-table">
86
+            <thead>
87
+              <tr>
88
+                <th scope="col">Feature</th>
89
+                <th scope="col">Free</th>
90
+                <th scope="col">Pro</th>
91
+              </tr>
92
+            </thead>
93
+            <tbody>
94
+              <tr>
95
+                <td>Public and private repositories</td>
96
+                <td>Included</td>
97
+                <td>Included</td>
98
+              </tr>
99
+              <tr>
100
+                <td>Advanced branch protection on private repos</td>
101
+                <td>Upgrade</td>
102
+                <td>Included</td>
103
+              </tr>
104
+              <tr>
105
+                <td>Required reviewers on private repos</td>
106
+                <td>Upgrade</td>
107
+                <td>Included</td>
108
+              </tr>
109
+            </tbody>
110
+          </table>
111
+        </div>
112
+      </div>
113
+    </section>
114
+
115
+    <section class="shithub-settings-section" aria-labelledby="user-billing-invoices-heading">
116
+      <div class="Subhead Subhead--spacious border-bottom-0 mb-0 tmp-mb-0">
117
+        <h2 id="user-billing-invoices-heading" class="Subhead-heading">Recent invoices</h2>
118
+      </div>
119
+      {{ if .Invoices }}
120
+      <div class="Box">
121
+        <div class="Box-body p-0">
122
+          <table class="shithub-org-billing-table">
123
+            <thead>
124
+              <tr>
125
+                <th scope="col">Invoice</th>
126
+                <th scope="col">Status</th>
127
+                <th scope="col">Amount</th>
128
+                <th scope="col">Period</th>
129
+                <th scope="col">Due</th>
130
+                <th scope="col"></th>
131
+              </tr>
132
+            </thead>
133
+            <tbody>
134
+              {{ range .Invoices }}
135
+              <tr>
136
+                <td>{{ .Number }}</td>
137
+                <td><span class="shithub-org-billing-status is-{{ .StatusClass }}">{{ .StatusLabel }}</span></td>
138
+                <td>{{ .AmountLabel }}</td>
139
+                <td>{{ .PeriodLabel }}</td>
140
+                <td>{{ .DueLabel }}</td>
141
+                <td class="shithub-org-billing-links">
142
+                  {{ if .HostedInvoiceURL }}<a href="{{ .HostedInvoiceURL }}" target="_blank" rel="noreferrer">Open</a>{{ end }}
143
+                  {{ if .InvoicePDFURL }}<a href="{{ .InvoicePDFURL }}" target="_blank" rel="noreferrer">PDF</a>{{ end }}
144
+                </td>
145
+              </tr>
146
+              {{ end }}
147
+            </tbody>
148
+          </table>
149
+        </div>
150
+      </div>
151
+      {{ else }}
152
+      <p class="shithub-empty-note">No invoices have been recorded for your account yet.</p>
153
+      {{ end }}
154
+    </section>
155
+
156
+    {{ if .IsSiteAdmin }}
157
+    <section class="shithub-settings-section" aria-labelledby="user-billing-debug-heading">
158
+      <div class="Subhead Subhead--spacious border-bottom-0 mb-0 tmp-mb-0">
159
+        <h2 id="user-billing-debug-heading" class="Subhead-heading">Site admin billing debug</h2>
160
+      </div>
161
+      <div class="Box">
162
+        <div class="Box-body p-0">
163
+          <table class="shithub-org-billing-table">
164
+            <tbody>
165
+              <tr><th scope="row">Stripe customer</th><td>{{ if .Debug.StripeCustomerID }}{{ .Debug.StripeCustomerID }}{{ else }}&mdash;{{ end }}</td></tr>
166
+              <tr><th scope="row">Stripe subscription</th><td>{{ if .Debug.StripeSubscriptionID }}{{ .Debug.StripeSubscriptionID }}{{ else }}&mdash;{{ end }}</td></tr>
167
+              <tr><th scope="row">Stripe subscription item</th><td>{{ if .Debug.StripeSubscriptionItemID }}{{ .Debug.StripeSubscriptionItemID }}{{ else }}&mdash;{{ end }}</td></tr>
168
+              <tr><th scope="row">Last webhook event</th><td>{{ if .Debug.LastWebhookEventID }}{{ .Debug.LastWebhookEventID }}{{ else }}&mdash;{{ end }}</td></tr>
169
+              <tr><th scope="row">Webhook type</th><td>{{ if .Debug.LastWebhookEventType }}{{ .Debug.LastWebhookEventType }}{{ else }}&mdash;{{ end }}</td></tr>
170
+              <tr><th scope="row">Webhook status</th><td>{{ if .Debug.LastWebhookStatus }}{{ .Debug.LastWebhookStatus }}{{ else }}&mdash;{{ end }}</td></tr>
171
+              <tr><th scope="row">Webhook received</th><td>{{ if .Debug.LastWebhookReceivedAt }}{{ .Debug.LastWebhookReceivedAt }}{{ else }}&mdash;{{ end }}</td></tr>
172
+              <tr><th scope="row">Webhook processed</th><td>{{ if .Debug.LastWebhookProcessedAt }}{{ .Debug.LastWebhookProcessedAt }}{{ else }}&mdash;{{ end }}</td></tr>
173
+              <tr><th scope="row">Webhook attempts</th><td>{{ .Debug.LastWebhookAttempts }}</td></tr>
174
+              <tr><th scope="row">Webhook error</th><td>{{ if .Debug.LastWebhookError }}{{ .Debug.LastWebhookError }}{{ else }}&mdash;{{ end }}</td></tr>
175
+            </tbody>
176
+          </table>
177
+        </div>
178
+      </div>
179
+    </section>
180
+    {{ end }}
181
+  </div>
182
+</div>
183
+{{- end }}
internal/web/templates/settings/billing_result.htmladded
@@ -0,0 +1,22 @@
1
+{{ define "page" -}}
2
+<section class="shithub-billing-result">
3
+  <div class="shithub-billing-result-card">
4
+    <p class="shithub-org-plan-kicker">{{ if eq .Result "success" }}Payment setup{{ else }}Pro checkout{{ end }}</p>
5
+    <h1>{{ .Heading }}</h1>
6
+    <p>{{ .Message }}</p>
7
+
8
+    <div class="shithub-billing-result-actions">
9
+      {{ if eq .Result "success" }}
10
+      <a href="{{ .BillingPath }}" class="shithub-button shithub-button-primary">View billing and plans</a>
11
+      <a href="/{{ .Username }}" class="shithub-button">Go to your profile</a>
12
+      {{ else }}
13
+      <form method="POST" action="/settings/billing/checkout">
14
+        <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
15
+        <button type="submit" class="shithub-button shithub-button-primary">Continue with Pro</button>
16
+      </form>
17
+      <a href="{{ .BillingPath }}" class="shithub-button">Keep Free for now</a>
18
+      {{ end }}
19
+    </div>
20
+  </div>
21
+</section>
22
+{{- end }}