@pisell/private-materials 6.6.9 → 6.6.11

package/dist/es/components/appointmentBooking/components/Voucher/index.js

@@ -1,145 +0,0 @@
-import useEngineContext_default from "../../../../hooks/useEngineContext.js";
-import { useAppointmentBooking, useAppointmentBookingAccount, useAppointmentBookingLogin, useShopDiscount } from "../../hooks.js";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Button } from "antd";
-import { locales } from "@pisell/utils";
-import classNames from "classnames";
-import { PisellGoodPassCard, PisellInput, PisellText, PisellToast } from "@pisell/materials";
-import ChevronDown from "@pisell/icon/es/ChevronDown";
-import "../../../booking/components/voucher/index.less";
-import UserCircle from "@pisell/icon/es/UserCircle";
-import "./index.less";
-
-//#region src/components/appointmentBooking/components/Voucher/index.tsx
-const ShopDiscountHooks = {
-	onInited: "shopDiscount:onInited",
-	onDestroy: "shopDiscount:onDestroy",
-	onLoadDiscountList: "shopDiscount:onLoadDiscountList",
-	onCustomerChange: "shopDiscount:onCustomerChange",
-	onDiscountListChange: "shopDiscount:onDiscountListChange",
-	onRulesListChange: "shopDiscount:onRulesListChange",
-	onLoadPrepareCalcResult: "shopDiscount:onLoadPrepareCalcResult"
-};
-const VoucherCard = (props) => {
-	const { products, currentUser } = props;
-	const context = useEngineContext_default();
-	const appointmentBooking = useAppointmentBooking();
-	const shopDiscount = useShopDiscount();
-	const [showDetail, setShowDetail] = useState(false);
-	const { pisellos, action, token, store } = context.appHelper?.utils;
-	const { utils } = context.appHelper || {};
-	const [code, setCode] = useState("");
-	const [discountList, setDisCountList] = useState([]);
-	useRef(products);
-	const { openLoginModal } = useAppointmentBookingLogin();
-	const { accountLists } = useAppointmentBookingAccount();
-	const cart = appointmentBooking?.store?.cart;
-	const isUserLoggedIn = useMemo(() => {
-		return !!utils?.token?.get?.() || false;
-	}, [store]);
-	const availableData = useMemo(() => {
-		return discountList.filter((item) => !!item.isAvailable).map((discount) => {
-			return {
-				...discount,
-				isDisabled: discount.isDisabled || discount.isDisabledForProductUsed,
-				savedAmount: shopDiscount.calcDiscountApplicableProductTotalPrice(discount)
-			};
-		});
-	}, [discountList]);
-	useEffect(() => {
-		if (isUserLoggedIn) pisellos.getModule("shopDiscount").setCustomer(currentUser);
-	}, [currentUser.id, isUserLoggedIn]);
-	useEffect(() => {
-		shopDiscount.setProductList(products);
-	}, [products]);
-	const batchUpdateCart = (productList) => {
-		const items = productList.map((item) => {
-			return {
-				_id: item._id,
-				quantity: item.num,
-				bundle: item._bundleOrigin,
-				options: item._optionsOrigin,
-				product: { ...item._productOrigin },
-				discounts: item._origin?.product?.discount_list || []
-			};
-		});
-		appointmentBooking?.batchUpdateCart?.(items);
-	};
-	const onCartChange = () => {
-		const products$1 = cart?.getItems();
-		batchUpdateCart(shopDiscount.calcDiscount(products$1).productList);
-	};
-	useEffect(() => {
-		setDisCountList(shopDiscount.getDiscountList());
-		pisellos.effects.on(ShopDiscountHooks.onLoadPrepareCalcResult, (result) => {
-			batchUpdateCart(result.productList);
-		});
-		pisellos.effects.on("appointmentBooking_cart:onAddItem", onCartChange);
-		pisellos.effects.on("appointmentBooking_cart:onUpdateQuotationPrice", onCartChange);
-		pisellos.effects.on("appointmentBooking_cart:onUpdateCartItemNums", onCartChange);
-		pisellos.effects.on("appointmentBooking_cart:onRemoveItem", onCartChange);
-		pisellos.effects.on(ShopDiscountHooks.onDiscountListChange, (discount) => {
-			console.log(discount, "discountChange");
-			setDisCountList(discount);
-		});
-	}, []);
-	const onScanCode = async () => {
-		const customerId = currentUser.id;
-		const val = await shopDiscount.scanCode(code, customerId);
-		if (val?.isAvailable) {
-			batchUpdateCart(val.productList);
-			setCode("");
-		} else PisellToast({ content: val.type === "server" ? locales.getText("pisell2.text.goodpass.code-invalid") : locales.getText("pisell2.text.goodpass.code-invalid-cart") });
-	};
-	const renderLoginCard = () => {
-		if (isUserLoggedIn) return null;
-		return /* @__PURE__ */ React.createElement("div", { className: "login-card" }, /* @__PURE__ */ React.createElement(UserCircle, { style: { fontSize: 28 } }), /* @__PURE__ */ React.createElement("div", { className: "text-wrapper" }, /* @__PURE__ */ React.createElement(PisellText, {
-			className: "login-btn",
-			onClick: () => {
-				if (!action) return;
-				openLoginModal({ callback: (status) => {} });
-			}
-		}, locales.getText("pisell2.text.goodpass.login")), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.text.goodpass.login-tip"))));
-	};
-	const mixedSort = (val) => {
-		return [...val].sort((a, b) => {
-			return Number(b?.isSelected) - Number(a?.isSelected);
-		});
-	};
-	const renderVoucherInfo = () => {
-		return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "voucher-title" }, /* @__PURE__ */ React.createElement("span", { className: "voucher-title-left" }, locales.getText("pisell2.text.goodpass")), /* @__PURE__ */ React.createElement("span", {
-			className: "voucher-title-right",
-			onClick: () => {
-				console.log("showDetail: ", showDetail);
-				setShowDetail(!showDetail);
-			}
-		}, locales.getText("pisell2.text.details"), " ", /* @__PURE__ */ React.createElement(ChevronDown, { className: classNames("voucher-right-icon", { show: showDetail }) }))), /* @__PURE__ */ React.createElement("div", { className: classNames("voucher-detail", { show: showDetail }) }, availableData?.length > 0 ? /* @__PURE__ */ React.createElement(PisellGoodPassCard, {
-			style: { width: "100%" },
-			dataSource: availableData,
-			mixedSort,
-			onChange: (val) => {
-				batchUpdateCart(shopDiscount.setDiscountSelected({
-					discountId: val.id,
-					isSelected: val.isSelected
-				}).productList);
-			}
-		}) : null, renderLoginCard(), /* @__PURE__ */ React.createElement("div", { className: "voucher-code-input-wrapper" }, /* @__PURE__ */ React.createElement("div", { className: "voucher-code-input" }, /* @__PURE__ */ React.createElement("div", { style: { whiteSpace: "nowrap" } }, locales.getText("pisell2.text.goodpass.code"), ":"), /* @__PURE__ */ React.createElement(PisellInput, {
-			value: code,
-			allowClear: true,
-			onChange: (e) => {
-				setCode(e.target?.value);
-			},
-			size: "small",
-			placeholder: locales.getText("pisell2.text.goodpass.enter-code")
-		})), /* @__PURE__ */ React.createElement(Button, {
-			size: "small",
-			onClick: onScanCode,
-			disabled: !code
-		}, locales.getText("pisell2.text.apply")))));
-	};
-	return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__appointment-booking-voucher-container" }, renderVoucherInfo());
-};
-var Voucher_default = VoucherCard;
-
-//#endregion
-export { Voucher_default as default };

