diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js index 65edb256a..145f392ea 100644 --- a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js +++ b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js @@ -5,7 +5,7 @@ import { Button } from '@wordpress/components'; import { Icon, chevronRight } from '@wordpress/icons'; import { store as nfdOnboardingStore } from '../../../store'; -const NextButtonSiteGen = ( { text, className } ) => { +const NextButtonSiteGen = ( { text, className, callback = null } ) => { const navigate = useNavigate(); const { nextStep } = useSelect( ( select ) => { return { @@ -19,6 +19,9 @@ const NextButtonSiteGen = ( { text, className } ) => { className ) } onClick={ () => { + if ( callback && typeof callback === 'function' ) { + callback(); + } if ( nextStep ) { navigate( nextStep.path ); } diff --git a/src/OnboardingSPA/components/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js index 6437b0547..6ac5c8fff 100644 --- a/src/OnboardingSPA/components/CardWithOptions/index.js +++ b/src/OnboardingSPA/components/CardWithOptions/index.js @@ -1,6 +1,6 @@ import { Icon, chevronRight } from '@wordpress/icons'; -const CardWithOptions = ( { title, options, skip, setSelection } ) => { +const CardWithOptions = ( { title, options, skip, callback } ) => { const buildOptions = () => { return options.map( ( data, idx ) => { return ( @@ -10,10 +10,14 @@ const CardWithOptions = ( { title, options, skip, setSelection } ) => { tabIndex={ 0 } className={ 'nfd-sg-card__data__option' } onClick={ () => { - setSelection( idx ); + if ( callback && typeof callback === 'function' ) { + callback( idx + 1 ); + } } } onKeyDown={ () => { - setSelection( idx ); + if ( callback && typeof callback === 'function' ) { + callback( idx + 1 ); + } } } >
@@ -48,10 +52,14 @@ const CardWithOptions = ( { title, options, skip, setSelection } ) => { tabIndex={ 0 } className={ 'nfd-sg-card__skip' } onClick={ () => { - setSelection( -1 ); + if ( callback && typeof callback === 'function' ) { + callback( -1 ); + } } } onKeyDown={ () => { - setSelection( -1 ); + if ( callback && typeof callback === 'function' ) { + callback( -1 ); + } } } > { skip } diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss index 1676d0f78..30b1d2ffd 100644 --- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss +++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss @@ -1,4 +1,4 @@ -$background-color: #1e2327; +$background-color: var(--nfd-onboarding-admin-bar-background); .nfd-sg-card { @@ -8,10 +8,10 @@ $background-color: #1e2327; border-radius: 12px; background-color: $background-color; width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem); - box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2); + box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-primary-rgb), $alpha: 0.05); &__title { - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); margin: 16px; line-height: 2; font-size: 18px; @@ -34,28 +34,28 @@ $background-color: #1e2327; transition: background-color 400ms ease-in-out; &:not(:last-child) { - border-bottom: 0.5px solid rgba(255, 255, 255, 0.3); + border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3); } &:hover { - background-color: #262c30; + background-color: var(--nfd-onboarding-hover); } &__left_top { - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); font-size: 16px; font-weight: 500; padding-bottom: 12px; } &__left_bottom { - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); font-size: 14px; font-weight: 300; } &__right { - fill: var(--nfd-onboarding-white); + fill: var(--nfd-onboarding-primary); transition: all 200ms ease-in-out; &:hover { @@ -70,10 +70,10 @@ $background-color: #1e2327; text-align: end; margin: 0 20px 6px 20px; transition: color 200ms ease-in-out; - color: rgba(var(--nfd-onboarding-white-rgb), 0.8); + color: rgba(var(--nfd-onboarding-primary-rgb), 0.8); &:hover { - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); } } } diff --git a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js index 2f0027111..db3390a10 100644 --- a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js +++ b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js @@ -34,7 +34,7 @@ const SiteGenHeader = () => { ); const currentStepIndex = findIndex( allSteps, { - path: currentStep.path, + path: currentStep?.path, } ); const progress = ( currentStepIndex / allSteps.length ) * 100; diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js index 21893434d..72a0c9a8b 100644 --- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js +++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js @@ -1,12 +1,22 @@ import getContents from './contents'; +import { useSelect } from '@wordpress/data'; +import { useNavigate } from 'react-router-dom'; import { useEffect, useState } from '@wordpress/element'; +import { store as nfdOnboardingStore } from '../../../store'; -const SiteGenLoader = () => { +const SiteGenLoader = ( { autoNavigate = false } ) => { let statusIdx = 0; const content = getContents(); + const navigate = useNavigate(); const [ percentage, setPercentage ] = useState( 0 ); const [ status, setStatus ] = useState( content.status[ statusIdx ].title ); + const { nextStep } = useSelect( ( select ) => { + return { + nextStep: select( nfdOnboardingStore ).getNextStep(), + }; + } ); + const checkStatus = async () => { // Make fake API Call to get the status. if ( percentage !== 100 ) setPercentage( ( t ) => t + 10 ); @@ -24,6 +34,14 @@ const SiteGenLoader = () => { }; }, [] ); + useEffect( () => { + if ( percentage === 100 ) { + if ( nextStep && autoNavigate ) { + navigate( nextStep.path ); + } + } + }, [ percentage ] ); + return (
{ content.title }
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss index 7f6adf9b4..fb1c725c0 100644 --- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss +++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss @@ -1,4 +1,4 @@ -$background-color: #1e2327; +$background-color: var(--nfd-onboarding-admin-bar-background); .nfd-sg-loader { @@ -8,14 +8,19 @@ $background-color: #1e2327; border-radius: 12px; background-color: $background-color; width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem); - box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2); + box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-black-rgb), $alpha: 0.05); + + @media (max-width: #{ ($break-small) }) { + margin: 20px; + max-width: 80vw; + } &__title { line-height: 2; font-size: 18px; text-align: center; letter-spacing: 1.5px; - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); } &__progress { @@ -59,7 +64,7 @@ $background-color: #1e2327; font-size: 14px; text-align: center; letter-spacing: 1.3px; - color: var(--nfd-onboarding-white); + color: var(--nfd-onboarding-primary); animation: fadeInFast 3s ease-out infinite; } } diff --git a/src/OnboardingSPA/components/TextInput/contents.js b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/contents.js similarity index 100% rename from src/OnboardingSPA/components/TextInput/contents.js rename to src/OnboardingSPA/components/TextInput/TextInputSiteBuild/contents.js diff --git a/src/OnboardingSPA/components/TextInput/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/index.js similarity index 91% rename from src/OnboardingSPA/components/TextInput/index.js rename to src/OnboardingSPA/components/TextInput/TextInputSiteBuild/index.js index 6859ff853..ad2ae1dea 100644 --- a/src/OnboardingSPA/components/TextInput/index.js +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/index.js @@ -1,7 +1,7 @@ import { useRef, useEffect, useState, memo } from '@wordpress/element'; import getContents from './contents'; -const TextInput = ( { +const TextInputSiteBuild = ( { title, hint, placeholder, @@ -58,5 +58,5 @@ const TextInput = ( { ); }; -const TextInputMemo = memo( TextInput ); -export default TextInputMemo; +const TextInputSiteBuildMemo = memo( TextInputSiteBuild ); +export default TextInputSiteBuildMemo; diff --git a/src/OnboardingSPA/components/TextInput/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/components/TextInput/stylesheet.scss rename to src/OnboardingSPA/components/TextInput/TextInputSiteBuild/stylesheet.scss diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss index d34785317..c13ecdb00 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss @@ -1,4 +1,3 @@ -$border: #d6d6d6; $letter-spacing: 0.5px; $selected-detail: #1de082; @@ -9,7 +8,7 @@ $selected-detail: #1de082; &-box { margin-bottom: 10px; - border-bottom: 2px solid $border; + border-bottom: 2px solid rgba(var(--nfd-onboarding-primary-rgb), 0.5); &__field { padding-top: 10px; @@ -29,7 +28,7 @@ $selected-detail: #1de082; &::placeholder { font-weight: 100; - color: $border; + color: rgba(var(--nfd-onboarding-primary-rgb), 0.8); } } diff --git a/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js b/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js index cd49b12e8..7c085a4b0 100644 --- a/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js +++ b/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js @@ -2,7 +2,7 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { useState, useEffect, useRef } from '@wordpress/element'; import getContents from './contents'; -import TextInput from '../../components/TextInput'; +import TextInputSiteBuild from '../../components/TextInput/TextInputSiteBuild'; import SkipButton from '../../components/SkipButton'; import MiniPreview from '../../components/MiniPreview'; import Animate from '../../components/Animate'; @@ -142,7 +142,7 @@ const BasicInfoForm = () => {
- { textValueSetter={ setSiteTitle } /> - { const { @@ -27,7 +27,17 @@ const SiteGenBuilding = () => { isCentered className="nfd-onboarding-step--site-gen__building" > - +
+
+
+
+
+
+
+
+
+ +
); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss new file mode 100644 index 000000000..325405a1c --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss @@ -0,0 +1,67 @@ +@property --angle { + inherits: true; + syntax: ""; + initial-value: 90deg; +} + +@keyframes borderRotate { + + 100% { + --angle: 360deg; + } +} + +.nfd-onboarding-step--site-gen__building { + margin: 20px; + padding: 20px; + position: relative; +} + +.site-gen__building { + + &_skimmer { + + &--main { + margin-bottom: 30px; + background: rgba(var(--nfd-onboarding-primary-rgb), 0.05); + box-shadow: 0 4px 30px rgba(var(--nfd-onboarding-secondary-rgb), 0.1); + animation: borderRotate 3500ms infinite forwards; + border: 0.25px solid rgba(var(--nfd-onboarding-secondary-rgb), 0.26); + border-image: conic-gradient(from var(--angle), rgba(var(--nfd-onboarding-secondary-rgb), 0.26) calc(var(--angle) + 0.5deg), rgba(var(--nfd-onboarding-shimmer-color), 0.5) calc(var(--angle) + 1deg)) 30; + } + + &--header { + height: 80px; + width: 90vw; + } + + &--body { + width: 90vw; + height: 500px; + } + + &--footer { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + + &_left { + width: 55vw; + height: 300px; + } + + &_right { + width: 33vw; + height: 300px; + } + } + } + + &_loader__overlay { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + } +} diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js index 6ff78f893..d04bb4628 100644 --- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js @@ -13,10 +13,13 @@ const SiteGenExperience = () => { const navigate = useNavigate(); const content = getContents(); // Index of the selection user makes + /* eslint-disable no-unused-vars */ const [ selection, setSelection ] = useState(); - const { nextStep } = useSelect( ( select ) => { + const { currentData, nextStep } = useSelect( ( select ) => { return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), nextStep: select( nfdOnboardingStore ).getNextStep(), }; } ); @@ -26,6 +29,7 @@ const SiteGenExperience = () => { setSidebarActiveView, setHeaderActiveView, setDrawerActiveView, + setCurrentOnboardingData, } = useDispatch( nfdOnboardingStore ); useEffect( () => { @@ -33,15 +37,25 @@ const SiteGenExperience = () => { setSidebarActiveView( false ); setHeaderActiveView( HEADER_SITEGEN ); setDrawerActiveView( false ); + + if ( currentData.sitegen.experience?.level ) { + setSelection( currentData.sitegen.experience.level ); + } } ); - useEffect( () => { - // undefined => not selected, 0-2 => Selections, -1 => Skip - // console.log( 'Selection changed to', selection ); - if ( selection !== undefined && nextStep ) { + const checkAndNavigate = ( idx ) => { + // 0 - Not Selected + // 1-2 Options + // -1 Skip + setSelection( idx ); + currentData.sitegen.experience.level = idx; + setCurrentOnboardingData( currentData ); + // console.log( selection ); + // console.log( 'Navigate to the next screen!' ); + if ( nextStep ) { navigate( nextStep.path ); } - }, [ selection ] ); + }; return ( @@ -51,7 +65,7 @@ const SiteGenExperience = () => { title={ content.heading } options={ content.options } skip={ content.skip } - setSelection={ setSelection } + callback={ checkAndNavigate } />
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index be45c518e..efc9db610 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -1,4 +1,4 @@ -import { useDispatch } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; import getContents from './contents'; @@ -14,11 +14,19 @@ const SiteGenSiteDetails = () => { const content = getContents(); const [ customerInput, setCustomerInput ] = useState(); + const { currentData } = useSelect( ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + } ); + const { setIsHeaderEnabled, setSidebarActiveView, setHeaderActiveView, setDrawerActiveView, + setCurrentOnboardingData, } = useDispatch( nfdOnboardingStore ); useEffect( () => { @@ -26,12 +34,17 @@ const SiteGenSiteDetails = () => { setSidebarActiveView( false ); setHeaderActiveView( HEADER_SITEGEN ); setDrawerActiveView( false ); - } ); - // const checkAndNavigate = () => { - // // console.log( customerInput ); - // // console.log( 'Navigate to the next screen!' ); - // }; + if ( currentData.sitegen.siteDetails?.prompt !== '' ) { + setCustomerInput( currentData.sitegen.siteDetails.prompt ); + } + }, [] ); + + const checkAndNavigate = () => { + currentData.sitegen.siteDetails.prompt = customerInput; + setCurrentOnboardingData( currentData ); + // console.log( 'Navigate to the next screen!' ); + }; return ( @@ -49,6 +62,7 @@ const SiteGenSiteDetails = () => {
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 3f3ff7a55..a7346d818 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -295,13 +295,31 @@ body { } } - .nfd-onboarding-sitegen-dark { - --nfd-onboarding-admin-bar-background: #1d2327; + .nfd-onboarding-sitegen-light { + --nfd-onboarding-primary: #000; + --nfd-onboarding-primary-rgb: 0, 0, 0; + --nfd-onboarding-hover: #c3c4c7; + --nfd-onboarding-secondary: #fff; + --nfd-onboarding-secondary-rgb: 255, 255, 255; --nfd-onboarding-admin-bar-color: #c3c4c7; + --nfd-onboarding-shimmer-color: 0, 0, 0; + --nfd-onboarding-admin-bar-background: #fff; + --nfd-onboarding-progress-bar-fill: #0060f0; + --nfd-onboarding-progress-bar-background: #d5d5d5; --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); + } + + .nfd-onboarding-sitegen-dark { --nfd-onboarding-primary: #fff; + --nfd-onboarding-primary-rgb: 255, 255, 255; + --nfd-onboarding-hover: #262c30; --nfd-onboarding-secondary: #000; - --nfd-onboarding-progress-bar-background: #353a40; + --nfd-onboarding-secondary-rgb: 0, 0, 0; + --nfd-onboarding-admin-bar-color: #c3c4c7; + --nfd-onboarding-shimmer-color: 168, 239, 255; + --nfd-onboarding-admin-bar-background: #1d2327; --nfd-onboarding-progress-bar-fill: #0060f0; + --nfd-onboarding-progress-bar-background: #353a40; + --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); } } diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss index 75d7d1265..98b81f65e 100644 --- a/src/OnboardingSPA/styles/_interface.scss +++ b/src/OnboardingSPA/styles/_interface.scss @@ -25,6 +25,7 @@ body { --nfd-onboarding-white: #fff; --nfd-onboarding-white-rgb: 255, 255, 255; --nfd-onboarding-black: #000; + --nfd-onboarding-black-rgb: 0, 0, 0; --nfd-onboarding-header-base: var(--nfd-onboarding-light); --nfd-onboarding-header-contrast: var(--nfd-onboarding-dark); --nfd-onboarding-content-base: var(--nfd-onboarding-light); diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 0cc81de2d..5c5a32131 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -15,7 +15,7 @@ @import "../components/Tooltip/stylesheet"; @import "../components/ImageUploader/stylesheet"; @import "../components/SocialMediaForm/stylesheet"; -@import "../components/TextInput/stylesheet"; +@import "../components/TextInput/TextInputSiteBuild/stylesheet"; @import "../components/ExitToWordPress/stylesheet"; @import "../components/Accordion/stylesheet"; @import "../components/NewfoldLargeCard/stylesheet"; @@ -70,6 +70,7 @@ @import "../steps/SiteGen/SiteDetails/stylesheet"; @import "../steps/SiteGen/Experience/stylesheet"; @import "../steps/SiteGen/Welcome/stylesheet"; +@import "../steps/SiteGen/Building/stylesheet"; .nfd-onboarding-container { display: flex;