Show "Login.gov" app name in IdV app password confirmation step

app/controllers/verify_controller.rb

@@ -24,7 +24,6 @@ def app_data
 
     {
       base_path: idv_app_path,
-      app_name: APP_NAME,
       completion_url: completion_url,
       initial_values: initial_values,
       enabled_step_names: IdentityConfig.store.idv_api_enabled_steps,

app/javascript/packages/analytics/index.ts

@@ -0,0 +1,20 @@
+import { getConfigValue } from '@18f/identity-config';
+
+/**
+ * Logs an event.
+ *
+ * @param event Event name.
+ * @param payload Payload object.
+ *
+ * @return Promise resolving once event has been logged.
+ */
+export async function trackEvent(event: string, payload: object = {}): Promise<void> {
+  const endpoint = getConfigValue('analyticsEndpoint');
+  if (endpoint) {
+    await window.fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ event, payload }),
+    });
+  }
+}

app/javascript/packages/config/get-config-value.spec.ts

@@ -0,0 +1,32 @@
+import getConfigValue from './get-config-value';
+import type { Config } from './get-config-value';
+
+describe('getConfigValue', () => {
+  context('with page config element absent', () => {
+    it('returns undefined', () => {
+      expect(getConfigValue('appName')).to.be.undefined();
+      expect(getConfigValue('analyticsEndpoint')).to.be.undefined();
+    });
+  });
+
+  context('with page config element present', () => {
+    const APP_NAME = 'app';
+    const ANALYTICS_ENDPOINT = 'url';
+
+    beforeEach(() => {
+      const config = document.createElement('script');
+      config.type = 'application/json';
+      config.setAttribute('data-config', '');
+      config.textContent = JSON.stringify({
+        appName: APP_NAME,
+        analyticsEndpoint: ANALYTICS_ENDPOINT,
+      } as Config);
+      document.body.appendChild(config);
+    });
+
+    it('returns the config value corresponding to the given key', () => {
+      expect(getConfigValue('appName')).to.equal(APP_NAME);
+      expect(getConfigValue('analyticsEndpoint')).to.equal(ANALYTICS_ENDPOINT);
+    });
+  });
+});

app/javascript/packages/config/get-config-value.ts

@@ -0,0 +1,45 @@
+/**
+ * Supported page configuration values.
+ */
+export interface Config {
+  /**
+   * Application name.
+   */
+  appName: string;
+
+  /**
+   * URL for analytics logging endpoint.
+   */
+  analyticsEndpoint: string;
+}
+
+/**
+ * Cached configuration.
+ */
+let cache: Partial<Config>;
+
+/**
+ * Whether configuration should be cached in this environment.
+ */
+const isCacheEnvironment = process.env.NODE_ENV !== 'test';
+
+/**
+ * Returns the value associated as initialized through page configuration, if available.
+ *
+ * @param key Key for which to return value.
+ *
+ * @return Value, if exists.
+ */
+function getConfigValue<K extends keyof Config>(key: K): Config[K] | undefined {
+  if (cache === undefined || !isCacheEnvironment) {
+    try {
+      cache = JSON.parse(document.querySelector('[data-config]')?.textContent || '');
+    } catch {
+      cache = {};
+    }
+  }
+
+  return cache[key];
+}
+
+export default getConfigValue;

app/javascript/packages/config/index.ts

@@ -0,0 +1 @@
+export { default as getConfigValue } from './get-config-value';

app/javascript/packages/page-data/package.json → app/javascript/packages/config/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@18f/identity-page-data",
+  "name": "@18f/identity-config",
   "private": true,
   "version": "1.0.0"
 }

app/javascript/packages/verify-flow/steps/password-confirm/index.ts

@@ -1,12 +1,13 @@
 import { t } from '@18f/identity-i18n';
+import { getConfigValue } from '@18f/identity-config';
 import type { FormStep } from '@18f/identity-form-steps';
 import type { VerifyFlowValues } from '../../verify-flow';
 import form from './password-confirm-step';
 import submit from './submit';
 
 export default {
   name: 'password_confirm',
-  title: t('idv.titles.session.review'),
+  title: t('idv.titles.session.review', { app_name: getConfigValue('appName') }),
   form,
   submit,
 } as FormStep<VerifyFlowValues>;

app/javascript/packages/verify-flow/verify-flow.spec.tsx

