discord-decomp/modules/quests/native/BountiesCtaHeader.tsx

// Metro module 14111 (f14112).
import { useCallback, memo } from "react";
import { View, StyleSheet } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import AdContentSeenStore from "../AdContentSeenStore";
import { BountyCarouselEmptyStateReason, DEFAULT_PLACEHOLDER_ENTRYPOINT_BOUNTY_ID, QuestsExperimentLocations } from "../QuestConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { intl, t } from "../../../intl/index.native";
import { Text } from "../../../design/components/Text/native/Text";
import openBountiesNuxPromoSheet from "./openBountiesNuxPromoSheet";
import { useStateFromStores } from "../../../_bundle/Module589";
import { AdCreativeType } from "../../../_bundle/Module6013";
import { useBountiesExperience } from "../experiments/useBountiesExperience";
import { QuestContent } from "../QuestTypes";
import { trackAdContentClicked } from "../lib/analytics/AnalyticsActions";
import { QuestContentCTA } from "../lib/analytics/AnalyticsTypes";
import BountiesModalActionCreators from "./BountiesModal/BountiesModalActionCreators";
import BountiesBannerBackground from "./BountiesBannerBackground";
import Module14114 from "../../../_bundle/Module14114";
import { NewTag } from "../../../design/void/native";
import { Button } from "../../../design/components/Button/native/Button.native";
import useIsCarouselInView from "./useIsCarouselInView";
import { useBountyCarouselEmptyStateAnalytics } from "../lib/analytics/AnalyticsHooks";
import { ThemeContextProvider } from "../../../_bundle/Module3901";
import { ThemeTypes } from "../../../_bundle/Module6678";
import { QuestContentImpressionTrackerNative } from "./QuestContentImpressionTracker.native";
let useStyles, BountiesCtaHeaderInner;
const BountiesCtaDescription = function BountiesCtaDescription(props) {
  const isEmptyOrCompleted = props.isEmptyOrCompleted;
  const styles = useStyles();
  const r28 = <Text variant="text-sm/medium" color="text-subtle">
    {intl.string(isEmptyOrCompleted ? t.q4wlOE : t.AZGGo1)}
  </Text>;
  const r39 = intl.format(t.fjSvsC, {
    onClick: openBountiesNuxPromoSheet
  });
  return isEmptyOrCompleted ? <Text variant="text-sm/medium">
    {r28}
    {" "}
    {r39}
  </Text> : <View style={styles.description}>
    {r28}
    <Text variant="text-sm/medium">{r39}</Text>
  </View>;
};
BountiesCtaHeaderInner = function BountiesCtaHeaderInner(props) {
  let VIDEO_MODAL_MOBILE;
  const { bounties, isEmptyOrCompleted = false, containerRef: containerRef2 } = props;
  VIDEO_MODAL_MOBILE = void 0;
  const styles = useStyles();
  useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const stateFromStores = useStateFromStores([AdContentSeenStore], () => bounties.some((bounty) => !AdContentSeenStore.hasSeen(AdCreativeType.BOUNTY, bounty.id)), [bounties]);
  VIDEO_MODAL_MOBILE = useBountiesExperience(QuestsExperimentLocations.QUEST_HOME_MOBILE).verticalScrollEnabled ? QuestContent.VIDEO_MODAL_MOBILE : QuestContent.QUEST_HOME_MOBILE_CAROUSEL;
  const callback = useCallback(() => {
    const r5 = bounties[0];
    trackAdContentClicked({
      adContentId: DEFAULT_PLACEHOLDER_ENTRYPOINT_BOUNTY_ID,
      adCreativeType: AdCreativeType.BOUNTY,
      questContent: QuestContent.QUEST_HOME_ENTRYPOINT_MOBILE,
      questContentCTA: QuestContentCTA.START_BOUNTY,
      sourceQuestContent: QuestContent.QUEST_HOME_ENTRYPOINT_MOBILE,
      questContentPosition: 0
    });
    BountiesModalActionCreators.showModal({
      bountyId: r5.id,
      sourceQuestContent: VIDEO_MODAL_MOBILE
    });
  }, [bounties, VIDEO_MODAL_MOBILE]);
  return <View ref={containerRef2} style={styles.container}>
    <BountiesBannerBackground uri={Module14114} style={[styles.header, styles.headerRoundedBottom]}>
      {stateFromStores && <NewTag variant="text-xs/bold" containerStyle={styles.newPill} textStyle={styles.newPillText} />}
      <View style={styles.headerTextBox}>
        <Text variant="text-lg/semibold" color="text-strong">
          {intl.string(t.qetVDw)}
        </Text>
        <BountiesCtaDescription isEmptyOrCompleted={isEmptyOrCompleted} />
        {isEmptyOrCompleted ? !isEmptyOrCompleted : <Button grow size="md" variant="primary-overlay" text={intl.string(t["1kkbKw"])} onPress={callback} />}
      </View>
    </BountiesBannerBackground>
    {false}
  </View>;
};
StyleSheet;
useStyles = createStyles(() => ({
  container: {
    width: "100%",
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderWidth: 1,
    borderColor: Module712.colors.BORDER_MUTED,
    borderBottomLeftRadius: Module712.radii.xxl,
    borderBottomRightRadius: Module712.radii.xxl,
    overflow: "hidden"
  },
  header: {
    width: "100%",
    minHeight: 296,
    justifyContent: "flex-end",
    overflow: "hidden",
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  },
  headerRoundedBottom: {
    borderBottomLeftRadius: Module712.radii.xxl,
    borderBottomRightRadius: Module712.radii.xxl
  },
  newPill: {
    position: "absolute",
    top: Module712.space.PX_12,
    left: Module712.space.PX_12,
    zIndex: 1,
    backgroundColor: Module712.colors.CONTROL_OVERLAY_PRIMARY_BACKGROUND_DEFAULT,
    borderRadius: Module712.radii.round,
    paddingHorizontal: Module712.space.PX_8,
    paddingVertical: Module712.space.PX_4
  },
  newPillText: {
    color: Module712.colors.CONTROL_OVERLAY_PRIMARY_TEXT_DEFAULT
  },
  headerTextBox: {
    paddingBottom: Module712.space.PX_24,
    paddingHorizontal: Module712.space.PX_20,
    gap: Module712.space.PX_8
  },
  description: {
    marginBottom: 16
  },
  bottomSection: {
    width: "100%",
    overflow: "hidden",
    borderBottomLeftRadius: Module712.radii.xl,
    borderBottomRightRadius: Module712.radii.xl
  },
  bottomContent: {
    paddingBottom: 24,
    paddingHorizontal: 20,
    gap: Module712.space.PX_12
  },
  placeholderCards: {
    alignSelf: "stretch",
    height: 160,
    borderRadius: Module712.radii.md,
    backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT
  }
}));
const r41 = memo(function BountiesCtaHeader(props) {
  let c20918_0 = props;
  const isCarouselInView = useIsCarouselInView();
  const { containerRef, isInView } = isCarouselInView;
  const { bounties: bounties2, isEmptyOrCompleted = false } = props;
  useBountyCarouselEmptyStateAnalytics(isEmptyOrCompleted ? bounties2.length === 0 ? BountyCarouselEmptyStateReason.EMPTY : BountyCarouselEmptyStateReason.COMPLETED : null);
  return <ThemeContextProvider theme={ThemeTypes.DARKER}>
    {isEmptyOrCompleted ? <BountiesCtaHeaderInner {...props} containerRef={containerRef} /> : <QuestContentImpressionTrackerNative adContentId={DEFAULT_PLACEHOLDER_ENTRYPOINT_BOUNTY_ID} adCreativeType={AdCreativeType.BOUNTY} questContent={QuestContent.QUEST_HOME_ENTRYPOINT_MOBILE} questContentPosition={0} overrideVisibility={isInView} sourceQuestContent={QuestContent.QUEST_HOME_ENTRYPOINT_MOBILE}>
      {() => <BountiesCtaHeaderInner {...c20918_0} containerRef={containerRef} />}
    </QuestContentImpressionTrackerNative>}
  </ThemeContextProvider>;
});
export default r41;