ab9fb14cea134a125af46c63b76fd4a24e44230d

Committed 30 Oct 2024 02:05PM UTC coverage: 54.638% (+0.05%) from 54.589%

Build # ab9fb14cea134a125af46c63b76fd4a24e44230d

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #21781 from Yoast/21724-new-general-page-updating-counters-properly-new

21724 new general page updating counters properly new

Run Details

7556 of 13543 branches covered (55.79%)

Branch coverage included in aggregate %.

29 of 41 new or added lines in 6 files covered. (70.73%)

1 existing line in 1 file now uncovered.

29706 of 54655 relevant lines covered (54.35%)

41704.26 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/js/src/first-time-configuration/first-time-configuration-steps.js

import apiFetch from "@wordpress/api-fetch";
import { useDispatch } from "@wordpress/data";
import { useCallback, useReducer, useState, useEffect } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { uniq } from "lodash";
import { STORE_NAME } from "../general/constants";
import { configurationReducer } from "./tailwind-components/helpers/index.js";
import SocialProfilesStep from "./tailwind-components/steps/social-profiles/social-profiles-step";
import Stepper, { Step } from "./tailwind-components/stepper";
import { ContinueButton, EditButton, ConfigurationStepButtons } from "./tailwind-components/configuration-stepper-buttons";
import { getInitialActiveStepIndex } from "./stepper-helper";
import IndexationStep from "./tailwind-components/steps/indexation/indexation-step";
import SiteRepresentationStep from "./tailwind-components/steps/site-representation/site-representation-step";
import PersonalPreferencesStep from "./tailwind-components/steps/personal-preferences/personal-preferences-step";
import FinishStep from "./tailwind-components/steps/finish/finish-step";
import { STEPS } from "./constants";

/* eslint-disable complexity */
/* eslint-disable react/jsx-no-bind */
/**
 * Updates the site representation in the database.
 *
 * @param {Object} state The state to save.
 *
 * @returns {Promise|boolean} A promise, or false if the call fails.
 */
async function updateSiteRepresentation( state ) {
        // Revert emptyChoice to the actual default: "company";
        const siteRepresentation = {
                /* eslint-disable camelcase */
                company_or_person: state.companyOrPerson === "emptyChoice" ? "company" : state.companyOrPerson,
                company_name: state.companyName,
                company_logo: state.companyLogo,
                company_logo_id: state.companyLogoId ? state.companyLogoId : 0,
                website_name: state.websiteName,
                person_logo: state.personLogo,
                person_logo_id: state.personLogoId ? state.personLogoId : 0,
                company_or_person_user_id: state.personId,
                /* eslint-enable camelcase */
        };

        const response = await apiFetch( {
                path: "yoast/v1/configuration/site_representation",
                method: "POST",
                data: siteRepresentation,
        } );
        return await response.json;
}

/**
 * Updates the social profiles in the database.
 *
 * @param {Object} state The state to save.
 *
 * @returns {Promise|boolean} A promise, or false if the call fails.
 */
async function updateSocialProfiles( state ) {
        const socialProfiles = {
                /* eslint-disable camelcase */
                facebook_site: state.socialProfiles.facebookUrl,
                twitter_site: state.socialProfiles.twitterUsername,
                other_social_urls: state.socialProfiles.otherSocialUrls,
                /* eslint-enable camelcase */
        };

        const response = await apiFetch( {
                path: "yoast/v1/configuration/social_profiles",
                method: "POST",
                data: socialProfiles,
        } );
        return await response.json;
}
/**
 * Updates the tracking option in the database.
 *
 * @param {Object} state The state to save.
 *
 * @returns {Promise|boolean} A promise, or false if the call fails.
 */
async function updateTracking( state ) {
        if ( state.tracking !== 0 && state.tracking !== 1 ) {
                throw "Value not set!";
        }

        const tracking = {
                tracking: state.tracking,
        };

        const response = await apiFetch( {
                path: "yoast/v1/configuration/enable_tracking",
                method: "POST",
                data: tracking,
        } );
        return await response.json;
}

/**
 * Saves the first time configuration finished steps in the database.
 *
 * @param {Array} finishedSteps Array of finished steps.
 *
 * @returns {Promise|boolean} A promise, or false if the call fails.
 */
async function saveFinishedSteps( finishedSteps ) {
        const response = await apiFetch( {
                path: "yoast/v1/configuration/save_configuration_state",
                method: "POST",
                data: { finishedSteps },
        } );
        return await response.json;
}

/**
 * Calculates the initial state from the window object.
 *
 * @param {Object}   windowObject   The object to base the initial state on.
 * @param {function} isStepFinished A function to determine whether a step is finished.
 *
 * @returns {Object} The initial state.
 */
function calculateInitialState( windowObject, isStepFinished ) {
        const {
                companyName,
                companyLogo,
                companyOrPersonOptions,
                shouldForceCompany,
                fallbackCompanyName,
                websiteName,
                fallbackWebsiteName,
        } = windowObject;
        let { companyOrPerson } = windowObject;
        if ( ( companyOrPerson === "company" && ( ! companyName && ! companyLogo ) && ! isStepFinished( STEPS.siteRepresentation ) ) || shouldForceCompany ) {
                // Set the stage for a prefilled step 2 in case the customer does seem to have consciously finished step 2 without setting data.
                companyOrPerson = "company";
        }

        return {
                ...windowObject,
                personId: Number( windowObject.personId ),
                personLogoId: Number( windowObject.personLogoId ),
                companyLogoId: Number( windowObject.companyLogoId ),
                tracking: Number( windowObject.tracking ),
                companyOrPerson,
                companyOrPersonOptions,
                errorFields: [],
                stepErrors: {},
                editedSteps: [],
                companyName: companyName || fallbackCompanyName,
                websiteName: websiteName || fallbackWebsiteName,
        };
}

