From b565bc805f9f12762b320ea8c78deeb00de58534 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 10 Oct 2024 10:56:25 +0200
Subject: [PATCH] open ToS dialog when ToS is provided
---
public/config.js | 10 +++--
.../AppWrapper/AppWrapper.component.tsx | 34 +++++++++--------
.../FunctionalArea/Modal/Modal.component.tsx | 6 +++
.../Modal/ToSModal/ToSModal.component.tsx | 38 +++++++++++++++++++
.../AuthenticatedUser.component.tsx | 13 +++++++
.../configuration/configuration.constants.ts | 1 +
.../configuration/configuration.selectors.ts | 6 +++
src/redux/modal/modal.reducers.ts | 6 +++
src/redux/modal/modal.slice.ts | 3 ++
src/types/modal.ts | 1 +
10 files changed, 98 insertions(+), 20 deletions(-)
create mode 100644 src/components/FunctionalArea/Modal/ToSModal/ToSModal.component.tsx
diff --git a/public/config.js b/public/config.js
index 21e90e50..486d0144 100644
--- a/public/config.js
+++ b/public/config.js
@@ -1,7 +1,9 @@
+// const root = 'https://minerva-dev.lcsb.uni.lu';
+const root = 'https://lux1.atcomp.pl';
window.config = {
- BASE_API_URL: 'https://minerva-dev.lcsb.uni.lu/minerva/api',
- BASE_NEW_API_URL: 'https://minerva-dev.lcsb.uni.lu/minerva/new_api/',
- BASE_MAP_IMAGES_URL: 'https://minerva-dev.lcsb.uni.lu/',
+ BASE_API_URL: `${root}/minerva/api`,
+ BASE_NEW_API_URL: `${root}/minerva/new_api/`,
+ BASE_MAP_IMAGES_URL: `${root}/`,
DEFAULT_PROJECT_ID: 'sample',
- ADMIN_PANEL_URL: 'https://minerva-dev.lcsb.uni.lu/minerva/admin.xhtml',
+ ADMIN_PANEL_URL: `${root}/minerva/admin.xhtml`,
};
diff --git a/src/components/AppWrapper/AppWrapper.component.tsx b/src/components/AppWrapper/AppWrapper.component.tsx
index 5014ee69..2bae3997 100644
--- a/src/components/AppWrapper/AppWrapper.component.tsx
+++ b/src/components/AppWrapper/AppWrapper.component.tsx
@@ -8,19 +8,21 @@ interface AppWrapperProps {
children: ReactNode;
}
-export const AppWrapper = ({ children }: AppWrapperProps): JSX.Element => (
- <MapInstanceProvider>
- <Provider store={store}>
- <>
- <Toaster
- position="top-center"
- visibleToasts={1}
- style={{
- width: '700px',
- }}
- />
- {children}
- </>
- </Provider>
- </MapInstanceProvider>
-);
+export const AppWrapper = ({ children }: AppWrapperProps): JSX.Element => {
+ return (
+ <MapInstanceProvider>
+ <Provider store={store}>
+ <>
+ <Toaster
+ position="top-center"
+ visibleToasts={1}
+ style={{
+ width: '700px',
+ }}
+ />
+ {children}
+ </>
+ </Provider>
+ </MapInstanceProvider>
+ );
+};
diff --git a/src/components/FunctionalArea/Modal/Modal.component.tsx b/src/components/FunctionalArea/Modal/Modal.component.tsx
index 8b97ece7..2768dfa3 100644
--- a/src/components/FunctionalArea/Modal/Modal.component.tsx
+++ b/src/components/FunctionalArea/Modal/Modal.component.tsx
@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic';
import { AccessDeniedModal } from '@/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component';
import { AddCommentModal } from '@/components/FunctionalArea/Modal/AddCommentModal/AddCommentModal.component';
import { LicenseModal } from '@/components/FunctionalArea/Modal/LicenseModal';
+import { ToSModal } from '@/components/FunctionalArea/Modal/ToSModal/ToSModal.component';
import { EditOverlayModal } from './EditOverlayModal';
import { LoginModal } from './LoginModal';
import { ErrorReportModal } from './ErrorReportModal';
@@ -63,6 +64,11 @@ export const Modal = (): React.ReactNode => {
<AccessDeniedModal />
</ModalLayout>
)}
+ {isOpen && modalName === 'terms-of-service' && (
+ <ModalLayout>
+ <ToSModal />
+ </ModalLayout>
+ )}
{isOpen && modalName === 'select-project' && (
<ModalLayout>
<AccessDeniedModal />
diff --git a/src/components/FunctionalArea/Modal/ToSModal/ToSModal.component.tsx b/src/components/FunctionalArea/Modal/ToSModal/ToSModal.component.tsx
new file mode 100644
index 00000000..222c4fdc
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/ToSModal/ToSModal.component.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { Button } from '@/shared/Button';
+
+import { logout } from '@/redux/user/user.thunks';
+
+export const ToSModal: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const updateUserTosHandler = async (): Promise<void> => {
+ // eslint-disable-next-line no-console
+ console.log('update');
+ };
+
+ const logoutHandler = (): void => {
+ dispatch(logout());
+ };
+
+ return (
+ <div className="w-[400px] border border-t-[#E1E0E6] bg-white p-[24px]">
+ <div className="grid grid-cols-2 gap-2">
+ <div>
+ <Button
+ className="ring-transparent hover:ring-transparent"
+ variantStyles="secondary"
+ onClick={updateUserTosHandler}
+ >
+ OK
+ </Button>
+ </div>
+ <div className="text-center">
+ <Button className="block w-full" onClick={logoutHandler}>
+ I disagree
+ </Button>
+ </div>
+ </div>
+ </div>
+ );
+};
diff --git a/src/components/FunctionalArea/TopBar/User/AuthenticatedUser/AuthenticatedUser.component.tsx b/src/components/FunctionalArea/TopBar/User/AuthenticatedUser/AuthenticatedUser.component.tsx
index 57b83675..3c5dc54d 100644
--- a/src/components/FunctionalArea/TopBar/User/AuthenticatedUser/AuthenticatedUser.component.tsx
+++ b/src/components/FunctionalArea/TopBar/User/AuthenticatedUser/AuthenticatedUser.component.tsx
@@ -1,6 +1,11 @@
import { useSelect } from 'downshift';
import { IconButton } from '@/shared/IconButton';
import { twMerge } from 'tailwind-merge';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { userSelector } from '@/redux/user/user.selectors';
+import { openToSModal } from '@/redux/modal/modal.slice';
+import { termsOfServiceValSelector } from '@/redux/configuration/configuration.selectors';
import { useUserActions } from '../hooks/useUserActions';
export const AuthenticatedUser = (): React.ReactNode => {
@@ -10,6 +15,14 @@ export const AuthenticatedUser = (): React.ReactNode => {
items: actions,
});
+ const dispatch = useAppDispatch();
+ const { userData } = useAppSelector(userSelector);
+ const termsOfService = useAppSelector(termsOfServiceValSelector);
+
+ if (userData && !userData.termsOfUseConsent && termsOfService) {
+ dispatch(openToSModal());
+ }
+
return (
<>
<IconButton
diff --git a/src/redux/configuration/configuration.constants.ts b/src/redux/configuration/configuration.constants.ts
index 59ef10da..28578664 100644
--- a/src/redux/configuration/configuration.constants.ts
+++ b/src/redux/configuration/configuration.constants.ts
@@ -5,6 +5,7 @@ export const NEUTRAL_COLOR_VAL_NAME_ID = 'NEUTRAL_COLOR_VAL';
export const OVERLAY_OPACITY_NAME_ID = 'OVERLAY_OPACITY';
export const SEARCH_DISTANCE_NAME_ID = 'SEARCH_DISTANCE';
export const REQUEST_ACCOUNT_EMAIL = 'REQUEST_ACCOUNT_EMAIL';
+export const TERMS_OF_SERVICE_ID = 'TERMS_OF_USE';
export const LEGEND_FILE_NAMES_IDS = [
'LEGEND_FILE_1',
diff --git a/src/redux/configuration/configuration.selectors.ts b/src/redux/configuration/configuration.selectors.ts
index ae5b97b7..176847d4 100644
--- a/src/redux/configuration/configuration.selectors.ts
+++ b/src/redux/configuration/configuration.selectors.ts
@@ -18,6 +18,7 @@ import {
SVG_IMAGE_HANDLER_NAME_ID,
SEARCH_DISTANCE_NAME_ID,
REQUEST_ACCOUNT_EMAIL,
+ TERMS_OF_SERVICE_ID,
} from './configuration.constants';
import { ConfigurationHandlersIds, ConfigurationImageHandlersIds } from './configuration.types';
@@ -63,6 +64,11 @@ export const adminEmailValSelector = createSelector(
state => configurationAdapterSelectors.selectById(state, REQUEST_ACCOUNT_EMAIL)?.value,
);
+export const termsOfServiceValSelector = createSelector(
+ configurationOptionsSelector,
+ state => configurationAdapterSelectors.selectById(state, TERMS_OF_SERVICE_ID)?.value,
+);
+
export const defaultLegendImagesSelector = createSelector(configurationOptionsSelector, state =>
LEGEND_FILE_NAMES_IDS.map(
legendNameId => configurationAdapterSelectors.selectById(state, legendNameId)?.value,
diff --git a/src/redux/modal/modal.reducers.ts b/src/redux/modal/modal.reducers.ts
index 4556c17c..236f7f80 100644
--- a/src/redux/modal/modal.reducers.ts
+++ b/src/redux/modal/modal.reducers.ts
@@ -109,3 +109,9 @@ export const openLicenseModalReducer = (state: ModalState, action: PayloadAction
state.modalName = 'license';
state.modalTitle = `License: ${action.payload}`;
};
+
+export const openToSModalReducer = (state: ModalState): void => {
+ state.isOpen = true;
+ state.modalName = 'terms-of-service';
+ state.modalTitle = 'Terms of service!';
+};
diff --git a/src/redux/modal/modal.slice.ts b/src/redux/modal/modal.slice.ts
index 3e945e4a..bb145852 100644
--- a/src/redux/modal/modal.slice.ts
+++ b/src/redux/modal/modal.slice.ts
@@ -15,6 +15,7 @@ import {
openAccessDeniedModalReducer,
openSelectProjectModalReducer,
openLicenseModalReducer,
+ openToSModalReducer,
} from './modal.reducers';
const modalSlice = createSlice({
@@ -35,6 +36,7 @@ const modalSlice = createSlice({
openAccessDeniedModal: openAccessDeniedModalReducer,
openSelectProjectModal: openSelectProjectModalReducer,
openLicenseModal: openLicenseModalReducer,
+ openToSModal: openToSModalReducer,
},
});
@@ -53,6 +55,7 @@ export const {
openAccessDeniedModal,
openSelectProjectModal,
openLicenseModal,
+ openToSModal,
} = modalSlice.actions;
export default modalSlice.reducer;
diff --git a/src/types/modal.ts b/src/types/modal.ts
index 1030c46b..eaf3a498 100644
--- a/src/types/modal.ts
+++ b/src/types/modal.ts
@@ -10,4 +10,5 @@ export type ModalName =
| 'error-report'
| 'access-denied'
| 'select-project'
+ | 'terms-of-service'
| 'logged-in-menu';
--
GitLab