Info k platbe po registraci, QR kod

.env

 REACT_APP_STYLEGUIDE_URL="https://styleguide.pirati.cz/2.7.1"
-REACT_APP_ROOT_URL="https://cf2022.pirati.cz"
+REACT_APP_ROOT_URL="https://cf2023.pirati.cz"
 REACT_APP_CF_TITLE="CF 2023"
 REACT_APP_CF_DESC="Oficiální stránka zasedání Celostátního fóra České pirátské strany, 29. 4. 2023"
 REACT_APP_CF_EVENT_DATE="29. 4. 2023"

src/components/RegistrationForm.js

@@ -151,7 +151,7 @@ const RegistrationForm = ({
       {showLunch && (
         <div className="form-field col-span-4">
           <label className="form-field__label" htmlFor="field">
-            Stravování (120 Kč)
+            Stravování (160 Kč)
           </label>
           <div className="form-field__wrapper  form-field__wrapper--shadowed">
             <div className="select">

src/config.js

@@ -9,6 +9,11 @@ export const api = {
   baseUrl: process.env.REACT_APP_API_BASE_URL || "https://cf2023.pirati.cz/api",
 };
 
+export const appurl = {
+  baseUrl: process.env.REACT_APP_ROOT_URL || "https://cf2023.pirati.cz",
+};
+
+
 export const eventHall = {
   text: "Zasedání CF 2023",
   title_short: "Dům Kultury Liberec",

src/pages/Catering.js

@@ -17,7 +17,7 @@ const Catering = () => {
         <h2>Stravování v Domě Kultury během zasedání</h2>
         <p>
           Sobotní oběd v restauraci, která je součástí objektu Domu Kultury, si budete moci rezervovat dopředu v&nbsp;rámci registračního formuláře pro účast na CF.
-          Jelikož jsou kapacity restaurace omezeny na výdej cca 100 jídel během 45 minut, vytvořili jsme čtyři časové sloty (11.15–12.00, 12.00–12.45, 12.45–13.30, 13.30–14.15) pro možnost objednání oběda a&nbsp;žádáme všechny účastníky, aby se je snažili dodržovat.
+          Jelikož jsou kapacity restaurace omezeny na výdej cca 100 jídel během 45 minut, vytvořili jsme čtyři časové sloty (11.00–11.45, 11.45–12.30, 12.30–13.15, 13.15–14.00) pro možnost objednání oběda a&nbsp;žádáme všechny účastníky, aby se je snažili dodržovat.
           Zabráníme tak návalu a&nbsp;nutnosti vyhledat jiné stravovací zařízení ve špičce v&nbsp;rámci pauzy na oběd. Budeme ale schopni garantovat oběd pro 400 účastníků.<br/><br/>
           Ta samá restaurace Vám bude k dispozici i&nbsp;v době večeří, ale tu už si každý bude řešit individuálně bez předchozího objednání.<br/><br/>
           Krom toho bude možné se stravovat v&nbsp;okolních restauračních zařízeních nebo fastfoodech v&nbsp;objektu sousedícího nákupního centra Fórum.<br/>

src/pages/Registration.js

@@ -8,7 +8,7 @@ import fetch from "unfetch";
 import Button from "components/Button";
 import PageTitle from "components/PageTitle";
 import RegistrationForm from "components/RegistrationForm";
-import { api, basics } from "config";
+import { api, appurl, basics } from "config";
 
 const resolveAudience = (keycloak) => {
   if (!keycloak.authenticated) {
@@ -37,6 +37,7 @@ const Registration = () => {
   const [submitDuplicity, setSubmitDuplicity] = useState(false);
   const [registrationFormRenderKey, setRegistrationFormRenderKey] = useState(0);
   const [response, setResponse] = useState("");
+  const [responseTotal, setResponseTotal] = useState(0);
 
   useEffect(() => {
     const doFetch = async () => {
@@ -92,7 +93,7 @@ const Registration = () => {
       console.log(JSON.stringify(resp));
       const odpoved = await resp.json();  
       console.log(JSON.stringify(odpoved));
-      setResponse(JSON.stringify(odpoved));
+      setResponse(odpoved);
       setSubmitError(null);
       setSubmitted(true);
     } catch (err) {
@@ -306,7 +307,7 @@ const Registration = () => {
           )}
         </div>
       )}
-      {submitted && (
+      {submitted && response.total === "0.00" && (
         <div className="alert alert--blue-300 leading-normal space-x-4">
           <span className="ico--checkbox-checked text-3xl" />
           <div>
@@ -314,21 +315,53 @@ const Registration = () => {
               Vaše registrace byla úspěšná, těšíme se naviděnou!
             </h2>
             <p>
-              Nyní prosím vyčkejte na odkaz ke stažení vstupenek, které budete
-              potřebovat při vstupu do jednacího sálu. Mějte prosím strpení, k
+              Nyní prosím vyčkejte na e-mail s odkazem ke stažení vstupenek, které budete
+              potřebovat při vstupu do objektu jednacího sálu. Mějte prosím strpení, k
               odeslání odkazu <strong>může dojít až za několik dní</strong>,
               některé registrace totiž musíme osobně zkontrolovat.
-              <br/><br/>
-              Odpověď serveru:
             </p>
-            <pre>{response}</pre>
+          </div>
+        </div>
+      )}
+      {submitted && response.total !== "0.00" && (
+        <div className="alert alert--blue-300 leading-normal space-x-4">
+          <span className="ico--checkbox-checked text-3xl" />
+          <div>
+            <h2 className="head-heavy-sm mb-2">
+              Vaše registrace byla úspěšná, těšíme se naviděnou!
+            </h2>
             <p>
-              <br/><br/>
-              Pokud jste v registračním formuláři zvolil/a některé placené
+              Nyní prosím vyčkejte na e-mail s odkazem ke stažení vstupenek, které budete
+              potřebovat při vstupu do objektu jednacího sálu. Mějte prosím strpení, k
+              odeslání odkazu <strong>může dojít až za několik dní</strong>,
+              některé registrace totiž musíme osobně zkontrolovat.
+            </p>
+            <p>
+              <br/>
+              V registračním formuláři jste zvolil/a některé placené
               položky (např. stravování nebo tištěné materiály), součástí odkazu
               ke stažení vstupenek bude též odkaz k provedení platby.
+              <br/><br/>
+            </p>
+            <div className="grid md:grid-cols-2 gap-4 md:gap-8 content-block">
+              <div>
+                <p>
+                  <strong>Pokyny k platbě:</strong><br/>
+                  Číslo účtu: {response.payment_request.account}<br/>
+                  Částka: {response.payment_request.amount} Kč<br/>
+                  Variabilní symbol: {response.payment_request.vs}<br/>
+                  Konstantní symbol: {response.payment_request.ks}<br/>
+                  Specifický symbol: {response.payment_request.ss}<br/><br/>
+                  Případně použijte QR kód k platbě z Vašeho mobilního telefonu.
                 </p>
               </div>
+              <div>
+                <p>
+                  <img src={appurl.baseUrl+response.payment_request.qr} />
+                </p>
+              </div>
+            </div>  
+          </div>
         </div>
       )}
     </article>