@opexa/portal-components 0.0.442 → 0.0.444
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/client/hooks/useMarkAllMessagesAsReadMutation.d.ts +2 -0
- package/dist/client/hooks/useMarkAllMessagesAsReadMutation.js +48 -0
- package/dist/components/DepositWithdrawal/Withdrawal/PisoPayWithdrawal/PisoPayWithdrawal.js +2 -3
- package/dist/components/Messages/Messages.lazy.js +5 -1
- package/dist/icons/NotifExitIcon.d.ts +2 -0
- package/dist/icons/NotifExitIcon.js +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { useMutation } from '@tanstack/react-query';
|
|
2
|
+
import invariant from 'tiny-invariant';
|
|
3
|
+
import { markAllMessagesAsRead } from '../../services/trigger.js';
|
|
4
|
+
import { getQueryClient } from '../../utils/getQueryClient.js';
|
|
5
|
+
import { getMessagesQueryKey, getUnreadMessagesCountQueryKey, } from '../../utils/queryKeys.js';
|
|
6
|
+
import { getSession } from '../services/getSession.js';
|
|
7
|
+
export const useMarkAllMessagesAsReadMutation = (config) => {
|
|
8
|
+
const queryClient = getQueryClient();
|
|
9
|
+
const mutation = useMutation({
|
|
10
|
+
...config,
|
|
11
|
+
mutationFn: async () => {
|
|
12
|
+
const session = await getSession();
|
|
13
|
+
invariant(session.status === 'authenticated');
|
|
14
|
+
await markAllMessagesAsRead({
|
|
15
|
+
headers: {
|
|
16
|
+
Authorization: `Bearer ${session.token}`,
|
|
17
|
+
},
|
|
18
|
+
});
|
|
19
|
+
queryClient.setQueriesData({
|
|
20
|
+
queryKey: getMessagesQueryKey(),
|
|
21
|
+
exact: false,
|
|
22
|
+
type: 'all',
|
|
23
|
+
}, (prev) => {
|
|
24
|
+
if (!prev)
|
|
25
|
+
return prev;
|
|
26
|
+
return {
|
|
27
|
+
...prev,
|
|
28
|
+
pages: prev.pages.map((page) => ({
|
|
29
|
+
...page,
|
|
30
|
+
edges: page.edges.map((edge) => ({
|
|
31
|
+
...edge,
|
|
32
|
+
node: {
|
|
33
|
+
...edge.node,
|
|
34
|
+
markedAsRead: true,
|
|
35
|
+
},
|
|
36
|
+
})),
|
|
37
|
+
})),
|
|
38
|
+
};
|
|
39
|
+
});
|
|
40
|
+
queryClient.setQueriesData({
|
|
41
|
+
queryKey: getUnreadMessagesCountQueryKey(),
|
|
42
|
+
exact: false,
|
|
43
|
+
type: 'all',
|
|
44
|
+
}, () => 0);
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
return mutation;
|
|
48
|
+
};
|
|
@@ -152,9 +152,8 @@ export function PisoPayWithdrawal() {
|
|
|
152
152
|
if (!details.open) {
|
|
153
153
|
setStatus('waiting');
|
|
154
154
|
}
|
|
155
|
-
}, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal
|
|
156
|
-
"We're verifying your account and amount. Please hold a moment.", status === 'success' &&
|
|
157
|
-
'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
|
|
155
|
+
}, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Successful', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
|
|
156
|
+
"We're verifying your account and amount. Please hold a moment.", status === 'success' && 'Your withdrawal was successful.', status === 'failed' &&
|
|
158
157
|
explainError(createWithdrawalMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
|
|
159
158
|
api.setOpen(false);
|
|
160
159
|
}, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
|
|
@@ -9,9 +9,11 @@ import { z } from 'zod';
|
|
|
9
9
|
import { useShallow } from 'zustand/shallow';
|
|
10
10
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
11
11
|
import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
|
|
12
|
+
import { useMarkAllMessagesAsReadMutation } from '../../client/hooks/useMarkAllMessagesAsReadMutation.js';
|
|
12
13
|
import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
|
|
13
14
|
import { useMessagesQuery } from '../../client/hooks/useMessagesQuery.js';
|
|
14
15
|
import { useUnreadMessagesCountQuery } from '../../client/hooks/useUnreadMessagesCountQuery.js';
|
|
16
|
+
import { NotifExitIcon } from '../../icons/NotifExitIcon.js';
|
|
15
17
|
import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
|
|
16
18
|
import { XIcon } from '../../icons/XIcon.js';
|
|
17
19
|
import { Button } from '../../ui/Button/index.js';
|
|
@@ -43,6 +45,7 @@ export function Messages(props) {
|
|
|
43
45
|
enabled: globalStore.messages.open,
|
|
44
46
|
refetchInterval: 10000,
|
|
45
47
|
});
|
|
48
|
+
const markAllMessagesAsReadMutation = useMarkAllMessagesAsReadMutation();
|
|
46
49
|
const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((e) => e.node)) ?? [];
|
|
47
50
|
const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
|
|
48
51
|
? props.offsetTop
|
|
@@ -50,7 +53,8 @@ export function Messages(props) {
|
|
|
50
53
|
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: {
|
|
51
54
|
['--offset-top-mobile']: mobileOffsetTop,
|
|
52
55
|
['--offset-top-desktop']: desktopOffsetTop,
|
|
53
|
-
}, children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className:
|
|
56
|
+
}, children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: 'flex items-center justify-between bg-bg-primary p-xl', children: [_jsxs("div", { className: "flex items-center gap-md", children: [_jsx(Drawer.CloseTrigger, { className: "grid size-8 place-items-center rounded-lg border border-border-secondary", "aria-label": "Back", children: _jsx(NotifExitIcon, { className: "size-4" }) }), _jsx("p", { className: "font-semibold text-lg text-text-primary-brand", children: "Notifications" })] }), _jsx("button", { className: "font-semibold text-brand-400 hover:opacity-90 disabled:opacity-50", type: "button", disabled: markAllMessagesAsReadMutation.isPending ||
|
|
57
|
+
!unreadMessagesCount, onClick: () => markAllMessagesAsReadMutation.mutate(), children: "Mark all as read" })] }), _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: "ml-md rounded-full border border-border-primary bg-bg-secondary px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, {})] }) }), TABS.map((tab) => (_jsxs(Tabs.Content, { value: tab, className: "scrollbar:w-2 grow overflow-y-auto scrollbar-thumb:rounded-full scrollbar-track:rounded-full border-border-secondary border-t scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-bg-primary-alt 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 () => {
|
|
54
58
|
await messagesQuery.fetchNextPage();
|
|
55
59
|
}, className: "mt-4" })] }, tab)))] })] }) }) }) }) }), _jsx(MessageDetails, {})] }));
|
|
56
60
|
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export function NotifExitIcon(props) {
|
|
3
|
+
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", viewBox: "0 0 16 16", ...props, children: _jsx("path", { stroke: "#CECFD2", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.333", d: "M10 12 6 8l4-4" }) }));
|
|
4
|
+
}
|