LG-5258: Allow users to start over IAL2 verification after clicking Cancel

app/controllers/idv/cancellations_controller.rb

@@ -10,21 +10,30 @@ def new
       analytics.idv_cancellation_visited(step: params[:step], **properties)
       self.session_go_back_path = go_back_path || idv_path
       @hybrid_session = hybrid_session?
+      @presenter = CancellationsPresenter.new(
+        sp_name: decorated_session.sp_name,
+        url_options: url_options,
+      )
     end
 
     def update
-      if params.key?(:cancel)
-        analytics.idv_cancellation_go_back(step: params[:step])
-        redirect_to session_go_back_path || idv_path
-      else
-        render :new
-      end
+      analytics.idv_cancellation_go_back(step: params[:step])
+      redirect_to session_go_back_path || idv_path
     end
 
     def destroy
       analytics.idv_cancellation_confirmed(step: params[:step])
-      @return_to_sp_path = return_to_sp_failure_to_proof_path(location_params)
-      @hybrid_session = hybrid_session?
+      cancel_session
+      if hybrid_session?
+        render :destroy
+      else
+        render json: { redirect_url: cancelled_redirect_path }
+      end
+    end
+
+    private
+
+    def cancel_session
       if hybrid_session?
         cancel_document_capture_session
       else
@@ -34,7 +43,13 @@ def destroy
       end
     end
 
-    private
+    def cancelled_redirect_path
+      if decorated_session.sp_name
+        return_to_sp_failure_to_proof_path(location_params)
+      else
+        account_path
+      end
+    end
 
     def location_params
       params.permit(:step, :location).to_h.symbolize_keys

app/controllers/verify_controller.rb

