@pisell/private-materials 6.6.8 → 6.6.9

package/dist/lib/components/eftposPay/hooks.js

@@ -0,0 +1,239 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.js');
+const require_const = require('./const.js');
+const require_index = require('./store/index.js');
+let react = require("react");
+let __pisell_utils = require("@pisell/utils");
+
+//#region src/components/eftposPay/hooks.tsx
+const Max4004 = 1;
+const useStoreRef = () => {
+	const data = require_index.useContextData();
+	const { order_id, device, pay, number, mode, net, status, symbol, amount, eftpos, client } = data;
+	const dataRef = (0, react.useRef)(data);
+	const deviceRef = (0, react.useRef)(device);
+	const payRef = (0, react.useRef)(pay);
+	const numRef = (0, react.useRef)(number);
+	const orderIdRef = (0, react.useRef)(order_id);
+	const modeRef = (0, react.useRef)(mode);
+	const statusRef = (0, react.useRef)(status);
+	const netRef = (0, react.useRef)(net);
+	const symbolRef = (0, react.useRef)(symbol);
+	const amountRef = (0, react.useRef)(amount);
+	const eftposRef = (0, react.useRef)(eftpos);
+	const clientRef = (0, react.useRef)(client);
+	(0, react.useEffect)(() => {
+		dataRef.current = data;
+	}, [data]);
+	(0, react.useEffect)(() => {
+		deviceRef.current = device;
+	}, [device]);
+	(0, react.useEffect)(() => {
+		payRef.current = pay;
+	}, [pay]);
+	(0, react.useEffect)(() => {
+		numRef.current = number;
+	}, [number]);
+	(0, react.useEffect)(() => {
+		orderIdRef.current = order_id;
+	}, [order_id]);
+	(0, react.useEffect)(() => {
+		modeRef.current = mode;
+	}, [mode]);
+	(0, react.useEffect)(() => {
+		statusRef.current = status;
+	}, [status]);
+	(0, react.useEffect)(() => {
+		netRef.current = net;
+	}, [net]);
+	(0, react.useEffect)(() => {
+		symbolRef.current = symbol;
+	}, [symbol]);
+	(0, react.useEffect)(() => {
+		amountRef.current = amount;
+	}, [amount]);
+	(0, react.useEffect)(() => {
+		eftposRef.current = eftpos;
+	}, [eftpos]);
+	(0, react.useEffect)(() => {
+		clientRef.current = client;
+	}, [client]);
+	return {
+		deviceRef,
+		payRef,
+		numRef,
+		orderIdRef,
+		modeRef,
+		statusRef,
+		netRef,
+		symbolRef,
+		amountRef,
+		eftposRef,
+		clientRef,
+		dataRef
+	};
+};
+/**
+* @title: 通用失败处理
+* @description:  固定步骤 错误处理逻辑
+* @return null
+* @Author: hongbing.wang
+* @Date: 2024-08-12 11:54
+*/
+const useFail = (index) => {
+	const { steps, custom } = require_index.useContextData();
+	const { modeRef, clientRef } = useStoreRef();
+	const dispatch = require_index.useDispatch();
+	const ref = (0, react.useRef)(custom?.retry || 0);
+	(0, react.useEffect)(() => {
+		ref.current = custom?.retry || 0;
+	}, [custom?.retry]);
+	return (0, react.useCallback)((res, isMark = false) => {
+		if (!res || !res.code) {
+			dispatch(require_index.updateCustom({ errorStatus: "unknow" }));
+			dispatch(require_index.updateComponent("UnknowFail"));
+			return;
+		}
+		const [code] = [`${res.code}`];
+		console.log("code---->>>>>>>", code);
+		if (code === require_const.PayStatus.Unknown) {
+			steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.failed")(modeRef.current);
+			steps[index].fail = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.fail");
+			steps[index].status = "fail";
+			dispatch(require_index.updateSteps(steps));
+			dispatch(require_index.updateComponent("Fail"));
+			dispatch(require_index.updateCustom({ errorStatus: "know" }));
+			return;
+		}
+		if (code === require_const.PayStatus.PayTimeout) {
+			steps[index].fail = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.fail.timeout");
+			steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.failed")(modeRef.current);
+			steps[index].status = "fail";
+			dispatch(require_index.updateSteps(steps));
+			dispatch(require_index.updateComponent("Fail"));
+			dispatch(require_index.updateCustom({ errorStatus: "know" }));
+			return;
+		}
+		if (code === require_const.PayStatus.Timeout) {
+			if (isMark) {
+				if (clientRef.current === require_const.ClientEnum.User) {
+					steps[index].status = "fail";
+					steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.timedout.title");
+					steps[index].fail = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.eftpos.fail.other");
+					steps[index].custom = steps[index].custom ? {
+						...steps[index].custom,
+						isPosNetworkError: true
+					} : { isPosNetworkError: true };
+					dispatch(require_index.updateSteps(steps));
+					dispatch(require_index.updateComponent("Fail"));
+					dispatch(require_index.updateCustom({ errorStatus: "know" }));
+					return;
+				}
+				steps[index].status = "fail";
+				dispatch(require_index.updateSteps(steps));
+				dispatch(require_index.updateState({ manual: {
+					title: __pisell_utils.locales.getText("page.eftpos-pay.text.timedout.title"),
+					text: __pisell_utils.locales.getText("page.eftpos-pay.text.timedout.text")(modeRef.current)
+				} }));
+				dispatch(require_index.updateCustom({ errorStatus: "know" }));
+				dispatch(require_index.updateComponent("Manual"));
+				return;
+			}
+			steps[index].fail = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.pay.fail.timeout");
+			steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.failed")(modeRef.current);
+			steps[index].status = "fail";
+			dispatch(require_index.updateSteps(steps));
+			dispatch(require_index.updateComponent("Fail"));
+			dispatch(require_index.updateCustom({ errorStatus: "know" }));
+			return;
+		}
+		if (code === require_const.PayStatus.NoPay) {
+			if (ref.current > Max4004) {
+				dispatch(require_index.updateState({ number: "" }));
+				dispatch(require_index.updateCustom({ retry: ref.current }));
+				steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.failed")(modeRef.current);
+				steps[index].fail = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.fail");
+				steps[index].status = "fail";
+				dispatch(require_index.updateSteps(steps));
+				dispatch(require_index.updateComponent("Fail"));
+				return;
+			}
+			ref.current += 1;
+			dispatch(require_index.updateState({ number: "" }));
+			dispatch(require_index.updateCustom({ retry: ref.current }));
+			dispatch(require_index.updateKey(Date.now()));
+			return;
+		}
+		if (code === require_const.PayStatus.PayOtherEftposFailed) {
+			steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.fail.terminal.title");
+			steps[index].fail = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.fail.terminal");
+			steps[index].status = "fail";
+			dispatch(require_index.updateSteps(steps));
+			dispatch(require_index.updateComponent("Fail"));
+			dispatch(require_index.updateCustom({ errorStatus: "know" }));
+			return;
+		}
+		if (code === require_const.PayStatus.PayCardErrorFailed) {
+			steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.fail.cancel.title");
+			steps[index].fail = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.fail.cancel");
+			steps[index].status = "fail";
+			dispatch(require_index.updateSteps(steps));
+			dispatch(require_index.updateComponent("Fail"));
+			dispatch(require_index.updateCustom({ errorStatus: "know" }));
+			return;
+		}
+		if (code === require_const.PayStatus.NoNetWork || code === require_const.PayStatus.SocketError) {
+			steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.interrupted");
+			steps[index].warn = clientRef.current === require_const.ClientEnum.Merchant ? `${__pisell_utils.locales.getText("page.eftpos-pay.text.transaction.eftpos.fail.title")}\n${__pisell_utils.locales.getText("page.eftpos-pay.text.transaction.eftpos.fail.power")}\n${__pisell_utils.locales.getText("page.eftpos-pay.text.transaction.eftpos.fail.device")}\n${__pisell_utils.locales.getText("page.eftpos-pay.text.transaction.eftpos.fail.network")}\n${__pisell_utils.locales.getText("page.eftpos-pay.text.transaction.eftpos.fail.if")(modeRef.current)}` : __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.eftpos.fail.other");
+			steps[index].status = "warn";
+			steps[index].custom = steps[index].custom ? {
+				...steps[index].custom,
+				isPosNetworkError: true
+			} : { isPosNetworkError: true };
+			dispatch(require_index.updateSteps(steps));
+			dispatch(require_index.updateComponent("Fail"));
+			dispatch(require_index.updateCustom({ errorStatus: "know" }));
+			return;
+		}
+		if (code === require_const.PayStatus.PayBankRefuses) {
+			steps[index].fail = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.back.declined.text");
+			steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.back.declined.title");
+			steps[index].status = "fail";
+			dispatch(require_index.updateSteps(steps));
+			dispatch(require_index.updateComponent("Fail"));
+			dispatch(require_index.updateCustom({ errorStatus: "know" }));
+			return;
+		}
+		if (code === require_const.PayStatus.SignatureDeclined) {
+			steps[index].fail = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.user.declined.text");
+			steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.user.declined.title");
+			steps[index].status = "fail";
+			dispatch(require_index.updateSteps(steps));
+			dispatch(require_index.updateComponent("Fail"));
+			dispatch(require_index.updateCustom({ errorStatus: "know" }));
+			return;
+		}
+		if (code === require_const.PayStatus.UserConfigError || code === require_const.PayStatus.PairingFailure) {
+			steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.user.config.title");
+			steps[index].fail = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.user.config.text");
+			steps[index].status = "fail";
+			dispatch(require_index.updateSteps(steps));
+			dispatch(require_index.updateComponent("Fail"));
+			dispatch(require_index.updateCustom({ errorStatus: "know" }));
+			return;
+		}
+		steps[index].title = __pisell_utils.locales.getText("page.eftpos-pay.text.failed")(modeRef.current);
+		steps[index].status = "fail";
+		steps[index].fail = __pisell_utils.locales.getText("page.eftpos-pay.text.transaction.fail");
+		dispatch(require_index.updateSteps(steps));
+		dispatch(require_index.updateCustom({ errorStatus: "unknow" }));
+		dispatch(require_index.updateComponent("UnknowFail"));
+	}, [
+		dispatch,
+		index,
+		steps
+	]);
+};
+
+//#endregion
+exports.useFail = useFail;
+exports.useStoreRef = useStoreRef;

