diff --git a/ts/components/registration/ModalContainer.tsx b/ts/components/registration/ModalContainer.tsx new file mode 100644 index 000000000..75fd21498 --- /dev/null +++ b/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 && ( + + )} + + ); +}; diff --git a/ts/components/registration/RegistrationStages.tsx b/ts/components/registration/RegistrationStages.tsx index 2109ad15e..6da3476b2 100644 --- a/ts/components/registration/RegistrationStages.tsx +++ b/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 ( -
- - {(registrationPhase === RegistrationPhase.Start || - registrationPhase === RegistrationPhase.SignUp) && } - {(registrationPhase === RegistrationPhase.Start || - registrationPhase === RegistrationPhase.SignIn) && } - -
+ + +
+ + {(registrationPhase === RegistrationPhase.Start || + registrationPhase === RegistrationPhase.SignUp) && } + {(registrationPhase === RegistrationPhase.Start || + registrationPhase === RegistrationPhase.SignIn) && } + +
+
); }; diff --git a/ts/components/registration/TermsAndConditions.tsx b/ts/components/registration/TermsAndConditions.tsx index 29a494a39..39bc083e8 100644 --- a/ts/components/registration/TermsAndConditions.tsx +++ b/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` diff --git a/ts/state/onboarding/ducks/modals.ts b/ts/state/onboarding/ducks/modals.ts new file mode 100644 index 000000000..9fa1ea20f --- /dev/null +++ b/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 + ) { + return { ...state, termsOfServicePrivacyModalState: action.payload }; + }, + }, +}); + +export const { updateTermsOfServicePrivacyModal } = modalsSlice.actions; +export default modalsSlice.reducer; diff --git a/ts/state/onboarding/selectors/modals.ts b/ts/state/onboarding/selectors/modals.ts new file mode 100644 index 000000000..3f6483c1c --- /dev/null +++ b/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 +); diff --git a/ts/state/onboarding/store.ts b/ts/state/onboarding/store.ts new file mode 100644 index 000000000..f3cc4b4b4 --- /dev/null +++ b/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; +export type OnboardingStoreDispatch = typeof onboardingStore.dispatch;