@opexa/portal-components 0.0.152 → 0.0.153

package/dist/client/hooks/useGlobalStore.d.ts

@@ -1,4 +1,4 @@
-import type { FavoriteGame, Game, GameSession } from '../../types';
+import type { FavoriteGame, Game, GameSession, Message } from '../../types';
 interface PopupStore {
     open: boolean;
     setOpen: (open: boolean) => void;
@@ -39,6 +39,12 @@ interface MessagesStore extends PopupStore {
     tab: MessagesTab;
     setTab: (tab: MessagesTab) => void;
 }
+interface MessageStore extends PopupStore {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    data: Message | null;
+    setData: (data: Message | null) => void;
+}
 interface DepositWithdrawalStore extends PopupStore {
     tab: DepositWithdrawalTab;
     setTab: (tab: DepositWithdrawalTab) => void;
@@ -56,6 +62,7 @@ interface GlobalStore {
     account: PopupStore;
     account__mobile: PopupStore;
     messages: MessagesStore;
+    message: MessageStore;
     sidebar: CollapsibleStore;
     kyc: PopupStore;
     spotBonus: PopupStore;

package/dist/client/hooks/useGlobalStore.js

@@ -136,6 +136,36 @@ export const useGlobalStore = create((set) => ({
                     ...prev.messages,
                     tab,
                 },
+                message: {
+                    ...prev.message,
+                    '~touched': true,
+                },
+            }));
+        },
+    },
+    message: {
+        open: false,
+        setOpen(open) {
+            set((prev) => ({
+                message: {
+                    ...prev.message,
+                    open,
+                    '~touched': true,
+                },
+                messages: {
+                    ...prev.messages,
+                    '~touched': true,
+                },
+            }));
+        },
+        '~touched': false,
+        data: null,
+        setData(data) {
+            set((prev) => ({
+                message: {
+                    ...prev.message,
+                    data,
+                },
             }));
         },
     },

package/dist/client/hooks/useMarkMessageAsReadMutation.js

@@ -18,16 +18,31 @@ export const useMarkMessageAsReadMutation = (config) => {
                     Authorization: `Bearer ${session.token}`,
                 },
             });
-            queryClient.setQueryData(getMessagesQueryKey(), (prev) => {
-                return prev?.map((message) => {
-                    if (message.id === id) {
-                        return {
-                            ...message,
-                            markedAsRead: true,
-                        };
-                    }
-                    return message;
-                });
+            queryClient.setQueriesData({
+                queryKey: getMessagesQueryKey(),
+                exact: false,
+                type: 'all',
+            }, (prev) => {
+                if (!prev)
+                    return prev;
+                return {
+                    ...prev,
+                    pages: prev.pages.map((page) => ({
+                        ...page,
+                        edges: page.edges.map((edge) => {
+                            if (edge.node.id === id) {
+                                return {
+                                    ...edge,
+                                    node: {
+                                        ...edge.node,
+                                        markedAsRead: true,
+                                    },
+                                };
+                            }
+                            return edge;
+                        }),
+                    })),
+                };
             });
             queryClient.setQueryData(getUnreadMessagesCountQueryKey(), (prev) => {
                 return prev && prev > 0 ? prev - 1 : 0;

package/dist/components/Messages/Message.js

@@ -7,8 +7,12 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
 import { useMessageContext } from './MessageContext.js';
-import { getMessageIcon } from './utils.js';
+import { MessageIcon } from './MessageIcon.js';
+import { useMessagesPropsContext } from './MessagesContext.js';
+import { normalizeActionUrl } from './utils.js';
 export function Message() {
+    const messagesProps = useMessagesPropsContext();
+    const transactionsPageUrl = messagesProps.transactionsPageUrl ?? '/transactions';
     const message = useMessageContext();
     const localeInfo = useLocaleInfo();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
@@ -16,7 +20,6 @@ export function Message() {
         messages: ctx.messages,
     })));
     const markMessageAsReadMutation = useMarkMessageAsReadMutation();
-    const Icon = getMessageIcon(message.icon);
     const handleViewMessage = async () => {
         globalStore.message.setData(message);
         globalStore.message.setOpen(true);
@@ -24,12 +27,11 @@ export function Message() {
         if (!message.markedAsRead)
             markMessageAsReadMutation.mutate(message.id);
     };
-    const handleActionClick = (e) => {
-        e.stopPropagation();
-        globalStore.messages.setOpen(false);
-        globalStore.messages.setTab('ALL');
-    };
     return (_jsxs("div", { role: "button", tabIndex: 0, className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5", onClick: handleViewMessage, "aria-pressed": "false", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(message.dateTimeCreated), 'M/d/yyyy - h:mma', {
                             in: tz(localeInfo.timezone),
-                        }) }), !message.markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [_jsx(Icon, { className: "text-brand-400" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } }), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: action.url, onClick: handleActionClick, children: action.name }, index))) }))] }));
+                        }) }), !message.markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(MessageIcon, { type: message.icon, className: "text-brand-400 size-5" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), message.content && (_jsx("p", { className: "mt-2 line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } })), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: normalizeActionUrl(transactionsPageUrl, action.url), onClick: (e) => {
+                        e.stopPropagation();
+                        globalStore.messages.setOpen(false);
+                        globalStore.messages.setTab('ALL');
+                    }, children: action.name }, index))) }))] }));
 }

