@opexa/portal-components 0.0.148 → 0.0.150

package/dist/components/Messages/Message.js

@@ -9,6 +9,7 @@ import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageA
 import { useMessageContext } from './MessageContext.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';
@@ -26,23 +27,9 @@ export function Message() {
         if (!message.markedAsRead)
             markMessageAsReadMutation.mutate(message.id);
     };
-    function normalizeRedirectUrl(value) {
-        const searchParams = new URLSearchParams(value);
-        if (searchParams.has('personalCenter')) {
-            if (searchParams.get('personalCenter') === 'deposit' &&
-                searchParams.has('id')) {
-                return `${transactionsPageUrl}?tab=deposits&id=${searchParams.get('id')}`;
-            }
-            if (searchParams.get('personalCenter') === 'withdrawal' &&
-                searchParams.has('id')) {
-                return `${transactionsPageUrl}?tab=withdrawals&id=${searchParams.get('id')}`;
-            }
-        }
-        return value;
-    }
     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(MessageIcon, { type: message.icon, className: "text-brand-400 size-5" }), _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: normalizeRedirectUrl(action.url), onClick: (e) => {
+                        }) }), !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');

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,5 +1,6 @@
 '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';
@@ -7,13 +8,17 @@ import { XIcon } from '../../icons/XIcon.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { MessageIcon } from './MessageIcon.js';
-export const MessagePopup = () => {
+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 })));
     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(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 }), _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.lazy.js

@@ -43,7 +43,7 @@ export function Messages(props) {
     return (_jsxs(MessagesPropsProvider, { value: props, 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 flex-col space-y-6", children: [_jsxs("div", { className: "flex items-end justify-between px-4 pt-6", 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, children: [_jsx("div", { className: "mb-4 w-full px-4", children: _jsxs(Tabs.List, { className: "border-border-secondary w-full border", children: [_jsx(Tabs.Trigger, { value: "ALL", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600", children: "All" }), _jsxs(Tabs.Trigger, { value: "UNREAD", className: "flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600 flex items-center justify-center space-x-2", children: [_jsx("div", { children: "Unread" }), !!unreadMessagesCount && (_jsx("div", { className: "border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5", children: unreadMessagesCount }))] }), _jsx(Tabs.Indicator, { className: "bg-bg-active" })] }) }), _jsx("div", { className: "border-border-secondary w-full border-t" }), 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 max-h-[calc(100vh-197px)] overflow-y-auto p-xl", style: { scrollbarGutter: 'stable' }, children: [messages.length > 0 && (_jsx("div", { className: "flex flex-col space-y-4", 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 () => {
+                            }, 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(MessagePopup, {})] }));
 }

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

@@ -1,3 +1 @@
-import { BellRingIcon } from '../../icons/BellRingIcon';
-import type { MessageIcon } from '../../types';
-export declare function getMessageIcon(logo: MessageIcon): typeof BellRingIcon;
+export declare function normalizeActionUrl(baseUrl: string, actionUrl: string): string;

package/dist/components/Messages/utils.js

@@ -1,27 +1,14 @@
-import { BellRingIcon } from '../../icons/BellRingIcon.js';
-// TODO: request icon assets for each type of MessageIcon
-const IMAGES = {
-    BELL: BellRingIcon,
-    BONUS: BellRingIcon,
-    CHECK: BellRingIcon,
-    CONFETTI: BellRingIcon,
-    GIFT: BellRingIcon,
-    STAR: BellRingIcon,
-    TROPHY: BellRingIcon,
-    INFO: BellRingIcon,
-};
-export function getMessageIcon(logo) {
-    if (logo === 'ALERT')
-        return IMAGES.INFO;
-    if (logo === 'CHECK')
-        return IMAGES.CHECK;
-    if (logo === 'MESSAGE')
-        return IMAGES.BELL;
-    if (logo === 'CELEBRATE')
-        return IMAGES.CONFETTI;
-    if (logo === 'GIFT')
-        return IMAGES.GIFT;
-    if (logo === 'INFO')
-        return IMAGES.INFO;
-    return IMAGES.TROPHY;
+export function normalizeActionUrl(baseUrl, actionUrl) {
+    const searchParams = new URLSearchParams(actionUrl);
+    if (searchParams.has('personalCenter')) {
+        if (searchParams.get('personalCenter') === 'deposit' &&
+            searchParams.has('id')) {
+            return `${baseUrl}?tab=deposits&id=${searchParams.get('id')}`;
+        }
+        if (searchParams.get('personalCenter') === 'withdrawal' &&
+            searchParams.has('id')) {
+            return `${baseUrl}?tab=withdrawals&id=${searchParams.get('id')}`;
+        }
+    }
+    return actionUrl;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.148",
+  "version": "0.0.150",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",