110 lines
4.2 KiB
TypeScript
110 lines
4.2 KiB
TypeScript
// Metro module 8644 (f8645).
|
|
import { useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import UserStore from "../../../../stores/UserStore";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import useStartAuthorize from "../../../application_account_linking/native/useStartAuthorize";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import { GameProfileTrackActionActions } from "../../GameProfileAnalyticUtils";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import { Avatar, AvatarSizes } from "../../../../design/void/native";
|
|
import { Button } from "../../../../design/components/Button/native/Button.native";
|
|
import { ExperimentalGameControllerLinkIcon } from "../../../../design/components/Icon/native/redesign/generated/ExperimentalGameControllerLinkIcon";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
gap: Module712.space.PX_8
|
|
},
|
|
headerText: {
|
|
paddingHorizontal: Module712.space.PX_8
|
|
},
|
|
card: {
|
|
borderRadius: Module712.radii.lg,
|
|
borderWidth: 1,
|
|
borderColor: Module712.colors.BORDER_SUBTLE,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
padding: Module712.space.PX_16,
|
|
gap: Module712.space.PX_16
|
|
},
|
|
cardImagesContainer: {
|
|
flexDirection: "row",
|
|
gap: Module712.space.PX_8,
|
|
alignItems: "center",
|
|
alignSelf: "center"
|
|
},
|
|
ellipseGroup: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
gap: Module712.space.PX_4
|
|
},
|
|
ellipse: {
|
|
width: 4,
|
|
height: 4,
|
|
backgroundColor: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY,
|
|
opacity: 0.3,
|
|
borderRadius: Module712.radii.round
|
|
},
|
|
cardImageApplication: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: Module712.radii.sm
|
|
},
|
|
cardContent: {
|
|
gap: Module712.space.PX_4,
|
|
alignSelf: "center",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingHorizontal: Module712.space.PX_24
|
|
},
|
|
cardText: {
|
|
textAlign: "center"
|
|
}
|
|
});
|
|
export default function GameProfileLinkAccount(props) {
|
|
const { game, trackAction, analyticsLocations } = props;
|
|
const styles = useStyles();
|
|
const startAuthorize = useStartAuthorize(game);
|
|
const { fetched, hasAlreadyLinked, canStartAuthorization, startAuthorization, connectionApp } = startAuthorize;
|
|
const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
|
|
const callback = useCallback(() => {
|
|
trackAction(GameProfileTrackActionActions.LinkAccount);
|
|
startAuthorization({
|
|
analyticsLocations
|
|
});
|
|
}, [trackAction, startAuthorization, analyticsLocations]);
|
|
if (fetched && connectionApp != null && canStartAuthorization && !hasAlreadyLinked && stateFromStores != null) {
|
|
const iconSource = connectionApp.getIconSource(48);
|
|
return <View style={styles.container}>
|
|
<Text variant="heading-sm/semibold" color="mobile-text-heading-primary" style={styles.headerText}>
|
|
{intl.string(t["VDAhr+"])}
|
|
</Text>
|
|
<View style={styles.card}>
|
|
{iconSource != null ? <View style={styles.cardImagesContainer}>
|
|
<FastImage source={iconSource} style={styles.cardImageApplication} />
|
|
<View style={styles.ellipseGroup}>
|
|
<View style={styles.ellipse} />
|
|
<View style={styles.ellipse} />
|
|
<View style={styles.ellipse} />
|
|
</View>
|
|
<Avatar size={AvatarSizes.LARGE_48} user={stateFromStores} guildId={void 0} />
|
|
</View> : null}
|
|
<View style={styles.cardContent}>
|
|
<Text variant="heading-md/semibold" color="mobile-text-heading-primary" style={styles.cardText}>
|
|
{intl.formatToPlainString(t.hUbQT2, {
|
|
gameName: connectionApp.name
|
|
})}
|
|
</Text>
|
|
<Text variant="text-sm/medium" color="text-default" style={styles.cardText}>
|
|
{intl.string(t["JKqu+4"])}
|
|
</Text>
|
|
</View>
|
|
<Button variant="secondary" size="md" text={intl.string(t.jynBQ5)} onPress={callback} icon={<ExperimentalGameControllerLinkIcon size="sm" />} />
|
|
</View>
|
|
</View>;
|
|
}
|
|
return null;
|
|
};
|