forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {useMemo} from 'react'
2import {View} from 'react-native'
3import {Image} from 'expo-image'
4import {LinearGradient} from 'expo-linear-gradient'
5import {msg, Trans} from '@lingui/macro'
6import {useLingui} from '@lingui/react'
7
8import {HITSLOP_10} from '#/lib/constants'
9import {useGate} from '#/lib/statsig/statsig'
10import {logger} from '#/logger'
11import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs'
12import {atoms as a, useTheme} from '#/alf'
13import {Button} from '#/components/Button'
14import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
15import {Text} from '#/components/Typography'
16import {IS_WEB} from '#/env'
17import {Link} from '../Link'
18import {useIsFindContactsFeatureEnabledBasedOnGeolocation} from './country-allowlist'
19
20export function FindContactsBannerNUX() {
21 const t = useTheme()
22 const {_} = useLingui()
23 const {visible, close} = useInternalState()
24
25 if (!visible) return null
26
27 return (
28 <View style={[a.w_full, a.p_lg, a.border_b, t.atoms.border_contrast_low]}>
29 <View style={a.w_full}>
30 <Link
31 to={{screen: 'FindContactsFlow'}}
32 label={_(msg`Import contacts to find your friends`)}
33 onPress={() => {
34 logger.metric('contacts:nux:bannerPressed', {})
35 }}
36 style={[
37 a.w_full,
38 a.rounded_xl,
39 a.curve_continuous,
40 a.overflow_hidden,
41 ]}>
42 <LinearGradient
43 colors={[t.palette.primary_200, t.palette.primary_50]}
44 start={{x: 0, y: 0.5}}
45 end={{x: 1, y: 0.5}}
46 style={[
47 a.w_full,
48 a.h_full,
49 a.flex_row,
50 a.align_center,
51 a.gap_lg,
52 a.pl_lg,
53 ]}>
54 <Image
55 source={require('../../../assets/images/find_friends_illustration_small.webp')}
56 accessibilityIgnoresInvertColors
57 style={[
58 {height: 70, aspectRatio: 573 / 286},
59 a.self_end,
60 a.mt_sm,
61 ]}
62 />
63 <View style={[a.flex_1, a.justify_center, a.py_xl, a.pr_5xl]}>
64 <Text
65 style={[
66 a.text_md,
67 a.font_bold,
68 {color: t.palette.primary_900},
69 ]}>
70 <Trans>Import contacts to find your friends</Trans>
71 </Text>
72 </View>
73 </LinearGradient>
74 </Link>
75 <Button
76 label={_(msg`Dismiss banner`)}
77 hitSlop={HITSLOP_10}
78 onPress={close}
79 style={[a.absolute, {top: 14, right: 14}]}
80 hoverStyle={[a.bg_transparent, {opacity: 0.5}]}>
81 <XIcon size="xs" style={[t.atoms.text_contrast_low]} />
82 </Button>
83 </View>
84 </View>
85 )
86}
87function useInternalState() {
88 const {nux} = useNux(Nux.FindContactsDismissibleBanner)
89 const {mutate: save, variables} = useSaveNux()
90 const hidden = !!variables
91 const isFeatureEnabled = useIsFindContactsFeatureEnabledBasedOnGeolocation()
92 const gate = useGate()
93
94 const visible = useMemo(() => {
95 if (IS_WEB) return false
96 if (hidden) return false
97 if (nux && nux.completed) return false
98 if (!isFeatureEnabled) return false
99 if (gate('disable_settings_find_contacts')) return false
100 return true
101 }, [hidden, nux, isFeatureEnabled, gate])
102
103 const close = () => {
104 save({
105 id: Nux.FindContactsDismissibleBanner,
106 completed: true,
107 data: undefined,
108 })
109 logger.metric('contacts:nux:bannerDismissed', {})
110 }
111
112 return {visible, close}
113}