open ToS dialog when ToS is provided

public/config.js

+// 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`,
 };

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>
+  );
+};

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 />

src/components/FunctionalArea/Modal/ToSModal/ToSModal.component.tsx

+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>
+  );
+};

src/components/FunctionalArea/TopBar/User/AuthenticatedUser/AuthenticatedUser.component.tsx

 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

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',

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,

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!';
+};

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;

src/types/modal.ts

@@ -10,4 +10,5 @@ export type ModalName =
   | 'error-report'
   | 'access-denied'
   | 'select-project'
+  | 'terms-of-service'
   | 'logged-in-menu';