@blocklet/payment-react/es/checkout/table.js

Reusable react components for payment kit v2

import { jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import Toast from "@arcblock/ux/lib/Toast";
import { Alert, CircularProgress, Stack, Typography } from "@mui/material";
import { Box } from "@mui/system";
import { useRequest } from "ahooks";
import { useState } from "react";
import Livemode from "../components/livemode.js";
import PricingTable from "../components/pricing-table.js";
import api from "../libs/api.js";
import { mergeExtraParams } from "../libs/util.js";
import CheckoutForm from "./form.js";
import { PaymentThemeProvider } from "../theme/index.js";
import TruncatedText from "../components/truncated-text.js";
const fetchData = async (id) => {
  const { data } = await api.get(`/api/pricing-tables/${id}`);
  return data;
};
const ensureProtocol = (url) => {
  if (!/^https?:\/\//i.test(url)) {
    return `https://${url}`;
  }
  return url;
};
function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams, goBack, theme }) {
  if (!id.startsWith("prctbl_")) {
    throw new Error("A valid pricing table id is required.");
  }
  const [sessionId, setSessionId] = useState("");
  const hashSessionId = window.location.hash.slice(1);
  const { t } = useLocaleContext();
  const { error, loading, data } = useRequest(() => fetchData(id));
  if (error) {
    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
  }
  if (loading || !data) {
    return /* @__PURE__ */ jsx(CircularProgress, {});
  }
  if (data.items.length === 0) {
    return /* @__PURE__ */ jsx(Alert, { severity: "warning", children: t("payment.checkout.noPricing") });
  }
  const handleSelect = (priceId, currencyId) => {
    api.post(
      `/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams({
        ...extraParams,
        currencyId
      })}`
    ).then((res) => {
      if (mode === "standalone") {
        let { url } = res.data;
        url = url.indexOf("?") > -1 ? `${url}&currencyId=${currencyId}` : `${url}?currencyId=${currencyId}`;
        window.location.replace(ensureProtocol(url));
      } else {
        window.location.hash = res.data.id;
        setSessionId(res.data.id);
      }
    }).catch((err) => {
      console.error(err);
      Toast.error(err.message);
    });
  };
  const prop = {};
  if (goBack) {
    prop.goBack = () => {
      window.location.hash = "";
      if (typeof goBack !== "undefined") {
        goBack();
      }
      setSessionId("");
    };
  }
  if (!sessionId && !hashSessionId) {
    if (mode === "standalone") {
      return /* @__PURE__ */ jsxs(
        Stack,
        {
          direction: "column",
          sx: {
            alignItems: "center",
            overflow: {
              xs: "auto",
              md: "hidden"
            },
            height: "100%",
            pt: {
              xs: 2.5,
              md: 7.5
            },
            px: 2.5
          },
          children: [
            /* @__PURE__ */ jsxs(
              Box,
              {
                sx: {
                  display: "flex",
                  flexDirection: "column",
                  fontSize: "24px",
                  alignItems: "center",
                  margin: {
                    xs: "20px 0",
                    md: "20px 20px"
                  },
                  maxWidth: {
                    xs: "100%",
                    md: 400
                  },
                  textAlign: "center"
                },
                children: [
                  !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px", width: "fit-content", ml: 0 } }),
                  /* @__PURE__ */ jsx(
                    Typography,
                    {
                      sx: {
                        color: "text.primary",
                        fontWeight: 600,
                        lineHeight: "32px",
                        fontSize: "24px"
                      },
                      children: /* @__PURE__ */ jsx(TruncatedText, { text: data.name, maxLength: 60, useWidth: true })
                    }
                  )
                ]
              }
            ),
            /* @__PURE__ */ jsx(PricingTable, { table: data, onSelect: handleSelect })
          ]
        }
      );
    }
    return /* @__PURE__ */ jsx(PricingTable, { mode: "select", table: data, onSelect: handleSelect });
  }
  return /* @__PURE__ */ jsx(Box, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(
    CheckoutForm,
    {
      id: hashSessionId || sessionId,
      mode,
      onPaid,
      onError,
      onChange,
      theme,
      ...prop
    }
  ) });
}
export default function CheckoutTable(props) {
  if (props.theme === "inherit") {
    return /* @__PURE__ */ jsx(CheckoutTableInner, { ...props });
  }
  if (props.theme && typeof props.theme === "object") {
    return /* @__PURE__ */ jsx(PaymentThemeProvider, { theme: props.theme, children: /* @__PURE__ */ jsx(CheckoutTableInner, { ...props }) });
  }
  return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(CheckoutTableInner, { ...props }) });
}