89 lines
2.9 KiB
TypeScript
89 lines
2.9 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>
|
||
Вы помогли нам протестировать автокорзину. Сейчас сервис ещё разрабатывается, поэтому оформить заказ пока не получится.
|
||
</p>
|
||
<p>
|
||
Если вы оставите адрес электронной почты - после запуска мы подарим вам <strong>3 бесплатные корзины</strong>.
|
||
</p>
|
||
<TextInput placeholder={'Почта'} value={email} onChange={setEmail} />
|
||
<FinishButton onClick={() => {
|
||
if (buttonContent === 'Получить подарок') {
|
||
setButtonContent('...')
|
||
subscribeOnFinish(email).then((data) => {
|
||
// @ts-ignore
|
||
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;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
img {
|
||
max-width: 100%;
|
||
display: flex;
|
||
}
|
||
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;
|
||
}
|
||
`; |