兩個填寫頁的送出回饋，以及元件Style (#166)

* adjust SubmitArea style * add success feedback * finish success feedback * finish FailFeedback * add `hasClose` props to Modal to decide if close button display * add facebook login fail feedback in submit area
goodjoblife · Jun 29, 2017 · 92f66fc · 92f66fc
1 parent 261be2f
commit 92f66fc
Show file tree

Hide file tree

Showing 7 changed files with 314 additions and 63 deletions.
diff --git a/src/components/ShareExperience/common/FacebookFail.js b/src/components/ShareExperience/common/FacebookFail.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Warning from 'common/icons/Warning';
+import Button from 'common/button/Button';
+
+const FacebookFail = ({ buttonClick }) => (
+  <div
+    style={{
+      padding: '55px',
+      width: '470px',
+    }}
+  >
+    <Warning
+      style={{
+        fill: '#FCD406',
+        height: '82px',
+        width: '82px',
+        marginBottom: '32px',
+      }}
+    />
+    <h2
+      style={{
+        fontSize: '2rem',
+        marginBottom: '19px',
+      }}
+    >
+      Facebook 登入失敗
+    </h2>
+    <p
+      style={{
+        marginBottom: '30px',
+      }}
+    >
+      為了避免使用者大量輸入假資訊，我們會以您的 Facebook 帳戶做驗證。但別擔心！您的帳戶資訊不會以任何形式被揭露、顯示。
+    </p>
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+    >
+      <Button
+        btnStyle="black"
+        circleSize="md"
+        onClick={buttonClick}
+      >
+        以 f 認證，送出資料
+      </Button>
+    </div>
+  </div>
+);
+
+FacebookFail.propTypes = {
+  buttonClick: PropTypes.func,
+};
+
+export default FacebookFail;
diff --git a/src/components/ShareExperience/common/FailFeedback.js b/src/components/ShareExperience/common/FailFeedback.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Warning from 'common/icons/Warning';
+import Button from 'common/button/Button';
+
+const FailFeedback = ({ buttonClick }) => (
+  <div
+    style={{
+      padding: '55px',
+      width: '470px',
+    }}
+  >
+    <Warning
+      style={{
+        fill: '#FCD406',
+        height: '82px',
+        width: '82px',
+        marginBottom: '32px',
+      }}
+    />
+    <h2
+      style={{
+        fontSize: '2rem',
+        marginBottom: '19px',
+      }}
+    >
+      Oops 有些錯誤發生
+    </h2>
+    <p
+      style={{
+        marginBottom: '30px',
+      }}
+    >
+      請查看你的網路連線再試一次，如果你還沒填寫完，請先別關閉瀏覽器！
+    </p>
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+    >
+      <Button
+        btnStyle="black"
+        circleSize="md"
+        onClick={buttonClick}
+      >
+        好，我知道了
+      </Button>
+    </div>
+  </div>
+);
+
+FailFeedback.propTypes = {
+  buttonClick: PropTypes.func,
+};
+
+export default FailFeedback;
diff --git a/src/components/ShareExperience/common/SubmitArea.js b/src/components/ShareExperience/common/SubmitArea.js
@@ -1,46 +1,121 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { browserHistory } from 'react-router';
 
 import ButtonSubmit from 'common/button/ButtonSubmit';
 import Checkbox from 'common/form/Checkbox';
+import Modal from 'common/Modal';
+
+import SuccessFeedback from './SuccessFeedback';
+import FailFeedback from './FailFeedback';
+import FacebookFail from './FacebookFail';
+
+const getSuccessFeedback = id => (
+  <SuccessFeedback
+    buttonClick={() => (
+      browserHistory.push(`/experiences/${id}`)
+    )}
+  />
+);
+
+const getFailFeedback = buttonClick => (
+  <FailFeedback
+    buttonClick={buttonClick}
+  />
+);
+
+const getFacebookFail = buttonClick => (
+  <FacebookFail
+    buttonClick={buttonClick}
+  />
+);
 
 class SubmitArea extends React.PureComponent {
   constructor(props) {
     super(props);
 
     this.handleAgree = this.handleAgree.bind(this);
+    this.handleIsOpen = this.handleIsOpen.bind(this);
+    this.handleFeedback = this.handleFeedback.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.login = this.login.bind(this);
+    this.onFacebookFail = this.onFacebookFail.bind(this);
 
     this.state = {
       agree: false,
+      isOpen: false,
+      feedback: null,
     };
   }
 
+
+  onSubmit() {
+    return this.props.onSubmit()
+      .then(r => r.experience._id)
+      .then(id => {
+        this.handleIsOpen(true);
+        return this.handleFeedback(getSuccessFeedback(id));
+      })
+      .catch(() => {
+        this.handleIsOpen(true);
+        return this.handleFeedback(getFailFeedback(
+          () => this.handleIsOpen(false)
+        ));
+      });
+  }
+
+  onFacebookFail() {
+    this.handleIsOpen(true);
+    return this.handleFeedback(getFacebookFail(this.login));
+  }
+
+  login() {
+    return this.props.login(this.props.FB)
+      .then(status => {
+        if (status === 'connected') {
+          return this.onSubmit();
+        }
+
+        throw Error('can not login');
+      })
+      .catch(this.onFacebookFail);
+  }
   handleAgree(agree) {
     this.setState(() => ({
       agree,
     }));
   }
 
+  handleFeedback(feedback) {
+    this.setState(() => ({
+      feedback,
+    }));
+  }
+
+  handleIsOpen(isOpen) {
+    this.setState(() => ({
+      isOpen,
+    }));
+  }
+
   render() {
     const {
-      onSubmit,
       submitable,
       auth,
-      login,
-      FB,
     } = this.props;
 
     const {
       agree,
+      isOpen,
+      feedback,
     } = this.state;
 
     return (
       <div
         style={{
           display: 'flex',
           flexDirection: 'column',
-          alignItems: 'center',
           marginTop: '57px',
         }}
       >
@@ -71,13 +146,19 @@ class SubmitArea extends React.PureComponent {
         <div>
           <ButtonSubmit
             text="送出資料"
-            onSubmit={onSubmit}
+            onSubmit={this.onSubmit}
             disabled={!this.state.agree || !submitable}
             auth={auth}
-            login={login}
-            FB={FB}
+            login={this.login}
           />
         </div>
+        <Modal
+          isOpen={isOpen}
+          close={() => this.handleIsOpen(!isOpen)}
+          hasClose={false}
+        >
+          {feedback}
+        </Modal>
       </div>
     );
   }

diff --git a/src/components/ShareExperience/common/SuccessFeedback.js b/src/components/ShareExperience/common/SuccessFeedback.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Checked from 'common/icons/Checked';
+import Button from 'common/button/Button';
+
+const SuccessFeedback = ({ buttonClick }) => (
+  <div
+    style={{
+      padding: '55px',
+      width: '470px',
+    }}
+  >
+    <Checked
+      style={{
+        fill: '#FCD406',
+        height: '82px',
+        width: '82px',
+        marginBottom: '32px',
+      }}
+    />
+    <h2
+      style={{
+        fontSize: '2rem',
+        marginBottom: '47px',
+      }}
+    >
+      上傳成功
+    </h2>
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+    >
+      <Button
+        btnStyle="black"
+        circleSize="md"
+        onClick={buttonClick}
+      >
+        查看本篇
+      </Button>
+    </div>
+  </div>
+);
+
+SuccessFeedback.propTypes = {
+  buttonClick: PropTypes.func,
+};
+
+export default SuccessFeedback;
diff --git a/src/components/common/Modal.js b/src/components/common/Modal.js
@@ -6,20 +6,23 @@ import Cross from '../images/x.svg';
 
 import styles from './Modal.module.css';
 
-const Modal = ({ children, isOpen, close }) => (
+const Modal = ({ children, isOpen, hasClose, close }) => (
   <div
     className={
       cn(styles.modal, { [styles.isOpen]: isOpen })
     }
   >
     <div className={styles.inner}>
       <div className={styles.content}>
-        <div className={styles.close}>
-          <Cross
-            className={styles.close__icon}
-            onClick={close}
-          />
-        </div>
+        {
+          hasClose ?
+            <div className={styles.close}>
+              <Cross
+                className={styles.close__icon}
+                onClick={close}
+              />
+            </div> : null
+        }
         {children}
       </div>
     </div>
@@ -29,7 +32,12 @@ const Modal = ({ children, isOpen, close }) => (
 Modal.propTypes = {
   children: PropTypes.node,
   isOpen: PropTypes.bool,
+  hasClose: PropTypes.bool,
   close: PropTypes.func,
 };
 
+Modal.defaultProps = {
+  hasClose: true,
+};
+
 export default Modal;