115 lines
4.5 KiB
JavaScript
115 lines
4.5 KiB
JavaScript
// ------------------------------------------------------------------------
|
||
// 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 SUBSCRIBE_URL_ONEOFF = 'https://buy.stripe.com/14A14odTJ6bT0jY4jwd7q02';
|
||
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: '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(); }}
|
||
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>`;
|
||
}
|