Skip to content

Commit

Permalink
Merge pull request #129 from newfold-labs/add/welcome-whats-next-enha…
Browse files Browse the repository at this point in the history
…ncements

Welcome Step Polish & Add What's Next MVP
arunshenoy99 authored Dec 13, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents 59858df + dbb24ca commit 12e4ff2
Showing 12 changed files with 378 additions and 93 deletions.
47 changes: 37 additions & 10 deletions src/OnboardingSPA/components/Button/NavCardButton/index.js
Original file line number Diff line number Diff line change
@@ -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 (
<Button
className="nfd-nav-card-button"
text={text}
handleClick={handleBtnClick}
disabled={disabled}
text={ text }
handleClick={ handleBtnClick }
disabled={ disabled }
/>
);
};
125 changes: 65 additions & 60 deletions src/OnboardingSPA/components/Header/step-navigation.js
Original file line number Diff line number Diff line change
@@ -6,126 +6,131 @@ import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import { setFlow } from '../../utils/api/flow';
import { store as nfdOnboardingStore } from '../../store';
import { getSettings, setSettings } from '../../utils/api/settings';
import { wpAdminPage, bluehostDashboardPage } from '../../../constants';

/**
* Back step Navigation button.
*
* @param {*} param0
* @returns
* @return
*/
const Back = ({ path }) => {
const Back = ( { path } ) => {
const navigate = useNavigate();
const navigateBack = () => navigate(path, { state: { origin: 'header' } });
const navigateBack = () =>
navigate( path, { state: { origin: 'header' } } );
return (
<Button className= "navigation-buttons navigation-buttons_back"
onClick={navigateBack}
variant="secondary">
<Icon icon={chevronLeft} />
{__('Back', 'wp-module-onboarding')}
<Button
className="navigation-buttons navigation-buttons_back"
onClick={ navigateBack }
variant="secondary"
>
<Icon icon={ chevronLeft } />
{ __( 'Back', 'wp-module-onboarding' ) }
</Button>
);
};

/**
* 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 (
<Button
onClick={navigateNext}
onClick={ navigateNext }
variant="primary"
className="navigation-buttons navigation-buttons_next">
{__('Next', 'wp-module-onboarding')}
<Icon icon={chevronRight} />
className="navigation-buttons navigation-buttons_next"
>
{ __( 'Next', 'wp-module-onboarding' ) }
<Icon icon={ chevronRight } />
</Button>
);
};

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 } ) => (
<Button
onClick={(e) => saveData(path, currentData)}
onClick={ ( e ) => saveDataAndExit( currentData ) }
className="navigation-buttons navigation-buttons_finish"
variant="primary">
{__('Finish', 'wp-module-onboarding')}
<Icon icon={chevronRight} />
variant="primary"
>
{ __( 'Finish', 'wp-module-onboarding' ) }
<Icon icon={ chevronRight } />
</Button>
);

/**
* 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 (
<div className="nfd-onboarding-header__step-navigation">
<ButtonGroup style={{ display: 'flex', columnGap: '0.5rem' }}>
{isFirstStep ? null : <Back path={previousStep.path} />}
{isLastStep ? <Finish path={location.pathname} currentData={currentData} saveData={saveData}/> : <Next path={nextStep.path} />}
<ButtonGroup style={ { display: 'flex', columnGap: '0.5rem' } }>
{ isFirstStep || isLastStep ? null : (
<Back path={ previousStep.path } />
) }
{ isLastStep ? (
<Finish
currentData={ currentData }
saveDataAndExit={ saveDataAndExit }
/>
) : (
<Next path={ nextStep.path } />
) }
</ButtonGroup>
</div>
);
};

/*
* 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;
6 changes: 4 additions & 2 deletions src/OnboardingSPA/components/Tab/index.js
Original file line number Diff line number Diff line change
@@ -7,11 +7,13 @@
const Tab = ({ title, text, imgType, className }) => {
return (
<div className={className}>
<div className="content-text">
<div className="tab-text">
<h4>{title}</h4>
{text}
</div>
<div className={imgType}></div>
<div className="tab-image">
<div className={imgType}></div>
</div>
</div>

);
47 changes: 28 additions & 19 deletions src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit 12e4ff2

Please sign in to comment.