@blocklet/payment-react 1.13.113

package/es/payment/form/stripe.js

@@ -0,0 +1,158 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Center from "@arcblock/ux/lib/Center";
+import Dialog from "@arcblock/ux/lib/Dialog";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { LoadingButton } from "@mui/lab";
+import { CircularProgress, Typography } from "@mui/material";
+import { styled } from "@mui/system";
+import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+import { useSetState } from "ahooks";
+import { useEffect } from "react";
+function StripeCheckoutForm({ clientSecret, intentType, customer, mode, onConfirm }) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    message: "",
+    confirming: false,
+    loaded: false
+  });
+  useEffect(() => {
+    if (!stripe) {
+      return;
+    }
+    if (!clientSecret) {
+      return;
+    }
+    const method = intentType === "payment_intent" ? "retrievePaymentIntent" : "retrieveSetupIntent";
+    stripe[method](clientSecret).then(({ paymentIntent, setupIntent }) => {
+      const intent = paymentIntent || setupIntent;
+      switch (intent?.status) {
+        case "succeeded":
+          setState({ message: t("paymentCredit.preparePayMessage.succeeded") });
+          break;
+        case "processing":
+          setState({ message: t("paymentCredit.preparePayMessage.processing") });
+          break;
+        case "requires_payment_method":
+        default:
+          break;
+      }
+    });
+  }, [stripe, clientSecret]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!stripe || !elements) {
+      return;
+    }
+    try {
+      setState({ confirming: true });
+      const method = intentType === "payment_intent" ? "confirmPayment" : "confirmSetup";
+      const { error } = await stripe[method]({
+        elements,
+        redirect: "if_required",
+        confirmParams: {
+          payment_method_data: {
+            billing_details: {
+              name: customer.name,
+              phone: customer.phone,
+              email: customer.email,
+              address: customer.address
+            }
+          }
+        }
+      });
+      setState({ confirming: false });
+      if (error) {
+        if (error.type === "validation_error") {
+          return;
+        }
+        setState({ message: error.message });
+        return;
+      }
+      onConfirm();
+    } catch (err) {
+      console.error(err);
+      setState({ confirming: false, message: err.message });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Content, { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx(
+      PaymentElement,
+      {
+        options: { layout: "auto", fields: { billingDetails: "never" }, readOnly: state.confirming },
+        onReady: () => setState({ loaded: true })
+      }
+    ),
+    (!stripe || !elements || !state.loaded) && /* @__PURE__ */ jsx(Center, { relative: "parent", children: /* @__PURE__ */ jsx(CircularProgress, {}) }),
+    stripe && elements && state.loaded && /* @__PURE__ */ jsx(
+      LoadingButton,
+      {
+        fullWidth: true,
+        sx: { mt: 2, mb: 1, borderRadius: 0, fontSize: "1.1rem" },
+        type: "submit",
+        disabled: state.confirming || !state.loaded,
+        loading: state.confirming,
+        loadingPosition: "end",
+        variant: "contained",
+        color: "primary",
+        size: "large",
+        children: t("payment.checkout.continue", { action: mode })
+      }
+    ),
+    state.message && /* @__PURE__ */ jsx(Typography, { sx: { mt: 1, color: "error.main" }, children: state.message })
+  ] });
+}
+const Content = styled("form")`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+`;
+export default function StripeCheckout({
+  clientSecret,
+  intentType,
+  publicKey,
+  mode,
+  customer,
+  onConfirm,
+  onCancel
+}) {
+  const stripePromise = loadStripe(publicKey);
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    open: true,
+    closable: true
+  });
+  const handleClose = (_, reason) => {
+    if (reason === "backdropClick") {
+      return;
+    }
+    setState({ open: false });
+    onCancel();
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      title: t("payment.checkout.cardPay", { action: t(`payment.checkout.${mode}`) }),
+      showCloseButton: state.closable,
+      open: state.open,
+      onClose: handleClose,
+      disableEscapeKeyDown: true,
+      children: /* @__PURE__ */ jsx(Elements, { options: { clientSecret }, stripe: stripePromise, children: /* @__PURE__ */ jsx(
+        StripeCheckoutForm,
+        {
+          clientSecret,
+          intentType,
+          mode,
+          customer,
+          onConfirm
+        }
+      ) })
+    }
+  );
+}

