forked from Tadrisino/MathApp_frontend
Subscription store, paywall on locked units, profile subscription bar, Tadrisino branding
- Store opens with two choices (subscription / question packs); 3- and 6-month cards show per-month price and saving. - Units that need a subscription show a crown badge and open the store; a 402 from the quiz goes there too. «ادامه بده» skips locked units. - Profile: subscription card with an animated days-left bar (planDurationDays). - BrandMark (SVG) on splash, home header and footer; copyright footer; floating math glyphs on splash. CSS transform/opacity only; honours reduced motion. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
import { Crown, Sparkles } from 'lucide-react';
|
||||
import type { HomeNode } from '@/api';
|
||||
import { useAppData } from '@/state/AppData';
|
||||
import { findUnit, unitColor, unitProgress } from '@/state/curriculum';
|
||||
@@ -14,6 +14,7 @@ import { MathText } from '@/lib/MathText';
|
||||
export function UnitScreen({ unitId }: { unitId: string }) {
|
||||
const { home, homeError, refreshHome, companion } = useAppData();
|
||||
const nav = useNav();
|
||||
const paywall = () => nav.push({ name: 'subscription', view: 'subscription' });
|
||||
const [openNode, setOpenNode] = useState<HomeNode | null>(null);
|
||||
const found = findUnit(home, unitId);
|
||||
|
||||
@@ -58,9 +59,14 @@ export function UnitScreen({ unitId }: { unitId: string }) {
|
||||
nodes={unit.nodes}
|
||||
color={color}
|
||||
currentId={current?.id ?? null}
|
||||
onOpen={setOpenNode}
|
||||
onStart={(node) => nav.push({ name: 'quiz', nodeId: node.id })}
|
||||
onOpen={(node) => (unit.requiresSubscription ? paywall() : setOpenNode(node))}
|
||||
onStart={(node) => (unit.requiresSubscription ? paywall() : nav.push({ name: 'quiz', nodeId: node.id }))}
|
||||
/>
|
||||
{unit.requiresSubscription && (
|
||||
<button type="button" onClick={paywall} className="mx-auto mt-6 flex items-center gap-2 rounded-2xl bg-orange px-5 py-3 text-sm font-black text-white shadow-lg shadow-orange/30">
|
||||
<Crown size={16} /> این فصل با اشتراک باز میشه
|
||||
</button>
|
||||
)}
|
||||
<div className="mt-6 flex flex-col items-center">
|
||||
<span className="mb-1 text-[11px] font-bold text-muted">{progress.done === progress.total ? 'این فصل تموم شد!' : 'ادامه بده!'}</span>
|
||||
<span className="flex h-11 w-11 items-center justify-center rounded-2xl" style={{ backgroundColor: `${color}18` }}>
|
||||
|
||||
Reference in New Issue
Block a user