@pisell/private-materials 6.6.8 → 6.6.10

package/dist/lib/components/wallet/RechargeableCard/index.js

@@ -0,0 +1,292 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.js');
+const require_useEngineContext = require('../../../hooks/useEngineContext.js');
+const require_locales = require('../locales.js');
+const require_model = require('./model.js');
+const require_serve = require('./serve.js');
+const require_serve$1 = require('../Detail/serve.js');
+const require_DetailContext = require('../DetailContext.js');
+const require_WalletCard = require('../components/WalletCard.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let antd = require("antd");
+let __pisell_utils = require("@pisell/utils");
+let __pisell_materials = require("@pisell/materials");
+require("./index.less");
+
+//#region src/components/wallet/RechargeableCard/index.tsx
+const { Title } = __pisell_materials.Typography;
+const Amount = __pisell_materials.PisellText.Amount;
+/**
+* 充值卡组件
+* 管理充值卡的展示和操作
+*/
+const RechargeableCard = require_model.Provider((props) => {
+	const { globalState, setGlobalState, handleAddWalletCard } = props;
+	const recordViewRef = (0, react.useRef)(null);
+	const { openDetail, renderDetail, closeDetail } = require_DetailContext.useDetail();
+	const { currentId = "", currentDetail = {}, gift_card = [], rechargeModalOpen = false } = globalState;
+	const { state, dispatch } = (0, react.useContext)(require_model.Context);
+	const utils = require_useEngineContext.default().appHelper.utils || {};
+	const dvaStore = utils?.getStore?.()?.getState();
+	const { action, storage } = utils || {};
+	const platform = (0, react.useMemo)(() => (0, __pisell_utils.isMobile)() ? "h5" : "pc", []);
+	const handleBack = (0, react.useCallback)(() => {
+		if (recordViewRef.current) recordViewRef.current.closeDetailModal();
+		closeDetail();
+		setGlobalState({ setup: "list" });
+	}, [
+		recordViewRef,
+		closeDetail,
+		setGlobalState
+	]);
+	(0, react.useEffect)(() => {
+		__pisell_utils.locales.init(require_locales.default, dvaStore?.core?.translateLocale || "en");
+	}, []);
+	(0, react.useEffect)(() => {
+		document.body.id = "body";
+	}, []);
+	/**
+	* 获取卡片详情
+	*/
+	const getDetail = async () => {
+		try {
+			const data = await require_serve$1.getDetailApi({ id: currentId });
+			const cardList = data.gift_option || [];
+			dispatch({
+				type: "setState",
+				payload: {
+					cardList,
+					productId: data.product_id || "",
+					detailId: data.id || "",
+					...cardList.length > 0 ? { selectedItem: cardList[0] } : {}
+				}
+			});
+		} catch (error) {
+			console.error(__pisell_utils.locales.getText("page.wallet.log.getDetailFailed"), error);
+		}
+	};
+	(0, react.useEffect)(() => {
+		if (currentId && rechargeModalOpen) getDetail();
+	}, [currentId, rechargeModalOpen]);
+	(0, react.useEffect)(() => {
+		if (globalState.setup !== "detail") recordViewRef.current?.closeDetailModal();
+	}, [globalState.setup]);
+	(0, react.useEffect)(() => {
+		if (currentId && gift_card.length > 0) {
+			const card = gift_card.find((item) => item.id === currentId);
+			if (card && (!currentDetail?.id || currentDetail.id !== currentId)) setGlobalState({ currentDetail: card });
+		}
+	}, [
+		currentId,
+		gift_card,
+		currentDetail,
+		setGlobalState
+	]);
+	/**
+	* 计算可用卡片总余额
+	*/
+	(0, react.useEffect)(() => {
+		dispatch({
+			type: "setState",
+			payload: { total: gift_card.filter((item) => item.limit_status === "enable").reduce((sum, item) => sum + Number(item.balance), 0) }
+		});
+	}, [gift_card]);
+	/**
+	* 渲染卡片项
+	*/
+	const renderItem = (0, react.useMemo)(() => {
+		return (item) => {
+			return /* @__PURE__ */ react.default.createElement(require_WalletCard.default, {
+				item,
+				currentId,
+				onClick: () => {
+					setGlobalState({
+						type: "setState",
+						payload: { currentId: item.id }
+					});
+				}
+			});
+		};
+	}, [currentId, setGlobalState]);
+	/**
+	* 渲染详情
+	*/
+	const detail = () => {
+		if (!currentDetail?.id) return null;
+		return renderDetail({
+			...currentDetail,
+			buttonGroupList: currentDetail?.machinecode_config?.hide_recharge === 0 ? [[{
+				isMore: false,
+				buttonProps: {
+					children: __pisell_utils.locales.getText("page.wallet.recharge"),
+					type: "primary",
+					size: "large",
+					block: true,
+					onClick: () => {
+						setGlobalState({ rechargeModalOpen: true });
+					}
+				}
+			}]] : [[]],
+			showWalletBar: platform === "h5",
+			onBack: handleBack
+		});
+	};
+	const isEmpty = (0, react.useMemo)(() => {
+		return !gift_card.some((item) => item.limit_status === "enable");
+	}, [gift_card]);
+	/**
+	* 格式化数据为可用和不可用两组
+	*/
+	const formatData = () => {
+		return [{
+			title: __pisell_utils.locales.getText("page.wallet.available"),
+			dataSource: gift_card.filter((item) => item.limit_status === "enable")
+		}, {
+			title: __pisell_utils.locales.getText("page.wallet.unavailable"),
+			dataSource: gift_card.filter((item) => item.limit_status === "disable")
+		}];
+	};
+	const shop = dvaStore.core?.core?.shop || {};
+	/**
+	* 处理充值
+	*/
+	const handleRecharge = async () => {
+		try {
+			const data = await require_serve.goOrder({
+				voucher_id: state.detailId || "",
+				product_id: state.productId || "",
+				product_variant_id: state.selectedItem.variant_id || "",
+				quantity: 1,
+				type: "virtual",
+				platform: "h5",
+				currency_code: {
+					currency_code: shop?.currency_code || "",
+					currency_symbol: shop?.currency_symbol || "",
+					currency_format: shop?.currency_format || ""
+				}
+			});
+			if (data?.order_id) {
+				storage.set("orderId", data.order_id);
+				action && action({
+					type: "pisell1.payment",
+					data,
+					callback: () => {}
+				});
+			}
+		} catch (error) {
+			console.error(__pisell_utils.locales.getText("page.wallet.log.rechargeOrderFailed"), error);
+		}
+	};
+	/**
+	* 关闭充值模态框
+	*/
+	const handleCloseRechargeModal = () => {
+		setGlobalState({ rechargeModalOpen: false });
+		dispatch({
+			type: "setState",
+			payload: { selectedItem: {} }
+		});
+	};
+	/**
+	* 选择充值选项
+	*/
+	const handleSelectRechargeOption = (item) => {
+		if (item.id === state.selectedItem.id) return;
+		dispatch({
+			type: "setState",
+			payload: { selectedItem: item }
+		});
+	};
+	/**
+	* 处理点击卡片行
+	*/
+	const handleRowClick = (currentDetail$1) => {
+		setGlobalState({
+			currentId: currentDetail$1.id || "",
+			currentDetail: currentDetail$1,
+			setup: "detail"
+		});
+		openDetail({
+			...currentDetail$1,
+			buttonGroupList: currentDetail$1?.machinecode_config?.hide_recharge === 0 ? [[{
+				isMore: false,
+				buttonProps: {
+					children: __pisell_utils.locales.getText("page.wallet.recharge"),
+					type: "primary",
+					size: "large",
+					block: true,
+					onClick: () => {
+						setGlobalState({ rechargeModalOpen: true });
+					}
+				}
+			}]] : [[]],
+			showWalletBar: platform === "h5",
+			onBack: handleBack
+		});
+	};
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, platform !== "pc" && /* @__PURE__ */ react.default.createElement("div", { className: "wallet-rechargeableCard-title" }, __pisell_utils.locales.getText("page.wallet.rechargeableCard")), isEmpty ? /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellEmpty, null) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(__pisell_materials.CardMetricItem, {
+		title: __pisell_utils.locales.getText("page.wallet.cardBalance"),
+		style: { marginBottom: 24 },
+		hint: false,
+		tags: false,
+		number: state?.total || 0
+	}), /* @__PURE__ */ react.default.createElement(__pisell_materials.RecordView, {
+		ref: recordViewRef,
+		mobilePadDetailModalDisplay: true,
+		leftSpan: 9,
+		rightSpan: 15,
+		gutter: 20,
+		onRowClick: handleRowClick,
+		modalWrapStyle: {
+			overflowY: "auto",
+			top: 0,
+			height: "100%",
+			zIndex: 998,
+			position: "fixed",
+			left: 0,
+			right: 0
+		},
+		pcDetailModalDisplay: platform === "h5" ? true : false,
+		padDetailModalDisplay: true,
+		isShowClode: false,
+		split: false,
+		children: null,
+		detail: detail(),
+		emptyButtons: [],
+		doubleList: true,
+		doubleListSource: formatData(),
+		dataSource: gift_card,
+		renderItem
+	})), /* @__PURE__ */ react.default.createElement(antd.Drawer, {
+		title: __pisell_utils.locales.getText("page.wallet.rechargeOptions"),
+		open: rechargeModalOpen,
+		zIndex: 999,
+		onClose: handleCloseRechargeModal,
+		width: 375,
+		placement: platform === "pc" ? "right" : "bottom",
+		footer: /* @__PURE__ */ react.default.createElement(antd.Button, {
+			type: "primary",
+			block: true,
+			size: "large",
+			onClick: handleRecharge,
+			disabled: !state.selectedItem.id
+		}, __pisell_utils.locales.getText("page.wallet.recharge"))
+	}, /* @__PURE__ */ react.default.createElement("div", { className: "recharge-options" }, state.cardList.map((item) => /* @__PURE__ */ react.default.createElement("div", {
+		key: item.id,
+		onClick: () => handleSelectRechargeOption(item)
+	}, /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellCard, { className: `pisell-card-item ${item.id === state.selectedItem.id ? "pisell-card-selected" : ""}` }, /* @__PURE__ */ react.default.createElement("div", { className: "card-content" }, /* @__PURE__ */ react.default.createElement("div", { className: "card-content-left" }, /* @__PURE__ */ react.default.createElement("p", { className: "pisell-card-amount-item-name" }, item.name), /* @__PURE__ */ react.default.createElement(Amount, {
+		showCurrencySymbol: true,
+		className: "pisell-card-amount-item-value",
+		useThousandsSeparator: true,
+		value: item.gift_price
+	})), /* @__PURE__ */ react.default.createElement(Amount, {
+		showCurrencySymbol: true,
+		className: "pisell-card-amount-item-value",
+		useThousandsSeparator: true,
+		value: item.price
+	}))))))));
+});
+var RechargeableCard_default = RechargeableCard;
+
+//#endregion
+exports.default = RechargeableCard_default;

