209 lines
8.9 KiB
TypeScript
209 lines
8.9 KiB
TypeScript
// Metro module 5512 (f5513).
|
|
import { useRef, useEffect, useCallback } from "react";
|
|
import { ScrollView, View } from "react-native";
|
|
import MemberVerificationFormStore from "../../guild_member_verification/MemberVerificationFormStore";
|
|
import AuthorizedAppsStore from "../../oauth2/AuthorizedAppsStore";
|
|
import ConnectedAccountsStore from "../../../stores/ConnectedAccountsStore";
|
|
import GuildStore from "../../../stores/GuildStore";
|
|
import GuildOnboardingPromptsStore from "../GuildOnboardingPromptsStore";
|
|
import { OnboardingConnectionType } from "../GuildOnboardingPromptsConstants";
|
|
import { GuildOnboardingModalStates } from "./GuildOnboardingConstants";
|
|
import { AnalyticEvents } from "../../../Constants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import { NAV_BAR_HEIGHT } from "../../../design/components/Navigator/native/NavigatorConstants.native";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
|
|
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
|
|
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
|
|
import { getProviderConnectionState, getApplicationConnectionState, showRulesInOnboarding } from "../GuildOnboardingUtils";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import { collectGuildAnalyticsMetadata } from "../../app_analytics/AppAnalyticsUtils";
|
|
import { CONNECTIONS_STEP } from "../GuildOnboardingPromptsActionCreators";
|
|
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import ConnectionCard from "./ConnectionCard";
|
|
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
const useStyles = createStyles({
|
|
flex: {
|
|
flex: 1
|
|
},
|
|
container: {
|
|
display: "flex",
|
|
flex: 1,
|
|
flexGrow: 1,
|
|
marginTop: NAV_BAR_HEIGHT,
|
|
marginBottom: Module712.space.PX_16,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
|
|
},
|
|
scrollContainer: {
|
|
display: "flex",
|
|
flexGrow: 1,
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
paddingTop: Module712.space.PX_16,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
|
|
},
|
|
header: {
|
|
marginBottom: Module712.space.PX_24
|
|
},
|
|
title: {
|
|
marginBottom: Module712.space.PX_8
|
|
},
|
|
description: {
|
|
marginTop: Module712.space.PX_8
|
|
},
|
|
connectionsList: {
|
|
marginTop: Module712.space.PX_8
|
|
},
|
|
footer: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "flex-end",
|
|
alignItems: "center",
|
|
bottom: 0,
|
|
paddingBottom: Module712.space.PX_8,
|
|
position: "absolute",
|
|
width: "100%",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
|
|
},
|
|
footerContent: {
|
|
width: "100%",
|
|
paddingHorizontal: Module712.space.PX_16
|
|
}
|
|
});
|
|
export default function GuildOnboardingConnectionPrompt(props) {
|
|
let props2;
|
|
let stateFromStoresArray, stateFromStores2, stateFromStores3, stateFromStores4, stateFromStores5;
|
|
const { guildId, onComplete, isLastStep } = props;
|
|
stateFromStoresArray = void 0;
|
|
stateFromStores2 = void 0;
|
|
stateFromStores3 = void 0;
|
|
stateFromStores4 = void 0;
|
|
stateFromStores5 = void 0;
|
|
const styles = useStyles();
|
|
const navigation = useNavigation();
|
|
const bottom = useSafeAreaInsets_native().bottom;
|
|
const paddingBottom = 64 + bottom + Module712.space.PX_8;
|
|
const ref = useRef(false);
|
|
const stateFromStores = useStateFromStores([GuildOnboardingPromptsStore], () => GuildOnboardingPromptsStore.getOnboardingConnections(guildId));
|
|
stateFromStoresArray = useStateFromStoresArray([GuildOnboardingPromptsStore], () => GuildOnboardingPromptsStore.getOnboardingPromptsForOnboarding(guildId));
|
|
stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
|
|
stateFromStores3 = useStateFromStores([MemberVerificationFormStore], () => MemberVerificationFormStore.getRulesPrompt(guildId));
|
|
stateFromStores4 = useStateFromStores([GuildOnboardingPromptsStore], () => GuildOnboardingPromptsStore.isLoading());
|
|
stateFromStores5 = useStateFromStores([AuthorizedAppsStore, ConnectedAccountsStore], () => {
|
|
for (const stateFromStore of stateFromStores) {
|
|
L11: {
|
|
const r26 = stateFromStore;
|
|
const connection_type = stateFromStore.connection_type;
|
|
if (OnboardingConnectionType.APPLICATION === connection_type) {
|
|
if (AuthorizedAppsStore.getNewestTokenForApplication(r26.application_id) != null) {
|
|
break L11;
|
|
}
|
|
continue;
|
|
}
|
|
if (OnboardingConnectionType.PROVIDER_CONNECTED_ACCOUNT !== connection_type) {
|
|
r26.connection_type;
|
|
continue;
|
|
}
|
|
if (r26.provider_id == null) {
|
|
continue;
|
|
}
|
|
const account = ConnectedAccountsStore.getAccount(null, r26.provider_id);
|
|
if (account == null) {
|
|
continue;
|
|
}
|
|
if (account.revoked) {
|
|
continue;
|
|
}
|
|
return true;
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
}, [stateFromStores]);
|
|
useEffect(() => {
|
|
if (!stateFromStores4 && stateFromStores.length !== 0 && !ref.current) {
|
|
const providerConnectionState = getProviderConnectionState(stateFromStores);
|
|
const applicationConnectionState = getApplicationConnectionState(stateFromStores);
|
|
AnalyticsUtils.track(AnalyticEvents.GUILD_ONBOARDING_STEP_VIEWED, {
|
|
...collectGuildAnalyticsMetadata(guildId),
|
|
step: CONNECTIONS_STEP,
|
|
required: false,
|
|
provider_connections_connected: providerConnectionState.connected,
|
|
provider_connections_not_connected: providerConnectionState.notConnected,
|
|
application_connections_connected: applicationConnectionState.connected,
|
|
application_connections_not_connected: applicationConnectionState.notConnected
|
|
});
|
|
ref.current = true;
|
|
}
|
|
}, [guildId, stateFromStores4, stateFromStores]);
|
|
const callback = useCallback(() => {
|
|
const providerConnectionState = getProviderConnectionState(stateFromStores);
|
|
const applicationConnectionState = getApplicationConnectionState(stateFromStores);
|
|
AnalyticsUtils.track(AnalyticEvents.GUILD_ONBOARDING_STEP_COMPLETED, {
|
|
...collectGuildAnalyticsMetadata(guildId),
|
|
step: CONNECTIONS_STEP,
|
|
skipped: !stateFromStores5,
|
|
back: false,
|
|
options_selected: 0,
|
|
in_onboarding: true,
|
|
is_final_step: isLastStep,
|
|
provider_connections_connected: providerConnectionState.connected,
|
|
provider_connections_not_connected: providerConnectionState.notConnected,
|
|
application_connections_connected: applicationConnectionState.connected,
|
|
application_connections_not_connected: applicationConnectionState.notConnected
|
|
});
|
|
if (stateFromStoresArray.length > 0) {
|
|
navigation.push(GuildOnboardingModalStates.PROMPT, {
|
|
currentPrompt: 0
|
|
});
|
|
} else if (showRulesInOnboarding(stateFromStores2, stateFromStores3)) {
|
|
navigation.push(GuildOnboardingModalStates.RULES);
|
|
} else {
|
|
onComplete();
|
|
}
|
|
}, [stateFromStoresArray.length, stateFromStores2, stateFromStores3, navigation, onComplete, stateFromStores, stateFromStores5, isLastStep, guildId]);
|
|
const r92 = {
|
|
top: true,
|
|
style: [styles.flex, styles.container],
|
|
children: null
|
|
};
|
|
if (stateFromStores4) {
|
|
r92.children = <View style={[styles.flex, {
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
}]}>
|
|
<Text variant="text-md/normal" color="text-muted">
|
|
{intl.string(t.ZTNur7)}
|
|
</Text>
|
|
</View>;
|
|
props2 = r92;
|
|
} else {
|
|
r92.children = <View style={styles.flex}>
|
|
<ScrollView contentContainerStyle={[styles.scrollContainer, {
|
|
paddingBottom
|
|
}]}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.title} accessibilityRole="header" variant="heading-xl/semibold" color="mobile-text-heading-primary">
|
|
{intl.string(t.eDVMrA)}
|
|
</Text>
|
|
<Text style={styles.description} variant="text-md/normal" color="text-muted">
|
|
{intl.string(t.BozOXu)}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.connectionsList}>
|
|
{stateFromStores.map((stateFromStore, index) => <ConnectionCard key={index} connection={stateFromStore} guildId={guildId} location={AnalyticsLocation.GUILD_ONBOARDING} />)}
|
|
</View>
|
|
</ScrollView>
|
|
<View style={[styles.footer, styles.footerContent, {
|
|
paddingBottom: bottom
|
|
}]}>
|
|
<Button variant={stateFromStores5 ? "primary" : isLastStep ? "primary" : "secondary"} size="md" text={isLastStep ? `${intl.string(t["8SuVoE"])} 🎉` : stateFromStores5 ? intl.string(t.PDTjLN) : intl.string(t["5Wxrcd"])} onPress={callback} grow />
|
|
</View>
|
|
</View>;
|
|
props2 = r92;
|
|
}
|
|
return <SafeAreaPaddingView {...props2} />;
|
|
};
|