@pisell/private-materials 6.6.9 → 6.6.11

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

@@ -1,133 +0,0 @@
-import useEngineContext_default from "../../../../../hooks/useEngineContext.js";
-import { clientPayment, formatFranchiseeRoute } from "../../utils.js";
-import { getPayGroupParamsFromStorage } from "../../payGroup.js";
-import { Context } from "../../model.js";
-import ThreedsLoading_default from "../MWCreditCard/TDSPay/ThreedsLoading/index.js";
-import usePaymentLogger_default from "../../../../../hooks/usePaymentLogger.js";
-import { usePaymentRedirect } from "../hooks/index.js";
-import PaymentReturnContent_default from "../components/PaymentReturnContent/index.js";
-import React, { forwardRef, useContext, useImperativeHandle, useState } from "react";
-import { locales } from "@pisell/utils";
-import { PisellModal } from "@pisell/materials";
-
-//#region src/components/pay/toC/PaymentMethods/GooglePay/index.tsx
-/**
-* @title: 谷歌支付
-* @description:
-* @param {GooglePayProps} props
-* @param {React} ref
-* @return {*}
-* @Author: zhiwei.Wang
-* @Date: 2024-08-16 11:01
-*/
-const GooglePay = (props, ref) => {
-	const { state } = useContext(Context);
-	const [open, setOpen] = useState(false);
-	const context = useEngineContext_default();
-	const { config } = context.appHelper?.constants || {};
-	const { interaction } = context.appHelper?.utils;
-	const paymentLogger = usePaymentLogger_default({
-		orderId: state.payGroup?.order_id || "unknown",
-		step: "2"
-	});
-	const { isReturned, handleRedirect, resetState } = usePaymentRedirect({
-		orderId: state.payGroup?.order_id,
-		paymentType: "googlePay"
-	});
-	/**
-	* @title: 初始化
-	* @description:
-	* @param {any} param1
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:01
-	*/
-	const init = async ({ payGroup }) => {
-		paymentLogger.addLog({
-			key: "GooglePay初始化开始",
-			value: ""
-		});
-		setOpen(true);
-		const dvaStore = (context.appHelper.utils || {})?.getStore?.()?.getState();
-		const values = getPayGroupParamsFromStorage(payGroup.order_id);
-		if (!values) {
-			paymentLogger.addLog({
-				key: "GooglePay获取支付参数失败",
-				value: {
-					title: `订单${payGroup?.order_id} 未找到存储的支付参数`,
-					data: { payGroup }
-				}
-			});
-			paymentLogger.sendLogs("GooglePay获取支付参数失败");
-			setOpen(false);
-			return;
-		}
-		paymentLogger.addLog({
-			key: "GooglePay获取支付参数成功",
-			value: ""
-		});
-		if (interaction?.utils?.isAppEnv?.() && interaction?.utils?.isAndroid_ios?.() === "android") {
-			paymentLogger.addLog({
-				key: "GooglePay使用Android客户端支付",
-				value: ""
-			});
-			paymentLogger.sendLogs("GooglePay客户端支付");
-			return clientPayment({
-				order_id: payGroup.order_id,
-				type: "google_pay",
-				values,
-				interaction
-			});
-		}
-		try {
-			const locale = dvaStore.core?.translateLocale || "en";
-			const shopId = dvaStore.core?.core?.shop?.id;
-			const currentURL = window.location.href;
-			const linkElement = document.createElement("a");
-			linkElement.href = currentURL;
-			const shop_domain = linkElement.hostname;
-			const _href = `${config.pay}${formatFranchiseeRoute(`/google-pay?order_id=${state.payGroup?.order_id}&shop_id=${shopId}&locale=${locale}&shop_domain=${shop_domain}&total_amount=${values.amount}&payment_group_id=${values.payment_group_id}&front_order_uuid=${state.front_order_uuid}`, state.history)}`;
-			paymentLogger.addLog({
-				key: "GooglePay准备跳转",
-				value: ""
-			});
-			paymentLogger.sendLogs("GooglePay跳转成功");
-			await handleRedirect(_href);
-		} catch (err) {
-			paymentLogger.addLog({
-				key: "GooglePay处理错误",
-				value: {
-					title: `订单${payGroup?.order_id} GooglePay处理失败: ${err?.message || "未知错误"}`,
-					data: {
-						payGroup,
-						values
-					}
-				}
-			});
-			paymentLogger.sendLogs("GooglePay处理失败", err);
-			setOpen(false);
-		}
-	};
-	useImperativeHandle(ref, () => ({ init }));
-	const handleReturn = () => {
-		setOpen(false);
-		resetState();
-	};
-	return /* @__PURE__ */ React.createElement(PisellModal, {
-		platform: "h5",
-		open,
-		footer: false,
-		header: false,
-		closable: false,
-		bodyStyle: { padding: 0 }
-	}, /* @__PURE__ */ React.createElement("div", { className: "" }, !isReturned && /* @__PURE__ */ React.createElement(ThreedsLoading_default, { title: locales.getText("tocPay.text.connectingGooglePay") }), isReturned && /* @__PURE__ */ React.createElement(PaymentReturnContent_default, {
-		handleReturn,
-		state,
-		orderId: state.payGroup?.order_id,
-		unique_payment_number: state.front_order_uuid
-	})));
-};
-var GooglePay_default = forwardRef(GooglePay);
-
-//#endregion
-export { GooglePay_default as default };

