feat(SaaS): Billing settings screen

[amanape]

• Created new /settings/billing screen and payment form
• Split /settings route and fix styles
• Create new dev:mock:saas start script to (semi-)simulate a saas environment for the FE only
• Created two new API methods
  • createCheckoutSession to initiate a payment
  • getBalance to get the user's balance
• Extend the <SettingsInput /> component
  • Support an onChange prop
  • Placeholder color
• Create mock billing handlers for use with msw
• Refactor e2e tests for billing

---

To run this PR locally, use the following command:

docker run -it --rm   -p 3000:3000   -v /var/run/docker.sock:/var/run/docker.sock   --add-host host.docker.internal:host-gateway   -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:35dacab-nikolaik   --name openhands-app-35dacab   docker.all-hands.dev/all-hands-ai/openhands:35dacab

[tofarr]

I wonder if we should issue a 302 redirect from the backend for this... 🤔

[tofarr]

(Not a blocker though)

[amanape]

I would agree, the only thing is that when testing/mocking, msw cannot actually simulate a redirect. This means that when running the FE with e.g., npm run dev:mock:saas, we won't redirect to the test Stripe form.

Not a big deal, technically you can still copy-paste the 302 redirect URL from the network tab when in a mocked env.

[tofarr]

I think we can trim down the tests slightly, as some of the constraints there are no longer applicable.

[tofarr]

🍰