package/dist/components/Messages/MessageContext.d.ts

@@ -1,5 +1,5 @@
 import type { Message } from '../../types';
-export declare const MessageContext: (props: {
+export declare const MessageProvider: (props: {
     value: Message;
 } & {
     children?: import("react").ReactNode | undefined;

package/dist/components/Messages/MessageContext.js

@@ -1,2 +1,2 @@
 import { createContext } from '../../client/utils/createContext.js';
-export const [MessageContext, useMessageContext] = createContext();
+export const [MessageProvider, useMessageContext] = createContext();

package/dist/components/Messages/MessagePopup.d.ts

@@ -1 +1 @@
-export declare const MessagePopup: () => import("react/jsx-runtime").JSX.Element;
+export declare function MessagePopup(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/MessagePopup.js

@@ -1,20 +1,24 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
 import Link from 'next/link';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { getMessageIcon } from './utils.js';
-export const MessagePopup = () => {
+import { MessageIcon } from './MessageIcon.js';
+import { useMessagesPropsContext } from './MessagesContext.js';
+import { normalizeActionUrl } from './utils.js';
+export function MessagePopup() {
+    const messagesProps = useMessagesPropsContext();
+    const transactionsPageUrl = messagesProps.transactionsPageUrl ?? '/transactions';
     const globalStore = useGlobalStore(useShallow((ctx) => ({ message: ctx.message })));
-    const Icon = getMessageIcon(globalStore.message.data?.icon ?? 'MESSAGE');
     return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.message.open, onOpenChange: ({ open }) => {
             globalStore.message.setOpen(open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl px-xl pb-0 pt-5 shadow-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "bg-bg-brand-secondary mx-auto w-fit rounded-full p-3", children: _jsx(Icon, { className: "text-text-brand", height: "24", width: "24" }) }), _jsx("p", { className: "text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight", children: globalStore.message.data?.title }), _jsx("div", { className: "text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight", dangerouslySetInnerHTML: {
-                                            __html: globalStore.message.data?.content ?? '',
-                                        } })] }), globalStore.message.data?.actions.length ? (_jsx("div", { className: "flex flex-col space-y-2 px-4 pb-8 pt-6 text-center", children: globalStore.message.data.actions.map((action, index) => (_jsx(Link, { className: "bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold", href: action.url, onClick: () => {
+        }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl px-xl pb-0 pt-5 shadow-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "bg-bg-brand-secondary mx-auto w-fit rounded-full p-3", children: _jsx(MessageIcon, { type: globalStore.message.data?.icon ?? 'INFO', className: "text-text-brand size-6" }) }), _jsx("p", { className: "text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight", children: globalStore.message.data?.title }), globalStore.message.data?.content && (_jsx("div", { className: "text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight", dangerouslySetInnerHTML: {
+                                            __html: globalStore.message.data.content,
+                                        } })), globalStore.message.data?.image && (_jsx(Image, { src: globalStore.message.data.image, alt: "", width: 400, height: 400, loading: "lazy", unoptimized: true, className: "mt-5 h-auto w-full" }))] }), globalStore.message.data?.actions.length ? (_jsx("div", { className: "flex flex-col space-y-2 px-4 pb-8 pt-6 text-center", children: globalStore.message.data.actions.map((action, index) => (_jsx(Link, { className: "bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold", href: normalizeActionUrl(transactionsPageUrl, action.url), onClick: () => {
                                         globalStore.message.setOpen(false);
                                     }, children: action.name }, index))) })) : null] }) })] }) }));
