@blocklet/payment-react 1.13.113

package/lib/payment/form/phone.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PhoneInput;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _react = require("react");
+var _reactHookForm = require("react-hook-form");
+var _reactInternationalPhone = require("react-international-phone");
+var _input = _interopRequireDefault(require("../../components/input"));
+var _util = require("../../util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function PhoneInput({
+  ...props
+}) {
+  const countryFieldName = props.countryFieldName || "billing_address.country";
+  const {
+    control,
+    getValues,
+    setValue
+  } = (0, _reactHookForm.useFormContext)();
+  const values = getValues();
+  const {
+    phone,
+    handlePhoneValueChange,
+    inputRef,
+    country,
+    setCountry
+  } = (0, _reactInternationalPhone.usePhoneInput)({
+    defaultCountry: (0, _util.isValidCountry)(values[countryFieldName]) ? values[countryFieldName] : "us",
+    value: values[props.name] || "",
+    countries: _reactInternationalPhone.defaultCountries,
+    onChange: data => {
+      setValue(props.name, data.phone);
+    }
+  });
+  const userCountry = (0, _reactHookForm.useWatch)({
+    control,
+    name: countryFieldName
+  });
+  (0, _react.useEffect)(() => {
+    if (userCountry !== country) {
+      setCountry(userCountry);
+    }
+  }, [userCountry]);
+  const onCountryChange = e => {
+    setCountry(e.target.value);
+    setValue(countryFieldName, e.target.value);
+  };
+  return (
+    // @ts-ignore
+    /* @__PURE__ */
+    (0, _jsxRuntime.jsx)(_input.default, {
+      value: phone,
+      onChange: handlePhoneValueChange,
+      type: "tel",
+      inputRef,
+      InputProps: {
+        startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+          position: "start",
+          style: {
+            marginRight: "2px",
+            marginLeft: "-8px"
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+            MenuProps: {
+              style: {
+                height: "300px",
+                width: "360px",
+                top: "10px",
+                left: "-34px"
+              },
+              transformOrigin: {
+                vertical: "top",
+                horizontal: "left"
+              }
+            },
+            sx: {
+              width: "max-content",
+              // Remove default outline (display only on focus)
+              fieldset: {
+                display: "none"
+              },
+              '&.Mui-focused:has(div[aria-expanded="false"])': {
+                fieldset: {
+                  display: "block"
+                }
+              },
+              // Update default spacing
+              ".MuiSelect-select": {
+                padding: "8px",
+                paddingRight: "24px !important"
+              },
+              svg: {
+                right: 0
+              }
+            },
+            value: country,
+            onChange: onCountryChange,
+            renderValue: code => /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+              iso2: code,
+              style: {
+                display: "flex"
+              }
+            }),
+            children: _reactInternationalPhone.defaultCountries.map(c => {
+              const parsed = (0, _reactInternationalPhone.parseCountry)(c);
+              return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+                value: parsed.iso2,
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+                  iso2: parsed.iso2,
+                  style: {
+                    marginRight: "8px"
+                  }
+                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                  marginRight: "8px",
+                  children: parsed.name
+                }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                  color: "gray",
+                  children: ["+", parsed.dialCode]
+                })]
+              }, parsed.iso2);
+            })
+          })
+        })
+      },
+      ...(0, _omit.default)(props, ["countryFieldName"])
+    })
+  );
+}

package/lib/payment/form/stripe.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { TCustomer } from '@blocklet/payment-types';
+type StripeCheckoutProps = {
+    clientSecret: string;
+    intentType: string;
+    publicKey: string;
+    mode: string;
+    customer: TCustomer;
+    onConfirm: Function;
+    onCancel: Function;
+};
+export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, }: StripeCheckoutProps): import("react").JSX.Element;
+export {};

package/lib/payment/form/stripe.js

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = StripeCheckout;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _lab = require("@mui/lab");
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _reactStripeJs = require("@stripe/react-stripe-js");
+var _stripeJs = require("@stripe/stripe-js");
+var _ahooks = require("ahooks");
+var _react = require("react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function StripeCheckoutForm({
+  clientSecret,
+  intentType,
+  customer,
+  mode,
+  onConfirm
+}) {
+  const stripe = (0, _reactStripeJs.useStripe)();
+  const elements = (0, _reactStripeJs.useElements)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [state, setState] = (0, _ahooks.useSetState)({
+    message: "",
+    confirming: false,
+    loaded: false
+  });
+  (0, _react.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__ */(0, _jsxRuntime.jsxs)(Content, {
+    onSubmit: handleSubmit,
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactStripeJs.PaymentElement, {
+      options: {
+        layout: "auto",
+        fields: {
+          billingDetails: "never"
+        },
+        readOnly: state.confirming
+      },
+      onReady: () => setState({
+        loaded: true
+      })
+    }), (!stripe || !elements || !state.loaded) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Center.default, {
+      relative: "parent",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+    }), stripe && elements && state.loaded && /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.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__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        mt: 1,
+        color: "error.main"
+      },
+      children: state.message
+    })]
+  });
+}
+const Content = (0, _system.styled)("form")`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+`;
+function StripeCheckout({
+  clientSecret,
+  intentType,
+  publicKey,
+  mode,
+  customer,
+  onConfirm,
+  onCancel
+}) {
+  const stripePromise = (0, _stripeJs.loadStripe)(publicKey);
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [state, setState] = (0, _ahooks.useSetState)({
+    open: true,
+    closable: true
+  });
+  const handleClose = (_, reason) => {
+    if (reason === "backdropClick") {
+      return;
+    }
+    setState({
+      open: false
+    });
+    onCancel();
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
+    title: t("payment.checkout.cardPay", {
+      action: t(`payment.checkout.${mode}`)
+    }),
+    showCloseButton: state.closable,
+    open: state.open,
+    onClose: handleClose,
+    disableEscapeKeyDown: true,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactStripeJs.Elements, {
+      options: {
+        clientSecret
+      },
+      stripe: stripePromise,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(StripeCheckoutForm, {
+        clientSecret,
+        intentType,
+        mode,
+        customer,
+        onConfirm
+      })
+    })
+  });
+}

package/lib/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/lib/payment/header.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PaymentHeader;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Theme = require("@arcblock/ux/lib/Theme");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _livemode = _interopRequireDefault(require("../components/livemode"));
+var _util = require("../util");
+var _addon = _interopRequireDefault(require("./form/addon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function PaymentHeader({
+  checkoutSession
+}) {
+  const [livemode] = (0, _ahooks.useLocalStorageState)("livemode", {
+    defaultValue: true
+  });
+  const brand = (0, _util.getStatementDescriptor)(checkoutSession.line_items);
+  const theme = (0, _Theme.useTheme)();
+  const domSize = (0, _ahooks.useSize)(document.body);
+  const isColumnLayout = (0, _ahooks.useCreation)(() => {
+    if (domSize) {
+      if (domSize?.width <= theme.breakpoints.values.md) {
+        return true;
+      }
+    }
+    return false;
+  }, [domSize, theme]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    className: "cko-header",
+    direction: "row",
+    spacing: 1,
+    alignItems: "center",
+    justifyContent: "space-between",
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      spacing: 1,
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+        variant: "square",
+        src: window.blocklet.appLogo,
+        sx: {
+          width: 32,
+          height: 32
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          color: "text.primary",
+          fontWeight: 600
+        },
+        children: brand
+      }), !livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {})]
+    }), isColumnLayout ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_addon.default, {}) : null]
+  });
+}

package/lib/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;
+}, {}, {}>;