bas.sh
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Adds signup CTA tests for logged-out visitors (#8906)
authored by
Alex Benzer
and committed by
GitHub
acd7211b
b70e5b2f
+90
-1
+80
src/components/LoggedOutCTA.tsx
+80
src/components/LoggedOutCTA.tsx
···
1
+
import {View, type ViewStyle} from 'react-native'
2
+
import {Trans} from '@lingui/macro'
3
+
4
+
import {type Gate} from '#/lib/statsig/gates'
5
+
import {useGate} from '#/lib/statsig/statsig'
6
+
import {isWeb} from '#/platform/detection'
7
+
import {useSession} from '#/state/session'
8
+
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
9
+
import {Logo} from '#/view/icons/Logo'
10
+
import {atoms as a, useTheme} from '#/alf'
11
+
import {Button, ButtonText} from '#/components/Button'
12
+
import {Text} from '#/components/Typography'
13
+
14
+
interface LoggedOutCTAProps {
15
+
style?: ViewStyle
16
+
gateName: Gate
17
+
}
18
+
19
+
export function LoggedOutCTA({style, gateName}: LoggedOutCTAProps) {
20
+
const {hasSession} = useSession()
21
+
const {requestSwitchToAccount} = useLoggedOutViewControls()
22
+
const gate = useGate()
23
+
const t = useTheme()
24
+
25
+
// Only show for logged-out users on web
26
+
if (hasSession || !isWeb) {
27
+
return null
28
+
}
29
+
30
+
// Check gate at the last possible moment to avoid counting users as exposed when they won't see the element
31
+
if (!gate(gateName)) {
32
+
return null
33
+
}
34
+
35
+
return (
36
+
<View style={[a.pb_md, style]}>
37
+
<View
38
+
style={[
39
+
a.flex_row,
40
+
a.align_center,
41
+
a.justify_between,
42
+
a.px_lg,
43
+
a.py_md,
44
+
a.rounded_md,
45
+
a.mb_xs,
46
+
t.atoms.bg_contrast_25,
47
+
]}>
48
+
<View style={[a.flex_row, a.align_center, a.flex_1, a.pr_md]}>
49
+
<Logo width={30} style={[a.mr_md]} />
50
+
<View style={[a.flex_1]}>
51
+
<Text style={[a.text_lg, a.font_bold, a.leading_snug]}>
52
+
<Trans>Join Bluesky</Trans>
53
+
</Text>
54
+
<Text
55
+
style={[
56
+
a.text_md,
57
+
a.font_medium,
58
+
a.leading_snug,
59
+
t.atoms.text_contrast_medium,
60
+
]}>
61
+
<Trans>The open social network.</Trans>
62
+
</Text>
63
+
</View>
64
+
</View>
65
+
<Button
66
+
onPress={() => {
67
+
requestSwitchToAccount({requestedAccount: 'new'})
68
+
}}
69
+
label="Create account"
70
+
size="small"
71
+
variant="solid"
72
+
color="primary">
73
+
<ButtonText>
74
+
<Trans>Create account</Trans>
75
+
</ButtonText>
76
+
</Button>
77
+
</View>
78
+
</View>
79
+
)
80
+
}
+2
src/lib/statsig/gates.ts
+2
src/lib/statsig/gates.ts
+5
-1
src/screens/PostThread/components/ThreadItemAnchor.tsx
+5
-1
src/screens/PostThread/components/ThreadItemAnchor.tsx
···
40
40
OUTER_SPACE,
41
41
REPLY_LINE_WIDTH,
42
42
} from '#/screens/PostThread/const'
43
-
import {atoms as a, useTheme} from '#/alf'
43
+
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
44
44
import {colors} from '#/components/Admonition'
45
45
import {Button} from '#/components/Button'
46
46
import {CalendarClock_Stroke2_Corner0_Rounded as CalendarClockIcon} from '#/components/icons/CalendarClock'
47
47
import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
48
48
import {InlineLinkText, Link} from '#/components/Link'
49
+
import {LoggedOutCTA} from '#/components/LoggedOutCTA'
49
50
import {ContentHider} from '#/components/moderation/ContentHider'
50
51
import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
51
52
import {PostAlerts} from '#/components/moderation/PostAlerts'
···
178
179
const {_, i18n} = useLingui()
179
180
const {openComposer} = useOpenComposer()
180
181
const {currentAccount, hasSession} = useSession()
182
+
const {gtTablet} = useBreakpoints()
181
183
const feedFeedback = useFeedFeedback(postSource?.feed, hasSession)
182
184
183
185
const post = postShadow
···
311
313
},
312
314
isRoot && [a.pt_lg],
313
315
]}>
316
+
{/* Show CTA for logged-out visitors - hide on desktop and check gate */}
317
+
{!gtTablet && <LoggedOutCTA gateName="cta_above_post_heading" />}
314
318
<View style={[a.flex_row, a.gap_md, a.pb_md]}>
315
319
<View collapsable={false}>
316
320
<PreviewableUserAvatar
+3
src/screens/PostThread/index.tsx
+3
src/screens/PostThread/index.tsx
···
38
38
import {atoms as a, native, platform, useBreakpoints, web} from '#/alf'
39
39
import * as Layout from '#/components/Layout'
40
40
import {ListFooter} from '#/components/Lists'
41
+
import {LoggedOutCTA} from '#/components/LoggedOutCTA'
41
42
42
43
const PARENT_CHUNK_SIZE = 5
43
44
const CHILDREN_CHUNK_SIZE = 50
···
405
406
onPostSuccess={optimisticOnPostReply}
406
407
postSource={anchorPostSource}
407
408
/>
409
+
{/* Show CTA for logged-out visitors */}
410
+
<LoggedOutCTA style={a.px_lg} gateName="cta_above_post_replies" />
408
411
</View>
409
412
)
410
413
} else {