/* ───────────────────────────────────────────────────────────
Peak Athlete · Performance Lab v03 prototype
Request-Analysis modals — BuyAnalysisModal + UploadModal
v00.15 scope:
- BuyAnalysisModal is fully working: Stripe pay-links only,
no writes, no edge POSTs. Uses the exact translation keys
from the live dashboard (index.html v02.29) so copy stays
consistent across both surfaces.
- UploadModal is a structural skeleton: fields render but
the submit button is disabled with a "Wiring lands in
v00.16" hint. No r2-upload-url call, no race_requests
insert, no notify-analysis-request POST yet.
Both modals share a minimal Ink & Signal styled overlay so
they match the Deck without importing a third-party modal lib.
─────────────────────────────────────────────────────────── */
const { useEffect: useModalEffect, useState: useModalState } = React;
// ── i18n (lifted from live index.html, lines 7928-7941 EN +
// 8361-8370 ES) ──────────────────────────────────────────
// Phase 1 = English only per CLAUDE.md. Spanish map is kept here
// so Phase 4 i18n wiring can read from the same source of truth.
const REQ_I18N = {
en: {
modal_quota_title: 'Analysis Quota Reached',
modal_quota_desc: "You've used all your included analyses this month. Purchase additional analyses to continue.",
modal_buy_more: 'Get More Race Analyses',
modal_try_analysis: 'Try a Race Analysis',
modal_buy_single_price:'$9.99',
modal_buy_single_label:'1 Extra Analysis',
modal_buy_single_desc: 'Perfect for a single race',
modal_buy_bundle_price:'$34.99',
modal_buy_bundle_label:'4-Pack Bundle',
modal_buy_bundle_desc: 'Save $5 - great for meets!',
modal_best_value: 'Best Value',
modal_never_expire: 'Purchased analyses never expire',
modal_data_viewable: 'Data viewable for 2 weeks',
modal_maybe_later: 'Maybe Later',
// v00.16b: copy correction — Pro is 3 analyses/mo, not unlimited.
// Value prop = 3 monthly analyses + Pulse AI + full dashboard access.
modal_want_unlimited: 'Want 3 analyses every month plus full access?',
modal_subscribe_pro: 'Subscribe to Pro — $19.99/mo',
modal_buy_more_desc: 'Unlock additional video analyses to track your progress.',
modal_try_desc: 'Get professional video analysis of your race performance.',
},
es: {
modal_quota_title: 'Cuota de Análisis Alcanzada',
modal_quota_desc: 'Has utilizado todos tus análisis incluidos este mes. Compra análisis adicionales para continuar.',
modal_buy_more: 'Obtener Más Análisis de Carreras',
modal_try_analysis: 'Prueba un Análisis de Carrera',
modal_buy_single_price:'$9.99',
modal_buy_single_label:'1 Análisis Extra',
modal_buy_single_desc: 'Perfecto para una sola carrera',
modal_buy_bundle_price:'$34.99',
modal_buy_bundle_label:'Paquete de 4',
modal_buy_bundle_desc: 'Ahorra $5 - ideal para competencias',
modal_best_value: 'Mejor Valor',
modal_never_expire: 'Los análisis comprados nunca expiran',
modal_data_viewable: 'Datos visibles por 2 semanas',
modal_maybe_later: 'Quizás Después',
modal_want_unlimited: '¿Quieres 3 análisis cada mes y acceso completo?',
modal_subscribe_pro: 'Suscribirse a Pro — $19.99/mes',
modal_buy_more_desc: 'Desbloquea análisis de video adicionales para seguir tu progreso.',
modal_try_desc: 'Obtén análisis profesional en video de tu rendimiento en carreras.',
},
};
function t(key, locale) {
const map = REQ_I18N[locale || 'en'] || REQ_I18N.en;
return map[key] || REQ_I18N.en[key] || key;
}
// ── Shared overlay shell ─────────────────────────────────────
const ModalShell = ({ onClose, width, children }) => {
const isMobile = (window.useIsMobile || (() => false))();
// Esc-to-close + body scroll lock — lightweight UX parity with the
// live dashboard without pulling in a modal library.
useModalEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose?.(); };
window.addEventListener('keydown', onKey);
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
window.removeEventListener('keydown', onKey);
document.body.style.overflow = prev;
};
}, [onClose]);
return (
{desc}
);
const BuyAnalysisModal = ({
locale = 'en',
isPro = false,
quotaExceeded = false,
authUserId,
email,
onBeforeCheckout, // v00.16: called right before opening Stripe (arms return-poll)
onClose,
}) => {
const R = window.PA_REQUESTS;
if (!R) return null;
// Title + description logic mirrors live index.html:19471-19490.
// Pro quota-exceeded -> "Analysis Quota Reached" / "modal_buy_more" flavor
// Free / try -> "Try a Race Analysis" flavor
const title = isPro
? t('modal_buy_more', locale)
: t('modal_try_analysis', locale);
const desc = isPro
? (quotaExceeded ? t('modal_quota_desc', locale) : t('modal_buy_more_desc', locale))
: t('modal_try_desc', locale);
const singleUrl = R.buildStripeUrl(R.STRIPE_LINKS.extra, { authUserId, email });
const bundleUrl = R.buildStripeUrl(R.STRIPE_LINKS.bundle, { authUserId, email });
const proUrl = R.buildStripeUrl(R.STRIPE_LINKS.pro, { authUserId, email });
// Arm the Stripe-return poll BEFORE opening the tab so the
// visibilitychange listener has the flag set when the user comes
// back. Then close the modal so the Deck is what they return to.
const open = (url) => {
try { onBeforeCheckout?.(); } catch (_) {}
try { window.open(url, '_blank', 'noopener,noreferrer'); } catch (_) {}
onClose?.();
};
return (
{/* Quota-reached callout — only when a Pro user actually hit the wall */}
{isPro && quotaExceeded && (
{t('modal_quota_title', locale)}
)}
{/* Options */}
open(singleUrl)}
/>
{/* 4-pack: Pro only (intentional live rule — free users don't see bundle) */}
{isPro && (
open(bundleUrl)}
/>
)}