yeet

modules/premium/powerups/native/BoostProgressBarCoachmark.tsx

@@ -0,0 +1,46 @@
+// Metro module 15141 (f15142).
+import { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { ContentDismissActionType } from "../../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import GuildSettingsActionCreators from "../../../guild_settings/GuildSettingsActionCreators";
+import { intl, t } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import { BoostThisServerRive } from "../../../../_bundle/Module3901";
+import { useCoachmark } from "../../../../design/components/Coachmark/native/useCoachmark.native";
+const useStyles = createStyles({
+  riveContainer: {
+    width: 120,
+    height: 80,
+    alignSelf: "center"
+  }
+});
+export default function BoostProgressBarCoachmark({ targetRef, guild, markAsDismissed }) {
+  let callback2;
+  callback2 = void 0;
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }, [markAsDismissed]);
+  callback2 = useCallback(() => {
+    markAsDismissed(ContentDismissActionType.TAKE_ACTION);
+    GuildSettingsActionCreators.saveGuild(guild.id, {
+      premiumProgressBarEnabled: true
+    });
+  }, [guild.id, markAsDismissed]);
+  useCoachmark(targetRef, useMemo(() => ({
+    title: intl.string(GuildPowerups_messages.uwV2dH),
+    description: intl.string(GuildPowerups_messages.MIwlcR),
+    visible: true,
+    position: "bottom",
+    offsetY: 8,
+    onDismiss: callback,
+    renderImgComponent: () => <View style={styles.riveContainer}>
+      <BoostThisServerRive stateMachine="State Machine 1" />
+    </View>,
+    buttonLabel: intl.string(t["0CJWP2"]),
+    buttonVariant: "primary",
+    onButtonPress: callback2
+  }), [callback, callback2, styles.riveContainer]));
+  return null;
+};

modules/premium/powerups/native/EnhancedRoleColorsSelectStyleModal.tsx

@@ -0,0 +1,118 @@
+// Metro module 16467 (f16468).
+import { Pressable, View } from "react-native";
+import { RoleColorsStyle } from "../../../guild_settings/roles/GuildSettingsRolesStore";
+import { HOLOGRAPHIC_ROLE_COLORS } from "../constants/EnhancedRoleColorConstants";
+import { STYLE_CONFIGS } from "../../../guild_settings/roles/GuildSettingsRoleConstants";
+import { ThemeTypes } from "../../../../_bundle/Module505";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useTheme from "../../../../hooks/useTheme";
+import { useHasEnhancedRoleColorsForRole } from "../hooks/useHasEnhancedRoleColors";
+import { useGuildSettingsRoleExampleMessage } from "../../../guild_settings/roles/hooks/useGuildSettingsRoleExampleMessage";
+import { intl, t } from "../../../../intl/index.native";
+import RowGenerator from "../../../messages/native/renderer/RowGenerator";
+import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import ChatItem from "../../../../components_native/chat/ChatItem";
+import { extractColorStringsFromServerColors } from "../../enhanced_role_colors/EnhancedRoleColorUtils";
+import { processColorStrings } from "../../enhanced_role_colors/native/EnhancedRoleColorUtils";
+import Module16469 from "../../../../_bundle/Module16469";
+import { Text } from "../../../../design/components/Text/native/Text";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import { isFabric } from "../../../../utils/native/FabricUtils";
+const useStyles = createStyles((a0) => ({
+  container: {
+    marginHorizontal: Module712.space.PX_12,
+    marginBottom: Module712.space.PX_32
+  },
+  stylesContainer: {
+    display: "flex",
+    flexDirection: "row",
+    gap: Module712.space.PX_8
+  },
+  button: {
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden",
+    height: 100,
+    width: 100,
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  message: {
+    width: 400,
+    flex: 1,
+    marginStart: Module712.space.PX_8,
+    marginVertical: Module712.space.PX_8,
+    alignSelf: "flex-start"
+  },
+  text: {
+    width: "100%",
+    textAlign: "center",
+    backgroundColor: a0 === ThemeTypes.LIGHT ? Module712.colors.BACKGROUND_BASE_LOW : Module712.colors.BACKGROUND_SURFACE_HIGH,
+    paddingVertical: Module712.space.PX_8
+  },
+  upsellContainer: {
+    backgroundColor: a0 === ThemeTypes.LIGHT ? Module712.colors.BACKGROUND_BASE_LOW : Module712.colors.BACKGROUND_SURFACE_HIGH,
+    padding: Module712.space.PX_8,
+    marginTop: Module712.space.PX_16,
+    borderRadius: Module712.radii.sm
+  },
+  upsellText: {
+    textAlign: "center"
+  },
+  selected: {
+    borderWidth: 1,
+    borderColor: Module712.colors.BACKGROUND_BRAND
+  },
+  disabled: {
+    opacity: 0.5
+  }
+}));
+export default function EnhancedRoleColorsSelectStyleModal(props) {
+  const { guildId, role, roleStyle, onStyleChanged } = props;
+  const styles = useStyles(useTheme());
+  const hasEnhancedRoleColorsForRole = useHasEnhancedRoleColorsForRole(guildId, role);
+  const guildSettingsRoleExampleMessage = useGuildSettingsRoleExampleMessage(intl.string(t.Mi9Kbe));
+  const rowGenerator = new RowGenerator();
+  return <BottomSheet header={<BottomSheetTitleHeader title={intl.string(t["9wVJRB"])} />}>
+    <View style={styles.container}>
+      <View style={styles.stylesContainer}>
+        {STYLE_CONFIGS.map((item) => {
+          const disabled = hasEnhancedRoleColorsForRole ? !hasEnhancedRoleColorsForRole : item.id !== RoleColorsStyle.SOLID;
+          return <Pressable key={item.id} style={[styles.button, roleStyle === item.id && styles.selected, disabled && styles.disabled]} disabled={disabled} onPress={() => {
+            onStyleChanged(item.id);
+            ActionSheetActionCreators.hideActionSheet();
+          }}>
+            <ChatItem style={styles.message} pointerEvents="none" message={guildSettingsRoleExampleMessage} rowGenerator={rowGenerator} modifyRow={(a0) => {
+              const r12 = extractColorStringsFromServerColors(item.colors);
+              a0.message.roleColor = void 0;
+              a0.message.roleColors = processColorStrings(r12);
+              a0.message.shouldShowRoleOnName = true;
+              a0.message.avatarURL = Module16469;
+            }} />
+            <Text style={styles.text} variant="text-sm/normal">
+              {intl.string(item.labelString)}
+            </Text>
+          </Pressable>;
+        })}
+      </View>
+      {hasEnhancedRoleColorsForRole ? !hasEnhancedRoleColorsForRole : <View style={styles.upsellContainer}>
+        <Text style={styles.upsellText} variant="text-sm/semibold">
+          {intl.format(GuildPowerups_messages.VpEDJc, {
+            magical: <Text gradientColors={[HOLOGRAPHIC_ROLE_COLORS.primary_color, HOLOGRAPHIC_ROLE_COLORS.secondary_color, HOLOGRAPHIC_ROLE_COLORS.tertiary_color]} variant="text-sm/semibold" experimental_useNativeText={!isFabric()}>
+              {intl.string(GuildPowerups_messages["+/IHLl"])}
+            </Text>
+          })}
+        </Text>
+        <Text style={styles.upsellText} variant="text-sm/normal">
+          {intl.string(GuildPowerups_messages.FJZeZF)}
+        </Text>
+      </View>}
+    </View>
+  </BottomSheet>;
+};

modules/premium/powerups/native/GuildPowerupRollbackSheet.tsx

@@ -0,0 +1,7 @@
+// Metro module 11607 (f11608).
+import { PromoSheet } from "../../../../design/components/Sheet/native/PromoSheet.native";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+export default function GuildPowerupRollbackSheet(props) {
+  const header = props.header;
+  return <PromoSheet title={header} description={props.body} onDismiss={props.onDismiss} actions={<Button variant="primary" text={props.ctaText} onPress={props.onCtaPress} />} />;
+};

modules/premium/powerups/native/GuildPowerupsBoostButton.tsx

@@ -0,0 +1,33 @@
+// Metro module 11679 (f11680).
+import { useMemo, useCallback } from "react";
+import GuildStore from "../../../../stores/GuildStore";
+import UserStore from "../../../../stores/UserStore";
+import GuildBoostSlotStore from "../../../../stores/billing/GuildBoostSlotStore";
+import { AnalyticsSections } from "../../../../Constants";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useFractionalPremiumInfo from "../../../billing/hooks/useFractionalPremiumInfo";
+import { PremiumSubscriptionGroupRole } from "../../../../_bundle/Module1892";
+import { openTransferModal } from "../../../../actions/native/BoostingActionCreators";
+import GuildBoostingSubscribeButton from "../../../guild_boosting/native/GuildBoostingSubscribeButton";
+export function GuildPowerupsBoostButton(props) {
+  let stateFromStores;
+  const guildId = props.guildId;
+  stateFromStores = void 0;
+  const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
+  stateFromStores = useStateFromStores([GuildBoostSlotStore], () => GuildBoostSlotStore.boostSlots);
+  const fractionalPremiumInfo = useFractionalPremiumInfo({
+    forceFetch: true
+  });
+  const stateFromStores3 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  const premiumGroupRole = stateFromStores3 != null ? stateFromStores3.premiumGroupRole : PremiumSubscriptionGroupRole.UNSPECIFIED;
+  const memo = useMemo(() => Object.values(stateFromStores).find((item) => item.isAvailable()), [stateFromStores]);
+  const callback = useCallback((a0, a1) => {
+    if (a1 != null) {
+      openTransferModal({
+        guildBoostSlots: [a1],
+        guildId: a0
+      });
+    }
+  }, []);
+  return stateFromStores2 == null ? null : <GuildBoostingSubscribeButton guild={stateFromStores2} previousGuildSubscriptionSlot={memo} analyticsSection={AnalyticsSections.GUILD_POWERUPS_OVERVIEW_SIDEBAR} fractionalPremiumState={fractionalPremiumInfo.fractionalState} onAvailableSlotPress={callback} premiumGroupRole={premiumGroupRole} />;
+}

modules/premium/powerups/native/GuildPowerupsBoostGem.tsx

@@ -0,0 +1,22 @@
+// Metro module 11613 (f11614).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import BoostGem from "./images/BoostGem";
+const useStyles = createStyles({
+  boostGemContainer: {
+    width: 100,
+    height: 100,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_SECONDARY_ALT,
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "center"
+  }
+});
+export default function GuildPowerupsBoostGem(props) {
+  const { style, gemWidth, gemHeight } = props;
+  return <View style={[useStyles().boostGemContainer, style]}>
+    <BoostGem width={gemWidth} height={gemHeight} />
+  </View>;
+};

modules/premium/powerups/native/GuildPowerupsBoostInfo.tsx

@@ -0,0 +1,34 @@
+// Metro module 11644 (f11645).
+import { View } from "react-native";
+import { BoostInfoType } from "../constants/GuildPowerupsConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { getGuildPowerupsBoostInfoText } from "../utils/getGuildPowerupsBoostInfoText";
+import { BoostGemIcon } from "../../../../design/components/Icon/native/redesign/generated/BoostGemIcon";
+import { Text } from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: Module712.space.PX_12
+  },
+  headerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    display: "flex"
+  }
+});
+export default function GuildPowerupsBoostInfo(props) {
+  const { count, type } = props;
+  const styles = useStyles();
+  const guildPowerupsBoostInfoText = getGuildPowerupsBoostInfoText(count, type);
+  return <View style={styles.container} accessible accessibilityLabel={`${count}, ${guildPowerupsBoostInfoText}`}>
+    <View style={styles.headerContainer} importantForAccessibility="no-hide-descendants" accessible={false}>
+      <BoostGemIcon size="sm" color={type === BoostInfoType.AVAILABLE ? Module712.unsafe_rawColors.GUILD_BOOSTING_PINK : Module712.colors.TEXT_MUTED} />
+      <Text variant="text-lg/medium" color={type === BoostInfoType.AVAILABLE ? "text-strong" : "text-subtle"} importantForAccessibility="no-hide-descendants">{count}</Text>
+    </View>
+    <Text variant="text-md/normal" color="text-subtle" importantForAccessibility="no-hide-descendants">{guildPowerupsBoostInfoText}</Text>
+  </View>;
+};

modules/premium/powerups/native/GuildPowerupsBoostToUnlockCoachmark.tsx

@@ -0,0 +1,12 @@
+// Metro module 15144 (f15145).
+import { useMemo } from "react";
+import { GuildPowerupNotificationPopoutType } from "../constants/GuildPowerupsNotification";
+import useGuildPowerupsCoachmark from "./hooks/useGuildPowerupsCoachmark";
+export default function GuildPowerupsBoostToUnlockCoachmark({ guildId, powerup, targetRef, markAsDismissed }) {
+  useGuildPowerupsCoachmark(targetRef, guildId, useMemo(() => ({
+    type: GuildPowerupNotificationPopoutType.BOOST_TO_UNLOCK,
+    powerup,
+    markAsDismissed
+  }), [powerup, markAsDismissed]));
+  return null;
+};

modules/premium/powerups/native/GuildPowerupsBottomSheet.tsx

@@ -0,0 +1,202 @@
+// 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>;
+};

modules/premium/powerups/native/GuildPowerupsCard.tsx

@@ -0,0 +1,24 @@
+// Metro module 11659 (f11660).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module689 from "../../../../_bundle/Module689";
+import Module712 from "../../../../_bundle/Module712";
+import { Card } from "../../../../design/components/Card/native/Card.native";
+const useStyles = createStyles({
+  cardActive: {
+    borderColor: Module689(Module712.unsafe_rawColors.GREEN_360).alpha(0.35).hex()
+  },
+  cardExpiring: {
+    borderColor: Module689(Module712.unsafe_rawColors.YELLOW_300).alpha(0.35).hex()
+  },
+  cardRemoving: {
+    borderColor: Module689(Module712.unsafe_rawColors.YELLOW_300).alpha(0.35).hex()
+  }
+});
+export default function GuildPowerupsCard(props) {
+  const { children, containerStyle, status, style, ...props2 } = props;
+  const styles = useStyles();
+  return <View style={containerStyle}>
+    <Card border="faint" radius={16} shadow="none" {...props2} style={[status?.type === "active" && styles.cardActive, status?.type === "expiring" && styles.cardExpiring, status?.type === "removing" && styles.cardRemoving, style]}>{children}</Card>
+  </View>;
+};

modules/premium/powerups/native/GuildPowerupsCardFooter.tsx

@@ -0,0 +1,102 @@
+// Metro module 11616 (f11617).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { CircleCheckIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
+import Module712 from "../../../../_bundle/Module712";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { CircleErrorIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
+import { intl, t } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import entitlementExpirationDateToString from "../utils/entitlementExpirationDateToString";
+import getGuildPowerupFormattedDateString from "../utils/getGuildPowerupFormattedDateString";
+import { BoostGemIcon } from "../../../../design/components/Icon/native/redesign/generated/BoostGemIcon";
+let useStyles, GuildPowerupCardFooterExpiring, GuildPowerupCardFooterRemoving, GuildPowerupCardFooterStatus, GuildPowerupCardFooterCost;
+const GuildPowerupCardFooterActive = function GuildPowerupCardFooterActive(props) {
+  const text = props.text;
+  return <View style={useStyles().inline}>
+    <CircleCheckIcon size="xs" color={Module712.colors.STATUS_POSITIVE} />
+    <Text color="status-positive" variant="text-sm/bold">{text}</Text>
+  </View>;
+};
+GuildPowerupCardFooterExpiring = function GuildPowerupCardFooterExpiring(props) {
+  const dateString = props.dateString;
+  return <View style={useStyles().inline}>
+    <CircleErrorIcon size="xs" color={Module712.colors.STATUS_WARNING} />
+    <Text color="text-feedback-warning" variant="text-sm/bold">
+      {intl.formatToMarkdownString(GuildPowerups_messages["ol/ao/"], {
+        dateString: entitlementExpirationDateToString(dateString)
+      })}
+    </Text>
+  </View>;
+};
+GuildPowerupCardFooterRemoving = function GuildPowerupCardFooterRemoving(props) {
+  const removingAt = props.removingAt;
+  return <View style={useStyles().inline}>
+    <CircleErrorIcon size="xs" color={Module712.colors.STATUS_WARNING} />
+    <Text color="text-feedback-warning" variant="text-sm/bold">
+      {intl.formatToPlainString(GuildPowerups_messages["6e2ry1"], {
+        dateString: getGuildPowerupFormattedDateString(removingAt)
+      })}
+    </Text>
+  </View>;
+};
+GuildPowerupCardFooterStatus = function GuildPowerupCardFooterStatus(props) {
+  const status = props.status;
+  if (status == null) {
+    return null;
+  }
+  const type = status.type;
+  if (type === "expiring") {
+    return <GuildPowerupCardFooterExpiring dateString={status.expiringAt} />;
+  }
+  if (type === "removing") {
+    return <GuildPowerupCardFooterRemoving removingAt={status.removingAt} />;
+  }
+  if (type === "active") {
+    return <GuildPowerupCardFooterActive text={status.statusText} />;
+  }
+};
+GuildPowerupCardFooterCost = function GuildPowerupCardFooterCost(props) {
+  const cost = props.cost;
+  let costDecorator = props.costDecorator;
+  const styles = useStyles();
+  const r2 = cost == null;
+  let r17 = null;
+  if (!r2) {
+    const r27 = [<BoostGemIcon size="sm" color={Module712.unsafe_rawColors.GUILD_BOOSTING_PINK} />, ,];
+    const t2Wbo1 = t.t2Wbo1;
+    if (costDecorator == null) {
+      costDecorator = "";
+    }
+    r27[1] = <Text variant="heading-sm/semibold" color="text-subtle">
+      {intl.formatToPlainString(t2Wbo1, {
+        required: cost,
+        decorator: costDecorator
+      })}
+    </Text>;
+    r17 = <View style={styles.inline}>{r27}</View>;
+  }
+  return r17;
+};
+useStyles = createStyles({
+  container: {
+    justifyContent: "space-between"
+  },
+  inline: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2
+  }
+});
+export { GuildPowerupCardFooterActive };
+export { GuildPowerupCardFooterExpiring };
+export { GuildPowerupCardFooterRemoving };
+export { GuildPowerupCardFooterStatus };
+export { GuildPowerupCardFooterCost };
+export function GuildPowerupsCardFooter(props) {
+  const styles = useStyles();
+  return <View style={[styles.inline, styles.container, props.style]}>
+    <GuildPowerupCardFooterCost cost={props.cost} costDecorator={props.costDecorator} />
+    <GuildPowerupCardFooterStatus status={props.status} />
+  </View>;
+}

modules/premium/powerups/native/GuildPowerupsChannelRow.tsx

@@ -0,0 +1,75 @@
+// Metro module 15183 (f15184).
+import { useContext, useRef, useCallback } from "react";
+import { View } from "react-native";
+import { CHANNEL_MARGIN_VERTICAL } from "../../../channel_list_v2/native/RedesignChannelListConstants";
+import { GuildPowerupNotificationIndicatorType } from "../constants/GuildPowerupsNotification";
+import { CircleErrorIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
+import Module712 from "../../../../_bundle/Module712";
+import { Badge } from "../../../../design/void/native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import useGuildPowerupsCoachmark from "./hooks/useGuildPowerupsCoachmark";
+import { SidebarCoachmarkOverlayContext } from "../../../main_tabs_v2/native/panels/SidebarCoachmarkOverlay.native";
+import { LayerContext } from "../../../../design/components/Layers/native/LayerContext.native";
+import useGuildPowerupsNotifications from "../hooks/useGuildPowerupsNotifications";
+import useGuildPowerupsNewBadge from "../hooks/useGuildPowerupsNewBadge";
+import BaseChannelItem, { ChannelModes, BaseChannelName, BaseChannelIcon } from "../../../guild_sidebar/native/BaseChannelItem";
+import openGuildPowerupsModal from "./utils/openGuildPowerupsModal";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import { intl } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import { BoostTier2Icon } from "../../../../design/components/Icon/native/redesign/generated/BoostTier2Icon";
+import { NewBadge } from "../../../channel_list_v2/native/components/index";
+let useStyles, GuildPowerupsCoachmarkHost, GuildPowerupsCoachmark;
+const GuildPowerupsChannelRowIndicator = function GuildPowerupsChannelRowIndicator(props) {
+  const indicator = props.indicator;
+  if (indicator == null) {
+    return null;
+  }
+  const type = indicator.type;
+  if (GuildPowerupNotificationIndicatorType.WARNING === type) {
+    return <CircleErrorIcon color={Module712.colors.STATUS_WARNING} size="sm" />;
+  }
+  if (GuildPowerupNotificationIndicatorType.UNREAD === type) {
+    return <Badge value={indicator.count} isMentionLowImportance />;
+  }
+  return null;
+};
+GuildPowerupsCoachmarkHost = function GuildPowerupsCoachmarkHost(a0) {
+  useGuildPowerupsCoachmark(a0.targetRef, a0.guildId, a0.popout);
+  return null;
+};
+GuildPowerupsCoachmark = function GuildPowerupsCoachmark(props) {
+  const { targetRef, guildId: guildId2, popout } = props;
+  const context = useContext(SidebarCoachmarkOverlayContext);
+  const r18 = <GuildPowerupsCoachmarkHost targetRef={targetRef} guildId={guildId2} popout={popout} />;
+  return context != null ? <LayerContext.Provider value={context}>{r18}</LayerContext.Provider> : r18;
+};
+useStyles = createStyles({
+  container: {
+    marginVertical: CHANNEL_MARGIN_VERTICAL,
+    marginHorizontal: 8,
+    borderRadius: Module712.radii.md
+  }
+});
+export default function GuildPowerupsChannelRow(props) {
+  const guildId = props.guildId;
+  const styles = useStyles();
+  const ref = useRef(null);
+  const guildPowerupsNotifications = useGuildPowerupsNotifications(guildId);
+  const guildPowerupsNewBadge = useGuildPowerupsNewBadge(guildId, guildPowerupsNotifications?.indicator != null || guildPowerupsNotifications?.popout != null);
+  const { showNewBadgeOnRow, dismissNewBadgeIfShown } = guildPowerupsNewBadge;
+  const unread = guildPowerupsNotifications?.showUnread === true;
+  const mode = unread ? ChannelModes.UNREAD_IMPORTANT : ChannelModes.DEFAULT;
+  return <View ref={ref} collapsable={false}>
+    <GuildPowerupsCoachmark targetRef={ref} guildId={guildId} popout={guildPowerupsNotifications?.popout} />
+    <BaseChannelItem onPress={useCallback(() => {
+      dismissNewBadgeIfShown();
+      openGuildPowerupsModal({
+        guildId,
+        analyticsLocation: AnalyticsLocation.GUILD_POWERUPS_CHANNEL_LIST_ROW
+      });
+    }, [guildId, dismissNewBadgeIfShown])} style={styles.container} accessible mode={mode} unread={unread} accessibilityLabel={intl.string(GuildPowerups_messages.yv3DJJ)} accessibilityState={{
+      selected: false
+    }} name={<BaseChannelName name={intl.string(GuildPowerups_messages.yv3DJJ)} mode={mode} />} icon={<BaseChannelIcon mode={mode} IconComponent={BoostTier2Icon} />} channelInfo={showNewBadgeOnRow ? <NewBadge /> : <GuildPowerupsChannelRowIndicator indicator={guildPowerupsNotifications?.indicator} />} />
+  </View>;
+};

modules/premium/powerups/native/GuildPowerupsDeactivateAlert.tsx

@@ -0,0 +1,57 @@
+// Metro module 11631 (f11632).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useGuildPowerupOnDeactivate from "../hooks/useGuildPowerupOnDeactivate";
+import useDeactivateWarningText from "../hooks/useDeactivateWarningText";
+import { useLogPowerupModalOpened, ModalType } from "../analytics/GuildPowerupAnalytics";
+import { AlertModal } from "../../../../design/components/AlertModal/native/AlertModal.native";
+import { CircleErrorIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
+import { intl, t } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import { AlertActions, AlertActionButton } from "../../../../design/components/AlertModal/native/AlertModal.native";
+import { Text } from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  headerContainer: {
+    width: 64,
+    height: 64,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
+    alignSelf: "center"
+  },
+  extraContentContainer: {
+    paddingHorizontal: Module712.space.PX_12
+  },
+  warningText: {
+    textAlign: "center"
+  }
+});
+export default function GuildPowerupsDeactivateAlert(props) {
+  const { guildId, powerup } = props;
+  const styles = useStyles();
+  const guildPowerupOnDeactivate = useGuildPowerupOnDeactivate(guildId, powerup);
+  const { onDeactivate, error } = guildPowerupOnDeactivate;
+  const deactivateWarningText = useDeactivateWarningText(guildId, powerup);
+  useLogPowerupModalOpened(guildId, powerup, ModalType.DEACTIVATE);
+  return <AlertModal header={<View style={styles.headerContainer}>
+    <CircleErrorIcon color={Module712.colors.INTERACTIVE_ICON_DEFAULT} size="custom" style={{
+      width: 40,
+      height: 40
+    }} />
+  </View>} title={intl.formatToPlainString(GuildPowerups_messages.iEBw1M, {
+    perk: powerup.title
+  })} content={intl.formatToPlainString(GuildPowerups_messages["7o0K+2"], {
+    perk: powerup.title
+  })} actions={<AlertActions>
+    {error != null && <Text style={styles.warningText} variant="text-xs/semibold" color="text-feedback-critical">{error}</Text>}
+    <AlertActionButton key="deactivate" variant="destructive" onPress={(event) => {
+      event.stopPropagation();
+      return onDeactivate();
+    }} text={intl.string(GuildPowerups_messages.PYPdl4)} />
+    <AlertActionButton key="cancel" onPress={() => {}} variant="secondary" text={intl.string(t["ETE/oC"])} />
+  </AlertActions>} extraContent={<View style={styles.extraContentContainer}>
+    {deactivateWarningText.map((item, index) => <Text key={index} style={styles.warningText} variant={item.critical ? "text-sm/semibold" : "text-sm/medium"} color={item.critical ? "text-feedback-critical" : void 0}>{item.text}</Text>)}
+  </View>} />;
+};

modules/premium/powerups/native/GuildPowerupsDisabledWarning.tsx

@@ -0,0 +1,29 @@
+// Metro module 11636 (f11637).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { WarningIcon } from "../../../../design/components/Icon/native/redesign/generated/WarningIcon";
+import { Text } from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8,
+    borderColor: Module712.colors.STATUS_WARNING_BACKGROUND,
+    borderWidth: 1,
+    borderRadius: Module712.radii.lg,
+    padding: Module712.space.PX_12,
+    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_WARNING
+  },
+  text: {
+    flex: 1
+  }
+});
+export default function GuildPowerupsDisabledWarning(props) {
+  const text = props.text;
+  const styles = useStyles();
+  return <View style={styles.container}>
+    <WarningIcon color={Module712.colors.TEXT_FEEDBACK_WARNING} size="md" />
+    <Text style={styles.text} variant="text-md/semibold" color="text-feedback-warning">{text}</Text>
+  </View>;
+};

modules/premium/powerups/native/GuildPowerupsGameServerCard.tsx

@@ -0,0 +1,32 @@
+// Metro module 11665 (f11666).
+import { View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import GameServerStore from "../../game_server/GameServerStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useGameServerPowerupStatus from "../../game_server/hooks/useGameServerPowerupStatus";
+import useGameServerPerk from "../../game_server/hooks/useGameServerPerk";
+import useGuildPowerupOnShowMore from "./hooks/useGuildPowerupOnShowMore";
+import GuildPowerupsPerkCard from "./GuildPowerupsPerkCard";
+import { GameServerHostingRive } from "../../../../_bundle/Module3901";
+const useStyles = createStyles({
+  riveContainer: {
+    flex: 1,
+    paddingVertical: Module712.space.PX_8
+  }
+});
+export default function GuildPowerupsGameServerCard(props) {
+  const guildId = props.guildId;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([GameServerStore], () => GameServerStore.getStateForGuild(guildId));
+  const gameServerPowerupStatus = useGameServerPowerupStatus(guildId);
+  const gameServerPerk = useGameServerPerk(guildId);
+  const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const guildPowerupOnShowMore = useGuildPowerupOnShowMore(guildId, gameServerPerk);
+  return stateFromStores == null ? null : gameServerPerk == null ? null : <GuildPowerupsPerkCard title={gameServerPerk.title} description={gameServerPerk.description} cost={gameServerPerk.cost} costDecorator="+" riveComponent={<View style={styles.riveContainer}>
+    <GameServerHostingRive stateMachine="SM_Auto" dataBinding={{
+      reducedMotion: stateFromStores2
+    }} />
+  </View>} badge="beta" status={gameServerPowerupStatus} onPress={guildPowerupOnShowMore} />;
+};

modules/premium/powerups/native/GuildPowerupsImage.tsx

@@ -0,0 +1,23 @@
+// Metro module 11615 (f11616).
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { isAndroid } from "../../../../_bundle/Module501";
+import Module6208 from "../../../../_bundle/Module6208";
+import FastImage from "../../../../components_native/common/FastImage";
+const useStyles = createStyles({
+  image: {
+    width: "75%",
+    height: "100%",
+    alignSelf: "center",
+    resizeMode: "contain"
+  }
+});
+export default function GuildPowerupsImage(props) {
+  const { imageUrl, isAnimated = true, style } = props;
+  const styles = useStyles();
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  return isAndroid() && (isAnimated && !stateFromStores) ? <Module6208 style={[styles.image, style]} url={imageUrl} /> : <FastImage style={[styles.image, style]} source={{
+    uri: imageUrl
+  }} />;
+};

modules/premium/powerups/native/GuildPowerupsLevelCard.tsx

@@ -0,0 +1,168 @@
+// Metro module 11656 (f11657).
+import { useMemo, useCallback } from "react";
+import { View } from "react-native";
+import { LevelCardPosition, PowerupActiveStatusType } from "../constants/GuildPowerupsConstants";
+import { BoostedGuildTiers, HorizontalGradient } from "../../../../Constants";
+import { TIER_CARDS } from "../../../guild_boosting/GuildBoostingMarketingConstants";
+import { jsx } from "react/jsx-runtime";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import Module4611 from "../../../../_bundle/Module4611";
+import { BoostGemIcon } from "../../../../design/components/Icon/native/redesign/generated/BoostGemIcon";
+import useGuildPowerupColorConfig from "./hooks/useGuildPowerupColorConfig";
+import { getIconForPerk } from "../../../guild_boosting/native/GuildBoostingMarketingUtils";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import usePowerupActiveStatus from "../hooks/usePowerupActiveStatus";
+import { useCalculatePowerupCardStatus } from "../utils/useCalculatePowerupCardStatus";
+import useGuildPowerupOnShowMore from "./hooks/useGuildPowerupOnShowMore";
+import GuildPowerupsCard from "./GuildPowerupsCard";
+import { GuildPowerupsCardFooter } from "./GuildPowerupsCardFooter";
+let useStyles, GuildPowerupLevelBody;
+const GuildLevelPowerupHeader = function GuildLevelPowerupHeader(props) {
+  const { active, nextActive, position } = props;
+  const styles2 = useStyles();
+  return <View style={styles2.progressContainer}>
+    <Module4611 start={HorizontalGradient.START} end={HorizontalGradient.END} colors={active && nextActive !== false ? [styles2.boostContainerActive.backgroundColor, styles2.boostContainerActive.backgroundColor] : active && nextActive === false ? [styles2.boostContainerActive.backgroundColor, styles2.boostContainerInactive.backgroundColor] : [styles2.boostContainerInactive.backgroundColor, styles2.boostContainerInactive.backgroundColor]} style={[styles2.progress, position === LevelCardPosition.START && styles2.progressStart, position === LevelCardPosition.END && styles2.progressEnd]} />
+    <View style={[styles2.boostContainer, styles2.boostContainerBackground]} />
+    <View style={[styles2.boostContainer, active && styles2.boostContainerActive]}>
+      <BoostGemIcon size="xs" color={active ? Module712.colors.WHITE : Module712.colors.TEXT_MUTED} />
+    </View>
+  </View>;
+};
+GuildPowerupLevelBody = function GuildPowerupLevelBody(props) {
+  const { isActive, index } = props;
+  const styles = useStyles();
+  const guildPowerupColorConfig = useGuildPowerupColorConfig(isActive);
+  const { textColor, iconColor } = guildPowerupColorConfig;
+  return <View style={styles.perkRowContainer}>
+    {useMemo(() => {
+      const r7 = TIER_CARDS[index];
+      if (r7 == null) {
+        return [];
+      }
+      const r11 = r7.tier === BoostedGuildTiers.TIER_3 ? r7.perks.slice(0, -1) : r7.perks;
+      return r11 == null ? void 0 : r11.map((item, a1) => <View key={`perk-${index}-${a1}`} style={styles.perkRowStyle}>
+        {jsx(getIconForPerk(item.perkIcon), {
+          color: iconColor,
+          size: "sm"
+        })}
+        <Text color={textColor} style={styles.perkText} variant="text-sm/medium">
+          {item.getCopy()}
+        </Text>
+      </View>);
+    }, [index, iconColor, textColor, styles])}
+    <View style={styles.perkRow}>
+      <Text color={textColor} variant="text-sm/medium">
+        {intl.string(GuildPowerups_messages.nIj3LZ)}
+      </Text>
+    </View>
+  </View>;
+};
+useStyles = createStyles({
+  cardContainer: {
+    flex: 1
+  },
+  card: {
+    padding: 0,
+    overflow: "hidden",
+    flex: 1
+  },
+  progressContainer: {
+    marginVertical: Module712.space.PX_24,
+    position: "relative"
+  },
+  progress: {
+    height: 6,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  },
+  progressStart: {
+    marginStart: Module712.space.PX_16
+  },
+  progressEnd: {
+    marginEnd: Module712.space.PX_16,
+    borderTopEndRadius: Module712.radii.round,
+    borderBottomEndRadius: Module712.radii.round
+  },
+  boostContainerBackground: {
+    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
+    width: 28,
+    height: 28,
+    start: Module712.space.PX_16 - 2,
+    top: -11
+  },
+  boostContainer: {
+    padding: Module712.space.PX_4,
+    borderRadius: Module712.radii.round,
+    position: "absolute",
+    width: 24,
+    height: 24,
+    top: -9,
+    start: Module712.space.PX_16,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  },
+  boostContainerActive: {
+    backgroundColor: Module712.unsafe_rawColors.GUILD_BOOSTING_PINK
+  },
+  boostContainerInactive: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  },
+  contentContainer: {
+    padding: Module712.space.PX_16,
+    paddingTop: 0,
+    flex: 1
+  },
+  perkRowContainer: {
+    flexDirection: "column",
+    marginTop: Module712.space.PX_16,
+    gap: Module712.space.PX_8
+  },
+  perkRow: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  perkRowStyle: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  perkText: {
+    marginStart: Module712.space.PX_8
+  },
+  footerContainer: {
+    marginTop: "auto",
+    paddingTop: Module712.space.PX_16
+  }
+});
+export default function GuildPowerupsLevelCard(props) {
+  const { guildId, powerup, nextPowerup, index: index2, isScrollingRef } = props;
+  const styles2 = useStyles();
+  const powerupActiveStatus2 = usePowerupActiveStatus(guildId, powerup);
+  const powerupActiveStatus = usePowerupActiveStatus(guildId, nextPowerup);
+  const calculatePowerupCardStatus = useCalculatePowerupCardStatus(powerup, powerupActiveStatus2, false);
+  const type2 = powerupActiveStatus2.type;
+  const INACTIVE = PowerupActiveStatusType.INACTIVE;
+  const type = powerupActiveStatus.type;
+  const INACTIVE2 = PowerupActiveStatusType.INACTIVE;
+  const guildPowerupOnShowMore = useGuildPowerupOnShowMore(guildId, powerup);
+  let c19061_1 = guildPowerupOnShowMore;
+  const position = index2 === 0 ? LevelCardPosition.START : nextPowerup == null ? LevelCardPosition.END : LevelCardPosition.MIDDLE;
+  const active = type2 !== INACTIVE;
+  return <GuildPowerupsCard containerStyle={styles2.cardContainer} style={styles2.card} onPress={useCallback(() => {
+    if (!isScrollingRef.current) {
+      c19061_1();
+    }
+  }, [isScrollingRef, guildPowerupOnShowMore])} status={calculatePowerupCardStatus}>
+    <GuildLevelPowerupHeader position={position} active={active} nextActive={nextPowerup != null ? type !== INACTIVE2 : void 0} />
+    <View style={styles2.contentContainer}>
+      <Text variant="heading-lg/semibold">{powerup.title}</Text>
+      <GuildPowerupLevelBody isActive={active} index={index2} />
+      <View style={styles2.footerContainer}>
+        <GuildPowerupsCardFooter cost={powerup.cost} status={calculatePowerupCardStatus} />
+      </View>
+    </View>
+  </GuildPowerupsCard>;
+};
+export { GuildPowerupLevelBody };

modules/premium/powerups/native/GuildPowerupsLevelsSection.tsx

@@ -0,0 +1,45 @@
+// Metro module 11654 (f11655).
+import { useMemo, useRef, useCallback } from "react";
+import { View } from "react-native";
+import Module712 from "../../../../_bundle/Module712";
+import { isIOS } from "../../../../_bundle/Module501";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import GuildPowerupsSectionHeader from "./GuildPowerupsSectionHeader";
+import { intl } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import { MarketingCardsScroller } from "../../../guild_boosting/native/marketing_redesign/MarketingCardsScroller";
+import GuildPowerupsLevelCard from "./GuildPowerupsLevelCard";
+const PX_16 = Module712.space.PX_16;
+const useStyles = createStyles({
+  cardContainer: {
+    width: 250,
+    marginEnd: PX_16,
+    flex: 1
+  },
+  scroller: {
+    height: isIOS() ? 300 : 325,
+    paddingBottom: Module712.space.PX_8
+  },
+  scrollerContent: {
+    paddingHorizontal: Module712.space.PX_16
+  }
+});
+export default function GuildPowerupsLevelsSection(props) {
+  let ref;
+  const { guildId, listings } = props;
+  ref = void 0;
+  const styles = useStyles();
+  const memo = useMemo(() => listings.filter((listing) => listing.type === "singleLevel").map((item) => item.powerup), [listings]);
+  ref = useRef(false);
+  const callback = useCallback((a0) => {
+    ref.current = a0;
+  }, []);
+  return <>
+    <GuildPowerupsSectionHeader title={intl.string(GuildPowerups_messages["TXY/b0"])} description={intl.string(GuildPowerups_messages.aJv4PB)} />
+    <MarketingCardsScroller cardMarginRight={PX_16} cardWidth={250} contentContainerStyle={styles.scrollerContent} itemCount={memo.length} onScrollingChange={callback} style={styles.scroller}>
+      {memo.map((item, a1) => <View key={item.skuId} style={styles.cardContainer}>
+        <GuildPowerupsLevelCard guildId={guildId} powerup={item} nextPowerup={memo[a1 + 1]} index={a1} isScrollingRef={ref} />
+      </View>)}
+    </MarketingCardsScroller>
+  </>;
+};

modules/premium/powerups/native/GuildPowerupsMarketingHeader.tsx

@@ -0,0 +1,67 @@
+// Metro module 12639 (f12640).
+import { useEffect } from "react";
+import { View } from "react-native";
+import GuildPowerupsStore from "../GuildPowerupsStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import Module689 from "../../../../_bundle/Module689";
+import { Text } from "../../../../design/components/Text/native/Text";
+import useMarketablePowerupPerks from "../hooks/useMarketablePowerupPerks";
+import { fetchPowerupCatalogForGuild } from "../GuildPowerupsActionCreators";
+import useHasAllocateBoostPermission from "../hooks/useHasAllocateBoostPermission";
+import { intl } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import orderMarketablePerksForDisplay from "../utils/orderMarketablePerksForDisplay";
+let useStyles;
+const PerkText = function PerkText(props) {
+  return <Text color="text-overlay-light" variant="text-sm/semibold">{props.powerup.title}</Text>;
+};
+useStyles = createStyles({
+  container: {
+    padding: Module712.space.PX_12,
+    backgroundColor: Module689("#000000").alpha(0.18).hex()
+  },
+  text: {
+    textAlign: "center",
+    color: Module689("#FFFFFF").alpha(0.5).hex()
+  }
+});
+export default function GuildPowerupsMarketingHeader(props) {
+  const guild = props.guild;
+  const styles = useStyles();
+  const marketablePowerupPerks = useMarketablePowerupPerks(guild.id);
+  useEffect(() => {
+    if (GuildPowerupsStore.shouldFetchCatalogForGuild(guild.id)) {
+      fetchPowerupCatalogForGuild(guild.id);
+    }
+  }, [guild.id]);
+  if (useHasAllocateBoostPermission(guild.id)) {
+    let r33 = marketablePowerupPerks?.length;
+    if (r33 == null) {
+      r33 = 0;
+    }
+    if (r33 !== 0) {
+      const r48 = GuildPowerups_messages["7lwpzR"];
+      const r49 = marketablePowerupPerks == null;
+      let perks = "";
+      if (!r49) {
+        const length = marketablePowerupPerks.length;
+        perks = "";
+        if (length !== 0) {
+          const r52 = orderMarketablePerksForDisplay(marketablePowerupPerks);
+          perks = r52.length === 1 ? <PerkText powerup={r52[0]} /> : intl.format(GuildPowerups_messages.MNO3sG, {
+            perk1: <PerkText powerup={r52[0]} />,
+            perk2: <PerkText powerup={r52[1]} />
+          });
+        }
+      }
+      return <View style={styles.container}>
+        <Text style={styles.text} variant="text-sm/semibold">
+          {intl.format(r48, {
+            perks
+          })}
+        </Text>
+      </View>;
+    }
+  }
+};

modules/premium/powerups/native/GuildPowerupsModal.tsx

@@ -0,0 +1,147 @@
+// Metro module 11572 (f11573).
+import { useRef, useEffect, useCallback } from "react";
+import { ScrollView, View } from "react-native";
+import { BoostInfoType, GuildPowerupType } from "../constants/GuildPowerupsConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useGameServerEnabled } from "../../game_server/GameServerExperiment";
+import useLoadGuildPowerups from "../hooks/useLoadGuildPowerups";
+import { useAutoDismissGuildPowerupsNotifications } from "../hooks/useGuildPowerupsNotifications";
+import useShowGuildPowerupRollbackSheet from "./hooks/useShowGuildPowerupRollbackSheet";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../../app_analytics/useAnalyticsLocations";
+import { useBuildGuildPowerupsSections } from "../utils/powerupListing";
+import openGuildPowerupsBottomSheet from "./utils/openGuildPowerupsBottomSheet";
+import openGuildPowerupsMultiPerkBottomSheet from "./utils/openGuildPowerupsMultiPerkBottomSheet";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import useGuildPowerupsBoostCount from "../hooks/useGuildPowerupsBoostCount";
+import { Header } from "../../../../_bundle/Module5150";
+import { intl } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import { GenericHeaderTitle } from "../../../main_tabs_v2/native/shared_components/HeaderShared";
+import { getHeaderCloseButton } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
+import GuildPowerupsBoostInfo from "./GuildPowerupsBoostInfo";
+import GuildPowerupsNotificationContainer from "./GuildPowerupsNotificationContainer";
+import GuildPowerupsLevelsSection from "./GuildPowerupsLevelsSection";
+import GuildPowerupsPerksSection from "./GuildPowerupsPerksSection";
+import GuildPowerupsRecentActivitySection from "./GuildPowerupsRecentActivitySection";
+import { GuildPowerupsBoostButton } from "./GuildPowerupsBoostButton";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  headerContainer: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_8
+  },
+  boostInfoContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: Module712.colors.BORDER_SUBTLE,
+    marginBottom: Module712.space.PX_16
+  },
+  boostInfoSeparator: {
+    width: 1,
+    height: "100%",
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  },
+  scrollView: {
+    paddingBottom: Module712.space.PX_96
+  },
+  boostButtonContainer: {
+    paddingHorizontal: Module712.space.PX_16,
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0
+  }
+});
+export default function GuildPowerupsModal(props) {
+  const { guildId, analyticsLocation, autoOpenPerkId, autoOpenRequestId } = props;
+  const gameServerEnabled = useGameServerEnabled(guildId, "GuildPowerupsModal");
+  useLoadGuildPowerups(guildId);
+  useAutoDismissGuildPowerupsNotifications(guildId);
+  useShowGuildPowerupRollbackSheet(guildId, "GuildPowerupsModal", autoOpenPerkId != null);
+  const bottom = useSafeAreaInsets_native().bottom;
+  const styles = useStyles();
+  const analyticsLocations = useAnalyticsLocations.apply(void 0, [...analyticsLocation != null ? [analyticsLocation] : []]).analyticsLocations;
+  const buildGuildPowerupsSections = useBuildGuildPowerupsSections(guildId, gameServerEnabled);
+  const ref = useRef(void 0);
+  useEffect(() => {
+    if (autoOpenPerkId != null && autoOpenRequestId != null && ref.current !== autoOpenRequestId) {
+      for (const buildGuildPowerupsSection of buildGuildPowerupsSections) {
+        L15: {
+          done38: {
+            for (const listing of buildGuildPowerupsSection.listings) {
+              if (!(listing.type === "singlePerk" && listing.powerup.skuId === autoOpenPerkId)) {
+                if (listing.type !== "multiPerk") {
+                  continue;
+                }
+                if (listing.group !== autoOpenPerkId && !listing.powerups.some((powerup) => powerup.skuId === autoOpenPerkId)) {
+                  continue;
+                }
+                ref.current = autoOpenRequestId;
+                openGuildPowerupsMultiPerkBottomSheet({
+                  guildId,
+                  listing,
+                  onDismiss: () => ModalActionCreators.pop()
+                });
+                break L15;
+              }
+              ref.current = autoOpenRequestId;
+              openGuildPowerupsBottomSheet({
+                guildId,
+                powerup: listing.powerup
+              });
+              break done38;
+            }
+            continue;
+          }
+          return void 0;
+        }
+        return void 0;
+      }
+    }
+  }, [autoOpenPerkId, autoOpenRequestId, guildId, buildGuildPowerupsSections]);
+  const callback = useCallback(() => {
+    ModalActionCreators.pop();
+  }, []);
+  const guildPowerupsBoostCount = useGuildPowerupsBoostCount(guildId);
+  const { available, spent, total } = guildPowerupsBoostCount;
+  return <AnalyticsLocationProvider value={analyticsLocations}>
+    <View style={styles.container}>
+      <View style={styles.headerContainer}>
+        <Header title={intl.string(GuildPowerups_messages.hjvcLO)} headerTitle={() => <GenericHeaderTitle title={intl.string(GuildPowerups_messages.hjvcLO)} />} headerTitleAlign="center" headerLeft={getHeaderCloseButton(callback)} />
+      </View>
+      <ScrollView contentContainerStyle={styles.scrollView}>
+        <View style={styles.boostInfoContainer}>
+          <GuildPowerupsBoostInfo count={available} type={BoostInfoType.AVAILABLE} />
+          <View style={styles.boostInfoSeparator} />
+          <GuildPowerupsBoostInfo count={spent} type={BoostInfoType.SPENT} />
+          <View style={styles.boostInfoSeparator} />
+          <GuildPowerupsBoostInfo count={total} type={BoostInfoType.TOTAL} />
+        </View>
+        <GuildPowerupsNotificationContainer guildId={guildId} />
+        {buildGuildPowerupsSections.map((buildGuildPowerupsSection) => {
+          const type = buildGuildPowerupsSection.type;
+          if (GuildPowerupType.LEVEL === type) {
+            return <GuildPowerupsLevelsSection key={buildGuildPowerupsSection.type} guildId={guildId} listings={buildGuildPowerupsSection.listings} />;
+          }
+          if (GuildPowerupType.PERK === type) {
+            return <GuildPowerupsPerksSection key={buildGuildPowerupsSection.type} guildId={guildId} listings={buildGuildPowerupsSection.listings} />;
+          }
+          return null;
+        })}
+        <GuildPowerupsRecentActivitySection guildId={guildId} />
+      </ScrollView>
+      <View style={[styles.boostButtonContainer, {
+        paddingBottom: bottom
+      }]}>
+        <GuildPowerupsBoostButton guildId={guildId} />
+      </View>
+    </View>
+  </AnalyticsLocationProvider>;
+};

modules/premium/powerups/native/GuildPowerupsMultiPerkBottomSheet.tsx

