w-aura/src/components/palmistry/discount-screen/discount-screen.tsx
Евгений Пономарев 21de1c6322 Palmistry
2024-03-22 00:28:03 +00:00

79 lines
2.5 KiB
TypeScript

import React from "react";
import { useNavigate } from 'react-router-dom';
import './discount-screen.css';
import routes from '@/routes';
import HeaderLogo from '@/components/palmistry/header-logo/header-logo';
export default function DiscountScreen() {
const navigate = useNavigate();
const userHasWeeklySubscription = false;
const goPremiumBundle = () => {
navigate(routes.client.palmistryPremiumBundle());
};
React.useEffect(() => {
if (userHasWeeklySubscription) {
goPremiumBundle();
}
}, [userHasWeeklySubscription]);
return (
<div className="discount-screen">
<div className="discount-screen__header">
<HeaderLogo />
</div>
<div className="discount-screen__content">
<span className="discount-screen__title">
Not planning on looking back?
</span>
<div className="discount-screen__blocks">
<section className="discount-screen__block">
<span className="discount-screen__price-block">19 for <br /> 1-week plan</span>
<div className="discount-screen__details">
<span className="discount-screen__details-name">Total savings</span>
<span className="discount-screen__details-value">0</span>
</div>
<div className="discount-screen__details">
<span className="discount-screen__details-name">7-day trial</span>
<span className="discount-screen__details-value">yes</span>
</div>
<button className="discount-screen__button" style={{ minHeight: '38px' }} onClick={goPremiumBundle}>
Start trial
</button>
</section>
<section className="discount-screen__block">
<div className="discount-screen__header-block">save 33%</div>
<span className="discount-screen__price-block">12.73 for <br /> 1-week plan</span>
<div className="discount-screen__details">
<span className="discount-screen__details-name">Total savings</span>
<span className="discount-screen__details-value">6.27</span>
</div>
<div className="discount-screen__details">
<span className="discount-screen__details-name">3-day trial</span>
<span className="discount-screen__details-value">no</span>
</div>
<button className="discount-screen__button">
Pay now and <br /> skip trial
</button>
</section>
</div>
</div>
</div>
);
}