@blocklet/payment-react 1.19.0 → 1.19.1

package/lib/components/date-range-picker.js

@@ -0,0 +1,329 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = DateRangePicker;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _label = _interopRequireDefault(require("./label"));
+var _util = require("../libs/util");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function DatePickerContent({
+  tempValue,
+  setTempValue,
+  handleCancel,
+  handleApply,
+  handleClear
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+    sx: {
+      p: 2,
+      minWidth: 320
+    },
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      spacing: 2,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+          children: t("common.startDate")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+          type: "date",
+          value: tempValue.startDate,
+          onChange: e => setTempValue(prev => ({
+            ...prev,
+            startDate: e.target.value
+          })),
+          size: "small",
+          fullWidth: true,
+          slotProps: {
+            inputLabel: {
+              shrink: true
+            }
+          }
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+          children: t("common.endDate")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+          type: "date",
+          value: tempValue.endDate,
+          onChange: e => setTempValue(prev => ({
+            ...prev,
+            endDate: e.target.value
+          })),
+          size: "small",
+          fullWidth: true,
+          slotProps: {
+            inputLabel: {
+              shrink: true
+            }
+          }
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+          justifyContent: "space-between"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "text",
+          onClick: handleClear,
+          size: "small",
+          color: "secondary",
+          sx: {
+            px: 0.5,
+            minWidth: 0
+          },
+          children: t("common.clear")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          spacing: 1,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "outlined",
+            onClick: handleCancel,
+            size: "small",
+            children: t("common.cancel")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "contained",
+            onClick: handleApply,
+            size: "small",
+            children: t("common.confirm")
+          })]
+        })]
+      })]
+    })
+  });
+}
+const DateFormat = "YYYY-MM-DD";
+function DateRangePicker({
+  value,
+  onChange,
+  label = "",
+  size = "small",
+  fullWidth = false,
+  disabled = false
+}) {
+  const theme = (0, _material.useTheme)();
+  const isMobile = (0, _material.useMediaQuery)(theme.breakpoints.down("sm"));
+  const [open, setOpen] = (0, _react.useState)(false);
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const [tempValue, setTempValue] = (0, _react.useState)({
+    startDate: value.start ? (0, _util.formatToDate)(value.start * 1e3, locale, DateFormat) : "",
+    endDate: value.end ? (0, _util.formatToDate)(value.end * 1e3, locale, DateFormat) : ""
+  });
+  const anchorRef = (0, _react.useRef)(null);
+  const formatDisplayValue = (startUnix, endUnix) => {
+    if (!startUnix || !endUnix) return t("common.selectTimeRange");
+    const start = (0, _util.formatToDate)(startUnix * 1e3, locale, DateFormat);
+    const end = (0, _util.formatToDate)(endUnix * 1e3, locale, DateFormat);
+    return `${start} ~ ${end}`;
+  };
+  const handleOpen = () => {
+    if (disabled) return;
+    setTempValue({
+      startDate: value.start ? (0, _util.formatToDate)(value.start * 1e3, locale, DateFormat) : "",
+      endDate: value.end ? (0, _util.formatToDate)(value.end * 1e3, locale, DateFormat) : ""
+    });
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleApply = () => {
+    const unixValue = {
+      start: tempValue.startDate ? Math.floor((/* @__PURE__ */new Date(`${tempValue.startDate}T00:00:00`)).getTime() / 1e3) : 0,
+      end: tempValue.endDate ? Math.floor((/* @__PURE__ */new Date(`${tempValue.endDate}T23:59:59`)).getTime() / 1e3) : 0
+    };
+    onChange(unixValue);
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    setTempValue({
+      startDate: value.start ? (0, _util.formatToDate)(value.start * 1e3, locale, DateFormat) : "",
+      endDate: value.end ? (0, _util.formatToDate)(value.end * 1e3, locale, DateFormat) : ""
+    });
+    setOpen(false);
+  };
+  const handleClear = () => {
+    const emptyValue = {
+      start: void 0,
+      end: void 0
+    };
+    onChange(emptyValue);
+    setTempValue({
+      startDate: "",
+      endDate: ""
+    });
+    setOpen(false);
+  };
+  const hasValue = !!value.start && !!value.end;
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+      ref: anchorRef,
+      label,
+      value: formatDisplayValue(value.start, value.end),
+      size,
+      fullWidth,
+      disabled,
+      sx: {
+        "& .MuiInputBase-input": {
+          cursor: disabled ? "default" : "pointer"
+        }
+      },
+      onClick: handleOpen,
+      placeholder: t("common.selectTimeRange"),
+      slotProps: {
+        input: {
+          readOnly: true,
+          startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.DateRange, {
+            fontSize: "small",
+            sx: {
+              mr: 1,
+              color: "text.secondary"
+            }
+          }),
+          endAdornment: hasValue && !disabled && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: e => {
+              e.stopPropagation();
+              handleClear();
+            },
+            sx: {
+              color: "text.secondary",
+              "&:hover": {
+                color: "text.primary"
+              }
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Clear, {
+              fontSize: "small"
+            })
+          })
+        },
+        inputLabel: {
+          shrink: true
+        }
+      }
+    }), !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Popover, {
+      open,
+      anchorEl: anchorRef.current,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      sx: {
+        "& .MuiPaper-root": {
+          boxShadow: theme.shadows[8],
+          border: `1px solid ${theme.palette.divider}`
+        }
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(DatePickerContent, {
+        tempValue,
+        setTempValue,
+        handleCancel,
+        handleApply,
+        handleClear
+      })
+    }), isMobile && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Dialog, {
+      open,
+      onClose: handleClose,
+      fullWidth: true,
+      maxWidth: "sm",
+      PaperProps: {
+        sx: {
+          m: 1,
+          maxHeight: "calc(100% - 64px)"
+        }
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogTitle, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          pb: 1
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h6",
+          children: t("common.selectTimeRange")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+          edge: "end",
+          color: "inherit",
+          onClick: handleClose,
+          "aria-label": "close",
+          size: "small",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Close, {})
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogContent, {
+        sx: {
+          pb: 1
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          spacing: 2,
+          sx: {
+            mt: 1
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+            children: t("common.startDate")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+            type: "date",
+            value: tempValue.startDate,
+            onChange: e => setTempValue(prev => ({
+              ...prev,
+              startDate: e.target.value
+            })),
+            size: "small",
+            fullWidth: true,
+            slotProps: {
+              inputLabel: {
+                shrink: true
+              }
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+            children: t("common.endDate")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+            type: "date",
+            value: tempValue.endDate,
+            onChange: e => setTempValue(prev => ({
+              ...prev,
+              endDate: e.target.value
+            })),
+            size: "small",
+            fullWidth: true,
+            slotProps: {
+              inputLabel: {
+                shrink: true
+              }
+            }
+          })]
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogActions, {
+        sx: {
+          px: 3,
+          pb: 2
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          onClick: handleCancel,
+          color: "inherit",
+          children: t("common.cancel")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          onClick: handleApply,
+          variant: "contained",
+          children: t("common.confirm")
+        })]
+      })]
+    })]
+  });
+}

