@pisell/private-materials 6.6.8 → 6.6.9

package/dist/es/components/pay/toC/PaymentMethods/WalletPass/List/index.js

@@ -0,0 +1,82 @@
+import { getMachineCodeList } from "../serve.js";
+import { formatMachineCodeServer2CardList, getDataByIds } from "../utils.js";
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import { isFunction, locales } from "@pisell/utils";
+import { useMemoizedFn } from "ahooks";
+import { Iconfont, PisellCardList, PisellEmpty, PisellLoading } from "@pisell/materials";
+import "./index.less";
+
+//#region src/components/pay/toC/PaymentMethods/WalletPass/List/index.tsx
+const WalletPassList = forwardRef((props, ref) => {
+	const { title, onChange, data: propsData, value, walletSetting, onLoadingChange, loading: propsLoading, onChangeDebounce } = props;
+	const [data, setData] = useState(propsData || []);
+	const [loading, setLoading] = useState(false);
+	useEffect(() => {
+		if (propsData) setData(propsData);
+	}, [propsData]);
+	useEffect(() => {
+		setLoading(!!propsLoading);
+	}, [propsLoading]);
+	const getList = async (params, formatList) => {
+		setLoading(true);
+		try {
+			let list = await getMachineCodeList(params) || [];
+			if (isFunction(formatList)) list = formatList(list);
+			setData(formatMachineCodeServer2CardList(list, value));
+		} catch (err) {
+			console.error(err);
+		}
+		setLoading(false);
+	};
+	const init = (params, formatList) => {
+		getList(params, formatList);
+	};
+	useImperativeHandle(ref, () => ({ init }));
+	useEffect(() => {
+		onLoadingChange?.(loading);
+	}, [loading]);
+	/**
+	* 拆分出可用的和不可用的列表
+	*/
+	const { availableList, disabledList } = useMemo(() => {
+		const _disabledList = [];
+		const _availableList = [];
+		data.forEach((item) => {
+			if (item.disabled) _disabledList.push(item);
+			else _availableList.push(item);
+		});
+		return {
+			disabledList: _disabledList,
+			availableList: _availableList
+		};
+	}, [data]);
+	const handleChange = useMemoizedFn((val) => {
+		onChange?.(val, getDataByIds(data, val));
+	});
+	const empty = useMemo(() => {
+		return /* @__PURE__ */ React.createElement(PisellEmpty, {
+			icon: /* @__PURE__ */ React.createElement(Iconfont, {
+				type: "pisell2-a-wallet-021",
+				style: { color: "#667085" }
+			}),
+			description: locales.getText("tocPay.text.walletPassEmpty")(walletSetting?.name)
+		});
+	}, []);
+	return /* @__PURE__ */ React.createElement(PisellLoading, { loading }, /* @__PURE__ */ React.createElement("div", { className: "pisell-walletPass-list-wrap" }, title && /* @__PURE__ */ React.createElement("div", { className: "pisell-walletPass-list-title" }, title), /* @__PURE__ */ React.createElement(PisellCardList, {
+		data: availableList,
+		hasMore: false,
+		value,
+		onChange: handleChange,
+		showEmpty: data.length === 0,
+		empty,
+		onChangeDebounce
+	}), !!disabledList.length && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "pisell-walletPass-list-disabled" }, locales.getText("tocPay.text.walletPassDisabled")), /* @__PURE__ */ React.createElement(PisellCardList, {
+		mode: void 0,
+		data: disabledList,
+		hasMore: false
+	}))));
+});
+var List_default = memo(WalletPassList);
+
+//#endregion
+export { List_default as default };

package/dist/es/components/pay/toC/PaymentMethods/WalletPass/List/index.less

