diff --git a/frontend/front/src/pages/Public/Pages/SurveyPage.js b/frontend/front/src/pages/Public/Pages/SurveyPage.js index a8137d4a..33ad2574 100644 --- a/frontend/front/src/pages/Public/Pages/SurveyPage.js +++ b/frontend/front/src/pages/Public/Pages/SurveyPage.js @@ -1,29 +1,23 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { useTranslation } from "react-i18next"; import { Alert, Box, Container, Snackbar, Stack } from "@mui/material"; +import React, { useCallback, useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; -import { - RECAPTCHA_ACTION_PUBLIC_SURVEY, - useGetReCAPTCHAToken, -} from "../../../components/ReCaptcha"; import { useCreateHomeMutation, useCreateSurveyVisitMutation, } from "../../../api/apiSlice"; +import { + RECAPTCHA_ACTION_PUBLIC_SURVEY, + useGetReCAPTCHAToken, +} from "../../../components/ReCaptcha"; -import { AddressValidatorComponent } from "../Components/AddressValidatorComponent"; -import Heading1BlueBgGround from "../Components/Typography/Heading1BlueBgGround"; import { HeatPumpFade } from "../../../components/HeatPumpFade"; import { HeatPumpSlide } from "../../../components/HeatPumpSlide"; +import { buildSurveyVisitData } from "../../../util/surveyUtils"; +import { AddressValidatorComponent } from "../Components/AddressValidatorComponent"; import { PublicSurvey } from "../Components/PublicSurvey"; import { ThanksForSubmission } from "../Components/ThanksForSubmission"; -import { buildSurveyVisitData } from "../../../util/surveyUtils"; -import CanonicalizationLoader, { - CANONICALIZED, - UNCANONICALIZED, - UNRECOGNIZED, - VALIDATION_ERROR, -} from "../Components/CanonicalizationLoader"; +import Heading1BlueBgGround from "../Components/Typography/Heading1BlueBgGround"; const STEP_ADDRESS = "PHASE_ADDRESS"; const STEP_SURVEY = "PHASE_SURVEY"; @@ -35,7 +29,7 @@ const STEP_THANKS = "PHASE_THANKS"; * This page should handle all API calls so that component switching is easier to control */ export const SurveyPage = () => { - const [validationStatus, setValidationStatus] = useState(); + const [step, setStep] = useState(STEP_ADDRESS); const { t } = useTranslation(); @@ -49,6 +43,7 @@ export const SurveyPage = () => { data: createHomeData, error: createHomeError, isLoading: isCreateHomeLoading, + isSuccess: isCreateHomeSucccess, }, ] = useCreateHomeMutation(); @@ -57,7 +52,7 @@ export const SurveyPage = () => { { isLoading: isSurveyVisitLoading, error: surveyVisitError, - isSuccess: isSurveyVisitSuccess, + isSuccess: isSurveyVisitSucess, }, ] = useCreateSurveyVisitMutation(); @@ -70,6 +65,15 @@ export const SurveyPage = () => { [createHome, getReCaptchaToken] ); + useEffect(() => { + if (isCreateHomeSucccess) { + setStep(STEP_SURVEY); + } + if (isSurveyVisitSucess) { + setStep(STEP_THANKS); + } + }, [isCreateHomeSucccess, isSurveyVisitSucess]); + const handleAddSurveyVisit = useCallback( async (answers, surveyId, homeId, _) => { const recaptcha = await getReCaptchaToken("create_survey"); @@ -80,36 +84,14 @@ export const SurveyPage = () => { }), recaptcha, }); + if (isSurveyVisitSucess) { + setStep(STEP_THANKS); + } return surveyVisit; }, - [addSurveyVisit, getReCaptchaToken] + [addSurveyVisit, isSurveyVisitSucess, getReCaptchaToken] ); - const isCanonicalized = validationStatus === CANONICALIZED; - - const step = useMemo(() => { - if (!isCanonicalized && !isSurveyVisitSuccess) { - return STEP_ADDRESS; - } else if (isSurveyVisitSuccess) { - return STEP_THANKS; - } else if (!!createHomeData && isCanonicalized) { - return STEP_SURVEY; - } - }, [createHomeData, isSurveyVisitSuccess, isCanonicalized]); - - const showValidationLoader = useMemo(() => { - if (!createHomeData?.id) return false; - if (step !== STEP_ADDRESS) return false; - if (validationStatus === UNCANONICALIZED || validationStatus === undefined) - return true; - return false; // For completed validations (unrecognized or canonicalized). - }, [createHomeData, validationStatus, step]); - - // Reset validation status on resubmission. - useEffect(() => { - if (isCreateHomeLoading) setValidationStatus(undefined); - }, [isCreateHomeLoading]); - const pageContent = useCallback( () => ( <> @@ -139,25 +121,12 @@ export const SurveyPage = () => { - - - - {t("public.survey.alert1")} {t("public.survey.alert2")} - - {t("public.survey.alert3")} - - - {t("public.survey.alert4")} - ), [ @@ -169,8 +138,6 @@ export const SurveyPage = () => { isSurveyVisitLoading, step, surveyVisitError, - showValidationLoader, - validationStatus, t, ] );