Moves changes out from behind mhvPersonalizationEnabled feature toggle (

#29540)

* Moves changes out from behind mhvPersonalizationEnabled feature toggle

* Update mock feature toggles to reflect production values

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 import NavCard from './NavCard';
 
 const layoutData = data => {
@@ -15,14 +16,25 @@ const CardLayout = ({ data }) => {
   return rowCols.map((row, x) => {
     return (
       <div
+        className={classnames(
+          'vads-l-row',
+          'vads-u-justify-content--space-between',
+          'vads-u-margin-bottom--0',
+          'medium-screen:vads-u-margin-bottom--2',
+        )}
         key={`row-${x}`}
-        className="vads-l-row vads-u-justify-content--space-between vads-u-margin-bottom--0 medium-screen:vads-u-margin-bottom--2"
       >
         {row.map((col, y) => (
           <div
-            key={`col-${y}`}
-            className="vads-l-col--12 medium-screen:vads-l-col mhv-u-grid-gap vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0"
+            className={classnames(
+              'vads-l-col--12',
+              'medium-screen:vads-l-col',
+              'mhv-u-grid-gap',
+              'vads-u-margin-bottom--2',
+              'medium-screen:vads-u-margin-bottom--0',
+            )}
             data-testid={`mhv-link-group-card-${x * rowCols.length + y}`}
+            key={`col-${y}`}
           >
             <NavCard title={col.title} icon={col.icon} links={col.links} />
           </div>

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

@@ -1,28 +1,60 @@
 import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import WelcomeContainer from '../containers/WelcomeContainer';
 
-const HeaderLayout = () => {
+const HeaderLayout = ({ showWelcomeMessage = false }) => {
   return (
-    <div className="vads-u-display--flex vads-u-justify-content--space-between vads-u-margin-bottom--1 medium-screen:vads-u-margin-bottom--2">
-      <div className="vads-l-col medium-screen:vads-l-col--8">
-        <h1>My HealtheVet</h1>
-        <div className="va-introtext">
-          <p>
-            <a href="/resources/my-healthevet-on-vagov-what-to-know">
-              Learn more about My HealtheVet on VA.gov,
-            </a>
-            &nbsp;where you can manage your VA health care and your health.
-          </p>
+    <>
+      <div
+        className={classnames(
+          'vads-u-display--flex',
+          'vads-u-justify-content--space-between',
+          'vads-u-margin-bottom--2',
+          'vads-u-align-items--center',
+        )}
+      >
+        <div className="vads-l-col medium-screen:vads-l-col--8">
+          <h1>My HealtheVet</h1>
+          <div className="va-introtext">
+            <p>
+              <a href="/resources/my-healthevet-on-vagov-what-to-know">
+                Learn more about My HealtheVet on VA.gov,
+              </a>
+              &nbsp;where you can manage your VA health care and your health.
+            </p>
+          </div>
+        </div>
+        <div
+          className={classnames(
+            'vads-u-display--none',
+            'medium-screen:vads-u-display--block',
+            'vads-l-col--4',
+            'vads-u-text-align--right',
+          )}
+        >
+          <img
+            src="/img/mhv-logo.png"
+            className="mhv-logo"
+            alt="My HealtheVet Logo"
+          />
         </div>
       </div>
-      <div className="vads-u-display--none medium-screen:vads-u-display--block vads-l-col--4 vads-u-text-align--right">
-        <img
-          src="/img/mhv-logo.png"
-          className="mhv-logo"
-          alt="My HealtheVet Logo"
-        />
+      <div
+        className={classnames(
+          'vads-u-border-color--gray-light',
+          'vads-u-border-bottom--1px',
+          'vads-u-margin-bottom--3',
+        )}
+      >
+        {showWelcomeMessage && <WelcomeContainer />}
       </div>
-    </div>
+    </>
   );
 };
 
+HeaderLayout.propTypes = {
+  showWelcomeMessage: PropTypes.bool,
+};
+
 export default HeaderLayout;

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

@@ -13,11 +13,9 @@ import IdentityNotVerified from '~/platform/user/authorization/components/Identi
 import { default as recordEventFn } from '~/platform/monitoring/record-event';
 
 import CardLayout from './CardLayout';
-import HeaderLayoutV1 from './HeaderLayoutV1';
 import HeaderLayout from './HeaderLayout';
 import HubLinks from './HubLinks';
 import NewsletterSignup from './NewsletterSignup';
-import WelcomeContainer from '../containers/WelcomeContainer';
 import { hasHealthData, personalizationEnabled } from '../selectors';
 import UnregisteredAlert from './UnregisteredAlert';
 
@@ -26,7 +24,7 @@ const LandingPage = ({ data = {}, recordEvent = recordEventFn }) => {
   const isUnverified = useSelector(isLOA1);
   const hasHealth = useSelector(hasHealthData);
   const signInService = useSelector(signInServiceName);
-  const showPersonalization = useSelector(personalizationEnabled);
+  const showWelcomeMessage = 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`;
@@ -62,13 +60,7 @@ const LandingPage = ({ data = {}, recordEvent = recordEventFn }) => {
           dependencies={[externalServices.mhvPlatform]}
           render={renderMHVDowntime}
         />
-        {!showPersonalization && <HeaderLayoutV1 />}
-        {showPersonalization && (
-          <>
-            <HeaderLayout />
-            <WelcomeContainer />
-          </>
-        )}
+        <HeaderLayout showWelcomeMessage={showWelcomeMessage} />
         {showCards ? <CardLayout data={cards} /> : noCardsDisplay}
       </div>
       <HubLinks hubs={hubs} />

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

@@ -7,27 +7,35 @@ const Welcome = ({ loading, name }) => (
     className={classnames(
       'vads-u-display--flex',
       'vads-u-justify-content--flex-start',
-      'vads-u-border-color--gray-light',
-      'vads-u-border-bottom--2px',
-      'vads-u-margin-bottom--3',
+      'vads-u-margin-bottom--1p5',
       { 'visibility:hidden': loading },
     )}
   >
-    <div>
-      <h2 className="vads-u-font-size--h4 medium-screen:vads-u-font-size--h3 vads-u-margin-top--0">
-        {!!name && (
-          <>
-            Welcome, <span data-dd-privacy="mask">{name}</span>
-          </>
-        )}
-        {!name && <>Welcome</>}
-      </h2>
-    </div>
+    <h2
+      className={classnames(
+        'vads-u-font-size--h4',
+        'medium-screen:vads-u-font-size--h3',
+        'vads-u-margin-top--0',
+        'vads-u-margin-bottom--0',
+      )}
+    >
+      {!!name && (
+        <>
+          Welcome, <span data-dd-privacy="mask">{name}</span>
+        </>
+      )}
+      {!name && <>Welcome</>}
+    </h2>
     <div className="vads-u-font-size--md medium-screen:vads-u-font-size--lg">
       <i
         aria-hidden="true"
-        role="img"
-        className="fas fa-user vads-u-color--primary-darker vads-u-padding-left--4 vads-u-padding-right--0p5"
+        className={classnames(
+          'fas',
+          'fa-user',
+          'vads-u-color--primary-darker',
+          'vads-u-padding-left--4',
+          'vads-u-padding-right--0p5',
+        )}
       />
       <va-link
         href="/profile"

src/applications/mhv-landing-page/mocks/api/index.js

@@ -6,18 +6,19 @@ const commonResponses = require('../../../../platform/testing/local-dev-mock-api
 const featureToggles = require('./feature-toggles/index');
 const user = require('./user/index');
 // const user = require('../../tests/fixtures/user.json');
-// const userLoa1 = require('../../tests/fixtures/user.loa1.json');
-// const userWithNoFacilities = require('../../tests/fixtures/user.no-facilities.json');
+// const loa1User = require('../../tests/fixtures/user.loa1.json');
+// const nonVaPatient = require('../../tests/fixtures/user.no-facilities.json');
 const folders = require('./mhv-api/messaging/folders/index');
 const personalInformation = require('../../tests/fixtures/personal-information.json');
 
 const responses = {
   ...commonResponses,
   'GET /v0/user': user.defaultUser,
+  // Please, keep these feature toggle settings up-to-date with production's feature toggles settings.
   'GET /v0/feature_toggles': featureToggles.generateFeatureToggles({
     mhvLandingPageEnabled: true,
     mhvLandingPagePersonalization: false,
-    mhvLandingPageEnableVaGovHealthToolsLinks: true,
+    mhvLandingPageEnableVaGovHealthToolsLinks: false,
   }),
   'GET /my_health/v1/messaging/folders': folders.allFoldersWithUnreadMessages,
   'GET /v0/profile/personal_information': personalInformation,