Woo Installer: Landing page redesign re-deploy #58179

allilevine · 2021-11-17T16:00:25Z

Changes proposed in this Pull Request

Add new landing page component to /woocommerce-installation flow.
Add new CtaSection component.
Change fixed navigation component to take a contentRef prop and show/hide the right content depending on whether it's also visible on the page.

Testing instructions

Checkout this branch and click on the "WooCommerce" nav menu item on an Atomic site that doesn't have Woo installed.
Verify that the new landing page displays.
Check that clicking "Set up my store!" still works to install Woo.
Check that when you scroll past the CTA button, it appears in the header.
Check that other pages using the fixed navigation component (like /plugins) display correctly.
Check that you get a notice if you try to start this flow without confirming your email address.

Before

After

Related to #57419

- Adds @automattic/viewport-react to the MasonryWave component to conditionally render different layouts on mobile and web. - Fixes missing key warnings on the MasonryWave component.

…images

github-actions · 2021-11-17T16:02:24Z

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:commit-ada2ecd94d2df7601a63ea07b1434d51e70631a4
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:commit-ada2ecd94d2df7601a63ea07b1434d51e70631a4&env=jetpack
(These links may take a few minutes to be available)

retrofox

Tested again and LGTM.

Screen.Recording.2021-11-17.at.2.20.42.PM.mov

a8ci18n · 2021-11-17T19:16:42Z

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

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

a8ci18n · 2021-11-29T10:34:02Z

Translation for this Pull Request has now been finished.

* Add WoopLandingPage component * Add cta header component * Remove extra comment * Style landing page * Hide/Show Navigation Button when scrolling past the CTA Button * Re-organize components and use Types * Add SetupNotices to the new landing page * Add some responsive CSS and remove mixin * Remove style import and use rem * Add WoopLandingPage component * Add cta header component * Remove extra comment * Style landing page * Adds WaveMasonry component to the woop landing page * Rendering only images * changes cta-header to 1 column layout on mobile * Update client/components/masonry-wave/index.jsx * Clean up merge conflicts * Clean up landing-page prop * Clean up spacing, scroll * Add WooCommerce title * cta-header uses css-grid 1 column layout and centers content on mobile * adds @automattic/viewport-react and fixes key related warnings - Adds @automattic/viewport-react to the MasonryWave component to conditionally render different layouts on mobile and web. - Fixes missing key warnings on the MasonryWave component. * renaming cta images to a more descriptive name | removing unused cta images Co-authored-by: Rolando Perez <me@rolilink.com> Co-authored-by: Louis Laugesen <louis.laugesen@gmail.com>

cpapazoglou · 2022-03-22T07:20:54Z

client/components/cta-section/index.tsx

