fix: opravy generování QR kódů, zobrazení také na stránce objednání

2026-06-05 10:37:58 +02:00
parent 318d188495
commit c2bbf7ea60
8 changed files with 149 additions and 63 deletions
@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Button } from 'react-bootstrap';
+import { PendingQr, dismissQr } from '../../../types';
+import { formatDateString } from '../Utils';
+import ConfirmModal from './modals/ConfirmModal';
+
+type Props = {
+    pendingQrs?: PendingQr[];
+    login?: string;
+    // Zavolá se po úspěšném potvrzení platby, aby si rodič mohl znovu načíst data
+    onDismissed?: () => void | Promise<void>;
+};
+
+// Sekce "Nevyřízené platby" – zobrazí QR kódy neuhrazených plateb přihlášeného uživatele
+// včetně tlačítka "Zaplatil jsem" a potvrzovacího dialogu. Sdíleno hlavní stránkou i stránkou objednávek.
+export default function PendingPayments({ pendingQrs, login, onDismissed }: Readonly<Props>) {
+    const [dismissQrId, setDismissQrId] = useState<string | null>(null);
+
+    if (!pendingQrs || pendingQrs.length === 0) return null;
+
+    return (
+        <>
+            <div className='pizza-section fade-in mt-4'>
+                <h3>Nevyřízené platby</h3>
+                <p>Máte neuhrazené platby.</p>
+                {pendingQrs.map(qr => (
+                    <div key={qr.id} className='qr-code mb-3'>
+                        <p>
+                            <strong>{formatDateString(qr.date)}</strong> — {qr.creator} ({qr.totalPrice / 100} Kč)
+                            {qr.purpose && <><br /><span className="text-muted">{qr.purpose}</span></>}
+                        </p>
+                        <img src={`/api/qr?login=${login}&id=${qr.id}`} alt='QR kód' />
+                        <div className='mt-2'>
+                            <Button variant="success" onClick={() => setDismissQrId(qr.id)}>
+                                Zaplatil jsem
+                            </Button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <ConfirmModal
+                isOpen={dismissQrId !== null}
+                title="Potvrzení platby"
+                message="Opravdu jste zaplatili? QR kód bude odstraněn."
+                confirmLabel="Zaplatil jsem"
+                confirmVariant="success"
+                onClose={() => setDismissQrId(null)}
+                onConfirm={async () => {
+                    if (!dismissQrId) return;
+                    const id = dismissQrId;
+                    setDismissQrId(null);
+                    await dismissQr({ body: { id } });
+                    await onDismissed?.();
+                }}
+            />
+        </>
+    );
+}