[Awaiting payment][$125] Web - Workspace - Console error shows up when clicking Share button

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.62-0
Reproducible in staging?: Y
Reproducible in production?: N
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Profile > Workspaces > any workspace.
3. Go to Profile.
4. Click Share.

Expected Result:

No console error will show up.

Actual Result:

Console error shows up.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6445447_1712813581910.bandicam_2024-04-11_13-30-47-374.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e680ef6d1ff9d76b
• Upwork Job ID: 1782410601436565504
• Last Price Increase: 2024-04-22
• Automatic offers:
• shubham1206agra | Reviewer | 0
• tienifr | Contributor | 0

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to @pecanoro (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[izarutskaya]

@johncschuster I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[izarutskaya]

We think this issue might be related to the #collect project.

[izarutskaya]

Production

bandicam.2024-04-11.10-54-53-331.mp4

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Console error shows up.

What is the root cause of that problem?

We're setting qrCodeSize with default value is 0

App/src/components/QRShare/index.tsx

Line 19 in 260a7de

const [qrCodeSize, setQrCodeSize] = useState(0);

that cause the logoSize is 0

App/src/components/QRCode.tsx

Line 53 in 260a7de

logoSize={size * logoRatio}

If the logoSize is 0, the logoBackgroundBorderRadius will be NaN here

What changes do you think we should make in order to solve the problem?

We should set the default value of qrCodeSize is undefined here, so the size will be set to 120

App/src/components/QRCode.tsx

Line 44 in 260a7de

function QRCode({url, logo, getRef, size = 120, color, backgroundColor, logoRatio = CONST.QR.DEFAULT_LOGO_SIZE_RATIO, logoMarginRatio = CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}: QRCodeProps) {

What alternative solutions did you explore? (Optional)

in QRCode:

Solution 1: Return null if size is 0

Solution 2: We can consider to fallback the size to 120 if it's 0

Solution 3: Update this line to logoSize={(size * logoRatio) || 1}

Result

web-resize.mp4

[pecanoro]

@tienifr Please, avoid posting proposals until the Help Wanted label since we tend to have original authors fix regressions.

[Julesssss]

Console log isn't a blocker, we have a separate issue here for not being able to download the QR code.

[tienifr]

@Julesssss Do we need to fix this issue? Or do we have the PR for that? I can process the PR if we want to fix that here. Link to my solution

[Julesssss]

Assuming the fix for the linked issue doesn't fix this, then we'd still need a fix. But lets wait to see what happens with #40080

[tienifr]

Thank you!

[pecanoro]

Still waiting on #40080

[melvin-bot]

📣 @shubham1206agra 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @tienifr 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[pecanoro]

Just assigned @tienifr to the issue!

[shubham1206agra]

@trjExpensify This issue is ready for payment as it was deployed to prod 2 weeks ago.

[trjExpensify]

I think you meant to tag @johncschuster as the BZ on this issue. 👍

[shubham1206agra]

Oh yes. My bad.

[johncschuster]

Looking now

[johncschuster]

@shubham1206agra it looks like you haven't accepted the invite to the job on Upwork. Can you please accept that?

[johncschuster]

I've issued payment to @tienifr 🎉

[shubham1206agra]

@johncschuster Offer accepted

[johncschuster]

Payment has been issued to @shubham1206agra. Thanks for your contributions!