+	ctaRef?: React.RefObject< HTMLButtonElement >;
+}
+
+const CtaSection: React.FunctionComponent< Props > = ( props ) => {


Sorry for being super late here 😅... Is this component still used? Should we remove it if it's not?

If it's still used, can we addd readme, example, and also integrate in devdocs https://wpcalypso.wordpress.com/devdocs/?

cpapazoglou · 2022-03-22T07:24:44Z

client/components/masonry-wave/index.jsx

+	);
+};
+
+const MasonryWave = ( props ) => {


Sorry for being super late here 😅... Is this component still used? Should we remove it if it's not?

If it's still used, can we addd readme, example, and integrate it in devdocs https://wpcalypso.wordpress.com/devdocs/? Also, I feel that the component name MasonryWave doesn't really help in understanding what this component is used for. Is it for rendering an image grid?

cpapazoglou · 2022-03-22T07:41:09Z

client/components/fixed-navigation-header/index.tsx

+	useEffect( () => {
+		if ( ! contentRef ) {
+			return;
+		}
+
+		const handleScroll = () => {
+			const headerHeight = headerRef?.current?.getBoundingClientRect().height;
+			const offset =
+				contentRef.current && headerHeight ? contentRef.current.offsetTop - headerHeight : 0;
+			const scrollPosition = window.scrollY;
+			const actionElement = actionsRef?.current;
+
+			if ( ! actionElement ) {
+				return;
+			}
+
+			if ( offset > 0 && scrollPosition < offset ) {
+				actionElement.style.visibility = 'hidden';
+			} else {
+				actionElement.style.visibility = 'visible';
+			}
+		};
+
+		handleScroll();
+
+		window.addEventListener( 'scroll', handleScroll );
+		return () => {
+			window.removeEventListener( 'scroll', handleScroll );
+		};
+	}, [ contentRef ] );


After looking at https://github.com/Automattic/wp-calypso/pull/62080/files, I found at about this code. Can we add some comments about what this useEffect does for posterity? Also, I noticed a new prop which should be added in the readme

wp-calypso/client/components/fixed-navigation-header/README.md

Lines 25 to 29 in 831b4c5

- `navigationItems` (`{ label: string; href: string }[]`) - The Navigations items to be shown

- `id` (`string`) - ID for the header (optional)

- `className` (`string`) - A class name for the wrapped component (optional)

- `children` (`nodes`) – Any children elements which are being rendered to the far right (optional)

- `compactBreadcrumb` (`boolean`) - Displays only the previous item URL reading "Back" in the breadcrumb (optional)

Moreover, it seems to me that it could have been the parent component responsibility to render or not the actionElement (perhaps by using a similar useEffect rather than having to pass the contentRef. Is there a reason for choosing to place this functionality here?

@cpapazoglou Would you mind opening issues for these so we can triage them, rather than commenting on a merged PR?

Sure, I just thought we can discuss it first. Added here #62166

allilevine and others added 24 commits November 11, 2021 17:35

Add WoopLandingPage component

8c99d8e

Add cta header component

3453599

Remove extra comment

88acf38

Style landing page

d59cad4

Hide/Show Navigation Button when scrolling past the CTA Button

fbbce51

Re-organize components and use Types

8544932

Add SetupNotices to the new landing page

a7fc759

Add some responsive CSS and remove mixin

aef80ce

Remove style import and use rem

3dd5134

Add WoopLandingPage component

b306cc1

Add cta header component

1c15144

Remove extra comment

2f38733

Style landing page

1f4898c

Adds WaveMasonry component to the woop landing page

9249f06

Rendering only images

e772eb7

changes cta-header to 1 column layout on mobile

f02566b

Update client/components/masonry-wave/index.jsx

c9a673a

Clean up merge conflicts

846b179

Clean up landing-page prop

2184c55

Clean up spacing, scroll

77c8d8b

Add WooCommerce title

91852eb

cta-header uses css-grid 1 column layout and centers content on mobile

295d5f7

adds @automattic/viewport-react and fixes key related warnings

b88d53a

- Adds @automattic/viewport-react to the MasonryWave component to conditionally render different layouts on mobile and web. - Fixes missing key warnings on the MasonryWave component.

renaming cta images to a more descriptive name | removing unused cta …

ada2ecd

…images

allilevine requested a review from a team November 17, 2021 16:17

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

retrofox approved these changes Nov 17, 2021

View reviewed changes

allilevine merged commit 5ce4b66 into trunk Nov 17, 2021

allilevine deleted the update/woocommerce-install-landing-page branch November 17, 2021 18:16

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 Nov 17, 2021

Rolilink approved these changes Nov 17, 2021

View reviewed changes

allilevine mentioned this pull request Nov 17, 2021

Woo Installer: Landing page redesign #57419

Closed

6 tasks

cpapazoglou reviewed Mar 22, 2022

View reviewed changes

cpapazoglou mentioned this pull request Mar 23, 2022

Fixed Navigation Header: cleanup and docs #62166

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Woo Installer: Landing page redesign re-deploy #58179

Woo Installer: Landing page redesign re-deploy #58179

allilevine commented Nov 17, 2021

github-actions bot commented Nov 17, 2021

retrofox left a comment •

edited

Loading

a8ci18n commented Nov 17, 2021

a8ci18n commented Nov 29, 2021

cpapazoglou Mar 22, 2022

cpapazoglou Mar 22, 2022

cpapazoglou Mar 22, 2022

allilevine Mar 22, 2022

cpapazoglou Mar 23, 2022

	- `navigationItems` (`{ label: string; href: string }[]`) - The Navigations items to be shown
	- `id` (`string`) - ID for the header (optional)
	- `className` (`string`) - A class name for the wrapped component (optional)
	- `children` (`nodes`) – Any children elements which are being rendered to the far right (optional)
	- `compactBreadcrumb` (`boolean`) - Displays only the previous item URL reading "Back" in the breadcrumb (optional)

Woo Installer: Landing page redesign re-deploy #58179

Woo Installer: Landing page redesign re-deploy #58179

Conversation

allilevine commented Nov 17, 2021

Changes proposed in this Pull Request

Testing instructions

github-actions bot commented Nov 17, 2021

retrofox left a comment • edited Loading

Choose a reason for hiding this comment

a8ci18n commented Nov 17, 2021

a8ci18n commented Nov 29, 2021

cpapazoglou Mar 22, 2022

Choose a reason for hiding this comment

cpapazoglou Mar 22, 2022

Choose a reason for hiding this comment

cpapazoglou Mar 22, 2022

Choose a reason for hiding this comment

allilevine Mar 22, 2022

Choose a reason for hiding this comment

cpapazoglou Mar 23, 2022

Choose a reason for hiding this comment

retrofox left a comment •

edited

Loading