[HOLD for payment 2023-10-02] [$250] Migrate OnfidoStep.js to function component

[marcaaron]

Class Component Migration

Filenames

• src/pages/EnablePayments/OnfidoStep.js
  • type: React.Component
  • has state values: false
  • has refs: false
  • has context: false
  • lifecycle methods: none

Task

• We currently have some class components in our codebase that we would like to refactor to a function component.
• Here's a link with some general advice on how to refactor a class component to a function component: https://react.dev/reference/react/Component#alternatives
• If you need additional guidance, please ask in #expensify-open-source
• Test for any regressions and verify that there are no breaking changes

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0116d0baefad9a4a03
• Upwork Job ID: 1703726382146158592
• Last Price Increase: 2023-09-18

[MelvinBot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[marcaaron]

Heads up! The pricing for this issue has been adjusted based on the scope of the work and the fact that no complex bug investigations or proposal are required.

[vdem0115]

I would like to work on this issue.

[olexyt]

I can work on this issue.

[rayane-djouah]

Can I work on this?

[mejed-alkoutaini]

I'm able to work on this if needed!

[neonbhai]

I would love to work on this

[KrAbhas]

Can I work on this?

[adhorodyski]

Hey! 👋 I’m from Callstack, an expert agency, and I’d like to work on this issue.

[melvin-bot]

📣 @adhorodyski! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0116d0baefad9a4a03

[melvin-bot]

Triggered auto assignment to @mallenexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @thesahindia (External)

[ghost]

Dibs

[the-mold]

dibs

[carlitose]

Hello Expensify Team,

As requested, I prepared a strategy for converting the class component OnfidoStep.js to a functional one.

1. Analyze the Code: The first step will be to understand the existing class component thoroughly and identify its dependencies and functionality.

2. Conversion Strategy: Given that the OnfidoStep.js doesn't make use of local state, lifecycle methods, or refs, I will directly convert it into a functional component. Let's convert the class methods and other functionalities as follows:

   • Convert the canShowOnfido() method to a function inside our new functional component.

3. Refactor the Class Component: Once I have a clear understanding of the component and a strategy in place, I'll refactor the class component into a functional one.

   • Here is a basic skeleton of what the converted functional component would look like:

   const OnfidoStep = (props) => {
       const canShowOnfido = () => {
           // existing logic...
       }
   
       // Return statement remains same...
   }

4. Testing: After refactoring, I will meticulously run various tests to confirm the component operates as expected and doesn’t introduce any regressions.

5. Pull Request submission: I will prepare the final commit, summarizing the changes made. Upon completion, I'll create a pull request and provide screenshots of the successful refactored component and other necessary evidence.

I trust that my experience with React and JavaScript will enable a seamless conversion of the component while retaining full functionality.

I look forward to your favorable consideration,

Carlo

---

Replace [Your Name] with your real name. Be sure to personalize this proposal based on your own skills, experiences, and the specifics of the project
Contributor details
Your Expensify account email: carlog.sergi@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01b0d12422bbdbf2d3

[adhorodyski]

PR: #27784

[melvin-bot]

Triggered auto assignment to @robertjchen, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.73-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Migrate OnfidoStep.js to a functional component #27784

If no regressions arise, payment will be issued on 2023-10-02. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @adhorodyski does not require payment (Contractor)
• @thesahindia does not require payment (Eligible for Manual Requests)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

@robertjchen, @mallenexpensify, @adhorodyski, @thesahindia Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[mallenexpensify]

@adhorodyski can you please accept the job and reply here once you have?
https://www.upwork.com/jobs/~0116d0baefad9a4a03

I'm guessing we don't need a regression test for this, correct me if I'm wrong @thesahindia

[mallenexpensify]

D'oh, didn't realize @adhorodyski was CallStack.

Issue reporter: N/A - internal
Contributor: @adhorodyski is with CallStack and paid via invoice.
Contributor+: @thesahindia is due $250 via NewDot

[thesahindia]

@mallenexpensify, I am requesting $250 for the C+ review. Can you please confirm that it's the right amount? We need a confirmation before Jason can approve the payment.

[mallenexpensify]

Thanks for the ping @thesahindia , unsure how I missed you, sorry. I updated the post above to reflect

Contributor+: @thesahindia is due $250 via NewDot

[JmillsExpensify]

$250 payment approved for @thesahindia based on BZ summary.