317 lines
15 KiB
TypeScript
317 lines
15 KiB
TypeScript
// Metro module 14146 (f14147).
|
|
import { useMemo, useCallback, useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import AccessibilityStore from "../../../a11y/AccessibilityStore";
|
|
import UserStore from "../../../../stores/UserStore";
|
|
import QuestStore from "../../QuestStore";
|
|
import { ACTION_SHEET_MINIMUM_BOTTOM_PADDING } from "../../../action_sheet/native/ActionSheetConstants";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import { QuestContent, TaskPlatformScreen } from "../../QuestTypes";
|
|
import { useProgressState, QuestProgressState, useQuestTaskDetails, useIsQuestProgressing, useTaskPlatformScreen, useConnectedAccounts } from "../../hooks/QuestHooks";
|
|
import * as _QuestRewardUtils from "../../utils/QuestRewardUtils";
|
|
import { getDefaultReward } from "../../utils/QuestCopyUtils";
|
|
import { useFetchCollectiblesProduct } from "../../../collectibles/hooks/useFetchCollectiblesProduct";
|
|
import { useStateFromStoresObject, useStateFromStores } from "../../../../_bundle/Module589";
|
|
import { useToken } from "../../../../design/tokens/native/useToken";
|
|
import tinycolor from "../../../../_bundle/tinycolor";
|
|
import { handleRewardClaimThenView, getPrimaryCtaIcon } from "../QuestUtils.native";
|
|
import { useWatchTaskPressHandler, useMobileActivityPressHandler } from "./QuestBottomSheetHooks";
|
|
import { Button } from "../../../../design/components/Button/native/Button.native";
|
|
import { getVideoQuestWatchCtaText } from "../../utils/MobileQuestVideoWatchCtaCopy";
|
|
import { supportedConsoles } from "../../utils/QuestPlatformUtils";
|
|
import { useHasWatchVideoOnMobileTasks, useMobileActivityQuest } from "../QuestHooks.native";
|
|
import { usePrimaryCtaCopy } from "../../hooks/QuestCopyHooks";
|
|
import { QuestBottomSheetStep } from "./QuestBottomSheet";
|
|
import { IconButton } from "../../../../design/components/Button/native/IconButton.native";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import { ArrowLargeLeftIcon } from "../../../../design/components/Icon/native/redesign/generated/ArrowLargeLeftIcon";
|
|
import { useTrackQuestContentClickedWithImpression } from "../../lib/analytics/AnalyticsHooks";
|
|
import { useQuestImpressionId } from "../../lib/analytics/ContentImpressionTrackerHooks";
|
|
import { RefreshIcon } from "../../../../design/components/Icon/native/redesign/generated/RefreshIcon";
|
|
import { shouldMigrateToAdAnalyticsInterface, AdAnalyticsInterfaceExperimentStep } from "../../experiments/AdAnalyticsInterfaceExperiment";
|
|
import { captureAdUserAction } from "../../../ads/analytics/captureAdUserAction";
|
|
import { AdUserActionType } from "../../../ads/analytics/captureAdUserActionTypes";
|
|
import { AdCreativeType } from "../../../../_bundle/Module6013";
|
|
import { QuestContentCTA } from "../../lib/analytics/AnalyticsTypes";
|
|
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
|
|
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
|
|
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
|
|
import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
|
|
import { LARGE_BUTTON_HEIGHT } from "../../../../design/components/Button/native/ButtonConstants.native";
|
|
let PX_16, useStyles, WatchTaskButton, NextButton, DefibButton, ClaimButton, __initData, __initData2, AnimatedFooter;
|
|
const useQuestRewardClaimHandler = function useQuestRewardClaimHandler(a0) {
|
|
let product, isFetching, isFetchingRewardCode, stateFromStores, stateFromStores2;
|
|
const { quest, hideActionSheet: hideActionSheet2 = true } = a0;
|
|
const hideActionSheet = hideActionSheet2;
|
|
let questContent = a0.questContent;
|
|
if (questContent === void 0) {
|
|
questContent = QuestContent.QUEST_BOTTOM_SHEET;
|
|
}
|
|
const QUEST_BOTTOM_SHEET = questContent;
|
|
const { onSuccess, sourceQuestContent } = a0;
|
|
product = void 0;
|
|
isFetching = void 0;
|
|
isFetchingRewardCode = void 0;
|
|
stateFromStores = void 0;
|
|
stateFromStores2 = void 0;
|
|
const progressState = useProgressState(quest);
|
|
const hasCollectiblesQuestReward = _QuestRewardUtils.hasCollectiblesQuestReward(quest.config);
|
|
const memo = useMemo(() => getDefaultReward(quest.config).skuId, [quest.config]);
|
|
const fetchCollectiblesProduct = useFetchCollectiblesProduct(progressState === QuestProgressState.COMPLETED ? hasCollectiblesQuestReward ? memo : null : null);
|
|
product = fetchCollectiblesProduct.product;
|
|
isFetching = fetchCollectiblesProduct.isFetching;
|
|
const stateFromStoresObject = useStateFromStoresObject([QuestStore], () => ({
|
|
isFetchingRewardCode: QuestStore.isFetchingRewardCode(quest.id),
|
|
isClaimingReward: QuestStore.isClaimingReward(quest.id)
|
|
}));
|
|
const isClaimingReward = stateFromStoresObject.isClaimingReward;
|
|
isFetchingRewardCode = stateFromStoresObject.isFetchingRewardCode;
|
|
stateFromStores = useStateFromStores([UserStore], () => {
|
|
const currentUser = UserStore.getCurrentUser();
|
|
return currentUser == null ? void 0 : currentUser.hasVerifiedEmailOrPhone();
|
|
});
|
|
stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getCurrentUser()?.verified);
|
|
const memo2 = useMemo(() => {
|
|
let r0 = isFetching;
|
|
if (!isFetching) {
|
|
r0 = isFetchingRewardCode;
|
|
}
|
|
return r0;
|
|
}, [isFetching, isFetchingRewardCode]);
|
|
const token = useToken(Module712.colors.BACKGROUND_BASE_LOWER);
|
|
const token2 = useToken(Module712.colors.BACKGROUND_BASE_LOW);
|
|
const token3 = useToken(Module712.colors.BACKGROUND_BASE_LOWEST);
|
|
if (product != null) {
|
|
let buttonColors = product.styles?.buttonColors;
|
|
if (buttonColors == null) {
|
|
buttonColors = [];
|
|
}
|
|
let confettiColors = product.styles?.confettiColors;
|
|
if (confettiColors == null) {
|
|
confettiColors = [];
|
|
}
|
|
product.styles = {
|
|
buttonColors,
|
|
confettiColors,
|
|
backgroundColors: [tinycolor(token2), tinycolor(token), tinycolor(token3)]
|
|
};
|
|
}
|
|
return {
|
|
isLoading: memo2,
|
|
isClaiming: isClaimingReward,
|
|
claim: useCallback(() => handleRewardClaimThenView({
|
|
quest,
|
|
product,
|
|
hideActionSheet,
|
|
questContent: QUEST_BOTTOM_SHEET,
|
|
currentUserHasVerifiedEmailOrPhone: stateFromStores,
|
|
currentUserHasVerifiedEmail: stateFromStores2,
|
|
onSuccess,
|
|
sourceQuestContent
|
|
}), [quest, product, stateFromStores, stateFromStores2, hideActionSheet, QUEST_BOTTOM_SHEET, onSuccess, sourceQuestContent])
|
|
};
|
|
};
|
|
WatchTaskButton = function WatchTaskButton(props) {
|
|
const { questId: questId3, sourceQuestContent: sourceQuestContent4, taskDetails } = props;
|
|
return <Button grow size="lg" onPress={useWatchTaskPressHandler({
|
|
questId: questId3,
|
|
sourceQuestContent: sourceQuestContent4
|
|
})} text={getVideoQuestWatchCtaText(taskDetails)} />;
|
|
};
|
|
NextButton = function NextButton(props) {
|
|
return <Button grow size="lg" onPress={props.onPress} disabled={props.disabled} text={intl.string(t.a9OfTN)} />;
|
|
};
|
|
DefibButton = function DefibButton(props) {
|
|
const { questId, loading, disabled, onPress: onPress2, sourceQuestContent: sourceQuestContent2 } = props;
|
|
const trackQuestContentClickedWithImpression = useTrackQuestContentClickedWithImpression();
|
|
const questImpressionId = useQuestImpressionId();
|
|
return <Button grow size="lg" variant="secondary" loading={loading} disabled={disabled} icon={<RefreshIcon />} iconPosition="end" onPress={function onPress(event) {
|
|
if (shouldMigrateToAdAnalyticsInterface(AdAnalyticsInterfaceExperimentStep.STEP_2_CLICKED_INTERNAL, "quest_bottom_sheet_footer")) {
|
|
captureAdUserAction({
|
|
type: AdUserActionType.CLICK_INTERNAL,
|
|
adCreativeType: AdCreativeType.QUEST,
|
|
adCreativeId: questId,
|
|
questContentCTA: QuestContentCTA.DEFIBRILLATOR,
|
|
surfaceId: QuestContent.QUEST_BOTTOM_SHEET,
|
|
sourceQuestContent: sourceQuestContent2,
|
|
impressionId: questImpressionId
|
|
});
|
|
} else {
|
|
trackQuestContentClickedWithImpression({
|
|
questId,
|
|
questContent: QuestContent.QUEST_BOTTOM_SHEET,
|
|
questContentCTA: QuestContentCTA.DEFIBRILLATOR,
|
|
sourceQuestContent: sourceQuestContent2
|
|
});
|
|
}
|
|
if (onPress2 != null) {
|
|
onPress2(event);
|
|
}
|
|
}} text={intl.string(t.nPThNb)} />;
|
|
};
|
|
ClaimButton = function ClaimButton(props) {
|
|
const { questId: questId2, disabled, loading, onPress: onPress3, sourceQuestContent: sourceQuestContent3 } = props;
|
|
const trackQuestContentClickedWithImpression2 = useTrackQuestContentClickedWithImpression();
|
|
const questImpressionId2 = useQuestImpressionId();
|
|
return <Button grow size="lg" disabled={disabled} loading={loading} onPress={function onPress() {
|
|
if (shouldMigrateToAdAnalyticsInterface(AdAnalyticsInterfaceExperimentStep.STEP_2_CLICKED_INTERNAL, "quest_bottom_sheet_footer")) {
|
|
captureAdUserAction({
|
|
type: AdUserActionType.CLICK_INTERNAL,
|
|
adCreativeType: AdCreativeType.QUEST,
|
|
adCreativeId: questId2,
|
|
questContentCTA: QuestContentCTA.CLAIM_REWARD,
|
|
surfaceId: QuestContent.QUEST_BOTTOM_SHEET,
|
|
sourceQuestContent: sourceQuestContent3,
|
|
impressionId: questImpressionId2
|
|
});
|
|
} else {
|
|
trackQuestContentClickedWithImpression2({
|
|
questId: questId2,
|
|
questContent: QuestContent.QUEST_BOTTOM_SHEET,
|
|
questContentCTA: QuestContentCTA.CLAIM_REWARD,
|
|
sourceQuestContent: sourceQuestContent3
|
|
});
|
|
}
|
|
onPress3();
|
|
}} text={intl.string(t.cfY4PE)} />;
|
|
};
|
|
AnimatedFooter = function AnimatedFooter(props) {
|
|
const { onLayout, ctaButton, backButton, style } = props;
|
|
let withSafeArea = props.withSafeArea;
|
|
if (withSafeArea === void 0) {
|
|
withSafeArea = true;
|
|
}
|
|
let sharedValue;
|
|
sharedValue = void 0;
|
|
const r25 = backButton != null && backButton !== false;
|
|
let c20949_0 = r25;
|
|
const bottom = useSafeAreaInsets_native().bottom;
|
|
const styles = useStyles();
|
|
const width = useWindowDimensions_native().width;
|
|
const stateFromStores3 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
sharedValue = useSharedValue(r25 ? 1 : 0);
|
|
useEffect(() => {
|
|
sharedValue.set(withTiming(c20949_0 ? 1 : 0, {
|
|
duration: stateFromStores3 ? 0 : 200
|
|
}));
|
|
}, [r25, stateFromStores3, sharedValue]);
|
|
const y = () => ({
|
|
opacity: sharedValue.get(),
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
transform: [{
|
|
translateX: PX_16
|
|
}]
|
|
});
|
|
y.__closure = {
|
|
animation: sharedValue,
|
|
H_PADDING_PX: PX_16
|
|
};
|
|
y.__workletHash = 7564903336036;
|
|
y.__initData = __initData;
|
|
const animatedStyle = useAnimatedStyle(y);
|
|
const B = () => ({
|
|
width: _ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [width - 2 * PX_16, width - 2.5 * PX_16 - LARGE_BUTTON_HEIGHT]),
|
|
alignSelf: "flex-end"
|
|
});
|
|
B.__closure = {
|
|
interpolate: _ReanimatedRexport.interpolate,
|
|
animation: sharedValue,
|
|
windowWidth: width,
|
|
H_PADDING_PX: PX_16,
|
|
ICON_SIZE_PX: LARGE_BUTTON_HEIGHT
|
|
};
|
|
B.__workletHash = 9095621288509;
|
|
B.__initData = __initData2;
|
|
const animatedStyle2 = useAnimatedStyle(B);
|
|
const paddingBottom = Math.max(bottom, ACTION_SHEET_MINIMUM_BOTTOM_PADDING);
|
|
const style2 = [styles.container, , ,];
|
|
if (withSafeArea) {
|
|
withSafeArea = {
|
|
paddingBottom
|
|
};
|
|
}
|
|
style2[1] = withSafeArea;
|
|
style2[2] = style;
|
|
return <View style={style2} onLayout={onLayout}>
|
|
<ReanimatedRexport.View style={animatedStyle}>{backButton}</ReanimatedRexport.View>
|
|
<ReanimatedRexport.View style={animatedStyle2}>{ctaButton}</ReanimatedRexport.View>
|
|
</View>;
|
|
};
|
|
PX_16 = Module712.space.PX_16;
|
|
useStyles = createStyles({
|
|
container: {
|
|
display: "flex",
|
|
flexGrow: 1,
|
|
flexShrink: 1,
|
|
paddingHorizontal: Module712.space.PX_16
|
|
}
|
|
});
|
|
__initData = {
|
|
code: "function QuestBottomSheetFooterTsx1(){const{animation,H_PADDING_PX}=this.__closure;return{opacity:animation.get(),position:'absolute',top:0,left:0,transform:[{translateX:H_PADDING_PX}]};}"
|
|
};
|
|
__initData2 = {
|
|
code: "function QuestBottomSheetFooterTsx2(){const{interpolate,animation,windowWidth,H_PADDING_PX,ICON_SIZE_PX}=this.__closure;return{width:interpolate(animation.get(),[0,1],[windowWidth-H_PADDING_PX*2,windowWidth-H_PADDING_PX*2.5-ICON_SIZE_PX]),alignSelf:'flex-end'};}"
|
|
};
|
|
export default function QuestBottomSheetFooter(props) {
|
|
let r101, ctaButton;
|
|
const { quest: quest2, onLayout, step, isDefibrilating = false, onConnectConsoleNext, onBack, onDefib, style, withSafeArea, sourceQuestContent: sourceQuestContent4 } = props;
|
|
const questRewardClaimHandler = useQuestRewardClaimHandler({
|
|
quest: quest2,
|
|
sourceQuestContent: sourceQuestContent4
|
|
});
|
|
const questTaskDetails = useQuestTaskDetails(quest2);
|
|
const isQuestProgressing = useIsQuestProgressing(quest2);
|
|
const [r28] = useTaskPlatformScreen(quest2, questTaskDetails);
|
|
const xboxAndPlaystationAccounts = useConnectedAccounts().xboxAndPlaystationAccounts;
|
|
const memo = useMemo(() => supportedConsoles(quest2).filter((c30707_0) => xboxAndPlaystationAccounts.find((xboxAndPlaystationAccount) => xboxAndPlaystationAccount.type === c30707_0) != null), [quest2, xboxAndPlaystationAccounts]);
|
|
const hasWatchVideoOnMobileTasks = useHasWatchVideoOnMobileTasks(quest2.config);
|
|
const mobileActivityQuest = useMobileActivityQuest(quest2);
|
|
const { isMobileActivityQuest, launchMobileActivity } = mobileActivityQuest;
|
|
const primaryCtaCopy = usePrimaryCtaCopy({
|
|
quest: quest2,
|
|
application: mobileActivityQuest.questApplication
|
|
});
|
|
const mobileActivityPressHandler = useMobileActivityPressHandler({
|
|
questId: quest2.id,
|
|
sourceQuestContent: sourceQuestContent4,
|
|
launchMobileActivity
|
|
});
|
|
const r4 = quest2.userStatus?.completedAt != null;
|
|
const disabled = quest2.userStatus?.claimedAt != null;
|
|
const TASK_SELECT = QuestBottomSheetStep.TASK_SELECT;
|
|
let r82 = null;
|
|
if (step !== TASK_SELECT) {
|
|
if (QuestBottomSheetStep.CONSOLE_CONNECT === step) {
|
|
ctaButton = <NextButton onPress={onConnectConsoleNext} disabled={memo.length === 0} />;
|
|
} else {
|
|
const TASK_STATUS = QuestBottomSheetStep.TASK_STATUS;
|
|
ctaButton = null;
|
|
if (TASK_STATUS === step) {
|
|
L24: {
|
|
if (r4) {
|
|
r101 = <ClaimButton questId={quest2.id} onPress={questRewardClaimHandler.claim} disabled={disabled} loading={questRewardClaimHandler.isLoading || questRewardClaimHandler.isClaiming} sourceQuestContent={sourceQuestContent4} />;
|
|
} else if (hasWatchVideoOnMobileTasks) {
|
|
r101 = <WatchTaskButton questId={quest2.id} taskDetails={questTaskDetails} sourceQuestContent={sourceQuestContent4} />;
|
|
} else if (isMobileActivityQuest) {
|
|
r101 = <Button grow size="lg" onPress={mobileActivityPressHandler} text={primaryCtaCopy} icon={getPrimaryCtaIcon(quest2)} />;
|
|
} else {
|
|
if (r28 === TaskPlatformScreen.CONSOLE && !isQuestProgressing) {
|
|
r101 = <DefibButton questId={quest2.id} loading={isDefibrilating} disabled={isDefibrilating} onPress={onDefib} sourceQuestContent={sourceQuestContent4} />;
|
|
break L24;
|
|
}
|
|
r101 = <ClaimButton questId={quest2.id} onPress={questRewardClaimHandler.claim} disabled sourceQuestContent={sourceQuestContent4} />;
|
|
}
|
|
}
|
|
ctaButton = r101;
|
|
}
|
|
}
|
|
r82 = <AnimatedFooter onLayout={onLayout} ctaButton={ctaButton} backButton={onBack != null && <IconButton accessibilityLabel={intl.string(t["13/7kX"])} variant="secondary" icon={<ArrowLargeLeftIcon />} onPress={onBack} size="lg" />} style={style} withSafeArea={withSafeArea} />;
|
|
}
|
|
return r82;
|
|
};
|
|
export { useQuestRewardClaimHandler };
|