Fix payments server React-related warnings (LocalizationProvider lifecycle hooks, anchor links, dependency array)

[LZoog]

Ignore the red errors.

┆Issue is synchronized with this Jira Bug
┆Issue Number: FXA-1028

[parshva-b]

Hey @LZoog ,

I would like to claim this issue, do I set up the dev environment from the README mentioned here.

[LZoog]

Hi @parshva-b, sure thing! Thanks for offering to take this up.

Yes, you'll follow the front-page README to get setup. Once you've got the servers up and running and you've setup a Firefox account locally and verified it, you should be able to hit the payments server with this link (we're working on payments / Stripe docs, but this should hit a local fake product):

http://127.0.0.1:3031/products/321doneProProduct

You should be able to open the console from there to see the warnings. If you run into issues, you can reach the team in FxA IRC. :)

[parshva-b]

Hey @LZoog,

I am not able to hit
http://127.0.0.1:3031/products/321doneProProduct
but I keep redirecting to the Settings page on port 3030 (this is after creating a firefox account)

After a little probing, I found these console print statements

I have asked this question on the IRC channel mentioned as well and am awaiting a response.
Need assistance, thanking in advance

[parshva-b]

Hey @LZoog,

I can now access page but I pulled the new code from master and now I can't seem to hit the page again. (Attaching a gif for reference)

Essentially, I am encountering CORS errors and WebSocket errors

Should I roll back to previous version or am i missing steps here. Would love your help.

[LZoog]

Hey @parshva-b, I'm sorry for the late response here. I looked into this just now to try to help out and it actually looks like we can close this issue.

Here's what I'm seeing now.

This issue was just regarding the warnings, and we can ignore the Stripe warning since we're in development here. It looks like the only warning we have now is one coming from react-document-title and will be fixed when gaearon/react-document-title#62 is addressed.

FWIW, you can read through https://mozilla.github.io/ecosystem-platform/docs/fxa-engineering/fxa-sub-platform to see how to go through a payments server flow locally (we've had some recent changes to setup here) but you'd need to create your own free Stripe account and setup your own product and reference that URL. Kind of hairy. 😅

Thank you for volunteering to do this though, it's appreciated!