discord-decomp/modules/quests/native/QuestDock/QuestDockUnenrolledBody.tsx

// Metro module 14216 (f14217).
import { memo, useContext, useCallback } from "react";
import { View } from "react-native";
import QuestStore from "../../QuestStore";
import QuestDockStore from "./QuestDockStore";
import { QuestDockMode, QuestsExperimentLocations } from "../../QuestConstants";
import { QUEST_DOCK_EXPANDED_PADDING_BOTTOM, QUEST_DOCK_EXPANDED_PADDING_HORIZONTAL } from "./QuestDockConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import QuestDockContext from "./QuestDockContext";
import { useStateFromStores } from "../../../../_bundle/defaultAreStatesEqual";
import { useHasWatchVideoOnMobileTasks, useMobileActivityQuest } from "../QuestHooks.native";
import { useQuestTaskDetails, useShouldShowBonusOrbsUX } from "../../hooks/QuestHooks";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { useQuestOrbMultiplierEligibility } from "../../hooks/QuestOrbMultiplierHooks";
import { QuestOrbMultiplierEligibilityType } from "../../utils/QuestOrbMultiplierUtils";
import { QuestDockExternalCoordinationContext } from "./QuestDockExternalCoordinationContext";
import { enrollInQuest } from "../../QuestActionCreators";
import { QuestContentCTA } from "../../lib/analytics/AnalyticsTypes";
import { QuestContent } from "../../QuestTypes";
import openVideoQuestModal from "../VideoQuestModal/openVideoQuestModal";
import { usePrimaryCtaCopy, useQuestsInstructionsToWinReward } from "../../hooks/QuestCopyHooks";
import PremiumRewardGradient from "../PremiumRewardGradient";
import QuestDockBlurredContentBackground from "./QuestDockBlurredContentBackground";
import QuestRewardTile from "../QuestRewardTile";
import { QuestOrbMultiplierPerkPill } from "../QuestOrbMultiplierPerkPill";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { ShinyButton } from "../../../../design/void/native";
import { getPrimaryCtaIcon } from "../QuestUtils.native";
const useStyles = createStyles({
  wrapper: {
    flexGrow: 1,
    flexShrink: 0,
    justifyContent: "flex-end",
    paddingHorizontal: QUEST_DOCK_EXPANDED_PADDING_HORIZONTAL,
    paddingBottom: QUEST_DOCK_EXPANDED_PADDING_BOTTOM
  },
  rewardContentWrapper: {
    borderRadius: Module712.modules.mobile.QUEST_DOCK_BORDER_RADIUS,
    overflow: "hidden",
    padding: 8,
    paddingRight: 16
  },
  rewardContent: {
    alignItems: "center",
    flexDirection: "row",
    gap: 16
  },
  rewardContentCopy: {
    flexGrow: 1,
    flexShrink: 1,
    gap: 4
  },
  premiumRewardPerkPill: {
    alignSelf: "flex-start"
  },
  titleRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_8,
    flexWrap: "wrap"
  },
  questDockRewardTile: {
    borderRadius: Module712.radii.lg
  },
  questDockCtaWrapper: {
    marginTop: 12,
    paddingHorizontal: 4,
    paddingTop: 16,
    position: "relative"
  },
  questDockCta: {
    borderRadius: Module712.radii.round
  },
  questDockCtaRow: {
    alignSelf: "stretch"
  },
  questDockCtaSaparator: {
    position: "absolute",
    left: -12,
    right: -12,
    top: 0,
    backgroundColor: Module712.colors.BORDER_SUBTLE,
    height: 1,
    opacity: 1
  }
});
const r75 = memo(function QuestDockUnenrolledBody() {
  let hasWatchVideoOnMobileTasks, isMobileActivityQuest, launchMobileActivity, setRestingQuestDockMode;
  const context = useContext(QuestDockContext);
  const { isRendered, quest } = context;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([QuestDockStore], () => QuestDockStore.prevRestingQuestDockMode === QuestDockMode.EXPANDED);
  const stateFromStores2 = useStateFromStores([QuestStore], () => QuestStore.isEnrolling(quest.id));
  hasWatchVideoOnMobileTasks = useHasWatchVideoOnMobileTasks(quest.config);
  const questTaskDetails = useQuestTaskDetails(quest);
  const mobileActivityQuest = useMobileActivityQuest(quest);
  isMobileActivityQuest = mobileActivityQuest.isMobileActivityQuest;
  const questApplication = mobileActivityQuest.questApplication;
  launchMobileActivity = mobileActivityQuest.launchMobileActivity;
  const bottom = useSafeAreaInsets_native().bottom;
  const questOrbMultiplierEligibility = useQuestOrbMultiplierEligibility();
  const shouldShowBonusOrbsUX = useShouldShowBonusOrbsUX(quest, questOrbMultiplierEligibility);
  const visible = shouldShowBonusOrbsUX ? questOrbMultiplierEligibility === QuestOrbMultiplierEligibilityType.NITRO : shouldShowBonusOrbsUX;
  setRestingQuestDockMode = useContext(QuestDockExternalCoordinationContext).setRestingQuestDockMode;
  const callback = useCallback(async () => {
    let c27701_0;
    c27701_0 = void 0;
    await enrollInQuest(quest.id, {
      questContentCTA: QuestContentCTA.ACCEPT_QUEST,
      questContent: QuestContent.QUEST_BAR_MOBILE,
      sourceQuestContent: QuestContent.QUEST_BAR_MOBILE
    });
    if (isMobileActivityQuest) {
      await (0, launchMobileActivity)();
      (0, setRestingQuestDockMode)(QuestDockMode.COLLAPSED);
    } else if (hasWatchVideoOnMobileTasks) {
      openVideoQuestModal({
        questId: quest.id,
        sourceQuestContent: QuestContent.QUEST_BAR_MOBILE
      });
      (0, setRestingQuestDockMode)(QuestDockMode.COLLAPSED);
    }
  }, [quest.id, hasWatchVideoOnMobileTasks, setRestingQuestDockMode, isMobileActivityQuest, launchMobileActivity]);
  const primaryCtaCopy = usePrimaryCtaCopy({
    quest,
    application: questApplication,
    shortText: true
  });
  const questsInstructionsToWinReward = useQuestsInstructionsToWinReward({
    quest,
    location: QuestsExperimentLocations.QUESTS_BAR_MOBILE,
    taskDetails: questTaskDetails,
    sourceQuestContent: QuestContent.QUEST_BAR_MOBILE
  });
  return <PremiumRewardGradient visible={visible} glow style={[styles.wrapper, {
    paddingBottom: Math.max(bottom, QUEST_DOCK_EXPANDED_PADDING_BOTTOM)
  }]}>
    <View style={styles.rewardContentWrapper}>
      <QuestDockBlurredContentBackground />
      <View style={styles.rewardContent}>
        <QuestRewardTile paused={stateFromStores ? !isRendered : !stateFromStores} height={80} width={80} quest={quest} style={styles.questDockRewardTile} withAnimation={stateFromStores && isRendered} />
        <View style={styles.rewardContentCopy}>
          {shouldShowBonusOrbsUX && <View style={styles.premiumRewardPerkPill}>
            <QuestOrbMultiplierPerkPill questId={quest.config.id} orbMultiplierEligibility={questOrbMultiplierEligibility} />
          </View>}
          <View style={styles.titleRow}>
            <Text variant="heading-md/medium" color="mobile-text-heading-primary">
              {intl.format(t.EQa7os, {
                questName: quest.config.messages.questName
              })}
            </Text>
          </View>
          <Text color="text-default" variant="text-sm/normal">{questsInstructionsToWinReward}</Text>
        </View>
      </View>
    </View>
    <View style={styles.questDockCtaWrapper}>
      <View style={styles.questDockCtaSaparator} />
      <View style={styles.questDockCtaRow}>
        <ShinyButton style={styles.questDockCta} onPress={callback} loading={stateFromStores2} renderIcon={() => getPrimaryCtaIcon(quest, true)} text={primaryCtaCopy} shineDisabled={!stateFromStores} />
      </View>
    </View>
  </PremiumRewardGradient>;
});
export default r75;