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