Merge branch 'fix-up-registration-modal' of Arnei/opencast-admin-inte…

…rface into main Pull request #816 Fix up registration modal
opencast · Jul 24, 2024 · 33def3c · 33def3c
2 parents 1e3906a + 1f95393
commit 33def3c
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 12 deletions.
diff --git 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<keyof typeof states>("form");
+	const [state, setState] = useState<keyof typeof states>("information");
 	// initial values for Formik
 	const [initialValues, setInitialValues] = useState<Registration & { agreedToPolicy: boolean, registered: boolean }>({
 		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 = ({
 										</span>
 										<b>
 											(<span>{t("HELP.HELP")}</span>)
+											{" "}
 											<span className="fa fa-question-circle" />
+											{" > "}
 											<span>{t("HELP.ADOPTER_REGISTRATION")}</span>
 										</b>
 										<span>
@@ -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"
-															)}
+															) + " "}
 														</span>
 														<span>
 															{t(
@@ -625,17 +640,52 @@ const RegistrationModal = ({
 								</div>
 							)}
 
+							{/* shows summary of information */}
+							{state === "summary" && (
+								<div className="modal-content" style={{ display: "block" }}>
+									<div className="modal-body">
+										<p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.HEADER")}</p>
+										<p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.GENERAL_HEADER")}</p>
+										<div className="scrollbox">
+											<pre>
+												{JSON.stringify(formik.values, null, "\t")}
+											</pre>
+										</div>
+										<br />
+
+										{formik.values.allowsStatistics ?
+										<>
+											<p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.STATS_HEADER")}</p>
+											<div className="scrollbox">
+												<pre>
+													{JSON.stringify(statisticsSummary?.statistics, null, "\t")}
+												</pre>
+											</div>
+										</>
+										: <p>{t("ADOPTER_REGISTRATION.MODAL.SUMMARY_STATE.NO_STATS_HEADER")}</p>
+										}
+									</div>
+								</div>
+							)}
+
 							{/* navigation buttons depending on state of modal */}
 							<footer>
 								{states[state].buttons.submit && (
 									<div className="pull-right">
 										{/* submit of form content */}
-										{state === "form" ? (
+										{state === "summary" ?
+												<button
+												onClick={() => formik.handleSubmit()}
+												className={cn("submit")}
+											>
+												{t(states[state].buttons.submitButtonText)}
+											</button>
+										: state === "form" ?
 											<button
 												disabled={
 													!(formik.isValid && formik.values.agreedToPolicy)
 												}
-												onClick={() => formik.handleSubmit()}
+												onClick={() => onClickContinue()}
 												className={cn("submit", {
 													active:
 														formik.isValid && formik.values.agreedToPolicy,
@@ -646,21 +696,21 @@ const RegistrationModal = ({
 											>
 												{t(states[state].buttons.submitButtonText)}
 											</button>
-										) : (
+										:
 											// continue button or confirm button (depending on state)
 											<button
 												className="continue-registration"
 												onClick={() => onClickContinue()}
 											>
 												{t(states[state].buttons.submitButtonText)}
 											</button>
-										)}
+										}
 									</div>
 								)}
 
 								{/* back, delete or cancel button depending on state */}
 								<div className="pull-left">
-									{state !== "form" && states[state].buttons.back && (
+									{states[state].buttons.back && (
 										<button
 											className="cancel"
 // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message

diff --git a/src/configs/adopterRegistrationConfig.ts b/src/configs/adopterRegistrationConfig.ts
@@ -16,8 +16,8 @@ export const states = {
 	},
 	form: {
 		nextState: {
-			0: "thank_you",
-			1: "error",
+			0: "close",
+			1: "summary",
 			2: "legal_info",
 			3: "update",
 			4: "delete_submit",
@@ -29,7 +29,7 @@ export const states = {
 			skip: false,
 			close: true,
 			delete: false,
-			submitButtonText: "SUBMIT",
+			submitButtonText: "ADOPTER_REGISTRATION.MODAL.CONTINUE",
 		},
 	},
 	save: {
@@ -69,7 +69,7 @@ export const states = {
 			back: true,
 			skip: false,
 			close: true,
-			submitButtonText: "CONFIRM",
+			submitButtonText: "ADOPTER_REGISTRATION.MODAL.CONFIRM",
 		},
 	},
 	delete: {
@@ -85,6 +85,20 @@ export const states = {
 			submitButtonText: "",
 		},
 	},
+	summary: {
+		nextState: {
+			0: "thank_you",
+			1: "error",
+			5: "form",
+		},
+		buttons: {
+			submit: true,
+			back: true,
+			skip: false,
+			close: true,
+			submitButtonText: "ADOPTER_REGISTRATION.MODAL.SUBMIT",
+		},
+	},
 	thank_you: {
 		nextState: {
 			0: "close",

diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json b/src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
@@ -389,9 +389,17 @@
 			"SKIP": "Not now",
 			"CONTINUE": "Continue",
 			"BACK": "Back",
+			"SUBMIT": "Submit",
+			"CONFIRM": "Confirm",
 			"LEGAL_INFO_STATE": {
 				"HEADER": "Terms of Service and Privacy Policy"
 			},
+			"SUMMARY_STATE": {
+				"HEADER": "This is a JSON summary of exactly what would be sent to Opencast's servers",
+				"GENERAL_HEADER": "Adopter Information",
+				"STATS_HEADER": "Statistical Information",
+				"NO_STATS_HEADER": "No statistics data will be shared"
+			},
 			"INFORMATION_STATE": {
 				"HEADER": "Thank you for using Opencast!",
 				"INFORMATION_PARAGRAPH_1": "Our developers are constantly working to provide you the best possible user experience. For that, we need to know more about who uses Opencast and how it is used. You can help us with a quick registration.",

diff --git a/src/styles/extensions/views/modals/_registration.scss b/src/styles/extensions/views/modals/_registration.scss
@@ -173,6 +173,7 @@
         h2 {
           font-size: 31px;
           color: $dark-prim-color;
+          overflow: visible;
         }
 
         &.for-header {

diff --git a/src/utils/adopterRegistrationUtils.ts b/src/utils/adopterRegistrationUtils.ts
@@ -8,6 +8,13 @@ export const fetchAdopterRegistration = async () => {
 	return await response.data;
 };
 
+// get statistics information about adopter
+export const fetchAdopterStatisticsSummary = async () => {
+	const response = await axios.get("/admin-ng/adopter/summary");
+
+	return await response.data;
+};
+
 export type Registration = {
 	contactMe: boolean,
 	allowsStatistics: boolean,