package/lib/components/input.d.ts

@@ -8,9 +8,12 @@ type InputProps = TextFieldProps & {
     errorPosition?: 'right' | 'bottom';
     rules?: RegisterOptions;
     wrapperStyle?: React.CSSProperties;
+    required?: boolean;
+    tooltip?: ReactNode | string;
+    description?: ReactNode | string;
 };
-export default function FormInput({ ref, name, label, placeholder, rules, errorPosition, wrapperStyle, inputProps, ...rest }: InputProps & {
-    ref?: React.RefObject<HTMLInputElement>;
+export default function FormInput({ ref, name, label, placeholder, rules, errorPosition, wrapperStyle, inputProps, required, tooltip, description, ...rest }: InputProps & {
+    ref?: React.RefObject<HTMLInputElement | null>;
     inputProps?: TextFieldProps['inputProps'];
 }): JSX.Element;
 export {};

package/lib/components/input.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _material = require("@mui/material");
 var _get = _interopRequireDefault(require("lodash/get"));
 var _reactHookForm = require("react-hook-form");
+var _label = _interopRequireDefault(require("./label"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function FormInputError({
   error
@@ -31,6 +32,9 @@ function FormInput({
   errorPosition = "bottom",
   wrapperStyle = {},
   inputProps = {},
+  required = false,
+  tooltip = "",
+  description = "",
   ...rest
 }) {
   const {
@@ -53,10 +57,10 @@ function FormInput({
         width: "100%",
         ...wrapperStyle
       },
-      children: [!!label && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
-        sx: {
-          color: "text.primary"
-        },
+      children: [!!label && /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+        required,
+        tooltip,
+        description,
         children: label
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
         fullWidth: true,

package/lib/components/label.d.ts

@@ -0,0 +1,7 @@
+import type { FormLabelProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export default function CustomFormLabel({ children, required, tooltip, description, ...props }: FormLabelProps & {
+    required?: boolean;
+    tooltip?: ReactNode | string;
+    description?: ReactNode | string;
+}): import("react").JSX.Element;

package/lib/components/label.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CustomFormLabel;
+var _jsxRuntime = require("react/jsx-runtime");
+var _iconsMaterial = require("@mui/icons-material");
+var _material = require("@mui/material");
+function CustomFormLabel({
+  children,
+  required = false,
+  tooltip = "",
+  description = "",
+  ...props
+}) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      mb: 1,
+      width: "100%"
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.FormLabel, {
+      ...props,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        fontWeight: 500,
+        color: "text.primary",
+        "&.MuiFormLabel-root": {
+          display: "flex",
+          alignItems: "center",
+          gap: 0.5,
+          fontWeight: 500,
+          color: "text.primary"
+        },
+        ...(props.sx || {})
+      },
+      children: [children, required && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "span",
+        color: "error",
+        children: "*"
+      }), tooltip && (typeof tooltip === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: tooltip,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.InfoOutlined, {
+          fontSize: "small",
+          sx: {
+            opacity: 0.7
+          }
+        })
+      }) : tooltip)]
+    }), description && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      variant: "caption",
+      sx: {
+        color: "text.secondary"
+      },
+      children: description
+    })]
+  });
+}

package/lib/components/loading-button.d.ts

@@ -7,7 +7,7 @@ export interface LoadingButtonProps extends ButtonProps {
     loadingOnly?: boolean;
 }
 declare function LoadingButton({ ref, children, loading, loadingPosition, loadingIndicator, loadingProps, loadingOnly, onClick, sx, ...props }: LoadingButtonProps & {
-    ref?: React.RefObject<HTMLButtonElement>;
+    ref?: React.RefObject<HTMLButtonElement | null>;
 }): import("react").JSX.Element;
 declare namespace LoadingButton {
     var displayName: string;

package/lib/history/credit/grants-list.d.ts

@@ -0,0 +1,14 @@
+type Props = {
+    customer_id?: string;
+    subscription_id?: string;
+    status?: string;
+    pageSize?: number;
+    onTableDataChange?: Function;
+    mode?: 'dashboard' | 'portal';
+};
+export declare function StatusChip({ status, label }: {
+    status: string;
+    label?: string;
+}): JSX.Element;
+export default function CreditGrantsList(rawProps: Props): JSX.Element;
+export {};