Add overlay on the review image

[ayinloya]

This adds an overlay on top of the review image to hide the extra context taken during id capture.

The captured image will still include the extra context when uploading.

• Checkout on main
• Run npm run storybook
• Capture an ID card
• Verify that the extra context is shown
• Checkout on this branch
• Capture an ID card
• Verify that the context is hidden

Before

After

[github-actions]

This branch has been deployed to s3 / cloudfront.

✅ Preview URL for Smart Camera Web:
https://cdn.smileidentity.com/js/preview-update-id-review-screen/smart-camera-web.js
✅ Preview URL for Embed:
https://cdn.smileidentity.com/inline/preview-update-id-review-screen/js/script.min.js

[mldangelo]

@andy-smileid Can you review this one?

[andy-smileid]

Thanks for working on this Barnabas.

LGTM and happy to see this going in.

Some things to consider in the future:

• The region shown to the user during capture should be exactly the same region shown on this verification view and I'd be happy to check this later (including aspect ratio).
• We are leaving out text referencing that all the text on the card must be readable (a high % of jobs are rejected because the text is blurry). Button answer a question that was not explicitly posed and does not relate directly to text above (we are asking about corners and glare and answering re whether it's readable. Anyway, just saying the text here is a bit murky and should be clarified in the future (and match precisely our mobile SDKs).

[andy-smileid]

• Also for the future, we should display the cropped image in the largest possible frame instead of cropping the image into a smaller region.