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

client/src/components/Header.tsx

@@ -1,6 +1,7 @@
-import React, { useRef, useState } from "react";
-import { Navbar, Nav, NavDropdown, Modal, Button } from "react-bootstrap";
+import { useState } from "react";
+import { Navbar, Nav, NavDropdown } from "react-bootstrap";
 import { useAuth } from "../context/auth";
+import BankAccountModal from "./modals/BankAccountModal";
 import { useBank } from "../context/bank";
 
 
@@ -8,8 +9,6 @@ export default function Header() {
     const auth = useAuth();
     const bank = useBank();
     const [modalOpen, setModalOpen] = useState<boolean>(false);
-    const bankAccountRef = useRef<HTMLInputElement>(null);
-    const nameRef = useRef<HTMLInputElement>(null);
 
     const openBankSettings = () => {
         setModalOpen(true);
@@ -29,14 +28,14 @@ export default function Header() {
         return n !== Infinity && String(n) === str && n >= 0;
     }
 
-    const save = () => {
-        if (bankAccountRef.current?.value) {
+    const save = (bankAccountNumber?: string, bankAccountHolderName?: string) => {
+        if (bankAccountNumber) {
             try {
                 // Validace kódu banky
-                if (bankAccountRef.current?.value.indexOf('/') < 0) {
+                if (bankAccountNumber.indexOf('/') < 0) {
                     throw Error("Číslo účtu neobsahuje lomítko/kód banky")
                 }
-                const split = bankAccountRef.current?.value.split("/");
+                const split = bankAccountNumber.split("/");
                 if (split[1].length !== 4) {
                     throw Error("Kód banky musí být 4 číslice")
                 }
@@ -71,8 +70,8 @@ export default function Header() {
                 return
             }
         }
-        bank?.setBankAccountNumber(bankAccountRef.current?.value);
-        bank?.setBankAccountHolderName(nameRef.current?.value);
+        bank?.setBankAccountNumber(bankAccountNumber);
+        bank?.setBankAccountHolderName(bankAccountHolderName);
         closeModal();
     }
 
@@ -87,23 +86,6 @@ export default function Header() {
                 </NavDropdown>
             </Nav>
         </Navbar.Collapse>
-        <Modal show={modalOpen} onHide={closeModal} 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={closeModal}>
-                    Storno
-                </Button>
-                <Button variant="primary" onClick={save}>
-                    Uložit
-                </Button>
-            </Modal.Footer>
-        </Modal>
+        <BankAccountModal isOpen={modalOpen} onClose={closeModal} onSave={save} />
     </Navbar>
 }