Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Registrationless checkout: Add email field validation #44227

Conversation

niranjan-uma-shankar
Copy link
Contributor

@niranjan-uma-shankar niranjan-uma-shankar commented Jul 16, 2020

Changes proposed in this Pull Request

This is one among a set of stacked PRs that implements userless checkout A/B test. For more reading on the userless
checkout project, read pau2Xa-1hW-p2.

This PR implements the following:

  • Connects the email field to the validation endpoint that verifies if the entered email address is valid.
  • Displays an error message below the email field in case of an error.

NOTE:

  • Depends on D45659-code.
  • This PR is a partial implementation only. You will not be able to process the transaction yet, subsequent PRs handle this.

Testing instructions

NOTE: Depends on D45659-code, so please apply this first.

Scenario 1 - Test invalid email formats

  • Navigate to http://calypso.localhost:3000/, set your locale/geo to EN-US, and assign yourself to variantUserless of userlessCheckout test and control of newSiteGutenbergOnboarding test.
  • Go to /start, select a paid plan and proceed to checkout. To test email validation, you will need to type something in the email field and click "Continue".
  • In the email field, try invalid email formats and verify that you are shown an error - e.g rand@something, rand#gmail.com etc.
  • Leave the email field blank and verify you get an error.
  • Repeat above steps with a domain in cart - email validation should work in both Billing Info section and Contact Info section(check screenshots in Registrationless checkout: Add email ID field with the new design #44211).

Scenario 2 - Test email taken message

  • Navigate to http://calypso.localhost:3000/, set your locale/geo to EN-US, and assign yourself to variantUserless of userlessCheckout test and control of newSiteGutenbergOnboarding test.
  • Go to /start, select a paid plan and proceed to checkout.
  • Type an email ID that is tied to an existing wpcom account. You should get a message. You will see an error message - "That email address is already in use. If you have an existing account, please log in.".
  • Verify both in the Billing Info and Contact Info sections (i.e without and with domain in cart).
  • Note - Clicking the login link will not work as expected yet. This will be fixed in Registrationless checkout: Handle page reload scenarios #44238

@matticbot
Copy link
Contributor

@matticbot
Copy link
Contributor

matticbot commented Jul 16, 2020

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

Webpack Runtime (~3971 bytes removed 📉 [gzipped])

name      parsed_size           gzip_size
manifest      -5384 B  (-2.6%)    -3971 B  (-9.7%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

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

name                   parsed_size            gzip_size
entry-login              +229586 B  (+26.4%)   +50327 B  (+21.1%)
entry-main               +203762 B  (+15.2%)   +44936 B  (+13.4%)
entry-domains-landing       +290 B   (+0.1%)     -404 B   (-0.3%)
entry-gutenboarding         +137 B   (+0.0%)     +279 B   (+0.1%)

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

Sections (~168749 bytes removed 📉 [gzipped])

name                    parsed_size            gzip_size
gutenberg-editor          -202798 B  (-22.7%)   -47898 B  (-19.9%)
checkout                  -185336 B  (-11.6%)   -41421 B  (-10.5%)
post-editor                -41017 B   (-2.0%)    -7670 B   (-1.4%)
domains                    -20962 B   (-1.8%)    -4895 B   (-1.8%)
plans                      -17023 B   (-3.3%)    -3479 B   (-2.5%)
media                      -16526 B   (-4.0%)    -4750 B   (-4.2%)
posts                      -15911 B   (-4.3%)    -4757 B   (-4.6%)
posts-custom               -15837 B   (-4.3%)    -4561 B   (-4.5%)
purchases                  -15831 B   (-1.6%)    -3202 B   (-1.4%)
email                      -15137 B   (-4.6%)    -3749 B   (-4.2%)
settings-writing           -15029 B   (-2.9%)    -4692 B   (-3.4%)
woocommerce                -14079 B   (-0.7%)    -2276 B   (-0.4%)
hosting                    -13201 B   (-5.8%)    -3480 B   (-5.4%)
people                     -13183 B   (-3.4%)    -3518 B   (-3.4%)
pages                      -12985 B   (-5.4%)    -3734 B   (-5.4%)
earn                       -12450 B   (-4.2%)    -2525 B   (-3.2%)
security                   -11499 B   (-2.4%)    -2302 B   (-1.9%)
wp-super-cache             -11340 B   (-4.9%)    -3076 B   (-4.9%)
reader                     -10299 B   (-2.0%)    -1966 B   (-1.5%)
help                        -6249 B   (-1.3%)     -489 B   (-0.4%)
settings                    -6142 B   (-1.3%)    -1616 B   (-1.2%)
stats                       -5798 B   (-0.7%)    -1269 B   (-0.6%)
home                        -5232 B   (-1.2%)    -1144 B   (-1.0%)
settings-security           -5057 B   (-1.7%)    -1169 B   (-1.4%)
themes                      -4776 B   (-1.3%)     -386 B   (-0.4%)
comments                    -4506 B   (-0.8%)    -1061 B   (-0.8%)
theme                       -4438 B   (-1.5%)    -1199 B   (-1.5%)
jetpack-connect             -3974 B   (-0.6%)     -390 B   (-0.2%)
plugins                     -3957 B   (-0.9%)     +120 B   (+0.1%)
zoninator                   -3703 B   (-1.2%)    -1194 B   (-1.4%)
marketing                   -3656 B   (-0.8%)    -1064 B   (-0.9%)
activity                    -3645 B   (-0.7%)     -695 B   (-0.5%)
site-blocks                 -3598 B   (-1.1%)     +131 B   (+0.2%)
settings-performance        -3486 B   (-1.2%)     -863 B   (-1.0%)
preview                     -3231 B   (-2.1%)     -685 B   (-1.6%)
customize                   -3204 B   (-1.8%)     -929 B   (-1.8%)
google-my-business          -3105 B   (-1.0%)     -569 B   (-0.7%)
backup                      -3070 B   (-0.7%)     -641 B   (-0.5%)
export                      -2868 B   (-1.4%)     -803 B   (-1.4%)
settings-discussion         -2562 B   (-1.1%)     -781 B   (-1.2%)
account-close               -2444 B   (-0.8%)     +284 B   (+0.3%)
account                     -2282 B   (-0.6%)     +411 B   (+0.4%)
import                      -2262 B   (-1.0%)     -420 B   (-0.7%)
settings-jetpack            -1901 B   (-0.9%)     -319 B   (-0.5%)
scan                        -1734 B   (-0.5%)     -325 B   (-0.4%)
purchase-product            -1579 B   (-2.3%)     -443 B   (-2.4%)
notification-settings       -1453 B   (-0.4%)     +513 B   (+0.6%)
signup                      +1115 B   (+0.5%)     +259 B   (+0.4%)
concierge                    -753 B   (-0.2%)     -138 B   (-0.2%)
feature-upsell               -689 B   (-0.4%)      -73 B   (-0.2%)
privacy                      -666 B   (-0.2%)     +704 B   (+1.0%)
me                           -666 B   (-0.3%)     +702 B   (+1.0%)
happychat                    -666 B   (-0.2%)     +692 B   (+0.9%)
jetpack-cloud-settings       -542 B   (-0.4%)      -53 B   (-0.1%)
sites                        -278 B   (-0.3%)       +2 B   (+0.0%)
sensei                       -278 B   (-0.3%)       -8 B   (-0.0%)
migrate                      -278 B   (-0.2%)       +4 B   (+0.0%)
jetpack-cloud                -278 B   (-0.3%)       +3 B   (+0.0%)
hello-dolly                  -278 B   (-0.3%)       -8 B   (-0.0%)
accept-invite                -252 B   (-0.1%)     +143 B   (+0.2%)
devdocs                      -114 B   (-0.1%)      -32 B   (-0.1%)

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 (~19734 bytes added 📈 [gzipped])

name                                                                  parsed_size             gzip_size
async-load-blocks-inline-help-popover                                   +130485 B   (+62.2%)   +38359 B   (+67.3%)
async-load-blocks-inline-help                                            +69725 B   (+93.2%)   +16823 B   (+94.3%)
async-load-design-blocks                                                 -31469 B    (-1.0%)    -5902 B    (-0.8%)
async-load-blocks-inline-help-dialog                                     +24708 B  (+496.7%)    +6971 B  (+355.5%)
async-load-components-web-preview-component                              -21706 B    (-5.0%)    -5100 B    (-4.4%)
async-load-design                                                        -19212 B    (-1.0%)    -3697 B    (-0.8%)
async-load-design-playground                                             -16781 B    (-0.9%)    -3045 B    (-0.7%)
async-load-post-editor-media-modal                                       -14651 B    (-5.2%)    -3377 B    (-4.5%)
async-load-my-sites-current-site-domain-warnings                         -12127 B   (-21.1%)    -3803 B   (-24.6%)
async-load-lib-preferences-helper                                        -10777 B   (-56.1%)    -3131 B   (-57.1%)
async-load-blocks-support-article-dialog-dialog                           -5411 B    (-5.8%)    -1351 B    (-5.0%)
async-load-my-sites-sidebar                                               -5318 B    (-3.0%)     -624 B    (-1.3%)
async-load-signup-steps-plans                                             -3626 B    (-1.9%)     -293 B    (-0.6%)
async-load-signup-steps-domains                                           -2333 B    (-0.9%)    -1121 B    (-1.8%)
async-load-signup-steps-import-url-onboarding                             -2309 B    (-6.2%)     -557 B    (-4.8%)
async-load-my-sites-current-site-stale-cart-items-notice                  -2292 B    (-4.0%)     -467 B    (-2.7%)
async-load-signup-steps-import-url                                        -1998 B    (-8.4%)     -467 B    (-6.5%)
async-load-my-sites-site-settings-seo-settings-form                       -1894 B    (-0.7%)     -344 B    (-0.5%)
async-load-signup-steps-plans-atomic-store                                -1812 B    (-1.5%)     +141 B    (+0.4%)
async-load-signup-steps-site-topic                                        -1750 B    (-5.9%)     -421 B    (-4.9%)
async-load-signup-steps-about                                             -1750 B    (-3.0%)     -421 B    (-2.5%)
async-load-layout-guided-tours-component                                  -1738 B    (-2.0%)     -373 B    (-1.7%)
async-load-apps-notifications-index-jsx                                   -1642 B    (-1.4%)     -366 B    (-1.1%)
async-load-signup-steps-theme-selection                                   -1565 B    (-2.4%)     -389 B    (-2.1%)
async-load-layout-nps-survey-notice                                       -1517 B    (-6.0%)     -341 B    (-5.4%)
async-load-my-sites-current-site-notice                                   -1312 B    (-2.1%)     -325 B    (-2.2%)
async-load-signup-steps-survey                                            -1293 B    (-7.6%)     -318 B    (-6.9%)
async-load-signup-steps-site-picker                                        -988 B    (-1.7%)     -210 B    (-1.2%)
async-load-layout-guided-tours                                             -963 B    (-6.2%)     -198 B    (-5.0%)
async-load-signup-steps-import-preview                                     -926 B    (-3.5%)     -257 B    (-3.2%)
async-load-signup-steps-site-or-domain                                     -826 B    (-4.0%)     -211 B    (-3.7%)
async-load-reader-following-manage                                         -825 B    (-0.7%)     -217 B    (-0.7%)
async-load-lib-abtest-test-helper                                          -682 B    (-7.5%)     -175 B    (-5.7%)
async-load-signup-steps-user                                               -615 B    (-0.5%)     -149 B    (-0.5%)
async-load-signup-steps-upsell                                             -615 B    (-2.1%)     -158 B    (-2.2%)
async-load-signup-steps-test-step                                          -615 B    (-7.6%)     -170 B    (-7.1%)
async-load-signup-steps-site-type                                          -615 B    (-5.4%)     -166 B    (-5.1%)
async-load-signup-steps-site-title                                         -615 B    (-5.3%)     -167 B    (-5.1%)
async-load-signup-steps-site-style                                         -615 B    (-2.1%)     -177 B    (-1.8%)
async-load-signup-steps-site                                               -615 B    (-2.5%)     -165 B    (-2.3%)
async-load-signup-steps-rewind-were-backing                                -615 B    (-7.0%)     -172 B    (-6.5%)
async-load-signup-steps-rewind-migrate                                     -615 B    (-2.5%)     -171 B    (-2.5%)
async-load-signup-steps-rewind-form-creds                                  -615 B    (-1.3%)     -167 B    (-1.4%)
async-load-signup-steps-rebrand-cities-welcome                             -615 B    (-4.5%)     -167 B    (-4.4%)
async-load-signup-steps-reader-landing                                     -615 B    (-5.3%)     -171 B    (-5.4%)
async-load-signup-steps-passwordless                                       -615 B    (-2.4%)     -162 B    (-2.3%)
async-load-signup-steps-p2-site                                            -615 B    (-2.4%)     -158 B    (-2.3%)
async-load-signup-steps-creds-permission                                   -615 B    (-2.1%)     -161 B    (-2.0%)
async-load-signup-steps-creds-confirm                                      -615 B    (-2.1%)     -163 B    (-2.0%)
async-load-signup-steps-creds-complete                                     -615 B    (-7.0%)     -168 B    (-6.3%)
async-load-signup-steps-clone-start                                        -615 B    (-4.3%)     -174 B    (-4.2%)
async-load-signup-steps-clone-ready                                        -615 B    (-2.2%)     -172 B    (-2.2%)
async-load-signup-steps-clone-point                                        -615 B    (-0.4%)     -158 B    (-0.4%)
async-load-signup-steps-clone-jetpack                                      -615 B    (-5.8%)     -170 B    (-5.9%)
async-load-signup-steps-clone-destination                                  -615 B    (-3.0%)     -166 B    (-3.0%)
async-load-signup-steps-clone-credentials                                  -615 B    (-1.0%)     -163 B    (-1.0%)
async-load-signup-steps-clone-cloning                                      -615 B    (-4.5%)     -173 B    (-4.3%)
async-load-docs-selectors                                                  -615 B   (-11.0%)     -172 B    (-9.8%)
async-load-blocks-jitm-templates-sidebar-banner                            -495 B    (-1.8%)     -136 B    (-1.9%)
async-load-blocks-jitm-templates-notice                                    -495 B    (-1.8%)     -131 B    (-1.8%)
async-load-blocks-jitm-templates-default                                   -495 B    (-1.9%)     -133 B    (-1.9%)
async-load-components-sites-popover                                        -373 B    (-0.6%)      -55 B    (-0.3%)
async-load-reader-tag-stream-main                                          -370 B    (-2.4%)     -102 B    (-2.2%)
async-load-reader-sidebar                                                  -370 B    (-0.6%)      -99 B    (-0.6%)
async-load-components-jetpack-sidebar                                      -328 B    (-1.6%)      -88 B    (-1.4%)
async-load-layout-masterbar-drafts-popover                                 -229 B    (-0.7%)      -37 B    (-0.4%)
async-load-blocks-login-two-factor-authentication-two-factor-content       -211 B    (-0.9%)      -68 B    (-0.9%)
async-load-reader-search-stream                                            -147 B    (-0.2%)      -40 B    (-0.2%)
async-load-blocks-support-article-dialog                                    -63 B    (-6.2%)      -10 B    (-2.2%)

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.

@niranjan-uma-shankar niranjan-uma-shankar changed the title Add/email field validation userless checkout Userless checkout: Add email field validation Jul 20, 2020
@niranjan-uma-shankar niranjan-uma-shankar self-assigned this Jul 20, 2020
@niranjan-uma-shankar niranjan-uma-shankar added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] Needs e2e Testing Checklist [Feature] Signup & Account Creation All screens and flows for making a new WordPress.com account. labels Jul 20, 2020
… coming from userless checkout. This is needed to bypass the validation if the user is already logged in, as happens in the case where there's a payment error after account creation
@niranjan-uma-shankar niranjan-uma-shankar marked this pull request as ready for review July 20, 2020 18:02
@niranjan-uma-shankar niranjan-uma-shankar requested review from a team July 20, 2020 19:02
Copy link
Member

@sirbrillig sirbrillig left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good! Just a few small comments.

const isNative = config.isEnabled( 'login/native-login-links' );
const loginUrl = login( { redirectTo, emailAddress, isNative } );
const loginRedirectMessage = translate(
'Choose a different email address. This one is not available. If this is you {{a}}log in now{{/a}}.',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor, but I think the wording of this message could be improved. Maybe, "That email address is already in use. If you have an existing account, {{a}}please log in{{/a}}."

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated copy.

…h block 2. Copy update on the email taken error message 3. Added the signup email validation check in the validateContactDetails block
Copy link
Member

@sirbrillig sirbrillig left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good to me. Just need to test this.

@nbloomf
Copy link
Contributor

nbloomf commented Jul 22, 2020

Here are the results of my testing:

Scenario 1:

  • Using a fresh incognito window, I navigated to calypso.localhost:3000 and manually assigned myself to variantUserless.
  • I navigated to /start, selected a free subdomain and personal plan, and proceeded to checkout.
  • I verified that validation prevented me from proceeding to the next step with the following values for my email address: the empty string, a, 0, @, @., foo@, @example, @example.com, foo@example, foo@example..com, .@example.com, @@example.com, baz@example.com. (trailing period), foo..bar@example.com (consecutive periods). The following addresses do validate (as expected): +@example.com, foo.bar@example.com, foo+bar@example.com.
  • I repeated the above steps with a paid domain and personal plan in the cart.
  • I repeated the above steps with a domain mapping and personal plan in the cart.
  • I repeated the above steps with a domain transfer and personal plan in the cart.

Scenario 2:

  • Using a fresh incognito window, I navigated to calypso.localhost:3000 and manually assigned myself to variantUserless.
  • I navigated to /start, selected a paid domain and personal plan, and proceeded to checkout.
  • In the contact details step of checkout, I tried to validate an email address associated to an existing wpcom account.
    • The contact details did not validate, and the email field shows the error "That email address is already in use. If you have an existing account please log in."
  • I repeated the above steps with a paid domain and personal plan in my cart, with the same results.

One more comment about copy-

Enter a working email address, so you can receive our messages.

Personally, when a website asks for my email address just so it can send me messages, I'm not inclined to cooperate (even in checkouts). I wonder if this could say something a little more compelling like "so we can send you a receipt" or "so you can manage your purchase later"?

@niranjan-uma-shankar
Copy link
Contributor Author

Personally, when a website asks for my email address just so it can send me messages, I'm not inclined to cooperate (even in checkouts). I wonder if this could say something a little more compelling like "so we can send you a receipt" or "so you can manage your purchase later"?

Thanks for suggesting that. Deferring copy related inputs to @victorespigares.

@victorespigares
Copy link
Contributor

Personally, when a website asks for my email address just so it can send me messages, I'm not inclined to cooperate (even in checkouts). I wonder if this could say something a little more compelling like "so we can send you a receipt" or "so you can manage your purchase later"?

Thanks for suggesting that. Deferring copy related inputs to @victorespigares.

Thanks @niranjan-uma-shankar for the extra context and screenshot here!
image

Since this is a validation error message, I agree it could be misleading: they'll be using that email address to access their account, not just to receive messages.

I suggest we change it to:
Use a working email address, so you can access your account.

@niranjan-uma-shankar
Copy link
Contributor Author

Use a working email address, so you can access your account.

I've updated the copy to reflect this. Also, I noticed that if the email field is left empty, then the error message(from the backend) shown is Enter a working email address, so you can access your account.("use" is replaced with "enter"), so I've modified the copy for that too.

@niranjan-uma-shankar niranjan-uma-shankar changed the title Userless checkout: Add email field validation Registrationless checkout: Add email field validation Jul 28, 2020
niranjan-uma-shankar and others added 4 commits July 30, 2020 16:07
… present in the cart (#44229)

* Add a default value for .ca cctld form

* Refactor to use optional chaining

* Registrationless checkout: Initialize Google Recaptcha on the checkout page (#44231)

* Init google recaptch on the logged out checkout page

* Set recaptcha client ID in store

* Move initGoogleRecaptcha to useEffect block

* useEffect to call initGoogleRecaptcha only if cart has updated

* Move the g-recaptcha div that is used to render the Recaptcha sticky logo to its own component. Also, memoize the component since we don't want re-renders of this component

* Registrationless checkout: Create account, new site, and process transaction (#44234)

* Send isLoggedOutCart prop to descendants

* Call create account and site endpoint, and only then process payment for the logged out checkout page

* Create account and site endpoint

* Pass down isLoggedOutCart prop to descendants

* Add reducers for the setSiteSlug state

* siteSlug in the state

* Update siteSlug value, since we would have a new siteSlug after account and site creation endpoint is called by clicking the Pay button

* Define getRecaptchaClientId

* Implemented review comments - removing try/catch, replace lodash get and isEmpty with native methods, and a variable name change

* Disable lint for url import

* Set site slug in the create account callback. This way, if one payment type errors out, then we still have the siteSlug in state when another payment type is tried

* Use siteSlug as cart key if we are in the logged out checkout cart

* Set the blog name as username hint, so that we don't create a random username

* Reverting an auto lint fix

* Remove an extra comma

* Add isLoggedOutCart dependency

* Send should_create_site flag

* Registrationless checkout: Handle removing items from cart (#44236)

* When removing item from cart, also delete from localStorage

* import/export getProductSlug

* Define getProductSlug

* If cart is empty, then redirect to the first signup flow step

* default value should be an empty array

* Remove products from localstorage with the cart response from server

* If cart is emptied, then remove the site params prop saved in localstorage

* Update the error message

* If cart is emptied after site has been created already, then take to /plans page

* Add note about usage of window.location

* Modify the cart remove message for the logged out cart

* Fix merge issues

* Add isLoggedOutCart dependency

* Registrationless checkout: Handle page reload scenarios (#44238)

* 1. If /checkout/no-site is opened while logged in, then replace no-site with the siteSlug if there is only one site, else open site picker

* Don't show sitepicker for the no-site route while logged in, unless there is a no-user query param

* The path when clicking a site from the site selector should also include the query param. We need this when we append ?cart=no-user

* The X button in the masterbar should take to /plans

* Poll from localstorage if query param contains no-user value

* url module import is restricted, but skipping the lint rule for this PR to avoid an unrelated refactor

* Replace let by const

* Add a missing /

* Add trailing slash if missing

* Refactor the / path

* Enable logged out cart payments for saved cards and credits

* Pass isLoggedOutCart prop to saved card processor

* Registrationless checkout: Show Secure Checkout text (#44456)

* Show Secure Checkout text and close button for the logged out checkout page

* If the account and site is created, then take to /plans page

* Refactor - use the sectionName variable instead of fetching the value from object

* Remove the Sign Up and Log In links from the masterbar if on the registrationless checkout page. These links could be a distraction and we allow signup in the checkout form itself

* Registrationless checkout: Transfer cart after log in to account with no site (#44475)

* 1. Don't show site picker if logged in user has no site 2. Define a new flag isNoSiteCart that is used to determine the case where user is on checkout logged in but without a site

* 1. If the user is logged in and without a site, then define the cart key as 'no-user' so that we can create a site for them first 2. Fetch cart from localstorage instead of doing a server get request if the user is logged in and without a site

* Send flag to the create account to determine if a new site should be created

* Send site slug if we're on the checkout page on an account that has no sites yet

* Refactor createUserAndSiteBeforeTransaction to an options object for improved readability

* Fix dependencies list

* Modify the cart remove messaging for the case where we are on checkout in an account with no sites yet

* Pass transactionOptions for saved cards and credits processors

* Registrationless checkout: Show the help icon in the checkout page (#44477)

* Set a position attribute for the recaptcha logo

* Load the inline help icon for the logged out page

* Show inline help only for the logged out checkout page

* Move recaptcha badge to the bottom right, and increase its z-index so that it hides the wpcom floating help icon

* cartKey should be siteSlug if in the logged out cart
@niranjan-uma-shankar niranjan-uma-shankar merged commit f3496bb into add/show-chat-help-logged-out-cart Aug 3, 2020
@niranjan-uma-shankar niranjan-uma-shankar deleted the add/email-field-validation-userless-checkout branch August 3, 2020 13:47
niranjan-uma-shankar added a commit that referenced this pull request Aug 3, 2020
…4211)

* Do not query support history for logged out cart

* Do not query support history for logged out cart

* Send isLoggedOutCart to the contact fields component

* Modify UI of billing info section as per the latest UI screen

* Send isLoggedOutCart prop to the WPCheckout component

* Send isLoggedOutCart prop to the WPContactForm component

* Render email field when there is no domain in cart

* Update email when the value is updated in the form field

* Update email when the value is updated in the form field

* Send isLoggedOutCart flag to descendants

* Fetch locale from cookie for the logged out cart, and pass logged out cart flag as prop to descendants

* Add email field description for the domain contact info section

* Hide explanation if there's an error

* Registrationless checkout: Add email field validation (#44227)

* Add validation for the email field and show error message

* Process error response from endpoint

* Process error response from endpoint

* Define import/export paths

* Send request to validate signup email and validate response

* Change Object to string array type

* Show error message for the email field

* Send flag to the email validation endpoint to identify the request as coming from userless checkout. This is needed to bypass the validation if the user is already logged in, as happens in the case where there's a payment error after account creation

* Remove try catch block

* 1. Refactor wpcomValidateSignupEmailt to remove unnecesssary try catch block 2. Copy update on the email taken error message 3. Added the signup email validation check in the validateContactDetails block

* rename userless to registrationless

* cartKey should be siteSlug if in the logged out cart

* Registrationless checkout: Show checkout page if ccTLD domain item is present in the cart (#44229)

* Add a default value for .ca cctld form

* Refactor to use optional chaining

* Registrationless checkout: Initialize Google Recaptcha on the checkout page (#44231)

* Init google recaptch on the logged out checkout page

* Set recaptcha client ID in store

* Move initGoogleRecaptcha to useEffect block

* useEffect to call initGoogleRecaptcha only if cart has updated

* Move the g-recaptcha div that is used to render the Recaptcha sticky logo to its own component. Also, memoize the component since we don't want re-renders of this component

* Registrationless checkout: Create account, new site, and process transaction (#44234)

* Send isLoggedOutCart prop to descendants

* Call create account and site endpoint, and only then process payment for the logged out checkout page

* Create account and site endpoint

* Pass down isLoggedOutCart prop to descendants

* Add reducers for the setSiteSlug state

* siteSlug in the state

* Update siteSlug value, since we would have a new siteSlug after account and site creation endpoint is called by clicking the Pay button

* Define getRecaptchaClientId

* Implemented review comments - removing try/catch, replace lodash get and isEmpty with native methods, and a variable name change

* Disable lint for url import

* Set site slug in the create account callback. This way, if one payment type errors out, then we still have the siteSlug in state when another payment type is tried

* Use siteSlug as cart key if we are in the logged out checkout cart

* Set the blog name as username hint, so that we don't create a random username

* Reverting an auto lint fix

* Remove an extra comma

* Add isLoggedOutCart dependency

* Send should_create_site flag

* Registrationless checkout: Handle removing items from cart (#44236)

* When removing item from cart, also delete from localStorage

* import/export getProductSlug

* Define getProductSlug

* If cart is empty, then redirect to the first signup flow step

* default value should be an empty array

* Remove products from localstorage with the cart response from server

* If cart is emptied, then remove the site params prop saved in localstorage

* Update the error message

* If cart is emptied after site has been created already, then take to /plans page

* Add note about usage of window.location

* Modify the cart remove message for the logged out cart

* Fix merge issues

* Add isLoggedOutCart dependency

* Registrationless checkout: Handle page reload scenarios (#44238)

* 1. If /checkout/no-site is opened while logged in, then replace no-site with the siteSlug if there is only one site, else open site picker

* Don't show sitepicker for the no-site route while logged in, unless there is a no-user query param

* The path when clicking a site from the site selector should also include the query param. We need this when we append ?cart=no-user

* The X button in the masterbar should take to /plans

* Poll from localstorage if query param contains no-user value

* url module import is restricted, but skipping the lint rule for this PR to avoid an unrelated refactor

* Replace let by const

* Add a missing /

* Add trailing slash if missing

* Refactor the / path

* Enable logged out cart payments for saved cards and credits

* Pass isLoggedOutCart prop to saved card processor

* Registrationless checkout: Show Secure Checkout text (#44456)

* Show Secure Checkout text and close button for the logged out checkout page

* If the account and site is created, then take to /plans page

* Refactor - use the sectionName variable instead of fetching the value from object

* Remove the Sign Up and Log In links from the masterbar if on the registrationless checkout page. These links could be a distraction and we allow signup in the checkout form itself

* Registrationless checkout: Transfer cart after log in to account with no site (#44475)

* 1. Don't show site picker if logged in user has no site 2. Define a new flag isNoSiteCart that is used to determine the case where user is on checkout logged in but without a site

* 1. If the user is logged in and without a site, then define the cart key as 'no-user' so that we can create a site for them first 2. Fetch cart from localstorage instead of doing a server get request if the user is logged in and without a site

* Send flag to the create account to determine if a new site should be created

* Send site slug if we're on the checkout page on an account that has no sites yet

* Refactor createUserAndSiteBeforeTransaction to an options object for improved readability

* Fix dependencies list

* Modify the cart remove messaging for the case where we are on checkout in an account with no sites yet

* Pass transactionOptions for saved cards and credits processors

* Registrationless checkout: Show the help icon in the checkout page (#44477)

* Set a position attribute for the recaptcha logo

* Load the inline help icon for the logged out page

* Show inline help only for the logged out checkout page

* Move recaptcha badge to the bottom right, and increase its z-index so that it hides the wpcom floating help icon

* cartKey should be siteSlug if in the logged out cart
niranjan-uma-shankar added a commit that referenced this pull request Aug 3, 2020
#44209)

* Add route for /checkout/no-site to open for logged out users

* If in the logged out checkout page, then poll cart by building products from localstorage, instead of getting cart from server

* For logged out Calypso pages, set the locale from slug

* Fix route

* If the checkout page is opened logged out, then do not query for stored cards and build shopping cart from localstorage

* If in the logged out checkout page, then poll cart by building products from localstorage, instead of getting cart from server

* Fix support history state

* Do not query the saved cards endpoint when logged out

* Do not query the saved cards endpoint when logged out

* Add conditional check for the tax key, since cart from local store will not have the tax field

* Add conditional check for the tax key, since cart from local store will not have the tax field

* Add conditional check for the tax key for tests to pass

* Update

* Default value should be empty array

* Fix test errors

* Pass down props isLoggedOutCart to descendants

* Convert raw response only if cart items exists

* 1. Fix tests 2. Get location from cookie

* Fix lint errors

* Fix lint error

* Instead of passing the cart from Cartstore to a function, directly resolve the promise. If the Cartstore does not have a cart value, then fetch from server

* Remove prop not used in the function

* Remove <QueryStoredCards /> since useStoredCards performs its own fetch

* Add cartRawResponse as a dependency to useEffect

* Fix dependencies

* Use getCart prop to handle fetching logged-out cart instead

* Remove unnecessary changes to useShoppingCart

These should have no functional benefit and can be done later.

* getCart should return a resolved promise

* url module import is restricted, but skipping the lint rule for this PR to avoid an unrelated refactor

* Do not display Site name in order review summary if no site is created yet

* Merge from add/new-signup-flow-userless-checkout-1

* Registrationless checkout: Add email ID field with the new design (#44211)

* Do not query support history for logged out cart

* Do not query support history for logged out cart

* Send isLoggedOutCart to the contact fields component

* Modify UI of billing info section as per the latest UI screen

* Send isLoggedOutCart prop to the WPCheckout component

* Send isLoggedOutCart prop to the WPContactForm component

* Render email field when there is no domain in cart

* Update email when the value is updated in the form field

* Update email when the value is updated in the form field

* Send isLoggedOutCart flag to descendants

* Fetch locale from cookie for the logged out cart, and pass logged out cart flag as prop to descendants

* Add email field description for the domain contact info section

* Hide explanation if there's an error

* Registrationless checkout: Add email field validation (#44227)

* Add validation for the email field and show error message

* Process error response from endpoint

* Process error response from endpoint

* Define import/export paths

* Send request to validate signup email and validate response

* Change Object to string array type

* Show error message for the email field

* Send flag to the email validation endpoint to identify the request as coming from userless checkout. This is needed to bypass the validation if the user is already logged in, as happens in the case where there's a payment error after account creation

* Remove try catch block

* 1. Refactor wpcomValidateSignupEmailt to remove unnecesssary try catch block 2. Copy update on the email taken error message 3. Added the signup email validation check in the validateContactDetails block

* rename userless to registrationless

* cartKey should be siteSlug if in the logged out cart

* Registrationless checkout: Show checkout page if ccTLD domain item is present in the cart (#44229)

* Add a default value for .ca cctld form

* Refactor to use optional chaining

* Registrationless checkout: Initialize Google Recaptcha on the checkout page (#44231)

* Init google recaptch on the logged out checkout page

* Set recaptcha client ID in store

* Move initGoogleRecaptcha to useEffect block

* useEffect to call initGoogleRecaptcha only if cart has updated

* Move the g-recaptcha div that is used to render the Recaptcha sticky logo to its own component. Also, memoize the component since we don't want re-renders of this component

* Registrationless checkout: Create account, new site, and process transaction (#44234)

* Send isLoggedOutCart prop to descendants

* Call create account and site endpoint, and only then process payment for the logged out checkout page

* Create account and site endpoint

* Pass down isLoggedOutCart prop to descendants

* Add reducers for the setSiteSlug state

* siteSlug in the state

* Update siteSlug value, since we would have a new siteSlug after account and site creation endpoint is called by clicking the Pay button

* Define getRecaptchaClientId

* Implemented review comments - removing try/catch, replace lodash get and isEmpty with native methods, and a variable name change

* Disable lint for url import

* Set site slug in the create account callback. This way, if one payment type errors out, then we still have the siteSlug in state when another payment type is tried

* Use siteSlug as cart key if we are in the logged out checkout cart

* Set the blog name as username hint, so that we don't create a random username

* Reverting an auto lint fix

* Remove an extra comma

* Add isLoggedOutCart dependency

* Send should_create_site flag

* Registrationless checkout: Handle removing items from cart (#44236)

* When removing item from cart, also delete from localStorage

* import/export getProductSlug

* Define getProductSlug

* If cart is empty, then redirect to the first signup flow step

* default value should be an empty array

* Remove products from localstorage with the cart response from server

* If cart is emptied, then remove the site params prop saved in localstorage

* Update the error message

* If cart is emptied after site has been created already, then take to /plans page

* Add note about usage of window.location

* Modify the cart remove message for the logged out cart

* Fix merge issues

* Add isLoggedOutCart dependency

* Registrationless checkout: Handle page reload scenarios (#44238)

* 1. If /checkout/no-site is opened while logged in, then replace no-site with the siteSlug if there is only one site, else open site picker

* Don't show sitepicker for the no-site route while logged in, unless there is a no-user query param

* The path when clicking a site from the site selector should also include the query param. We need this when we append ?cart=no-user

* The X button in the masterbar should take to /plans

* Poll from localstorage if query param contains no-user value

* url module import is restricted, but skipping the lint rule for this PR to avoid an unrelated refactor

* Replace let by const

* Add a missing /

* Add trailing slash if missing

* Refactor the / path

* Enable logged out cart payments for saved cards and credits

* Pass isLoggedOutCart prop to saved card processor

* Registrationless checkout: Show Secure Checkout text (#44456)

* Show Secure Checkout text and close button for the logged out checkout page

* If the account and site is created, then take to /plans page

* Refactor - use the sectionName variable instead of fetching the value from object

* Remove the Sign Up and Log In links from the masterbar if on the registrationless checkout page. These links could be a distraction and we allow signup in the checkout form itself

* Registrationless checkout: Transfer cart after log in to account with no site (#44475)

* 1. Don't show site picker if logged in user has no site 2. Define a new flag isNoSiteCart that is used to determine the case where user is on checkout logged in but without a site

* 1. If the user is logged in and without a site, then define the cart key as 'no-user' so that we can create a site for them first 2. Fetch cart from localstorage instead of doing a server get request if the user is logged in and without a site

* Send flag to the create account to determine if a new site should be created

* Send site slug if we're on the checkout page on an account that has no sites yet

* Refactor createUserAndSiteBeforeTransaction to an options object for improved readability

* Fix dependencies list

* Modify the cart remove messaging for the case where we are on checkout in an account with no sites yet

* Pass transactionOptions for saved cards and credits processors

* Registrationless checkout: Show the help icon in the checkout page (#44477)

* Set a position attribute for the recaptcha logo

* Load the inline help icon for the logged out page

* Show inline help only for the logged out checkout page

* Move recaptcha badge to the bottom right, and increase its z-index so that it hides the wpcom floating help icon

* cartKey should be siteSlug if in the logged out cart

Co-authored-by: Payton Swick <payton@foolord.com>
Copy link
Collaborator

@wp-desktop wp-desktop left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WordPress Desktop CI Failure for job "wp-desktop-source".

@niranjan-uma-shankar please inspect this job's build steps for breaking changes at this link. For temporal failures, you may try to "Rerun Workflow from Failed".

Please also ensure this branch is rebased off latest Calypso.

@matticbot matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 3, 2020
niranjan-uma-shankar added a commit that referenced this pull request Aug 6, 2020
#44209)

* Add route for /checkout/no-site to open for logged out users

* If in the logged out checkout page, then poll cart by building products from localstorage, instead of getting cart from server

* For logged out Calypso pages, set the locale from slug

* Fix route

* If the checkout page is opened logged out, then do not query for stored cards and build shopping cart from localstorage

* If in the logged out checkout page, then poll cart by building products from localstorage, instead of getting cart from server

* Fix support history state

* Do not query the saved cards endpoint when logged out

* Do not query the saved cards endpoint when logged out

* Add conditional check for the tax key, since cart from local store will not have the tax field

* Add conditional check for the tax key, since cart from local store will not have the tax field

* Add conditional check for the tax key for tests to pass

* Update

* Default value should be empty array

* Fix test errors

* Pass down props isLoggedOutCart to descendants

* Convert raw response only if cart items exists

* 1. Fix tests 2. Get location from cookie

* Fix lint errors

* Fix lint error

* Instead of passing the cart from Cartstore to a function, directly resolve the promise. If the Cartstore does not have a cart value, then fetch from server

* Remove prop not used in the function

* Remove <QueryStoredCards /> since useStoredCards performs its own fetch

* Add cartRawResponse as a dependency to useEffect

* Fix dependencies

* Use getCart prop to handle fetching logged-out cart instead

* Remove unnecessary changes to useShoppingCart

These should have no functional benefit and can be done later.

* getCart should return a resolved promise

* url module import is restricted, but skipping the lint rule for this PR to avoid an unrelated refactor

* Do not display Site name in order review summary if no site is created yet

* Merge from add/new-signup-flow-userless-checkout-1

* Registrationless checkout: Add email ID field with the new design (#44211)

* Do not query support history for logged out cart

* Do not query support history for logged out cart

* Send isLoggedOutCart to the contact fields component

* Modify UI of billing info section as per the latest UI screen

* Send isLoggedOutCart prop to the WPCheckout component

* Send isLoggedOutCart prop to the WPContactForm component

* Render email field when there is no domain in cart

* Update email when the value is updated in the form field

* Update email when the value is updated in the form field

* Send isLoggedOutCart flag to descendants

* Fetch locale from cookie for the logged out cart, and pass logged out cart flag as prop to descendants

* Add email field description for the domain contact info section

* Hide explanation if there's an error

* Registrationless checkout: Add email field validation (#44227)

* Add validation for the email field and show error message

* Process error response from endpoint

* Process error response from endpoint

* Define import/export paths

* Send request to validate signup email and validate response

* Change Object to string array type

* Show error message for the email field

* Send flag to the email validation endpoint to identify the request as coming from userless checkout. This is needed to bypass the validation if the user is already logged in, as happens in the case where there's a payment error after account creation

* Remove try catch block

* 1. Refactor wpcomValidateSignupEmailt to remove unnecesssary try catch block 2. Copy update on the email taken error message 3. Added the signup email validation check in the validateContactDetails block

* rename userless to registrationless

* cartKey should be siteSlug if in the logged out cart

* Registrationless checkout: Show checkout page if ccTLD domain item is present in the cart (#44229)

* Add a default value for .ca cctld form

* Refactor to use optional chaining

* Registrationless checkout: Initialize Google Recaptcha on the checkout page (#44231)

* Init google recaptch on the logged out checkout page

* Set recaptcha client ID in store

* Move initGoogleRecaptcha to useEffect block

* useEffect to call initGoogleRecaptcha only if cart has updated

* Move the g-recaptcha div that is used to render the Recaptcha sticky logo to its own component. Also, memoize the component since we don't want re-renders of this component

* Registrationless checkout: Create account, new site, and process transaction (#44234)

* Send isLoggedOutCart prop to descendants

* Call create account and site endpoint, and only then process payment for the logged out checkout page

* Create account and site endpoint

* Pass down isLoggedOutCart prop to descendants

* Add reducers for the setSiteSlug state

* siteSlug in the state

* Update siteSlug value, since we would have a new siteSlug after account and site creation endpoint is called by clicking the Pay button

* Define getRecaptchaClientId

* Implemented review comments - removing try/catch, replace lodash get and isEmpty with native methods, and a variable name change

* Disable lint for url import

* Set site slug in the create account callback. This way, if one payment type errors out, then we still have the siteSlug in state when another payment type is tried

* Use siteSlug as cart key if we are in the logged out checkout cart

* Set the blog name as username hint, so that we don't create a random username

* Reverting an auto lint fix

* Remove an extra comma

* Add isLoggedOutCart dependency

* Send should_create_site flag

* Registrationless checkout: Handle removing items from cart (#44236)

* When removing item from cart, also delete from localStorage

* import/export getProductSlug

* Define getProductSlug

* If cart is empty, then redirect to the first signup flow step

* default value should be an empty array

* Remove products from localstorage with the cart response from server

* If cart is emptied, then remove the site params prop saved in localstorage

* Update the error message

* If cart is emptied after site has been created already, then take to /plans page

* Add note about usage of window.location

* Modify the cart remove message for the logged out cart

* Fix merge issues

* Add isLoggedOutCart dependency

* Registrationless checkout: Handle page reload scenarios (#44238)

* 1. If /checkout/no-site is opened while logged in, then replace no-site with the siteSlug if there is only one site, else open site picker

* Don't show sitepicker for the no-site route while logged in, unless there is a no-user query param

* The path when clicking a site from the site selector should also include the query param. We need this when we append ?cart=no-user

* The X button in the masterbar should take to /plans

* Poll from localstorage if query param contains no-user value

* url module import is restricted, but skipping the lint rule for this PR to avoid an unrelated refactor

* Replace let by const

* Add a missing /

* Add trailing slash if missing

* Refactor the / path

* Enable logged out cart payments for saved cards and credits

* Pass isLoggedOutCart prop to saved card processor

* Registrationless checkout: Show Secure Checkout text (#44456)

* Show Secure Checkout text and close button for the logged out checkout page

* If the account and site is created, then take to /plans page

* Refactor - use the sectionName variable instead of fetching the value from object

* Remove the Sign Up and Log In links from the masterbar if on the registrationless checkout page. These links could be a distraction and we allow signup in the checkout form itself

* Registrationless checkout: Transfer cart after log in to account with no site (#44475)

* 1. Don't show site picker if logged in user has no site 2. Define a new flag isNoSiteCart that is used to determine the case where user is on checkout logged in but without a site

* 1. If the user is logged in and without a site, then define the cart key as 'no-user' so that we can create a site for them first 2. Fetch cart from localstorage instead of doing a server get request if the user is logged in and without a site

* Send flag to the create account to determine if a new site should be created

* Send site slug if we're on the checkout page on an account that has no sites yet

* Refactor createUserAndSiteBeforeTransaction to an options object for improved readability

* Fix dependencies list

* Modify the cart remove messaging for the case where we are on checkout in an account with no sites yet

* Pass transactionOptions for saved cards and credits processors

* Registrationless checkout: Show the help icon in the checkout page (#44477)

* Set a position attribute for the recaptcha logo

* Load the inline help icon for the logged out page

* Show inline help only for the logged out checkout page

* Move recaptcha badge to the bottom right, and increase its z-index so that it hides the wpcom floating help icon

* cartKey should be siteSlug if in the logged out cart

Co-authored-by: Payton Swick <payton@foolord.com>
niranjan-uma-shankar added a commit that referenced this pull request Aug 6, 2020
* Create A/B test for showing the userless checkout flow

* Create new signup flow called onboarding-new for the userless checkout

* Registrationless checkout: Show the checkout page for logged out users  (#44209)

* Registrationless checkout: Add email ID field with the new design (#44211)

* Registrationless checkout: Add email field validation (#44227)

* Registrationless checkout: Show checkout page if ccTLD domain item is present in the cart (#44229)

* Registrationless checkout: Initialize Google Recaptcha on the checkout page (#44231)

* Registrationless checkout: Create account, new site, and process transaction (#44234)

* Registrationless checkout: Handle removing items from cart (#44236)

* Registrationless checkout: Handle page reload scenarios (#44238)

* Registrationless checkout: Show Secure Checkout text (#44456)

* Registrationless checkout: Transfer cart after log in to account with no site (#44475)

* Registrationless checkout: Show the help icon in the checkout page (#44477)

* Create A/B test for showing the userless checkout flow

* Don't assign to the composite checkout i18n test when in registrationless context

* Update datestamp for the abtest

Co-authored-by: Payton Swick <payton@foolord.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Checklist [Feature] Signup & Account Creation All screens and flows for making a new WordPress.com account.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants