Možnost příplatků u Pizza day objednávek

client/src/components/modals/BankAccountModal.tsx

@@ -0,0 +1,35 @@
+import { useRef } from "react";
+import { Modal, Button } from "react-bootstrap"
+import { useBank } from "../../context/bank";
+
+type Props = {
+    isOpen: boolean,
+    onClose: () => void,
+    onSave: (bankAccountNumber?: string, bankAccountHolderName?: string) => void,
+}
+
+/** Modální dialog pro nastavení čísla účtu a jména majitele. */
+export default function BankAccountModal({ isOpen, onClose, onSave }: Props) {
+    const bank = useBank();
+    const bankAccountRef = useRef<HTMLInputElement>(null);
+    const nameRef = useRef<HTMLInputElement>(null);
+
+    return <Modal show={isOpen} onHide={onClose} size="lg">
+        <Modal.Header closeButton>
+            <Modal.Title>Bankovní účet</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            <p>Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.<br />Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.<br /><br />Číslo účtu není ukládáno na serveru, posílá se na něj pouze za účelem vygenerování QR kódů.</p>
+            Číslo účtu: <input className="mb-3" ref={bankAccountRef} type="text" placeholder="123456-1234567890/1234" defaultValue={bank?.bankAccount} /> <br />
+            Název příjemce (jméno majitele účtu): <input ref={nameRef} type="text" placeholder="Jan Novák" defaultValue={bank?.holderName} />
+        </Modal.Body>
+        <Modal.Footer>
+            <Button variant="secondary" onClick={onClose}>
+                Storno
+            </Button>
+            <Button variant="primary" onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value)}>
+                Uložit
+            </Button>
+        </Modal.Footer>
+    </Modal>
+}

client/src/components/modals/PizzaAdditionalFeeModal.tsx

@@ -0,0 +1,45 @@
+import { useRef } from "react";
+import { Modal, Button } from "react-bootstrap"
+
+type Props = {
+    customerName: string,
+    isOpen: boolean,
+    onClose: () => void,
+    onSave: (customer: string, name?: string, price?: number) => void,
+    initialValues?: { text?: string, price?: string },
+}
+
+/** Modální dialog pro nastavení příplatků za pizzu. */
+export default function PizzaAdditionalFeeModal({ customerName, isOpen, onClose, onSave, initialValues }: Props) {
+    const textRef = useRef<HTMLInputElement>(null);
+    const priceRef = useRef<HTMLInputElement>(null);
+
+    const doSubmit = () => {
+        onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value || "0"));
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value || "0"));
+        }
+    }
+
+    return <Modal show={isOpen} onHide={onClose} size="lg">
+        <Modal.Header closeButton>
+            <Modal.Title>Příplatky za objednávku pro {customerName}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            Popis: <input className="mb-3" ref={textRef} type="text" placeholder="např. kuřecí maso" defaultValue={initialValues?.text} onKeyDown={handleKeyDown} /> <br />
+            Cena v Kč: <input ref={priceRef} type="number" placeholder="0" defaultValue={initialValues?.price} onKeyDown={handleKeyDown} /> <br />
+            <div className="mt-3" style={{ fontSize: 'small' }}>Je možné zadávat i záporné částky (např. v případě slev)</div>
+        </Modal.Body>
+        <Modal.Footer>
+            <Button variant="secondary" onClick={onClose}>
+                Storno
+            </Button>
+            <Button variant="primary" onClick={doSubmit}>
+                Uložit
+            </Button>
+        </Modal.Footer>
+    </Modal>
+}