added request code dialog

src/containers/dialogs/RestoreRequestDialog/index.tsx

@@ -1,33 +1,101 @@
-import React, { FC, useState, useMemo, useCallback } from 'react';
+import React, { FC, useState, useMemo, useCallback, useEffect } from 'react';
 import { IDialogProps } from '~/redux/types';
 import { connect } from 'react-redux';
 import { BetterScrollDialog } from '../BetterScrollDialog';
 import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
 import { Button } from '~/components/input/Button';
+import styles from './styles.scss';
 
-const mapStateToProps = () => ({});
-const mapDispatchToProps = {};
+import * as AUTH_ACTIONS from '~/redux/auth/actions';
+import pick from 'ramda/es/pick';
+import { selectAuthRestore } from '~/redux/auth/selectors';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { ERROR_LITERAL } from '~/constants/errors';
+import { Icon } from '~/components/input/Icon';
+
+const mapStateToProps = state => ({
+  restore: selectAuthRestore(state),
+});
+
+const mapDispatchToProps = pick(['authRequestRestoreCode', 'authSetRestore'], AUTH_ACTIONS);
 
 type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const RestoreRequestDialogUnconnected: FC<IProps> = ({}) => {
+const RestoreRequestDialogUnconnected: FC<IProps> = ({
+  restore: { error, is_loading, is_succesfull },
+  authSetRestore,
+  onRequestClose,
+  authRequestRestoreCode,
+}) => {
   const [field, setField] = useState();
 
-  const onSubmit = useCallback(event => {
-    event.preventDefault();
-  }, []);
+  const onSubmit = useCallback(
+    event => {
+      event.preventDefault();
 
-  const buttons = useMemo(() => <Button>Восстановить</Button>, []);
+      if (!field) return;
+
+      authRequestRestoreCode(field);
+    },
+    [authRequestRestoreCode, field]
+  );
+
+  useEffect(() => {
+    if (error || is_succesfull) {
+      authSetRestore({ error: null, is_succesfull: false });
+    }
+  }, [field]);
+
+  const buttons = useMemo(
+    () => (
+      <Group className={styles.buttons}>
+        <Button>Восстановить</Button>
+      </Group>
+    ),
+    []
+  );
+
+  const header = useMemo(() => <div className={styles.illustration}>ILLUSTRATE ME</div>, []);
+
+  const overlay = useMemo(
+    () =>
+      is_succesfull ? (
+        <Group className={styles.shade}>
+          <Icon icon="check" size={64} />
+
+          <div>Проверьте почту, мы отправили на неё код</div>
+
+          <div />
+
+          <Button color="secondary" onClick={onRequestClose}>
+            Отлично!
+          </Button>
+        </Group>
+      ) : null,
+    [is_succesfull]
+  );
 
   return (
     <form onSubmit={onSubmit}>
-      <BetterScrollDialog footer={buttons}>
-        <Group>
-          <InputText title="Имя или email" value={field} handler={setField} />
+      <BetterScrollDialog
+        header={header}
+        footer={buttons}
+        width={300}
+        onClose={onRequestClose}
+        is_loading={is_loading}
+        error={error && ERROR_LITERAL[error]}
+        overlay={overlay}
+      >
+        <div className={styles.wrap}>
+          <Group>
+            <InputText title="Имя или email" value={field} handler={setField} autoFocus />
 
-          <div>Введите имя пользователя или адрес почты. Мы пришлем ссылку для сброса пароля.</div>
-        </Group>
+            <div className={styles.text}>
+              Введите имя пользователя или адрес почты. Мы пришлем ссылку для сброса пароля.
+            </div>
+          </Group>
+        </div>
       </BetterScrollDialog>
     </form>
   );

src/containers/dialogs/RestoreRequestDialog/styles.scss

@@ -0,0 +1,47 @@
+.wrap {
+  padding: $gap $gap $gap * 4;
+}
+
+.buttons {
+  padding: $gap;
+}
+
+.text {
+  font: $font_14_regular;
+  padding: $gap;
+  color: darken(white, 50%);
+}
+
+.illustration {
+  min-height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_18_semibold;
+}
+
+.shade {
+  @include outer_shadow();
+
+  background: $content_bg;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius;
+  padding: $gap * 2;
+  box-sizing: border-box;
+  text-transform: uppercase;
+  font: $font_18_semibold;
+  text-align: center;
+  color: $wisegreen;
+
+  svg {
+    fill: $wisegreen;
+  }
+}