128 lines
4.9 KiB
TypeScript
128 lines
4.9 KiB
TypeScript
// Metro module 11904 (f11905).
|
|
import { useMemo } from "react";
|
|
import { ActivityIndicator, View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { Stack } from "../../../../design/components/Stack/native/Stack.native";
|
|
import { CircleErrorIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import CollectiblesShopCheckoutDetails from "../../../collectibles/native/CollectiblesShopCheckoutDetails";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import OrbCheckoutAmountTag from "../../native/OrbCheckoutAmountTag";
|
|
import { useOrbCheckoutModalContext } from "../OrbCheckoutModalContext";
|
|
import { getOrbCheckoutDisclaimerMessage } from "../OrbCheckoutUtils";
|
|
import useTheme from "../../../../hooks/useTheme";
|
|
import { useVirtualCurrencyBalance } from "../../hooks/useVirtualCurrencyBalance";
|
|
import { Button } from "../../../../design/components/Button/native/Button.native";
|
|
import { isThemeDark } from "../../../../design/shared";
|
|
import { OrbsIcon } from "../../../../design/components/Icon/native/redesign/generated/OrbsIcon";
|
|
const useStyles = createStyles({
|
|
topRowWrapper: {
|
|
width: "100%",
|
|
marginBottom: 10
|
|
},
|
|
rowWrapper: {
|
|
width: "100%",
|
|
marginVertical: 10
|
|
},
|
|
rowDetailsContainer: {
|
|
borderRadius: Module712.radii.lg,
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
|
|
padding: Module712.space.PX_16
|
|
},
|
|
orbPaymentSourceDetails: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center"
|
|
},
|
|
sectionTitle: {
|
|
marginBottom: Module712.space.PX_8
|
|
},
|
|
spinner: {
|
|
paddingVertical: Module712.space.PX_16,
|
|
alignItems: "center"
|
|
},
|
|
disclaimer: {
|
|
opacity: 0.5
|
|
},
|
|
errorCard: {
|
|
borderRadius: Module712.radii.sm,
|
|
padding: Module712.space.PX_12,
|
|
backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_CRITICAL
|
|
}
|
|
});
|
|
export function OrbCheckoutErrorCard(props) {
|
|
const error = props.error;
|
|
return <View style={useStyles().errorCard}>
|
|
<Stack direction="horizontal" spacing={8} align="flex-start">
|
|
<CircleErrorIcon size="sm" color="mobile-text-heading-primary" />
|
|
<Text variant="text-sm/medium" color="mobile-text-heading-primary">{error}</Text>
|
|
</Stack>
|
|
</View>;
|
|
}
|
|
export function OrbCheckoutOrderSummary(props) {
|
|
const product = props.product;
|
|
const styles = useStyles();
|
|
const r18 = product == null ? <View style={[styles.rowDetailsContainer, styles.spinner]}>
|
|
<ActivityIndicator size="small" />
|
|
</View> : <CollectiblesShopCheckoutDetails product={product} useOrbPrice />;
|
|
return <View style={styles.topRowWrapper}>
|
|
<Text variant="heading-sm/bold" color="mobile-text-heading-primary" style={styles.sectionTitle}>
|
|
{intl.string(t.hws7bC)}
|
|
</Text>
|
|
{r18}
|
|
</View>;
|
|
}
|
|
export function OrbCheckoutPaymentSourceDetails(props) {
|
|
const orbBalance = props.orbBalance;
|
|
const styles = useStyles();
|
|
return <View style={styles.rowWrapper}>
|
|
<Text variant="heading-sm/bold" color="mobile-text-heading-primary" style={styles.sectionTitle}>
|
|
{intl.string(t["zLch/S"])}
|
|
</Text>
|
|
<View style={[styles.rowDetailsContainer, styles.orbPaymentSourceDetails]}>
|
|
<Text variant="text-md/medium" color="mobile-text-heading-primary">
|
|
{intl.string(t.y0WGqP)}
|
|
</Text>
|
|
<OrbCheckoutAmountTag orbAmount={orbBalance} />
|
|
</View>
|
|
</View>;
|
|
}
|
|
export function OrbCheckoutLegalFinePrint() {
|
|
const styles = useStyles();
|
|
const skuId = useOrbCheckoutModalContext().skuId;
|
|
return <Text style={styles.disclaimer} variant="text-xxs/normal" color="interactive-text-active">
|
|
{useMemo(() => getOrbCheckoutDisclaimerMessage(skuId), [skuId])}
|
|
</Text>;
|
|
}
|
|
export function OrbCheckoutPurchaseButton(props) {
|
|
const onPress = props.onPress;
|
|
const theme = useTheme();
|
|
const orbCheckoutModalContext = useOrbCheckoutModalContext();
|
|
let isRedeeming = orbCheckoutModalContext.isRedeeming;
|
|
const orbProductContext = orbCheckoutModalContext.orbProductContext;
|
|
const virtualCurrencyBalance = useVirtualCurrencyBalance();
|
|
const orbPriceAmount = orbProductContext?.orbPriceAmount;
|
|
const props2 = {
|
|
variant: isThemeDark(theme) ? "primary-overlay" : "primary",
|
|
size: "lg",
|
|
text: intl.string(t["zLch/S"]),
|
|
icon: <OrbsIcon size="md" color={isThemeDark(theme) ? "control-overlay-primary-text-default" : "control-primary-text-default"} />,
|
|
iconPosition: "start",
|
|
loading: isRedeeming,
|
|
onPress,
|
|
disabled: null
|
|
};
|
|
if (!isRedeeming) {
|
|
isRedeeming = orbPriceAmount == null;
|
|
}
|
|
if (!isRedeeming) {
|
|
isRedeeming = virtualCurrencyBalance == null;
|
|
}
|
|
if (!isRedeeming) {
|
|
isRedeeming = virtualCurrencyBalance < orbPriceAmount;
|
|
}
|
|
props2.disabled = isRedeeming;
|
|
return <Button {...props2} />;
|
|
}
|