Add Meals form and ask; Add disabling registration

src/components/Asks/AskMeals.tsx

@@ -0,0 +1,38 @@
+import { get } from "lodash"
+import { useCallback } from "react"
+import { fetchVolunteerAsksSet } from "../../store/volunteerAsksSet"
+import { useAskTools, addAsk, answerLaterOnProfile } from "./utils"
+import MealsForm, { fetchFor as fetchForMealsForm } from "../VolunteerBoard/MealsForm/MealsForm"
+import { useUserMeals } from "../VolunteerBoard/meals.utils"
+
+export function AskMeals(asks: JSX.Element[], id: number): void {
+    const { dispatch, jwtToken, volunteerAsks } = useAskTools()
+
+    const onSubmit = useCallback((): void => {
+        dispatch(
+            fetchVolunteerAsksSet(jwtToken, 0, {
+                hiddenAsks: [...(volunteerAsks?.hiddenAsks || []), id],
+            })
+        )
+    }, [dispatch, id, jwtToken, volunteerAsks?.hiddenAsks])
+
+    const [meals] = useUserMeals()
+    const needsMeals = get(meals, "needsMeals", false)
+    const canHostCount = get(meals, "canHostCount", 0)
+    const distanceToFestival = get(meals, "distanceToFestival", 0)
+    const mealsComment = get(meals, "mealsComment", "")
+    const needToShow =
+        !needsMeals && canHostCount === 0 && distanceToFestival === 0 && mealsComment === ""
+
+    addAsk(
+        asks,
+        id,
+        volunteerAsks,
+        false,
+        needToShow,
+        <MealsForm afterSubmit={onSubmit}>{answerLaterOnProfile}</MealsForm>
+    )
+}
+
+// Fetch server-side data here
+export const fetchFor = [...fetchForMealsForm]

src/components/Asks/index.tsx

@@ -6,6 +6,7 @@ import { AskWelcome } from "./AskWelcome"
 import { AskDiscord, fetchFor as fetchForDiscord } from "./AskDiscord"
 import { AskDayWishes, fetchFor as fetchForDayWishes } from "./AskDayWishes"
 import { AskHosting, fetchFor as fetchForHosting } from "./AskHosting"
+import { AskMeals, fetchFor as fetchForMeals } from "./AskMeals"
 import { AskTeamWishes, fetchFor as fetchForTeamWishes } from "./AskTeamWishes"
 import {
     AskParticipationDetails,
@@ -24,6 +25,7 @@ const Asks = (): JSX.Element | null => {
     AskTeamWishes(asks, 11)
     AskParticipationDetails(asks, 12)
     AskHosting(asks, 20)
+    AskMeals(asks, 22)
 
     AskPushNotif(asks, 99)
 
@@ -61,6 +63,7 @@ export const fetchFor = [
     ...fetchForDiscord,
     ...fetchForDayWishes,
     ...fetchForHosting,
+    ...fetchForMeals,
     ...fetchForTeamWishes,
     ...fetchForParticipationDetails,
 ]