package/es/payment/header.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { TCheckoutSessionExpanded } from '@blocklet/payment-types';
+type Props = {
+    checkoutSession: TCheckoutSessionExpanded;
+};
+export default function PaymentHeader({ checkoutSession }: Props): import("react").JSX.Element;
+export {};

package/es/payment/header.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@arcblock/ux/lib/Theme";
+import { Avatar, Stack, Typography } from "@mui/material";
+import { useCreation, useLocalStorageState, useSize } from "ahooks";
+import Livemode from "../components/livemode.js";
+import { getStatementDescriptor } from "../util.js";
+import UserButtons from "./form/addon.js";
+export default function PaymentHeader({ checkoutSession }) {
+  const [livemode] = useLocalStorageState("livemode", { defaultValue: true });
+  const brand = getStatementDescriptor(checkoutSession.line_items);
+  const theme = useTheme();
+  const domSize = useSize(document.body);
+  const isColumnLayout = useCreation(() => {
+    if (domSize) {
+      if (domSize?.width <= theme.breakpoints.values.md) {
+        return true;
+      }
+    }
+    return false;
+  }, [domSize, theme]);
+  return /* @__PURE__ */ jsxs(Stack, { className: "cko-header", direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(Avatar, { variant: "square", src: window.blocklet.appLogo, sx: { width: 32, height: 32 } }),
+      /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 600 }, children: brand }),
+      !livemode && /* @__PURE__ */ jsx(Livemode, {})
+    ] }),
+    isColumnLayout ? /* @__PURE__ */ jsx(UserButtons, {}) : null
+  ] });
+}

package/es/payment/index.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { CheckoutCallbacks, CheckoutContext } from '../types';
+type Props = CheckoutContext & CheckoutCallbacks & {
+    completed?: boolean;
+    error?: any;
+};
+declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, }: Props): import("react").JSX.Element;
+declare namespace Payment {
+    var defaultProps: {
+        completed: boolean;
+        error: null;
+    };
+}
+export default Payment;
+type MainProps = CheckoutContext & CheckoutCallbacks & {
+    completed?: boolean;
+};
+export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, }: MainProps): import("react").JSX.Element;
+export declare namespace PaymentInner {
+    var defaultProps: {
+        completed: boolean;
+    };
+}
+export declare const Root: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & {
+    mode: string;
+}, {}, {}>;

package/es/payment/index.js