/* eslint-enable max-len, react/prop-types */

/* eslint-disable max-statements */
/**
 * The first time configuration.
 *
 * @returns {WPElement} The FirstTimeConfigurationSteps component.
 */
export default function FirstTimeConfigurationSteps() {
        const { removeAlert } = useDispatch( STORE_NAME );
        const [ finishedSteps, setFinishedSteps ] = useState( window.wpseoFirstTimeConfigurationData.finishedSteps );

        const isStepFinished = useCallback( ( stepId ) => {
                return finishedSteps.includes( stepId );
        }, [ finishedSteps ] );

        const finishSteps = useCallback( ( stepId ) => {
                setFinishedSteps( prevState => uniq( [ ...prevState, stepId ] ) );
        }, [ setFinishedSteps ] );

        useEffect( () => {
                saveFinishedSteps( finishedSteps );
                window.wpseoFirstTimeConfigurationData.finishedSteps = finishedSteps;
        }, [ finishedSteps ] );

        const [ state, dispatch ] = useReducer( configurationReducer, {
                ...calculateInitialState( window.wpseoFirstTimeConfigurationData, isStepFinished ),
        } );
        const [ indexingState, setIndexingState ] = useState( () => window.yoastIndexingData.amount === "0" ? "already_done" : "idle" );
        const [ siteRepresentationEmpty, setSiteRepresentationEmpty ] = useState( false );
        const [ showRunIndexationAlert, setShowRunIndexationAlert ] = useState( false );

        const setStepError = useCallback( ( step, message ) => {
                dispatch( { type: "SET_STEP_ERROR", payload: { step, message } } );
        }, [] );

        const removeStepError = useCallback( ( step ) => {
                dispatch( { type: "REMOVE_STEP_ERROR", payload: step } );
        }, [] );

        /* Briefly override window variable and remove indexing notices, because indexingstate is reinitialized when navigating back and forth
        without triggering a reload, whereas the window variable remains stale. */
        useEffect( () => {
                if ( indexingState === "completed" ) {
                        removeAlert( "wpseo-reindex" );
                        window.yoastIndexingData.amount = "0";
                }
        }, [ indexingState, removeAlert ] );

        const isStep2Finished = isStepFinished( STEPS.siteRepresentation );
        const isStep3Finished = isStepFinished( STEPS.socialProfiles );
        const isStep4Finished = isStepFinished( STEPS.personalPreferences );

        const setTracking = useCallback( ( value ) => {
                dispatch( { type: "SET_TRACKING", payload: parseInt( value, 10 ) } );
        } );

        const setErrorFields = useCallback( ( value ) => {
                dispatch( { type: "SET_ERROR_FIELDS", payload: value } );
        } );

        const isCompanyAndEmpty = state.companyOrPerson === "company" && ( ! state.companyName || ( ! state.companyLogo && ! state.companyLogoFallback ) || ! state.websiteName );
        const isPersonAndEmpty = state.companyOrPerson === "person" && ( ! state.personId || ( ! state.personLogo && ! state.personLogoFallback ) || ! state.websiteName );

        /**
         * Runs checks of finishing the site representation step.
         *
         * @returns {Boolean|Promise} Returns either a Boolean for success/failure or a Promise that will resolve into a Boolean.
         */
        function updateOnFinishSiteRepresentation() {
                if ( ! siteRepresentationEmpty && isCompanyAndEmpty ) {
                        setSiteRepresentationEmpty( true );
                        return false;
                } else if ( ! siteRepresentationEmpty && isPersonAndEmpty ) {
                        setSiteRepresentationEmpty( true );
                        return false;
                } else if ( ! siteRepresentationEmpty && state.companyOrPerson === "emptyChoice" ) {
                        setSiteRepresentationEmpty( true );
                        return false;
                }
                setSiteRepresentationEmpty( state.companyOrPerson === "emptyChoice" || isCompanyAndEmpty || isPersonAndEmpty );
                return updateSiteRepresentation( state )
                        .then( () => {
                                setErrorFields( [] );
                                removeStepError( STEPS.siteRepresentation );
                                finishSteps( STEPS.siteRepresentation );
                                window.wpseoFirstTimeConfigurationData = { ...window.wpseoFirstTimeConfigurationData,  ...state };
                                return true;
                        } )
                        .catch( ( e ) => {
                                if ( e.failures ) {
                                        setErrorFields( e.failures );
                                        return false;
                                }
                                if ( e.message ) {
                                        setStepError( STEPS.siteRepresentation, e.message );
                                }
                                return false;
                        } );
        }

        /**
         * Runs checks of finishing the social profiles step.
         *
         * @returns {Promise|boolean} Returns either a Boolean for success/failure or a Promise.
         */
        function updateOnFinishSocialProfiles() {
                if ( state.companyOrPerson === "person" ) {
                        finishSteps( STEPS.socialProfiles );
                        return true;
                }

                return updateSocialProfiles( state )
                        .then( ( response ) => {
                                if ( response.success === false ) {
                                        setErrorFields( response.failures );
                                        return Promise.reject( "There were errors saving social profiles" );
                                }
                                return response;
                        } )
                        .then( () => {
                                setErrorFields( [] );
                                removeStepError( STEPS.socialProfiles );
                                finishSteps( STEPS.socialProfiles );
                        } )
                        .then( () => {
                                window.wpseoFirstTimeConfigurationData.socialProfiles = state.socialProfiles;
                                return true;
                        } )
                        .catch(
                                ( e ) => {
                                        if ( e.failures ) {
                                                setErrorFields( e.failures );
                                        }
                                        if ( e.message ) {
                                                setStepError( STEPS.socialProfiles, e.message );
                                        }
                                        return false;
                                }
                        );
        }

        /**
         * Runs checks of finishing the enable tracking step.
         *
         * @returns {Promise|boolean} Returns either a Boolean for success/failure or a Promise.
         */
        function updateOnFinishPersonalPreferences() {
                return updateTracking( state )
                        .then( () => finishSteps( STEPS.personalPreferences ) )
                        .then( () => {
                                removeStepError( STEPS.personalPreferences );
                                window.wpseoFirstTimeConfigurationData.tracking = state.tracking;
                                return true;
                        } )
                        .catch( e => {
                                if ( e.message ) {
                                        setStepError( STEPS.personalPreferences, e.message );
                                }
                                return false;
                        } );
        }

        const onOrganizationOrPersonChange = useCallback(
                ( value ) => dispatch( { type: "SET_COMPANY_OR_PERSON", payload: value } ),
                [ dispatch ]
        );

        const isStepperFinished = [
                isStep2Finished,
                isStep3Finished,
                isStep4Finished,
        ].every( Boolean );

        const [ isIndexationStepFinished, setIndexationStepFinished ] = useState( isStepFinished( STEPS.siteRepresentation ) );

        /* Duplicate site representation, because in reality, the first step cannot be saved.
        It's considered "finished" once at least the site representation has been done. */
        const savedSteps = [
                isIndexationStepFinished,
                isStepFinished( STEPS.siteRepresentation ),
                isStepFinished( STEPS.socialProfiles ),
                isStepFinished( STEPS.personalPreferences ),
                isStepperFinished,
        ];

        const [ activeStepIndex, setActiveStepIndex ] = useState( getInitialActiveStepIndex( savedSteps ) );

        const [ stepperFinishedOnce, setStepperFinishedOnce ] = useState( isStepperFinished );
        const [ isStepBeingEdited, setIsStepBeingEdited ] = useState( false );
        const [ showEditButton, setShowEditButton ] = useState( stepperFinishedOnce && ! isStepBeingEdited );

        /**
         * Save and continue functionality for the Indexation step.
         *
         * @returns {boolean} Whether the stepper can continue to the next step.
         */
        function beforeContinueIndexationStep() {
                // When: not already showing the alert AND indexation state is "idle" (not yet interacted with) AND indexation is not disabled.
                if ( ! showRunIndexationAlert && indexingState === "idle" && window.yoastIndexingData.disabled !== "1" ) {
                        // Then: show an alert to notify users that indexation is helpful.
                        setShowRunIndexationAlert( true );
                        return false;
                }

                setIndexationStepFinished( true );
                setIsStepBeingEdited( false );
                return true;
        }

        /**
         * Steps to take before editing.
         *
         * @returns {boolean} Always returns true to satisfy button needs.
         */
        function beforeEditing() {
                setShowEditButton( false );
                setIsStepBeingEdited( true );
                return true;
        }

        // The first time isStepperFinished is true, set stepperFinishedOnce to true.
        useEffect( () => {
                if ( isStepperFinished ) {
                        setStepperFinishedOnce( true );
                }
        }, [ isStepperFinished ] );

        // If stepperFinishedOnce changes or isStepBeingEdited changes, evaluate edit button state.
        useEffect( () => {
                setShowEditButton( stepperFinishedOnce && ! isStepBeingEdited );
        }, [ stepperFinishedOnce, isStepBeingEdited ] );

        /* eslint-disable max-len */
        useEffect( () => {
                /**
                 * Prevents the submission of the form upon pressing enter.
                 *
                 * @param {KeyboardEvent} event The keydown event this function is listening to.
                 *
                 * @returns {void}
                 */
                function preventEnterSubmit( event ) {
                        if ( event.key === "Enter" && document.querySelector( ".nav-tab.nav-tab-active" ).id === "first-time-configuration-tab" && event.target.tagName === "INPUT" ) {
                                event.preventDefault();
                        }
                }

                addEventListener( "keydown", preventEnterSubmit );
                return () => removeEventListener( "keydown", preventEnterSubmit );
        }, [] );

        // Used by admin.js to decide wether to show the confirmation dialog when user switches tabs in General.
        useEffect( () => {
                if ( state.editedSteps.includes( activeStepIndex + 1 ) || indexingState === "in_progress" ) {
                        window.isStepBeingEdited = true;
                } else {
                        window.isStepBeingEdited = false;
                }
        }, [ state.editedSteps, indexingState, activeStepIndex ] );

        /**
         * Handles the "before page unloads" event.
         *
         * @param {Window} event The "before page unloads" event.
         *
         * @returns {void}
         */
        const beforeUnloadEventHandler = useCallback( ( event ) => {
                /* Show the pop-up modal if the user wants to leave the first time configuration if:
                 - the current step is being edited but not saved, or
                 - the indexation process is still in progress
                 */
                if ( state.editedSteps.includes( activeStepIndex + 1 ) || indexingState === "in_progress" ) {
                        // Show the pup-up modal only if the user is in the first time configuration tab
                        if ( location.href.indexOf( "page=wpseo_dashboard#top#first-time-configuration" ) !== -1 || location.href.indexOf( "page=wpseo_dashboard#/first-time-configuration" ) !== -1 ) {
                                event.preventDefault();
                                event.returnValue = "";
                        }
                }
        }, [ state.editedSteps, indexingState, activeStepIndex ] );

        useEffect( () => {
                window.addEventListener( "beforeunload", beforeUnloadEventHandler );

                return () => {
                        window.removeEventListener( "beforeunload", beforeUnloadEventHandler );
                };
        }, [ beforeUnloadEventHandler ] );

        return (
                <Stepper
                        setActiveStepIndex={ setActiveStepIndex }
                        activeStepIndex={ activeStepIndex }
                        isStepperFinished={ isStepperFinished }
                >
                        <Step>
                                <Step.Header
                                        name={ __( "SEO data optimization", "wordpress-seo" ) }
                                        isFinished={ isIndexationStepFinished }
                                >
                                        <EditButton
                                                stepId={ STEPS.optimizeSeoData }
                                                beforeGo={ beforeEditing }
                                                isVisible={ showEditButton }
                                                additionalClasses={ "yst-ml-auto" }
                                        >
                                                { __( "Edit", "wordpress-seo" ) }
                                        </EditButton>
                                </Step.Header>
                                <Step.Content>
                                        <IndexationStep
                                                setIndexingState={ setIndexingState } indexingState={ indexingState }
                                                showRunIndexationAlert={ showRunIndexationAlert } isStepperFinished={ isStepperFinished }
                                        />
                                        <ContinueButton
                                                stepId={ STEPS.optimizeSeoData }
                                                additionalClasses="yst-mt-12"
                                                beforeGo={ beforeContinueIndexationStep }
                                                destination={ stepperFinishedOnce ? "last" : 1 }
                                        >
                                                { __( "Continue", "wordpress-seo" ) }
                                        </ContinueButton>
                                </Step.Content>
                        </Step>
                        <Step>
                                <Step.Header
                                        name={ __( "Site representation", "wordpress-seo" ) }
                                        isFinished={ isStep2Finished }
                                >
                                        <EditButton
                                                stepId={ STEPS.siteRepresentation }
                                                beforeGo={ beforeEditing }
                                                isVisible={ showEditButton }
                                                additionalClasses={ "yst-ml-auto" }
                                        >
                                                { __( "Edit", "wordpress-seo" ) }
                                        </EditButton>
                                </Step.Header>
                                <Step.Content>
                                        <SiteRepresentationStep
                                                onOrganizationOrPersonChange={ onOrganizationOrPersonChange }
                                                dispatch={ dispatch }
                                                state={ state }
                                                siteRepresentationEmpty={ siteRepresentationEmpty }
                                        />
                                        <Step.Error id="yoast-site-representation-step-error" message={ state.stepErrors[ STEPS.siteRepresentation ] || "" } />
                                        <ConfigurationStepButtons
                                                stepId={ STEPS.siteRepresentation }
                                                stepperFinishedOnce={ stepperFinishedOnce }
                                                saveFunction={ updateOnFinishSiteRepresentation }
                                                setEditState={ setIsStepBeingEdited }
                                        />
                                </Step.Content>
                        </Step>
                        <Step>
                                <Step.Header
                                        name={ __( "Social profiles", "wordpress-seo" ) }
                                        isFinished={ isStep3Finished }
                                >
                                        <EditButton
                                                stepId={ STEPS.socialProfiles }
                                                beforeGo={ beforeEditing }
                                                isVisible={ showEditButton }
                                                additionalClasses={ "yst-ml-auto" }
                                        >
                                                { __( "Edit", "wordpress-seo" ) }
                                        </EditButton>
                                </Step.Header>
                                <Step.Content>
                                        <SocialProfilesStep state={ state } dispatch={ dispatch } setErrorFields={ setErrorFields } />
                                        <Step.Error id="yoast-social-profiles-step-error" message={ state.stepErrors[ STEPS.socialProfiles ] || "" } />
                                        <ConfigurationStepButtons
                                                stepId={ STEPS.socialProfiles }
                                                stepperFinishedOnce={ stepperFinishedOnce }
                                                saveFunction={ updateOnFinishSocialProfiles }
                                                setEditState={ setIsStepBeingEdited }
                                        />
                                </Step.Content>
                        </Step>
                        <Step>
                                <Step.Header
                                        name={ __( "Personal preferences", "wordpress-seo" ) }
                                        isFinished={ isStep4Finished }
                                >
                                        <EditButton
                                                stepId={ STEPS.personalPreferences }
                                                beforeGo={ beforeEditing }
                                                isVisible={ showEditButton }
                                                additionalClasses={ "yst-ml-auto" }
                                        >
                                                { __( "Edit", "wordpress-seo" ) }
                                        </EditButton>
                                </Step.Header>
                                <Step.Content>
                                        <PersonalPreferencesStep state={ state } setTracking={ setTracking } />
                                        <Step.Error id="yoast-personal-preferences-step-error" message={ state.stepErrors[ STEPS.personalPreferences ] || "" } />
                                        <ConfigurationStepButtons
                                                stepId={ STEPS.personalPreferences }
                                                stepperFinishedOnce={ stepperFinishedOnce }
                                                saveFunction={ updateOnFinishPersonalPreferences }
                                                setEditState={ setIsStepBeingEdited }
                                        />
                                </Step.Content>
                        </Step>
                        <Step>
                                <Step.Header
                                        name={ __( "Finish configuration", "wordpress-seo" ) }
                                        isFinished={ isStepperFinished }
                                />
                                <Step.Content>
                                        <FinishStep />
                                </Step.Content>
                        </Step>
                </Stepper>
        );
}

