@blocklet/payment-react 1.13.113

package/lib/payment/index.js

@@ -0,0 +1,382 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentInner = PaymentInner;
+exports.Root = void 0;
+module.exports = Payment;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _reactHookForm = require("react-hook-form");
+var _api = _interopRequireDefault(require("../api"));
+var _payment = require("../contexts/payment");
+var _util = require("../util");
+var _error = _interopRequireDefault(require("./error"));
+var _footer = _interopRequireDefault(require("./footer"));
+var _form = _interopRequireDefault(require("./form"));
+var _header = _interopRequireDefault(require("./header"));
+var _overview = _interopRequireDefault(require("./skeleton/overview"));
+var _payment2 = _interopRequireDefault(require("./skeleton/payment"));
+var _success = _interopRequireDefault(require("./success"));
+var _summary = _interopRequireDefault(require("./summary"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Payment.defaultProps = {
+  completed: false,
+  error: null
+};
+function Payment({
+  checkoutSession,
+  paymentMethods,
+  paymentIntent,
+  paymentLink,
+  customer,
+  completed,
+  error,
+  mode,
+  onPaid,
+  onError
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    refresh,
+    livemode,
+    setLivemode
+  } = (0, _payment.usePaymentContext)();
+  (0, _react.useEffect)(() => {
+    if (checkoutSession) {
+      if (livemode !== checkoutSession.livemode) {
+        setLivemode(checkoutSession.livemode);
+        setTimeout(() => {
+          refresh();
+        }, 10);
+      }
+    }
+  }, [checkoutSession, livemode, setLivemode, refresh]);
+  if (error) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
+      title: "Oops",
+      description: (0, _util.formatError)(error)
+    });
+  }
+  if (!checkoutSession) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
+      mode,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        className: "cko-container",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          className: "cko-overview",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_overview.default, {})
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          className: "cko-payment",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_payment2.default, {})
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
+          className: "cko-footer"
+        })]
+      })
+    });
+  }
+  if (checkoutSession.expires_at <= Math.round(Date.now() / 1e3)) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
+      title: t("payment.checkout.expired.title"),
+      description: t("payment.checkout.expired.description")
+    });
+  }
+  if (checkoutSession.status === "complete") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
+      title: t("payment.checkout.complete.title"),
+      description: t("payment.checkout.complete.description")
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentInner, {
+    checkoutSession,
+    paymentMethods,
+    paymentLink,
+    paymentIntent,
+    completed,
+    customer,
+    onPaid,
+    onError,
+    mode
+  });
+}
+PaymentInner.defaultProps = {
+  completed: false
+};
+function PaymentInner({
+  checkoutSession,
+  paymentMethods,
+  paymentLink,
+  paymentIntent,
+  customer,
+  completed,
+  mode,
+  onPaid,
+  onError
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    settings,
+    session
+  } = (0, _payment.usePaymentContext)();
+  const [state, setState] = (0, _ahooks.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 = (0, _reactHookForm.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: (0, _util.isValidCountry)(customer?.address?.country || "") ? customer?.address?.country : "us"
+      })
+    }
+  });
+  const currencyId = methods.watch("payment_currency");
+  const currency = (0, _util.findCurrency)(paymentMethods, currencyId) || settings.baseCurrency;
+  const onUpsell = async (from, to) => {
+    try {
+      const {
+        data
+      } = await _api.default.put(`/api/checkout-sessions/${state.checkoutSession.id}/upsell`, {
+        from,
+        to
+      });
+      setState({
+        checkoutSession: data
+      });
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util.formatError)(err));
+    }
+  };
+  const onDownsell = async from => {
+    try {
+      const {
+        data
+      } = await _api.default.put(`/api/checkout-sessions/${state.checkoutSession.id}/downsell`, {
+        from
+      });
+      setState({
+        checkoutSession: data
+      });
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util.formatError)(err));
+    }
+  };
+  const onApplyCrossSell = async to => {
+    try {
+      const {
+        data
+      } = await _api.default.put(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`, {
+        to
+      });
+      setState({
+        checkoutSession: data
+      });
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util.formatError)(err));
+    }
+  };
+  const onCancelCrossSell = async () => {
+    try {
+      const {
+        data
+      } = await _api.default.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
+      setState({
+        checkoutSession: data
+      });
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util.formatError)(err));
+    }
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.FormProvider, {
+    ...methods,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
+      mode,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        className: "cko-container",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+          in: true,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            className: "cko-overview",
+            direction: "column",
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_header.default, {
+              checkoutSession: state.checkoutSession
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_summary.default, {
+              checkoutSession: state.checkoutSession,
+              currency,
+              onUpsell,
+              onDownsell,
+              onApplyCrossSell,
+              onCancelCrossSell
+            })]
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          className: "cko-payment",
+          direction: "column",
+          spacing: 4,
+          children: [completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_success.default, {
+            payee: (0, _util.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__ */(0, _jsxRuntime.jsx)(_form.default, {
+            checkoutSession: state.checkoutSession,
+            paymentMethods,
+            paymentIntent,
+            customer,
+            onPaid,
+            onError,
+            mode
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
+          className: "cko-footer"
+        })]
+      })
+    })
+  });
+}
+const Root = exports.Root = (0, _system.styled)(_material.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/lib/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/lib/payment/product-card.js

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

package/lib/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;

package/lib/payment/product-item.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = ProductItem;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _status = _interopRequireDefault(require("../components/status"));
+var _switch = _interopRequireDefault(require("../components/switch"));
+var _util = require("../util");
+var _productCard = _interopRequireDefault(require("./product-card"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+ProductItem.defaultProps = {
+  mode: "normal",
+  children: null
+};
+function ProductItem({
+  item,
+  session,
+  currency,
+  mode,
+  children,
+  onUpsell,
+  onDownsell
+}) {
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const pricing = (0, _util.formatLineItemPricing)(item, currency, session.subscription_data?.trial_period_days || 0, locale);
+  const saving = (0, _util.formatUpsellSaving)(session, currency);
+  const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
+  const canUpsell = mode === "normal" && session.line_items.length === 1;
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    direction: "column",
+    alignItems: "flex-start",
+    spacing: 1,
+    sx: {
+      width: "100%"
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "column",
+      alignItems: "flex-end",
+      sx: {
+        width: "100%"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        sx: {
+          width: "100%"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_productCard.default, {
+          logo: item.price.product?.images[0],
+          name: item.price.product?.name,
+          description: item.price.product?.description,
+          extra: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", {
+            rule: `${(0, _util.formatRecurring)(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}`
+          })].filter(Boolean).join(", ") : pricing.quantity
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "column",
+          alignItems: "flex-end",
+          flex: 1,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              color: "text.primary",
+              fontWeight: 500
+            },
+            gutterBottom: true,
+            children: pricing.primary
+          }), pricing.secondary && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              fontSize: "0.85rem",
+              color: "text.secondary"
+            },
+            children: pricing.secondary
+          })]
+        })]
+      }), children]
+    }), canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      sx: {
+        width: "100%"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+        component: "label",
+        htmlFor: "upsell-switch",
+        sx: {
+          fontSize: 12,
+          cursor: "pointer",
+          color: "text.primary"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_switch.default, {
+          id: "upsell-switch",
+          sx: {
+            mr: 1
+          },
+          variant: "success",
+          checked: false,
+          onChange: () => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)
+        }), t("payment.checkout.upsell.save", {
+          recurring: (0, _util.formatRecurring)(item.price.upsell.upsells_to.recurring, true, "per", locale)
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+          label: t("payment.checkout.upsell.off", {
+            saving
+          }),
+          color: "primary",
+          variant: "outlined",
+          sx: {
+            ml: 1
+          }
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "span",
+        sx: {
+          fontSize: 12
+        },
+        children: (0, _util.formatPrice)(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale)
+      })]
+    }), canUpsell && item.upsell_price_id && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      sx: {
+        width: "100%"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+        component: "label",
+        htmlFor: "upsell-switch",
+        sx: {
+          fontSize: 12,
+          cursor: "pointer",
+          color: "text.secondary"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_switch.default, {
+          id: "upsell-switch",
+          sx: {
+            mr: 1
+          },
+          variant: "success",
+          checked: true,
+          onChange: () => onDownsell(item.upsell_price_id)
+        }), t("payment.checkout.upsell.revert", {
+          recurring: t(`common.${(0, _util.formatRecurring)(item.price.recurring)}`)
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "span",
+        sx: {
+          fontSize: 12
+        },
+        children: (0, _util.formatPrice)(item.price, currency, item.price.product?.unit_label, 1, true, locale)
+      })]
+    })]
+  });
+}

package/lib/payment/product-skeleton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function ProductSkeleton({ count }: {
+    count: number;
+}): import("react").JSX.Element;