2.9.8

Move info boxes to model popups
2026-06-11 18:12:04 +01:00
parent b41c4bd75c
commit 9a9684ba99
12 changed files with 615 additions and 306 deletions
@@ -0,0 +1,105 @@
+// ------------------------------------------------------------------------
+//  components/SubscribeModal.js - SunScope Extra upsell popup.
+//
+//  Replaces the old inline pro-prompt box. Shown when a free user taps a
+//  locked day, profile, or feature. Presents the upsell copy plus Subscribe /
+//  Restore / Manage links. Easy to dismiss: ×, backdrop click, or Esc.
+//
+//  Reuses the .welcome-* overlay/card styling. Purely presentational - the
+//  open/close state is proPromptDay in useAppState, dismissed via onClose.
+//
+//  Props:
+//    title       - upsell heading (e.g. "Hiking is part of SunScope Extra")
+//    detail      - supporting paragraph
+//    onClose     - dismiss the prompt (clears proPromptDay)
+//    openRestore - opens the "Already subscribed?" restore modal
+// ------------------------------------------------------------------------
+
+import { h } from '../../vendor/preact.js';
+import { useEffect } from '../../vendor/preact-hooks.js';
+import htm from '../../vendor/htm.js';
+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';
+
+export function SubscribeModal({ title, detail, onClose, openRestore }) {
+  // Dismiss on Esc.
+  useEffect(() => {
+    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  const secondaryLink = {
+    fontFamily: 'Manrope, sans-serif',
+    fontWeight: 700,
+    fontSize: '10px',
+    textTransform: 'uppercase',
+    letterSpacing: '0.07em',
+    textDecoration: 'none',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+  };
+
+  return html`
+    <div class="welcome-overlay" onClick=${onClose}>
+      <div class="welcome-card" role="dialog" aria-modal="true" aria-labelledby="subscribe-title"
+        onClick=${(e) => e.stopPropagation()} style=${{ maxWidth: '440px' }}>
+        <button class="welcome-close" aria-label="Close" onClick=${onClose}>×</button>
+        <div class="welcome-head">
+          <${Wordmark} />
+          <div style=${{
+            fontFamily: 'Manrope, sans-serif',
+            fontWeight: 600,
+            fontSize: '11px',
+            letterSpacing: '0.12em',
+            textTransform: 'uppercase',
+            color: '#7a5c2a',
+            marginTop: '10px',
+          }}>See the world the way your skin does.</div>
+        </div>
+        <h2 class="welcome-title" id="subscribe-title" style=${{ textAlign: 'center', fontSize: '1.3rem', marginBottom: '10px' }}>
+          <span aria-hidden="true">🔒</span> ${title}
+        </h2>
+        <p class="welcome-intro">${detail}</p>
+        <div style=${{
+          fontFamily: 'Manrope, sans-serif',
+          fontWeight: 700,
+          fontSize: '11px',
+          textTransform: 'uppercase',
+          letterSpacing: '0.07em',
+          color: '#c8922a',
+          textAlign: 'center',
+          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' }}>
+          Subscribe — £2/month
+        </a>
+        <div style=${{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
+          <button
+            type="button"
+            onClick=${() => { onClose(); openRestore(); }}
+            style=${{
+              ...secondaryLink,
+              color: '#c8922a',
+              borderBottom: '1px solid rgba(200,146,42,0.4)',
+              padding: '0 0 1px',
+            }}
+          >Already subscribed? Restore access →</button>
+          <a href=${MANAGE_URL} target="_blank" rel="noopener noreferrer"
+            style=${{
+              ...secondaryLink,
+              color: '#b09870',
+              borderBottom: '1px solid rgba(176,152,112,0.4)',
+              paddingBottom: '1px',
+            }}
+          >Manage or cancel subscription →</a>
+        </div>
+      </div>
+    </div>`;
+}