Initial skeleton of GIBCT

config/webpack.config.js

@@ -16,6 +16,7 @@ const entryFiles = {
   'disability-benefits': './src/js/disability-benefits/disability-benefits-entry.jsx',
   'edu-benefits': './src/js/edu-benefits/edu-benefits-entry.jsx',
   facilities: './src/js/facility-locator/facility-locator-entry.jsx',
+  gi: './src/js/gi/gi-entry.jsx',
   hca: './src/js/hca/hca-entry.jsx',
   'blue-button': './src/js/blue-button/blue-button-entry.jsx',
   messaging: './src/js/messaging/messaging-entry.jsx',

content/pages/gi-bill-comparison-tool/index.md

@@ -0,0 +1,15 @@
+---
+title: GI Bill Comparison Tool
+layout: page-react.html
+entryname: gi
+---
+<div id="main">
+  <div class="section">
+    <div id="react-root">
+      <div class="loading-message">
+        <h3>Please wait while we load the application for you.</h3>
+        <img src="/img/preloader-primary-darkest.gif" alt="Loading">
+      </div>
+    </div>
+  </div>
+</div>

humans.txt

@@ -20,3 +20,4 @@
 - Emily Tavoulareas
 - Richard Wheeler, @richarduwheeler
 - Emily Wright, @emilyville
+- Ben Damman, @typesend

script/build.js

@@ -112,6 +112,7 @@ const ignore = require('metalsmith-ignore');
 const ignoreList = [];
 if (options.buildtype === 'production') {
   ignoreList.push('healthcare/blue-button/*');
+  ignoreList.push('gi-bill-comparison-tool/*');
 }
 smith.use(ignore(ignoreList));
 
@@ -151,6 +152,7 @@ if (options.watch) {
         { from: '^/disability-benefits/track-claims(.*)', to: '/disability-benefits/track-claims/' },
         { from: '^/education/apply-for-education-benefits/application(.*)', to: '/education/apply-for-education-benefits/application/' },
         { from: '^/facilities(.*)', to: '/facilities/' },
+        { from: '^/gi-bill-comparison-tool(.*)', to: '/gi-bill-comparison-tool/' },
         { from: '^/healthcare/apply/application(.*)', to: '/healthcare/apply/application/' },
         { from: '^/healthcare/blue-button(.*)', to: '/healthcare/blue-button/' },
         { from: '^/healthcare/messaging(.*)', to: '/healthcare/messaging/' },

src/js/common/components/Modal.jsx

@@ -74,7 +74,7 @@ class Modal extends React.Component {
           {title}
           {closeButton}
           <div className="va-modal-body">
-            {this.props.contents}
+            {this.props.contents || this.props.children}
           </div>
         </div>
       </div>
@@ -83,7 +83,7 @@ class Modal extends React.Component {
 }
 
 Modal.propTypes = {
-  contents: React.PropTypes.node.isRequired,
+  contents: React.PropTypes.node, /* alternatively used child nodes */
   cssClass: React.PropTypes.string,
   id: React.PropTypes.string,
   onClose: React.PropTypes.func.isRequired,

src/js/gi/actions/index.js

@@ -0,0 +1,17 @@
+// import { api } from '../config';
+
+export const DISPLAY_MODAL = 'DISPLAY_MODAL';
+
+export function displayModal(modal) {
+  return {
+    type: DISPLAY_MODAL,
+    modal
+  };
+}
+
+export function closeModal() {
+  return {
+    type: DISPLAY_MODAL,
+    modal: null
+  };
+}

src/js/gi/components/AboutThisTool.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+// TODO: fix tracking onClicks?
+class AboutThisTool extends React.Component {
+  render() {
+    return (
+      <div className="row">
+        <div className="center columns about-this-tool">
+          <a href="http://www.benefits.va.gov/gibill/comparison_tool/about_this_tool.asp" target="_blank">About this Tool</a>
+          <a href="http://www.benefits.va.gov/GIBILL/docs/job_aids/ComparisonToolData.xlsx">Download Data on All Schools (Excel)</a>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AboutThisTool;

src/js/gi/components/Breadcrumbs.jsx

@@ -0,0 +1,37 @@
+import { Link, browserHistory } from 'react-router';
+import React from 'react';
+
+class Breadcrumbs extends React.Component {
+  render() {
+    const { location: { pathname } } = this.props;
+
+    const crumbs = [
+      <a href="/" key="home">Home</a>,
+      <a href="/education" key="education">Education Benefits</a>,
+      <a href="/education/gi-bill" key="gi-bill">GI Bill</a>,
+    ];
+
+    if (pathname.match(/search|profile/)) {
+      crumbs.push(<Link to="/" key="main">GI Bill Comparison Tool</Link>);
+    } else {
+      crumbs.push(<span key="gibct"><strong>GI Bill Comparison Tool</strong></span>);
+    }
+
+    if (pathname.match(/search\/?$/)) {
+      crumbs.push(<span key="search-results"><strong>Search Results</strong></span>);
+    }
+
+    if (pathname.match(/profile/)) {
+      if (true) { // TODO: if got here by searching
+        crumbs.push(<a onClick={browserHistory.goBack} key="search-results">Search Results</a>);
+      }
+      crumbs.push(<span key="profile"><strong>Profile</strong></span>); // TODO: Replace with name of school
+    }
+
+    return (<div className="gi-breadcrumbs">
+      {crumbs.reduce((content, e) => { return [...content, ' › ', e]; }, []).slice(1)}
+    </div>);
+  }
+}
+
+export default Breadcrumbs;

src/js/gi/components/PreviewBanner.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+class PreviewBanner extends React.Component {
+  render() {
+    if (!this.props.show) {
+      return null;
+    }
+
+    const headerDisplacementCSS = `
+      div.header {
+        margin-top: 4em;
+      }
+    `;
+
+    return (
+      <div className="gi-preview-banner">
+        <style>{headerDisplacementCSS}</style>
+        <div className="outer"/>
+        <div className="inner">
+          <h5>Preview draft</h5>
+          <p>
+            This is what the version of this data from {this.props.dataVersion} will look like.
+            &nbsp;<a href={this.props.toolURL}>Go back to the data tool.</a>
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
+
+PreviewBanner.propTypes = {
+  show: React.PropTypes.bool.isRequired,
+  dataVersion: React.PropTypes.string.isRequired,
+};
+
+PreviewBanner.defaultProps = {
+  dataVersion: 'Jan 7, 2016 at 11:33 a.m.',
+  toolURL: 'http://www.usds.gov'
+};
+
+export default PreviewBanner;

src/js/gi/components/VideoSidebar.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+class VideoSidebar extends React.Component {
+  render() {
+    return (
+      <div className="video-sidebar">
+        <h4>What's your plan?</h4>
+        <p>
+          Transitioning to civilian life takes preparation, research, planning, and the right tools.
+          We're here to help you make the right decisions on where to use your hard earned benefits!
+        </p>
+        <iframe width="100%" src="https://www.youtube.com/embed/Z1ttkv9oRI4"
+            title="Know Before You Go" frameBorder="0" allowFullScreen></iframe>
+      </div>
+    );
+  }
+}
+
+export default VideoSidebar;

src/js/gi/config.jsx

@@ -0,0 +1,21 @@
+import environment from '../common/helpers/environment';
+
+// Temporary hack to use GIDS on localhost directly
+// (instead of vets-api)
+function getAPIUrl(useLocalGidsURL) {
+  const localGidsApiURL = 'http://localhost:5000';
+  const it = useLocalGidsURL ? localGidsApiURL : `${environment.API_URL}/v0/gi`;
+  return it;
+}
+
+module.exports = {
+  // Base URL to be used in API requests.
+  api: {
+    url: getAPIUrl(true),
+    settings: {
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    }
+  }
+};

src/js/gi/containers/GiBillApp.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Modals from '../containers/Modals';
+import PreviewBanner from '../components/PreviewBanner';
+import Breadcrumbs from '../components/Breadcrumbs';
+import AboutThisTool from '../components/AboutThisTool';
+
+function AppContent({ children, isDataAvailable }) {
+  const unregistered = isDataAvailable === false;
+  let view;
+
+  if (unregistered) {
+    view = (
+      <div className="row">
+        <div className="columns">
+          <h4>
+            Placeholder message when data is not available
+          </h4>
+        </div>
+      </div>
+    );
+  } else {
+    view = children;
+  }
+
+  return <div className="gi-app">{view}</div>;
+}
+
+// TODO: Why does this not appear as part of the footer include?
+const Disclaimer = () => {
+  return (
+    <div className="row disclaimer">
+      <p>Please note: Content on this Web page is for informational purposes only. It is not intended to provide legal advice or to be a comprehensive statement or analysis of applicable statutes, regulations, and case law governing this topic. Rather, it’s a plain-language summary. If you are seeking claims assistance, your local VA regional office, a VA-recognized Veterans Service Organization, or a VA-accredited attorney or agent can help. <a target="_blank" href="http://www.va.gov/ogc/apps/accreditation/index.asp">Search Accredited Attorneys, Claims Agents, or Veterans Service Organizations (VSO) Representatives</a>.</p>
+    </div>
+  );
+};
+
+class GiBillApp extends React.Component {
+  render() {
+    return (
+      <AppContent>
+        <div>
+          <div className="row">
+            <div className="columns small-12">
+              <PreviewBanner show={!!this.props.location.query.preview}/>
+              <Breadcrumbs location={this.props.location}/>
+              {this.props.children}
+              <AboutThisTool/>
+              <Disclaimer/>
+              <Modals/>
+            </div>
+          </div>
+        </div>
+      </AppContent>
+    );
+  }
+}
+
+GiBillApp.propTypes = {
+  children: React.PropTypes.element
+};
+
+const mapStateToProps = (state) => state;
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GiBillApp);

src/js/gi/containers/LandingPage.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import * as actions from '../actions';
+import VideoSidebar from '../components/VideoSidebar';
+
+export class LandingPage extends React.Component {
+
+  renderPageTitle() {
+    document.title = 'GI Bill Comparison Tool: Vets.gov';
+  }
+
+  render() {
+    this.renderPageTitle();
+    return (
+      <span className="landing-page">
+        <div className="row">
+          <form action="/gi-bill-comparison-tool/institutions/search">
+
+            <div className="small-12 medium-8 columns">
+              <h1>GI Bill Comparison Tool</h1>
+              <p className="subheading">Learn about education programs and compare estimated benefits by school.</p>
+
+              <h6>Form Elements Go Here</h6>
+            </div>
+
+            <div className="small-12 medium-4 columns">
+              <VideoSidebar/>
+            </div>
+
+          </form>
+        </div>
+      </span>
+    );
+  }
+}
+
+const mapStateToProps = (state) => state;
+const mapDispatchToProps = (dispatch) => {
+  return {
+    showModal: (name) => {
+      dispatch(actions.displayModal(name));
+    },
+    hideModal: () => {
+      dispatch(actions.displayModal(null));
+    }
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(LandingPage);