diff --git a/src/OnboardingSPA/components/App/index.js b/src/OnboardingSPA/components/App/index.js index 67e049481..dcf27834a 100644 --- a/src/OnboardingSPA/components/App/index.js +++ b/src/OnboardingSPA/components/App/index.js @@ -22,68 +22,72 @@ import { FullscreenMode, InterfaceSkeleton } from '@wordpress/interface'; * * Is a child of the hash router and error boundary. * - * @return WPComponent + * @return {WPComponent} App Component */ const App = () => { const location = useLocation(); - const isLargeViewport = useViewportMatch('medium'); - const pathname = kebabCase(location.pathname); + const isLargeViewport = useViewportMatch( 'medium' ); + const pathname = kebabCase( location.pathname ); const { isDrawerOpen, newfoldBrand, onboardingFlow, currentData, + socialData, firstStep, routes, designSteps, allSteps, - } = useSelect((select) => { + } = useSelect( ( select ) => { return { - isDrawerOpen: select(nfdOnboardingStore).isDrawerOpened(), - newfoldBrand: select(nfdOnboardingStore).getNewfoldBrand(), - onboardingFlow: select(nfdOnboardingStore).getOnboardingFlow(), - currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), - firstStep: select(nfdOnboardingStore).getFirstStep(), - routes: select(nfdOnboardingStore).getRoutes(), - allSteps: select(nfdOnboardingStore).getAllSteps(), - designSteps: select(nfdOnboardingStore).getDesignSteps(), + isDrawerOpen: select( nfdOnboardingStore ).isDrawerOpened(), + newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(), + onboardingFlow: select( nfdOnboardingStore ).getOnboardingFlow(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + socialData: select( nfdOnboardingStore ).getOnboardingSocialData(), + firstStep: select( nfdOnboardingStore ).getFirstStep(), + routes: select( nfdOnboardingStore ).getRoutes(), + allSteps: select( nfdOnboardingStore ).getAllSteps(), + designSteps: select( nfdOnboardingStore ).getDesignSteps(), }; - }, []); - - const [isRequestPlaced, setIsRequestPlaced] = useState(false); - const [didVisitBasicInfo, setDidVisitBasicInfo] = useState(false); - const [didVisitEcommerce, setDidVisitEcommerce] = useState(false); - const { setActiveStep, - setActiveFlow, - updateRoutes, - updateDesignSteps, - updateAllSteps, - setCurrentOnboardingData, - } = useDispatch(nfdOnboardingStore); + }, [] ); + + const [ isRequestPlaced, setIsRequestPlaced ] = useState( false ); + const [ didVisitBasicInfo, setDidVisitBasicInfo ] = useState( false ); + const [ didVisitEcommerce, setDidVisitEcommerce ] = useState( false ); + const { + setActiveStep, + setActiveFlow, + updateRoutes, + updateDesignSteps, + updateAllSteps, + setOnboardingSocialData, + setCurrentOnboardingData, + } = useDispatch( nfdOnboardingStore ); async function syncSocialSettings() { const initialData = await getSettings(); - const result = await setSettings(currentData?.data?.socialData); - setDidVisitBasicInfo(false); - if (result?.error != null) { - console.error('Unable to Save Social Data!'); + const result = await setSettings( socialData ); + setDidVisitBasicInfo( false ); + if ( result?.error !== null ) { return initialData?.body; } return result?.body; } - + async function syncStoreDetails() { - let { address, tax } = currentData.storeDetails; + const { address, tax } = currentData.storeDetails; let payload = {}; - if (address !== undefined) { + if ( address !== undefined ) { delete address.country; delete address.state; payload = address; } - if (tax !== undefined) { - let option = tax.option; - let isStoreDetailsFilled = tax.isStoreDetailsFilled; + if ( tax !== undefined ) { + // const option = tax.option; + // const isStoreDetailsFilled = tax.isStoreDetailsFilled; delete tax.option; delete tax.isStoreDetailsFilled; // No Auto-calculate taxes for MMP @@ -96,50 +100,50 @@ const App = () => { // } payload = { ...payload, ...tax }; } - if (!isEmpty(payload)) { - await updateWPSettings(payload); + if ( ! isEmpty( payload ) ) { + await updateWPSettings( payload ); } delete currentData.storeDetails.address; delete currentData.storeDetails.tax; - setDidVisitEcommerce(false); + setDidVisitEcommerce( false ); } async function syncStoreToDB() { // The First Welcome Step doesn't have any Store changes const isFirstStep = location?.pathname === firstStep?.path; - if (currentData && !isFirstStep){ - if(!isRequestPlaced){ - setIsRequestPlaced(true); + if ( currentData && ! isFirstStep ) { + if ( ! isRequestPlaced ) { + setIsRequestPlaced( true ); - if (didVisitEcommerce) { + if ( didVisitEcommerce ) { await syncStoreDetails(); } // If Social Data is changed then sync it - if (didVisitBasicInfo){ - const socialData = await syncSocialSettings(); - + if ( didVisitBasicInfo ) { + const socialDataResp = await syncSocialSettings(); + // If Social Data is changed then Sync that also to the store - if (socialData && currentData?.data) - currentData.data.socialData = socialData; - } - - const result = await setFlow(currentData); - if (result?.error != null) { - setIsRequestPlaced(false); - console.error('Unable to Save data!'); + if ( socialDataResp ) { + setOnboardingSocialData( socialDataResp ); + } + } + + const result = await setFlow( currentData ); + if ( result?.error !== null ) { + setIsRequestPlaced( false ); } else { - setCurrentOnboardingData(result?.body); - setIsRequestPlaced(false); + setCurrentOnboardingData( result?.body ); + setIsRequestPlaced( false ); } - } } // Check if the Basic Info page was visited - if (location?.pathname.includes('basic-info')) - setDidVisitBasicInfo(true); - if (location?.pathname.includes('ecommerce')) { - setDidVisitEcommerce(true); + if ( location?.pathname.includes( 'basic-info' ) ) { + setDidVisitBasicInfo( true ); + } + if ( location?.pathname.includes( 'ecommerce' ) ) { + setDidVisitEcommerce( true ); } } @@ -151,19 +155,19 @@ const App = () => { ]; return { routes: orderBy( - updates.routes.concat(steps), - ['priority'], - ['asc'] + updates.routes.concat( steps ), + [ 'priority' ], + [ 'asc' ] ), allSteps: orderBy( - updates.allSteps.concat(steps), - ['priority'], - ['asc'] + updates.allSteps.concat( steps ), + [ 'priority' ], + [ 'asc' ] ), designSteps: orderBy( - updates.designSteps.concat(steps), - ['priority'], - ['asc'] + updates.designSteps.concat( steps ), + [ 'priority' ], + [ 'asc' ] ), }; }; @@ -172,31 +176,31 @@ const App = () => { return { routes: filter( routes, - (route) => - !route.path.includes( + ( route ) => + ! route.path.includes( conditionalSteps.designColors.path ) && - !route.path.includes( + ! route.path.includes( conditionalSteps.designTypography.path ) ), allSteps: filter( allSteps, - (allStep) => - !allStep.path.includes( + ( allStep ) => + ! allStep.path.includes( conditionalSteps.designColors.path ) && - !allStep.path.includes( + ! allStep.path.includes( conditionalSteps.designTypography.path ) ), designSteps: filter( designSteps, - (designStep) => - !designStep.path.includes( + ( designStep ) => + ! designStep.path.includes( conditionalSteps.designColors.path ) && - !designStep.path.includes( + ! designStep.path.includes( conditionalSteps.designTypography.path ) ), @@ -204,19 +208,23 @@ const App = () => { }; function handleColorsAndTypographyRoutes() { - if (location?.pathname.includes('colors') || location?.pathname.includes('typography')){ - let updates; - updates = currentData?.data?.customDesign ? addColorAndTypographyRoutes() : removeColorAndTypographyRoutes(); - - updateRoutes(updates.routes); - updateDesignSteps(updates.designSteps); - updateAllSteps(updates.allSteps); + if ( + location?.pathname.includes( 'colors' ) || + location?.pathname.includes( 'typography' ) + ) { + const updates = currentData?.data?.customDesign + ? addColorAndTypographyRoutes() + : removeColorAndTypographyRoutes(); + + updateRoutes( updates.routes ); + updateDesignSteps( updates.designSteps ); + updateAllSteps( updates.allSteps ); } } - useEffect(() => { - document.body.classList.add(`nfd-brand-${newfoldBrand}`); - }, [newfoldBrand]); + useEffect( () => { + document.body.classList.add( `nfd-brand-${ newfoldBrand }` ); + }, [ newfoldBrand ] ); useEffect( () => { syncStoreToDB(); @@ -229,21 +237,21 @@ const App = () => { return ( - \ + \ } - drawer={} - content={} - sidebar={} + { 'is-small-viewport': ! isLargeViewport } + ) } + header={
} + drawer={ } + content={ } + sidebar={ } /> diff --git a/src/OnboardingSPA/components/ExitToWordPress/index.js b/src/OnboardingSPA/components/ExitToWordPress/index.js index 09285f463..a68bae7b6 100644 --- a/src/OnboardingSPA/components/ExitToWordPress/index.js +++ b/src/OnboardingSPA/components/ExitToWordPress/index.js @@ -1,7 +1,7 @@ -import { useSelect } from '@wordpress/data'; import { useLocation } from 'react-router-dom'; import { chevronLeft } from '@wordpress/icons'; import { Fragment, useState } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; import { Button, ButtonGroup, Modal } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; @@ -15,7 +15,8 @@ import { wpAdminPage, bluehostDashboardPage } from '../../../constants'; * Self-contained button and confirmation modal for exiting Onboarding page. * * @param {*} param0 - * @return + * + * @return {WPComponent} ExitToWordPress Component */ const ExitToWordPress = ( { buttonText = __( 'Exit to WordPress', 'wp-module-onboarding' ), @@ -40,17 +41,21 @@ const ExitToWordPress = ( { }; const location = useLocation(); - const { currentData, brandName } = useSelect( + const { currentData, brandName, socialData } = useSelect( ( select ) => { return { currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), + socialData: + select( nfdOnboardingStore ).getOnboardingSocialData(), }; }, [ location.pathname ] ); + const { setOnboardingSocialData } = useDispatch( nfdOnboardingStore ); + if ( ! modalText ) { modalText = sprintf( /* translators: %s: Brand */ @@ -62,28 +67,27 @@ const ExitToWordPress = ( { ); } - async function syncSocialSettingsFinish( currentData ) { + async function syncSocialSettingsFinish() { const initialData = await getSettings(); - const result = await setSettings( currentData?.data?.socialData ); + const result = await setSettings( socialData ); if ( result?.error !== null ) { return initialData?.body; } return result?.body; } - async function saveData( path, currentData ) { + async function saveData( path ) { if ( currentData ) { currentData.hasExited = new Date().getTime(); // If Social Data is changed then sync it if ( path?.includes( 'basic-info' ) ) { - const socialData = await syncSocialSettingsFinish( - currentData - ); + const socialDataResp = await syncSocialSettingsFinish(); // If Social Data is changed then Sync that also to the store - if ( socialData && currentData?.data ) - currentData.data.socialData = socialData; + if ( socialDataResp ) { + setOnboardingSocialData( socialDataResp ); + } } setFlow( currentData ); } @@ -125,9 +129,7 @@ const ExitToWordPress = ( { diff --git a/src/OnboardingSPA/components/SkipButton/index.js b/src/OnboardingSPA/components/SkipButton/index.js index 995b71d7d..052f22c85 100644 --- a/src/OnboardingSPA/components/SkipButton/index.js +++ b/src/OnboardingSPA/components/SkipButton/index.js @@ -1,7 +1,7 @@ import { __ } from '@wordpress/i18n'; import { memo } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; import { Button } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useLocation, useNavigate } from 'react-router-dom'; import { setFlow } from '../../utils/api/flow'; @@ -12,44 +12,44 @@ import { wpAdminPage, bluehostDashboardPage } from '../../../constants'; /** * Interface Text Inputs with standard design. * - * @return + * @return {WPComponent} SkipButton Component */ const SkipButton = () => { const navigate = useNavigate(); const location = useLocation(); - const { nextStep, currentData } = useSelect( ( select ) => { + const { nextStep, currentData, socialData } = useSelect( ( select ) => { return { nextStep: select( nfdOnboardingStore ).getNextStep(), currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), + socialData: select( nfdOnboardingStore ).getOnboardingSocialData(), }; }, [] ); const isLastStep = null === nextStep || false === nextStep; + const { setOnboardingSocialData } = useDispatch( nfdOnboardingStore ); - async function syncSocialSettingsFinish( currentData ) { + async function syncSocialSettingsFinish() { const initialData = await getSettings(); - const result = await setSettings( currentData?.data?.socialData ); - if ( result?.error != null ) { - console.error( 'Unable to Save Social Data!' ); + const result = await setSettings( socialData ); + if ( result?.error !== null ) { return initialData?.body; } return result?.body; } - async function saveData( path, currentData ) { + async function saveData( path ) { 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 - ); + const socialDataResp = await syncSocialSettingsFinish(); // If Social Data is changed then Sync that also to the store - if ( socialData && currentData?.data ) - currentData.data.socialData = socialData; + if ( socialDataResp ) { + setOnboardingSocialData( socialDataResp ); + } } setFlow( currentData ); } @@ -89,7 +89,7 @@ const SkipButton = () => { * check if this is the last step */ const exitToWordpressForEcommerce = () => { - if ( window.nfdOnboarding.currentFlow == 'ecommerce' ) { + if ( window.nfdOnboarding.currentFlow === 'ecommerce' ) { return true; } return false; diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js b/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js index 48ea0ea02..724d9cf62 100644 --- a/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js +++ b/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js @@ -1,8 +1,7 @@ -import { __, sprintf } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { useState, useEffect, useRef } from '@wordpress/element'; -import content from './content.json'; +import getContents from './contents'; import TextInput from '../../../components/TextInput'; import SkipButton from '../../../components/SkipButton'; import MiniPreview from '../../../components/MiniPreview'; @@ -11,16 +10,14 @@ import { getSettings } from '../../../utils/api/settings'; import { store as nfdOnboardingStore } from '../../../store'; import ImageUploader from '../../../components/ImageUploader'; import SocialMediaForm from '../../../components/SocialMediaForm'; -import { translations } from '../../../utils/locales/translations'; /** * Basic Info Form. * - * @return + * @return {WPComponent} BasicInfoForm Component */ const BasicInfoForm = () => { const socialMediaRef = useRef( null ); - const [ isError, setIsError ] = useState( false ); const [ flowData, setFlowData ] = useState(); const [ isLoaded, setisLoaded ] = useState( false ); const [ debouncedFlowData, setDebouncedFlowData ] = useState(); @@ -32,7 +29,8 @@ const BasicInfoForm = () => { const [ isValidSocials, setIsValidSocials ] = useState( false ); const [ isSocialFormOpen, setIsSocialFormOpen ] = useState( false ); - const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); + const { setOnboardingSocialData, setCurrentOnboardingData } = + useDispatch( nfdOnboardingStore ); const { editEntityRecord } = useDispatch( coreStore ); const { getEditedEntityRecord } = useSelect( ( select ) => { @@ -46,6 +44,8 @@ const BasicInfoForm = () => { }; }, [] ); + const content = getContents(); + function setDefaultData() { if ( isLoaded ) { setSiteLogo( flowData?.data?.siteLogo ?? 0 ); @@ -67,18 +67,23 @@ const BasicInfoForm = () => { } useEffect( () => { - if ( isSocialFormOpen ) socialMediaRef.current.scrollIntoView(); + if ( isSocialFormOpen ) { + socialMediaRef.current.scrollIntoView(); + } }, [ isSocialFormOpen ] ); useEffect( () => { async function getFlowData() { const socialDataAPI = await getSettings(); - setSocialData( socialDataAPI.body ); + setSocialData( socialDataAPI?.body ); setFlowData( currentData ); setDebouncedFlowData( flowData ); setisLoaded( true ); + setOnboardingSocialData( socialDataAPI?.body ); + } + if ( ! isLoaded ) { + getFlowData(); } - if ( ! isLoaded ) getFlowData(); getEditedEntityRecord( 'root', 'site' ); setDefaultData(); @@ -86,7 +91,9 @@ const BasicInfoForm = () => { useEffect( () => { const timerId = setTimeout( () => { - if ( isLoaded ) setDebouncedFlowData( createSaveData() ); + if ( isLoaded ) { + setDebouncedFlowData( createSaveData() ); + } }, 600 ); return () => { @@ -94,11 +101,11 @@ const BasicInfoForm = () => { }; }, [ siteTitle, siteDesc, siteLogo, socialData, isValidSocials ] ); - const updateCoreStore = ( siteLogo, siteTitle, siteDesc ) => { + const updateCoreStore = ( siteLogoTemp, siteTitleTemp, siteDescTemp ) => { editEntityRecord( 'root', 'site', undefined, { - site_logo: siteLogo?.id ? siteLogo.id : null, - description: siteDesc, - title: siteTitle, + site_logo: siteLogoTemp?.id ? siteLogoTemp.id : null, + description: siteDescTemp, + title: siteTitleTemp, } ); }; @@ -114,17 +121,19 @@ const BasicInfoForm = () => { currentDataCopy.data.blogDescription = debouncedFlowData.data.blogDescription ?? currentDataCopy.data.blogDescription; - currentDataCopy.data.socialData = - debouncedFlowData.data.socialData ?? - currentDataCopy.data.socialData; updateCoreStore( currentDataCopy.data.siteLogo, currentDataCopy.data.blogName, currentDataCopy.data.blogDescription ); setCurrentOnboardingData( currentDataCopy ); + setOnboardingSocialData( + debouncedFlowData.data.socialData ?? socialData + ); }; - if ( debouncedFlowData ) saveData(); + if ( debouncedFlowData ) { + saveData(); + } }, [ debouncedFlowData ] ); return ( @@ -135,67 +144,23 @@ const BasicInfoForm = () => { } >
-
- { __( content.error.title, 'wp-module-onboarding' ) } -
{ + return { + siteTitle: { + title: sprintf( + /* translators: 1: site */ + __( '%s Title', 'wp-module-onboarding' ), + translations( 'Site' ) + ), + placeholder: sprintf( + /* translators: 1: site */ + __( 'WordPress %s', 'wp-module-onboarding' ), + translations( 'Site' ) + ), + hint: __( + 'Shown to visitors, search engine and social media posts.', + 'wp-module-onboarding' + ), + maxCharacters: __( '80', 'wp-module-onboarding' ), + }, + siteDesc: { + title: sprintf( + /* translators: 1: site */ + __( '%s Description', 'wp-module-onboarding' ), + translations( 'Site' ) + ), + placeholder: sprintf( + /* translators: 1: site */ + __( 'Just another WordPress %s.', 'wp-module-onboarding' ), + translations( 'Site' ) + ), + hint: sprintf( + /* translators: 1: site */ + __( + 'Tell people who you are, what you sell and why they should visit your %s.', + 'wp-module-onboarding' + ), + translations( 'site' ) + ), + maxCharacters: __( '160', 'wp-module-onboarding' ), + }, + error: { + title: __( + 'Error Saving Data, Try Again!', + 'wp-module-onboarding' + ), + }, + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index 003f9de1a..63a0d8854 100644 --- a/src/OnboardingSPA/store/actions.js +++ b/src/OnboardingSPA/store/actions.js @@ -4,7 +4,7 @@ * `url` is left to keep __webpack_public_path__ decoupled from store. * * @param {*} runtime - * @return + * @return {Object} action object */ export function setRuntime( runtime ) { window.nfdOnboarding = { @@ -24,7 +24,7 @@ export function setRuntime( runtime ) { * Sets the active view within the Drawer render slot. * * @param {*} view - * @return + * @return {Object} action object */ export function setDrawerActiveView( view ) { return { @@ -37,7 +37,7 @@ export function setDrawerActiveView( view ) { * Opens the off-canvas drawer on left of viewport. * * @param {*} isOpen - * @return + * @return {Object} action object */ export function setIsDrawerOpened( isOpen ) { return { @@ -50,7 +50,7 @@ export function setIsDrawerOpened( isOpen ) { * Keeps the drawer on the left suppressed. * * @param {*} isSuppressed - * @return + * @return {Object} action object */ export function setIsDrawerSuppressed( isSuppressed ) { return { @@ -64,9 +64,8 @@ export function setIsDrawerSuppressed( isSuppressed ) { * * NOTE: does not have any navigation side-effect. * - * @param {*} path - * @param flow - * @return + * @param {*} flow + * @return {Object} action object */ export function setActiveFlow( flow ) { return { @@ -81,7 +80,7 @@ export function setActiveFlow( flow ) { * NOTE: does not have any navigation side-effect. * * @param {*} path - * @return + * @return {Object} action object */ export function setActiveStep( path ) { // Remove Trailing Spaces from URL @@ -94,15 +93,28 @@ export function setActiveStep( path ) { } /** - * Accepts a JSON to set the current data. + * Accepts a JSON to set the Flow Data. * - * @param {*} currentData - * @return + * @param {*} flowData + * @return {Object} action object */ -export function setCurrentOnboardingData( currentData ) { +export function setCurrentOnboardingData( flowData ) { return { type: 'SET_CURRENT_DATA', - currentData, + flowData, + }; +} + +/** + * Accepts a JSON to set the social data. + * + * @param {*} socialData + * @return {Object} action object + */ +export function setOnboardingSocialData( socialData ) { + return { + type: 'SET_SOCIAL_DATA', + socialData, }; } @@ -110,7 +122,7 @@ export function setCurrentOnboardingData( currentData ) { * Updates general settings. * * @param {*} settings - * @return + * @return {Object} action object */ export function updateSettings( settings ) { return { diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js index 641bef720..73157f416 100644 --- a/src/OnboardingSPA/store/reducer.js +++ b/src/OnboardingSPA/store/reducer.js @@ -100,12 +100,21 @@ export function drawer( return state; } -export function currentData( state = {}, action ) { +export function data( state = {}, action ) { switch ( action.type ) { case 'SET_CURRENT_DATA': return { ...state, - ...action.currentData, + flowData: { + ...action.flowData, + }, + }; + case 'SET_SOCIAL_DATA': + return { + ...state, + socialData: { + ...action.socialData, + }, }; } @@ -206,7 +215,7 @@ export function settings( export default combineReducers( { drawer, runtime, - currentData, + data, settings, flow, sidebar, diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index d2c50fee9..d8516960a 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -1,11 +1,11 @@ import { filter, findIndex } from 'lodash'; -import { addQueryArgs, getFragment } from '@wordpress/url'; +import { addQueryArgs } from '@wordpress/url'; /** * Get the currently active drawer view * * @param {*} state - * @return string + * @return {string} Drawer View */ export function getDrawerView( state ) { return state.drawer.view; @@ -15,7 +15,7 @@ export function getDrawerView( state ) { * Check if the drawer is opened * * @param {*} state - * @return boolean + * @return {boolean} Drawer isOpen */ export function isDrawerOpened( state ) { return state.drawer.isOpen; @@ -25,7 +25,7 @@ export function isDrawerOpened( state ) { * Check if the drawer is suppressed * * @param {*} state - * @return boolean + * @return {boolean} Drawer isSuppressed */ export function isDrawerSuppressed( state ) { return state.drawer.isSuppressed; @@ -39,7 +39,7 @@ export function isHeaderNavigationEnabled( state ) { * Gets current Newfold brand * * @param {*} state - * @return string + * @return {string} Newfold Brand */ export function getNewfoldBrand( state ) { return state.runtime.currentBrand.brand; @@ -49,7 +49,7 @@ export function getNewfoldBrand( state ) { * Gets current Newfold brand * * @param {*} state - * @return string + * @return {string} Current Brand Name */ export function getNewfoldBrandName( state ) { return state.runtime.currentBrand.name; @@ -59,7 +59,7 @@ export function getNewfoldBrandName( state ) { * Gets dynamic Hire Experts URL for Need Help Tag per brand * * @param {*} state - * @return string + * @return {string} hireExpertsUrl */ export function getHireExpertsUrl( state ) { const hireExpertsInfo = state.runtime.currentBrand.hireExpertsInfo; @@ -75,17 +75,27 @@ export function getHireExpertsUrl( state ) { * Gets the current Onboarding Data * * @param {*} state - * @return string + * @return {string} Current Onboarding Data */ export function getCurrentOnboardingData( state ) { - return state.currentData; + return state.data.flowData; +} + +/** + * Gets the current Onboarding Social Data + * + * @param {*} state + * @return {string} Onboarding Social Data + */ +export function getOnboardingSocialData( state ) { + return state.data.socialData; } /** * Gets current Onboarding Flow * * @param {*} state - * @return string + * @return {string} Onboarding Flow */ export function getOnboardingFlow( state ) { return state.runtime.currentFlow ?? 'wp-setup'; @@ -103,7 +113,7 @@ export function getAllSteps( state ) { * Gets steps to display in drawer. * * @param {*} state - * @return + * @return {Array} Top Steps */ export function getTopSteps( state ) { return state.flow.steps.topSteps; @@ -113,7 +123,7 @@ export function getTopSteps( state ) { * Gets design steps to display in drawer submenu. * * @param {*} state - * @return + * @return {Array} Design Steps */ export function getDesignSteps( state ) { return state.flow.steps.designSteps; @@ -123,7 +133,7 @@ export function getDesignSteps( state ) { * Gets get-started setup steps to display in drawer submenu. * * @param {*} state - * @return + * @return {Array} Get Started Steps */ export function getGetStartedSteps( state ) { return state.flow.steps.getStartedSteps; @@ -133,7 +143,7 @@ export function getGetStartedSteps( state ) { * Get the path to the current step. * * @param {*} state - * @return + * @return {string} Current Step Path */ export function getCurrentStepPath( state ) { return state.flow.steps.currentStep; @@ -143,7 +153,7 @@ export function getCurrentStepPath( state ) { * Gets the First step object. * * @param {*} state - * @return object + * @return {Object} First Step */ export function getFirstStep( state ) { return state.flow.steps.allSteps[ 0 ]; @@ -153,7 +163,7 @@ export function getFirstStep( state ) { * Gets the Last step object. * * @param {*} state - * @return object + * @return {Object} Last Step */ export function getLastStep( state ) { return state.flow.steps.allSteps[ state.flow.steps.allSteps.length - 1 ]; @@ -163,7 +173,7 @@ export function getLastStep( state ) { * Gets the current step object. * * @param {*} state - * @return object + * @return {Object} Current Step */ export function getCurrentStep( state ) { const filtered = filter( state.flow.steps.allSteps, [ @@ -182,7 +192,7 @@ export function getStepFromPath( state, path ) { * Get's the previous step's object. * * @param {*} state - * @return object|null|false + * @return {object|null|false} Previous Step */ export function getPreviousStep( state ) { const currentStepIndex = findIndex( state.flow.steps.allSteps, { @@ -201,7 +211,7 @@ export function getPreviousStep( state ) { * Gets the next steps object. * * @param {*} state - * @return object|null|false + * @return {object|null|false} Next Step */ export function getNextStep( state ) { const totalIndexes = state.flow.steps.allSteps.length - 1; @@ -257,7 +267,7 @@ export function getStepPreviewData( state ) { * Gets the current header menu Data * * @param {*} state - * @return string + * @return {string} menu */ export function getHeaderMenuData( state ) { return state.header.menu; @@ -267,15 +277,13 @@ export function getHeaderMenuData( state ) { * Gets 1-1 Experts URL for Help Section in the Sidebars * * @param {*} state - * @return string + * @return {string} expertsUrl */ - export function getExpertsUrl( state ) { +export function getExpertsUrl( state ) { const expertsInfo = state.runtime.currentBrand.expertsInfo; const expertsUrl = - addQueryArgs( - expertsInfo?.defaultLink, - expertsInfo?.queryParams - ) + ( expertsInfo?.fragment || '' ); + addQueryArgs( expertsInfo?.defaultLink, expertsInfo?.queryParams ) + + ( expertsInfo?.fragment || '' ); return expertsUrl; } @@ -283,10 +291,11 @@ export function getHeaderMenuData( state ) { * Gets Full Service Creative Team URL for Help Section in the Sidebars * * @param {*} state - * @return string + * @return {string} fullServiceCreativeTeamUrl */ - export function getfullServiceCreativeTeamUrl( state ) { - const fullServiceCreativeTeamInfo = state.runtime.currentBrand.fullServiceCreativeTeamInfo; +export function getfullServiceCreativeTeamUrl( state ) { + const fullServiceCreativeTeamInfo = + state.runtime.currentBrand.fullServiceCreativeTeamInfo; const fullServiceCreativeTeamUrl = addQueryArgs( fullServiceCreativeTeamInfo?.defaultLink, @@ -299,9 +308,9 @@ export function getHeaderMenuData( state ) { * Gets Technical Support URL for Help Section in the Sidebars * * @param {*} state - * @return string + * @return {string} techSupportUrl */ - export function getTechSupportUrl( state ) { +export function getTechSupportUrl( state ) { const techSupportInfo = state.runtime.currentBrand.techSupportInfo; const techSupportUrl = addQueryArgs( @@ -309,14 +318,14 @@ export function getHeaderMenuData( state ) { techSupportInfo?.queryParams ) + ( techSupportInfo?.fragment || '' ); return techSupportUrl; - } +} /** * Gets the Plugin Install Hash for security * * @param {*} state - * @return string + * @return {string} pluginInstallHash */ export function getPluginInstallHash( state ) { return state.runtime.pluginInstallHash; -} \ No newline at end of file +}