Workflow Improvements (#78)

* refresh proposal creation view when user has unverified email

* add info icon & tooltip to payout immediatly

* replace “Title” with “About You” on signup

* add review to stepper, use "Review" on final stage of proposal

* update buttons in email verify success view

* add an optional team member

frontend/client/components/AuthFlow/SignUp.tsx

@@ -41,7 +41,7 @@ class SignUp extends React.Component<Props> {
               )}
             </Form.Item>
 
-            <Form.Item className="SignUp-form-item" label="Title">
+            <Form.Item className="SignUp-form-item" label="About you">
               {getFieldDecorator('title', {
                 rules: [{ required: true, message: 'Please add your title' }],
               })(

frontend/client/components/CreateFlow/Milestones.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, Input, Card, Icon, Alert, Checkbox, Button } from 'antd';
+import { Form, Input, Card, Icon, Alert, Checkbox, Button, Tooltip } from 'antd';
 import { ProposalDraft, CreateMilestone } from 'types';
 import { getCreateErrors } from 'modules/create/utils';
 
@@ -77,7 +77,6 @@ export default class CreateFlowMilestones extends React.Component<Props, State>
             milestone={milestone}
             index={idx}
             error={errors.milestones && errors.milestones[idx]}
-
             onChange={this.handleMilestoneChange}
             onRemove={this.removeMilestone}
           />
@@ -151,13 +150,12 @@ const MilestoneFields = ({
         value={milestone.daysEstimated}
         disabled={milestone.immediatePayout}
         placeholder="Estimated days to complete"
-        onChange={ev =>{
+        onChange={ev => {
           return onChange(index, {
             ...milestone,
-            daysEstimated: ev.currentTarget.value
-          })
-        }
-        }
+            daysEstimated: ev.currentTarget.value,
+          });
+        }}
         addonAfter="days"
         style={{ flex: 1, marginRight: '0.5rem' }}
         maxLength={6}
@@ -188,6 +186,9 @@ const MilestoneFields = ({
           >
             <span style={{ opacity: 0.7 }}>Payout Immediately</span>
           </Checkbox>
+          <Tooltip title="Allows the milestone to be paid out immediatly if the proposal is accepted with funding.">
+            <Icon type="info-circle" style={{fontSize: '16px'}} />
+          </Tooltip>
         </div>
       )}
     </div>

frontend/client/components/CreateFlow/Team.tsx

@@ -81,7 +81,7 @@ class CreateFlowTeam extends React.Component<Props, State> {
           </div>
         )}
         <div className="TeamForm-add">
-          <h3 className="TeamForm-add-title">Add a team member</h3>
+          <h3 className="TeamForm-add-title">Add an optional team member</h3>
           <Form className="TeamForm-add-form" onSubmit={this.handleAddSubmit}>
             <Form.Item
               className="TeamForm-add-form-field"

frontend/client/components/CreateFlow/index.tsx

@@ -183,7 +183,8 @@ class CreateFlow extends React.Component<Props, State> {
 
     const info = STEP_INFO[step];
     const currentIndex = STEP_ORDER.indexOf(step);
-    const isLastStep = STEP_ORDER.indexOf(step) === STEP_ORDER.length - 1;
+    const isLastStep = currentIndex === STEP_ORDER.length - 1;
+    const isSecondToLastStep = currentIndex === STEP_ORDER.length - 2;
     const StepComponent = info.component;
 
     let content;
@@ -203,7 +204,7 @@ class CreateFlow extends React.Component<Props, State> {
         <div className="CreateFlow">
           <div className="CreateFlow-header">
             <Steps current={currentIndex}>
-              {STEP_ORDER.slice(0, 6).map(s => (
+              {STEP_ORDER.map(s => (
                 <Step
                   key={s}
                   title={STEP_INFO[s].short}
@@ -258,7 +259,7 @@ class CreateFlow extends React.Component<Props, State> {
                   key="next"
                   onClick={this.nextStep}
                 >
-                  Continue <Icon type="right-circle-o" />
+                  {isSecondToLastStep ? 'Review' : 'Continue' } <Icon type="right-circle-o" />
                 </button>
               </>
             )}

frontend/client/components/DraftList/index.tsx

@@ -44,13 +44,17 @@ interface State {
   deletingId: number | null;
 }
 
+const EMAIL_VERIFIED_RELOAD_TIMEOUT = 10000;
+
 class DraftList extends React.Component<Props, State> {
   state: State = {
     deletingId: null,
   };
 
+  private reloadTimeout: number | null = null;
+
   componentDidMount() {
-    const { createIfNone, createWithRfpId } = this.props;
+    const { createIfNone, createWithRfpId, isVerified } = this.props;
     if (createIfNone || createWithRfpId) {
       this.props.fetchAndCreateDrafts({
         rfpId: createWithRfpId,
@@ -59,6 +63,18 @@ class DraftList extends React.Component<Props, State> {
     } else {
       this.props.fetchDrafts();
     }
+
+    if (!isVerified) {
+      this.reloadTimeout = window.setTimeout(() => {
+        window.location.reload();
+      }, EMAIL_VERIFIED_RELOAD_TIMEOUT);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.reloadTimeout !== null) {
+      window.clearTimeout(this.reloadTimeout);
+    }
   }
 
   componentDidUpdate(prevProps: Props) {

frontend/client/pages/email-verify.tsx

@@ -51,14 +51,14 @@ class VerifyEmail extends React.Component<RouteComponentProps, State> {
 
     const actions = (
       <div>
-        <Link to="/profile">
+        <Link to="/create">
           <Button size="large" type="primary">
-            View profile
+            Start a proposal
           </Button>
         </Link>
-        <Link to="/proposals">
+        <Link to="/create-request">
           <Button size="large" style={{ marginLeft: '0.5rem' }}>
-            Browse proposals
+            Create a request
           </Button>
         </Link>
       </div>