-};
+}

package/dist/components/Messages/Messages.js

@@ -1,14 +1,18 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-import { MessagesPopup } from './MessagesPopup.js';
+import { MessagesPropsProvider } from './MessagesContext.js';
 const Component = dynamic(() => import('./Messages.lazy.js').then((mod) => mod.Messages), {
     ssr: false,
     loading: () => null,
 });
+const MessagesPopup = dynamic(() => import('./MessagesPopup.js').then((mod) => mod.MessagesPopup), {
+    ssr: false,
+    loading: () => null,
+});
 export function Messages(props) {
     const touched = useGlobalStore(useShallow((ctx) => ctx.messages['~touched']));
-    return (_jsxs(_Fragment, { children: [touched && _jsx(Component, { ...props }), _jsx(MessagesPopup, {})] }));
+    return (_jsxs(MessagesPropsProvider, { value: props, children: [touched && _jsx(Component, { ...props }), _jsx(MessagesPopup, {})] }));
 }

package/dist/components/Messages/Messages.lazy.d.ts

@@ -13,3 +13,4 @@ export interface MessagesProps {
     transactionsPageUrl?: string;
 }
 export declare function Messages(props: MessagesProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageDetails(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/Messages.lazy.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { tz } from '@date-fns/tz';
 import { format } from 'date-fns';
 import Image from 'next/image';
@@ -7,7 +7,6 @@ import Link from 'next/link';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
-import { useDisclosure } from '../../client/hooks/useDisclosure.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
@@ -22,7 +21,7 @@ import { Portal } from '../../ui/Portal/index.js';
 import { Tabs } from '../../ui/Tabs/index.js';
 import { InfiniteScroll } from '../shared/InfiniteScroll.js';
 import { MessageIcon } from './MessageIcon.js';
-import { MessageProvider, MessagesPropsProvider, useMessageContext, useMessagesPropsContext, } from './MessagesContext.js';
+import { MessageProvider, useMessageContext, useMessagesPropsContext, } from './MessagesContext.js';
 import { normalizeActionUrl } from './utils.js';
 const TABS = ['ALL', 'UNREAD'];
 export function Messages(props) {
@@ -48,12 +47,12 @@ export function Messages(props) {
     const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
         ? props.offsetTop
         : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
-    return (_jsx(MessagesPropsProvider, { value: props, children: _jsx(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsx(Drawer.Content, { className: twMerge('flex', 'flex-col', 'border-border-secondary', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'lg:border-l', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
-                            ['--offset-top-mobile']: mobileOffsetTop,
-                            ['--offset-top-desktop']: desktopOffsetTop,
-                        }, children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-end justify-between p-xl", children: [_jsx("p", { className: "text-text-primary-brand text-xl font-semibold", children: "Notifications" }), _jsx(Drawer.CloseTrigger, { className: "p-2", children: _jsx(XIcon, {}) })] }), _jsxs(Tabs.Root, { value: globalStore.messages.tab, onValueChange: (details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value)), lazyMount: true, unmountOnExit: true, className: "flex grow flex-col overflow-y-auto", children: [_jsx("div", { className: "p-xl pt-0", children: _jsxs(Tabs.List, { className: "w-full", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "w-full", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "w-full", children: ["Unread", !!unreadMessagesCount && (_jsx("span", { className: "border-border-primary bg-bg-secondary ml-md rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, {})] }) }), TABS.map((tab) => (_jsxs(Tabs.Content, { value: tab, className: "scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full border-border-secondary grow overflow-y-auto border-t p-xl", children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-3", children: messages.map((message) => (_jsx(MessageProvider, { value: message, children: _jsx(Message, {}) }, message.id))) })), _jsx(InfiniteScroll, { loader: _jsx(SpinnerIcon, { className: "mx-auto size-5" }), hasMore: !!messagesQuery.hasNextPage, loadMore: async () => {
-                                                        await messagesQuery.fetchNextPage();
-                                                    }, className: "mt-4" })] }, tab)))] })] }) }) }) }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsx(Drawer.Content, { className: twMerge('flex', 'flex-col', 'border-border-secondary', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'lg:border-l', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
+                                ['--offset-top-mobile']: mobileOffsetTop,
+                                ['--offset-top-desktop']: desktopOffsetTop,
+                            }, children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-end justify-between p-xl", children: [_jsx("p", { className: "text-text-primary-brand text-xl font-semibold", children: "Notifications" }), _jsx(Drawer.CloseTrigger, { className: "p-2", children: _jsx(XIcon, {}) })] }), _jsxs(Tabs.Root, { value: globalStore.messages.tab, onValueChange: (details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value)), lazyMount: true, unmountOnExit: true, className: "flex grow flex-col overflow-y-auto", children: [_jsx("div", { className: "p-xl pt-0", children: _jsxs(Tabs.List, { className: "w-full", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "w-full", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "w-full", children: ["Unread", !!unreadMessagesCount && (_jsx("span", { className: "border-border-primary bg-bg-secondary ml-md rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, {})] }) }), TABS.map((tab) => (_jsxs(Tabs.Content, { value: tab, className: "scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full border-border-secondary grow overflow-y-auto border-t p-xl", children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-3", children: messages.map((message) => (_jsx(MessageProvider, { value: message, children: _jsx(Message, {}) }, message.id))) })), _jsx(InfiniteScroll, { loader: _jsx(SpinnerIcon, { className: "mx-auto size-5" }), hasMore: !!messagesQuery.hasNextPage, loadMore: async () => {
+                                                            await messagesQuery.fetchNextPage();
+                                                        }, className: "mt-4" })] }, tab)))] })] }) }) }) }) }), _jsx(MessageDetails, {})] }));
 }
 function Message() {
     const messagesProps = useMessagesPropsContext();
@@ -62,29 +61,36 @@ function Message() {
     const localeInfo = useLocaleInfo();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         messages: ctx.messages,
+        message: ctx.message,
     })));
