Woo landing page design iterations #60697

lsl · 2022-02-01T04:57:04Z

Changes proposed in this Pull Request

Misc changes to move towards design specified in Improve the WooCommerce in-app landing page #59190 / r6eTqDpL2GGk96hcPLhsBb-fi-877%3A2069
There was a few divergences from the figma (discussed wtih @SaxonF)
- Using EmptyComponent button ordering. Fix in EmptyComponent if we want this changed or do via css for woop only.
- Opted for no play icon in the secondary cta for now.
- Using https://wordpress.com/support/introduction-to-woocommerce/ as secondary cta link
- Used existing WooCommerceColophon couldn't find any logo badge like seen in figma.

Testing instructions

Visit http://calypso.localhost:3000/woocommerce-installation/site-id

Before

After

Related to #59190

github-actions · 2022-02-01T04:57:20Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-26321

Jetpack Cloud live (direct link)

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

matticbot · 2022-02-01T05:07:08Z

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

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

name         parsed_size           gzip_size
entry-main         +60 B  (+0.0%)      +16 B  (+0.0%)
entry-login        +60 B  (+0.0%)      +16 B  (+0.0%)

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

Sections (~1877 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
woocommerce-installation      +3609 B  (+1.2%)    +1877 B  (+2.0%)

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

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.

lsl · 2022-02-01T06:55:48Z

Tofix (blocking merge):

Add disabled button support to EmptyContent component, disable the cta when transferring is blocked. Existing code did this, new code in 60697 does not.
Hide the extra CTA (again)
Some css lints need fixing (--no-verified it as it was copy pasted from styled divs in CtaSection)

Todo:

Replace illustration with new one (The shopping bags one is fine for now)
Spacing / whitespace / margins need fixing up
Delete removed images (I don't think anything else uses them)
Update colophon link to plugins/woocommerce/

lsl · 2022-02-01T07:00:07Z

client/my-sites/woocommerce/woop/style.scss

+
+.woocommerce_landing-page {
+	.empty-content__title {
+		font-family: Recoleta;


This feels like something that should be done in the EmptyContent component directly but would widen testing considerably. (see "Inbox" page at the moment for why I think it might be worth doing)

It looks like it's used pretty widely. 😬 I think we're okay keeping it here for now, but I see what you mean about the Inbox page, where it's missing that font.

I am with @allilevine in this one this will widen testing a lot, I also feel we can totally add some focused personalization tho the base component through css per page like we are doing right now

allilevine · 2022-02-01T20:20:04Z

client/my-sites/woocommerce/woop/landing-page.tsx

-			</CtaSection>
+			{ renderWarningNotice() }
+			<EmptyContent
+				title={ __( 'Set up a store and start selling online' ) }


I changed this to "Set up" rather than "Setup" because we say "Set up a new store..." in the subheader. And setup is a noun. 🙂

obenland

This is close for a first pass, I just had a couple of questions.

obenland · 2022-02-01T21:40:53Z

client/my-sites/woocommerce/woop/landing-page.tsx

-import Image01 from 'calypso/assets/images/woocommerce/woop-cta-image01.jpeg';
-import Image02 from 'calypso/assets/images/woocommerce/woop-cta-image02.jpeg';
-import Image03 from 'calypso/assets/images/woocommerce/woop-cta-image03.jpeg';
-import Image04 from 'calypso/assets/images/woocommerce/woop-cta-image04.jpeg';


Should we delete those images since they're not being used anymore?

That's on the list as a non-blocking change I believe: #60697 (comment) Do you think it's a blocker?

Ah, gotcha! In that case, no :)

obenland · 2022-02-01T21:41:13Z

client/components/empty-content/README.md

-| `actionHoverCallback`\* | `bool`          | `0`                                      | Indicates activity while a background action is being performed.                                                                              |
+| `actionHoverCallback`\* | `bool`          | `0`                                      | Indicates activity while a background action is being performed.                                                                             |
+| `actionDisabled`        | `bool`          | `null`                                   | Disables the button.                                                                                                     |
+| `actionRef`             | `function`      | `null`                                   | Adds a ref to the button.                 |


It looks like the linter picked up some whitespace issues in this file?

Thanks, I missed that!

Rolilink

There are some minor design changes like:

Making tittle and subtitle container smaller to match design
Switch buttons positions

But this seems launchable!

matticbot · 2022-02-02T00:46:22Z

This PR modifies the release build for happychat

To test your changes on WordPress.com, run install-plugin.sh happychat update/woop-landing on your sandbox.

To deploy your changes after merging, see the documentation: TODO

a8ci18n · 2022-02-02T23:29:02Z

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

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

a8ci18n · 2022-02-11T10:28:52Z

Translation for this Pull Request has now been finished.

lsl requested a review from a team February 1, 2022 04:57

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Feb 1, 2022

lsl mentioned this pull request Feb 1, 2022

Improve the WooCommerce in-app landing page #59190

Closed

lsl commented Feb 1, 2022

View reviewed changes

lsl self-assigned this Feb 1, 2022

allilevine reviewed Feb 1, 2022

View reviewed changes

allilevine requested a review from a team February 1, 2022 20:24

obenland reviewed Feb 1, 2022

View reviewed changes

Rolilink force-pushed the update/woop-landing branch from 9dc811e to cc8898b Compare February 1, 2022 22:15

Rolilink approved these changes Feb 1, 2022

View reviewed changes

obenland approved these changes Feb 1, 2022

View reviewed changes

obenland added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Feb 1, 2022

lsl force-pushed the update/woop-landing branch from b515cb1 to 08f5ec6 Compare February 1, 2022 23:56

lsl mentioned this pull request Feb 2, 2022

WooCommerce Install Landing Page Cleanup - Remove unused images #60742

Merged

lsl and others added 12 commits February 2, 2022 11:42

Replace masonry wave with WooCommerceColophon

89b1cbd

Update copy

03724ea

Move CTASection cta buttons to child elements

cf051ed

unconfuse title/header

0216b69

CTA passing + byline addition

7c5250b

Found EmptyContent component

704f542

Revert cta-section

ce263c3

Add notices back

fc3ac51

Add back ref and disabled to CTA

98a1516

Fix font, title grammar, spacing, font sizes

c174b44

Fix table fence spacing

91f0815

Width should be a number

a2345c6

lsl added 2 commits February 2, 2022 11:42

Ref typing

effb869

Ref types lets try that again

7deec36

lsl force-pushed the update/woop-landing branch from 08f5ec6 to 7deec36 Compare February 2, 2022 00:43

lsl merged commit 3f8fead into trunk Feb 2, 2022

lsl deleted the update/woop-landing branch February 2, 2022 01:03

github-actions bot removed the [Status] Ready to Merge label Feb 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Woo landing page design iterations #60697

Woo landing page design iterations #60697

lsl commented Feb 1, 2022 •

edited by Rolilink

github-actions bot commented Feb 1, 2022 •

edited by matticbot

matticbot commented Feb 1, 2022 •

edited

lsl commented Feb 1, 2022 •

edited by Rolilink

lsl Feb 1, 2022

allilevine Feb 1, 2022

Rolilink Feb 1, 2022

allilevine Feb 1, 2022

obenland left a comment

obenland Feb 1, 2022

allilevine Feb 1, 2022

obenland Feb 1, 2022

obenland Feb 1, 2022

allilevine Feb 1, 2022

Rolilink left a comment •

edited

matticbot commented Feb 2, 2022

a8ci18n commented Feb 2, 2022

a8ci18n commented Feb 11, 2022

Woo landing page design iterations #60697

Woo landing page design iterations #60697

Conversation

lsl commented Feb 1, 2022 • edited by Rolilink

Changes proposed in this Pull Request

Testing instructions

github-actions bot commented Feb 1, 2022 • edited by matticbot

matticbot commented Feb 1, 2022 • edited

lsl commented Feb 1, 2022 • edited by Rolilink

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

obenland left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Rolilink left a comment • edited

Choose a reason for hiding this comment

matticbot commented Feb 2, 2022

a8ci18n commented Feb 2, 2022

a8ci18n commented Feb 11, 2022

lsl commented Feb 1, 2022 •

edited by Rolilink

github-actions bot commented Feb 1, 2022 •

edited by matticbot

matticbot commented Feb 1, 2022 •

edited

lsl commented Feb 1, 2022 •

edited by Rolilink

Rolilink left a comment •

edited