@blocklet/payment-react 1.13.113

package/lib/components/pricing-table.js

@@ -0,0 +1,232 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PricingTable;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _iconsMaterial = require("@mui/icons-material");
+var _lab = require("@mui/lab");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _amount = _interopRequireDefault(require("../payment/amount"));
+var _util = require("../util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const groupItemsByRecurring = items => {
+  const grouped = {};
+  const recurring = {};
+  items.forEach(x => {
+    const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join("-");
+    recurring[key] = x.price.recurring;
+    if (!grouped[key]) {
+      grouped[key] = [];
+    }
+    grouped[key].push(x);
+  });
+  return {
+    recurring,
+    grouped
+  };
+};
+PricingTable.defaultProps = {
+  alignItems: "center",
+  mode: "checkout",
+  interval: ""
+};
+function PricingTable({
+  table,
+  alignItems,
+  interval,
+  mode,
+  onSelect
+}) {
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const [state, setState] = (0, _ahooks.useSetState)({
+    interval,
+    loading: ""
+  });
+  const {
+    recurring,
+    grouped
+  } = groupItemsByRecurring(table.items);
+  (0, _react.useEffect)(() => {
+    if (table) {
+      if (!state.interval || !grouped[state.interval]) {
+        const keys = Object.keys(recurring);
+        if (keys[0]) {
+          setState({
+            interval: keys[0]
+          });
+        }
+      }
+    }
+  }, [table]);
+  const handleSelect = async priceId => {
+    try {
+      setState({
+        loading: priceId
+      });
+      await onSelect(priceId);
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util.formatError)(err));
+    } finally {
+      setState({
+        loading: ""
+      });
+    }
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    direction: "column",
+    alignItems: alignItems === "center" ? "center" : "flex-start",
+    sx: {
+      pt: {
+        xs: 4,
+        sm: 2
+      },
+      gap: {
+        xs: 3,
+        sm: mode === "select" ? 3 : 5
+      }
+    },
+    children: [Object.keys(recurring).length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
+      color: "primary",
+      value: state.interval,
+      onChange: (_, value) => {
+        if (value !== null) {
+          setState({
+            interval: value
+          });
+        }
+      },
+      exclusive: true,
+      children: Object.keys(recurring).map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+        value: x,
+        sx: {
+          textTransform: "capitalize"
+        },
+        children: (0, _util.formatRecurring)(recurring[x], true, "", locale)
+      }, x))
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+      flexWrap: "wrap",
+      direction: "row",
+      gap: {
+        xs: 3,
+        sm: 5,
+        md: mode === "checkout" ? 10 : 5
+      },
+      justifyContent: alignItems === "center" ? "center" : "flex-start",
+      children: grouped[state.interval]?.map(x => {
+        let action = x.subscription_data?.trial_period_days ? t("payment.checkout.try") : t("payment.checkout.subscription");
+        if (mode === "select") {
+          action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
+        }
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+          in: true,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            padding: 4,
+            spacing: 2,
+            direction: "column",
+            alignItems: "center",
+            sx: {
+              width: 320,
+              cursor: "pointer",
+              borderWidth: "1px",
+              borderStyle: "solid",
+              borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
+              borderRadius: 1,
+              transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
+              boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
+              "&:hover": {
+                borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
+                boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
+              }
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+              textAlign: "center",
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+                direction: "row",
+                alignItems: "center",
+                spacing: 1,
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                  variant: "h5",
+                  color: "text.primary",
+                  fontWeight: 600,
+                  children: x.product.name
+                }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+                  label: x.highlight_text,
+                  color: "default",
+                  size: "small"
+                })]
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                color: "text.secondary",
+                children: x.product.description
+              })]
+            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1,
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
+                amount: (0, _util.formatPriceAmount)(x.price, table.currency, x.product.unit_label)
+              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+                direction: "column",
+                alignItems: "flex-start",
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                  component: "span",
+                  color: "text.secondary",
+                  fontSize: "0.8rem",
+                  children: t("payment.checkout.per")
+                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                  component: "span",
+                  color: "text.secondary",
+                  fontSize: "0.8rem",
+                  children: (0, _util.formatRecurring)(x.price.recurring, false, "", locale)
+                })]
+              })]
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+              fullWidth: true,
+              size: "large",
+              loadingPosition: "end",
+              variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
+              color: x.is_highlight || x.is_selected ? "primary" : "info",
+              sx: {
+                fontSize: "1.2rem"
+              },
+              loading: state.loading === x.price_id,
+              disabled: x.is_disabled,
+              onClick: () => handleSelect(x.price_id),
+              children: action
+            }), x.product.features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                children: t("payment.checkout.include")
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.List, {
+                dense: true,
+                children: x.product.features.map(f => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
+                  disableGutters: true,
+                  disablePadding: true,
+                  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+                    sx: {
+                      minWidth: 25
+                    },
+                    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CheckOutlined, {
+                      color: "success",
+                      fontSize: "small"
+                    })
+                  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                    primary: f.name
+                  })]
+                }, f.name))
+              })]
+            })]
+          })
+        }, x.price_id);
+      })
+    })]
+  });
+}