@@ -0,0 +1,20 @@
+.pisell-walletPass-list-wrap {
+  margin-top: 20px;
+  min-height: 230px;
+  .pisell-walletPass-list-title {
+    color: var(--Gray-900, #101828);
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px; /* 155.556% */
+    margin-bottom: 10px;
+  }
+  .pisell-walletPass-list-disabled {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px; /* 142.857% */
+    margin: 10px 0;
+  }
+}

package/dist/es/components/pay/toC/PaymentMethods/WalletPass/MultiModeSearch/index.js

@@ -0,0 +1,24 @@
+import React, { memo } from "react";
+import { locales } from "@pisell/utils";
+import { PisellInformationEntry } from "@pisell/materials";
+
+//#region src/components/pay/toC/PaymentMethods/WalletPass/MultiModeSearch/index.tsx
+const MultiModeSearch = (props) => {
+	const { onChange } = props;
+	return /* @__PURE__ */ React.createElement(PisellInformationEntry, {
+		title: locales.getText("tocPay.text.walletPassCodesTitle"),
+		entryModes: [{
+			type: "scanCode",
+			name: locales.getText("tocPay.text.scanBarQrCode")
+		}, {
+			type: "input",
+			name: locales.getText("tocPay.text.enterCodes")
+		}],
+		searchDescribe: locales.getText("tocPay.text.searchDescribe"),
+		onChange
+	});
+};
+var MultiModeSearch_default = memo(MultiModeSearch);
+
+//#endregion
+export { MultiModeSearch_default as default };

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

@@ -0,0 +1,284 @@
+import useEngineContext_default from "../../../../../hooks/useEngineContext.js";
+import pinVerifyModal_default from "../../../../pinVerifyModal/index.js";
+import MultiModeSearch_default from "./MultiModeSearch/index.js";
+import { searchMachineCodeList, searchWalletCode } from "./serve.js";
+import { calcWalletPassListAmount, formatWalletPassList2PreparePayments } from "../../utils.js";
+import { formatMachineCodeServer2CardList, getIsWalletCode } from "./utils.js";
+import List_default from "./List/index.js";
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { locales, uniqueByKey } from "@pisell/utils";
+import { useMemoizedFn } from "ahooks";
+import { PisellModal, PisellText, PisellToast } from "@pisell/materials";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import "./index.less";
+
+//#region src/components/pay/toC/PaymentMethods/WalletPass/index.tsx
+const { Amount } = PisellText;
+const WalletPass = forwardRef((props, ref) => {
+	const { onWalletPassChange, walletPass, walletSetting } = props;
+	const isWalletCode = useEngineContext_default()?.appHelper?.utils?.businessUtils?.getAppByModal?.("wallet");
+	/** 当前 walletPass信息 弹窗操作时都在内部进行，点击 redeem时同步到外层 */
+	const [currentWalletPass, setCurrentWalletPass] = useState(walletPass);
+	const [loading, setLoading] = useState(false);
+	const [open, setOpen] = useState(false);
+	/** 搜索 modal */
+	const [searchOpen, setSearchOpen] = useState(false);
+	/** 搜索后添加的walletPass */
+	const [addList, setAddList] = useState([]);
+	/** 当前order信息 */
+	const [order, setOrder] = useState(null);
+	/** 当前搜索modal内list数据 */
+	const [searchData, setSearchData] = useState([]);
+	/** 当前搜索modal内选中数据 */
+	const [searchSelectData, setSearchSelectData] = useState({
+		ids: [],
+		details: []
+	});
+	/** 是否默认选中 搜索时默认选中 列表select变更更新列表时不默认选中 */
+	const isAutoSelect = useRef(false);
+	const listRef = useRef(null);
+	/** 当前搜索框搜索值 */
+	const searchValRef = useRef(null);
+	const pinVerifyModalRef = useRef(null);
+	const { cards: walletPassSelectCards, amount } = currentWalletPass || {};
+	/**
+	* currentCustomerWalletPass 当前用户walletPass
+	* otherCustomerWalletPass 手动搜索添加的walletPass
+	*/
+	const [currentCustomerWalletPass, otherCustomerWalletPass] = useMemo(() => {
+		const current = [];
+		const other = [];
+		(walletPassSelectCards || []).forEach((item) => {
+			if (item.customer_id === order?.customer_id) current.push(item);
+			else other.push(item);
+		});
+		return [current, other];
+	}, [walletPassSelectCards, order?.customer_id]);
+	const prepare_payments = useMemo(() => {
+		return formatWalletPassList2PreparePayments(uniqueByKey((walletPassSelectCards || []).concat(searchSelectData.details), "id"));
+	}, [walletPassSelectCards, searchSelectData]);
+	const selectValue = useMemo(() => {
+		return walletPassSelectCards?.map((item) => item.id) || [];
+	}, [walletPassSelectCards]);
+	const otherCustomerWalletPassList = useMemo(() => {
+		return formatMachineCodeServer2CardList(addList, selectValue);
+	}, [addList, selectValue]);
+	const other_exact_codes = useMemo(() => {
+		const codes = [];
+		addList.forEach((item) => {
+			if (!selectValue.includes(item.id)) codes.push(item.code);
+		});
+		return codes;
+	}, [addList, selectValue]);
+	const refreshList = useMemoizedFn(() => {
+		if (order?.order_id && order?.customer_id) listRef.current?.init({
+			order_id: order.order_id,
+			available: 2,
+			prepare_payments,
+			filter_prepare_wallet_pass: 1,
+			sale_channel: order._order?.sale_channel || "online-store",
+			other_exact_codes
+		}, (val) => {
+			const idMap = val.reduce((pre, cur) => {
+				return {
+					...pre,
+					[cur.id]: cur
+				};
+			}, {});
+			setAddList((prevState) => {
+				return prevState.map((item) => {
+					if (idMap[item.id]) return idMap[item.id];
+					return item;
+				});
+			});
+			return [...currentCustomerWalletPass || [], ...val].filter((item) => !order?.customer_id || item.customer_id === order?.customer_id);
+		});
+	});
+	/**
+	*  搜索结果list弹窗列表选中发生变更时 重新获取接口
+	*/
+	useEffect(() => {
+		if (order?.order_id && searchValRef.current) searchList(searchValRef.current, true);
+	}, [order?.order_id, searchSelectData]);
+	const init = async (res) => {
+		if (!res) return;
+		setOrder(res);
+		setOpen(true);
+		setCurrentWalletPass(walletPass);
+		setTimeout(() => {
+			refreshList();
+		});
+	};
+	/**
+	* 获取搜索弹窗list数据
+	* @param val
+	*/
+	const searchList = async ({ code, customer_pin_key }, isSelectChange) => {
+		if (!order?.order_id) return;
+		setLoading(true);
+		try {
+			const result = await searchMachineCodeList({
+				order_id: order.order_id,
+				code,
+				prepare_payments,
+				sale_channel: order._order?.sale_channel || "online-store",
+				customer_pin_key
+			});
+			if (!result) {
+				if (!isSelectChange) PisellToast({ content: locales.getText("tocPay.text.walletSearchEmpty") });
+				return;
+			}
+			if (isSelectChange && !searchValRef.current) return;
+			setSearchData(formatMachineCodeServer2CardList([...searchSelectData.details, ...result], searchSelectData.ids));
+			if (result.length) {
+				if (result.length === 1 && result[0].unified_available_status && isAutoSelect.current) setSearchSelectData({
+					ids: [result[0].id],
+					details: result
+				});
+				setSearchOpen(true);
+				searchValRef.current = {
+					code,
+					customer_pin_key
+				};
+			}
+		} finally {
+			setLoading(false);
+		}
+	};
+	const searchWalletCodeFn = async (val) => {
+		setLoading(true);
+		try {
+			const result = await searchWalletCode({
+				code: val,
+				with_customer: 1
+			});
+			console.log(result, "result");
+			if (!result) {
+				searchList({ code: val });
+				return;
+			}
+			pinVerifyModalRef.current?.open({
+				wallet_code: result.code,
+				wallet_detail_id: result.id,
+				failed_count: result.failed_count,
+				check_max_count: result.check_max_count,
+				customer: result.customer
+			});
+		} finally {
+			setLoading(false);
+		}
+	};
+	const handleSearch = useMemoizedFn((val) => {
+		if (!val || searchOpen) return;
+		isAutoSelect.current = true;
+		if (getIsWalletCode(val) && isWalletCode) searchWalletCodeFn(val);
+		else searchList({ code: val });
+	});
+	useImperativeHandle(ref, () => ({ init }));
+	const handleSearchModalClose = () => {
+		setSearchOpen(false);
+		searchValRef.current = null;
+		setSearchSelectData({
+			ids: [],
+			details: []
+		});
+	};
+	const handleSelectOk = () => {
+		changeWalletPass(uniqueByKey([...walletPassSelectCards || [], ...searchSelectData.details], "id"));
+		setAddList((prevState) => {
+			return uniqueByKey([...prevState, ...searchSelectData.details], "id").filter((item) => !order?.customer_id || item.customer_id !== order?.customer_id);
+		});
+		handleSearchModalClose();
+	};
+	const handleAddChange = useMemoizedFn((val, details) => {
+		isAutoSelect.current = false;
+		setSearchSelectData({
+			ids: val,
+			details: details.map((item) => item.originData)
+		});
+	});
+	const changeWalletPass = (cards) => {
+		setCurrentWalletPass?.({
+			cards,
+			amount: calcWalletPassListAmount(cards)
+		});
+		setTimeout(() => {
+			refreshList();
+		});
+	};
+	const handleSelectChange = (val, details, type) => {
+		let cards = details.map((item) => item.originData);
+		if (type === "other") cards = currentCustomerWalletPass.concat(cards);
+		else if (type === "current") cards = otherCustomerWalletPass.concat(cards);
+		changeWalletPass(cards);
+	};
+	const handleRedeem = () => {
+		onWalletPassChange?.(currentWalletPass);
+		setOpen(false);
+	};
+	const handleWalletClose = () => {
+		setOpen(false);
+		setCurrentWalletPass(walletPass);
+	};
+	const handleOtherChange = useMemoizedFn((val, valDetail) => {
+		handleSelectChange(val, valDetail, "other");
+	});
+	const handleCurrentChange = useMemoizedFn((val, valDetail) => {
+		handleSelectChange(val, valDetail, "current");
+	});
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PisellModal, {
+		title: /* @__PURE__ */ React.createElement("div", null, walletSetting.name),
+		open,
+		onCancel: () => handleWalletClose(),
+		cancelVisible: false,
+		destroyOnClose: true,
+		okText: /* @__PURE__ */ React.createElement("div", null, locales.getText("tocPay.text.redeem"), " ", /* @__PURE__ */ React.createElement(Amount, { value: amount })),
+		onOk: handleRedeem
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: "",
+		style: { marginTop: 24 }
+	}, /* @__PURE__ */ React.createElement(MultiModeSearch_default, { onChange: handleSearch }), /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-modal-multi-selection-available" }, /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-modal-multi-selection-available-title" }, /* @__PURE__ */ React.createElement(InfoCircleOutlined, { className: "wallet-pass-modal-multi-selection-available-title-icon" }), locales.getText("tocPay.text.multipleSelectionAvailable")), /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-modal-multi-selection-available-desc" }, locales.getText("tocPay.text.youCanSelectMultipleWalletPassesToCombineForPayment")(walletSetting.name))), otherCustomerWalletPassList.length > 0 && /* @__PURE__ */ React.createElement(List_default, {
+		walletSetting,
+		data: otherCustomerWalletPassList,
+		title: locales.getText("tocPay.text.couponCodesAdded"),
+		onChange: handleOtherChange,
+		value: selectValue,
+		loading,
+		onChangeDebounce: true
+	}), /* @__PURE__ */ React.createElement(List_default, {
+		walletSetting,
+		title: walletSetting.name,
+		onChange: handleCurrentChange,
+		ref: listRef,
+		value: selectValue,
+		onLoadingChange: setLoading
+	}))), /* @__PURE__ */ React.createElement(PisellModal, {
+		title: /* @__PURE__ */ React.createElement("div", null, locales.getText("tocPay.text.searchResult")),
+		mobileModalHeight: "90%",
+		destroyOnClose: true,
+		open: searchOpen,
+		onCancel: () => handleSearchModalClose(),
+		cancelVisible: false,
+		okText: locales.getText("tocPay.text.select"),
+		onOk: handleSelectOk,
+		okButtonProps: { disabled: searchSelectData.ids?.length === 0 }
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: "",
+		style: { marginTop: 24 }
+	}, /* @__PURE__ */ React.createElement(List_default, {
+		walletSetting,
+		data: searchData,
+		value: searchSelectData.ids,
+		onChange: handleAddChange,
+		loading
+	}))), /* @__PURE__ */ React.createElement(pinVerifyModal_default, {
+		ref: pinVerifyModalRef,
+		onSuccess: (params) => {
+			searchList({ customer_pin_key: params?.customer_pin_key });
+		}
+	}));
+});
+var WalletPass_default = memo(WalletPass);
+
+//#endregion
+export { WalletPass_default as default };

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

