Add Ask Discord

src/components/Asks/AskDiscord.tsx

@@ -0,0 +1,67 @@
+import { useCallback } from "react"
+import { useSelector } from "react-redux"
+import { fetchVolunteerAsksSet } from "../../store/volunteerAsksSet"
+import styles from "./styles.module.scss"
+import { useAskTools, addAsk } from "./utils"
+import FormButton from "../Form/FormButton/FormButton"
+import {
+    fetchVolunteerDiscordIdIfNeed,
+    selectVolunteerDiscordId,
+} from "../../store/volunteerDiscordId"
+
+export function AskDiscord(asks: JSX.Element[], id: number): void {
+    const { dispatch, jwtToken, volunteerAsks } = useAskTools()
+    const discordId: number | undefined = useSelector(selectVolunteerDiscordId)
+
+    const onSubmit = useCallback((): void => {
+        dispatch(
+            fetchVolunteerAsksSet(jwtToken, 0, {
+                hiddenAsks: [...(volunteerAsks?.hiddenAsks || []), id],
+            })
+        )
+    }, [dispatch, id, jwtToken, volunteerAsks?.hiddenAsks])
+
+    const needToShow = !discordId
+
+    addAsk(
+        asks,
+        id,
+        volunteerAsks,
+        true,
+        needToShow,
+        <div className={styles.formLine}>
+            <p>
+                Discord nous permet gratuitement et sans pub de s'écrire entre bénévoles via nos
+                navigateurs ou smartphones. Et donc de s'organiser super efficacement !<br />
+                C'est un peu déroutant au début, mais extrêmement pratique car à chaque sujet de
+                discussion correspond un salon différent que tu peux demander à suivre ou ignorer
+                totalement via la gestion des notifications.
+                <br />
+                Pour rejoindre le serveur PeL, voici le lien d'invitation à cliquer :{" "}
+                <a href="https://discord.gg/eXhjKxSBB4" onClick={onSubmit}>
+                    https://discord.gg/eXhjKxSBB4
+                </a>{" "}
+                !
+            </p>
+            <p>
+                Prends le temps de le rejoindre maintenant, c'est via cet outil que la plupart des
+                équipes s'organisent !
+            </p>
+            <p>
+                Pour s'y retrouver tellement on est nombreux (plus de 120), il est nécessaire
+                d'avoir son prénom comme alias. Voir même d'avoir ensuite la première lettre de ton
+                nom de famille si un autre bénévole présent sur le serveur a le même prénom. Pour
+                changer ton alias uniquement sur le serveur PeL, il faut faire un clique droit sur
+                l'icône ronde du serveur en haut à gauche, et aller dans “Modifier le profil du
+                serveur”.
+            </p>
+
+            <div className={styles.formButtons}>
+                <FormButton onClick={onSubmit}>Ok, noté</FormButton>
+            </div>
+        </div>
+    )
+}
+
+// Fetch server-side data here
+export const fetchFor = [fetchVolunteerDiscordIdIfNeed]

src/components/Asks/AskPushNotif.tsx

@@ -191,7 +191,7 @@ export function AskPushNotif(asks: JSX.Element[], id: number): void {
         volunteerAsks,
         true,
         needToShow,
-        <div className={styles.formLine} key="line-participation">
+        <div className={styles.formLine}>
             <label>
                 Acceptes-tu de recevoir une alerte dans ton navigateur quand on en aura
                 d&apos;autres à t'afficher ici ?<br />

src/components/Asks/index.tsx

@@ -3,19 +3,21 @@ import React, { memo } from "react"
 import styles from "./styles.module.scss"
 import { useAskTools } from "./utils"
 import { AskWelcome } from "./AskWelcome"
-import { AskPushNotif } from "./AskPushNotif"
+import { AskDiscord, fetchFor as fetchForDiscord } from "./AskDiscord"
 import { AskDayWishes, fetchFor as fetchForDayWishes } from "./AskDayWishes"
 import { AskTeamWishes, fetchFor as fetchForTeamWishes } from "./AskTeamWishes"
 import {
     AskParticipationDetails,
     fetchFor as fetchForParticipationDetails,
 } from "./AskParticipationDetails"
+import { AskPushNotif } from "./AskPushNotif"
 
 const Asks = (): JSX.Element | null => {
     const { volunteerAsks } = useAskTools()
     const asks: JSX.Element[] = []
 
     AskWelcome(asks, 1)
+    AskDiscord(asks, 3)
 
     AskDayWishes(asks, 10)
     AskTeamWishes(asks, 11)
@@ -28,7 +30,7 @@ const Asks = (): JSX.Element | null => {
             <div key="pushNotifs">
                 <div className={styles.notificationsPage}>
                     <div className={styles.notificationsContent}>
-                        <div className={styles.formLine} key="line-participation">
+                        <div className={styles.formLine}>
                             <label>
                                 Tu as fait le tour des dernières infos ou questions importantes,
                                 merci ! :)
@@ -54,6 +56,7 @@ export default memo(Asks)
 
 // Fetch server-side data here
 export const fetchFor = [
+    ...fetchForDiscord,
     ...fetchForDayWishes,
     ...fetchForTeamWishes,
     ...fetchForParticipationDetails,

src/components/Asks/utils.tsx

@@ -34,7 +34,7 @@ export function addAsk(
     volunteerAsks: VolunteerAsks | undefined,
     isNarrow: boolean,
     needToShow: boolean,
-    children: JSX.Element
+    children: JSX.Element | undefined
 ): void {
     const hidden = volunteerAsks?.hiddenAsks || []
     if (_.includes(hidden, id) || !_.isEmpty(asks) || !needToShow) {

src/components/RegisterForm/index.tsx

@@ -778,7 +778,7 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
                     {meeting}
                     {helpBefore}
                     {pelMemberQuestion}
-                    {pelMember && (
+                    {(potentialVolunteer || pelMember) && (
                         <>
                             {nameMobileEmail}
                             {howToContact !== "Aucun" && submitButton}