feat: vylepšení funkce objednávání

client/src/App.tsx

@@ -18,6 +18,7 @@ import { useNavigate } from 'react-router-dom';
 import Loader from './components/Loader';
 import { getHumanDateTime, isInTheFuture, formatDateString } from './Utils';
 import NoteModal from './components/modals/NoteModal';
+import ConfirmModal from './components/modals/ConfirmModal';
 import PayForAllModal from './components/modals/PayForAllModal';
 import { useEasterEgg } from './context/eggs';
 import { ClientData, Food, MealSlot, PendingQr, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, LocationLunchChoicesMap, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, changeDepartureTime, setBuyer, dismissQr, generateQr } from '../../types';
@@ -77,6 +78,7 @@ function App() {
   const [dayIndex, setDayIndex] = useState<number>();
   const [loadingPizzaDay, setLoadingPizzaDay] = useState<boolean>(false);
   const [noteModalOpen, setNoteModalOpen] = useState<boolean>(false);
+  const [dismissQrId, setDismissQrId] = useState<string | null>(null);
   const [payForAllLocationKey, setPayForAllLocationKey] = useState<LunchChoice | null>(null);
   const [eggImage, setEggImage] = useState<Blob>();
   const eggRef = useRef<HTMLImageElement>(null);
@@ -698,15 +700,15 @@ function App() {
                             {locationPickCount >= 2 && auth.login && loginObject[auth.login] !== undefined
                               && locationKey !== LunchChoice.PIZZA && locationKey !== LunchChoice.NEOBEDVAM && locationKey !== LunchChoice.ROZHODUJI
                               && settings?.bankAccount && settings?.holderName && (
-                              <span title='Zaplatit za všechny a vygenerovat QR kódy ostatním' className="ms-2">
-                                <FontAwesomeIcon
-                                  icon={faMoneyBillTransfer}
-                                  onClick={() => setPayForAllLocationKey(locationKey)}
-                                  className='action-icon'
-                                  style={{ cursor: 'pointer' }}
-                                />
-                              </span>
-                            )}
+                                <span title='Zaplatit za všechny a vygenerovat QR kódy ostatním' className="ms-2">
+                                  <FontAwesomeIcon
+                                    icon={faMoneyBillTransfer}
+                                    onClick={() => setPayForAllLocationKey(locationKey)}
+                                    className='action-icon'
+                                    style={{ cursor: 'pointer' }}
+                                  />
+                                </span>
+                              )}
                           </td>
                           <td className='p-0'>
                             <Table className="nested-table">
@@ -909,18 +911,12 @@ function App() {
               {data.pendingQrs.map(qr => (
                 <div key={qr.id} className='qr-code mb-3'>
                   <p>
-                    <strong>{formatDateString(qr.date)}</strong> — {qr.creator} ({qr.totalPrice} Kč)
+                    <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=${auth.login}&id=${qr.id}`} alt='QR kód' />
                   <div className='mt-2'>
-                    <Button variant="success" onClick={async () => {
-                      await dismissQr({ body: { id: qr.id } });
-                      const response = await getData({ query: { dayIndex } });
-                      if (response.data) {
-                        setData(response.data);
-                      }
-                    }}>
+                    <Button variant="success" onClick={() => setDismissQrId(qr.id)}>
                       Zaplatil jsem
                     </Button>
                   </div>
@@ -936,6 +932,24 @@ function App() {
       /> */}
       <Footer />
       <NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
+      <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 } });
+          const response = await getData({ query: { dayIndex } });
+          if (response.data) {
+            setData(response.data);
+          }
+        }}
+      />
       {payForAllLocationKey && data && (
         <PayForAllModal
           isOpen