@@ -23,7 +23,6 @@ def app_data
 
     {
       base_path: idv_app_path,
-      start_over_url: idv_session_path,
       cancel_url: idv_cancel_path,
       in_person_url: IdentityConfig.store.in_person_proofing_enabled ? idv_in_person_url : nil,
       initial_values: initial_values,

app/javascript/packages/components/index.ts

@@ -1,11 +1,11 @@
 export { default as Accordion } from './accordion';
 export { default as Alert } from './alert';
 export { default as Button } from './button';
-export { default as ButtonTo } from './button-to';
 export { default as BlockLink } from './block-link';
 export { default as Icon } from './icon';
 export { default as FullScreen } from './full-screen';
 export { default as Link } from './link';
+export { default as PageFooter } from './page-footer';
 export { default as PageHeading } from './page-heading';
 export { default as ScrollIntoView } from './scroll-into-view';
 export { default as SpinnerDots } from './spinner-dots';

app/javascript/packages/components/page-footer.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import PageFooter from './page-footer';
+
+describe('PageFooter', () => {
+  it('renders its children content', () => {
+    const { getByText } = render(<PageFooter>Content</PageFooter>);
+
+    expect(getByText('Content')).to.exist();
+  });
+});

app/javascript/packages/components/page-footer.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+interface PageFooterProps {
+  /**
+   * Footer contents.
+   */
+  children: ReactNode;
+}
+
+function PageFooter({ children }: PageFooterProps) {
+  return (
+    <div className="margin-top-4 padding-top-2 border-top border-primary-light">{children}</div>
+  );
+}
+
+export default PageFooter;

app/javascript/packages/document-capture/components/documents-step.jsx

@@ -2,12 +2,12 @@ import { useContext } from 'react';
 import { useI18n } from '@18f/identity-react-i18n';
 import { FormStepsButton, FormStepsContext } from '@18f/identity-form-steps';
 import { PageHeading } from '@18f/identity-components';
+import { Cancel } from '@18f/identity-verify-flow';
 import DocumentSideAcuantCapture from './document-side-acuant-capture';
 import DeviceContext from '../context/device';
 import withBackgroundEncryptedUpload from '../higher-order/with-background-encrypted-upload';
 import CaptureTroubleshooting from './capture-troubleshooting';
 import DocumentCaptureTroubleshootingOptions from './document-capture-troubleshooting-options';
-import StartOverOrCancel from './start-over-or-cancel';
 
 /**
  * @typedef {'front'|'back'} DocumentSide
@@ -67,7 +67,7 @@ function DocumentsStep({
       ))}
       {isLastStep ? <FormStepsButton.Submit /> : <FormStepsButton.Continue />}
       <DocumentCaptureTroubleshootingOptions hasErrors={!!errors.length} />
-      <StartOverOrCancel />
+      <Cancel />
     </CaptureTroubleshooting>
   );
 }

app/javascript/packages/document-capture/components/review-issues-step.tsx

@@ -4,6 +4,7 @@ import { useI18n } from '@18f/identity-react-i18n';
 import { useDidUpdateEffect } from '@18f/identity-react-hooks';
 import { FormStepsContext, FormStepsButton } from '@18f/identity-form-steps';
 import { PageHeading } from '@18f/identity-components';
+import { Cancel } from '@18f/identity-verify-flow';
 import type { FormStepComponentProps } from '@18f/identity-form-steps';
 import DeviceContext from '../context/device';
 import DocumentSideAcuantCapture from './document-side-acuant-capture';
@@ -13,7 +14,6 @@ import ServiceProviderContext from '../context/service-provider';
 import withBackgroundEncryptedUpload from '../higher-order/with-background-encrypted-upload';
 import type { PII } from '../services/upload';
 import DocumentCaptureTroubleshootingOptions from './document-capture-troubleshooting-options';
-import StartOverOrCancel from './start-over-or-cancel';
 import Warning from './warning';
 import AnalyticsContext from '../context/analytics';
 import BarcodeAttentionWarning from './barcode-attention-warning';
@@ -194,7 +194,7 @@ function ReviewIssuesStep({
       )}
       <FormStepsButton.Submit />
       <DocumentCaptureTroubleshootingOptions />
-      <StartOverOrCancel />
+      <Cancel />
     </>
   );
 }

app/javascript/packages/document-capture/components/selfie-step.jsx

@@ -3,11 +3,11 @@ import { hasMediaAccess } from '@18f/identity-device';
 import { useI18n } from '@18f/identity-react-i18n';
 import { FormStepsButton } from '@18f/identity-form-steps';
 import { PageHeading } from '@18f/identity-components';
+import { Cancel } from '@18f/identity-verify-flow';
 import DeviceContext from '../context/device';
 import AcuantCapture from './acuant-capture';
 import SelfieCapture from './selfie-capture';
 import withBackgroundEncryptedUpload from '../higher-order/with-background-encrypted-upload';
-import StartOverOrCancel from './start-over-or-cancel';
 
 /**
  * @typedef SelfieStepValue
@@ -59,7 +59,7 @@ function SelfieStep({
         />
       )}
       <FormStepsButton.Submit />
-      <StartOverOrCancel />
+      <Cancel />
     </>
   );
 }

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

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react';
+import FlowContext from './context/flow-context';
+import Cancel from './cancel';
+
+describe('Cancel', () => {
+  it('renders cancel link', () => {
+    const { queryByText } = render(<Cancel />);
+
+    expect(queryByText('links.cancel')).to.exist();
+  });
+
+  context('with flow context', () => {
+    it('renders links with current step', () => {
+      const { getByText } = render(
+        <FlowContext.Provider
+          value={{
+            cancelURL: 'http://example.test/cancel',
+            currentStep: 'one',
+            basePath: '',
+            inPersonURL: null,
+            onComplete() {},
+          }}
+        >
+          <Cancel />
+        </FlowContext.Provider>,
+      );
+
+      const cancelLink = getByText('links.cancel') as HTMLAnchorElement;
+      expect(cancelLink.getAttribute('href')).to.equal('http://example.test/cancel?step=one');
+    });
+  });
+});

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

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import { useI18n } from '@18f/identity-react-i18n';
+import { addSearchParams } from '@18f/identity-url';
+import { PageFooter } from '@18f/identity-components';
+import FlowContext from './context/flow-context';
+
+function Cancel() {
+  const { currentStep: step, cancelURL } = useContext(FlowContext);
+  const { t } = useI18n();
+
+  return (
+    <PageFooter>
+      <a href={addSearchParams(cancelURL, { step })}>{t('links.cancel')}</a>
+    </PageFooter>
+  );
+}
+
+export default Cancel;

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

@@ -1,11 +1,6 @@
 import { createContext } from 'react';
 
 export interface FlowContextValue {
-  /**
-   * URL to path for session restart.
-   */
-  startOverURL: string;
-
   /**
    * URL to path for session cancel.
    */
@@ -33,7 +28,6 @@ export interface FlowContextValue {
 }
 
 const FlowContext = createContext<FlowContextValue>({
-  startOverURL: '',
   cancelURL: '',
   inPersonURL: null,
   currentStep: '',