Завёрстан попап для успешного состояния формы обратной связи

src/components/contact/ContactForm.jsx

@@ -37,7 +37,7 @@ class ContactForm extends Component {
         const {onClose} = this.props;
 
         return (
-            <div className={styles.contactForm}>
+            <div className={isSuccessfullySent ? styles.successState : styles.contactForm}>
                 <div className={popupStyles.popup}>
                     <div className={popupStyles.header}>
                         <h2 className={popupStyles.headerTitle}>
@@ -46,10 +46,7 @@ class ContactForm extends Component {
                         <span className={classNames(icons.close, popupStyles.close)} onClick={onClose} />
                     </div>
 
-                    {isSuccessfullySent
-                        ? (<div>Hello world<Button onClick={onClose} label="Close" /></div>)
-                        : this.renderForm()
-                    }
+                    {isSuccessfullySent ? this.renderSuccess() : this.renderForm()}
                 </div>
             </div>
         );
@@ -116,6 +113,28 @@ class ContactForm extends Component {
         );
     }
 
+    renderSuccess() {
+        const {form} = this;
+        const email = form.value('email');
+        const {onClose} = this.props;
+
+        return (
+            <div>
+                <div className={styles.successBody}>
+                    <span className={styles.successIcon} />
+                    <div className={styles.successDescription}>
+                        <Message {...messages.youMessageReceived} />
+                    </div>
+                    <div className={styles.sentToEmail}>{email}</div>
+                </div>
+
+                <div className={styles.footer}>
+                    <Button label={messages.close} block onClick={onClose} />
+                </div>
+            </div>
+        );
+    }
+
     onSubmit = () => {
         feedback(this.form.serialize())
             .then(() => this.setState({isSuccessfullySent: true}))

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"
 }

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;
 }

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 {

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": "Мова сайта",

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",

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": "Язык сайта",