-    const disclosure = useDisclosure({
-        onOpenChange(open) {
-            if (open) {
-                globalStore.messages.setOpen(false);
-                if (!message.markedAsRead) {
-                    markMessageAsReadMutation.mutate(message.id);
-                }
-            }
-        },
-    });
     const markMessageAsReadMutation = useMarkMessageAsReadMutation();
-    return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: disclosure.open, onOpenChange: (details) => {
-            disclosure.setOpen(details.open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsxs(Dialog.Trigger, { className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5 text-left", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(message.dateTimeCreated), 'M/d/yyyy - h:mma', {
-                                    in: tz(localeInfo.timezone),
-                                }) }), !message.markedAsRead && (_jsx("span", { className: "bg-utility-success-500 block size-2.5 rounded-full" }))] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(MessageIcon, { type: message.icon, className: "text-brand-400 size-5" }), _jsx("h2", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), message.content && (_jsx("div", { className: "mt-2 line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } })), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: normalizeActionUrl(transactionsPageUrl, action.url), onClick: (e) => {
-                                e.stopPropagation();
-                                globalStore.messages.setOpen(false);
-                                globalStore.messages.setTab('ALL');
-                            }, children: action.name }, index))) }))] }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx("div", { className: "bg-bg-brand-secondary text-text-brand mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(MessageIcon, { type: message.icon, className: "size-6" }) }), _jsx(Dialog.Title, { className: "mt-lg text-center text-lg font-semibold lg:mt-xl", children: message.title }), message.content && (_jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs pb-5 text-center text-sm", dangerouslySetInnerHTML: {
-                                        __html: message.content,
-                                    } })), message.image && (_jsx("div", { className: "mt-5 pb-5", children: _jsx(Image, { src: message.image, alt: "", width: 400, height: 250, loading: "lazy", unoptimized: true, className: "h-auto w-full rounded-sm" }) })), message.actions.length ? (_jsx("div", { className: "mt-3xl flex flex-col gap-2 text-center lg:mt-4xl", children: message.actions.map((action, index) => (_jsx(Button, { asChild: true, children: _jsx(Link, { href: normalizeActionUrl(transactionsPageUrl, action.url), onClick: () => {
-                                                disclosure.setOpen(false);
-                                            }, children: action.name }) }, index))) })) : null] }) })] })] }));
+    return (_jsxs("button", { className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5 text-left", onClick: () => {
+            globalStore.messages.setOpen(false);
+            globalStore.message.setOpen(true);
+            globalStore.message.setData(message);
+            if (!message.markedAsRead) {
+                markMessageAsReadMutation.mutate(message.id);
+            }
+        }, children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(message.dateTimeCreated), 'M/d/yyyy - h:mma', {
+                            in: tz(localeInfo.timezone),
+                        }) }), !message.markedAsRead && (_jsx("span", { className: "bg-utility-success-500 block size-2.5 rounded-full" }))] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(MessageIcon, { type: message.icon, className: "text-brand-400 size-5" }), _jsx("h2", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), message.content && (_jsx("div", { className: "mt-2 line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } })), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: normalizeActionUrl(transactionsPageUrl, action.url), onClick: (e) => {
+                        e.stopPropagation();
+                        globalStore.messages.setOpen(false);
+                    }, children: action.name }, index))) }))] }));
+}
+export function MessageDetails() {
+    const messagesProps = useMessagesPropsContext();
+    const transactionsPageUrl = messagesProps.transactionsPageUrl ?? '/transactions';
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        message: ctx.message,
+    })));
+    const message = globalStore.message.data;
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.message.open, onOpenChange: (details) => {
+            globalStore.message.setOpen(details.open);
+        }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx("div", { className: "bg-bg-brand-secondary text-text-brand mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(MessageIcon, { type: message?.icon ?? 'INFO', className: "size-6" }) }), _jsx(Dialog.Title, { className: "mt-lg text-center text-lg font-semibold lg:mt-xl", children: message?.title }), message?.content && (_jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs pb-5 text-center text-sm", dangerouslySetInnerHTML: {
+                                    __html: message?.content,
+                                } })), message?.image && (_jsx("div", { className: "mt-5 pb-5", children: _jsx(Image, { src: message?.image, alt: "", width: 400, height: 250, loading: "lazy", unoptimized: true, className: "h-auto w-full rounded-sm" }) })), message?.actions.length ? (_jsx("div", { className: "mt-3xl flex flex-col gap-2 text-center lg:mt-4xl", children: message?.actions.map((action, index) => (_jsx(Button, { asChild: true, children: _jsx(Link, { href: normalizeActionUrl(transactionsPageUrl, action.url), onClick: (e) => {
+                                            e.stopPropagation();
+                                            globalStore.message.setOpen(false);
+                                        }, children: action.name }) }, index))) })) : null] }) })] }) }));
 }