@@ -0,0 +1,30 @@
+.wallet-pass-modal-multi-selection-available {
+  border-radius: 10px;
+  background: #edf4ff;
+  display: flex;
+  padding: 12px 20px;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: 20px;
+  .wallet-pass-modal-multi-selection-available-title {
+    color: var(--Color, #40484f);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 22px; /* 183.333% */
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+
+    .wallet-pass-modal-multi-selection-available-title-icon {
+        color: #1E1E1E;
+        margin-right: 8px;
+        font-size: 16px;
+    }
+  }
+  .wallet-pass-modal-multi-selection-available-desc {
+    color: var(--Color, #40484f);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px; /* 133.333% */
+  }
+}

package/dist/es/components/pay/toC/PaymentMethods/WalletPass/serve.js

@@ -0,0 +1,35 @@
+import { request } from "../../../../../utils/index.js";
+
+//#region src/components/pay/toC/PaymentMethods/WalletPass/serve.ts
+/**
+* 查询支付识别码列表
+*/
+const getMachineCodeList = async (params) => {
+	const { data } = await request.getRequest().post(`/h5/machinecode/order/deduction`, params);
+	return data;
+};
+/**
+* 搜索支付识别码
+*/
+const searchMachineCodeList = async (params) => {
+	const { data } = await request.getRequest().post(`/h5/machinecode/order/deduction/search`, params);
+	return data;
+};
+/**
+* walletpass支付
+*/
+const walletPassPay = async (params) => {
+	const { order_id, ...others } = params;
+	const { data } = await request.getRequest().post(`/h5/pay/order/wallet-pass-pay/${order_id}`, others);
+	return data;
+};
+/**
+* 搜索wallet code
+*/
+const searchWalletCode = async (params) => {
+	const { data } = await request.getRequest().post(`/h5/wallet/detail/search`, params);
+	return data;
+};
+
+//#endregion
+export { getMachineCodeList, searchMachineCodeList, searchWalletCode, walletPassPay };

package/dist/es/components/pay/toC/PaymentMethods/WalletPass/utils.js

@@ -0,0 +1,46 @@
+import { getAvailableMaxAmount } from "../../utils.js";
+import { formatDate, locales } from "@pisell/utils";
+import { globalConfig } from "@pisell/materials";
+
+//#region src/components/pay/toC/PaymentMethods/WalletPass/utils.ts
+const voucherTime = (data) => {
+	const config = globalConfig.getConfig();
+	if (data?.expire_date) return formatDate(data?.expire_date, config?.locale === "en" ? "DD/MM/YYYY" : "YYYY-MM-DD");
+	return locales.getText("tocPay.text.walletPassPermanent");
+};
+const formatMachineCodeServer2CardList = (data, selectId = []) => {
+	return (data || []).map((item) => {
+		return {
+			id: item.id,
+			name: item.product_name,
+			storeName: item.shop?.name,
+			balance: item.balance_par_value,
+			redeem: getAvailableMaxAmount(item),
+			showRedeem: selectId.includes(item.id),
+			showBalanceSymbol: item.tag !== "point_card",
+			showDetail: false,
+			showQrCode: false,
+			code: item.code,
+			disabled: !item.unified_available_status,
+			disabledReason: item.unified_messages?.title,
+			cover: item.product?.cover,
+			qrCode: item.code,
+			validDate: voucherTime(item),
+			originData: item
+		};
+	});
+};
+const getDataByIds = (arr, ids) => {
+	return arr.filter((item) => ids.includes(item.id));
+};
+/**
+* 判断是否是wallet code
+* @param val 
+* @returns 
+*/
+const getIsWalletCode = (val) => {
+	return val.startsWith("WL");
+};
+
+//#endregion
+export { formatMachineCodeServer2CardList, getDataByIds, getIsWalletCode };

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

@@ -0,0 +1,61 @@
+import usePrefix from "../../../../../../hooks/usePrefix.js";
+import { getPaymentResult } from "../../../serve.js";
+import React from "react";
+import { locales } from "@pisell/utils";
+import { useMemoizedFn } from "ahooks";
+import { Button, PisellToast } from "@pisell/materials";
+import "./index.less";
+
+//#region src/components/pay/toC/PaymentMethods/components/PaymentReturnContent/index.tsx
+/**
+* 支付返回后展示的内容组件
+* 当用户从外部支付页面返回时展示此组件
+*/
+const PaymentReturnContent = ({ orderId, unique_payment_number, state, handleReturn, pay_number }) => {
+	const prefix = usePrefix();
+	const getPaymentIsPaid = useMemoizedFn(async () => {
+		if (!unique_payment_number && !pay_number) return true;
+		const { data } = await getPaymentResult({
+			order_id: orderId,
+			pay_number,
+			unique_payment_number: pay_number ? void 0 : unique_payment_number
+		});
+		return data?.payment_status === "paid";
+	});
+	/**
+	* 查看订单
+	* @returns 
+	*/
+	const handleViewOrder = async () => {
+		if (!await getPaymentIsPaid()) {
+			PisellToast({ content: locales.getText("tocPay.text.paymentFailed") });
+			return;
+		}
+		state.payCallback?.({ key: "success" });
+	};
+	/**
+	* 返回并选择其他支付方式
+	* @returns 
+	*/
+	const handleGoBack = async () => {
+		if (!await getPaymentIsPaid()) {
+			handleReturn?.();
+			return;
+		} else state.payCallback?.({ key: "success" });
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: "payment-return-content" }, /* @__PURE__ */ React.createElement("div", { className: "payment-return-content-img" }, /* @__PURE__ */ React.createElement("img", {
+		src: `${prefix}/payment-content.png`,
+		alt: "success"
+	})), /* @__PURE__ */ React.createElement("div", { className: "payment-return-content-buttons" }, /* @__PURE__ */ React.createElement(Button, {
+		block: true,
+		className: "payment-return-content-order-button",
+		onClick: handleViewOrder
+	}, locales.getText("tocPay.text.paymentCompletedAndViewOrder")), /* @__PURE__ */ React.createElement(Button, {
+		block: true,
+		onClick: handleGoBack
+	}, locales.getText("tocPay.text.returnAndSelectOtherPaymentMethod"))));
+};
+var PaymentReturnContent_default = PaymentReturnContent;
+
+//#endregion
+export { PaymentReturnContent_default as default };

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

@@ -0,0 +1,34 @@
+.payment-return-content {
+  padding: 100px 46px 0;
+
+  .payment-return-content-img {
+    width: 100%;
+    margin-bottom: 60px;
+    min-height: 270px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .payment-return-content-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    button {
+      border-radius: 40px;
+      span {
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+    .payment-return-content-order-button {
+      background: #7F56DA;
+      color: var(--Primary-700, #6941C6);
+      border: 1px solid var(--Primary-200, #E9D7FE);
+      background: var(--Primary-50, #F9F5FF);
+    }
+  }
+}
+