@blocklet/payment-react/lib/payment/progress-item.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.VendorPlaceholder = VendorPlaceholder;
exports.VendorProgressItem = VendorProgressItem;
var _jsxRuntime = require("react/jsx-runtime");
var _context = require("@arcblock/ux/lib/Locale/context");
var _material = require("@mui/material");
var _react = require("react");
var _iconsMaterial = require("@mui/icons-material");
function VendorPlaceholder() {
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      mb: 2
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
      sx: {
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        mb: 1
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
        variant: "rounded",
        height: 16,
        width: 150
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
        variant: "rounded",
        height: 16,
        width: 50
      })]
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
      variant: "rounded",
      height: 8,
      width: "100%"
    })]
  });
}
const getVendorLabel = (vendor, isFailed, t) => {
  const name = vendor.name || vendor.title;
  const isCompleted = vendor.status === "delivered";
  if (vendor.vendorType === "didnames") {
    if (isFailed) {
      return t("payment.checkout.vendor.didnames.failed", {
        name
      });
    }
    if (isCompleted) {
      return t("payment.checkout.vendor.didnames.completed", {
        name
      });
    }
    return t("payment.checkout.vendor.didnames.processing", {
      name
    });
  }
  if (isFailed) {
    return t("payment.checkout.vendor.launcher.failed", {
      name
    });
  }
  if (isCompleted) {
    return t("payment.checkout.vendor.launcher.completed", {
      name
    });
  }
  return t("payment.checkout.vendor.launcher.processing", {
    name
  });
};
function VendorProgressItem({
  vendor
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  const [displayProgress, setDisplayProgress] = (0, _react.useState)(0);
  const animationRef = (0, _react.useRef)();
  const startAnimation = (0, _react.useCallback)(() => {
    const realProgress = vendor.progress || 0;
    let startTime;
    let startProgress;
    const animate = currentTime => {
      if (!startTime) {
        startTime = currentTime;
        startProgress = displayProgress;
      }
      const elapsed = currentTime - startTime;
      let newProgress;
      if (realProgress === 100) {
        newProgress = 100;
      } else if (realProgress === 0) {
        newProgress = Math.min(startProgress + elapsed / 1e3, 99);
      } else if (realProgress > startProgress) {
        const duration = 1e3;
        const progress = Math.min(elapsed / duration, 1);
        newProgress = startProgress + (realProgress - startProgress) * progress;
      } else {
        newProgress = Math.min(startProgress + elapsed / 1e3, 99);
      }
      newProgress = Math.round(newProgress);
      setDisplayProgress(pre => Math.min(pre > newProgress ? pre : newProgress, 100));
      if (realProgress === 100) {
        return;
      }
      if (newProgress < 99 && realProgress < 100) {
        animationRef.current = requestAnimationFrame(animate);
      }
    };
    if (animationRef.current) {
      cancelAnimationFrame(animationRef.current);
    }
    animationRef.current = requestAnimationFrame(animate);
  }, [vendor.progress, displayProgress]);
  (0, _react.useEffect)(() => {
    startAnimation();
    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
      }
    };
  }, [startAnimation]);
  const isCompleted = displayProgress >= 100;
  const isFailed = vendor.status === "failed";
  const nameText = getVendorLabel(vendor, isFailed, t);
  if (isFailed) {
    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
      sx: {
        mb: 2
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
        sx: {
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          mb: 1
        },
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "body2",
          sx: {
            color: "text.secondary"
          },
          children: nameText
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "body2",
          sx: {
            color: "error.main",
            fontWeight: 500
          },
          children: t("payment.checkout.vendor.progress", {
            progress: 0
          })
        })]
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.LinearProgress, {
        variant: "determinate",
        value: 100,
        sx: {
          height: 8,
          borderRadius: 4,
          backgroundColor: "grey.200",
          "& .MuiLinearProgress-bar": {
            borderRadius: 4,
            backgroundColor: "error.main"
          }
        }
      })]
    });
  }
  if (!vendor.name && !vendor.title) {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(VendorPlaceholder, {});
  }
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      mb: 2
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
      sx: {
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        mb: 1
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
        variant: "body2",
        sx: {
          color: "text.secondary",
          display: "flex",
          alignItems: "center"
        },
        children: [nameText, " ", isCompleted ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Check, {
          sx: {
            color: "success.main",
            ml: 0.5
          },
          fontSize: "small"
        }) : null]
      }), isCompleted ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        variant: "body2",
        sx: {
          color: "text.secondary",
          fontWeight: 500
        },
        children: t("payment.checkout.vendor.progress", {
          progress: displayProgress
        })
      })]
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.LinearProgress, {
      variant: "determinate",
      value: displayProgress || 0,
      sx: {
        height: 8,
        borderRadius: 4,
        backgroundColor: "grey.200",
        "& .MuiLinearProgress-bar": {
          borderRadius: 4,
          backgroundColor: isCompleted ? "success.main" : "primary.main",
          transition: "background-color 0.3s linear"
        }
      }
    })]
  });
}