diff --git a/src/app/img/barnums.jpg b/src/app/img/barnums.jpg new file mode 100644 index 0000000..acc5a38 Binary files /dev/null and b/src/app/img/barnums.jpg differ diff --git a/src/components/RegisterForm/index.tsx b/src/components/RegisterForm/index.tsx index 7a0a9a8..ea1c606 100644 --- a/src/components/RegisterForm/index.tsx +++ b/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(() => { - backgroundId = backgroundId === 1 ? 2 : 1 - setChangingBackground(backgroundId === 1 ? styles.pelImg1 : styles.pelImg2) - }, 20000) - }, [setChangingBackground]) + const timer = setInterval(() => { + setChangingBackground((changingBackground + 1) % animations.length) + }, 60000 / animations.length) + return () => clearInterval(timer) + }, [changingBackground, setChangingBackground]) + const transitionClass = (i: number) => animations[changingBackground][i - 1] const sendTextDispatch = (dispatchSetter: React.Dispatch>) => @@ -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'animateurs bénévoles, du coin des petits joueurs, de l'espace tournois, ou de l'espace prototypes.

-
- {" "} +
+
+
Et les bénévoles de PeL ?
@@ -201,11 +207,11 @@ howToContact, tout !

- La majorité d'entre nous sommes bénévoles les samedi et dimanche, - mais certains bénévoles ne sont pas disponibles les deux jours. On leur demande - alors d'aider à la mise en place jeudi ou vendredi, ou au rangement le - lundi, à la place d'un des jours du weekend. Bref, chacun participe comme il - peut mais deux jours minimum ! + La majorité d'entre nous sommes bénévoles les samedi et dimanche, mais + certains bénévoles ne sont pas disponibles les deux jours. On leur demande alors + d'aider à la mise en place jeudi ou vendredi, ou au rangement le lundi, à la + place d'un des jours du weekend. Bref, chacun participe comme il peut mais deux + jours minimum !

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.

+

Les espaces jeux bleu, violet, gris, ou marron sont installés et animés @@ -469,7 +476,7 @@ howToContact,

- 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 :)

@@ -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 - primordiale et que personne ne veut s'en occuper, bah tant pis on le fait - pas ^^ + des tentes+tables, ou la sécurité de nuit sont délégués à des prestataires. + Et si ce quelque chose n'est pas primordiale et que personne ne veut s'en + occuper, bah tant pis on le fait pas ^^

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.

@@ -560,7 +567,7 @@ howToContact, )} {canHelpBefore === "non" && (

- 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 !

)} @@ -573,10 +580,61 @@ howToContact, ) + const pelMemberQuestion = !potentialVolunteer && ( + <> +
+
Association Paris est Ludique
+
+

+ Légalement il faut que le festival soit organisé par une structure, et c'est + l'association Paris est Ludique ! 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. +

+
+
+
+
+
+ Acceptes-tu de devenir membre de l'association Paris est Ludique ! ? +
+
+
+
+ {["Oui", "Non"].map((option) => ( + + ))} +
+
+
+ {!pelMember && ( +
+
+

+ Tant que tu n'as pas accepté cette condition je suis désolé on ne peut + pas continuer. +

+
+
+ )} + + ) + const nameMobileEmail = ( <>
-
Quelques infos sur toi
+
Quelques infos sur toi pour finir
@@ -643,20 +701,18 @@ howToContact,
- {["Email", "SMS", "WhatsApp", "Signal", "Appeler", "Aucun"].map( - (option) => ( - - ) - )} + {["Email", "SMS", "WhatsApp", "Signal", "Appel", "Aucun"].map((option) => ( + + ))}
@@ -665,10 +721,10 @@ howToContact,

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é.

- 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 :)

@@ -704,8 +760,13 @@ howToContact, {cameAsVisitor} {meeting} {helpBefore} - {nameMobileEmail} - {howToContact !== "Aucun" && submitButton} + {pelMemberQuestion} + {pelMember && ( + <> + {nameMobileEmail} + {howToContact !== "Aucun" && submitButton} + + )} )} diff --git a/src/components/RegisterForm/styles.module.scss b/src/components/RegisterForm/styles.module.scss index eec2681..114b4d2 100755 --- a/src/components/RegisterForm/styles.module.scss +++ b/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; - background-size: cover; - transition: background 2000ms ease-in-out 3000ms; + + @include desktop { + width: 552px; + 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; + } +} diff --git a/src/server/gsheets/volunteers.ts b/src/server/gsheets/volunteers.ts index 0ae8831..171bfa5 100644 --- a/src/server/gsheets/volunteers.ts +++ b/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, }) diff --git a/src/services/volunteers.ts b/src/services/volunteers.ts index cdc27d4..83b97c1 100644 --- a/src/services/volunteers.ts +++ b/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",