Add sso options to wpcc signup flow

[chihsuan]

Proposed Changes

63-gh-woocommerce/team-ghidorah

This PR adds Apple and Google SSO options to wpcc signup flow for woocommerce.com.

Changes (please also check commits):

• Set isSocialSignupEnabled true for wpcc flow to show social signup form
• Update logic to perform regular login after SSO signup in the wpcc flow
• Set redirect_uri and save redirectToAfterLoginUrl for Apple SSO in the wpcc flow
• Persist URL query string in apple SSO "state" to show the correct UI.
• Update oauth-client form style for woo

Testing Instructions

See "Testing Instructions" in #64957 to set up a working wpcalypso.wordpress.com environment on your local machine.

Test Google Signup

1. Make sure you're logged out WordPress.com account.
2. Go to https://woocommerce.com/
3. Click Get Started
4. Replace the URL host with wpcalypso.wordpress.com
5. Click on "Continue with Google" button.
6. Complete the Google connect flow.
7. Observe that you're logged
8. If it's a new account, you should be redirected to https://woocommerce.com/start Otherwise, you will be redirected to https://woocommerce.com/my-dashboard/. (Note that the redirection logic is implemented in the woocmmerce.com end.)

Screen.Recording.2022-09-08.at.15.17.46.mov

Test Apple Signup

1. Make sure you're logged out WordPress.com account.
2. Go to https://woocommerce.com/
3. Click Get Started
4. Replace the the URL host with wpcalypso.wordpress.com
5. Click on "Continue with Apple" button.
6. Complete the Apple connect flow.
7. Observe that you're logged
8. If it's a new account, you should be redirected to https://woocommerce.com/start Otherwise, you will be redirected to https://woocommerce.com/my-dashboard/.

Screen.Recording.2022-09-08.at.15.19.53.mov

Pre-merge Checklist

• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-a04eb71753bf29c89ef07d1874aada09ee7567b6

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-a04eb71753bf29c89ef07d1874aada09ee7567b6&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~43 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
entry-login       +144 B  (+0.0%)      +44 B  (+0.0%)
entry-main         +36 B  (+0.0%)       +2 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~305 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
jetpack-connect       +846 B  (+0.1%)     +266 B  (+0.1%)
accept-invite         +846 B  (+0.2%)     +266 B  (+0.3%)
security              +108 B  (+0.0%)      +39 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~256 bytes added 📈 [gzipped])

name                                           parsed_size           gzip_size
async-load-signup-steps-user                        +775 B  (+0.4%)     +246 B  (+0.4%)
async-load-design-blocks                            +108 B  (+0.0%)      +41 B  (+0.0%)
async-load-calypso-blocks-inline-help-popover        +36 B  (+0.0%)      +10 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[chihsuan]

Confirmed Pre-Release E2E Tests (Web app) passed.

[ilyasfoo]

LGTM! 🚢