Skip to content

Validate document capture step completion after page reload#3984

Merged
aduth merged 2 commits intomasterfrom
aduth-verify-history-completion
Jul 29, 2020
Merged

Validate document capture step completion after page reload#3984
aduth merged 2 commits intomasterfrom
aduth-verify-history-completion

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Jul 28, 2020

Why: The useHistoryParam React hook introduced in #3952 works a little too well in that it will blindly accept a hash parameter #step=selfie to skip to the corresponding step. This is not desirable in the case that the user reloads the page after completing one of the steps, since the state (form values) will not persist after the page reload. Instead, the step's validity logic (introduced in #3978) should be used to verify step completion of all form steps up until the one associated with value assigned to the URL hash. The user should be returned to the last step which qualifies as valid. In our case, this will be the first step (#step=documents).

Screen recording:

return-to-first-step mov

* @return {boolean} Whether step is valid.
*/
DocumentsStep.isValid = (value) => Boolean(value.front_image && value.back_image);
export const isValid = (value) => Boolean(value.front_image && value.back_image);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's technically valid to assign a property into an instanceof Function, but the TypeScript JSDoc flavor doesn't handle this case very well to "re-open" the React component definition for extension. So I opted instead to make this a proper exported member of the module, which retains the benefit of colocality, while integrating a little better with type-checking.

Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

* @return {number} Step index.
*/
export function getStepIndexByName(steps, name) {
return steps.findIndex((step) => step.name === name);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It occurs to me these methods may not be polyfilled correctly in Internet Explorer. I created a ticket LG-3241.

@aduth aduth merged commit e1c2830 into master Jul 29, 2020
@aduth aduth deleted the aduth-verify-history-completion branch July 29, 2020 15:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants