Home: Podcast Launched Card #47538

krymson24 · 2020-11-18T04:22:51Z

Changes proposed in this Pull Request

These changes add a primary card specific to the onboarding experience of a user who has just created a podcast website.

Podcasts	Non-podcasts

Testing instructions

Use Calypso Live or checkout this branch.
Go to My Home for a newly created website.
Convert the site to a podcasting site:
- Open a WP shell in your WP.com sandbox: wp shell --user=<YOUR_WPCOM_USERNAME> --url=<YOUR_SITE_ADDRESS>.
- Update the blog option: update_blog_option( <SITE_ID>, 'anchor_podcast', '3e51070' );.
Sandbox the API and reload My Home (this is to prevent our caching mechanism from returning the previous blog option value).
Ensure that the title of the first site setup task reads as "Welcome to your podcast site!".
Access the Tracks Live View in MC (PCYsg-5hv-p2).
Filter the events so only site setup list events for your user are shown (you need to wait at least 5 minutes before they appear):

Expand the props and make sure there is a new is_podcasting_site event prop:

Clean up the anchor_podcast option value from your site:
- Open a WP shell in your WP.com sandbox: wp shell --user=<YOUR_WPCOM_USERNAME> --url=<YOUR_SITE_ADDRESS>.
- Remove the blog option: delete_blog_option( <SITE_ID>, 'anchor_podcast' );.

Fixes 322-gh-dotcom-manage

matticbot · 2020-11-18T04:22:53Z

Test live: https://calypso.live/?branch=add/podcast-launched-card

krymson24 · 2020-11-18T04:23:51Z

client/my-sites/customer-home/cards/tasks/site-setup-list/current-task-item.jsx