@@ -14,18 +14,14 @@ describe('VerifyFlow', () => {
     sandbox.stub(window, 'fetch').resolves({
       json: () => Promise.resolve({ personal_key: personalKey }),
     } as Response);
+    document.body.innerHTML = `<script type="application/json" data-config>{"appName":"Example App"}</script>`;
   });
 
   it('advances through flow to completion', async () => {
     const onComplete = sandbox.spy();
 
     const { getByText, findByText, getByLabelText } = render(
-      <VerifyFlow
-        appName="Example App"
-        initialValues={{ personalKey }}
-        onComplete={onComplete}
-        basePath="/"
-      />,
+      <VerifyFlow initialValues={{ personalKey }} onComplete={onComplete} basePath="/" />,
     );
 
     // Password confirm
@@ -59,7 +55,6 @@ describe('VerifyFlow', () => {
     it('sets details according to the first enabled steps', () => {
       render(
         <VerifyFlow
-          appName="Example App"
           initialValues={{ personalKey }}
           onComplete={() => {}}
           enabledStepNames={[STEPS[1].name]}

app/javascript/packages/verify-flow/verify-flow.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { FormSteps } from '@18f/identity-form-steps';
 import { trackEvent } from '@18f/identity-analytics';
+import { getConfigValue } from '@18f/identity-config';
 import { STEPS } from './steps';
 import VerifyFlowStepIndicator from './verify-flow-step-indicator';
 import VerifyFlowAlert from './verify-flow-alert';
@@ -51,11 +52,6 @@ interface VerifyFlowProps {
    */
   basePath: string;
 
-  /**
-   * Application name, used in generating page titles for current step.
-   */
-  appName: string;
-
   /**
    * Callback invoked after completing the form.
    */
@@ -87,7 +83,6 @@ function VerifyFlow({
   initialValues = {},
   enabledStepNames,
   basePath,
-  appName,
   onComplete,
 }: VerifyFlowProps) {
   let steps = STEPS;
@@ -117,7 +112,7 @@ function VerifyFlow({
         initialStep={initialStep}
         promptOnNavigate={false}
         basePath={basePath}
-        titleFormat={`%{step} - ${appName}`}
+        titleFormat={`%{step} - ${getConfigValue('appName')}`}
         onChange={setSyncedValues}
         onStepSubmit={onStepSubmit}
         onStepChange={setCurrentStep}

app/javascript/packs/doc-capture-polling.ts

@@ -0,0 +1,11 @@
+import { DocumentCapturePolling } from '@18f/identity-document-capture-polling';
+
+new DocumentCapturePolling({
+  statusEndpoint: document
+    .querySelector('[data-status-endpoint]')
+    ?.getAttribute('data-status-endpoint') as string,
+  elements: {
+    backLink: document.querySelector('.link-sent-back-link') as HTMLAnchorElement,
+    form: document.querySelector('.link-sent-continue-button-form') as HTMLFormElement,
+  },
+}).bind();

app/javascript/packs/verify-flow.tsx

@@ -19,11 +19,6 @@ interface AppRootValues {
    */
   basePath: string;
 
-  /**
-   * Application name.
-   */
-  appName: string;
-
   /**
    * URL to which user should be redirected after completing the form.
    */
@@ -49,7 +44,6 @@ const {
   initialValues: initialValuesJSON,
   enabledStepNames: enabledStepNamesJSON,
   basePath,
-  appName,
   completionUrl: completionURL,
   storeKey: storeKeyBase64,
 } = appRoot.dataset;
@@ -93,7 +87,6 @@ const storage = new SecretSessionStorage<SecretValues>('verify');
         initialValues={initialValues}
         enabledStepNames={enabledStepNames}
         basePath={basePath}
-        appName={appName}
         onComplete={onComplete}
       />
     </SecretsContextProvider>,

app/views/idv/doc_auth/link_sent.html.erb

@@ -37,7 +37,7 @@
 </div>
 
 <% if FeatureManagement.doc_capture_polling_enabled? %>
-  <%= content_tag 'script', '', data: { doc_capture_status_endpoint: idv_capture_doc_status_url } %>
+  <%= content_tag 'script', '', data: { status_endpoint: idv_capture_doc_status_url } %>
   <%= javascript_packs_tag_once 'doc-capture-polling' %>
 <% end %>
 

app/views/layouts/base.html.erb

@@ -84,7 +84,15 @@
                } %>
   <% end %>
 
-  <%= content_tag 'script', '', data: { analytics_endpoint: api_logger_path } %>
+  <%= content_tag(
+        :script,
+        {
+          'appName' => APP_NAME,
+          'analyticsEndpoint' => api_logger_path,
+        }.to_json,
+        { type: 'application/json', data: { config: '' } },
+        false,
+      ) %>
   <%= javascript_packs_tag_once('application', prepend: true) %>
   <%= render_javascript_pack_once_tags %>
 

spec/controllers/verify_controller_spec.rb

@@ -67,7 +67,6 @@
           response
 
           expect(assigns[:app_data]).to include(
-            app_name: APP_NAME,
             base_path: idv_app_path,
             completion_url: idv_gpo_verify_url,
             enabled_step_names: idv_api_enabled_steps,
@@ -97,7 +96,6 @@
           response
 
           expect(assigns[:app_data]).to include(
-            app_name: APP_NAME,
             base_path: idv_app_path,
             completion_url: account_url,
             enabled_step_names: idv_api_enabled_steps,

spec/features/visitors/i18n_spec.rb

@@ -22,10 +22,9 @@
       end
 
       it 'initializes front-end logger with default locale' do
-        expect(page).to have_selector(
-          "[data-analytics-endpoint='#{api_logger_path(locale: nil)}']",
-          visible: :all,
-        )
+        config = JSON.parse(page.find('[data-config]', visible: :all).text(:all))
+
+        expect(config['analyticsEndpoint']).to eq api_logger_path(locale: nil)
       end
     end
 
@@ -37,10 +36,9 @@
       end
 
       it 'initializes front-end logger with locale parameter' do
-        expect(page).to have_selector(
-          "[data-analytics-endpoint='#{api_logger_path(locale: 'es')}']",
-          visible: :all,
-        )
+        config = JSON.parse(page.find('[data-config]', visible: :all).text(:all))
+
+        expect(config['analyticsEndpoint']).to eq api_logger_path(locale: 'es')
       end
     end
 

spec/javascripts/packages/analytics/index-spec.js

@@ -21,7 +21,7 @@ describe('trackEvent', () => {
     const endpoint = '/log';
 
     beforeEach(() => {
-      document.body.innerHTML = `<script data-analytics-endpoint="${endpoint}"></script>`;
+      document.body.innerHTML = `<script type="application/json" data-config>{"analyticsEndpoint":"${endpoint}"}</script>`;
     });
 
     context('no payload', () => {