fix: opravy generování QR kódů, zobrazení také na stránce objednání

client/src/App.tsx

@@ -16,12 +16,12 @@ import Footer from './components/Footer';
 import { faArrowUpRightFromSquare, faBasketShopping, faChainBroken, faChevronLeft, faChevronRight, faGear, faMoneyBillTransfer, faSatelliteDish, faSearch, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import { useNavigate } from 'react-router-dom';
 import Loader from './components/Loader';
-import { getHumanDateTime, isInTheFuture, formatDateString } from './Utils';
+import { getHumanDateTime, isInTheFuture } from './Utils';
 import NoteModal from './components/modals/NoteModal';
-import ConfirmModal from './components/modals/ConfirmModal';
 import PayForAllModal from './components/modals/PayForAllModal';
+import PendingPayments from './components/PendingPayments';
 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';
+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, generateQr } from '../../types';
 import { getLunchChoiceName } from './enums';
 // import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves';
 // import './FallingLeaves.scss';
@@ -78,7 +78,6 @@ 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);
@@ -888,42 +887,21 @@ function App() {
                       </div>
                     }
                     <PizzaOrderList state={data.pizzaDay.state!} orders={data.pizzaDay.orders!} onDelete={handlePizzaDelete} creator={data.pizzaDay.creator!} />
-                    {
-                      data.pizzaDay.state === PizzaDayState.DELIVERED && myOrder?.hasQr && (() => {
-                        const pizzaQr = data.pendingQrs?.find(qr => qr.creator === data.pizzaDay?.creator);
-                        return pizzaQr ? (
-                          <div className='qr-code'>
-                            <h3>QR platba</h3>
-                            <img src={`/api/qr?login=${auth.login}&id=${pizzaQr.id}`} alt='QR kód' />
-                          </div>
-                        ) : null;
-                      })()
-                    }
                   </>
                 }
               </div>
             }
           </div>
-          {data.pendingQrs && data.pendingQrs.length > 0 &&
-            <div className='pizza-section fade-in mt-4'>
-              <h3>Nevyřízené platby</h3>
-              <p>Máte neuhrazené platby.</p>
-              {data.pendingQrs.map(qr => (
-                <div key={qr.id} className='qr-code mb-3'>
-                  <p>
-                    <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={() => setDismissQrId(qr.id)}>
-                      Zaplatil jsem
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          }
+          <PendingPayments
+            pendingQrs={data.pendingQrs}
+            login={auth.login}
+            onDismissed={async () => {
+              const response = await getData({ query: { dayIndex } });
+              if (response.data) {
+                setData(response.data);
+              }
+            }}
+          />
         </>
       </div>
       {/* <FallingLeaves
@@ -932,24 +910,6 @@ 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