Funkční generování QR kódů

client/src/Api.ts

@@ -18,6 +18,10 @@ const api = {
     post: <TBody extends BodyInit, TResponse>(url: string, body: TBody) => request<TResponse>(url, { method: 'POST', body, headers: { 'Content-Type': 'application/json' } }),
 }
 
+export const getQrUrl = (login: string) => {
+    return `${getBaseUrl()}/api/qr?login=${login}`;
+}
+
 export const getData = async () => {
     return await api.get<any>('/api/data');
 }
@@ -50,8 +54,8 @@ export const finishOrder = async (login) => {
     return await api.post<any, any>('/api/finishOrder', JSON.stringify({ login }));
 }
 
-export const finishDelivery = async (login) => {
-    return await api.post<any, any>('/api/finishDelivery', JSON.stringify({ login }));
+export const finishDelivery = async (login, bankAccount, bankAccountHolder) => {
+    return await api.post<any, any>('/api/finishDelivery', JSON.stringify({ login, bankAccount, bankAccountHolder }));
 }
 
 export const updateChoice = async (name: string, choice: number | null) => {

client/src/App.css

@@ -71,4 +71,8 @@
   color: rgb(0, 89, 255);
   cursor: pointer;
   margin-left: 10px;
+}
+
+.qr-code {
+  text-align: center;
 }

client/src/App.tsx

@@ -1,10 +1,10 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { EVENT_DISCONNECT, EVENT_MESSAGE, SocketContext } from './context/socket';
-import { addPizza, createPizzaDay, deletePizzaDay, finishDelivery, finishOrder, getData, getFood, getPizzy, lockPizzaDay, removePizza, unlockPizzaDay, updateChoice } from './Api';
+import { addPizza, createPizzaDay, deletePizzaDay, finishDelivery, finishOrder, getData, getFood, getPizzy, getQrUrl, lockPizzaDay, removePizza, unlockPizzaDay, updateChoice } from './Api';
 import { useAuth } from './context/auth';
 import Login from './Login';
-import { Locations, ClientData, Pizza, PizzaOrder, State } from './Types';
+import { Locations, ClientData, Pizza, PizzaOrder, State, Order } from './Types';
 import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
 import Header from './components/Header';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -14,16 +14,19 @@ import 'react-select-search/style.css';
 import './App.css';
 import { SelectSearchOption } from 'react-select-search';
 import { faTrashCan } from '@fortawesome/free-regular-svg-icons';
+import { useBank } from './context/bank';
 
 
 const EVENT_CONNECT = "connect"
 
 function App() {
   const auth = useAuth();
+  const bank = useBank();
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [data, setData] = useState<ClientData>();
   const [food, setFood] = useState<any>();
   const [pizzy, setPizzy] = useState<Pizza[]>();
+  const [myOrder, setMyOrder] = useState<Order>();
   const socket = useContext(SocketContext);
   const choiceRef = useRef<HTMLSelectElement>(null);
 
@@ -76,6 +79,16 @@ function App() {
     }
   }, [auth, auth?.login, data?.choices])
 
+  // Reference na mojí objednávku
+  useEffect(() => {
+    if (data?.pizzaDay?.orders) {
+      const myOrder = data.pizzaDay.orders.find(o => o.customer === auth?.login);
+      if (myOrder) {
+        setMyOrder(myOrder);
+      }
+    }
+  }, [data?.pizzaDay?.orders])
+
   const changeChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
     const index = Object.values(Locations).indexOf(event.target.value as unknown as Locations);
     if (auth?.login) {
@@ -183,10 +196,8 @@ function App() {
           <Alert variant={'primary'}>
             Poslední změny:
             <ul>
-              <li>Žárovka praskla a vyhodila hlavní jistič</li>
-              <li>Už jsem jí vyměnil</li>
-              <li>Dobrá práce</li>
-              <li>Aplikace zatím nic nového neumí</li>
+              <li>Nová žárovka zatím funguje</li>
+              <li>Funkční generování a zobrazení QR kódů pro Pizza day</li>
             </ul>
           </Alert>
           <h1 className='title'>Dnes je {data.date}</h1>
@@ -288,7 +299,7 @@ function App() {
                               await lockPizzaDay(auth.login);
                             }}>Vrátit do "uzamčeno"</Button>
                             <Button className='danger mb-3' style={{ marginLeft: '20px' }} title="Nastaví stav na 'Doručeno' - koncový stav." onClick={async () => {
-                              await finishDelivery(auth.login);
+                              await finishDelivery(auth.login, bank?.bankAccount, bank?.holderName);
                             }}>Doručeno</Button>
                           </div>
                         }
@@ -297,7 +308,7 @@ function App() {
                     {
                       data.pizzaDay.state === State.DELIVERED &&
                       <div>
-                        <p>Pizzy byly doručeny.</p>
+                        <p>Pizzy byly doručeny. Objednávku můžete uhradit pomocí QR kódu níže.</p>
                       </div>
                     }
                   </div>
@@ -309,6 +320,15 @@ function App() {
                     disabled={data.pizzaDay.state !== State.CREATED}
                   />
                   <PizzaOrderList state={data.pizzaDay.state} orders={data.pizzaDay.orders} onDelete={handlePizzaDelete} />
+                  {
+                    data.pizzaDay.state === State.DELIVERED && myOrder &&
+                    <div className='qr-code'>
+                      <h3>QR platba</h3>
+                      <div>Částka: {myOrder.totalPrice} Kč</div>
+                      <img src={getQrUrl(auth.login)} alt='QR kód' />
+                      <p>Generování QR kódů je v experimentální fázi - doporučujeme si překontrolovat údaje před odesláním platby.</p>
+                    </div>
+                  }
                 </div>
               }
             </div>