Registrationless checkout: Handle removing items from cart #44236
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: Webpack Runtime (~3971 bytes removed 📉 [gzipped]) 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]) 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]) 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]) 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. Generated by performance advisor bot at iscalypsofastyet.com. |
… add/remove-items-from-cart-userless-checkout
… add/remove-items-from-cart-userless-checkout
… add/remove-items-from-cart-userless-checkout
niranjan-uma-shankar
changed the title
niranjan-uma-shankar
added
[Status] Needs Review
sirbrillig
reviewed
Jul 21, 2020
client/my-sites/checkout/composite-checkout/wpcom/hooks/use-shopping-cart.ts
Outdated
Show resolved
Hide resolved
| try { | ||
| window.localStorage.setItem( 'shoppingCart', JSON.stringify( newCart ) ); | ||
| } catch ( e ) { | ||
| throw new Error( 'An unexpected error occured while saving your cart: ' + e ); |
There was a problem hiding this comment.
We should probably translate this error message if there's any chance it might be displayed to the user. If it is not displayed, we might want to do something to make sure it does get displayed because if this save fails then I suspect the user is going to have problems going forward.
client/my-sites/checkout/composite-checkout/wpcom/types/backend/shopping-cart-endpoint.ts
Outdated
Show resolved
Hide resolved
client/my-sites/checkout/composite-checkout/wpcom/hooks/use-shopping-cart.ts
Outdated
Show resolved
Hide resolved
client/my-sites/checkout/composite-checkout/wpcom/hooks/use-shopping-cart.ts
Outdated
Show resolved
Hide resolved
… add/remove-items-from-cart-userless-checkout
sirbrillig
approved these changes
Jul 22, 2020
There was a problem hiding this comment.
This looks good to me! Thanks for the careful consideration!
I'm approving this, but one thing I thought might be worth asking: if localStorage is not available for some reason (eg: if the user is using Safari in private mode or if the local quota has been reached), what will the experience be for the user? Does localStorage.removeItem() throw an error like setItem does (maybe it doesn't; I don't know)?
wp-desktop
previously requested changes
Jul 22, 2020
There was a problem hiding this comment.
WordPress Desktop CI Failure for job "wp-desktop-mac".
@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.
sirbrillig
reviewed
Jul 27, 2020
client/my-sites/checkout/composite-checkout/composite-checkout.js
Outdated
Show resolved
Hide resolved
niranjan-uma-shankar
changed the title
|
I've pushed in a change that modifies the modal message shown when an item is removed from cart. Maybe the wordings could be improved, so if you feel it could be better, do let me know! Plan is removed when cart has plan + domain
Plan is removed when cart has only a plan
Domain is removed from cart
|
… add/remove-items-from-cart-userless-checkout
… add/remove-items-from-cart-userless-checkout
… add/remove-items-from-cart-userless-checkout
… add/remove-items-from-cart-userless-checkout
… add/remove-items-from-cart-userless-checkout
* 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
merged commit f250bcb
into
add/create-account-site-and-pay-userless-checkout
niranjan-uma-shankar
deleted the
add/remove-items-from-cart-userless-checkout
branch
wp-desktop
requested changes
Aug 3, 2020
There was a problem hiding this comment.
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
removed
the
[Status] Needs Review
niranjan-uma-shankar
added a commit
that referenced
this pull request
Aug 3, 2020
…saction (#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
…t 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
… 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
* 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
…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>
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>
5 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
Testing instructions
NOTE: Depends on D45659-code, so please apply this first.
Scenario 1 - Delete item from cart should work
userlessCheckouttest.Scenario 2 - Empty cart should redirect to /start
Scenario 3 - Empty cart should take to /plans if site is already created
/start/onboarding-new, add a plan to cart and proceed to checkout.