@@ -0,0 +1,152 @@
+// Metro module 11638 (f11639).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import Module689 from "../../../../_bundle/Module689";
+import { isThemeLight } from "../../../../design/utils/shared/themes";
+import useTheme from "../../../../hooks/useTheme";
+import useHasAllocateBoostPermission from "../hooks/useHasAllocateBoostPermission";
+import * as _usePowerupActiveStatus from "../hooks/usePowerupActiveStatus";
+import usePowerupActiveStatus from "../hooks/usePowerupActiveStatus";
+import useGuildPowerupRollbackEnabled from "../hooks/useGuildPowerupRollbackEnabled";
+import { useCalculatePowerupCardStatus } from "../utils/useCalculatePowerupCardStatus";
+import useGuildPowerupColorConfig from "./hooks/useGuildPowerupColorConfig";
+import useGetGuildPowerupBannerImage from "../hooks/useGetGuildPowerupBannerImage";
+import useCanGuildPowerupBeToggled from "../hooks/useCanGuildPowerupBeToggled";
+import useGuildPowerupOnActivate from "./hooks/useGuildPowerupOnActivate";
+import useGuildPowerupOnShowDeactivate from "./hooks/useGuildPowerupOnShowDeactivate";
+import GuildPowerupsImage from "./GuildPowerupsImage";
+import { TextBadge } from "../../../../design/void/native";
+import { intl, t } from "../../../../intl/index.native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { GuildPowerupCardFooterStatus, GuildPowerupCardFooterCost } from "./GuildPowerupsCardFooter";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import usePowerupGroupConfig from "./hooks/usePowerupGroupConfig";
+import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetScrollView } from "../../../../_bundle/Module5245";
+import GuildPowerupsSectionHeader from "./GuildPowerupsSectionHeader";
+import GuildPowerupsDisabledWarning from "./GuildPowerupsDisabledWarning";
+let useStyles, useStyles2;
+const GuildPowerupsMultiPerkCard = function GuildPowerupsMultiPerkCard(props) {
+  const { guildId: guildId2, powerup } = props;
+  let isNewPerk = props.isNewPerk;
+  const forceStaticImage = props.forceStaticImage;
+  const styles = useStyles(isThemeLight(useTheme()));
+  let r9 = useHasAllocateBoostPermission(guildId2);
+  const powerupActiveStatus = usePowerupActiveStatus(guildId2, powerup);
+  const calculatePowerupCardStatus = useCalculatePowerupCardStatus(powerup, powerupActiveStatus, useGuildPowerupRollbackEnabled(guildId2, powerup, "GuildPowerupsMultiPerkBottomSheet"));
+  const isPowerupActiveStatusActive = _usePowerupActiveStatus.isPowerupActiveStatusActive(powerupActiveStatus);
+  const textColor = useGuildPowerupColorConfig(isPowerupActiveStatusActive).textColor;
+  const getGuildPowerupBannerImage = useGetGuildPowerupBannerImage(powerup, true, forceStaticImage);
+  const disabled = useCanGuildPowerupBeToggled(guildId2, powerup, isPowerupActiveStatusActive).disabled;
+  const guildPowerupOnActivate = useGuildPowerupOnActivate(guildId2, powerup);
+  const { onActivate, isLoading } = guildPowerupOnActivate;
+  let c19047_2 = useGuildPowerupOnShowDeactivate(guildId2, powerup);
+  const style = [styles.container, disabled && r9 && styles.disabled];
+  const style2 = [styles.imageContainer, calculatePowerupCardStatus?.type === "active" && styles.imageContainerActive, calculatePowerupCardStatus?.type === "expiring" && styles.imageContainerExpiring, calculatePowerupCardStatus?.type === "removing" && styles.imageContainerRemoving];
+  let imageUrl = getGuildPowerupBannerImage;
+  if (imageUrl == null) {
+    imageUrl = "";
+  }
+  const r90 = [<GuildPowerupsImage imageUrl={imageUrl} isAnimated={!forceStaticImage} style={styles.image} />, ,];
+  if (isNewPerk) {
+    isNewPerk = <TextBadge text={intl.string(t.y2b7CA)} style={styles.badge} />;
+  }
+  r90[1] = isNewPerk;
+  const r104 = [<View style={style2}>{r90}</View>, ,];
+  const r127 = [<View style={styles.titleContainer}>
+    <Text variant="heading-md/semibold" color={textColor}>{powerup.title}</Text>
+    {calculatePowerupCardStatus != null ? <GuildPowerupCardFooterStatus status={calculatePowerupCardStatus} /> : <GuildPowerupCardFooterCost cost={powerup.cost} />}
+  </View>, ,];
+  if (r9) {
+    r9 = <Button disabled={disabled} loading={isLoading} variant={isPowerupActiveStatusActive ? "secondary" : "primary"} text={intl.string(isPowerupActiveStatusActive ? GuildPowerups_messages.TZsu1U : GuildPowerups_messages.gSxlHf)} onPress={() => {
+      if (isPowerupActiveStatusActive) {
+        c19047_2();
+      } else {
+        onActivate();
+      }
+    }} />;
+  }
+  r127[1] = r9;
+  r104[1] = <View style={styles.bodyContainer}>{r127}</View>;
+  return <View style={style}>{r104}</View>;
+};
+useStyles = createStyles((a0) => ({
+  container: {
+    gap: Module712.space.PX_8
+  },
+  cardsContainer: {
+    gap: Module712.space.PX_24,
+    marginHorizontal: Module712.space.PX_16
+  },
+  titleContainer: {
+    flexDirection: "column",
+    gap: 4
+  },
+  bodyContainer: {
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexDirection: "row"
+  },
+  imageContainer: {
+    borderRadius: Module712.radii.md,
+    borderWidth: 1,
+    borderColor: Module712.colors.BACKGROUND_MOD_MUTED,
+    borderStyle: "solid",
+    backgroundColor: Module689(a0 ? "#000000" : "#ffffff").alpha(0.04).hex()
+  },
+  imageContainerActive: {
+    borderColor: Module689(Module712.unsafe_rawColors.GREEN_360).alpha(0.35).hex()
+  },
+  imageContainerExpiring: {
+    borderColor: Module689(Module712.unsafe_rawColors.YELLOW_300).alpha(0.35).hex()
+  },
+  imageContainerRemoving: {
+    borderColor: Module689(Module712.unsafe_rawColors.YELLOW_300).alpha(0.35).hex()
+  },
+  image: {
+    width: "75%",
+    height: 180,
+    resizeMode: "contain"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  badge: {
+    position: "absolute",
+    top: Module712.space.PX_8,
+    right: Module712.space.PX_8
+  }
+}));
+useStyles2 = createStyles({
+  cardsContainer: {
+    gap: Module712.space.PX_24,
+    marginHorizontal: Module712.space.PX_16
+  },
+  disabledReasonContainer: {
+    marginHorizontal: Module712.space.PX_16,
+    marginBottom: Module712.space.PX_16
+  }
+});
+export default function GuildPowerupsMultiPerkBottomSheet(props) {
+  const { guildId, listing, onDismiss } = props;
+  const styles2 = useStyles2();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const powerupGroupConfig = usePowerupGroupConfig(guildId, listing);
+  let c19048_1 = powerupGroupConfig;
+  return powerupGroupConfig == null ? null : <BottomSheet scrollable startExpanded onDismiss={onDismiss}>
+    <BottomSheetScrollView contentContainerStyle={{
+      paddingBottom: bottom
+    }}>
+      <GuildPowerupsSectionHeader title={powerupGroupConfig.title} description={powerupGroupConfig.description} />
+      {powerupGroupConfig.disabledReason != null && <View style={styles2.disabledReasonContainer}>
+        <GuildPowerupsDisabledWarning text={powerupGroupConfig.disabledReason} />
+      </View>}
+      <View style={styles2.cardsContainer}>
+        {listing.powerups.map((a0) => <GuildPowerupsMultiPerkCard key={a0.skuId} guildId={guildId} powerup={a0} forceStaticImage={c19048_1.forceStaticImages} />)}
+      </View>
+    </BottomSheetScrollView>
+  </BottomSheet>;
+};

modules/premium/powerups/native/GuildPowerupsMultiPerkCard.tsx

@@ -0,0 +1,34 @@
+// Metro module 11663 (f11664).
+import { useCallback } from "react";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import usePowerupGroupConfig from "./hooks/usePowerupGroupConfig";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useMultiPerkStatusValues from "../hooks/useMultiPerkStatusValues";
+import openGuildPowerupsMultiPerkBottomSheet from "./utils/openGuildPowerupsMultiPerkBottomSheet";
+import GuildPowerupsPerkCard from "./GuildPowerupsPerkCard";
+export default function GuildPowerupsMultiPerkCard(props) {
+  const { guildId, listing } = props;
+  const powerupGroupConfig = usePowerupGroupConfig(guildId, listing);
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const multiPerkStatusValues = useMultiPerkStatusValues({
+    guildId,
+    powerups: listing.powerups
+  });
+  const callback = useCallback(() => {
+    openGuildPowerupsMultiPerkBottomSheet({
+      guildId,
+      listing
+    });
+  }, [guildId, listing]);
+  const r2 = multiPerkStatusValues == null;
+  let r31 = null;
+  if (!r2) {
+    const r32 = powerupGroupConfig == null;
+    r31 = null;
+    if (!r32) {
+      const image = powerupGroupConfig.image;
+      r31 = <GuildPowerupsPerkCard title={powerupGroupConfig.title} description={powerupGroupConfig.description} cost={multiPerkStatusValues.cost} imageUrl={stateFromStores ? image.staticUrl : image.animatedUrl} status={multiPerkStatusValues.status} costDecorator={multiPerkStatusValues.costDecorator} onPress={callback} badge={powerupGroupConfig.badge} />;
+    }
+  }
+  return r31;
+};

modules/premium/powerups/native/GuildPowerupsNotificationContainer.tsx

@@ -0,0 +1,50 @@
+// Metro module 11646 (f11647).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { Text } from "../../../../design/components/Text/native/Text";
+import useGuildPowerupTier3OverrideConfig from "../hooks/useGuildPowerupTier3OverrideConfig";
+import useGuildPowerupExpiringNotificationsConfig from "../hooks/useGuildPowerupExpiringNotificationsConfig";
+import { intl } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import GuildPowerupsWarning from "./GuildPowerupsWarning";
+let useStyles;
+const Tier3OverrideNotice = function Tier3OverrideNotice(props) {
+  const text = props.text;
+  return <View style={useStyles().staffContainer}>
+    <Text variant="text-sm/medium">{text}</Text>
+  </View>;
+};
+useStyles = createStyles({
+  container: {
+    gap: Module712.space.PX_12,
+    margin: Module712.space.PX_16
+  },
+  staffContainer: {
+    padding: Module712.space.PX_12,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
+    borderRadius: Module712.radii.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: Module712.colors.BORDER_SUBTLE
+  }
+});
+export default function GuildPowerupsNotificationContainer(props) {
+  const guildId = props.guildId;
+  const styles = useStyles();
+  const guildPowerupTier3OverrideConfig = useGuildPowerupTier3OverrideConfig(guildId);
+  const guildPowerupExpiringNotificationsConfig = useGuildPowerupExpiringNotificationsConfig(guildId);
+  return guildPowerupTier3OverrideConfig.shouldShow ? <View style={styles.container}>
+    <Text variant="eyebrow" color="text-subtle">
+      {intl.string(GuildPowerups_messages["3FRirU"])}
+    </Text>
+    {guildPowerupTier3OverrideConfig.shouldShow && <Tier3OverrideNotice text={guildPowerupTier3OverrideConfig.text} />}
+    {guildPowerupExpiringNotificationsConfig.shouldShow && <GuildPowerupsWarning guildId={guildId} powerupNames={guildPowerupExpiringNotificationsConfig.expiringPowerupNames} warnings={guildPowerupExpiringNotificationsConfig.warnings} />}
+  </View> : guildPowerupExpiringNotificationsConfig.shouldShow ? <View style={styles.container}>
+    <Text variant="eyebrow" color="text-subtle">
+      {intl.string(GuildPowerups_messages["3FRirU"])}
+    </Text>
+    {guildPowerupTier3OverrideConfig.shouldShow && <Tier3OverrideNotice text={guildPowerupTier3OverrideConfig.text} />}
+    {guildPowerupExpiringNotificationsConfig.shouldShow && <GuildPowerupsWarning guildId={guildId} powerupNames={guildPowerupExpiringNotificationsConfig.expiringPowerupNames} warnings={guildPowerupExpiringNotificationsConfig.warnings} />}
+  </View> : null;
+};

modules/premium/powerups/native/GuildPowerupsPerkCard.tsx

@@ -0,0 +1,77 @@
+// Metro module 11662 (f11663).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useTheme from "../../../../hooks/useTheme";
+import { isThemeDark } from "../../../../design/shared";
+import GuildPowerupsCard from "./GuildPowerupsCard";
+import GuildPowerupsImage from "./GuildPowerupsImage";
+import Module4611 from "../../../../_bundle/Module4611";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { GuildPowerupsCardFooter } from "./GuildPowerupsCardFooter";
+import { TextBadge, BadgeColors } from "../../../../design/void/native";
+import { intl, t } from "../../../../intl/index.native";
+const useStyles = createStyles({
+  container: {
+    marginHorizontal: Module712.space.PX_16
+  },
+  card: {
+    padding: 0,
+    overflow: "hidden"
+  },
+  contentContainer: {
+    gap: Module712.space.PX_16,
+    padding: Module712.space.PX_16
+  },
+  imageContainer: {
+    width: "100%",
+    height: 160
+  },
+  gradient: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    height: "100%"
+  },
+  headerContainer: {
+    gap: Module712.space.PX_4
+  },
+  badge: {
+    position: "absolute",
+    top: Module712.space.PX_12,
+    right: Module712.space.PX_12
+  }
+});
+export default function GuildPowerupsPerkCard(props) {
+  const { title, description, imageUrl: _imageUrl, isImageAnimated: _isImageAnimated, riveComponent: _riveComponent, style, onPress, status, badge, ...props2 } = props;
+  let imageUrl = props.imageUrl;
+  let isImageAnimated = props.isImageAnimated;
+  if (isImageAnimated === void 0) {
+    isImageAnimated = true;
+  }
+  let riveComponent = props.riveComponent;
+  const styles = useStyles();
+  const colors = isThemeDark(useTheme()) ? ["#0f101100", "#0f101166"] : ["#0f101100", "#0f10111a"];
+  if (riveComponent == null) {
+    if (imageUrl == null) {
+      imageUrl = "";
+    }
+    riveComponent = <GuildPowerupsImage imageUrl={imageUrl} isAnimated={isImageAnimated} />;
+  }
+  return <GuildPowerupsCard containerStyle={[styles.container, style]} style={styles.card} status={status} onPress={onPress}>
+    <View style={styles.imageContainer}>
+      {riveComponent}
+      <Module4611 colors={colors} style={styles.gradient} />
+    </View>
+    <View style={styles.contentContainer}>
+      <View style={styles.headerContainer}>
+        <Text variant="heading-md/bold">{title}</Text>
+        <Text variant="text-sm/medium">{description}</Text>
+      </View>
+      <GuildPowerupsCardFooter {...props2} status={status} />
+    </View>
+    {badge === "new" && <TextBadge text={intl.string(t.y2b7CA)} style={styles.badge} />}
+    {badge === "beta" && <TextBadge text={intl.string(t.oW0eUd)} color={BadgeColors.BRAND} style={styles.badge} />}
+  </GuildPowerupsCard>;
+};

modules/premium/powerups/native/GuildPowerupsPerksSection.tsx

@@ -0,0 +1,38 @@
+// Metro module 11660 (f11661).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import GuildPowerupsSectionHeader from "./GuildPowerupsSectionHeader";
+import { intl } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import GuildPowerupsSinglePerkCard from "./GuildPowerupsSinglePerkCard";
+import GuildPowerupsMultiPerkCard from "./GuildPowerupsMultiPerkCard";
+import GuildPowerupsGameServerCard from "./GuildPowerupsGameServerCard";
+const useStyles = createStyles({
+  container: {
+    flexDirection: "column",
+    gap: Module712.space.PX_16
+  }
+});
+export default function GuildPowerupPerksSection(props) {
+  const { guildId, listings } = props;
+  const styles = useStyles();
+  return <>
+    <GuildPowerupsSectionHeader title={intl.string(GuildPowerups_messages.TV3Vm8)} description={intl.string(GuildPowerups_messages.STx9hp)} />
+    <View style={styles.container}>
+      {listings.map((a0, index) => {
+        const type = a0.type;
+        if (type === "singlePerk") {
+          return <GuildPowerupsSinglePerkCard key={a0.powerup.skuId} guildId={guildId} powerup={a0.powerup} badge={a0.badge} />;
+        }
+        if (type === "multiPerk") {
+          return <GuildPowerupsMultiPerkCard key={`${a0.group}-${index}`} guildId={guildId} listing={a0} />;
+        }
+        if (type === "gameServer") {
+          return <GuildPowerupsGameServerCard key={`game-server-${index}`} guildId={guildId} />;
+        }
+        return null;
+      })}
+    </View>
+  </>;
+};

modules/premium/powerups/native/GuildPowerupsProgressBar.tsx

