Merge pull request #237 from grant-project/milestone-validation

Better Milestone Validation

frontend/client/components/CreateFlow/Milestones.tsx

@@ -19,7 +19,7 @@ const DEFAULT_STATE: State = {
       title: '',
       content: '',
       dateEstimated: moment().unix(),
-      payoutPercent: '100',
+      payoutPercent: '',
       immediatePayout: false,
     },
   ],
@@ -52,19 +52,7 @@ export default class CreateFlowMilestones extends React.Component<Props, State>
 
   addMilestone = () => {
     const { milestones: oldMilestones } = this.state;
-    const lastMilestone = oldMilestones[oldMilestones.length - 1];
+    const milestones = [...oldMilestones, { ...DEFAULT_STATE.milestones[0] }];
-    const halfPayout = parseInt(lastMilestone.payoutPercent, 10) / 2;
-    const milestones = [
-      ...oldMilestones,
-      {
-        ...DEFAULT_STATE.milestones[0],
-        payoutPercent: halfPayout.toString(),
-      },
-    ];
-    milestones[milestones.length - 2] = {
-      ...lastMilestone,
-      payoutPercent: halfPayout.toString(),
-    };
     this.setState({ milestones });
   };
 
@@ -124,7 +112,7 @@ const MilestoneFields = ({
     <div style={{ display: 'flex', marginBottom: '0.5rem', alignItems: 'center' }}>
       <Input
         size="large"
-        placeholder="Title"
+        placeholder="Milestone title"
         type="text"
         name="title"
         value={milestone.title}
@@ -147,7 +135,7 @@ const MilestoneFields = ({
       <Input.TextArea
         rows={3}
         name="content"
-        placeholder="Description of the deliverable"
+        placeholder="Description of what will be delivered"
         value={milestone.content}
         onChange={ev =>
           onChange(index, { ...milestone, content: ev.currentTarget.value })
@@ -176,14 +164,12 @@ const MilestoneFields = ({
         }
       />
       <Input
-        min={1}
-        max={100}
-        type="number"
         value={milestone.payoutPercent}
+        placeholder="Payout"
         onChange={ev =>
           onChange(index, {
             ...milestone,
-            payoutPercent: ev.currentTarget.value || '0',
+            payoutPercent: ev.currentTarget.value,
           })
         }
         addonAfter="%"

frontend/client/components/CreateFlow/Review.less

@@ -71,6 +71,10 @@
   &-title {
     font-size: 1.4rem;
     margin: 0 0 0.3rem;
+
+    em {
+      opacity: 0.7;
+    }
   }
 
   &-info {
@@ -82,6 +86,10 @@
 
   &-description {
     font-size: 1rem;
+
+    em {
+      opacity: 0.7;
+    }
   }
 }
 

frontend/client/components/CreateFlow/Review.tsx

@@ -180,13 +180,15 @@ const ReviewMilestones = ({
     {milestones.map(m => (
       <Timeline.Item key={m.title}>
         <div className="ReviewMilestone">
-          <div className="ReviewMilestone-title">{m.title}</div>
+          <div className="ReviewMilestone-title">{m.title || <em>No title</em>}</div>
           <div className="ReviewMilestone-info">
             {moment(m.dateEstimated * 1000).format('MMMM YYYY')}
             {' – '}
             {m.payoutPercent}% of funds
           </div>
-          <div className="ReviewMilestone-description">{m.content}</div>
+          <div className="ReviewMilestone-description">
+            {m.content || <em>No description</em>}
+          </div>
         </div>
       </Timeline.Item>
     ))}

frontend/client/components/CreateFlow/index.tsx

@@ -79,7 +79,7 @@ const STEP_INFO: { [key in CREATE_STEP]: StepInfo } = {
     title: 'Set up milestones for deliverables',
     subtitle: 'Make a timeline of when you’ll complete tasks, and receive funds',
     help:
-      'Contributors are more willing to fund proposals with funding spread across multiple deadlines',
+      'Contributors are more willing to fund proposals with funding spread across multiple milestones',
     component: Milestones,
   },
   [CREATE_STEP.PAYMENT]: {

frontend/client/modules/create/utils.ts

@@ -96,31 +96,42 @@ export function getCreateErrors(
 
   // Milestones
   if (milestones) {
-    let didMilestoneError = false;
     let cumulativeMilestonePct = 0;
     const milestoneErrors = milestones.map((ms, idx) => {
-      if (!ms.title || !ms.content || !ms.dateEstimated || !ms.payoutPercent) {
+      if (!ms.title) {
-        didMilestoneError = true;
+        return 'Title is required';
-        return '';
+      } else if (ms.title.length > 40) {
+        return 'Title length can only be 40 characters maximum';
       }
 
-      let err = '';
+      if (!ms.content) {
-      if (ms.title.length > 40) {
+        return 'Description is required';
-        err = 'Title length can only be 40 characters maximum';
       } else if (ms.content.length > 200) {
-        err = 'Description can only be 200 characters maximum';
+        return 'Description can only be 200 characters maximum';
+      }
+
+      if (!ms.dateEstimated) {
+        return 'Estimate date is required';
+      }
+
+      if (!ms.payoutPercent) {
+        return 'Payout percent is required';
+      } else if (Number.isNaN(parseInt(ms.payoutPercent, 10))) {
+        return 'Payout percent must be a valid number';
       }
 
       // Last one shows percentage errors
       cumulativeMilestonePct += parseInt(ms.payoutPercent, 10);
-      if (idx === milestones.length - 1 && cumulativeMilestonePct !== 100) {
+      if (
-        err = `Payout percentages doesn’t add up to 100% (currently ${cumulativeMilestonePct}%)`;
+        idx === milestones.length - 1 &&
+        cumulativeMilestonePct !== 100 &&
+        !Number.isNaN(cumulativeMilestonePct)
+      ) {
+        return `Payout percentages don’t add up to 100% (currently ${cumulativeMilestonePct}%)`;
       }
-
+      return '';
-      didMilestoneError = didMilestoneError || !!err;
-      return err;
     });
-    if (didMilestoneError) {
+    if (milestoneErrors.find(err => !!err)) {
       errors.milestones = milestoneErrors;
     }
   }