feat/paymenet-methods
This commit is contained in:
parent
e723dde47f
commit
92d2d3f058
@ -10,37 +10,25 @@ interface IPaymentMethodProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function PaymentMethod({ method, onSelect }: IPaymentMethodProps) {
|
function PaymentMethod({ method, onSelect }: IPaymentMethodProps) {
|
||||||
|
|
||||||
|
const { name, type, isActive, icon } = method;
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
onSelect?.(method);
|
onSelect?.(method);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={bem(block, null, method.isActive ? 'active' : null)}
|
className={bem(block, null, isActive ? 'active' : null)}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
>
|
>
|
||||||
{method.icon && (
|
{icon && (
|
||||||
<div className={bem(block, 'icon')}>
|
<div className={bem(block, 'icon')}>
|
||||||
<img src={method.icon} alt={method.name} />
|
<img src={icon} alt={name} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className={bem(block, 'content')}>
|
<div className={bem(block, 'content')}>
|
||||||
<h3 className={bem(block, 'name')}>{method.name}</h3>
|
<h3 className={bem(block, 'name')}>{name}</h3>
|
||||||
<p className={bem(block, 'type')}>{method.type}</p>
|
<p className={bem(block, 'type')}>{type}</p>
|
||||||
{(method.minAmount || method.maxAmount) && (
|
|
||||||
<div className={bem(block, 'limits')}>
|
|
||||||
{method.minAmount && (
|
|
||||||
<span className={bem(block, 'limit')}>
|
|
||||||
Min: ${method.minAmount}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{method.maxAmount && (
|
|
||||||
<span className={bem(block, 'limit')}>
|
|
||||||
Max: ${method.maxAmount}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user