73841 - Update IndentityNotVerified component copy and add additional-info component

src/applications/mhv-landing-page/components/LandingPage.jsx

@@ -24,15 +24,15 @@ const LandingPage = ({ data = {} }) => {
   const hasHealth = useSelector(hasHealthData);
   const signInService = useSelector(signInServiceName);
   const showPersonalization = useSelector(personalizationEnabled);
-
   const showCards = hasHealth && !isUnverified;
-
   const serviceLabel = SERVICE_PROVIDERS[signInService]?.label;
   const unVerifiedHeadline = `Verify your identity to use your ${serviceLabel} account on My HealtheVet`;
   const noCardsDisplay = isUnverified ? (
     <IdentityNotVerified
       headline={unVerifiedHeadline}
       showHelpContent={false}
+      showVerifyIdenityHelpInfo
+      signInService={signInService}
     />
   ) : (
     <NoHealthAlert />

src/applications/personalization/dashboard/tests/e2e/loa1.cypress.spec.js

@@ -20,8 +20,12 @@ const loa1DashboardTest = (mobile, stubs) => {
   }
 
   // make sure that the "Verify" alert is shown
-  cy.findByText(/Verify your identity to access/i).should('exist');
-  cy.findByText(/we need to make sure you’re you/i).should('exist');
+  cy.findByText(/We need you to verify your identity for this account/i).should(
+    'exist',
+  );
+  cy.findByText(/will ask you for certain personal information/i).should(
+    'exist',
+  );
   cy.findByRole('link', { name: 'Verify your identity' }).should(
     'have.attr',
     'href',
@@ -39,8 +43,12 @@ const loa1DashboardTest = (mobile, stubs) => {
   cy.findByTestId('name-tag').should('not.exist');
 
   // make sure that the "Verify" alert is shown
-  cy.findByText(/Verify your identity to access/i).should('exist');
-  cy.findByText(/we need to make sure you’re you/i).should('exist');
+  cy.findByText(/We need you to verify your identity for this account/i).should(
+    'exist',
+  );
+  cy.findByText(/will ask you for certain personal information/i).should(
+    'exist',
+  );
   cy.findByRole('link', { name: 'Verify your identity' }).should(
     'have.attr',
     'href',

src/platform/user/authorization/components/IdentityNotVerified.jsx

@@ -14,29 +14,69 @@ export const HowToVerifyLink = () => (
   </p>
 );
 
+const VerifyIdentityInfo = () => (
+  <va-additional-info
+    trigger="If you have trouble verifying your identity"
+    uswds
+  >
+    <a
+      href="https://www.va.gov/resources/verifying-your-identity-on-vagov/"
+      clasName="vads-u-padding-bottom--2"
+    >
+      Get answers to common questions about verifying your identity
+    </a>
+    <div className="vads-u-margin-top--2p5">
+      <p>
+        Or, if you have a Premium My HealtheVet account with a My HealtheVet
+        user ID and password, you can sign out and then sign back in with that
+        account to access My HealtheVet.
+      </p>
+    </div>
+  </va-additional-info>
+);
+
 const IdentityNotVerified = ({
   headline = 'Verify your identity to access your complete profile',
   showHelpContent = true,
+  showVerifyIdenityHelpInfo = false,
+  signInService,
 }) => {
+  let serviceName;
+  switch (signInService) {
+    case 'mhv':
+    case 'dslogon':
+      serviceName = 'Login.gov or ID.me';
+      break;
+    case 'idme':
+      serviceName = 'ID.me';
+      break;
+    case 'logingov':
+      serviceName = 'Login.gov';
+      break;
+    default:
+      serviceName = 'your account';
+  }
   return (
     <>
-      <va-alert status="continue" class="vads-u-margin-top--3">
+      <va-alert
+        status="continue"
+        class="vads-u-margin-top--3 vads-u-margin-bottom--3"
+      >
         <h2 slot="headline" data-testid="verify-identity-alert-headline">
           {headline}
         </h2>
-
         <div className="vads-u-margin-bottom--1">
           <p>
-            We need to make sure you’re you&#8212;and not someone pretending to
-            be you&#8212;before we can give you access to your personal and
-            health-related information. This helps to keep your information
-            safe. It helps to prevent fraud and identity theft.
+            Our records show that you haven’t verified your identity for your
+            &nbsp;
+            {serviceName} account. We need you to verify your identity for this
+            account to help us keep your information safe and prevent fraud and
+            identity theft.
           </p>
-
-          <p className="vads-u-font-weight--bold">
-            This one-time process takes about 5-10 minutes.
+          <p>
+            {serviceName} will ask you for certain personal information and
+            identification. This process often takes about 10 minutes.
           </p>
-
           <a
             className="vads-c-action-link--green"
             href="/verify"
@@ -48,6 +88,7 @@ const IdentityNotVerified = ({
       </va-alert>
 
       {showHelpContent && <HowToVerifyLink />}
+      {showVerifyIdenityHelpInfo && <VerifyIdentityInfo />}
     </>
   );
 };
@@ -56,6 +97,8 @@ IdentityNotVerified.propTypes = {
   additionalInfoClickHandler: PropTypes.func,
   headline: PropTypes.string,
   showHelpContent: PropTypes.bool,
+  showVerifyIdenityHelpInfo: PropTypes.bool,
+  signInService: PropTypes.string,
 };
 
 export { IdentityNotVerified as default };

src/platform/user/tests/authorization/components/IdentityNotVerified.unit.spec.jsx

@@ -15,9 +15,11 @@ describe('IdentityNotVerified component', () => {
       expect(view.getByText(headline)).to.exist;
     });
     it('renders the correct alert content', () => {
-      expect(view.getByText(/We need to make sure you’re you/i)).to.exist;
-      expect(view.getByText(/your personal and health-related information/i)).to
-        .exist;
+      expect(
+        view.getByText(/We need you to verify your identity for this account/i),
+      ).to.exist;
+      expect(view.getByText(/will ask you for certain personal information/i))
+        .to.exist;
     });
     it('renders the correct CTA', () => {
       expect(