@blocklet/payment-react/lib/components/source-data-viewer.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _jsxRuntime = require("react/jsx-runtime");
var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
var _context = require("@arcblock/ux/lib/Locale/context");
var _material = require("@mui/material");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function SourceDataViewer({
  data,
  compact = false,
  maxItems = void 0,
  locale: propLocale = void 0,
  showGroups = false
}) {
  const {
    locale: contextLocale,
    t
  } = (0, _context.useLocaleContext)();
  const currentLocale = propLocale || contextLocale || "en";
  if (!data || Array.isArray(data) && data.length === 0 || typeof data === "object" && Object.keys(data).length === 0) {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
      children: t("common.none")
    });
  }
  const getLocalizedText = text => {
    if (typeof text === "string") {
      return text;
    }
    return text[currentLocale] || text.en || "";
  };
  const isSimpleSourceData = sourceData => {
    return typeof sourceData === "object" && !Array.isArray(sourceData) && sourceData !== null;
  };
  const isUrlLike = str => {
    try {
      new URL(str);
      return true;
    } catch {
      return /^https?:\/\/.+/.test(str) || /^www\..+/.test(str);
    }
  };
  const normalizeData = inputData => {
    if (isSimpleSourceData(inputData)) {
      return Object.entries(inputData).map(([key, value]) => {
        const stringValue = String(value);
        const isUrl = isUrlLike(stringValue);
        return {
          key,
          label: key.replace(/_/g, " ").replace(/\b\w/g, l => l.toUpperCase()),
          value: stringValue,
          type: isUrl ? "url" : "text",
          url: isUrl ? stringValue : void 0
        };
      });
    }
    return inputData;
  };
  const renderFieldValue = field => {
    const displayValue = field.value;
    if (field.type === "url") {
      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
        href: field.url || field.value,
        target: "_blank",
        rel: "noopener noreferrer",
        sx: {
          color: "primary.main",
          textDecoration: "none",
          fontSize: "0.85rem",
          fontWeight: 600,
          lineHeight: 1.4,
          "&:hover": {
            textDecoration: "underline",
            color: "primary.dark"
          },
          "&:visited": {
            color: "primary.main"
          }
        },
        children: displayValue
      });
    }
    if (field.type === "image") {
      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
        sx: {
          display: "flex",
          alignItems: "center",
          gap: 1
        },
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
          component: "img",
          src: field.url || field.value,
          alt: displayValue,
          sx: {
            width: 24,
            height: 24,
            borderRadius: 1,
            objectFit: "cover"
          }
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "body2",
          sx: {
            fontWeight: 500
          },
          children: displayValue
        })]
      });
    }
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      variant: "body2",
      sx: {
        fontWeight: 500,
        color: "text.primary"
      },
      children: displayValue
    });
  };
  if (!data || Array.isArray(data) && data.length === 0 || typeof data === "object" && Object.keys(data).length === 0) {
    return null;
  }
  const normalizedData = normalizeData(data);
  const displayItems = maxItems ? normalizedData.slice(0, maxItems) : normalizedData;
  if (compact) {
    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
      direction: "row",
      spacing: 1,
      useFlexGap: true,
      sx: {
        flexWrap: "wrap"
      },
      children: [displayItems.map(field => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
        label: `${getLocalizedText(field.label)}: ${field.value}`,
        size: "small",
        variant: "outlined",
        sx: {
          maxWidth: 200
        }
      }, field.key)), maxItems && normalizedData.length > maxItems && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
        label: `+${normalizedData.length - maxItems} more`,
        size: "small",
        color: "primary",
        variant: "outlined"
      })]
    });
  }
  if (showGroups) {
    const groupedData = displayItems.reduce((acc, field) => {
      const group = field.group || "default";
      if (!acc[group]) acc[group] = [];
      acc[group].push(field);
      return acc;
    }, {});
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
      spacing: 2.5,
      children: Object.entries(groupedData).map(([group, fields]) => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
        children: [group !== "default" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "subtitle2",
          sx: {
            mb: 1.5,
            fontWeight: 700,
            color: "text.primary",
            letterSpacing: "0.5px",
            borderBottom: "1px solid",
            borderColor: "divider",
            pb: 0.5
          },
          children: group.replace(/_/g, " ").replace(/\b\w/g, l => l.toUpperCase())
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
          spacing: 1.2,
          sx: {
            pl: group !== "default" ? 1 : 0
          },
          children: fields.map(field => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
            sx: {
              display: "flex",
              flexDirection: "row",
              alignItems: "flex-start",
              gap: 3,
              minHeight: 20
            },
            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              variant: "body2",
              sx: {
                color: "text.secondary",
                fontSize: "0.8rem",
                minWidth: 100,
                fontWeight: 600,
                lineHeight: 1.4
              },
              children: getLocalizedText(field.label)
            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
              sx: {
                flex: 1,
                minWidth: 0,
                wordBreak: "break-all",
                whiteSpace: "wrap"
              },
              children: renderFieldValue(field)
            })]
          }, field.key))
        })]
      }, group))
    });
  }
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
    spacing: 1.5,
    children: displayItems.map(field => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
      sx: {
        display: "flex",
        flexDirection: "row",
        alignItems: "flex-start",
        gap: 3,
        minHeight: 20
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        variant: "body2",
        sx: {
          color: "text.secondary",
          fontSize: "0.8rem",
          minWidth: 100,
          fontWeight: 600,
          lineHeight: 1.4
        },
        children: getLocalizedText(field.label)
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          flex: 1,
          minWidth: 0
        },
        children: renderFieldValue(field)
      })]
    }, field.key))
  });
}
module.exports = SourceDataViewer;