Fix registration form, add pelMember support

src/components/RegisterForm/index.tsx

@@ -2,18 +2,30 @@ import React, { memo, useEffect, useState } from "react"
 import { useSelector, shallowEqual } from "react-redux"
 import { toast } from "react-toastify"
 import _ from "lodash"
+import classnames from "classnames"
 import styles from "./styles.module.scss"
 
 import { fetchPostulantAdd } from "../../store/postulantAdd"
 import { AppDispatch, AppState } from "../../store"
 import { fetchVolunteerPartialAdd } from "../../store/volunteerPartialAdd"
 import FormButton from "../Form/FormButton/FormButton"
+import { validEmail } from "../../utils/standardization"
+import { toastError } from "../../store/utils"
 
 interface Props {
     dispatch: AppDispatch
 }
 
-let backgroundId = 1
+const animations = [
+    [styles.imgTransitionDoHide, styles.imgTransitionShow],
+    [styles.imgTransitionHidden, styles.imgTransitionShow],
+    [styles.imgTransitionReset, styles.imgTransitionShow],
+    [styles.imgTransitionAbouToShow, styles.imgTransitionShow],
+    [styles.imgTransitionShow, styles.imgTransitionDoHide],
+    [styles.imgTransitionShow, styles.imgTransitionHidden],
+    [styles.imgTransitionShow, styles.imgTransitionReset],
+    [styles.imgTransitionShow, styles.imgTransitionAbouToShow],
+]
 const RegisterForm = ({ dispatch }: Props): JSX.Element => {
     const [potentialVolunteer, setPotentialVolunteer] = useState(true)
     const [firstname, setFirstname] = useState("")
@@ -26,16 +38,18 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
     const [firstMeeting, setFirstMeeting] = useState("")
     const [commentFirstMeeting, setCommentFirstMeeting] = useState("")
     const [canHelpBefore, setCanHelpBefore] = useState("")
+    const [pelMember, setPelMember] = useState(false)
     const [howToContact, setHowToContact] = useState("Email")
     const [sending, setSending] = useState(false)
-    const [changingBackground, setChangingBackground] = useState(styles.pelImg1)
+    const [changingBackground, setChangingBackground] = useState(0)
 
     useEffect(() => {
-        setInterval(() => {
+        const timer = setInterval(() => {
-            backgroundId = backgroundId === 1 ? 2 : 1
+            setChangingBackground((changingBackground + 1) % animations.length)
-            setChangingBackground(backgroundId === 1 ? styles.pelImg1 : styles.pelImg2)
+        }, 60000 / animations.length)
-        }, 20000)
+        return () => clearInterval(timer)
-    }, [setChangingBackground])
+    }, [changingBackground, setChangingBackground])
+    const transitionClass = (i: number) => animations[changingBackground][i - 1]
 
     const sendTextDispatch =
         (dispatchSetter: React.Dispatch<React.SetStateAction<string>>) =>
