[SIMPLE_FORMS] feat: add ability to use custom login links (#29820)

* add logic to display primary action link * update logic to allow for any custom link
department-of-veterans-affairs · May 16, 2024 · f7a2ebb · f7a2ebb
1 parent fc5963e
commit f7a2ebb
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 6 deletions.
diff --git a/src/applications/simple-forms/21-4138/config/constants.js b/src/applications/simple-forms/21-4138/config/constants.js
@@ -95,10 +95,10 @@ export const OTHER_REASONS_OPTIONAL = Object.freeze({
   MEDAL_AWARD: 'I’m a Medal of Honor or Purple Heart award recipient.',
 });
 
-const PrimaryActionLink = ({ href, children }) => (
+export const PrimaryActionLink = ({ href = '/', children, onClick = null }) => (
   <div className="arrow" style={{ maxWidth: '75%' }}>
     <div className="vads-u-background-color--primary vads-u-padding--1">
-      <a className="vads-c-action-link--white" href={href}>
+      <a className="vads-c-action-link--white" href={href} onClick={onClick}>
         {children}
       </a>
     </div>

diff --git a/src/applications/simple-forms/21-4138/containers/IntroductionPage.jsx b/src/applications/simple-forms/21-4138/containers/IntroductionPage.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { isLOA3, isLoggedIn } from 'platform/user/selectors';
 import { IntroductionPageView } from '../../shared/components/IntroductionPageView';
-import { TITLE, SUBTITLE } from '../config/constants';
+import { TITLE, SUBTITLE, PrimaryActionLink } from '../config/constants';
 
 const IntroductionPage = props => {
   const { route } = props;
@@ -49,6 +49,7 @@ const IntroductionPage = props => {
     unauthStartText: 'Sign in to start your statement',
     displayNonVeteranMessaging: true,
     hideSipIntro: userLoggedIn && !userIdVerified,
+    customLink: PrimaryActionLink,
   };
 
   const ombInfo = {

diff --git a/src/applications/simple-forms/shared/components/IntroductionPageView.jsx b/src/applications/simple-forms/shared/components/IntroductionPageView.jsx
@@ -22,6 +22,7 @@ export const IntroductionPageView = ({
     unauthStartText,
     displayNonVeteranMessaging = false,
     verifiedPrefillAlert = null,
+    customLink = null,
   } = content;
   const { resBurden, ombNumber, expDate, customPrivacyActStmt } = ombInfo;
 
@@ -45,6 +46,7 @@ export const IntroductionPageView = ({
           verifiedPrefillAlert={verifiedPrefillAlert}
           formConfig={formConfig}
           hideUnauthedStartLink={formConfig.hideUnauthedStartLink ?? false}
+          customLink={customLink}
         >
           {saveInProgressText}
         </SaveInProgressIntro>
@@ -90,6 +92,7 @@ IntroductionPageView.propTypes = {
     unauthStartText: PropTypes.string,
     displayNonVeteranMessaging: PropTypes.bool,
     verifiedPrefillAlert: PropTypes.object,
+    customLink: PropTypes.any,
   }),
   ombInfo: PropTypes.shape(),
 };
diff --git a/src/platform/forms/save-in-progress/FormStartControls.jsx b/src/platform/forms/save-in-progress/FormStartControls.jsx
@@ -5,12 +5,12 @@ import {
   VaButton,
   VaModal,
 } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
-import recordEvent from '../../monitoring/record-event';
-
 import {
   WIZARD_STATUS,
   WIZARD_STATUS_RESTARTING,
 } from '~/platform/site-wide/wizard';
+import recordEvent from '../../monitoring/record-event';
+
 import {
   CONTINUE_APP_DEFAULT_MESSAGE,
   START_NEW_APP_DEFAULT_MESSAGE,
@@ -27,6 +27,7 @@ const FormStartControls = props => {
     prefillTransformer,
     ariaLabel = null,
     ariaDescribedby = null,
+    customStartLink = null,
     startText,
     formSaved,
     isExpired,
@@ -129,6 +130,21 @@ const FormStartControls = props => {
     );
   }
 
+  if (customStartLink) {
+    const CustomLink = customStartLink;
+    return (
+      <CustomLink
+        href="#start"
+        onClick={event => {
+          event.preventDefault();
+          handleLoadPrefill();
+        }}
+      >
+        {startText}
+      </CustomLink>
+    );
+  }
+
   return (
     <a
       href="#start"
@@ -155,6 +171,7 @@ FormStartControls.propTypes = {
   startPage: PropTypes.string.isRequired,
   ariaDescribedby: PropTypes.string,
   ariaLabel: PropTypes.string,
+  customStartLink: PropTypes.any,
   formConfig: PropTypes.shape({
     customText: PropTypes.shape({
       startNewAppButtonText: PropTypes.string,

diff --git a/src/platform/forms/save-in-progress/SaveInProgressIntro.jsx b/src/platform/forms/save-in-progress/SaveInProgressIntro.jsx
@@ -55,6 +55,7 @@ class SaveInProgressIntro extends React.Component {
         gaStartEventName={this.props.gaStartEventName}
         ariaLabel={this.props.ariaLabel}
         ariaDescribedby={this.props.ariaDescribedby}
+        customStartLink={this.props.customLink}
       />
     );
   };
@@ -202,7 +203,18 @@ class SaveInProgressIntro extends React.Component {
         retentionPeriodStart,
         unauthStartText,
       } = this.props;
-      const unauthStartButton = (
+      const CustomLink = this.props.customLink;
+      const unauthStartButton = CustomLink ? (
+        <CustomLink
+          href="#start"
+          onClick={event => {
+            event.preventDefault();
+            this.openLoginModal();
+          }}
+        >
+          {unauthStartText || UNAUTH_SIGN_IN_DEFAULT_MESSAGE}
+        </CustomLink>
+      ) : (
         <VaButton
           onClick={this.openLoginModal}
           label={ariaLabel}
@@ -426,6 +438,7 @@ SaveInProgressIntro.propTypes = {
   ariaLabel: PropTypes.string,
   buttonOnly: PropTypes.bool,
   children: PropTypes.any,
+  customLink: PropTypes.any,
   displayNonVeteranMessaging: PropTypes.bool,
   downtime: PropTypes.object,
   formConfig: PropTypes.shape({
@@ -473,6 +486,7 @@ SaveInProgressIntro.defaultProps = {
   headingLevel: 2,
   ariaLabel: null,
   ariaDescribedby: null,
+  customLink: null,
 };
 
 function mapStateToProps(state) {