udp-react-enterprise-component-library 25.18.1-beta.25 → 25.18.1-beta.27

package/dist/fluentTimeline--gqVMMeZ.js

@@ -0,0 +1,156 @@
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { t as UnityFluentIcon } from "./UnityFluentIcon-DrASIcTF.js";
+import { S as getIconFromName } from "./TreeUtilities-CDlHioSI.js";
+import React, { useState } from "react";
+import { Avatar, MenuItem, Popover, Typography, alpha, makeStyles } from "@material-ui/core";
+import { MoreVerticalIcon } from "@fluentui/react-icons";
+
+//#region src/UI/timeline/fluentTimeline/FluentTimelineHeader.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	customTimelineHeader: {
+		backgroundColor: alpha(theme.palette.secondary.main, .1),
+		borderRadius: theme.spacing(4),
+		padding: theme.spacing(.5, 2, .5, .5),
+		display: "flex",
+		alignItems: "center"
+	},
+	customTimelineHeaderAvatar: {
+		marginRight: theme.spacing(1),
+		height: theme.spacing(4),
+		width: theme.spacing(4)
+	},
+	flexDescription: {
+		fontSize: "0.875rem",
+		marginLeft: theme.spacing(2)
+	}
+}));
+const FluentTimelineHeader = (props) => {
+	const { title, date, iconName } = props;
+	const classes = useStyles$1();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.customTimelineHeader }, /* @__PURE__ */ React.createElement(Avatar, { className: classes.customTimelineHeaderAvatar }, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: "medium",
+		icon: getIconFromName(iconName ?? "PageListIcon"),
+		type: ""
+	})), /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, title), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		color: "textSecondary",
+		className: classes.flexDescription
+	}, date));
+};
+
+//#endregion
+//#region src/UI/timeline/fluentTimeline/FluentTimelineContent.jsx
+const useStyles = makeStyles((theme) => ({
+	flexCol: {
+		flexGrow: 1,
+		fontSize: "0.875rem",
+		marginLeft: theme.spacing(1)
+	},
+	customTimelineContent: {
+		display: "flex",
+		borderLeft: "1px solid " + theme.palette.grey[300],
+		paddingLeft: theme.spacing(3),
+		paddingTop: theme.spacing(.5),
+		paddingBottom: theme.spacing(.5),
+		marginLeft: theme.spacing(2.5),
+		alignItems: "center"
+	},
+	customTimelineContentDate: {
+		marginLeft: theme.spacing(3),
+		marginRight: theme.spacing(2),
+		minWidth: theme.spacing(5),
+		fontWeight: 400,
+		textAlign: "right",
+		fontSize: "12px"
+	},
+	customTimelineDot: {
+		marginLeft: theme.spacing(-3.55),
+		width: theme.spacing(1),
+		height: theme.spacing(1),
+		backgroundColor: theme.palette.grey[400],
+		borderRadius: "100%"
+	},
+	flexDescription: { fontSize: "0.875rem" }
+}));
+const FluentTimelineContent = (props) => {
+	const { data, title, description, date, actions, category } = props;
+	const classes = useStyles();
+	const [openMenu, setOpenMenu] = useState(false);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const handlePopoverClick = (event) => {
+		setOpenMenu(true);
+		setAnchorEl(event.currentTarget);
+	};
+	const handlePopoverClose = (event) => {
+		setOpenMenu(false);
+		setAnchorEl(null);
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.customTimelineContent }, /* @__PURE__ */ React.createElement("div", { className: classes.customTimelineDot }), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body2",
+		noWrap: true,
+		className: classes.flexCol
+	}, title), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body2",
+		noWrap: true,
+		className: classes.flexDescription
+	}, description), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		color: "textSecondary",
+		className: classes.customTimelineContentDate
+	}, date), actions?.length > 0 && /* @__PURE__ */ React.createElement(FluentIconButton, {
+		icon: MoreVerticalIcon,
+		size: "small",
+		onClick: handlePopoverClick,
+		id: "udpRecord-FluentTimelineContent-MoreAction-" + category + "-" + typeof title === "string" && title.replace(/\s+/g, ""),
+		udprecordid: "udpRecord-FluentTimelineContent-MoreAction-" + category + "-" + typeof title === "string" && title.replace(/\s+/g, "")
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		id: "fluentTimelineContentPopover",
+		open: openMenu,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, actions?.map((action) => /* @__PURE__ */ React.createElement(MenuItem, {
+		id: "udpRecord-FluentTimelineContent-MenuItem-" + action?.label?.replace(/ /g, "-"),
+		udprecordid: "udpRecord-FluentTimelineContent-MenuItem-" + action?.label?.replace(/ /g, "-"),
+		onClick: () => {
+			if (action.onClick) action.onClick(data);
+		},
+		style: {
+			display: "flex",
+			justifyContent: "space-between"
+		}
+	}, /* @__PURE__ */ React.createElement(Typography, null, action?.label), action?.icon && /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: action?.icon,
+		style: { marginLeft: 7 }
+	})))));
+};
+
+//#endregion
+//#region src/UI/timeline/fluentTimeline/FluentTimeline.jsx
+const FluentTimeline = (props) => {
+	const { data, dataConfig, actions } = props;
+	return /* @__PURE__ */ React.createElement("div", null, data?.map((timeline) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FluentTimelineHeader, {
+		title: timeline?.[dataConfig?.type],
+		date: timeline?.[dataConfig?.typeDate],
+		iconName: timeline?.[dataConfig?.typeIconName]
+	}), timeline?.[dataConfig?.events]?.map((item) => /* @__PURE__ */ React.createElement(FluentTimelineContent, {
+		data: item,
+		title: item?.[dataConfig?.eventTitle],
+		description: item?.[dataConfig?.eventDescription],
+		date: item?.[dataConfig?.eventDate],
+		actions,
+		category: timeline?.[dataConfig?.type]
+	})))));
+};
+
+//#endregion
+export { FluentTimelineContent as n, FluentTimelineHeader as r, FluentTimeline as t };
+//# sourceMappingURL=fluentTimeline--gqVMMeZ.js.map

