Skip to content

Conversation

@ddc22
Copy link
Contributor

@ddc22 ddc22 commented Apr 20, 2021

Changes proposed in this Pull Request

  • Implement domain step for the yoast purchase flow

domainsstep2

Testing instructions

Related to #

@matticbot
Copy link
Contributor

@matticbot
Copy link
Contributor

matticbot commented Apr 20, 2021

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

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

Details
name                   parsed_size           gzip_size
entry-gutenboarding        +3454 B  (+0.2%)    +1509 B  (+0.3%)
entry-main                 -1915 B  (-0.1%)      -58 B  (-0.0%)
entry-login                  +47 B  (+0.0%)       -6 B  (-0.0%)
entry-domains-landing        +47 B  (+0.0%)       -6 B  (-0.0%)

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

Sections (~16335 bytes added 📈 [gzipped])

Details
name                      parsed_size           gzip_size
checkout                      +1513 B  (+0.1%)     +302 B  (+0.1%)
signup                        +1430 B  (+0.7%)      +35 B  (+0.1%)
plugins                       +1191 B  (+0.2%)     +762 B  (+0.5%)
site-purchases                 -480 B  (-0.0%)    -1739 B  (-0.6%)
email                          +435 B  (+0.1%)    +1163 B  (+0.9%)
plans                          +413 B  (+0.1%)    +1379 B  (+0.7%)
purchases                      -377 B  (-0.0%)    -1721 B  (-0.5%)
settings-writing               +346 B  (+0.1%)      -59 B  (-0.0%)
settings-security              +323 B  (+0.1%)     +964 B  (+1.0%)
settings-discussion            +323 B  (+0.1%)     +773 B  (+1.0%)
customize                      +323 B  (+0.2%)     +570 B  (+1.2%)
themes                         +299 B  (+0.1%)     +806 B  (+0.7%)
gutenberg-editor               +285 B  (+0.1%)      +94 B  (+0.1%)
people                         +283 B  (+0.1%)     +788 B  (+0.8%)
domains                        +275 B  (+0.0%)     +207 B  (+0.1%)
stats                          +214 B  (+0.0%)     +365 B  (+0.2%)
purchase-product               -183 B  (-0.1%)     -686 B  (-1.7%)
activity                       +178 B  (+0.0%)    +1147 B  (+0.8%)
comments                       -169 B  (-0.0%)      -32 B  (-0.0%)
scan                           -146 B  (-0.0%)     -581 B  (-0.6%)
earn                           -146 B  (-0.0%)    -1090 B  (-1.0%)
zoninator                      +140 B  (+0.1%)      +52 B  (+0.1%)
wp-super-cache                 +140 B  (+0.0%)      +52 B  (+0.1%)
woocommerce-installation       +140 B  (+0.1%)     +155 B  (+0.3%)
theme                          +140 B  (+0.0%)     -434 B  (-0.5%)
sites                          +140 B  (+0.1%)      +52 B  (+0.2%)
settings-jetpack               +140 B  (+0.1%)      +52 B  (+0.1%)
sensei                         +140 B  (+0.1%)      +52 B  (+0.1%)
preview                        +140 B  (+0.1%)      +52 B  (+0.1%)
posts-custom                   +140 B  (+0.0%)      +38 B  (+0.0%)
posts                          +140 B  (+0.0%)      +38 B  (+0.0%)
jetpack-cloud                  +140 B  (+0.1%)      +52 B  (+0.1%)
import                         +140 B  (+0.1%)      +52 B  (+0.1%)
hello-dolly                    +140 B  (+0.1%)      +52 B  (+0.1%)
google-my-business             +140 B  (+0.0%)     +128 B  (+0.1%)
concierge                      +140 B  (+0.0%)      +52 B  (+0.1%)
devdocs                        -108 B  (-0.1%)      -23 B  (-0.0%)
backup                         -108 B  (-0.0%)     -492 B  (-0.4%)
settings-performance           +107 B  (+0.0%)     +224 B  (+0.2%)
pages                           -88 B  (-0.0%)     +568 B  (+0.6%)
jetpack-connect                 +69 B  (+0.0%)     +147 B  (+0.1%)
jetpack-cloud-pricing           +69 B  (+0.0%)     +231 B  (+0.2%)
settings                        -43 B  (-0.0%)    -1086 B  (-0.6%)
marketing                       -43 B  (-0.0%)    -1256 B  (-0.8%)
accept-invite                   -40 B  (-0.0%)      -67 B  (-0.2%)
migrate                         +37 B  (+0.0%)      +14 B  (+0.0%)
media                           +37 B  (+0.0%)      +14 B  (+0.0%)
jetpack-search                  +37 B  (+0.0%)      +14 B  (+0.0%)
jetpack-cloud-settings          +37 B  (+0.0%)      +10 B  (+0.0%)
export                          +37 B  (+0.0%)      +38 B  (+0.1%)
woocommerce                     -36 B  (-0.0%)      +16 B  (+0.0%)
home                            +31 B  (+0.0%)     -419 B  (-0.4%)

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

