Add Travel Pay OMB information (#33514)

* Add Travel Pay OMB information

* Update tests

* Update comment

* Add translations

* Extract email from translation text

src/applications/check-in/components/TravelPayOMB.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+
+// OMB Details
+const EXP_DATE = '11/30/2027';
+const OMB_NUMBER = '2900-0798';
+const RES_BURDEN_MIN = '10';
+const VACO_PRA_EMAIL = '[email protected]';
+
+const TravelPayOMB = () => {
+  return (
+    <va-omb-info
+      exp-date={EXP_DATE}
+      omb-number={OMB_NUMBER}
+      res-burden={RES_BURDEN_MIN}
+      data-testid="travel-pay-omb"
+      class="vads-u-margin-y--4"
+    >
+      <p data-testid="travel-pay-omb-burdern-statement">
+        <Trans
+          i18nKey="travel-pay-omb-burdern-statement"
+          components={[
+            <strong key="bold" />,
+            <a
+              key="link"
+              href={`mailto:${VACO_PRA_EMAIL}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {VACO_PRA_EMAIL}
+            </a>,
+          ]}
+          values={{
+            ombNumber: OMB_NUMBER,
+            expDate: EXP_DATE,
+            resBurden: RES_BURDEN_MIN,
+            vaEmail: VACO_PRA_EMAIL,
+          }}
+        />
+      </p>
+
+      <p data-testid="travel-pay-omb-privacy-act-info">
+        <Trans
+          i18nKey="travel-pay-omb-privacy-act"
+          components={[<strong key="bold" />]}
+        />
+      </p>
+    </va-omb-info>
+  );
+};
+
+export default TravelPayOMB;

src/applications/check-in/components/pages/TravelPage/TravelPage.unit.spec.jsx

@@ -81,6 +81,14 @@ describe('Check-in experience', () => {
         expect(yesFunc.calledOnce).to.be.true;
         expect(noFunc.calledOnce).to.be.true;
       });
+      it('renders OMB information', () => {
+        const { getByTestId } = render(
+          <CheckInProvider>
+            <TravelPage header="test header" />
+          </CheckInProvider>,
+        );
+        expect(getByTestId('travel-pay-omb')).to.exist;
+      });
     });
   });
 });

src/applications/check-in/components/pages/TravelPage/index.jsx

@@ -17,6 +17,7 @@ import {
 import BackButton from '../../BackButton';
 import Wrapper from '../../layout/Wrapper';
 import { APP_NAMES } from '../../../utils/appConstants';
+import TravelPayOMB from '../../TravelPayOMB';
 
 const TravelPage = ({
   header,
@@ -139,6 +140,7 @@ const TravelPage = ({
             value="no"
           />
         </div>
+        <TravelPayOMB />
       </Wrapper>
     </>
   );

src/applications/check-in/components/tests/TravelPayOMB.unit.spec.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { expect } from 'chai';
+import { render } from '@testing-library/react';
+
+import TravelPayOMB from '../TravelPayOMB';
+
+describe('check-in', () => {
+  describe('TravelPayOMB', () => {
+    it('renders the OMB information correctly', () => {
+      const { getByTestId } = render(<TravelPayOMB />);
+
+      // Verify the `va-omb-info` element exists with the correct data-testid
+      const ombInfo = getByTestId('travel-pay-omb');
+      expect(ombInfo).to.exist;
+
+      // Verify the `exp-date` prop
+      expect(ombInfo.getAttribute('exp-date')).to.equal('11/30/2027');
+
+      // Verify the `omb-number` prop
+      expect(ombInfo.getAttribute('omb-number')).to.equal('2900-0798');
+
+      // Verify the `res-burden` prop
+      expect(ombInfo.getAttribute('res-burden')).to.equal('10');
+
+      // Verify text content within the component
+      // Verify the Burder Statement Act section
+      const burderStatement = getByTestId('travel-pay-omb-burdern-statement');
+      expect(burderStatement).to.exist;
+      // Verify the statement includes the OMB information
+      expect(burderStatement.textContent).to.include('2900-0798');
+      expect(burderStatement.textContent).to.include('11/30/2027');
+      expect(burderStatement.textContent).to.include('10 minutes');
+
+      // Verify the Privacy Act section
+      const privayActInfo = getByTestId('travel-pay-omb-privacy-act-info');
+      expect(privayActInfo).to.exist;
+    });
+  });
+});

src/applications/check-in/locales/en/translation.json

@@ -262,6 +262,8 @@
   "time": "Time",
   "travel-method": "Travel method",
   "travel-pay-cant-file-message": "We’re sorry. We can’t file this type of travel reimbursement claim for you now. But you can still file within <0>30 days</0> of the appointment.",
+  "travel-pay-omb-burdern-statement": "<0>VA Burden Statement:</0> An agency may not conduct or sponsor, and a person is not required to respond to, a collection of information unless it displays a currently valid OMB control number. The OMB control number for this project is {{ombNumber}}, and it expires {{expDate}}. Public reporting burden for this collection of information is estimated to average {{resBurden}} minutes per respondent, per peryear, including the time for reviewing instructions, searching existingdata sources, gathering and maintaining the data needed, and completingand reviewing the collection of information. Send comments regardingthis burden estimate and any other aspect of this collection ofinformation, including suggestions for reducing this burden, to VAReports Clearance Officer at <1>{{vaEmail}}</1>. Please refer to OMB Control No. {{ombNumber}} in any correspondence. Do not send your completed BTSSS claim or VA Form 10-3542 to this email address.",
+  "travel-pay-omb-privacy-act": "<0>Privacy Act information:</0> VA is asking you to provide the information on this form under 38 U.S.C. Sections 111 to determine your eligibility for Beneficiary Travel benefits and will be used for that purpose. Information you supply may be verified through a computer-matching program. VA may disclose the information that you put on the form as permitted by law; possible disclosures include those described in the “routine use” identified in the VA systems of records 24VA19 Patient Medical Record-VA, published in the Federal Register in accordance with the Privacy Act of 1974. Providing the requested information is voluntary, but if any or all of the requested information is not provided, it may delay or result in denial of your request for benefits. Failure to furnish the information will not have any effect on any other benefits to which you may be entitled. If you provide VA your Social Security Number, VA will use it to administer your VA benefits. VA may also use this information to identify Veterans and persons claiming or receiving VA benefits and their records, and for other purposes authorized or required by law.",
   "travel-pay-reimbursement--info-message": "VA travel pay reimbursement pays eligible Veterans and caregivers back for mileage and other travel expenses to and from approved health care appointments.",
   "travel-reimbursement": "Travel reimbursement",
   "travel-reimbursement-eligibility": "Travel reimbursement eligibility",
@@ -457,4 +459,4 @@
   "would-you-like-to-file-a-travel-reimbursement-claim-now": "Would you like to file a travel reimbursement claim now?",
   "we-encourage-you-to-review-the-requirements": "We encourage you to review the requirements and submit your claim, even if you’re not sure if you’re eligible.",
   "how-to-file-other-types-of-claims": "How to file other types of claims"
-}
+}

src/applications/check-in/travel-claim/pages/travel-intro/index.jsx

@@ -8,6 +8,7 @@ import { createAnalyticsSlug } from '../../../utils/analytics';
 import { useFormRouting } from '../../../hooks/useFormRouting';
 import { APP_NAMES } from '../../../utils/appConstants';
 import ExternalLink from '../../../components/ExternalLink';
+import TravelPayOMB from '../../../components/TravelPayOMB';
 
 const TravelIntro = props => {
   const { router } = props;
@@ -102,6 +103,7 @@ const TravelIntro = props => {
             {t('set-up-direct-deposit')}
           </ExternalLink>
         </va-alert>
+        <TravelPayOMB />
       </Wrapper>
     </>
   );

src/applications/check-in/travel-claim/pages/travel-intro/travelIntro.unit.spec.js

@@ -35,5 +35,13 @@ describe('travel-claim', () => {
       fireEvent.click(link);
       expect(push.calledWith('travel-mileage')).to.be.true;
     });
+    it('renders OMB information', () => {
+      const { getByTestId } = render(
+        <CheckInProvider>
+          <TravelIntro />
+        </CheckInProvider>,
+      );
+      expect(getByTestId('travel-pay-omb')).to.exist;
+    });
   });
 });