Update mobile app onboarding modal to focus on app installation

plugins/woocommerce-admin/client/homescreen/mobile-app-modal/components/MobileAppInstallationInfo.tsx

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { QRCodeSVG } from 'qrcode.react';
+
+export const MobileAppInstallationInfo = () => {
+	return (
+		<div>
+			<QRCodeSVG
+				value={
+					'https://woocommerce.com/mobile/?utm_source=wc_onboarding_mobile_task'
+				}
+				size={ 140 }
+			/>
+			<p>
+				{ __(
+					'Scan the code above to download the WooCommerce mobile app, or visit woocommerce.com/mobile from your mobile device.',
+					'woocommerce'
+				) }
+			</p>
+		</div>
+	);
+};

plugins/woocommerce-admin/client/homescreen/mobile-app-modal/index.tsx

@@ -25,11 +25,10 @@ import {
 } from './components';
 import {
 	EmailSentPage,
-	JetpackInstallStepperPage,
+	MobileAppInstallPage,
 	JetpackAlreadyInstalledPage,
 } from './pages';
 import './style.scss';
-import { WrongUserConnectedPage } from './pages/WrongUserConnectedPage';
 import { SETUP_TASK_HELP_ITEMS_FILTER } from '../../activity-panel/panels/help';
 
 export const MobileAppModal = () => {
@@ -84,25 +83,6 @@ export const MobileAppModal = () => {
 					} }
 				/>
 			);
-		} else if ( state === JetpackPluginStates.NOT_OWNER_OF_CONNECTION ) {
-			setPageContent( <WrongUserConnectedPage /> );
-		} else if (
-			state === JetpackPluginStates.NOT_INSTALLED ||
-			state === JetpackPluginStates.NOT_ACTIVATED ||
-			state === JetpackPluginStates.USERLESS_CONNECTION ||
-			( state === JetpackPluginStates.FULL_CONNECTION &&
-				isReturningFromWordpressConnection )
-		) {
-			setPageContent(
-				<JetpackInstallStepperPage
-					isReturningFromWordpressConnection={
-						isReturningFromWordpressConnection
-					}
-					isRetryingMagicLinkSend={ isRetryingMagicLinkSend }
-					sendMagicLinkHandler={ sendMagicLink }
-					sendMagicLinkStatus={ magicLinkRequestStatus }
-				/>
-			);
 		} else if (
 			state === JetpackPluginStates.FULL_CONNECTION &&
 			jetpackConnectionData?.currentUser?.wpcomUser?.email &&
@@ -120,6 +100,9 @@ export const MobileAppModal = () => {
 					sendMagicLinkHandler={ sendMagicLink }
 				/>
 			);
+		} else {
+			// Shows the installation page by default.
+			setPageContent( <MobileAppInstallPage /> );
 		}
 	}, [
 		sendMagicLink,

plugins/woocommerce-admin/client/homescreen/mobile-app-modal/pages/JetpackAlreadyInstalledPage.tsx

@@ -13,6 +13,7 @@ import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { ModalContentLayoutWithTitle } from '../layouts/ModalContentLayoutWithTitle';
 import { SendMagicLinkButton } from '../components';
 import { SendMagicLinkStates } from '../components/useSendMagicLink';
+import { MobileAppInstallationInfo } from '../components/MobileAppInstallationInfo';
 
 interface JetpackAlreadyInstalledPageProps {
 	wordpressAccountEmailAddress: string | undefined;
@@ -58,12 +59,13 @@ export const JetpackAlreadyInstalledPage: React.FC<
 	return (
 		<ModalContentLayoutWithTitle>
 			<>
+				<MobileAppInstallationInfo />
 				<div className="modal-subheader jetpack-already-installed">
 					<h3>
 						{ sprintf(
 							/* translators: %s: user's WordPress.com account email address */
 							__(
-								'We’ll send a magic link to %s. Open it on your smartphone or tablet to sign into your store instantly.',
+								'After the app is installed, click below to send a magic link to %s. Open it on your smartphone or tablet to sign into your store instantly.',
 								'woocommerce'
 							),
 							wordpressAccountEmailAddress

plugins/woocommerce-admin/client/homescreen/mobile-app-modal/pages/MobileAppInstallPage.tsx

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import { ModalContentLayoutWithTitle } from '../layouts/ModalContentLayoutWithTitle';
+import { MobileAppInstallationInfo } from '../components/MobileAppInstallationInfo';
+
+export const MobileAppInstallPage = () => {
+	return (
+		<ModalContentLayoutWithTitle>
+			<MobileAppInstallationInfo />
+		</ModalContentLayoutWithTitle>
+	);
+};

plugins/woocommerce-admin/client/homescreen/mobile-app-modal/pages/index.tsx

@@ -1,3 +1,4 @@
 export { EmailSentPage } from './EmailSentPage';
 export { JetpackAlreadyInstalledPage } from './JetpackAlreadyInstalledPage';
 export { JetpackInstallStepperPage } from './JetpackInstallStepperPage';
+export { MobileAppInstallPage } from './MobileAppInstallPage';

plugins/woocommerce-admin/client/homescreen/mobile-app-modal/style.scss

@@ -13,7 +13,8 @@
 .components-guide.woocommerce__mobile-app-welcome-modal {
 	max-width: 964px;
 	min-width: 534px;
-	height: 600px;
+	// Overrides the default modal max-height.
+	max-height: 663px;
 
 	.components-modal__header {
 		height: 0;
@@ -51,17 +52,14 @@
 					.modal-layout-body {
 						flex-grow: 1;
 						.modal-subheader {
-							margin-top: -16px;
+							margin-top: 16px;
 							margin-bottom: 24px;
 							h3 {
 								font-weight: 400;
 								color: #757575;
 								line-height: 1.6rem;
 							}
 						}
-						.modal-subheader.jetpack-already-installed {
-							margin-bottom: 48px; // there's a bit of space so space it out
-						}
 					}
 
 					.modal-layout-footer {
@@ -165,6 +163,7 @@ button.components-button.send-magic-link-button {
 	background: #007cba;
 	color: #fff;
 	position: relative;
+	margin-bottom: 1em;
 	:hover {
 		// the hover state makes the text invisible so we need to override it
 		color: #fff;

plugins/woocommerce-admin/package.json

@@ -94,6 +94,7 @@
 		"history": "^5.3.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
+		"qrcode.react": "^3.1.0",
 		"qs": "^6.10.3",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",

plugins/woocommerce/changelog/update-mobile-onboarding-task

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Updated the Woo mobile onboarding modal to focus on app installation.