83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
|
import styled from "styled-components";
|
|||
|
|
import {TextInput} from "../components/TextInput";
|
|||
|
|
import {useState} from "react";
|
|||
|
|
import CelebrationCanvas from "./CelebrationCanvas";
|
|||
|
|
import {createPortal} from "react-dom";
|
|||
|
|
import {subscribeOnFinish} from "../../api/promoApi";
|
|||
|
|
|
|||
|
|
export const FinishPopupContent = ({setShowCompletePopup}: any) => {
|
|||
|
|
const [email, setEmail] = useState<string>("");
|
|||
|
|
const [buttonContent, setButtonContent] = useState<string>("Получить подарок");
|
|||
|
|
|
|||
|
|
return <FinishPopupContentWrap>
|
|||
|
|
<img src="/images/broc-gifts.png" alt=""/>
|
|||
|
|
<h2>Спасибо!</h2>
|
|||
|
|
<p>
|
|||
|
|
Вы помогли нам протестировать автокорзину. Сейчас сервис ещё разрабатывается, поэтому оформить заказ пока нельзя.
|
|||
|
|
Оставьте адрес электронной почты, и после запуска мы подарим вам <strong>3 бесплатные корзины</strong>.
|
|||
|
|
</p>
|
|||
|
|
<TextInput placeholder={'Почта'} value={email} onChange={setEmail} />
|
|||
|
|
<FinishButton onClick={() => {
|
|||
|
|
if (buttonContent === 'Получить подарок') {
|
|||
|
|
setButtonContent('...')
|
|||
|
|
subscribeOnFinish(email).then((data) => {
|
|||
|
|
if (data && data.status === 200) {
|
|||
|
|
setButtonContent('Письмо отправлено')
|
|||
|
|
} else {
|
|||
|
|
setButtonContent('Возникла ошибка')
|
|||
|
|
}
|
|||
|
|
}).catch(() => {
|
|||
|
|
setButtonContent('Возникла ошибка')
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}}>{buttonContent}</FinishButton>
|
|||
|
|
{createPortal(<CelebrationCanvas duration={5000} particleCount={300} />, document.body)}
|
|||
|
|
</FinishPopupContentWrap>;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const FinishPopupContentWrap = styled.div`
|
|||
|
|
padding: 20px;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
max-width: 100%;
|
|||
|
|
}
|
|||
|
|
h2 {
|
|||
|
|
margin-top: 24px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
font-size: 32px;
|
|||
|
|
line-height: 48px;
|
|||
|
|
font-weight: 450;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: 19px;
|
|||
|
|
font-weight: 360;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
`;
|
|||
|
|
const FinishButton = styled.button`
|
|||
|
|
background-color: ${({ theme }) => theme.colors.green};
|
|||
|
|
height: 54px;
|
|||
|
|
width: 100%;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border: none;
|
|||
|
|
padding: 14px 32px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 370;
|
|||
|
|
line-height: 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
|
|||
|
|
&:hover,
|
|||
|
|
&:focus {
|
|||
|
|
background-color: ${({ theme }) => theme.colors.greenHover};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background-color: #4A8D19;
|
|||
|
|
}
|
|||
|
|
`;
|