43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { useNavigate } from 'react-router-dom'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Title from '../Title'
|
|
import routes from '../../routes'
|
|
import styles from './styles.module.css'
|
|
import ModalTop from '../ModalTop'
|
|
import Header from '../Header'
|
|
|
|
interface ModalTopProps {
|
|
open: boolean
|
|
onClose?: () => void
|
|
}
|
|
|
|
function SpecialWelcomeOffer({ open, onClose }: ModalTopProps): JSX.Element {
|
|
const { t } = useTranslation()
|
|
const navigate = useNavigate()
|
|
const handleNext = () => {
|
|
navigate(routes.client.emailEnter())
|
|
}
|
|
|
|
|
|
return (
|
|
<>
|
|
{open ? (
|
|
<ModalTop open={open} onClose={onClose || handleNext}>
|
|
<Header showBack={true} showCross={true} clickCross={onClose || handleNext} />
|
|
<div className={styles.content}>
|
|
<span className={styles['welcome-offer']}>{t('special_welcome_offer')}</span>
|
|
<Title variant='h1'>{t('get_100_off')}</Title>
|
|
<div className={styles['discount-container']}>
|
|
<span className={styles['red-price']}>$9.99</span>
|
|
<span className={styles['price']}>$0.00</span>
|
|
</div>
|
|
<button className={styles.button} onClick={onClose || handleNext}>{t('get_discount')}</button>
|
|
</div>
|
|
</ModalTop>
|
|
): null}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SpecialWelcomeOffer
|