443 lines
15 KiB
TypeScript
443 lines
15 KiB
TypeScript
// Metro module 10023 (f10024).
|
|
import * as Module19 from "react";
|
|
import { useCallback, useMemo } from "react";
|
|
import { View, Pressable } from "react-native";
|
|
import LocaleStore from "../../user_settings/LocaleStore";
|
|
import UserRecord from "../../../records/UserRecord";
|
|
import StreamerModeStore from "../../../stores/StreamerModeStore";
|
|
import UserProfileStore from "../UserProfileStore";
|
|
import { PlatformTypes, ThemeTypes, AnalyticEvents } from "../../../Constants";
|
|
import { FORM_ROW_VERTICAL_PADDING } from "../../../design/void/Form/native/FormConstants";
|
|
import { MetadataFields } from "../../connections/Constants";
|
|
import { jsx } from "react/jsx-runtime";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { getCreatedAtDate } from "../../connections/ConnectionsUtils";
|
|
import { generateRedditMetadataItems, generateSteamMetadataItems, generatePaypalMetadataItems, generateEbayMetadataItems, generateTikTokMetadataItems, generateTwitterMetadataItems, generateRoleConnectionMetadataItems } from "../../connections/native/ConnectionMetadataVanityItems";
|
|
import Platforms from "../../../lib/Platforms";
|
|
import { makeSource } from "../../../utils/AvatarUtils";
|
|
import * as _shared from "../../../design/shared";
|
|
import { Icon, Avatar, AvatarSizes } from "../../../design/void/native";
|
|
import Module10027 from "../../../_bundle/Module10027";
|
|
import Module10028 from "../../../_bundle/Module10028";
|
|
import { useToken } from "../../../design/tokens/native/useToken";
|
|
import Module10029 from "../../../_bundle/Module10029";
|
|
import Module10030 from "../../../_bundle/Module10030";
|
|
import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
|
|
import { copy } from "../../../utils/ClipboardUtils.native";
|
|
import { presentCopiedToClipboard } from "../../toast/native/ToastUtils";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { handleClick } from "../../../utils/MaskedLinkUtils";
|
|
import { trackWithMetadata } from "../../app_analytics/AppAnalyticsUtils";
|
|
import Linking from "../../../lib/native/Linking";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { useThemeContext } from "../../../_bundle/Module3901";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import { usePlatformAllowed } from "../../connections/ConnectionsHooks";
|
|
import UserProfileSection from "./UserProfileSection";
|
|
function $mk83792($env) {
|
|
return (a0, a1) => {
|
|
const r6 = $env;
|
|
const r1 = $env.$parent;
|
|
const r4 = r1[14];
|
|
return r4(r1[3].Fragment, {
|
|
children: r4(r1[19], {
|
|
applicationRoleConnection: a0,
|
|
theme: r6[1],
|
|
locale: r6[2],
|
|
style: r6[0]
|
|
})
|
|
}, a1);
|
|
};
|
|
}
|
|
function $mk83794($env) {
|
|
return (a0) => {
|
|
const r2 = $env.$parent;
|
|
const r10 = (0, r2[1])(r2[2][14]).get(a0.type);
|
|
return r10 != null && (0, $env[4])(r10);
|
|
};
|
|
}
|
|
function $mk83795($env) {
|
|
return (a0, a1) => {
|
|
const r6 = $env;
|
|
const r1 = $env.$parent;
|
|
const r4 = r1[14];
|
|
return r4(r1[3].Fragment, {
|
|
children: r4(r1[18], {
|
|
account: a0,
|
|
theme: r6[2],
|
|
locale: r6[3],
|
|
userId: r6[0],
|
|
style: r6[1]
|
|
})
|
|
}, a1);
|
|
};
|
|
}
|
|
let useStyles, c6667_18, c6667_19, c6667_20, c6667_21;
|
|
let $mk83791 = function() {
|
|
return () => LocaleStore.locale;
|
|
}, $mk83793 = function() {
|
|
return () => LocaleStore.locale;
|
|
};
|
|
let env6667 = {};
|
|
export function ConnectedUserAccount(props) {
|
|
let r17, r36;
|
|
const account = props.account;
|
|
let theme = props.theme;
|
|
const { locale, userId, style } = props;
|
|
let showMetadata = props.showMetadata;
|
|
const showInvisibleIcon = props.showInvisibleIcon;
|
|
if (showMetadata == null) {
|
|
showMetadata = true;
|
|
}
|
|
const styles = useStyles();
|
|
let metadata = account.metadata;
|
|
if (metadata == null) {
|
|
metadata = {};
|
|
}
|
|
const date = showMetadata ? getCreatedAtDate(metadata[MetadataFields.CREATED_AT], locale) : null;
|
|
L22: {
|
|
r36 = void 0;
|
|
r17 = void 0;
|
|
if (showMetadata) {
|
|
const type = account.type;
|
|
if (PlatformTypes.REDDIT === type) {
|
|
r17 = generateRedditMetadataItems(metadata, styles.metadataItem);
|
|
r36 = void 0;
|
|
} else if (PlatformTypes.STEAM === type) {
|
|
r17 = generateSteamMetadataItems(metadata, styles.metadataItem);
|
|
r36 = void 0;
|
|
} else {
|
|
if (PlatformTypes.BLUESKY !== type && PlatformTypes.MASTODON !== type && PlatformTypes.TWITTER !== type) {
|
|
if (PlatformTypes.PAYPAL === type) {
|
|
r17 = generatePaypalMetadataItems(metadata, styles.metadataItem);
|
|
r36 = void 0;
|
|
break L22;
|
|
}
|
|
if (PlatformTypes.EBAY === type) {
|
|
r17 = generateEbayMetadataItems(metadata, styles.metadataItem);
|
|
r36 = void 0;
|
|
break L22;
|
|
}
|
|
const TIKTOK = PlatformTypes.TIKTOK;
|
|
r36 = void 0;
|
|
r17 = void 0;
|
|
if (TIKTOK !== type) {
|
|
break L22;
|
|
}
|
|
r17 = generateTikTokMetadataItems(metadata, styles.metadataItem);
|
|
r36 = void 0;
|
|
break L22;
|
|
}
|
|
const r70 = generateTwitterMetadataItems(metadata, styles.metadataItem);
|
|
const r73 = metadata[MetadataFields.TWITTER_VERIFIED];
|
|
r36 = void 0;
|
|
r17 = r70;
|
|
if (r73 === "1") {
|
|
r36 = Platforms.get(PlatformTypes.TWITTER).color;
|
|
r17 = r70;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const r97 = Platforms.get(account.type);
|
|
let c17631_2 = r97;
|
|
const isThemeDark = _shared.isThemeDark(theme);
|
|
const r3 = r97 == null;
|
|
const source = makeSource(isThemeDark ? r3 ? void 0 : r97.icon.darkPNG : r3 ? void 0 : r97.icon.lightPNG);
|
|
const r110 = r97 == null;
|
|
let r111 = void 0;
|
|
if (!r110) {
|
|
const getPlatformUserUrl = r97.getPlatformUserUrl;
|
|
r111 = getPlatformUserUrl == null ? void 0 : getPlatformUserUrl.call(r97, account);
|
|
}
|
|
const platformUserUrl = r111;
|
|
const r115 = showInvisibleIcon != null && showInvisibleIcon ? (0, jsx)(Icon, {
|
|
style: styles.connectedAccountOpenHide,
|
|
source: Module10027
|
|
}) : platformUserUrl != null ? (0, jsx)(Icon, {
|
|
style: styles.connectedAccountOpenLink,
|
|
source: Module10028
|
|
}) : null;
|
|
const token = useToken(Module712.colors.BACKGROUND_MOD_MUTED, theme);
|
|
const INTERACTIVE_TEXT_ACTIVE = Module712.colors.INTERACTIVE_TEXT_ACTIVE;
|
|
if (r36 != null) {
|
|
theme = ThemeTypes.DARK;
|
|
}
|
|
let color = useToken(INTERACTIVE_TEXT_ACTIVE, theme);
|
|
let color2 = token;
|
|
if (r36 != null) {
|
|
color = Module712.unsafe_rawColors.WHITE;
|
|
color2 = r36;
|
|
}
|
|
const r151 = account.verified ? <View style={styles.verifiedCheckContainer}>
|
|
<Icon style={styles.verifiedCheck} size={Icon.Sizes.REFRESH_SMALL_16} source={Module10029} color={color2} />
|
|
<Icon style={styles.verifiedCheck} size={Icon.Sizes.REFRESH_SMALL_16} source={Module10030} color={color} />
|
|
</View> : null;
|
|
const callback = useCallback(() => {
|
|
triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
|
|
copy(account.name);
|
|
presentCopiedToClipboard();
|
|
}, [account.name]);
|
|
const memo = useMemo(() => {
|
|
let r21;
|
|
if (platformUserUrl != null) {
|
|
r21 = intl.string(t.wuRE8M);
|
|
} else {
|
|
const OKzaN3 = t.OKzaN3;
|
|
let name = c17631_2?.name;
|
|
if (name == null) {
|
|
name = "";
|
|
}
|
|
r21 = intl.formatToPlainString(OKzaN3, {
|
|
name
|
|
});
|
|
}
|
|
return r21;
|
|
}, [r97?.name, platformUserUrl]);
|
|
const callback2 = useCallback(() => {
|
|
if (platformUserUrl != null) {
|
|
handleClick({
|
|
href: platformUserUrl,
|
|
trusted: account.type !== PlatformTypes.DOMAIN,
|
|
onConfirm: () => {
|
|
trackWithMetadata(AnalyticEvents.CONNECTED_ACCOUNT_VIEWED, {
|
|
platform_type: account.type,
|
|
other_user_id: userId
|
|
});
|
|
Linking.openURL(platformUserUrl);
|
|
}
|
|
});
|
|
}
|
|
}, [account.type, platformUserUrl, userId]);
|
|
const Component = platformUserUrl != null ? PressableOpacity : Pressable;
|
|
return <Component accessibilityLabel={memo} accessibilityRole="button" onPress={platformUserUrl != null ? callback2 : void 0} onLongPress={callback}>
|
|
<View style={[styles.connectedAccountContainer, style]}>
|
|
<View style={styles.connectedAccount}>
|
|
<Icon size={Icon.Sizes.MEDIUM} source={source} disableColor />
|
|
<View style={styles.connectedAccountNameContainer}>
|
|
<View style={styles.connectedAccountName}>
|
|
<Text variant="text-md/semibold" style={styles.connectedAccountNameText}>{account.name}</Text>
|
|
{r151}
|
|
</View>
|
|
{date != null ? <Text variant="heading-deprecated-12/medium" style={styles.connectedAccountNameCreatedAtText}>
|
|
{intl.format(t["9rfonh"], {
|
|
date
|
|
})}
|
|
</Text> : null}
|
|
{r17 != null ? r17.length > 0 ? <View style={styles.connectedAccountChildren}>{r17}</View> : null : null}
|
|
</View>
|
|
{r115}
|
|
</View>
|
|
</View>
|
|
</Component>;
|
|
}
|
|
export function ConnectedApplicationUserRoleAccount(props) {
|
|
const { applicationRoleConnection, style } = props;
|
|
const styles = useStyles();
|
|
let c17632_1 = styles;
|
|
const r12 = generateRoleConnectionMetadataItems(applicationRoleConnection);
|
|
return <View style={[styles.connectedAccountContainer, style]}>
|
|
{applicationRoleConnection.platform_name != null ? (0, jsx)(Text, {
|
|
variant: "eyebrow",
|
|
color: "interactive-text-default",
|
|
children: applicationRoleConnection.platform_name
|
|
}) : null}
|
|
<View style={styles.appConnectionNameContainer}>
|
|
{applicationRoleConnection.platform_username != null ? <Text variant="text-md/semibold" color="interactive-text-active">{applicationRoleConnection.platform_username}</Text> : null}
|
|
</View>
|
|
{r12 != null ? r12.length > 0 ? <View style={styles.connectedAccountChildren}>{r12}</View> : null : null}
|
|
<View style={{
|
|
flexDirection: "row"
|
|
}}>
|
|
<View style={styles.connectedAccountPoweredByContainer}>
|
|
<Text variant="text-xs/normal" color="text-muted">
|
|
{intl.format(t.zIT9YA, {
|
|
applicationHook: () => <View style={c17632_1.connectedAccountPoweredByText}>
|
|
{applicationRoleConnection.application.bot != null ? <Avatar style={c17632_1.connectedAccountPoweredByAvatar} user={new UserRecord(applicationRoleConnection.application.bot)} size={AvatarSizes.SIZE_16} guildId={void 0} /> : null}
|
|
{(0, jsx)(Text, {
|
|
variant: "text-xs/normal",
|
|
color: "text-default",
|
|
children: applicationRoleConnection.application.name
|
|
})}
|
|
</View>
|
|
})}
|
|
</Text>
|
|
</View>
|
|
<View style={{
|
|
flexGrow: 1
|
|
}} />
|
|
</View>
|
|
</View>;
|
|
}
|
|
useStyles = createStyles({
|
|
connectedAccountContainer: {
|
|
paddingHorizontal: 10,
|
|
paddingVertical: FORM_ROW_VERTICAL_PADDING / 2
|
|
},
|
|
connectedAccount: {
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
connectedAccountNameContainer: {
|
|
flex: 1,
|
|
marginLeft: 8
|
|
},
|
|
connectedAccountName: {
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
connectedAccountNameText: {
|
|
color: Module712.colors.INTERACTIVE_TEXT_ACTIVE
|
|
},
|
|
connectedAccountNameCreatedAtText: {
|
|
color: Module712.colors.TEXT_SUBTLE
|
|
},
|
|
connectedAccountOpenLink: {
|
|
height: 24,
|
|
width: 24,
|
|
transform: [{
|
|
rotate: "135deg"
|
|
}],
|
|
tintColor: Module712.colors.INTERACTIVE_TEXT_ACTIVE
|
|
},
|
|
connectedAccountOpenHide: {
|
|
alignSelf: "flex-start",
|
|
margin: 4,
|
|
height: 16,
|
|
width: 16,
|
|
tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
|
|
},
|
|
verifiedCheckContainer: {
|
|
marginLeft: 4,
|
|
height: 16,
|
|
width: 16
|
|
},
|
|
verifiedCheck: {
|
|
position: "absolute",
|
|
left: 0,
|
|
top: 0
|
|
},
|
|
connectedAccountChildren: {
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
overflow: "hidden"
|
|
},
|
|
metadataItem: {
|
|
color: Module712.colors.INTERACTIVE_TEXT_ACTIVE
|
|
},
|
|
appConnectionNameContainer: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginTop: 4
|
|
},
|
|
connectedAccountPoweredByContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
|
|
borderRadius: Module712.radii.sm,
|
|
borderWidth: 1,
|
|
borderColor: Module712.colors.BORDER_SUBTLE,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
marginTop: 12
|
|
},
|
|
connectedAccountPoweredByAvatar: {
|
|
marginRight: 4
|
|
},
|
|
connectedAccountPoweredByText: {
|
|
marginTop: -4,
|
|
alignItems: "center",
|
|
flexDirection: "row"
|
|
}
|
|
});
|
|
c6667_18 = Module19.memo(ConnectedUserAccount);
|
|
c6667_19 = Module19.memo(ConnectedApplicationUserRoleAccount);
|
|
c6667_20 = [];
|
|
c6667_21 = [];
|
|
export default function LegacyUserProfileConnections(props) {
|
|
const user = props.user;
|
|
const stateFromStores = useStateFromStores([UserProfileStore], () => UserProfileStore.getUserProfile(user.id));
|
|
const stateFromStores2 = useStateFromStores([StreamerModeStore], () => StreamerModeStore.hidePersonalInformation);
|
|
const memo = useMemo(() => {
|
|
let r4 = stateFromStores?.applicationRoleConnections;
|
|
if (r4 == null) {
|
|
r4 = c6667_21;
|
|
}
|
|
return r4;
|
|
}, [stateFromStores?.applicationRoleConnections]);
|
|
const connectedAccounts = stateFromStores?.connectedAccounts;
|
|
let env17636;
|
|
let env17637;
|
|
const memo2 = useMemo(() => {
|
|
let r4 = stateFromStores?.connectedAccounts;
|
|
if (r4 == null) {
|
|
r4 = c6667_20;
|
|
}
|
|
return r4;
|
|
}, [connectedAccounts]);
|
|
const r39 = env17636 = {
|
|
$parent: env6667
|
|
};
|
|
env17636[0] = void 0;
|
|
env17636[1] = void 0;
|
|
env17636[2] = void 0;
|
|
env17636[1] = useThemeContext().theme;
|
|
env17636[2] = useStateFromStores([LocaleStore], $mk83791());
|
|
const children = memo.map($mk83792(r39));
|
|
const id = user.id;
|
|
const r55 = env17637 = {
|
|
$parent: env6667
|
|
};
|
|
env17637[0] = id;
|
|
env17637[1] = void 0;
|
|
env17637[2] = void 0;
|
|
env17637[3] = void 0;
|
|
env17637[4] = void 0;
|
|
env17637[2] = useThemeContext().theme;
|
|
env17637[3] = useStateFromStores([LocaleStore], $mk83793());
|
|
env17637[4] = usePlatformAllowed({
|
|
forUserProfile: true
|
|
});
|
|
const children2 = memo2.filter($mk83794(r55)).map($mk83795(r55));
|
|
return stateFromStores2 ? null : memo2.length !== 0 ? <>
|
|
{children != null && children.length > 0 && (0, jsx)(UserProfileSection, {
|
|
title: intl.string(t.PHjkRE),
|
|
showContainer: true,
|
|
children
|
|
})}
|
|
{(0, jsx)(UserProfileSection, {
|
|
title: intl.string(t["3fe7U5"]),
|
|
showContainer: true,
|
|
children: children2
|
|
})}
|
|
</> : null;
|
|
};
|
|
export function useAppplicationRoleConnectionItems(a0, a1) {
|
|
let env17633;
|
|
const r1 = env17633 = {
|
|
$parent: env6667
|
|
};
|
|
env17633[0] = a1;
|
|
env17633[1] = useThemeContext().theme;
|
|
env17633[2] = useStateFromStores([LocaleStore], $mk83791());
|
|
return a0.map($mk83792(r1));
|
|
}
|
|
export function useConnectedAccountItems(a0, a1, a2) {
|
|
let env17634;
|
|
const r1 = env17634 = {
|
|
$parent: env6667
|
|
};
|
|
env17634[0] = a1;
|
|
env17634[1] = a2;
|
|
env17634[2] = useThemeContext().theme;
|
|
env17634[3] = useStateFromStores([LocaleStore], $mk83793());
|
|
env17634[4] = usePlatformAllowed({
|
|
forUserProfile: true
|
|
});
|
|
return a0.filter($mk83794(r1)).map($mk83795(r1));
|
|
}
|