From 385e12c4524213192538086765bcd215b1d48bea Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Tue, 26 Sep 2023 14:48:27 +0530
Subject: [PATCH 1/4] Add Migrate Button to Start Setup

---
 includes/Data/Brands.php                      | 11 +++-
 includes/Data/Config.php                      | 40 +++++++++++---
 .../components/Button/ButtonWhite/index.js    | 18 ++++---
 .../components/Button/NavCardButton/index.js  | 18 +++++--
 .../Button/NavCardButton/stylesheet.scss      |  7 +++
 .../Steps/GetStarted/Welcome/contents.js      |  6 ++-
 .../pages/Steps/GetStarted/Welcome/index.js   | 25 +++++++--
 .../Steps/GetStarted/Welcome/stylesheet.scss  | 52 ++++++++++++++++++-
 .../pages/Steps/WhatNext/stylesheet.scss      |  2 +-
 src/OnboardingSPA/store/selectors.js          | 14 +++++
 10 files changed, 169 insertions(+), 24 deletions(-)

diff --git a/includes/Data/Brands.php b/includes/Data/Brands.php
index a8653657a..58a044f5c 100644
--- a/includes/Data/Brands.php
+++ b/includes/Data/Brands.php
@@ -94,6 +94,11 @@ public static function get_brands() {
 						'utm_medium' => 'brand-plugin',
 					),
 				),
