Příprava ukládání bankovního účtu

client/src/components/Header.tsx

@@ -1,9 +1,30 @@
-import React from "react";
-import { Navbar, Nav, NavDropdown } from "react-bootstrap";
+import React, { useRef, useState } from "react";
+import { Navbar, Nav, NavDropdown, Modal, Button } from "react-bootstrap";
 import { useAuth } from "../context/auth";
+import { useBank } from "../context/bank";
+
 
 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);
+    }
+
+    const closeModal = () => {
+        setModalOpen(false);
+    }
+
+    const save = () => {
+        // TODO validace na modulo 11
+        bank?.setBankAccountNumber(bankAccountRef.current?.value);
+        bank?.setBankAccountHolderName(nameRef.current?.value);
+        closeModal();
+    }
 
     return <Navbar variant='dark' expand="lg">
         <Navbar.Brand>Luncher</Navbar.Brand>
@@ -11,9 +32,28 @@ export default function Header() {
         <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="nav">
                 <NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown">
+                    <NavDropdown.Item onClick={openBankSettings}>Nastavit číslo účtu</NavDropdown.Item>
                     <NavDropdown.Item onClick={auth?.clearLogin}>Odhlásit se</NavDropdown.Item>
                 </NavDropdown>
             </Nav>
         </Navbar.Collapse>
+        <Modal show={modalOpen} onHide={closeModal}>
+            <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 />Poznámka: Číslo účtu není aktuálně nijak validováno. Ověřte si jeho správnost.</p>
+                Číslo účtu: <input ref={bankAccountRef} type="text" placeholder="123456-1234567890/1234" /> <br />
+                Název příjemce (nepovinné): <input ref={nameRef} type="text" placeholder="Jan Novák" />
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={closeModal}>
+                    Storno
+                </Button>
+                <Button variant="primary" onClick={save}>
+                    Uložit
+                </Button>
+            </Modal.Footer>
+        </Modal>
     </Navbar>
 }

client/src/context/bank.tsx

@@ -0,0 +1,74 @@
+import React, { ReactNode, useContext, useState } from "react"
+import { useEffect } from "react"
+
+const BANK_ACCOUNT_NUMBER_KEY = 'bank_account_number';
+const BANK_ACCOUNT_HOLDER_KEY = 'bank_account_holder_name';
+
+export type BankContextProps = {
+  bankAccount?: string,
+  holderName?: string,
+  setBankAccountNumber: (accountNumber?: string) => void,
+  setBankAccountHolderName: (holderName?: string) => void,
+}
+
+type ContextProps = {
+  children: ReactNode
+}
+
+const bankContext = React.createContext<BankContextProps | null>(null);
+
+export function ProvideBank(props: ContextProps) {
+  const bank = useProvideBank();
+  return <bankContext.Provider value={bank}>{props.children}</bankContext.Provider>
+}
+
+export const useBank = () => {
+  return useContext(bankContext);
+}
+
+function useProvideBank(): BankContextProps {
+  const [bankAccount, setBankAccount] = useState<string | undefined>();
+  const [holderName, setHolderName] = useState<string | undefined>();
+
+  useEffect(() => {
+    const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY);
+    if (accountNumber) {
+      setBankAccount(accountNumber);
+    }
+    const holderName = localStorage.getItem(BANK_ACCOUNT_HOLDER_KEY);
+    if (holderName) {
+      setHolderName(holderName);
+    }
+  }, [])
+
+  useEffect(() => {
+    if (bankAccount) {
+      localStorage.setItem(BANK_ACCOUNT_NUMBER_KEY, bankAccount)
+    } else {
+      localStorage.removeItem(BANK_ACCOUNT_NUMBER_KEY);
+    }
+  }, [bankAccount]);
+
+  useEffect(() => {
+    if (holderName) {
+      localStorage.setItem(BANK_ACCOUNT_HOLDER_KEY, holderName);
+    } else {
+      localStorage.removeItem(BANK_ACCOUNT_HOLDER_KEY);
+    }
+  }, [holderName]);
+
+  function setBankAccountNumber(bankAccount?: string) {
+    setBankAccount(bankAccount);
+  }
+
+  function setBankAccountHolderName(holderName?: string) {
+    setHolderName(holderName);
+  }
+
+  return {
+    bankAccount,
+    holderName,
+    setBankAccountNumber,
+    setBankAccountHolderName,
+  }
+}

client/src/index.tsx

@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import { SocketContext, socket } from './context/socket';
 import { ProvideAuth } from './context/auth';
+import { ToastContainer } from 'react-toastify';
+import { ProvideBank } from './context/bank';
+import 'react-toastify/dist/ReactToastify.css';
 import './index.css';
 
 const root = ReactDOM.createRoot(
@@ -11,9 +14,12 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <ProvideAuth>
-      <SocketContext.Provider value={socket}>
-        <App />
-      </SocketContext.Provider>
+      <ProvideBank>
+        <SocketContext.Provider value={socket}>
+          <App />
+          <ToastContainer />
+        </SocketContext.Provider>
+      </ProvideBank>
     </ProvideAuth>
   </React.StrictMode>
 );