package/dist/lib/components/wallet/RechargeableCard/index.less

@@ -0,0 +1,108 @@
+.wallet-rechargeableCard {
+  // 充值选项容器
+  &-options {
+    // 卡片项
+    .pisell-card-item {
+      margin-bottom: 16px;
+      cursor: pointer;
+
+      .card-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .card-content-left {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+
+          .pisell-card-amount-item-name {
+            color: var(--Gray-900, #101828);
+
+            /* Paragraph/Semi Bold */
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 20px;
+            margin-bottom: 8px;
+            margin-top: 0;
+            /* 142.857% */
+          }
+
+          .pisell-card-amount-item-value {
+            overflow: hidden;
+            color: var(--Gray-900, #101828);
+            text-overflow: ellipsis;
+
+            /* Small/Regular */
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 18px;
+            /* 150% */
+            &::before {
+              content: 'Get ';
+            }
+          }
+        }
+
+        .pisell-card-amount-item-value {
+          max-width: 200px;
+          overflow: hidden;
+          color: var(--Gray-900, #101828);
+          text-overflow: ellipsis;
+
+          /* Text md/Semibold */
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: 24px;
+          /* 150% */
+        }
+      }
+    }
+
+    .pisell-card-selected {
+      border: 1px solid var(--theme-color, #7f56d9);
+      background: var(--Primary-50, #f9f5ff);
+    }
+
+    .pisell-card-item:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // 充值卡标题
+  &-title {
+    color: var(--Gray-900, #101828);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 30px;
+    margin-top: 20px;
+    margin-bottom: 24px;
+  }
+
+  // 钱包卡片样式
+  &-card {
+    margin-bottom: 10px;
+  }
+}
+
+// 添加RecordView下卡片列表的底部外边距
+.pisell-lowcode-record-view .pisell-lowcode-record-view-double-list-item {
+  margin-bottom: 24px;
+}
+
+// 充值选项样式
+.recharge-options {
+  .pisell-card-item {
+    margin-bottom: 16px;
+    cursor: pointer;
+  }
+
+  .pisell-card-selected {
+    border: 1px solid var(--theme-color, #7f56d9);
+    background: var(--Primary-50, #f9f5ff);
+  }
+}

package/dist/lib/components/wallet/RechargeableCard/model.js

@@ -0,0 +1,27 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.js');
+let __pisell_utils = require("@pisell/utils");
+
+//#region src/components/wallet/RechargeableCard/model.tsx
+const defaultState = {
+	selectedGiftOptionId: null,
+	cardList: [],
+	selectedItem: {},
+	productId: "",
+	detailId: "",
+	total: 0,
+	rechargeModalOpen: false
+};
+const { Provider, Context } = (0, __pisell_utils.miniRedux)({
+	namespace: "state",
+	state: defaultState,
+	reducers: { setState(state, payload) {
+		return {
+			...state,
+			...payload
+		};
+	} }
+});
+
+//#endregion
+exports.Context = Context;
+exports.Provider = Provider;

package/dist/lib/components/wallet/RechargeableCard/serve.js

@@ -0,0 +1,15 @@
+const require_index = require('../../../utils/index.js');
+
+//#region src/components/wallet/RechargeableCard/serve.ts
+/**
+* 下单接口
+* @param params - 订单参数
+* @returns 订单响应数据
+*/
+const goOrder = async (params) => {
+	const { data } = await require_index.request.getRequest().post(`/h5/order/order`, params);
+	return data;
+};
+
+//#endregion
+exports.goOrder = goOrder;

package/dist/lib/components/wallet/Voucher/index.js

@@ -0,0 +1,95 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.js');
+const require_DetailContext = require('../DetailContext.js');
+const require_WalletCard = require('../components/WalletCard.js');
+const require_model = require('./model.js');
+const require_useWalletCard = require('../hooks/useWalletCard.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __pisell_utils = require("@pisell/utils");
+let __pisell_materials = require("@pisell/materials");
+require("./index.less");
+
+//#region src/components/wallet/Voucher/index.tsx
+const { Title } = __pisell_materials.Typography;
+/**
+* 代金券组件
+* 展示用户的代金券列表和详情
+*/
+const Voucher = require_model.Provider((props) => {
+	const { globalState, setGlobalState } = props;
+	const { product_voucher = [] } = globalState;
+	const recordViewRef = (0, react.useRef)(null);
+	const { openDetail, renderDetail } = require_DetailContext.useDetail();
+	const { platform, isEmpty, state, handleRowClick, renderCardDetail, formatData } = require_useWalletCard.useWalletCard({
+		globalState,
+		setGlobalState,
+		walletContext: (0, react.useContext)(require_model.Context),
+		cardList: product_voucher,
+		cardType: "product_voucher"
+	});
+	(0, react.useEffect)(() => {
+		if (globalState.setup !== "detail" && recordViewRef.current) recordViewRef.current.closeDetailModal();
+	}, [globalState.setup]);
+	const renderItem = (item) => /* @__PURE__ */ react.default.createElement(require_WalletCard.default, {
+		balanceTitle: item.tag === "good_pass" ? __pisell_utils.locales.getText("page.wallet.goodPass") : void 0,
+		item,
+		currentId: globalState.currentId,
+		onClick: () => {
+			setGlobalState({
+				type: "setState",
+				payload: { currentId: item.id }
+			});
+		}
+	});
+	if (isEmpty) return /* @__PURE__ */ react.default.createElement(__pisell_materials.PisellEmpty, null);
+	const handleBack = (0, react.useCallback)(() => {
+		if (recordViewRef.current) recordViewRef.current.closeDetailModal();
+		setGlobalState({ setup: "list" });
+	}, [recordViewRef, setGlobalState]);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, platform !== "pc" && /* @__PURE__ */ react.default.createElement(Title, { className: "wallet-voucher-title" }, __pisell_utils.locales.getText("page.wallet.voucher")), /* @__PURE__ */ react.default.createElement(__pisell_materials.CardMetricItem, {
+		title: __pisell_utils.locales.getText("page.wallet.voucherBalance"),
+		style: { margin: "8px 0 24px" },
+		hint: false,
+		tags: false,
+		number: state.total
+	}), /* @__PURE__ */ react.default.createElement(__pisell_materials.RecordView, {
+		ref: recordViewRef,
+		mobilePadDetailModalDisplay: true,
+		leftSpan: 9,
+		rightSpan: 15,
+		gutter: 20,
+		onRowClick: (currentDetail) => {
+			setGlobalState({
+				currentId: currentDetail.id || "",
+				currentDetail,
+				setup: "detail"
+			});
+			openDetail({
+				...currentDetail,
+				showWalletBar: platform === "h5",
+				onBack: handleBack
+			});
+		},
+		modalWrapStyle: {
+			overflowY: "auto",
+			top: 68,
+			height: "calc(100% - 68px)",
+			zIndex: 998
+		},
+		pcDetailModalDisplay: platform === "h5" ? true : false,
+		padDetailModalDisplay: true,
+		isShowClode: false,
+		split: false,
+		children: null,
+		detail: renderCardDetail(),
+		emptyButtons: [],
+		doubleList: true,
+		doubleListSource: formatData(),
+		dataSource: product_voucher,
+		renderItem
+	}));
+});
+var Voucher_default = Voucher;
+
+//#endregion
+exports.default = Voucher_default;

package/dist/lib/components/wallet/Voucher/index.less

@@ -0,0 +1,9 @@
+.wallet-voucher-title {
+  color: var(--Gray-900, #101828);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 30px;
+  margin-top: 20px;
+  margin-bottom: 24px;
+}

package/dist/lib/components/wallet/Voucher/model.js

@@ -0,0 +1,19 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.js');
+let __pisell_utils = require("@pisell/utils");
+
+//#region src/components/wallet/Voucher/model.tsx
+const defaultState = { total: 0 };
+const { Provider, Context } = (0, __pisell_utils.miniRedux)({
+	namespace: "state",
+	state: defaultState,
+	reducers: { setState(state, payload) {
+		return {
+			...state,
+			...payload
+		};
+	} }
+});
+
+//#endregion
+exports.Context = Context;
+exports.Provider = Provider;

package/dist/lib/components/wallet/components/FooterButtons/index.js

@@ -0,0 +1,52 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let antd = require("antd");
+let __pisell_utils = require("@pisell/utils");
+require("./index.less");
+
+//#region src/components/wallet/components/FooterButtons/index.tsx
+/**
+* 通用底部按钮组件
+* 根据step不同显示不同的按钮组
+*/
+const FooterButtons = ({ step, onAppleWalletClick, onRechargeClick, onAddClick, disabled = false, platform = "h5", isIOS = false, addWalletLoading = false }) => {
+	if (platform === "pc") return null;
+	const renderButtons = () => {
+		switch (step) {
+			case "list": return /* @__PURE__ */ react.default.createElement("div", { className: "wallet-footer-buttons" }, /* @__PURE__ */ react.default.createElement(antd.Button, {
+				type: "primary",
+				onClick: onAddClick,
+				disabled,
+				size: "large",
+				className: "wallet-footer-buttons-item wallet-footer-buttons-item-primary"
+			}, __pisell_utils.locales.getText("page.wallet.button.add")));
+			case "detail":
+				const buttons = [];
+				if (onAppleWalletClick) buttons.push(/* @__PURE__ */ react.default.createElement(antd.Button, {
+					loading: addWalletLoading,
+					key: "apple-wallet",
+					onClick: onAppleWalletClick,
+					disabled,
+					size: "large",
+					className: "wallet-footer-buttons-item wallet-footer-buttons-item-secondary"
+				}, isIOS ? __pisell_utils.locales.getText("page.wallet.button.addToAppleWallet") : __pisell_utils.locales.getText("page.wallet.button.addToGoogleWallet")));
+				if (onRechargeClick) buttons.push(/* @__PURE__ */ react.default.createElement(antd.Button, {
+					key: "recharge",
+					type: "primary",
+					onClick: onRechargeClick,
+					disabled,
+					size: "large",
+					className: "wallet-footer-buttons-item wallet-footer-buttons-item-primary"
+				}, __pisell_utils.locales.getText("page.wallet.button.recharge")));
+				const className = `wallet-footer-buttons wallet-footer-buttons-count-${buttons.length}`;
+				return buttons.length > 0 ? /* @__PURE__ */ react.default.createElement("div", { className }, buttons) : null;
+			default: return null;
+		}
+	};
+	return /* @__PURE__ */ react.default.createElement("div", { className: "wallet-footer" }, renderButtons());
+};
+var FooterButtons_default = FooterButtons;
+
+//#endregion
+exports.default = FooterButtons_default;