@blocklet/payment-react 1.13.113

package/lib/payment/product-skeleton.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = ProductSkeleton;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+function ProductSkeleton({
+  count
+}) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+    in: true,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "column",
+      alignItems: "center",
+      padding: 4,
+      spacing: 1,
+      sx: {
+        width: 320,
+        border: "1px solid #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: "#ddd",
+          boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
+        }
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "div",
+        variant: "h4",
+        sx: {
+          width: "50%"
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        variant: "text",
+        sx: {
+          fontSize: "1rem",
+          width: "60%"
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "div",
+        variant: "h3",
+        sx: {
+          width: "60%"
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "div",
+        variant: "h3",
+        sx: {
+          width: "100%"
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+      }), Array.from({
+        length: count
+      }).map((_, i) =>
+      // eslint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */
+      (0, _jsxRuntime.jsx)(_material.Skeleton, {
+        variant: "text",
+        sx: {
+          fontSize: "1rem",
+          width: "60%"
+        }
+      }, i))]
+    })
+  });
+}

package/lib/payment/skeleton/overview.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function OverviewSkeleton(): import("react").JSX.Element;

package/lib/payment/skeleton/overview.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = OverviewSkeleton;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+function OverviewSkeleton() {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+    in: true,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "column",
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 2,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+          variant: "circular",
+          width: 32,
+          height: 32
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+          variant: "text",
+          sx: {
+            fontSize: "2rem",
+            width: "40%"
+          }
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        mt: 3,
+        component: "div",
+        variant: "h4",
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "div",
+        variant: "h2",
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        sx: {
+          mt: 3
+        },
+        variant: "rounded",
+        width: 200,
+        height: 200
+      })]
+    })
+  });
+}

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function PaymentSkeleton(): import("react").JSX.Element;

package/lib/payment/skeleton/payment.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PaymentSkeleton;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+function PaymentSkeleton() {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+    in: true,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "column",
+      spacing: 3,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        variant: "text",
+        sx: {
+          fontSize: "2rem",
+          width: "40%"
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          variant: "h4",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          variant: "h1",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          variant: "h4",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          variant: "h1",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          variant: "h4",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "div",
+          variant: "h1",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
+        })]
+      })]
+    })
+  });
+}

package/lib/payment/success.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    message: string;
+    action: string;
+    payee: string;
+};
+export default function PaymentSuccess({ message, action, payee }: Props): import("react").JSX.Element;
+export {};

