@blocklet/payment-react 1.14.21 → 1.14.23

package/lib/components/country-select.js

@@ -0,0 +1,115 @@
+"use strict";
+
+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");
+CountrySelect.defaultProps = {
+  sx: {}
+};
+function CountrySelect({
+  value,
+  onChange,
+  name,
+  sx
+}) {
+  const {
+    setValue
+  } = (0, _reactHookForm.useFormContext)();
+  const countryDetail = (0, _react.useMemo)(() => {
+    const item = _reactInternationalPhone.defaultCountries.find(v => v[1] === value);
+    return value && item ? (0, _reactInternationalPhone.parseCountry)(item) : {
+      name: ""
+    };
+  }, [value]);
+  const onCountryChange = e => {
+    onChange(e.target.value);
+    setValue(name, e.target.value);
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+    MenuProps: {
+      style: {
+        height: "300px",
+        top: "10px"
+      },
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      }
+    },
+    sx: {
+      width: "100%",
+      // 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
+      },
+      ".MuiMenuItem-root": {
+        justifyContent: "flex-start"
+        // 确保内容左对齐
+      },
+
+      ...sx
+    },
+    value,
+    onChange: onCountryChange,
+    renderValue: code => {
+      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        gap: 0.5,
+        sx: {
+          cursor: "pointer"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+          iso2: code,
+          style: {
+            display: "flex"
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: countryDetail?.name
+        })]
+      });
+    },
+    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);
+    })
+  });
+}

package/lib/components/input.d.ts

@@ -1,25 +1,25 @@
 /// <reference types="react" />
-import { TextFieldProps } from '@mui/material';
 import { RegisterOptions } from 'react-hook-form';
-type InputProps = TextFieldProps & {
+declare const FormInput: import("react").ForwardRefExoticComponent<(Omit<import("@mui/material").OutlinedTextFieldProps & {
     name: string;
-    label?: string;
-    placeholder?: string;
-    errorPosition?: 'right' | 'bottom';
-    rules?: RegisterOptions;
-    wrapperStyle?: React.CSSProperties;
-};
-export declare function FormInputError({ error }: {
-    error: string;
-}): import("react").JSX.Element;
-declare function FormInput({ name, label, placeholder, rules, errorPosition, wrapperStyle, ...rest }: InputProps): import("react").JSX.Element;
-declare namespace FormInput {
-    var defaultProps: {
-        label: string;
-        placeholder: string;
-        errorPosition: string;
-        rules: {};
-        wrapperStyle: {};
-    };
-}
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    errorPosition?: "bottom" | "right" | undefined;
+    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    wrapperStyle?: any;
+}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
+    name: string;
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    errorPosition?: "bottom" | "right" | undefined;
+    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    wrapperStyle?: any;
+}, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
+    name: string;
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    errorPosition?: "bottom" | "right" | undefined;
+    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    wrapperStyle?: any;
+}, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
 export default FormInput;

package/lib/components/input.js

@@ -3,20 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FormInputError = FormInputError;
-module.exports = FormInput;
+
 var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
 var _material = require("@mui/material");
 var _get = _interopRequireDefault(require("lodash/get"));
 var _reactHookForm = require("react-hook-form");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-FormInput.defaultProps = {
-  label: "",
-  placeholder: "",
-  errorPosition: "bottom",
-  rules: {},
-  wrapperStyle: {}
-};
 function FormInputError({
   error
 }) {
@@ -29,7 +22,7 @@ function FormInputError({
     })
   });
 }