package/lib/components/status.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ChipProps } from '@mui/material';
+export default function Status(props: ChipProps): import("react").JSX.Element;

package/lib/components/status.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = Status;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+function Status(props) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+    size: "small",
+    variant: "outlined",
+    ...props,
+    sx: {
+      ...(props.sx || {}),
+      borderRadius: "4px",
+      height: 20,
+      lineHeight: 1,
+      textTransform: "capitalize",
+      marginRight: "10px"
+    }
+  });
+}

package/lib/components/switch.d.ts

@@ -0,0 +1,6 @@
+import type { LiteralUnion } from 'type-fest';
+type SwitchProps = {
+    variant?: LiteralUnion<'success' | 'error' | 'warning' | 'info' | 'primary' | 'secondary', string>;
+};
+declare const _default: import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & SwitchProps, {}, {}>;
+export default _default;

package/lib/components/switch.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+module.exports = (0, _system.styled)(_material.Switch)(({
+  variant = "success",
+  theme
+}) => ({
+  width: 28,
+  height: 16,
+  padding: 0,
+  display: "inline-flex",
+  "&:active": {
+    "& .MuiSwitch-thumb": {
+      width: 15
+    },
+    "& .MuiSwitch-switchBase.Mui-checked": {
+      transform: "translateX(9px)"
+    }
+  },
+  "& .MuiSwitch-switchBase": {
+    padding: 2,
+    "&.Mui-checked": {
+      transform: "translateX(12px)",
+      color: "#fff",
+      "& + .MuiSwitch-track": {
+        opacity: 1,
+        backgroundColor: theme.palette[variant].light
+      }
+    }
+  },
+  "& .MuiSwitch-thumb": {
+    boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    transition: theme.transitions.create(["width"], {
+      duration: 200
+    })
+  },
+  "& .MuiSwitch-track": {
+    borderRadius: 16 / 2,
+    opacity: 1,
+    backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,.35)" : "rgba(0,0,0,.25)",
+    boxSizing: "border-box"
+  }
+}));

package/lib/contexts/payment.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import type { Axios } from 'axios';
+export interface Settings {
+    paymentMethods: TPaymentMethodExpanded[];
+    baseCurrency: TPaymentCurrency;
+}
+export type PaymentContextType = {
+    livemode: boolean;
+    session: any;
+    connect: any;
+    prefix: string;
+    settings: Settings;
+    refresh: () => void;
+    setLivemode: (livemode: boolean) => void;
+    api: Axios;
+};
+declare const PaymentContext: import("react").Context<PaymentContextType>;
+declare const Consumer: import("react").Consumer<PaymentContextType>;
+declare function PaymentProvider({ children, session, connect }: {
+    children: any;
+    session: any;
+    connect: any;
+}): JSX.Element;
+declare namespace PaymentProvider {
+    var defaultProps: {};
+}
+declare function usePaymentContext(): PaymentContextType;
+export { PaymentContext, PaymentProvider, Consumer as SettingsConsumer, usePaymentContext };

package/lib/contexts/payment.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentContext = void 0;
+exports.PaymentProvider = PaymentProvider;
+exports.SettingsConsumer = void 0;
+exports.usePaymentContext = usePaymentContext;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _api = _interopRequireDefault(require("../api"));
+var _util = require("../util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const prefix = (0, _util.getPrefix)();
+const PaymentContext = exports.PaymentContext = (0, _react.createContext)({
+  api: _api.default
+});
+const {
+  Provider,
+  Consumer
+} = PaymentContext;
+exports.SettingsConsumer = Consumer;
+const getSettings = async () => {
+  const {
+    data
+  } = await _api.default.get("/api/settings");
+  return data;
+};
+function PaymentProvider({
+  children,
+  session,
+  connect
+}) {
+  const {
+    data,
+    error,
+    run,
+    loading
+  } = (0, _ahooks.useRequest)(getSettings);
+  const [livemode, setLivemode] = (0, _ahooks.useLocalStorageState)("livemode", {
+    defaultValue: true
+  });
+  if (error) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+      severity: "error",
+      children: error.message
+    });
+  }
+  if (loading) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Provider, {
+    value: {
+      session,
+      connect,
+      prefix,
+      livemode: !!livemode,
+      settings: data,
+      refresh: run,
+      setLivemode,
+      api: _api.default
+    },
+    children
+  });
+}
+function usePaymentContext() {
+  const context = (0, _react.useContext)(PaymentContext);
+  return context;
+}
+PaymentProvider.defaultProps = {};