package/dist/components/Messages/MessagesPopup.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useInterval } from 'usehooks-ts';
+import { useShallow } from 'zustand/shallow';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
 import { useMessagesQuery } from '../../client/hooks/useMessagesQuery.js';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
 import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
@@ -10,24 +16,64 @@ import { Carousel } from '../../ui/Carousel/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { MessageIcon } from './MessageIcon.js';
+import { useMessagesPropsContext } from './MessagesContext.js';
 import { normalizeActionUrl } from './utils.js';
 export function MessagesPopup() {
+    const messagesProps = useMessagesPropsContext();
+    const transactionsPageUrl = messagesProps.transactionsPageUrl ?? '/transactions';
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        message: ctx.message,
+        messages: ctx.messages,
+    })));
+    const markMessageAsReadMutation = useMarkMessageAsReadMutation();
+    const [paused, setPaused] = useState(false);
+    useInterval(() => setPaused(false), paused ? 1000 * 30 : null);
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (open) {
+                const message = messages.at(0);
+                if (!message || message.markedAsRead)
+                    return;
+                markMessageAsReadMutation.mutate(message.id);
+            }
+            else {
+                setPaused(true);
+                setPage(1);
+            }
+        },
+    });
     const messagesQuery = useMessagesQuery({
-        first: 50,
-        // filter: {
-        //   popup: {
-        //     equal: true,
-        //   },
-        //   markedAsRead: {
-        //     equal: true,
-        //   },
-        // },
+        first: 10,
+        filter: {
+            popup: {
+                equal: true,
+            },
+            markedAsRead: {
+                equal: false,
+            },
+        },
     }, {
-        refetchInterval: 10_000,
+        enabled: !globalStore.messages.open && !globalStore.message.open && !paused,
+        refetchInterval: disclosure.open ? undefined : 10_000,
     });
     const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [];
