discord-decomp/modules/virtual_currency/native/BalanceWidgetActionSheet.tsx

// Metro module 9816 (f9817).
import { useRef, useCallback, useContext, useMemo, useEffect } from "react";
import { TouchableOpacity, View } from "react-native";
import { AnalyticEvents, Fonts, HelpdeskArticles } from "../../../Constants";
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
import * as _Module9817 from "../../../_bundle/Module9817";
import * as _Module9818 from "../../../_bundle/Module9818";
import * as _Module9819 from "../../../_bundle/Module9819";
import { intl, t } from "../../../intl/index.native";
import openURL from "../../../lib/openURL";
import HelpdeskUtils from "../../../utils/HelpdeskUtils";
import { AccessibilityPreferencesContext } from "../../../_bundle/Module3908";
import { useToken } from "../../../design/tokens/native/useToken";
import Module712 from "../../../_bundle/Module712";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { UNSAFE_isDismissibleContentDismissed, UNSAFE_markDismissibleContentAsDismissed } from "../../dismissible_content/DismissibleContentUnsafeUtils";
import { DismissibleContent } from "../../../_bundle/Module1358";
import { ThemeContextProvider } from "../../../_bundle/Module3901";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import FastImage from "../../../components_native/common/FastImage";
import { VideoComponent } from "../../../components_native/common/Video";
import { ActionSheetHeaderBar } from "../../../design/components/Sheet/native/ActionSheetHeaderBar.native";
import { CircleQuestionIcon } from "../../../design/components/Icon/native/redesign/generated/CircleQuestionIcon";
import { OrbsIcon } from "../../../design/components/Icon/native/redesign/generated/OrbsIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { Button } from "../../../design/components/Button/native/Button.native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { isAndroid } from "../../../utils/PlatformUtils";
const useStyles = createStyles((a0) => ({
  actions: {
    flex: 1,
    flexDirection: "column",
    gap: Module712.space.PX_12,
    minWidth: "100%",
    paddingTop: Module712.space.PX_12,
    paddingHorizontal: Module712.space.PX_16
  },
  balanceHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: Module712.space.PX_8,
    flexWrap: "wrap"
  },
  balanceText: {
    color: a0,
    fontSize: 36,
    lineHeight: isAndroid() ? 36 : 44,
    textAlignVertical: "center"
  },
  content: {
    width: "100%",
    height: "100%",
    alignItems: "center",
    flex: 1,
    marginBottom: Module712.space.PX_16
  },
  header: {
    width: "100%",
    paddingTop: Module712.space.PX_12,
    paddingBottom: Module712.space.PX_16,
    alignItems: "center",
    position: "relative",
    flexDirection: "column"
  },
  infoIconBackground: {
    width: 32,
    height: 32,
    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
    borderRadius: Module712.radii.round,
    justifyContent: "center",
    alignItems: "center"
  },
  infoIconContainer: {
    position: "absolute",
    left: Module712.space.PX_16,
    top: Module712.space.PX_16,
    zIndex: 10
  },
  promotionalBackground: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    borderRadius: Module712.radii.xl,
    bottom: -100
  },
  promotionalBackgroundContainer: {
    flex: 1,
    height: 428
  },
  promotionalBannerAsset: {
    width: "100%",
    height: "100%"
  },
  promotionalBannerContainer: {
    width: "100%",
    height: 144,
    gap: Module712.space.PX_12,
    marginBottom: Module712.space.PX_64
  },
  promotionalBannerText: {
    color: a0,
    fontFamily: Fonts.PRIMARY_BOLD,
    fontWeight: "600",
    fontSize: 16,
    lineHeight: 20,
    textAlign: "center"
  }
}));
export default (a0) => {
  let balance2 = a0.balance;
  const balance = balance2;
  let themeOverride = a0.themeOverride;
  const { primaryButtonConfig, secondaryButtonConfig, source } = a0;
  const ref = useRef(null);
  const callback = useCallback(() => {
    openURL(HelpdeskUtils.getArticleURL(HelpdeskArticles.ORBS_FAQ));
  }, []);
  const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
  const memo = useMemo(() => {
    let r3 = balance;
    if (balance == null) {
      r3 = 0;
    }
    return r3 > 4100 ? {
      backgroundVideo: _Module9817.default,
      backgroundImage: _Module9818.default,
      bannerImage: _Module9819.default,
      bannerText: intl.string(t.LaMEFL)
    } : null;
  }, [balance]);
  if (themeOverride === void 0 && memo != null) {
    themeOverride = "dark";
  }
  const token = useToken(Module712.colors.MOBILE_TEXT_HEADING_PRIMARY, themeOverride);
  const styles = useStyles(token);
  useEffect(() => {
    AnalyticsUtils.track(AnalyticEvents.ORB_BALANCE_ACTION_SHEET_ACTION, {
      type: "VIEW",
      source,
      balance
    });
    if (!UNSAFE_isDismissibleContentDismissed(DismissibleContent.VIRTUAL_CURRENCY_MOBILE_ONBOARDING_PILL)) {
      UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.VIRTUAL_CURRENCY_MOBILE_ONBOARDING_PILL, {
        dismissAction: ContentDismissActionType.AUTO_DISMISS
      });
    }
  }, []);
  const style = [styles.content, memo != null && memo.backgroundVideo != null && memo.backgroundImage != null && styles.promotionalBackgroundContainer];
  const r85 = [memo != null && memo.backgroundVideo != null && memo.backgroundImage != null && (enabled ? <FastImage source={{
    uri: memo.backgroundImage
  }} style={styles.promotionalBackground} resizeMode="cover" /> : <VideoComponent source={{
    uri: memo.backgroundVideo
  }} poster={memo.backgroundImage} style={styles.promotionalBackground} muted disableFocus pauseWhileAppInactive paused={enabled} posterResizeMode="cover" resizeMode="cover" preventsDisplaySleepDuringVideoPlayback={false} />), <ActionSheetHeaderBar onPress={() => {
    const current = ref.current;
    if (current != null) {
      current.closeActionSheet();
    }
  }} />, <View style={styles.infoIconContainer}>
    <TouchableOpacity onPress={callback} accessibilityRole="link" accessibilityLabel={intl.string(t.B1oJtQ)}>
      <View style={styles.infoIconBackground}>
        <CircleQuestionIcon size="sm" color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} />
      </View>
    </TouchableOpacity>
  </View>, , , ,];
  const r128 = [<OrbsIcon size="lg" color={token} />, ,];
  const props = {
    variant: "display-md",
    style: styles.balanceText,
    accessibilityLabel: intl.formatToPlainString(t.W4DfeF, {
      orbAmount: balance == null ? 0 : balance
    }),
    children: null
  };
  if (balance == null) {
    balance2 = 0;
  }
  props.children = balance2;
  r128[1] = <Text {...props} />;
  r85[3] = <View style={styles.header}>
    <View style={styles.balanceHeader}>{r128}</View>
  </View>;
  r85[4] = memo != null && memo.bannerImage != null && <View style={styles.promotionalBannerContainer}>
    <FastImage source={{
      uri: memo.bannerImage
    }} style={styles.promotionalBannerAsset} resizeMode="contain" />
    {memo.bannerText != null && memo.bannerText !== "" && <Text variant="heading-xl/medium" style={styles.promotionalBannerText}>{memo.bannerText}</Text>}
  </View>;
  r85[5] = <View style={styles.actions}>
    <Button text={primaryButtonConfig.buttonText} variant="primary" size="lg" onPress={primaryButtonConfig.onButtonPress} />
    <Button text={secondaryButtonConfig.buttonText} variant="tertiary" size="lg" onPress={secondaryButtonConfig.onButtonPress} />
  </View>;
  return <ThemeContextProvider theme={themeOverride}>
    <BottomSheet ref={ref} startExpanded handleComponent={() => <View />} handleDisabled={false}>
      <View style={style}>{r85}</View>
    </BottomSheet>
  </ThemeContextProvider>;
};