172 lines
7.4 KiB
TypeScript
172 lines
7.4 KiB
TypeScript
// Metro module 10964 (f10965).
|
|
import { useEffect, useMemo, useCallback } from "react";
|
|
import { ActivityIndicator, View } from "react-native";
|
|
import QuestStore from "../QuestStore";
|
|
import { REWARD_CODE_PLACEHOLDER } from "../QuestConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
|
|
import { useStateFromStoresObject, useStateFromStores } from "../../../_bundle/Module589";
|
|
import { useClaimOrFetchRewardCode, useClaimRewardCodePrimaryCtaClickHandler } from "../hooks/RewardCodeClaimHooks";
|
|
import ToastActionCreators from "../../toast/native/ToastActionCreators";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import Module9172 from "../../../_bundle/Module9172";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import * as _QuestRewardUtils from "../utils/QuestRewardUtils";
|
|
import { getRewardCodeQuestReward } from "../utils/QuestRewardUtils";
|
|
import { copy } from "../../../utils/ClipboardUtils.native";
|
|
import { CopyIcon } from "../../../design/components/Icon/native/redesign/generated/CopyIcon";
|
|
import { getRewardCodeRedemptionInstructions } from "../hooks/QuestCopyHooks";
|
|
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
|
|
import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import MarkupUtils from "../../markup/MarkupUtils";
|
|
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
|
|
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import { QuestContentImpressionTrackerNative } from "./QuestContentImpressionTracker.native";
|
|
let useStyles;
|
|
const QuestRewardCodeClaimBottomSheet = function QuestRewardCodeClaimBottomSheet(props) {
|
|
let rewardCode, hasError, isTieredRewardCodeQuest, memo;
|
|
const { quest, questContent: questContent2, questContentPosition: questContentPosition2, sourceQuestContent: sourceQuestContent2 } = props;
|
|
rewardCode = void 0;
|
|
hasError = void 0;
|
|
isTieredRewardCodeQuest = void 0;
|
|
memo = void 0;
|
|
const styles = useStyles(useSafeAreaInsets_native().bottom);
|
|
const stateFromStoresObject = useStateFromStoresObject([QuestStore], () => ({
|
|
rewardCode: QuestStore.getRewardCode(quest.id),
|
|
isFetchingRewardCode: QuestStore.isFetchingRewardCode(quest.id),
|
|
isClaimingReward: QuestStore.isClaimingReward(quest.id)
|
|
}));
|
|
rewardCode = stateFromStoresObject.rewardCode;
|
|
let isFetchingRewardCode = stateFromStoresObject.isFetchingRewardCode;
|
|
const isClaimingReward = stateFromStoresObject.isClaimingReward;
|
|
const claimOrFetchRewardCode = useClaimOrFetchRewardCode({
|
|
isClaimingReward,
|
|
isFetchingRewardCode,
|
|
quest,
|
|
questContent: questContent2,
|
|
rewardCode
|
|
});
|
|
const { claimCode, fetchCode } = claimOrFetchRewardCode;
|
|
hasError = claimOrFetchRewardCode.hasError;
|
|
useEffect(() => {
|
|
if (hasError) {
|
|
ToastActionCreators.open({
|
|
key: "CLAIM_QUEST_REWARD_ERROR",
|
|
content: intl.string(t.CKsXk3),
|
|
icon: Module9172
|
|
});
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
}
|
|
}, [hasError]);
|
|
isTieredRewardCodeQuest = _QuestRewardUtils.isTieredRewardCodeQuest({
|
|
quest
|
|
});
|
|
memo = useMemo(() => isTieredRewardCodeQuest ? getRewardCodeQuestReward({
|
|
quest,
|
|
idx: rewardCode?.tier
|
|
}) : getRewardCodeQuestReward({
|
|
quest,
|
|
idx: 0
|
|
}), [isTieredRewardCodeQuest, quest, rewardCode?.tier]);
|
|
const memo2 = useMemo(() => {
|
|
if (memo?.redemptionLink != null && memo.redemptionLink !== "") {
|
|
return rewardCode?.code != null && rewardCode.code !== "" ? memo.redemptionLink.replace(REWARD_CODE_PLACEHOLDER, encodeURIComponent(rewardCode.code)) : memo.redemptionLink;
|
|
}
|
|
}, [memo, rewardCode]);
|
|
const claimRewardCodePrimaryCtaClickHandler = useClaimRewardCodePrimaryCtaClickHandler({
|
|
claimCode,
|
|
fetchCode,
|
|
hasError,
|
|
onDismiss: ActionSheetActionCreators.hideActionSheet,
|
|
quest,
|
|
questContent: questContent2,
|
|
questContentPosition: questContentPosition2,
|
|
redemptionLink: memo2,
|
|
sourceQuestContent: sourceQuestContent2
|
|
});
|
|
const callback = useCallback(() => {
|
|
if (rewardCode != null) {
|
|
copy(rewardCode.code, () => ToastActionCreators.open({
|
|
key: "TOAST_QUEST_REWARD_CODE_COPIED",
|
|
content: intl.string(t.MSaeTe),
|
|
icon: () => <CopyIcon />
|
|
}));
|
|
}
|
|
}, [rewardCode]);
|
|
const rewardCodeRedemptionInstructions = getRewardCodeRedemptionInstructions({
|
|
quest,
|
|
rewardCode
|
|
});
|
|
if (!isFetchingRewardCode) {
|
|
isFetchingRewardCode = isClaimingReward;
|
|
}
|
|
if (!isFetchingRewardCode) {
|
|
isFetchingRewardCode = rewardCode?.code == null;
|
|
}
|
|
const props2 = {
|
|
header: <BottomSheetTitleHeader title={intl.string(t.srzsU2)} />,
|
|
startExpanded: true,
|
|
children: <View style={styles.wrapper}>
|
|
<View>
|
|
{rewardCode != null && rewardCodeRedemptionInstructions != null && <Text style={styles.redemptionInstructions} variant="text-md/normal" color="text-default">
|
|
{MarkupUtils.parse(rewardCodeRedemptionInstructions, true, {
|
|
allowLinks: true
|
|
})}
|
|
</Text>}
|
|
<View>
|
|
<View style={rewardCode?.code == null && styles.codeCopyWrapperLoading}>
|
|
<TableRowGroup hasIcons={false}>
|
|
<TableRow label={rewardCode?.code} trailing={rewardCode?.code != null && <TableRow.Icon IconComponent={CopyIcon} />} onPress={rewardCode?.code != null ? callback : void 0} />
|
|
</TableRowGroup>
|
|
</View>
|
|
{rewardCode?.code == null && <ActivityIndicator style={styles.claimingIndicator} size={24} />}
|
|
</View>
|
|
</View>
|
|
<View style={styles.footer}>
|
|
<Button disabled={isFetchingRewardCode} onPress={claimRewardCodePrimaryCtaClickHandler} grow text={memo2 != null && memo2 !== "" ? intl.string(t["+zx47d"]) : intl.string(t["23SS+z"])} />
|
|
</View>
|
|
</View>
|
|
};
|
|
return <BottomSheet {...props2} />;
|
|
};
|
|
useStyles = createStyles((a0) => ({
|
|
wrapper: {
|
|
display: "flex",
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
gap: Module712.space.PX_24
|
|
},
|
|
footer: {
|
|
paddingBottom: a0
|
|
},
|
|
claimingIndicator: {
|
|
position: "absolute",
|
|
left: "50%",
|
|
top: "50%",
|
|
marginLeft: -12,
|
|
marginTop: -12
|
|
},
|
|
codeCopyWrapperLoading: {
|
|
opacity: 0.5
|
|
},
|
|
redemptionInstructions: {
|
|
marginBottom: 24
|
|
}
|
|
}));
|
|
export default function QuestRewardCodeClaimBottomSheetConnected(props) {
|
|
let r24;
|
|
const { questId, questContent, questContentPosition, sourceQuestContent } = props;
|
|
const stateFromStores = useStateFromStores([QuestStore], () => QuestStore.getQuest(questId));
|
|
if (stateFromStores == null) {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
r24 = null;
|
|
} else {
|
|
r24 = <QuestContentImpressionTrackerNative overrideVisibility questOrQuests={stateFromStores} questContent={questContent} questContentPosition={questContentPosition} sourceQuestContent={sourceQuestContent}>
|
|
{() => <QuestRewardCodeClaimBottomSheet quest={stateFromStores} questContent={questContent} questContentPosition={questContentPosition} sourceQuestContent={sourceQuestContent} />}
|
|
</QuestContentImpressionTrackerNative>;
|
|
}
|
|
return r24;
|
|
};
|