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;