package/lib/dayjs.d.ts

@@ -0,0 +1,2 @@
+import dayjs from 'dayjs';
+export default dayjs;

package/lib/dayjs.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _duration = _interopRequireDefault(require("dayjs/plugin/duration"));
+var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));
+var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
+var _timezone = _interopRequireDefault(require("dayjs/plugin/timezone"));
+var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Promise.resolve().then(() => require("dayjs/locale/en"));
+Promise.resolve().then(() => require("dayjs/locale/zh"));
+_dayjs.default.extend(_relativeTime.default);
+_dayjs.default.extend(_localizedFormat.default);
+_dayjs.default.extend(_duration.default);
+_dayjs.default.extend(_utc.default);
+_dayjs.default.extend(_timezone.default);
+module.exports = _dayjs.default;

package/lib/index.d.ts

@@ -0,0 +1,16 @@
+import api from './api';
+import Checkout from './checkout';
+import FormInput from './components/input';
+import Livemode from './components/livemode';
+import PricingTable from './components/pricing-table';
+import Status from './components/status';
+import Switch from './components/switch';
+import dayjs from './dayjs';
+import Amount from './payment/amount';
+import PhoneInput from './payment/form/phone';
+import Payment from './payment/index';
+import ProductSkeleton from './payment/product-skeleton';
+export * from './util';
+export * from './contexts/payment';
+export { translations, createTranslator } from './locales';
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, Checkout, Payment, PricingTable, ProductSkeleton, Amount, };

package/lib/index.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  api: true,
+  Checkout: true,
+  FormInput: true,
+  Livemode: true,
+  PricingTable: true,
+  Status: true,
+  Switch: true,
+  dayjs: true,
+  Amount: true,
+  PhoneInput: true,
+  Payment: true,
+  ProductSkeleton: true,
+  translations: true,
+  createTranslator: true
+};
+Object.defineProperty(exports, "Amount", {
+  enumerable: true,
+  get: function () {
+    return _amount.default;
+  }
+});
+Object.defineProperty(exports, "Checkout", {
+  enumerable: true,
+  get: function () {
+    return _checkout.default;
+  }
+});
+Object.defineProperty(exports, "FormInput", {
+  enumerable: true,
+  get: function () {
+    return _input.default;
+  }
+});
+Object.defineProperty(exports, "Livemode", {
+  enumerable: true,
+  get: function () {
+    return _livemode.default;
+  }
+});
+Object.defineProperty(exports, "Payment", {
+  enumerable: true,
+  get: function () {
+    return _index.default;
+  }
+});
+Object.defineProperty(exports, "PhoneInput", {
+  enumerable: true,
+  get: function () {
+    return _phone.default;
+  }
+});
+Object.defineProperty(exports, "PricingTable", {
+  enumerable: true,
+  get: function () {
+    return _pricingTable.default;
+  }
+});
+Object.defineProperty(exports, "ProductSkeleton", {
+  enumerable: true,
+  get: function () {
+    return _productSkeleton.default;
+  }
+});
+Object.defineProperty(exports, "Status", {
+  enumerable: true,
+  get: function () {
+    return _status.default;
+  }
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () {
+    return _switch.default;
+  }
+});
+Object.defineProperty(exports, "api", {
+  enumerable: true,
+  get: function () {
+    return _api.default;
+  }
+});
+Object.defineProperty(exports, "createTranslator", {
+  enumerable: true,
+  get: function () {
+    return _locales.createTranslator;
+  }
+});
+Object.defineProperty(exports, "dayjs", {
+  enumerable: true,
+  get: function () {
+    return _dayjs.default;
+  }
+});
+Object.defineProperty(exports, "translations", {
+  enumerable: true,
+  get: function () {
+    return _locales.translations;
+  }
+});
+var _api = _interopRequireDefault(require("./api"));
+var _checkout = _interopRequireDefault(require("./checkout"));
+var _input = _interopRequireDefault(require("./components/input"));
+var _livemode = _interopRequireDefault(require("./components/livemode"));
+var _pricingTable = _interopRequireDefault(require("./components/pricing-table"));
+var _status = _interopRequireDefault(require("./components/status"));
+var _switch = _interopRequireDefault(require("./components/switch"));
+var _dayjs = _interopRequireDefault(require("./dayjs"));
+var _amount = _interopRequireDefault(require("./payment/amount"));
+var _phone = _interopRequireDefault(require("./payment/form/phone"));
+var _index = _interopRequireDefault(require("./payment/index"));
+var _productSkeleton = _interopRequireDefault(require("./payment/product-skeleton"));
+var _util = require("./util");
+Object.keys(_util).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _util[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _util[key];
+    }
+  });
+});
+var _payment = require("./contexts/payment");
+Object.keys(_payment).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _payment[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _payment[key];
+    }
+  });
+});
+var _locales = require("./locales");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/locales/en.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;