yeet

modules/collectibles/native/FractionalNitroCollectedActionSheet.tsx

@@ -0,0 +1,166 @@
+// Metro module 11907 (f11908).
+import { useMemo, useCallback } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { HelpdeskArticles } from "../../../Constants";
+import { FRACTIONAL_PREMIUM_SKU_INTERVAL_COUNTS, PremiumTypes } from "../../premium/PremiumConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { FractionalNitroCoinIllustration, FRACTIONAL_NITRO_COIN_SIZE } from "./FractionalNitroCoinIllustration";
+import FastImage from "../../../components_native/common/FastImage";
+import Module11908 from "../../../_bundle/Module11908";
+import useTheme from "../../../hooks/useTheme";
+import { useFetchFractionalPremiumInfo } from "../utils/CollectiblesUtils";
+import { isThemeDark } from "../../../design/shared";
+import Module6317 from "../../../_bundle/Module6317";
+import Module6318 from "../../../_bundle/Module6318";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import HelpdeskUtils from "../../../utils/HelpdeskUtils";
+import Linking from "../../../lib/native/Linking";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import PremiumPlanActionSheetHeader from "../../premium/native/PremiumPlanActionSheetHeader";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { CircleQuestionIcon } from "../../../design/components/Icon/native/redesign/generated/CircleQuestionIcon";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { ActionSheetHeaderBar } from "../../../design/components/Sheet/native/ActionSheetHeaderBar.native";
+let useStyles;
+const NitroAcquiredHeader = function NitroAcquiredHeader(props) {
+  const skuId2 = props.skuId;
+  const styles2 = useStyles();
+  return <View style={styles2.header}>
+    <FastImage source={Module11908} />
+    <View style={styles2.fractionNitroIcon}>
+      <FractionalNitroCoinIllustration skuId={skuId2} width={FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET} height={FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET} />
+    </View>
+  </View>;
+};
+useStyles = createStyles({
+  body: {
+    flex: 1,
+    padding: Module712.space.PX_16
+  },
+  content: {
+    flex: 1,
+    gap: Module712.space.PX_16,
+    alignItems: "center"
+  },
+  buttonContainer: {
+    flex: 1,
+    gap: Module712.space.PX_16,
+    alignSelf: "stretch"
+  },
+  description: {
+    textAlign: "center"
+  },
+  header: {
+    height: 112,
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden"
+  },
+  fractionNitroIcon: {
+    width: FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET,
+    height: FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET,
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: [{
+      translateX: -FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET / 2
+    }, {
+      translateY: -FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET / 2
+    }]
+  },
+  questionIconContainer: {
+    position: "absolute",
+    right: Module712.space.PX_16,
+    top: Module712.space.PX_16,
+    width: 32,
+    height: 32,
+    backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT,
+    justifyContent: "center",
+    borderRadius: Module712.radii.lg,
+    alignItems: "center"
+  },
+  questionIcon: {
+    width: 18,
+    height: 18
+  }
+});
+export default function FractionalNitroCollectedActionSheet(props) {
+  let r115, props2;
+  const { skuId, consumed, onPressExplorePerks, onPressViewCredits } = props;
+  const styles = useStyles();
+  const theme = useTheme();
+  let c19264_3 = theme;
+  const fetchFractionalPremiumInfo = useFetchFractionalPremiumInfo();
+  const { isLoading, isFractionalPremiumActive, expiresAt } = fetchFractionalPremiumInfo;
+  const memo = useMemo(() => consumed ? <FastImage source={isThemeDark(c19264_3) ? Module6317 : Module6318} /> : <Text variant="heading-lg/bold" color="text-default">
+    {intl.string(t.g5W1g8)}
+  </Text>, [consumed, theme]);
+  const memo2 = useMemo(() => {
+    let props;
+    const r15 = FRACTIONAL_PREMIUM_SKU_INTERVAL_COUNTS[skuId];
+    let days = r15 == null ? void 0 : r15[1];
+    if (days == null) {
+      days = 3;
+    }
+    const duration = intl.formatToPlainString(t.Cz1G97, {
+      days
+    });
+    const r30 = {
+      variant: "text-md/normal",
+      color: "text-default",
+      style: styles.description,
+      children: null
+    };
+    if (consumed) {
+      r30.children = intl.format(t["93PGOI"], {
+        duration,
+        expirationDate: expiresAt
+      });
+      props = r30;
+    } else {
+      r30.children = isFractionalPremiumActive ? intl.string(t.fBmhE9) : intl.format(t["8fyBPf"], {
+        duration
+      });
+      props = r30;
+    }
+    return <Text {...props} />;
+  }, [skuId, consumed, expiresAt, isFractionalPremiumActive, styles.description]);
+  const r72 = [<>
+    {consumed ? <PremiumPlanActionSheetHeader premiumType={PremiumTypes.TIER_2} /> : <NitroAcquiredHeader skuId={skuId} />}
+    <PressableOpacity style={styles.questionIconContainer} onPress={useCallback(() => {
+      Linking.openURL(HelpdeskUtils.getArticleURL(HelpdeskArticles.FRACTIONAL_PREMIUM_ABOUT));
+    }, [])}>
+      <CircleQuestionIcon style={styles.questionIcon} color={Module712.colors.WHITE} />
+    </PressableOpacity>
+  </>, , ,];
+  if (isLoading) {
+    r115 = <ActivityIndicator size="large" />;
+  } else {
+    const r78 = [memo, memo2, ,];
+    const r84 = {
+      size: "lg",
+      text: null,
+      onPress: null
+    };
+    if (consumed) {
+      r84.text = intl.string(t.ERKK6v);
+      r84.onPress = onPressExplorePerks;
+      props2 = r84;
+    } else {
+      r84.text = intl.string(t["Jr6N+s"]);
+      r84.onPress = onPressViewCredits;
+      props2 = r84;
+    }
+    r78[2] = <View style={styles.buttonContainer}>
+      <Button {...props2} />
+      <Button size="lg" variant="secondary" text={intl.string(t.TkTvBz)} onPress={() => ActionSheetActionCreators.hideActionSheet()} />
+    </View>;
+    r115 = <View style={styles.content}>{r78}</View>;
+  }
+  r72[1] = <View style={styles.body}>{r115}</View>;
+  r72[2] = <ActionSheetHeaderBar variant="floating" />;
+  return <BottomSheet handleDisabled>{r72}</BottomSheet>;
+};