LG-11139: question upon exit by dawei-nava · Pull Request #9392 · 18F/identity-idp

dawei-nava · 2023-10-16T19:10:11Z

🎫 Ticket

LG-11139: Add optional question about other ID types

🛠 Summary of changes

Add optional survey questions to document image capturing page.
Record user submission as analytics events.
Redirect user to SP specific or general account page when user chooses Exit or "Submit and exit".

📜 Testing Plan

Provide a checklist of steps to confirm the changes.
With Service Provider:

Step 1: Navigate to document capturing page, with Service Provider
Step 2: Verify the new content displayed on the page
Step 3: Click exit link, verify landing to SP failure to proof page
Step 4: Repeat and choose ID types, click on button
Step 5: Verify landing to SP failure to proof page and analytics events logged
Without Service Provider:
Step 1: Navigate to document capturing page, with Service Provider
Step 2: Verify the new content displayed on the page
Step 3: Click exit link, verify landing to cancellation(confirmation) page
Step 4: Repeat and choose ID types, click on button
Step 5: Verify landing to cancellation(confirmation) page and analytics events logged

Sample event:

{
  "name":"Frontend: IdV: exit optional questions",
  "properties":{
    "event_properties":{
      "ids":[
        {
          "name":"us_passport",
          "checked":false
        },
        {
          "name":"resident_card",
          "checked":false
        },
        {
          "name":"military_id",
          "checked":false
        },
        {
          "name":"tribal_id",
          "checked":false
        },
        {
          "name":"voter_registration_card",
          "checked":false
        },
        {
          "name":"other",
          "checked":false
        }
      ],
      "flow_path":"standard",
      "acuant_sdk_upgrade_a_b_testing_enabled":"false",
      "use_alternate_sdk":"false",
      "acuant_version":"11.9.1"
    },
    "new_event":true,
    "path":"/api/logger",
    "session_duration":19.410147,
    "user_id":"3321d388-1fc4-47bc-b7a0-5d59ef52d735",
    "locale":"en",
    "user_ip":"127.0.0.1",
    "hostname":"localhost",
    "pid":33993,
    "service_provider":null,
    "trace_id":null,
    "git_sha":"b2a23958",
    "git_branch":"feature/LG-11139-question-upon-exit",
    "user_agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36",
    "browser_name":"Chrome",
    "browser_version":"117.0.0.0",
    "browser_platform_name":"macOS",
    "browser_platform_version":"10.15.7",
    "browser_device_name":"Unknown",
    "browser_mobile":false,
    "browser_bot":false
  },
  "time":"2023-10-16T18:54:03.411Z",
  "id":"b3f499f4-fed1-41e6-b7ef-6e250c744a36",
  "visitor_id":"fc02aabb-3cb8-4923-af91-b26ac1487b47",
  "visit_id":"ce63dcbb-f9d8-4461-9823-8b2bd11d7942",
  "log_filename":"events.log"
}

👀 Screenshots

If relevant, include a screenshot or screen capture of the changes.

Without Service Provider:

English:

Spanish:

French:

With Service Provider:

English:

Spanish:

French:

…and fieldset test. Translations of nosp text.

app/javascript/packages/document-capture/components/optional-questions.scss

changelog: User-Facing Improvements, IdV document capture, Add optional questions when users decide not to continue

app/javascript/packages/components/checkbox.spec.tsx

eileen-nava · 2023-10-17T20:44:02Z

app/javascript/packages/components/checkbox.spec.tsx

@@ -0,0 +1,49 @@
+import { render } from '@testing-library/react';


Tests look really thorough here. 👍🏻

spec/features/idv/doc_auth/document_capture_spec.rb

spec/javascript/packages/document-capture/components/document-capture-abandon-spec.jsx.tsx

eileen-nava · 2023-10-18T14:00:45Z

Since kellular is out, I requested a review from @daviddsilvanava to cover design considerations.

aduth · 2023-10-18T14:13:43Z

app/javascript/packages/components/field-set.tsx