@@ -0,0 +1,157 @@
+// Metro module 15186 (f15187).
+import { useEffect, useCallback } from "react";
+import { View, StyleSheet } from "react-native";
+import GuildBoostingProgressBarPersistedStore from "../../../guild_boosting/GuildBoostingProgressBarPersistedStore";
+import GuildStore from "../../../../stores/GuildStore";
+import Module712 from "../../../../_bundle/Module712";
+import ReanimatedRexport, { useSharedValue, cancelAnimation, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import Module4611 from "../../../../_bundle/Module4611";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { useStateFromStores } from "../../../../_bundle/defaultAreStatesEqual";
+import useTotalPossibleBoostCount from "../hooks/useTotalPossibleBoostCount";
+import { updateGuildPremiumSubscriptionCount } from "../../../guild_boosting/GuildBoostingProgressBarActionCreators";
+import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
+import openGuildPowerupsModal from "./utils/openGuildPowerupsModal";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import { intl } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import { PressableScale } from "../../../../design/components/experimental/native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { ChevronSmallRightIcon } from "../../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
+const r1 = 2 * Module712.space.PX_4;
+const _excluded = ["rgba(255, 115, 250, 0.4)", "rgba(255, 115, 250, 0.1)"];
+const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Module4611);
+const useStyles = createStyles({
+  container: {
+    paddingVertical: Module712.space.PX_4,
+    paddingHorizontal: Module712.space.PX_16
+  },
+  track: {
+    height: 30,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL,
+    justifyContent: "center"
+  },
+  fillContainer: {
+    ...StyleSheet.absoluteFillObject,
+    padding: 2
+  },
+  fill: {
+    height: "100%",
+    minWidth: 26,
+    borderRadius: Module712.radii.round,
+    borderWidth: 1,
+    borderColor: "rgba(255, 115, 250, 0.2)",
+    overflow: "hidden"
+  },
+  fillShadow: {
+    shadowColor: "rgba(0, 0, 0, 0.14)",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 1,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  textContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: Module712.space.PX_12
+  },
+  rightContent: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+const __initData = {
+  code: "function GuildPowerupsProgressBarTsx1(){const{animatedFillPercent,animatedFillOpacity}=this.__closure;return{width:animatedFillPercent.get()+\"%\",opacity:animatedFillOpacity.get()};}"
+};
+export default function GuildPowerupsProgressBar(props) {
+  let stateFromStores, c21745_2, c21745_3, sharedValue, sharedValue2;
+  const guildId = props.guildId;
+  stateFromStores = void 0;
+  c21745_2 = void 0;
+  c21745_3 = void 0;
+  sharedValue = void 0;
+  sharedValue2 = void 0;
+  const styles = useStyles();
+  const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId), [guildId]);
+  const totalPossibleBoostCount = useTotalPossibleBoostCount(stateFromStores2);
+  stateFromStores = useStateFromStores([GuildBoostingProgressBarPersistedStore], () => {
+    let r7 = GuildBoostingProgressBarPersistedStore.getCountForGuild(guildId);
+    if (r7 == null) {
+      r7 = 0;
+    }
+    return r7;
+  }, [guildId]);
+  let r14 = stateFromStores2?.premiumSubscriberCount;
+  if (r14 == null) {
+    r14 = 0;
+  }
+  c21745_2 = r14;
+  useEffect(() => {
+    if (stateFromStores !== c21745_2) {
+      updateGuildPremiumSubscriptionCount(guildId, c21745_2);
+    }
+  }, [guildId, stateFromStores, r14]);
+  const r46 = totalPossibleBoostCount > 0 ? Math.min(stateFromStores / totalPossibleBoostCount * 100, 100) : 0;
+  c21745_3 = r46;
+  sharedValue = useSharedValue(r46);
+  sharedValue2 = useSharedValue(r46 > 0 ? 1 : 0);
+  useEffect(() => {
+    sharedValue.set(withTiming(c21745_3, {
+      duration: 500
+    }));
+    sharedValue2.set(withTiming(c21745_3 > 0 ? 1 : 0, {
+      duration: 500
+    }));
+    return () => {
+      cancelAnimation(sharedValue);
+      cancelAnimation(sharedValue2);
+    };
+  }, [sharedValue, sharedValue2, r46]);
+  const O = () => ({
+    width: `${sharedValue.get()}%`,
+    opacity: sharedValue2.get()
+  });
+  O.__closure = {
+    animatedFillPercent: sharedValue,
+    animatedFillOpacity: sharedValue2
+  };
+  O.__workletHash = 6718232104000;
+  O.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(O);
+  const callback = useCallback(() => {
+    openGuildPowerupsModal({
+      guildId,
+      analyticsLocation: AnalyticsLocation.GUILD_BOOSTING_SIDEBAR_DISPLAY
+    });
+  }, [guildId]);
+  const r82 = stateFromStores >= totalPossibleBoostCount ? intl.formatToPlainString(GuildPowerups_messages["Ehpq+7"], {
+    appliedBoostCount: stateFromStores
+  }) : intl.formatToPlainString(GuildPowerups_messages["/rbPDs"], {
+    appliedBoostCount: stateFromStores,
+    maxBoostCount: totalPossibleBoostCount
+  });
+  return <PressableScale accessibilityRole="button" accessibilityLabel={intl.string(GuildPowerups_messages.NI6Ihe)} onPress={callback} style={styles.container}>
+    <View style={styles.track}>
+      <View style={styles.fillContainer}>
+        <AnimatedComponent style={[styles.fill, styles.fillShadow, animatedStyle]} colors={_excluded} useAngle angle={270} />
+      </View>
+      <View style={styles.textContainer}>
+        <Text variant="text-xs/semibold" color="text-default">
+          {r14 >= totalPossibleBoostCount ? `${intl.string(GuildPowerups_messages.NI6Ihe)} 🎉` : intl.string(GuildPowerups_messages.NI6Ihe)}
+        </Text>
+        <View style={styles.rightContent}>
+          <Text variant="text-xs/semibold" color="text-default" style={{
+            opacity: 0.7
+          }}>{r82}</Text>
+          <ChevronSmallRightIcon size="sm" color={Module712.colors.TEXT_DEFAULT} />
+        </View>
+      </View>
+    </View>
+  </PressableScale>;
+};
+export const BOOST_PROGRESS_BAR_HEIGHT = r1 + 30;

modules/premium/powerups/native/GuildPowerupsRecentActivitySection.tsx

@@ -0,0 +1,96 @@
+// Metro module 11670 (f11671).
+import { View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import { jsx } from "react/jsx-runtime";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useMaybeGetSortedBoosts, { useGetBoostUserConfig } from "../hooks/useMaybeGetSortedBoosts";
+import { calendarFormat } from "../../../../utils/DateUtils";
+import { getRelativeTimestamp } from "../../../notification_center/NotificationCenterUtils";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { useProcessColorStringsArray, useIsRoleStyleAndRoleColorsEligibleForERC } from "../../enhanced_role_colors/native/EnhancedRoleColorUtils";
+import { BoostGemIcon } from "../../../../design/components/Icon/native/redesign/generated/BoostGemIcon";
+import { BoostTier1Icon } from "../../../../design/components/Icon/native/redesign/generated/BoostTier1Icon";
+import { BoostGemSlashIcon } from "../../../../design/components/Icon/native/redesign/generated/BoostGemSlashIcon";
+import { RoleDot } from "../../../../design/void/native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import getBoostRowMessageText from "../utils/getBoostRowMessageText";
+import { useExpiringBoostsEnabled } from "../experiments/ExpiringBoostsExperiment";
+import { intl, t } from "../../../../intl/index.native";
+let useStyles;
+const GuildPowerupsRecentActivityRow = function GuildPowerupsRecentActivityRow(props) {
+  const { row, isExpiringBoostsEnabled } = props;
+  const { boost, phase, sortKey } = row;
+  const styles = useStyles();
+  const getBoostUserConfig = useGetBoostUserConfig(boost);
+  const { username, roleColor, roleColorStrings } = getBoostUserConfig;
+  const r9 = isExpiringBoostsEnabled ? calendarFormat(new Date(sortKey)) : getRelativeTimestamp(sortKey, true);
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.roleStyle);
+  const r21 = stateFromStores === "username" && roleColor != null ? {
+    color: roleColor
+  } : {};
+  const processColorStringsArray = useProcessColorStringsArray(roleColorStrings);
+  const isRoleStyleAndRoleColorsEligibleForERC = useIsRoleStyleAndRoleColorsEligibleForERC(boost.guildId, boost.userId, stateFromStores, processColorStringsArray);
+  const r61 = phase === "gave";
+  return <View style={styles.boostRowContainer}>
+    {jsx(r61 ? BoostGemIcon : phase === "expiring" ? BoostTier1Icon : BoostGemSlashIcon, r61 ? {
+      color: Module712.unsafe_rawColors.GUILD_BOOSTING_PINK,
+      size: "sm"
+    } : {
+      size: "sm"
+    })}
+    <View style={styles.boostMessage}>
+      {stateFromStores === "dot" && roleColor != null && <RoleDot size="small" color={roleColor} colors={roleColorStrings} />}
+      <Text variant="text-md/medium" color="interactive-text-active" lineClamp={1} style={[styles.username, r21]} gradientColors={isRoleStyleAndRoleColorsEligibleForERC ? processColorStringsArray : void 0}>{username}</Text>
+      <Text variant="text-md/medium" color="interactive-text-active">{" "}</Text>
+      <Text variant="text-md/medium" lineClamp={1} style={styles.messageText}>
+        {getBoostRowMessageText(row)}
+      </Text>
+    </View>
+    <Text variant="text-xs/semibold" style={styles.timestamp}>{r9}</Text>
+  </View>;
+};
+useStyles = createStyles({
+  sectionContainer: {
+    marginTop: Module712.space.PX_16,
+    paddingHorizontal: Module712.space.PX_16
+  },
+  boostContainer: {
+    gap: Module712.space.PX_12,
+    marginTop: Module712.space.PX_16
+  },
+  boostRowContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  boostMessage: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  username: {
+    maxWidth: 170,
+    flexShrink: 1
+  },
+  messageText: {
+    flexShrink: 0
+  },
+  timestamp: {
+    flexShrink: 0
+  }
+});
+export default function GuildPowerupsRecentActivitySection(props) {
+  const guildId = props.guildId;
+  const styles = useStyles();
+  const maybeGetSortedBoosts = useMaybeGetSortedBoosts(guildId, 10);
+  const expiringBoostsEnabled = useExpiringBoostsEnabled("GuildPowerupsRecentActivity");
+  return maybeGetSortedBoosts.length !== 0 ? <View style={styles.sectionContainer}>
+    <Text variant="heading-lg/semibold" color="text-subtle">
+      {intl.string(t.yM9Krm)}
+    </Text>
+    <View style={styles.boostContainer}>
+      {maybeGetSortedBoosts.map((maybeGetSortedBoost) => <GuildPowerupsRecentActivityRow key={`boost-${maybeGetSortedBoost.boost.id}`} row={maybeGetSortedBoost} isExpiringBoostsEnabled={expiringBoostsEnabled} />)}
+    </View>
+  </View> : null;
+};

modules/premium/powerups/native/GuildPowerupsSectionHeader.tsx

@@ -0,0 +1,17 @@
+// Metro module 11643 (f11644).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { Text } from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  headerContainer: {
+    padding: Module712.space.PX_16
+  }
+});
+export default function GuildPowerupsSectionHeader(props) {
+  const { title, description } = props;
+  return <View style={useStyles().headerContainer}>
+    <Text variant="heading-lg/semibold" accessibilityRole="header">{title}</Text>
+    <Text variant="text-md/normal">{description}</Text>
+  </View>;
+};

modules/premium/powerups/native/GuildPowerupsSinglePerkCard.tsx

@@ -0,0 +1,17 @@
+// Metro module 11661 (f11662).
+import useGetGuildPowerupBannerImage from "../hooks/useGetGuildPowerupBannerImage";
+import usePowerupActiveStatus from "../hooks/usePowerupActiveStatus";
+import useGuildPowerupRollbackEnabled from "../hooks/useGuildPowerupRollbackEnabled";
+import { useCalculatePowerupCardStatus } from "../utils/useCalculatePowerupCardStatus";
+import useGuildPowerupOnShowMore from "./hooks/useGuildPowerupOnShowMore";
+import GuildPowerupsPerkCard from "./GuildPowerupsPerkCard";
+export default function GuildPowerupsSinglePerkCard(props) {
+  const { guildId, powerup, badge } = props;
+  let imageUrl = useGetGuildPowerupBannerImage(powerup, true);
+  const calculatePowerupCardStatus = useCalculatePowerupCardStatus(powerup, usePowerupActiveStatus(guildId, powerup), useGuildPowerupRollbackEnabled(guildId, powerup, "GuildPowerupsSinglePerkCard"));
+  const guildPowerupOnShowMore = useGuildPowerupOnShowMore(guildId, powerup);
+  if (imageUrl == null) {
+    imageUrl = "";
+  }
+  return <GuildPowerupsPerkCard title={powerup.title} description={powerup.description} cost={powerup.cost} imageUrl={imageUrl} status={calculatePowerupCardStatus} onPress={guildPowerupOnShowMore} badge={badge} />;
+};

modules/premium/powerups/native/GuildPowerupsWarning.tsx

@@ -0,0 +1,47 @@
+// Metro module 11651 (f11652).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useGuildPowerupsWarningConfig from "../hooks/useGuildPowerupsWarningConfig";
+import { CircleErrorIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
+import { Text } from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    padding: Module712.space.PX_24,
+    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_WARNING,
+    borderWidth: 1,
+    borderColor: Module712.colors.STATUS_WARNING,
+    borderRadius: Module712.radii.lg,
+    gap: Module712.space.PX_8,
+    overflow: "hidden"
+  },
+  contentContainer: {
+    flex: 1,
+    gap: Module712.space.PX_4,
+    alignItems: "center"
+  },
+  warningText: {
+    marginTop: Module712.space.PX_4
+  },
+  text: {
+    textAlign: "center"
+  }
+});
+export default function GuildPowerupsWarning(props) {
+  const { guildId, powerupNames, warnings } = props;
+  const styles = useStyles();
+  const guildPowerupsWarningConfig = useGuildPowerupsWarningConfig(guildId, powerupNames);
+  const { shouldShow, title, description } = guildPowerupsWarningConfig;
+  return shouldShow ? <View style={styles.container}>
+    <View style={styles.contentContainer}>
+      <CircleErrorIcon color={Module712.colors.TEXT_FEEDBACK_WARNING} size="md" />
+      <Text variant="text-md/semibold" color="text-feedback-warning" style={styles.text}>{title}</Text>
+      <Text variant="text-sm/medium" style={styles.text}>{description}</Text>
+      {warnings == null ? void 0 : warnings.map((warning, index) => <Text key={`warning-${index}`} variant="text-sm/medium" color="text-feedback-warning" style={[styles.warningText, styles.text]}>
+        {warning}
+      </Text>)}
+    </View>
+  </View> : null;
+};

modules/premium/powerups/native/GuildThemeMemberCoachmark.tsx

@@ -0,0 +1,68 @@
+// Metro module 15142 (f15143).
+import { useCallback, useMemo } from "react";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import GuildPowerupsStore from "../GuildPowerupsStore";
+import { GUILD_THEME_POWERUP_BOOST_PRICE } from "../constants/GuildPowerupsConstants";
+import { ContentDismissActionType } from "../../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { GUILD_POWERUP_GUILD_THEME_SKU_ID } from "../../../../_bundle/Module4080";
+import { getGuildPowerupBannerImage } from "../hooks/useGetGuildPowerupBannerImage";
+import Module15143 from "../../../../_bundle/Module15143";
+import useGuildPowerupsBoostCount from "../hooks/useGuildPowerupsBoostCount";
+import { openApplyBoostModal } from "../../../../actions/native/BoostingActionCreators";
+import { intl, t } from "../../../../intl/index.native";
+import GuildPowerups_messages from "../GuildPowerups.messages";
+import GuildPowerupsImage from "./GuildPowerupsImage";
+import { useCoachmark } from "../../../../design/components/Coachmark/native/useCoachmark.native";
+const useStyles = createStyles({
+  coachmarkImage: {
+    height: 120,
+    width: 260 - 2 * Module712.space.PX_16,
+    borderRadius: Module712.radii.md
+  }
+});
+export default function GuildThemeMemberCoachmark({ guildId, targetRef, markAsDismissed }) {
+  let stateFromStores, imageUrl, c21705_5, callback, callback2;
+  stateFromStores = void 0;
+  imageUrl = void 0;
+  c21705_5 = void 0;
+  callback = void 0;
+  callback2 = void 0;
+  const styles = useStyles();
+  const stateFromStores2 = useStateFromStores([GuildPowerupsStore], () => {
+    const stateForGuild = GuildPowerupsStore.getStateForGuild(guildId);
+    return stateForGuild == null ? void 0 : stateForGuild.allPowerups[GUILD_POWERUP_GUILD_THEME_SKU_ID];
+  }, [guildId]);
+  stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  let r31 = getGuildPowerupBannerImage(stateFromStores2, stateFromStores, true);
+  if (r31 == null) {
+    r31 = Module15143;
+  }
+  imageUrl = r31;
+  const r15 = GUILD_THEME_POWERUP_BOOST_PRICE - useGuildPowerupsBoostCount(guildId).available;
+  c21705_5 = r15;
+  callback = useCallback(() => {
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }, [markAsDismissed]);
+  callback2 = useCallback(() => {
+    markAsDismissed(ContentDismissActionType.TAKE_ACTION);
+    if (c21705_5 > 0) {
+      openApplyBoostModal(guildId);
+    }
+  }, [r15, guildId, markAsDismissed]);
+  useCoachmark(targetRef, useMemo(() => ({
+    title: intl.string(GuildPowerups_messages.RK6NbY),
+    description: intl.string(GuildPowerups_messages.xlAqGk),
+    visible: true,
+    position: "bottom",
+    offsetY: 8,
+    onDismiss: callback,
+    renderImgComponent: () => <GuildPowerupsImage imageUrl={imageUrl} isAnimated={!stateFromStores} style={styles.coachmarkImage} />,
+    buttonLabel: intl.string(t.oPAx73),
+    buttonVariant: "primary",
+    onButtonPress: callback2
+  }), [callback, callback2, imageUrl, styles.coachmarkImage, stateFromStores]));
+  return null;
+};

