Add new message when camper is certified

common/app/routes/Jobs/components/Show.jsx

@@ -1,4 +1,4 @@
-import React, { createClass } from 'react';
+import React, { PropTypes } from 'react';
 import { History } from 'react-router';
 import { contain } from 'thundercats-react';
 
@@ -6,7 +6,7 @@ import ShowJob from './ShowJob.jsx';
 import JobNotFound from './JobNotFound.jsx';
 import { isJobValid } from '../utils';
 
-function shouldShowJob(
+function shouldShowApply(
   {
     isFrontEndCert: isFrontEndCertReq = false,
     isFullStackCert: isFullStackCertReq = false
@@ -22,9 +22,12 @@ function shouldShowJob(
 
 function generateMessage(
   {
-    isFrontEndCert: isFrontEndCertReq = false
+    isFrontEndCert: isFrontEndCertReq = false,
-  }, {
+    isFullStackCert: isFullStackCertReq = false
+  },
+  {
     isFrontEndCert = false,
+    isFullStackCert = false,
     isSignedIn = false
   }
 ) {
@@ -33,9 +36,19 @@ function generateMessage(
     return 'Must be signed in to apply';
   }
   if (isFrontEndCertReq && !isFrontEndCert) {
-    return 'You must earn your Full Stack Certification to apply';
+    return 'This employer requires Free Code Camp’s Front ' +
+      'End Development Certification in order to apply';
   }
-  return 'You must earn your Front End Certification to apply';
+  if (isFullStackCertReq && !isFullStackCert) {
+    return 'This employer requires Free Code Camp’s Full ' +
+      'Stack Development Certification in order to apply';
+  }
+  if (isFrontEndCertReq && isFrontEndCertReq) {
+    return 'This employer requires the Front End Development Certification. ' +
+      "You've earned it, so feel free to apply.";
+  }
+  return 'This employer requires the Full Stack Development Certification. ' +
+    "You've earned it, so feel free to apply.";
 }
 
 export default contain(
@@ -66,9 +79,16 @@ export default contain(
       return job.id !== id;
     }
   },
-  createClass({
+  React.createClass({
     displayName: 'Show',
 
+    propTypes: {
+      job: PropTypes.object,
+      isFullStackCert: PropTypes.bool,
+      isFrontEndCert: PropTypes.bool,
+      username: PropTypes.string
+    },
+
     mixins: [History],
 
     componentDidMount() {
@@ -86,15 +106,28 @@ export default contain(
         job,
         username
       } = this.props;
-      const isSignedIn = !!username;
 
       if (!isJobValid(job)) {
         return <JobNotFound />;
       }
+
+      const isSignedIn = !!username;
+
+      const showApply = shouldShowApply(
+        job,
+        { isFrontEndCert, isFullStackCert }
+      );
+
+      const message = generateMessage(
+        job,
+        { isFrontEndCert, isFullStackCert, isSignedIn }
+      );
+
       return (
         <ShowJob
-          message={ generateMessage(job, { isFrontEndCert, isSignedIn }) }
+          message={ message }
-          showApply={ shouldShowJob(job, { isFrontEndCert, isFullStackCert }) }
+          preview={ false }
+          showApply={ showApply }
           { ...this.props }/>
       );
     }

common/app/routes/Jobs/components/ShowJob.jsx

@@ -24,6 +24,7 @@ export default React.createClass({
     job: PropTypes.object,
     params: PropTypes.object,
     showApply: PropTypes.bool,
+    preview: PropTypes.bool,
     message: PropTypes.string
   },
 
@@ -40,14 +41,14 @@ export default React.createClass({
     );
   },
 
-  renderHowToApply(showApply, message, howToApply) {
+  renderHowToApply(showApply, preview, message, howToApply) {
     if (!showApply) {
       return (
         <Row>
             <Col
               md={ 6 }
               mdOffset={ 3 }>
-              <h4 className='bg-danger text-center'>{ message }</h4>
+                <h4 className='bg-info text-center'>{ message }</h4>
             </Col>
         </Row>
       );
@@ -58,12 +59,14 @@ export default React.createClass({
           <Col
             md={ 6 }
             mdOffset={ 3 }>
-              <bold>How do I apply?</bold>
+            <Well>
+              <bold>{ preview ? 'How do I apply?' : message }</bold>
               <br />
               <br />
               <span dangerouslySetInnerHTML={{
                 __html: addATags(howToApply)
               }} />
+            </Well>
           </Col>
         </Row>
     );
@@ -71,8 +74,9 @@ export default React.createClass({
 
   render() {
     const {
-      showApply,
+      showApply = true,
       message,
+      preview = true,
       job = {}
     } = this.props;
 
@@ -129,9 +133,7 @@ export default React.createClass({
                   <p>{ description }</p>
                 </Col>
               </Row>
-              <Well>
+              { this.renderHowToApply(showApply, preview, message, howToApply) }
-                { this.renderHowToApply(showApply, message, howToApply) }
-              </Well>
             </Panel>
           </Col>
         </Row>