package/dist/es/components/appointmentBooking/components/Voucher/index.less

@@ -1,116 +0,0 @@
-.pisell-lowcode__appointment-booking-voucher-container {
-  .login-card {
-    border-radius: 8px;
-    border: 1px solid var(--Gray-300, #d0d5dd);
-    background: #fff;
-    display: flex;
-    padding: 12px;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    color: var(--Gray-500, #667085);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    margin-top: 6px;
-
-    .text-wrapper {
-      max-width: 200px;
-    }
-
-    .login-btn {
-      cursor: pointer;
-      color: var(--theme-color, #8157d5);
-    }
-  }
-
-  margin-bottom: 8px;
-  .voucher-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 10px;
-
-    .voucher-title-left {
-      color: var(--base-black, #000);
-      font-size: 18px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 28px;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .voucher-title-right {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-      color: var(--theme-color, #7f56d9);
-      cursor: pointer;
-      font-size: 18px;
-      font-style: normal;
-      font-weight: 500;
-    }
-
-    .voucher-right-icon {
-      font-size: 20px;
-      width: 24px;
-      height: 24px;
-      color: var(--theme-color, #7f56d9);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &.show {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .voucher-detail {
-    width: 100%;
-    transition: 0.2s;
-    max-height: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
-    &.show {
-      max-height: unset;
-    }
-  }
-
-  .voucher-code-input-wrapper {
-    margin-top: 6px;
-    display: flex;
-    width: 100%;
-    height: 42px;
-    padding: 8px;
-    justify-content: space-between;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-    border-radius: 8px;
-    border: 1px solid var(--Gray-300, #d0d5dd);
-    background: #fff;
-  }
-
-  .voucher-code-input {
-    display: flex;
-    align-items: center;
-    > div {
-      color: var(--Gray-500, #667085);
-      text-align: center;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 20px;
-      margin-right: 8px;
-    }
-  }
-
-  input {
-    box-shadow: none !important;
-  }
-}

package/dist/es/components/appointmentBooking/context.js

@@ -1,170 +0,0 @@
-import useEngineContext_default from "../../hooks/useEngineContext.js";
-import { getCartCurrentResourceData } from "./utils.js";
-import { useAppointmentBooking } from "./hooks.js";
-import { TasksManager } from "../../utils/tasks/index.js";
-import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
-
-//#region src/components/appointmentBooking/context.tsx
-const AppointmentBookingContext = createContext(void 0);
-const AppointmentBookingProvider = ({ children }) => {
-	const policyIdsRef = useRef([]);
-	const appointmentBooking = useAppointmentBooking();
-	const [summary, setSummary] = useState({});
-	const [times, setTimes] = useState([]);
-	const [resources, setResources] = useState([]);
-	const [currentStep, setCurrentStep] = useState();
-	const [carts, setCarts] = useState([]);
-	const [resourceOtherParams, setResourceOtherParams] = useState({});
-	const [selectedTime, setSelectedTime] = useState(null);
-	const [isAgreeDepositPolicy, setIsAgreeDepositPolicy] = useState(false);
-	const [currentResource, setCurrentResource] = useState(null);
-	const [loading, setLoading] = useState(false);
-	const [isErrorHolder, setIsErrorHolder] = useState(false);
-	const [tasksManager] = useState(() => new TasksManager());
-	const [policyParams, setPolicyParams] = useState(null);
-	const [currentSelectedResources, setCurrentSelectedResources] = useState();
-	const { appHelper } = useEngineContext_default();
-	const symbolic = appHelper?.utils?.getSymbolic();
-	useEffect(() => {
-		const currentStep$1 = appointmentBooking?.getCurrentStep();
-		setCurrentStep(currentStep$1);
-	}, []);
-	/**
-	* @title: 设置协议数据
-	* @description:
-	* @param {any} ids
-	* @return {*}
-	* @Author: WangHan
-	* @Date: 2025-05-12 21:55
-	*/
-	const setPolicyIds = (ids) => {
-		policyIdsRef.current = ids;
-	};
-	/**
-	* @title: 打开协议
-	* @description:
-	* @param {any} content
-	* @param {any} callback
-	* @return {*}
-	* @Author: WangHan
-	* @Date: 2025-05-12 17:56
-	*/
-	const openPolicy = (content, callback) => {
-		setPolicyParams({
-			open: true,
-			content,
-			callback,
-			_ts: Date.now()
-		});
-	};
-	/**
-	* @title: 关闭协议
-	* @description:
-	* @return {*}
-	* @Author: WangHan
-	* @Date: 2025-05-12 17:57
-	*/
-	const closePolicy = (isCallback) => {
-		setPolicyParams({
-			open: false,
-			content: {},
-			callback: null
-		});
-		if (policyParams?.callback && isCallback) policyParams.callback();
-	};
-	const stepLists = useMemo(() => {
-		return appointmentBooking?.store?.step?.store?.stepList || [];
-	}, [appointmentBooking?.store?.step?.store?.stepList]);
-	/**
-	* @title: 是否是最后一步
-	* @description:
-	* @param {*} useMemo
-	* @return {*}
-	* @Author: WangHan
-	* @Date: 2025-05-10 15:18
-	*/
-	const isLastStep = useMemo(() => {
-		return currentStep?.step?.key === "confirm-information";
-	}, [currentStep?.step?.key, appointmentBooking?.store?.step?.store?.stepList]);
-	const currentStepParams = useMemo(() => {
-		const key = currentStep?.step?.key;
-		return {
-			key,
-			index: stepLists.findIndex((item) => item.key === key),
-			stepLists
-		};
-	}, [currentStep?.step?.key, stepLists]);
-	useEffect(() => {
-		if (currentStepParams?.key?.startsWith("select-resource") || currentStepParams?.key?.startsWith("fill-form")) {
-			if (!carts?.length || !resources?.length) return setCurrentSelectedResources(null);
-			const currentSelectedResources$1 = [];
-			carts.forEach((item) => {
-				if (appointmentBooking.isTargetCartIdNormalProduct(item?._id)) return;
-				currentSelectedResources$1.push({
-					_id: item?._id,
-					currentSelectedResource: getCartCurrentResourceData(item, currentStepParams?.key, resources)
-				});
-			});
-			setCurrentSelectedResources(currentSelectedResources$1);
-			appointmentBooking.setOtherData("current_selected_resources", currentSelectedResources$1);
-		}
-	}, [
-		currentStepParams?.key,
-		carts,
-		resources
-	]);
-	useEffect(() => {
-		setCurrentSelectedResources(appointmentBooking.getOtherData("current_selected_resources") || []);
-	}, []);
-	const value = {
-		appointmentBooking,
-		times,
-		resources,
-		summary,
-		currentStep,
-		carts,
-		setTimes,
-		setResources,
-		setSummary,
-		setCurrentStep,
-		setCarts,
-		appHelper,
-		symbolic,
-		resourceOtherParams,
-		setResourceOtherParams,
-		selectedTime,
-		setSelectedTime,
-		isAgreeDepositPolicy,
-		setIsAgreeDepositPolicy,
-		currentResource,
-		setCurrentResource,
-		loading,
-		setLoading,
-		isErrorHolder,
-		setIsErrorHolder,
-		isLastStep,
-		tasksManager,
-		policyParams,
-		setPolicyParams,
-		policyIdsRef,
-		setPolicyIds,
-		openPolicy,
-		closePolicy,
-		currentStepParams,
-		currentSelectedResources,
-		setCurrentSelectedResources
-	};
-	return /* @__PURE__ */ React.createElement(AppointmentBookingContext.Provider, { value }, children);
-};
-const useAppointmentBookingContext = () => {
-	try {
-		const context = useContext(AppointmentBookingContext);
-		if (context === void 0) throw new Error("useAppointmentBookingContext must be used within a AppointmentBookingProvider");
-		return context;
-	} catch (error) {
-		console.log(error, "useAppointmentBookingContext");
-	}
-};
-
-//#endregion
-export { AppointmentBookingProvider, useAppointmentBookingContext };

package/dist/es/components/appointmentBooking/deposit/components/PolicyModal/index.js

@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Spin } from "antd";
-import { isMobile, locales } from "@pisell/utils";
-import { Button as Button$1, Checkbox as Checkbox$1, PisellEmpty, PisellModal } from "@pisell/materials";
-import "./index.less";
-
-//#region src/components/appointmentBooking/deposit/components/PolicyModal/index.tsx
-const DepositModal = (props) => {
-	const { open, onCancel, item, onChange, onConfirm, isHideCheckout = true, depositProtocolRequest } = props;
-	const [policy, setPolicy] = useState(null);
-	const [loading, setLoading] = useState(false);
-	const [disabled, setDisabled] = useState(false);
-	useEffect(() => {
-		setDisabled(!isHideCheckout);
-	}, [isHideCheckout]);
-	/**
-	* @title: 获取协议内容
-	* @description:
-	* @param {string} id
-	* @return {*}
-	* @Author: WangHan
-	* @Date: 2025-04-24 15:16
-	*/
-	const getPolicy = async (id) => {
-		if (!depositProtocolRequest) {
-			console.error("depositProtocolRequest is not defined");
-			return;
-		}
-		setLoading(true);
-		try {
-			const { data } = await depositProtocolRequest?.(id);
-			setPolicy(data);
-			onChange && onChange(data);
-		} catch (error) {
-			console.log(error);
-			onChange && onChange(error);
-		} finally {
-			setLoading(false);
-		}
-	};
-	useEffect(() => {
-		if (!open || !item?.id) return setPolicy(null);
-		getPolicy(item?.id);
-	}, [open]);
-	return /* @__PURE__ */ React.createElement(PisellModal, {
-		open,
-		platform: isMobile() ? "h5" : "pc",
-		closable: true,
-		bodyStyle: {
-			padding: "24px",
-			minHeight: "300px"
-		},
-		destroyOnClose: true,
-		title: item?.title || policy?.title || "协议",
-		onCancel,
-		mobileModalHeight: "auto",
-		className: "policy-modal-wrap",
-		cancelVisible: false,
-		okText: locales.getText("pisell2.appointment.deposit.close"),
-		footer: [/* @__PURE__ */ React.createElement("div", { className: "policy-modal-footer" }, !isHideCheckout ? /* @__PURE__ */ React.createElement(Checkbox$1, {
-			className: "policy-modal-checkbox",
-			onChange: (e) => setDisabled(!e.target?.checked)
-		}, locales.getText("pisell2.appointment.policy")) : null, /* @__PURE__ */ React.createElement(Button$1, {
-			type: "primary",
-			size: "large",
-			onClick: isHideCheckout ? onCancel : onConfirm,
-			disabled
-		}, locales.getText(isHideCheckout ? "pisell2.appointment.deposit.close" : "pisell2.appointment.policy.confirm")))]
-	}, /* @__PURE__ */ React.createElement(Spin, {
-		style: { minHeight: "200px" },
-		spinning: loading
-	}, policy?.content ? /* @__PURE__ */ React.createElement("div", {
-		className: "policy-content",
-		dangerouslySetInnerHTML: { __html: policy?.content }
-	}) : !loading ? /* @__PURE__ */ React.createElement(PisellEmpty, { description: locales.getText("pisell2.appointment.booking.empty.data") }) : null));
-};
-var PolicyModal_default = DepositModal;
-
-//#endregion
-export { PolicyModal_default as default };

package/dist/es/components/appointmentBooking/deposit/components/PolicyModal/index.less

@@ -1,18 +0,0 @@
-.policy-modal-wrap {
-  .pisell-lowcode-modal-header {
-    border: none;
-  }
-
-  .ant-empty-image {
-    height: auto !important;
-  }
-
-  .policy-modal-footer {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    .policy-modal-checkbox {
-      margin-bottom: 20px;
-    }
-  }
-}

package/dist/es/components/appointmentBooking/deposit/index.d.ts

@@ -1,6 +0,0 @@
-import "./index.less";
-
-//#region src/components/appointmentBooking/deposit/index.d.ts
-declare const Deposit: (props: any) => JSX.Element;
-//#endregion
-export { Deposit };

package/dist/es/components/appointmentBooking/deposit/index.js

@@ -1,65 +0,0 @@
-import useEngineContext_default from "../../../hooks/useEngineContext.js";
-import { getPunctuationMark } from "../utils.js";
-import PolicyModal_default from "./components/PolicyModal/index.js";
-import React, { useCallback, useMemo, useState } from "react";
-import { Checkbox } from "antd";
-import { locales } from "@pisell/utils";
-import { PisellText } from "@pisell/materials";
-import "./index.less";
-
-//#region src/components/appointmentBooking/deposit/index.tsx
-const Deposit = (props) => {
-	const { protocols, total, title, isAgreePolicy = true, isShowTitle = true, onChange, depositProtocolRequest } = props;
-	const context = useEngineContext_default();
-	const [visible, setVisible] = useState(false);
-	const [policyItem, setPolicyItem] = useState();
-	const isEn = useMemo(() => {
-		return (context?.engine?.props?.locale || "en") === "en";
-	}, [context?.engine?.props?.locale]);
-	/**
-	* @title: 协议文案
-	* @description: 根据中英文不同显示文案不同
-	* @param {*} useMemo
-	* @return {*}
-	* @Author: wh
-	* @Date: 2023-01-30 16:25
-	*/
-	const _policyText = useCallback((item, index) => {
-		if (!item || !protocols?.length) return "";
-		return getPunctuationMark(index, protocols.length, isEn);
-	}, [protocols]);
-	const handleAgreed = () => {
-		onChange && onChange(!isAgreePolicy);
-	};
-	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "appointment-deposit-bottom" }, isShowTitle ? /* @__PURE__ */ React.createElement("span", { className: "title" }, title) : null, /* @__PURE__ */ React.createElement("div", { className: "tip" }, isEn ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PisellText.Amount, {
-		value: total,
-		showCurrencySymbol: true,
-		className: "amount"
-	}), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.appointment.deposit.amount.tip1"))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.appointment.deposit.amount.tip1")), /* @__PURE__ */ React.createElement(PisellText.Amount, {
-		value: total,
-		showCurrencySymbol: true,
-		className: "amount"
-	}), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.appointment.deposit.amount.tip2")))), protocols?.length > 0 ? /* @__PURE__ */ React.createElement("div", {
-		className: "checkbox-wrap",
-		onClick: () => handleAgreed()
-	}, /* @__PURE__ */ React.createElement(Checkbox, { checked: isAgreePolicy }), /* @__PURE__ */ React.createElement("div", { className: "policy-box" }, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.appointment.deposit.agreed")), /* @__PURE__ */ React.createElement("div", { className: "policy-wrap" }, protocols?.map((item, index) => {
-		return /* @__PURE__ */ React.createElement("span", {
-			key: item?.id,
-			onClick: (e) => {
-				e.stopPropagation();
-				e.preventDefault();
-				setPolicyItem(item);
-				setVisible(true);
-			}
-		}, item?.title, /* @__PURE__ */ React.createElement("span", { className: "symbol" }, _policyText(item, index)));
-	})))) : null), /* @__PURE__ */ React.createElement(PolicyModal_default, {
-		open: visible,
-		onCancel: () => setVisible(false),
-		item: policyItem,
-		depositProtocolRequest
-	}));
-};
-var deposit_default = Deposit;
-
-//#endregion
-export { deposit_default as default };

package/dist/es/components/appointmentBooking/deposit/index.less

@@ -1,57 +0,0 @@
-.appointment-deposit-bottom {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 8px;
-  align-self: stretch;
-
-  .title {
-    color: var(--Text-Text_1, #1b1b1b);
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 24px;
-  }
-
-  .tip {
-    color: var(--Base-Black, #000);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-
-    .amount {
-      font-weight: 600;
-      margin-right: 2px;
-    }
-  }
-
-  .checkbox-wrap {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    width: 100%;
-
-    .policy-box {
-      padding-left: 6px;
-      cursor: pointer;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px;
-      color: var(--Base-Black, #000);
-      flex: 1;
-    }
-
-    .policy-wrap {
-      color: var(--theme-color, #7f56d9);
-      display: inline;
-      word-break: break-word;
-
-      .symbol {
-        color: var(--Base-Black, #000);
-      }
-    }
-  }
-}