modules/premium/powerups/native/RoleGradientPickerActionSheet.tsx

@@ -0,0 +1,165 @@
+// Metro module 16466 (f16467).
+import { useState, useCallback } from "react";
+import { Pressable, View } from "react-native";
+import { DEFAULT_GRADIENT_ROLE_COLORS, GRADIENT_PRESETS } from "../constants/EnhancedRoleColorConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { extractColorStringsFromServerColors } from "../../enhanced_role_colors/EnhancedRoleColorUtils";
+import { isNotNullish } from "../../../../utils/GlobalUtils";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import showCustomColorPickerActionSheet from "../../../color_picker/native/showCustomColorPickerActionSheet";
+import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { intl, t } from "../../../../intl/index.native";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import Module4611 from "../../../../_bundle/Module4611";
+import { EyeDropperIcon } from "../../../../design/components/Icon/native/redesign/generated/EyeDropperIcon";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import { int2hex } from "../../../../_bundle/int2hslRaw";
+const useStyles = createStyles({
+  body: {
+    paddingVertical: Module712.space.PX_12,
+    paddingHorizontal: Module712.space.PX_12,
+    flexGrow: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: Module712.space.PX_16
+  },
+  gradientContainer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: Module712.space.PX_8
+  },
+  dropperContainer: {
+    left: Module712.space.PX_24,
+    right: Module712.space.PX_24,
+    position: "absolute",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  dropper: {
+    borderColor: "white",
+    tintColor: "white",
+    padding: Module712.space.PX_8,
+    borderRadius: Module712.radii.round,
+    borderWidth: 1
+  },
+  gradient: {
+    height: 50,
+    width: "100%",
+    borderRadius: Module712.radii.sm
+  },
+  optionContainer: {
+    display: "flex",
+    flexDirection: "row",
+    gap: Module712.space.PX_8,
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  pressable: {
+    width: 80,
+    height: 50,
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden",
+    padding: 2
+  },
+  selected: {
+    borderWidth: 2,
+    borderColor: Module712.colors.BACKGROUND_BRAND
+  },
+  option: {
+    flex: 1,
+    borderRadius: Module712.radii.sm
+  }
+});
+export default function RoleGradientPickerActionSheet(props) {
+  let callback;
+  let colors = props.colors;
+  const onSelect2 = props.onSelect;
+  callback = void 0;
+  const styles = useStyles();
+  if (!(colors != null && colors.secondary_color != null)) {
+    colors = DEFAULT_GRADIENT_ROLE_COLORS;
+  }
+  const [state, setState] = useState(colors);
+  const colors2 = Object.values(extractColorStringsFromServerColors(state)).filter(isNotNullish);
+  const callback2 = useCallback(() => {
+    onSelect2(state);
+    ActionSheetActionCreators.hideActionSheet();
+  }, [state, onSelect2]);
+  callback = useCallback((a0) => {
+    setState(a0);
+  }, []);
+  const callback3 = useCallback(() => {
+    let color = state?.primary_color;
+    if (color == null) {
+      color = 0;
+    }
+    showCustomColorPickerActionSheet({
+      color,
+      onSelect: (a0) => callback({
+        ...state,
+        primary_color: a0
+      })
+    }, "stack");
+  }, [state, callback]);
+  const callback4 = useCallback(() => {
+    let color = state?.secondary_color;
+    if (color == null) {
+      color = 0;
+    }
+    showCustomColorPickerActionSheet({
+      color,
+      onSelect: (a0) => callback({
+        ...state,
+        secondary_color: a0
+      })
+    }, "stack");
+  }, [state, callback]);
+  return <BottomSheet header={<BottomSheetTitleHeader title={intl.string(t.XpWmJz)} trailing={<Button variant="secondary" size="sm" text={intl.string(t["R3BPH+"])} onPress={callback2} />} />}>
+    <View style={styles.body}>
+      <View style={styles.gradientContainer}>
+        <Module4611 style={styles.gradient} colors={colors2} start={{
+          x: 0,
+          y: 0
+        }} end={{
+          x: 1,
+          y: 0
+        }} />
+        <View style={styles.dropperContainer}>
+          <Pressable style={styles.dropper} onPress={callback3} accessibilityLabel={intl.string(t.QPqIEx)} accessibilityRole="button">
+            <EyeDropperIcon color="white" size="sm" />
+          </Pressable>
+          <Pressable style={styles.dropper} onPress={callback4} accessibilityLabel={intl.string(t.fLMusI)} accessibilityRole="button">
+            <EyeDropperIcon color="white" size="sm" />
+          </Pressable>
+        </View>
+      </View>
+      <View style={styles.optionContainer}>
+        {GRADIENT_PRESETS.map((item) => {
+          const [primary_color, secondary_color] = item.colors;
+          return <PressableOpacity key={item.name} style={[styles.pressable, primary_color === state.primary_color && secondary_color === state.secondary_color && styles.selected]} onPress={() => callback({
+            ...state,
+            primary_color,
+            secondary_color
+          })}>
+            <Module4611 style={styles.option} colors={[int2hex(primary_color), int2hex(secondary_color)]} start={{
+              x: 0,
+              y: 0
+            }} end={{
+              x: 1,
+              y: 0
+            }} />
+          </PressableOpacity>;
+        })}
+      </View>
+      <Button text={intl.string(t.yBZMsQ)} onPress={function onPress() {
+        setState(DEFAULT_GRADIENT_ROLE_COLORS);
+      }} />
+    </View>
+  </BottomSheet>;
+};

modules/premium/powerups/native/hooks/useGuildPowerupColorConfig.tsx

@@ -0,0 +1,11 @@
+// Metro module 11639 (f11640).
+import Module712 from "../../../../../_bundle/Module712";
+export default function useGuildPowerupColorConfig(a0) {
+  return a0 ? {
+    textColor: "text-default",
+    iconColor: Module712.colors.TEXT_DEFAULT
+  } : {
+    textColor: "text-muted",
+    iconColor: Module712.colors.TEXT_MUTED
+  };
+};

modules/premium/powerups/native/hooks/useGuildPowerupConfigureCallback.tsx

@@ -0,0 +1,27 @@
+// Metro module 11635 (f11636).
+import { useCallback } from "react";
+import { AnalyticsSections, GuildSettingsSections } from "../../../../../Constants";
+import ActionSheetActionCreators from "../../../../action_sheet/native/ActionSheetActionCreators";
+import { GUILD_POWERUPS_BOTTOM_SHEET_KEY } from "../utils/openGuildPowerupsBottomSheet";
+import { GUILD_POWERUP_ROLE_COLOR_SKU_ID, GUILD_POWERUP_TAG_SKU_ID } from "../../../../../_bundle/Module4080";
+import GuildSettingsActionCreators from "../../../../guild_settings/GuildSettingsActionCreators";
+import { canUseMobileServerTagSettings } from "../../../../guild_settings/GuildSettingsServerTagUtils";
+import Module38 from "../../../../../_bundle/Module38";
+export default function useGuildPowerupConfigureCallback(a0, a1) {
+  return useCallback(() => {
+    ActionSheetActionCreators.hideActionSheet(GUILD_POWERUPS_BOTTOM_SHEET_KEY);
+    const skuId = a1.skuId;
+    if (GUILD_POWERUP_ROLE_COLOR_SKU_ID === skuId) {
+      GuildSettingsActionCreators.open(a0, GuildSettingsSections.ROLES, AnalyticsSections.GUILD_POWERUPS_OVERVIEW_CARD);
+      return void 0;
+    }
+    if (GUILD_POWERUP_TAG_SKU_ID === skuId) {
+      if (canUseMobileServerTagSettings(a0)) {
+        GuildSettingsActionCreators.open(a0, GuildSettingsSections.TAG, AnalyticsSections.GUILD_POWERUPS_OVERVIEW_CARD);
+        return void 0;
+      }
+      return void 0;
+    }
+    Module38(false, `Unsupported powerup SKU ID: ${a1.skuId}`);
+  }, [a0, a1.skuId]);
+};

modules/premium/powerups/native/hooks/useGuildPowerupOnActivate.tsx

@@ -0,0 +1,89 @@
+// Metro module 11625 (f11626).
+import { useCallback } from "react";
+import GuildStore from "../../../../../stores/GuildStore";
+import GuildBoostSlotStore from "../../../../../stores/billing/GuildBoostSlotStore";
+import { BoostPurchaseIntent, GuildPowerupType } from "../../constants/GuildPowerupsConstants";
+import useGuildPowerupOnToggle from "../../hooks/useGuildPowerupOnToggle";
+import { useStateFromStores } from "../../../../../_bundle/Module589";
+import useAvailableBoostCountForPowerup from "../../hooks/useAvailableBoostCountForPowerup";
+import useAnalyticsLocations from "../../../../app_analytics/useAnalyticsLocations";
+import useGuildBoostPurchaseHandler from "../../../../guild_boosting/native/hooks/useGuildBoostPurchaseHandler";
+import { getAvailableGuildBoostSlots } from "../../../../../utils/GuildBoostingUtils";
+import ActionSheetActionCreators from "../../../../action_sheet/native/ActionSheetActionCreators";
+import { GUILD_POWERUPS_BOTTOM_SHEET_KEY } from "../utils/openGuildPowerupsBottomSheet";
+import { openTransferModal } from "../../../../../actions/native/BoostingActionCreators";
+import { launchGuildBoostFlowOrAlert } from "../../../../guild_boosting/native/GuildBoostPurchasingUtils";
+import ModalActionCreators from "../../../../../actions/ModalActionCreators";
+import { PREMIUM_KEY } from "../../../../../components_native/premium/PremiumModal";
+export default function useGuildPowerupOnActivate(a0, a1) {
+  let c19036_4, analyticsLocations, shouldUseMobileWebRedirectCheckout, handleMobileWebRedirectCheckout;
+  let c19036_0 = a0;
+  const guildPowerupOnToggle = useGuildPowerupOnToggle(a0, a1);
+  const { onToggle, isLoading, error } = guildPowerupOnToggle;
+  const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(c19036_0));
+  const availableBoostCountForPowerup = useAvailableBoostCountForPowerup(a0, a1);
+  c19036_4 = availableBoostCountForPowerup;
+  analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  const guildBoostPurchaseHandler = useGuildBoostPurchaseHandler("guild_powerup_activation");
+  shouldUseMobileWebRedirectCheckout = guildBoostPurchaseHandler.shouldUseMobileWebRedirectCheckout;
+  handleMobileWebRedirectCheckout = guildBoostPurchaseHandler.handleMobileWebRedirectCheckout;
+  return {
+    onActivate: useCallback(() => {
+      if (stateFromStores != null) {
+        if (a1 != null) {
+          if (c19036_4 >= a1.cost) {
+            onToggle(true);
+          } else {
+            const r11 = a1.cost - c19036_4;
+            let c27121_0 = r11;
+            const availableGuildBoostSlots = getAvailableGuildBoostSlots(GuildBoostSlotStore.boostSlots);
+            const LEVEL = a1.type === GuildPowerupType.LEVEL ? BoostPurchaseIntent.LEVEL : BoostPurchaseIntent.PERK;
+            ActionSheetActionCreators.hideActionSheet(GUILD_POWERUPS_BOTTOM_SHEET_KEY);
+            if (availableGuildBoostSlots.length > 0) {
+              openTransferModal({
+                guildBoostSlots: availableGuildBoostSlots.slice(0, r11),
+                guildId: stateFromStores.id,
+                intent: LEVEL,
+                onResult: (a0) => {
+                  if (a0) {
+                    onToggle(true);
+                  }
+                }
+              });
+            } else if (shouldUseMobileWebRedirectCheckout) {
+              handleMobileWebRedirectCheckout(analyticsLocations, stateFromStores.id);
+            } else {
+              launchGuildBoostFlowOrAlert({
+                source: {
+                  page: "Guild Powerups",
+                  section: "Powerup Activation"
+                },
+                analyticsLocations,
+                guildId: stateFromStores.id,
+                onBack: () => ModalActionCreators.popWithKey(PREMIUM_KEY),
+                onPaymentSuccess: () => {
+                  const availableGuildBoostSlots = getAvailableGuildBoostSlots(GuildBoostSlotStore.boostSlots);
+                  if (availableGuildBoostSlots.length >= c27121_0) {
+                    openTransferModal({
+                      guildBoostSlots: availableGuildBoostSlots.slice(0, a1.cost),
+                      guildId: stateFromStores.id,
+                      intent: LEVEL,
+                      onResult: (a0) => {
+                        if (a0) {
+                          onToggle(true);
+                        }
+                      }
+                    });
+                  }
+                },
+                onPaymentDismiss: () => ModalActionCreators.popWithKey(PREMIUM_KEY)
+              });
+            }
+          }
+        }
+      }
+    }, [onToggle, a1, availableBoostCountForPowerup, stateFromStores, analyticsLocations, shouldUseMobileWebRedirectCheckout, handleMobileWebRedirectCheckout]),
+    isLoading,
+    error
+  };
+};

modules/premium/powerups/native/hooks/useGuildPowerupOnShowDeactivate.tsx

@@ -0,0 +1,11 @@
+// Metro module 11630 (f11631).
+import { lazy, useCallback } from "react";
+import { openAlert } from "../../../../../design/components/AlertModal/native/useAlertStore.native";
+let Component = lazy(() => import("../GuildPowerupsDeactivateAlert"));
+export default function useGuildPowerupOnShowDeactivate(a0, a1) {
+  const guildId = a0;
+  const powerup = a1;
+  return useCallback(() => {
+    openAlert("guild-powerups-deactivate-alert", <Component guildId={guildId} powerup={powerup} />);
+  }, [a0, a1]);
+};

modules/premium/powerups/native/hooks/useGuildPowerupOnShowMore.tsx

@@ -0,0 +1,15 @@
+// Metro module 11658 (f11659).
+import { useCallback } from "react";
+import openGuildPowerupsBottomSheet from "../utils/openGuildPowerupsBottomSheet";
+export default function useGuildPowerupOnShowMore(a0, a1) {
+  const guildId = a0;
+  const powerup = a1;
+  return useCallback(() => {
+    if (powerup != null) {
+      openGuildPowerupsBottomSheet({
+        guildId,
+        powerup
+      });
+    }
+  }, [a0, a1]);
+};

modules/premium/powerups/native/hooks/useGuildPowerupsBoostAction.tsx

