Merge branch 'main' into tk/edm-455

src/applications/gi/routes.jsx

@@ -1,5 +1,6 @@
 import { Route, Switch, Redirect } from 'react-router-dom';
 import React from 'react';
+import { useFeatureToggle } from 'platform/utilities/feature-toggles';
 import GiBillApp from './containers/GiBillApp';
 import SearchPage from './containers/SearchPage';
 import ComparePage from './containers/ComparePage';
@@ -9,51 +10,73 @@ import LicenseCertificationSearchResults from './containers/LicenseCertification
 import LicenseCertificationSearchResult from './containers/LicenseCertificationSearchResult';
 import LicenseCertificationSearchPage from './containers/LicenseCertificationSearchPage';
 import NationalExamsList from './containers/NationalExamsList';
+import NewGiApp from './updated-gi/containers/NewGiApp';
+import HomePage from './updated-gi/components/Homepage';
 
-export const buildRoutes = () => {
+const BuildRoutes = () => {
+  const { useToggleValue, TOGGLE_NAMES } = useFeatureToggle();
+  const toggleValue = useToggleValue(TOGGLE_NAMES.isUpdatedGi);
   return (
-    <GiBillApp>
-      <Switch>
-        <Redirect
-          from="/profile/:facilityCode"
-          to="/institution/:facilityCode"
-        />
-        <Route
-          path="/institution/:facilityCode/:programType"
-          render={({ match }) => <ProgramsList match={match} />}
-        />
-        <Route
-          path="/institution/:facilityCode"
-          render={({ match }) => <ProfilePage match={match} />}
-        />
-        <Route
-          exact
-          path="/lc-search"
-          render={({ match }) => (
-            <LicenseCertificationSearchPage match={match} />
-          )}
-        />
-        <Route
-          exact
-          path="/lc-search/results"
-          render={({ match }) => (
-            <LicenseCertificationSearchResults match={match} />
-          )}
-        />
-        <Route path="/national-exams" component={NationalExamsList} />
+    <>
+      {!toggleValue ? (
+        <GiBillApp>
+          <Switch>
+            <Redirect
+              from="/profile/:facilityCode"
+              to="/institution/:facilityCode"
+            />
+            <Route
+              path="/institution/:facilityCode/:programType"
+              render={({ match }) => <ProgramsList match={match} />}
+            />
+            <Route
+              path="/institution/:facilityCode"
+              render={({ match }) => <ProfilePage match={match} />}
+            />
+            <Route
+              exact
+              path="/lc-search"
+              render={({ match }) => (
+                <LicenseCertificationSearchPage match={match} />
+              )}
+            />
+            <Route
+              exact
+              path="/lc-search/results"
+              render={({ match }) => (
+                <LicenseCertificationSearchResults match={match} />
+              )}
+            />
+            <Route path="/national-exams" component={NationalExamsList} />
 
-        <Route
-          path="/lc-search/results/:type/:id"
-          render={({ match }) => (
-            <LicenseCertificationSearchResult match={match} />
-          )}
-        />
-        <Route
-          path="/compare"
-          render={({ match }) => <ComparePage match={match} />}
-        />
-        <Route path="/" render={({ match }) => <SearchPage match={match} />} />
-      </Switch>
-    </GiBillApp>
+            <Route
+              path="/lc-search/results/:type/:id"
+              render={({ match }) => (
+                <LicenseCertificationSearchResult match={match} />
+              )}
+            />
+            <Route
+              path="/compare"
+              render={({ match }) => <ComparePage match={match} />}
+            />
+            <Route
+              path="/"
+              render={({ match }) => <SearchPage match={match} />}
+            />
+          </Switch>
+        </GiBillApp>
+      ) : (
+        <NewGiApp>
+          <Switch>
+            <Route
+              path="/"
+              exact
+              render={({ match }) => <HomePage match={match} />}
+            />
+          </Switch>
+        </NewGiApp>
+      )}
+    </>
   );
 };
+export const buildRoutes = () => <BuildRoutes />;

src/applications/gi/sass/gi.scss

@@ -15,6 +15,7 @@
 @import "partials/gi-back-to-top";
 @import "partials/gi-filter";
 @import "partials/gi-search-controls";
+@import "partials/gi-updated";
 
 .gi-app {
   div.military-status-info {

src/applications/gi/sass/partials/_gi-updated.scss

@@ -0,0 +1,24 @@
+.gi-bill-container{
+    @include media-maxwidth($small-screen) {
+       padding-inline: 24px;
+    }
+
+&__bread-crumbs{
+    @include media-maxwidth($small-screen) {
+       margin-left: -8px !important;
+     }
+}
+}
+.flex-container{
+    @include media-maxwidth($small-screen) {
+       flex-direction: column;
+     }
+}
+.border-bottom{
+    border-bottom: 1px solid var(--vads-color-base-light);
+    border-top: 1px solid var(--vads-color-base-light);
+    border-width: 100%;
+}
+.links{
+   font-size: 0.85rem;
+}

src/applications/gi/updated-gi/components/AboutThisTool.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export const AboutThisTool = () => {
+  return (
+    <div>
+      <a
+        href="https://www.benefits.va.gov/gibill/comparison_tool/about_this_tool.asp"
+        target="_blank"
+        className="links"
+        rel="noopener noreferrer"
+        id="about-this-tool"
+      >
+        About this tool
+      </a>
+
+      <a
+        href="https://www.benefits.va.gov/GIBILL/docs/job_aids/ComparisonToolData.xlsx"
+        id="download-all-data"
+        className="links vads-u-margin-left--2"
+      >
+        Download data on all schools (XLS)
+      </a>
+    </div>
+  );
+};

src/applications/gi/updated-gi/components/GiBillBreadcrumbs.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { VaBreadcrumbs } from '@department-of-veterans-affairs/web-components/react-bindings';
+
+const GiBillBreadcrumbs = () => {
+  const crumbs = [
+    {
+      href: '/',
+      label: 'Home',
+    },
+    {
+      href: '/education',
+      label: 'Education and training',
+    },
+    {
+      href: '/education/gi-bill-comparison-tool/',
+      label: 'GI Bill® Comparison Tool',
+    },
+  ];
+  return (
+    <div className="gi-bill-container__bread-crumbs">
+      <VaBreadcrumbs uswds breadcrumbList={crumbs} />
+    </div>
+  );
+};
+
+export default GiBillBreadcrumbs;

src/applications/gi/updated-gi/components/Homepage.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import LinkWithDescription from './LinkWithDescription';
+
+const HomePage = () => {
+  return (
+    <div className="vads-u-margin-bottom--8">
+      <p
+        className="vads-u-color--gray-dark vads-u-font-family--serif vads-u-margin-bottom--4"
+        data-testid="comparison-tool-description"
+      >
+        Discover how your GI Bill benefits can support your education. Search
+        and compare approved schools, employers, exams, licenses, and
+        certifications to see how much your VA benefits can help cover.
+      </p>
+      <div className="vads-u-display--flex flex-container">
+        <LinkWithDescription
+          text="Schools and employers"
+          description="Search and compare public and private schools. Filter by on-the-job training, apprenticeships, and more."
+        />
+        <LinkWithDescription
+          text="Licenses and certifications"
+          description="Search for licenses, certifications, and prep courses. You can submit a form to get reimbursed."
+        />
+        <LinkWithDescription
+          text="National Exams"
+          description="Take national exams such as SAT, ACT, GRE, GMAT, and more. You can submit a form to get reimbursed."
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;

src/applications/gi/updated-gi/components/InfoDisclaimer.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const InfoDisclaimer = () => {
+  return (
+    <div className="border-bottom vads-u-margin-top--3 vads-u-margin-bottom--2 ">
+      <p
+        className="vads-u-font-family--sans vads-u-color--gray-dark"
+        data-testid="info-disclaimer"
+      >
+        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"
+          rel="noopener noreferrer"
+          href="https://www.va.gov/ogc/apps/accreditation/index.asp"
+          id="disclaimer-link"
+        >
+          Search Accredited Attorneys, Claims Agents, or Veterans Service
+          Organizations (VSO) Representatives
+        </a>
+        .
+        <span>
+          {' '}
+          If you need technical assistance or have questions about the GI Bill
+          Comparison Tool, email us at{' '}
+          <a href="mailto: [email protected]">
+            [email protected]
+          </a>
+          .
+        </span>
+      </p>
+    </div>
+  );
+};
+
+export default InfoDisclaimer;

src/applications/gi/updated-gi/components/LinkWithDescription.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { VaLink } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+
+const LinkWithDescription = ({ text, description }) => (
+  <div className="vads-u-flex--1 site-grid-example">
+    <VaLink
+      active
+      className="vads-u-font-weight--bold vads-u-font-family--serif"
+      text={text}
+      href="#"
+    />
+    <p className="vads-u-margin-top--1p5 vads-u-font-family--sans vads-u-color--gray-dark">
+      {description}
+    </p>
+  </div>
+);
+
+LinkWithDescription.propTypes = {
+  description: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+};
+
+export default LinkWithDescription;

src/applications/gi/updated-gi/containers/NewGiApp.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { AboutThisTool } from '../components/AboutThisTool';
+import InfoDisclaimer from '../components/InfoDisclaimer';
+import GiBillBreadcrumbs from '../components/GiBillBreadcrumbs';
+
+const NewGiApp = ({ children }) => {
+  return (
+    <div className="row gi-bill-container">
+      <GiBillBreadcrumbs />
+      <div className="vads-u-margin-left--neg1">
+        <h1 data-testid="comparison-tool-title">GI Bill® Comparison Tool</h1>
+        {children}
+        <AboutThisTool />
+        <InfoDisclaimer />
+      </div>
+    </div>
+  );
+};
+
+NewGiApp.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default NewGiApp;

src/applications/gi/updated-gi/tests/components/Homepage.unit.spec.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import * as featureToggles from 'platform/utilities/feature-toggles';
+import { shallow } from 'enzyme';
+import HomePage from '../../components/Homepage';
+
+describe('<HomePage />', () => {
+  let useFeatureToggleStub;
+
+  beforeEach(() => {
+    useFeatureToggleStub = sinon.stub(featureToggles, 'useFeatureToggle');
+  });
+
+  it('should behave correctly when feature toggle is enabled', () => {
+    useFeatureToggleStub.returns(true);
+
+    const wrapper = shallow(<HomePage />);
+    expect(wrapper.find('[data-testid="comparison-tool-description"]').exists())
+      .to.be.true;
+    wrapper.unmount();
+  });
+});

src/applications/gi/updated-gi/tests/components/InfoDisclaimer.unit.spec.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import * as featureToggles from 'platform/utilities/feature-toggles';
+import { shallow } from 'enzyme';
+import InfoDisclaimer from '../../components/InfoDisclaimer';
+
+describe('<HomePage />', () => {
+  let useFeatureToggleStub;
+
+  beforeEach(() => {
+    useFeatureToggleStub = sinon.stub(featureToggles, 'useFeatureToggle');
+  });
+
+  it('should behave correctly when feature toggle is enabled', () => {
+    useFeatureToggleStub.returns(true);
+
+    const wrapper = shallow(<InfoDisclaimer />);
+    expect(wrapper.find('[data-testid="info-disclaimer"]').exists()).to.be.true;
+    wrapper.unmount();
+  });
+});