+				'migrationInfo'               => array(
+					'defaultLink' => Config::is_jarvis() ?
+					'https://www.bluehost.com/my-account/hosting/details/sites/add/transfer'
+					: 'https://my.bluehost.com/cgi/services/migration',
+				),
 				'config'                      => array(
 					'enabled_flows' => array(
 						'ecommerce' => true,
@@ -154,6 +159,7 @@ public static function get_brands() {
 						'utm_medium' => 'brand-plugin',
 					),
 				),
+				'migrationInfo'               => array(),
 				'config'                      => array(
 					'enabled_flows' => array(
 						'ecommerce' => true,
@@ -212,6 +218,7 @@ public static function get_brands() {
 						'utm_medium' => '',
 					),
 				),
+				'migrationInfo'               => array(),
 				'config'                      => array(
 					'enabled_flows' => array(
 						'ecommerce' => false,
@@ -270,6 +277,7 @@ public static function get_brands() {
 						'utm_medium' => 'brand-plugin',
 					),
 				),
+				'migrationInfo'               => array(),
 				'config'                      => array(
 					'enabled_flows' => array(
 						'ecommerce' => true,
@@ -335,6 +343,7 @@ public static function get_brands() {
 						'utm_medium' => 'brand-plugin',
 					),
 				),
+				'migrationInfo'               => array(),
 				'config'                      => array(
 					'enabled_flows' => array(
 						'ecommerce' => true,
@@ -363,7 +372,7 @@ public static function set_current_brand( $container ) {
 		if ( ! defined( 'NFD_ONBOARDING_PLUGIN_BRAND' ) ) {
 			$brand = $container->plugin()->brand;
 			if ( empty( $brand ) ) {
-				$brand = 'wordpress';
+				$brand = 'WordPress';
 			}
 
 			if ( false !== strpos( $brand, 'hostgator' ) ) {
diff --git a/includes/Data/Config.php b/includes/Data/Config.php
index 840613be7..f3294dd7e 100644
--- a/includes/Data/Config.php
+++ b/includes/Data/Config.php
@@ -1,11 +1,17 @@
 <?php
 namespace NewfoldLabs\WP\Module\Onboarding\Data;
 
+use NewfoldLabs\WP\Module\Data\SiteCapabilities;
+
 /**
  * WordPress and Onboarding configuration data.
  */
 final class Config {
-	 // The values need to be a string, this can later be converted to raw values.
+	/**
+	 * The values need to be a string, this can later be converted to raw values.
+	 *
+	 * @var array
+	 */
 	protected static $wp_config_initialization_constants = array(
 		'AUTOSAVE_INTERVAL'    => '300',
 		'WP_POST_REVISIONS'    => '20',
@@ -14,12 +20,32 @@ final class Config {
 		'WP_CRON_LOCK_TIMEOUT' => '120',
 	);
 
-	 /**
-	  * Get the initial values for wp-config constants.
-	  *
-	  * @return array
-	  */
+	/**
+	 * Get the initial values for wp-config constants.
+	 *
+	 * @return array
+	 */
 	public static function get_wp_config_initialization_constants() {
-		 return self::$wp_config_initialization_constants;
+		return self::$wp_config_initialization_constants;
+	}
+
+	/**
+	 * Get a specific site capability.
+	 *
+	 * @param string $capability Name/slug of the capability.
+	 * @return boolean
+	 */
+	public static function get_site_capability( $capability ) {
+		$site_capabilities = new SiteCapabilities();
+		return $site_capabilities->get( $capability );
+	}
+
+	/**
+	 * Checks if the site is on Jarvis hosting.
+	 *
+	 * @return boolean
+	 */
+	public static function is_jarvis() {
+		return self::get_site_capability( 'isJarvis' );
 	}
 }
diff --git a/src/OnboardingSPA/components/Button/ButtonWhite/index.js b/src/OnboardingSPA/components/Button/ButtonWhite/index.js
index 4118b7505..6d3242368 100644
--- a/src/OnboardingSPA/components/Button/ButtonWhite/index.js
+++ b/src/OnboardingSPA/components/Button/ButtonWhite/index.js
@@ -1,16 +1,20 @@
 import { Button } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+import classNames from 'classnames';
 
-const ButtonWhite = ( {
-	className = 'nfd-onboarding-button--white',
-	text,
-	onClick = false,
-} ) => {
+const ButtonWhite = ( { className, text, onClick, icon } ) => {
 	return (
 		<Button
-			className={ className }
+			className={ classNames(
+				'nfd-onboarding-button--white',
+				className
+			) }
 			onClick={ typeof onClick === 'function' && onClick }
 		>
-			{ text }
+			<span className={ `${ className }__text` }>{ text }</span>
+			{ icon && (
+				<Icon className={ `${ className }__icon` } icon={ icon } />
+			) }
 		</Button>
 	);
 };
diff --git a/src/OnboardingSPA/components/Button/NavCardButton/index.js b/src/OnboardingSPA/components/Button/NavCardButton/index.js
index 0f48246a8..4571de218 100644
--- a/src/OnboardingSPA/components/Button/NavCardButton/index.js
+++ b/src/OnboardingSPA/components/Button/NavCardButton/index.js
@@ -11,6 +11,8 @@ 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
@@ -18,7 +20,7 @@ import { activateInitialPlugins } from '../../../utils/api/plugins';
  * @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 }
 		/>
diff --git a/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss b/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss
index 36b269d9b..6dd3b8fe4 100644
--- a/src/OnboardingSPA/components/Button/NavCardButton/stylesheet.scss
+++ b/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);
+	}
 }
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/contents.js b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/contents.js
index b7bf9afd8..302678251 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/contents.js
+++ b/src/OnboardingSPA/pages/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',
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js
index 06ebcea06..349b0059a 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js
@@ -2,11 +2,11 @@ import { store as nfdOnboardingStore } from '../../../../store';
 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';
 import CardHeader from '../../../../components/CardHeader';
-import NavCardButton from '../../../../components/Button/NavCardButton';
 import Tab from '../../../../components/Tab';
 import TabPanelHover from '../../../../components/TabPanelHover';
 import {
@@ -14,13 +14,16 @@ import {
 	SIDEBAR_LEARN_MORE,
 } from '../../../../../constants';
 import getContents from './contents';
+import ButtonWhite from '../../../../components/Button/ButtonWhite';
+import NavCardButton from '../../../../components/Button/NavCardButton';
 
 const StepWelcome = () => {
 	const location = useLocation();
-	const { brandName } = useSelect(
+	const { brandName, migrationUrl } = useSelect(
 		( select ) => {
 			return {
 				brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
+				migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(),
 			};
 		},
 		[ location.pathname ]
@@ -69,7 +72,23 @@ const StepWelcome = () => {
 					>
 						{ ( 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>
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
index fc5907c62..99f8b91a2 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
@@ -33,9 +33,60 @@
 		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: 0px;
+			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: bold;
+			}
+		}
+
+		&--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 +171,6 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: space-around;
-	height: clamp(560px, 59vh, 800px);
 	width: 100%;
 	padding-bottom: 10px;
 }
diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss
index 692c4d678..a47696b52 100644
--- a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss
+++ b/src/OnboardingSPA/pages/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;
 }
diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js
index 8c9752408..26c2cf5d0 100644
--- a/src/OnboardingSPA/store/selectors.js
+++ b/src/OnboardingSPA/store/selectors.js
@@ -335,6 +335,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
  *

From f46d62011e558dea02d70672e7fd9829cfd3e691 Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Tue, 26 Sep 2023 14:49:36 +0530
Subject: [PATCH 2/4] rever autofix for wordpress to WordPress

---
 includes/Data/Brands.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/Data/Brands.php b/includes/Data/Brands.php
index 58a044f5c..bd93a3dac 100644
--- a/includes/Data/Brands.php
+++ b/includes/Data/Brands.php
@@ -372,7 +372,7 @@ public static function set_current_brand( $container ) {
 		if ( ! defined( 'NFD_ONBOARDING_PLUGIN_BRAND' ) ) {
 			$brand = $container->plugin()->brand;
 			if ( empty( $brand ) ) {
-				$brand = 'WordPress';
+				$brand = 'wordpress';
 			}
 
 			if ( false !== strpos( $brand, 'hostgator' ) ) {

From d97b0750cb9b3faf56f33cf3c31a7bd087c040bd Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Tue, 26 Sep 2023 14:52:58 +0530
Subject: [PATCH 3/4] sass lint fix

---
 .../pages/Steps/GetStarted/Welcome/stylesheet.scss           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
index 99f8b91a2..0f46ba6d2 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
@@ -49,7 +49,7 @@
 		&--white {
 			height: 76px;
 			margin: 0 20px;
-			padding: 0px;
+			padding: 0;
 			width: 100%;
 			font-weight: 500;
 			border-radius: 0%;
@@ -61,11 +61,12 @@
 			}
 
 			&__text {
-					font-weight: bold;
+				font-weight: 700;
 			}
 		}
 
 		&--background {
+
 			&__icon {
 				fill: var(--nfd-onboarding-white);
 				height: auto;

From f0510776d5ae69ae062ab8ac2c1dd3091343f0dd Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Tue, 26 Sep 2023 17:04:25 +0530
Subject: [PATCH 4/4] Fix Imports

---
 src/OnboardingSPA/steps/GetStarted/Welcome/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/steps/GetStarted/Welcome/index.js b/src/OnboardingSPA/steps/GetStarted/Welcome/index.js
index 328885fb5..2bf5620ec 100644
--- a/src/OnboardingSPA/steps/GetStarted/Welcome/index.js
+++ b/src/OnboardingSPA/steps/GetStarted/Welcome/index.js
@@ -15,8 +15,7 @@ import {
 	SIDEBAR_LEARN_MORE,
 } from '../../../../constants';
 import getContents from './contents';
-import ButtonWhite from '../../../../components/Button/ButtonWhite';
-import NavCardButton from '../../../../components/Button/NavCardButton';
+import ButtonWhite from '../../../components/Button/ButtonWhite';
 
 const StepWelcome = () => {
 	const location = useLocation();