LG-11260: docauth not ready

[dawei-nava]

🎫 Ticket

LG-11260: "I'm not ready" experience

🛠 Summary of changes

Add a section of UI for user not ready to upload photo on capture screen, links to exit to service provider or account page.
Also a add flag to control rendering of this UI block.

📜 Testing Plan

Provide a checklist of steps to confirm the changes.

• Step 1: Enter doc auth workflow, without a SP.
• Step 2: On image submission screen
• Step 3: check new section of "not ready"
• Step 4: Repeat previous steps with a SP.

👀 Screenshots

Without SP:

English:

Spanish

French:

With SP:

English:

Spanish:

French:

[kellular]

Noticed that one word was missing (see my comment). Otherwise LGTM.

[charleyf]

I tested this without an SP and it works as expected. Not sure how to test with an SP so I did not do that.

Left a comment about the react code formatting, but basically this PR does what's expected so I'm approving.

[charleyf]

This works, but there are two ways to make it more in line with our FE patterns:

One, put everything inline. These are small enough that this is probably the easiest choice:

<>
      <h2 className="h3">{t('doc_auth.not_ready.header')}</h2>
      <p>
        {spName
          ? t('doc_auth.not_ready.content_sp', {
              sp_name: spName,
              app_name: appName,
            })
          : t('doc_auth.not_ready.content_nosp', {
              app_name: appName,
            })}
      </p>
...etc...
</>

Two make these into components. This is the "Correct according to React" way and probably the most reusable way to do this:

// These go outside the `DocumentCaptureNotReady` component
const NotReadyHeader = ( {text} ) => <h2 className="h3">{ text }</h2>;
const NotReadyContent = ( {text} ) => <p> { text } </p>

// This goes in the `DocumentCaptureNotReady` component
const headerText = t('doc_auth.not_ready.header')
const contentText = spName
        ? t('doc_auth.not_ready.content_sp', {
            sp_name: spName,
            app_name: appName,
          })
        : t('doc_auth.not_ready.content_nosp', {
            app_name: appName,
          })
// This is in the main return
<>
      <NotReadyHeader text={headerText} />
      <NotReadyContent text={contentText} />
...etc...
</>

[dawei-nava]

@charleyf I usually do SP testing from local by http://localhost:3000/test/saml/login, this only SAML though but it does provide SP information.

[dawei-nava]

@charleyf, indeed they are small, I put them inline.

[aduth]

@charleyf I usually do SP testing from local by http://localhost:3000/test/saml/login, this only SAML though but it does provide SP information.

Whoa, TIL this exists!

On a related note, I proposed some documentation to refer to sample apps in #9558, but that test controller could save a few steps as long as you can remember/bookmark the URL.

[dawei-nava]

@aduth, it is in the rails route. 😄

[dawei-nava]

Should we also have a /test/oidc/login route? We do have /openid_connect/authorize, but need to pass params manually.

[aduth]

It could probably make sense to have one if we think it'd be useful, even just to maintain balance between the two protocols 😄