Details
name                                                                       parsed_size           gzip_size
async-load-calypso-my-sites-plugins-marketplace-marketplace-domain-upsell    +318209 B    (new)   +86032 B    (new)
async-load-calypso-blocks-editor-checkout-modal                                +1716 B  (+0.2%)    +2092 B  (+0.8%)
async-load-signup-steps-clone-point                                             +223 B  (+0.1%)    +1148 B  (+3.2%)
async-load-signup-steps-plans-atomic-store                                      -183 B  (-0.1%)     -110 B  (-0.3%)
async-load-signup-steps-domains                                                 +183 B  (+0.0%)     +434 B  (+0.4%)
async-load-calypso-reader-sidebar                                               +140 B  (+0.2%)      +64 B  (+0.3%)
async-load-design                                                               +135 B  (+0.0%)      +44 B  (+0.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice                +112 B  (+0.6%)     +301 B  (+7.1%)
async-load-calypso-extensions-woocommerce-app-store-stats-referrers             -109 B  (-0.1%)     -507 B  (-2.2%)
async-load-calypso-extensions-woocommerce-app-store-stats                       -109 B  (-0.1%)     -507 B  (-1.1%)
async-load-design-playground                                                    +103 B  (+0.0%)      +27 B  (+0.0%)
async-load-calypso-my-sites-sidebar-unified                                      +52 B  (+0.1%)      +12 B  (+0.0%)
async-load-calypso-my-sites-sidebar                                              +52 B  (+0.0%)      +12 B  (+0.0%)
async-load-calypso-components-jetpack-sidebar                                    +52 B  (+0.1%)      +12 B  (+0.1%)
async-load-design-blocks                                                         -48 B  (-0.0%)     -774 B  (-0.1%)
async-load-signup-steps-rewind-migrate                                           +38 B  (+0.2%)      +99 B  (+1.4%)
async-load-signup-steps-clone-ready                                              +38 B  (+0.1%)      +89 B  (+1.1%)

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.

@ddc22 ddc22 force-pushed the add/yoast-domain-addition-step branch from 990136a to 0e1fcef Compare April 20, 2021 17:48
@ddc22 ddc22 self-assigned this Apr 21, 2021
@ddc22 ddc22 requested a review from JanaMW27 April 21, 2021 11:49
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 21, 2021
@ddc22 ddc22 force-pushed the add/yoast-domain-addition-step branch from 12475ea to 158efe6 Compare April 22, 2021 13:22
@ddc22 ddc22 marked this pull request as ready for review April 22, 2021 14:59
@ddc22 ddc22 force-pushed the add/yoast-domain-addition-step branch from 7da0838 to eaecc4d Compare April 23, 2021 11:31
@griffbrad griffbrad requested a review from a team April 23, 2021 20:20
stroke="#1D2327"
strokeWidth="1.5"
/>
</svg>
Copy link
Member

Choose a reason for hiding this comment

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

Let's use the standardized arrow-left gridicon here instead of drawing your own arrow.

Copy link
Member

Choose a reason for hiding this comment

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

We could also try using Gutenberg's dashicons - last time I checked there were 3 possible arrow variations we could use here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by 0aa0786 I used @wordpress/icons

...selectedDomain,
};
addProductsToCart( [ domainProduct ] );
window.location.href = window.location.origin + '/checkout/' + selectedSite.slug;
Copy link
Member

