diff --git a/src/OnboardingSPA/components/Button/NavCardButton/index.js b/src/OnboardingSPA/components/Button/NavCardButton/index.js index 5aff0e5fd..3872897af 100644 --- a/src/OnboardingSPA/components/Button/NavCardButton/index.js +++ b/src/OnboardingSPA/components/Button/NavCardButton/index.js @@ -3,35 +3,62 @@ import { useSelect } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../../store'; import Button from '../../Button'; +import { setFlow } from '../../../utils/api/flow'; +import { wpAdminPage, bluehostDashboardPage } from '../../../../constants'; + /** * Navigation Button Component on Card * - * @returns + * @return */ -const NavCardButton = ({ text, disabled }) => { +const NavCardButton = ( { text, disabled } ) => { const navigate = useNavigate(); const location = useLocation(); - const { nextStep } = useSelect( - (select) => { + const { nextStep, currentData } = useSelect( + ( select ) => { return { - nextStep: select(nfdOnboardingStore).getNextStep(), + nextStep: select( nfdOnboardingStore ).getNextStep(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), }; }, - [location.path] + [ location.path ] ); + const isLastStep = null === nextStep || false === nextStep; + + async function saveDataAndExit() { + if ( currentData ) { + currentData.isComplete = new Date().getTime(); + setFlow( currentData ); + } + //Redirect to Admin Page for normal customers + // and Bluehost Dashboard for ecommerce customers + const exitLink = exitToWordpressForEcommerce() + ? bluehostDashboardPage + : wpAdminPage; + window.location.replace( exitLink ); + } + + const exitToWordpressForEcommerce = () => { + if ( window.nfdOnboarding.currentFlow === 'ecommerce' ) { + return true; + } + return false; + }; + const handleBtnClick = () => { - navigate(nextStep.path); + return isLastStep ? saveDataAndExit() : navigate( nextStep.path ); }; return ( ); }; /** * Next step naigation button + * * @param {*} param0 - * @returns + * @return */ -const Next = ({ path }) => { +const Next = ( { path } ) => { /* [TODO]: some sense of isStepComplete to enable/disable */ const navigate = useNavigate(); - const navigateNext = () => navigate(path, { state: { origin: 'header' } }); + const navigateNext = () => + navigate( path, { state: { origin: 'header' } } ); return ( ); }; -async function syncSocialSettingsFinish( currentData ) { - const initialData = await getSettings(); - const result = await setSettings(currentData?.data?.socialData); - if (result?.error != null) { - console.error('Unable to Save Social Data!'); - return initialData?.body; - } - return result?.body; -} - -async function saveData(path, currentData) { - - if (currentData) { - currentData.isComplete = new Date().getTime(); - // If Social Data is changed then sync it - if (path?.includes('basic-info')) { - const socialData = await syncSocialSettingsFinish(currentData); - - // If Social Data is changed then Sync that also to the store - if (socialData && currentData?.data) - currentData.data.socialData = socialData; - } - setFlow(currentData); +async function saveDataAndExit( currentData ) { + if ( currentData ) { + currentData.isComplete = new Date().getTime(); + setFlow( currentData ); } - //Redirect to Admin Page for normal customers + //Redirect to Admin Page for normal customers // and Bluehost Dashboard for ecommerce customers - const exitLink = exitToWordpressForEcommerce() ? bluehostDashboardPage : wpAdminPage; - window.location.replace(exitLink); + const exitLink = exitToWordpressForEcommerce() + ? bluehostDashboardPage + : wpAdminPage; + window.location.replace( exitLink ); } /** * Finish step navigation button. - * @returns + * + * @param root0 + * @param root0.currentData + * @param root0.saveDataAndExit + * @return */ -const Finish = ({ path, currentData, saveData }) => ( +const Finish = ( { currentData, saveDataAndExit } ) => ( ); /** * Step buttons presented in Header. - * @returns + * + * @return */ const StepNavigation = () => { const location = useLocation(); const { previousStep, nextStep, currentData } = useSelect( - (select) => { + ( select ) => { return { - nextStep: select(nfdOnboardingStore).getNextStep(), - previousStep: select(nfdOnboardingStore).getPreviousStep(), - currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), + nextStep: select( nfdOnboardingStore ).getNextStep(), + previousStep: select( nfdOnboardingStore ).getPreviousStep(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), }; }, - [location.pathname] + [ location.pathname ] ); const isFirstStep = null === previousStep || false === previousStep; const isLastStep = null === nextStep || false === nextStep; return (
- - {isFirstStep ? null : } - {isLastStep ? : } + + { isFirstStep || isLastStep ? null : ( + + ) } + { isLastStep ? ( + + ) : ( + + ) }
); }; /* - * check if this is the last step + * check if this is the last step */ const exitToWordpressForEcommerce = () => { - if( window.nfdOnboarding.currentFlow == 'ecommerce' ) { + if ( window.nfdOnboarding.currentFlow === 'ecommerce' ) { return true; } return false; -} +}; export default StepNavigation; diff --git a/src/OnboardingSPA/components/Tab/index.js b/src/OnboardingSPA/components/Tab/index.js index d57e8bd18..6b4bfba33 100644 --- a/src/OnboardingSPA/components/Tab/index.js +++ b/src/OnboardingSPA/components/Tab/index.js @@ -7,11 +7,13 @@ const Tab = ({ title, text, imgType, className }) => { return (
-
+

{title}

{text}
-
+
+
+
); diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss index bb8a0a71d..ec13d6486 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss @@ -70,47 +70,57 @@ display: flex; flex-direction: row; align-items: stretch; - justify-content: space-around; - + justify-content: space-between; } -.content-text{ +.tab-text{ padding-right: 10px; font-size: clamp(0.88rem, 0.45rem + 0.76vw, 1.13rem); line-height: 1.6; - width: 390px; } -.content-img{ - background-image: var(--get-started-content-img); +.tab-img { + background-color: var(--nfd-onboarding-tertiary); + overflow: hidden; +} + +.tab-img-base { background-size: contain; background-repeat: no-repeat; - height: 200px; - width: 350px; + height: 228px; + animation-duration: 360ms; + width: clamp(180px, 50vw, 400px); + animation-timing-function: ease-out; + @media (prefers-reduced-motion) { + animation: none !important; + translation: none !important; + } +} + +.content-img{ + @extend .tab-img-base; + background-image: var(--get-started-content-img); + animation-name: fadeInRight; } .features-img{ + @extend .tab-img-base; background-image: var(--get-started-features-img); - background-size: contain; - background-repeat: no-repeat; - height: 200px; - width: 350px; + animation-name: fadeInUp; } .design-img{ + @extend .tab-img-base; background-image: var(--get-started-design-img); - background-size: contain; - background-repeat: no-repeat; - height: 200px; - width: 350px; + animation-name: fadeInLeft; } .welcome-card { display: flex; flex-direction: column; align-items: center; - justify-content: space-evenly; - height: 100%; + justify-content: space-around; + height: clamp(560px, 59vh, 800px); width: 100%; padding-bottom: 10px; } @@ -130,6 +140,5 @@ .content-img, .design-img, .features-img { max-height: 100px; - max-width: 180px; } } diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/index.js b/src/OnboardingSPA/pages/Steps/WhatNext/index.js index 8d4a54cc6..411bd0d35 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/index.js +++ b/src/OnboardingSPA/pages/Steps/WhatNext/index.js @@ -1,8 +1,17 @@ import CommonLayout from '../../../components/Layouts/Common'; -import StepOverview from '../../../components/StepOverview'; import { store as nfdOnboardingStore } from '../../../store'; import { useDispatch } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; +import NewfoldLargeCard from '../../../components/NewfoldLargeCard'; +import { __ } from '@wordpress/i18n'; +import {translations} from '../../../utils/locales/translations'; + +import CardHeader from '../../../components/CardHeader'; +import NavCardButton from '../../../components/Button/NavCardButton'; + +import Tab from '../../../components/Tab'; +import tabContent from './tabContent.json'; +import TabPanelHover from '../../../components/TabPanelHover'; import { SIDEBAR_LEARN_MORE } from '../../../../constants'; const StepWhatNext = () => { @@ -17,7 +26,33 @@ const StepWhatNext = () => { return ( - + +
+ + + { + return { + name: __( tab.name , 'wp-module-onboarding'), + title: __( tab.title , 'wp-module-onboarding'), + content: + }; + } )} + > + {( tab ) =>
{tab.content}
} + + + +
+ + ); }; diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss index d21a4d5a1..68bd5ac2b 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss @@ -1 +1,146 @@ @import "./Sidebar/LearnMore/stylesheet"; +.nfd-onboarding-overview { + width: 100%; + max-width: 960px; + background-color: var(--nfd-onboarding-light); + padding: 20px; + &__header { + display: flex; + align-items: center; + column-gap: 1rem; + &-icon { + display: flex; + place-items: center; + svg { + fill: var(--nfd-onboarding-primary); + } + } + &-heading { + margin: 0 0 6px 0; + color: var(--nfd-onboarding-dark); + } + &-subheading { + color: var(--nfd-onboarding-dark); + } + } + + &__tab-panel { + width: 90%; + padding-bottom: 40px; + color: var(--nfd-onboarding-dark); + } +} + +.nfd-step-card-subheading { + display: flex; + justify-content: space-around; +} + +.components-tab-panel__tabs { + justify-content: space-around; + @media screen and ( max-width: 480px ) { + width: 100%; + } +} + +.components-tab-panel__tabs > .components-button:focus:not(:disabled), +.components-tab-panel__tabs > .components-button.is-pressed:focus:not(:disabled) { + box-shadow: inset 0 0 -($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color); +} + +.components-tab-panel__tabs-item { + justify-content: center; + border-bottom: 1px solid #CCCCCC; + width: 100%; + font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem); + line-height: 1.5; + + &.is-active { + color: var(--wp-admin-theme-color); + box-shadow: inset 0 0 -($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color); + } + + &.is-not-active { + box-shadow: none !important; + } +} + +.tab-data{ + width: 100%; + padding-top: 40px; + display: flex; + flex-direction: row; + align-items: stretch; + justify-content: space-between; + +} + +.content-text{ + padding-right: 10px; + font-size: clamp(0.88rem, 0.45rem + 0.76vw, 1.13rem); + line-height: 1.6; +} + +.content-image { + background-color: var(--nfd-onboarding-tertiary); + overflow: hidden; +} + +.whatsnext-image { + background-size: contain; + background-repeat: no-repeat; + height: 228px; + animation-duration: 360ms; + width: clamp(180px, 50vw, 400px); + animation-timing-function: ease-out; + @media (prefers-reduced-motion) { + animation: none !important; + transition: none !important; + } +} + +.wpadmin-img { + @extend .whatsnext-image; + background-image: var(--what-next-wp-admin-img); + animation-name: fadeInRight; +} + +.help-img { + @extend .whatsnext-image; + background-image: var(--what-next-help-img); + animation-name: fadeInUp; +} + +.bluesky-img { + @extend .whatsnext-image; + background-image: var(--what-next-bluesky-img); + animation-name: fadeInLeft; +} + +.whatnext-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + height: clamp(600px, 59vh, 800px) !important; + width: 100%; + padding-bottom: 10px; +} + + +@media screen and ( max-width: #{ ($break-medium)} ) { + .tab-data { + flex-direction: column-reverse; + align-items: center; + } + + .content-text { + text-align: center; + width: 100%; + min-height: 10px; + } + + .wpadmin-img, .help-img, .bluesky-img { + max-height: 100px; + } +} diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json b/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json new file mode 100644 index 000000000..44f6d3a86 --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json @@ -0,0 +1,25 @@ +{ + "tabs": [ + { + "name": "tab1", + "title": "WHATS NEXT", + "subtitle": "Add content, organize your menu and launch.", + "text": "✅ Theme created, features added and Coming Soon mode activated. Thank you for building your site with Bluehost, we're always here to help!", + "imgType": "wpadmin-img" + }, + { + "name": "tab2", + "title": "HELP & RESOURCES", + "subtitle": "Next step or next level, we're your partner.", + "text": "WordPress make it easy to grow your %s. Send a newsletter, broadcast a podcast, create courses and trainings. Dream it, build it.", + "imgType": "help-img" + }, + { + "name": "tab3", + "title": "HIRE OUR EXPERTS", + "subtitle": "Make our great people your people.", + "text": "Pick your %s's unique design now and refine by customing your block templates, colors and fonts in the WordPress Site Editor.", + "imgType": "bluesky-img" + } + ] +} diff --git a/src/OnboardingSPA/static/images/bluesky.png b/src/OnboardingSPA/static/images/bluesky.png new file mode 100644 index 000000000..32859b162 Binary files /dev/null and b/src/OnboardingSPA/static/images/bluesky.png differ diff --git a/src/OnboardingSPA/static/images/help.png b/src/OnboardingSPA/static/images/help.png new file mode 100644 index 000000000..76a118ff9 Binary files /dev/null and b/src/OnboardingSPA/static/images/help.png differ diff --git a/src/OnboardingSPA/static/images/wp-admin.png b/src/OnboardingSPA/static/images/wp-admin.png new file mode 100644 index 000000000..a596631ef Binary files /dev/null and b/src/OnboardingSPA/static/images/wp-admin.png differ diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss index 0e02f9160..0057b5b62 100644 --- a/src/OnboardingSPA/styles/_icons.scss +++ b/src/OnboardingSPA/styles/_icons.scss @@ -27,6 +27,10 @@ body { --get-started-content-img: url("../static/images/content.png"); --get-started-design-img: url("../static/images/design.png"); --get-started-features-img: url("../static/images/features.png"); + --what-next-bluesky-img: url("../static/images/bluesky.png"); + --what-next-wp-admin-img: url("../static/images/wp-admin.png"); + --what-next-help-img: url("../static/images/help.png"); + --chevron-left-icon: url("../static/icons/chevron-left.svg"); --chevron-right-icon: url("../static/icons/chevron-right.svg"); diff --git a/src/OnboardingSPA/styles/_utilities.scss b/src/OnboardingSPA/styles/_utilities.scss index b628098e7..2a88fb833 100644 --- a/src/OnboardingSPA/styles/_utilities.scss +++ b/src/OnboardingSPA/styles/_utilities.scss @@ -9,6 +9,39 @@ } } +@keyframes fadeInRight { + from { + opacity: 0; + transform: translate3d(33%,0,0); + } + to { + opacity: 1; + transform: translate3d(0,0,0); + } +} + +@keyframes fadeInLeft { + from { + opacity: 0; + transform: translate3d(-33%, 0, 0); + } + to { + opacity: 1; + transform: translate3d(0,0,0) + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translate3d(0, 33%, 0); + } + to { + opacity: 1; + transform: translate3d(0,0,0) + } +} + @keyframes shine { 0% {