package/dist/lib/components/eftposPay/index.d.ts

@@ -0,0 +1,7 @@
+import { PosProps } from "./const.js";
+import "./index.less";
+
+//#region src/components/eftposPay/index.d.ts
+declare const _default: (props: PosProps) => JSX.Element | null;
+//#endregion
+export { _default };

package/dist/lib/components/eftposPay/index.js

@@ -0,0 +1,188 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.js');
+const require_locales = require('../../utils/locales.js');
+const require_useEngineContext = require('../../hooks/useEngineContext.js');
+const require_const = require('./const.js');
+const require_index = require('./store/index.js');
+const require_manufacturer = require('./manufacturer.js');
+const require_app = require('./app.js');
+const require_tip = require('./tip.js');
+const require_locales$1 = require('./locales.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __pisell_utils = require("@pisell/utils");
+require("./index.less");
+
+//#region src/components/eftposPay/index.tsx
+__pisell_utils.locales.init(require_locales$1.default, require_locales.getLocale());
+var eftposPay_default = (props) => {
+	const [check, setCheckStatus] = (0, react.useState)(props.type === require_const.EftposEnum.Tyro ? require_const.OrderEumn.Null : props.source === require_const.RestoreEumn.Restore ? require_const.OrderEumn.Restore : require_const.OrderEumn.Normal);
+	const context = require_useEngineContext.default();
+	const [cardSurcharge, setCardSurcharge] = (0, react.useState)(0);
+	const [receipt, setReceipt] = (0, react.useState)([]);
+	const [updateTime, setTime] = (0, react.useState)("");
+	console.log("context = ", context);
+	const [historyData, setHistory] = (0, react.useState)();
+	const { formatAmount, storage, store } = context.appHelper?.utils || {
+		store: {},
+		formatAmount: (number, precision, symbol$1) => `${symbol$1}${number}`,
+		storage: () => ({ get: () => "" })
+	};
+	/**
+	* terminal : terminal 内嵌
+	* android_kiosk     : kiosk 内嵌
+	*/
+	const channel = (0, react.useMemo)(() => {
+		const channel$1 = storage?.get?.("channel") || "";
+		if (channel$1 === "terminal") return "terminal";
+		if (channel$1 === "android_kiosk") return "kiosk";
+		return "";
+	}, []);
+	const isMobile = (0, react.useMemo)(() => Boolean(channel), [channel]);
+	const symbol = store?.getState?.()?.global?.symbol || "$";
+	const mode = (0, react.useMemo)(() => {
+		if (props.source === require_const.RestoreEumn.Restore) {
+			if (props.params) {
+				if (props.params.mode) return props.params.mode;
+			}
+			return require_const.ModeEnum.Pay;
+		}
+		if (props.mode) return props.mode;
+		return require_const.ModeEnum.Pay;
+	}, [
+		props.mode,
+		props.source,
+		props.params
+	]);
+	/**
+	* @title: 构建全局状态
+	* @description: 1. 初始化, 2. 恢复
+	* @Author: hongbing.wang
+	* @Date: 2024-08-20 13:11
+	*/
+	const state = (0, react.useMemo)(() => {
+		const current = props.params && props.params.symbol ? props.params.symbol : symbol;
+		if (props.source === require_const.RestoreEumn.Restore) return props.params;
+		return require_manufacturer.getInitState(props.type, props.params ? {
+			mode,
+			...props.params,
+			symbol: current
+		} : {
+			mode,
+			symbol: current
+		});
+	}, [
+		mode,
+		props.params,
+		props.type,
+		symbol
+	]);
+	const stateRef = (0, react.useRef)(state);
+	(0, react.useEffect)(() => {
+		stateRef.current = state;
+	}, [state]);
+	const onChangeStatus = (0, react.useCallback)((status, params, other) => {
+		props.onChangeStatus(status, params, other);
+	}, []);
+	const action = (0, react.useMemo)(() => {
+		const act = (() => {
+			if (state.action) return state.action;
+			if (mode === require_const.ModeEnum.Pay || mode === require_const.ModeEnum.FullPay) {
+				if (state.device && state.pay) return require_const.RouteEnum.Pay;
+				if (state.device) return require_const.RouteEnum.Amount;
+				return require_const.RouteEnum.DeviceList;
+			}
+			if (mode === require_const.ModeEnum.Refund) {
+				if (state.device) return require_const.RouteEnum.Pay;
+				return require_const.RouteEnum.DeviceList;
+			}
+			if (mode === require_const.ModeEnum.Query) return require_const.RouteEnum.Pay;
+			throw Error("未知模式");
+		})();
+		onChangeStatus("page", act);
+		return act;
+	}, [mode, state]);
+	(0, react.useEffect)(() => {
+		document.body.id = "body";
+		console.log("初始化 ........112218017777");
+	}, []);
+	console.log("props?.params?.device_number = ", props?.params?.device_number);
+	/**
+	* @title: api 接口 数据
+	* @Author: hongbing.wang
+	* @Date: 2024-08-20 13:10
+	*/
+	const api = (0, react.useMemo)(() => {
+		if (typeof props.getApi === "function") return props.getApi();
+		return {};
+	}, [props.getApi]);
+	(0, react.useEffect)(() => {
+		if (props.source === require_const.RestoreEumn.Restore || props.type === require_const.EftposEnum.Tyro) return;
+		api.getTransaction({
+			order_id: stateRef.current.order_id,
+			card_reader_type: stateRef.current.eftpos,
+			receive_status: "unprocessed"
+		}).then((res) => {
+			if (!Array.isArray(res.data) || res.data.length === 0) {
+				setCheckStatus(require_const.OrderEumn.Null);
+				return;
+			}
+			const currentMode = stateRef.current.mode === require_const.ModeEnum.FullPay ? require_const.ModeEnum.Pay : stateRef.current.mode;
+			const list = res.data.filter((item) => item.action === currentMode);
+			if (list.length === 0) {
+				setCheckStatus(require_const.OrderEumn.Null);
+				return;
+			}
+			const latest = list.pop();
+			const numberList = list.map((item) => item.number);
+			if (latest.status === require_const.OrderEumn.Failed) {
+				setCheckStatus(latest.status);
+				onChangeStatus("mark_tx_processed", [...numberList, latest.number]);
+				return;
+			}
+			if (list.length > 0) onChangeStatus("mark_tx_processed", numberList);
+			const { pay_param_base64, card_reader_surcharge, receipt: receipt$1 } = latest?.metadata || {};
+			setTime(latest.updated_at);
+			setCardSurcharge(card_reader_surcharge || 0);
+			setReceipt(receipt$1 || []);
+			if (!pay_param_base64) {
+				setCheckStatus(require_const.OrderEumn.Failed);
+				return;
+			}
+			try {
+				setHistory(JSON.parse(decodeURIComponent(atob(decodeURIComponent(pay_param_base64)))));
+				setCheckStatus(latest.status);
+			} catch (e) {
+				setCheckStatus(require_const.OrderEumn.Failed);
+				return;
+			}
+		});
+	}, []);
+	if (check === require_const.OrderEumn.Normal) return null;
+	if (check === require_const.OrderEumn.Succeed) return /* @__PURE__ */ react.default.createElement(require_index.Provider, { state: historyData }, /* @__PURE__ */ react.default.createElement(require_tip.default, {
+		cardSurcharge,
+		receipts: receipt,
+		onChangeStatus,
+		onChangeParams: props.onChangeParams,
+		formatAmount,
+		successTime: updateTime,
+		className: isMobile ? "pisell-lowcode__eft-pay-terminal" : ""
+	}));
+	return /* @__PURE__ */ react.default.createElement(require_index.Provider, { state: check === require_const.OrderEumn.Pending ? historyData : state }, /* @__PURE__ */ react.default.createElement(require_app.default, {
+		api,
+		channel,
+		params: props.params,
+		onChangeStatus,
+		terminal: props.terminal,
+		onChangeParams: props.onChangeParams,
+		action: check === require_const.OrderEumn.Pending ? require_const.ModeEnum.Pay : action,
+		source: props.source,
+		tyroUrl: props.tyroUrl,
+		tyroVersion: props.tyroVersion,
+		device_number: props?.params?.device_number,
+		isMobile,
+		formatAmount
+	}));
+};
+
+//#endregion
+exports.default = eftposPay_default;

package/dist/lib/components/eftposPay/index.less

@@ -0,0 +1,272 @@
+@import './var.less';
+
+.pisell-lowcode__eft-pay-amount {
+  display: flex;
+  flex-direction: column;
+}
+
+.pisell-lowcode__eft-pay-step-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4;
+  margin: 4px 0;
+}
+.pisell-lowcode__eft-pay-sub-title,
+.pisell-lowcode__eft-pay-step-item,
+.pisell-lowcode__eft-pay-step-item-success {
+  color: var(--gray-true-900, #141414);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+
+  white-space: pre-line;
+}
+.pisell-lowcode__eft-pay-step-item-icon {
+  vertical-align: middle;
+  margin: 0 0 0 10px;
+}
+
+.pisell-lowcode__eft-pay-step-item-warn {
+  color: var(--error-600, #d92d20);
+}
+.pisell-lowcode__eft-pay-step-item-loading {
+  color: var(--gray-500, #667085);
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+.pisell-lowcode__eft-pay-step-item-tip {
+  color: var(--gray-500, #667085);
+  /* Text sm/Regular */
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+.pisell-lowcode__eft-pay-step-item-btns {
+  margin: 24px 0 0 0;
+  display: flex;
+  gap: 12px;
+  flex-shrink: 0;
+}
+.pisell-lowcode__eft-pay-step-item-btn {
+  flex: 1;
+  height: 48px !important;
+}
+
+.pisell-lowcode__eft-pay-amount-body {
+  gap: 20px;
+  display: flex;
+  flex-direction: column;
+  margin: 24px 0;
+}
+
+.pisell-lowcode__eft-pay-cash {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.pisell-lowcode__eft-pay-cash::after {
+  content: attr(data-money);
+}
+
+.pisell-lowcode__eft-pay-money {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  // margin-top: 24px 0 20px;
+}
+.pisell-lowcode__eft-pay-cash,
+.pisell-lowcode__eft-pay-money-title {
+  color: var(--Gray-700, #344054);
+  /* Text sm/Semibold */
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px; /* 142.857% */
+}
+.pisell-lowcode__eft-pay-money-tip {
+  color: var(--Gray-600, #475467);
+  /* Text sm/Regular */
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+.pisell-lowcode__eft-pay-surcharge {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // margin: 20px 0 24px;
+}
+.pisell-lowcode__eft-pay-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pisell-lowcode__eft-pay-total {
+  color: var(--Gray-900, #101828);
+  /* Text sm/Regular */
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+.pisell-lowcode__eft-pay-money {
+  color: var(--Gray-900, #101828);
+  /* Text sm/Regular */
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+
+.pisell-lowcode__eft-pay-amount-hint {
+  align-items: center;
+  display: flex;
+  padding: 16px;
+  gap: 16px;
+  align-self: stretch;
+
+  border-radius: 12px;
+  border: 1px solid var(--Warning-300, #fec84b);
+  background: var(--Warning-25, #fffcf5);
+
+  /* Shadow/xs */
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+
+  color: var(--Warning-700, #b54708);
+  /* Text sm/Semibold */
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px; /* 142.857% */
+}
+.pisell-lowcode__eft-pay-amount-warn {
+  position: relative;
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pisell-lowcode__eft-pay-amount-warn-icon {
+  color: #ee837a;
+  font-size: 16px;
+}
+.pisell-lowcode__eft-pay-amount-form {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+.pisell-lowcode__eft-pay-amount-item {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 8px;
+}
+.pisell-lowcode__eft-pay-amount-item-title {
+  color: var(--Gray-700, #344054);
+
+  /* Text sm/Semibold */
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px; /* 142.857% */
+}
+.pisell-lowcode__eft-pay-amount-push {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+}
+
+.pisell-lowcode__eft-pay-amount-body,
+.pisell-lowcode__eft-pay-body {
+  flex: 1;
+  overflow: auto;
+}
+
+.pisell-lowcode__eft-pay-fail-title,
+.pisell-lowcode__eft-pay-warn-title {
+  color: var(--gray-900, #101828);
+  /* Text lg/Semibold */
+
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 28px; /* 155.556% */
+}
+
+.pisell-lowcode__eft-pay-fail-text,
+.pisell-lowcode__eft-pay-warn-text {
+  color: var(--error-600, #d92d20);
+  /* Text sm/Regular */
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+
+  white-space: pre-line;
+}
+
+.pisell-lowcode__eft-pay-step-item-resolve {
+  color: var(--gray-true-900, #141414);
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+.pisell-lowcode__eft-pay-manual-btn {
+  // height: ;
+  height: 48px !important;
+}
+
+.pisell-lowcode__eft-pay-box {
+  max-height: var(--pisel-lc-pos-pay-max-height, unset);
+  width: var(--pisel-lc-pos-pay-width, 600px);
+  max-width: 100%;
+  padding: var(--pisel-lc-pos-pay-padding, 24px);
+}
+
+.pisell-lowcode__eft-pay-amount {
+  max-height: var(--pisel-lc-pos-amount-max-height, unset);
+  width: var(--pisel-lc-pos-amount-width, 600px);
+  max-width: 100%;
+  padding: var(--pisel-lc-pos-device-padding, 0 24px 24px);
+}
+
+.pisell-lowcode__eft-pay-terminal {
+  width: var(--pisel-lc-pos-terminal-width, 100%) !important;
+  height: var(--pisel-lc-pos-terminal-height, 100%) !important;
+  max-height: var(--pisel-lc-pos-terminal-max-height, unset) !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.pisell-lowcode__eft-pay-tyro-text {
+  color: var(--Gray-900, #101828);
+  /* Text sm/Regular */
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+  padding: 0 0 12px 0;
+}