package/lib/payment/success.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PaymentSuccess;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _ufo = require("ufo");
+var _payment = require("../contexts/payment");
+function PaymentSuccess({
+  message,
+  action,
+  payee
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    prefix
+  } = (0, _payment.usePaymentContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grow, {
+    in: true,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      sx: {
+        height: 360
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(Div, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
+          className: "check-icon",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+            className: "icon-line line-tip"
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+            className: "icon-line line-long"
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
+            className: "icon-circle"
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
+            className: "icon-fix"
+          })]
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h5",
+        color: "text.primary",
+        mb: 3,
+        children: message
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "body1",
+        color: "text.secondary",
+        textAlign: "center",
+        children: t("payment.checkout.completed.tip", {
+          payee
+        })
+      }), ["subscription", "setup"].includes(action) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        textAlign: "center",
+        sx: {
+          mt: 2
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
+          href: (0, _ufo.joinURL)(prefix, "/customer"),
+          children: t("payment.checkout.portal", {
+            payee
+          })
+        })
+      })]
+    })
+  });
+}
+const Div = (0, _system.styled)("div")`
+  width: 80px;
+  height: 115px;
+
+  .check-icon {
+    width: 80px;
+    height: 80px;
+    position: relative;
+    border-radius: 50%;
+    box-sizing: content-box;
+    border: 4px solid ${props => props.theme.palette.success.main};
+  }
+  .check-icon::before {
+    top: 3px;
+    left: -2px;
+    width: 30px;
+    transform-origin: 100% 50%;
+    border-radius: 100px 0 0 100px;
+  }
+  .check-icon::after {
+    top: 0;
+    left: 30px;
+    width: 60px;
+    transform-origin: 0 50%;
+    border-radius: 0 100px 100px 0;
+    animation: rotate-circle 4.25s ease-in;
+  }
+  .check-icon::before,
+  .check-icon::after {
+    content: '';
+    height: 100px;
+    position: absolute;
+    background: #ffffff;
+    transform: rotate(-45deg);
+  }
+  .check-icon .icon-line {
+    height: 5px;
+    background-color: ${props => props.theme.palette.success.main};
+    display: block;
+    border-radius: 2px;
+    position: absolute;
+    z-index: 10;
+  }
+  .check-icon .icon-line.line-tip {
+    top: 46px;
+    left: 14px;
+    width: 25px;
+    transform: rotate(45deg);
+    animation: icon-line-tip 0.75s;
+  }
+  .check-icon .icon-line.line-long {
+    top: 38px;
+    right: 8px;
+    width: 47px;
+    transform: rotate(-45deg);
+    animation: icon-line-long 0.75s;
+  }
+  .check-icon .icon-circle {
+    top: -4px;
+    left: -4px;
+    z-index: 10;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    position: absolute;
+    box-sizing: content-box;
+    border: 4px solid rgba(76, 175, 80, 0.5);
+  }
+  .check-icon .icon-fix {
+    top: 8px;
+    width: 5px;
+    left: 26px;
+    z-index: 1;
+    height: 85px;
+    position: absolute;
+    transform: rotate(-45deg);
+    background-color: #ffffff;
+  }
+
+  @keyframes rotate-circle {
+    0% {
+      transform: rotate(-45deg);
+    }
+    5% {
+      transform: rotate(-45deg);
+    }
+    12% {
+      transform: rotate(-405deg);
+    }
+    100% {
+      transform: rotate(-405deg);
+    }
+  }
+  @keyframes icon-line-tip {
+    0% {
+      width: 0;
+      left: 1px;
+      top: 19px;
+    }
+    54% {
+      width: 0;
+      left: 1px;
+      top: 19px;
+    }
+    70% {
+      width: 50px;
+      left: -8px;
+      top: 37px;
+    }
+    84% {
+      width: 17px;
+      left: 21px;
+      top: 48px;
+    }
+    100% {
+      width: 25px;
+      left: 14px;
+      top: 45px;
+    }
+  }
+  @keyframes icon-line-long {
+    0% {
+      width: 0;
+      right: 46px;
+      top: 54px;
+    }
+    65% {
+      width: 0;
+      right: 46px;
+      top: 54px;
+    }
+    84% {
+      width: 55px;
+      right: 0px;
+      top: 35px;
+    }
+    100% {
+      width: 47px;
+      right: 8px;
+      top: 38px;
+    }
+  }
+`;

