@pisell/private-materials 3.4.57 → 3.4.59

package/dist/es/components/pay/toC/index.js

@@ -1,589 +0,0 @@
-import useEngineContext_default from "../../../hooks/useEngineContext.js";
-import { request } from "../../../utils/index.js";
-import PayCountdown_default from "./PayCountdown/index.js";
-import PayAmount_default from "./PayAmount/index.js";
-import { getIsWalletPassAndTripartitePayment } from "./utils.js";
-import WalletPassBlock_default from "./WalletPassBlock/index.js";
-import PaymentList_default from "./PaymentList/index.js";
-import { removePayGroupFromStorage } from "./payGroup.js";
-import { Context, Provider } from "./model.js";
-import usePaymentLogger_default from "../../../hooks/usePaymentLogger.js";
-import { getPaymentInit, getPaymentsAndWalletPass, getWalletNameAndPopupStatus } from "./serve.js";
-import PaymentMethods_default from "./PaymentMethods/index.js";
-import locales_default from "./locales.js";
-import React, { forwardRef, useContext, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { copyToClipboard, detectIncognito, getUniqueId, locales } from "@pisell/utils";
-import { Decimal as Decimal$1 } from "decimal.js";
-import { useMemoizedFn, useUpdateEffect } from "ahooks";
-import { PisellContainer, PisellLoading, PisellModal, PisellText, PisellToast } from "@pisell/materials";
-import "./index.less";
-
-//#region src/components/pay/toC/index.tsx
-/**
-* @title: C端支付
-* @description:
-* @param {ToCPayProps} props
-* @param {any} ref
-* @return {*}
-* @Author: zhiwei.Wang
-* @Date: 2024-08-16 10:43
-*/
-const ToCPay = (props, ref) => {
-	const { state, dispatch } = useContext(Context);
-	const paymentListRef = useRef();
-	const paymentMethodsRef = useRef();
-	const [loading, setLoading] = useState(true);
-	const [submitLoading, setSubmitLoading] = useState(false);
-	const [open, setOpen] = useState(false);
-	const [renderType, setRenderType] = useState("modal");
-	const walletPassBlockRef = useRef(null);
-	const context = useEngineContext_default();
-	const paymentLogger = usePaymentLogger_default({
-		orderId: state.payGroup?.order_id || "unknown",
-		step: "1"
-	});
-	const [showInformation, setShowInformation] = useState(false);
-	const [showDetectIncognitoConfirm, setShowDetectIncognitoConfirm] = useState(false);
-	const utils = context.appHelper.utils || {};
-	const dvaStore = context.appHelper.utils?.getStore?.()?.getState();
-	const customer_id = context.appHelper.utils?.getStore()?.getState?.()?.global?.userInfo?.id;
-	const shopName = dvaStore.core?.core?.shop?.name;
-	locales.init(locales_default, dvaStore.core?.translateLocale || "en");
-	request.setRequest(utils?.request);
-	/**
-	* @title: 初始化store
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-15 14:02
-	*/
-	const _initStore = (initProps) => {
-		dispatch({
-			type: "init",
-			payload: {
-				...initProps,
-				status: "init",
-				payCallback: props.callback,
-				history: context.appHelper.utils?.history,
-				front_order_uuid: getUniqueId("front_order_uuid_")
-			}
-		});
-	};
-	const getWalletSetting = async (initProps) => {
-		const { wallet, wallet_setting } = await getWalletNameAndPopupStatus({ setting_type: `${initProps?.order?.sale_channel || "online-store"}-wallet-setting` });
-		const setting = {
-			name: utils?.translation?.(wallet?.name) || locales.getText("tocPay.text.walletName")(shopName),
-			popup_status: wallet_setting?.popup_status ?? 1
-		};
-		if (setting.popup_status === 1) setTimeout(() => {
-			walletPassBlockRef.current?.open();
-		});
-		dispatch({
-			type: "setWalletSetting",
-			payload: setting
-		});
-	};
-	/**
-	* @title: 全局唯一初始化方法
-	* @description:
-	* @param {InitProps} initProps
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-15 14:02
-	*/
-	const init = async (initProps) => {
-		const { renderType: renderType$1 } = initProps;
-		paymentLogger.addLog({
-			key: "初始化开始",
-			value: ``
-		});
-		try {
-			setRenderType(renderType$1 ?? "modal");
-			setOpen(true);
-			setSubmitLoading(false);
-			setLoading(true);
-			_initStore(initProps);
-			removePayGroupFromStorage(initProps.order.order_id);
-			await _getPaymentsAndWalletPass(initProps.order);
-			await getWalletSetting(initProps);
-			paymentLogger.addLog({
-				key: "初始化成功",
-				value: ``
-			});
-		} catch (error) {
-			paymentLogger.addLog({
-				key: "初始化错误",
-				value: {
-					title: `订单${initProps?.order?.order_id} 初始化失败: ${error?.message || "未知错误"}`,
-					data: { order: initProps?.order }
-				}
-			});
-			paymentLogger.sendLogs("支付初始化失败", error);
-			throw error;
-		}
-	};
-	/**
-	* @title: 获取支付列表和钱包
-	* @description:
-	* @param {any} order
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-15 13:51
-	*/
-	const _getPaymentsAndWalletPass = async (order) => {
-		paymentLogger.addLog({
-			key: "获取支付列表开始",
-			value: { title: `订单${order?.order_id} 开始获取支付列表, 金额: ${order?.amount}` }
-		});
-		try {
-			const { remain_amount = 0, wallet_pass_recommend_list, wallet_pass_amount, payment_list, walletPass } = await getPaymentsAndWalletPass({
-				order_id: order.order_id,
-				total_amount: order.amount,
-				sale_channel: order.sale_channel || "online-store"
-			}) || {};
-			paymentLogger.addLog({
-				key: "支付数据获取",
-				value: ""
-			});
-			dispatch({
-				type: "setPayGroup",
-				payload: {
-					order_id: order?.order_id,
-					_order: order,
-					payment_group_id: order?.payment_group_id,
-					walletPass: walletPass ? {
-						...state.payGroup?.walletPass,
-						...walletPass,
-						amount: wallet_pass_amount,
-						cards: wallet_pass_recommend_list
-					} : null,
-					total_amount: order?.amount,
-					wait_amount: remain_amount
-				}
-			});
-			await paymentListRef.current?.init(payment_list);
-			setTimeout(() => {
-				setLoading(false);
-			}, 100);
-			paymentLogger.addLog({
-				key: "获取支付列表成功",
-				value: ""
-			});
-		} catch (err) {
-			console.log("err", err);
-			paymentLogger.addLog({
-				key: "获取支付列表错误",
-				value: {
-					title: `订单${order?.order_id} 获取失败: ${err?.message || "未知错误"}`,
-					data: { order }
-				}
-			});
-			paymentLogger.sendLogs("获取支付列表失败", err);
-			payCallback({
-				key: "fail",
-				data: {
-					err,
-					order,
-					fn: "_getPaymentsAndWalletPass"
-				}
-			});
-		}
-	};
-	/**
-	* @title: 选择支付方式
-	* @description:
-	* @param {string} type
-	* @param {PayGroup} payGroup
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 10:46
-	*/
-	const handlePaymentByType = async (type, payGroup) => {
-		const paymentType = type || state.payGroup?.otherPayment?.service;
-		const currentPayGroup = payGroup || state.payGroup;
-		paymentLogger.addLog({
-			key: "开始支付处理",
-			value: ""
-		});
-		try {
-			setSubmitLoading(true);
-			await paymentMethodsRef.current?.onPay({
-				type: paymentType,
-				payGroup: currentPayGroup
-			});
-			paymentLogger.addLog({
-				key: "支付方法调用成功",
-				value: ""
-			});
-			paymentLogger.sendLogs("支付方法调用成功");
-			setSubmitLoading(false);
-		} catch (error) {
-			paymentLogger.addLog({
-				key: "支付处理错误",
-				value: {
-					title: `订单${currentPayGroup?.order_id} ${paymentType}支付失败: ${error?.message || "未知错误"}`,
-					data: {
-						type: paymentType,
-						payGroup: currentPayGroup
-					}
-				}
-			});
-			paymentLogger.sendLogs("支付处理失败", error);
-			setSubmitLoading(false);
-			throw error;
-		}
-	};
-	/**
-	* @title: 创建交易组
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-15 13:41
-	*/
-	const paymentInit = async (newOrderId) => {
-		const orderId = newOrderId || state.payGroup?.order_id;
-		paymentLogger.addLog({
-			key: "开始创建交易组",
-			value: ""
-		});
-		setSubmitLoading(true);
-		try {
-			const data = await getPaymentInit({
-				order_id: orderId,
-				amount: state.payGroup?.total_amount
-			});
-			dispatch({
-				type: "setPayGroup",
-				payload: {
-					order_id: orderId,
-					total_amount: data.amount,
-					payment_group_id: data.payment_group_id,
-					payment_priority: data.payment_priority
-				}
-			});
-			paymentLogger.addLog({
-				key: "创建交易组成功",
-				value: ""
-			});
-			return {
-				...state.payGroup,
-				order_id: orderId,
-				total_amount: data.amount,
-				payment_group_id: data.payment_group_id,
-				payment_priority: data.payment_priority
-			};
-		} catch (err) {
-			paymentLogger.addLog({
-				key: "创建交易组错误",
-				value: {
-					title: `订单${orderId} 创建交易组失败: ${err?.message || "未知错误"}`,
-					data: { order: orderId }
-				}
-			});
-			paymentLogger.sendLogs("创建交易组失败", err);
-			setSubmitLoading(false);
-			payCallback({
-				key: "fail",
-				data: {
-					err,
-					orderId,
-					fn: "paymentInit"
-				}
-			});
-		}
-	};
-	/**
-	* @title: 除去钱包后的待支付金额
-	* @description:
-	* @param {*} useMemo
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-15 13:47
-	*/
-	const waitAmount = useMemo(() => {
-		return state.payGroup?.wait_amount || 0;
-	}, [state.payGroup?.wait_amount]);
-	/**
-	* @title: 是否仅钱包支付
-	* @description:
-	* @param {*} useMemo
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-15 13:46
-	*/
-	const isWalletPassPay = useMemo(() => {
-		const isWalletPass = state.payGroup?.walletPass?.cards?.length;
-		return waitAmount <= 0 && isWalletPass;
-	}, [state.payGroup, waitAmount]);
-	/**
-	* @title: 是否禁止提交
-	* @description:
-	* @param {*} useMemo
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-15 13:40
-	*/
-	const isDisabled = useMemo(() => {
-		if (waitAmount > 0) return !state.payGroup?.otherPayment?.service;
-		else return !isWalletPassPay;
-	}, [
-		state.payGroup,
-		waitAmount,
-		isWalletPassPay
-	]);
-	/**
-	* @title: 获取是否提示无痕模式
-	* @description: walletPass和三方支付的组合支付在无痕模式浏览器需要给出提示
-	* @return: *
-	* @Author: shengjie.zuo
-	* @Date: 2024-08-30 10:23:48
-	*/
-	const getIsShowDetectIncognitoConfirm = async (payGroup) => {
-		const { isPrivate } = await detectIncognito();
-		return (payGroup?.wait_amount || 0) > 0 && getIsWalletPassAndTripartitePayment(payGroup) && isPrivate;
-	};
-	/**
-	* @title: 提交
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-15 13:25
-	*/
-	const onSubmit = async (newOrderId) => {
-		paymentLogger.addLog({
-			key: "开始提交支付",
-			value: `订单${newOrderId || state.payGroup?.order_id} 开始提交, 待支付: ${state.payGroup?.wait_amount}, 总金额: ${state.payGroup?.total_amount}`
-		});
-		let newPayGroup = state.payGroup;
-		try {
-			if (await getIsShowDetectIncognitoConfirm(newPayGroup)) {
-				paymentLogger.addLog({
-					key: "无痕模式检测",
-					value: ""
-				});
-				setShowDetectIncognitoConfirm(true);
-				return;
-			}
-			if (!state.payGroup?.payment_group_id) {
-				paymentLogger.addLog({
-					key: "需要创建交易组",
-					value: ""
-				});
-				newPayGroup = await paymentInit(newOrderId);
-			}
-			paymentLogger.addLog({
-				key: "调用支付方法",
-				value: `订单${newPayGroup?.order_id} 交易组${newPayGroup?.payment_group_id} 使用${state.payGroup?.otherPayment?.service}支付`
-			});
-			handlePaymentByType(void 0, newPayGroup);
-			paymentLogger.addLog({
-				key: "支付提交调用成功",
-				value: ""
-			});
-		} catch (err) {
-			console.log("err", err);
-			paymentLogger.addLog({
-				key: "提交支付错误",
-				value: {
-					title: `订单${newOrderId || state.payGroup?.order_id} 提交失败: ${err?.message || "未知错误"}`,
-					data: { newPayGroup }
-				}
-			});
-			paymentLogger.sendLogs("提交支付失败", err);
-		}
-	};
-	/**
-	* @title: 支付方式改变时
-	* @description:
-	* @param {any} payload
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-15 13:51
-	*/
-	const paymentTypeChange = (payload) => {
-		dispatch({
-			type: "setPayGroup",
-			payload: { otherPayment: payload }
-		});
-	};
-	const okText = useMemo(() => {
-		let current = state.payGroup?.otherPayment;
-		if (state.payGroup?.wait_amount == 0) return locales.getText("tocPay.text.submit");
-		if (current?.surcharge) return /* @__PURE__ */ React.createElement("span", { className: "" }, locales.getText("tocPay.text.pay"), " ", /* @__PURE__ */ React.createElement(PisellText.Amount, { value: state.payGroup?.wait_amount || 0 }), " +", locales.getText("tocPay.text.surcharge"));
-		else return /* @__PURE__ */ React.createElement("span", { className: "" }, locales.getText("tocPay.text.pay"), " ", /* @__PURE__ */ React.createElement(PisellText.Amount, { value: state.payGroup?.wait_amount || 0 }));
-	}, [state.payGroup]);
-	/**
-	* @title: 支付结果回调
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-09 14:25
-	*/
-	const payCallback = async (res) => {
-		const orderId = res?.data?.order_id || state.payGroup?.order_id;
-		if (res.key === "success") {
-			paymentLogger.addLog({
-				key: "支付最终成功",
-				value: `订单${orderId} 支付成功`
-			});
-			paymentLogger.sendLogs("支付成功");
-		} else if (res.key === "fail") {
-			paymentLogger.addLog({
-				key: "支付最终失败",
-				value: {
-					title: `订单${orderId} 支付失败`,
-					data: res?.data
-				}
-			});
-			paymentLogger.sendLogs("支付失败", res?.data?.err);
-		} else if (res.key === "cancel") {
-			paymentLogger.addLog({
-				key: "支付被取消",
-				value: `订单${orderId} 支付被取消`
-			});
-			setOpen(false);
-		}
-		props.callback?.(res);
-	};
-	/**
-	* @title: 取消支付
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-08 16:34
-	*/
-	const onCancel = () => {
-		paymentLogger.addLog({
-			key: "用户主动取消支付",
-			value: `订单${state.payGroup?.order_id} 用户取消支付`
-		});
-		removePayGroupFromStorage(state.payGroup?.order_id);
-		setShowInformation(false);
-		setOpen(false);
-		payCallback({
-			key: "cancel",
-			data: { order_id: state.payGroup?.order_id }
-		});
-	};
-	useUpdateEffect(() => {
-		paymentListRef.current?.calculateSurcharge(state.payGroup?.wait_amount || 0);
-	}, [state.payGroup?.wait_amount]);
-	useImperativeHandle(ref, () => {
-		return {
-			init,
-			payCallback,
-			onSubmit
-		};
-	});
-	/**
-	* @title: 自定义渲染支付列表的标题
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 10:49
-	*/
-	const renderPaymentListTitle = () => {
-		if (waitAmount == 0) return /* @__PURE__ */ React.createElement("div", { className: "custom-payment-list-title" }, /* @__PURE__ */ React.createElement("div", { className: "" }, locales.getText("tocPay.text.clickSubmitToComplete")), /* @__PURE__ */ React.createElement("div", { className: "custom-payment-list-title-desc" }, locales.getText("tocPay.text.noExtraPayNeeded")));
-		if (state.payGroup?.total_amount !== waitAmount) return /* @__PURE__ */ React.createElement("div", { className: "custom-payment-list-title" }, locales.getText("tocPay.text.continuePayment"), " ", /* @__PURE__ */ React.createElement(PisellText.Amount, {
-			className: "custom-payment-list-title-price",
-			value: state.payGroup?.wait_amount || 0
-		}));
-		return locales.getText("tocPay.text.paymentMethod");
-	};
-	/**
-	* @title: 钱包变化
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 10:50
-	*/
-	const onWalletPassChange = useMemoizedFn((walletPass) => {
-		const _waitAmount = new Decimal$1(String(state.payGroup?.total_amount || 0)).minus(new Decimal$1(String(walletPass.amount || 0))).toNumber();
-		dispatch({
-			type: "setPayGroup",
-			payload: {
-				walletPass: {
-					...state.payGroup?.walletPass,
-					...walletPass
-				},
-				wait_amount: _waitAmount
-			}
-		});
-	});
-	return /* @__PURE__ */ React.createElement(PisellContainer, {
-		renderType,
-		props: {
-			forceRender: true,
-			title: /* @__PURE__ */ React.createElement("div", null, locales.getText("tocPay.text.checkout")),
-			open,
-			cancelVisible: false,
-			okText,
-			bodyStyle: { padding: 24 },
-			onCancel: () => {
-				setShowInformation(true);
-			},
-			okButtonProps: {
-				disabled: isDisabled,
-				loading: submitLoading,
-				className: "toc-pay-submit-btn"
-			},
-			onOk: () => {
-				onSubmit();
-			}
-		}
-	}, /* @__PURE__ */ React.createElement(PisellModal.Information, {
-		open: showInformation,
-		title: locales.getText("tocPay.text.prompt"),
-		describe: locales.getText("tocPay.text.confirmLeave"),
-		okText: locales.getText("tocPay.text.continuePay"),
-		cancelText: locales.getText("tocPay.text.leave"),
-		closable: true,
-		cancelButtonProps: { onClick: () => {
-			onCancel();
-		} },
-		maskClosable: false,
-		onCancel: () => {
-			setShowInformation(false);
-		},
-		onOk: () => {
-			setShowInformation(false);
-		}
-	}), /* @__PURE__ */ React.createElement(PisellModal.Information, {
-		open: showDetectIncognitoConfirm,
-		describe: locales.getText("tocPay.text.detectIncognitoConfirm"),
-		okText: locales.getText("tocPay.text.copyLink"),
-		closable: true,
-		maskClosable: false,
-		onCancel: () => {
-			setShowDetectIncognitoConfirm(false);
-		},
-		onOk: async () => {
-			await copyToClipboard(window.location.href);
-			PisellToast({ content: locales.getText("tocPay.text.copySuccess") });
-		}
-	}), /* @__PURE__ */ React.createElement(PisellLoading, {
-		loading,
-		mask: true
-	}, state.order?.countdown && /* @__PURE__ */ React.createElement(PayCountdown_default, { time: state.order?.countdown }), /* @__PURE__ */ React.createElement(PayAmount_default, { amount: state.payGroup?.total_amount || 0 }), state.payGroup?.walletPass && /* @__PURE__ */ React.createElement(WalletPassBlock_default, {
-		customer_id,
-		payGroup: state.payGroup,
-		onWalletPassChange,
-		ref: walletPassBlockRef,
-		walletSetting: state.walletSetting
-	}), /* @__PURE__ */ React.createElement(PaymentList_default, {
-		ref: paymentListRef,
-		handlePayment: (detail) => {
-			handlePaymentByType(detail?.service);
-		},
-		paymentTypeChange,
-		hide: state.payGroup?.wait_amount == 0,
-		renderTitle: renderPaymentListTitle
-	})), /* @__PURE__ */ React.createElement(PaymentMethods_default, {
-		ref: paymentMethodsRef,
-		payCallback
-	}));
-};
-var toC_default = Provider(forwardRef(ToCPay));
-
-//#endregion
-export { toC_default as default };

package/dist/es/components/pay/toC/index.less

@@ -1,22 +0,0 @@
-.custom-payment-list-title {
-  .custom-payment-list-title-price {
-    color: var(--theme-color);
-    ;
-  }
-
-
-  .custom-payment-list-title-desc {
-    color: var(--Gray-700, #344054);
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px;
-  }
-}
-
-.toc-pay-submit-btn {
-  color: var(--Base-White, #FFF);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-}

package/dist/es/components/pay/toC/index.md

@@ -1,16 +0,0 @@
-## 客户端支付
-
-使用
-
-```
-const {content,init,submit} = usePayment({
-  onPaymentSuccess: () => {
-    // 支付成功
-  },
-})
-
-
-
-return content
-
-```