source: Klonkt/src/views/pages/paid-result.ejs@ c3d12a6

main
Last change on this file since c3d12a6 was c3d12a6, checked in by Robin <roboburr@…>, 7 weeks ago

Feature: a way to actually become a supporter, and a styled expired page

Bart's test surfaced two gaps in the visitor flow:

  • After "Allow" on Patreon, a non-supporter landed on "Nog geen supporter" with no way to actually pledge. The page now shows a primary "Word supporter op Patreon" button. The site owner sets their public Patreon page in Beheer -> Betaalde posts (new field); it's also linked from the gate itself ("Nog geen supporter? Word het op Patreon").
  • The invalid/expired callback replied with a raw res.send() plain-text line. It now renders the normal paid-result page (reason 'expired').

Changed files:
src/config/database.js

  • paid_patreon.patreon_url column (additive)

src/services/PaidPatreonService.js

  • patreonUrl in config/status/save (undefined keeps, empty clears) + patreonUrl(siteId) helper

src/routes/admin-paid.js

  • save patreon_url from the form

src/views/pages/admin-paid.ejs

  • "Openbare Patreon-pagina" field

src/routes/paid.js

  • expired callback renders paid-result; pass patronUrl to the result pages

src/routes/posts.js

  • pass pgPatronUrl to the gate

src/views/pages/paid-gate.ejs

  • "Word supporter" join line under the unlock button

src/views/pages/paid-result.ejs

  • "Word supporter op Patreon" primary button, 'expired' reason, ghost back button always has a label

test/paid-patron.test.js

  • patreonUrl set/keep/clear semantics

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>
  • Property mode set to 100644
File size: 2.6 KB
RevLine 
[c3d12a6]1<%
2 var _slug = (typeof postSlug !== 'undefined' && postSlug) ? postSlug : '';
3 var _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
4 var _patron = (typeof patronUrl !== 'undefined' && patronUrl) ? patronUrl : '';
5%>
[9e9e6f9]6<section class="pr">
7 <div class="pr-card">
8 <div class="pr-ic">🔒</div>
9 <% if (reason === 'notpatron') { %>
10 <h1 class="pr-h1">Nog geen supporter</h1>
[c3d12a6]11 <p class="pr-sub">Je bent (nog) geen actieve supporter van deze site op Patreon. Word supporter en probeer het daarna opnieuw vanaf de post.</p>
[9e9e6f9]12 <% } else if (reason === 'tier') { %>
13 <h1 class="pr-h1">Een niveau hoger nodig</h1>
14 <p class="pr-sub">
15 Deze post vraagt vanaf &euro;<%= ((typeof neededCents !== 'undefined' ? neededCents : 0)/100).toFixed(2) %>.
16 Jouw steun is nu &euro;<%= ((typeof haveCents !== 'undefined' ? haveCents : 0)/100).toFixed(2) %>. Verhoog je steun en probeer opnieuw.
17 </p>
[c3d12a6]18 <% } else if (reason === 'expired') { %>
19 <h1 class="pr-h1">Aanvraag verlopen</h1>
20 <p class="pr-sub">Deze ontgrendel-link is verlopen of al gebruikt. Ga terug naar de post en probeer het opnieuw.</p>
[9e9e6f9]21 <% } else { %>
22 <h1 class="pr-h1">Ontgrendelen afgebroken</h1>
23 <p class="pr-sub">Er is niets gekoppeld. Je kunt het opnieuw proberen vanaf de post.</p>
24 <% } %>
[c3d12a6]25
26 <div class="pr-actions">
27 <% if ((reason === 'notpatron' || reason === 'tier') && _patron) { %>
28 <a class="pr-btn" href="<%= _patron %>" target="_blank" rel="noopener">Word supporter op Patreon</a>
29 <% } %>
30 <% if (_slug) { %>
31 <a class="pr-btn pr-btn-ghost" href="<%= _base %>/<%= _slug %>">Terug naar de post</a>
32 <% } else { %>
33 <a class="pr-btn pr-btn-ghost" href="<%= _base %>/">Terug naar de site</a>
34 <% } %>
35 </div>
[9e9e6f9]36 </div>
37</section>
38
39<style>
40 .pr { max-width: 460px; margin: 0 auto; padding: 56px 18px; text-align: center; }
41 .pr-card { border: 1px solid color-mix(in srgb, var(--ink,#000) 16%, transparent); border-radius: 18px; padding: 34px 26px; }
42 .pr-ic { font-size: 38px; margin-bottom: 6px; }
43 .pr-h1 { font-size: 23px; margin: 0 0 8px; }
[c3d12a6]44 .pr-sub { opacity: .85; line-height: 1.6; margin: 0 0 20px; }
45 .pr-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
[9e9e6f9]46 .pr-btn { display: inline-block; padding: 11px 20px; border-radius: 10px; background: var(--accent,#6b8f71); color: #fff; text-decoration: none; font-weight: 600; }
[c3d12a6]47 .pr-btn-ghost { background: transparent; color: var(--ink,#222); border: 1px solid color-mix(in srgb, var(--ink,#000) 22%, transparent); }
[9e9e6f9]48</style>
Note: See TracBrowser for help on using the repository browser.