@@ -0,0 +1,327 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Toast from "@arcblock/ux/lib/Toast";
+import { Box, Fade, Stack } from "@mui/material";
+import { styled } from "@mui/system";
+import { useSetState } from "ahooks";
+import { useEffect } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import api from "../api.js";
+import { usePaymentContext } from "../contexts/payment.js";
+import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from "../util.js";
+import PaymentError from "./error.js";
+import CheckoutFooter from "./footer.js";
+import PaymentForm from "./form/index.js";
+import PaymentHeader from "./header.js";
+import OverviewSkeleton from "./skeleton/overview.js";
+import PaymentSkeleton from "./skeleton/payment.js";
+import PaymentSuccess from "./success.js";
+import PaymentSummary from "./summary.js";
+Payment.defaultProps = {
+  completed: false,
+  error: null
+};
+export default function Payment({
+  checkoutSession,
+  paymentMethods,
+  paymentIntent,
+  paymentLink,
+  customer,
+  completed,
+  error,
+  mode,
+  onPaid,
+  onError
+}) {
+  const { t } = useLocaleContext();
+  const { refresh, livemode, setLivemode } = usePaymentContext();
+  useEffect(() => {
+    if (checkoutSession) {
+      if (livemode !== checkoutSession.livemode) {
+        setLivemode(checkoutSession.livemode);
+        setTimeout(() => {
+          refresh();
+        }, 10);
+      }
+    }
+  }, [checkoutSession, livemode, setLivemode, refresh]);
+  if (error) {
+    return /* @__PURE__ */ jsx(PaymentError, { title: "Oops", description: formatError(error) });
+  }
+  if (!checkoutSession) {
+    return /* @__PURE__ */ jsx(Root, { mode, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", children: [
+      /* @__PURE__ */ jsx(Stack, { className: "cko-overview", children: /* @__PURE__ */ jsx(OverviewSkeleton, {}) }),
+      /* @__PURE__ */ jsx(Stack, { className: "cko-payment", children: /* @__PURE__ */ jsx(PaymentSkeleton, {}) }),
+      /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer" })
+    ] }) });
+  }
+  if (checkoutSession.expires_at <= Math.round(Date.now() / 1e3)) {
+    return /* @__PURE__ */ jsx(
+      PaymentError,
+      {
+        title: t("payment.checkout.expired.title"),
+        description: t("payment.checkout.expired.description")
+      }
+    );
+  }
+  if (checkoutSession.status === "complete") {
+    return /* @__PURE__ */ jsx(
+      PaymentError,
+      {
+        title: t("payment.checkout.complete.title"),
+        description: t("payment.checkout.complete.description")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    PaymentInner,
+    {
+      checkoutSession,
+      paymentMethods,
+      paymentLink,
+      paymentIntent,
+      completed,
+      customer,
+      onPaid,
+      onError,
+      mode
+    }
+  );
+}
+PaymentInner.defaultProps = {
+  completed: false
+};
+export function PaymentInner({
+  checkoutSession,
+  paymentMethods,
+  paymentLink,
+  paymentIntent,
+  customer,
+  completed,
+  mode,
+  onPaid,
+  onError
+}) {
+  const { t } = useLocaleContext();
+  const { settings, session } = usePaymentContext();
+  const [state, setState] = useSetState({ checkoutSession });
+  const defaultCurrencyId = state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
+  const defaultMethodId = paymentMethods.find((m) => m.payment_currencies.some((c) => c.id === defaultCurrencyId))?.id;
+  const methods = useForm({
+    defaultValues: {
+      customer_name: customer?.name || session.user?.fullName || "",
+      customer_email: customer?.email || session.user?.email || "",
+      customer_phone: customer?.phone || session.user?.phone || "",
+      payment_method: defaultMethodId,
+      payment_currency: defaultCurrencyId,
+      billing_address: Object.assign(
+        {
+          country: "",
+          state: "",
+          city: "",
+          line1: "",
+          line2: "",
+          postal_code: ""
+        },
+        customer?.address || {},
+        { country: isValidCountry(customer?.address?.country || "") ? customer?.address?.country : "us" }
+      )
+    }
+  });
+  const currencyId = methods.watch("payment_currency");
+  const currency = findCurrency(paymentMethods, currencyId) || settings.baseCurrency;
+  const onUpsell = async (from, to) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/upsell`, { from, to });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+  const onDownsell = async (from) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/downsell`, { from });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+  const onApplyCrossSell = async (to) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`, { to });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+  const onCancelCrossSell = async () => {
+    try {
+      const { data } = await api.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(Root, { mode, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", children: [
+    /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-overview", direction: "column", children: [
+      /* @__PURE__ */ jsx(PaymentHeader, { checkoutSession: state.checkoutSession }),
+      /* @__PURE__ */ jsx(
+        PaymentSummary,
+        {
+          checkoutSession: state.checkoutSession,
+          currency,
+          onUpsell,
+          onDownsell,
+          onApplyCrossSell,
+          onCancelCrossSell
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(Stack, { className: "cko-payment", direction: "column", spacing: 4, children: [
+      completed && /* @__PURE__ */ jsx(
+        PaymentSuccess,
+        {
+          payee: getStatementDescriptor(state.checkoutSession.line_items),
+          action: state.checkoutSession.mode,
+          message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.mode}`)
+        }
+      ),
+      !completed && /* @__PURE__ */ jsx(
+        PaymentForm,
+        {
+          checkoutSession: state.checkoutSession,
+          paymentMethods,
+          paymentIntent,
+          customer,
+          onPaid,
+          onError,
+          mode
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer" })
+  ] }) }) });
+}
+export const Root = styled(Box)`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  position: relative;
+
+  &:before {
+    animation-fill-mode: both;
+    background: #ffffff;
+    content: '';
+    height: 100%;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transform-origin: right;
+    width: 50%;
+    box-shadow: 15px 0 30px 0 rgba(0, 0, 0, 0.18);
+  }
+
+  .cko-container {
+    width: 100%;
+    max-width: 1000px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    position: relative;
+    padding: 0 16px;
+  }
+
+  .cko-overview {
+    width: 400px;
+    min-height: 540px;
+    position: relative;
+  }
+  .cko-header {
+    left: 0;
+    margin-bottom: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: background-color 0.15s ease, box-shadow 0.15s ease-out;
+  }
+  .cko-product-summary {
+  }
+
+  .cko-payment {
+    width: 400px;
+    .MuiInputBase-root {
+      border-radius: 0;
+    }
+  }
+
+  .cko-payment-form {
+    .MuiInputAdornment-positionStart {
+      width: 50px;
+    }
+
+    .MuiBox-root {
+      border: 1px solid #ccc;
+      margin: -1px 0 0 -1px;
+    }
+
+    .MuiFormHelperText-root {
+      margin-left: 14px;
+    }
+
+    .MuiOutlinedInput-notchedOutline {
+      border: none;
+    }
+  }
+
+  .cko-payment-methods {
+  }
+
+  .cko-payment-submit {
+    .MuiButtonBase-root {
+      border-radius: 0;
+      font-size: 1.3rem;
+    }
+  }
+
+  .cko-header {
+  }
+
+  .cko-footer {
+    position: absolute;
+    bottom: 0;
+    left: 12px;
+    margin: 12px 0;
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    &:before {
+      display: none;
+    }
+    .cko-container {
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+      min-width: 350px;
+      max-width: 400px;
+    }
+    .cko-overview {
+      width: 100%;
+      min-height: auto;
+    }
+    .cko-payment {
+      width: 100%;
+    }
+
+    .cko-footer {
+      position: static;
+      margin-top: 0;
+    }
+  }
+`;