package/lib/payment/summary.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { TCheckoutSessionExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+type Props = {
+    checkoutSession: TCheckoutSessionExpanded;
+    currency: TPaymentCurrency;
+    onUpsell: Function;
+    onDownsell: Function;
+    onApplyCrossSell: Function;
+    onCancelCrossSell: Function;
+};
+export default function PaymentSummary({ checkoutSession, currency, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, }: Props): import("react").JSX.Element;
+export {};

package/lib/payment/summary.js

@@ -0,0 +1,225 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PaymentSummary;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _lab = require("@mui/lab");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _useBus = _interopRequireDefault(require("use-bus"));
+var _api = _interopRequireDefault(require("../api"));
+var _status = _interopRequireDefault(require("../components/status"));
+var _util = require("../util");
+var _amount = _interopRequireDefault(require("./amount"));
+var _productItem = _interopRequireDefault(require("./product-item"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const shake = (0, _material.keyframes)`
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(2deg);
+  }
+  50% {
+    transform: rotate(0eg);
+  }
+  75% {
+    transform: rotate(-2deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+`;
+async function fetchCrossSell(id) {
+  try {
+    const {
+      data
+    } = await _api.default.get(`/api/checkout-sessions/${id}/cross-sell`);
+    if (!data.error) {
+      return data;
+    }
+    return null;
+  } catch (err) {
+    return null;
+  }
+}
+function PaymentSummary({
+  checkoutSession,
+  currency,
+  onUpsell,
+  onDownsell,
+  onApplyCrossSell,
+  onCancelCrossSell
+}) {
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const [state, setState] = (0, _ahooks.useSetState)({
+    loading: false,
+    shake: false
+  });
+  const {
+    data,
+    runAsync
+  } = (0, _ahooks.useRequest)(() => fetchCrossSell(checkoutSession.id));
+  const headlines = (0, _util.formatCheckoutHeadlines)(checkoutSession, currency, locale);
+  (0, _useBus.default)("error.REQUIRE_CROSS_SELL", () => {
+    setState({
+      shake: true
+    });
+    setTimeout(() => {
+      setState({
+        shake: false
+      });
+    }, 1e3);
+  }, []);
+  const handleUpsell = async (from, to) => {
+    await onUpsell(from, to);
+    runAsync();
+  };
+  const handleDownsell = async from => {
+    await onDownsell(from);
+    runAsync();
+  };
+  const handleApplyCrossSell = async () => {
+    if (data) {
+      try {
+        setState({
+          loading: true
+        });
+        await onApplyCrossSell(data.id);
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setState({
+          loading: false
+        });
+      }
+    }
+  };
+  const handleCancelCrossSell = async () => {
+    try {
+      setState({
+        loading: true
+      });
+      await onCancelCrossSell();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setState({
+        loading: false
+      });
+    }
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+    in: true,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      className: "cko-product",
+      direction: "column",
+      sx: {
+        mt: 8
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        className: "cko-product-summary",
+        direction: "column",
+        alignItems: "flex-start",
+        sx: {
+          mb: 4
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontWeight: 500,
+            fontSize: "1.15rem",
+            color: "text.secondary"
+          },
+          children: headlines.action
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
+          amount: headlines.amount
+        }), headlines.then && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: "0.9rem",
+            color: "text.secondary"
+          },
+          children: headlines.then
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+        spacing: 2,
+        children: checkoutSession.line_items.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
+          item: x,
+          session: checkoutSession,
+          currency,
+          onUpsell: handleUpsell,
+          onDownsell: handleDownsell,
+          children: x.cross_sell && /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+            size: "small",
+            loadingPosition: "end",
+            color: "error",
+            variant: "text",
+            loading: state.loading,
+            onClick: handleCancelCrossSell,
+            children: t("payment.checkout.cross_sell.remove")
+          })
+        }, x.price_id))
+      }), data && checkoutSession.line_items.some(x => x.price_id === data.id) === false && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grow, {
+        in: true,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "column",
+          alignItems: "flex-end",
+          spacing: 0.5,
+          sx: {
+            border: "1px solid #eee",
+            borderRadius: 1,
+            padding: 1,
+            animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : "none",
+            mt: {
+              xs: 4,
+              md: 8
+            }
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
+            item: {
+              quantity: 1,
+              price: data,
+              price_id: data.id,
+              cross_sell: true
+            },
+            session: checkoutSession,
+            currency,
+            onUpsell: _noop.default,
+            onDownsell: _noop.default
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            sx: {
+              width: 1
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: checkoutSession.cross_sell_behavior === "required" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+                label: t("payment.checkout.required"),
+                color: "info",
+                variant: "outlined",
+                sx: {
+                  mr: 1
+                }
+              })
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+              size: "small",
+              loadingPosition: "end",
+              color: checkoutSession.cross_sell_behavior === "required" ? "info" : "info",
+              variant: checkoutSession.cross_sell_behavior === "required" ? "text" : "text",
+              loading: state.loading,
+              onClick: handleApplyCrossSell,
+              children: t("payment.checkout.cross_sell.add")
+            })]
+          })]
+        })
+      })]
+    })
+  });
+}

package/lib/theme.d.ts

@@ -0,0 +1 @@
+export default function create(settings?: any): any;

package/lib/theme.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = create;
+var _Theme = require("@arcblock/ux/lib/Theme");
+var _merge = _interopRequireDefault(require("lodash/merge"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function create(settings = {}) {
+  return (0, _Theme.createTheme)((0, _merge.default)({
+    typography: {
+      fontSize: 14,
+      allVariants: {
+        textTransform: "none"
+      }
+    }
+  }, settings));
+}

package/lib/types/index.d.ts

@@ -0,0 +1,19 @@
+import type { TCheckoutSessionExpanded, TCustomer, TPaymentIntent, TPaymentLink, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import { LiteralUnion } from 'type-fest';
+export type CheckoutContext = {
+    checkoutSession: TCheckoutSessionExpanded;
+    paymentMethods: TPaymentMethodExpanded[];
+    paymentLink?: TPaymentLink;
+    paymentIntent?: TPaymentIntent;
+    customer?: TCustomer;
+    mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+};
+export type CheckoutProps = Partial<CheckoutCallbacks> & {
+    id: string;
+    extraParams?: Record<string, any>;
+    mode?: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+};
+export type CheckoutCallbacks = {
+    onPaid: (res: CheckoutContext) => void;
+    onError: (err: Error) => void;
+};

package/lib/types/index.js

@@ -0,0 +1 @@
+"use strict";