no-hearts screen: live countdown, filling heart, auto-continue; refunded/canceled invoices

- The wait screen counts down to the next heart second by second, fills the first heart as time passes, shows when all five are back, and asks the server when the time comes; 'continue' reloads the quiz. Packs and 'ask Pi meanwhile' (asking costs no hearts) are offered as ways on. - The server now also refuses to finish a lesson/island without hearts and answers (403 no_hearts); the quiz shows the same screen then. - Invoices know the two admin-set statuses, canceled and refunded. - Account deletion waits for all six digits of the SMS code. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-02 22:42:14 +03:30
parent befaaeb7bb
commit 33f5f8d009
5 changed files with 245 additions and 28 deletions
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -324,7 +324,8 @@ export interface Ticket {
 export interface Invoice {
  orderId: string;
  invoiceNumber: string;
-  status: 'pending' | 'paid' | 'failed';
+  /** «canceled» و «refunded» را فقط ادمین می‌گذارد (لغو و بازپرداخت، از ۱۴۰۵-۰۷). */
+  status: 'pending' | 'paid' | 'failed' | 'canceled' | 'refunded';
  provider: 'gateway' | 'bazaar' | string;
  planTitle: string;
  /** قیمتِ پایه پیش از تخفیف؛ null برای سفارش‌های قدیمی‌تر از ثبتِ فاکتور. */
--- a/src/components/NoHeartsScreen.tsx
+++ b/src/components/NoHeartsScreen.tsx
@@ -0,0 +1,213 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'motion/react';
+import { Brain, Heart, HeartCrack, Infinity as InfinityIcon, ShoppingBag, X } from 'lucide-react';
+import { api } from '@/api';
+import { useAppData } from '@/state/AppData';
+import { useNav } from '@/nav/Navigator';
+import { SeyarMascot } from '@/mascots/SeyarMascot';
+import { PrimaryButton, Screen } from '@/components/ui';
+import { toFa } from '@/lib/format';
+
+/**
+ * «قلب‌هات تموم شد»: با قلبِ صفر سرور هیچ جوابی نمی‌پذیرد (۴۰۳ با code=no_hearts) و پایانِ درس یا
+ * جزیره را هم بی‌جواب نمی‌پذیرد. این صفحه شمارشِ معکوسِ قلبِ بعدی را زنده نشان می‌دهد و وقتی رسید،
+ * خودش از سرور می‌پرسد و دکمه‌ی «ادامه بده» را می‌آورد.
+ */
+
+/** همان HEART_REFILL_INTERVALِ سرور (progress/models.py)؛ فقط برای پرشدنِ نوار و قلبِ اول. */
+const REFILL_MS = 5 * 60 * 60 * 1000;
+const MAX_HEARTS = 5;
+
+function useNow(): number {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, []);
+  return now;
+}
+
+/** «۴:۰۷:۳۲» */
+function clock(ms: number): string {
+  const s = Math.max(0, Math.ceil(ms / 1000));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return toFa(`${h}:${pad(m)}:${pad(s % 60)}`);
+}
+
+/** «ساعتِ ۱۸:۳۰ امروز» / «… فردا» / «… شنبه» */
+function whenLabel(iso: string, now: number): string {
+  const at = new Date(iso);
+  const time = new Intl.DateTimeFormat('fa-IR', { hour: '2-digit', minute: '2-digit', hour12: false }).format(at);
+  const dayOf = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  const days = Math.round((dayOf(at) - dayOf(new Date(now))) / 86_400_000);
+  const day = days <= 0 ? 'امروز' : days === 1 ? 'فردا' : new Intl.DateTimeFormat('fa-IR', { weekday: 'long' }).format(at);
+  return `ساعتِ ${time} ${day}`;
+}
+
+export function NoHeartsScreen({
+  nextRefillAt,
+  fullRefillAt,
+  onRefilled,
+}: {
+  nextRefillAt: string | null;
+  fullRefillAt: string | null;
+  /** قلب برگشت و کاربر «ادامه بده» زد. */
+  onRefilled: () => void;
+}) {
+  const nav = useNav();
+  const { companion } = useAppData();
+  const now = useNow();
+  const [next, setNext] = useState(nextRefillAt);
+  const [full, setFull] = useState(fullRefillAt);
+  const [back, setBack] = useState(false);
+
+  const left = next ? Date.parse(next) - now : null;
+  const progress = left === null ? 0 : Math.min(1, Math.max(0, 1 - left / REFILL_MS));
+  const due = left !== null && left <= 0;
+
+  // زمانِ قلبِ بعدی رسید: از سرور می‌پرسیم (ساعتِ گوشی ممکن است جلو باشد).
+  useEffect(() => {
+    if (!due || back) return;
+    let alive = true;
+    const check = () =>
+      api.hearts().then((h) => {
+        if (!alive) return;
+        if (h.isUnlimited || h.currentHearts > 0) setBack(true);
+        else {
+          setNext(h.nextRefillAt);
+          setFull(h.fullRefillAt);
+        }
+      }).catch(() => undefined);
+    void check();
+    return () => {
+      alive = false;
+    };
+  }, [due, back]);
+
+  return (
+    <Screen className="bg-gradient-to-b from-[#FFF1EE] via-page to-page">
+      <div className="flex justify-start px-5 pt-safe">
+        <button type="button" aria-label="برگشت" onClick={nav.back} className="mt-5 flex h-9 w-9 items-center justify-center rounded-full bg-white shadow-sm">
+          <X size={16} className="text-coral" />
+        </button>
+      </div>
+
+      <div className="flex flex-1 flex-col items-center gap-5 overflow-y-auto px-6 pb-8 pt-2 text-center [&>*]:shrink-0">
+        <motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="relative">
+          <div className="rounded-full bg-white p-4 shadow-[0_8px_30px_rgba(237,105,86,0.18)]">
+            <SeyarMascot char={companion} mood={back ? 'excited' : 'depressed'} size={104} />
+          </div>
+          <motion.span
+            className="absolute -left-2 -top-1 flex h-11 w-11 items-center justify-center rounded-full bg-white shadow"
+            animate={back ? { scale: [1, 1.25, 1] } : { rotate: [0, -8, 8, 0] }}
+            transition={{ duration: back ? 0.6 : 2.4, repeat: back ? 0 : Infinity }}
+          >
+            {back ? <Heart size={24} className="text-coral" fill="#ED6956" /> : <HeartCrack size={24} className="text-coral" />}
+          </motion.span>
+        </motion.div>
+
+        <div>
+          <h1 className="text-2xl font-black text-ink">{back ? 'یه قلب برگشت!' : 'قلب‌هات تموم شد'}</h1>
+          <p className="mt-1.5 text-sm leading-7 text-muted">
+            {back ? 'بریم ادامه بدیم؛ این بار با دقتِ بیشتر 💪' : 'یه کم استراحت کن؛ مغزت هم استراحت لازم داره.'}
+          </p>
+        </div>
+
+        <HeartSlots progress={back ? 1 : progress} />
+
+        {back ? (
+          <div className="w-full">
+            <PrimaryButton onClick={onRefilled}>ادامه بده</PrimaryButton>
+          </div>
+        ) : (
+          <div className="w-full rounded-3xl border border-line bg-white p-5 shadow-sm">
+            <div className="text-xs font-bold text-muted">قلبِ بعدی</div>
+            {left !== null ? (
+              <>
+                <div dir="ltr" className="mt-1 text-4xl font-black tracking-wide text-coral tabular-nums">{clock(left)}</div>
+                <div className="mt-4 h-2.5 overflow-hidden rounded-full bg-soft">
+                  <motion.div
+                    className="h-full rounded-full bg-gradient-to-l from-coral to-[#FF9A7A]"
+                    animate={{ width: `${Math.max(progress * 100, 3)}%` }}
+                    transition={{ ease: 'linear', duration: 1 }}
+                  />
+                </div>
+                {full && (
+                  <p className="mt-3 text-xs leading-6 text-muted">
+                    همه‌ی {toFa(MAX_HEARTS)} قلب: <b className="text-body">{whenLabel(full, now)}</b>
+                  </p>
+                )}
+              </>
+            ) : (
+              <p className="mt-2 text-sm text-body">کمی صبر کن تا قلب‌هات دوباره پر بشن.</p>
+            )}
+          </div>
+        )}
+
+        {!back && (
+          <>
+            <button
+              type="button"
+              onClick={() => nav.switchTab('subscription')}
+              className="relative w-full overflow-hidden rounded-3xl bg-gradient-to-l from-coral to-orange p-5 text-right text-white shadow-lg shadow-coral/30 active:scale-[0.99]"
+            >
+              <span className="absolute -left-6 -top-6 h-24 w-24 rounded-full bg-white/10" />
+              <span className="flex items-center gap-2 text-base font-black">
+                <Heart size={18} fill="#fff" /> <InfinityIcon size={18} /> نمی‌خوای منتظر بمونی؟
+              </span>
+              <span className="mt-1 block text-xs leading-6 text-white/90">
+                هر بسته‌ی سوال چند روز قلبِ نامحدود هدیه داره؛ هر چقدر بخوای تمرین کن.
+              </span>
+              <span className="mt-3 inline-flex items-center gap-1.5 rounded-2xl bg-white px-4 py-2 text-sm font-black text-coral">
+                <ShoppingBag size={15} /> دیدنِ بسته‌ها
+              </span>
+            </button>
+
+            <button
+              type="button"
+              onClick={() => nav.switchTab('ask')}
+              className="flex w-full items-center gap-3 rounded-3xl border border-line bg-white p-4 text-right active:scale-[0.99]"
+            >
+              <span className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-2xl bg-[#F5F1FF] text-violet">
+                <Brain size={20} />
+              </span>
+              <span className="flex-1">
+                <span className="block text-sm font-black text-ink">تا اون موقع از «پی» بپرس</span>
+                <span className="block text-xs leading-6 text-muted">جایی که گیر کردی رو با هم مرور کنیم؛ قلب خرج نمی‌کنه.</span>
+              </span>
+            </button>
+
+            <button type="button" onClick={nav.back} className="py-1 text-sm font-bold text-muted">
+              باشه، بعداً
+            </button>
+          </>
+        )}
+      </div>
+    </Screen>
+  );
+}
+
+/** پنج جای قلب؛ اولی همراهِ زمان از پایین پر می‌شود. */
+function HeartSlots({ progress }: { progress: number }) {
+  return (
+    <div className="flex items-center gap-2.5" aria-label={`قلبِ بعدی ${toFa(Math.round(progress * 100))} درصد پر شده`}>
+      {Array.from({ length: MAX_HEARTS }, (_, i) => (
+        <span key={i} className="relative h-8 w-8">
+          <Heart size={32} className="absolute inset-0 text-[#F2DCD8]" fill="#FBEDEA" />
+          {i === 0 && (
+            <motion.span
+              className="absolute inset-0 overflow-hidden"
+              style={{ clipPath: `inset(${(1 - progress) * 100}% 0 0 0)` }}
+              animate={progress < 1 ? { opacity: [0.75, 1, 0.75] } : { scale: [1, 1.3, 1] }}
+              transition={{ duration: progress < 1 ? 1.6 : 0.5, repeat: progress < 1 ? Infinity : 0 }}
+            >
+              <Heart size={32} className="text-coral" fill="#ED6956" />
+            </motion.span>
+          )}
+        </span>
+      ))}
+    </div>
+  );
+}
--- a/src/screens/InvoicesScreen.tsx
+++ b/src/screens/InvoicesScreen.tsx
@@ -17,6 +17,8 @@ const STATUS: Record<Invoice['status'], { label: string; className: string }> =
  paid: { label: 'پرداخت‌شده', className: 'bg-[#EAF8F0] text-[#2E7D5B]' },
  pending: { label: 'در انتظارِ پرداخت', className: 'bg-[#FFF8E1] text-[#8A6100]' },
  failed: { label: 'ناموفق', className: 'bg-soft text-muted' },
+  canceled: { label: 'لغوشده', className: 'bg-soft text-muted' },
+  refunded: { label: 'بازپرداخت‌شده', className: 'bg-[#EEF1FF] text-indigo' },
 };

 const PROVIDER: Record<string, string> = { gateway: 'درگاهِ زرین‌پال', bazaar: 'کافه‌بازار' };
@@ -127,7 +129,7 @@ function InvoiceSheet({ invoice, onClose }: { invoice: Invoice | null; onClose:
              </span>
            </button>
          ) : (
-            invoice.status !== 'paid' && (
+            (invoice.status === 'pending' || invoice.status === 'failed') && (
              <p className="text-xs leading-6 text-muted">
                اگه پولی از حسابت کم شده ولی این خرید «پرداخت‌شده» نیست، شماره‌ی فاکتور رو به پشتیبانی بده.
              </p>
--- a/src/screens/ProfileScreen.tsx
+++ b/src/screens/ProfileScreen.tsx
@@ -381,7 +381,7 @@ function DeleteAccountSheet({ open, onClose, onSignedOut }: { open: boolean; onC
          <PrimaryButton
            color="#ef4444"
            loading={busy}
-            disabled={needsCode ? value.length < 4 : value.trim() !== 'حذف'}
+            disabled={needsCode ? value.length < 6 : value.trim() !== 'حذف'}
            onClick={() => void remove()}
          >
            حذفِ همیشگی
--- a/src/screens/QuizScreen.tsx
+++ b/src/screens/QuizScreen.tsx
@@ -9,11 +9,12 @@ import { useNav } from '@/nav/Navigator';
 import { newIdempotencyKey } from '@/api/http';
 import { SeyarMascot } from '@/mascots/SeyarMascot';
 import type { SeyarMood } from '@/mascots/seyar';
+import { NoHeartsScreen } from '@/components/NoHeartsScreen';
 import { Sheet } from '@/components/Sheet';
 import { useToast } from '@/components/Toast';
 import { ErrorState, InlineError, LoadingState, PrimaryButton, SecondaryButton, Screen } from '@/components/ui';
 import { friendlyError } from '@/lib/errors';
-import { timeUntil, toFa } from '@/lib/format';
+import { toFa } from '@/lib/format';
 import { MathText } from '@/lib/MathText';
 import { sounds } from '@/lib/sound';

@@ -21,7 +22,7 @@ type Phase =
  | { kind: 'loading' }
  | { kind: 'error'; error: unknown }
  | { kind: 'playing' }
-  | { kind: 'noHearts'; nextRefillAt: string | null }
+  | { kind: 'noHearts'; nextRefillAt: string | null; fullRefillAt: string | null }
  | { kind: 'finishing' }
  | { kind: 'finishError'; error: unknown }
  | { kind: 'result'; result: QuizResult };
@@ -92,7 +93,7 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
        setCorrectCount(0);
        answerKeys.current.clear();
        completeKey.current = newIdempotencyKey();
-        if (h && !h.isUnlimited && h.currentHearts <= 0) setPhase({ kind: 'noHearts', nextRefillAt: h.nextRefillAt });
+        if (h && !h.isUnlimited && h.currentHearts <= 0) setPhase({ kind: 'noHearts', nextRefillAt: h.nextRefillAt, fullRefillAt: h.fullRefillAt });
        else setPhase({ kind: 'playing' });
      })
      .catch((error: unknown) => alive && setPhase({ kind: 'error', error }));
@@ -123,7 +124,11 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
    } catch (err) {
      setSelected(null);
      if (err instanceof ApiError && err.code === 'no_hearts') {
-        setPhase({ kind: 'noHearts', nextRefillAt: (err.body.nextRefillAt as string | null) ?? null });
+        setPhase({
+          kind: 'noHearts',
+          nextRefillAt: (err.body.nextRefillAt as string | null) ?? null,
+          fullRefillAt: (err.body.fullRefillAt as string | null) ?? null,
+        });
      } else {
        toast(friendlyError(err, 'جوابت ثبت نشد، دوباره بزن'), 'error');
      }
@@ -135,7 +140,11 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
  async function next() {
    if (outOfHearts && !isLast) {
      const h = await api.hearts().catch(() => null);
-      setPhase({ kind: 'noHearts', nextRefillAt: h?.nextRefillAt ?? hearts?.nextRefillAt ?? null });
+      setPhase({
+        kind: 'noHearts',
+        nextRefillAt: h?.nextRefillAt ?? hearts?.nextRefillAt ?? null,
+        fullRefillAt: h?.fullRefillAt ?? hearts?.fullRefillAt ?? null,
+      });
      return;
    }
    if (!isLast) {
@@ -160,6 +169,15 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
      void refreshHome();
      void refreshSummary();
    } catch (error) {
+      // سرور پایانِ درس/جزیره را بی‌قلب و بی‌جواب نمی‌پذیرد (۱۴۰۵-۰۷)؛ همان صفحه‌ی انتظار.
+      if (error instanceof ApiError && error.code === 'no_hearts') {
+        setPhase({
+          kind: 'noHearts',
+          nextRefillAt: (error.body.nextRefillAt as string | null) ?? null,
+          fullRefillAt: (error.body.fullRefillAt as string | null) ?? null,
+        });
+        return;
+      }
      setPhase({ kind: 'finishError', error });
    }
  }
@@ -185,7 +203,9 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
      </Screen>
    );
  }
-  if (phase.kind === 'noHearts') return <NoHearts nextRefillAt={phase.nextRefillAt} />;
+  if (phase.kind === 'noHearts') {
+    return <NoHeartsScreen nextRefillAt={phase.nextRefillAt} fullRefillAt={phase.fullRefillAt} onRefilled={() => setReload((n) => n + 1)} />;
+  }
  if (phase.kind === 'result') return <Result result={phase.result} total={questions.length} correct={correctCount} lessonId={lessonId} nodeId={ref?.node.id ?? nodeId} color={color} />;
  if (phase.kind === 'finishing' || phase.kind === 'finishError') {
    return (
@@ -354,25 +374,6 @@ function HeartsRow({ hearts }: { hearts: Hearts | null }) {
  );
 }

-function NoHearts({ nextRefillAt }: { nextRefillAt: string | null }) {
-  const nav = useNav();
-  return (
-    <Screen>
-      <div className="flex flex-1 flex-col items-center justify-center gap-4 px-8 text-center">
-        <SeyarMascot char="pi" mood="depressed" size={110} />
-        <h2 className="text-xl font-black text-ink">قلب‌هات تموم شد</h2>
-        <p className="text-sm leading-7 text-muted">
-          {nextRefillAt ? <>قلبِ بعدی تا <b className="text-coral">{timeUntil(nextRefillAt)}</b> دیگه پر می‌شه.</> : 'کمی صبر کن تا قلب‌هات دوباره پر بشن.'}
-          <br />
-          هر بسته‌ی سوال چند روز قلبِ نامحدود هم هدیه داره.
-        </p>
-        <PrimaryButton onClick={() => nav.switchTab('subscription')}>دیدنِ بسته‌ها</PrimaryButton>
-        <SecondaryButton onClick={nav.back}>باشه، بعداً</SecondaryButton>
-      </div>
-    </Screen>
-  );
-}
-
 function Result({
  result, total, correct, lessonId, nodeId, color,
 }: { result: QuizResult; total: number; correct: number; lessonId?: number; nodeId?: string; color: string }) {