diff --git a/src/components/Form/FormButton/FormButton.tsx b/src/components/Form/FormButton/FormButton.tsx index 0fbc2df..07e6eeb 100644 --- a/src/components/Form/FormButton/FormButton.tsx +++ b/src/components/Form/FormButton/FormButton.tsx @@ -2,17 +2,23 @@ import { FC, ReactNode } from "react" import styles from "./styles.module.scss" type Props = { + type?: "grey" children: ReactNode - onClick?: () => void | undefined + onClick?: () => void } -const FormButton: FC = ({ children, onClick }): JSX.Element => ( - ) FormButton.defaultProps = { + type: undefined, onClick: undefined, } diff --git a/src/components/Form/FormButton/styles.module.scss b/src/components/Form/FormButton/styles.module.scss index 70bec07..f7c1afb 100644 --- a/src/components/Form/FormButton/styles.module.scss +++ b/src/components/Form/FormButton/styles.module.scss @@ -3,3 +3,6 @@ .button { @include form-button; } +.greyButton { + @include form-grey-button; +} diff --git a/src/components/Notifications/index.tsx b/src/components/Notifications/index.tsx index 2b2d458..dff993d 100644 --- a/src/components/Notifications/index.tsx +++ b/src/components/Notifications/index.tsx @@ -94,7 +94,7 @@ const Notifications = (): JSX.Element | null => { {" "} @@ -104,7 +104,7 @@ const Notifications = (): JSX.Element | null => { {" "} @@ -114,7 +114,7 @@ const Notifications = (): JSX.Element | null => { {" "} diff --git a/src/components/VolunteerBoard/Board.tsx b/src/components/VolunteerBoard/Board.tsx index dec442f..c351a89 100644 --- a/src/components/VolunteerBoard/Board.tsx +++ b/src/components/VolunteerBoard/Board.tsx @@ -11,11 +11,9 @@ import { fetchVolunteerParticipationDetailsSetIfNeed } from "../../store/volunte import { fetchTeamListIfNeed } from "../../store/teamList" import { fetchVolunteerTeamWishesSetIfNeed } from "../../store/volunteerTeamWishesSet" import ContentTitle from "../ui/Content/ContentTitle" -import VolunteerConfirmation from "../VolunteerConfirmation/VolunteerConfirmation" const Board: FC = (): JSX.Element => ( <> - diff --git a/src/components/VolunteerBoard/DayWishes/DayWishes.tsx b/src/components/VolunteerBoard/DayWishes/DayWishes.tsx index 54e0d05..1865e46 100644 --- a/src/components/VolunteerBoard/DayWishes/DayWishes.tsx +++ b/src/components/VolunteerBoard/DayWishes/DayWishes.tsx @@ -7,6 +7,7 @@ import { displayModal, MODAL_IDS } from "../../../store/ui" const DayWishes: FC = (): JSX.Element | null => { const [userWishes] = useUserDayWishes() + const participation = get(userWishes, "active", "inconnu") const dayWishesString = get(userWishes, "dayWishes", []).map(getDayLabel).join(", ") const comment = get(userWishes, "dayWishesComment", "") const execDisplayModal = useAction(displayModal) @@ -15,11 +16,34 @@ const DayWishes: FC = (): JSX.Element | null => { return (
Mes présences
-
- Mes jours : - {dayWishesString && {dayWishesString}} - {!dayWishesString && Non renseignés} -
+ {participation === "non" && ( +
+ Je ne participerai pas à PeL 2022 :( +
+ )} + {participation === "oui" && ( +
+ Je participerai à PeL 2022 ! +
+ )} + {participation === "peut-etre" && ( +
+ Je ne sais pas encore si je participerai à PeL 2022 +
+ )} + {participation === "inconnu" && ( +
Participation à PeL 2022 non renseignée
+ )} + + {participation !== "non" && ( +
+ Mes jours : + {dayWishesString && {dayWishesString}} + {!dayWishesString && ( + Non renseignés + )} +
+ )} {comment && (
Mon commentaire : diff --git a/src/components/VolunteerBoard/DayWishes/styles.module.scss b/src/components/VolunteerBoard/DayWishes/styles.module.scss index 23ead1a..e5b6ef6 100755 --- a/src/components/VolunteerBoard/DayWishes/styles.module.scss +++ b/src/components/VolunteerBoard/DayWishes/styles.module.scss @@ -2,10 +2,19 @@ @import "../../../theme/mixins"; .title { - padding-bottom: 5px; + padding-bottom: 10px; font-weight: bold; } +.participationLabel { + margin-right: 5px; + font-style: bold; +} + +.yesParticipation { + color: $color-orange; +} + .dayWishes { @include inner-content-wrapper(); @@ -13,8 +22,10 @@ padding-right: 90px; } +.participationLabel, .daysLine, .commentLine { + margin-bottom: 5px; span { display: inline-block; } @@ -24,7 +35,8 @@ padding-right: 5px; } -.dayLineEmpty { +.lineEmpty { + margin: 0 5px 5px 0; color: $color-red; font-style: italic; } diff --git a/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx b/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx index a4cdab2..94e5447 100644 --- a/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx +++ b/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx @@ -16,12 +16,17 @@ type Props = { } const DayWishesForm: FC = ({ afterSubmit }): JSX.Element => { + const [participationState, setParticipation] = useState("inconnu") const [selection, setSelection] = useState(daysChoiceSelectionDefaultState) const commentRef = useRef(null) const [userWishes, saveWishes] = useUserDayWishes() + const onParticipationChange = (e: React.ChangeEvent) => + setParticipation(e.target.value) + useEffect(() => { if (!userWishes) return + const participation = get(userWishes, "active", "inconnu") const newSelection = get(userWishes, "dayWishes", []).reduce( (acc: selectionChoices, day: string) => ({ ...acc, @@ -29,9 +34,10 @@ const DayWishesForm: FC = ({ afterSubmit }): JSX.Element => { }), daysChoice ) + setParticipation(participation) setSelection(newSelection) set(commentRef, "current.value", get(userWishes, "dayWishesComment", "")) - }, [setSelection, commentRef, userWishes]) + }, [setParticipation, setSelection, commentRef, userWishes]) const onChoiceClick = useCallback( (id) => { @@ -45,35 +51,105 @@ const DayWishesForm: FC = ({ afterSubmit }): JSX.Element => { const onChoiceSubmit = useCallback(() => { const comment = get(commentRef, "current.value", "") const days = daysChoice.map(({ id }) => id).filter((id) => selection[id]) - saveWishes(days, comment) + saveWishes(participationState, days, comment) if (afterSubmit) afterSubmit() - }, [selection, commentRef, saveWishes, afterSubmit]) + }, [participationState, selection, commentRef, saveWishes, afterSubmit]) return (
-
Mes jours de présence
-
    - {daysChoice.map(({ id, label }) => ( -
  • - -
  • - ))} -
+
Mes jours de présence
+
+
+
+ Si les conditions sanitaires te le permettent, souhaites-tu être bénévole à + PeL 2022 ? +
+
+
+ + + +
+
+ {participationState === "peut-etre" ? ( +
+ On te le reproposera dans quelques temps. +
+ Si tu as besoin d'infos, viens nous en parler sur le serveur Discord ! Pour + le rejoindre,{" "} + + clique ici{" "} + + . +
+ ) : null} +
+
+
+ Quels jours viendras-tu ?
+ (Minimum 2 jours dont l'un sera samedi ou dimanche, idéalement samedi{" "} + et dimanche ^^) +
+
+
+
    + {daysChoice.map(({ id, label }) => ( +
  • + +
  • + ))} +
+
+