Choose a reason for hiding this comment

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

A full page reload should not be needed here. And that's what window.location does. Let's do a normal SPA navigation with page() here.

Also, other places that addProductsToCart wait until the adding is done before redirecting:

addProductsToCart( [ domainProduct ] ).then( () => {
  page( '/checkout/' + selectedSite.slug );
} );

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by 0aa0786

<div className="marketplace-domain-upsell__header domains__header">
<h1 className="marketplace-domain-upsell__header marketplace-title">Choose a domain</h1>
<h2 className="marketplace-domain-upsell__header marketplace-subtitle">
Yoast SEO requires a top level domain to index your site and help you rank higher.
Copy link
Member

Choose a reason for hiding this comment

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

The copy should say "custom domain" instead of "top level domain". The term "top level domain" refers to actual TLDs like .com or .blog.

Choose a reason for hiding this comment

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

Is then wpataging.com a custom domain?

Copy link
Member

Choose a reason for hiding this comment

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

*.wpcomstaging.com or *.wordpress.com are not considered custom domains -- only actual unique registered domains are. I don't know what exactly the technical requirements of Yoast SEO are, but "top level domain" is almost certainly technically incorrect here.

}
}
.marketplace-title {
font-family: var( --p2-font-inter );
Copy link
Member

Choose a reason for hiding this comment

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

Why does the page use this custom font? Is there a reason why to not use Calypso defaults?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by 0aa0786

font-family: var( --p2-font-inter );
font-style: normal;
letter-spacing: 0.4px;
color: #1d2327;
Copy link
Member

Choose a reason for hiding this comment

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

Using hardcoded custom colors is suspicious: let's use appropriate predefined colors (with CSS variables) that can be modified by a custom Calypso theme.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by 0aa0786

@JanaMW27
Copy link

JanaMW27 commented Apr 26, 2021

My notes:

  • Can the search in the first step be already pre-populated with the site name?
  • The page background is not white.
  • I think it makes more sense to have the "free the first year" sentence first and then the price, so all the prices line up on the right side.
  • Let's replace the "First year included on annual plans" for "One year free" so we have more space and we don't end up with double lines so quickly
  • Can we have the free option at the bottom?
  • The .blog option should say: Free with Yoast SEO
  • The .blog option should be the first one and it should be selected by default on landing
  • I have designed the mobile version see here: https://www.figma.com/file/vhlZnPqg5e5bDNcQgJ6WaN/WP.com-and-YOAST-Premium?node-id=4927%3A1570
  • We are missing the path for someone who already ones a domain and wants to transfer it.
  • The checkout CTA should be Pink since we are in calypso.
    Thank you!

@ddc22 ddc22 changed the title Implement yoast domain addition step Implement yoast domain addition step behind feature flag Apr 27, 2021
@ddc22 ddc22 force-pushed the add/yoast-domain-addition-step branch from c1aac3e to 52901e2 Compare April 27, 2021 05:22
}

export function renderDomainsPage( context, next ) {
context.primary = <MarketplaceDomainUpsell />;
Copy link
Member

Choose a reason for hiding this comment

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

Seems like this is inflating the plugins section by a huge percent (38.3% gzipped according to ICFY). Is this something we can try to AsyncLoad? Or maybe we can AsyncLoad pieces in it that are responsible for the inflation, like the domain picker for example?

/**
* Internal dependencies
*/
import DomainPicker from '@automattic/domain-picker';
Copy link
Member

Choose a reason for hiding this comment

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

Nit: Can we move all those @automattic/ to the External dependencies section above? While they're internal for the repo, they're actually external for the package we're using them in (client/package.json AKA calypso).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by 0aa0786

import { getSelectedSite } from 'calypso/state/ui/selectors';

import './styles.scss';
import { getProductsList, isProductsListFetching } from 'calypso/state/products-list/selectors';
Copy link
Member

Choose a reason for hiding this comment

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

Nit: This seems to belong above, with the rest of the internal imports.

Also: I've seen styles being imported with this doc block above them, in case this is something you'd like to use:

/**
 * Style dependencies
 */

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by 0aa0786

import { Button } from '@wordpress/components';
import { getSelectedSite } from 'calypso/state/ui/selectors';

import './styles.scss';
Copy link
Member

Choose a reason for hiding this comment

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

Nit: it's much more common to name this style.scss instead of styles.scss. Although both can be found throughout the codebase. Would be nice if we had just 1 way to do those things 😉

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by 0aa0786

</div>
<hr />
<h1 className="marketplace-domain-upsell__shopping-cart total">
<div> Total </div>
Copy link
Member

Choose a reason for hiding this comment

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

<div />s inside <h1 />s?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by 0aa0786

);
} ) }
</div>
<hr />
Copy link
Member