@@ -0,0 +1,120 @@
+// Metro module 15146 (f15147).
+import { useCallback } from "react";
+import GuildBoostSlotStore from "../../../../../stores/billing/GuildBoostSlotStore";
+import { GuildPowerupType, BoostPurchaseIntent } from "../../constants/GuildPowerupsConstants";
+import { AnalyticsObjects, AnalyticsObjectTypes } from "../../../../../Constants";
+import useGuildBoostPurchaseHandler from "../../../../guild_boosting/native/hooks/useGuildBoostPurchaseHandler";
+import useAnalyticsLocations from "../../../../app_analytics/useAnalyticsLocations";
+import BillingActionCreators from "../../../../../actions/native/BillingActionCreators";
+import { fetchGuildBoostSlots } from "../../../../../actions/BoostingActionCreators";
+import { getAvailableGuildBoostSlots } from "../../../../../utils/GuildBoostingUtils";
+import { openTransferModal } from "../../../../../actions/native/BoostingActionCreators";
+import { launchGuildBoostFlowOrAlert } from "../../../../guild_boosting/native/GuildBoostPurchasingUtils";
+function $mk116890($env) {
+  return () => {
+    const availableGuildBoostSlots = getAvailableGuildBoostSlots(GuildBoostSlotStore.boostSlots);
+    const length = availableGuildBoostSlots.length;
+    const r14 = $env.$parent;
+    const r8 = r14[2];
+    if (length >= r8) {
+      const r15 = $env;
+      openTransferModal({
+        guildBoostSlots: availableGuildBoostSlots.slice(0, r8),
+        guildId: r14[0],
+        intent: r15[0]
+      });
+    }
+  };
+}
+let env10746 = {};
+export default function useGuildPowerupsBoostAction(a0, a1, a2, a3, a4) {
+  let env21708 = {
+    $parent: env10746
+  };
+  env21708[0] = a0;
+  env21708[1] = a1;
+  env21708[2] = a2;
+  env21708[3] = a4;
+  const guildBoostPurchaseHandler = useGuildBoostPurchaseHandler(a3);
+  const shouldUseMobileWebRedirectCheckout = guildBoostPurchaseHandler.shouldUseMobileWebRedirectCheckout;
+  env21708[4] = shouldUseMobileWebRedirectCheckout;
+  const handleMobileWebRedirectCheckout = guildBoostPurchaseHandler.handleMobileWebRedirectCheckout;
+  env21708[5] = handleMobileWebRedirectCheckout;
+  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  env21708[6] = analyticsLocations;
+  return useCallback(async () => {
+    let c27953_0, c27953_1;
+    L28: {
+      L21: {
+        let env30848;
+        const r8 = env21708;
+        c27953_1 = r8;
+        const r9 = env30848 = {
+          $parent: r8
+        };
+        c27953_0 = r9;
+        env30848[0] = void 0;
+        env30848[1] = void 0;
+        if (env21708[1] == null) {
+          break L28;
+        }
+        if (env21708[2] <= 0) {
+          break L28;
+        }
+        if (GuildBoostSlotStore.hasFetched) {
+          env30848[0] = env21708[1].type === GuildPowerupType.PERK ? BoostPurchaseIntent.PERK : void 0;
+          env30848[1] = getAvailableGuildBoostSlots(GuildBoostSlotStore.boostSlots);
+          if (env30848[1].length >= env21708[2]) {
+            openTransferModal({
+              guildBoostSlots: env30848[1].slice(0, env21708[2]),
+              guildId: env21708[0],
+              intent: env30848[0]
+            });
+            break L28;
+          }
+          if (env21708[4]) {
+            (0, env21708[5])(env21708[6], env21708[0]);
+            break L28;
+          }
+          launchGuildBoostFlowOrAlert({
+            source: {
+              ...env21708[3],
+              object: AnalyticsObjects.BUTTON_CTA,
+              objectType: AnalyticsObjectTypes.BUY
+            },
+            analyticsLocations: env21708[6],
+            guildId: env21708[0],
+            onPaymentSuccess: $mk116890(c27953_0)
+          });
+          break L28;
+        }
+        await Promise.all([BillingActionCreators.init(), fetchGuildBoostSlots()]);
+        env30848[0] = env21708[1].type === GuildPowerupType.PERK ? BoostPurchaseIntent.PERK : void 0;
+        env30848[1] = getAvailableGuildBoostSlots(GuildBoostSlotStore.boostSlots);
+        if (env30848[1].length >= env21708[2]) {
+          openTransferModal({
+            guildBoostSlots: env30848[1].slice(0, env21708[2]),
+            guildId: env21708[0],
+            intent: env30848[0]
+          });
+          break L21;
+        }
+        if (env21708[4]) {
+          (0, env21708[5])(env21708[6], env21708[0]);
+          break L21;
+        }
+        launchGuildBoostFlowOrAlert({
+          source: {
+            ...env21708[3],
+            object: AnalyticsObjects.BUTTON_CTA,
+            objectType: AnalyticsObjectTypes.BUY
+          },
+          analyticsLocations: env21708[6],
+          guildId: env21708[0],
+          onPaymentSuccess: $mk116890(c27953_0)
+        });
+      }
+      return void 0;
+    }
+  }, [a1, a2, a0, a4, shouldUseMobileWebRedirectCheckout, handleMobileWebRedirectCheckout, analyticsLocations]);
+};

modules/premium/powerups/native/hooks/useGuildPowerupsCoachmark.tsx

@@ -0,0 +1,291 @@
+// Metro module 15145 (f15146).
+import { useMemo } from "react";
+import AccessibilityStore from "../../../../a11y/AccessibilityStore";
+import GuildStore from "../../../../../stores/GuildStore";
+import { GUILD_TAG_BADGE_PACKS_WAVE_ONE_SKU_ID_SET, GUILD_TAG_BADGE_PACKS_WAVE_TWO_SKU_ID_SET, GuildPowerupType } from "../../constants/GuildPowerupsConstants";
+import { AnalyticsPages, AnalyticsSections } from "../../../../../Constants";
+import { ContentDismissActionType } from "../../../../dismissible_content/DismissibleContentConstants";
+import { ThemeTypes } from "../../../../../_bundle/Module505";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import { useStateFromStores } from "../../../../../_bundle/Module589";
+import useTheme from "../../../../../hooks/useTheme";
+import useGuildPowerupsBoostCount from "../../hooks/useGuildPowerupsBoostCount";
+import useHasAllocateBoostPermission from "../../hooks/useHasAllocateBoostPermission";
+import { GuildPowerupNotificationPopoutType } from "../../constants/GuildPowerupsNotification";
+import useGuildPowerupsBoostAction from "./useGuildPowerupsBoostAction";
+import openGuildPowerupsModal from "../utils/openGuildPowerupsModal";
+import GuildPowerupsBoostGem from "../GuildPowerupsBoostGem";
+import { intl, t } from "../../../../../intl/index.native";
+import GuildPowerups_messages from "../../GuildPowerups.messages";
+import GuildPowerupsImage from "../GuildPowerupsImage";
+import Module15147 from "../../../../../_bundle/Module15147";
+import { getGuildPowerupBannerImage } from "../../hooks/useGetGuildPowerupBannerImage";
+import { GUILD_POWERUP_TAG_SKU_ID, GUILD_POWERUP_GUILD_THEME_SKU_ID, VANITY_URL_POWERUP_SKU_ID, GUILD_POWERUP_MAX_FILE_SIZE_250_MB_SKU_ID } from "../../../../../_bundle/Module4080";
+import Module15143 from "../../../../../_bundle/Module15143";
+import Module15148 from "../../../../../_bundle/Module15148";
+import Module15149 from "../../../../../_bundle/Module15149";
+import Module11642 from "../../../../../_bundle/Module11642";
+import Module15150 from "../../../../../_bundle/Module15150";
+import { useCoachmark } from "../../../../../design/components/Coachmark/native/useCoachmark.native";
+const useStyles = createStyles((a0) => ({
+  coachmarkImage: {
+    height: 120,
+    width: 260 - 2 * Module712.space.PX_16,
+    borderRadius: Module712.radii.md
+  },
+  coachmarkCover: {
+    resizeMode: "cover"
+  },
+  boostGemBackground: {
+    width: 50,
+    height: 50,
+    backgroundColor: a0 === ThemeTypes.LIGHT ? "#0000001A" : "#0000003D"
+  }
+}));
+export default function useGuildPowerupsCoachmark(a0, a1, a2) {
+  let styles, stateFromStores2, c21707_5, boostCount, c21707_7;
+  const guildId = a1;
+  const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId)?.name, [a1]);
+  styles = useStyles(useTheme());
+  stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const available = useGuildPowerupsBoostCount(a1).available;
+  const hasAllocateBoostPermission = useHasAllocateBoostPermission(a1);
+  c21707_5 = hasAllocateBoostPermission;
+  const r18 = a2?.type === GuildPowerupNotificationPopoutType.BOOST_TO_UNLOCK ? a2.powerup : void 0;
+  boostCount = r18 != null ? r18.cost - available : 0;
+  const guildPowerupsBoostAction = useGuildPowerupsBoostAction(a1, r18, boostCount, "boost_to_unlock_coachmark", {
+    page: AnalyticsPages.GUILD_CHANNEL,
+    section: AnalyticsSections.GUILD_HEADER
+  });
+  c21707_7 = guildPowerupsBoostAction;
+  useCoachmark(a0, useMemo(() => {
+    const r5 = {
+      title: "",
+      description: "",
+      position: "bottom",
+      visible: false,
+      onDismiss: () => {}
+    };
+    if (a2 == null) {
+      return r5;
+    }
+    const handleButtonPress = function handleButtonPress() {
+      if (a2 != null) {
+        a2.markAsDismissed(ContentDismissActionType.TAKE_ACTION);
+        openGuildPowerupsModal({
+          guildId
+        });
+      }
+    };
+    const handleDismiss = function handleDismiss() {
+      if (a2 != null) {
+        a2.markAsDismissed(ContentDismissActionType.USER_DISMISS);
+      }
+    };
+    const type = a2.type;
+    if (GuildPowerupNotificationPopoutType.LEVEL_REACHED === type) {
+      return {
+        ...r5,
+        visible: true,
+        renderImgComponent: () => <GuildPowerupsBoostGem style={styles.boostGemBackground} gemWidth={30} gemHeight={30} />,
+        title: intl.formatToPlainString(GuildPowerups_messages["Zg/m9K"], {
+          perkName: a2.powerup.title
+        }),
+        description: intl.formatToPlainString(GuildPowerups_messages["1EGXSK"], {
+          perkName: a2.powerup.title
+        }),
+        buttonLabel: intl.string(t.RzWDqY),
+        buttonVariant: "primary",
+        onButtonPress: handleButtonPress,
+        onDismiss: handleDismiss
+      };
+    }
+    if (GuildPowerupNotificationPopoutType.PERKS_AVAILABLE === type) {
+      return {
+        ...r5,
+        visible: true,
+        renderImgComponent: () => <GuildPowerupsBoostGem style={styles.boostGemBackground} gemWidth={30} gemHeight={30} />,
+        title: intl.string(GuildPowerups_messages.QpQBPQ),
+        description: intl.string(GuildPowerups_messages["6hn0xF"]),
+        buttonLabel: intl.string(t.RzWDqY),
+        buttonVariant: "primary",
+        onButtonPress: handleButtonPress,
+        onDismiss: handleDismiss
+      };
+    }
+    let powerups, guildPowerupBannerImage, c27952_2, powerup;
+    if (GuildPowerupNotificationPopoutType.PERKS_PURCHASABLE === type) {
+      powerups = a2.powerups;
+      if (powerups.length === 0) {
+        return r5;
+      }
+      const description = powerups.length >= 3 ? intl.formatToPlainString(GuildPowerups_messages["6Sv+3M"], {
+        perk: powerups[0].title,
+        perk2: powerups[1].title,
+        perk3: powerups[2].title
+      }) : powerups.length === 2 ? intl.formatToPlainString(GuildPowerups_messages.wcQOqC, {
+        perks: `${powerups[0].title} & ${powerups[1].title}`
+      }) : intl.formatToPlainString(GuildPowerups_messages.ZF8NT6, {
+        perk: powerups[0].title
+      });
+      const r357 = {
+        ...r5,
+        visible: true,
+        renderImgComponent: () => {
+          let imageUrl;
+          if (powerups.length > 1) {
+            imageUrl = Module15147;
+          } else {
+            imageUrl = getGuildPowerupBannerImage(powerups[0], stateFromStores2, true);
+            if (imageUrl == null) {
+              imageUrl = "";
+            }
+          }
+          return <GuildPowerupsImage imageUrl={imageUrl} isAnimated={powerups.length === 1} style={[styles.coachmarkImage, styles.coachmarkCover]} />;
+        }
+      };
+      let guildName = stateFromStores;
+      if (stateFromStores == null) {
+        guildName = "";
+      }
+      r357.title = intl.formatToPlainString(GuildPowerups_messages.LmpChE, {
+        guildName
+      });
+      r357.description = description;
+      r357.buttonLabel = intl.string(t.RzWDqY);
+      r357.buttonVariant = "primary";
+      r357.onButtonPress = handleButtonPress;
+      r357.onDismiss = handleDismiss;
+      return r357;
+    }
+    if (GuildPowerupNotificationPopoutType.NEW_PERK_AVAILABLE === type) {
+      const powerups2 = a2.powerups;
+      const r101 = powerups2.find((item) => item.skuId === GUILD_POWERUP_TAG_SKU_ID);
+      if (r101 != null) {
+        guildPowerupBannerImage = getGuildPowerupBannerImage(r101, stateFromStores2, true);
+        if (guildPowerupBannerImage != null) {
+          return {
+            ...r5,
+            visible: true,
+            renderImgComponent: () => <GuildPowerupsImage imageUrl={guildPowerupBannerImage} isAnimated={!stateFromStores2} style={styles.coachmarkImage} />,
+            title: intl.string(GuildPowerups_messages.GcEkAP),
+            description: intl.string(GuildPowerups_messages.yo0g7X),
+            buttonLabel: intl.string(t.RzWDqY),
+            buttonVariant: "primary",
+            onButtonPress: handleButtonPress,
+            onDismiss: handleDismiss
+          };
+        }
+      }
+      const r110 = powerups2.find((item) => item.skuId === GUILD_POWERUP_GUILD_THEME_SKU_ID);
+      c27952_2 = r110;
+      if (r110 != null) {
+        return {
+          ...r5,
+          visible: true,
+          renderImgComponent: () => {
+            let imageUrl = getGuildPowerupBannerImage(c27952_2, stateFromStores2, true);
+            if (imageUrl == null) {
+              imageUrl = Module15143;
+            }
+            return <GuildPowerupsImage imageUrl={imageUrl} isAnimated={!stateFromStores2} style={[styles.coachmarkImage, styles.coachmarkCover]} />;
+          },
+          title: r110.title,
+          description: typeof r110.description === "string" ? r110.description : "",
+          buttonLabel: intl.string(t.RzWDqY),
+          buttonVariant: "primary",
+          onButtonPress: handleButtonPress,
+          onDismiss: handleDismiss
+        };
+      }
+      if (powerups2.find((item) => item.skuId === VANITY_URL_POWERUP_SKU_ID) != null) {
+        return {
+          ...r5,
+          visible: true,
+          renderImgComponent: () => <GuildPowerupsImage imageUrl={Module15148} style={styles.coachmarkImage} />,
+          title: intl.string(GuildPowerups_messages.Ygpx4Q),
+          description: intl.string(GuildPowerups_messages.mmNkUA),
+          buttonLabel: intl.string(t.RzWDqY),
+          buttonVariant: "primary",
+          onButtonPress: handleButtonPress,
+          onDismiss: handleDismiss
+        };
+      }
+      if (powerups2.find((item) => GUILD_TAG_BADGE_PACKS_WAVE_TWO_SKU_ID_SET.has(item.skuId)) != null) {
+        return {
+          ...r5,
+          visible: true,
+          renderImgComponent: () => <GuildPowerupsImage imageUrl={Module15149} style={styles.coachmarkImage} />,
+          title: intl.string(GuildPowerups_messages["kA2c+n"]),
+          description: intl.string(GuildPowerups_messages.TUilLj),
+          buttonLabel: intl.string(t.RzWDqY),
+          buttonVariant: "primary",
+          onButtonPress: handleButtonPress,
+          onDismiss: handleDismiss
+        };
+      }
+      if (powerups2.find((item) => GUILD_TAG_BADGE_PACKS_WAVE_ONE_SKU_ID_SET.has(item.skuId)) != null) {
+        return {
+          ...r5,
+          visible: true,
+          renderImgComponent: () => <GuildPowerupsImage imageUrl={Module11642} style={styles.coachmarkImage} />,
+          title: intl.string(GuildPowerups_messages["kA2c+n"]),
+          description: intl.string(GuildPowerups_messages.TUilLj),
+          buttonLabel: intl.string(t.RzWDqY),
+          buttonVariant: "primary",
+          onButtonPress: handleButtonPress,
+          onDismiss: handleDismiss
+        };
+      }
+      return powerups2.find((item) => item.skuId === GUILD_POWERUP_MAX_FILE_SIZE_250_MB_SKU_ID) != null ? {
+        ...r5,
+        visible: true,
+        renderImgComponent: () => <GuildPowerupsImage imageUrl={Module15150} isAnimated={false} style={styles.coachmarkImage} />,
+        title: intl.string(GuildPowerups_messages.rp0Ff1),
+        description: intl.string(GuildPowerups_messages["3L/DZq"]),
+        buttonLabel: intl.string(t.RzWDqY),
+        buttonVariant: "primary",
+        onButtonPress: handleButtonPress,
+        onDismiss: handleDismiss
+      } : r5;
+    }
+    if (GuildPowerupNotificationPopoutType.BOOST_TO_UNLOCK === type) {
+      powerup = a2.powerup;
+      return {
+        ...r5,
+        visible: true,
+        offsetY: 8,
+        renderImgComponent: () => {
+          let r28;
+          if (powerup.type === GuildPowerupType.LEVEL) {
+            r28 = <GuildPowerupsBoostGem style={styles.boostGemBackground} gemWidth={30} gemHeight={30} />;
+          } else {
+            let imageUrl = getGuildPowerupBannerImage(powerup, stateFromStores2, true);
+            if (imageUrl == null) {
+              imageUrl = "";
+            }
+            r28 = <GuildPowerupsImage imageUrl={imageUrl} isAnimated={!stateFromStores2} style={[styles.coachmarkImage, styles.coachmarkCover]} />;
+          }
+          return r28;
+        },
+        title: intl.string(GuildPowerups_messages.n37JhA),
+        description: intl.formatToPlainString(c21707_5 !== true && powerup.type !== GuildPowerupType.LEVEL ? GuildPowerups_messages["7MZ2tu"] : GuildPowerups_messages.Yr1ogl, {
+          boostCount,
+          perkName: powerup.title
+        }),
+        buttonLabel: intl.string(t.oPAx73),
+        buttonVariant: "primary",
+        onButtonPress: () => {
+          a2.markAsDismissed(ContentDismissActionType.TAKE_ACTION);
+          c21707_7();
+        },
+        onDismiss: handleDismiss
+      };
+    }
+    if (GuildPowerupNotificationPopoutType.GAME_SERVER_HOSTING_AVAILABLE !== type && GuildPowerupNotificationPopoutType.GAME_SERVER_HOSTING_GUILD_ELIGIBLE !== type) {
+      GuildPowerupNotificationPopoutType.GAME_SERVER_HOSTING_ENABLED;
+    }
+    return r5;
+  }, [boostCount, hasAllocateBoostPermission, a1, stateFromStores, guildPowerupsBoostAction, a2, styles, stateFromStores2]));
+};

