171 lines
8.3 KiB
TypeScript
171 lines
8.3 KiB
TypeScript
// Metro module 15757 (f15758).
|
|
import { useId, useState, useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import ConnectedAccountsStore from "../../../stores/ConnectedAccountsStore";
|
|
import UserStore from "../../../stores/UserStore";
|
|
import LocalAppDetectionStore from "./LocalAppDetectionStore";
|
|
import { AnalyticsLocations, PlatformTypes, UserSettingsSections } from "../../../Constants";
|
|
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useThemeContext } from "../../../_bundle/Module3901";
|
|
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
|
|
import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
|
|
import { ActionSheetCloseButton } from "../../../design/components/Sheet/native/ActionSheetCloseButton.native";
|
|
import { Stack } from "../../../design/components/Stack/native/Stack.native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import { WindowLaunchIcon } from "../../../design/components/Icon/native/redesign/generated/WindowLaunchIcon";
|
|
import authorizeConnection_native from "../../connections/authorizeConnection.native";
|
|
import { openUserSettings } from "../../user_settings/core/native/openUserSettings";
|
|
import * as _themes from "../../../design/utils/shared/themes";
|
|
import Platforms from "../../../lib/Platforms";
|
|
import { makeSource } from "../../../utils/AvatarUtils";
|
|
import { Icon, IconSizes, Avatar, AvatarSizes } from "../../../design/void/native";
|
|
import Module8531, { Path, Defs, LinearGradient, Stop } from "../../../_bundle/Module8531";
|
|
import { useStateFromStores, useStateFromStoresObject } from "../../../_bundle/Module589";
|
|
import { DetectableAppNames } from "../LocalAppDetectionTypes";
|
|
import ConnectedAccountsActionCreators from "../../../actions/ConnectedAccountsActionCreators";
|
|
import { UNSAFE_markDismissibleContentAsDismissed } from "../../dismissible_content/DismissibleContentUnsafeUtils";
|
|
import { DismissibleContent } from "../../../_bundle/Module1358";
|
|
let useStyles, UnionIcon, UserIcon;
|
|
const RobloxIcon = function RobloxIcon(props) {
|
|
const theme = props.theme;
|
|
const styles = useStyles();
|
|
const isThemeDark = _themes.isThemeDark(theme);
|
|
const r19 = Platforms.get(PlatformTypes.ROBLOX);
|
|
const backgroundColor = isThemeDark ? "black" : "white";
|
|
const icon = r19.icon;
|
|
return <View style={[styles.robloxIconContainer, {
|
|
backgroundColor
|
|
}]}>
|
|
<Icon size={IconSizes.LARGE} source={makeSource(isThemeDark ? icon.darkPNG : icon.lightPNG)} disableColor />
|
|
</View>;
|
|
};
|
|
UnionIcon = function UnionIcon(props) {
|
|
const stopColor = _themes.isThemeDark(props.theme) ? "white" : "black";
|
|
return <Module8531 width={25} height={4} viewBox="0 0 25 4" id={useId()}>
|
|
<Path fill="url(#a)" d="M1.7002 0.799805C2.36285 0.79991 2.90039 1.33732 2.90039 2C2.90029 2.66259 2.36278 3.20009 1.7002 3.2002C1.03752 3.2002 0.500106 2.66265 0.5 2C0.5 1.33726 1.03745 0.799805 1.7002 0.799805ZM8.90039 0.799805C9.56297 0.799989 10.0996 1.33737 10.0996 2C10.0995 2.66254 9.56291 3.20001 8.90039 3.2002C8.23771 3.2002 7.70029 2.66266 7.7002 2C7.7002 1.33726 8.23765 0.799805 8.90039 0.799805ZM16.0996 0.799805C16.7624 0.799805 17.2998 1.33726 17.2998 2C17.2997 2.66266 16.7623 3.2002 16.0996 3.2002C15.4371 3.19996 14.9005 2.66251 14.9004 2C14.9004 1.3374 15.4371 0.800042 16.0996 0.799805ZM23.2998 0.799805C23.9625 0.799805 24.5 1.33726 24.5 2C24.4999 2.66266 23.9625 3.2002 23.2998 3.2002C22.6372 3.20006 22.0997 2.66258 22.0996 2C22.0996 1.33734 22.6372 0.799936 23.2998 0.799805Z" />
|
|
<Defs>
|
|
<LinearGradient id="a" x1={0.5} y1={2} x2={24.5} y2={2} gradientUnits="userSpaceOnUse">
|
|
<Stop stopColor={stopColor} stopOpacity={0.3} />
|
|
<Stop offset={1} stopColor={stopColor} stopOpacity={0.7} />
|
|
</LinearGradient>
|
|
</Defs>
|
|
</Module8531>;
|
|
};
|
|
UserIcon = function UserIcon() {
|
|
const styles = useStyles();
|
|
return <View style={styles.avatarContainer}>
|
|
<View style={styles.avatarInnerBorder} />
|
|
<Avatar size={AvatarSizes.NORMAL} user={useStateFromStores([UserStore], () => UserStore.getCurrentUser())} guildId={void 0} />
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
robloxIconContainer: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: Module712.radii.md,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
|
|
},
|
|
content: {
|
|
paddingHorizontal: Module712.space.PX_16
|
|
},
|
|
text: {
|
|
textAlign: "center"
|
|
},
|
|
avatarContainer: {
|
|
position: "relative"
|
|
},
|
|
avatarInnerBorder: {
|
|
zIndex: 1,
|
|
position: "absolute",
|
|
borderColor: Module712.colors.BORDER_STRONG,
|
|
borderRadius: Module712.radii.round,
|
|
borderWidth: 1,
|
|
width: "100%",
|
|
height: "100%"
|
|
}
|
|
});
|
|
export default function RobloxConnectionActionSheet(props) {
|
|
const markAsDismissed = props.markAsDismissed;
|
|
const handleCancel = function handleCancel() {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
if (markAsDismissed != null) {
|
|
markAsDismissed(ContentDismissActionType.DISMISS);
|
|
}
|
|
};
|
|
const styles = useStyles();
|
|
const theme = useThemeContext().theme;
|
|
return <BottomSheet startExpanded contentStyles={styles.content} header={<BottomSheetTitleHeader title={null} leading={<ActionSheetCloseButton onPress={handleCancel} />} />} onDismiss={() => markAsDismissed(ContentDismissActionType.DISMISS)}>
|
|
<Stack spacing={24} style={{
|
|
paddingBottom: useSafeAreaInsets_native().bottom
|
|
}}>
|
|
<Stack justify="center" align="center" direction="horizontal">
|
|
<RobloxIcon theme={theme} />
|
|
<UnionIcon theme={theme} />
|
|
<UserIcon />
|
|
</Stack>
|
|
<Stack justify="center">
|
|
<Text variant="heading-xl/bold" style={styles.text}>
|
|
{intl.string(t.t3asUZ)}
|
|
</Text>
|
|
<Text variant="text-md/medium" style={styles.text}>
|
|
{intl.string(t.no96NU)}
|
|
</Text>
|
|
</Stack>
|
|
<Stack>
|
|
<Button text={intl.string(t.ItuabN)} icon={<WindowLaunchIcon size="sm" color={Module712.colors.WHITE} />} iconPosition="end" size="lg" onPress={function onPress() {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
if (markAsDismissed != null) {
|
|
markAsDismissed(ContentDismissActionType.PRIMARY);
|
|
}
|
|
authorizeConnection_native({
|
|
platformType: PlatformTypes.ROBLOX,
|
|
location: AnalyticsLocations.ROBLOX_CONNECTION_ACTION_SHEET
|
|
});
|
|
openUserSettings({
|
|
screen: UserSettingsSections.CONNECTIONS
|
|
});
|
|
}} />
|
|
<Button text={intl.string(t.DiGJy3)} variant="secondary" size="lg" onPress={handleCancel} />
|
|
</Stack>
|
|
</Stack>
|
|
</BottomSheet>;
|
|
};
|
|
export { UnionIcon };
|
|
export function useShouldShowRobloxConnectionCoachmark() {
|
|
let hasRoloxAccount;
|
|
const stateFromStores = useStateFromStores([LocalAppDetectionStore], () => LocalAppDetectionStore.isAppInstalled(DetectableAppNames.ROBLOX));
|
|
const [state, setState] = useState(false);
|
|
const stateFromStoresObject = useStateFromStoresObject([ConnectedAccountsStore], () => ({
|
|
fetchingAccounts: ConnectedAccountsStore.isFetching(),
|
|
hasRoloxAccount: ConnectedAccountsStore.getAccounts().find((item) => item.type === PlatformTypes.ROBLOX) != null
|
|
}));
|
|
const fetchingAccounts = stateFromStoresObject.fetchingAccounts;
|
|
hasRoloxAccount = stateFromStoresObject.hasRoloxAccount;
|
|
useEffect(() => {
|
|
let r3 = stateFromStores;
|
|
if (stateFromStores) {
|
|
r3 = !state;
|
|
}
|
|
if (r3) {
|
|
setState(true);
|
|
ConnectedAccountsActionCreators.fetch();
|
|
}
|
|
}, [state, stateFromStores]);
|
|
useEffect(() => {
|
|
if (hasRoloxAccount) {
|
|
UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.ROBLOX_CONNECTION_COACHMARK, {
|
|
dismissAction: ContentDismissActionType.INDIRECT_ACTION
|
|
});
|
|
}
|
|
}, [hasRoloxAccount]);
|
|
return (fetchingAccounts ? !fetchingAccounts : stateFromStores) && !hasRoloxAccount;
|
|
}
|