Choose a reason for hiding this comment

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

Could we achieve this by using styles or dedicated components?

Copy link
Contributor Author

@ddc22 ddc22 Apr 28, 2021

Choose a reason for hiding this comment

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

Can you elaborate on this @tyxla, do we have any dedicated customizable components for <hr /> ?
Also do you mean to add a new styled component here for hr? Is there any additional advantage to add a styled component here? Really liked to know. Are we switching to a convention of using styled components across calypso?

Copy link
Member

Choose a reason for hiding this comment

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

I think we're talking about different things here.

What I meant was that we could use a different component instead of a raw <hr /> here. For example, we could put the contents into two <CompactCard /> components and that will help split the contents semantically, too - see the last example here.

Or maybe <HrWithText />, <ListEnd />, or even HorizontalRule from Gutenberg.

Essentially, the idea is to reuse as much as possible from the existing components, rather than introducing our own versions. Using the same design language is essential in the long run, and is very valuable when we update that design language and we want the updates to propagate to the entire app.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for the feedback, I have tried to rely as much as possible on existing components, however I did resize and play around to make it more suited to this page.

stroke="#1D2327"
strokeWidth="1.5"
/>
</svg>
Copy link
Member

Choose a reason for hiding this comment

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

We could also try using Gutenberg's dashicons - last time I checked there were 3 possible arrow variations we could use here.

@@ -0,0 +1,104 @@
//@import '~@automattic/marketplace/styles/mixins';
Copy link
Member

Choose a reason for hiding this comment

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

Seems like we could remove this one.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed by 0aa0786

.marketplace-title {
font-family: var( --p2-font-inter );
letter-spacing: 0.4px;
line-height: 28px;
Copy link
Member

Choose a reason for hiding this comment

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

Do we really need to overwrite all those variables? Would be great if we can inherit them and use what's already declared. I think that overlaps a bit with what Jarda mentioned a couple of lines above.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I was trying to make the design pixel perfect. However I will try to adopt a more inherit based flow 👍

Copy link
Member

Choose a reason for hiding this comment

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

I'd love to discuss this with the design team that worked on it, but my general recommendation would be to use the common interface, components and elements as much as possible, and avoid introducing specific UIs built from scratch, because they end up being hard to maintain in the long run. I've also talked about this in #52081 (comment)

Copy link
Member

Choose a reason for hiding this comment

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

I was trying to make the design pixel perfect.

It shouldn't be the implementation goal to make things pixel perfect. Calypso has a pre-existing design language (actually, several of them 🙃) with conventions for colors, fonts, spacings... often encoded in existing components. New UIs should reuse that as much as possible.

On this page, the domain picker is from Gutenboarding, and the "Your Cart" component is very similar to what we have in Checkout:

Screenshot 2021-04-28 at 12 54 16

What flow is the Yoast page part of? Creating a new site? Or is it an upsell for an existing site? Let's make the page fit in into its surrounding environment.

I think that overlaps a bit with what Jarda mentioned a couple of lines above.

When first seeing the styles, my intuition was: "there's too much CSS here, the UI shouldn't have so many styles". But I didn't know how to express it as something actionable at the time.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hey @jsnajdr thanks for this feedback, after looking at http://calypso.localhost:3000/devdocs/design I understand what you and @tyxla mean. I will see how I can reuse more existing components to implement this page 😄
This is is the design discussion if you are interested! p9Jlb4-2vT-p2
CC - @olaolusoga @JanaMW27

Copy link
Member

Choose a reason for hiding this comment

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

This is is the design discussion if you are interested!

Thank you for sharing the context! The discussion seems to all about designing the interactions and navigating the labyrinth of Simple vs Atomic vs different plans combinations and very little about specific icon shapes or colors. That makes me think you have a lot of freedom when implementing these details.

@ddc22 ddc22 removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 28, 2021
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 28, 2021
@ddc22 ddc22 force-pushed the add/yoast-domain-addition-step branch from e956244 to c316f01 Compare April 29, 2021 07:54
@ddc22 ddc22 requested a review from a team as a code owner April 29, 2021 07:54
};
};

