Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: QR code scanner #8196

Merged
merged 72 commits into from
Jan 21, 2025
Merged

feat: QR code scanner #8196

merged 72 commits into from
Jan 21, 2025

Conversation

tahmidrahman-dsi
Copy link
Collaborator

@tahmidrahman-dsi tahmidrahman-dsi commented Dec 11, 2024 •
edited by naftis
Loading

Reason for this feature

To support countries which implemented identity systems to obtain identifiers for its residents. A common use case is that there is a QR code associated with the resident's identity card provided by the identity system. The QR code holds the person information and can be used to pre-fill event form. We need to support this use case.

What this feature does

This feature introduces QR code scanning ability to the application via a UI component called <IDReader /> which can be used in form with type ID_READER allowing the form to be pre-populated based on form configuration.

Bundle size effects

Before (develop):

build/registerSW.js                 0.14 kB
build/manifest.webmanifest          0.15 kB
build/index.html                    3.39 kB │ gzip:     1.44 kB
build/assets/index-Bqb48nWC.js  7,243.64 kB │ gzip: 2,025.47 kB │ map: 23,854.29 kB

After (feature branch merged with develop)

build/registerSW.js                                 0.14 kB
build/manifest.webmanifest                          0.15 kB
build/index.html                                    3.39 kB │ gzip:     1.44 kB
build/assets/qr-scanner-worker.min-D85Z9gVD.js     44.01 kB │ gzip:    10.50 kB │ map:     45.01 kB
build/assets/index-BiU8_hQ6.js                  7,328.06 kB │ gzip: 2,040.90 kB │ map: 24,047.98 kB

Merging this ticket closes #7978, #7979

tahmidrahman-dsi and others added 17 commits November 12, 2024 14:58
@tahmidrahman-dsi

This comment was marked as resolved.

Sign in to view
@naftis naftis marked this pull request as ready for review December 12, 2024 08:09
@ocrvs-bot
Copy link
Collaborator

Storybook deployed: https://feat-ocrvs-7978-qr-reader.opencrvs.pages.dev

naftis
naftis reviewed Dec 16, 2024
View reviewed changes
packages/components/src/IDReader/readers/QRReader/QRReader.tsx Outdated
Comment on lines 23 to 25
const StyledButton = styled(SecondaryButton)`
width: 100%;
`
Copy link
Collaborator

Choose a reason for hiding this comment

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

Use Button component instead

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Sure thanks. will do

@tahmidrahman-dsi tahmidrahman-dsi mentioned this pull request Dec 17, 2024
Closed
naftis
naftis reviewed Jan 14, 2025
View reviewed changes
packages/components/src/IDReader/readers/QRReader/Scanner.tsx
const Scanner = (props: ScannerProps) => {
const scanner = useRef<QRScanner>()
const videoElement = useRef<HTMLVideoElement>(null)
const [qrOn, setQrOn] = useState(true)
Copy link
Collaborator

@naftis naftis Jan 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

If I read this correctly, qrOn can never be false. When the camera cannot be used, we need to consider the error cases a bit. Let's create a new ticket on that and solve it later.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yes, thanks @naftis that is true and because of the fact that qrOn is never false,

opencrvs-core/packages/components/src/IDReader/readers/QRReader/Scanner.tsx

Line 85 in 02c283f

if (!qrOn) alert('Could not scan')

this line becomes irrelevant. We might need to determine how to handle that case as the current way is showing an alert which was an interim change and not sure if it should stay like this

Issue created: #8330

@tahmidrahman-dsi tahmidrahman-dsi temporarily deployed to featocrvs-7978qr-reader January 16, 2025 11:19 — with GitHub Actions Inactive
@tahmidrahman-dsi tahmidrahman-dsi temporarily deployed to featocrvs-7978qr-reader January 16, 2025 13:20 — with GitHub Actions Inactive
@tahmidrahman-dsi tahmidrahman-dsi temporarily deployed to featocrvs-7978qr-reader January 20, 2025 05:42 — with GitHub Actions Inactive
@naftis naftis changed the title Feat/ocrvs 7978/qr reader feat: QR code scanner Jan 20, 2025
@naftis naftis temporarily deployed to featocrvs-7978qr-reader January 20, 2025 08:16 — with GitHub Actions Inactive
@naftis naftis temporarily deployed to featocrvs-7978qr-reader January 20, 2025 08:23 — with GitHub Actions Inactive
@tahmidrahman-dsi tahmidrahman-dsi temporarily deployed to featocrvs-7978qr-reader January 20, 2025 09:36 — with GitHub Actions Inactive
@tahmidrahman-dsi tahmidrahman-dsi temporarily deployed to featocrvs-7978qr-reader January 20, 2025 10:05 — with GitHub Actions Inactive
@tahmidrahman-dsi tahmidrahman-dsi temporarily deployed to featocrvs-7978qr-reader January 20, 2025 11:06 — with GitHub Actions Inactive
@naftis naftis temporarily deployed to featocrvs-7978qr-reader January 20, 2025 12:47 — with GitHub Actions Inactive
@naftis
fix: typing
6a1d62e 
we dont know the body but the params are parsed as string
@naftis naftis temporarily deployed to featocrvs-7978qr-reader January 20, 2025 13:11 — with GitHub Actions Inactive
@tahmidrahman-dsi tahmidrahman-dsi temporarily deployed to featocrvs-7978qr-reader January 20, 2025 13:21 — with GitHub Actions Inactive
@tahmidrahman-dsi tahmidrahman-dsi deployed to featocrvs-7978qr-reader January 21, 2025 09:10 — with GitHub Actions Active
@tahmidrahman-dsi
Copy link
Collaborator Author

E2E tests are passing for current HEAD:
https://github.com/opencrvs/e2e/actions/runs/12883617577/job/35919643737

@tahmidrahman-dsi tahmidrahman-dsi merged commit c3c70e7 into develop Jan 21, 2025
72 of 73 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@naftis naftis naftis approved these changes

Assignees
No one assigned
Labels
🚀 Ready to deploy Deployment automation should pick this PR up and start auto-deploying it
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

QR Code scanner form field QR Code scanner UI component
3 participants
@tahmidrahman-dsi @ocrvs-bot @naftis