-function FormInput({
+const FormInput = (0, _react.forwardRef)(({
   name,
   label,
   placeholder,
@@ -37,11 +30,15 @@ function FormInput({
   errorPosition,
   wrapperStyle,
   ...rest
-}) {
+}, ref) => {
   const {
     control,
     formState
   } = (0, _reactHookForm.useFormContext)();
+  const inputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => {
+    return inputRef.current;
+  });
   const error = (0, _get.default)(formState.errors, name)?.message;
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
     name,
@@ -55,6 +52,9 @@ function FormInput({
         ...wrapperStyle
       },
       children: [!!label && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+        sx: {
+          color: "text.primary"
+        },
         children: label
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
         fullWidth: true,
@@ -64,6 +64,7 @@ function FormInput({
         size: "small",
         ...field,
         ...rest,
+        inputRef,
         InputProps: Object.assign(rest.InputProps || {}, errorPosition === "right" && error ? {
           endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(FormInputError, {
             error
@@ -72,4 +73,12 @@ function FormInput({
       })]
     })
   });
-}
+});
+FormInput.defaultProps = {
+  label: "",
+  placeholder: "",
+  errorPosition: "bottom",
+  rules: {},
+  wrapperStyle: {}
+};
+module.exports = FormInput;

package/lib/components/livemode.js

@@ -18,6 +18,7 @@ function Livemode({
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
     label: t("common.livemode"),
     size: "small",
+    color: "warning",
     sx: {
       ml: 2,
       height: 18,

package/lib/components/pricing-table.js

@@ -266,7 +266,6 @@ function PricingTable({
                     color: "text.primary",
                     fontWeight: 600,
                     sx: {
-                      color: "#4B5563",
                       fontSize: "18px !important",
                       fontWeight: "600"
                     },
@@ -293,7 +292,6 @@ function PricingTable({
                   color: "text.secondary",
                   sx: {
                     marginTop: "0px !important",
-                    color: "#4b5563",
                     fontWeight: "400",
                     fontSize: "16px",
                     textAlign: "left"

package/lib/components/status.js

@@ -9,14 +9,13 @@ var _material = require("@mui/material");
 function Status(props) {
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
     size: "small",
-    variant: "outlined",
+    variant: "filled",
     ...props,
     sx: {
       ...(props.sx || {}),
       borderRadius: "4px",
       height: 20,
-      textTransform: "capitalize",
-      marginRight: "10px"
+      textTransform: "capitalize"
     }
   });
 }

package/lib/components/table.d.ts

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

package/lib/components/table.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = _interopRequireDefault(require("react"));
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _Datatable = _interopRequireDefault(require("@arcblock/ux/lib/Datatable"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _system = require("@mui/system");
+var _mobile = require("../hooks/mobile");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function EmptyStub() {
+  return null;
+}
+const Table = _react.default.memo(({
+  options,
+  columns,
+  toolbar = true,
+  footer = true,
+  hasRowLink = false,
+  emptyNodeText = "",
+  ...rest
+}) => {
+  const {
+    locale,
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
+  const defaultOptions = {
+    print: false,
+    download: false,
+    filter: false,
+    selectableRows: "none",
+    rowsPerPage: 10,
+    rowsPerPageOptions: [10, 20, 50, 100],
+    searchDebounceTime: 300,
+    tableBodyHeight: "100%",
+    loading: true
+  };
+  const components = {};
+  if (!toolbar) {
+    components.TableToolbar = EmptyStub;
+  }
+  if (!footer) {
+    components.TableFooter = EmptyStub;
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Wrapped, {
+    locale,
+    options: {
+      ...defaultOptions,
+      ...options
+    },
+    columns: columns.map(x => {
+      x.options = x.options || {};
+      x.options.filter = x.options.filter || false;
+      x.options.sort = x.options.sort || false;
+      return x;
+    }),
+    emptyNode: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
+      children: emptyNodeText || t("empty.records")
+    }),
+    ...rest,
+    components,
+    hasRowLink,
+    isMobile
+  });
+});
+const Wrapped = (0, _system.styled)(_Datatable.default)`
+  ${props => props.hasRowLink ? `.MuiTableCell-root {
+    font-size: 1rem !important;
+  }` : ""}
+  .MuiPaper-root {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  table.MuiTable-root {
+    outline: 1px solid var(--stroke-border-base, #eff1f5);
+    border-radius: var(--radius-m, 8px);
+    overflow: hidden;
+  }
+  [class*='MUIDataTable-responsiveBase'] {
+    outline: 1px solid var(--stroke-border-base, #eff1f5);
+    border-radius: var(--radius-m, 8px);
+  }
+
+  th.MuiTableCell-head {
+    padding: 8px 16px 8px 16px;
+    text-transform: inherit;
+    background: var(--backgrounds-bg-subtle, #f9fafb);
+    border-bottom: none;
+    &:first-of-type {
+      border-top-left-radius: 8px;
+      padding-left: 20px;
+    }
+    &:last-of-type {
+      border-top-right-radius: 8px;
+    }
+  }
+
+  tr.MuiTableRow-root:not(.MuiTableRow-footer):hover {
+    background: #f5f5f5;
+  }
+  tr.MuiTableRow-root:last-of-type td:first-of-type {
+    border-bottom-left-radius: 8px;
+  }
+
+  tr.MuiTableRow-root:last-of-type td:last-of-type {
+    border-bottom-right-radius: 8px;
+  }
+
+  tr.MuiTableRow-root:nth-of-type(even) {
+    background: var(--backgrounds-bg-subtle, #f9fafb);
+  }
+  td.MuiTableCell-root {
+    border-bottom: none;
+    &:first-of-type {
+      padding-left: 20px;
+    }
+    &.MuiTableCell-footer {
+      border: none;
+    }
+  }
+
+  .datatable-footer {
+    .MuiTableRow-root.MuiTableRow-footer {
+      border: none;
+    }
+    table.MuiTable-root {
+      outline: none;
+      overflow: hidden;
+    }
+    .MuiTablePagination-input {
+      background: none;
+    }
+    div.MuiSelect-select {
+      padding: 0 24px 0 0;
+    }
+  }
+
+  th a,
+  td a {
+    text-decoration: none;
+    display: block;
+    color: inherit;
+    &:first-of-type {
+      padding-left: 0;
+    }
+  }
+
+  > div {
+    overflow: auto;
+  }
+  @media (max-width: ${({
+  theme
+}) => theme.breakpoints.values.md}px) {
+    th a,
+    td a {
+      text-decoration: none;
+      display: block;
+      color: inherit;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 0;
+    }
+    tr.MuiTableRow-root {
+      border: none;
+      padding: 20px;
+      display: block;
+    }
+    td.MuiTableCell-root:first-of-type {
+      padding-left: 0;
+      margin-top: 0;
+    }
+    td.MuiTableCell-root {
+      margin: 0;
+      margin-top: 8px;
+      align-items: center;
+      padding: 0;
+      flex-wrap: wrap;
+      flex-direction: ${({
+  mobileTDFlexDirection = "column"
+}) => mobileTDFlexDirection || "row"};
+      align-items: ${({
+  mobileTDFlexDirection = "column"
+}) => mobileTDFlexDirection === "column" ? "flex-start" : "center"};
+      justify-content: ${({
+  mobileTDFlexDirection = "column"
+}) => mobileTDFlexDirection === "column" ? "flex-start" : "space-between"};
+    }
+    td.MuiTableCell-root > div {
+      margin-bottom: 4px;
+    }
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      display: flex;
+      flex-direction: ${({
+  mobileTDFlexDirection = "column"
+}) => mobileTDFlexDirection || "row"};
+      align-items: flex-start;
+      justify-content: ${({
+  mobileTDFlexDirection = "column"
+}) => mobileTDFlexDirection === "row" ? "space-between" : "flex-start"};
+      flex-wrap: ${({
+  mobileTDFlexDirection = "column"
+}) => mobileTDFlexDirection === "row" ? "nowrap" : "wrap"};
+      word-break: break-all;
+      &.datatables-noprint {
+        justify-content: center;
+      }
+    }
+    [class*='MUIDataTable-responsiveBase'] tr:not([class*='responsiveSimple']) td.MuiTableCell-body > div {
+      width: inherit;
+    }
+  }
+`;
+module.exports = Table;

package/lib/contexts/payment.d.ts

@@ -18,6 +18,8 @@ export type PaymentContextType = {
     getMethod: (methodId: string) => TPaymentMethodExpanded | undefined;
     setLivemode: (livemode: boolean) => void;
     api: Axios;
+    payable: boolean;
+    setPayable: (status: boolean) => void;
 };
 export type PaymentContextProps = {
     session: import('@arcblock/did-connect/lib/types').SessionContext['session'];

package/lib/contexts/payment.js

@@ -54,6 +54,7 @@ function PaymentProvider({
     defaultValue: true
   });
   const prefix = (0, _util.getPrefix)();
+  const [payable, setPayable] = (0, _react.useState)(true);
   if (error) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
       severity: "error",
@@ -74,7 +75,9 @@ function PaymentProvider({
       getMethod: methodId => getMethod(methodId, data.paymentMethods),
       refresh: run,
       setLivemode,
-      api: _api.default
+      api: _api.default,
+      payable,
+      setPayable
     },
     children
   });

package/lib/history/invoice/list.d.ts

@@ -9,8 +9,9 @@ type Props = {
     pageSize?: number;
     target?: string;
     action?: string;
+    type?: 'list' | 'table';
 };
-declare function CustomerInvoiceList({ customer_id, subscription_id, currency_id, include_staking, include_recovered_from, status, pageSize, target, action, }: Props): import("react").JSX.Element;
+declare function CustomerInvoiceList(props: Props): JSX.Element;
 declare namespace CustomerInvoiceList {
     var defaultProps: {
         customer_id: string;
@@ -22,6 +23,7 @@ declare namespace CustomerInvoiceList {
         pageSize: number;
         target: string;
         action: string;
+        type: string;
     };
 }
 export default CustomerInvoiceList;