55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.css";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import { IPaywallProduct } from "@/api/resources/Paywall";
|
|
|
|
const getPrice = (product: IPaywallProduct | null) => {
|
|
if (!product) {
|
|
return 0;
|
|
}
|
|
return (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100;
|
|
};
|
|
|
|
function PaymentDiscountTable() {
|
|
const activeProduct = useSelector(selectors.selectActiveProduct);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Title variant="h3" className={styles.title}>
|
|
You get a secret discount!
|
|
</Title>
|
|
<p className={styles["no-pressure"]}>No pressure. Cancel anytime.</p>
|
|
<div className={styles.applied}>
|
|
<div className={styles.side}>
|
|
<img
|
|
className={styles["present-image"]}
|
|
src="/present.png"
|
|
alt="Present"
|
|
/>
|
|
<p className={styles.description}>Secret discount applied!</p>
|
|
</div>
|
|
<div className={styles.side}>
|
|
<span className={styles.discount}>-30%</span>
|
|
<strong>-50%</strong>
|
|
</div>
|
|
</div>
|
|
<div className={styles["cost-container"]}>
|
|
<p>Your cost per 14 days after trial:</p>
|
|
<div className={styles.side}>
|
|
<span className={styles.discount}>$19</span>
|
|
<strong>$9</strong>
|
|
</div>
|
|
</div>
|
|
<p className={styles.save}>You save $30</p>
|
|
<hr className={styles.line} />
|
|
<div className={styles["total-container"]}>
|
|
<p>Total today:</p>
|
|
{activeProduct && <strong>${getPrice(activeProduct)}</strong>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PaymentDiscountTable;
|