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