Samuel Newman
115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
import {useMemo} from 'react'
|
|
import {View} from 'react-native'
|
|
import {Image} from 'expo-image'
|
|
import {LinearGradient} from 'expo-linear-gradient'
|
|
import {msg} from '@lingui/core/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
import {Trans} from '@lingui/react/macro'
|
|
|
|
import {HITSLOP_10} from '#/lib/constants'
|
|
import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Button} from '#/components/Button'
|
|
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
|
|
import {Text} from '#/components/Typography'
|
|
import {useAnalytics} from '#/analytics'
|
|
import {IS_WEB} from '#/env'
|
|
import {Link} from '../Link'
|
|
import {useIsFindContactsFeatureEnabledBasedOnGeolocation} from './country-allowlist'
|
|
|
|
export function FindContactsBannerNUX() {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
const ax = useAnalytics()
|
|
const {visible, close} = useInternalState()
|
|
|
|
if (!visible) return null
|
|
|
|
return (
|
|
<View style={[a.w_full, a.p_lg, a.border_b, t.atoms.border_contrast_low]}>
|
|
<View style={a.w_full}>
|
|
<Link
|
|
to={{screen: 'FindContactsFlow'}}
|
|
label={_(msg`Import contacts to find your friends`)}
|
|
onPress={() => {
|
|
ax.metric('contacts:nux:bannerPressed', {})
|
|
}}
|
|
style={[
|
|
a.w_full,
|
|
a.rounded_xl,
|
|
a.curve_continuous,
|
|
a.overflow_hidden,
|
|
]}>
|
|
<LinearGradient
|
|
colors={[t.palette.primary_200, t.palette.primary_50]}
|
|
start={{x: 0, y: 0.5}}
|
|
end={{x: 1, y: 0.5}}
|
|
style={[
|
|
a.w_full,
|
|
a.h_full,
|
|
a.flex_row,
|
|
a.align_center,
|
|
a.gap_lg,
|
|
a.pl_lg,
|
|
]}>
|
|
<Image
|
|
source={require('../../../assets/images/find_friends_illustration_small.webp')}
|
|
accessibilityIgnoresInvertColors
|
|
style={[
|
|
{height: 70, aspectRatio: 573 / 286},
|
|
a.self_end,
|
|
a.mt_sm,
|
|
]}
|
|
useAppleWebpCodec
|
|
/>
|
|
<View style={[a.flex_1, a.justify_center, a.py_xl, a.pr_5xl]}>
|
|
<Text
|
|
style={[
|
|
a.text_md,
|
|
a.font_bold,
|
|
{color: t.palette.primary_900},
|
|
]}>
|
|
<Trans>Import contacts to find your friends</Trans>
|
|
</Text>
|
|
</View>
|
|
</LinearGradient>
|
|
</Link>
|
|
<Button
|
|
label={_(msg`Dismiss banner`)}
|
|
hitSlop={HITSLOP_10}
|
|
onPress={close}
|
|
style={[a.absolute, {top: 14, right: 14}]}
|
|
hoverStyle={[a.bg_transparent, {opacity: 0.5}]}>
|
|
<XIcon size="xs" style={[t.atoms.text_contrast_low]} />
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
function useInternalState() {
|
|
const ax = useAnalytics()
|
|
const {nux} = useNux(Nux.FindContactsDismissibleBanner)
|
|
const {mutate: save, variables} = useSaveNux()
|
|
const hidden = !!variables
|
|
const isFeatureEnabled = useIsFindContactsFeatureEnabledBasedOnGeolocation()
|
|
|
|
const visible = useMemo(() => {
|
|
if (IS_WEB) return false
|
|
if (hidden) return false
|
|
if (nux && nux.completed) return false
|
|
if (!isFeatureEnabled) return false
|
|
return true
|
|
}, [hidden, nux, isFeatureEnabled])
|
|
|
|
const close = () => {
|
|
save({
|
|
id: Nux.FindContactsDismissibleBanner,
|
|
completed: true,
|
|
data: undefined,
|
|
})
|
|
ax.metric('contacts:nux:bannerDismissed', {})
|
|
}
|
|
|
|
return {visible, close}
|
|
}
|