57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
// Metro module 9713 (f9714).
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../../_bundle/Module712";
|
|
import useAnalyticsLocations from "../../../../app_analytics/useAnalyticsLocations";
|
|
import useTrackImpression from "../../../../app_analytics/useTrackImpression";
|
|
import { ImpressionNames, ImpressionTypes } from "../../../../../_bundle/Module503";
|
|
import GiftingBadgeIcon from "./GiftingBadgeIcon";
|
|
import { Text } from "../../../../../design/components/Text/native/Text";
|
|
import { intl } from "../../../../../intl/index.native";
|
|
import GiftingBadge_messages from "../../GiftingBadge.messages";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
padding: Module712.space.PX_8,
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
borderRadius: Module712.radii.sm,
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: Module712.colors.BORDER_MUTED,
|
|
...Module712.shadows.SHADOW_LOW
|
|
},
|
|
iconContainer: {
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: Module712.space.PX_8,
|
|
marginInlineEnd: Module712.space.PX_8
|
|
}
|
|
});
|
|
export default function GiftingBadgeProgressBanner(props) {
|
|
const { giftsToNextTier, nextTierName, nextTierIcon, analyticsLocation } = props;
|
|
const styles = useStyles();
|
|
useTrackImpression({
|
|
name: ImpressionNames.GIFTING_BADGE_PROGRESS_BANNER,
|
|
type: ImpressionTypes.VIEW,
|
|
properties: {
|
|
gifts_to_next_tier: giftsToNextTier,
|
|
next_tier: nextTierName,
|
|
location_stack: useAnalyticsLocations.apply(void 0, [...analyticsLocation != null ? [analyticsLocation] : []]).analyticsLocations
|
|
}
|
|
}, {
|
|
trackOnInitialLoad: true
|
|
});
|
|
return <View style={styles.container}>
|
|
<View style={styles.iconContainer}>
|
|
{nextTierIcon != null && <GiftingBadgeIcon icon={nextTierIcon} size={24} />}
|
|
</View>
|
|
<Text variant="text-md/semibold">
|
|
{intl.formatToPlainString(GiftingBadge_messages["0+xfd9"], {
|
|
giftsRemaining: giftsToNextTier,
|
|
nextTier: nextTierName
|
|
})}
|
|
</Text>
|
|
</View>;
|
|
};
|