package/dist/fluentTimeline--gqVMMeZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluentTimeline--gqVMMeZ.js","names":["useStyles"],"sources":["../src/UI/timeline/fluentTimeline/FluentTimelineHeader.jsx","../src/UI/timeline/fluentTimeline/FluentTimelineContent.jsx","../src/UI/timeline/fluentTimeline/FluentTimeline.jsx"],"sourcesContent":["import React from 'react';\nimport { Typography, Avatar, makeStyles, alpha } from '@material-ui/core';\nimport { UnityFluentIcon } from '../../../utilities/iconLibrary/UnityFluentIcon';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles((theme) => ({\n  customTimelineHeader: {\n    backgroundColor: alpha(theme.palette.secondary.main, 0.1),\n    borderRadius: theme.spacing(4),\n    padding: theme.spacing(0.5, 2, 0.5, 0.5),\n    display: 'flex',\n    alignItems: 'center'\n  },\n  customTimelineHeaderAvatar: {\n    marginRight: theme.spacing(1),\n    height: theme.spacing(4),\n    width: theme.spacing(4)\n  },\n  flexDescription: {\n    fontSize: '0.875rem',\n    marginLeft: theme.spacing(2)\n  }\n}));\n\nexport const FluentTimelineHeader = (props) => {\n  const { title, date, iconName } = props;\n  const classes = useStyles();\n\n  return (\n    <div className={classes.customTimelineHeader}>\n      <Avatar className={classes.customTimelineHeaderAvatar}>\n        <UnityFluentIcon\n          size='medium'\n          icon={getIconFromName(iconName ?? 'PageListIcon')}\n          type=''\n        />\n      </Avatar>\n      <Typography variant='subtitle2'>{title}</Typography>\n      <Typography\n        variant='caption'\n        color='textSecondary'\n        className={classes.flexDescription}\n      >\n        {date}\n      </Typography>\n    </div>\n  );\n};\n","import React, { useState } from 'react';\nimport { Typography, makeStyles, Popover, MenuItem } from '@material-ui/core';\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton';\nimport { MoreVerticalIcon } from '@fluentui/react-icons';\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';\n\nconst useStyles = makeStyles(theme => ({\n  flexCol: {\n    flexGrow: 1,\n    fontSize: '0.875rem',\n    marginLeft: theme.spacing(1),\n  },\n  customTimelineContent: {\n    display: 'flex',\n    borderLeft: '1px solid ' + theme.palette.grey[300],\n    paddingLeft: theme.spacing(3),\n    paddingTop: theme.spacing(0.5),\n    paddingBottom: theme.spacing(0.5),\n    marginLeft: theme.spacing(2.5),\n    alignItems: 'center',\n  },\n  customTimelineContentDate: {\n    marginLeft: theme.spacing(3),\n    marginRight: theme.spacing(2),\n    minWidth: theme.spacing(5),\n    fontWeight: 400,\n    textAlign: 'right',\n    fontSize: '12px',\n  },\n  customTimelineDot: {\n    marginLeft: theme.spacing(-3.55),\n    width: theme.spacing(1),\n    height: theme.spacing(1),\n    backgroundColor: theme.palette.grey[400],\n    borderRadius: '100%',\n  },\n  flexDescription: {\n    fontSize: '0.875rem',\n  },\n}));\n\nexport const FluentTimelineContent = props => {\n  const { data, title, description, date, actions, category } = props;\n  const classes = useStyles();\n  const [openMenu, setOpenMenu] = useState(false);\n  const [anchorEl, setAnchorEl] = useState(null);\n\n  const handlePopoverClick = event => {\n    setOpenMenu(true);\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handlePopoverClose = event => {\n    setOpenMenu(false);\n    setAnchorEl(null);\n  };\n\n  return (\n    <div className={classes.customTimelineContent}>\n      <div className={classes.customTimelineDot} />\n      <Typography variant='body2' noWrap className={classes.flexCol}>\n        {title}\n      </Typography>\n      <Typography variant='body2' noWrap className={classes.flexDescription}>\n        {description}\n      </Typography>\n      <Typography\n        variant='caption'\n        color='textSecondary'\n        className={classes.customTimelineContentDate}\n      >\n        {date}\n      </Typography>\n      {actions?.length > 0 && (\n        <FluentIconButton\n          icon={MoreVerticalIcon}\n          size='small'\n          onClick={handlePopoverClick}\n          id={\n            'udpRecord-FluentTimelineContent-MoreAction-' +\n            category +\n            '-' +\n            typeof title === 'string' && title.replace(/\\s+/g, '')\n          }\n          udprecordid={\n            'udpRecord-FluentTimelineContent-MoreAction-' +\n            category +\n            '-' +\n            typeof title === 'string' && title.replace(/\\s+/g, '')\n          }\n        />\n      )}\n\n      <Popover\n        id='fluentTimelineContentPopover'\n        open={openMenu}\n        anchorEl={anchorEl}\n        onClose={handlePopoverClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'right'\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right'\n        }}\n      >\n        {actions?.map((action) => (\n          <MenuItem\n            id={\n              'udpRecord-FluentTimelineContent-MenuItem-' +\n              action?.label?.replace(/ /g, '-')\n            }\n            udprecordid={\n              'udpRecord-FluentTimelineContent-MenuItem-' +\n              action?.label?.replace(/ /g, '-')\n            }\n            onClick={() => {\n              if (action.onClick) {\n                action.onClick(data);\n              }\n            }}\n            style={{\n              display: 'flex',\n              justifyContent: 'space-between'\n            }}\n          >\n            <Typography>{action?.label}</Typography>\n            {action?.icon && (\n              <FluentIcon component={action?.icon} style={{ marginLeft: 7 }} />\n            )}\n          </MenuItem>\n        ))}\n      </Popover>\n    </div>\n  );\n};\n","import React from 'react';\nimport { FluentTimelineHeader } from './FluentTimelineHeader';\nimport { FluentTimelineContent } from './FluentTimelineContent';\n\nexport const FluentTimeline = (props) => {\n  const { data, dataConfig, actions } = props;\n\n  return (\n    <div>\n      {data?.map((timeline) => (\n        <>\n          <FluentTimelineHeader\n            title={timeline?.[dataConfig?.type]}\n            date={timeline?.[dataConfig?.typeDate]}\n            iconName={timeline?.[dataConfig?.typeIconName]}\n          />\n          {timeline?.[dataConfig?.events]?.map((item) => (\n            <FluentTimelineContent\n              data={item}\n              title={item?.[dataConfig?.eventTitle]}\n              description={item?.[dataConfig?.eventDescription]}\n              date={item?.[dataConfig?.eventDate]}\n              actions={actions}\n              category={timeline?.[dataConfig?.type]}\n            />\n          ))}\n        </>\n      ))}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/forms-ByNiOQ7n.js

@@ -0,0 +1,431 @@
+import { t as Form } from "./Form-DbOA5j38.js";
+import { t as Field } from "./Field-Cda5rJe2.js";
+import { n as SubmitButton, t as FormButtons } from "./FormButtons-BTCO-pzW.js";
+import { t as ConfigService } from "./configService-C4uoG3wj.js";
+import { t as apiMutate } from "./useAxiosMutate-DcLxzykX.js";
+import { t as Typography$1 } from "./Typography-BMsa1JYd.js";
+import { t as LayoutUnit } from "./LayoutUnit-D4jJvonh.js";
+import { t as AmbientCard } from "./AmbientCard-DK9abODq.js";
+import { t as LinearProgress$1 } from "./LinearProgress-DM2DNWCe.js";
+import { t as FluentTextField } from "./FluentTextField-CXvZawOG.js";
+import { t as FluentCheckbox } from "./FluentCheckbox-CW8pHQ21.js";
+import { t as FormControl$1 } from "./FormControl-CTmN8TEq.js";
+import { t as IndicatorChip } from "./IndicatorChip-BZ2U9xpf.js";
+import { t as FluentCardText } from "./FluentCardText-fXTPCGC5.js";
+import { t as Box$1 } from "./Box-Dzi_sgXS.js";
+import { t as Grid$1 } from "./Grid-BHKvVKV6.js";
+import { n as ListElement } from "./ListCard-1S6RXAVX.js";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Divider, FormControlLabel, LinearProgress, Paper, TextField, Typography, makeStyles, useTheme } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+import { format } from "date-fns";
+
+//#region src/UI/forms/LoginForm.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		justifyContent: "center",
+		marginTop: theme.spacing(8)
+	},
+	loginWindow: {
+		position: "relative",
+		flex: 1,
+		padding: theme.spacing(3),
+		width: 390
+	},
+	underline: { "&::after": { borderColor: "black" } },
+	label: { color: "black" },
+	logo: { width: 150 },
+	error: { color: theme.palette.error.main }
+}));
+const LoginForm = (props) => {
+	const { onSubmit, logo, usernameLabel, passwordLabel, error, loading } = props;
+	const classes = useStyles$1();
+	const theme = useTheme();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Form, { onSubmit }, /* @__PURE__ */ React.createElement(Paper, { className: classes.loginWindow }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "h5",
+		gutterBottom: true
+	}, "Login"), error && /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body1",
+		className: classes.error
+	}, "Your username or password is invalid"), /* @__PURE__ */ React.createElement(Field, {
+		component: TextField,
+		margin: "normal",
+		type: "email",
+		name: "username",
+		InputProps: { classes: { underline: classes.underline } },
+		InputLabelProps: {
+			focused: true,
+			shrink: true,
+			style: { color: theme.palette.grey[500] }
+		},
+		label: usernameLabel || "Sign in name",
+		fullWidth: true,
+		size: "small",
+		variant: "standard",
+		validate: (value) => {
+			if (!value?.length) return "Please enter your sign in name";
+		}
+	}), /* @__PURE__ */ React.createElement(Field, {
+		component: TextField,
+		margin: "normal",
+		type: "password",
+		name: "password",
+		InputProps: { classes: { underline: classes.underline } },
+		InputLabelProps: {
+			focused: true,
+			shrink: true,
+			style: { color: theme.palette.grey[500] }
+		},
+		label: passwordLabel || "Password",
+		fullWidth: true,
+		size: "small",
+		variant: "standard",
+		validate: (value) => {
+			if (!value?.length) return "Please enter your password";
+		}
+	}), /* @__PURE__ */ React.createElement(FormButtons, { style: {
+		justifyContent: "flex-end",
+		marginBottom: 0
+	} }, /* @__PURE__ */ React.createElement(SubmitButton, {
+		variant: "contained",
+		disablePristine: false,
+		style: {
+			margin: 0,
+			backgroundColor: theme.palette.grey[800],
+			color: "#fff"
+		}
+	}, "Sign In")), logo && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("img", {
+		className: classes.logo,
+		src: logo,
+		alt: "Unity"
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" })), loading && /* @__PURE__ */ React.createElement(LinearProgress, null)));
+};
+
+//#endregion
+//#region src/UI/forms/PaymentReversalForm.jsx
+const useStyles = makeStyles((theme) => ({
+	formControlHalf: { width: "40%" },
+	formControl: { width: "100%" },
+	formControlMargin: {
+		width: "100%",
+		marginTop: "5px"
+	},
+	formControlCheck: {
+		width: "100%",
+		marginTop: "5px",
+		marginLeft: "3px"
+	},
+	submitControl: { marginTop: "35px" },
+	assetTypeLabel: { top: theme.spacing(-.7) },
+	labelText: {
+		color: "rgba(0, 0, 0)",
+		fontSize: "0.875rem"
+	},
+	main: {
+		flexGrow: 1,
+		padding: "0 24px",
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center"
+	},
+	appIcon: {
+		width: 24,
+		height: 24,
+		color: theme.palette.text.primary
+	},
+	arrowIcon: {
+		width: 12,
+		height: 12
+	},
+	linkTitle: { marginRight: theme.spacing(1) },
+	formControlGeneral: {
+		width: "100%",
+		marginLeft: "5px",
+		marginTop: "5px"
+	},
+	cardNumber: { width: "60%" },
+	accordion: {
+		width: "100%",
+		margin: "0px",
+		padding: "0px",
+		boxShadow: "none",
+		backgroundColor: "inherit",
+		"&:before": { display: "none" },
+		"&$expanded": { margin: "0px" }
+	},
+	accordionSummary: {
+		padding: "0px",
+		paddingLeft: "5px",
+		margin: "0px",
+		minHeight: "0px",
+		backgroundColor: "inherit",
+		flexDirection: "row-reverse",
+		"&$expanded": {
+			margin: "0px",
+			padding: "0px",
+			minHeight: "0px"
+		}
+	},
+	expanded: {
+		margin: "0px",
+		paddingLeft: "5px"
+	},
+	content: {
+		margin: 0,
+		backgroundColor: "inherit",
+		"&$expanded": { margin: 0 }
+	},
+	accordionDetails: {
+		padding: "0px",
+		display: "block",
+		margin: "0px"
+	},
+	cardContent: { backgroundColor: "#FAFAFA" },
+	listItem: {
+		paddingTop: "3px",
+		paddingBottom: "3px",
+		fontSize: "0.875rem"
+	},
+	listItemDetail: {
+		display: "flex",
+		justifyContent: "flex-end"
+	},
+	listItemAccordion: {
+		paddingTop: "3px",
+		paddingBottom: "3px",
+		paddingLeft: "0px"
+	},
+	divider: { margin: "0px 12px" },
+	dividerBold: {
+		margin: "0px 12px",
+		backgroundColor: "black"
+	},
+	itemCheckbox: { padding: "0px" },
+	itemDescription: { color: "grey" },
+	list: { backgroundColor: "#FFF" },
+	dropdown: {
+		marginTop: theme.spacing(-1),
+		backgroundColor: "#FFF"
+	},
+	locationDropDown: {
+		margin: theme.spacing(0),
+		marginTop: theme.spacing(-.5),
+		fontSize: "0.75rem"
+	},
+	box: {
+		display: "flex",
+		justifyContent: "space-around",
+		flexDirection: "row",
+		paddingBottom: "15px",
+		gap: "10px",
+		[theme.breakpoints.down("sm")]: {
+			flexDirection: "column",
+			flexWrap: "wrap",
+			alignItems: "flex-start"
+		}
+	}
+}));
+const PAYMENT_APPROVED = 1;
+const PAYMENT_DENIED = 43;
+const RESULT_SUCCESS = 200;
+const RESULT_FAILURE = 401;
+const PaymentReversalForm = ({ id, paymentData, onSubmitCompleted }) => {
+	const classes = useStyles();
+	const { t } = useTranslation();
+	const [loading, setLoading] = useState(true);
+	const [paymentTransaction, setPaymentTransaction] = useState(void 0);
+	/**
+	* API call to get the payment transaction details
+	*/
+	const getPaymentTransaction = useCallback(async (payload) => {
+		if (!payload) return null;
+		return apiMutate(ConfigService.pgV1ApiUrl, `PaymentTransaction/search`, {
+			method: "POST",
+			data: payload
+		}, {});
+	}, []);
+	/**
+	* API call to get the account information by account number
+	*/
+	const reverseTransactionExecute = useCallback(async (transactionID) => {
+		if (!transactionID) return null;
+		return apiMutate(ConfigService.pgV1ApiUrl, `PaymentTransaction/${transactionID}`, { method: "DELETE" }, {});
+	}, []);
+	/**
+	* submitAccountDetailsForm
+	* @param {*} formData
+	* @return {*}
+	*/
+	const handleSubmitPaymentReversal = (values) => {
+		if (!paymentData?.transactionId) return;
+		reverseTransactionExecute(paymentData?.transactionId).then(() => {
+			onSubmitCompleted && onSubmitCompleted({
+				transactionId: paymentData?.transactionId,
+				error: false
+			});
+		}).catch((error) => {
+			onSubmitCompleted && onSubmitCompleted({
+				transactionId: paymentData?.transactionId,
+				error
+			});
+		});
+	};
+	useEffect(() => {
+		const fetchData = async () => {
+			try {
+				setLoading(true);
+				const response = await getPaymentTransaction({
+					eagerLoad: true,
+					pageNumber: 1,
+					pageSize: 20,
+					filterElements: [{
+						searchField: "transactionId",
+						searchValue: paymentData?.transactionId,
+						searchOperator: "="
+					}],
+					orderElements: []
+				});
+				if (response?.data) setPaymentTransaction(response?.data?.pageList?.[0]);
+			} catch (err) {
+				console.error(err);
+			} finally {
+				setLoading(false);
+			}
+		};
+		if (paymentData?.transactionId) fetchData();
+	}, [getPaymentTransaction, paymentData]);
+	const statusText = useMemo(() => {
+		return paymentTransaction?.responseCode === PAYMENT_APPROVED && paymentTransaction?.paymentResultID === RESULT_SUCCESS ? "Approved" : paymentTransaction?.responseCode === PAYMENT_DENIED && paymentTransaction?.paymentResultID === RESULT_FAILURE ? "Declined" : "Undetermined";
+	}, [paymentTransaction]);
+	const statusCode = useMemo(() => {
+		return paymentTransaction?.responseCode === PAYMENT_APPROVED && paymentTransaction?.paymentResultID === RESULT_SUCCESS ? "ok" : paymentTransaction?.responseCode === PAYMENT_DENIED && paymentTransaction?.paymentResultID === RESULT_FAILURE ? "error" : "warning";
+	}, [paymentTransaction]);
+	return /* @__PURE__ */ React.createElement(Box$1, null, loading && /* @__PURE__ */ React.createElement(Box$1, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(LinearProgress$1, null)), /* @__PURE__ */ React.createElement(Box$1, { className: classes.box }, /* @__PURE__ */ React.createElement(FluentCardText, {
+		title: "Value",
+		description: `$${paymentData?.amount}`
+	}), /* @__PURE__ */ React.createElement(FluentCardText, {
+		title: "Status",
+		description: /* @__PURE__ */ React.createElement(IndicatorChip, {
+			text: statusText,
+			status: statusCode
+		})
+	})), /* @__PURE__ */ React.createElement(AmbientCard, { fullWidth: true }, /* @__PURE__ */ React.createElement(Typography$1, {
+		variant: "subtitle2",
+		style: {
+			marginTop: "0px",
+			marginBottom: "10px"
+		}
+	}, t("Payment Details")), /* @__PURE__ */ React.createElement(Box$1, {
+		display: "flex",
+		flexDirection: "column"
+	}, /* @__PURE__ */ React.createElement(Grid$1, {
+		container: true,
+		spacing: 1
+	}, [
+		[t("Transaction ID"), paymentData?.transactionId || t("N/A")],
+		[t("Date/Time"), paymentData?.transactionDate ? format(new Date(paymentData?.transactionDate), "EEE, MMM d, yyyy") : t("N/A")],
+		[t("Processor"), paymentData?.paymentSourceName || t("No Information found")],
+		[t("Response Code"), paymentData?.authorizationNumber || t("N/A")]
+	].map(([k, v]) => /* @__PURE__ */ React.createElement(Grid$1, {
+		item: true,
+		xs: 12,
+		sm: 6
+	}, /* @__PURE__ */ React.createElement(ListElement, {
+		subject: k,
+		value: v,
+		hideDivider: true
+	}))))), /* @__PURE__ */ React.createElement(Divider, { style: {
+		marginTop: "10px",
+		marginBottom: "10px"
+	} }), /* @__PURE__ */ React.createElement(Box$1, {
+		display: "flex",
+		flexDirection: "column"
+	}, /* @__PURE__ */ React.createElement(Grid$1, {
+		container: true,
+		spacing: 1
+	}, [
+		[t("Customer Name"), paymentTransaction?.reference3 || t("N/A")],
+		[t("Type"), paymentData?.tender || t("N/A")],
+		[t("Card Holder Name"), t("N/A")],
+		[t("CC Number"), paymentData?.cardLast4 || t("N/A")],
+		[t("Company"), paymentTransaction?.applicationClient?.name || t("N/A")],
+		[t("Expiration Date"), paymentData?.date || t("N/A")],
+		[t("AVS"), t("N/A")],
+		[t("Status"), paymentData?.authorizationNumber ? "Approved" : "Declined"],
+		[t("Confirmation"), paymentData?.authorizationNumber || t("N/A")]
+	].map(([k, v]) => /* @__PURE__ */ React.createElement(Grid$1, {
+		item: true,
+		xs: 12,
+		sm: 6
+	}, /* @__PURE__ */ React.createElement(ListElement, {
+		subject: k,
+		value: v,
+		hideDivider: true
+	}))))), /* @__PURE__ */ React.createElement(Divider, { style: {
+		marginTop: "10px",
+		marginBottom: "10px"
+	} }), /* @__PURE__ */ React.createElement(Box$1, {
+		display: "flex",
+		flexDirection: "column"
+	}, /* @__PURE__ */ React.createElement(Grid$1, {
+		container: true,
+		spacing: 1
+	}, [
+		[t("First Attempt Date"), paymentData?.date || t("N/A")],
+		[t("Initial Transaction"), paymentData?.date || t("N/A")],
+		[t("Next Attempt Date"), paymentData?.date || t("N/A")],
+		[t("Retry Count"), t("N/A")]
+	].map(([k, v]) => /* @__PURE__ */ React.createElement(Grid$1, {
+		item: true,
+		xs: 12,
+		sm: 6
+	}, /* @__PURE__ */ React.createElement(ListElement, {
+		subject: k,
+		value: v,
+		hideDivider: true
+	}))))), /* @__PURE__ */ React.createElement(Divider, { style: {
+		marginTop: "10px",
+		marginBottom: "10px"
+	} }), /* @__PURE__ */ React.createElement(Form, {
+		id,
+		onSubmit: handleSubmitPaymentReversal,
+		render: ({ handleSubmit, form, values }) => {
+			return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FormControl$1, { className: classes.formControl }, /* @__PURE__ */ React.createElement(Field, {
+				component: FluentTextField,
+				ComponentProps: {
+					label: t("Amount to Reverse"),
+					variant: "outlined",
+					margin: "normal",
+					size: "small",
+					disabled: false,
+					fullWidth: true,
+					autoComplete: "off",
+					inputProps: {
+						maxLength: 256,
+						autocomplete: "off"
+					}
+				},
+				name: "amountToReverse",
+				initialValue: paymentData?.amount,
+				onChange: () => {},
+				required: true
+			})), /* @__PURE__ */ React.createElement(FormControl$1, { className: classes.formControlGeneral }, /* @__PURE__ */ React.createElement(FormControlLabel, {
+				control: /* @__PURE__ */ React.createElement(Field, {
+					component: FluentCheckbox,
+					name: "isSendCustomerPaymentConfirmation",
+					type: "checkbox",
+					defaultValue: false,
+					required: false,
+					onChange: () => {},
+					size: "small"
+				}),
+				label: t("Send Customer Payment Confirmation")
+			})));
+		}
+	})));
+};
+
+//#endregion
+export { LoginForm as n, PaymentReversalForm as t };
+//# sourceMappingURL=forms-ByNiOQ7n.js.map

