Open History to see the last commit
1import { AppBar } from "../../components/ui/AppBar";
2import { Button } from "../../components/ui/Button";
3import { ScreenScrollView as ScrollView } from "../../components/ui/ScreenScrollView";
4
5import { useAuth } from "@clerk/expo";
6import { useNavigation } from "@react-navigation/native";
7import { useState } from "react";
8import { View } from "react-native";
9import { RefreshControl } from "../../components/ui/RefreshControl";
10import { useSafeAreaInsets } from "react-native-safe-area-context";
11
12import { reportAtomCommandResult, settlePromise } from "@t3tools/client-runtime/state/runtime";
13import { AppText as Text } from "../../components/ui/AppText";
14import { useRemoteConnections } from "../../state/use-remote-environment-registry";
15import { CloudEnvironmentRows } from "../connection/CloudEnvironmentRows";
16import { splitEnvironmentSections } from "../connection/environmentSections";
17import { useConnectionController } from "../connection/useConnectionController";
18import { optOutOfConnectOnboarding } from "./connectOnboardingOptOut";
19import { hasCloudPublicConfig } from "./publicConfig";
20
21// Only reachable with cloud config: onboarding is requested after a T3 Connect
22// sign-in, and appLinking drops the deep link otherwise.
23export function ConnectOnboardingRouteScreen() {
24 return hasCloudPublicConfig() ? <ConfiguredConnectOnboardingRouteScreen /> : null;
25}
26
27function ConfiguredConnectOnboardingRouteScreen() {
28 const navigation = useNavigation();
29 const insets = useSafeAreaInsets();
30 const { isSignedIn, userId } = useAuth({ treatPendingAsSignedOut: false });
31 const { connectedEnvironments, onSetEnvironmentEnabled, onRemoveEnvironmentPress } =
32 useRemoteConnections();
33 const { refreshRelayEnvironments } = useConnectionController();
34 const { connectedCloudEnvironments } = splitEnvironmentSections({
35 connectedEnvironments,
36 cloudEnvironments: null,
37 });
38
39 const [isRefreshing, setIsRefreshing] = useState(false);
40 const handleRefresh = () => {
41 setIsRefreshing(true);
42 void refreshRelayEnvironments().finally(() => setIsRefreshing(false));
43 };
44
45 const handleClose = () => {
46 navigation.goBack();
47 };
48
49 // Persist before dismissing so quick sign-out/sign-in cannot outrun the write.
50 const handleDontShowAgain = () => {
51 void (async () => {
52 if (userId) {
53 const result = await settlePromise(() => optOutOfConnectOnboarding(userId));
54 reportAtomCommandResult(result, { label: "connect onboarding opt-out" });
55 }
56 navigation.goBack();
57 })();
58 };
59
60 return (
61 <View collapsable={false} className="flex-1 bg-sheet">
62 <AppBar
63 title="Set up T3 Connect"
64 onClose={handleClose}
65 refresh={{
66 accessibilityLabel: "Refresh environments",
67 disabled: isRefreshing,
68 onPress: handleRefresh,
69 }}
70 />
71 <ScrollView
72 nestedScrollEnabled
73 alwaysBounceVertical
74 contentInsetAdjustmentBehavior="automatic"
75 showsVerticalScrollIndicator={false}
76 className="flex-1"
77 contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}
78 contentContainerStyle={{
79 gap: 16,
80 paddingHorizontal: 20,
81 paddingTop: 16,
82 }}
83 refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />}
84 >
85 {isSignedIn ? (
86 <CloudEnvironmentRows
87 connectedCloudEnvironments={connectedCloudEnvironments}
88 onSetEnvironmentEnabled={onSetEnvironmentEnabled}
89 onRemoveEnvironment={onRemoveEnvironmentPress}
90 showHeader={false}
91 />
92 ) : (
93 <View collapsable={false} className="rounded-[24px] bg-grouped-card p-5">
94 <Text className="text-sm leading-normal text-foreground-muted">
95 Sign in to your T3 account to set up T3 Connect.
96 </Text>
97 </View>
98 )}
99
100 {userId ? (
101 <Button label={"Don't show this again"} tone="text" onPress={handleDontShowAgain} />
102 ) : null}
103 </ScrollView>
104 </View>
105 );
106}