@@ -58,22 +72,12 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
             dispatchSetter(e.target.value)
 
     const onSubmit = () => {
+        if (!validEmail(email)) {
+            toastError("Cet email est invalid ><")
+            return
+        }
         if (firstname && lastname && email && mobile && !sending) {
             if (potentialVolunteer) {
-                /*
-potentialVolunteer,
-firstname,
-lastname,
-email,
-mobile,
-comment,
-alreadyCame,
-firstMeeting,
-commentFirstMeeting,
-canHelpBefore,
-howToContact,
-
-    */
                 dispatch(
                     fetchPostulantAdd({
                         potential: true,
@@ -97,6 +101,7 @@ howToContact,
                         mobile,
                         howToContact,
                         canHelpBefore,
+                        pelMember,
                     })
                 )
                 dispatch(
@@ -173,8 +178,9 @@ howToContact,
                     d&apos;animateurs bénévoles, du coin des petits joueurs, de l&apos;espace
                     tournois, ou de l&apos;espace prototypes.
                 </p>
-                <div id="pelImg" className={changingBackground}>
+                <div id="pelImg" className={styles.pelImg}>
-                    {" "}
+                    <div className={classnames(styles.pelImg1, transitionClass(1))}> </div>
+                    <div className={classnames(styles.pelImg2, transitionClass(2))}> </div>
                 </div>
             </dd>
             <dt>Et les bénévoles de PeL ?</dt>
@@ -201,11 +207,11 @@ howToContact,
                     tout !
                 </p>
                 <p>
-                    La majorité d&apos;entre nous sommes bénévoles les <b>samedi et dimanche</b>,
+                    La majorité d'entre nous sommes bénévoles les <b>samedi et dimanche</b>, mais
-                    mais certains bénévoles ne sont pas disponibles les deux jours. On leur demande
+                    certains bénévoles ne sont pas disponibles les deux jours. On leur demande alors
-                    alors d&apos;aider à la mise en place jeudi ou vendredi, ou au rangement le
+                    d'aider à la mise en place jeudi ou vendredi, ou au rangement le lundi, à la
-                    lundi, à la place d'un des jours du weekend. Bref, chacun participe comme il
+                    place d'un des jours du weekend. Bref, chacun participe comme il peut mais deux
-                    peut mais deux jours minimum !
+                    jours minimum !
                 </p>
                 <p>
                     Le samedi soir quand les visiteurs sont partis, nous prolongeons la fête en
@@ -366,6 +372,7 @@ howToContact,
                             accueillir 16 000 visiteurs. La plupart des rectangles colorés que tu
                             vois dessus sont d'énormes barnums, ou agglomérats de tonnelles.
                         </p>
+                        <div className={styles.barnumsImg}> </div>
                         <div className={styles.planImg}> </div>
                         <p>
                             Les espaces jeux bleu, violet, gris, ou marron sont installés et animés
@@ -469,7 +476,7 @@ howToContact,
                 <dl className={styles.registerIntro}>
                     <dd>
                         <p>
-                            Top ! On fait en sorte qu'il y ait assez de bénévole expérimentés pour
+                            Top ! On fait en sorte qu'il y ait assez de bénévoles expérimentés pour
                             les nombreux curieux comme toi, donc pour ne pas gâcher leur temps on
                             compte sur ta présence :)
                         </p>
@@ -509,14 +516,14 @@ howToContact,
                         En tant que bénévole, tu fais selon tes envies, tes disponibilités, ton
                         énergie. Si personne ne veut faire quelque chose de primordial pour le
                         festival, on paye quelqu'un de l'extérieur. Par exemple le transport+montage
-                        des tentes+tables, ou la sécurité de nuit. Et si ce quelque chose n'est pas
+                        des tentes+tables, ou la sécurité de nuit sont délégués à des prestataires.
-                        primordiale et que personne ne veut s'en occuper, bah tant pis on le fait
+                        Et si ce quelque chose n'est pas primordiale et que personne ne veut s'en
-                        pas ^^
+                        occuper, bah tant pis on le fait pas ^^
                     </p>
                     <p>
                         Après on essaye de faire plein de choses sans aide extérieure. Pour le
                         plaisir de collaborer à un projet entre bénévoles parfois devenus amis, pour
-                        aquérir de nouvelles compétences, parce que chaque économie d'argent fait
+                        acquérir de nouvelles compétences, parce que chaque économie d'argent fait
                         baisser le prix d'entrée au festival et contribue à le rendre plus
                         accessible.
                     </p>
@@ -560,7 +567,7 @@ howToContact,
                     )}
                     {canHelpBefore === "non" && (
                         <p>
-                            Aucun soucis tu nous seras d'une aide précieuse le jour J c'est déjà
+                            Aucun souci tu nous seras d'une aide précieuse le jour J c'est déjà
                             énorme !
                         </p>
                     )}
@@ -573,10 +580,61 @@ howToContact,
         </>
     )
 
