@blocklet/payment-react/lib/components/price-change-confirm.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = PriceChangeConfirm;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _WarningAmber = _interopRequireDefault(require("@mui/icons-material/WarningAmber"));
var _context = require("@arcblock/ux/lib/Locale/context");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function PriceChangeConfirm({
  open,
  previewRate = void 0,
  submitRate = void 0,
  changePercent,
  onConfirm,
  onCancel,
  loading = false
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  const changeDirection = changePercent > 0 ? "increased" : "decreased";
  const absChangePercent = Math.abs(changePercent);
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Dialog, {
    open,
    onClose: loading ? void 0 : onCancel,
    maxWidth: "sm",
    fullWidth: true,
    PaperProps: {
      sx: {
        borderRadius: 2
      }
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogTitle, {
      sx: {
        display: "flex",
        alignItems: "center",
        gap: 1,
        pb: 1
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_WarningAmber.default, {
        color: "warning"
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        variant: "h6",
        component: "span",
        children: t("payment.checkout.priceChange.title", {
          fallback: "Price Changed"
        })
      })]
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogContent, {
      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        spacing: 2,
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "body1",
          color: "text.secondary",
          children: t("payment.checkout.priceChange.description", {
            fallback: `The exchange rate has ${changeDirection} by ${absChangePercent.toFixed(2)}% since you started this checkout.`,
            direction: changeDirection,
            percent: absChangePercent.toFixed(2)
          })
        }), (previewRate || submitRate) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
          sx: {
            bgcolor: "action.hover",
            borderRadius: 1,
            p: 2
          },
          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
            spacing: 1,
            children: [previewRate && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
              sx: {
                display: "flex",
                justifyContent: "space-between"
              },
              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                variant: "body2",
                color: "text.secondary",
                children: [t("payment.checkout.priceChange.previewRate", {
                  fallback: "Preview Rate"
                }), ":"]
              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                variant: "body2",
                fontFamily: "monospace",
                children: previewRate
              })]
            }), submitRate && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
              sx: {
                display: "flex",
                justifyContent: "space-between"
              },
              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                variant: "body2",
                color: "text.secondary",
                children: [t("payment.checkout.priceChange.currentRate", {
                  fallback: "Current Rate"
                }), ":"]
              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                variant: "body2",
                fontFamily: "monospace",
                children: submitRate
              })]
            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
              sx: {
                display: "flex",
                justifyContent: "space-between"
              },
              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                variant: "body2",
                color: "text.secondary",
                children: [t("payment.checkout.priceChange.change", {
                  fallback: "Change"
                }), ":"]
              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                variant: "body2",
                fontWeight: "bold",
                color: changePercent > 0 ? "error.main" : "success.main",
                children: [changePercent > 0 ? "+" : "", changePercent.toFixed(2), "%"]
              })]
            })]
          })
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "body2",
          color: "text.secondary",
          children: t("payment.checkout.priceChange.confirm", {
            fallback: "Do you want to continue with the new price?"
          })
        })]
      })
    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogActions, {
      sx: {
        px: 3,
        pb: 2
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
        onClick: onCancel,
        disabled: loading,
        variant: "outlined",
        color: "inherit",
        children: t("payment.checkout.priceChange.cancel", {
          fallback: "Cancel"
        })
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
        onClick: onConfirm,
        disabled: loading,
        variant: "contained",
        color: "primary",
        autoFocus: true,
        children: loading ? t("payment.checkout.priceChange.confirming", {
          fallback: "Confirming..."
        }) : t("payment.checkout.priceChange.accept", {
          fallback: "Accept & Continue"
        })
      })]
    })]
  });
}