54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import type { CartItem } from '../types';
|
|
|
|
type Props = {
|
|
cart: CartItem[];
|
|
onPay: (succeed: boolean) => void;
|
|
};
|
|
|
|
export function CheckoutPage({ cart, onPay }: Props) {
|
|
const total = cart.reduce((sum, i) => sum + i.price * i.qty, 0);
|
|
|
|
return (
|
|
<div>
|
|
<div className="page-title">Checkout</div>
|
|
<div className="checkout-form">
|
|
<div className="form-group">
|
|
<label className="form-label" htmlFor="card">
|
|
Card number
|
|
</label>
|
|
<input defaultValue="4242 4242 4242 4242" id="card" readOnly />
|
|
</div>
|
|
<div
|
|
style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}
|
|
>
|
|
<div className="form-group">
|
|
<label className="form-label" htmlFor="expiry">
|
|
Expiry
|
|
</label>
|
|
<input defaultValue="12/28" id="expiry" readOnly />
|
|
</div>
|
|
<div className="form-group">
|
|
<label className="form-label" htmlFor="cvc">
|
|
CVC
|
|
</label>
|
|
<input defaultValue="123" id="cvc" readOnly />
|
|
</div>
|
|
</div>
|
|
<div className="checkout-total">Total: ${total}</div>
|
|
<div className="checkout-pay-buttons">
|
|
<Link to="/cart">
|
|
<button type="button">← Back</button>
|
|
</Link>
|
|
<button className="primary" onClick={() => onPay(true)} type="button">
|
|
Pay ${total} (success)
|
|
</button>
|
|
<button className="danger" onClick={() => onPay(false)} type="button">
|
|
Pay ${total} (fail)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|