Sloty na obedy v registraci

src/components/RegistrationForm.js

@@ -10,11 +10,13 @@ const RegistrationForm = ({
   fixedEmail,
   showOrganization,
   showQuestions,
+  showProducts,
   showLunch,
   showPrintouts,
   showParties,
   showDonation,
   questions,
+  products,
   onSubmit,
   className,
 }) => {
@@ -148,6 +150,31 @@ const RegistrationForm = ({
         </div>
       )}
 
+      {showProducts && (
+        <div className="form-field col-span-4">
+           <label className="form-field__label" htmlFor="field">
+           {products[3].name} ({products[3].price} Kč)
+          </label>
+          <div className="form-field__wrapper  form-field__wrapper--shadowed">
+            <div className="select">
+              <select
+                className="select__control form-field__control col-span-4"
+                defaultValue=""
+                {...register("product__99")}
+              >
+              <option value="">nepotřebuji</option>    
+              {products[3].variations.map((product) => (
+                <option value={product.id} style={{display: product.quotes.available === 0 ? 'none' : 'block'}}>
+                  {product.value} [volných {product.quotes.available} ze {product.quotes.total}]
+                </option>
+
+              ))}
+              </select>
+            </div>  
+          </div> 
+        </div>
+      )}    
+
       {showLunch && (
         <div className="form-field col-span-4">
           <label className="form-field__label" htmlFor="field">

src/pages/Registration.js

@@ -29,6 +29,7 @@ const resolveAudience = (keycloak) => {
 const Registration = () => {
   const { keycloak } = useKeycloak();
   const [questions, setQuestions] = useState();
+  const [products, setProducts] = useState();
   const [audience, setAudience] = useState(resolveAudience(keycloak));
   const [formData, setFormData] = useState();
   const [submitted, setSubmitted] = useState(false);
@@ -37,7 +38,7 @@ const Registration = () => {
   const [submitDuplicity, setSubmitDuplicity] = useState(false);
   const [registrationFormRenderKey, setRegistrationFormRenderKey] = useState(0);
   const [response, setResponse] = useState("");
-  const [responseTotal, setResponseTotal] = useState(0);
+  //const [responseTotal, setResponseTotal] = useState(0);
 
   useEffect(() => {
     const doFetch = async () => {
@@ -46,6 +47,12 @@ const Registration = () => {
       ]);
 
       setQuestions(allQuestions);
+
+      const [allProducts] = await Promise.all([
+        fetch(`${api.baseUrl}/products`).then((r) => r.json()),
+      ]);
+
+      setProducts(allProducts);
     };
 
     doFetch();
@@ -223,7 +230,7 @@ const Registration = () => {
             </div>
           )}
 
-          {audience && questions && (
+          {audience && questions && products && (
             <>
               <h2 className="head-heavy-sm">
                 2. Nyní prosím vyplňte registrační formulář
@@ -238,11 +245,12 @@ const Registration = () => {
                 }
                 showOrganization={audience !== "member"}
                 showQuestions={audience !== "journalist"}
-                showLunch={audience !== "journalist"}
+                showProducts={audience !== "journalist"}
                 showParties={audience !== "journalist"}
                 showPrintouts={audience !== "journalist"}
                 showDonation={audience !== "journalist"}
                 questions={questions}
+                products={products}
                 onSubmit={setFormData}
                 className={classNames({ hidden: !!formData })}
               />