Arf/74185/arp landing page sign in link (#28225)

* ARF-74185 remove unused feature toggle mock

* ARF-74185 add USiP link to ARP landing page

ARF-74185 cypress test USiP link on ARP landing page

* ARF-74185 fix ARP authReturnUrl

* ARF-74185 fix ARP OAuth client ID

* ARF-74185 fix lint

* ARF-74185 fix ARP feature toggle and spec

* ARF-74185 update ARP client ID

* ARF-74185 update comment around ARP's USiP path constant

* ARF-74185 change ARP sign-in link to actual link but button-styled

src/applications/representatives/constants/index.js

@@ -0,0 +1,8 @@
+import * as USIP from './usip';
+
+export const SIGN_IN_URL = (function getSignInUrl() {
+  const url = new URL(USIP.PATH, USIP.BASE_URL);
+  url.searchParams.set(USIP.QUERY_PARAMS.application, USIP.APPS.ARP);
+  url.searchParams.set(USIP.QUERY_PARAMS.OAuth, true);
+  return url;
+})();

src/applications/representatives/constants/usip.js

@@ -0,0 +1,12 @@
+import environment from '@department-of-veterans-affairs/platform-utilities/environment';
+
+// To keep isolated application status, this is hardcoded rather than cross-app
+// imported from `login/manifest.json`.
+// https://depo-platform-documentation.scrollhelp.site/developer-docs/how-to-add-your-application-to-the-allow-list
+export const PATH = '/sign-in';
+export const { BASE_URL } = environment;
+
+export {
+  AUTH_PARAMS as QUERY_PARAMS,
+  EXTERNAL_APPS as APPS,
+} from 'platform/user/authentication/constants';

src/applications/representatives/containers/App.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import environment from '@department-of-veterans-affairs/platform-utilities/environment';
 import { VaLoadingIndicator } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import { useFeatureToggle } from '~/platform/utilities/feature-toggles/useFeatureToggle';
 
@@ -25,7 +24,7 @@ function App({ children }) {
     );
   }
 
