Fix policy overlay logic (#8793)

* Only enable policy update overlay once the actual Overlay mounts (after onboarding and all that)

* Disable policy overlay in e2e

* Add comments

* Add extra insurance

* Rm log

1 files changed, 43 insertions, 8 deletions

diff --git a/src/components/PolicyUpdateOverlay/context.tsx b/src/components/PolicyUpdateOverlay/context.tsx
index 68ae7bbd8..4f6e56e21 100644
--- a/src/components/PolicyUpdateOverlay/context.tsx
+++ b/src/components/PolicyUpdateOverlay/context.tsx
@@ -1,32 +1,67 @@
-import {createContext, type ReactNode, useContext} from 'react'
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
 
+import {useSession} from '#/state/session'
 import {Provider as PortalProvider} from '#/components/PolicyUpdateOverlay/Portal'
 import {
   type PolicyUpdateState,
   usePolicyUpdateState,
 } from '#/components/PolicyUpdateOverlay/usePolicyUpdateState'
 
-const Context = createContext<PolicyUpdateState>({
-  completed: true,
-  complete: () => {},
+const Context = createContext<{
+  state: PolicyUpdateState
+  setIsReadyToShowOverlay: () => void
+}>({
+  state: {
+    completed: true,
+    complete: () => {},
+  },
+  /**
+   * Although our data will be ready to go when the app shell mounts, we don't
+   * want to show the overlay until we actually render it, which happens after
+   * sigin/signup/onboarding in `createNativeStackNavigatorWithAuth`.
+   */
+  setIsReadyToShowOverlay: () => {},
 })
 
-export function usePolicyUpdateStateContext() {
+export function usePolicyUpdateContext() {
   const context = useContext(Context)
   if (!context) {
     throw new Error(
-      'usePolicyUpdateStateContext must be used within a PolicyUpdateProvider',
+      'usePolicyUpdateContext must be used within a PolicyUpdateProvider',
     )
   }
   return context
 }
 
 export function Provider({children}: {children?: ReactNode}) {
-  const state = usePolicyUpdateState()
+  const {hasSession} = useSession()
+  const [isReadyToShowOverlay, setIsReadyToShowOverlay] = useState(false)
+  const state = usePolicyUpdateState({
+    // only enable the policy update overlay in non-test environments
+    enabled:
+      isReadyToShowOverlay && hasSession && process.env.NODE_ENV !== 'test',
+  })
+
+  const ctx = useMemo(
+    () => ({
+      state,
+      setIsReadyToShowOverlay() {
+        if (isReadyToShowOverlay) return
+        setIsReadyToShowOverlay(true)
+      },
+    }),
+    [state, isReadyToShowOverlay, setIsReadyToShowOverlay],
+  )
 
   return (
     <PortalProvider>
-      <Context.Provider value={state}>{children}</Context.Provider>
+      <Context.Provider value={ctx}>{children}</Context.Provider>
     </PortalProvider>
   )
 }