From bf649aa040d9f310c7b249f27f1758e63838ba91 Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Mon, 24 Jan 2022 23:45:10 +0100
Subject: [PATCH] add component for d day informations

---
 .../DDayInformations/DDaysInformations.tsx    | 76 ++++++++++++++++++
 .../DDayInformations/styles.module.scss       | 78 +++++++++++++++++++
 src/pages/DayWishes/DayWishes.tsx             |  2 +
 src/theme/form.scss                           |  1 +
 4 files changed, 157 insertions(+)
 create mode 100644 src/components/VolunteerBoard/DDayInformations/DDaysInformations.tsx
 create mode 100755 src/components/VolunteerBoard/DDayInformations/styles.module.scss

diff --git a/src/components/VolunteerBoard/DDayInformations/DDaysInformations.tsx b/src/components/VolunteerBoard/DDayInformations/DDaysInformations.tsx
new file mode 100644
index 0000000..45ab31a
--- /dev/null
+++ b/src/components/VolunteerBoard/DDayInformations/DDaysInformations.tsx
@@ -0,0 +1,76 @@
+import { FC, memo, useCallback, useRef, useState } from "react"
+import styles from "./styles.module.scss"
+
+const sizes = ["XS", "S", "M", "L", "XL", "XXL"]
+
+const DDayInformations: FC = (): JSX.Element | null => {
+    const sizeRef = useRef<HTMLSelectElement | null>(null)
+    const dietRef = useRef<HTMLInputElement | null>(null)
+    const ageRef = useRef<HTMLInputElement | null>(null)
+    const commentRef = useRef<HTMLTextAreaElement | null>(null)
+    const [has2Shirts, setHas2Shirts] = useState<boolean | null>(null)
+
+    const onSubmit = useCallback(() => {
+        console.log("on submit")
+    }, [])
+
+    const onHas2ShirtsClick = useCallback(
+        (value) => {
+            setHas2Shirts(value)
+        },
+        [setHas2Shirts]
+    )
+
+    return (
+        <div className={styles.ddayInfo}>
+            <div className={styles.ddayTitle}>Informations pour le festival</div>
+            <div className={styles.ddayInfoShirtWrapper}>
+                <div className={styles.ddayShirtLabel}>J&apos;ai déjà 2 t-shirts</div>
+                <label>
+                    <input type="radio" name="hasShirt" onClick={() => onHas2ShirtsClick(true)} />{" "}
+                    Oui
+                </label>
+                <label>
+                    <input type="radio" name="hasShirt" onClick={() => onHas2ShirtsClick(false)} />{" "}
+                    Non
+                </label>
+                {has2Shirts === false && (
+                    <div className={styles.ddayShirtSizes}>
+                        <label>Taille</label>
+                        <select ref={sizeRef}>
+                            {sizes.map((size) => (
+                                <option key={size} value={size}>
+                                    {size}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                )}
+            </div>
+            <div className={styles.ddayInfoInputWrapper}>
+                <label htmlFor="ddday-age">Age</label>
+                <input type="number" id="ddday-age" ref={ageRef} />
+            </div>
+            <div className={styles.ddayInfoInputWrapper}>
+                <label htmlFor="dday-diet">Régime alimentaire</label>
+                <input
+                    id="dday-diet"
+                    type="text"
+                    ref={dietRef}
+                    placeholder="végétarien ? halal ? ..."
+                />
+            </div>
+            <div className={styles.ddayInfoCommentWrapper}>
+                <label htmlFor="dday-comment">Des commentaires ?</label>
+                <textarea id="dday-comment" ref={commentRef} />
+            </div>
+            <div className={styles.ddayButtonWrapper}>
+                <button type="submit" onClick={onSubmit}>
+                    Enregistrer
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default memo(DDayInformations)
diff --git a/src/components/VolunteerBoard/DDayInformations/styles.module.scss b/src/components/VolunteerBoard/DDayInformations/styles.module.scss
new file mode 100755
index 0000000..44aa789
--- /dev/null
+++ b/src/components/VolunteerBoard/DDayInformations/styles.module.scss
@@ -0,0 +1,78 @@
+@import "../../../theme/variables";
+@import "../../../theme/mixins";
+
+.ddayInfo {
+    width: 470px;
+}
+
+.ddayTitle {
+    padding: 4px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.ddayInfoInputWrapper {
+    margin: 10px 0;
+
+    label {
+        display: inline-block;
+        width: 150px;
+    }
+    input {
+        width: 320px;
+        border: 1px solid $color-grey-medium;
+        outline: 0;
+    }
+}
+
+.ddayInfoShirtWrapper {
+    margin: 10px 0;
+    height: 22px;
+
+    label {
+        display: inline-block;
+        width: 60px;
+    }
+}
+
+.ddayShirtLabel {
+    display: inline-block;
+    margin-top: 2px;
+    width: 150px;
+}
+
+.ddayShirtSizes {
+    display: inline-block;
+    width: 200px;
+    text-align: right;
+
+    select {
+        margin-left: 10px;
+        width: 60px;
+        border: 1px solid $color-grey-medium;
+        background-color: $color-white;
+        outline: 0;
+    }
+}
+
+.ddayInfoCommentWrapper {
+    margin: 6px 0;
+
+    label {
+        display: block;
+        padding-left: 4px;
+    }
+    textarea {
+        width: 100%;
+        height: 50px;
+        padding: 5px;
+        border: 1px solid $color-grey-light;
+        background-color: $color-grey-lighter;
+        outline: 0;
+    }
+}
+
+.ddayButtonWrapper {
+    margin-bottom: 10px;
+    text-align: center;
+}
diff --git a/src/pages/DayWishes/DayWishes.tsx b/src/pages/DayWishes/DayWishes.tsx
index 648510e..498143e 100644
--- a/src/pages/DayWishes/DayWishes.tsx
+++ b/src/pages/DayWishes/DayWishes.tsx
@@ -6,6 +6,7 @@ import { AppThunk } from "../../store"
 import { fetchVolunteerDayWishesSetIfNeed } from "../../store/volunteerDayWishesSet"
 import { selectUserJwtToken } from "../../store/auth"
 import DayWishes from "../../components/VolunteerBoard/DayWishes/DayWishes"
+import DDayInformations from "../../components/VolunteerBoard/DDayInformations/DDaysInformations"
 import styles from "./styles.module.scss"
 
 export type Props = RouteComponentProps
@@ -19,6 +20,7 @@ const HomePage: FC<Props> = (): JSX.Element => {
             <div className={styles.dayWishPage}>
                 <div className={styles.dayWisContent}>
                     <DayWishes />
+                    <DDayInformations />
                 </div>
             </div>
         )
diff --git a/src/theme/form.scss b/src/theme/form.scss
index 51a40a5..db6c6bd 100644
--- a/src/theme/form.scss
+++ b/src/theme/form.scss
@@ -12,6 +12,7 @@ button {
 
 input[type="text"],
 input[type="password"],
+input[type="number"],
 input[type="email"] {
     padding: 4px 6px;
     border: 1px solid #333;