-  if (!appEnabled && environment.isProduction()) {
+  if (!appEnabled) {
     return document.location.replace('/');
   }
 

src/applications/representatives/containers/LandingPage.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router';
 
+import { SIGN_IN_URL } from '../constants';
+
 const LandingPage = () => {
   return (
     <div className="homepage-hero__wrapper homepage-hero__look-and-feel">
@@ -33,10 +35,9 @@ const LandingPage = () => {
                 <h2 className="vads-u-font-size--md vads-u-line-height--5 vads-u-color--gray vads-u-margin-top--0 vads-u-padding-right--2 vads-u-font-family--sans vads-u-font-weight--normal">
                   Create an account to start managing power of attorney.
                 </h2>
-                <va-button
-                  className="vads-u-padding-x--4 vads-u-margin-bottom--3"
-                  text="Create account"
-                />
+                <a className="usa-button usa-button-primary" href={SIGN_IN_URL}>
+                  Sign in or create an account
+                </a>
               </div>
             </div>
           </div>

src/applications/representatives/tests/e2e/accessibility.cypress.spec.js

@@ -1,5 +1,3 @@
-import { generateFeatureToggles } from '../../mocks/feature-toggles';
-
 describe('Accessibility', () => {
   beforeEach(() => {
     cy.intercept('GET', '/v0/feature_toggles*', {
@@ -11,21 +9,18 @@ describe('Accessibility', () => {
 
   it('has accessible landing page', () => {
     cy.visit('/representatives');
-    generateFeatureToggles();
     cy.injectAxe();
     cy.axeCheck();
   });
 
   it('has accessible dashboard', () => {
     cy.visit('/representatives/dashboard');
-    generateFeatureToggles();
     cy.injectAxe();
     cy.axeCheck();
   });
 
   it('has accessible poa requests page', () => {
     cy.visit('/representatives/poa-requests');
-    generateFeatureToggles();
     cy.injectAxe();
     cy.axeCheck();
   });

src/applications/representatives/tests/e2e/representatives.cypress.spec.js

@@ -1,33 +1,57 @@
-import { generateFeatureToggles } from '../../mocks/feature-toggles';
-
 describe('Representatives', () => {
-  beforeEach(() => {
-    cy.intercept('GET', '/v0/feature_toggles*', {
-      data: {
-        features: [{ name: 'representatives_portal_frontend', value: true }],
-      },
+  const togglePortal = value => {
+    beforeEach(() => {
+      cy.intercept('GET', '/v0/feature_toggles*', {
+        data: {
+          features: [{ name: 'representatives_portal_frontend', value }],
+        },
+      });
+    });
+  };
+
+  describe('when feature is toggled off', () => {
+    togglePortal(false);
+
+    it('gates', () => {
+      cy.visit('/representatives');
+      cy.injectAxe();
+      cy.axeCheck();
+
+      cy.location('pathname').should('equal', '/');
     });
   });
 
-  it('allows navigation from landing page to dashboard to poa requests', () => {
-    cy.visit('/representatives')
-      .injectAxe()
-      .axeCheck();
-    generateFeatureToggles();
-    cy.contains('Welcome to Representative.VA.gov');
-    cy.contains('Until sign in is added use this to see dashboard').click();
-
-    cy.url()
-      .should('include', '/representatives/dashboard')
-      .injectAxe()
-      .axeCheck();
-    cy.contains('Accredited Representative Portal');
-    cy.contains('Manage power of attorney requests').click();
-
-    cy.url().should('include', '/representatives/poa-requests');
-    cy.injectAxe();
-    cy.axeCheck();
-    cy.contains('Power of attorney requests');
-    cy.get('[data-testid=poa-requests-table]').should('exist');
+  describe('when feature is toggled on', () => {
+    togglePortal(true);
+
+    it('allows navigation from landing page to dashboard to poa requests', () => {
+      cy.visit('/representatives');
+      cy.injectAxe();
+      cy.axeCheck();
+
+      cy.contains('Welcome to Representative.VA.gov');
+      cy.contains('Until sign in is added use this to see dashboard').click();
+
+      cy.url().should('include', '/representatives/dashboard');
+      cy.axeCheck();
+
+      cy.contains('Accredited Representative Portal');
+      cy.contains('Manage power of attorney requests').click();
+
+      cy.url().should('include', '/representatives/poa-requests');
+      cy.axeCheck();
+
+      cy.contains('Power of attorney requests');
+      cy.get('[data-testid=poa-requests-table]').should('exist');
+    });
+
+    it('allows navigation from landing page to unified sign-in page', () => {
+      cy.visit('/representatives');
+      cy.injectAxe();
+      cy.axeCheck();
+
+      cy.contains('Sign in or create an account').click();
+      cy.url().should('include', '/sign-in/?application=arp&oauth=true');
+    });
   });
 });

src/platform/user/authentication/config/constants.js

@@ -1,4 +1,6 @@
 /* eslint-disable camelcase */
+import { CLIENT_IDS } from '../../../utilities/oauth/constants';
+import { EXTERNAL_APPS } from '../constants';
 
 export const defaultSignInProviders = {
   logingov: true,
@@ -19,26 +21,26 @@ export const defaultMobileQueryParams = {
 };
 
 export const defaultMobileOAuthOptions = {
-  clientId: 'vamobile',
+  clientId: CLIENT_IDS.VAMOBILE,
   acr: { idme: 'loa3', dslogon: 'loa3', mhv: 'loa3', logingov: 'ial2' },
   acrSignup: { idme_signup: 'loa3', logingov_signup: 'ial2' },
 };
 
 export const defaultWebOAuthOptions = {
-  clientId: 'vaweb',
+  clientId: CLIENT_IDS.VAWEB,
   acr: { idme: 'min', dslogon: 'min', mhv: 'min', logingov: 'min' },
   acrSignup: { idme_signup: 'min', logingov_signup: 'min' },
   acrVerify: { idme: 'loa3', logingov: 'ial2' },
 };
 
 export const arpWebOAuthOptions = {
-  clientId: 'vaweb',
+  clientId: CLIENT_IDS.ARP,
   acr: { idme: 'loa3', logingov: 'ial2' },
   acrSignup: { idme_signup: 'loa3', logingov_signup: 'ial2' },
 };
 
 export const OAuthEnabledApplications = [
   undefined /* default */,
-  'vamobile',
-  'arp',
+  EXTERNAL_APPS.VA_FLAGSHIP_MOBILE,
+  EXTERNAL_APPS.ARP,
 ];

src/platform/user/authentication/config/staging.config.js

@@ -101,7 +101,12 @@ export default {
       allowPostLogin: true,
       allowRedirect: false,
     },
-    oAuthOptions: arpWebOAuthOptions,
+    oAuthOptions: {
+      ...arpWebOAuthOptions,
+      // TODO: refactor `CLIENT_IDS` to vary by environment. This is the value
+      // for the ARP frontend in staging.
+      clientId: 'ce6db4d7974daf061dccdd21ba9add14',
+    },
     OAuthEnabled: true,
     requiresVerification: false,
     externalRedirectUrl: EXTERNAL_REDIRECTS[EXTERNAL_APPS.ARP],

src/platform/user/authentication/constants.js

@@ -111,7 +111,7 @@ export const EXTERNAL_REDIRECTS = {
   [EXTERNAL_APPS.EBENEFITS]: `${eAuthURL}/ebenefits`,
   [EXTERNAL_APPS.VA_FLAGSHIP_MOBILE]: '',
   [EXTERNAL_APPS.VA_OCC_MOBILE]: `${eAuthURL}/MAP/users/v2/landing`,
-  [EXTERNAL_APPS.ARP]: `${environment.BASE_URL}/representative`,
+  [EXTERNAL_APPS.ARP]: `${environment.BASE_URL}/representatives`,
 };
 
 export const GA = {

src/platform/utilities/oauth/constants.js

@@ -29,6 +29,9 @@ export const CLIENT_IDS = {
   VAWEB: 'vaweb',
   VAMOBILE: 'vamobile',
   VAMOCK: 'vamock',
+  // TODO: refactor `CLIENT_IDS` to vary by environment. This is the value for
+  // the ARP frontend on localhost calling the ARP backend on localhost.
+  ARP: 'arp',
 };
 
 export const COOKIES = {