diff --git a/src/components/shared/RegistrationModal.tsx b/src/components/shared/RegistrationModal.tsx index 010fd9756f..4b3feb7f41 100644 --- a/src/components/shared/RegistrationModal.tsx +++ b/src/components/shared/RegistrationModal.tsx @@ -10,6 +10,7 @@ import { Registration, deleteAdopterRegistration, fetchAdopterRegistration, + fetchAdopterStatisticsSummary, postRegistration, } from "../../utils/adopterRegistrationUtils"; import { useHotkeys } from "react-hotkeys-hook"; @@ -26,7 +27,7 @@ const RegistrationModal = ({ const { t } = useTranslation(); // current state of the modal that is shown - const [state, setState] = useState("form"); + const [state, setState] = useState("information"); // initial values for Formik const [initialValues, setInitialValues] = useState({ contactMe: false, @@ -46,6 +47,11 @@ const RegistrationModal = ({ registered: false, }); + const [statisticsSummary, setStatisticsSummary] = useState<{ + general: { [key: string]: unknown }, + statistics: { [key: string]: unknown }, + }>(); + useHotkeys( availableHotkeys.general.CLOSE_MODAL.sequence, () => close(), @@ -59,6 +65,7 @@ const RegistrationModal = ({ useEffect(() => { fetchRegistrationInfos().then((r) => console.log(r)); + fetchStatisticSummary(); }, []); const onClickContinue = async () => { @@ -77,6 +84,12 @@ const RegistrationModal = ({ setInitialValues(registrationInfo); }; + const fetchStatisticSummary = async () => { + const info = await fetchAdopterStatisticsSummary(); + + setStatisticsSummary(info); + } + const handleSubmit = (values: Registration) => { // post request for adopter information postRegistration(values) @@ -238,7 +251,9 @@ const RegistrationModal = ({ ({t("HELP.HELP")}) + {" "} + {" > "} {t("HELP.ADOPTER_REGISTRATION")} @@ -608,9 +623,9 @@ const RegistrationModal = ({ setState(states[state].nextState[2] as keyof typeof states) } > - {t( + {" " + t( "ADOPTER_REGISTRATION.MODAL.FORM_STATE.READ_TERMS_OF_USE_LINK" - )} + ) + " "} {t( @@ -625,17 +640,52 @@ const RegistrationModal = ({ )} + {/* shows summary of information */} + {state === "summary" && ( +
+
+

{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.HEADER")}

+

{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.GENERAL_HEADER")}

+
+
+												{JSON.stringify(formik.values, null, "\t")}
+											
+
+
+ + {formik.values.allowsStatistics ? + <> +

{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.STATS_HEADER")}

+
+
+													{JSON.stringify(statisticsSummary?.statistics, null, "\t")}
+												
+
+ + :

{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.NO_STATS_HEADER")}

+ } +
+
+ )} + {/* navigation buttons depending on state of modal */}