@pisell/private-materials 6.6.8 → 6.6.10

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

@@ -0,0 +1,145 @@
+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

@@ -0,0 +1,116 @@
+.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

@@ -0,0 +1,170 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,18 @@
+.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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,57 @@
+.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);
+      }
+    }
+  }
+}