Social: Add recommendation steps for the V1 plan (#38219)

* Update the advanced plan recommendations for the v1 plan

* changelog

* Fixup versions

* Use the sharing page for connections with the UI v1

projects/js-packages/licensing/changelog/update-social-v1-recommendation-steps

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social Recommendations: Added for V1 plan

projects/js-packages/licensing/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-licensing",
-	"version": "0.12.18",
+	"version": "0.12.19-alpha",
 	"description": "Jetpack licensing flow",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/licensing/#readme",
 	"bugs": {

projects/plugins/jetpack/_inc/client/main.jsx

@@ -121,13 +121,13 @@ const recommendationsRoutes = [
 	'/recommendations/welcome-search',
 	'/recommendations/welcome-scan',
 	'/recommendations/welcome-social-basic',
-	'/recommendations/welcome-social-advanced',
+	'/recommendations/welcome-social-v1',
 	'/recommendations/welcome-social-image-generator',
 	'/recommendations/welcome-golden-token',
 	'/recommendations/backup-activated',
 	'/recommendations/scan-activated',
 	'/recommendations/unlimited-sharing-activated',
-	'/recommendations/social-advanced-activated',
+	'/recommendations/social-v1-activated',
 	'/recommendations/antispam-activated',
 	'/recommendations/videopress-activated',
 	'/recommendations/search-activated',
@@ -599,12 +599,12 @@ class Main extends React.Component {
 			case '/recommendations/welcome-search':
 			case '/recommendations/welcome-scan':
 			case '/recommendations/welcome-social-basic':
-			case '/recommendations/welcome-social-advanced':
+			case '/recommendations/welcome-social-v1':
 			case '/recommendations/welcome-golden-token':
 			case '/recommendations/backup-activated':
 			case '/recommendations/scan-activated':
 			case '/recommendations/unlimited-sharing-activated':
-			case '/recommendations/social-advanced-activated':
+			case '/recommendations/social-v1-activated':
 			case '/recommendations/welcome-social-image-generator':
 			case '/recommendations/antispam-activated':
 			case '/recommendations/videopress-activated':

projects/plugins/jetpack/_inc/client/recommendations/constants.js

@@ -9,8 +9,8 @@ import {
 	JETPACK_SEARCH_PRODUCTS,
 	JETPACK_SCAN_PRODUCTS,
 	JETPACK_GOLDEN_TOKEN_BUNDLES,
-	JETPACK_SOCIAL_ADVANCED_PRODUCTS,
 	JETPACK_SOCIAL_BASIC_PRODUCTS,
+	JETPACK_SOCIAL_V1_PRODUCTS,
 } from 'lib/plans/constants';
 
 export const RECOMMENDATION_WIZARD_STEP = {
@@ -41,12 +41,12 @@ export const RECOMMENDATION_WIZARD_STEP = {
 	WELCOME__SEARCH: 'welcome__search',
 	WELCOME__SCAN: 'welcome__scan',
 	WELCOME__SOCIAL_BASIC: 'welcome__social_basic',
-	WELCOME__SOCIAL_ADVANCED: 'welcome__social_advanced',
+	WELCOME__SOCIAL_V1: 'welcome__social_v1',
 	WELCOME__SOCIAL_IMAGE_GENERATOR: 'welcome__social_image_generator',
 	WELCOME__GOLDEN_TOKEN: 'welcome__golden_token',
 	BACKUP_ACTIVATED: 'backup-activated',
 	SCAN_ACTIVATED: 'scan-activated',
-	SOCIAL_ADVANCED_ACTIVATED: 'social-advanced-activated',
+	SOCIAL_V1_ACTIVATED: 'social-v1-activated',
 	UNLIMITED_SHARING_ACTIVATED: 'unlimited-sharing-activated',
 	ANTISPAM_ACTIVATED: 'antispam-activated',
 	VIDEOPRESS_ACTIVATED: 'videopress-activated',
@@ -67,7 +67,7 @@ export const ONBOARDING_JETPACK_VIDEOPRESS = 'JETPACK_VIDEOPRESS';
 export const ONBOARDING_JETPACK_SEARCH = 'JETPACK_SEARCH';
 export const ONBOARDING_JETPACK_SCAN = 'JETPACK_SCAN';
 export const ONBOARDING_JETPACK_SOCIAL_BASIC = 'JETPACK_SOCIAL_BASIC';
-export const ONBOARDING_JETPACK_SOCIAL_ADVANCED = 'JETPACK_SOCIAL_ADVANCED';
+export const ONBOARDING_JETPACK_SOCIAL_V1 = 'JETPACK_SOCIAL_V1';
 export const ONBOARDING_JETPACK_GOLDEN_TOKEN = 'JETPACK_GOLDEN_TOKEN';
 
 export const ONBOARDING_SUPPORT_START_TIMESTAMP = 1664323200000; // 2022-09-28
@@ -83,7 +83,7 @@ export const ONBOARDING_ORDER = [
 	ONBOARDING_JETPACK_SEARCH,
 	ONBOARDING_JETPACK_SCAN,
 	ONBOARDING_JETPACK_SOCIAL_BASIC,
-	ONBOARDING_JETPACK_SOCIAL_ADVANCED,
+	ONBOARDING_JETPACK_SOCIAL_V1,
 ];
 
 export const ONBOARDING_NAME_BY_PRODUCT_SLUG = {
@@ -97,7 +97,7 @@ export const ONBOARDING_NAME_BY_PRODUCT_SLUG = {
 	[ ONBOARDING_JETPACK_SEARCH ]: JETPACK_SEARCH_PRODUCTS,
 	[ ONBOARDING_JETPACK_SCAN ]: JETPACK_SCAN_PRODUCTS,
 	[ ONBOARDING_JETPACK_SOCIAL_BASIC ]: JETPACK_SOCIAL_BASIC_PRODUCTS,
-	[ ONBOARDING_JETPACK_SOCIAL_ADVANCED ]: JETPACK_SOCIAL_ADVANCED_PRODUCTS,
+	[ ONBOARDING_JETPACK_SOCIAL_V1 ]: JETPACK_SOCIAL_V1_PRODUCTS,
 };
 
 export const SUMMARY_SECTION_BY_ONBOARDING_NAME = {
@@ -109,7 +109,7 @@ export const SUMMARY_SECTION_BY_ONBOARDING_NAME = {
 			'antispam-activated',
 			'videopress-activated',
 			'unlimited-sharing-activated',
-			'social-advanced-activated',
+			'social-v1-activated',
 			'search-activated',
 		],
 	},
@@ -145,11 +145,11 @@ export const SUMMARY_SECTION_BY_ONBOARDING_NAME = {
 		name: 'Social Basic',
 		slugs: [ RECOMMENDATION_WIZARD_STEP.UNLIMITED_SHARING_ACTIVATED ],
 	},
-	[ ONBOARDING_JETPACK_SOCIAL_ADVANCED ]: {
-		name: 'Social Advanced',
+	[ ONBOARDING_JETPACK_SOCIAL_V1 ]: {
+		name: 'Social',
 		slugs: [
 			RECOMMENDATION_WIZARD_STEP.UNLIMITED_SHARING_ACTIVATED,
-			RECOMMENDATION_WIZARD_STEP.SOCIAL_ADVANCED_ACTIVATED,
+			RECOMMENDATION_WIZARD_STEP.SOCIAL_V1_ACTIVATED,
 		],
 	},
 	[ ONBOARDING_JETPACK_GOLDEN_TOKEN ]: {

projects/plugins/jetpack/_inc/client/recommendations/feature-utils.js

@@ -165,7 +165,7 @@ export const getSummaryPrimaryProps = ( state, primarySlug ) => {
 				ctaLabel: __( 'Manage', 'jetpack' ),
 				ctaLink: getSiteAdminUrl( state ) + 'admin.php?page=jetpack#/sharing',
 			};
-		case 'social-advanced-activated':
+		case 'social-v1-activated':
 			return {
 				displayName: __( 'Advanced Sharing Features', 'jetpack' ),
 				ctaLabel: __( 'Manage', 'jetpack' ),
@@ -554,17 +554,20 @@ export const getStepContent = ( state, stepSlug ) => {
 				illustration: 'assistant-jetpack-social',
 				skipText: __( 'Next', 'jetpack' ),
 			};
-		case 'welcome__social_advanced':
+		case 'welcome__social_v1':
 			return {
 				question: __( 'Welcome to Jetpack Social!', 'jetpack' ),
 				description: __(
-					"With your new advanced plan you unlocked unlimited sharing, access to upload photos and videos with your posts, and usage of Social Image Generator.<br/><br/>Let's start with connecting your social media accounts, if you haven't already.",
+					"With your new Social plan you unlocked priority support, access to upload photos and videos with your posts, and usage of Social Image Generator.<br/><br/>Let's start with connecting your social media accounts, if you haven't already.",
 					'jetpack'
 				),
 				ctaText: __( 'Manage Social Media Connections', 'jetpack' ),
-				ctaLink: getRedirectUrl( 'calypso-marketing-connections', {
-					site: getSiteRawUrl( state ),
-				} ),
+				ctaLink: getSocialInitiaState( state ).useAdminUiV1
+					? getSiteAdminUrl( state ) + 'admin.php?page=jetpack#/sharing'
+					: getRedirectUrl( 'calypso-marketing-connections', {
+							site: getSiteRawUrl( state ),
+					  } ),
+				ctaForceExternal: true,
 				illustration: 'assistant-jetpack-social',
 				skipText: __( 'Next', 'jetpack' ),
 			};
@@ -577,6 +580,7 @@ export const getStepContent = ( state, stepSlug ) => {
 				),
 				ctaText: __( 'View Jetpack Social settings', 'jetpack' ),
 				ctaLink: getSiteAdminUrl( state ) + 'admin.php?page=jetpack#/sharing',
+				ctaForceExternal: true,
 				illustration: 'assistant-social-image-post',
 				skipText: __( 'Next', 'jetpack' ),
 			};
@@ -631,11 +635,11 @@ export const getStepContent = ( state, stepSlug ) => {
 				illustration: 'assistant-jetpack-social',
 				skipText: __( 'Next', 'jetpack' ),
 			};
-		case 'social-advanced-activated':
+		case 'social-v1-activated':
 			return {
 				question: __( 'Advanced Sharing features', 'jetpack' ),
 				description: __(
-					'Use your unlocked unlimited sharing, upload photos and videos with your posts, and create previews with Social Image Generator. To use these features, just head to the post editor and start creating your post!<br/><br/>You can manage your connections, and tweak features like Social Image Generator from the Jetpack Social Settings.',
+					'Use your Social plan to upload photos and videos with your posts, and create previews with Social Image Generator. To use these features, just head to the post editor and start creating your post!<br/><br/>You can manage your connections, and tweak features like Social Image Generator from the Jetpack Social Settings.',
 					'jetpack'
 				),
 				ctaText: __( 'View Jetpack Social settings', 'jetpack' ),

projects/plugins/jetpack/_inc/client/recommendations/index.jsx

@@ -148,8 +148,8 @@ const RecommendationsComponent = props => {
 		case RECOMMENDATION_WIZARD_STEP.WELCOME__SOCIAL_BASIC:
 			redirectPath = '/welcome-social-basic';
 			break;
-		case RECOMMENDATION_WIZARD_STEP.WELCOME__SOCIAL_ADVANCED:
-			redirectPath = '/welcome-social-advanced';
+		case RECOMMENDATION_WIZARD_STEP.WELCOME__SOCIAL_V1:
+			redirectPath = '/welcome-social-v1';
 			break;
 		case RECOMMENDATION_WIZARD_STEP.WELCOME__SOCIAL_IMAGE_GENERATOR:
 			redirectPath = 'welcome-social-image-generator';
@@ -169,8 +169,8 @@ const RecommendationsComponent = props => {
 		case RECOMMENDATION_WIZARD_STEP.UNLIMITED_SHARING_ACTIVATED:
 			redirectPath = '/unlimited-sharing-activated';
 			break;
-		case RECOMMENDATION_WIZARD_STEP.SOCIAL_ADVANCED_ACTIVATED:
-			redirectPath = '/social-advanced-activated';
+		case RECOMMENDATION_WIZARD_STEP.SOCIAL_V1_ACTIVATED:
+			redirectPath = '/social-v1-activated';
 			break;
 		case RECOMMENDATION_WIZARD_STEP.ANTISPAM_ACTIVATED:
 			redirectPath = '/antispam-activated';
@@ -295,8 +295,8 @@ const RecommendationsComponent = props => {
 					<Route path="/recommendations/welcome-social-basic">
 						<ResourcePrompt stepSlug="welcome__social_basic" />
 					</Route>
-					<Route path="/recommendations/welcome-social-advanced">
-						<ResourcePrompt stepSlug="welcome__social_advanced" />
+					<Route path="/recommendations/welcome-social-v1">
+						<ResourcePrompt stepSlug="welcome__social_v1" />
 					</Route>
 					<Route path="/recommendations/welcome-social-image-generator">
 						<ResourcePrompt stepSlug="welcome__social_image_generator" />
@@ -313,8 +313,8 @@ const RecommendationsComponent = props => {
 					<Route path="/recommendations/unlimited-sharing-activated">
 						<ResourcePrompt stepSlug="unlimited-sharing-activated" />
 					</Route>
-					<Route path="/recommendations/social-advanced-activated">
-						<ResourcePrompt stepSlug="social-advanced-activated" />
+					<Route path="/recommendations/social-v1-activated">
+						<ResourcePrompt stepSlug="social-v1-activated" />
 					</Route>
 					<Route path="/recommendations/antispam-activated">
 						<ResourcePrompt stepSlug="antispam-activated" />

projects/plugins/jetpack/_inc/client/recommendations/prompts/resource-prompt/index.jsx

@@ -45,6 +45,7 @@ const ResourcePromptComponent = props => {
 		illustration,
 		ctaText,
 		ctaLink,
+		ctaForceExternal,
 		hasNoAction,
 		skipText,
 		stepSlug,
@@ -119,7 +120,8 @@ const ResourcePromptComponent = props => {
 		return null;
 	}, [ stepProgressValue, progressValue ] );
 
-	const ctaLinkIsExternal = ctaLink?.match( /^https:\/\/jetpack.com\/redirect/ );
+	const ctaLinkIsExternal =
+		ctaLink?.match( /^https:\/\/jetpack.com\/redirect/ ) || ctaForceExternal;
 
 	return (
 		<PromptLayout

projects/plugins/jetpack/_inc/client/state/recommendations/reducer.js

@@ -22,7 +22,7 @@ import {
 	SUMMARY_SECTION_BY_ONBOARDING_NAME,
 	RECOMMENDATION_WIZARD_STEP,
 	ONBOARDING_SUPPORT_START_TIMESTAMP,
-	ONBOARDING_JETPACK_SOCIAL_ADVANCED,
+	ONBOARDING_JETPACK_SOCIAL_V1,
 	ONBOARDING_JETPACK_SOCIAL_BASIC,
 } from 'recommendations/constants';
 import { combineReducers } from 'redux';
@@ -361,8 +361,8 @@ const stepToNextStepByPath = {
 			'backup-activated': 'scan-activated',
 			'scan-activated': 'antispam-activated',
 			'antispam-activated': 'videopress-activated',
-			'videopress-activated': 'social-advanced-activated',
-			'social-advanced-activated': 'search-activated',
+			'videopress-activated': 'social-v1-activated',
+			'social-v1-activated': 'search-activated',
 			'search-activated': 'server-credentials',
 			'server-credentials': 'summary',
 		},
@@ -415,8 +415,8 @@ const stepToNextStepByPath = {
 			monitor: 'site-accelerator',
 			'site-accelerator': 'summary',
 		},
-		[ ONBOARDING_JETPACK_SOCIAL_ADVANCED ]: {
-			welcome__social_advanced: 'welcome__social_image_generator',
+		[ ONBOARDING_JETPACK_SOCIAL_V1 ]: {
+			welcome__social_v1: 'welcome__social_image_generator',
 			welcome__social_image_generator: 'monitor',
 			monitor: 'site-accelerator',
 			'site-accelerator': 'summary',
@@ -460,13 +460,13 @@ export const stepToRoute = {
 	welcome__search: '#/recommendations/welcome-search',
 	welcome__scan: '#/recommendations/welcome-scan',
 	welcome__social_basic: '#/recommendations/welcome-social-basic',
-	welcome__social_advanced: '#/recommendations/welcome-social-advanced',
+	welcome__social_v1: '#/recommendations/welcome-social-v1',
 	welcome__social_image_generator: '#/recommendations/welcome-social-image-generator',
 	welcome__golden_token: '#/recommendations/welcome-golden-token',
 	'backup-activated': '#/recommendations/backup-activated',
 	'scan-activated': '#/recommendations/scan-activated',
 	'unlimited-sharing-activated': '#/recommendations/unlimited-sharing-activated',
-	'social-advanced-activated': '#/recommendations/social-advanced-activated',
+	'social-v1-activated': '#/recommendations/social-v1-activated',
 	'antispam-activated': '#/recommendations/antispam-activated',
 	'videopress-activated': '#/recommendations/videopress-activated',
 	'search-activated': '#/recommendations/search-activated',
@@ -656,7 +656,7 @@ const isStepEligibleToShow = ( state, step ) => {
 		case 'backup-activated':
 		case 'scan-activated':
 		case 'unlimited-sharing-activated':
-		case 'social-advanced-activated':
+		case 'social-v1-activated':
 		case 'search-activated':
 		case 'welcome__complete':
 		case 'welcome__security':
@@ -666,7 +666,7 @@ const isStepEligibleToShow = ( state, step ) => {
 		case 'welcome__search':
 		case 'welcome__scan':
 		case 'welcome__social_basic':
-		case 'welcome__social_advanced':
+		case 'welcome__social_v1':
 		case 'welcome__social_image_generator':
 		case 'welcome__backup':
 		case 'welcome__golden_token':
@@ -856,7 +856,7 @@ export const isOnboardingEligibleToShowInSummary = ( state, onboardingName ) =>
 		case ONBOARDING_JETPACK_SEARCH:
 		case ONBOARDING_JETPACK_SECURITY:
 		case ONBOARDING_JETPACK_SOCIAL_BASIC:
-		case ONBOARDING_JETPACK_SOCIAL_ADVANCED:
+		case ONBOARDING_JETPACK_SOCIAL_V1:
 			// Don't show plans that overlap with active plan: Complete
 			return ! viewedOnboardings.includes( ONBOARDING_JETPACK_COMPLETE );
 		case ONBOARDING_JETPACK_BACKUP:

projects/plugins/jetpack/changelog/update-social-v1-recommendation-steps

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Added recommendation steps for the Social v1 plan