LG-8274: In-Person Proofing CTA A/B Testing

app/javascript/packages/document-capture/components/document-capture-troubleshooting-options.tsx

@@ -27,13 +27,20 @@ interface DocumentCaptureTroubleshootingOptionsProps {
    * Whether to display alternative options for verifying.
    */
   showAlternativeProofingOptions?: boolean;
+
+  altInPersonCta?: string;
+  altInPersonPrompt?: string;
+  altInPersonCtaButtonText?: string;
 }
 
 function DocumentCaptureTroubleshootingOptions({
   heading,
   location = 'document_capture_troubleshooting_options',
   showDocumentTips = true,
   showAlternativeProofingOptions,
+  altInPersonCta,
+  altInPersonPrompt,
+  altInPersonCtaButtonText,
 }: DocumentCaptureTroubleshootingOptionsProps) {
   const { t } = useI18n();
   const { inPersonURL } = useContext(InPersonContext);
@@ -42,7 +49,13 @@ function DocumentCaptureTroubleshootingOptions({
 
   return (
     <>
-      {showAlternativeProofingOptions && inPersonURL && <InPersonCallToAction />}
+      {showAlternativeProofingOptions && inPersonURL && (
+        <InPersonCallToAction
+          altHeading={altInPersonCta}
+          altPrompt={altInPersonPrompt}
+          altButtonText={altInPersonCtaButtonText}
+        />
+      )}
       <TroubleshootingOptions
         heading={heading}
         options={

app/javascript/packages/document-capture/components/in-person-call-to-action.spec.tsx

@@ -1,18 +1,15 @@
 import sinon from 'sinon';
+import { computeAccessibleName } from 'dom-accessibility-api';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { computeAccessibleDescription } from 'dom-accessibility-api';
 import { AnalyticsContextProvider } from '../context/analytics';
 import InPersonCallToAction from './in-person-call-to-action';
 
 describe('InPersonCallToAction', () => {
-  it('renders a section with label and description', () => {
+  it('renders a section with an accessible heading', () => {
     const { getByRole } = render(<InPersonCallToAction />);
-
-    const section = getByRole('region', { name: 'in_person_proofing.headings.cta' });
-    const description = computeAccessibleDescription(section);
-
-    expect(description).to.equal('in_person_proofing.body.cta.new_feature');
+    const heading = getByRole('heading');
+    expect(computeAccessibleName(heading)).to.equals('in_person_proofing.headings.cta');
   });
 
   it('logs an event when clicking the call to action button', async () => {

app/javascript/packages/document-capture/components/in-person-call-to-action.tsx

@@ -1,10 +1,16 @@
 import { useContext } from 'react';
-import { Button, Tag } from '@18f/identity-components';
+import { Button } from '@18f/identity-components';
 import { useInstanceId } from '@18f/identity-react-hooks';
 import { t } from '@18f/identity-i18n';
 import AnalyticsContext from '../context/analytics';
 
-function InPersonCallToAction() {
+interface InPersonCallToActionProps {
+  altHeading?: string;
+  altPrompt?: string;
+  altButtonText?: string;
+}
+
+function InPersonCallToAction({ altHeading, altPrompt, altButtonText }: InPersonCallToActionProps) {
   const instanceId = useInstanceId();
   const { trackEvent } = useContext(AnalyticsContext);
 
@@ -14,13 +20,10 @@ function InPersonCallToAction() {
       aria-describedby={`in-person-cta-tag-${instanceId}`}
     >
       <hr className="margin-y-5" />
-      <Tag id={`in-person-cta-tag-${instanceId}`} isInformative>
-        {t('in_person_proofing.body.cta.new_feature')}
-      </Tag>
       <h2 id={`in-person-cta-heading-${instanceId}`} className="margin-y-2">
-        {t('in_person_proofing.headings.cta')}
+        {altHeading || t('in_person_proofing.headings.cta')}
       </h2>
-      <p>{t('in_person_proofing.body.cta.prompt_detail')}</p>
+      <p>{altPrompt || t('in_person_proofing.body.cta.prompt_detail')}</p>
       <Button
         isBig
         isOutline
@@ -29,7 +32,7 @@ function InPersonCallToAction() {
         className="margin-top-3 margin-bottom-1"
         onClick={() => trackEvent('IdV: verify in person troubleshooting option clicked')}
       >
-        {t('in_person_proofing.body.cta.button')}
+        {altButtonText || t('in_person_proofing.body.cta.button')}
       </Button>
     </section>
   );

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

@@ -1,5 +1,5 @@
-import { useContext, useEffect, useState } from 'react';
-import { useI18n } from '@18f/identity-react-i18n';
+import { useContext, useEffect, useState, ReactNode } from 'react';
+import { useI18n, formatHTML } 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';
@@ -13,6 +13,13 @@ import Warning from './warning';
 import AnalyticsContext from '../context/analytics';
 import BarcodeAttentionWarning from './barcode-attention-warning';
 import FailedCaptureAttemptsContext from '../context/failed-capture-attempts';
+import { InPersonContext } from '../context';
+
+function formatWithStrongNoWrap(text: string): ReactNode {
+  return formatHTML(text, {
+    strong: ({ children }) => <strong className="text-no-wrap">{children}</strong>,
+  });
+}
 
 type DocumentSide = 'front' | 'back';
 
@@ -74,51 +81,177 @@ function ReviewIssuesStep({
   useDidUpdateEffect(onPageTransition, [hasDismissed]);
 
   const { onFailedSubmissionAttempt } = useContext(FailedCaptureAttemptsContext);
+  const { inPersonURL, inPersonCtaVariantActive } = useContext(InPersonContext);
   useEffect(() => onFailedSubmissionAttempt(), []);
   function onWarningPageDismissed() {
     trackEvent('IdV: Capture troubleshooting dismissed');
 
     setHasDismissed(true);
   }
+  function onInPersonSelected() {
+    trackEvent('IdV: verify in person troubleshooting option clicked');
+  }
 
   // let FormSteps know, via FormStepsContext, whether this page
   // is ready to submit form values
   useEffect(() => {
     changeStepCanComplete(!!hasDismissed);
   }, [hasDismissed]);
 
+  useEffect(() => {
+    if (!inPersonURL || isFailedResult) {
+      return;
+    }
+    if (inPersonCtaVariantActive === 'in_person_variant_a') {
+      trackEvent('IdV: IPP CTA Variant A');
+    } else if (inPersonCtaVariantActive === 'in_person_variant_b') {
+      trackEvent('IdV: IPP CTA Variant B');
+    } else if (inPersonCtaVariantActive === 'in_person_variant_c') {
+      trackEvent('IdV: IPP CTA Variant C');
+    }
+  }, []);
+
   if (!hasDismissed) {
     if (pii) {
       return <BarcodeAttentionWarning onDismiss={onWarningPageDismissed} pii={pii} />;
     }
 
-    return (
-      <Warning
-        heading={t('errors.doc_auth.throttled_heading')}
-        actionText={t('idv.failure.button.warning')}
-        actionOnClick={onWarningPageDismissed}
-        location="doc_auth_review_issues"
-        remainingAttempts={remainingAttempts}
-        troubleshootingOptions={
-          <DocumentCaptureTroubleshootingOptions
-            location="post_submission_warning"
-            showAlternativeProofingOptions={!isFailedResult}
-            heading={t('components.troubleshooting_options.ipp_heading')}
-          />
-        }
-      >
-        {!!unknownFieldErrors &&
-          unknownFieldErrors
-            .filter((error) => !['front', 'back'].includes(error.field!))
-            .map(({ error }) => <p key={error.message}>{error.message}</p>)}
-
-        {remainingAttempts <= DISPLAY_ATTEMPTS && (
-          <p>
-            <strong>{t('idv.failure.attempts', { count: remainingAttempts })}</strong>
-          </p>
-        )}
-      </Warning>
-    );
+    if (!inPersonURL || isFailedResult) {
+      return (
+        <Warning
+          heading={t('errors.doc_auth.throttled_heading')}
+          actionText={t('idv.failure.button.warning')}
+          actionOnClick={onWarningPageDismissed}
+          location="doc_auth_review_issues"
+          remainingAttempts={remainingAttempts}
+          troubleshootingOptions={
+            <DocumentCaptureTroubleshootingOptions
+              location="post_submission_warning"
+              showAlternativeProofingOptions={!isFailedResult}
+              heading={t('components.troubleshooting_options.ipp_heading')}
+            />
+          }
+        >
+          {!!unknownFieldErrors &&
+            unknownFieldErrors
+              .filter((error) => !['front', 'back'].includes(error.field!))
+              .map(({ error }) => <p key={error.message}>{error.message}</p>)}
+
+          {remainingAttempts <= DISPLAY_ATTEMPTS && (
+            <p>
+              <strong>{t('idv.failure.attempts', { count: remainingAttempts })}</strong>
+            </p>
+          )}
+        </Warning>
+      );
+    }
+    if (inPersonCtaVariantActive === 'in_person_variant_a') {
+      return (
+        <Warning
+          heading={t('errors.doc_auth.throttled_heading')}
+          actionText={t('idv.failure.button.warning_variant')}
+          actionOnClick={onWarningPageDismissed}
+          location="doc_auth_review_issues"
+          remainingAttempts={remainingAttempts}
+          troubleshootingOptions={
+            <DocumentCaptureTroubleshootingOptions
+              location="post_submission_warning"
+              showAlternativeProofingOptions={!isFailedResult}
+              heading={t('components.troubleshooting_options.ipp_heading')}
+              altInPersonCta={t('in_person_proofing.headings.cta_variant')}
+              altInPersonPrompt={t('in_person_proofing.body.cta.prompt_detail_a')}
+              altInPersonCtaButtonText={t('in_person_proofing.body.cta.button_variant')}
+            />
+          }
+        >
+          <h2>{t('errors.doc_auth.throttled_subheading')}</h2>
+          {!!unknownFieldErrors &&
+            unknownFieldErrors
+              .filter((error) => !['front', 'back'].includes(error.field!))
+              .map(({ error }) => <p key={error.message}>{error.message}</p>)}
+
+          {remainingAttempts <= DISPLAY_ATTEMPTS && (
+            <p>
+              {remainingAttempts === 1
+                ? formatWithStrongNoWrap(t('idv.failure.attempts.one_variant_a_html'))
+                : formatWithStrongNoWrap(
+                    t('idv.failure.attempts.other_variant_a_html', { count: remainingAttempts }),
+                  )}
+            </p>
+          )}
+        </Warning>
+      );
+    }
+    if (inPersonCtaVariantActive === 'in_person_variant_b') {
+      return (
+        <Warning
+          heading={t('errors.doc_auth.throttled_heading')}
+          actionText={t('idv.failure.button.warning_variant')}
+          actionOnClick={onWarningPageDismissed}
+          altActionText={t('in_person_proofing.body.cta.button_variant')}
+          altActionOnClick={onInPersonSelected}
+          altHref="#location"
+          location="doc_auth_review_issues"
+          remainingAttempts={remainingAttempts}
+          troubleshootingOptions={
+            <DocumentCaptureTroubleshootingOptions
+              location="post_submission_warning"
+              showAlternativeProofingOptions={false}
+              heading={t('components.troubleshooting_options.ipp_heading')}
+            />
+          }
+        >
+          {!!unknownFieldErrors &&
+            unknownFieldErrors
+              .filter((error) => !['front', 'back'].includes(error.field!))
+              .map(({ error }) => <p key={error.message}>{error.message}</p>)}
+
+          {remainingAttempts <= DISPLAY_ATTEMPTS && (
+            <p>
+              {remainingAttempts === 1
+                ? formatWithStrongNoWrap(t('idv.failure.attempts.one_variant_b_html'))
+                : formatWithStrongNoWrap(
+                    t('idv.failure.attempts.other_variant_b_html', { count: remainingAttempts }),
+                  )}
+            </p>
+          )}
+          <p>{t('in_person_proofing.body.cta.prompt_detail_b')}</p>
+        </Warning>
+      );
+    }
+    if (inPersonCtaVariantActive === 'in_person_variant_c') {
+      return (
+        <Warning
+          heading={t('errors.doc_auth.throttled_heading')}
+          actionText={t('idv.failure.button.warning')}
+          actionOnClick={onWarningPageDismissed}
+          location="doc_auth_review_issues"
+          remainingAttempts={remainingAttempts}
+          troubleshootingOptions={
+            <DocumentCaptureTroubleshootingOptions
+              location="post_submission_warning"
+              showAlternativeProofingOptions={false}
+              heading={t('components.troubleshooting_options.ipp_heading')}
+            />
+          }
+        >
+          {!!unknownFieldErrors &&
+            unknownFieldErrors
+              .filter((error) => !['front', 'back'].includes(error.field!))
+              .map(({ error }) => <p key={error.message}>{error.message}</p>)}
+
+          {remainingAttempts <= DISPLAY_ATTEMPTS && (
+            <p>
+              <strong>
+                {remainingAttempts === 1
+                  ? t('idv.failure.attempts.one')
+                  : t('idv.failure.attempts.other', { count: remainingAttempts })}
+              </strong>
+            </p>
+          )}
+        </Warning>
+      );
+    }
   }
 
   return (

app/javascript/packages/document-capture/components/warning.tsx

@@ -20,6 +20,21 @@ interface WarningProps {
    */
   actionOnClick?: () => void;
 
+  /**
+   * Secondary action button text.
+   */
+  altActionText?: string;
+
+  /**
+   * Secondary action button text.
+   */
+  altActionOnClick?: () => void;
+
+  /**
+   * Secondary action button location.
+   */
+  altHref?: string;
+
   /**
    * Component children.
    */
@@ -45,6 +60,9 @@ function Warning({
   heading,
   actionText,
   actionOnClick,
+  altActionText,
+  altActionOnClick,
+  altHref,
   children,
   troubleshootingOptions,
   location,
@@ -69,6 +87,22 @@ function Warning({
         {actionText}
       </Button>,
     ];
+    if (altActionText && altActionOnClick) {
+      actionButtons.push(
+        <Button
+          isBig
+          isOutline
+          isWide
+          href={altHref}
+          onClick={() => {
+            trackEvent('IdV: warning action triggered', { location });
+            altActionOnClick();
+          }}
+        >
+          {altActionText}
+        </Button>,
+      );
+    }
   }
 
   return (