@hypernetlabs/web-ui
Version:
Web ui react components for hypernet protocol
117 lines • 7.77 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const core_1 = require("@material-ui/core");
const icons_1 = require("@material-ui/icons");
const formik_1 = require("formik");
const objects_1 = require("@hypernetlabs/objects");
const components_1 = require("../../components");
const GatewayInfoModalWidget_1 = __importDefault(require("../../widgets/GatewayInfoModalWidget"));
const GatewayDeauthorizationModalWidget_1 = __importDefault(require("../../widgets/GatewayDeauthorizationModalWidget"));
const hooks_1 = require("../../hooks");
const contexts_1 = require("../../contexts");
const GatewaysWidget_style_1 = require("../../widgets/GatewaysWidget/GatewaysWidget.style");
const constants_1 = require("../../constants");
const GatewaysWidget = ({ noLabel, }) => {
const { gatewaysMap, openGatewayIFrame, authorizeGateway, loading } = (0, hooks_1.useGateways)();
const classes = (0, GatewaysWidget_style_1.useStyles)();
const { setLoading, handleCoreError } = (0, contexts_1.useLayoutContext)();
const { coreProxy } = (0, contexts_1.useStoreContext)();
const [gateways, setGateways] = (0, react_1.useState)([]);
(0, react_1.useEffect)(() => {
getGateways();
}, []);
const getGateways = () => {
setLoading(true);
coreProxy.payments
.getGatewayEntryList()
.map((gatewayMap) => {
const gateways = [...gatewayMap.values()];
setGateways(gateways);
setLoading(false);
})
.mapErr(handleCoreError);
};
const [selectedGatewayUrl, setSelectedGatewayUrl] = (0, react_1.useState)((0, objects_1.GatewayUrl)(""));
const [selectedDeauthorizedGatewayUrl, setSelectedDeauthorizedGatewayUrl] = (0, react_1.useState)((0, objects_1.GatewayUrl)(""));
const openGatewayDetailsModal = (gatewayUrl) => {
setSelectedGatewayUrl(gatewayUrl);
};
const openGatewayDeauthorizationModal = (gatewayUrl) => {
setSelectedDeauthorizedGatewayUrl(gatewayUrl);
};
const gatewayModalcloseCallback = () => {
setSelectedGatewayUrl((0, objects_1.GatewayUrl)(""));
};
const gatewayDeauthorizationModalcloseCallback = () => {
setSelectedDeauthorizedGatewayUrl((0, objects_1.GatewayUrl)(""));
};
const hasEmptyState = [...gatewaysMap.keys()].length === 0 && !loading;
return (react_1.default.createElement(components_1.GovernanceCard, { className: "", title: !noLabel ? "Your Gateways" : undefined, description: !noLabel
? "Payment processing gateways you have authorized for your Hypernet accounts."
: undefined },
hasEmptyState ? (react_1.default.createElement(components_1.GovernanceEmptyState, { title: "No results!", description: "You don't have any authorized gateways yet." })) : (react_1.default.createElement(react_1.default.Fragment, null,
selectedGatewayUrl && (react_1.default.createElement(GatewayInfoModalWidget_1.default, { gatewayUrl: selectedGatewayUrl, closeCallback: gatewayModalcloseCallback })),
selectedDeauthorizedGatewayUrl && (react_1.default.createElement(GatewayDeauthorizationModalWidget_1.default, { gatewayUrl: selectedDeauthorizedGatewayUrl, closeCallback: gatewayDeauthorizationModalcloseCallback })),
react_1.default.createElement(components_1.List, null, [...gatewaysMap.keys()].map((gatewayUrl, index) => (react_1.default.createElement(components_1.ListItem, { key: index, icon: react_1.default.createElement(core_1.Tooltip, { title: gatewaysMap.get(gatewayUrl)
? "View gateway application"
: "Gateway is inactive", placement: "top" },
react_1.default.createElement(core_1.Avatar, { className: classes.icon, style: {
cursor: gatewaysMap.get(gatewayUrl)
? "pointer"
: "auto",
}, onClick: () => {
gatewaysMap.get(gatewayUrl) &&
openGatewayIFrame(gatewayUrl);
}, ...(gatewayUrl.includes("hyperpay") && {
src: constants_1.HYPERPAY_LOGO_URL,
}) }, gatewaysMap.get(gatewayUrl) ? (react_1.default.createElement(icons_1.Folder, null)) : (react_1.default.createElement(icons_1.Block, null)))), title: react_1.default.createElement(core_1.Box, null,
react_1.default.createElement(core_1.Tooltip, { title: gatewayUrl, disableHoverListener: gatewayUrl.length <= 60, placement: "top" },
react_1.default.createElement(core_1.Typography, { variant: "body2" }, gatewayUrl.length > 60
? `${gatewayUrl.substr(0, 60)}...`
: gatewayUrl))), rightContent: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(components_1.GovernanceButton, { size: "small", variant: "text", onClick: () => {
openGatewayDetailsModal(gatewayUrl);
} }, "Details"),
react_1.default.createElement(components_1.GovernanceButton, { size: "small", variant: "text", onClick: () => {
openGatewayDeauthorizationModal(gatewayUrl);
} }, "Deauthorize")) })))))),
react_1.default.createElement(formik_1.Formik, { initialValues: { gateway: "" }, enableReinitialize: true, onSubmit: (values, { resetForm }) => {
if (values === null || values === void 0 ? void 0 : values.gateway) {
authorizeGateway((0, objects_1.GatewayUrl)(values.gateway), resetForm);
}
} }, ({ values, handleSubmit, setFieldValue }) => {
return (react_1.default.createElement(formik_1.Form, { onSubmit: handleSubmit },
react_1.default.createElement(components_1.GovernanceDialogSelectField, { required: true, dialogTitle: "Select a Gateway", name: "gateway", type: "select", options: gateways.map(({ url }) => ({
primaryText: url,
value: url,
})), fullWidth: true, handleChange: (gateway) => {
setFieldValue("gateway", gateway);
} }),
react_1.default.createElement(components_1.GovernanceButton, { fullWidth: true, color: "primary", variant: "contained", onClick: handleSubmit, disabled: !(values === null || values === void 0 ? void 0 : values.gateway) }, "Authorize")));
})));
};
exports.default = GatewaysWidget;
//# sourceMappingURL=GatewaysWidget.js.map