import { routes as aiRoutes } from '@help-center/pages/AIChat';

[0] Fix | Delete

import { routes as dashRoutes } from '@help-center/pages/Dashboard';

[1] Fix | Delete

import { routes as kbRoutes } from '@help-center/pages/KnowledgeBase';

[2] Fix | Delete

import { routes as tourRoutes } from '@help-center/pages/Tours';

[3] Fix | Delete

import { safeParseJson } from '@shared/lib/parsing';

[4] Fix | Delete

import { useActivityStore } from '@shared/state/activity';

[5] Fix | Delete

import apiFetch from '@wordpress/api-fetch';

[6] Fix | Delete

import { useCallback, useEffect } from '@wordpress/element';

[7] Fix | Delete

import { create } from 'zustand';

[8] Fix | Delete

import { createJSONStorage, devtools, persist } from 'zustand/middleware';

[9] Fix | Delete

[10] Fix | Delete

const pages = [...dashRoutes, ...kbRoutes, ...tourRoutes, ...aiRoutes];

[11] Fix | Delete

[12] Fix | Delete

const initialState = {

[13] Fix | Delete

history: [],

[14] Fix | Delete

viewedPages: [],

[15] Fix | Delete

current: null,

[16] Fix | Delete

};

[17] Fix | Delete

[18] Fix | Delete

const state = (set, get) => ({

[19] Fix | Delete

...initialState,

[20] Fix | Delete

// initialize the state with default values

[21] Fix | Delete

...(safeParseJson(window.extHelpCenterData.userData.routerData)?.state ?? {}),

[22] Fix | Delete

goBack: () => {

[23] Fix | Delete

if (get().history.length < 2) return;

[24] Fix | Delete

const nextPage = get().history[1];

[25] Fix | Delete

useActivityStore.getState().incrementActivity(`hc-${nextPage.slug}-back`);

[26] Fix | Delete

set((state) => ({

[27] Fix | Delete

history: state.history.slice(1),

[28] Fix | Delete

current: nextPage,

[29] Fix | Delete

}));

[30] Fix | Delete

},

[31] Fix | Delete

setCurrent: (page) => {

[32] Fix | Delete

if (!page) return;

[33] Fix | Delete

// If history is the same, dont add (they pressed the same button)

[34] Fix | Delete

if (get().history[0]?.slug === page.slug) return;

[35] Fix | Delete

const state = get();

[36] Fix | Delete

const lastViewedAt = new Date().toISOString();

[37] Fix | Delete

const firstViewedAt = lastViewedAt;

[38] Fix | Delete

const visited = state.viewedPages.find((a) => a.slug === page.slug);

[39] Fix | Delete

const viewedPages = [

[40] Fix | Delete

// Remove the page if it's already in the list

[41] Fix | Delete

...state.viewedPages.filter((a) => a.slug !== page.slug),

[42] Fix | Delete

// Either add the page or update the count

[43] Fix | Delete

visited

[44] Fix | Delete

? { ...visited, count: Number(visited.count) + 1, lastViewedAt }

[45] Fix | Delete

: {

[46] Fix | Delete

slug: page.slug,

[47] Fix | Delete

firstViewedAt,

[48] Fix | Delete

lastViewedAt,

[49] Fix | Delete

count: 1,

[50] Fix | Delete

},

[51] Fix | Delete

];

[52] Fix | Delete

// Persist the detailed history to the server (don't wait for response)

[53] Fix | Delete

apiFetch({

[54] Fix | Delete

path: '/extendify/v1/help-center/router-data',

[55] Fix | Delete

method: 'POST',

[56] Fix | Delete

data: { state: { viewedPages } },

[57] Fix | Delete

});

[58] Fix | Delete

[59] Fix | Delete

set({

[60] Fix | Delete

history: [page, ...state.history].filter(Boolean),

[61] Fix | Delete

current: page,

[62] Fix | Delete

viewedPages,

[63] Fix | Delete

});

[64] Fix | Delete

},

[65] Fix | Delete

reset: () => set({ ...initialState }),

[66] Fix | Delete

});

[67] Fix | Delete

[68] Fix | Delete

const useRouterState = create(

[69] Fix | Delete

persist(devtools(state, { name: 'Extendify Help Center Router' }), {

[70] Fix | Delete

name: `extendify-help-center-router-${window.extSharedData.siteId}`,

[71] Fix | Delete

storage: createJSONStorage(() => sessionStorage),

[72] Fix | Delete

partialize: ({ history, current }) => {

[73] Fix | Delete

// remove the component from the current page

[74] Fix | Delete

return { history, current: { ...current, component: null } };

[75] Fix | Delete

},

[76] Fix | Delete

}),

[77] Fix | Delete

);

[78] Fix | Delete

[79] Fix | Delete

export const useRouter = () => {

[80] Fix | Delete

const { current, setCurrent, history, goBack, reset } = useRouterState();

[81] Fix | Delete

const Component =

[82] Fix | Delete

current?.component ??

[83] Fix | Delete

pages.find((a) => a.slug === current?.slug)?.component ??

[84] Fix | Delete

(() => null);

[85] Fix | Delete

[86] Fix | Delete

useEffect(() => {

[87] Fix | Delete

if (current) return;

[88] Fix | Delete

setCurrent(pages[0]);

[89] Fix | Delete

}, [current, setCurrent]);

[90] Fix | Delete

return {

[91] Fix | Delete

current,

[92] Fix | Delete

CurrentPage: useCallback(

[93] Fix | Delete

() => (

[94] Fix | Delete

<section aria-live="polite" className="h-full">

[95] Fix | Delete

{/* Announce to SR on change */}

[96] Fix | Delete

<h1 className="sr-only">{current?.title}</h1>

[97] Fix | Delete

<Component />

[98] Fix | Delete

</section>

[99] Fix | Delete

),

[100] Fix | Delete

[current],

[101] Fix | Delete

),

[102] Fix | Delete

navigateTo: (slug) => {

[103] Fix | Delete

const page = pages.find((a) => a.slug === slug);

[104] Fix | Delete

if (!page) return setCurrent(pages[0]);

[105] Fix | Delete

[106] Fix | Delete

useActivityStore.getState().incrementActivity(`hc-${page.slug}`);

[107] Fix | Delete

setCurrent(page);

[108] Fix | Delete

},

[109] Fix | Delete

goBack,

[110] Fix | Delete

history,

[111] Fix | Delete

reset,

[112] Fix | Delete

};

[113] Fix | Delete

};

[114] Fix | Delete

[115] Fix | Delete