discord-decomp/modules/virtual_currency/checkout/native/OrbCheckoutModal.tsx

// Metro module 11902 (f11903).
import * as Module19 from "react";
import { useCallback, useEffect, useMemo, useRef } from "react";
import { AnalyticEvents, CurrencyCodes } from "../../../../Constants";
import { InternalPaymentGateways } from "../../../../_bundle/Module505";
import { useOrbCheckoutModalContext, OrbCheckoutModalContextProvider } from "../OrbCheckoutModalContext";
import { useFetchCollectiblesProduct } from "../../../collectibles/hooks/useFetchCollectiblesProduct";
import { Stack } from "../../../../design/components/Stack/native/Stack.native";
import { OrbCheckoutErrorCard, OrbCheckoutOrderSummary, OrbCheckoutPaymentSourceDetails, OrbCheckoutLegalFinePrint, OrbCheckoutPurchaseButton } from "./OrbCheckoutModalComponents";
import { get1PShopApplicationIdForSKU } from "../../VirtualCurrencyUtils";
import { trackPaymentFlowStartedAnalyticsAndCTP } from "../../../experiments/trigger_points/PaymentFlowStartedTriggerPoint";
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
import { useVirtualCurrencyBalance } from "../../hooks/useVirtualCurrencyBalance";
import ModalActionCreators from "../../../../actions/ModalActionCreators";
import { ModalScreen } from "../../../../design/components/Modal/native/ModalScreen.native";
import { ModalContent } from "../../../../design/components/Modal/native/ModalContent.native";
import { ModalFooter } from "../../../../design/components/Modal/native/ModalFooter.native";
import Module38 from "../../../../_bundle/Module38";
import { v4 } from "../../../../_bundle/Module514";
import { intl, t } from "../../../../intl/index.native";
import { getHeaderTextButton } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
import * as _Modal_native from "../../../../design/components/Modal/native/Modal.native";
import { HermesBuiltin } from "../../../../_hermes/prelude";
let c8157_13, OrbCheckoutModalFooter, OrbCheckoutModalScreen;
const OrbCheckoutModalContent = function OrbCheckoutModalContent(props) {
  const orbBalance = props.orbBalance;
  const orbCheckoutModalContext = useOrbCheckoutModalContext();
  const { skuId: skuId3, orbRedemptionError: orbRedemptionError2 } = orbCheckoutModalContext;
  let product = useFetchCollectiblesProduct(skuId3).product;
  const r29 = [orbRedemptionError2 != null && <OrbCheckoutErrorCard error={orbRedemptionError2.message} />, , ,];
  if (product == null) {
    product = null;
  }
  r29[1] = <OrbCheckoutOrderSummary product={product} />;
  r29[2] = <OrbCheckoutPaymentSourceDetails orbBalance={orbBalance} />;
  return <Stack>{r29}</Stack>;
};
OrbCheckoutModalFooter = function OrbCheckoutModalFooter(props) {
  return <Stack>
    <OrbCheckoutLegalFinePrint />
    <OrbCheckoutPurchaseButton onPress={props.onPress} />
  </Stack>;
};
c8157_13 = {
  MAIN: "MAIN"
};
OrbCheckoutModalScreen = (props) => {
  let callback, virtualCurrencyBalance, ref;
  const startTime2 = props.startTime;
  callback = void 0;
  virtualCurrencyBalance = void 0;
  ref = void 0;
  const orbCheckoutModalContext = useOrbCheckoutModalContext();
  const { onRedeemVirtualCurrency, orbRedemptionError } = orbCheckoutModalContext;
  const startTime = startTime2;
  const orbCheckoutModalContext2 = useOrbCheckoutModalContext();
  const { skuId, loadId, analyticsLocations, orbProductContext } = orbCheckoutModalContext2;
  const memo = useMemo(() => {
    const r2 = {
      load_id: loadId,
      application_id: get1PShopApplicationIdForSKU(skuId),
      location_stack: analyticsLocations,
      sku_id: skuId,
      currency: CurrencyCodes.DISCORD_ORB,
      payment_gateway: InternalPaymentGateways.VIRTUAL_CURRENCY
    };
    let r21 = orbProductContext != null;
    if (r21) {
      let orbPriceAmount = orbProductContext.orbPriceAmount;
      if (orbPriceAmount == null) {
        orbPriceAmount = void 0;
      }
      let orbPriceAmount2 = orbProductContext.orbPriceAmount;
      if (orbPriceAmount2 == null) {
        orbPriceAmount2 = void 0;
      }
      r21 = {
        price: orbPriceAmount,
        regular_price: orbPriceAmount2
      };
    }
    HermesBuiltin.copyDataProperties(r2, r21);
    return r2;
  }, [loadId, skuId, analyticsLocations, orbProductContext]);
  callback = useCallback((a0, a1) => {
    const duration_ms = Date.now() - startTime;
    if (a0 === AnalyticEvents.PAYMENT_FLOW_STARTED) {
      trackPaymentFlowStartedAnalyticsAndCTP({
        ...memo,
        has_saved_payment_source: false,
        continue_session_initial_step: null
      });
    } else if (a0 === AnalyticEvents.PAYMENT_FLOW_COMPLETED) {
      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_COMPLETED, {
        ...memo,
        duration_ms
      });
    } else if (a0 === AnalyticEvents.PAYMENT_FLOW_SUCCEEDED) {
      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_SUCCEEDED, {
        ...memo,
        duration_ms
      });
    } else if (a0 === AnalyticEvents.PAYMENT_FLOW_CANCELED) {
      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_CANCELED, {
        ...memo,
        duration_ms
      });
    } else {
      AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_FAILED, {
        ...memo,
        duration_ms,
        ...a1 != null ? {
          payment_error_code: a1.code,
          error_message: a1.message
        } : {}
      });
    }
  }, [startTime, memo]);
  virtualCurrencyBalance = useVirtualCurrencyBalance();
  ref = useRef(virtualCurrencyBalance);
  useEffect(() => {
    callback(AnalyticEvents.PAYMENT_FLOW_STARTED);
  }, [callback]);
  useEffect(() => {
    if (orbRedemptionError != null && ref.current !== null) {
      callback(AnalyticEvents.PAYMENT_FLOW_FAILED, orbRedemptionError);
      ref.current = null;
    }
  }, [orbRedemptionError, callback]);
  let current3 = ref.current;
  if (current3 == null) {
    current3 = virtualCurrencyBalance;
  }
  return <ModalScreen>
    <ModalContent>
      <OrbCheckoutModalContent orbBalance={current3} />
    </ModalContent>
    <ModalFooter>
      <OrbCheckoutModalFooter onPress={useCallback(() => {
        callback(AnalyticEvents.PAYMENT_FLOW_COMPLETED);
        ref.current = virtualCurrencyBalance;
        onRedeemVirtualCurrency(() => {
          callback(AnalyticEvents.PAYMENT_FLOW_SUCCEEDED);
          ModalActionCreators.pop();
        });
      }, [callback, virtualCurrencyBalance, onRedeemVirtualCurrency])} />
    </ModalFooter>
  </ModalScreen>;
};
export default ({ skuId: skuId2, onCheckoutSuccess, analyticsLocations: analyticsLocations2 }) => {
  Module38(skuId2 != null, "SKU ID is required");
  const current = Module19.useRef(v4()).current;
  const current2 = Module19.useRef(Date.now()).current;
  Module19.useEffect(() => {
    AnalyticsUtils.track(AnalyticEvents.OPEN_MODAL, {
      type: "Orb Checkout Modal",
      location_stack: analyticsLocations2,
      sku_id: skuId2
    });
  }, [analyticsLocations2, skuId2]);
  const callback2 = Module19.useCallback(() => {
    const r8 = Date.now();
    AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_CANCELED, {
      load_id: current,
      application_id: get1PShopApplicationIdForSKU(skuId2),
      location_stack: analyticsLocations2,
      payment_gateway: InternalPaymentGateways.VIRTUAL_CURRENCY,
      sku_id: skuId2,
      currency: CurrencyCodes.DISCORD_ORB,
      duration_ms: r8 - current2
    });
    ModalActionCreators.pop();
  }, [skuId2, current, analyticsLocations2, current2]);
  const screens = {};
  screens[c8157_13.MAIN] = {
    title: intl.string(t.q9EGps),
    headerShown: true,
    headerLeft: getHeaderTextButton(intl.string(t["ETE/oC"]), callback2),
    render: () => <OrbCheckoutModalContextProvider skuId={skuId2} loadId={current} onCheckoutSuccess={onCheckoutSuccess} analyticsLocations={analyticsLocations2}>
      <OrbCheckoutModalScreen startTime={current2} />
    </OrbCheckoutModalContextProvider>
  };
  return <_Modal_native.Modal screens={screens} initialRouteName={c8157_13.MAIN} headerTitleAlign="center" />;
};