tangled mirror of catsky-🐱 Soothing soft social-app fork with all the niche toggles! (Unofficial); for issues and PRs please put them on github:NekoDrone/catsky-social

Ship activation experiments (#9170)

* ship onboarding experiments

* delete logged out cta

* delete other loggedoutcta

authored by samuel.fm and committed by GitHub 84cae44c 5bf1141b

Changed files
+7 -103
src
components
lib
statsig
screens
Onboarding
PostThread
-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
··· 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
··· 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
··· 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
··· 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 {