forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Ship activation experiments (#9170)
* ship onboarding experiments
* delete logged out cta
* delete other loggedoutcta
authored by
Samuel Newman
and committed by
GitHub
84cae44c
5bf1141b
+7
-103
-82
src/components/LoggedOutCTA.tsx
-82
src/components/LoggedOutCTA.tsx
···
1
-
import {View, type ViewStyle} from 'react-native'
2
-
import {msg, Trans} from '@lingui/macro'
3
-
import {useLingui} from '@lingui/react'
4
-
5
-
import {type Gate} from '#/lib/statsig/gates'
6
-
import {useGate} from '#/lib/statsig/statsig'
7
-
import {isWeb} from '#/platform/detection'
8
-
import {useSession} from '#/state/session'
9
-
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
10
-
import {Logo} from '#/view/icons/Logo'
11
-
import {atoms as a, useTheme} from '#/alf'
12
-
import {Button, ButtonText} from '#/components/Button'
13
-
import {Text} from '#/components/Typography'
14
-
15
-
interface LoggedOutCTAProps {
16
-
style?: ViewStyle
17
-
gateName: Gate
18
-
}
19
-
20
-
export function LoggedOutCTA({style, gateName}: LoggedOutCTAProps) {
21
-
const {hasSession} = useSession()
22
-
const {requestSwitchToAccount} = useLoggedOutViewControls()
23
-
const gate = useGate()
24
-
const t = useTheme()
25
-
const {_} = useLingui()
26
-
27
-
// Only show for logged-out users on web
28
-
if (hasSession || !isWeb) {
29
-
return null
30
-
}
31
-
32
-
// Check gate at the last possible moment to avoid counting users as exposed when they won't see the element
33
-
if (!gate(gateName)) {
34
-
return null
35
-
}
36
-
37
-
return (
38
-
<View style={[a.pb_md, style]}>
39
-
<View
40
-
style={[
41
-
a.flex_row,
42
-
a.align_center,
43
-
a.justify_between,
44
-
a.px_lg,
45
-
a.py_md,
46
-
a.rounded_md,
47
-
a.mb_xs,
48
-
t.atoms.bg_contrast_25,
49
-
]}>
50
-
<View style={[a.flex_row, a.align_center, a.flex_1, a.pr_md]}>
51
-
<Logo width={30} style={[a.mr_md]} />
52
-
<View style={[a.flex_1]}>
53
-
<Text style={[a.text_lg, a.font_semi_bold, a.leading_snug]}>
54
-
<Trans>Join Bluesky</Trans>
55
-
</Text>
56
-
<Text
57
-
style={[
58
-
a.text_md,
59
-
a.font_medium,
60
-
a.leading_snug,
61
-
t.atoms.text_contrast_medium,
62
-
]}>
63
-
<Trans>The open social network.</Trans>
64
-
</Text>
65
-
</View>
66
-
</View>
67
-
<Button
68
-
onPress={() => {
69
-
requestSwitchToAccount({requestedAccount: 'new'})
70
-
}}
71
-
label={_(msg`Create account`)}
72
-
size="small"
73
-
variant="solid"
74
-
color="primary">
75
-
<ButtonText>
76
-
<Trans>Create account</Trans>
77
-
</ButtonText>
78
-
</Button>
79
-
</View>
80
-
</View>
81
-
)
82
-
}
-4
src/lib/statsig/gates.ts
-4
src/lib/statsig/gates.ts
···
1
1
export type Gate =
2
2
// Keep this alphabetic please.
3
3
| 'alt_share_icon'
4
-
| 'cta_above_post_heading'
5
-
| 'cta_above_post_replies'
6
4
| 'debug_show_feedcontext'
7
5
| 'debug_subscriptions'
8
6
| 'disable_onboarding_policy_update_notice'
···
10
8
| 'feed_reply_button_open_thread'
11
9
| 'old_postonboarding'
12
10
| 'onboarding_add_video_feed'
13
-
| 'onboarding_suggested_accounts'
14
-
| 'onboarding_value_prop'
15
11
| 'post_follow_profile_suggested_accounts'
16
12
| 'remove_show_latest_button'
17
13
| 'test_gate_1'
+6
-9
src/screens/Onboarding/index.tsx
+6
-9
src/screens/Onboarding/index.tsx
···
2
2
import {msg} from '@lingui/macro'
3
3
import {useLingui} from '@lingui/react'
4
4
5
-
import {useGate} from '#/lib/statsig/statsig'
6
5
import {
7
6
Layout,
8
7
OnboardingControls,
···
13
12
import {StepInterests} from '#/screens/Onboarding/StepInterests'
14
13
import {StepProfile} from '#/screens/Onboarding/StepProfile'
15
14
import {Portal} from '#/components/Portal'
16
-
import {ENV} from '#/env'
17
15
import {StepSuggestedAccounts} from './StepSuggestedAccounts'
18
16
19
17
export function Onboarding() {
20
18
const {_} = useLingui()
21
-
const gate = useGate()
22
-
const showValueProp = ENV !== 'e2e' && gate('onboarding_value_prop')
23
-
const showSuggestedAccounts =
24
-
ENV !== 'e2e' && gate('onboarding_suggested_accounts')
19
+
25
20
const [state, dispatch] = useReducer(reducer, {
26
21
...initialState,
27
-
totalSteps: showSuggestedAccounts ? 4 : 3,
22
+
totalSteps: 4,
28
23
experiments: {
29
-
onboarding_suggested_accounts: showSuggestedAccounts,
30
-
onboarding_value_prop: showValueProp,
24
+
// let's leave this flag logic in for now to avoid rebase churn
25
+
// TODO: remove this flag logic once we've finished with all experiments -sfn
26
+
onboarding_suggested_accounts: true,
27
+
onboarding_value_prop: true,
31
28
},
32
29
})
33
30
+1
-5
src/screens/PostThread/components/ThreadItemAnchor.tsx
+1
-5
src/screens/PostThread/components/ThreadItemAnchor.tsx
···
39
39
OUTER_SPACE,
40
40
REPLY_LINE_WIDTH,
41
41
} from '#/screens/PostThread/const'
42
-
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
42
+
import {atoms as a, useTheme} from '#/alf'
43
43
import {colors} from '#/components/Admonition'
44
44
import {Button} from '#/components/Button'
45
45
import {CalendarClock_Stroke2_Corner0_Rounded as CalendarClockIcon} from '#/components/icons/CalendarClock'
46
46
import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
47
47
import {InlineLinkText, Link} from '#/components/Link'
48
-
import {LoggedOutCTA} from '#/components/LoggedOutCTA'
49
48
import {ContentHider} from '#/components/moderation/ContentHider'
50
49
import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
51
50
import {PostAlerts} from '#/components/moderation/PostAlerts'
···
180
179
const {_} = useLingui()
181
180
const {openComposer} = useOpenComposer()
182
181
const {currentAccount, hasSession} = useSession()
183
-
const {gtTablet} = useBreakpoints()
184
182
const feedFeedback = useFeedFeedback(postSource?.feedSourceInfo, hasSession)
185
183
const formatPostStatCount = useFormatPostStatCount()
186
184
···
315
313
},
316
314
isRoot && [a.pt_lg],
317
315
]}>
318
-
{/* Show CTA for logged-out visitors - hide on desktop and check gate */}
319
-
{!gtTablet && <LoggedOutCTA gateName="cta_above_post_heading" />}
320
316
<View style={[a.flex_row, a.gap_md, a.pb_md]}>
321
317
<View collapsable={false}>
322
318
<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'
42
41
43
42
const PARENT_CHUNK_SIZE = 5
44
43
const CHILDREN_CHUNK_SIZE = 50
···
410
409
onPostSuccess={optimisticOnPostReply}
411
410
postSource={anchorPostSource}
412
411
/>
413
-
{/* Show CTA for logged-out visitors */}
414
-
<LoggedOutCTA style={a.px_lg} gateName="cta_above_post_replies" />
415
412
</View>
416
413
)
417
414
} else {