263 lines
9.3 KiB
TypeScript
263 lines
9.3 KiB
TypeScript
// Metro module 15859 (f15860).
|
||
import { useState, useMemo, useCallback } from "react";
|
||
import { Pressable, View } from "react-native";
|
||
import QuestStore from "../QuestStore";
|
||
import UnenrolledActivityQuestStore from "../UnenrolledActivityQuestStore";
|
||
import { QuestsExperimentLocations } from "../QuestConstants";
|
||
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
||
import Module712 from "../../../_bundle/Module712";
|
||
import * as _Module501 from "../../../_bundle/Module501";
|
||
import { useTheme } from "../../../hooks/useTheme";
|
||
import { isThemeDark } from "../../../design/utils/shared/themes";
|
||
import { useStateFromStores } from "../../../_bundle/Module589";
|
||
import { useGetOrFetchApplication } from "../../applications/useGetOrFetchApplications";
|
||
import { getActivityApplicationId } from "../utils/QuestTaskUtils";
|
||
import { useQuestTaskDetails } from "../hooks/QuestHooks";
|
||
import { useQuestsInstructionsToWinReward } from "../hooks/QuestCopyHooks";
|
||
import { QuestContent } from "../QuestTypes";
|
||
import AvatarUtils from "../../../utils/AvatarUtils";
|
||
import { enrollInQuest, dismissQuestActivityModal, setAutoEnroll } from "../QuestActionCreators";
|
||
import { QuestContentCTA } from "../lib/analytics/AnalyticsTypes";
|
||
import ModalActionCreators from "../../../actions/ModalActionCreators";
|
||
import { useCheckboxA11yNative } from "../../../_bundle/Module3907";
|
||
import { Stack } from "../../../design/components/Stack/native/Stack.native";
|
||
import FastImage from "../../../components_native/common/FastImage";
|
||
import QuestRewardTile from "./QuestRewardTile";
|
||
import { Text } from "../../../design/components/Text/native/Text";
|
||
import { intl, t } from "../../../intl/index.native";
|
||
import { Button } from "../../../design/components/Button/native/Button.native";
|
||
import { FormCheckbox } from "../../../design/components/Forms/native/FormCheckbox.native";
|
||
import { HeaderActionButton } from "../../../design/components/Navigator/native/HeaderActionButton.native";
|
||
import Module7699 from "../../../_bundle/Module7699";
|
||
import { QuestContentImpressionTrackerNative } from "./QuestContentImpressionTracker.native";
|
||
import { Modal } from "../../../design/components/Modal/native/Modal.native";
|
||
import { HermesBuiltin } from "../../../_hermes/prelude";
|
||
let c11350_13, useStyles, CloseButton;
|
||
const QuestActivityUnenrolledModalInner = function QuestActivityUnenrolledModalInner(props) {
|
||
let state, setState, getOrFetchApplication;
|
||
const quest = props.quest;
|
||
state = void 0;
|
||
setState = void 0;
|
||
getOrFetchApplication = void 0;
|
||
const styles = useStyles(isThemeDark(useTheme()));
|
||
[state, setState] = useState(useStateFromStores([UnenrolledActivityQuestStore], () => UnenrolledActivityQuestStore.getState().autoEnroll));
|
||
getOrFetchApplication = useGetOrFetchApplication(getActivityApplicationId(quest));
|
||
const questsInstructionsToWinReward = useQuestsInstructionsToWinReward({
|
||
quest,
|
||
taskDetails: useQuestTaskDetails(quest),
|
||
location: QuestsExperimentLocations.QUEST_ACTIVITY_UNENROLLED_MODAL,
|
||
sourceQuestContent: QuestContent.QUEST_ACTIVITY_UNENROLLED_MODAL
|
||
});
|
||
const memo = useMemo(() => getOrFetchApplication != null ? AvatarUtils.getApplicationIconURL({
|
||
id: getOrFetchApplication.id,
|
||
icon: getOrFetchApplication.icon,
|
||
size: 87
|
||
}) : null, [getOrFetchApplication]);
|
||
const callback = useCallback(async () => {
|
||
let c28168_0;
|
||
c28168_0 = void 0;
|
||
await enrollInQuest(quest.id, {
|
||
questContent: QuestContent.QUEST_ACTIVITY_UNENROLLED_MODAL,
|
||
questContentCTA: QuestContentCTA.START_QUEST,
|
||
sourceQuestContent: QuestContent.QUEST_ACTIVITY_UNENROLLED_MODAL
|
||
});
|
||
ModalActionCreators.pop();
|
||
}, [quest.id]);
|
||
const checkboxA11yNative = useCheckboxA11yNative({
|
||
checked: state
|
||
});
|
||
const { accessibilityRole, accessibilityState } = checkboxA11yNative;
|
||
return <Stack direction="vertical" align="center" justify="center" style={styles.container}>
|
||
<View style={styles.content}>
|
||
<View style={styles.baseShadow}>
|
||
<View style={styles.imagesContainer}>
|
||
{memo != null && <View style={styles.appIconContainer}>
|
||
<FastImage source={{
|
||
uri: memo
|
||
}} style={styles.appIcon} />
|
||
</View>}
|
||
<View style={styles.rewardTileContainer}>
|
||
<QuestRewardTile quest={quest} height={87} width={87} style={styles.questRewardTile} />
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View style={styles.textContainer}>
|
||
<Text variant="heading-xl/bold" color="mobile-text-heading-primary" style={{
|
||
textAlign: "center"
|
||
}}>
|
||
{intl.string(t.IrNgN4)}
|
||
</Text>
|
||
<Text variant="text-sm/normal" color="text-subtle" style={{
|
||
textAlign: "center"
|
||
}}>
|
||
{intl.format(t.V3NSJx, {
|
||
questName: quest.config.messages.questName
|
||
})}
|
||
{" "}
|
||
{questsInstructionsToWinReward}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.footer}>
|
||
<View style={styles.buttonsContainer}>
|
||
<Button size="lg" text={intl.string(t.l7E81v)} onPress={callback} />
|
||
<Button size="lg" text={intl.string(t.fyT2ol)} onPress={function onPress() {
|
||
dismissQuestActivityModal(quest.id);
|
||
ModalActionCreators.pop();
|
||
}} variant="secondary" />
|
||
</View>
|
||
<Pressable accessibilityRole={accessibilityRole} accessibilityLabel={intl.string(t["931n1T"])} accessibilityState={accessibilityState} onPress={() => {
|
||
const r0 = !state;
|
||
setState(r0);
|
||
setAutoEnroll(r0);
|
||
}} style={{
|
||
alignSelf: "center",
|
||
flexDirection: "row",
|
||
alignItems: "center",
|
||
gap: 8
|
||
}}>
|
||
<FormCheckbox checked={state} />
|
||
<Text variant="text-sm/normal" color="text-subtle">
|
||
{intl.string(t["931n1T"])}
|
||
</Text>
|
||
</Pressable>
|
||
</View>
|
||
</Stack>;
|
||
};
|
||
CloseButton = function CloseButton() {
|
||
return <HeaderActionButton source={Module7699} onPress={function onPress() {
|
||
return ModalActionCreators.pop();
|
||
}} accessibilityLabel={intl.string(t.cpT0Cq)} />;
|
||
};
|
||
c11350_13 = {
|
||
MAIN: "main"
|
||
};
|
||
useStyles = createStyles((a0) => {
|
||
let baseShadow;
|
||
const imagesContainer = {
|
||
flexDirection: "row",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
marginBottom: Module712.space.PX_32,
|
||
..._Module501.isIOS() ? a0 ? {
|
||
shadowColor: "rgb(144, 144, 251)",
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 0
|
||
},
|
||
shadowOpacity: 0.6,
|
||
shadowRadius: 85
|
||
} : {} : {
|
||
filter: a0 ? [{
|
||
dropShadow: {
|
||
standardDeviation: "85px",
|
||
color: "rgba(144, 144, 251, 0.65)",
|
||
offsetX: 0,
|
||
offsetY: 0
|
||
}
|
||
}, {
|
||
dropShadow: {
|
||
standardDeviation: "85px",
|
||
color: "rgba(144, 144, 250, 0.41)",
|
||
offsetX: 0,
|
||
offsetY: 0
|
||
}
|
||
}] : []
|
||
}
|
||
};
|
||
const isIOS = _Module501.isIOS();
|
||
const r49 = {};
|
||
if (isIOS) {
|
||
HermesBuiltin.copyDataProperties(r49, a0 ? {
|
||
shadowColor: "rgb(144, 144, 250)",
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 16
|
||
},
|
||
shadowOpacity: 0.4,
|
||
shadowRadius: 85
|
||
} : {});
|
||
baseShadow = r49;
|
||
} else {
|
||
baseShadow = r49;
|
||
}
|
||
return {
|
||
container: {
|
||
flex: 1,
|
||
paddingHorizontal: Module712.space.PX_24,
|
||
paddingVertical: Module712.space.PX_16,
|
||
paddingBottom: Module712.space.PX_48
|
||
},
|
||
content: {
|
||
marginTop: "auto"
|
||
},
|
||
imagesContainer,
|
||
baseShadow,
|
||
appIconContainer: {
|
||
borderRadius: Module712.radii.xl,
|
||
borderWidth: 2.18,
|
||
borderColor: "rgba(151, 151, 159, 0.24)",
|
||
borderStyle: "solid",
|
||
transform: [{
|
||
rotate: "-12.41deg"
|
||
}],
|
||
overflow: "hidden"
|
||
},
|
||
appIcon: {
|
||
width: 87,
|
||
height: 87,
|
||
borderRadius: Module712.radii.xl - 2.18
|
||
},
|
||
rewardTileContainer: {
|
||
borderWidth: 2.18,
|
||
borderColor: "rgba(151, 151, 159, 0.24)",
|
||
borderRadius: Module712.radii.xl,
|
||
borderStyle: "solid",
|
||
transform: [{
|
||
translateX: -10
|
||
}, {
|
||
rotate: "7.81deg"
|
||
}],
|
||
overflow: "hidden"
|
||
},
|
||
questRewardTile: {
|
||
borderRadius: Module712.radii.xl - 2.18
|
||
},
|
||
textContainer: {
|
||
alignItems: "center",
|
||
gap: Module712.space.PX_8
|
||
},
|
||
buttonsContainer: {
|
||
flexDirection: "column",
|
||
gap: Module712.space.PX_8,
|
||
marginBottom: 20
|
||
},
|
||
footer: {
|
||
flexDirection: "column",
|
||
width: "100%",
|
||
marginTop: "auto"
|
||
}
|
||
};
|
||
});
|
||
export default function QuestActivityUnenrolledModal(props) {
|
||
const questId = props.questId;
|
||
const stateFromStores = useStateFromStores([QuestStore], () => QuestStore.getQuest(questId));
|
||
if (stateFromStores == null) {
|
||
return null;
|
||
}
|
||
const screens = {};
|
||
screens[c11350_13.MAIN] = {
|
||
headerLeft: CloseButton,
|
||
headerRight: function headerRight() {
|
||
return null;
|
||
},
|
||
headerTitle: () => <Text variant="redesign/heading-18/bold" color="mobile-text-heading-primary">
|
||
{intl.string(t.l7E81v)}
|
||
</Text>,
|
||
render: () => <QuestContentImpressionTrackerNative questOrQuests={stateFromStores} questContent={QuestContent.QUEST_ACTIVITY_UNENROLLED_MODAL} sourceQuestContent={QuestContent.QUEST_ACTIVITY_UNENROLLED_MODAL}>
|
||
{() => <QuestActivityUnenrolledModalInner quest={stateFromStores} />}
|
||
</QuestContentImpressionTrackerNative>
|
||
};
|
||
return <Modal screens={screens} initialRouteName={c11350_13.MAIN} />;
|
||
};
|