Add welcome modal when coming from Calypso (https://github.com/woocommerce/woocommerce-admin/pull/6004)

* Add welcome modal when coming from Calypso

* add to changelog

* do some important work for prettier

* udpated with final copy

* Add PR number to readme

plugins/woocommerce-admin/client/homescreen/layout.js

@@ -27,6 +27,7 @@ import StatsOverview from './stats-overview';
 import TaskListPlaceholder from '../task-list/placeholder';
 import InboxPanel from '../inbox-panel';
 import { WelcomeModal } from './welcome-modal';
+import { WelcomeFromCalypsoModal } from './welcome-from-calypso-modal';
 import ActivityHeader from '../header/activity-panel/activity-header';
 import { ActivityPanel } from './activity-panel';
 
@@ -39,6 +40,9 @@ const TaskList = lazy( () =>
 	import( /* webpackChunkName: "task-list" */ '../task-list' )
 );
 
+const WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME =
+	'woocommerce_welcome_from_calypso_modal_dismissed';
+
 export const Layout = ( {
 	defaultHomescreenLayout,
 	isBatchUpdating,
@@ -46,6 +50,7 @@ export const Layout = ( {
 	requestingTaskList,
 	taskListHidden,
 	shouldShowWelcomeModal,
+	shouldShowWelcomeFromCalypsoModal,
 	updateOptions,
 } ) => {
 	const userPrefs = useUserPreferences();
@@ -137,6 +142,16 @@ export const Layout = ( {
 					} }
 				/>
 			) }
+			{ shouldShowWelcomeFromCalypsoModal && (
+				<WelcomeFromCalypsoModal
+					onClose={ () => {
+						updateOptions( {
+							[ WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ]:
+								'yes',
+						} );
+					} }
+				/>
+			) }
 		</div>
 	);
 };
