116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
import React from 'react';
|
||
import { Modal, Typography, Space, Button, Tooltip } from '@douyinfe/semi-ui';
|
||
import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si';
|
||
import { CreditCard, Wallet } from 'lucide-react';
|
||
|
||
const { Text } = Typography;
|
||
|
||
const PaymentMethodSelectModal = ({
|
||
t,
|
||
visible,
|
||
onCancel,
|
||
topUpCount,
|
||
renderTopUpCount,
|
||
payMethods = [],
|
||
enableOnlineTopUp,
|
||
enableStripeTopUp,
|
||
enableAlipayTopUp,
|
||
enableWechatPayTopUp,
|
||
onSelect,
|
||
paymentLoading,
|
||
payWay,
|
||
}) => {
|
||
const epayMethods = payMethods.filter((m) => m.type !== 'waffo' && m.type !== 'custom1');
|
||
|
||
const renderPayIcon = (payMethod) => {
|
||
if (payMethod.type === 'alipay') {
|
||
return <SiAlipay size={20} color='#1677FF' />;
|
||
}
|
||
if (payMethod.type === 'wxpay') {
|
||
return <SiWechat size={20} color='#07C160' />;
|
||
}
|
||
if (payMethod.type === 'stripe') {
|
||
return <SiStripe size={20} color='#635BFF' />;
|
||
}
|
||
return (
|
||
<CreditCard
|
||
size={20}
|
||
color={payMethod.color || 'var(--semi-color-text-2)'}
|
||
/>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Modal
|
||
title={
|
||
<div className='flex items-center'>
|
||
<Wallet className='mr-2' size={18} />
|
||
{t('选择支付方式')}
|
||
</div>
|
||
}
|
||
visible={visible}
|
||
onCancel={onCancel}
|
||
footer={null}
|
||
maskClosable
|
||
size='small'
|
||
centered
|
||
>
|
||
<div className='space-y-4 pb-2'>
|
||
<Text type='tertiary' size='small'>
|
||
{t('充值数量')}：{renderTopUpCount(topUpCount)}
|
||
</Text>
|
||
<Space vertical spacing='medium' style={{ width: '100%' }}>
|
||
{epayMethods.map((payMethod) => {
|
||
const minTopupVal = Number(payMethod.min_topup) || 0;
|
||
const isStripe = payMethod.type === 'stripe';
|
||
const isAlipay = payMethod.type === 'alipay';
|
||
const isWechat = payMethod.type === 'wxpay';
|
||
const disabled =
|
||
(!enableOnlineTopUp && !isStripe && !isAlipay && !isWechat) ||
|
||
(!enableStripeTopUp && isStripe) ||
|
||
(!enableAlipayTopUp && isAlipay) ||
|
||
(!enableWechatPayTopUp && isWechat) ||
|
||
minTopupVal > Number(topUpCount || 0);
|
||
|
||
const buttonEl = (
|
||
<Button
|
||
key={payMethod.type}
|
||
theme='outline'
|
||
type='tertiary'
|
||
block
|
||
size='large'
|
||
onClick={() => onSelect(payMethod.type)}
|
||
disabled={disabled}
|
||
loading={paymentLoading && payWay === payMethod.type}
|
||
icon={renderPayIcon(payMethod)}
|
||
className='!rounded-xl !justify-start !px-4 !py-3'
|
||
>
|
||
{payMethod.name}
|
||
</Button>
|
||
);
|
||
|
||
if (disabled && minTopupVal > Number(topUpCount || 0)) {
|
||
return (
|
||
<Tooltip
|
||
key={payMethod.type}
|
||
content={
|
||
t('此支付方式最低充值金额为') + ' ' + minTopupVal
|
||
}
|
||
>
|
||
<span style={{ display: 'block', width: '100%' }}>
|
||
{buttonEl}
|
||
</span>
|
||
</Tooltip>
|
||
);
|
||
}
|
||
|
||
return buttonEl;
|
||
})}
|
||
</Space>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default PaymentMethodSelectModal;
|