diff --git a/web/app.react.js b/web/app.react.js --- a/web/app.react.js +++ b/web/app.react.js @@ -42,6 +42,7 @@ import DisconnectedBar from './redux/disconnected-bar'; import DisconnectedBarVisibilityHandler from './redux/disconnected-bar-visibility-handler'; import FocusHandler from './redux/focus-handler.react'; +import PolicyAcknowledgmentHandler from './redux/policy-acknowledgment-handler.js'; import { useSelector } from './redux/redux-utils'; import VisibilityHandler from './redux/visibility-handler.react'; import history from './router-history'; @@ -155,6 +156,7 @@ + {content} {this.props.modals} diff --git a/web/modals/terms-and-privacy-modal.react.js b/web/modals/terms-and-privacy-modal.react.js --- a/web/modals/terms-and-privacy-modal.react.js +++ b/web/modals/terms-and-privacy-modal.react.js @@ -59,7 +59,7 @@
We recently updated our{' '} {' & '} state.userPolicies?.[policyTypes.tosAndPrivacyPolicy], + ); + const [policyModalKey, setPolicyModalKey] = React.useState(null); + const { pushModal, popModal, modals } = useModalContext(); + + const policyModalVisible = React.useMemo( + () => modals.some(modalEntry => modalEntry[1] === policyModalKey), + [modals, policyModalKey], + ); + + React.useEffect(() => { + if (!termsAndPrivacyState) { + return; + } + + const { isAcknowledged } = termsAndPrivacyState; + if (!isAcknowledged && !policyModalVisible) { + const modalKey = pushModal(); + setPolicyModalKey(modalKey); + } + if (isAcknowledged && policyModalVisible) { + popModal(); + } + }, [policyModalVisible, popModal, pushModal, termsAndPrivacyState]); + + return null; +} + +export default PolicyAcknowledgmentHandler;