@@ -162,6 +177,10 @@ Layout.propTypes = {
 	 * If the welcome modal should display
 	 */
 	shouldShowWelcomeModal: PropTypes.bool,
+	/**
+	 * If the welcome from Calypso modal should display.
+	 */
+	shouldShowWelcomeFromCalypsoModal: PropTypes.bool,
 	/**
 	 * Dispatch an action to update an option
 	 */
@@ -175,6 +194,22 @@ export default compose(
 			OPTIONS_STORE_NAME
 		);
 
+		const welcomeFromCalypsoModalDismissed =
+			getOption( WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ) ===
+			'yes';
+		const welcomeFromCalypsoModalDismissedResolved = hasFinishedResolution(
+			'getOption',
+			[ WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ]
+		);
+		const fromCalypsoUrlArgIsPresent = !! window.location.search.match(
+			'from-calypso'
+		);
+
+		const shouldShowWelcomeFromCalypsoModal =
+			welcomeFromCalypsoModalDismissedResolved &&
+			! welcomeFromCalypsoModalDismissed &&
+			fromCalypsoUrlArgIsPresent;
+
 		const welcomeModalDismissed =
 			getOption( 'woocommerce_task_list_welcome_modal_dismissed' ) ===
 			'yes';
@@ -185,7 +220,10 @@ export default compose(
 		);
 
 		const shouldShowWelcomeModal =
-			welcomeModalDismissedHasResolved && ! welcomeModalDismissed;
+			welcomeModalDismissedHasResolved &&
+			! welcomeModalDismissed &&
+			welcomeFromCalypsoModalDismissedResolved &&
+			! welcomeFromCalypsoModalDismissed;
 
 		const defaultHomescreenLayout =
 			getOption( 'woocommerce_default_homepage_layout' ) ||
@@ -195,6 +233,7 @@ export default compose(
 			defaultHomescreenLayout,
 			isBatchUpdating: isNotesRequesting( 'batchUpdateNotes' ),
 			shouldShowWelcomeModal,
+			shouldShowWelcomeFromCalypsoModal,
 			taskListHidden:
 				getOption( 'woocommerce_task_list_hidden' ) === 'yes' &&
 				getOption( 'woocommerce_extended_task_list_hidden' ) !== 'no',

plugins/woocommerce-admin/client/homescreen/welcome-from-calypso-modal/index.js

@@ -0,0 +1 @@
+export { default as WelcomeFromCalypsoModal } from './welcome-from-calypso-modal';

plugins/woocommerce-admin/client/homescreen/welcome-from-calypso-modal/style.scss

@@ -0,0 +1,11 @@
+.components-guide.woocommerce__welcome-modal.woocommerce__welcome-from-calypso-modal {
+	height: 440px;
+
+	ul.components-guide__page-control {
+		display: none;
+	}
+
+	.woocommerce__welcome-modal__page-content {
+		margin-top: $gap;
+	}
+}

plugins/woocommerce-admin/client/homescreen/welcome-from-calypso-modal/welcome-from-calypso-modal.js

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import React, { useState, useEffect } from '@wordpress/element';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
+import interpolateComponents from 'interpolate-components';
+import classNames from 'classnames';
+import { Link } from '@woocommerce/components';
+
+/**
+ * Internal dependencies
+ */
+import { LineChartIllustration } from '../welcome-modal/illustrations/line-chart';
+import { PageContent } from '../welcome-modal/page-content';
+import './style.scss';
+
+const page = {
+	image: <LineChartIllustration />,
+	content: (
+		<PageContent
+			title={ __(
+				'Welcome to your new store management experience.',
+				'woocommerce-admin'
+			) }
+			body={ interpolateComponents( {
+				mixedString: __(
+					"We've designed your navigation and home screen to help you focus on the things that matter most in managing your online store. {{link}}Learn more{{/link}} about these changes – or explore on your own.",
+					'woocommerce-admin'
+				),
+				components: {
+					link: (
+						<Link
+							href="https://wordpress.com/support/store/"
+							type="external"
+							target="_blank"
+						/>
+					),
+				},
+			} ) }
+		/>
+	),
+};
+
+export default function WelcomeFromCalypsoModal( { onClose } ) {
+	const [ guideIsOpen, setGuideIsOpen ] = useState( true );
+
+	useEffect( () => {
+		recordEvent( 'welcome_from_calypso_modal_open' );
+	}, [] );
+
+	if ( ! guideIsOpen ) {
+		return null;
+	}
+
+	const guideClassNames = classNames(
+		'woocommerce__welcome-modal',
+		'woocommerce__welcome-from-calypso-modal'
+	);
+
+	return (
+		<Guide
+			onFinish={ () => {
+				if ( onClose ) {
+					onClose();
+				}
+
+				setGuideIsOpen( false );
+				recordEvent( 'welcome_from_calypso_modal_close' );
+			} }
+			className={ guideClassNames }
+			finishButtonText={ __( "Let's go", 'woocommerce-admin' ) }
+			pages={ [ page ] }
+		/>
+	);
+}

plugins/woocommerce-admin/readme.txt

@@ -84,6 +84,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Fix: Updating (non wordpress user) customer with order data
 - Dev: Add documentation for filter `woocommerce_admin_pages_list` and `wc_admin_register_page` #5844
 - Dev: Revert work done in #4857 for automated shipping after OBW is completed #5971
+- Add: Welcome modal when coming from Calypso #6004
 - Enhancement: Add an a/b experiment for installing free business features #5786
 - Dev: Add `onChangeCallback` feature to the wc-admin <Form> component #5786 
 

plugins/woocommerce-admin/src/Features/Onboarding.php

@@ -718,6 +718,7 @@ class Onboarding {
 
 		$options[] = 'wc_connect_options';
 		$options[] = 'woocommerce_task_list_welcome_modal_dismissed';
+		$options[] = 'woocommerce_welcome_from_calypso_modal_dismissed';
 		$options[] = 'woocommerce_task_list_prompt_shown';
 		$options[] = 'woocommerce_task_list_tracked_completed_tasks';
 		$options[] = 'woocommerce_task_list_dismissed_tasks';