From 17632f673e37d28f7829e0d3c153aa78d6e887f5 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Fri, 3 Jun 2022 15:06:43 -0400
Subject: [PATCH 1/5] Refactor account personal key reset to use verify flow
 steps

**Why**: So that we're not permanently maintaining two separate implementations, aim to reuse the new FormSteps-based implementation. Future work should remove the "shared/personal_key" partial and "personal-key-page-controller" script once the IdV app has shipped and stabilized.

changelog: Upcoming Features, Identity Verification, Add personal key step screen
---
 ...dress-verification-method-context.spec.tsx |  4 ++--
 .../address-verification-method-context.tsx   |  4 ++--
 app/javascript/packages/verify-flow/index.ts  |  2 ++
 .../steps/personal-key/personal-key-step.tsx  | 11 +++++----
 app/javascript/packs/verify-personal-key.tsx  | 24 +++++++++++++++++++
 app/views/users/personal_keys/show.html.erb   |  4 +++-
 6 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 app/javascript/packs/verify-personal-key.tsx

diff --git a/app/javascript/packages/verify-flow/context/address-verification-method-context.spec.tsx b/app/javascript/packages/verify-flow/context/address-verification-method-context.spec.tsx
index b51b41b20eb..a7de94b2d93 100644
--- a/app/javascript/packages/verify-flow/context/address-verification-method-context.spec.tsx
+++ b/app/javascript/packages/verify-flow/context/address-verification-method-context.spec.tsx
@@ -12,7 +12,7 @@ describe('AddressVerificationMethodContextProvider', () => {
     );
     return (
       <>
-        <div>Current value: {addressVerificationMethod}</div>
+        <div>Current value: {String(addressVerificationMethod)}</div>
         <button
           type="button"
           onClick={() =>
@@ -32,7 +32,7 @@ describe('AddressVerificationMethodContextProvider', () => {
       </AddressVerificationMethodContextProvider>,
     );
 
-    expect(getByText('Current value: phone')).to.exist();
+    expect(getByText('Current value: null')).to.exist();
   });
 
   it('can be overridden with an initial method', () => {
diff --git a/app/javascript/packages/verify-flow/context/address-verification-method-context.tsx b/app/javascript/packages/verify-flow/context/address-verification-method-context.tsx
index 66a1a7d092a..254150cb248 100644
--- a/app/javascript/packages/verify-flow/context/address-verification-method-context.tsx
+++ b/app/javascript/packages/verify-flow/context/address-verification-method-context.tsx
@@ -5,7 +5,7 @@ import type { ReactNode } from 'react';
 /**
  * Mechanisms by which a user can verify their address.
  */
-export type AddressVerificationMethod = 'phone' | 'gpo';
+export type AddressVerificationMethod = 'phone' | 'gpo' | null;
 
 /**
  * Context provider props.
@@ -40,7 +40,7 @@ interface AddressVerificationMethodContextValue {
 /**
  * Default address verification method.
  */
-const DEFAULT_METHOD: AddressVerificationMethod = 'phone';
+const DEFAULT_METHOD: AddressVerificationMethod = null;
 
 /**
  * Address verification method context container.
diff --git a/app/javascript/packages/verify-flow/index.ts b/app/javascript/packages/verify-flow/index.ts
index a4d10d989ad..0d404411b7f 100644
--- a/app/javascript/packages/verify-flow/index.ts
+++ b/app/javascript/packages/verify-flow/index.ts
@@ -2,6 +2,8 @@ export { default as FlowContext } from './context/flow-context';
 export { SecretsContextProvider } from './context/secrets-context';
 export { default as StartOverOrCancel } from './start-over-or-cancel';
 export { default as VerifyFlow } from './verify-flow';
+export { default as personalKeyStep } from './steps/personal-key';
+export { default as personalKeyConfirmStep } from './steps/personal-key-confirm';
 
 export type { SecretValues } from './context/secrets-context';
 export type { AddressVerificationMethod } from './context/address-verification-method-context';
diff --git a/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.tsx b/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.tsx
index f8827dacff1..1f5814124c4 100644
--- a/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.tsx
+++ b/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.tsx
@@ -20,11 +20,12 @@ function PersonalKeyStep({ value }: PersonalKeyStepProps) {
 
   return (
     <>
-      <Alert type="success" className="margin-bottom-4">
-        {addressVerificationMethod === 'phone'
-          ? t('idv.messages.confirm')
-          : t('idv.messages.mail_sent')}
-      </Alert>
+      {addressVerificationMethod && (
+        <Alert type="success" className="margin-bottom-4">
+          {addressVerificationMethod === 'phone' && t('idv.messages.confirm')}
+          {addressVerificationMethod === 'gpo' && t('idv.messages.mail_sent')}
+        </Alert>
+      )}
       <PageHeading>{t('headings.personal_key')}</PageHeading>
       <p>{t('instructions.personal_key.info')}</p>
       <div className="full-width-box margin-y-5">
diff --git a/app/javascript/packs/verify-personal-key.tsx b/app/javascript/packs/verify-personal-key.tsx
new file mode 100644
index 00000000000..ede5e5c5af9
--- /dev/null
+++ b/app/javascript/packs/verify-personal-key.tsx
@@ -0,0 +1,24 @@
+import { render } from 'react-dom';
+import { FormSteps } from '@18f/identity-form-steps';
+import { personalKeyStep, personalKeyConfirmStep } from '@18f/identity-verify-flow';
+
+interface AppRootValues {
+  personalKey: string;
+}
+
+interface AppRootElement extends HTMLElement {
+  dataset: DOMStringMap & AppRootValues;
+}
+
+const appRoot = document.getElementById('app-root') as AppRootElement;
+const appForm = document.getElementById('app-form') as HTMLFormElement;
+
+render(
+  <FormSteps
+    steps={[personalKeyStep, personalKeyConfirmStep]}
+    initialValues={{ personalKey: appRoot.dataset.personalKey }}
+    promptOnNavigate={false}
+    onComplete={() => appForm.submit()}
+  />,
+  appRoot,
+);
diff --git a/app/views/users/personal_keys/show.html.erb b/app/views/users/personal_keys/show.html.erb
index 32e18e00a0f..aa3d67a028d 100644
--- a/app/views/users/personal_keys/show.html.erb
+++ b/app/views/users/personal_keys/show.html.erb
@@ -1,3 +1,5 @@
 <% title t('titles.personal_key') %>
 
-<%= render 'shared/personal_key', code: @code, update_path: manage_personal_key_path %>
+<%= form_tag(manage_personal_key_path, method: 'post', id: 'app-form') %>
+<%= content_tag(:div, '', id: 'app-root', data: { personal_key: @code }) %>
+<%= javascript_packs_tag_once('verify-personal-key') %>

From 30bfbc8f46a57fdf00ee2bd05ee0a117888bf15b Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Mon, 6 Jun 2022 08:27:56 -0400
Subject: [PATCH 2/5] Use common props for VerifyFlow specs

Specify address verification method to satisfy expected non-null behavior
---
 .../packages/verify-flow/verify-flow.spec.tsx        | 12 ++++++++----
 app/javascript/packages/verify-flow/verify-flow.tsx  |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/javascript/packages/verify-flow/verify-flow.spec.tsx b/app/javascript/packages/verify-flow/verify-flow.spec.tsx
index 8fc5a5f9ce1..3ac973b004a 100644
--- a/app/javascript/packages/verify-flow/verify-flow.spec.tsx
+++ b/app/javascript/packages/verify-flow/verify-flow.spec.tsx
@@ -4,11 +4,16 @@ import userEvent from '@testing-library/user-event';
 import * as analytics from '@18f/identity-analytics';
 import { useSandbox } from '@18f/identity-test-helpers';
 import { STEPS } from './steps';
-import VerifyFlow from './verify-flow';
+import VerifyFlow, { VerifyFlowProps } from './verify-flow';
 
 describe('VerifyFlow', () => {
   const sandbox = useSandbox();
   const personalKey = '0000-0000-0000-0000';
+  const DEFAULT_PROPS = {
+    basePath: '/',
+    initialAddressVerificationMethod: 'phone',
+    onComplete: () => {},
+  } as VerifyFlowProps;
 
   beforeEach(() => {
     sandbox.spy(analytics, 'trackEvent');
@@ -23,7 +28,7 @@ describe('VerifyFlow', () => {
     const onComplete = sandbox.spy();
 
     const { getByText, findByText, getByLabelText } = render(
-      <VerifyFlow initialValues={{ personalKey }} onComplete={onComplete} basePath="/" />,
+      <VerifyFlow {...DEFAULT_PROPS} initialValues={{ personalKey }} onComplete={onComplete} />,
     );
 
     // Password confirm
@@ -62,10 +67,9 @@ describe('VerifyFlow', () => {
     it('sets details according to the first enabled steps', () => {
       render(
         <VerifyFlow
+          {...DEFAULT_PROPS}
           initialValues={{ personalKey }}
-          onComplete={() => {}}
           enabledStepNames={[STEPS[1].name]}
-          basePath="/"
         />,
       );
 
diff --git a/app/javascript/packages/verify-flow/verify-flow.tsx b/app/javascript/packages/verify-flow/verify-flow.tsx
index 99aaf291ddc..d155e306c6f 100644
--- a/app/javascript/packages/verify-flow/verify-flow.tsx
+++ b/app/javascript/packages/verify-flow/verify-flow.tsx
@@ -45,7 +45,7 @@ export interface VerifyFlowValues {
   completionURL?: string;
 }
 
-interface VerifyFlowProps {
+export interface VerifyFlowProps {
   /**
    * Initial values for the form, if applicable.
    */

From f2e03c5e89c81f077f88cacb031e3f17dcec4eed Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Mon, 6 Jun 2022 09:09:18 -0400
Subject: [PATCH 3/5] Update personal key regenerate specs as JS-enabled shared
 examples

---
 .../idv/steps/confirmation_step_spec.rb       |  81 +++++++++-----
 .../users/regenerate_personal_key_spec.rb     | 103 +-----------------
 .../support/idv_examples/confirmation_step.rb |  78 -------------
 .../shared_examples_for_personal_keys.rb      |  22 +++-
 4 files changed, 71 insertions(+), 213 deletions(-)
 delete mode 100644 spec/support/idv_examples/confirmation_step.rb

diff --git a/spec/features/idv/steps/confirmation_step_spec.rb b/spec/features/idv/steps/confirmation_step_spec.rb
index 6fa9a067290..59e877eff29 100644
--- a/spec/features/idv/steps/confirmation_step_spec.rb
+++ b/spec/features/idv/steps/confirmation_step_spec.rb
@@ -3,54 +3,75 @@
 feature 'idv confirmation step', js: true do
   include IdvStepHelper
 
-  it_behaves_like 'idv confirmation step'
-  it_behaves_like 'idv confirmation step', :oidc
-  it_behaves_like 'idv confirmation step', :saml
+  let(:idv_api_enabled_steps) { [] }
+  let(:sp) { nil }
 
-  context 'personal key information and actions' do
-    before do
-      @user = sign_in_and_2fa_user
+  before do
+    allow(IdentityConfig.store).to receive(:idv_api_enabled_steps).and_return(idv_api_enabled_steps)
+    start_idv_from_sp(sp)
+    complete_idv_steps_before_confirmation_step
+  end
 
-      visit idv_path
+  it_behaves_like 'personal key page'
 
-      complete_idv_steps_before_confirmation_step(@user)
-    end
+  it 'shows status content for phone verification progress' do
+    expect(page).to have_content(t('idv.messages.confirm'))
+    expect(page).to have_css(
+      '.step-indicator__step--current',
+      text: t('step_indicator.flows.idv.secure_account'),
+    )
+    expect(page).to have_css(
+      '.step-indicator__step--complete',
+      text: t('step_indicator.flows.idv.verify_phone_or_address'),
+    )
+    expect(page).not_to have_css('.step-indicator__step--pending')
+  end
+
+  it 'allows the user to refresh and still displays the personal key' do
+    # Visit the current path is the same as refreshing
+    visit current_path
+    expect(page).to have_content(t('headings.personal_key'))
+  end
+
+  context 'with idv app feature enabled' do
+    let(:idv_api_enabled_steps) { ['password_confirm', 'personal_key', 'personal_key_confirm'] }
+
+    it_behaves_like 'personal key page'
 
     it 'allows the user to refresh and still displays the personal key' do
       # Visit the current path is the same as refreshing
       visit current_path
       expect(page).to have_content(t('headings.personal_key'))
     end
-
-    it_behaves_like 'personal key page'
   end
 
-  context 'with idv app feature enabled' do
-    before do
-      allow(IdentityConfig.store).to receive(:idv_api_enabled_steps).
-        and_return(['password_confirm', 'personal_key', 'personal_key_confirm'])
+  context 'verifying by gpo' do
+    it 'shows status content for gpo verification progress' do
+      expect(page).to have_content(t('idv.messages.mail_sent'))
+      expect(page).to have_css(
+        '.step-indicator__step--current',
+        text: t('step_indicator.flows.idv.secure_account'),
+      )
+      expect(page).to have_css(
+        '.step-indicator__step--pending',
+        text: t('step_indicator.flows.idv.verify_phone_or_address'),
+      )
     end
 
-    it_behaves_like 'idv confirmation step'
-    it_behaves_like 'idv confirmation step', :oidc
-    it_behaves_like 'idv confirmation step', :saml
+    it_behaves_like 'personal key page', :gpo
+  end
 
-    context 'personal key information and actions' do
-      before do
-        @user = sign_in_and_2fa_user
+  context 'with associated sp' do
+    let(:sp) { :oidc }
 
-        visit idv_path
+    it 'redirects to the completions page and then to the SP' do
+      acknowledge_and_confirm_personal_key
 
-        complete_idv_steps_before_confirmation_step(@user)
-      end
+      expect(page).to have_current_path(sign_up_completed_path)
 
-      it 'allows the user to refresh and still displays the personal key' do
-        # Visit the current path is the same as refreshing
-        visit current_path
-        expect(page).to have_content(t('headings.personal_key'))
-      end
+      click_agree_and_continue
 
-      it_behaves_like 'personal key page'
+      expect(current_url).to start_with('http://localhost:7654/auth/result')
     end
   end
 end
diff --git a/spec/features/users/regenerate_personal_key_spec.rb b/spec/features/users/regenerate_personal_key_spec.rb
index 95acd31d4d2..5a595988db2 100644
--- a/spec/features/users/regenerate_personal_key_spec.rb
+++ b/spec/features/users/regenerate_personal_key_spec.rb
@@ -1,6 +1,6 @@
 require 'rails_helper'
 
-feature 'View personal key' do
+feature 'View personal key', js: true do
   include XPathHelper
   include PersonalKeyHelper
   include SamlAuthHelper
@@ -31,7 +31,7 @@
     end
 
     context 'regenerating new code after canceling edit password action' do
-      scenario 'displays new code', js: true do
+      scenario 'displays new code' do
         sign_in_and_2fa_user(user)
         old_digest = user.encrypted_recovery_code_digest
 
@@ -59,7 +59,7 @@
       end
     end
 
-    context 'personal key actions and information' do
+    describe 'personal key actions and information' do
       before do
         sign_in_and_2fa_user(user)
         visit account_two_factor_authentication_path
@@ -70,101 +70,4 @@
       it_behaves_like 'personal key page'
     end
   end
-
-  context 'with javascript enabled', js: true do
-    it 'prompts the user to enter their personal key to confirm they have it' do
-      sign_in_and_2fa_user(user)
-      visit account_two_factor_authentication_path
-      click_on(t('account.links.regenerate_personal_key'), match: :prefer_exact)
-      click_continue
-
-      click_acknowledge_personal_key
-
-      expect_confirmation_modal_to_appear_with_first_code_field_in_focus
-
-      expect(page).to have_selector(:link_or_button, 'Back')
-
-      click_back_button
-
-      expect_to_be_back_on_manage_personal_key_page_with_continue_button_in_focus
-
-      click_acknowledge_personal_key
-      submit_form_without_entering_the_code
-      submit_form_with_the_wrong_code
-
-      expect(current_path).not_to eq account_path
-
-      visit manage_personal_key_path
-
-      acknowledge_and_confirm_personal_key
-
-      expect(current_path).to eq account_path
-    end
-
-    it 'confirms personal key on mobile', driver: :headless_chrome_mobile do
-      sign_in_and_2fa_user(user)
-      visit account_two_factor_authentication_path
-      click_on(t('account.links.regenerate_personal_key'), match: :prefer_exact)
-      click_continue
-
-      click_acknowledge_personal_key
-
-      expect_confirmation_modal_to_appear_with_first_code_field_in_focus
-
-      expect(page).to have_selector(:link_or_button, 'Back')
-
-      click_back_button
-
-      expect_to_be_back_on_manage_personal_key_page_with_continue_button_in_focus
-
-      click_acknowledge_personal_key
-      submit_form_without_entering_the_code
-
-      expect(current_path).not_to eq account_path
-
-      visit manage_personal_key_path
-      acknowledge_and_confirm_personal_key
-
-      expect(current_path).to eq account_path
-    end
-  end
-end
-
-def sign_up_and_view_personal_key
-  sign_up_and_set_password
-  select_2fa_option('phone')
-  fill_in 'new_phone_form_phone', with: '202-555-1212'
-  click_send_security_code
-  fill_in_code_with_last_phone_otp
-  click_submit_default
-end
-
-def expect_confirmation_modal_to_appear_with_first_code_field_in_focus
-  expect(page.find(':focus')).to eq page.find_field(t('forms.personal_key.confirmation_label'))
-end
-
-def click_back_button
-  click_on t('forms.buttons.back')
-end
-
-def expect_to_be_back_on_manage_personal_key_page_with_continue_button_in_focus
-  expect(page).to have_xpath(
-    "//div[@id='personal-key-confirm'][@class='display-none']", visible: false
-  )
-  expect(page.evaluate_script('document.activeElement.value')).to eq(
-    t('forms.buttons.continue'),
-  )
-end
-
-def submit_form_without_entering_the_code
-  within('[role=dialog]') { click_continue }
-  expect(page).to have_content(t('simple_form.required.text'))
-  expect(page).not_to have_content(t('users.personal_key.confirmation_error'))
-end
-
-def submit_form_with_the_wrong_code
-  fill_in 'personal_key', with: 'hellohellohello'
-  within('[role=dialog]') { click_continue }
-  expect(page).to have_content(t('users.personal_key.confirmation_error'))
-  expect(page).not_to have_content(t('simple_form.required.text'))
 end
diff --git a/spec/support/idv_examples/confirmation_step.rb b/spec/support/idv_examples/confirmation_step.rb
deleted file mode 100644
index 1d355a231ba..00000000000
--- a/spec/support/idv_examples/confirmation_step.rb
+++ /dev/null
@@ -1,78 +0,0 @@
-shared_examples 'idv confirmation step' do |sp|
-  context 'after choosing to verify by letter' do
-    before do
-      start_idv_from_sp(sp)
-      complete_idv_steps_with_gpo_before_confirmation_step
-    end
-
-    it 'redirects to the come back later url then to the sp or account' do
-      acknowledge_and_confirm_personal_key
-
-      expect(page).to have_current_path(idv_come_back_later_path)
-      click_on t('forms.buttons.continue')
-
-      if sp == :oidc
-        expect(current_url).to start_with('http://localhost:7654/auth/result')
-      elsif sp == :saml
-        expect(current_url).to start_with('http://example.com/')
-      else
-        expect(current_url).to eq(account_url)
-      end
-    end
-
-    context 'user selected gpo verification' do
-      it 'shows status content for gpo verification progress' do
-        expect(page).to have_content(t('idv.messages.mail_sent'))
-        expect(page).to have_css(
-          '.step-indicator__step--current',
-          text: t('step_indicator.flows.idv.secure_account'),
-        )
-        expect(page).to have_css(
-          '.step-indicator__step--pending',
-          text: t('step_indicator.flows.idv.verify_phone_or_address'),
-        )
-      end
-    end
-  end
-
-  context 'after choosing to verify by phone' do
-    before do
-      start_idv_from_sp(sp)
-      complete_idv_steps_with_phone_before_confirmation_step
-    end
-
-    it 'shows status content for phone verification progress' do
-      expect(page).to have_content(t('idv.messages.confirm'))
-      expect(page).to have_css(
-        '.step-indicator__step--current',
-        text: t('step_indicator.flows.idv.secure_account'),
-      )
-      expect(page).to have_css(
-        '.step-indicator__step--complete',
-        text: t('step_indicator.flows.idv.verify_phone_or_address'),
-      )
-      expect(page).not_to have_css('.step-indicator__step--pending')
-    end
-
-    it 'redirects to the completions page and then to the SP', if: sp.present? do
-      acknowledge_and_confirm_personal_key
-
-      expect(page).to have_current_path(sign_up_completed_path)
-
-      click_agree_and_continue
-
-      if sp == :oidc
-        expect(current_url).to start_with('http://localhost:7654/auth/result')
-      else
-        expect(current_path).to eq(test_saml_decode_assertion_path)
-      end
-    end
-
-    it 'redirects to the account page', if: sp.nil? do
-      acknowledge_and_confirm_personal_key
-
-      expect(page).to have_content(t('headings.account.verified_account'))
-      expect(page).to have_current_path(account_path)
-    end
-  end
-end
diff --git a/spec/support/shared_examples_for_personal_keys.rb b/spec/support/shared_examples_for_personal_keys.rb
index 23fa93e881f..aa21125a9ff 100644
--- a/spec/support/shared_examples_for_personal_keys.rb
+++ b/spec/support/shared_examples_for_personal_keys.rb
@@ -1,6 +1,6 @@
 require 'rbconfig'
 
-shared_examples_for 'personal key page' do
+shared_examples_for 'personal key page' do |address_verification_mechanism|
   include PersonalKeyHelper
   include JavascriptDriverHelper
 
@@ -46,6 +46,16 @@
     it 'validates as case-insensitive, crockford-normalized, length-limited, dash-flexible' do
       code_segments = scrape_personal_key.split('-')
 
+      click_acknowledge_personal_key
+      input = page.find(':focus')
+
+      # Validate as incorrect
+      input.fill_in with: 'wrong'
+      within('[role=dialog]') { click_on t('forms.buttons.continue') }
+      expect(page).to have_content(t('users.personal_key.confirmation_error'))
+
+      # Validate as correct, with formatting variations...
+
       # Include dash between some segments and not others
       code = code_segments[0..1].join('-') + code_segments[2..3].join
 
@@ -58,12 +68,14 @@
       # Add extra characters
       code += 'abc123qwerty'
 
-      click_acknowledge_personal_key
-      page.find(':focus').fill_in with: code
+      input.fill_in with: code
 
-      path_before_submit = current_path
       within('[role=dialog]') { click_on t('forms.buttons.continue') }
-      expect(current_path).not_to eq path_before_submit
+      if address_verification_mechanism == :gpo
+        expect(current_path).to eq idv_come_back_later_path
+      else
+        expect(current_path).to eq account_path
+      end
     end
   end
 

From 4d94033ce5f9d3e04c17c58cbdbf7dff024348a0 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Mon, 6 Jun 2022 09:40:48 -0400
Subject: [PATCH 4/5] Stub GPO for address verification method pre-step setup

---
 spec/features/idv/steps/confirmation_step_spec.rb |  5 ++++-
 spec/support/features/idv_step_helper.rb          | 11 ++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/spec/features/idv/steps/confirmation_step_spec.rb b/spec/features/idv/steps/confirmation_step_spec.rb
index 59e877eff29..33af8875c91 100644
--- a/spec/features/idv/steps/confirmation_step_spec.rb
+++ b/spec/features/idv/steps/confirmation_step_spec.rb
@@ -5,11 +5,12 @@
 
   let(:idv_api_enabled_steps) { [] }
   let(:sp) { nil }
+  let(:address_verification_mechanism) { :phone }
 
   before do
     allow(IdentityConfig.store).to receive(:idv_api_enabled_steps).and_return(idv_api_enabled_steps)
     start_idv_from_sp(sp)
-    complete_idv_steps_before_confirmation_step
+    complete_idv_steps_before_confirmation_step(address_verification_mechanism)
   end
 
   it_behaves_like 'personal key page'
@@ -46,6 +47,8 @@
   end
 
   context 'verifying by gpo' do
+    let(:address_verification_mechanism) { :gpo }
+
     it 'shows status content for gpo verification progress' do
       expect(page).to have_content(t('idv.messages.mail_sent'))
       expect(page).to have_css(
diff --git a/spec/support/features/idv_step_helper.rb b/spec/support/features/idv_step_helper.rb
index 8116e513c14..985fc30f621 100644
--- a/spec/support/features/idv_step_helper.rb
+++ b/spec/support/features/idv_step_helper.rb
@@ -59,9 +59,6 @@ def complete_idv_steps_with_phone_before_confirmation_step(user = user_with_2fa)
   end
 
   alias complete_idv_steps_before_review_step complete_idv_steps_with_phone_before_review_step
-  # rubocop:disable Layout/LineLength
-  alias complete_idv_steps_before_confirmation_step complete_idv_steps_with_phone_before_confirmation_step
-  # rubocop:enable Layout/LineLength
 
   def complete_idv_steps_with_gpo_before_review_step(user = user_with_2fa)
     complete_idv_steps_before_gpo_step(user)
@@ -75,6 +72,14 @@ def complete_idv_steps_with_gpo_before_confirmation_step(user = user_with_2fa)
     click_continue
   end
 
+  def complete_idv_steps_before_confirmation_step(address_verification_mechanism = :phone)
+    if address_verification_mechanism == :phone
+      complete_idv_steps_with_phone_before_confirmation_step
+    else
+      complete_idv_steps_with_gpo_before_confirmation_step
+    end
+  end
+
   def complete_idv_steps_before_step(step, user = user_with_2fa)
     send("complete_idv_steps_before_#{step}_step", user)
   end

From 06c31d1bfb97b9e5ba543bf3f8932337982749a3 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Tue, 7 Jun 2022 09:22:47 -0400
Subject: [PATCH 5/5] Render static content fallback for no-JS in app root

**Why**: In the future, at least we can remove the JavaScript implementation pieces related to this view, and keep only the static markup
---
 app/views/users/personal_keys/show.html.erb | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/views/users/personal_keys/show.html.erb b/app/views/users/personal_keys/show.html.erb
index aa3d67a028d..cdd1b7db1d8 100644
--- a/app/views/users/personal_keys/show.html.erb
+++ b/app/views/users/personal_keys/show.html.erb
@@ -1,5 +1,7 @@
 <% title t('titles.personal_key') %>
 
 <%= form_tag(manage_personal_key_path, method: 'post', id: 'app-form') %>
-<%= content_tag(:div, '', id: 'app-root', data: { personal_key: @code }) %>
+<%= content_tag(:div, '', id: 'app-root', data: { personal_key: @code }) do %>
+  <%= render 'shared/personal_key', code: @code, update_path: manage_personal_key_path %>
+<% end %>
 <%= javascript_packs_tag_once('verify-personal-key') %>