modules/premium/powerups/native/hooks/usePowerupGroupConfig.tsx

@@ -0,0 +1,32 @@
+// Metro module 11640 (f11641).
+import { useMemo } from "react";
+import GuildStore from "../../../../../stores/GuildStore";
+import { useStateFromStores } from "../../../../../_bundle/Module589";
+import { guildSupportsTags } from "../../../../guild_tag/GuildTagUtils";
+import { intl } from "../../../../../intl/index.native";
+import GuildPowerups_messages from "../../GuildPowerups.messages";
+import Module11641 from "../../../../../_bundle/Module11641";
+import Module11642 from "../../../../../_bundle/Module11642";
+import { assertNever } from "../../../../../utils/GlobalUtils";
+export default function usePowerupGroupConfig(c19049_0, a1) {
+  const stateFromStores = useStateFromStores([GuildStore], () => {
+    const guild = GuildStore.getGuild(c19049_0);
+    return guild != null && guildSupportsTags(guild);
+  });
+  return useMemo(() => {
+    if (a1.group === "guildTagsBadgePacks") {
+      return {
+        title: intl.string(GuildPowerups_messages.KC9HRW),
+        description: intl.string(GuildPowerups_messages.GJiSmP),
+        image: {
+          staticUrl: Module11641,
+          animatedUrl: Module11642
+        },
+        disabledReason: stateFromStores ? void 0 : intl.string(GuildPowerups_messages.lvk1Gc),
+        badge: void 0,
+        forceStaticImages: true
+      };
+    }
+    assertNever(a1.group);
+  }, [a1, stateFromStores]);
+};

modules/premium/powerups/native/hooks/useShowGuildPowerupRollbackSheet.tsx

@@ -0,0 +1,43 @@
+// Metro module 11603 (f11604).
+import { useRef, useEffect } from "react";
+import { ContentDismissActionType } from "../../../../dismissible_content/DismissibleContentConstants";
+import useGuildPowerupRollbackModalConfig from "../../hooks/useGuildPowerupRollbackModalConfig";
+import { useSelectedDismissibleContent } from "../../../../dismissible_content/hooks/useSelectedDismissibleContent";
+import openGuildPowerupRollbackSheet, { GUILD_POWERUP_ROLLBACK_SHEET_KEY } from "../utils/openGuildPowerupRollbackSheet";
+import ActionSheetActionCreators from "../../../../action_sheet/native/ActionSheetActionCreators";
+export default function useShowGuildPowerupRollbackSheet(a0, a1, r7 = false) {
+  const guildPowerupRollbackModalConfig = useGuildPowerupRollbackModalConfig(a0, a1);
+  let shouldShow = guildPowerupRollbackModalConfig.shouldShow;
+  const modalConfig = guildPowerupRollbackModalConfig.modalConfig;
+  if (shouldShow) {
+    shouldShow = modalConfig != null;
+  }
+  if (shouldShow) {
+    shouldShow = !r7;
+  }
+  const r15 = [];
+  if (shouldShow) {
+    r15.push(modalConfig.dismissibleContent);
+  }
+  const [r26, r27] = useSelectedDismissibleContent(r15);
+  let c19025_1 = r26;
+  let c19025_2 = r27;
+  const ref = useRef(false);
+  useEffect(() => {
+    if (!(ref.current || modalConfig == null || modalConfig.primaryButtonText == null || c19025_1 !== modalConfig.dismissibleContent)) {
+      ref.current = true;
+      openGuildPowerupRollbackSheet({
+        header: modalConfig.header,
+        body: modalConfig.bodies.join("\n\n"),
+        ctaText: modalConfig.primaryButtonText,
+        onCtaPress: () => {
+          c19025_2(ContentDismissActionType.TAKE_ACTION);
+          ActionSheetActionCreators.hideActionSheet(GUILD_POWERUP_ROLLBACK_SHEET_KEY);
+        },
+        onDismiss: () => {
+          c19025_2(ContentDismissActionType.USER_DISMISS);
+        }
+      });
+    }
+  }, [r26, modalConfig, r27]);
+};

modules/premium/powerups/native/images/BoostGem.tsx

@@ -0,0 +1,13 @@
+// Metro module 11614 (f11615).
+import Module8531, { Path } from "../../../../../_bundle/Module8531";
+export default function BoostGem(props) {
+  const { width = 39, height = 66 } = props;
+  return <Module8531 width={width} height={height} viewBox="0 0 39 66" fill="none" style={props.style}>
+    <Path d="M19.3146 0L0 19.4029V46.6865L19.3146 65.9999L38.6293 46.5969V19.388L19.3146 0ZM28.972 42.6566L19.3146 52.3432L9.65732 42.6566V23.388L19.3146 13.6865L28.972 23.388V42.6566Z" fill="#FA6EF6" />
+    <Path d="M19.3145 0V13.6316L28.9718 23.2941L38.6291 19.3102L19.3145 0Z" fill="#FFADFB" />
+    <Path d="M9.65732 42.7056L0 46.7269L19.3146 65.9996V52.3419L9.65732 42.7056Z" fill="#E655D4" />
+    <Path d="M9.65723 23.3317V42.6835L19.3145 52.4118L28.9719 42.6835V23.3317L19.3145 13.5884L9.65723 23.3317Z" fill="#FFCFF9" />
+    <Path d="M28.9719 23.1273L9.74637 42.7058H9.65723V37.3827L26.3273 20.3823L28.9719 23.1273Z" fill="white" />
+    <Path d="M28.9717 31.0586V36.3917L16.1689 49.4997L13.52 46.6984L28.9717 31.0586Z" fill="white" />
+  </Module8531>;
+};

modules/premium/powerups/native/images/BoostGemPixel.tsx

@@ -0,0 +1,65 @@
+// Metro module 12581 (f12582).
+import Module8531, { Path } from "../../../../../_bundle/Module8531";
+export default function BoostGemPixel(props) {
+  const { width = 24, height = 24 } = props;
+  return <Module8531 width={width} height={height} viewBox="0 0 24 24" fill="none" style={props.style}>
+    <Path d="M10.5 12H9V10.5H10.5V12Z" fill="#EFEFF1" />
+    <Path d="M12 10.5H10.5V9H12V10.5Z" fill="#EFEFF1" />
+    <Path d="M13.5 9H12V7.5H13.5V9Z" fill="#EFEFF1" />
+    <Path d="M12 4.5H10.5V6H9V7.5H7.5V4.5H9V3H10.5V1.5H12V4.5Z" fill="#EFEFF1" />
+    <Path d="M10.5 13.5H9V12H10.5V13.5Z" fill="#FCC0F4" />
+    <Path d="M12 12H10.5V10.5H12V12Z" fill="#FCC0F4" />
+    <Path d="M13.5 10.5H12V9H13.5V10.5Z" fill="#FCC0F4" />
+    <Path d="M15 9H13.5V7.5H15V9Z" fill="#FCC0F4" />
+    <Path d="M12 18H10.5V16.5H12V18Z" fill="#FD99E9" />
+    <Path d="M7.5 16.5H6V7.5H7.5V16.5Z" fill="#FD99E9" />
+    <Path d="M13.5 16.5H12V15H13.5V16.5Z" fill="#FD99E9" />
+    <Path d="M10.5 15H9V13.5H10.5V15Z" fill="#FD99E9" />
+    <Path d="M15 15H13.5V13.5H15V15Z" fill="#FD99E9" />
+    <Path d="M12 13.5H10.5V12H12V13.5Z" fill="#FD99E9" />
+    <Path d="M13.5 12H12V10.5H13.5V12Z" fill="#FD99E9" />
+    <Path d="M10.5 10.5H9V9H10.5V10.5Z" fill="#FD99E9" />
+    <Path d="M15 10.5H13.5V9H15V10.5Z" fill="#FD99E9" />
+    <Path d="M12 9H10.5V7.5H12V9Z" fill="#FD99E9" />
+    <Path d="M10.5 7.5H9V6H10.5V7.5Z" fill="#FD99E9" />
+    <Path d="M13.5 7.5H12V6H13.5V7.5Z" fill="#FD99E9" />
+    <Path d="M13.5 3H15V4.5H16.5V7.5H15V6H13.5V4.5H12V1.5H13.5V3Z" fill="#FD99E9" />
+    <Path d="M12 6H10.5V4.5H12V6Z" fill="#FD99E9" />
+    <Path d="M13.5 18V19.5H10.5V18H13.5Z" fill="#660066" />
+    <Path d="M10.5 18H9V16.5H10.5V18Z" fill="#660066" />
+    <Path d="M15 18H13.5V16.5H15V18Z" fill="#660066" />
+    <Path d="M18 18H16.5V16.5H18V18Z" fill="#660066" />
+    <Path d="M16.5 16.5H15V12H16.5V16.5Z" fill="#660066" />
+    <Path d="M13.5 22.5H12V19.5H13.5V18H15V16.5H16.5V19.5H15V21H13.5V22.5Z" fill="#B3269C" />
+    <Path d="M7.5 18H6V16.5H7.5V18Z" fill="#B3269C" />
+    <Path d="M9 16.5H7.5V7.5H9V16.5Z" fill="#B3269C" />
+    <Path d="M16.5 12H15V7.5H16.5V12Z" fill="#B3269C" />
+    <Path d="M18 7.5H16.5V6H18V7.5Z" fill="#B3269C" />
+    <Path d="M12 22.5H10.5V21H9V19.5H7.5V16.5H9V18H10.5V19.5H12V22.5Z" fill="#FF4CD2" />
+    <Path d="M13.5 18H12V16.5H13.5V18Z" fill="#FF4CD2" />
+    <Path d="M15 13.5H13.5V15H12V16.5H9V15H10.5V13.5H12V12H13.5V10.5H15V13.5Z" fill="#FF4CD2" />
+    <Path d="M15 16.5H13.5V15H15V16.5Z" fill="#FF4CD2" />
+    <Path d="M18 16.5H16.5V7.5H18V16.5Z" fill="#FF4CD2" />
+    <Path d="M10.5 9H9V7.5H10.5V9Z" fill="#FF4CD2" />
+    <Path d="M7.5 7.5H6V6H7.5V7.5Z" fill="#FF4CD2" />
+    <Path d="M12 7.5H10.5V6H12V7.5Z" fill="#FF4CD2" />
+    <Path d="M15 7.5H13.5V6H15V7.5Z" fill="#FF4CD2" />
+    <Path d="M13.5 6H12V4.5H13.5V6Z" fill="#FF4CD2" />
+    <Path d="M13.5 22.5V24H10.5V22.5H13.5Z" fill="black" />
+    <Path d="M10.5 22.5H9V21H10.5V22.5Z" fill="black" />
+    <Path d="M15 22.5H13.5V21H15V22.5Z" fill="black" />
+    <Path d="M9 21H7.5V19.5H9V21Z" fill="black" />
+    <Path d="M16.5 21H15V19.5H16.5V21Z" fill="black" />
+    <Path d="M7.5 19.5H6V18H7.5V19.5Z" fill="black" />
+    <Path d="M18 19.5H16.5V18H18V19.5Z" fill="black" />
+    <Path d="M6 18H4.5V6H6V18Z" fill="black" />
+    <Path d="M19.5 18H18V6H19.5V18Z" fill="black" />
+    <Path d="M7.5 6H6V4.5H7.5V6Z" fill="black" />
+    <Path d="M18 6H16.5V4.5H18V6Z" fill="black" />
+    <Path d="M9 4.5H7.5V3H9V4.5Z" fill="black" />
+    <Path d="M16.5 4.5H15V3H16.5V4.5Z" fill="black" />
+    <Path d="M10.5 3H9V1.5H10.5V3Z" fill="black" />
+    <Path d="M15 3H13.5V1.5H15V3Z" fill="black" />
+    <Path d="M13.5 1.5H10.5V0H13.5V1.5Z" fill="black" />
+  </Module8531>;
+};

modules/premium/powerups/native/utils/openGuildPowerupRollbackSheet.tsx

@@ -0,0 +1,7 @@
+// Metro module 11606 (f11607).
+import ActionSheetActionCreators from "../../../../action_sheet/native/ActionSheetActionCreators";
+let c7922_3 = "GUILD_POWERUP_ROLLBACK_SHEET_KEY";
+export default function openGuildPowerupRollbackSheet(a0) {
+  ActionSheetActionCreators.openLazy(import("../GuildPowerupRollbackSheet"), c7922_3, a0);
+};
+export const GUILD_POWERUP_ROLLBACK_SHEET_KEY = "GUILD_POWERUP_ROLLBACK_SHEET_KEY";

modules/premium/powerups/native/utils/openGuildPowerupsBottomSheet.tsx

@@ -0,0 +1,7 @@
+// Metro module 11609 (f11610).
+import ActionSheetActionCreators from "../../../../action_sheet/native/ActionSheetActionCreators";
+let c7925_3 = "GUILD_POWERUPS_BOTTOM_SHEET_KEY";
+export default function openGuildPowerupsBottomSheet(a0) {
+  ActionSheetActionCreators.openLazy(import("../GuildPowerupsBottomSheet"), c7925_3, a0);
+};
+export const GUILD_POWERUPS_BOTTOM_SHEET_KEY = "GUILD_POWERUPS_BOTTOM_SHEET_KEY";

modules/premium/powerups/native/utils/openGuildPowerupsModal.tsx

@@ -0,0 +1,16 @@
+// Metro module 11571 (f11572).
+import ModalActionCreators from "../../../../../actions/ModalActionCreators";
+let c7895_3 = 0;
+export default function openGuildPowerupsModal({ navigationParams, ...rest }) {
+  const autoOpenPerkId = rest.autoOpenPerkId;
+  let r6 = rest;
+  if (autoOpenPerkId != null) {
+    const autoOpenRequestId = c7895_3 + 1;
+    c7895_3 = autoOpenRequestId;
+    r6 = {
+      ...rest,
+      autoOpenRequestId
+    };
+  }
+  ModalActionCreators.pushLazy(import("../GuildPowerupsModal"), r6, "guild_powerups_modal_key", navigationParams);
+};

modules/premium/powerups/native/utils/openGuildPowerupsMultiPerkBottomSheet.tsx

@@ -0,0 +1,6 @@
+// Metro module 11637 (f11638).
+import ActionSheetActionCreators from "../../../../action_sheet/native/ActionSheetActionCreators";
+import { GUILD_POWERUPS_BOTTOM_SHEET_KEY } from "./openGuildPowerupsBottomSheet";
+export default function openGuildPowerupsMultiPerkBottomSheet(a0) {
+  ActionSheetActionCreators.openLazy(import("../GuildPowerupsMultiPerkBottomSheet"), GUILD_POWERUPS_BOTTOM_SHEET_KEY, a0);
+};