/* eslint-enable max-len */
/* eslint-enable complexity */
/* eslint-enable react/jsx-no-bind */
/* eslint-enable max-statements */

1	import apiFetch from "@wordpress/api-fetch";
2	import { useDispatch } from "@wordpress/data";
3	import { useCallback, useReducer, useState, useEffect } from "@wordpress/element";
4	import { __ } from "@wordpress/i18n";
5	import { uniq } from "lodash";
6	import { STORE_NAME } from "../general/constants";
7	import { configurationReducer } from "./tailwind-components/helpers/index.js";
8	import SocialProfilesStep from "./tailwind-components/steps/social-profiles/social-profiles-step";
9	import Stepper, { Step } from "./tailwind-components/stepper";
10	import { ContinueButton, EditButton, ConfigurationStepButtons } from "./tailwind-components/configuration-stepper-buttons";
11	import { getInitialActiveStepIndex } from "./stepper-helper";
12	import IndexationStep from "./tailwind-components/steps/indexation/indexation-step";
13	import SiteRepresentationStep from "./tailwind-components/steps/site-representation/site-representation-step";
14	import PersonalPreferencesStep from "./tailwind-components/steps/personal-preferences/personal-preferences-step";
15	import FinishStep from "./tailwind-components/steps/finish/finish-step";
16	import { STEPS } from "./constants";
17
18	/* eslint-disable complexity */
19	/* eslint-disable react/jsx-no-bind */
20	/**
21	* Updates the site representation in the database.
22	*
23	* @param {Object} state The state to save.
24	*
25	* @returns {Promise\|boolean} A promise, or false if the call fails.
26	*/
27	async function updateSiteRepresentation( state ) {
28	// Revert emptyChoice to the actual default: "company";
29	const siteRepresentation = {	×
30	/* eslint-disable camelcase */
31	company_or_person: state.companyOrPerson === "emptyChoice" ? "company" : state.companyOrPerson,	×
32	company_name: state.companyName,
33	company_logo: state.companyLogo,
34	company_logo_id: state.companyLogoId ? state.companyLogoId : 0,	×
35	website_name: state.websiteName,
36	person_logo: state.personLogo,
37	person_logo_id: state.personLogoId ? state.personLogoId : 0,	×
38	company_or_person_user_id: state.personId,
39	/* eslint-enable camelcase */
40	};
41
42	const response = await apiFetch( {	×
43	path: "yoast/v1/configuration/site_representation",
44	method: "POST",
45	data: siteRepresentation,
46	} );
47	return await response.json;	×
48	}
49
50	/**
51	* Updates the social profiles in the database.
52	*
53	* @param {Object} state The state to save.
54	*
55	* @returns {Promise\|boolean} A promise, or false if the call fails.
56	*/
57	async function updateSocialProfiles( state ) {
58	const socialProfiles = {	×
59	/* eslint-disable camelcase */
60	facebook_site: state.socialProfiles.facebookUrl,
61	twitter_site: state.socialProfiles.twitterUsername,
62	other_social_urls: state.socialProfiles.otherSocialUrls,
63	/* eslint-enable camelcase */
64	};
65
66	const response = await apiFetch( {	×
67	path: "yoast/v1/configuration/social_profiles",
68	method: "POST",
69	data: socialProfiles,
70	} );
71	return await response.json;	×
72	}
73	/**
74	* Updates the tracking option in the database.
75	*
76	* @param {Object} state The state to save.
77	*
78	* @returns {Promise\|boolean} A promise, or false if the call fails.
79	*/
80	async function updateTracking( state ) {
81	if ( state.tracking !== 0 && state.tracking !== 1 ) {	×
82	throw "Value not set!";	×
83	}
84
85	const tracking = {	×
86	tracking: state.tracking,
87	};
88
89	const response = await apiFetch( {	×
90	path: "yoast/v1/configuration/enable_tracking",
91	method: "POST",
92	data: tracking,
93	} );
94	return await response.json;	×
95	}
96
97	/**
98	* Saves the first time configuration finished steps in the database.
99	*
100	* @param {Array} finishedSteps Array of finished steps.
101	*
102	* @returns {Promise\|boolean} A promise, or false if the call fails.
103	*/
104	async function saveFinishedSteps( finishedSteps ) {
105	const response = await apiFetch( {	×
106	path: "yoast/v1/configuration/save_configuration_state",
107	method: "POST",
108	data: { finishedSteps },
109	} );
110	return await response.json;	×
111	}
112
113	/**
114	* Calculates the initial state from the window object.
115	*
116	* @param {Object} windowObject The object to base the initial state on.
117	* @param {function} isStepFinished A function to determine whether a step is finished.
118	*
119	* @returns {Object} The initial state.
120	*/
121	function calculateInitialState( windowObject, isStepFinished ) {
122	const {
123	companyName,
124	companyLogo,
125	companyOrPersonOptions,
126	shouldForceCompany,
127	fallbackCompanyName,
128	websiteName,
129	fallbackWebsiteName,
130	} = windowObject;	×
131	let { companyOrPerson } = windowObject;	×
132	if ( ( companyOrPerson === "company" && ( ! companyName && ! companyLogo ) && ! isStepFinished( STEPS.siteRepresentation ) ) \|\| shouldForceCompany ) {	×
133	// Set the stage for a prefilled step 2 in case the customer does seem to have consciously finished step 2 without setting data.
134	companyOrPerson = "company";	×
135	}
136
137	return {	×
138	...windowObject,
139	personId: Number( windowObject.personId ),
140	personLogoId: Number( windowObject.personLogoId ),
141	companyLogoId: Number( windowObject.companyLogoId ),
142	tracking: Number( windowObject.tracking ),
143	companyOrPerson,
144	companyOrPersonOptions,
145	errorFields: [],
146	stepErrors: {},
147	editedSteps: [],
148	companyName: companyName \|\| fallbackCompanyName,	×
149	websiteName: websiteName \|\| fallbackWebsiteName,	×
150	};
151	}
152
153	/* eslint-enable max-len, react/prop-types */
154
155	/* eslint-disable max-statements */
156	/**
157	* The first time configuration.
158	*
159	* @returns {WPElement} The FirstTimeConfigurationSteps component.
160	*/
161	export default function FirstTimeConfigurationSteps() {
NEW 162	const { removeAlert } = useDispatch( STORE_NAME );	×
UNCOV 163	const [ finishedSteps, setFinishedSteps ] = useState( window.wpseoFirstTimeConfigurationData.finishedSteps );	×
164
165	const isStepFinished = useCallback( ( stepId ) => {	×
166	return finishedSteps.includes( stepId );	×
167	}, [ finishedSteps ] );
168
169	const finishSteps = useCallback( ( stepId ) => {	×
170	setFinishedSteps( prevState => uniq( [ ...prevState, stepId ] ) );	×
171	}, [ setFinishedSteps ] );
172
173	useEffect( () => {	×
174	saveFinishedSteps( finishedSteps );	×
175	window.wpseoFirstTimeConfigurationData.finishedSteps = finishedSteps;	×
176	}, [ finishedSteps ] );
177
178	const [ state, dispatch ] = useReducer( configurationReducer, {	×
179	...calculateInitialState( window.wpseoFirstTimeConfigurationData, isStepFinished ),
180	} );
181	const [ indexingState, setIndexingState ] = useState( () => window.yoastIndexingData.amount === "0" ? "already_done" : "idle" );	×
182	const [ siteRepresentationEmpty, setSiteRepresentationEmpty ] = useState( false );	×
183	const [ showRunIndexationAlert, setShowRunIndexationAlert ] = useState( false );	×
184
185	const setStepError = useCallback( ( step, message ) => {	×
186	dispatch( { type: "SET_STEP_ERROR", payload: { step, message } } );	×
187	}, [] );
188
189	const removeStepError = useCallback( ( step ) => {	×
190	dispatch( { type: "REMOVE_STEP_ERROR", payload: step } );	×
191	}, [] );
192
193	/* Briefly override window variable and remove indexing notices, because indexingstate is reinitialized when navigating back and forth
194	without triggering a reload, whereas the window variable remains stale. */
195	useEffect( () => {	×
196	if ( indexingState === "completed" ) {	×
NEW 197	removeAlert( "wpseo-reindex" );	×
198	window.yoastIndexingData.amount = "0";	×
199	}
200	}, [ indexingState, removeAlert ] );
201
202	const isStep2Finished = isStepFinished( STEPS.siteRepresentation );	×
203	const isStep3Finished = isStepFinished( STEPS.socialProfiles );	×
204	const isStep4Finished = isStepFinished( STEPS.personalPreferences );	×
205
206	const setTracking = useCallback( ( value ) => {	×
207	dispatch( { type: "SET_TRACKING", payload: parseInt( value, 10 ) } );	×
208	} );
209
210	const setErrorFields = useCallback( ( value ) => {	×
211	dispatch( { type: "SET_ERROR_FIELDS", payload: value } );	×
212	} );
213
214	const isCompanyAndEmpty = state.companyOrPerson === "company" && ( ! state.companyName \|\| ( ! state.companyLogo && ! state.companyLogoFallback ) \|\| ! state.websiteName );	×
215	const isPersonAndEmpty = state.companyOrPerson === "person" && ( ! state.personId \|\| ( ! state.personLogo && ! state.personLogoFallback ) \|\| ! state.websiteName );	×
216
217	/**
218	* Runs checks of finishing the site representation step.
219	*
220	* @returns {Boolean\|Promise} Returns either a Boolean for success/failure or a Promise that will resolve into a Boolean.
221	*/
222	function updateOnFinishSiteRepresentation() {
223	if ( ! siteRepresentationEmpty && isCompanyAndEmpty ) {	×
224	setSiteRepresentationEmpty( true );	×
225	return false;	×
226	} else if ( ! siteRepresentationEmpty && isPersonAndEmpty ) {	×
227	setSiteRepresentationEmpty( true );	×
228	return false;	×
229	} else if ( ! siteRepresentationEmpty && state.companyOrPerson === "emptyChoice" ) {	×
230	setSiteRepresentationEmpty( true );	×
231	return false;	×
232	}
233	setSiteRepresentationEmpty( state.companyOrPerson === "emptyChoice" \|\| isCompanyAndEmpty \|\| isPersonAndEmpty );	×
234	return updateSiteRepresentation( state )	×
235	.then( () => {
236	setErrorFields( [] );	×
237	removeStepError( STEPS.siteRepresentation );	×
238	finishSteps( STEPS.siteRepresentation );	×
239	window.wpseoFirstTimeConfigurationData = { ...window.wpseoFirstTimeConfigurationData, ...state };	×
240	return true;	×
241	} )
242	.catch( ( e ) => {
243	if ( e.failures ) {	×
244	setErrorFields( e.failures );	×
245	return false;	×
246	}
247	if ( e.message ) {	×
248	setStepError( STEPS.siteRepresentation, e.message );	×
249	}
250	return false;	×
251	} );
252	}
253
254	/**
255	* Runs checks of finishing the social profiles step.
256	*
257	* @returns {Promise\|boolean} Returns either a Boolean for success/failure or a Promise.
258	*/
259	function updateOnFinishSocialProfiles() {
260	if ( state.companyOrPerson === "person" ) {	×
261	finishSteps( STEPS.socialProfiles );	×
262	return true;	×
263	}
264
265	return updateSocialProfiles( state )	×
266	.then( ( response ) => {
267	if ( response.success === false ) {	×
268	setErrorFields( response.failures );	×
269	return Promise.reject( "There were errors saving social profiles" );	×
270	}
271	return response;	×
272	} )
273	.then( () => {
274	setErrorFields( [] );	×
275	removeStepError( STEPS.socialProfiles );	×
276	finishSteps( STEPS.socialProfiles );	×
277	} )
278	.then( () => {
279	window.wpseoFirstTimeConfigurationData.socialProfiles = state.socialProfiles;	×
280	return true;	×
281	} )
282	.catch(
283	( e ) => {
284	if ( e.failures ) {	×
285	setErrorFields( e.failures );	×
286	}
287	if ( e.message ) {	×
288	setStepError( STEPS.socialProfiles, e.message );	×
289	}
290	return false;	×
291	}
292	);
293	}
294
295	/**
296	* Runs checks of finishing the enable tracking step.
297	*
298	* @returns {Promise\|boolean} Returns either a Boolean for success/failure or a Promise.
299	*/
300	function updateOnFinishPersonalPreferences() {
301	return updateTracking( state )	×
302	.then( () => finishSteps( STEPS.personalPreferences ) )	×
303	.then( () => {
304	removeStepError( STEPS.personalPreferences );	×
305	window.wpseoFirstTimeConfigurationData.tracking = state.tracking;	×
306	return true;	×
307	} )
308	.catch( e => {
309	if ( e.message ) {	×
310	setStepError( STEPS.personalPreferences, e.message );	×
311	}
312	return false;	×
313	} );
314	}
315
316	const onOrganizationOrPersonChange = useCallback(	×
317	( value ) => dispatch( { type: "SET_COMPANY_OR_PERSON", payload: value } ),	×
318	[ dispatch ]
319	);
320
321	const isStepperFinished = [	×
322	isStep2Finished,
323	isStep3Finished,
324	isStep4Finished,
325	].every( Boolean );
326
327	const [ isIndexationStepFinished, setIndexationStepFinished ] = useState( isStepFinished( STEPS.siteRepresentation ) );	×
328
329	/* Duplicate site representation, because in reality, the first step cannot be saved.
330	It's considered "finished" once at least the site representation has been done. */
331	const savedSteps = [	×
332	isIndexationStepFinished,
333	isStepFinished( STEPS.siteRepresentation ),
334	isStepFinished( STEPS.socialProfiles ),
335	isStepFinished( STEPS.personalPreferences ),
336	isStepperFinished,
337	];
338
339	const [ activeStepIndex, setActiveStepIndex ] = useState( getInitialActiveStepIndex( savedSteps ) );	×
340
341	const [ stepperFinishedOnce, setStepperFinishedOnce ] = useState( isStepperFinished );	×
342	const [ isStepBeingEdited, setIsStepBeingEdited ] = useState( false );	×
343	const [ showEditButton, setShowEditButton ] = useState( stepperFinishedOnce && ! isStepBeingEdited );	×
344
345	/**
346	* Save and continue functionality for the Indexation step.
347	*
348	* @returns {boolean} Whether the stepper can continue to the next step.
349	*/
350	function beforeContinueIndexationStep() {
351	// When: not already showing the alert AND indexation state is "idle" (not yet interacted with) AND indexation is not disabled.
352	if ( ! showRunIndexationAlert && indexingState === "idle" && window.yoastIndexingData.disabled !== "1" ) {	×
353	// Then: show an alert to notify users that indexation is helpful.
354	setShowRunIndexationAlert( true );	×
355	return false;	×
356	}
357
358	setIndexationStepFinished( true );	×
359	setIsStepBeingEdited( false );	×
360	return true;	×
361	}
362
363	/**
364	* Steps to take before editing.
365	*
366	* @returns {boolean} Always returns true to satisfy button needs.
367	*/
368	function beforeEditing() {
369	setShowEditButton( false );	×
370	setIsStepBeingEdited( true );	×
371	return true;	×
372	}
373
374	// The first time isStepperFinished is true, set stepperFinishedOnce to true.
375	useEffect( () => {	×
376	if ( isStepperFinished ) {	×
377	setStepperFinishedOnce( true );	×
378	}
379	}, [ isStepperFinished ] );
380
381	// If stepperFinishedOnce changes or isStepBeingEdited changes, evaluate edit button state.
382	useEffect( () => {	×
383	setShowEditButton( stepperFinishedOnce && ! isStepBeingEdited );	×
384	}, [ stepperFinishedOnce, isStepBeingEdited ] );
385
386	/* eslint-disable max-len */
387	useEffect( () => {	×
388	/**
389	* Prevents the submission of the form upon pressing enter.
390	*
391	* @param {KeyboardEvent} event The keydown event this function is listening to.
392	*
393	* @returns {void}
394	*/
395	function preventEnterSubmit( event ) {
396	if ( event.key === "Enter" && document.querySelector( ".nav-tab.nav-tab-active" ).id === "first-time-configuration-tab" && event.target.tagName === "INPUT" ) {	×
397	event.preventDefault();	×
398	}
399	}
400
401	addEventListener( "keydown", preventEnterSubmit );	×
402	return () => removeEventListener( "keydown", preventEnterSubmit );	×
403	}, [] );
404
405	// Used by admin.js to decide wether to show the confirmation dialog when user switches tabs in General.
406	useEffect( () => {	×
407	if ( state.editedSteps.includes( activeStepIndex + 1 ) \|\| indexingState === "in_progress" ) {	×
408	window.isStepBeingEdited = true;	×
409	} else {
410	window.isStepBeingEdited = false;	×
411	}
412	}, [ state.editedSteps, indexingState, activeStepIndex ] );
413
414	/**
415	* Handles the "before page unloads" event.
416	*
417	* @param {Window} event The "before page unloads" event.
418	*
419	* @returns {void}
420	*/
421	const beforeUnloadEventHandler = useCallback( ( event ) => {	×
422	/* Show the pop-up modal if the user wants to leave the first time configuration if:
423	- the current step is being edited but not saved, or
424	- the indexation process is still in progress
425	*/
426	if ( state.editedSteps.includes( activeStepIndex + 1 ) \|\| indexingState === "in_progress" ) {	×
427	// Show the pup-up modal only if the user is in the first time configuration tab
428	if ( location.href.indexOf( "page=wpseo_dashboard#top#first-time-configuration" ) !== -1 \|\| location.href.indexOf( "page=wpseo_dashboard#/first-time-configuration" ) !== -1 ) {	×
429	event.preventDefault();	×
430	event.returnValue = "";	×
431	}
432	}
433	}, [ state.editedSteps, indexingState, activeStepIndex ] );
434
435	useEffect( () => {	×
436	window.addEventListener( "beforeunload", beforeUnloadEventHandler );	×
437
438	return () => {	×
439	window.removeEventListener( "beforeunload", beforeUnloadEventHandler );	×
440	};
441	}, [ beforeUnloadEventHandler ] );
442
443	return (	×
444	<Stepper
445	setActiveStepIndex={ setActiveStepIndex }
446	activeStepIndex={ activeStepIndex }
447	isStepperFinished={ isStepperFinished }
448	>
449	<Step>
450	<Step.Header
451	name={ __( "SEO data optimization", "wordpress-seo" ) }
452	isFinished={ isIndexationStepFinished }
453	>
454	<EditButton
455	stepId={ STEPS.optimizeSeoData }
456	beforeGo={ beforeEditing }
457	isVisible={ showEditButton }
458	additionalClasses={ "yst-ml-auto" }
459	>
460	{ __( "Edit", "wordpress-seo" ) }
461	</EditButton>
462	</Step.Header>
463	<Step.Content>
464	<IndexationStep
465	setIndexingState={ setIndexingState } indexingState={ indexingState }
466	showRunIndexationAlert={ showRunIndexationAlert } isStepperFinished={ isStepperFinished }
467	/>
468	<ContinueButton
469	stepId={ STEPS.optimizeSeoData }
470	additionalClasses="yst-mt-12"
471	beforeGo={ beforeContinueIndexationStep }
472	destination={ stepperFinishedOnce ? "last" : 1 }	×
473	>
474	{ __( "Continue", "wordpress-seo" ) }
475	</ContinueButton>
476	</Step.Content>
477	</Step>
478	<Step>
479	<Step.Header
480	name={ __( "Site representation", "wordpress-seo" ) }
481	isFinished={ isStep2Finished }
482	>
483	<EditButton
484	stepId={ STEPS.siteRepresentation }
485	beforeGo={ beforeEditing }
486	isVisible={ showEditButton }
487	additionalClasses={ "yst-ml-auto" }
488	>
489	{ __( "Edit", "wordpress-seo" ) }
490	</EditButton>
491	</Step.Header>
492	<Step.Content>
493	<SiteRepresentationStep
494	onOrganizationOrPersonChange={ onOrganizationOrPersonChange }
495	dispatch={ dispatch }
496	state={ state }
497	siteRepresentationEmpty={ siteRepresentationEmpty }
498	/>
499	<Step.Error id="yoast-site-representation-step-error" message={ state.stepErrors[ STEPS.siteRepresentation ] \|\| "" } />	×
500	<ConfigurationStepButtons
501	stepId={ STEPS.siteRepresentation }
502	stepperFinishedOnce={ stepperFinishedOnce }
503	saveFunction={ updateOnFinishSiteRepresentation }
504	setEditState={ setIsStepBeingEdited }
505	/>
506	</Step.Content>
507	</Step>
508	<Step>
509	<Step.Header
510	name={ __( "Social profiles", "wordpress-seo" ) }
511	isFinished={ isStep3Finished }
512	>
513	<EditButton
514	stepId={ STEPS.socialProfiles }
515	beforeGo={ beforeEditing }
516	isVisible={ showEditButton }
517	additionalClasses={ "yst-ml-auto" }
518	>
519	{ __( "Edit", "wordpress-seo" ) }
520	</EditButton>
521	</Step.Header>
522	<Step.Content>
523	<SocialProfilesStep state={ state } dispatch={ dispatch } setErrorFields={ setErrorFields } />
524	<Step.Error id="yoast-social-profiles-step-error" message={ state.stepErrors[ STEPS.socialProfiles ] \|\| "" } />	×
525	<ConfigurationStepButtons
526	stepId={ STEPS.socialProfiles }
527	stepperFinishedOnce={ stepperFinishedOnce }
528	saveFunction={ updateOnFinishSocialProfiles }
529	setEditState={ setIsStepBeingEdited }
530	/>
531	</Step.Content>
532	</Step>
533	<Step>
534	<Step.Header
535	name={ __( "Personal preferences", "wordpress-seo" ) }
536	isFinished={ isStep4Finished }
537	>
538	<EditButton
539	stepId={ STEPS.personalPreferences }
540	beforeGo={ beforeEditing }
541	isVisible={ showEditButton }
542	additionalClasses={ "yst-ml-auto" }
543	>
544	{ __( "Edit", "wordpress-seo" ) }
545	</EditButton>
546	</Step.Header>
547	<Step.Content>
548	<PersonalPreferencesStep state={ state } setTracking={ setTracking } />
549	<Step.Error id="yoast-personal-preferences-step-error" message={ state.stepErrors[ STEPS.personalPreferences ] \|\| "" } />	×
550	<ConfigurationStepButtons
551	stepId={ STEPS.personalPreferences }
552	stepperFinishedOnce={ stepperFinishedOnce }
553	saveFunction={ updateOnFinishPersonalPreferences }
554	setEditState={ setIsStepBeingEdited }
555	/>
556	</Step.Content>
557	</Step>
558	<Step>
559	<Step.Header
560	name={ __( "Finish configuration", "wordpress-seo" ) }
561	isFinished={ isStepperFinished }
562	/>
563	<Step.Content>
564	<FinishStep />
565	</Step.Content>
566	</Step>
567	</Stepper>
568	);
569	}
570
571	/* eslint-enable max-len */
572	/* eslint-enable complexity */
573	/* eslint-enable react/jsx-no-bind */
574	/* eslint-enable max-statements */

Yoast / wordpress-seo / ab9fb14cea134a125af46c63b76fd4a24e44230d

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous