Add Migrate Button to Start Setup

src/OnboardingSPA/components/Button/ButtonWhite/index.js

@@ -1,7 +1,8 @@
 import { Button } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
 import classNames from 'classnames';
 
-const ButtonWhite = ( { className, text, onClick = false } ) => {
+const ButtonWhite = ( { className, text, onClick, icon } ) => {
 	return (
 		<Button
 			className={ classNames(
@@ -10,7 +11,10 @@ const ButtonWhite = ( { className, text, onClick = false } ) => {
 			) }
 			onClick={ typeof onClick === 'function' && onClick }
 		>
-			{ text }
+			<span className={ `${ className }__text` }>{ text }</span>
+			{ icon && (
+				<Icon className={ `${ className }__icon` } icon={ icon } />
+			) }
 		</Button>
 	);
 };

src/OnboardingSPA/components/Button/NavCardButton/index.js

@@ -11,14 +11,16 @@ import {
 } from '../../../utils/analytics/hiive';
 import { ACTION_ONBOARDING_COMPLETE } from '../../../utils/analytics/hiive/constants';
 import { activateInitialPlugins } from '../../../utils/api/plugins';
+import classNames from 'classnames';
+import { Icon } from '@wordpress/icons';
 
 /**
  * Navigation Button Component on Card
  *
  * @return
  */
 
-const NavCardButton = ( { text, disabled } ) => {
+const NavCardButton = ( { text, disabled, className, icon } ) => {
 	const navigate = useNavigate();
 
 	const { nextStep, currentData } = useSelect( ( select ) => {
@@ -50,8 +52,18 @@ const NavCardButton = ( { text, disabled } ) => {
 
 	return (
 		<Button
-			className="nfd-nav-card-button"
-			text={ text }
+			className={ classNames( 'nfd-nav-card-button', className ) }
+			text={
+				<>
+					<span className={ `${ className }__text` }>{ text }</span>
+					{ icon && (
+						<Icon
+							className={ `${ className }__icon` }
+							icon={ icon }
+						/>
+					) }
+				</>
+			}
 			handleClick={ handleBtnClick }
 			disabled={ disabled }
 		/>

src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss

@@ -1,4 +1,7 @@
 .nfd-nav-card-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	color: var(--nfd-onboarding-white);
 	background-color: var(--wp-admin-theme-color-darker-10);
 	padding: 16px;
@@ -8,4 +11,8 @@
 	border-radius: 4px;
 	border: none;
 	outline: 1px solid transparent;
+
+	&__icon {
+		fill: var(--nfd-onboarding-white);
+	}
 }

src/OnboardingSPA/steps/GetStarted/Welcome/contents.js

@@ -14,7 +14,11 @@ const getContents = ( brandName ) => {
 			__( 'with WordPress and %s.', 'wp-module-onboarding' ),
 			brandName
 		),
-		buttonText: __( 'Start Setup', 'wp-module-onboarding' ),
+		migrateButtonText: __(
+			'Migrate a WordPress Site',
+			'wp-module-onboarding'
+		),
+		startButtonText: __( 'Start Setup', 'wp-module-onboarding' ),
 		tabs: [
 			{
 				name: 'tab1',

src/OnboardingSPA/steps/GetStarted/Welcome/index.js

@@ -2,6 +2,7 @@
 import { useLocation } from 'react-router-dom';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
+import { chevronRight, external } from '@wordpress/icons';
 
 import CommonLayout from '../../../components/Layouts/Common';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
@@ -14,16 +15,18 @@
 	SIDEBAR_LEARN_MORE,
 } from '../../../../constants';
 import getContents from './contents';
+import ButtonWhite from '../../../components/Button/ButtonWhite';
 
 const StepWelcome = () => {
 	const location = useLocation();
-	const { brandName } = useSelect(
+	const { brandName, migrationUrl } = useSelect(
 		( select ) => {
 			return {
 				brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
+				migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(),
 			};
 		},
 		[ location.pathname ]
 	);
 	const {
 		setDrawerActiveView,
@@ -37,7 +40,7 @@
 		setIsHeaderNavigationEnabled( true );
 		setIsDrawerSuppressed( true );
 		setDrawerActiveView( VIEW_NAV_GET_STARTED );
 	}, [] );
 
 	const content = getContents( brandName );
 
@@ -69,7 +72,23 @@
 					>
 						{ ( tab ) => <div>{ tab.content }</div> }
 					</TabPanelHover>
-					<NavCardButton text={ content.buttonText }></NavCardButton>
+					<div className="nfd-onboarding-overview__buttons">
+						{ migrationUrl && (
+							<ButtonWhite
+								className="nfd-onboarding-overview__buttons--white"
+								text={ content.migrateButtonText }
+								icon={ external }
+								onClick={ () =>
+									window.open( migrationUrl, '_blank' )
+								}
+							/>
+						) }
+						<NavCardButton
+							className="nfd-onboarding-overview__buttons--background"
+							text={ content.startButtonText }
+							icon={ chevronRight }
+						></NavCardButton>
+					</div>
 				</div>
 			</NewfoldLargeCard>
 		</CommonLayout>

src/OnboardingSPA/steps/GetStarted/Welcome/stylesheet.scss

@@ -33,9 +33,61 @@
 		padding-bottom: 40px;
 		color: var(--nfd-onboarding-contrast);
 	}
+
+	&__buttons {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+
+		@media (max-width: #{ ($break-xlarge) }) {
+			flex-direction: column-reverse;
+		}
+
+		&--background,
+		&--white {
+			height: 76px;
+			margin: 0 20px;
+			padding: 0;
+			width: 100%;
+			font-weight: 500;
+			border-radius: 0%;
+			font-size: clamp(1rem, 0.9091rem + 0.4545vw, 2rem);
+
+			@media (max-width: #{ ($break-xlarge) }) {
+				margin: 10px 0;
+				width: 100%;
+			}
+
+			&__text {
+				font-weight: 700;
+			}
+		}
+
+		&--background {
+
+			&__icon {
+				fill: var(--nfd-onboarding-white);
+				height: auto;
+			}
+		}
+
+		&--white {
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+
+			&__icon {
+				margin-left: 15px;
+			}
+		}
+	}
 }
 
 .nfd-step-card-subheading {
+	margin-bottom: 30px;
 	display: flex;
 	justify-content: space-around;
 }
@@ -120,7 +172,6 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: space-around;
-	height: clamp(560px, 59vh, 800px);
 	width: 100%;
 	padding-bottom: 10px;
 }

src/OnboardingSPA/steps/WhatNext/stylesheet.scss

@@ -38,6 +38,7 @@
 }
 
 .nfd-step-card-subheading {
+	margin-bottom: 30px;
 	display: flex;
 	justify-content: space-around;
 }
@@ -123,7 +124,6 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: space-around;
-	height: clamp(600px, 59vh, 800px) !important;
 	width: 100%;
 	padding-bottom: 10px;
 }

src/OnboardingSPA/store/selectors.js

@@ -316,6 +316,20 @@ export function getTechSupportUrl( state ) {
 	return techSupportUrl;
 }
 
+/**
+ * Gets the link to the migration service.
+ *
+ * @param {*} state
+ * @return {string} migrationUrl
+ */
+export function getMigrationUrl( state ) {
+	const migrationInfo = state.runtime.currentBrand.migrationInfo;
+	const migrationUrl =
+		addQueryArgs( migrationInfo?.defaultLink, migrationInfo?.queryParams ) +
+		( migrationInfo?.fragment || '' );
+	return migrationUrl;
+}
+
 /**
  * Gets the Plugin Install Hash for security
  *