203 lines
9.6 KiB
TypeScript
203 lines
9.6 KiB
TypeScript
// Metro module 11610 (f11611).
|
|
import { View } from "react-native";
|
|
import AccessibilityStore from "../../../a11y/AccessibilityStore";
|
|
import { GAME_SERVER_POWERUP_SKU_ID } from "../../game_server/GameServerConstants";
|
|
import { GUILD_POWERUP_CONFIGURABLE_SKUS_DESKTOP, GuildPowerupType } from "../constants/GuildPowerupsConstants";
|
|
import { jsx } from "react/jsx-runtime";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import usePowerupActiveStatus from "../hooks/usePowerupActiveStatus";
|
|
import useGuildPowerupRollbackEnabled from "../hooks/useGuildPowerupRollbackEnabled";
|
|
import { useCalculatePowerupCardStatus } from "../utils/useCalculatePowerupCardStatus";
|
|
import useGetGuildPowerupBannerImage from "../hooks/useGetGuildPowerupBannerImage";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import GuildPowerupsBoostGem from "./GuildPowerupsBoostGem";
|
|
import { GameServerHostingRive } from "../../../../_bundle/Module3901";
|
|
import GuildPowerupsImage from "./GuildPowerupsImage";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { GuildPowerupsCardFooter } from "./GuildPowerupsCardFooter";
|
|
import useGuildPowerupLevelPerks from "../hooks/useGuildPowerupLevelPerks";
|
|
import { getIconForPerk } from "../../../guild_boosting/native/GuildBoostingMarketingUtils";
|
|
import { CircleInformationIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleInformationIcon";
|
|
import { intl } from "../../../../intl/index.native";
|
|
import GuildPowerups_messages from "../GuildPowerups.messages";
|
|
import useHasAllocateBoostPermission from "../hooks/useHasAllocateBoostPermission";
|
|
import useGuildPowerupCardFooterConfig from "../hooks/useGuildPowerupCardFooterConfig";
|
|
import { GUILD_POWERUP_TAG_SKU_ID } from "../../../../_bundle/Module4080";
|
|
import { canUseMobileServerTagSettings } from "../../../guild_settings/GuildSettingsServerTagUtils";
|
|
import useCanGuildPowerupBeToggled from "../hooks/useCanGuildPowerupBeToggled";
|
|
import useGuildPowerupOnActivate from "./hooks/useGuildPowerupOnActivate";
|
|
import useGuildPowerupOnShowDeactivate from "./hooks/useGuildPowerupOnShowDeactivate";
|
|
import useGuildPowerupConfigureCallback from "./hooks/useGuildPowerupConfigureCallback";
|
|
import GuildPowerupsDisabledWarning from "./GuildPowerupsDisabledWarning";
|
|
import { Button } from "../../../../design/components/Button/native/Button.native";
|
|
import { useLogPowerupModalOpened, ModalType } from "../analytics/GuildPowerupAnalytics";
|
|
import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
|
|
let useStyles, GuildPowerupsBottomSheetLevelBody, GuildPowerupsBottomSheetBody, GuildPowerupsBottomSheetFooter;
|
|
const GuildPowerupsBottomSheetHeader = function GuildPowerupsBottomSheetHeader(props) {
|
|
const { guildId, powerup } = props;
|
|
const styles2 = useStyles();
|
|
const calculatePowerupCardStatus = useCalculatePowerupCardStatus(powerup, usePowerupActiveStatus(guildId, powerup), useGuildPowerupRollbackEnabled(guildId, powerup, "GuildPowerupsBottomSheet"));
|
|
let imageUrl = useGetGuildPowerupBannerImage(powerup, true);
|
|
if (imageUrl == null) {
|
|
imageUrl = "";
|
|
}
|
|
const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
const costDecorator = powerup.skuId === GAME_SERVER_POWERUP_SKU_ID ? "+" : void 0;
|
|
const skuId = powerup.skuId;
|
|
return <View>
|
|
{powerup.type === GuildPowerupType.LEVEL ? <GuildPowerupsBoostGem style={styles2.gemContainer} /> : skuId === GAME_SERVER_POWERUP_SKU_ID ? <View style={styles2.image}>
|
|
<GameServerHostingRive stateMachine="SM_Auto" dataBinding={{
|
|
reducedMotion: stateFromStores
|
|
}} />
|
|
</View> : <GuildPowerupsImage imageUrl={imageUrl} style={styles2.image} isAnimated />}
|
|
<View style={styles2.headerContainer}>
|
|
<Text variant="heading-xl/bold" accessibilityRole="header">{powerup.title}</Text>
|
|
<GuildPowerupsCardFooter cost={powerup.cost} costDecorator={costDecorator} status={calculatePowerupCardStatus} style={styles2.statusContainer} />
|
|
</View>
|
|
</View>;
|
|
};
|
|
GuildPowerupsBottomSheetLevelBody = function GuildPowerupsBottomSheetLevelBody(props) {
|
|
const powerup = props.powerup;
|
|
const styles = useStyles();
|
|
return <View style={styles.levelContainer}>
|
|
{useGuildPowerupLevelPerks(powerup).map((item, index) => <View key={`perk-${index}-${item.perkIcon}`} style={styles.perkContainer}>
|
|
<Text style={styles.perkText} variant="text-md/medium">{item.description}</Text>
|
|
{jsx(getIconForPerk(item.perkIcon), {
|
|
style: styles.perkIcon
|
|
})}
|
|
</View>)}
|
|
</View>;
|
|
};
|
|
GuildPowerupsBottomSheetBody = function GuildPowerupsBottomSheetBody(props) {
|
|
const powerup = props.powerup;
|
|
const styles2 = useStyles();
|
|
const type = powerup.type;
|
|
if (GuildPowerupType.PERK === type) {
|
|
return <>
|
|
<Text style={styles2.description} variant="text-md/medium">{powerup.description}</Text>
|
|
{powerup.deactivationCooldownPeriodDays != null && powerup.deactivationCooldownPeriodDays > 0 && <View style={styles2.cooldownInfo}>
|
|
<CircleInformationIcon size="xs" color={Module712.colors.TEXT_MUTED} />
|
|
<Text variant="text-sm/medium" color="text-muted">
|
|
{intl.formatToPlainString(GuildPowerups_messages.GMhQcE, {
|
|
cooldownDays: powerup.deactivationCooldownPeriodDays
|
|
})}
|
|
</Text>
|
|
</View>}
|
|
</>;
|
|
}
|
|
if (GuildPowerupType.LEVEL === type) {
|
|
return <GuildPowerupsBottomSheetLevelBody powerup={powerup} />;
|
|
}
|
|
};
|
|
GuildPowerupsBottomSheetFooter = function GuildPowerupsBottomSheetFooter(props) {
|
|
const { guildId, powerup } = props;
|
|
const styles2 = useStyles();
|
|
const hasAllocateBoostPermission = useHasAllocateBoostPermission(guildId);
|
|
const guildPowerupCardFooterConfig = useGuildPowerupCardFooterConfig(guildId, powerup);
|
|
let showToggleButton = guildPowerupCardFooterConfig.showToggleButton;
|
|
let showConfigureButton = guildPowerupCardFooterConfig.showConfigureButton;
|
|
const isPowerupActive = guildPowerupCardFooterConfig.isPowerupActive;
|
|
if (showConfigureButton) {
|
|
showConfigureButton = powerup.skuId !== GUILD_POWERUP_TAG_SKU_ID || canUseMobileServerTagSettings(guildId);
|
|
}
|
|
const canGuildPowerupBeToggled = useCanGuildPowerupBeToggled(guildId, powerup, isPowerupActive);
|
|
const { disabled, reason } = canGuildPowerupBeToggled;
|
|
const guildPowerupOnActivate = useGuildPowerupOnActivate(guildId, powerup);
|
|
const { onActivate, isLoading } = guildPowerupOnActivate;
|
|
let c19031_2 = useGuildPowerupOnShowDeactivate(guildId, powerup);
|
|
const guildPowerupConfigureCallback = useGuildPowerupConfigureCallback(guildId, powerup);
|
|
if (hasAllocateBoostPermission) {
|
|
const r53 = GUILD_POWERUP_CONFIGURABLE_SKUS_DESKTOP.has(powerup.skuId);
|
|
const r74 = [((showConfigureButton ? !showConfigureButton : isPowerupActive) && powerup.type === GuildPowerupType.PERK && r53 || powerup.skuId === GAME_SERVER_POWERUP_SKU_ID) && <Text style={styles2.description} variant="text-md/bold">
|
|
{intl.string(GuildPowerups_messages["jo5++h"])}
|
|
</Text>, disabled && reason != null && <GuildPowerupsDisabledWarning text={reason} />, , ,];
|
|
if (showConfigureButton) {
|
|
showConfigureButton = <Button variant="primary" text={intl.string(GuildPowerups_messages.g5Ds69)} onPress={guildPowerupConfigureCallback} />;
|
|
}
|
|
r74[2] = showConfigureButton;
|
|
if (showToggleButton) {
|
|
showToggleButton = powerup.skuId !== GAME_SERVER_POWERUP_SKU_ID;
|
|
}
|
|
if (showToggleButton) {
|
|
showToggleButton = <Button variant={isPowerupActive ? "secondary" : "primary"} text={isPowerupActive ? intl.string(GuildPowerups_messages.TZsu1U) : intl.string(GuildPowerups_messages.gSxlHf)} loading={isLoading} disabled={disabled} onPress={() => {
|
|
if (isPowerupActive) {
|
|
if (c19031_2 != null) {
|
|
c19031_2();
|
|
}
|
|
} else if (onActivate != null) {
|
|
onActivate();
|
|
}
|
|
}} />;
|
|
}
|
|
r74[3] = showToggleButton;
|
|
return <View style={styles2.footerContainer}>{r74}</View>;
|
|
}
|
|
return null;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
padding: Module712.space.PX_16,
|
|
gap: Module712.space.PX_16
|
|
},
|
|
headerContainer: {
|
|
marginTop: Module712.space.PX_24,
|
|
alignItems: "center"
|
|
},
|
|
statusContainer: {
|
|
justifyContent: "center",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
levelContainer: {
|
|
flexDirection: "column",
|
|
gap: Module712.space.PX_8,
|
|
marginTop: Module712.space.PX_16
|
|
},
|
|
perkContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between"
|
|
},
|
|
perkIcon: {
|
|
width: 20,
|
|
height: 20
|
|
},
|
|
perkText: {
|
|
marginStart: Module712.space.PX_8
|
|
},
|
|
footerContainer: {
|
|
gap: Module712.space.PX_12,
|
|
marginTop: Module712.space.PX_8
|
|
},
|
|
image: {
|
|
width: "100%",
|
|
height: 160
|
|
},
|
|
description: {
|
|
marginHorizontal: Module712.space.PX_24,
|
|
textAlign: "center"
|
|
},
|
|
cooldownInfo: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: Module712.space.PX_4,
|
|
marginTop: Module712.space.PX_8
|
|
},
|
|
gemContainer: {
|
|
marginTop: Module712.space.PX_16
|
|
}
|
|
});
|
|
export default function GuildPowerupsBottomSheet(props) {
|
|
const { guildId, powerup } = props;
|
|
const styles2 = useStyles();
|
|
useLogPowerupModalOpened(guildId, powerup, ModalType.DETAIL);
|
|
return <BottomSheet startExpanded>
|
|
<View style={styles2.container}>
|
|
<GuildPowerupsBottomSheetHeader guildId={guildId} powerup={powerup} />
|
|
<GuildPowerupsBottomSheetBody guildId={guildId} powerup={powerup} />
|
|
<GuildPowerupsBottomSheetFooter guildId={guildId} powerup={powerup} />
|
|
</View>
|
|
</BottomSheet>;
|
|
};
|