package/es/payment/product-card.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { LiteralUnion } from 'type-fest';
+type Props = {
+    name: string;
+    description?: string;
+    logo?: string;
+    size?: number;
+    extra?: React.ReactNode;
+    variant?: LiteralUnion<'square' | 'rounded' | 'circular', string>;
+};
+declare function ProductCard({ size, variant, name, logo, description, extra }: Props): import("react").JSX.Element;
+declare namespace ProductCard {
+    var defaultProps: {
+        logo: string;
+        size: number;
+        description: string;
+        variant: string;
+        extra: undefined;
+    };
+}
+export default ProductCard;

package/es/payment/product-card.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar, Stack, Typography } from "@mui/material";
+export default function ProductCard({ size, variant, name, logo, description, extra }) {
+  const s = { width: size, height: size };
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "flex-start", spacing: 1, flex: 2, children: [
+    logo ? (
+      // @ts-ignore
+      /* @__PURE__ */ jsx(Avatar, { src: logo, alt: name, variant, sx: s })
+    ) : (
+      // @ts-ignore
+      /* @__PURE__ */ jsx(Avatar, { variant, sx: s, children: name.slice(0, 1) })
+    ),
+    /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", justifyContent: "space-around", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontWeight: 500, mb: 0.5, lineHeight: 1 }, color: "text.primary", children: name }),
+      description && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body1",
+          sx: { fontSize: "0.85rem", mb: 0.5, lineHeight: 1, textAlign: "left" },
+          color: "text.secondary",
+          children: description
+        }
+      ),
+      extra && /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: "0.85rem" }, color: "text.secondary", children: extra })
+    ] })
+  ] });
+}
+ProductCard.defaultProps = {
+  logo: "",
+  size: 48,
+  description: "",
+  variant: "rounded",
+  extra: void 0
+};

package/es/payment/product-item.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+type Props = {
+    item: TLineItemExpanded;
+    session: TCheckoutSessionExpanded;
+    currency: TPaymentCurrency;
+    onUpsell: Function;
+    onDownsell: Function;
+    mode?: 'normal' | 'cross-sell';
+    children?: React.ReactNode;
+};
+declare function ProductItem({ item, session, currency, mode, children, onUpsell, onDownsell }: Props): import("react").JSX.Element;
+declare namespace ProductItem {
+    var defaultProps: {
+        mode: string;
+        children: null;
+    };
+}
+export default ProductItem;