+    const pelMemberQuestion = !potentialVolunteer && (
+        <>
+            <dl className={styles.registerIntro}>
+                <dt>Association Paris est Ludique</dt>
+                <dd>
+                    <p>
+                        Légalement il faut que le festival soit organisé par une structure, et c'est
+                        l'association <i>Paris est Ludique !</i> qui s'en charge. Pour aider à
+                        organiser bénévolement le festival il faut donc en faire partie. Ça n'engage
+                        à rien et c'est gratuit, mais absolument nécessaire.
+                    </p>
+                </dd>
+            </dl>
+            <div className={styles.inputWrapper}>
+                <div className={styles.leftCol}>
+                    <div className={styles.multipleChoiceTitle}>
+                        Acceptes-tu de devenir membre de l'association <i>Paris est Ludique !</i> ?
+                    </div>
+                </div>
+                <div className={styles.rightCol}>
+                    <div className={styles.rightColContainer}>
+                        {["Oui", "Non"].map((option) => (
+                            <label className={styles.shortAnswerLabel} key={option}>
+                                <input
+                                    type="radio"
+                                    name="pelMember"
+                                    onChange={sendBooleanRadioboxDispatch(
+                                        setPelMember,
+                                        option === "Oui"
+                                    )}
+                                    checked={pelMember === (option === "Oui")}
+                                />{" "}
+                                {option}
+                            </label>
+                        ))}
+                    </div>
+                </div>
+            </div>
+            {!pelMember && (
+                <dl className={styles.registerIntro}>
+                    <dd>
+                        <p>
+                            Tant que tu n'as pas accepté cette condition je suis désolé on ne peut
+                            pas continuer.
+                        </p>
+                    </dd>
+                </dl>
+            )}
+        </>
+    )
+
     const nameMobileEmail = (
         <>
             <dl className={styles.registerIntro}>
-                <dt>Quelques infos sur toi</dt>
+                <dt>Quelques infos sur toi pour finir</dt>
             </dl>
             <div className={styles.inputWrapper}>
                 <div className={styles.leftColTiny}>
@@ -643,20 +701,18 @@ howToContact,
                 </div>
                 <div className={styles.rightCol}>
                     <div className={styles.rightColContainer}>
-                        {["Email", "SMS", "WhatsApp", "Signal", "Appeler", "Aucun"].map(
+                        {["Email", "SMS", "WhatsApp", "Signal", "Appel", "Aucun"].map((option) => (
-                            (option) => (
+                            <label className={styles.shortAnswerLabel} key={option}>
-                                <label className={styles.shortAnswerLabel} key={option}>
+                                <input
-                                    <input
+                                    type="radio"
-                                        type="radio"
+                                    name="howToContact"
-                                        name="howToContact"
+                                    value={option}
-                                        value={option}
+                                    onChange={sendRadioboxDispatch(setHowToContact)}
-                                        onChange={sendRadioboxDispatch(setHowToContact)}
+                                    checked={howToContact === option}
-                                        checked={howToContact === option}
+                                />{" "}
-                                    />{" "}
+                                {option}
-                                    {option}
+                            </label>
-                                </label>
+                        ))}
-                            )
-                        )}
                     </div>
                 </div>
             </div>
@@ -665,10 +721,10 @@ howToContact,
                     <dd>
                         <p>
                             Aïe ça va poser problème, je suis désolé. Il faut faire un effort en
-                            choisir un moyen de communication proposé.
+                            choisissant un moyen de communication proposé.
                         </p>
                         <p>
-                            Tu en connais un meilleur que ceux proposés et suffisemment répendu ?
+                            Tu en connais un suffisamment répandu et meilleur que ceux proposés ?
                             Parle-nous en à benevoles@parisestludique.fr :)
                         </p>
                     </dd>
@@ -704,8 +760,13 @@ howToContact,
                     {cameAsVisitor}
                     {meeting}
                     {helpBefore}
-                    {nameMobileEmail}
+                    {pelMemberQuestion}
-                    {howToContact !== "Aucun" && submitButton}
+                    {pelMember && (
+                        <>
+                            {nameMobileEmail}
+                            {howToContact !== "Aucun" && submitButton}
+                        </>
+                    )}
                 </>
             )}
         </form>

