75 lines
3.1 KiB
TypeScript
75 lines
3.1 KiB
TypeScript
// Metro module 9780 (f9781).
|
|
import { useState, useRef, useCallback, useEffect } from "react";
|
|
import { ScrollView, View } from "react-native";
|
|
import { PremiumTypes } from "../../PremiumConstants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
|
|
import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
|
|
import { useGiftingPromotionDefaultSelectionV2 } from "../../gifting/hooks/useGiftingPromotionDefaultSelection";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import PremiumGiftBackgroundSelect from "./PremiumGiftBackgroundSelect";
|
|
import PremiumGiftDuration from "./PremiumGiftDuration";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import LockedRecipientField from "../../../checkout/native/gifting/LockedRecipientField";
|
|
import PremiumGiftCustomMessage from "./PremiumGiftCustomMessage";
|
|
import PremiumGiftPurchaseButton from "./PremiumGiftPurchaseButton";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
|
|
},
|
|
scrollViewContainer: {
|
|
paddingBottom: Module712.space.PX_24
|
|
},
|
|
senderHeaderTitle: {
|
|
marginTop: Module712.space.PX_24,
|
|
marginLeft: Module712.space.PX_16,
|
|
marginBottom: Module712.space.PX_8,
|
|
fontSize: 14
|
|
}
|
|
});
|
|
export default function PremiumGiftCustomization() {
|
|
let nitroTierName;
|
|
const navigation = useNavigation();
|
|
const styles = useStyles();
|
|
const nativeGiftContext = useNativeGiftContext();
|
|
const { recipientUser, premiumType } = nativeGiftContext;
|
|
const giftingPromotionDefaultSelectionV2 = useGiftingPromotionDefaultSelectionV2(nativeGiftContext.claimableRewards, nativeGiftContext.selectedGiftingPromotionReward);
|
|
const [state, setMessagePosition] = useState(0);
|
|
const ref = useRef(null);
|
|
const callback = useCallback(() => {
|
|
setTimeout(() => {
|
|
const current = ref.current;
|
|
return current == null ? void 0 : current.scrollTo({
|
|
y: state,
|
|
animated: true
|
|
});
|
|
}, 100);
|
|
}, [state]);
|
|
nitroTierName = premiumType === PremiumTypes.TIER_2 ? intl.string(t.lG6a5x) : intl.string(t["t9uG/o"]);
|
|
useEffect(() => {
|
|
navigation.setOptions({
|
|
title: intl.formatToPlainString(t["RMu0/q"], {
|
|
nitroTierName
|
|
})
|
|
});
|
|
}, [navigation, nitroTierName]);
|
|
return <View style={styles.container}>
|
|
<ScrollView ref={ref} contentContainerStyle={styles.scrollViewContainer} showsVerticalScrollIndicator={false}>
|
|
<View>
|
|
<PremiumGiftBackgroundSelect />
|
|
<PremiumGiftDuration />
|
|
{recipientUser != null && <>
|
|
<Text style={styles.senderHeaderTitle} variant="text-md/semibold">
|
|
{intl.string(t.NlkxGS)}
|
|
</Text>
|
|
<LockedRecipientField user={recipientUser} />
|
|
<PremiumGiftCustomMessage onFocusMessage={callback} setMessagePosition={setMessagePosition} />
|
|
</>}
|
|
</View>
|
|
</ScrollView>
|
|
<PremiumGiftPurchaseButton defaultSelection={giftingPromotionDefaultSelectionV2} />
|
|
</View>;
|
|
};
|