Added login functionality on intro page, styling on applicant info pa…

…ge (#32675)

Co-authored-by: Belle P <[email protected]>

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/components/SaveInProgressInfo.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import SaveInProgressIntro from 'platform/forms/save-in-progress/SaveInProgressIntro';
+import { VaButton } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+import { Link } from 'react-router';
+import { selectAuthStatus } from '../../../../utils/selectors/auth-status';
+import VerifiedPrefillAlert from '../../../../shared/components/alerts/VerifiedPrefillAlert';
+import content from '../../../../shared/locales/en/content.json';
+import { getTaskFromUrl } from '../../../../utils/helpers/task';
+import { TASKS } from '../../../../utils/constants';
+
+const SaveInProgressInfo = ({ formConfig, pageList }) => {
+  const { isLoggedOut } = useSelector(selectAuthStatus);
+
+  const {
+    downtime,
+    prefillEnabled,
+    savedFormMessages,
+    customText,
+  } = formConfig;
+
+  const task = getTaskFromUrl(formConfig.urlPrefix);
+
+  const buttonOnly = isLoggedOut || task === TASKS.YELLOW;
+
+  // set the props to use for the SaveInProgressIntro components
+  const sipProps = {
+    startText: 'Start the education application',
+    unauthStartText: content['sip-sign-in-to-start-text'],
+    messages: savedFormMessages,
+    formConfig: { customText },
+    headingLevel: 3,
+    verifiedPrefillAlert: VerifiedPrefillAlert,
+    buttonOnly,
+    hideUnauthedStartLink: true,
+    prefillEnabled,
+    downtime,
+    pageList,
+    devOnly: { forceShowFormControls: false },
+  };
+
+  const sipIntro = <SaveInProgressIntro {...sipProps} />;
+
+  // set the correct alert to render based on enrollment status
+  const LoggedInAlertToRender = () => {
+    return sipIntro;
+  };
+
+  const onSignInButtonClick = () => {
+    const redirectLocation = `${formConfig.rootUrl}${
+      formConfig.urlPrefix
+    }introduction?loggedIn=true`;
+
+    window.location = redirectLocation;
+  };
+
+  return isLoggedOut ? (
+    <>
+      <va-alert
+        status="info"
+        class="vads-u-margin-y--4"
+        data-testid="ezr-login-alert"
+        uswds
+      >
+        <h3 slot="headline">
+          Sign in now to save time and save your work in progress
+        </h3>
+        <p>Here&rsquo;s how signing in now helps you:</p>
+        <ul>
+          <li>
+            We can fill in some of your information for you to save you time.
+          </li>
+          <li>
+            You can save your work in progress. You’ll have 60 days from when
+            you start or make updates to your application to come back and
+            finish it.
+          </li>
+        </ul>
+        <p>
+          <strong>Note:</strong> You can sign in after you start your
+          application. But you&rsquo;ll lose any information you already filled
+          in.
+        </p>
+        <VaButton
+          onClick={onSignInButtonClick}
+          text="Sign in to start your application"
+        />
+        <p>
+          <Link
+            to="/2/task-orange/introduction?loggedIn=false"
+            className="schemaform-start-button"
+          >
+            Start your application without signing in
+          </Link>
+        </p>
+      </va-alert>
+    </>
+  ) : (
+    <div className="vads-u-margin-y--4">{LoggedInAlertToRender()}</div>
+  );
+};
+
+SaveInProgressInfo.propTypes = {
+  formConfig: PropTypes.object,
+  pageList: PropTypes.array,
+};
+
+export default SaveInProgressInfo;

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/containers/IntroductionPage.jsx

@@ -1,15 +1,15 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { focusElement } from 'platform/utilities/ui';
 import FormTitle from 'platform/forms-system/src/js/components/FormTitle';
-import SaveInProgressIntro from 'platform/forms/save-in-progress/SaveInProgressIntro';
 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 {
   WIZARD_STATUS,
   WIZARD_STATUS_NOT_STARTED,
 } from 'applications/static-pages/wizard';
+import SaveInProgressInfo from '../components/SaveInProgressInfo';
 
 export class IntroductionPage extends React.Component {
   state = {
@@ -26,20 +26,17 @@ export class IntroductionPage extends React.Component {
   };
 
   render() {
-    const { showWizard } = this.props;
+    const { route, showWizard } = this.props;
+    const { formConfig, pageList } = route;
+    const sipProps = { formConfig, pageList };
 
     if (showWizard === undefined) return null;
     return (
       <div className="schemaform-intro">
         <FormTitle title="Apply for VA Education Benefits" />
         <p>Equal to VA Form 22-1990 (Application for VA Education Benefits).</p>
         <div className="subway-map">
-          <SaveInProgressIntro
-            prefillEnabled={this.props.route.formConfig.prefillEnabled}
-            messages={this.props.route.formConfig.savedFormMessages}
-            pageList={this.props.route.pageList}
-            startText="Start the education application"
-          />
+          <SaveInProgressInfo {...sipProps} route={route} />
           <h4>Follow the steps below to apply for education benefits.</h4>
           <div className="process schemaform-process">
             <ol>
@@ -121,13 +118,6 @@ export class IntroductionPage extends React.Component {
               </li>
             </ol>
           </div>
-          <SaveInProgressIntro
-            buttonOnly
-            prefillEnabled={this.props.route.formConfig.prefillEnabled}
-            messages={this.props.route.formConfig.savedFormMessages}
-            pageList={this.props.route.pageList}
-            startText="Start the education application"
-          />
           <div className="omb-info--container" style={{ paddingLeft: '0px' }}>
             <va-omb-info
               res-burden={15}
@@ -145,4 +135,9 @@ const mapStateToProps = state => ({
   showWizard: toggleValues(state)[FEATURE_FLAG_NAMES.showEduBenefits1990Wizard],
 });
 
+IntroductionPage.propTypes = {
+  route: PropTypes.object,
+  showWizard: PropTypes.bool,
+};
+
 export default connect(mapStateToProps)(IntroductionPage);

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/pages/ApplicantInformation.jsx

@@ -70,7 +70,9 @@ export const ApplicantInformation = ({
 
   return (
     <>
-      <p>Confirm your information before you continue.</p>
+      <p className="vads-u-font-size--md">
+        Confirm your information before you continue.
+      </p>
 
       <ApplicantInformationInfoSection
         veteranDateOfBirth={veteranDateOfBirth}
@@ -80,15 +82,19 @@ export const ApplicantInformation = ({
       />
 
       <p>
-        Note: To protect your personal information, we don’t allow online
-        changes to your name, date of birth, or Social Security number. If you
-        need to change this information for your health benefits, call your VA
-        health facility.{' '}
+        <strong>Note:</strong> To protect your personal information, we don’t
+        allow online changes to your name, date of birth, or Social Security
+        number. If you need to change this information for your health benefits,
+        call your VA health facility.{' '}
         <va-link
           href={APP_URLS.facilities}
           text="Find your VA health facility"
         />
       </p>
+      <p>
+        If you want to update your contact information for other VA benefits,
+        you can do that from your profile.{' '}
+      </p>
       <div className="vads-u-margin-bottom--3">
         <va-link href="/profile" text="Go to your profile" external />
       </div>

src/applications/_mock-form-ae-design-patterns/sass/custom.scss

@@ -69,3 +69,12 @@ margin-bottom: 1rem;
 #root_view\:editNavigation-label {
   display: none !important;
 }
+
+[data-location="2/task-orange/applicant-information"] {
+  .schemaform-chapter-progress {
+    padding-left: 0;
+    span {
+      font-size: 18px !important;
+    }
+  }
+}