diff --git a/src/OnboardingSPA/components/Button/ButtonWhite/index.js b/src/OnboardingSPA/components/Button/ButtonWhite/index.js index 5fc778b57..6d3242368 100644 --- a/src/OnboardingSPA/components/Button/ButtonWhite/index.js +++ b/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 ( { ) } onClick={ typeof onClick === 'function' && onClick } > - { text } + { text } + { icon && ( + + ) } ); }; 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 ( + { text } + { 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/steps/GetStarted/Welcome/contents.js b/src/OnboardingSPA/steps/GetStarted/Welcome/contents.js index 3dd790905..c87e8b5fc 100644 --- a/src/OnboardingSPA/steps/GetStarted/Welcome/contents.js +++ b/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', diff --git a/src/OnboardingSPA/steps/GetStarted/Welcome/index.js b/src/OnboardingSPA/steps/GetStarted/Welcome/index.js index c7a0bbeda..2bf5620ec 100644 --- a/src/OnboardingSPA/steps/GetStarted/Welcome/index.js +++ b/src/OnboardingSPA/steps/GetStarted/Welcome/index.js @@ -2,6 +2,7 @@ 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'; @@ -14,13 +15,15 @@ import { 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 ] @@ -69,7 +72,23 @@ const StepWelcome = () => { > { ( tab ) => { tab.content } } - + + { migrationUrl && ( + + window.open( migrationUrl, '_blank' ) + } + /> + ) } + + diff --git a/src/OnboardingSPA/steps/GetStarted/Welcome/stylesheet.scss b/src/OnboardingSPA/steps/GetStarted/Welcome/stylesheet.scss index fc5907c62..0f46ba6d2 100644 --- a/src/OnboardingSPA/steps/GetStarted/Welcome/stylesheet.scss +++ b/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; } diff --git a/src/OnboardingSPA/steps/WhatNext/stylesheet.scss b/src/OnboardingSPA/steps/WhatNext/stylesheet.scss index 692c4d678..a47696b52 100644 --- a/src/OnboardingSPA/steps/WhatNext/stylesheet.scss +++ b/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; } diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index 00b405876..a024b3cc9 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/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 *