Provide geo-gated users optional GPS fallback for precise location data (#8973)

Author: estrattonbailey

.env.example

@@ -33,3 +33,9 @@ EXPO_PUBLIC_SENTRY_DSN=
 
 # Bitdrift API key. If undefined, Bitdrift will be disabled.
 EXPO_PUBLIC_BITDRIFT_API_KEY=
+
+# bapp-config web worker URL
+BAPP_CONFIG_DEV_URL=
+
+# Dev-only passthrough value for bapp-config web worker
+BAPP_CONFIG_DEV_BYPASS_SECRET=

app.config.js

@@ -360,6 +360,7 @@ module.exports = function (_config) {
           },
         ],
         ['expo-screen-orientation', {initialOrientation: 'PORTRAIT_UP'}],
+        ['expo-location'],
       ].filter(Boolean),
       extra: {
         eas: {

assets/icons/pinLocationFilled_stroke2_corner0_rounded.svg

@@ -151,6 +151,7 @@
     "expo-linear-gradient": "~14.1.5",
     "expo-linking": "~7.1.5",
     "expo-localization": "~16.1.5",
+    "expo-location": "~18.1.6",
     "expo-media-library": "~17.1.7",
     "expo-notifications": "~0.31.3",
     "expo-screen-orientation": "~8.1.7",

assets/icons/pinLocation_stroke2_corner0_rounded.svg

@@ -32,8 +32,8 @@ import {Provider as DialogStateProvider} from '#/state/dialogs'
 import {Provider as EmailVerificationProvider} from '#/state/email-verification'
 import {listenSessionDropped} from '#/state/events'
 import {
-  beginResolveGeolocation,
-  ensureGeolocationResolved,
+  beginResolveGeolocationConfig,
+  ensureGeolocationConfigIsResolved,
   Provider as GeolocationProvider,
 } from '#/state/geolocation'
 import {GlobalGestureEventsProvider} from '#/state/global-gesture-events'
@@ -91,7 +91,7 @@ if (isAndroid) {
 /**
  * Begin geolocation ASAP
  */
-beginResolveGeolocation()
+beginResolveGeolocationConfig()
 
 function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
@@ -203,9 +203,10 @@ function App() {
   const [isReady, setReady] = useState(false)
 
   React.useEffect(() => {
-    Promise.all([initPersistedState(), ensureGeolocationResolved()]).then(() =>
-      setReady(true),
-    )
+    Promise.all([
+      initPersistedState(),
+      ensureGeolocationConfigIsResolved(),
+    ]).then(() => setReady(true))
   }, [])
 
   if (!isReady) {

package.json

@@ -21,8 +21,8 @@ import {Provider as DialogStateProvider} from '#/state/dialogs'
 import {Provider as EmailVerificationProvider} from '#/state/email-verification'
 import {listenSessionDropped} from '#/state/events'
 import {
-  beginResolveGeolocation,
-  ensureGeolocationResolved,
+  beginResolveGeolocationConfig,
+  ensureGeolocationConfigIsResolved,
   Provider as GeolocationProvider,
 } from '#/state/geolocation'
 import {Provider as HomeBadgeProvider} from '#/state/home-badge'
@@ -69,7 +69,7 @@ import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottom
 /**
  * Begin geolocation ASAP
  */
-beginResolveGeolocation()
+beginResolveGeolocationConfig()
 
 function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
@@ -178,9 +178,10 @@ function App() {
   const [isReady, setReady] = useState(false)
 
   React.useEffect(() => {
-    Promise.all([initPersistedState(), ensureGeolocationResolved()]).then(() =>
-      setReady(true),
-    )
+    Promise.all([
+      initPersistedState(),
+      ensureGeolocationConfigIsResolved(),
+    ]).then(() => setReady(true))
   }, [])
 
   if (!isReady) {

src/App.native.tsx

@@ -6,16 +6,27 @@ import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
+import {useDeviceGeolocationApi} from '#/state/geolocation'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {DeviceLocationRequestDialog} from '#/components/dialogs/DeviceLocationRequestDialog'
+import {Divider} from '#/components/Divider'
 import {Full as Logo, Mark} from '#/components/icons/Logo'
+import {PinLocation_Stroke2_Corner0_Rounded as LocationIcon} from '#/components/icons/PinLocation'
 import {SimpleInlineLinkText as InlineLinkText} from '#/components/Link'
+import {Outlet as PortalOutlet} from '#/components/Portal'
+import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
+import {BottomSheetOutlet} from '#/../modules/bottom-sheet'
 
 export function BlockedGeoOverlay() {
   const t = useTheme()
   const {_} = useLingui()
   const {gtPhone} = useBreakpoints()
   const insets = useSafeAreaInsets()
+  const geoDialog = Dialog.useDialogControl()
+  const {setDeviceGeolocation} = useDeviceGeolocationApi()
 
   useEffect(() => {
     // just counting overall hits here
@@ -51,59 +62,133 @@ export function BlockedGeoOverlay() {
   ]
 
   return (
-    <ScrollView
-      contentContainerStyle={[
-        a.px_2xl,
-        {
-          paddingTop: isWeb ? a.p_5xl.padding : insets.top + a.p_2xl.padding,
-          paddingBottom: 100,
-        },
-      ]}>
-      <View
-        style={[
-          a.mx_auto,
-          web({
-            maxWidth: 440,
-            paddingTop: gtPhone ? '8vh' : undefined,
-          }),
+    <>
+      <ScrollView
+        contentContainerStyle={[
+          a.px_2xl,
+          {
+            paddingTop: isWeb ? a.p_5xl.padding : insets.top + a.p_2xl.padding,
+            paddingBottom: 100,
+          },
         ]}>
-        <View style={[a.align_start]}>
-          <View
-            style={[
-              a.pl_md,
-              a.pr_lg,
-              a.py_sm,
-              a.rounded_full,
-              a.flex_row,
-              a.align_center,
-              a.gap_xs,
-              {
-                backgroundColor: t.palette.primary_25,
-              },
-            ]}>
-            <Mark fill={t.palette.primary_600} width={14} />
-            <Text
+        <View
+          style={[
+            a.mx_auto,
+            web({
+              maxWidth: 380,
+              paddingTop: gtPhone ? '8vh' : undefined,
+            }),
+          ]}>
+          <View style={[a.align_start]}>
+            <View
               style={[
-                a.font_bold,
+                a.pl_md,
+                a.pr_lg,
+                a.py_sm,
+                a.rounded_full,
+                a.flex_row,
+                a.align_center,
+                a.gap_xs,
                 {
-                  color: t.palette.primary_600,
+                  backgroundColor: t.palette.primary_25,
                 },
               ]}>
-              <Trans>Announcement</Trans>
-            </Text>
+              <Mark fill={t.palette.primary_600} width={14} />
+              <Text
+                style={[
+                  a.font_bold,
+                  {
+                    color: t.palette.primary_600,
+                  },
+                ]}>
+                <Trans>Announcement</Trans>
+              </Text>
+            </View>
+          </View>
+
+          <View style={[a.gap_lg, {paddingTop: 32}]}>
+            {blocks.map((block, index) => (
+              <Text key={index} style={[textStyles]}>
+                {block}
+              </Text>
+            ))}
           </View>
-        </View>
 
-        <View style={[a.gap_lg, {paddingTop: 32, paddingBottom: 48}]}>
-          {blocks.map((block, index) => (
-            <Text key={index} style={[textStyles]}>
-              {block}
-            </Text>
-          ))}
+          {!isWeb && (
+            <>
+              <View style={[a.pt_2xl]}>
+                <Divider />
+              </View>
+
+              <View style={[a.mt_xl, a.align_start]}>
+                <Text
+                  style={[a.text_lg, a.font_heavy, a.leading_snug, a.pb_xs]}>
+                  <Trans>Not in Mississippi?</Trans>
+                </Text>
+                <Text
+                  style={[
+                    a.text_sm,
+                    a.leading_snug,
+                    t.atoms.text_contrast_medium,
+                    a.pb_md,
+                  ]}>
+                  <Trans>
+                    Confirm your location with GPS. Your location data is not
+                    tracked and does not leave your device.
+                  </Trans>
+                </Text>
+                <Button
+                  label={_(msg`Confirm your location`)}
+                  onPress={() => geoDialog.open()}
+                  size="small"
+                  color="primary_subtle">
+                  <ButtonIcon icon={LocationIcon} />
+                  <ButtonText>
+                    <Trans>Confirm your location</Trans>
+                  </ButtonText>
+                </Button>
+              </View>
+
+              <DeviceLocationRequestDialog
+                control={geoDialog}
+                onLocationAcquired={props => {
+                  if (props.geolocationStatus.isAgeBlockedGeo) {
+                    props.disableDialogAction()
+                    props.setDialogError(
+                      _(
+                        msg`We're sorry, but based on your device's location, you are currently located in a region we cannot provide access at this time.`,
+                      ),
+                    )
+                  } else {
+                    props.closeDialog(() => {
+                      // set this after close!
+                      setDeviceGeolocation({
+                        countryCode: props.geolocationStatus.countryCode,
+                        regionCode: props.geolocationStatus.regionCode,
+                      })
+                      Toast.show(_(msg`Thanks! You're all set.`), {
+                        type: 'success',
+                      })
+                    })
+                  }
+                }}
+              />
+            </>
+          )}
+
+          <View style={[{paddingTop: 48}]}>
+            <Logo width={120} textFill={t.atoms.text.color} />
+          </View>
         </View>
+      </ScrollView>
 
-        <Logo width={120} textFill={t.atoms.text.color} />
-      </View>
-    </ScrollView>
+      {/*
+       * While this blocking overlay is up, other dialogs in the shell
+       * are not mounted, so it _should_ be safe to use these here
+       * without fear of other modals showing up.
+       */}
+      <BottomSheetOutlet />
+      <PortalOutlet />
+    </>
   )
 }

src/App.web.tsx

@@ -3,8 +3,10 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {dateDiff, useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {isNative} from '#/platform/detection'
 import {useAgeAssurance} from '#/state/ageAssurance/useAgeAssurance'
 import {logger} from '#/state/ageAssurance/util'
+import {useDeviceGeolocationApi} from '#/state/geolocation'
 import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog'
@@ -16,8 +18,10 @@ import {
 import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {DeviceLocationRequestDialog} from '#/components/dialogs/DeviceLocationRequestDialog'
 import {Divider} from '#/components/Divider'
 import {createStaticClick, InlineLinkText} from '#/components/Link'
+import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
 
 export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
@@ -35,8 +39,10 @@ function Inner({style}: ViewStyleProp & {}) {
   const {_, i18n} = useLingui()
   const control = useDialogControl()
   const appealControl = Dialog.useDialogControl()
+  const locationControl = Dialog.useDialogControl()
   const getTimeAgo = useGetTimeAgo()
   const {gtPhone} = useBreakpoints()
+  const {setDeviceGeolocation} = useDeviceGeolocationApi()
 
   const copy = useAgeAssuranceCopy()
   const {status, lastInitiatedAt} = useAgeAssurance()
@@ -71,8 +77,50 @@ function Inner({style}: ViewStyleProp & {}) {
             </View>
           </View>
 
-          <View style={[a.pb_md]}>
+          <View style={[a.pb_md, a.gap_xs]}>
             <Text style={[a.text_sm, a.leading_snug]}>{copy.notice}</Text>
+
+            {isNative && (
+              <>
+                <Text style={[a.text_sm, a.leading_snug]}>
+                  <Trans>
+                    Is your location not accurate?{' '}
+                    <InlineLinkText
+                      label={_(msg`Confirm your location`)}
+                      {...createStaticClick(() => {
+                        locationControl.open()
+                      })}>
+                      Click here to confirm your location.
+                    </InlineLinkText>{' '}
+                  </Trans>
+                </Text>
+
+                <DeviceLocationRequestDialog
+                  control={locationControl}
+                  onLocationAcquired={props => {
+                    if (props.geolocationStatus.isAgeRestrictedGeo) {
+                      props.disableDialogAction()
+                      props.setDialogError(
+                        _(
+                          msg`We're sorry, but based on your device's location, you are currently located in a region that requires age assurance.`,
+                        ),
+                      )
+                    } else {
+                      props.closeDialog(() => {
+                        // set this after close!
+                        setDeviceGeolocation({
+                          countryCode: props.geolocationStatus.countryCode,
+                          regionCode: props.geolocationStatus.regionCode,
+                        })
+                        Toast.show(_(msg`Thanks! You're all set.`), {
+                          type: 'success',
+                        })
+                      })
+                    }
+                  }}
+                />
+              </>
+            )}
           </View>
 
           {isBlocked ? (