import apiFetch from '@wordpress/api-fetch';
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
const storage = {
setItem: (_name, store) =>
apiFetch({
path: '/extendify/v1/shared/update-user-meta',
method: 'POST',
data: {
option: 'notification_state',
value: { cards: store.state.cards },
},
}),
};
const now = () => new Date().toISOString();
const merge = (cards, slug, changes) => ({
...cards,
[slug]: { ...cards[slug], ...changes },
});
const state = (set, get) => ({
// A per-view log would grow with every admin screen and ship in every page.
cards: { ...(window.extSharedData?.notificationState?.cards ?? {}) },
isDismissedBanner: (slug) => Boolean(get().cards[slug]?.dismissedAt),
dismissBanner: (slug) => {
if (get().isDismissedBanner(slug)) return;
set((current) => ({
cards: merge(current.cards, slug, { dismissedAt: now() }),
}));
},
recordNotificationView: (slug) => {
set((current) => {
const card = current.cards[slug];
return {
cards: merge(current.cards, slug, {
views: (card?.views ?? 0) + 1,
firstSeenAt: card?.firstSeenAt ?? now(),
lastSeenAt: now(),
}),
};
});
},
recordNotificationClick: (slug) => {
set((current) => {
const card = current.cards[slug];
return {
cards: merge(current.cards, slug, {
clicks: (card?.clicks ?? 0) + 1,
firstClickedAt: card?.firstClickedAt ?? now(),
lastClickedAt: now(),
}),
};
});
},
});
export const useNotificationsStore = create(
persist(devtools(state, { name: 'Extendify Notifications' }), {
name: 'extendify-notifications',
storage,
skipHydration: true,
}),
);