-							count: currentTask.timing,
-							args: [ currentTask.timing ],
-						} ) }
+						{ currentTask.timing && (


The decision here is to make the CurrentTaskItem more generic to adhere with designs.

krymson24 · 2020-11-18T04:24:21Z

client/my-sites/customer-home/cards/tasks/site-setup-list/current-task-item.jsx

@@ -52,7 +56,7 @@ const CurrentTaskItem = ( { currentTask, skipTask, startTask, useAccordionLayout
 							className="site-setup-list__task-skip task__skip is-link"
 							onClick={ () => skipTask() }
 						>
-							{ translate( 'Skip for now' ) }
+							{ currentTask.isSkippableText || translate( 'Skip for now' ) }


Making this more generic as well so we can pass custom "Skip" text

krymson24 · 2020-11-18T04:26:05Z

My thoughts are to make this view more generic:

matticbot · 2020-11-18T04:37:50Z

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

Sections (~115 bytes added 📈 [gzipped])

name  parsed_size           gzip_size
home       +305 B  (+0.1%)     +115 B  (+0.1%)

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

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.

kwight · 2020-11-23T23:30:38Z

@krymson24 Looks like this is close – can you fill out the issue description and testing instructions please so we can push it out 🎉 Are there any other questions or blockers?..

krymson24 · 2020-11-24T06:06:23Z

@krymson24 Looks like this is close – can you fill out the issue description and testing instructions please so we can push it out 🎉 Are there any other questions or blockers?..

Shifting back to this now. I got caught up in all the GA4 urgency.

krymson24 · 2020-11-24T07:05:04Z

Frontend is complete, but I still need to figure out how and where to send a list of tasks from the backend that correspond to the podcast-specific tasks.

mmtr

Already gave feedback in D52925-code, but giving it here too as for closing the loop.

When I look at the design iterations (i1: pbAPfg-Vv-p2, i2: pbAPfg-Z3-p2, i3: pbAPfg-ZK-p2, i4: pbAPfg-14r-p2), I don't see any discussion around the site setup process in My Home, so I have a feeling that the mockup was only added to denote there is a site setup in place that we could customize, but no requirements have been defined.

Can we confirm this? I think the current site setup works perfectly for podcasting sites as well, so we may not need to customize it (or at least not for a v1 release):

If from a product perspective we are interested in tweaking the site setup tasks, then I'd suggest to keep using the same My Home view and card (VIEW_SITE_SETUP and TASK_SITE_SETUP_CHECKLIST) and apply the needed modifications in the getTask function (client/my-sites/customer-home/cards/tasks/site-setup-list/get-task.js). The benefit of this approach is that we'll keep using the logic we already have in the server for the current My Home view (such as displaying it only if there is a pending task).

mmtr · 2020-11-25T15:30:34Z

If from a product perspective we are interested in tweaking the site setup tasks, then I'd suggest to keep using the same My Home view and card and apply the needed modifications in the getTask function.

For cases where tasks don't need to change its behavior but only its wording (like the "Welcome to your podcast site!" task, which replicates the behavior of the existing "Your site has been created!" task), then we can use the new selector introduced in #47747:

wp-calypso/client/my-sites/customer-home/cards/tasks/site-setup-list/get-task.js

Lines 76 to 92 in 80f37eb

    
           case CHECKLIST_KNOWN_TASKS.START_SITE_SETUP: 
        
           	taskData = { 
        
           		timing: 1, 
        
           		label: translate( 'Site created' ), 
        
           		title: translate( 'Your site has been created!' ), 
        
           		description: translate( 
        
           			"Next, we'll guide you through setting up and launching your site." 
        
           		), 
        
           		actionText: translate( 'Get started' ), 
        
           		...( ! task.isCompleted && { 
        
           			actionDispatch: requestSiteChecklistTaskUpdate, 
        
           			actionDispatchArgs: [ siteId, task.id ], 
        
           		} ), 
        
           		actionAdvanceToNext: true, 
        
           		completeOnView: true, 
        
           	}; 
        
           	break;

case CHECKLIST_KNOWN_TASKS.START_SITE_SETUP:
	const isPodcastingSite = !! getAnchorPodcast( siteId );
	taskData = {
		timing: 1,
		label: isPodcastingSite ? translate( 'Continue building your site' ) : translate( 'Site created' ),
		title: isPodcastingSite ? translate( 'Welcome to your podcast site!' ) : translate( 'Your site has been created!' ),
		description:  isPodcastingSite
				? translate( "Now that you've created your site, we'll guide you through completing a few additional steps to finish building your site.")
				: translate( "Next, we'll guide you through setting up and launching your site." ),
		actionText: translate( 'Get started' ),
		...( ! task.isCompleted && {
			actionDispatch: requestSiteChecklistTaskUpdate,
			actionDispatchArgs: [ siteId, task.id ],
		} ),
		actionAdvanceToNext: true,
		completeOnView: true,
	};
	break;

That way we don't need to introduce any changes in the back-end.

mmtr · 2020-11-25T16:28:58Z

Can we confirm this? I think the current site setup works perfectly for podcasting sites as well, so we may not need to customize it (or at least not for a v1 release):

Seems this is the case according to 322-gh-Automattic/dotcom-manage#issuecomment-733805456 ?

We should have the order of checklist items and the task copy match what is in production today

krymson24 · 2020-11-26T00:24:40Z

@sfougnier see screenshot in the PR description. Is having the Completed label okay for this card? It makes it consistent with the Site Setup card. If not, I can remove it.

krymson24 · 2020-11-26T00:25:42Z

Can we confirm this? I think the current site setup works perfectly for podcasting sites as well, so we may not need to customize it (or at least not for a v1 release):

Seems this is the case according to 322-gh-Automattic/dotcom-manage#issuecomment-733805456 ?

We should have the order of checklist items and the task copy match what is in production today

Removed the reliance on the backend.

@mmtr based on my comment here: #47747 (comment), I used the code for the selector you created for the logic to determine if the site is a podcasting site.

mmtr

I may be misunderstanding @sfougnier's comment:

the task copy match what is in production today

But I think we don't want to change the copy of the initial task and thus this PR can be closed?

mmtr · 2020-11-27T10:00:36Z

client/my-sites/customer-home/cards/tasks/site-setup-list/get-task.js

+						),
+						isSkippable: true,
+						isSkippableText: translate( 'Dismiss' ),
+						actionText: translate( 'Continue' ),


I believe this is missing the actionDispatch, actionDispatchArgs, actionAdvanceToNext and completeOnView properties responsible for moving to the next site setup task.

mmtr · 2020-11-27T15:58:19Z

I may be misunderstanding @sfougnier's comment:

the task copy match what is in production today

But I think we don't want to change the copy of the initial task and thus this PR can be closed?

Clarified in p1606490101041200-slack-C0Q664T29?thread_ts=1606343379.020400&cid=C0Q664T29 by @kwight:

I think of it as, we could re-use the existing checklist component, and only change the welcome message, and add the podcasting prop boolean for Tracks – and be done

mmtr · 2020-11-27T16:31:11Z

Alright, I simplified the PR by simply overriding the task title on podcasting sites, since the rest of the task copy should match what we have in production.

kwight · 2020-11-27T22:12:15Z

Alright, I simplified the PR by simply overriding the task title on podcasting sites, since the rest of the task copy should match what we have in production.

👍 Can we also update any Tracks events, keeping the same event name but adding a is_podcast boolean property or something (for segmentation)?

kwight

Wonderful, works great for me 🎉

krymson24 · 2020-11-30T21:26:17Z

@sfougnier based on the screenshots, can you confirm this is what we want?

ghost · 2020-11-30T21:30:16Z

Is having the Completed label okay for this card? It makes it consistent with the Site Setup card. If not, I can remove it.

I must have missed the ping for this. Can we remove the completed label for the podcast scenario? It's a little confusing. Otherwise, everything looks good.

krymson24 · 2020-11-30T23:08:26Z

client/my-sites/customer-home/cards/tasks/site-setup-list/current-task-item.jsx

@@ -14,11 +14,12 @@ const CurrentTaskItem = ( { currentTask, skipTask, startTask, useAccordionLayout
 	return (
 		<div className="site-setup-list__task task">
 			<div className="site-setup-list__task-text task__text">
-				{ currentTask.isCompleted ? (
+				{ currentTask.isCompleted && ! currentTask.hideLabel && (


I added another prop here so that we preserve the true isCompleted value for recordTracksEvent. I was hoping to change the isCompleted prop right as it gets passed to CurrentTaskItem, but it looks like these objects are immutable, so this was the best alternative.

krymson24 · 2020-11-30T23:11:23Z

client/my-sites/customer-home/cards/tasks/site-setup-list/get-task.js

@@ -89,6 +90,12 @@ export const getTask = (
 				actionAdvanceToNext: true,


If you expand the code above, you'll notice a timing prop for this checklist task. The text for this task is "Your site has been created". This implies that the task is complete, so I don't see why we would ever even show "timing" per the previous or existing logic in client/my-sites/customer-home/cards/tasks/site-setup-list/current-task-item.jsx. We could probably remove it to avoid confusion.

krymson24 · 2020-11-30T23:14:06Z

Is having the Completed label okay for this card? It makes it consistent with the Site Setup card. If not, I can remove it.

I must have missed the ping for this. Can we remove the completed label for the podcast scenario? It's a little confusing. Otherwise, everything looks good.

@sfougnier done, thank you!

…d response

mmtr · 2020-12-01T10:54:50Z

Thanks for your changes, @krymson24!

krymson24 added the [Status] In Progress label Nov 18, 2020

krymson24 requested a review from a team November 18, 2020 04:22

krymson24 requested a review from a team as a code owner November 18, 2020 04:22

krymson24 self-assigned this Nov 18, 2020

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 18, 2020

krymson24 commented Nov 18, 2020

View reviewed changes

krymson24 force-pushed the add/podcast-launched-card branch from 2bfeb0a to 872ab92 Compare November 19, 2020 05:30

sarayourfriend changed the base branch from master to trunk November 20, 2020 16:10

krymson24 force-pushed the add/podcast-launched-card branch from 872ab92 to b416395 Compare November 24, 2020 06:05

krymson24 removed the [Status] In Progress label Nov 25, 2020

mmtr reviewed Nov 25, 2020

View reviewed changes

mmtr reviewed Nov 27, 2020

View reviewed changes

mmtr force-pushed the add/podcast-launched-card branch from cf879a5 to 43778da Compare November 27, 2020 16:06

mmtr self-assigned this Nov 30, 2020

kwight approved these changes Nov 30, 2020

View reviewed changes

krymson24 commented Nov 30, 2020

View reviewed changes

krymson24 and others added 11 commits December 1, 2020 11:47

add(podcast-launch) podcast launched card

7d28d7c

add(podcast-launch) add period to text

e542d23

add(podcast-launched) using anchor podcast selector instead of backen…

26e1948

…d response

add(podcast-launch) podcast launched card

7a45091

add(podcast-launch) add period to text

7b592ee

add(podcast-launched) using anchor podcast selector instead of backen…

02accfa

…d response

Remove unnecessary changes (only task title needs to change)

78660d6

Add is_podcasting_site property to tracks events

8aeae6a

Update deps

d9b225e

add(podcast-launched-card) add hidelabel prop to preserve data integrity

d7fa3c2

add(podcast-launched-card) remove hiding timing

75e8d79

mmtr force-pushed the add/podcast-launched-card branch from f888821 to 75e8d79 Compare December 1, 2020 10:53

mmtr approved these changes Dec 1, 2020

View reviewed changes

mmtr merged commit a9adbf2 into trunk Dec 1, 2020

mmtr deleted the add/podcast-launched-card branch December 1, 2020 11:28

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

valterlorran mentioned this pull request Apr 6, 2023

Anchor: Remove podcast launched card #75403

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Home: Podcast Launched Card #47538

Home: Podcast Launched Card #47538

krymson24 commented Nov 18, 2020 •

edited

Loading

matticbot commented Nov 18, 2020

krymson24 Nov 18, 2020

krymson24 Nov 18, 2020

krymson24 commented Nov 18, 2020

matticbot commented Nov 18, 2020 •

edited

Loading

kwight commented Nov 23, 2020

krymson24 commented Nov 24, 2020 •

edited

Loading

krymson24 commented Nov 24, 2020

mmtr left a comment

mmtr commented Nov 25, 2020

mmtr commented Nov 25, 2020

krymson24 commented Nov 26, 2020

krymson24 commented Nov 26, 2020

mmtr left a comment

mmtr Nov 27, 2020

mmtr commented Nov 27, 2020

mmtr commented Nov 27, 2020

kwight commented Nov 27, 2020

kwight left a comment

krymson24 commented Nov 30, 2020

ghost commented Nov 30, 2020

krymson24 Nov 30, 2020 •

edited

Loading

krymson24 Nov 30, 2020 •

edited

Loading

krymson24 commented Nov 30, 2020

mmtr commented Dec 1, 2020

		@@ -89,6 +90,12 @@ export const getTask = (
		actionAdvanceToNext: true,

Home: Podcast Launched Card #47538

Home: Podcast Launched Card #47538

Conversation

krymson24 commented Nov 18, 2020 • edited Loading

Changes proposed in this Pull Request

Testing instructions

matticbot commented Nov 18, 2020

krymson24 Nov 18, 2020

Choose a reason for hiding this comment

krymson24 Nov 18, 2020

Choose a reason for hiding this comment

krymson24 commented Nov 18, 2020

matticbot commented Nov 18, 2020 • edited Loading

kwight commented Nov 23, 2020

krymson24 commented Nov 24, 2020 • edited Loading

krymson24 commented Nov 24, 2020

mmtr left a comment

Choose a reason for hiding this comment

mmtr commented Nov 25, 2020

mmtr commented Nov 25, 2020

krymson24 commented Nov 26, 2020

krymson24 commented Nov 26, 2020

mmtr left a comment

Choose a reason for hiding this comment

mmtr Nov 27, 2020

Choose a reason for hiding this comment

mmtr commented Nov 27, 2020

mmtr commented Nov 27, 2020

kwight commented Nov 27, 2020

kwight left a comment

Choose a reason for hiding this comment

krymson24 commented Nov 30, 2020

ghost commented Nov 30, 2020

krymson24 Nov 30, 2020 • edited Loading

Choose a reason for hiding this comment

krymson24 Nov 30, 2020 • edited Loading

Choose a reason for hiding this comment

krymson24 commented Nov 30, 2020

mmtr commented Dec 1, 2020

krymson24 commented Nov 18, 2020 •

edited

Loading

matticbot commented Nov 18, 2020 •

edited

Loading

krymson24 commented Nov 24, 2020 •

edited

Loading

krymson24 Nov 30, 2020 •

edited

Loading

krymson24 Nov 30, 2020 •

edited

Loading