64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { useTranslations } from "@/hooks/translations";
|
|
import Price, { Currency, Locale } from "./Price";
|
|
import styles from "./styles.module.css";
|
|
import Countdown from "../Countdown";
|
|
|
|
type PaymentItem = {
|
|
title: string;
|
|
price: number;
|
|
description: string;
|
|
};
|
|
|
|
type PaymentTableProps = {
|
|
currency: Currency;
|
|
locale: Locale;
|
|
items: PaymentItem[];
|
|
};
|
|
|
|
function PaymentTable({
|
|
currency,
|
|
locale,
|
|
items,
|
|
}: PaymentTableProps): JSX.Element {
|
|
const { translate } = useTranslations();
|
|
const total = items.reduce((acc, item) => acc + item.price, 0);
|
|
const totalPrice = new Price(total, currency, locale);
|
|
const toItem = (item: (typeof items)[0], idx: number) => {
|
|
const price = new Price(item.price, currency, locale);
|
|
return (
|
|
<div key={idx} className={styles["payment__item"]}>
|
|
<div className={styles["payment__item-summary"]}>
|
|
<div className={styles["payment__item-title"]}>{item.title}</div>
|
|
<div className={styles["payment__item-price"]}>{price.format()}</div>
|
|
</div>
|
|
<div className={styles["payment__item-description"]}>
|
|
<p>{item.description}</p>
|
|
{/* <p>One dollar thirty six cents per day</p> */}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
return (
|
|
<div className={styles.payment}>
|
|
<Countdown className={styles["payment__countdown"]} timeClassName={styles["payment__countdown-time"]} start={10} />
|
|
<div className={styles["payment__table"]}>
|
|
<div className={styles["payment__total"]}>
|
|
<div className={styles["payment__total-title"]}>
|
|
{translate("total_today")}
|
|
</div>
|
|
<div className={styles["payment__total-price"]}>
|
|
{totalPrice.format()}
|
|
</div>
|
|
</div>
|
|
<div className={styles["payment__items"]}>{items.map(toItem)}</div>
|
|
</div>
|
|
<div className={styles["payment__information"]}>
|
|
{translate("charged_only", { price: totalPrice.format() })}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PaymentTable;
|
|
export { Price, Currency, Locale };
|