yeet

modules/virtual_currency/checkout/native/OrbCheckoutModalComponents.tsx

@@ -0,0 +1,127 @@
+// 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} />;
+}