Lars
526da02512
Replace subscription selection link with email contact for now. Future: Central subscription system on jinkendo.de for all apps. Button text: - "Abo wählen" → "Abo anfragen" - "Jetzt upgraden" → "Kontakt aufnehmen" Opens mailto:mitai@jinkendo.de with pre-filled subject and body. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
88 lines
2.5 KiB
JavaScript
88 lines
2.5 KiB
JavaScript
import { useEffect, useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
export default function TrialBanner({ profile }) {
|
|
const [daysLeft, setDaysLeft] = useState(null)
|
|
|
|
useEffect(() => {
|
|
if (!profile?.trial_ends_at) {
|
|
setDaysLeft(null)
|
|
return
|
|
}
|
|
|
|
const trialEnd = new Date(profile.trial_ends_at)
|
|
const now = new Date()
|
|
const diff = trialEnd - now
|
|
const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
|
|
|
|
setDaysLeft(days)
|
|
}, [profile])
|
|
|
|
// No trial or trial ended
|
|
if (daysLeft === null || daysLeft <= 0) return null
|
|
|
|
// Determine severity
|
|
const isUrgent = daysLeft <= 3
|
|
const isWarning = daysLeft <= 7
|
|
|
|
const bgColor = isUrgent ? '#FCEBEB' : isWarning ? '#FFF4E6' : 'var(--accent-light)'
|
|
const borderColor = isUrgent ? '#D85A30' : isWarning ? '#F59E0B' : 'var(--accent)'
|
|
const textColor = isUrgent ? '#D85A30' : isWarning ? '#D97706' : 'var(--accent-dark)'
|
|
|
|
return (
|
|
<div style={{
|
|
background: bgColor,
|
|
border: `2px solid ${borderColor}`,
|
|
borderRadius: 12,
|
|
padding: '16px 20px',
|
|
marginBottom: 20,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
flexWrap: 'wrap',
|
|
gap: 12
|
|
}}>
|
|
<div style={{flex: 1, minWidth: 200}}>
|
|
<div style={{
|
|
fontWeight: 700,
|
|
fontSize: 15,
|
|
color: textColor,
|
|
marginBottom: 4
|
|
}}>
|
|
{isUrgent && '⚠️ '}
|
|
Deine Trial endet {daysLeft === 1 ? 'morgen' : `in ${daysLeft} Tagen`}
|
|
</div>
|
|
<div style={{
|
|
fontSize: 13,
|
|
color: 'var(--text2)',
|
|
lineHeight: 1.4
|
|
}}>
|
|
{isUrgent
|
|
? 'Upgrade jetzt um weiterhin alle Features nutzen zu können'
|
|
: 'Wähle ein Abo um unbegrenzt Zugriff zu erhalten'
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<a
|
|
href="mailto:mitai@jinkendo.de?subject=Abo-Anfrage%20für%20Mitai%20Jinkendo&body=Hallo,%0A%0Aich%20möchte%20gerne%20ein%20Abo%20für%20Mitai%20Jinkendo%20abschließen.%0A%0AMein%20Profil:%20"
|
|
style={{
|
|
padding: '10px 20px',
|
|
borderRadius: 8,
|
|
background: isUrgent ? '#D85A30' : 'var(--accent)',
|
|
color: 'white',
|
|
fontWeight: 600,
|
|
fontSize: 14,
|
|
textDecoration: 'none',
|
|
whiteSpace: 'nowrap',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
display: 'inline-block'
|
|
}}
|
|
>
|
|
{isUrgent ? 'Kontakt aufnehmen' : 'Abo anfragen'}
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|