198 lines
8.0 KiB
TypeScript
198 lines
8.0 KiB
TypeScript
// Metro module 15164 (f15165).
|
|
import { memo } from "react";
|
|
import { Image as Image2, View } from "react-native";
|
|
import UserStore from "../../../stores/UserStore";
|
|
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import GameIcon, { GameIconSizes, GameIconImageSize } from "../../game_detection/native/GameIcon";
|
|
import mobileAccountLinkingExperiment, { MobileAccountLinkingBannerSize } from "../experiments/mobileAccountLinkingExperiment";
|
|
import { scaleTextLineHeight } from "../../screen/native/useScaledTextLineHeight.android";
|
|
import { MEDIUM_BUTTON_HEIGHT, SMALL_BUTTON_HEIGHT } from "../../../design/components/Button/native/ButtonConstants.native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
|
|
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
|
|
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
|
|
import { Card } from "../../../design/components/Card/native/Card.native";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
|
|
import { Avatar, AvatarSizes } from "../../../design/void/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 { ExperimentalGameControllerLinkIcon } from "../../../design/components/Icon/native/redesign/generated/ExperimentalGameControllerLinkIcon";
|
|
let PX_8, PX_82, PX_12, PX_16, PX_4, NORMAL, c10760_16, variant, variant2, PX_162, PX_122, useStyles, useStyles2, AccountLinkMediumBanner;
|
|
const AccountLinkLargeBanner = function AccountLinkLargeBanner(props) {
|
|
let analyticsLocations;
|
|
const { application, markAsDismissed, startAuthorization } = props;
|
|
analyticsLocations = void 0;
|
|
const styles = useStyles();
|
|
const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
|
|
analyticsLocations = useAnalyticsLocations(AnalyticsLocation.MOBILE_ACCOUNT_LINK_LARGE_BANNER).analyticsLocations;
|
|
const name = application.name;
|
|
const reward_name = application.applicationAccountLinkBenefitConfig?.reward_name;
|
|
return reward_name == null ? null : <Card variant="secondary" style={styles.card}>
|
|
<PressableOpacity accessibilityRole="button" onPress={() => markAsDismissed(ContentDismissActionType.USER_DISMISS)} style={styles.closeButton}>
|
|
<XSmallIcon size="sm" color="text-muted" />
|
|
</PressableOpacity>
|
|
<View style={styles.imagesContainer}>
|
|
<GameIcon game={application} size={NORMAL} />
|
|
<View style={styles.ellipsisContainer}>
|
|
<View style={styles.ellipsisDot} />
|
|
<View style={styles.ellipsisDot} />
|
|
<View style={styles.ellipsisDot} />
|
|
</View>
|
|
<Avatar user={stateFromStores} size={AvatarSizes.LARGE_48} guildId={void 0} />
|
|
</View>
|
|
<Text variant={variant} color="mobile-text-heading-primary" style={styles.title}>
|
|
{intl.formatToPlainString(t["3gpxqO"], {
|
|
gameName: name
|
|
})}
|
|
</Text>
|
|
<Text variant={variant2} color="text-muted" style={styles.body}>
|
|
{intl.formatToPlainString(t.vxvKMm, {
|
|
rewardName: reward_name
|
|
})}
|
|
</Text>
|
|
<View style={styles.ctaContainer}>
|
|
<Button variant="secondary" size="md" text={intl.string(t["0mvtKL"])} onPress={() => {
|
|
startAuthorization({
|
|
analyticsLocations
|
|
});
|
|
}} icon={<ExperimentalGameControllerLinkIcon size="sm" />} />
|
|
</View>
|
|
</Card>;
|
|
};
|
|
AccountLinkMediumBanner = function AccountLinkMediumBanner(props) {
|
|
const { application, markAsDismissed: markAsDismissed2, startAuthorization: startAuthorization2 } = props;
|
|
const styles2 = useStyles2();
|
|
const analyticsLocations2 = useAnalyticsLocations(AnalyticsLocation.MOBILE_ACCOUNT_LINK_MEDIUM_BANNER).analyticsLocations;
|
|
const name = application.name;
|
|
const reward_name = application.applicationAccountLinkBenefitConfig?.reward_name;
|
|
const reward_image = application.applicationAccountLinkBenefitConfig?.reward_image;
|
|
return reward_name == null ? null : reward_image == null ? null : <Card variant="secondary" style={styles2.card}>
|
|
<View style={styles2.contentContainer}>
|
|
<Image2 source={{
|
|
uri: reward_image
|
|
}} style={styles2.rewardImage} resizeMode="contain" />
|
|
<Text variant="heading-sm/semibold" color="mobile-text-heading-primary" style={styles2.bodyText}>
|
|
{intl.formatToPlainString(t["V/C76E"], {
|
|
gameName: name,
|
|
rewardName: reward_name
|
|
})}
|
|
</Text>
|
|
<PressableOpacity accessibilityRole="button" onPress={() => markAsDismissed2(ContentDismissActionType.USER_DISMISS)} style={styles2.closeButton}>
|
|
<XSmallIcon size="sm" color="text-muted" />
|
|
</PressableOpacity>
|
|
</View>
|
|
<View style={styles2.ctaContainer}>
|
|
<Button variant="secondary" size="sm" text={intl.string(t["0mvtKL"])} onPress={() => {
|
|
startAuthorization2({
|
|
analyticsLocations: analyticsLocations2
|
|
});
|
|
}} icon={<ExperimentalGameControllerLinkIcon size="xs" />} />
|
|
</View>
|
|
</Card>;
|
|
};
|
|
PX_8 = Module712.space.PX_8;
|
|
PX_82 = Module712.space.PX_8;
|
|
PX_12 = Module712.space.PX_12;
|
|
PX_16 = Module712.space.PX_16;
|
|
PX_4 = Module712.space.PX_4;
|
|
NORMAL = GameIconSizes.NORMAL;
|
|
c10760_16 = GameIconImageSize[NORMAL];
|
|
variant = "heading-md/bold";
|
|
variant2 = "text-sm/medium";
|
|
PX_162 = Module712.space.PX_16;
|
|
PX_122 = Module712.space.PX_12;
|
|
useStyles = createStyles({
|
|
card: {
|
|
padding: PX_12
|
|
},
|
|
closeButton: {
|
|
position: "absolute",
|
|
top: Module712.space.PX_12,
|
|
right: Module712.space.PX_12,
|
|
width: 24,
|
|
height: 24,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
zIndex: 1
|
|
},
|
|
imagesContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
ellipsisContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginHorizontal: Module712.space.PX_8,
|
|
gap: Module712.space.PX_4
|
|
},
|
|
ellipsisDot: {
|
|
width: Module712.space.PX_4,
|
|
height: Module712.space.PX_4,
|
|
borderRadius: Module712.space.PX_4 / 2,
|
|
backgroundColor: Module712.colors.INTERACTIVE_MUTED
|
|
},
|
|
title: {
|
|
marginTop: PX_16,
|
|
textAlign: "center"
|
|
},
|
|
body: {
|
|
marginTop: PX_4,
|
|
textAlign: "center"
|
|
},
|
|
ctaContainer: {
|
|
marginTop: PX_162
|
|
}
|
|
});
|
|
useStyles2 = createStyles({
|
|
card: {
|
|
padding: PX_12
|
|
},
|
|
closeButton: {
|
|
width: 24,
|
|
height: 24,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
alignSelf: "flex-start"
|
|
},
|
|
contentContainer: {
|
|
flexDirection: "row",
|
|
gap: Module712.space.PX_12
|
|
},
|
|
rewardImage: {
|
|
width: 48,
|
|
height: 48
|
|
},
|
|
bodyText: {
|
|
flexGrow: 1,
|
|
flexShrink: 1,
|
|
alignSelf: "center"
|
|
},
|
|
ctaContainer: {
|
|
marginTop: PX_122,
|
|
width: "100%"
|
|
}
|
|
});
|
|
const r133 = memo(function(a0) {
|
|
const config = mobileAccountLinkingExperiment.useConfig({
|
|
location: "AccountLinkBanner"
|
|
});
|
|
const { enabled, bannerSize } = config;
|
|
return enabled ? <>
|
|
{[bannerSize === MobileAccountLinkingBannerSize.LARGE && <AccountLinkLargeBanner {...a0} />, bannerSize === MobileAccountLinkingBannerSize.MEDIUM && <AccountLinkMediumBanner {...a0} />]}
|
|
</> : null;
|
|
});
|
|
export default r133;
|
|
export { PX_8 as ACCOUNT_LINK_BANNER_MARGIN_TOP };
|
|
export { PX_82 as ACCOUNT_LINK_BANNER_MARGIN_BOTTOM };
|
|
export function getScaledAccountLinkBannerHeight(a0) {
|
|
const config = mobileAccountLinkingExperiment.getConfig({
|
|
location: "getScaledAccountLinkBannerHeight"
|
|
});
|
|
const { enabled, bannerSize } = config;
|
|
return enabled ? bannerSize === MobileAccountLinkingBannerSize.LARGE ? PX_8 + PX_12 + c10760_16 + PX_16 + scaleTextLineHeight(variant, a0) + PX_4 + 2 * scaleTextLineHeight(variant2, a0) + PX_162 + MEDIUM_BUTTON_HEIGHT + PX_12 + PX_82 : bannerSize === MobileAccountLinkingBannerSize.MEDIUM ? PX_8 + PX_12 + 48 + PX_122 + SMALL_BUTTON_HEIGHT + PX_12 + PX_82 : 0 : 0;
|
|
}
|