@blocklet/payment-react
Version:
Reusable react components for payment kit v2
291 lines (288 loc) • 7.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
module.exports = PaymentSuccess;
var _jsxRuntime = require("react/jsx-runtime");
var _context = require("@arcblock/ux/lib/Locale/context");
var _material = require("@mui/material");
var _ufo = require("ufo");
var _ux = require("@arcblock/ux");
var _payment = require("../contexts/payment");
function PaymentSuccess({
mode,
message,
action,
payee,
invoiceId = "",
subscriptionId = "",
subscriptions = []
}) {
const {
t
} = (0, _context.useLocaleContext)();
const {
prefix
} = (0, _payment.usePaymentContext)();
let next = null;
if (["subscription", "setup"].includes(action)) {
if (subscriptions && subscriptions.length > 1) {
next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
elevation: 0,
sx: {
p: 3,
backgroundColor: "grey.50",
borderRadius: 2,
width: "100%",
mt: 2,
display: "flex",
flexDirection: "column",
gap: 2
},
children: subscriptions.map(subscription => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
display: "flex",
alignItems: "center",
justifyContent: "space-between"
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
sx: {
color: "text.secondary",
fontWeight: 500
},
children: subscription.description
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
flex: 1,
borderBottom: "1px dashed",
borderColor: "grey.300",
mx: 2
}
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Button, {
variant: "text",
color: "primary",
size: "small",
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
href: (0, _ufo.joinURL)(prefix, `/customer/subscription/${subscription.id}`),
sx: {
color: "text.secondary"
},
children: t("payment.checkout.next.view")
})
})]
}, subscription.id))
});
} else if (subscriptionId) {
next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Button, {
variant: "outlined",
color: "primary",
sx: {
mt: 2
},
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
href: (0, _ufo.joinURL)(prefix, `/customer/subscription/${subscriptionId}`),
children: t("payment.checkout.next.subscription", {
payee
})
})
});
}
} else if (invoiceId) {
next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
sx: {
textAlign: "center",
mt: 2
},
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
href: (0, _ufo.joinURL)(prefix, `/customer/invoice/${invoiceId}`),
children: t("payment.checkout.next.invoice", {
payee
})
})
});
}
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grow, {
in: true,
children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
direction: "column",
sx: {
alignItems: "center",
justifyContent: mode === "standalone" ? "center" : "flex-start",
height: mode === "standalone" ? "fit-content" : 300
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(Div, {
children: /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
className: "check-icon",
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
className: "icon-line line-tip"
}), /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
className: "icon-line line-long"
}), /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
className: "icon-circle"
}), /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
className: "icon-fix"
})]
})
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "h5",
sx: {
color: "text.primary",
mb: 3
},
children: message
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body1",
sx: {
color: "text.secondary",
textAlign: "center",
fontSize: "14px"
},
children: t("payment.checkout.completed.tip", {
payee
})
}), next]
})
});
}
const Div = (0, _material.styled)("div")`
width: 80px;
height: 115px;
.check-icon {
width: 80px;
height: 80px;
position: relative;
border-radius: 50%;
box-sizing: content-box;
border: 4px solid ${props => props.theme.palette.success.main};
}
.check-icon::before {
top: 3px;
left: -2px;
width: 30px;
transform-origin: 100% 50%;
border-radius: 100px 0 0 100px;
}
.check-icon::after {
top: 0;
left: 30px;
width: 60px;
transform-origin: 0 50%;
border-radius: 0 100px 100px 0;
animation: rotate-circle 4.25s ease-in;
}
.check-icon::before,
.check-icon::after {
content: '';
height: 100px;
position: absolute;
background: ${props => props.theme.palette.background.paper};
transform: rotate(-45deg);
}
.check-icon .icon-line {
height: 5px;
background-color: ${props => props.theme.palette.success.main};
display: block;
border-radius: 2px;
position: absolute;
z-index: 10;
}
.check-icon .icon-line.line-tip {
top: 46px;
left: 14px;
width: 25px;
transform: rotate(45deg);
animation: icon-line-tip 0.75s;
}
.check-icon .icon-line.line-long {
top: 38px;
right: 8px;
width: 47px;
transform: rotate(-45deg);
animation: icon-line-long 0.75s;
}
.check-icon .icon-circle {
top: -4px;
left: -4px;
z-index: 10;
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
box-sizing: content-box;
border: 4px solid rgba(76, 175, 80, 0.5);
}
.check-icon .icon-fix {
top: 8px;
width: 5px;
left: 26px;
z-index: 1;
height: 85px;
position: absolute;
transform: rotate(-45deg);
background-color: ${props => props.theme.palette.background.paper};
}
@keyframes rotate-circle {
0% {
transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
}
}
@keyframes icon-line-tip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
@keyframes icon-line-long {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
`;