@blocklet/payment-react 1.19.0 → 1.19.1

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

@@ -1,5 +1,5 @@
 import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
-export default function TxLink(rawProps: {
+export default function TxLink({ details, method, mode, align, }: {
     details: PaymentDetails;
     method: TPaymentMethod;
     mode?: 'customer' | 'dashboard';

package/es/components/blockchain/tx.js

@@ -4,16 +4,14 @@ import { OpenInNewOutlined } from "@mui/icons-material";
 import { Link, Stack, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 import { getTxLink } from "../../libs/util.js";
-export default function TxLink(rawProps) {
-  const props = Object.assign(
-    {
-      mode: "dashboard",
-      align: "left"
-    },
-    rawProps
-  );
+export default function TxLink({
+  details,
+  method,
+  mode = "dashboard",
+  align = "left"
+}) {
   const { t } = useLocaleContext();
-  if (!props.details || props.mode === "customer" && props.method.type === "stripe") {
+  if (!details || mode === "customer" && method.type === "stripe") {
     return /* @__PURE__ */ jsx(
       Typography,
       {
@@ -25,14 +23,14 @@ export default function TxLink(rawProps) {
       }
     );
   }
-  const { text, link } = getTxLink(props.method, props.details);
+  const { text, link } = getTxLink(method, details);
   if (link && text) {
     return /* @__PURE__ */ jsx(Link, { href: link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ 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" },
         spacing: 1,
         children: [

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

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

package/es/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;

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

@@ -0,0 +1,279 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import {
+  TextField,
+  Stack,
+  Typography,
+  useMediaQuery,
+  useTheme,
+  Popover,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Box,
+  IconButton
+} from "@mui/material";
+import { DateRange, Close, Clear } from "@mui/icons-material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import FormLabel from "./label.js";
+import { formatToDate } from "../libs/util.js";
+function DatePickerContent({
+  tempValue,
+  setTempValue,
+  handleCancel,
+  handleApply,
+  handleClear
+}) {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsx(Box, { sx: { p: 2, minWidth: 320 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(FormLabel, { children: t("common.startDate") }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          type: "date",
+          value: tempValue.startDate,
+          onChange: (e) => setTempValue((prev) => ({ ...prev, startDate: e.target.value })),
+          size: "small",
+          fullWidth: true,
+          slotProps: {
+            inputLabel: { shrink: true }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(FormLabel, { children: t("common.endDate") }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          type: "date",
+          value: tempValue.endDate,
+          onChange: (e) => setTempValue((prev) => ({ ...prev, endDate: e.target.value })),
+          size: "small",
+          fullWidth: true,
+          slotProps: {
+            inputLabel: { shrink: true }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        spacing: 1,
+        sx: {
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Button, { variant: "text", onClick: handleClear, size: "small", color: "secondary", sx: { px: 0.5, minWidth: 0 }, children: t("common.clear") }),
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleCancel, size: "small", children: t("common.cancel") }),
+            /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleApply, size: "small", children: t("common.confirm") })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+const DateFormat = "YYYY-MM-DD";
+export default function DateRangePicker({
+  value,
+  onChange,
+  label = "",
+  size = "small",
+  fullWidth = false,
+  disabled = false
+}) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const [open, setOpen] = useState(false);
+  const { t, locale } = useLocaleContext();
+  const [tempValue, setTempValue] = useState({
+    startDate: value.start ? formatToDate(value.start * 1e3, locale, DateFormat) : "",
+    endDate: value.end ? formatToDate(value.end * 1e3, locale, DateFormat) : ""
+  });
+  const anchorRef = useRef(null);
+  const formatDisplayValue = (startUnix, endUnix) => {
+    if (!startUnix || !endUnix) return t("common.selectTimeRange");
+    const start = formatToDate(startUnix * 1e3, locale, DateFormat);
+    const end = formatToDate(endUnix * 1e3, locale, DateFormat);
+    return `${start} ~ ${end}`;
+  };
+  const handleOpen = () => {
+    if (disabled) return;
+    setTempValue({
+      startDate: value.start ? formatToDate(value.start * 1e3, locale, DateFormat) : "",
+      endDate: value.end ? 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 ? formatToDate(value.start * 1e3, locale, DateFormat) : "",
+      endDate: value.end ? 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(DateRange, { fontSize: "small", sx: { mr: 1, color: "text.secondary" } }),
+            endAdornment: hasValue && !disabled && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleClear();
+                },
+                sx: {
+                  color: "text.secondary",
+                  "&:hover": { color: "text.primary" }
+                },
+                children: /* @__PURE__ */ jsx(Clear, { fontSize: "small" })
+              }
+            )
+          },
+          inputLabel: { shrink: true }
+        }
+      }
+    ),
+    !isMobile && /* @__PURE__ */ jsx(
+      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__ */ jsx(
+          DatePickerContent,
+          {
+            tempValue,
+            setTempValue,
+            handleCancel,
+            handleApply,
+            handleClear
+          }
+        )
+      }
+    ),
+    isMobile && /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open,
+        onClose: handleClose,
+        fullWidth: true,
+        maxWidth: "sm",
+        PaperProps: {
+          sx: {
+            m: 1,
+            maxHeight: "calc(100% - 64px)"
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            DialogTitle,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                pb: 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("common.selectTimeRange") }),
+                /* @__PURE__ */ jsx(IconButton, { edge: "end", color: "inherit", onClick: handleClose, "aria-label": "close", size: "small", children: /* @__PURE__ */ jsx(Close, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DialogContent, { sx: { pb: 1 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, sx: { mt: 1 }, children: [
+            /* @__PURE__ */ jsx(FormLabel, { children: t("common.startDate") }),
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                type: "date",
+                value: tempValue.startDate,
+                onChange: (e) => setTempValue((prev) => ({ ...prev, startDate: e.target.value })),
+                size: "small",
+                fullWidth: true,
+                slotProps: {
+                  inputLabel: { shrink: true }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(FormLabel, { children: t("common.endDate") }),
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                type: "date",
+                value: tempValue.endDate,
+                onChange: (e) => setTempValue((prev) => ({ ...prev, endDate: e.target.value })),
+                size: "small",
+                fullWidth: true,
+                slotProps: {
+                  inputLabel: { shrink: true }
+                }
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { sx: { px: 3, pb: 2 }, children: [
+            /* @__PURE__ */ jsx(Button, { onClick: handleCancel, color: "inherit", children: t("common.cancel") }),
+            /* @__PURE__ */ jsx(Button, { onClick: handleApply, variant: "contained", children: t("common.confirm") })
+          ] })
+        ]
+      }
+    )
+  ] });
+}

package/es/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/es/components/input.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useImperativeHandle, useRef } from "react";
-import { Box, FormLabel, InputAdornment, TextField, Typography } from "@mui/material";
+import { Box, InputAdornment, TextField, Typography } from "@mui/material";
 import get from "lodash/get";
 import { Controller, useFormContext } from "react-hook-form";
+import FormLabel from "./label.js";
 function FormInputError({ error }) {
   return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: error }) });
 }
@@ -15,6 +16,9 @@ export default function FormInput({
   errorPosition = "bottom",
   wrapperStyle = {},
   inputProps = {},
+  required = false,
+  tooltip = "",
+  description = "",
   ...rest
 }) {
   const { control, formState } = useFormContext();
@@ -30,7 +34,7 @@ export default function FormInput({
       control,
       rules,
       render: ({ field }) => /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...wrapperStyle }, children: [
-        !!label && /* @__PURE__ */ jsx(FormLabel, { sx: { color: "text.primary" }, children: label }),
+        !!label && /* @__PURE__ */ jsx(FormLabel, { required, tooltip, description, children: label }),
         /* @__PURE__ */ jsx(
           TextField,
           {

package/es/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/es/components/label.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfoOutlined } from "@mui/icons-material";
+import { Box, FormLabel, Tooltip, Typography } from "@mui/material";
+export default function CustomFormLabel({
+  children,
+  required = false,
+  tooltip = "",
+  description = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 1, width: "100%" }, children: [
+    /* @__PURE__ */ jsxs(
+      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__ */ jsx(Typography, { component: "span", color: "error", children: "*" }),
+          tooltip && (typeof tooltip === "string" ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx(InfoOutlined, { fontSize: "small", sx: { opacity: 0.7 } }) }) : tooltip)
+        ]
+      }
+    ),
+    description && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          color: "text.secondary"
+        },
+        children: description
+      }
+    )
+  ] });
+}

package/es/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/es/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 {};