All checks were successful
ci/woodpecker/push/workflow Pipeline was successful
42 lines
2.5 KiB
TypeScript
42 lines
2.5 KiB
TypeScript
import { useRef } from "react";
|
|
import { Modal, Button } from "react-bootstrap"
|
|
import { useSettings } from "../../context/settings";
|
|
|
|
type Props = {
|
|
isOpen: boolean,
|
|
onClose: () => void,
|
|
onSave: (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean) => void,
|
|
}
|
|
|
|
/** Modální dialog pro uživatelská nastavení. */
|
|
export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Props>) {
|
|
const settings = useSettings();
|
|
const bankAccountRef = useRef<HTMLInputElement>(null);
|
|
const nameRef = useRef<HTMLInputElement>(null);
|
|
const hideSoupsRef = useRef<HTMLInputElement>(null);
|
|
|
|
return <Modal show={isOpen} onHide={onClose} size="lg">
|
|
<Modal.Header closeButton>
|
|
<Modal.Title><h2>Nastavení</h2></Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<h4>Obecné</h4>
|
|
<span title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální, a zejména u TechTower bývá často problém polévky spolehlivě rozeznat. V případě využití této funkce průběžně nahlašujte stále se zobrazující polévky." style={{ "cursor": "help" }}>
|
|
<input ref={hideSoupsRef} type="checkbox" defaultChecked={settings?.hideSoups} /> Skrýt polévky
|
|
</span>
|
|
<hr />
|
|
<h4>Bankovní účet</h4>
|
|
<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={settings?.bankAccount} onKeyDown={e => e.stopPropagation()} /> <br />
|
|
Název příjemce (jméno majitele účtu): <input ref={nameRef} type="text" placeholder="Jan Novák" defaultValue={settings?.holderName} onKeyDown={e => e.stopPropagation()} />
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<Button variant="secondary" onClick={onClose}>
|
|
Storno
|
|
</Button>
|
|
<Button variant="primary" onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked)}>
|
|
Uložit
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
} |