2.5.4

Upgraded pro/extra access

assets/js/components/SubscribeModal.js

@@ -22,8 +22,15 @@ import { Wordmark } from './Wordmark.js';
 
 const html = htm.bind(h);
 
-const SUBSCRIBE_URL = 'https://buy.stripe.com/9B63cw7vl8k15Ei9DQd7q00';
-const MANAGE_URL    = 'https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00';
+const SUBSCRIBE_URL        = 'https://buy.stripe.com/9B63cw7vl8k15Ei9DQd7q00';
+// TODO: replace with the one-time Payment Link created in the Stripe
+// Dashboard (see plan Part 3) - a flat-rate product with a few selectable
+// price options (e.g. £3 / £5 / £10), since Stripe Payment Links don't
+// support true customer-chosen amounts. Configure its after-payment
+// redirect to https://sunscope.net/?session_id={CHECKOUT_SESSION_ID}
+// the same way the monthly link should be.
+const SUBSCRIBE_URL_ONEOFF = 'https://buy.stripe.com/REPLACE_WITH_ONEOFF_PAYMENT_LINK';
+const MANAGE_URL           = 'https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00';
 
 export function SubscribeModal({ title, detail, onClose, openRestore }) {
   // Dismiss on Esc.
@@ -77,10 +84,18 @@ export function SubscribeModal({ title, detail, onClose, openRestore }) {
           marginBottom: '18px',
         }}>£2 / month  ·  cancel any time</div>
         <a class="welcome-cta" href=${SUBSCRIBE_URL} target="_blank" rel="noopener noreferrer"
-          style=${{ textDecoration: 'none', textAlign: 'center', marginBottom: '16px' }}>
+          style=${{ textDecoration: 'none', textAlign: 'center', marginBottom: '10px' }}>
           Subscribe — £2/month
         </a>
         <div style=${{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
+          <a href=${SUBSCRIBE_URL_ONEOFF} target="_blank" rel="noopener noreferrer"
+            style=${{
+              ...secondaryLink,
+              color: '#c8922a',
+              borderBottom: '1px solid rgba(200,146,42,0.4)',
+              paddingBottom: '1px',
+            }}
+          >Or make a one-off payment →</a>
           <button
             type="button"
             onClick=${() => { onClose(); openRestore(); }}