From 8ec8a644727cd59ba475bb221fedbd51e7d93e7e Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Fri, 25 Apr 2025 00:41:11 +0300 Subject: [PATCH] Modernize in-app browser consent dialog (#8191) * add stateful dialog control hook * add new alf'd consent * make secondary_inverted buttons clearer * contingency for opening a link from another dialog * rm old modal * Differentiate buttons more --------- Co-authored-by: Eric Bailey --- src/components/Button.tsx | 24 ++-- src/components/Dialog/context.ts | 6 +- src/components/dialogs/Context.tsx | 54 +++++++-- .../dialogs/InAppBrowserConsent.tsx | 111 ++++++++++++++++++ src/lib/hooks/useOpenLink.ts | 23 ++-- src/state/modals/index.tsx | 6 - src/view/com/modals/InAppBrowserConsent.tsx | 99 ---------------- src/view/com/modals/Modal.tsx | 4 - src/view/shell/index.tsx | 2 + 9 files changed, 188 insertions(+), 141 deletions(-) create mode 100644 src/components/dialogs/InAppBrowserConsent.tsx delete mode 100644 src/view/com/modals/InAppBrowserConsent.tsx diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 123e6ee422..2d6ddc8343 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,23 +1,23 @@ import React from 'react' import { - AccessibilityProps, - GestureResponderEvent, - MouseEvent, - NativeSyntheticEvent, + type AccessibilityProps, + type GestureResponderEvent, + type MouseEvent, + type NativeSyntheticEvent, Pressable, - PressableProps, - StyleProp, + type PressableProps, + type StyleProp, StyleSheet, - TargetedEvent, - TextProps, - TextStyle, + type TargetedEvent, + type TextProps, + type TextStyle, View, - ViewStyle, + type ViewStyle, } from 'react-native' import {LinearGradient} from 'expo-linear-gradient' import {atoms as a, flatten, select, tokens, useTheme} from '#/alf' -import {Props as SVGIconProps} from '#/components/icons/common' +import {type Props as SVGIconProps} from '#/components/icons/common' import {Text} from '#/components/Typography' export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient' @@ -597,7 +597,7 @@ export function useSharedButtonTextStyles() { if (variant === 'solid' || variant === 'gradient') { if (!disabled) { baseStyles.push({ - color: t.palette.contrast_100, + color: t.palette.contrast_50, }) } else { baseStyles.push({ diff --git a/src/components/Dialog/context.ts b/src/components/Dialog/context.ts index 331ff3f33a..eb892403f7 100644 --- a/src/components/Dialog/context.ts +++ b/src/components/Dialog/context.ts @@ -2,9 +2,9 @@ import React from 'react' import {useDialogStateContext} from '#/state/dialogs' import { - DialogContextProps, - DialogControlRefProps, - DialogOuterProps, + type DialogContextProps, + type DialogControlRefProps, + type DialogOuterProps, } from '#/components/Dialog/types' import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types' diff --git a/src/components/dialogs/Context.tsx b/src/components/dialogs/Context.tsx index c9dff9a999..fda904b8b3 100644 --- a/src/components/dialogs/Context.tsx +++ b/src/components/dialogs/Context.tsx @@ -1,32 +1,66 @@ -import React from 'react' +import {createContext, useContext, useMemo, useState} from 'react' import * as Dialog from '#/components/Dialog' -type Control = Dialog.DialogOuterProps['control'] +type Control = Dialog.DialogControlProps + +export type StatefulControl = { + control: Control + open: (value: T) => void + clear: () => void + value: T | undefined +} type ControlsContext = { mutedWordsDialogControl: Control signinDialogControl: Control + inAppBrowserConsentControl: StatefulControl } -const ControlsContext = React.createContext({ - mutedWordsDialogControl: {} as Control, - signinDialogControl: {} as Control, -}) +const ControlsContext = createContext(null) export function useGlobalDialogsControlContext() { - return React.useContext(ControlsContext) + const ctx = useContext(ControlsContext) + if (!ctx) { + throw new Error( + 'useGlobalDialogsControlContext must be used within a Provider', + ) + } + return ctx } export function Provider({children}: React.PropsWithChildren<{}>) { const mutedWordsDialogControl = Dialog.useDialogControl() const signinDialogControl = Dialog.useDialogControl() - const ctx = React.useMemo( - () => ({mutedWordsDialogControl, signinDialogControl}), - [mutedWordsDialogControl, signinDialogControl], + const inAppBrowserConsentControl = useStatefulDialogControl() + + const ctx = useMemo( + () => ({ + mutedWordsDialogControl, + signinDialogControl, + inAppBrowserConsentControl, + }), + [mutedWordsDialogControl, signinDialogControl, inAppBrowserConsentControl], ) return ( {children} ) } + +function useStatefulDialogControl(initialValue?: T): StatefulControl { + const [value, setValue] = useState(initialValue) + const control = Dialog.useDialogControl() + return useMemo( + () => ({ + control, + open: (v: T) => { + setValue(v) + control.open() + }, + clear: () => setValue(initialValue), + value, + }), + [control, value, initialValue], + ) +} diff --git a/src/components/dialogs/InAppBrowserConsent.tsx b/src/components/dialogs/InAppBrowserConsent.tsx new file mode 100644 index 0000000000..4459c64db9 --- /dev/null +++ b/src/components/dialogs/InAppBrowserConsent.tsx @@ -0,0 +1,111 @@ +import {useCallback} from 'react' +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {useOpenLink} from '#/lib/hooks/useOpenLink' +import {isWeb} from '#/platform/detection' +import {useSetInAppBrowser} from '#/state/preferences/in-app-browser' +import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import {SquareArrowTopRight_Stroke2_Corner0_Rounded as External} from '#/components/icons/SquareArrowTopRight' +import {Text} from '#/components/Typography' +import {useGlobalDialogsControlContext} from './Context' + +export function InAppBrowserConsentDialog() { + const {inAppBrowserConsentControl} = useGlobalDialogsControlContext() + + if (isWeb) return null + + return ( + + + + + ) +} + +function InAppBrowserConsentInner({href}: {href?: string}) { + const control = Dialog.useDialogContext() + const {_} = useLingui() + const t = useTheme() + const setInAppBrowser = useSetInAppBrowser() + const openLink = useOpenLink() + + const onUseIAB = useCallback(() => { + control.close(() => { + setInAppBrowser(true) + if (href) { + openLink(href, true) + } + }) + }, [control, setInAppBrowser, href, openLink]) + + const onUseLinking = useCallback(() => { + control.close(() => { + setInAppBrowser(false) + if (href) { + openLink(href, false) + } + }) + }, [control, setInAppBrowser, href, openLink]) + + const onCancel = useCallback(() => { + control.close() + }, [control]) + + return ( + + + + + How should we open this link? + + + + Your choice will be remembered for future links. You can change it + at any time in settings. + + + + + + + + + + + ) +} diff --git a/src/lib/hooks/useOpenLink.ts b/src/lib/hooks/useOpenLink.ts index a949dacc68..28c1bca3d9 100644 --- a/src/lib/hooks/useOpenLink.ts +++ b/src/lib/hooks/useOpenLink.ts @@ -12,16 +12,18 @@ import { toNiceDomain, } from '#/lib/strings/url-helpers' import {isNative} from '#/platform/detection' -import {useModalControls} from '#/state/modals' import {useInAppBrowser} from '#/state/preferences/in-app-browser' import {useTheme} from '#/alf' +import {useDialogContext} from '#/components/Dialog' import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper' +import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' export function useOpenLink() { - const {openModal} = useModalControls() const enabled = useInAppBrowser() const t = useTheme() const sheetWrapper = useSheetWrapper() + const dialogContext = useDialogContext() + const {inAppBrowserConsentControl} = useGlobalDialogsControlContext() const openLink = useCallback( async (url: string, override?: boolean, shouldProxy?: boolean) => { @@ -42,10 +44,17 @@ export function useOpenLink() { if (isNative && !url.startsWith('mailto:')) { if (override === undefined && enabled === undefined) { - openModal({ - name: 'in-app-browser-consent', - href: url, - }) + // consent dialog is a global dialog, and while it's possible to nest dialogs, + // the actual components need to be nested. sibling dialogs on iOS are not supported. + // thus, check if we're in a dialog, and if so, close the existing dialog before opening the + // consent dialog -sfn + if (dialogContext.isWithinDialog) { + dialogContext.close(() => { + inAppBrowserConsentControl.open(url) + }) + } else { + inAppBrowserConsentControl.open(url) + } return } else if (override ?? enabled) { await sheetWrapper( @@ -62,7 +71,7 @@ export function useOpenLink() { } Linking.openURL(url) }, - [enabled, openModal, t, sheetWrapper], + [enabled, inAppBrowserConsentControl, t, sheetWrapper, dialogContext], ) return openLink diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx index 45c4fb4678..f79f6213ff 100644 --- a/src/state/modals/index.tsx +++ b/src/state/modals/index.tsx @@ -66,11 +66,6 @@ export interface LinkWarningModal { share?: boolean } -export interface InAppBrowserConsentModal { - name: 'in-app-browser-consent' - href: string -} - export type Modal = // Account | DeleteAccountModal @@ -96,7 +91,6 @@ export type Modal = // Generic | LinkWarningModal - | InAppBrowserConsentModal const ModalContext = React.createContext<{ isModalActive: boolean diff --git a/src/view/com/modals/InAppBrowserConsent.tsx b/src/view/com/modals/InAppBrowserConsent.tsx deleted file mode 100644 index 105edfbc69..0000000000 --- a/src/view/com/modals/InAppBrowserConsent.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {useOpenLink} from '#/lib/hooks/useOpenLink' -import {usePalette} from '#/lib/hooks/usePalette' -import {s} from '#/lib/styles' -import {useModalControls} from '#/state/modals' -import {useSetInAppBrowser} from '#/state/preferences/in-app-browser' -import {ScrollView} from '#/view/com/modals/util' -import {Button} from '#/view/com/util/forms/Button' -import {Text} from '#/view/com/util/text/Text' - -export const snapPoints = [350] - -export function Component({href}: {href: string}) { - const pal = usePalette('default') - const {closeModal} = useModalControls() - const {_} = useLingui() - const setInAppBrowser = useSetInAppBrowser() - const openLink = useOpenLink() - - const onUseIAB = React.useCallback(() => { - setInAppBrowser(true) - closeModal() - openLink(href, true) - }, [closeModal, setInAppBrowser, href, openLink]) - - const onUseLinking = React.useCallback(() => { - setInAppBrowser(false) - closeModal() - openLink(href, false) - }, [closeModal, setInAppBrowser, href, openLink]) - - return ( - - - How should we open this link? - - - - Your choice will be saved, but can be changed later in settings. - - - -