87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
/**
|
|
* UpgradeWall — intercepts Pro features for Free users
|
|
*/
|
|
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Crown, Sparkles, X } from 'lucide-react'
|
|
import { proFeatureLabel, useEntitlementStore, type ProFeature } from '../../stores/entitlementStore'
|
|
import AppOverlay from '../common/AppOverlay'
|
|
|
|
export default function UpgradeWall() {
|
|
const { t } = useTranslation('common')
|
|
const wall = useEntitlementStore((s) => s.wall)
|
|
const closeWall = useEntitlementStore((s) => s.closeWall)
|
|
const openUpgradeTab = useEntitlementStore((s) => s.openUpgradeTab)
|
|
|
|
if (!wall.open) return null
|
|
|
|
const feature = wall.feature as ProFeature | undefined
|
|
const label = feature ? proFeatureLabel(feature) : null
|
|
const comingSoon = wall.comingSoon
|
|
|
|
return (
|
|
<AppOverlay
|
|
open
|
|
className="z-[120] flex items-center justify-center bg-black/65 p-4 backdrop-blur-sm"
|
|
onMouseDown={(event) => {
|
|
if (event.target === event.currentTarget) closeWall()
|
|
}}
|
|
>
|
|
<div
|
|
className="border-dark-600/80 relative w-full max-w-md overflow-hidden rounded-2xl border bg-dark-800 shadow-2xl"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="upgrade-wall-title"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={closeWall}
|
|
className="absolute right-3 top-3 rounded-lg p-1.5 text-txt-muted hover:bg-dark-700 hover:text-content-primary"
|
|
aria-label={t('action.close')}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
|
|
<div className="border-dark-700/50 border-b bg-gradient-to-br from-accent-blue/15 to-transparent px-6 pb-5 pt-6">
|
|
<div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-accent-blue/20 text-accent-blue">
|
|
<Crown className="h-5 w-5" />
|
|
</div>
|
|
<h2 id="upgrade-wall-title" className="text-base font-semibold text-content-primary">
|
|
{comingSoon ? t('pro.wallUnlockComingSoon') : t('pro.wallUnlock')}
|
|
</h2>
|
|
<p className="mt-1.5 text-sm leading-relaxed text-txt-muted">
|
|
{wall.message ||
|
|
(comingSoon
|
|
? label
|
|
? t('pro.wallMessageComingSoonFeature', { feature: label })
|
|
: t('pro.wallMessageComingSoon')
|
|
: label
|
|
? t('pro.wallMessageFeature', { feature: label })
|
|
: t('pro.wallMessageDefault'))}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-2 px-6 py-4">
|
|
<button
|
|
type="button"
|
|
onClick={closeWall}
|
|
className="flex-1 rounded-lg border border-dark-600 px-3 py-2.5 text-sm text-content-secondary transition-colors hover:bg-dark-700"
|
|
>
|
|
{t('pro.later')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => openUpgradeTab(feature, comingSoon)}
|
|
className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-accent-blue px-3 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-600"
|
|
>
|
|
<Sparkles className="h-3.5 w-3.5" />
|
|
{t('pro.viewPro')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</AppOverlay>
|
|
)
|
|
}
|