260 lines
10 KiB
TypeScript
260 lines
10 KiB
TypeScript
// Metro module 12531 (f12532).
|
|
import { useMemo, useEffect } from "react";
|
|
import { Image as Image2, View } from "react-native";
|
|
import ThemeStore from "../../user_settings/ThemeStore";
|
|
import GuildStore from "../../../stores/GuildStore";
|
|
import GuildBoostSlotStore from "../../../stores/billing/GuildBoostSlotStore";
|
|
import SubscriptionStore from "../../../stores/billing/SubscriptionStore";
|
|
import { Fonts } from "../../../Constants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import TextStyles from "../../rebrand/native/TextStyles";
|
|
import useCountdown from "../../../hooks/useCountdown";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import SnowflakeUtils from "../../../utils/SnowflakeUtils";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
import { openTransferModal, openApplyBoostModal } from "../../../actions/native/BoostingActionCreators";
|
|
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
|
|
import Module12532 from "../../../_bundle/Module12532";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import AvatarUtils from "../../../utils/AvatarUtils";
|
|
import { useSubscriptionPlaceholderPatternSource } from "../../../design/components/Illustration/native/redesign/generated/SubscriptionPlaceholderPattern";
|
|
import BoostedGuildTierProgressCircle from "./BoostedGuildTierProgressCircle";
|
|
import { fetchSubscriptions } from "../../billing/actions/BillingActionCreators";
|
|
import { fetchGuildBoostSlots } from "../../../actions/BoostingActionCreators";
|
|
import Module12 from "../../../_bundle/Module12";
|
|
let useStyles, GuildBoostSlotsInventoryRow, GuildBoostSlot, UnusedGuildBoostSlots, BoostedGuildInfo, BoostedGuild;
|
|
const GuildBoostSlotCooldown = function GuildBoostSlotCooldown(props) {
|
|
const cooldownEndsAt = props.cooldownEndsAt;
|
|
const styles = useStyles();
|
|
const memo = useMemo(() => new Date(cooldownEndsAt), [cooldownEndsAt]);
|
|
const countdown = useCountdown(memo, 15000);
|
|
const { days, hours, minutes } = countdown;
|
|
return memo.valueOf() <= Date.now() ? null : <Text style={styles.subscriptionSlotInfoCooldown} variant="text-xs/medium" color="text-muted">
|
|
{intl.format(t.NffSH8, {
|
|
days,
|
|
hours,
|
|
minutes
|
|
})}
|
|
</Text>;
|
|
};
|
|
GuildBoostSlotsInventoryRow = function GuildBoostSlotsInventoryRow(props) {
|
|
const { title, subtitle, action, isLast } = props;
|
|
const styles = useStyles();
|
|
return <View style={styles.subscriptionSlot}>
|
|
<View style={styles.subscriptionSlotInner}>
|
|
<View style={styles.subscriptionSlotInfo}>
|
|
<Text style={styles.subscriptionSlotInfoTitle} lineClamp={1} variant="text-md/semibold" color="interactive-text-active">{title}</Text>
|
|
{subtitle}
|
|
</View>
|
|
{action}
|
|
</View>
|
|
{isLast ? null : <View style={styles.subscriptionSlotBorder} />}
|
|
</View>;
|
|
};
|
|
GuildBoostSlot = function GuildBoostSlot(props) {
|
|
const { guild, guildBoostSlot, isLast } = props;
|
|
if (guild == null) {
|
|
return null;
|
|
}
|
|
const r4 = guildBoostSlot.premiumGuildSubscription != null ? guildBoostSlot.premiumGuildSubscription.id : null;
|
|
const r15 = r4 != null ? SnowflakeUtils.extractTimestamp(r4) : null;
|
|
return <GuildBoostSlotsInventoryRow title={r15 != null ? intl.formatToPlainString(t["ePe+Xh"], {
|
|
date: new Date(r15)
|
|
}) : null} subtitle={guildBoostSlot.cooldownEndsAt != null ? <GuildBoostSlotCooldown cooldownEndsAt={guildBoostSlot.cooldownEndsAt} /> : null} action={guildBoostSlot.isOnCooldown() ? null : <PressableOpacity accessibilityRole="button" onPress={() => openTransferModal({
|
|
guildBoostSlots: [guildBoostSlot]
|
|
})}>
|
|
<Text variant="text-md/medium" color="control-brand-foreground">
|
|
{intl.string(t.jqqLb6)}
|
|
</Text>
|
|
</PressableOpacity>} isLast={isLast} />;
|
|
};
|
|
UnusedGuildBoostSlots = function UnusedGuildBoostSlots(props) {
|
|
let c19894_0;
|
|
const unusedSlots = props.unusedSlots;
|
|
c19894_0 = void 0;
|
|
const styles = useStyles();
|
|
const r9 = unusedSlots.filter(({ cooldownEndsAt: cooldownEndsAt2 }) => cooldownEndsAt2 != null && new Date(cooldownEndsAt2).valueOf() > Date.now());
|
|
c19894_0 = r9;
|
|
const r18 = unusedSlots.filter(({ cooldownEndsAt: cooldownEndsAt2 }) => cooldownEndsAt2 == null || new Date(cooldownEndsAt2).valueOf() <= Date.now());
|
|
return <View style={styles.unusedSlots}>
|
|
{r18.length > 0 ? <GuildBoostSlotsInventoryRow title={intl.formatToPlainString(t.ewI23O, {
|
|
numSubscriptions: r18.length
|
|
})} action={<PressableOpacity accessibilityRole="button" onPress={() => openApplyBoostModal()}>
|
|
<Text variant="text-md/medium" color="text-link">
|
|
{intl.string(t["7KyPor"])}
|
|
</Text>
|
|
</PressableOpacity>} isLast={r9.length === 0} /> : null}
|
|
{r9.map((item, index) => <GuildBoostSlotsInventoryRow key={item.id} title={intl.formatToPlainString(t.gDsyB9, {
|
|
numSubscriptions: 1
|
|
})} subtitle={item.cooldownEndsAt != null ? <GuildBoostSlotCooldown cooldownEndsAt={item.cooldownEndsAt} /> : null} isLast={index === c19894_0.length - 1} />)}
|
|
</View>;
|
|
};
|
|
BoostedGuildInfo = function BoostedGuildInfo(props) {
|
|
const { guild, numGuildBoostSlots } = props;
|
|
const styles = useStyles();
|
|
return guild != null ? <View style={styles.guildInfo}>
|
|
<View style={styles.guildInfoIcon}>
|
|
<GuildIcon guild={guild} size={GuildIconSizes.NORMAL} selected={false} />
|
|
</View>
|
|
<View>
|
|
<Text style={styles.guildInfoName} variant="heading-lg/extrabold" color="interactive-text-active">{guild.name}</Text>
|
|
<View style={styles.guildInfoRowBottom}>
|
|
<Image2 source={Module12532} style={styles.guildInfoRowIcon} />
|
|
<Text style={styles.guildInfoSubscriptionCount} variant="text-xs/semibold" color="interactive-text-active">
|
|
{intl.format(t.bexfNy, {
|
|
numSubscriptions: numGuildBoostSlots
|
|
})}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View> : null;
|
|
};
|
|
BoostedGuild = function BoostedGuild(props) {
|
|
const { guildId, guildBoostSlots } = props;
|
|
const styles = useStyles();
|
|
const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
|
|
const stateFromStores2 = useStateFromStores([ThemeStore], () => ThemeStore.theme);
|
|
const r16 = stateFromStores != null ? stateFromStores.banner != null ? AvatarUtils.getGuildBannerSource(stateFromStores) : null : null;
|
|
let source = useSubscriptionPlaceholderPatternSource();
|
|
if (r16 != null) {
|
|
source = r16;
|
|
}
|
|
return <View style={styles.boostedGuild}>
|
|
<View style={styles.subscriptionBody}>
|
|
<View style={styles.subscriptionImageView}>
|
|
<Image2 source={source} style={[styles.subscriptionImage, r16 == null ? styles.subscriptionImageFallback : null]} />
|
|
{r16 != null ? <View style={styles.subscriptionImageOverlay} /> : null}
|
|
<BoostedGuildTierProgressCircle guild={stateFromStores} theme={stateFromStores2} />
|
|
</View>
|
|
<BoostedGuildInfo guild={stateFromStores} numGuildBoostSlots={guildBoostSlots.length} />
|
|
</View>
|
|
<View>
|
|
{guildBoostSlots.map((a0, index) => <GuildBoostSlot key={a0.id} guild={stateFromStores} guildBoostSlot={a0} isLast={index === guildBoostSlots.length - 1} />)}
|
|
</View>
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
inventory: {
|
|
marginBottom: 32
|
|
},
|
|
header: {
|
|
marginHorizontal: 16,
|
|
marginBottom: 16
|
|
},
|
|
boostedGuild: {
|
|
borderRadius: Module712.radii.xs,
|
|
marginBottom: 16
|
|
},
|
|
subscriptionBody: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
|
|
},
|
|
subscriptionImageView: {
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL,
|
|
width: "100%",
|
|
height: 112,
|
|
overflow: "hidden",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
subscriptionImage: {
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%"
|
|
},
|
|
subscriptionImageFallback: {
|
|
opacity: 0.4
|
|
},
|
|
subscriptionImageOverlay: {
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%",
|
|
backgroundColor: Module712.colors.BLACK,
|
|
opacity: 0.4
|
|
},
|
|
guildInfo: {
|
|
flexDirection: "row",
|
|
padding: 16
|
|
},
|
|
guildInfoIcon: {
|
|
marginRight: 8
|
|
},
|
|
guildInfoName: {
|
|
...TextStyles(Fonts.DISPLAY_EXTRABOLD, Module712.colors.INTERACTIVE_TEXT_ACTIVE, 20),
|
|
marginBottom: 4
|
|
},
|
|
guildInfoRowBottom: {
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
guildInfoRowIcon: {
|
|
height: 12,
|
|
width: 8,
|
|
marginLeft: 2,
|
|
marginRight: 8
|
|
},
|
|
guildInfoSubscriptionCount: {
|
|
lineHeight: 16
|
|
},
|
|
subscriptionSlot: {
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
paddingLeft: 16
|
|
},
|
|
subscriptionSlotInner: {
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
paddingRight: 16,
|
|
paddingVertical: 12
|
|
},
|
|
subscriptionSlotBorder: {
|
|
backgroundColor: Module712.colors.BORDER_SUBTLE,
|
|
height: 1
|
|
},
|
|
subscriptionSlotInfo: {
|
|
flexShrink: 1,
|
|
flexGrow: 1
|
|
},
|
|
subscriptionSlotInfoTitle: {
|
|
lineHeight: 24
|
|
},
|
|
subscriptionSlotInfoCooldown: {
|
|
lineHeight: 16
|
|
},
|
|
unusedSlots: {
|
|
marginBottom: 32
|
|
}
|
|
});
|
|
export default function GuildBoostSlotsInventory() {
|
|
let r51;
|
|
let c19896_0;
|
|
L9: {
|
|
const styles = useStyles();
|
|
useEffect(() => {
|
|
fetchSubscriptions();
|
|
fetchGuildBoostSlots();
|
|
}, []);
|
|
const stateFromStores2 = useStateFromStores([SubscriptionStore], () => SubscriptionStore.getPremiumTypeSubscription());
|
|
const r43 = Module12(useStateFromStores([GuildBoostSlotStore], () => GuildBoostSlotStore.boostSlots)).groupBy(({ premiumGuildSubscription }) => premiumGuildSubscription != null ? premiumGuildSubscription.guildId : "0").value();
|
|
c19896_0 = r43;
|
|
const unusedSlots = r43[0];
|
|
const r14 = Object.keys(r43).filter((item) => item !== "0");
|
|
if (r14.length === 0) {
|
|
r51 = null;
|
|
if (unusedSlots == null) {
|
|
break L9;
|
|
}
|
|
}
|
|
r51 = stateFromStores2 == null ? null : <View style={styles.inventory}>
|
|
{unusedSlots != null ? unusedSlots.length > 0 ? <UnusedGuildBoostSlots unusedSlots={unusedSlots} /> : null : null}
|
|
{r14.length > 0 ? <>
|
|
<Text style={styles.header} variant="eyebrow" color="text-default">
|
|
{intl.string(t.gB9oQ7)}
|
|
</Text>
|
|
{r14.map((item) => <BoostedGuild key={item} guildId={item} guildBoostSlots={c19896_0[item]} />)}
|
|
</> : null}
|
|
</View>;
|
|
}
|
|
return r51;
|
|
};
|