-    console.log({ messages });
-    return (_jsx(Dialog.Root, { children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Carousel.Root, { slideCount: messages.length, allowMouseDrag: true, children: [_jsx(Carousel.ItemGroup, { children: messages.map((message, index) => (_jsxs(Carousel.Item, { index: index, className: "select-none", children: [_jsx("div", { className: "bg-bg-brand-secondary text-text-brand mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(MessageIcon, { type: message.icon, className: "size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold xl:mt-xl", children: message.title }), message.content && (_jsx("div", { dangerouslySetInnerHTML: { __html: message.content }, className: "text-text-secondary-700 mt-xs pb-5 text-center text-sm" })), message.image && (_jsx("div", { className: "mt-5 pb-5", children: _jsx(Image, { src: message.image, alt: "", width: 400, height: 250, loading: "lazy", unoptimized: true, className: "h-auto w-full rounded-sm" }) })), message.actions.length ? (_jsx("div", { className: "mt-3xl flex flex-col gap-2 text-center lg:mt-4xl", children: message.actions.map((action, index) => (_jsx(Button, { asChild: true, children: _jsx(Link, { href: normalizeActionUrl('/', action.url), onClick: () => {
-                                                                // disclosure.setOpen(false);
+    const [page, setPage] = useState(1);
+    useEffect(() => {
+        if (messages.length > 0) {
+            disclosure.setOpen(true);
+        }
+    }, [disclosure, messages.length, paused]);
+    return (_jsx(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => {
+            disclosure.setOpen(details.open);
+        }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Carousel.Root, { page: page, onPageChange: (details) => {
+                                    setPage(details.page);
+                                    const message = messages.at(details.page - 1);
+                                    if (!message)
+                                        return;
+                                    if (message.markedAsRead)
+                                        return;
+                                    markMessageAsReadMutation.mutate(message.id);
+                                }, slideCount: messages.length, allowMouseDrag: true, children: [_jsx(Carousel.ItemGroup, { children: messages.map((message, index) => (_jsxs(Carousel.Item, { index: index, className: "select-none", children: [_jsx("div", { className: "bg-bg-brand-secondary text-text-brand mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(MessageIcon, { type: message.icon, className: "size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold xl:mt-xl", children: message.title }), message.content && (_jsx("div", { dangerouslySetInnerHTML: { __html: message.content }, className: "text-text-secondary-700 mt-xs pb-5 text-center text-sm" })), message.image && (_jsx("div", { className: "mt-5 pb-5", children: _jsx(Image, { src: message.image, alt: "", width: 400, height: 250, loading: "lazy", unoptimized: true, className: "h-auto w-full rounded-sm" }) })), message.actions.length ? (_jsx("div", { className: "mt-3xl flex flex-col gap-2 text-center lg:mt-4xl", children: message.actions.map((action, index) => (_jsx(Button, { asChild: true, children: _jsx(Link, { href: normalizeActionUrl(transactionsPageUrl, action.url), onClick: () => {
+                                                                disclosure.setOpen(false);
                                                             }, children: action.name }) }, index))) })) : null] }, message.id))) }), _jsxs(Carousel.Control, { className: "mt-5 flex items-center lg:mt-3xl", children: [_jsxs(Carousel.PrevTrigger, { className: "text-text-quarterary-500 hidden items-center gap-md font-semibold disabled:invisible lg:flex", children: [_jsx(ChevronLeftIcon, { className: "size-5" }), "Back"] }), _jsx(Carousel.IndicatorGroup, { className: "flex grow justify-center gap-xs", children: messages.map((message, index) => (_jsx(Carousel.Indicator, { index: index, className: "bg-bg-quaternary ui-current:bg-brand-400 size-2.5 rounded-full transition-all duration-150 ui-current:w-5" }, message.id))) }), _jsxs(Carousel.NextTrigger, { className: "text-text-quarterary-500 hidden items-center gap-md font-semibold disabled:invisible lg:flex", children: ["Next", _jsx(ChevronRightIcon, { className: "size-5" })] })] })] })] }) })] }) }));
 }