src/components/RegisterForm/styles.module.scss

@@ -120,6 +120,39 @@
     }
 }
 
+.imgTransitionReset {
+    left: calc(90vw);
+    transition: none;
+    @include desktop {
+        left: 552px;
+    }
+}
+.imgTransitionAbouToShow {
+    left: calc(90vw);
+    transition: left ease-in-out 1000ms;
+    @include desktop {
+        left: 552px;
+    }
+}
+.imgTransitionShow {
+    left: 0;
+    transition: left ease-in-out 1000ms;
+}
+.imgTransitionDoHide {
+    left: calc(-90vw);
+    transition: left ease-in-out 1000ms;
+    @include desktop {
+        left: -552px;
+    }
+}
+.imgTransitionHidden {
+    left: calc(-90vw);
+    transition: none;
+    @include desktop {
+        left: -552px;
+    }
+}
+
 .pelImg1 {
     background: url("../../app/img/pel2016.jpg") no-repeat center center;
 }
@@ -128,14 +161,21 @@
 }
 .pelImg1,
 .pelImg2 {
-    position: relative;
+    position: absolute;
     width: calc(90vw);
     height: calc(60vw);
     background-size: cover;
-    background-size: cover;
+
-    background-size: cover;
+    @include desktop {
-    background-size: cover;
+        width: 552px;
-    transition: background 2000ms ease-in-out 3000ms;
+        height: 368px;
+    }
+}
+.pelImg {
+    position: relative;
+    width: calc(90vw);
+    height: calc(60vw);
+    overflow: hidden;
 
     @include desktop {
         width: 552px;
@@ -149,9 +189,6 @@
     height: calc(40vw);
     background: url("../../app/img/bene2019.jpg") no-repeat center center;
     background-size: cover;
-    background-size: cover;
-    background-size: cover;
-    background-size: cover;
 
     @include desktop {
         width: 552px;
@@ -165,12 +202,22 @@
     height: calc(168vw);
     background: url("../../app/img/plan2019.jpg") no-repeat center center;
     background-size: cover;
-    background-size: cover;
-    background-size: cover;
-    background-size: cover;
 
     @include desktop {
         width: 552px;
         height: 1028px;
     }
 }
+
+.barnumsImg {
+    position: relative;
+    width: calc(90vw);
+    height: calc(18vw);
+    background: url("../../app/img/barnums.jpg") no-repeat center center;
+    background-size: cover;
+
+    @include desktop {
+        width: 552px;
+        height: 112px;
+    }
+}

src/server/gsheets/volunteers.ts

@@ -49,6 +49,7 @@ export const volunteerPartialAdd = expressAccessor.add(async (list, body) => {
         mobile: canonicalMobile(params.mobile),
         howToContact: trim(params.howToContact),
         canHelpBefore: trim(params.canHelpBefore),
+        pelMember: params.pelMember === true,
         password1: passwordHash,
         password2: passwordHash,
     })

src/services/volunteers.ts

@@ -38,6 +38,8 @@ export class Volunteer implements VolunteerPartial {
 
     canHelpBefore = ""
 
+    pelMember = false
+
     hiddenAsks: number[] = []
 
     created = new Date()
@@ -71,6 +73,7 @@ export const translationVolunteer: { [k in keyof Volunteer]: string } = {
     teamWishesComment: "commentaireEnviesEquipe",
     howToContact: "commentContacter",
     canHelpBefore: "aideEnAmont",
+    pelMember: "membrePel",
     hiddenAsks: "questionsCachees",
     created: "creation",
     password1: "passe1",
@@ -117,6 +120,7 @@ export const volunteerExample: Volunteer = {
     teamWishesComment: "",
     howToContact: "",
     canHelpBefore: "",
+    pelMember: false,
     hiddenAsks: [],
     created: new Date(0),
     password1: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPkdq9d5fqpbl8ASimSjNj4SR.9O",