const theme: MarketplaceThemeType = {
Copy link
Member

Choose a reason for hiding this comment

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

Little surprised to see a new theme declaration here — don't we have one that just works across Calypso?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sadly no but I am using css variables wherever possible. Our theme information is mostly embedded in css variables AFAIK.

<></>
) : (
<>
<MarketplaceTitle>Your cart</MarketplaceTitle>
Copy link
Member

Choose a reason for hiding this comment

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

Note missing __() here and in few other lines in this file.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks this should be fixed now 👍

@ddc22 ddc22 force-pushed the add/yoast-domain-addition-step branch 2 times, most recently from d1b626c to 2a355b3 Compare May 2, 2021 11:42
@ddc22
Copy link
Contributor Author

ddc22 commented May 3, 2021

Hi @JanaMW27 @jsnajdr @tyxla most of the feedback you have raised have been addressed.
Please do have a look again at this PR :)

Jana: FYI the free .blog is not yet implemented, it will be implemented as part of the next iteration.
If there is anything else in code that has to be fixed do let me know.

Feature vise If it is not an obvious bug the plan is to iterate on other missing parts here on future PRs. Seeing as this PR has grown quite a lot I feel it's best to close the current state of the PR with fixes to code hygiene only.

@ddc22 ddc22 force-pushed the add/yoast-domain-addition-step branch from 78082e7 to 44ad236 Compare May 6, 2021 12:36
@ddc22 ddc22 requested a review from southp May 7, 2021 03:13
Copy link
Contributor

@southp southp left a comment

Choose a reason for hiding this comment

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

I don't see any further major flaws and all the reported cases have been resolved, so let's ship it 🚢
@jsnajdr @tyxla Thanks for your comprehensive review that's informational and educational. If there is any further feedback, please still feel free to let us know and we will be happy to address them as follow-ups :)

Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

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

Thanks for all the hard work here!

Just a heads up that IMHO this looks great from a code perspective 👍

Co-authored-by: Marin Atanasov <[email protected]>
@ddc22 ddc22 merged commit 2503bb9 into trunk May 10, 2021
@ddc22 ddc22 deleted the add/yoast-domain-addition-step branch May 10, 2021 11:13
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 10, 2021
@a8ci18n
Copy link

a8ci18n commented May 10, 2021

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/5889647

Thank you @jdc91 for including a screenshot in the description! This is really helpful for our translators.

@ddc22
Copy link
Contributor Author

ddc22 commented May 12, 2021

ddc22 referenced this pull request May 12, 2021
…pso (#47141)

* - Update use-domain-search hook to get title from useTitle hook.
- Use React context to provide siteId and update hook to get the correct value always from context.

* Update Step by step Launch to use LaunchContext provider.
- Remove @wordpress/core-data dependency from editing-toolkit plugin.

* Move useOnLaunch hook inside FocusedLaunch.

* remove props from Summary component

* Domain picker should update domainSearch state using initialDomainSearch prop when showSearchField prop is true.

* Fix invalid SVG property

* Revert hardcoded value for hasPaidDomain

Co-authored-by: Marco Ciampini <[email protected]>
@ddc22
Copy link
Contributor Author

ddc22 commented May 13, 2021

@a8ci18n
Copy link

a8ci18n commented May 21, 2021

Translation for this Pull Request has now been finished.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

10 participants