diff --git a/src/OnboardingSPA/components/App/index.js b/src/OnboardingSPA/components/App/index.js index 5d7d30832..422a6fbfc 100644 --- a/src/OnboardingSPA/components/App/index.js +++ b/src/OnboardingSPA/components/App/index.js @@ -26,8 +26,8 @@ import { FullscreenMode, InterfaceSkeleton } from '@wordpress/interface'; */ 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, @@ -39,23 +39,24 @@ const App = () => { routes, designSteps, allSteps, - } = useSelect((select) => { + } = useSelect( ( select ) => { return { - 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(), + 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 [ isRequestPlaced, setIsRequestPlaced ] = useState( false ); + const [ didVisitBasicInfo, setDidVisitBasicInfo ] = useState( false ); + const [ didVisitEcommerce, setDidVisitEcommerce ] = useState( false ); const { setActiveStep, setActiveFlow, @@ -64,25 +65,25 @@ const App = () => { updateAllSteps, setOnboardingSocialData, setCurrentOnboardingData, - } = useDispatch(nfdOnboardingStore); + } = useDispatch( nfdOnboardingStore ); async function syncSocialSettings() { const initialData = await getSettings(); - const result = await setSettings(socialData); - setDidVisitBasicInfo(false); - if (result?.error !== null) return initialData?.body; + const result = await setSettings( socialData ); + setDidVisitBasicInfo( false ); + if ( result?.error !== null ) return initialData?.body; return result?.body; } async function syncStoreDetails() { const { address, tax } = currentData.storeDetails; let payload = {}; - if (address !== undefined) { + if ( address !== undefined ) { delete address.country; delete address.state; payload = address; } - if (tax !== undefined) { + if ( tax !== undefined ) { // const option = tax.option; // const isStoreDetailsFilled = tax.isStoreDetailsFilled; delete tax.option; @@ -97,47 +98,48 @@ 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) { + if ( didVisitBasicInfo ) { const socialDataResp = await syncSocialSettings(); // If Social Data is changed then Sync that also to the store - if (socialDataResp) setOnboardingSocialData(socialDataResp); + if ( socialDataResp ) + setOnboardingSocialData( socialDataResp ); } - const result = await setFlow(currentData); - if (result?.error !== null) { - setIsRequestPlaced(false); + 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 ); } } @@ -149,19 +151,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' ] ), }; }; @@ -170,27 +172,31 @@ const App = () => { return { routes: filter( routes, - (route) => - !route.path.includes(conditionalSteps.designColors.path) && - !route.path.includes(conditionalSteps.designTypography.path) + ( route ) => + ! route.path.includes( + conditionalSteps.designColors.path + ) && + ! 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 ) ), @@ -199,49 +205,49 @@ const App = () => { function handleColorsAndTypographyRoutes() { if ( - location?.pathname.includes('colors') || - location?.pathname.includes('typography') + location?.pathname.includes( 'colors' ) || + location?.pathname.includes( 'typography' ) ) { const updates = currentData?.data?.customDesign ? addColorAndTypographyRoutes() : removeColorAndTypographyRoutes(); - updateRoutes(updates.routes); - updateDesignSteps(updates.designSteps); - updateAllSteps(updates.allSteps); + 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(() => { + useEffect( () => { syncStoreToDB(); handleColorsAndTypographyRoutes(); - if (location.pathname.includes('/step')) { - setActiveFlow(onboardingFlow); - setActiveStep(location.pathname); + if ( location.pathname.includes( '/step' ) ) { + setActiveFlow( onboardingFlow ); + setActiveStep( location.pathname ); } - }, [location.pathname, onboardingFlow]); + }, [ location.pathname, onboardingFlow ] ); 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 9acd259ee..56685af5c 100644 --- a/src/OnboardingSPA/components/ExitToWordPress/index.js +++ b/src/OnboardingSPA/components/ExitToWordPress/index.js @@ -18,45 +18,45 @@ import { wpAdminPage, bluehostDashboardPage } from '../../../constants'; * * @return {WPComponent} ExitToWordPress Component */ -const ExitToWordPress = ({ - buttonText = __('Exit to WordPress', 'wp-module-onboarding'), +const ExitToWordPress = ( { + buttonText = __( 'Exit to WordPress', 'wp-module-onboarding' ), showButtonIcon = true, showButton = true, buttonVariant = 'secondary', buttonClassName = false, isModalOpen = false, - modalTitle = __('Exit without finishing?', 'wp-module-onboarding'), + modalTitle = __( 'Exit without finishing?', 'wp-module-onboarding' ), modalText = false, - modalPrimaryCloseButtonText = __('Continue', 'wp-module-onboarding'), + modalPrimaryCloseButtonText = __( 'Continue', 'wp-module-onboarding' ), modalOnClose = false, - modalExitButtonText = __('Exit', 'wp-module-onboarding'), -}) => { - const [isOpen, setIsOpen] = useState(isModalOpen); - const openModal = () => setIsOpen(true); + modalExitButtonText = __( 'Exit', 'wp-module-onboarding' ), +} ) => { + const [ isOpen, setIsOpen ] = useState( isModalOpen ); + const openModal = () => setIsOpen( true ); const closeModal = () => { - if (typeof modalOnClose === 'function') { + if ( typeof modalOnClose === 'function' ) { modalOnClose(); } - setIsOpen(false); + setIsOpen( false ); }; const location = useLocation(); const { currentData, brandName, socialData } = useSelect( - (select) => { + ( select ) => { return { currentData: - select(nfdOnboardingStore).getCurrentOnboardingData(), - brandName: select(nfdOnboardingStore).getNewfoldBrandName(), + select( nfdOnboardingStore ).getCurrentOnboardingData(), + brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), socialData: - select(nfdOnboardingStore).getOnboardingSocialData(), + select( nfdOnboardingStore ).getOnboardingSocialData(), }; }, - [location.pathname] + [ location.pathname ] ); - const { setOnboardingSocialData } = useDispatch(nfdOnboardingStore); + const { setOnboardingSocialData } = useDispatch( nfdOnboardingStore ); - if (!modalText) { + if ( ! modalText ) { modalText = sprintf( /* translators: %s: Brand */ __( @@ -69,68 +69,71 @@ const ExitToWordPress = ({ async function syncSocialSettingsFinish() { const initialData = await getSettings(); - const result = await setSettings(socialData); - if (result?.error !== null) { + const result = await setSettings( socialData ); + if ( result?.error !== null ) { return initialData?.body; } return result?.body; } - async function saveData(path) { - if (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')) { + if ( path?.includes( 'basic-info' ) ) { const socialDataResp = await syncSocialSettingsFinish(); // If Social Data is changed then Sync that also to the store - if (socialDataResp) setOnboardingSocialData(socialDataResp); + if ( socialDataResp ) setOnboardingSocialData( socialDataResp ); } - setFlow(currentData); + setFlow( currentData ); } //Redirect to Admin Page for normal customers // and Bluehost Dashboard for ecommerce customers const exitLink = exitToWordpressForEcommerce() ? bluehostDashboardPage : wpAdminPage; - window.location.replace(exitLink); + window.location.replace( exitLink ); } return ( - {showButton && ( + { showButton && ( - )} - {isOpen && ( - closeModal()}> -

{modalText}

+ ) } + { isOpen && ( + closeModal() } + > +

{ modalText }

- )} + ) }
); }; @@ -139,7 +142,7 @@ const ExitToWordPress = ({ * 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/components/SkipButton/index.js b/src/OnboardingSPA/components/SkipButton/index.js index 0fdf3fb36..b5ff34eb3 100644 --- a/src/OnboardingSPA/components/SkipButton/index.js +++ b/src/OnboardingSPA/components/SkipButton/index.js @@ -17,62 +17,63 @@ import { wpAdminPage, bluehostDashboardPage } from '../../../constants'; const SkipButton = () => { const navigate = useNavigate(); const location = useLocation(); - const { nextStep, currentData, socialData } = useSelect((select) => { + const { nextStep, currentData, socialData } = useSelect( ( select ) => { return { - nextStep: select(nfdOnboardingStore).getNextStep(), - currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), - socialData: select(nfdOnboardingStore).getOnboardingSocialData(), + nextStep: select( nfdOnboardingStore ).getNextStep(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + socialData: select( nfdOnboardingStore ).getOnboardingSocialData(), }; - }, []); + }, [] ); const isLastStep = null === nextStep || false === nextStep; - const { setOnboardingSocialData } = useDispatch(nfdOnboardingStore); + const { setOnboardingSocialData } = useDispatch( nfdOnboardingStore ); async function syncSocialSettingsFinish() { const initialData = await getSettings(); - const result = await setSettings(socialData); - if (result?.error !== null) return initialData?.body; + const result = await setSettings( socialData ); + if ( result?.error !== null ) return initialData?.body; return result?.body; } - async function saveData(path) { - if (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')) { + if ( path?.includes( 'basic-info' ) ) { const socialDataResp = await syncSocialSettingsFinish(); // If Social Data is changed then Sync that also to the store - if (socialDataResp) setOnboardingSocialData(socialDataResp); + if ( socialDataResp ) setOnboardingSocialData( socialDataResp ); } - setFlow(currentData); + setFlow( currentData ); } // Redirect to Admin Page for normal customers // and Bluehost Dashboard for ecommerce customers const exitLink = exitToWordpressForEcommerce() ? bluehostDashboardPage : wpAdminPage; - window.location.replace(exitLink); + window.location.replace( exitLink ); } function skipStep() { - if (isLastStep) { + if ( isLastStep ) { return ( ); } return ( ); } @@ -84,11 +85,11 @@ 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; }; -const SkipButtonMemo = memo(SkipButton); +const SkipButtonMemo = memo( SkipButton ); export default SkipButtonMemo; diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js b/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js index c8504783e..561275252 100644 --- a/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js +++ b/src/OnboardingSPA/pages/Steps/BasicInfo/basicInfoForm.js @@ -17,39 +17,40 @@ import SocialMediaForm from '../../../components/SocialMediaForm'; * @return {WPComponent} BasicInfoForm Component */ const BasicInfoForm = () => { - const socialMediaRef = useRef(null); - const [flowData, setFlowData] = useState(); - const [isLoaded, setisLoaded] = useState(false); - const [debouncedFlowData, setDebouncedFlowData] = useState(); - - const [siteTitle, setSiteTitle] = useState(''); - const [siteDesc, setSiteDesc] = useState(''); - const [siteLogo, setSiteLogo] = useState(0); - const [socialData, setSocialData] = useState(); - const [isValidSocials, setIsValidSocials] = useState(false); - const [isSocialFormOpen, setIsSocialFormOpen] = useState(false); + const socialMediaRef = useRef( null ); + const [ flowData, setFlowData ] = useState(); + const [ isLoaded, setisLoaded ] = useState( false ); + const [ debouncedFlowData, setDebouncedFlowData ] = useState(); + + const [ siteTitle, setSiteTitle ] = useState( '' ); + const [ siteDesc, setSiteDesc ] = useState( '' ); + const [ siteLogo, setSiteLogo ] = useState( 0 ); + const [ socialData, setSocialData ] = useState(); + const [ isValidSocials, setIsValidSocials ] = useState( false ); + const [ isSocialFormOpen, setIsSocialFormOpen ] = useState( false ); const { setOnboardingSocialData, setCurrentOnboardingData } = - useDispatch(nfdOnboardingStore); - const { editEntityRecord } = useDispatch(coreStore); + useDispatch( nfdOnboardingStore ); + const { editEntityRecord } = useDispatch( coreStore ); - const { getEditedEntityRecord } = useSelect((select) => { - return select(coreStore); - }, []); + const { getEditedEntityRecord } = useSelect( ( select ) => { + return select( coreStore ); + }, [] ); - const { currentData } = useSelect((select) => { + const { currentData } = useSelect( ( select ) => { return { - currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), }; - }, []); + }, [] ); const content = getContents(); function setDefaultData() { - if (isLoaded) { - setSiteLogo(flowData?.data?.siteLogo ?? 0); - setSiteTitle(flowData?.data?.blogName ?? ''); - setSiteDesc(flowData?.data?.blogDescription ?? ''); + if ( isLoaded ) { + setSiteLogo( flowData?.data?.siteLogo ?? 0 ); + setSiteTitle( flowData?.data?.blogName ?? '' ); + setSiteDesc( flowData?.data?.blogDescription ?? '' ); } } @@ -65,44 +66,44 @@ const BasicInfoForm = () => { return dataToSave; } - useEffect(() => { - if (isSocialFormOpen) socialMediaRef.current.scrollIntoView(); - }, [isSocialFormOpen]); + useEffect( () => { + if ( isSocialFormOpen ) socialMediaRef.current.scrollIntoView(); + }, [ isSocialFormOpen ] ); - useEffect(() => { + useEffect( () => { async function getFlowData() { const socialDataAPI = await getSettings(); - setSocialData(socialDataAPI?.body); - setFlowData(currentData); - setDebouncedFlowData(flowData); - setisLoaded(true); - setOnboardingSocialData(socialDataAPI?.body); + setSocialData( socialDataAPI?.body ); + setFlowData( currentData ); + setDebouncedFlowData( flowData ); + setisLoaded( true ); + setOnboardingSocialData( socialDataAPI?.body ); } - if (!isLoaded) getFlowData(); - getEditedEntityRecord('root', 'site'); + if ( ! isLoaded ) getFlowData(); + getEditedEntityRecord( 'root', 'site' ); setDefaultData(); - }, [isLoaded]); + }, [ isLoaded ] ); - useEffect(() => { - const timerId = setTimeout(() => { - if (isLoaded) setDebouncedFlowData(createSaveData()); - }, 600); + useEffect( () => { + const timerId = setTimeout( () => { + if ( isLoaded ) setDebouncedFlowData( createSaveData() ); + }, 600 ); return () => { - clearTimeout(timerId); + clearTimeout( timerId ); }; - }, [siteTitle, siteDesc, siteLogo, socialData, isValidSocials]); + }, [ siteTitle, siteDesc, siteLogo, socialData, isValidSocials ] ); - const updateCoreStore = (siteLogoTemp, siteTitleTemp, siteDescTemp) => { - editEntityRecord('root', 'site', undefined, { + const updateCoreStore = ( siteLogoTemp, siteTitleTemp, siteDescTemp ) => { + editEntityRecord( 'root', 'site', undefined, { site_logo: siteLogoTemp?.id ? siteLogoTemp.id : null, description: siteDescTemp, title: siteTitleTemp, - }); + } ); }; - useEffect(() => { + useEffect( () => { const saveData = async () => { const currentDataCopy = currentData; currentDataCopy.data.siteLogo = @@ -119,65 +120,65 @@ const BasicInfoForm = () => { currentDataCopy.data.blogName, currentDataCopy.data.blogDescription ); - setCurrentOnboardingData(currentDataCopy); + setCurrentOnboardingData( currentDataCopy ); setOnboardingSocialData( debouncedFlowData.data.socialData ?? socialData ); }; - if (debouncedFlowData) saveData(); - }, [debouncedFlowData]); + if ( debouncedFlowData ) saveData(); + }, [ debouncedFlowData ] ); return ( -
+
-
+
diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/contents.js b/src/OnboardingSPA/pages/Steps/BasicInfo/contents.js index ccab92373..e329fee27 100644 --- a/src/OnboardingSPA/pages/Steps/BasicInfo/contents.js +++ b/src/OnboardingSPA/pages/Steps/BasicInfo/contents.js @@ -7,30 +7,30 @@ const getContents = () => { siteTitle: { title: sprintf( /* translators: 1: site */ - __('%s Title', 'wp-module-onboarding'), - translations('Site') + __( '%s Title', 'wp-module-onboarding' ), + translations( 'Site' ) ), placeholder: sprintf( /* translators: 1: site */ - __('WordPress %s', 'wp-module-onboarding'), - translations('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'), + maxCharacters: __( '80', 'wp-module-onboarding' ), }, siteDesc: { title: sprintf( /* translators: 1: site */ - __('%s Description', 'wp-module-onboarding'), - translations('Site') + __( '%s Description', 'wp-module-onboarding' ), + translations( 'Site' ) ), placeholder: sprintf( /* translators: 1: site */ - __('Just another WordPress %s.', 'wp-module-onboarding'), - translations('Site') + __( 'Just another WordPress %s.', 'wp-module-onboarding' ), + translations( 'Site' ) ), hint: sprintf( /* translators: 1: site */ @@ -38,12 +38,15 @@ const getContents = () => { 'Tell people who you are, what you sell and why they should visit your %s.', 'wp-module-onboarding' ), - translations('site') + translations( 'site' ) ), - maxCharacters: __('160', 'wp-module-onboarding'), + maxCharacters: __( '160', 'wp-module-onboarding' ), }, error: { - title: __('Error Saving Data, Try Again!', 'wp-module-onboarding'), + title: __( + 'Error Saving Data, Try Again!', + 'wp-module-onboarding' + ), }, }; }; diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index f22e440ff..dcf3809de 100644 --- a/src/OnboardingSPA/store/actions.js +++ b/src/OnboardingSPA/store/actions.js @@ -6,7 +6,7 @@ * @param {*} runtime * @return {Object} action object */ -export function setRuntime(runtime) { +export function setRuntime( runtime ) { window.nfdOnboarding = { buildUrl: runtime.buildUrl, siteUrl: runtime.siteUrl, @@ -26,7 +26,7 @@ export function setRuntime(runtime) { * @param {*} view * @return {Object} action object */ -export function setDrawerActiveView(view) { +export function setDrawerActiveView( view ) { return { type: 'SET_DRAWER_ACTIVE_VIEW', view, @@ -39,7 +39,7 @@ export function setDrawerActiveView(view) { * @param {*} isOpen * @return {Object} action object */ -export function setIsDrawerOpened(isOpen) { +export function setIsDrawerOpened( isOpen ) { return { type: 'SET_DRAWER_OPENED', isOpen, @@ -52,7 +52,7 @@ export function setIsDrawerOpened(isOpen) { * @param {*} isSuppressed * @return {Object} action object */ -export function setIsDrawerSuppressed(isSuppressed) { +export function setIsDrawerSuppressed( isSuppressed ) { return { type: 'SET_DRAWER_SUPPRESSED', isSuppressed, @@ -67,7 +67,7 @@ export function setIsDrawerSuppressed(isSuppressed) { * @param {*} flow * @return {Object} action object */ -export function setActiveFlow(flow) { +export function setActiveFlow( flow ) { return { type: 'SET_ACTIVE_FLOW', flow, @@ -82,9 +82,9 @@ export function setActiveFlow(flow) { * @param {*} path * @return {Object} action object */ -export function setActiveStep(path) { +export function setActiveStep( path ) { // Remove Trailing Spaces from URL - path = path.replace(/\/$/, ''); + path = path.replace( /\/$/, '' ); return { type: 'SET_ACTIVE_STEP', @@ -98,7 +98,7 @@ export function setActiveStep(path) { * @param {*} flowData * @return {Object} action object */ -export function setCurrentOnboardingData(flowData) { +export function setCurrentOnboardingData( flowData ) { return { type: 'SET_CURRENT_DATA', flowData, @@ -111,7 +111,7 @@ export function setCurrentOnboardingData(flowData) { * @param {*} socialData * @return {Object} action object */ -export function setOnboardingSocialData(socialData) { +export function setOnboardingSocialData( socialData ) { return { type: 'SET_SOCIAL_DATA', socialData, @@ -124,77 +124,77 @@ export function setOnboardingSocialData(socialData) { * @param {*} settings * @return {Object} action object */ -export function updateSettings(settings) { +export function updateSettings( settings ) { return { type: 'UPDATE_SETTINGS', settings, }; } -export function updateThemeStatus(themeStatus) { +export function updateThemeStatus( themeStatus ) { return { type: 'UPDATE_THEME_STATUS', themeStatus, }; } -export function updatePluginsStatus(pluginsStatus) { +export function updatePluginsStatus( pluginsStatus ) { return { type: 'UPDATE_PLUGINS_STATUS', pluginsStatus, }; } -export function setIsSidebarOpened(isOpen) { +export function setIsSidebarOpened( isOpen ) { return { type: 'SET_SIDEBAR_OPENED', isOpen, }; } -export function setSidebarActiveView(view) { +export function setSidebarActiveView( view ) { return { type: 'SET_SIDEBAR_ACTIVE_VIEW', view, }; } -export function setIsHeaderNavigationEnabled(isNavigationEnabled) { +export function setIsHeaderNavigationEnabled( isNavigationEnabled ) { return { type: 'SET_HEADER_NAVIGATION_ENABLED', isNavigationEnabled, }; } -export function updatePreviewSettings(previewSettings) { +export function updatePreviewSettings( previewSettings ) { return { type: 'SET_PREVIEW_SETTINGS', previewSettings, }; } -export function updateRoutes(routes) { +export function updateRoutes( routes ) { return { type: 'UPDATE_ROUTES', routes, }; } -export function updateAllSteps(allSteps) { +export function updateAllSteps( allSteps ) { return { type: 'UPDATE_ALL_STEPS', allSteps, }; } -export function updateDesignSteps(designSteps) { +export function updateDesignSteps( designSteps ) { return { type: 'UPDATE_DESIGN_STEPS', designSteps, }; } -export function setHeaderMenuData(menu) { +export function setHeaderMenuData( menu ) { return { type: 'UPDATE_HEADER_MENU_DATA', menu, diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js index 755859f70..73157f416 100644 --- a/src/OnboardingSPA/store/reducer.js +++ b/src/OnboardingSPA/store/reducer.js @@ -32,7 +32,7 @@ export function flow( }, action ) { - switch (action.type) { + switch ( action.type ) { case 'SET_ACTIVE_STEP': return { ...state, @@ -79,7 +79,7 @@ export function drawer( state = { isOpen: false, isSuppressed: false, view: VIEW_NAV_PRIMARY }, action ) { - switch (action.type) { + switch ( action.type ) { case 'SET_DRAWER_OPENED': return { ...state, @@ -100,8 +100,8 @@ export function drawer( return state; } -export function data(state = {}, action) { - switch (action.type) { +export function data( state = {}, action ) { + switch ( action.type ) { case 'SET_CURRENT_DATA': return { ...state, @@ -129,7 +129,7 @@ export function sidebar( }, action ) { - switch (action.type) { + switch ( action.type ) { case 'SET_SIDEBAR_OPENED': return { ...state, @@ -149,7 +149,7 @@ export function header( state = { isNavigationEnabled: true, menu: '' }, action ) { - switch (action.type) { + switch ( action.type ) { case 'SET_HEADER_NAVIGATION_ENABLED': return { ...state, @@ -164,8 +164,8 @@ export function header( return state; } -export function runtime(state = {}, action) { - switch (action.type) { +export function runtime( state = {}, action ) { + switch ( action.type ) { case 'SET_RUNTIME': return { ...state, @@ -187,11 +187,11 @@ export function runtime(state = {}, action) { export function settings( state = { themeStatus: THEME_STATUS_INIT, - pluginsStatus: { [ECOMMERCE_STEPS_PLUGIN]: PLUGIN_STATUS_INIT }, + pluginsStatus: { [ ECOMMERCE_STEPS_PLUGIN ]: PLUGIN_STATUS_INIT }, }, action ) { - switch (action.type) { + switch ( action.type ) { case 'UPDATE_SETTINGS': return { ...state, @@ -212,7 +212,7 @@ export function settings( return state; } -export default combineReducers({ +export default combineReducers( { drawer, runtime, data, @@ -220,4 +220,4 @@ export default combineReducers({ flow, sidebar, header, -}); +} ); diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index 553877204..d8516960a 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -7,7 +7,7 @@ import { addQueryArgs } from '@wordpress/url'; * @param {*} state * @return {string} Drawer View */ -export function getDrawerView(state) { +export function getDrawerView( state ) { return state.drawer.view; } @@ -17,7 +17,7 @@ export function getDrawerView(state) { * @param {*} state * @return {boolean} Drawer isOpen */ -export function isDrawerOpened(state) { +export function isDrawerOpened( state ) { return state.drawer.isOpen; } @@ -27,11 +27,11 @@ export function isDrawerOpened(state) { * @param {*} state * @return {boolean} Drawer isSuppressed */ -export function isDrawerSuppressed(state) { +export function isDrawerSuppressed( state ) { return state.drawer.isSuppressed; } -export function isHeaderNavigationEnabled(state) { +export function isHeaderNavigationEnabled( state ) { return state.header.isNavigationEnabled; } @@ -41,7 +41,7 @@ export function isHeaderNavigationEnabled(state) { * @param {*} state * @return {string} Newfold Brand */ -export function getNewfoldBrand(state) { +export function getNewfoldBrand( state ) { return state.runtime.currentBrand.brand; } @@ -51,7 +51,7 @@ export function getNewfoldBrand(state) { * @param {*} state * @return {string} Current Brand Name */ -export function getNewfoldBrandName(state) { +export function getNewfoldBrandName( state ) { return state.runtime.currentBrand.name; } @@ -61,13 +61,13 @@ export function getNewfoldBrandName(state) { * @param {*} state * @return {string} hireExpertsUrl */ -export function getHireExpertsUrl(state) { +export function getHireExpertsUrl( state ) { const hireExpertsInfo = state.runtime.currentBrand.hireExpertsInfo; const hireExpertsUrl = addQueryArgs( hireExpertsInfo?.defaultLink, hireExpertsInfo?.queryParameters - ) + (hireExpertsInfo?.fragment || ''); + ) + ( hireExpertsInfo?.fragment || '' ); return hireExpertsUrl; } @@ -77,7 +77,7 @@ export function getHireExpertsUrl(state) { * @param {*} state * @return {string} Current Onboarding Data */ -export function getCurrentOnboardingData(state) { +export function getCurrentOnboardingData( state ) { return state.data.flowData; } @@ -87,7 +87,7 @@ export function getCurrentOnboardingData(state) { * @param {*} state * @return {string} Onboarding Social Data */ -export function getOnboardingSocialData(state) { +export function getOnboardingSocialData( state ) { return state.data.socialData; } @@ -97,15 +97,15 @@ export function getOnboardingSocialData(state) { * @param {*} state * @return {string} Onboarding Flow */ -export function getOnboardingFlow(state) { +export function getOnboardingFlow( state ) { return state.runtime.currentFlow ?? 'wp-setup'; } -export function getRoutes(state) { +export function getRoutes( state ) { return state.flow.steps.routes; } -export function getAllSteps(state) { +export function getAllSteps( state ) { return state.flow.steps.allSteps; } @@ -115,7 +115,7 @@ export function getAllSteps(state) { * @param {*} state * @return {Array} Top Steps */ -export function getTopSteps(state) { +export function getTopSteps( state ) { return state.flow.steps.topSteps; } @@ -125,7 +125,7 @@ export function getTopSteps(state) { * @param {*} state * @return {Array} Design Steps */ -export function getDesignSteps(state) { +export function getDesignSteps( state ) { return state.flow.steps.designSteps; } @@ -135,7 +135,7 @@ export function getDesignSteps(state) { * @param {*} state * @return {Array} Get Started Steps */ -export function getGetStartedSteps(state) { +export function getGetStartedSteps( state ) { return state.flow.steps.getStartedSteps; } @@ -145,7 +145,7 @@ export function getGetStartedSteps(state) { * @param {*} state * @return {string} Current Step Path */ -export function getCurrentStepPath(state) { +export function getCurrentStepPath( state ) { return state.flow.steps.currentStep; } @@ -155,8 +155,8 @@ export function getCurrentStepPath(state) { * @param {*} state * @return {Object} First Step */ -export function getFirstStep(state) { - return state.flow.steps.allSteps[0]; +export function getFirstStep( state ) { + return state.flow.steps.allSteps[ 0 ]; } /** @@ -165,8 +165,8 @@ export function getFirstStep(state) { * @param {*} state * @return {Object} Last Step */ -export function getLastStep(state) { - return state.flow.steps.allSteps[state.flow.steps.allSteps.length - 1]; +export function getLastStep( state ) { + return state.flow.steps.allSteps[ state.flow.steps.allSteps.length - 1 ]; } /** @@ -175,17 +175,17 @@ export function getLastStep(state) { * @param {*} state * @return {Object} Current Step */ -export function getCurrentStep(state) { - const filtered = filter(state.flow.steps.allSteps, [ +export function getCurrentStep( state ) { + const filtered = filter( state.flow.steps.allSteps, [ 'path', state.flow.steps.currentStep, - ]); - return filtered[0]; + ] ); + return filtered[ 0 ]; } -export function getStepFromPath(state, path) { - const filtered = filter(state.flow.steps.allSteps, ['path', path]); - return filtered[0]; +export function getStepFromPath( state, path ) { + const filtered = filter( state.flow.steps.allSteps, [ 'path', path ] ); + return filtered[ 0 ]; } /** @@ -194,17 +194,17 @@ export function getStepFromPath(state, path) { * @param {*} state * @return {object|null|false} Previous Step */ -export function getPreviousStep(state) { - const currentStepIndex = findIndex(state.flow.steps.allSteps, { +export function getPreviousStep( state ) { + const currentStepIndex = findIndex( state.flow.steps.allSteps, { path: state.flow.steps.currentStep, - }); - if (0 === currentStepIndex) { + } ); + if ( 0 === currentStepIndex ) { return null; // current step is the first step } - if (-1 === currentStepIndex) { + if ( -1 === currentStepIndex ) { return false; // could not find index } - return state.flow.steps.allSteps[currentStepIndex - 1]; + return state.flow.steps.allSteps[ currentStepIndex - 1 ]; } /** @@ -213,53 +213,53 @@ export function getPreviousStep(state) { * @param {*} state * @return {object|null|false} Next Step */ -export function getNextStep(state) { +export function getNextStep( state ) { const totalIndexes = state.flow.steps.allSteps.length - 1; - const currentStepIndex = findIndex(state.flow.steps.allSteps, { + const currentStepIndex = findIndex( state.flow.steps.allSteps, { path: state.flow.steps.currentStep, - }); - if (totalIndexes === currentStepIndex) { + } ); + if ( totalIndexes === currentStepIndex ) { return null; // currentStep is the last step } - if (-1 === currentStepIndex) { + if ( -1 === currentStepIndex ) { return false; // could not find index } - return state.flow.steps.allSteps[currentStepIndex + 1]; + return state.flow.steps.allSteps[ currentStepIndex + 1 ]; } -export function isSidebarOpened(state) { +export function isSidebarOpened( state ) { return state.sidebar.isOpen; } -export function getSidebarView(state) { +export function getSidebarView( state ) { return state.sidebar.view; } -export function getSidebars(state) { - return filter(state.sidebar.sidebars, ['enabled', true]); +export function getSidebars( state ) { + return filter( state.sidebar.sidebars, [ 'enabled', true ] ); } -export function getPreviewSettings(state) { +export function getPreviewSettings( state ) { return state.runtime.previewSettings.settings; } -export function getSettings(state) { +export function getSettings( state ) { return state.settings; } -export function getThemeStatus(state) { +export function getThemeStatus( state ) { return state.settings.themeStatus; } -export function getPluginsStatus(state) { +export function getPluginsStatus( state ) { return state.settings.pluginsStatus; } -export function getStoreInfoSteps(state) { +export function getStoreInfoSteps( state ) { return state.flow.steps.storeInfoSteps; } -export function getStepPreviewData(state) { +export function getStepPreviewData( state ) { return state.runtime.previewSettings.stepPreviewData; } @@ -269,7 +269,7 @@ export function getStepPreviewData(state) { * @param {*} state * @return {string} menu */ -export function getHeaderMenuData(state) { +export function getHeaderMenuData( state ) { return state.header.menu; } @@ -279,11 +279,11 @@ export function getHeaderMenuData(state) { * @param {*} state * @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; } @@ -293,14 +293,14 @@ export function getExpertsUrl(state) { * @param {*} state * @return {string} fullServiceCreativeTeamUrl */ -export function getfullServiceCreativeTeamUrl(state) { +export function getfullServiceCreativeTeamUrl( state ) { const fullServiceCreativeTeamInfo = state.runtime.currentBrand.fullServiceCreativeTeamInfo; const fullServiceCreativeTeamUrl = addQueryArgs( fullServiceCreativeTeamInfo?.defaultLink, fullServiceCreativeTeamInfo?.queryParams - ) + (fullServiceCreativeTeamInfo?.fragment || ''); + ) + ( fullServiceCreativeTeamInfo?.fragment || '' ); return fullServiceCreativeTeamUrl; } @@ -310,13 +310,13 @@ export function getfullServiceCreativeTeamUrl(state) { * @param {*} state * @return {string} techSupportUrl */ -export function getTechSupportUrl(state) { +export function getTechSupportUrl( state ) { const techSupportInfo = state.runtime.currentBrand.techSupportInfo; const techSupportUrl = addQueryArgs( techSupportInfo?.defaultLink, techSupportInfo?.queryParams - ) + (techSupportInfo?.fragment || ''); + ) + ( techSupportInfo?.fragment || '' ); return techSupportUrl; } @@ -326,6 +326,6 @@ export function getTechSupportUrl(state) { * @param {*} state * @return {string} pluginInstallHash */ -export function getPluginInstallHash(state) { +export function getPluginInstallHash( state ) { return state.runtime.pluginInstallHash; }