@blocklet/payment-react 1.18.56 → 1.19.1

package/lib/checkout/donate.js

@@ -22,7 +22,7 @@ var _payment = require("../contexts/payment");
 var _livemode = _interopRequireDefault(require("../components/livemode"));
 var _mobile = require("../hooks/mobile");
 var _donate = require("../contexts/donate");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
   const donationKey = `${settings.target}-${livemode}`;
@@ -98,9 +98,9 @@ function DonateDetails({
       },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        alignItems: "center",
         spacing: 0.5,
         sx: {
+          alignItems: "center",
           flex: 3,
           overflow: "hidden"
         },
@@ -143,10 +143,10 @@ function DonateDetails({
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        alignItems: "center",
-        justifyContent: "flex-end",
         spacing: 0.5,
         sx: {
+          alignItems: "center",
+          justifyContent: "flex-end",
           flex: 1
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
@@ -184,9 +184,11 @@ function SupporterAvatar({
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
+    sx: {
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center"
+    },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
       max: 5,
       sx: {
@@ -262,12 +264,14 @@ function SupporterTable({
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: {
-      xs: 0.5,
-      sm: 1
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: {
+        xs: 0.5,
+        sm: 1
+      }
     },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
       supporters,
@@ -294,16 +298,20 @@ function SupporterSimple({
   const customers = (0, _uniqBy.default)(supporters, "customer_id");
   const customersNum = customers.length;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: {
-      xs: 0.5,
-      sm: 1
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: {
+        xs: 0.5,
+        sm: 1
+      }
     },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       component: "p",
-      color: "text.secondary",
+      sx: {
+        color: "text.secondary"
+      },
       children: customersNum === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
         style: emojiFont,
         children: t("payment.checkout.donation.empty")
@@ -485,8 +493,10 @@ function CheckoutDonateInner({
       onClick: handlePopoverOpen,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        alignItems: "center",
         spacing: 0.5,
+        sx: {
+          alignItems: "center"
+        },
         children: [donateSettings.appearance.button.icon, typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             whiteSpace: "nowrap"
@@ -527,17 +537,21 @@ function CheckoutDonateInner({
           },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          display: "flex",
-          alignItems: "center",
-          flexDirection: "column",
-          gap: 2,
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "column",
+            gap: 2
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
             ...inlineOptions.button,
             onClick: () => startDonate(),
             children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
               direction: "row",
-              alignItems: "center",
               spacing: 0.5,
+              sx: {
+                alignItems: "center"
+              },
               children: [inlineOptions?.button?.icon, typeof inlineText === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 sx: {
                   whiteSpace: "nowrap"
@@ -554,17 +568,17 @@ function CheckoutDonateInner({
   });
   const defaultRender = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: {
+        xs: 1,
+        sm: 2
+      },
       width: "100%",
       minWidth: 300,
       maxWidth: 720
     },
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: {
-      xs: 1,
-      sm: 2
-    },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
       size: donateSettings.appearance?.button?.size || "medium",
       color: donateSettings.appearance?.button?.color || "primary",
@@ -581,8 +595,10 @@ function CheckoutDonateInner({
       onClick: () => startDonate(),
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        alignItems: "center",
         spacing: 0.5,
+        sx: {
+          alignItems: "center"
+        },
         children: [donateSettings.appearance.button.icon && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             mr: 0.5,
@@ -622,9 +638,11 @@ function CheckoutDonateInner({
     children: [renderInnerView(), donation.data && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
       open: state.open,
       title: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: 0.5,
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 0.5
+        },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           variant: "h3",
           sx: {
@@ -658,10 +676,10 @@ function CheckoutDonateInner({
       }),
       maxWidth: "md",
       toolbar: isMobile ? null : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
         sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
           color: "text.secondary"
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
@@ -749,11 +767,25 @@ function CheckoutDonateInner({
     })]
   });
 }
-function CheckoutDonate(props) {
+function CheckoutDonate(rawProps) {
+  const props = Object.assign({
+    theme: "default",
+    livemode: void 0,
+    inlineOptions: {
+      button: {
+        text: "Tip"
+      }
+    },
+    timeout: 5e3,
+    mode: "default"
+  }, rawProps);
   const {
     livemode
   } = (0, _payment.usePaymentContext)();
-  const content = /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutDonateInner, {
+  const content =
+  // eslint-disable-next-line react/prop-types
+  /* @__PURE__ */
+  (0, _jsxRuntime.jsx)(CheckoutDonateInner, {
     ...props,
     livemode: props.livemode === void 0 ? livemode : props.livemode
   });
@@ -769,15 +801,4 @@ function CheckoutDonate(props) {
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
     children: content
   });
-}
-CheckoutDonate.defaultProps = {
-  theme: "default",
-  livemode: void 0,
-  timeout: 5e3,
-  mode: "default",
-  inlineOptions: {
-    button: {
-      text: "Tip"
-    }
-  }
-};
+}

package/lib/checkout/form.d.ts

@@ -1,16 +1,2 @@
 import type { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, formType, ...restProps }: CheckoutProps): import("react").JSX.Element;
-declare namespace CheckoutForm {
-    var defaultProps: {
-        onPaid: any;
-        onError: {
-            (...data: any[]): void;
-            (message?: any, ...optionalParams: any[]): void;
-        };
-        mode: string;
-        action: string;
-        extraParams: {};
-        formType: string;
-    };
-}
-export default CheckoutForm;
+export default function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, formType, ...restProps }: CheckoutProps): import("react").JSX.Element;

package/lib/checkout/form.js

@@ -14,7 +14,7 @@ var _util = require("../libs/util");
 var _payment = _interopRequireDefault(require("../payment"));
 var _theme = require("../theme");
 var _donationForm = _interopRequireDefault(require("../payment/donation-form"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const promises = {};
 const startFromPaymentLink = (id, params) => {
   if (!promises[id]) {
@@ -34,13 +34,13 @@ const fetchCheckoutSession = async id => {
 };
 function CheckoutForm({
   id,
-  mode,
-  onPaid,
-  onError,
+  mode = "inline",
+  onPaid = _noop.default,
+  onError = console.error,
   onChange,
   goBack,
-  extraParams,
-  action,
+  extraParams = {},
+  action = "",
   theme = "default",
   formType = "payment",
   ...restProps
@@ -119,12 +119,4 @@ function CheckoutForm({
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
     children: Checkout
   });
-}
-CheckoutForm.defaultProps = {
-  onPaid: _noop.default,
-  onError: console.error,
-  mode: "inline",
-  action: "",
-  extraParams: {},
-  formType: "payment"
-};
+}

package/lib/checkout/table.js

@@ -18,7 +18,7 @@ var _util = require("../libs/util");
 var _form = _interopRequireDefault(require("./form"));
 var _theme = require("../theme");
 var _truncatedText = _interopRequireDefault(require("../components/truncated-text"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const fetchData = async id => {
   const {
     data
@@ -103,8 +103,8 @@ function CheckoutTableInner({
     if (mode === "standalone") {
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "column",
-        alignItems: "center",
         sx: {
+          alignItems: "center",
           overflow: {
             xs: "auto",
             md: "hidden"
@@ -140,9 +140,9 @@ function CheckoutTableInner({
               ml: 0
             }
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            color: "text.primary",
-            fontWeight: 600,
             sx: {
+              color: "text.primary",
+              fontWeight: 600,
               lineHeight: "32px",
               fontSize: "24px"
             },

package/lib/components/blockchain/gas.d.ts

@@ -1,9 +1,5 @@
 import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
-declare function TxGas(props: {
+export default function TxGas(props: {
     details: PaymentDetails;
     method: TPaymentMethod;
 }): import("react").JSX.Element;
-declare namespace TxGas {
-    var defaultProps: {};
-}
-export default TxGas;

package/lib/components/blockchain/gas.js

@@ -10,7 +10,6 @@ var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _payment = require("../../contexts/payment");
 var _util2 = require("../../libs/util");
-TxGas.defaultProps = {};
 function TxGas(props) {
   const {
     t
@@ -31,7 +30,9 @@ function TxGas(props) {
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
     component: "small",
-    color: "text.secondary",
+    sx: {
+      color: "text.secondary"
+    },
     children: t("common.none")
   });
 }

package/lib/components/blockchain/tx.d.ts

@@ -1,14 +1,7 @@
 import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
-declare function TxLink(props: {
+export default function TxLink({ details, method, mode, align, }: {
     details: PaymentDetails;
     method: TPaymentMethod;
     mode?: 'customer' | 'dashboard';
     align?: 'left' | 'right';
 }): import("react").JSX.Element;
-declare namespace TxLink {
-    var defaultProps: {
-        mode: string;
-        align: string;
-    };
-}
-export default TxLink;

package/lib/components/blockchain/tx.js

@@ -10,25 +10,28 @@ var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _util = require("../../libs/util");
-TxLink.defaultProps = {
-  mode: "dashboard",
-  align: "left"
-};
-function TxLink(props) {
+function TxLink({
+  details,
+  method,
+  mode = "dashboard",
+  align = "left"
+}) {
   const {
     t
   } = (0, _context.useLocaleContext)();
-  if (!props.details || props.mode === "customer" && props.method.type === "stripe") {
+  if (!details || mode === "customer" && method.type === "stripe") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       component: "small",
-      color: "text.secondary",
+      sx: {
+        color: "text.secondary"
+      },
       children: t("common.none")
     });
   }
   const {
     text,
     link
-  } = (0, _util.getTxLink)(props.method, props.details);
+  } = (0, _util.getTxLink)(method, details);
   if (link && text) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
       href: link,
@@ -37,7 +40,7 @@ function TxLink(props) {
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
         direction: "row",
         alignItems: "center",
-        justifyContent: props.align === "left" ? "flex-start" : "flex-end",
+        justifyContent: align === "left" ? "flex-start" : "flex-end",
         sx: {
           color: "text.link"
         },
@@ -56,7 +59,9 @@ function TxLink(props) {
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
     component: "small",
-    color: "text.secondary",
+    sx: {
+      color: "text.secondary"
+    },
     children: t("common.none")
   });
 }

package/lib/components/confirm.d.ts

@@ -1,5 +1,5 @@
 import type { EventHandler } from 'react';
-declare function ConfirmDialog({ onConfirm, onCancel, title, message, confirm, color, cancel, loading, }: {
+export default function ConfirmDialog({ onConfirm, onCancel, title, message, confirm, color, cancel, loading, }: {
     onConfirm: EventHandler<any>;
     onCancel: EventHandler<any>;
     title: string | React.ReactNode;
@@ -9,12 +9,3 @@ declare function ConfirmDialog({ onConfirm, onCancel, title, message, confirm, c
     cancel?: boolean | string | React.ReactNode;
     loading?: boolean;
 }): import("react").JSX.Element;
-declare namespace ConfirmDialog {
-    var defaultProps: {
-        loading: boolean;
-        confirm: string;
-        cancel: string;
-        color: string;
-    };
-}
-export default ConfirmDialog;

package/lib/components/confirm.js

@@ -13,10 +13,10 @@ function ConfirmDialog({
   onCancel,
   title,
   message,
-  confirm,
-  color,
-  cancel,
-  loading
+  confirm = "",
+  color = "error",
+  cancel = "",
+  loading = false
 }) {
   const {
     t
@@ -47,10 +47,4 @@ function ConfirmDialog({
       children: message
     })
   });
-}
-ConfirmDialog.defaultProps = {
-  loading: false,
-  confirm: "",
-  cancel: "",
-  color: "error"
-};
+}

package/lib/components/country-select.d.ts

@@ -7,5 +7,6 @@ export type CountrySelectProps = {
     sx?: SxProps;
     showDialCode?: boolean;
 };
-declare const CountrySelect: import("react").ForwardRefExoticComponent<CountrySelectProps & import("react").RefAttributes<HTMLDivElement>>;
-export default CountrySelect;
+export default function CountrySelect({ ref, value, onChange, name, sx, showDialCode, }: CountrySelectProps & {
+    ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;

package/lib/components/country-select.js

@@ -3,28 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
+module.exports = CountrySelect;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _material = require("@mui/material");
 var _reactHookForm = require("react-hook-form");
 var _reactInternationalPhone = require("react-international-phone");
 var _mobile = require("../hooks/mobile");
-const Transition = (0, _react.forwardRef)(function Transition2(props, ref) {
+function Transition({
+  ref,
+  ...props
+}) {
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Slide, {
     direction: "up",
     ref,
     timeout: 200,
     ...props
   });
-});
-const CountrySelect = (0, _react.forwardRef)(({
+}
+function CountrySelect({
+  ref = void 0,
   value,
   onChange,
   name,
-  sx,
+  sx = {},
   showDialCode = false
-}, ref) => {
+}) {
   const {
     setValue
   } = (0, _reactHookForm.useFormContext)();
@@ -237,16 +241,18 @@ const CountrySelect = (0, _react.forwardRef)(({
             children: parsed.name
           }), showDialCode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             sx: {
+              color: "text.secondary",
               ml: 1
             },
-            color: "text.secondary",
             children: `+${parsed.dialCode}`
           })]
         }, parsed.iso2);
       }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
         disabled: true,
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          color: "text.secondary",
+          sx: {
+            color: "text.secondary"
+          },
           children: "No countries found"
         })
       })
@@ -313,11 +319,11 @@ const CountrySelect = (0, _react.forwardRef)(({
         setValue(name, e.target.value);
       },
       renderValue: code => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-        display: "flex",
-        alignItems: "center",
-        flexWrap: "nowrap",
-        gap: 0.5,
         sx: {
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "nowrap",
+          gap: 0.5,
           cursor: "pointer"
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
@@ -339,11 +345,11 @@ const CountrySelect = (0, _react.forwardRef)(({
     },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
       onClick: () => setOpen(true),
-      display: "flex",
-      alignItems: "center",
-      flexWrap: "nowrap",
-      gap: 0.5,
       sx: {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        gap: 0.5,
         cursor: "pointer",
         padding: "8px",
         paddingRight: "24px",
@@ -421,9 +427,4 @@ const CountrySelect = (0, _react.forwardRef)(({
       })]
     })]
   });
-});
-CountrySelect.defaultProps = {
-  sx: {},
-  showDialCode: false
-};
-module.exports = CountrySelect;
+}

package/lib/components/date-range-picker.d.ts

@@ -0,0 +1,13 @@
+export interface DateRangeValue {
+    start: number | undefined;
+    end: number | undefined;
+}
+export interface DateRangePickerProps {
+    value: DateRangeValue;
+    onChange: (value: DateRangeValue) => void;
+    label?: string;
+    size?: 'small' | 'medium';
+    fullWidth?: boolean;
+    disabled?: boolean;
+}
+export default function DateRangePicker({ value, onChange, label, size, fullWidth, disabled, }: DateRangePickerProps): import("react").JSX.Element;