feat: created onboarding store and added modals slice

ts/components/registration/ModalContainer.tsx

@@ -0,0 +1,15 @@
+import { useSelector } from 'react-redux';
+import { getTermsOfServicePrivacyModalState } from '../../state/onboarding/selectors/modals';
+import { TermsOfServicePrivacyDialog } from '../dialog/TermsOfServicePrivacyDialog';
+
+export const ModalContainer = () => {
+  const termsOfServicePrivacyModalState = useSelector(getTermsOfServicePrivacyModalState);
+
+  return (
+    <>
+      {termsOfServicePrivacyModalState && (
+        <TermsOfServicePrivacyDialog {...termsOfServicePrivacyModalState} />
+      )}
+    </>
+  );
+};

ts/components/registration/RegistrationStages.tsx

@@ -1,4 +1,5 @@
 import { createContext, useEffect, useMemo, useState } from 'react';
+import { Provider } from 'react-redux';
 import { Data } from '../../data/data';
 import { SettingsKey } from '../../data/settings-key';
 import { getSwarmPollingInstance } from '../../session/apis/snode_api';
@@ -8,6 +9,7 @@ import { PromiseUtils, StringUtils, ToastUtils } from '../../session/utils';
 import { TaskTimedOutError } from '../../session/utils/Promise';
 import { fromHex } from '../../session/utils/String';
 import { trigger } from '../../shims/events';
+import { onboardingStore } from '../../state/onboarding/store';
 import {
   generateMnemonic,
   registerSingleDevice,
@@ -15,6 +17,7 @@ import {
   signInByLinkingDevice,
 } from '../../util/accountManager';
 import { Storage, setSignInByLinking, setSignWithRecoveryPhrase } from '../../util/storage';
+import { ModalContainer } from './ModalContainer';
 import { SignInMode, SignInTab } from './SignInTab';
 import { SignUpMode, SignUpTab } from './SignUpTab';
 
@@ -235,13 +238,16 @@ export const RegistrationStages = () => {
   ]);
 
   return (
-    <div className="session-registration-container">
-      <RegistrationContext.Provider value={memoizedValue}>
-        {(registrationPhase === RegistrationPhase.Start ||
-          registrationPhase === RegistrationPhase.SignUp) && <SignUpTab />}
-        {(registrationPhase === RegistrationPhase.Start ||
-          registrationPhase === RegistrationPhase.SignIn) && <SignInTab />}
-      </RegistrationContext.Provider>
-    </div>
+    <Provider store={onboardingStore}>
+      <ModalContainer />
+      <div className="session-registration-container">
+        <RegistrationContext.Provider value={memoizedValue}>
+          {(registrationPhase === RegistrationPhase.Start ||
+            registrationPhase === RegistrationPhase.SignUp) && <SignUpTab />}
+          {(registrationPhase === RegistrationPhase.Start ||
+            registrationPhase === RegistrationPhase.SignIn) && <SignInTab />}
+        </RegistrationContext.Provider>
+      </div>
+    </Provider>
   );
 };

ts/components/registration/TermsAndConditions.tsx

@@ -1,6 +1,6 @@
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
-import { updateTermsOfServicePrivacyModal } from '../../state/ducks/modalDialog';
+import { updateTermsOfServicePrivacyModal } from '../../state/onboarding/ducks/modals';
 import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
 
 const StyledTermsAndConditions = styled.div`

ts/state/onboarding/ducks/modals.ts

@@ -0,0 +1,28 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { TermsOfServicePrivacyDialogProps } from '../../../components/dialog/TermsOfServicePrivacyDialog';
+
+export type TermsOfServicePrivacyModalState = TermsOfServicePrivacyDialogProps | null;
+
+export type ModalsState = {
+  termsOfServicePrivacyModalState: TermsOfServicePrivacyModalState | null;
+};
+
+const initialState: ModalsState = {
+  termsOfServicePrivacyModalState: null,
+};
+
+export const modalsSlice = createSlice({
+  name: 'modals',
+  initialState,
+  reducers: {
+    updateTermsOfServicePrivacyModal(
+      state,
+      action: PayloadAction<TermsOfServicePrivacyModalState>
+    ) {
+      return { ...state, termsOfServicePrivacyModalState: action.payload };
+    },
+  },
+});
+
+export const { updateTermsOfServicePrivacyModal } = modalsSlice.actions;
+export default modalsSlice.reducer;

ts/state/onboarding/selectors/modals.ts

@@ -0,0 +1,12 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { ModalsState, TermsOfServicePrivacyModalState } from '../ducks/modals';
+import { OnboardingStoreState } from '../store';
+
+const getModals = (state: OnboardingStoreState): ModalsState => {
+  return state.modals;
+};
+
+export const getTermsOfServicePrivacyModalState = createSelector(
+  getModals,
+  (state: ModalsState): TermsOfServicePrivacyModalState => state.termsOfServicePrivacyModalState
+);

ts/state/onboarding/store.ts

@@ -0,0 +1,9 @@
+import { configureStore } from '@reduxjs/toolkit';
+import modalsReducer from './ducks/modals';
+
+export const onboardingStore = configureStore({
+  reducer: { modals: modalsReducer },
+});
+
+export type OnboardingStoreState = ReturnType<typeof onboardingStore.getState>;
+export type OnboardingStoreDispatch = typeof onboardingStore.dispatch;