Skip to content

Commit

Permalink
PDF cert warning added to find-form search
Browse files Browse the repository at this point in the history
  • Loading branch information
@jtmst
jtmst committed Dec 6, 2022
1 parent fa84466 commit 053d9d8
Show file tree
Hide file tree
Showing 2 changed files with 181 additions and 108 deletions.
256 changes: 149 additions & 107 deletions src/applications/find-forms/components/FindVaForms.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
/* eslint-disable jsx-a11y/no-redundant-roles */
// Node modules.
import React from 'react';
import React, { useEffect } from 'react';

// Relative imports.
import { connect } from 'react-redux';
import { toggleValues } from 'platform/site-wide/feature-toggles/selectors';
import FEATURE_FLAG_NAMES from 'platform/utilities/feature-toggles/featureFlagNames';

import recordEvent from 'platform/monitoring/record-event';
import PropTypes from 'prop-types';
import SearchForm from '../containers/SearchForm';
import SearchResults from '../containers/SearchResults';
import recordEvent from 'platform/monitoring/record-event';

const onFeaturedContentClick = header => () => {
recordEvent({
Expand All @@ -13,111 +19,147 @@ const onFeaturedContentClick = header => () => {
});
};

export default () => (
<>
<SearchForm />
<SearchResults />
<h2>Frequently used VA forms</h2>
<p>
You can now do many form-based tasks online, like filing a disability
claim and applying for the GI Bill or VA health care. We&apos;ll walk you
through the process step-by-step.
</p>
{/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
<ul
className="usa-grid usa-grid-full vads-u-margin-top--3 vads-u-margin-bottom--4 vads-u-display--flex vads-u-flex-direction--column medium-screen:vads-u-flex-direction--row"
role="list"
>
<li className="featured-content-list-item vads-u-background-color--primary-alt-lightest vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
<h3 className="vads-u-font-size--base vads-u-margin--0">
File a VA disability claim
</h3>
<hr
aria-hidden="true"
role="presentation"
className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
/>
<p className="va-nav-linkslist-description">
Equal to VA Form 21-526EZ
</p>
<a
className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
href="/disability/file-disability-claim-form-21-526ez/"
onClick={onFeaturedContentClick('File a VA disability claim')}
>
<span>
Apply online
<span className="vads-u-visibility--screen-reader">
about filing a VA disability claim
export const FindVaForms = ({ showPdfWarningBanner }) => {
useEffect(
() => {
if (showPdfWarningBanner) {
const PDFAlertContent = `<va-alert>
<h2 slot="headline" className="vads-u-font-size--h3">
We’re updating our forms
</h2>
<p>After January 7, 2023, you won't be able to use VA forms that have a “last updated” date before March 2022. If you downloaded any of these older VA forms, you may need to download new copies in January.</p>
</va-alert>`;

document
.getElementsByClassName('va-introtext')[0]
.insertAdjacentHTML('beforebegin', `${PDFAlertContent}`);
}
},
[showPdfWarningBanner],
);

return (
<>
<SearchForm />
<SearchResults />
<h2>Frequently used VA forms</h2>
<p>
You can now do many form-based tasks online, like filing a disability
claim and applying for the GI Bill or VA health care. We’ll walk you
through the process step-by-step.
</p>
{/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
<ul
className="usa-grid usa-grid-full vads-u-margin-top--3 vads-u-margin-bottom--4 vads-u-display--flex vads-u-flex-direction--column medium-screen:vads-u-flex-direction--row"
role="list"
>
<li className="featured-content-list-item vads-u-background-color--primary-alt-lightest vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
<h3 className="vads-u-font-size--base vads-u-margin--0">
File a VA disability claim
</h3>
<hr
aria-hidden="true"
role="presentation"
className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
/>
<p className="va-nav-linkslist-description">
Equal to VA Form 21-526EZ
</p>
<a
className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
href="/disability/file-disability-claim-form-21-526ez/"
onClick={onFeaturedContentClick('File a VA disability claim')}
>
<span>
Apply online
<span className="vads-u-visibility--screen-reader">
about filing a VA disability claim
</span>
<i
aria-hidden="true"
className="fa fa-chevron-right vads-facility-hub-cta-arrow"
role="presentation"
/>
</span>
<i
aria-hidden="true"
className="fa fa-chevron-right vads-facility-hub-cta-arrow"
role="presentation"
/>
</span>
</a>
</li>
<li className="featured-content-list-item vads-u-background-color--primary-alt-lightest vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
<h3 className="vads-u-font-size--base vads-u-margin--0">
Apply for the GI Bill and other education benefits
</h3>
<hr
aria-hidden="true"
role="presentation"
className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
/>
<p className="va-nav-linkslist-description">
Includes VA Forms 22-1990 and 22-1995
</p>
<a
className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
href="/education/how-to-apply/"
onClick={onFeaturedContentClick(
'Apply for the GI Bill and other education benefits',
)}
>
<span>
Learn how to apply online
<span className="vads-u-visibility--screen-reader">
about applying for the GI Bill and other education benefits
</a>
</li>
<li className="featured-content-list-item vads-u-background-color--primary-alt-lightest vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
<h3 className="vads-u-font-size--base vads-u-margin--0">
Apply for the GI Bill and other education benefits
</h3>
<hr
aria-hidden="true"
role="presentation"
className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
/>
<p className="va-nav-linkslist-description">
Includes VA Forms 22-1990 and 22-1995
</p>
<a
className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
href="/education/how-to-apply/"
onClick={onFeaturedContentClick(
'Apply for the GI Bill and other education benefits',
)}
>
<span>
Learn how to apply online
<span className="vads-u-visibility--screen-reader">
about applying for the GI Bill and other education benefits
</span>
<i
aria-hidden="true"
className="fa fa-chevron-right vads-facility-hub-cta-arrow"
role="presentation"
/>
</span>
<i
aria-hidden="true"
className="fa fa-chevron-right vads-facility-hub-cta-arrow"
role="presentation"
/>
</span>
</a>
</li>
<li className="featured-content-list-item vads-u-background-color--primary-alt-lightest vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
<h3 className="vads-u-font-size--base vads-u-margin--0">
Apply for VA health care
</h3>
<hr
aria-hidden="true"
role="presentation"
className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
/>
<p className="va-nav-linkslist-description">Equal to VA Form 10-10EZ</p>
<a
className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
href="/health-care/apply/application/"
onClick={onFeaturedContentClick('Apply for VA health care benefits')}
>
<span>
Apply online
<span className="vads-u-visibility--screen-reader">
about applying for VA health care benefits
</a>
</li>
<li className="featured-content-list-item vads-u-background-color--primary-alt-lightest vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
<h3 className="vads-u-font-size--base vads-u-margin--0">
Apply for VA health care
</h3>
<hr
aria-hidden="true"
role="presentation"
className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
/>
<p className="va-nav-linkslist-description">
Equal to VA Form 10-10EZ
</p>
<a
className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
href="/health-care/apply/application/"
onClick={onFeaturedContentClick(
'Apply for VA health care benefits',
)}
>
<span>
Apply online
<span className="vads-u-visibility--screen-reader">
about applying for VA health care benefits
</span>
<i
aria-hidden="true"
className="fa fa-chevron-right vads-facility-hub-cta-arrow"
role="presentation"
/>
</span>
<i
aria-hidden="true"
className="fa fa-chevron-right vads-facility-hub-cta-arrow"
role="presentation"
/>
</span>
</a>
</li>
</ul>
</>
);
</a>
</li>
</ul>
</>
);
};

FindVaForms.propTypes = {
showPdfWarningBanner: PropTypes.bool,
};

const mapStateToProps = state => ({
showPdfWarningBanner: toggleValues(state)[
FEATURE_FLAG_NAMES.pdfWarningBanner || false
],
});

export default connect(mapStateToProps)(FindVaForms);
33 changes: 32 additions & 1 deletion src/applications/find-forms/tests/components/FindVaForms.unit.spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,43 @@
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import { Provider } from 'react-redux';
// Relative imports.
import FindVaForms from '../../components/FindVaForms';

const getData = ({
showNod = true,
isLoading = false,
loggedIn = true,
} = {}) => ({
props: {
isLoading,
loggedIn,
},
mockStore: {
getState: () => ({
featureToggles: {
form10182: showNod,
},
user: {
login: {
currentlyLoggedIn: loggedIn,
},
},
}),
subscribe: () => {},
dispatch: () => {},
},
});

describe('Find VA Forms <FindVaForms>', () => {
it('should render', () => {
const tree = shallow(<FindVaForms />);
const { mockStore } = getData();
const tree = shallow(
<Provider store={mockStore}>
<FindVaForms />
</Provider>,
);

expect(tree.find('SearchForm')).to.exist;
tree.unmount();
Expand Down

0 comments on commit 053d9d8

Please sign in to comment.