@@ -0,0 +1,21 @@
+import { FieldsetHTMLAttributes, ReactNode } from 'react';
+
+export interface FieldSetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {


Really nice work with these reusable components 👍

Interesting on the difference in capitalization between "Fieldset" and "FieldSet", even between React and TypeScript's built-in DOM typings. I'm not sure which is "correct", though I think I'd agree with you that its spelled-out "field set" as two words would make sense capitalized as you've proposed.

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

daviddsilvanava

A couple items to flag:

There seems to be more line padding/spacing around the optional tag and survey question in the screenshot compared to Figma. Is there a way to tighten that up?
In the spanish translation, Tarjeta verde --> Tarjeta Verde
tarjeta de residente permanente --> Tarjeta de Residente Permanente
Carte verte américaine --> Carte Verte américaine
carte de résident permanent --> Carte de Résident Permanent

dawei-nava · 2023-10-18T15:33:27Z

A couple items to flag:

There seems to be more line padding/spacing around the optional tag and survey question in the screenshot compared to Figma. Is there a way to tighten that up?

In the spanish translation, Tarjeta verde --> Tarjeta Verde

tarjeta de residente permanente --> Tarjeta de Residente Permanente

Carte verte américaine --> Carte Verte américaine

carte de résident permanent --> Carte de Résident Permanent

@daviddsilvanava , should we update translation doc here https://docs.google.com/document/d/1-1_DNOWj2z6V7vSN18SyhW3zrAkWgdVjPm-lueWJKIA/edit

daviddsilvanava · 2023-10-18T15:47:09Z

A couple items to flag:

There seems to be more line padding/spacing around the optional tag and survey question in the screenshot compared to Figma. Is there a way to tighten that up?

In the spanish translation, Tarjeta verde --> Tarjeta Verde

tarjeta de residente permanente --> Tarjeta de Residente Permanente

Carte verte américaine --> Carte Verte américaine

carte de résident permanent --> Carte de Résident Permanent

@daviddsilvanava , should we update translation doc here https://docs.google.com/document/d/1-1_DNOWj2z6V7vSN18SyhW3zrAkWgdVjPm-lueWJKIA/edit

Yes, all set!

dawei-nava · 2023-10-19T13:34:17Z

A couple items to flag:

There seems to be more line padding/spacing around the optional tag and survey question in the screenshot compared to Figma. Is there a way to tighten that up?

In the spanish translation, Tarjeta verde --> Tarjeta Verde

tarjeta de residente permanente --> Tarjeta de Residente Permanente

Carte verte américaine --> Carte Verte américaine

carte de résident permanent --> Carte de Résident Permanent

@daviddsilvanava , should we update translation doc here https://docs.google.com/document/d/1-1_DNOWj2z6V7vSN18SyhW3zrAkWgdVjPm-lueWJKIA/edit

Yes, all set!

@daviddsilvanava Updated screenshots.

daviddsilvanava · 2023-10-20T19:17:03Z

A couple items to flag:

There seems to be more line padding/spacing around the optional tag and survey question in the screenshot compared to Figma. Is there a way to tighten that up?

In the spanish translation, Tarjeta verde --> Tarjeta Verde

tarjeta de residente permanente --> Tarjeta de Residente Permanente

Carte verte américaine --> Carte Verte américaine

carte de résident permanent --> Carte de Résident Permanent

@daviddsilvanava , should we update translation doc here https://docs.google.com/document/d/1-1_DNOWj2z6V7vSN18SyhW3zrAkWgdVjPm-lueWJKIA/edit

Yes, all set!

@daviddsilvanava Updated screenshots.

@dawei-nava on the third option in english (military ID), we also need a ")" to close the parentheses.

dawei-nava · 2023-10-20T19:52:28Z

A couple items to flag:

There seems to be more line padding/spacing around the optional tag and survey question in the screenshot compared to Figma. Is there a way to tighten that up?

In the spanish translation, Tarjeta verde --> Tarjeta Verde

tarjeta de residente permanente --> Tarjeta de Residente Permanente

Carte verte américaine --> Carte Verte américaine

carte de résident permanent --> Carte de Résident Permanent

@daviddsilvanava , should we update translation doc here https://docs.google.com/document/d/1-1_DNOWj2z6V7vSN18SyhW3zrAkWgdVjPm-lueWJKIA/edit

Yes, all set!

@daviddsilvanava Updated screenshots.

@dawei-nava on the third option in english (military ID), we also need a ")" to close the parentheses.

@daviddsilvanava , updated, another question should we use "Military ID card" or "Military ID Card"?

daviddsilvanava · 2023-10-20T19:59:57Z

lower case is fine for Military ID card

…

On Fri, Oct 20, 2023 at 2:52 PM dawei-nava ***@***.***> wrote: A couple items to flag: 1. There seems to be more line padding/spacing around the optional tag and survey question in the screenshot compared to Figma. Is there a way to tighten that up? 2. In the spanish translation, Tarjeta verde --> Tarjeta Verde 3. tarjeta de residente permanente --> Tarjeta de Residente Permanente 4. Carte verte américaine --> Carte Verte américaine 5. carte de résident permanent --> Carte de Résident Permanent @daviddsilvanava <https://github.com/daviddsilvanava> , should we update translation doc here https://docs.google.com/document/d/1-1_DNOWj2z6V7vSN18SyhW3zrAkWgdVjPm-lueWJKIA/edit Yes, all set! @daviddsilvanava <https://github.com/daviddsilvanava> Updated screenshots. @dawei-nava <https://github.com/dawei-nava> on the third option in english (military ID), we also need a ")" to close the parentheses. @daviddsilvanava <https://github.com/daviddsilvanava> , updated, another question should we use "Military ID card" or "Military ID Card"? — Reply to this email directly, view it on GitHub <#9392 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVQYLCEDTGWKLQUCSS2DOM3YALJARAVCNFSM6AAAAAA6CVNNM2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZTGMYTKMZYGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

daviddsilvanava · 2023-10-20T20:01:16Z

lower case is fine for Military ID card
…
On Fri, Oct 20, 2023 at 2:52 PM dawei-nava @.> wrote: A couple items to flag: 1. There seems to be more line padding/spacing around the optional tag and survey question in the screenshot compared to Figma. Is there a way to tighten that up? 2. In the spanish translation, Tarjeta verde --> Tarjeta Verde 3. tarjeta de residente permanente --> Tarjeta de Residente Permanente 4. Carte verte américaine --> Carte Verte américaine 5. carte de résident permanent --> Carte de Résident Permanent @daviddsilvanava https://github.com/daviddsilvanava , should we update translation doc here https://docs.google.com/document/d/1-1_DNOWj2z6V7vSN18SyhW3zrAkWgdVjPm-lueWJKIA/edit Yes, all set! @daviddsilvanava https://github.com/daviddsilvanava Updated screenshots. @dawei-nava https://github.com/dawei-nava on the third option in english (military ID), we also need a ")" to close the parentheses. @daviddsilvanava https://github.com/daviddsilvanava , updated, another question should we use "Military ID card" or "Military ID Card"? — Reply to this email directly, view it on GitHub <#9392 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVQYLCEDTGWKLQUCSS2DOM3YALJARAVCNFSM6AAAAAA6CVNNM2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZTGMYTKMZYGA . You are receiving this because you were mentioned.Message ID: @.>

@dawei-nava not sure why this came in as a separate comment, but see above

kellular

Reviewed the updated screenshots -- this looks great, Dawei!

eileen-nava

I tested locally with and without a SP. Looks good. Approved.

aduth · 2023-12-19T17:49:35Z

config/locales/idv/fr.yml

      come_back_later: Lettre avec un crochet
+    legal_statement:
+      information_collection: >-
+        Esta recopilación de información cumple con los requisitos del título 44


@dawei-nava I've been doing an audit of French/Spanish mismatches and stumbled upon this. It appears we have French and Spanish mixed up in these texts. (This text is Spanish)

Actually, strangely it looks like the paragraph changes to French about halfway through ("Nous estimons ..."). The same happens in the Spanish implementation (changes from French to Spanish at the burden estimation portion ("Calculamos que tomará ...")

Follow-up at #9801

@aduth , thanks, not sure what happened, it was supposed to be copied from translations.

dawei-nava added 8 commits October 16, 2023 14:14

LG-11139: Add new components

9037055

LG-11139: Add checkboxes for id types, add button to exit doc auth.

3803cb1

LG-11139: rebase.

6eba519

LG-11139: design change, sp and no sp difference. Tests for checkbox …

15855ea

…and fieldset test. Translations of nosp text.

LG-11139: component test and refactor.

b25fd18

LG-11139: style tweaks.

7854f0a

LG-11139: clean up translations.

c889c41

LG-11139: remove extra entry.

b2a2395

dawei-nava requested a review from kellular October 16, 2023 19:16

LG-11139: fix tests.

ef354fe

aduth reviewed Oct 16, 2023

View reviewed changes

app/javascript/packages/document-capture/components/optional-questions.scss Outdated Show resolved Hide resolved

LG-11139: add change log.

c1cd972

changelog: User-Facing Improvements, IdV document capture, Add optional questions when users decide not to continue

dawei-nava force-pushed the feature/LG-11139-question-upon-exit branch from 86cbe40 to c1cd972 Compare October 16, 2023 20:03

dawei-nava added 5 commits October 16, 2023 21:21

LG-11139: there is a class that can be used.

525f5e0

LG-11139: support focused checkbox.

458cd54

LG-11139: feature test and header level.

c72ab75

LG-11139: js test header fix.

7732f63

LG-11139: js test header fix.

51631a7

dawei-nava requested review from a team and amirbey and removed request for a team October 17, 2023 14:46

dawei-nava marked this pull request as ready for review October 17, 2023 20:33

eileen-nava reviewed Oct 18, 2023

View reviewed changes

eileen-nava requested a review from daviddsilvanava October 18, 2023 14:00

aduth reviewed Oct 18, 2023

View reviewed changes

daviddsilvanava reviewed Oct 18, 2023

View reviewed changes

LG-11139: typos etc.

ca6dd38

LG-11139: missing ).

bcf4c4b

kellular approved these changes Oct 23, 2023

View reviewed changes

eileen-nava self-requested a review October 24, 2023 20:55

eileen-nava approved these changes Oct 24, 2023

View reviewed changes

dawei-nava merged commit 43e1303 into main Oct 25, 2023

dawei-nava deleted the feature/LG-11139-question-upon-exit branch October 25, 2023 12:09

mdiarra3 mentioned this pull request Oct 26, 2023

Deploy RC 327 to Prod #9460

Merged

aduth reviewed Dec 19, 2023

View reviewed changes

aduth mentioned this pull request Dec 19, 2023

Fix and test for mismatched locale content #9801

Merged

		@@ -0,0 +1,49 @@
		import { render } from '@testing-library/react';

		@@ -0,0 +1,21 @@
		import { FieldsetHTMLAttributes, ReactNode } from 'react';

		export interface FieldSetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {

Conversation

dawei-nava commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎫 Ticket

🛠 Summary of changes

📜 Testing Plan

👀 Screenshots

Uh oh!

Uh oh!

Uh oh!

Uh oh!

eileen-nava Oct 17, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

eileen-nava commented Oct 18, 2023

Uh oh!

aduth Oct 18, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

daviddsilvanava left a comment

Choose a reason for hiding this comment

Uh oh!

dawei-nava commented Oct 18, 2023

Uh oh!

daviddsilvanava commented Oct 18, 2023

Uh oh!

dawei-nava commented Oct 19, 2023

Uh oh!

daviddsilvanava commented Oct 20, 2023

Uh oh!

dawei-nava commented Oct 20, 2023

Uh oh!

daviddsilvanava commented Oct 20, 2023 via email

Uh oh!

daviddsilvanava commented Oct 20, 2023

Uh oh!

kellular left a comment

Choose a reason for hiding this comment

Uh oh!

eileen-nava left a comment

Choose a reason for hiding this comment

Uh oh!

aduth Dec 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aduth Dec 19, 2023

Choose a reason for hiding this comment

Uh oh!

aduth Dec 19, 2023

Choose a reason for hiding this comment

Uh oh!

dawei-nava Dec 19, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dawei-nava commented Oct 16, 2023 •

edited

Loading

aduth Dec 19, 2023 •

edited

Loading