package/dist/forms-ByNiOQ7n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms-ByNiOQ7n.js","names":["useStyles","Box","LinearProgress","Typography","Grid","FormControl"],"sources":["../src/UI/forms/LoginForm.jsx","../src/UI/forms/PaymentReversalForm.jsx"],"sourcesContent":["import React from 'react';\nimport {\n  TextField,\n  Paper,\n  Typography,\n  makeStyles,\n  LinearProgress,\n  useTheme\n} from '@material-ui/core';\nimport { LayoutUnit } from '../../layout/LayoutUnit';\nimport { Form, FormButtons, SubmitButton, Field } from '../../utilities/form';\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    justifyContent: 'center',\n    marginTop: theme.spacing(8)\n  },\n  loginWindow: {\n    position: 'relative',\n    flex: 1,\n    padding: theme.spacing(3),\n    width: 390\n  },\n  underline: {\n    '&::after': {\n      borderColor: 'black'\n    }\n  },\n  label: {\n    color: 'black'\n  },\n  logo: {\n    width: 150\n  },\n  error: {\n    color: theme.palette.error.main\n  }\n}));\n\nexport const LoginForm = (props) => {\n  const { onSubmit, logo, usernameLabel, passwordLabel, error, loading } =\n    props;\n  const classes = useStyles();\n  const theme = useTheme();\n\n  return (\n    <div className={classes.root}>\n      <Form onSubmit={onSubmit}>\n        <Paper className={classes.loginWindow}>\n          <Typography variant='h5' gutterBottom>\n            Login\n          </Typography>\n          {error && (\n            <Typography variant='body1' className={classes.error}>\n              Your username or password is invalid\n            </Typography>\n          )}\n          <Field\n            component={TextField}\n            margin='normal'\n            type='email'\n            name='username'\n            InputProps={{\n              classes: {\n                underline: classes.underline\n              }\n            }}\n            InputLabelProps={{\n              focused: true,\n              shrink: true,\n              style: { color: theme.palette.grey[500] }\n            }}\n            label={usernameLabel || 'Sign in name'}\n            fullWidth\n            size='small'\n            variant='standard'\n            validate={(value) => {\n              if (!value?.length) {\n                return 'Please enter your sign in name';\n              }\n            }}\n          />\n          <Field\n            component={TextField}\n            margin='normal'\n            type='password'\n            name='password'\n            InputProps={{\n              classes: {\n                underline: classes.underline\n              }\n            }}\n            InputLabelProps={{\n              focused: true,\n              shrink: true,\n              style: { color: theme.palette.grey[500] }\n            }}\n            label={passwordLabel || 'Password'}\n            fullWidth\n            size='small'\n            variant='standard'\n            validate={(value) => {\n              if (!value?.length) {\n                return 'Please enter your password';\n              }\n            }}\n          />\n\n          <FormButtons style={{ justifyContent: 'flex-end', marginBottom: 0 }}>\n            <SubmitButton\n              variant='contained'\n              disablePristine={false}\n              style={{\n                margin: 0,\n                backgroundColor: theme.palette.grey[800],\n                color: '#fff'\n              }}\n            >\n              Sign In\n            </SubmitButton>\n          </FormButtons>\n          {logo && (\n            <div>\n              <img className={classes.logo} src={logo} alt='Unity' />\n            </div>\n          )}\n          <LayoutUnit unit='xxs' />\n        </Paper>\n        {loading && <LinearProgress />}\n      </Form>\n    </div>\n  );\n};\n","import React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport { format } from 'date-fns';\nimport { FluentCardText } from '../surfaces/cards/fluentCards/FluentCardText';\nimport { IndicatorChip } from '../utilityDisplay/IndicatorChip';\nimport { makeStyles, Divider, FormControlLabel } from '@material-ui/core';\nimport { Box } from '../Box';\nimport { AmbientCard } from '../surfaces/cards/AmbientCard';\nimport { Typography } from '../dataDisplay/typography/Typography';\nimport { Grid } from '../Grid';\nimport { ListElement } from '../mapLayout/ui/ListCard';\nimport { useTranslation } from 'react-i18next';\nimport { FluentCheckbox } from '../inputs/checkbox/FluentCheckbox';\nimport { FormControl } from '../utilityDisplay/FormControl';\nimport { Field } from '../../utilities/form/Field';\nimport { FluentTextField } from '../inputs/textField/FluentTextField';\nimport { Form } from '../../utilities/form/Form';\nimport { apiMutate } from '../../utilities/useAxiosMutate';\nimport { LinearProgress } from '../loading/LinearProgress';\nimport { ConfigService } from '../../configService';\n\nconst useStyles = makeStyles((theme) => ({\n  formControlHalf: {\n    width: '40%'\n  },\n  formControl: {\n    width: '100%'\n  },\n  formControlMargin: {\n    width: '100%',\n    marginTop: '5px'\n  },\n  formControlCheck: {\n    width: '100%',\n    marginTop: '5px',\n    marginLeft: '3px'\n  },\n  submitControl: {\n    marginTop: '35px'\n  },\n  assetTypeLabel: {\n    top: theme.spacing(-0.7)\n  },\n  labelText: {\n    color: 'rgba(0, 0, 0)',\n    fontSize: '0.875rem'\n  },\n  main: {\n    flexGrow: 1,\n    padding: '0 24px',\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center'\n  },\n  appIcon: {\n    width: 24,\n    height: 24,\n    color: theme.palette.text.primary\n  },\n  arrowIcon: {\n    width: 12,\n    height: 12\n  },\n  linkTitle: {\n    marginRight: theme.spacing(1)\n  },\n  formControlGeneral: {\n    width: '100%',\n    marginLeft: '5px',\n    marginTop: '5px'\n  },\n  cardNumber: {\n    width: '60%'\n  },\n  accordion: {\n    width: '100%',\n    margin: '0px',\n    padding: '0px',\n    boxShadow: 'none',\n    backgroundColor: 'inherit',\n    '&:before': {\n      display: 'none'\n    },\n    '&$expanded': {\n      margin: '0px'\n    }\n  },\n  accordionSummary: {\n    padding: '0px',\n    paddingLeft: '5px',\n    margin: '0px',\n    minHeight: '0px',\n    backgroundColor: 'inherit',\n    flexDirection: 'row-reverse',\n    '&$expanded': {\n      margin: '0px',\n      padding: '0px',\n      minHeight: '0px'\n    }\n  },\n  expanded: {\n    margin: '0px',\n    paddingLeft: '5px'\n  },\n  content: {\n    margin: 0,\n    backgroundColor: 'inherit',\n    '&$expanded': {\n      margin: 0\n    }\n  },\n  accordionDetails: {\n    padding: '0px',\n    display: 'block',\n    margin: '0px'\n  },\n  cardContent: {\n    backgroundColor: '#FAFAFA'\n  },\n  listItem: {\n    paddingTop: '3px',\n    paddingBottom: '3px',\n    fontSize: '0.875rem'\n  },\n  listItemDetail: {\n    display: 'flex',\n    justifyContent: 'flex-end'\n  },\n  listItemAccordion: {\n    paddingTop: '3px',\n    paddingBottom: '3px',\n    paddingLeft: '0px'\n  },\n  divider: {\n    margin: '0px 12px'\n  },\n  dividerBold: {\n    margin: '0px 12px',\n    backgroundColor: 'black'\n  },\n  itemCheckbox: {\n    padding: '0px'\n  },\n  itemDescription: {\n    color: 'grey'\n  },\n  list: {\n    backgroundColor: '#FFF'\n  },\n  dropdown: {\n    marginTop: theme.spacing(-1),\n    backgroundColor: '#FFF'\n  },\n  locationDropDown: {\n    margin: theme.spacing(0),\n    marginTop: theme.spacing(-0.5),\n    fontSize: '0.75rem'\n  },\n  box: {\n    display: 'flex',\n    justifyContent: 'space-around',\n    flexDirection: 'row',\n    paddingBottom: '15px',\n    gap: '10px',\n    [theme.breakpoints.down('sm')]: {\n      flexDirection: 'column',\n      flexWrap: 'wrap',\n      alignItems: 'flex-start'\n    }\n  }\n}));\n\nconst PAYMENT_APPROVED = 1;\nconst PAYMENT_DENIED = 43;\nconst RESULT_SUCCESS = 200;\nconst RESULT_FAILURE = 401;\n\nexport const PaymentReversalForm = ({ id, paymentData, onSubmitCompleted }) => {\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  const [loading, setLoading] = useState(true);\n  const [paymentTransaction, setPaymentTransaction] = useState(undefined);\n\n  /**\n   * API call to get the payment transaction details\n   */\n  const getPaymentTransaction = useCallback(\n    async (payload) => {\n      if (!payload) {\n        return null;\n      }\n\n      return apiMutate(\n        ConfigService.pgV1ApiUrl,\n        `PaymentTransaction/search`,\n        {\n          method: 'POST',\n          data: payload\n        },\n        {}\n      );\n    },\n    []\n  );\n\n  /**\n   * API call to get the account information by account number\n   */\n  const reverseTransactionExecute = useCallback(\n    async (transactionID) => {\n      if (!transactionID) {\n        return null;\n      }\n\n      return apiMutate(\n        ConfigService.pgV1ApiUrl,\n        `PaymentTransaction/${transactionID}`,\n        {\n          method: 'DELETE',\n        },\n        {}\n      );\n    },\n    []\n  );\n\n  /**\n   * submitAccountDetailsForm\n   * @param {*} formData\n   * @return {*}\n   */\n  const handleSubmitPaymentReversal = (values) => {\n      // const data = {\n      //   amountToReverse: values.amountToReverse,\n      //   isSendCustomerPaymentConfirmation:\n      //     values.isSendCustomerPaymentConfirmation\n      // };\n\n      if (!paymentData?.transactionId) {\n        return;\n      }\n\n      reverseTransactionExecute(paymentData?.transactionId)\n        .then(() => {\n          onSubmitCompleted && onSubmitCompleted({ transactionId: paymentData?.transactionId, error: false });\n        })\n        .catch((error) => {\n          onSubmitCompleted && onSubmitCompleted({ transactionId: paymentData?.transactionId, error });\n        });\n  }\n\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        setLoading(true);\n        const response = await getPaymentTransaction({\n          eagerLoad: true,\n          pageNumber: 1,\n          pageSize: 20,\n          filterElements: [\n            {\n              searchField: 'transactionId',\n              searchValue: paymentData?.transactionId,\n              searchOperator: '=',\n            },\n          ],\n          orderElements: [],\n        });\n\n        if (response?.data) {\n          setPaymentTransaction(response?.data?.pageList?.[0]);\n        }\n\n      } catch (err) {\n        console.error(err);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    if (paymentData?.transactionId) {\n      fetchData();\n    }\n  }, [getPaymentTransaction, paymentData]);\n\n  const statusText = useMemo(() => {\n      return (paymentTransaction?.responseCode === PAYMENT_APPROVED && paymentTransaction?.paymentResultID === RESULT_SUCCESS) ? 'Approved' :\n             (paymentTransaction?.responseCode === PAYMENT_DENIED && paymentTransaction?.paymentResultID === RESULT_FAILURE) ? 'Declined' : 'Undetermined';\n  }, [paymentTransaction]);\n\n  const statusCode = useMemo(() => {\n    return (paymentTransaction?.responseCode === PAYMENT_APPROVED && paymentTransaction?.paymentResultID === RESULT_SUCCESS) ?  'ok':\n           (paymentTransaction?.responseCode === PAYMENT_DENIED && paymentTransaction?.paymentResultID === RESULT_FAILURE) ? 'error'  : 'warning';\n  }, [paymentTransaction]);\n\n  return (\n    <Box>\n      {loading && (\n        <Box sx={{ width: '100%' }}>\n          <LinearProgress />\n        </Box>\n      )}\n      <Box className={classes.box}>\n        <FluentCardText title='Value' description={`$${paymentData?.amount}`} />\n        <FluentCardText\n          title='Status'\n          description={\n            <IndicatorChip\n              text={statusText}\n              status={statusCode}\n            />\n          }\n        />\n      </Box>\n      <AmbientCard fullWidth={true}>\n        <Typography\n          variant='subtitle2'\n          style={{ marginTop: '0px', marginBottom: '10px' }}\n        >\n          {t('Payment Details')}\n        </Typography>\n\n        <Box display='flex' flexDirection='column'>\n          <Grid container spacing={1}>\n            {[\n              [t('Transaction ID'), paymentData?.transactionId || t('N/A')],\n              [t('Date/Time'), paymentData?.transactionDate ? format(new Date(paymentData?.transactionDate), 'EEE, MMM d, yyyy') : t('N/A')],\n              [t('Processor'), paymentData?.paymentSourceName || t('No Information found')],\n              [t('Response Code'), paymentData?.authorizationNumber || t('N/A')]\n            ].map(([k, v]) => (\n              <Grid item xs={12} sm={6}>\n                {/* @ts-ignore */}\n                <ListElement subject={k} value={v} hideDivider={true} />\n              </Grid>\n            ))}\n          </Grid>\n        </Box>\n\n        <Divider style={{ marginTop: '10px', marginBottom: '10px' }} />\n\n        <Box display='flex' flexDirection='column'>\n          <Grid container spacing={1}>\n            {[\n              [t('Customer Name'), paymentTransaction?.reference3 || t('N/A')],\n              [t('Type'), paymentData?.tender || t('N/A')],\n              [t('Card Holder Name'), t('N/A')],\n              [t('CC Number'), paymentData?.cardLast4 || t('N/A')],\n              [t('Company'), paymentTransaction?.applicationClient?.name || t('N/A')],\n              [t('Expiration Date'), paymentData?.date || t('N/A')],\n              [t('AVS'), t('N/A')],\n              [t('Status'),paymentData?.authorizationNumber ? 'Approved' : 'Declined'],\n              [t('Confirmation'), paymentData?.authorizationNumber || t('N/A')]\n            ].map(([k, v]) => (\n              <Grid item xs={12} sm={6}>\n                {/* @ts-ignore */}\n                <ListElement subject={k} value={v} hideDivider={true} />\n              </Grid>\n            ))}\n          </Grid>\n        </Box>\n\n        <Divider style={{ marginTop: '10px', marginBottom: '10px' }} />\n\n        <Box display='flex' flexDirection='column'>\n          <Grid container spacing={1}>\n            {[\n              [t('First Attempt Date'), paymentData?.date || t('N/A')],\n              [t('Initial Transaction'), paymentData?.date || t('N/A')],\n              [t('Next Attempt Date'), paymentData?.date || t('N/A')],\n              [t('Retry Count'), t('N/A')]\n            ].map(([k, v]) => (\n              <Grid item xs={12} sm={6}>\n                {/* @ts-ignore */}\n                <ListElement subject={k} value={v} hideDivider={true} />\n              </Grid>\n            ))}\n          </Grid>\n        </Box>\n\n        <Divider style={{ marginTop: '10px', marginBottom: '10px' }} />\n\n        <Form\n          id={id}\n          onSubmit={handleSubmitPaymentReversal}\n          render={({ handleSubmit, form, values }) => {\n            return (\n              <>\n                <FormControl className={classes.formControl}>\n                  <Field\n                    component={FluentTextField}\n                    ComponentProps={{\n                      label: t('Amount to Reverse'),\n                      variant: 'outlined',\n                      margin: 'normal',\n                      size: 'small',\n                      disabled: false,\n                      fullWidth: true,\n                      autoComplete: 'off',\n                      inputProps: {\n                        maxLength: 256,\n                        autocomplete: 'off'\n                      }\n                    }}\n                    name='amountToReverse'\n                    initialValue={paymentData?.amount}\n                    onChange={() => {}}\n                    required={true}\n                  />\n                </FormControl>\n\n                <FormControl className={classes.formControlGeneral}>\n                  <FormControlLabel\n                    control={\n                      <Field\n                        component={FluentCheckbox}\n                        name='isSendCustomerPaymentConfirmation'\n                        type='checkbox'\n                        defaultValue={false}\n                        required={false}\n                        onChange={() => {}}\n                        // @ts-ignore\n                        size='small'\n                      />\n                    }\n                    label={t('Send Customer Payment Confirmation')}\n                  />\n                </FormControl>\n              </>\n            );\n          }}\n        />\n      </AmbientCard>\n    </Box>\n  );\n};\n"],"mappings":"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"}