96 lines
3.9 KiB
TypeScript
96 lines
3.9 KiB
TypeScript
// Metro module 9649 (f9650).
|
|
import { useState, useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import StickersStore from "../StickersStore";
|
|
import { EMPTY_STATE_STICKERS } from "../StickersConstants";
|
|
import { AnalyticEvents, AnalyticsSections } from "../../../Constants";
|
|
import { PremiumUpsellTypes } from "../../premium/PremiumConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import { useShouldAnimateSticker, useFetchStickerPacks } from "../StickersHooks";
|
|
import Sticker from "./Sticker";
|
|
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
|
|
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
|
|
import { useStateFromStoresArray } from "../../../_bundle/Module589";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
import { triggerHapticFeedback } from "../../haptics/HapticUtils.native";
|
|
import HapticFeedbackTypes from "../../haptics/HapticFeedbackTypes";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import FastImage from "../../../components_native/common/FastImage";
|
|
import Module9377 from "../../../_bundle/Module9377";
|
|
import openStickersPremiumUpsellAlert from "./premium/openStickersPremiumUpsellAlert";
|
|
let useStyles;
|
|
const EmptyStateSticker = function EmptyStateSticker(props) {
|
|
const sticker = props.sticker;
|
|
return <Sticker key={sticker?.id} sticker={sticker} size={60} animated={useShouldAnimateSticker(props.isFocused)} />;
|
|
};
|
|
useStyles = createStyles({
|
|
header: {
|
|
marginBottom: 8,
|
|
textAlign: "center"
|
|
},
|
|
blurb: {
|
|
lineHeight: 18,
|
|
textAlign: "center",
|
|
marginBottom: 12
|
|
},
|
|
premiumButton: {
|
|
marginTop: 20,
|
|
alignSelf: "center",
|
|
paddingLeft: 5,
|
|
paddingRight: 10,
|
|
flexGrow: 0
|
|
},
|
|
nitroWheel: {
|
|
width: 32
|
|
},
|
|
stickersRow: {
|
|
flexDirection: "row",
|
|
alignSelf: "center"
|
|
},
|
|
sticker: {
|
|
paddingHorizontal: 2
|
|
}
|
|
});
|
|
export default () => {
|
|
const styles = useStyles();
|
|
useFetchStickerPacks();
|
|
const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EMPTY_STATE).analyticsLocations;
|
|
const stateFromStoresArray = useStateFromStoresArray([StickersStore], () => EMPTY_STATE_STICKERS.map((item) => StickersStore.getStickerById(item)).filter((item) => item != null));
|
|
const [state, setState] = useState(null);
|
|
useEffect(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.PREMIUM_UPSELL_VIEWED, {
|
|
type: PremiumUpsellTypes.EMPTY_STICKER_PICKER_UPSELL,
|
|
source: {
|
|
section: AnalyticsSections.EMPTY_STICKER_PICKER_UPSELL
|
|
},
|
|
location_stack: analyticsLocations
|
|
});
|
|
}, [analyticsLocations]);
|
|
return <View>
|
|
<Text style={styles.header} accessibilityRole="header" variant="heading-lg/extrabold" color="mobile-text-heading-primary">
|
|
{intl.string(t.HEm04J)}
|
|
</Text>
|
|
<Text style={styles.blurb} variant="text-sm/medium" color="text-default">
|
|
{intl.string(t.FnNud4)}
|
|
</Text>
|
|
<View style={styles.stickersRow}>
|
|
{stateFromStoresArray.map((item) => {
|
|
return <PressableOpacity key={item?.id} accessible={false} onLongPress={() => {
|
|
triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
|
|
setState(item.id);
|
|
}} style={styles.sticker}>
|
|
<EmptyStateSticker sticker={item} isFocused={state === item.id} />
|
|
</PressableOpacity>;
|
|
})}
|
|
</View>
|
|
<View style={styles.premiumButton}>
|
|
<Button icon={<FastImage source={Module9377} style={styles.nitroWheel} resizeMode="contain" />} text={intl.string(t.pj0XBN)} variant="active" size="sm" onPress={() => openStickersPremiumUpsellAlert({
|
|
section: AnalyticsSections.EXPRESSION_PICKER
|
|
})} />
|
|
</View>
|
|
</View>;
|
|
};
|