package/dist/es/components/pay/toC/PaymentMethods/MWCreditCard/Add/index.js

@@ -1,237 +0,0 @@
-import { Context } from "../../../model.js";
-import React, { forwardRef, useContext, useImperativeHandle, useMemo, useState } from "react";
-import { Checkbox, Col, Form, Row } from "antd";
-import { locales } from "@pisell/utils";
-import { Iconfont, PisellAlert, PisellDatePicker, PisellInput, PisellModal, PisellText, PisellToast } from "@pisell/materials";
-import "./index.less";
-
-//#region src/components/pay/toC/PaymentMethods/MWCreditCard/Add/index.tsx
-/**
-* @title: 格式化名称
-* @description:
-* @param {string} card_name
-* @return {*}
-* @Author: zhiwei.Wang
-* @Date: 2024-08-16 11:12
-*/
-const formatName = (card_name) => {
-	let _name = card_name || "";
-	_name = _name.trim();
-	if (!_name) return {
-		text: "",
-		error: locales.getText("tocPay.text.enterName")
-	};
-	_name = _name.replace("-", "");
-	_name = _name.replace(/\s+/g, " ");
-	let _arr = _name.split(" ");
-	if (_arr.length == 0) return {
-		text: "",
-		error: locales.getText("tocPay.text.enterValidName")
-	};
-	if (_arr.length == 1) {
-		_name = _name;
-		return {
-			text: _name,
-			error: ""
-		};
-	} else {
-		_name = _arr[0] + " " + _arr[_arr.length - 1];
-		return {
-			text: _name,
-			error: ""
-		};
-	}
-};
-/**
-* @title: 添加信用卡
-* @description:
-* @param {AddMWCreditCardProps} props
-* @param {React} ref
-* @return {*}
-* @Author: zhiwei.Wang
-* @Date: 2024-08-16 11:13
-*/
-const AddMWCreditCard = (props, ref) => {
-	const { onCreate } = props;
-	const [open, setOpen] = useState(false);
-	const [form] = Form.useForm();
-	const { state } = useContext(Context);
-	/**
-	* @title: 初始化
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:13
-	*/
-	const init = async () => {
-		onReset();
-		setOpen(true);
-	};
-	/**
-	* @title: 取消
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:13
-	*/
-	const onCancel = () => {
-		setOpen(false);
-		onReset();
-	};
-	/**
-	* @title: 检测表单是否正确
-	* @description:
-	* @param {any} values
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:13
-	*/
-	const _checkValue = (values) => {
-		if (!values.card_number) {
-			console.log(locales.getText("tocPay.text.enterCardNumber"));
-			return;
-		}
-		if (values.card_number.replace(/\s/g, "").length < 16) {
-			PisellToast({
-				content: locales.getText("tocPay.text.enterValidCardNumber"),
-				duration: 2
-			});
-			console.log(locales.getText("tocPay.text.enterValidCardNumber"));
-			return;
-		}
-		let { error, text } = formatName(values.card_name);
-		if (error) {
-			console.log(error);
-			return;
-		}
-		if (!/^([A-Za-z]+|[A-Za-z,.'&-]+) ([A-Za-z]+|[A-Za-z,.'&-]+)$/.test(text)) {
-			PisellToast({
-				content: locales.getText("tocPay.text.enterEnglishName"),
-				duration: 2
-			});
-			console.log(locales.getText("tocPay.text.enterEnglishName"));
-			return;
-		}
-		if (!values.date) {
-			PisellToast({
-				content: locales.getText("tocPay.text.enterExpirationDate"),
-				duration: 2
-			});
-			console.log(locales.getText("tocPay.text.enterExpirationDate"));
-			return;
-		}
-		if (!values.card_ccv) {
-			PisellToast({
-				content: locales.getText("tocPay.text.enterCVV"),
-				duration: 2
-			});
-			console.log(locales.getText("tocPay.text.enterCVV"));
-			return;
-		}
-		if ((values.card_ccv + "").length < 3) {
-			PisellToast({
-				content: locales.getText("tocPay.text.enterValidCVV"),
-				duration: 2
-			});
-			console.log(locales.getText("tocPay.text.enterValidCVV"));
-			return;
-		}
-		return true;
-	};
-	/**
-	* @title: 重置表单
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:14
-	*/
-	const onReset = () => {
-		form.resetFields();
-	};
-	/**
-	* @title: 提交
-	* @description:
-	* @param {any} values
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:14
-	*/
-	const onFinish = (values) => {
-		if (!_checkValue(values)) return;
-		onCreate?.(values);
-	};
-	const onSubmit = () => {
-		form.submit();
-	};
-	useImperativeHandle(ref, () => ({
-		init,
-		onReset,
-		onSubmit
-	}));
-	const okText = useMemo(() => {
-		if ((state.payGroup?.otherPayment)?.surcharge) return /* @__PURE__ */ React.createElement("div", { 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("div", { className: "" }, locales.getText("tocPay.text.pay"), " ", /* @__PURE__ */ React.createElement(PisellText.Amount, { value: state.payGroup?.wait_amount || 0 }));
-	}, [state.payGroup]);
-	return /* @__PURE__ */ React.createElement(PisellModal, {
-		title: /* @__PURE__ */ React.createElement("div", null, locales.getText("tocPay.text.addCard")),
-		open,
-		onCancel,
-		cancelVisible: false,
-		onOk: onSubmit,
-		okText,
-		bodyStyle: { padding: 24 }
-	}, /* @__PURE__ */ React.createElement("div", { className: "" }, /* @__PURE__ */ React.createElement(Form, {
-		layout: "vertical",
-		form,
-		onFinish,
-		requiredMark: false
-	}, /* @__PURE__ */ React.createElement(Row, {
-		style: { width: "100%" },
-		gutter: [10, 0]
-	}, /* @__PURE__ */ React.createElement(Col, { span: 24 }, /* @__PURE__ */ React.createElement(Form.Item, {
-		label: locales.getText("tocPay.text.cardNumber"),
-		name: "card_number",
-		rules: [{
-			required: true,
-			message: locales.getText("tocPay.text.incorrectCardNumber")
-		}]
-	}, /* @__PURE__ */ React.createElement(PisellInput.BankCard, null))), /* @__PURE__ */ React.createElement(Col, { span: 12 }, /* @__PURE__ */ React.createElement(Form.Item, {
-		label: locales.getText("tocPay.text.expiration"),
-		name: "date",
-		rules: [{
-			required: true,
-			message: locales.getText("tocPay.text.incorrectExpiryDate")
-		}]
-	}, /* @__PURE__ */ React.createElement(PisellDatePicker, {
-		type: "input",
-		format: "MM/YY"
-	}))), /* @__PURE__ */ React.createElement(Col, { span: 12 }, /* @__PURE__ */ React.createElement(Form.Item, {
-		label: locales.getText("tocPay.text.securityCode"),
-		name: "card_ccv",
-		rules: [{
-			required: true,
-			message: locales.getText("tocPay.text.incorrectSecurityCode")
-		}]
-	}, /* @__PURE__ */ React.createElement(PisellInput.SecurityCode, { maxLength: 3 }))), /* @__PURE__ */ React.createElement(Col, { span: 24 }, /* @__PURE__ */ React.createElement(Form.Item, {
-		label: locales.getText("tocPay.text.cardholderName"),
-		name: "card_name",
-		rules: [{
-			required: true,
-			pattern: new RegExp(/^([A-Za-z]+|[A-Za-z,.'&-]+) ([A-Za-z]+|[A-Za-z,.'&-]+)$/, "g"),
-			message: locales.getText("tocPay.text.enterEnglishName")
-		}]
-	}, /* @__PURE__ */ React.createElement(PisellInput, { placeholder: locales.getText("tocPay.text.incorrectName") }))), /* @__PURE__ */ React.createElement(Col, { span: 24 }, /* @__PURE__ */ React.createElement(Form.Item, {
-		name: "is_save",
-		valuePropName: "checked",
-		initialValue: true
-	}, /* @__PURE__ */ React.createElement(Checkbox, null, /* @__PURE__ */ React.createElement("span", { className: "save-card-checkbox-text" }, locales.getText("tocPay.text.saveCardForNextTime"))))), /* @__PURE__ */ React.createElement(Col, { span: 24 }, /* @__PURE__ */ React.createElement(PisellAlert, {
-		className: "save-card-alert",
-		icon: /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-shield-tick" }),
-		showIcon: true,
-		message: locales.getText("tocPay.text.secureBankInfo")
-	}))))));
-};
-var Add_default = forwardRef(AddMWCreditCard);
-
-//#endregion
-export { Add_default as default };

package/dist/es/components/pay/toC/PaymentMethods/MWCreditCard/Add/index.less

@@ -1,25 +0,0 @@
-.pisell-lowcode-form-item-label {
-  color: var(--Gray-900, #101828);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 20px;
-}
-
-.save-card-checkbox-text {
-  color: var(--Gray-900, #101828);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-}
-
-.save-card-alert {
-
-  .pisell-lowcode-alert-message {
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-  }
-
-}

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

@@ -1,214 +0,0 @@
-import { Context } from "../../../model.js";
-import { batchDeleteCards, getCreditCardList } from "./serve.js";
-import React, { forwardRef, useContext, useImperativeHandle, useMemo, useState } from "react";
-import { Button } from "antd";
-import { locales } from "@pisell/utils";
-import classNames from "classnames";
-import { Iconfont, PisellCheckboxGroup, PisellLoading, PisellModal, PisellRow, PisellText, getBankCardTypeImg } from "@pisell/materials";
-import "./index.less";
-
-//#region src/components/pay/toC/PaymentMethods/MWCreditCard/List/index.tsx
-/**
-* @title: 信用卡列表
-* @description:
-* @return {*}
-* @Author: zhiwei.Wang
-* @Date: 2024-08-16 11:04
-*/
-const MWCreditCardList = (props, ref) => {
-	const { state } = useContext(Context);
-	const [open, setOpen] = useState(false);
-	const [currentCard, setCurrentCard] = useState(0);
-	const [loading, setLoading] = useState(false);
-	const [creditCardList, setCreditCardList] = useState([]);
-	const [manage, setManage] = useState(false);
-	const [order, setOrder] = useState(null);
-	/**
-	* @title: 获取卡列表
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:07
-	*/
-	const _getCreditCardList = async () => {
-		const cardList = await getCreditCardList();
-		setCreditCardList(cardList);
-		if (cardList.length) setCurrentCard(cardList[0].id);
-		setLoading(false);
-	};
-	/**
-	* @title: 初始化
-	* @description:
-	* @param {any} _order
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:08
-	*/
-	const init = async (_order) => {
-		if (!creditCardList.length) setLoading(true);
-		setOrder(_order);
-		setOpen(true);
-		setManage(false);
-		setCurrentCard(0);
-		_getCreditCardList();
-	};
-	/**
-	* @title: 设置卡
-	* @description:
-	* @param {number} id
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:09
-	*/
-	const cardChange = (id) => {
-		setCurrentCard(id);
-	};
-	useImperativeHandle(ref, () => ({ init }));
-	/**
-	* @title: 自定义选项
-	* @description:
-	* @param {any} d
-	* @param {boolean} active
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:09
-	*/
-	const renderOption = (d, active) => {
-		return /* @__PURE__ */ React.createElement(PisellRow, {
-			key: d.id,
-			platform: "h5",
-			gap: 12,
-			centerContentFill: true,
-			leftContent: /* @__PURE__ */ React.createElement("img", {
-				className: "credit-card-type-image",
-				src: getBankCardTypeImg(d.card_number)
-			}),
-			centerContent: /* @__PURE__ */ React.createElement("div", { className: classNames("credit-card-name", { "text-active-color": active }) }, d.card_number),
-			rightContent: manage ? /* @__PURE__ */ React.createElement(Iconfont, {
-				type: "pisell2-trash-01",
-				className: "remove-card-icon",
-				onClick: () => {
-					changeCreditCard(d.id);
-				}
-			}) : void 0
-		});
-	};
-	/**
-	* @title: 点击取消
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:09
-	*/
-	const onCancel = () => {
-		if (manage) {
-			setManage(false);
-			resetCards();
-			return;
-		}
-		setOpen(false);
-	};
-	/**
-	* @title: 重置卡的删除状态
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:10
-	*/
-	const resetCards = () => {
-		let _list = [...creditCardList];
-		_list.forEach((d) => {
-			if (d.delete) d.delete = 0;
-		});
-		setCreditCardList(_list);
-	};
-	/**
-	* @title: 批量删除卡
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:10
-	*/
-	const handleBatchDeleteCards = () => {
-		let deleteList = creditCardList.filter((d) => d.delete === 1);
-		let newList = creditCardList.filter((d) => d.delete !== 1);
-		let ids = deleteList.map((d) => d.id);
-		if (ids.length) {
-			setCreditCardList(newList);
-			batchDeleteCards({ card_ids: ids });
-		}
-	};
-	/**
-	* @title: 点击确认
-	* @description:
-	* @return {*}
-	* @Author: zhiwei.Wang
-	* @Date: 2024-08-16 11:11
-	*/
-	const onOk = () => {
-		if (manage) {
-			setManage(false);
-			handleBatchDeleteCards();
-			return;
-		}
-		let cur = creditCardList.find((d) => d.id === currentCard);
-		props.onChange?.(cur);
-	};
-	const renderList = useMemo(() => {
-		return creditCardList.filter((d) => d.delete !== 1);
-	}, [creditCardList]);
-	const changeCreditCard = (id) => {
-		let _list = [...creditCardList];
-		_list.forEach((d) => {
-			if (d.id === id) d.delete = 1;
-		});
-		setCreditCardList(_list);
-	};
-	const okText = useMemo(() => {
-		if ((state.payGroup?.otherPayment)?.surcharge) return /* @__PURE__ */ React.createElement("div", { 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("div", { className: "" }, locales.getText("tocPay.text.pay"), " ", /* @__PURE__ */ React.createElement(PisellText.Amount, { value: state.payGroup?.wait_amount || 0 }));
-	}, [state.payGroup]);
-	return /* @__PURE__ */ React.createElement(PisellModal, {
-		title: /* @__PURE__ */ React.createElement("div", null, locales.getText("tocPay.text.creditorDebitCard")),
-		open,
-		onCancel,
-		cancelVisible: false,
-		okText: manage ? locales.getText("tocPay.text.done") : okText,
-		onOk,
-		okButtonProps: { disabled: !currentCard },
-		bodyStyle: { padding: 24 }
-	}, !manage && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(PisellLoading, {
-		loading,
-		mask: true
-	}, /* @__PURE__ */ React.createElement(PisellCheckboxGroup, {
-		platform: "h5",
-		options: renderList,
-		value: currentCard,
-		iconPosition: "right",
-		mode: "single",
-		rowKey: "id",
-		className: "credit-card-list",
-		gap: 12,
-		onChange: cardChange,
-		optionClassName: "credit-card-item",
-		renderOption
-	})), !loading && /* @__PURE__ */ React.createElement(Button, {
-		icon: /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-plus" }),
-		type: "dashed",
-		className: "credit-card-add-button",
-		onClick: props.onAdd
-	}, /* @__PURE__ */ React.createElement("span", null, locales.getText("tocPay.text.addCreditOrDebitCard")))), manage && /* @__PURE__ */ React.createElement("div", { className: "credit-card-list manage-credit-card-list" }, renderList.map((d) => /* @__PURE__ */ React.createElement("div", {
-		className: "credit-card-item manage-credit-card",
-		key: d.id
-	}, renderOption(d)))), !manage && renderList.length ? /* @__PURE__ */ React.createElement(Button, {
-		type: "text",
-		className: "credit-card-manage-button",
-		onClick: () => {
-			setManage(!manage);
-		}
-	}, locales.getText("tocPay.text.manageCard")) : null);
-};
-var List_default = forwardRef(MWCreditCardList);
-
-//#endregion
-export { List_default as default };

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

@@ -1,95 +0,0 @@
-.credit-card-list {
-  margin-bottom: 12px;
-  margin-top: 0;
-
-  .credit-card-item {
-    padding: 16px;
-
-    .credit-card-type-image {
-      width: 46px;
-      height: 32px;
-      object-fit: contain;
-      border-radius: 4px;
-      border: 1px solid var(--Gray-100, #F2F4F7);
-      background: var(--Base-White, #FFF);
-      padding: 4px;
-      display: block;
-    }
-
-    .credit-card-name {
-      color: var(--Gray-700, #344054);
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 20px;
-    }
-
-  }
-
-
-}
-
-.manage-credit-card-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-
-  .manage-credit-card {
-    width: 100%;
-    cursor: pointer;
-    border-radius: 12px;
-    position: relative;
-
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border-radius: 12px;
-      border: 1px solid var(--Gray-200, #EAECF0);
-    }
-
-
-    .remove-card-icon {
-      color: #D92D20;
-      font-size: 24px;
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      z-index: 1;
-    }
-  }
-}
-
-.credit-card-add-button {
-  height: auto;
-  padding: 16px;
-  width: 100%;
-  border-radius: 12px;
-  color: var(--Gray-700, #344054);
-  text-align: center;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-}
-
-
-.text-active-color {
-  color: var(--theme-color, #7F56D9) !important;
-}
-
-.credit-card-manage-button {
-  margin-top: 20px;
-  color: var(--theme-color, #6941C6);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  cursor: pointer;
-}