diff --git a/src/components/contact/ContactForm.jsx b/src/components/contact/ContactForm.jsx index 536d5dd..39c2632 100644 --- a/src/components/contact/ContactForm.jsx +++ b/src/components/contact/ContactForm.jsx @@ -37,7 +37,7 @@ class ContactForm extends Component { const {onClose} = this.props; return ( -
+

@@ -46,10 +46,7 @@ class ContactForm extends Component {

- {isSuccessfullySent - ? (
Hello world
) - : this.renderForm() - } + {isSuccessfullySent ? this.renderSuccess() : this.renderForm()}
); @@ -116,6 +113,28 @@ class ContactForm extends Component { ); } + renderSuccess() { + const {form} = this; + const email = form.value('email'); + const {onClose} = this.props; + + return ( +
+
+ +
+ +
+
{email}
+
+ +
+
+
+ ); + } + onSubmit = () => { feedback(this.form.serialize()) .then(() => this.setState({isSuccessfullySent: true})) diff --git a/src/components/contact/contactForm.intl.json b/src/components/contact/contactForm.intl.json index 7b5df4b..2ce889b 100644 --- a/src/components/contact/contactForm.intl.json +++ b/src/components/contact/contactForm.intl.json @@ -12,5 +12,8 @@ "foundBugOnSite" : "I found a bug on the site", "improvementsSuggestion" : "I have a suggestion for improving the functional", "integrationQuestion" : "Service integration question", - "other" : "Other" + "other" : "Other", + + "youMessageReceived" : "Your message was received. We will respond to you shortly. The answer will come to your E-mail:", + "close" : "Close" } diff --git a/src/components/contact/contactForm.scss b/src/components/contact/contactForm.scss index da4c4f6..b34faf6 100644 --- a/src/components/contact/contactForm.scss +++ b/src/components/contact/contactForm.scss @@ -2,6 +2,8 @@ @import '~components/ui/fonts.scss'; @import '~components/ui/popup/popup.scss'; +/* Form state */ + .contactForm { composes: popupWrapper from 'components/ui/popup/popup.scss'; @@ -41,6 +43,43 @@ margin-bottom: 20px; } +/* Success State */ + +.successState { + composes: popupWrapper from 'components/ui/popup/popup.scss'; + + @include popupBounding(320px); +} + +.successBody { + composes: body from 'components/ui/popup/popup.scss'; + + text-align: center; +} + +.successDescription { + @extend .formDisclaimer; + + margin-bottom: 15px; +} + +.successIcon { + composes: checkmark from 'components/ui/icons.scss'; + + font-size: 90px; + color: #AAA; + margin-bottom: 20px; + line-height: 71px; +} + +.sentToEmail { + font-family: $font-family-title; + color: #444; + font-size: 18px; +} + +/* Common */ + .footer { margin-top: 0; } diff --git a/src/components/ui/popup/popup.scss b/src/components/ui/popup/popup.scss index 9ff5b04..8432d86 100644 --- a/src/components/ui/popup/popup.scss +++ b/src/components/ui/popup/popup.scss @@ -53,6 +53,8 @@ $popupMargin: 20px; // Отступ попапа от краёв окна display: inline-block; width: 100%; vertical-align: middle; + + transition: max-width .3s; } .popup { diff --git a/src/i18n/be.json b/src/i18n/be.json index 616a829..d2458a2 100644 --- a/src/i18n/be.json +++ b/src/i18n/be.json @@ -64,6 +64,7 @@ "components.auth.resendActivation.specifyYourEmail": "Укажыце тут ваш рэгістрацийны E-mail адрас, і мы вышлем на яго новы ліст з кодам актывацыі акаўнтанта", "components.auth.resendActivation.title": "Не атрымаў ліст", "components.contact.cannotAccessMyAccount": "Не удалося атрымаць доступ да акаўнта", + "components.contact.close": "Зачыніць", "components.contact.disclaimer": "Калі ласка, фарміруючы свае звароты, давайце максімум карысных звестак, каб мы як мага хутчэй зразумелі і вырашылі вашу праблему", "components.contact.email": "E‑mail", "components.contact.foundBugOnSite": "Я знайшоў памылку на сайце", @@ -76,6 +77,7 @@ "components.contact.subject": "Тэма", "components.contact.title": "Форма зваротнай сувязі", "components.contact.whichQuestion": "Па якім пытанні?", + "components.contact.youMessageReceived": "Ваш зварот у форму зваротнай сувязі атрыман. Мы адкажам вам у бліжэйшы час. Адказ прыйдзе на ўказаны вамі E-mail:", "components.footerMenu.contactUs": "Зваротная сувязь", "components.footerMenu.rules": "Правілы сайта", "components.langMenu.siteLanguage": "Мова сайта", diff --git a/src/i18n/en.json b/src/i18n/en.json index 8aaf983..7dd12be 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -64,6 +64,7 @@ "components.auth.resendActivation.specifyYourEmail": "Please, enter an E-mail you've registered with and we will send you new activation code.", "components.auth.resendActivation.title": "Did not received an E-mail", "components.contact.cannotAccessMyAccount": "Can not access my account", + "components.contact.close": "Close", "components.contact.disclaimer": "Please formulate your feedback providing as much useful information, as possible to help us understand your problem and solve it", "components.contact.email": "E-mail", "components.contact.foundBugOnSite": "I found a bug on the site", @@ -76,6 +77,7 @@ "components.contact.subject": "Subject", "components.contact.title": "Feedback form", "components.contact.whichQuestion": "What are you interested in?", + "components.contact.youMessageReceived": "Your message was received. We will respond to you shortly. The answer will come to your E-mail:", "components.footerMenu.contactUs": "Contact Us", "components.footerMenu.rules": "Rules", "components.langMenu.siteLanguage": "Site language", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 1933b92..996c763 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -64,6 +64,7 @@ "components.auth.resendActivation.specifyYourEmail": "Укажите здесь ваш регистрационный E-mail адрес, и мы вышлем на него новое письмо с кодом активации аккаунта", "components.auth.resendActivation.title": "Не получил письмо", "components.contact.cannotAccessMyAccount": "Не удаётся получить доступ к аккаунту", + "components.contact.close": "Закрыть", "components.contact.disclaimer": "Пожалуйста, формируйте свои обращения, предоставляя максимум полезной информации, чтобы мы могли как можно быстрее понять вашу проблему и решить её", "components.contact.email": "E‑mail", "components.contact.foundBugOnSite": "Я нашёл ошибку на сайте", @@ -76,6 +77,7 @@ "components.contact.subject": "Тема", "components.contact.title": "Форма обратной связи", "components.contact.whichQuestion": "По каком вопросу?", + "components.contact.youMessageReceived": "Ваше обращение в форму обратной связи получено. Мы ответим вам в ближайшее время. Ответ придёт на указанный вами E‑mail:", "components.footerMenu.contactUs": "Обратная связь", "components.footerMenu.rules": "Правила сайта", "components.langMenu.siteLanguage": "Язык сайта",