@pisell/private-materials 6.12.311 → 6.12.313

package/lib/components/HDLKiosk/slices/payment/Screen/index.js

@@ -27,23 +27,52 @@ function ConfirmOrderIcon() {
 		"aria-hidden": "true"
 	}, /* @__PURE__ */ react.default.createElement("path", { d: "m5 12 4 4L19 6" }));
 }
-/** 与 PaymentModal 一致：EFTPOS/信用卡使用 credit，其余自定义方式使用 custom。 */
-function PaymentMethodIcon({ code, type }) {
-	const isCard = code === "EFTPOS" || type === "credit-card" || type === "eftpos";
+/** 名称含 cash 时优先展示纸币，否则按卡支付、现金配置和自定义支付区分。 */
+function PaymentMethodIcon({ code, name, type, eftpos, cash }) {
+	const nameContainsCash = /cash/i.test(name);
+	const isCash = nameContainsCash || cash;
+	const isCard = !nameContainsCash && (eftpos || code === "EFTPOS" || type === "credit-card" || type === "eftpos");
 	return /* @__PURE__ */ react.default.createElement("span", {
 		className: "hdl-payment-method__icon",
-		style: { background: isCard ? "#FE8279" : "#D277E4" },
+		style: { background: isCard ? "#FE8279" : isCash ? "#D69B28" : "#D277E4" },
 		"aria-hidden": "true"
-	}, /* @__PURE__ */ react.default.createElement(_pisell_materials.Iconfont, {
-		type: isCard ? "pisell2-credit" : "pisell2-custom",
+	}, isCard ? /* @__PURE__ */ react.default.createElement(_pisell_materials.Iconfont, {
+		type: "pisell2-credit-card-02",
 		style: {
 			fontSize: "46px",
 			color: "#fff"
 		}
-	}));
+	}) : /* @__PURE__ */ react.default.createElement("svg", {
+		viewBox: "0 0 32 32",
+		width: "48",
+		height: "48",
+		fill: "none",
+		stroke: "#fff",
+		strokeWidth: "1.8",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false"
+	}, isCash ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("rect", {
+		x: "3",
+		y: "6",
+		width: "26",
+		height: "17",
+		rx: "3"
+	}), /* @__PURE__ */ react.default.createElement("path", { d: "M7 26h18M3 11a5 5 0 0 0 5-5m16 0a5 5 0 0 0 5 5M3 18a5 5 0 0 1 5 5m16 0a5 5 0 0 1 5-5" }), /* @__PURE__ */ react.default.createElement("ellipse", {
+		cx: "16",
+		cy: "14.5",
+		rx: "3.5",
+		ry: "4.5"
+	})) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("rect", {
+		x: "7",
+		y: "4",
+		width: "14",
+		height: "9",
+		rx: "2"
+	}), /* @__PURE__ */ react.default.createElement("path", { d: "M11 8.5h6M14 13v3M8 16h16l4 7v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4l4-7ZM4 23h24M13 25.5h6M10 19.5h2m3 0h2m3 0h2" }))));
 }
 function CheckoutScreen({ model, orderBar, send }) {
-	var _model$paymentFeedbac;
+	var _model$paymentFeedbac2, _model$paymentFeedbac4, _model$paymentFeedbac5;
 	const sendRef = (0, react.useRef)(send);
 	sendRef.current = send;
 	const goBack = (0, react.useCallback)(() => {
@@ -55,6 +84,47 @@ function CheckoutScreen({ model, orderBar, send }) {
 	const canReturnToCart = Boolean(orderBar && orderBar.cartLineCount > 0) && model.canLeavePayment;
 	const [restartOrderOpen, setRestartOrderOpen] = (0, react.useState)(false);
 	const [dismissedFeedbackKey, setDismissedFeedbackKey] = (0, react.useState)();
+	const automaticPaymentHandled = (0, react.useRef)(false);
+	const confirmNoPayment = (0, react.useCallback)(() => {
+		var _model$paymentFeedbac;
+		automaticPaymentHandled.current = true;
+		setDismissedFeedbackKey((_model$paymentFeedbac = model.paymentFeedback) === null || _model$paymentFeedbac === void 0 ? void 0 : _model$paymentFeedbac.key);
+		sendRef.current({
+			kind: "command",
+			command: "checkout.completeNoPayment"
+		});
+	}, [(_model$paymentFeedbac2 = model.paymentFeedback) === null || _model$paymentFeedbac2 === void 0 ? void 0 : _model$paymentFeedbac2.key]);
+	const selectPayment = (0, react.useCallback)((method) => {
+		var _model$paymentFeedbac3;
+		automaticPaymentHandled.current = true;
+		setDismissedFeedbackKey((_model$paymentFeedbac3 = model.paymentFeedback) === null || _model$paymentFeedbac3 === void 0 ? void 0 : _model$paymentFeedbac3.key);
+		sendRef.current({
+			kind: "command",
+			command: method.eftpos ? "checkout.payEftpos" : "checkout.requestStaffPaymentApproval",
+			input: { paymentMethodId: method.id }
+		});
+	}, [(_model$paymentFeedbac4 = model.paymentFeedback) === null || _model$paymentFeedbac4 === void 0 ? void 0 : _model$paymentFeedbac4.key]);
+	(0, react.useEffect)(() => {
+		if (model.paymentFeedback) automaticPaymentHandled.current = true;
+		if (automaticPaymentHandled.current || model.busy || model.resetting || model.paymentResult || model.paymentResultPending || restartOrderOpen || !model.totalText) return;
+		let startPayment;
+		if (model.noPaymentRequired) {
+			if (model.canCompleteNoPayment) startPayment = confirmNoPayment;
+		} else if (model.canSelectPayment && !model.paymentMethodsLoading && !model.paymentMethodsErrorReference && model.paymentMethods.length === 1) startPayment = () => selectPayment(model.paymentMethods[0]);
+		if (!startPayment) return;
+		let cancelled = false;
+		Promise.resolve().then(() => {
+			if (!cancelled && !automaticPaymentHandled.current) startPayment();
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		model,
+		restartOrderOpen,
+		confirmNoPayment,
+		selectPayment
+	]);
 	const [returnCountdown, setReturnCountdown] = (0, react.useState)(10);
 	const resetOrder = (0, react.useCallback)((source) => sendRef.current({
 		kind: "session",
@@ -150,11 +220,7 @@ function CheckoutScreen({ model, orderBar, send }) {
 		role: "status"
 	}, /* @__PURE__ */ react.default.createElement("span", { className: "hdl-operation-overlay__spinner" }), /* @__PURE__ */ react.default.createElement("strong", null, _pisell_utils.locales.getText("pisell2.hdl-kiosk.payment-processing"))));
 	const paymentDisabled = !model.canSelectPayment || !model.totalText;
-	const visibleFeedback = ((_model$paymentFeedbac = model.paymentFeedback) === null || _model$paymentFeedbac === void 0 ? void 0 : _model$paymentFeedbac.key) === dismissedFeedbackKey ? void 0 : model.paymentFeedback;
-	const dismissCurrentFeedback = () => {
-		var _model$paymentFeedbac2;
-		return setDismissedFeedbackKey((_model$paymentFeedbac2 = model.paymentFeedback) === null || _model$paymentFeedbac2 === void 0 ? void 0 : _model$paymentFeedbac2.key);
-	};
+	const visibleFeedback = ((_model$paymentFeedbac5 = model.paymentFeedback) === null || _model$paymentFeedbac5 === void 0 ? void 0 : _model$paymentFeedbac5.key) === dismissedFeedbackKey ? void 0 : model.paymentFeedback;
 	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("section", {
 		className: "hdl-checkout-screen",
 		"aria-labelledby": "hdl-payment-method-title"
@@ -169,13 +235,7 @@ function CheckoutScreen({ model, orderBar, send }) {
 		className: "hdl-payment-method hdl-no-payment-confirm",
 		"aria-busy": model.busy,
 		disabled: !model.canCompleteNoPayment,
-		onClick: () => {
-			dismissCurrentFeedback();
-			send({
-				kind: "command",
-				command: "checkout.completeNoPayment"
-			});
-		}
+		onClick: confirmNoPayment
 	}, /* @__PURE__ */ react.default.createElement("span", { className: "hdl-no-payment-confirm__icon" }, /* @__PURE__ */ react.default.createElement(ConfirmOrderIcon, null)), /* @__PURE__ */ react.default.createElement("strong", null, _pisell_utils.locales.getText(model.busy ? "pisell2.hdl-kiosk.no-payment-confirming" : "pisell2.hdl-kiosk.no-payment-confirm")), /* @__PURE__ */ react.default.createElement(NextIcon, null)) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, model.paymentMethodsLoading ? /* @__PURE__ */ react.default.createElement("p", {
 		className: "hdl-payment-methods__notice",
 		role: "status"
@@ -184,32 +244,21 @@ function CheckoutScreen({ model, orderBar, send }) {
 		role: model.paymentMethodsErrorReference ? "alert" : "status"
 	}, _pisell_utils.locales.getText("pisell2.hdl-kiosk.payment-methods-unavailable")) : null, model.paymentMethods.map((method) => {
 		const eftpos = method.eftpos;
+		const displayName = method.name.replace(/-Linkly/g, "");
 		return /* @__PURE__ */ react.default.createElement("button", {
 			key: method.id,
 			type: "button",
 			className: `hdl-payment-method hdl-payment-method--${eftpos ? "card" : "cash"}`,
-			"aria-label": method.name,
+			"aria-label": displayName,
 			disabled: paymentDisabled,
-			onClick: () => {
-				dismissCurrentFeedback();
-				if (eftpos) {
-					send({
-						kind: "command",
-						command: "checkout.payEftpos",
-						input: { paymentMethodId: method.id }
-					});
-					return;
-				}
-				send({
-					kind: "command",
-					command: "checkout.requestStaffPaymentApproval",
-					input: { paymentMethodId: method.id }
-				});
-			}
+			onClick: () => selectPayment(method)
 		}, /* @__PURE__ */ react.default.createElement(PaymentMethodIcon, {
 			code: method.code,
-			type: method.type
-		}), /* @__PURE__ */ react.default.createElement("span", null, /* @__PURE__ */ react.default.createElement("strong", null, method.name)), /* @__PURE__ */ react.default.createElement(NextIcon, null));
+			name: method.name,
+			type: method.type,
+			eftpos: method.eftpos,
+			cash: method.cash
+		}), /* @__PURE__ */ react.default.createElement("span", null, /* @__PURE__ */ react.default.createElement("strong", null, displayName)), /* @__PURE__ */ react.default.createElement(NextIcon, null));
 	}))), /* @__PURE__ */ react.default.createElement("div", { className: "hdl-payment-restart-section" }, /* @__PURE__ */ react.default.createElement(require_index$3.RestartOrderButton, {
 		disabled: !model.canRestartOrder,
 		title: model.restartOrderBlockedReason,

package/lib/components/HDLKiosk/slices/payment/view.js

@@ -73,10 +73,13 @@ function createCheckoutScreenModel(snapshot, sales, payment, completed = false,
 		busy: snapshot.status === "running",
 		noPaymentRequired,
 		canCompleteNoPayment: noPaymentRequired && interactionAvailable,
-		paymentMethods: payment.methods,
+		paymentMethods: payment.methods.map((method) => {
+			var _method$metadata, _method$metadata2;
+			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, method), {}, { cash: method.type === "custom" && (((_method$metadata = method.metadata) === null || _method$metadata === void 0 ? void 0 : _method$metadata.order_open_cash_drawer) === 1 || ((_method$metadata2 = method.metadata) === null || _method$metadata2 === void 0 ? void 0 : _method$metadata2.order_open_cash_drawer) === "1") });
+		}),
 		paymentMethodsLoading: payment.loading,
 		paymentMethodsErrorReference: payment.errorReference,
-		canSelectPayment: interactionAvailable,
+		canSelectPayment: interactionAvailable && sales.summary.status === "ready",
 		canLeavePayment: interactionAvailable,
 		canRestartOrder: interactionAvailable,
 		restartOrderBlockedReason: paymentSafeToChange ? void 0 : _pisell_utils.locales.getText("pisell2.hdl-kiosk.restart-order-payment-blocked"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/private-materials",
-  "version": "6.12.311",
+  "version": "6.12.313",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -73,9 +73,9 @@
     "use-sync-external-store": "^1.6.0",
     "@pisell/pi-payment-sdk": "0.0.3",
     "@pisell/utils": "3.0.7",
-    "@pisell/materials": "6.12.79",
     "@pisell/date-picker": "3.0.12",
-    "@pisell/icon": "0.0.11"
+    "@pisell/icon": "0.0.11",
+    "@pisell/materials": "6.12.79"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/es/private-materials/lowcode/authmodal/meta.d.ts

@@ -1 +0,0 @@
-export { };