diff --git a/app/assets/images/alert/pending.svg b/app/assets/images/alert/pending.svg deleted file mode 100644 index 826e9539de1..00000000000 --- a/app/assets/images/alert/pending.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/stylesheets/components/_step-indicator.scss b/app/assets/stylesheets/components/_step-indicator.scss index 1e5a1efb012..c56e753d614 100644 --- a/app/assets/stylesheets/components/_step-indicator.scss +++ b/app/assets/stylesheets/components/_step-indicator.scss @@ -1,6 +1,5 @@ $step-indicator-current-step-border-width: 3px; $step-indicator-line-height: 4px; -$step-indicator-pending-color: #a8b6c6; lg-step-indicator { display: block; @@ -106,15 +105,11 @@ lg-step-indicator { border: $step-indicator-current-step-border-width solid color('success'); } -.step-indicator__step--complete:not(.step-indicator__step--pending)::before { +.step-indicator__step--complete::before { background-color: color('white'); background-image: url('alert/success.svg'); } -.step-indicator__step--pending::before { - background-image: url('alert/pending.svg'); -} - .step-indicator__step:not(:last-child)::after { background-color: color('base-lighter'); content: ''; @@ -126,11 +121,7 @@ lg-step-indicator { width: calc(100% - 1rem - #{$step-indicator-line-height * 2}); } -.step-indicator__step--pending:not(:last-child)::after { - background-color: $step-indicator-pending-color; -} - -.step-indicator__step--complete:not(.step-indicator__step--pending):not(:last-child)::after { +.step-indicator__step--complete:not(:last-child)::after { background-color: color('success'); } diff --git a/app/controllers/idv/personal_key_controller.rb b/app/controllers/idv/personal_key_controller.rb index 4da94db1bc6..dec646a1a31 100644 --- a/app/controllers/idv/personal_key_controller.rb +++ b/app/controllers/idv/personal_key_controller.rb @@ -27,10 +27,10 @@ def update private def step_indicator_steps - steps = Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS - return steps if idv_session.address_verification_mechanism != 'gpo' - steps.map do |step| - step[:name] == :verify_phone_or_address ? step.merge(status: :pending) : step + if idv_session.address_verification_mechanism == 'gpo' + Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS_GPO + else + Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS end end diff --git a/app/controllers/idv/review_controller.rb b/app/controllers/idv/review_controller.rb index c13e55e9f24..ebf993a529c 100644 --- a/app/controllers/idv/review_controller.rb +++ b/app/controllers/idv/review_controller.rb @@ -65,10 +65,10 @@ def redirect_to_idv_app_if_enabled end def step_indicator_steps - steps = Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS - return steps if idv_session.address_verification_mechanism != 'gpo' - steps.map do |step| - step[:name] == :verify_phone_or_address ? step.merge(status: :pending) : step + if idv_session.address_verification_mechanism == 'gpo' + Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS_GPO + else + Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS end end diff --git a/app/javascript/packages/eslint-plugin/CHANGELOG.md b/app/javascript/packages/eslint-plugin/CHANGELOG.md index a36354271bb..1aac94968ab 100644 --- a/app/javascript/packages/eslint-plugin/CHANGELOG.md +++ b/app/javascript/packages/eslint-plugin/CHANGELOG.md @@ -46,6 +46,7 @@ - `no-useless-constructor` - React: The following rules are no longer enforced: - `react/no-array-index-key` +- `prefer-const` is only enforced on destructuring assignment if all variables should be `const` ([`destructuring: 'all'` option](https://eslint.org/docs/latest/rules/prefer-const#destructuring)). ## v2.0.0 (2022-03-14) diff --git a/app/javascript/packages/eslint-plugin/configs/recommended.js b/app/javascript/packages/eslint-plugin/configs/recommended.js index c3e20c28a6e..c125bc6c393 100644 --- a/app/javascript/packages/eslint-plugin/configs/recommended.js +++ b/app/javascript/packages/eslint-plugin/configs/recommended.js @@ -55,6 +55,7 @@ const config = { 'object-curly-spacing': 'off', 'operator-linebreak': 'off', 'padded-blocks': 'off', + 'prefer-const': ['error', { destructuring: 'all', ignoreReadBeforeAssign: true }], 'quote-props': 'off', 'require-await': 'error', 'rest-spread-spacing': 'off', diff --git a/app/javascript/packages/step-indicator/step-indicator-step.spec.tsx b/app/javascript/packages/step-indicator/step-indicator-step.spec.tsx index 6a0a3df6775..10838a751fa 100644 --- a/app/javascript/packages/step-indicator/step-indicator-step.spec.tsx +++ b/app/javascript/packages/step-indicator/step-indicator-step.spec.tsx @@ -14,7 +14,6 @@ describe('StepIndicatorStep', () => { expect(status).to.be.ok(); expect(step.classList.contains('step-indicator__step--current')).to.be.true(); expect(step.classList.contains('step-indicator__step--complete')).to.be.false(); - expect(step.classList.contains('step-indicator__step--pending')).to.be.false(); expect(status.classList.contains('step-indicator__step-subtitle')).to.be.false(); expect(status.classList.contains('usa-sr-only')).to.be.true(); }); @@ -32,30 +31,11 @@ describe('StepIndicatorStep', () => { expect(status).to.be.ok(); expect(step.classList.contains('step-indicator__step--current')).to.be.false(); expect(step.classList.contains('step-indicator__step--complete')).to.be.true(); - expect(step.classList.contains('step-indicator__step--pending')).to.be.false(); expect(status.classList.contains('step-indicator__step-subtitle')).to.be.false(); expect(status.classList.contains('usa-sr-only')).to.be.true(); }); }); - context('pending step', () => { - it('renders step', () => { - const { getByText } = render(); - - const title = getByText('Step'); - const status = getByText('step_indicator.status.pending'); - const step = title.closest('.step-indicator__step')!; - - expect(title).to.be.ok(); - expect(status).to.be.ok(); - expect(step.classList.contains('step-indicator__step--current')).to.be.false(); - expect(step.classList.contains('step-indicator__step--complete')).to.be.false(); - expect(step.classList.contains('step-indicator__step--pending')).to.be.true(); - expect(status.classList.contains('step-indicator__step-subtitle')).to.be.true(); - expect(status.classList.contains('usa-sr-only')).to.be.false(); - }); - }); - context('incomplete step', () => { it('renders step', () => { const { getByText } = render( @@ -70,7 +50,6 @@ describe('StepIndicatorStep', () => { expect(status).to.be.ok(); expect(step.classList.contains('step-indicator__step--current')).to.be.false(); expect(step.classList.contains('step-indicator__step--complete')).to.be.false(); - expect(step.classList.contains('step-indicator__step--pending')).to.be.false(); expect(status.classList.contains('step-indicator__step-subtitle')).to.be.false(); expect(status.classList.contains('usa-sr-only')).to.be.true(); }); diff --git a/app/javascript/packages/step-indicator/step-indicator-step.tsx b/app/javascript/packages/step-indicator/step-indicator-step.tsx index b892787db88..95d93add49b 100644 --- a/app/javascript/packages/step-indicator/step-indicator-step.tsx +++ b/app/javascript/packages/step-indicator/step-indicator-step.tsx @@ -26,7 +26,6 @@ function StepIndicatorStep({ title, status }: StepIndicatorStepProps) { 'step-indicator__step', status === CURRENT && 'step-indicator__step--current', status === COMPLETE && 'step-indicator__step--complete', - status === PENDING && 'step-indicator__step--pending', ] .filter(Boolean) .join(' '); diff --git a/app/javascript/packages/verify-flow/verify-flow-step-indicator.spec.tsx b/app/javascript/packages/verify-flow/verify-flow-step-indicator.spec.tsx index 2fefb1935c6..232d71e64ed 100644 --- a/app/javascript/packages/verify-flow/verify-flow-step-indicator.spec.tsx +++ b/app/javascript/packages/verify-flow/verify-flow-step-indicator.spec.tsx @@ -38,15 +38,18 @@ describe('VerifyFlowStepIndicator', () => { }); context('with gpo as address verification method', () => { - it('renders address verification as pending', () => { - const { getByText } = render( + it('revises the flow path to omit address verification and add letter step', () => { + const { queryByText } = render( , ); - const previous = getByText('step_indicator.flows.idv.verify_phone_or_address'); - expect(previous.closest('.step-indicator__step--pending')).to.exist(); + const verifyAddress = queryByText('step_indicator.flows.idv.verify_phone_or_address'); + const getALetter = queryByText('step_indicator.flows.idv.get_a_letter'); + + expect(verifyAddress).to.not.exist(); + expect(getALetter).to.exist(); }); }); diff --git a/app/javascript/packages/verify-flow/verify-flow-step-indicator.tsx b/app/javascript/packages/verify-flow/verify-flow-step-indicator.tsx index d2b957a563f..668a92914d5 100644 --- a/app/javascript/packages/verify-flow/verify-flow-step-indicator.tsx +++ b/app/javascript/packages/verify-flow/verify-flow-step-indicator.tsx @@ -16,7 +16,8 @@ type VerifyFlowStepIndicatorStep = | 'verify_phone_or_address' | 'secure_account' | 'find_a_post_office' - | 'go_to_the_post_office'; + | 'go_to_the_post_office' + | 'get_a_letter'; interface VerifyFlowConfig { /** @@ -94,35 +95,35 @@ export function getStepStatus(index, currentStepIndex): StepStatus { } /** - * Given contextual details of the current flow path, returns explicit statuses which should be used - * at particular steps. + * Given contextual details of the current flow path, returns the relevant flow configuration. * * @param details Flow details * - * @return Step status overrides. + * @return Flow step configuration. */ -function getStatusOverrides({ +function getFlowStepsConfig({ + path, addressVerificationMethod, }: { + path: VerifyFlowPath; addressVerificationMethod: AddressVerificationMethod; -}) { - const statuses: Partial> = {}; +}): VerifyFlowConfig { + let { steps, mapping } = FLOW_STEP_PATHS[path]; if (addressVerificationMethod === 'gpo') { - statuses.verify_phone_or_address = StepStatus.PENDING; + steps = steps.filter((step) => step !== 'verify_phone_or_address').concat('get_a_letter'); } - return statuses; + return { steps, mapping }; } function VerifyFlowStepIndicator({ currentStep, path = VerifyFlowPath.DEFAULT, }: VerifyFlowStepIndicatorProps) { - const { steps, mapping } = FLOW_STEP_PATHS[path]; - const currentStepIndex = steps.indexOf(mapping[currentStep]); const { addressVerificationMethod } = useContext(AddressVerificationMethodContext); - const statusOverrides = getStatusOverrides({ addressVerificationMethod }); + const { steps, mapping } = getFlowStepsConfig({ path, addressVerificationMethod }); + const currentStepIndex = steps.indexOf(mapping[currentStep]); // i18n-tasks-use t('step_indicator.flows.idv.getting_started') // i18n-tasks-use t('step_indicator.flows.idv.verify_id') @@ -131,6 +132,7 @@ function VerifyFlowStepIndicator({ // i18n-tasks-use t('step_indicator.flows.idv.secure_account') // i18n-tasks-use t('step_indicator.flows.idv.find_a_post_office') // i18n-tasks-use t('step_indicator.flows.idv.go_to_the_post_office') + // i18n-tasks-use t('step_indicator.flows.idv.get_a_letter') return ( @@ -138,7 +140,7 @@ function VerifyFlowStepIndicator({ ))} diff --git a/app/services/idv/flows/doc_auth_flow.rb b/app/services/idv/flows/doc_auth_flow.rb index 9d85c05d4cf..984de98abef 100644 --- a/app/services/idv/flows/doc_auth_flow.rb +++ b/app/services/idv/flows/doc_auth_flow.rb @@ -22,6 +22,14 @@ class DocAuthFlow < Flow::BaseFlow { name: :secure_account }, ].freeze + STEP_INDICATOR_STEPS_GPO = [ + { name: :getting_started }, + { name: :verify_id }, + { name: :verify_info }, + { name: :secure_account }, + { name: :get_a_letter }, + ].freeze + OPTIONAL_SHOW_STEPS = { verify_wait: Idv::Steps::VerifyWaitStepShow, }.freeze diff --git a/app/views/idv/come_back_later/show.html.erb b/app/views/idv/come_back_later/show.html.erb index 30f8ca3aa74..a4b42efbb81 100644 --- a/app/views/idv/come_back_later/show.html.erb +++ b/app/views/idv/come_back_later/show.html.erb @@ -1,9 +1,7 @@ <% content_for(:pre_flash_content) do %> <%= render 'shared/step_indicator', { - steps: Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS.map do |step| - step[:name] == :secure_account ? step.merge(status: :complete) : step - end, - current_step: :verify_phone_or_address, + steps: Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS_GPO, + current_step: :get_a_letter, locale_scope: 'idv', class: 'margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4', } %> diff --git a/app/views/idv/gpo_verify/index.html.erb b/app/views/idv/gpo_verify/index.html.erb index be009c21be5..b21afa9d9f9 100644 --- a/app/views/idv/gpo_verify/index.html.erb +++ b/app/views/idv/gpo_verify/index.html.erb @@ -1,9 +1,7 @@ <% content_for(:pre_flash_content) do %> <%= render 'shared/step_indicator', { - steps: Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS.map do |step| - step[:name] == :secure_account ? step.merge(status: :complete) : step - end, - current_step: :verify_phone_or_address, + steps: Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS_GPO, + current_step: :get_a_letter, locale_scope: 'idv', class: 'margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4', } %> diff --git a/app/views/shared/_step_indicator_step.html.erb b/app/views/shared/_step_indicator_step.html.erb index 94b3b433a3b..9dbfd877d51 100644 --- a/app/views/shared/_step_indicator_step.html.erb +++ b/app/views/shared/_step_indicator_step.html.erb @@ -7,8 +7,7 @@ locals: status = local_assigns[:status] || :not_complete classes = ['step-indicator__step'] classes << 'step-indicator__step--current' if local_assigns[:status] == :current - classes << 'step-indicator__step--complete' if local_assigns[:status] == :complete - classes << 'step-indicator__step--pending' if local_assigns[:status] == :pending %> + classes << 'step-indicator__step--complete' if local_assigns[:status] == :complete %> <%# Using `aria-current="step"` would be the preferred method to indicate the current step, but at the diff --git a/config/locales/step_indicator/en.yml b/config/locales/step_indicator/en.yml index 632d68d2bab..4867d45caac 100644 --- a/config/locales/step_indicator/en.yml +++ b/config/locales/step_indicator/en.yml @@ -5,6 +5,7 @@ en: flows: idv: find_a_post_office: Find a Post Office + get_a_letter: Get a letter in the mail getting_started: Getting started go_to_the_post_office: Go to the Post Office secure_account: Secure your account diff --git a/config/locales/step_indicator/es.yml b/config/locales/step_indicator/es.yml index ba1363dce93..d878afd0bad 100644 --- a/config/locales/step_indicator/es.yml +++ b/config/locales/step_indicator/es.yml @@ -5,6 +5,7 @@ es: flows: idv: find_a_post_office: Encontrar una oficina de correos + get_a_letter: Reciba una carta por correo getting_started: Inicio go_to_the_post_office: Ir a la oficina de correos secure_account: Proteje tu cuenta diff --git a/config/locales/step_indicator/fr.yml b/config/locales/step_indicator/fr.yml index fa93938adeb..3323146f8dc 100644 --- a/config/locales/step_indicator/fr.yml +++ b/config/locales/step_indicator/fr.yml @@ -5,6 +5,7 @@ fr: flows: idv: find_a_post_office: Trouver un bureau de poste + get_a_letter: Recevoir une lettre par la poste getting_started: Démarrer go_to_the_post_office: Se rendre au bureau de poste secure_account: Sécurisez votre compte diff --git a/spec/controllers/idv/personal_key_controller_spec.rb b/spec/controllers/idv/personal_key_controller_spec.rb index 3ee2ef4a9a1..161f2e11631 100644 --- a/spec/controllers/idv/personal_key_controller_spec.rb +++ b/spec/controllers/idv/personal_key_controller_spec.rb @@ -119,13 +119,13 @@ def index subject.idv_session.address_verification_mechanism = 'gpo' end - it 'assigns step indicator steps with pending status' do + it 'assigns step indicator steps with gpo letter step' do get :show + steps = assigns(:step_indicator_steps) + expect(flash.now[:success]).to eq t('idv.messages.mail_sent') - expect(assigns(:step_indicator_steps)).to include( - hash_including(name: :verify_phone_or_address, status: :pending), - ) + expect(steps).to eq(Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS_GPO) end end end diff --git a/spec/controllers/idv/review_controller_spec.rb b/spec/controllers/idv/review_controller_spec.rb index d6f18a029c8..ec076861515 100644 --- a/spec/controllers/idv/review_controller_spec.rb +++ b/spec/controllers/idv/review_controller_spec.rb @@ -212,9 +212,9 @@ def show it 'shows steps' do get :new - expect(subject.view_assigns['step_indicator_steps']).not_to include( - hash_including(name: :verify_phone_or_address, status: :pending), - ) + steps = subject.view_assigns['step_indicator_steps'] + + expect(steps).to eq(Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS) end context 'idv app password confirm step is enabled' do @@ -236,12 +236,12 @@ def show idv_session.address_verification_mechanism = 'gpo' end - it 'shows revises steps to show pending address verification' do + it 'shows gpo steps' do get :new - expect(subject.view_assigns['step_indicator_steps']).to include( - hash_including(name: :verify_phone_or_address, status: :pending), - ) + steps = subject.view_assigns['step_indicator_steps'] + + expect(steps).to eq(Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS_GPO) end end diff --git a/spec/features/idv/steps/confirmation_step_spec.rb b/spec/features/idv/steps/confirmation_step_spec.rb index b3f719acb6e..fef0f1b2441 100644 --- a/spec/features/idv/steps/confirmation_step_spec.rb +++ b/spec/features/idv/steps/confirmation_step_spec.rb @@ -25,7 +25,7 @@ '.step-indicator__step--complete', text: t('step_indicator.flows.idv.verify_phone_or_address'), ) - expect(page).not_to have_css('.step-indicator__step--pending') + expect(page).not_to have_content(t('step_indicator.flows.idv.get_a_letter')) end it 'allows the user to refresh and still displays the personal key' do @@ -70,10 +70,8 @@ it 'shows status content for gpo verification progress' do expect(page).to have_content(t('idv.messages.mail_sent')) expect_step_indicator_current_step(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'), - ) + expect(page).to have_content(t('step_indicator.flows.idv.get_a_letter')) + expect(page).not_to have_content(t('step_indicator.flows.idv.verify_phone_or_address')) end it_behaves_like 'personal key page', :gpo diff --git a/spec/features/users/verify_profile_spec.rb b/spec/features/users/verify_profile_spec.rb index 2ef5246038a..263093cbd09 100644 --- a/spec/features/users/verify_profile_spec.rb +++ b/spec/features/users/verify_profile_spec.rb @@ -18,14 +18,10 @@ end context 'GPO letter' do - it 'shows step indicator progress with current verify step, completed secure account' do + it 'shows step indicator progress with current step' do sign_in_live_with_2fa(user) - expect_step_indicator_current_step(t('step_indicator.flows.idv.verify_phone_or_address')) - expect(page).to have_css( - '.step-indicator__step--complete', - text: t('step_indicator.flows.idv.secure_account'), - ) + expect_step_indicator_current_step(t('step_indicator.flows.idv.get_a_letter')) end scenario 'valid OTP' do diff --git a/spec/views/idv/come_back_later/show.html.erb_spec.rb b/spec/views/idv/come_back_later/show.html.erb_spec.rb index c6b577555b3..ddbf55c2fcd 100644 --- a/spec/views/idv/come_back_later/show.html.erb_spec.rb +++ b/spec/views/idv/come_back_later/show.html.erb_spec.rb @@ -55,16 +55,12 @@ end end - it 'shows step indicator with pending status' do + it 'shows step indicator with current step' do render expect(view.content_for(:pre_flash_content)).to have_css( '.step-indicator__step--current', - text: t('step_indicator.flows.idv.verify_phone_or_address'), - ) - expect(view.content_for(:pre_flash_content)).to have_css( - '.step-indicator__step--complete', - text: t('step_indicator.flows.idv.secure_account'), + text: t('step_indicator.flows.idv.get_a_letter'), ) end end diff --git a/spec/views/shared/_step_indicator.html.erb_spec.rb b/spec/views/shared/_step_indicator.html.erb_spec.rb index 264276098b1..4aaa96e5414 100644 --- a/spec/views/shared/_step_indicator.html.erb_spec.rb +++ b/spec/views/shared/_step_indicator.html.erb_spec.rb @@ -75,12 +75,12 @@ end context 'explicit step status' do - let(:steps) { [{ name: :one, status: :pending }, { name: :two }] } + let(:steps) { [{ name: :one, status: :complete }, { name: :two }] } let(:current_step) { :two } it 'renders with status' do expect(rendered).to have_css( - '.step-indicator__step--pending', + '.step-indicator__step--complete', text: t('step_indicator.flows.example.one'), ) end diff --git a/spec/views/shared/_step_indicator_step.html.erb_spec.rb b/spec/views/shared/_step_indicator_step.html.erb_spec.rb index b38e4bf59b5..6d2fd386847 100644 --- a/spec/views/shared/_step_indicator_step.html.erb_spec.rb +++ b/spec/views/shared/_step_indicator_step.html.erb_spec.rb @@ -24,7 +24,6 @@ it 'renders incomplete step' do expect(rendered).to have_selector('.step-indicator__step') expect(rendered).not_to have_selector('.step-indicator__step--current') - expect(rendered).not_to have_selector('.step-indicator__step--pending') expect(rendered).not_to have_selector('.step-indicator__step--complete') end @@ -39,7 +38,6 @@ it 'renders current step' do expect(rendered).to have_selector('.step-indicator__step') expect(rendered).to have_selector('.step-indicator__step--current') - expect(rendered).not_to have_selector('.step-indicator__step--pending') expect(rendered).not_to have_selector('.step-indicator__step--complete') end @@ -53,7 +51,6 @@ it 'renders pending step' do expect(rendered).to have_selector('.step-indicator__step') - expect(rendered).to have_selector('.step-indicator__step--pending') expect(rendered).not_to have_selector('.step-indicator__step--current') expect(rendered).not_to have_selector('.step-indicator__step--complete') end @@ -70,7 +67,6 @@ expect(rendered).to have_selector('.step-indicator__step') expect(rendered).to have_selector('.step-indicator__step--complete') expect(rendered).not_to have_selector('.step-indicator__step--current') - expect(rendered).not_to have_selector('.step-indicator__step--pending') end it 'renders accessible indicator' do