@opexa/portal-components 0.0.957 → 0.0.959

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

@@ -0,0 +1,123 @@
+'use client';
+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';
+import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useMarkAllMessagesAsReadMutation } from '../../client/hooks/useMarkAllMessagesAsReadMutation.js';
+import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
+import { useMessagesQuery } from '../../client/hooks/useMessagesQuery.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useUnreadMessagesCountQuery } from '../../client/hooks/useUnreadMessagesCountQuery.js';
+import { NotifExitIcon } from '../../icons/NotifExitIcon.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Drawer } from '../../ui/Drawer/index.js';
+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, useMessageContext, useMessagesPropsContext, } from './MessagesContext.js';
+import { normalizeActionUrl } from './utils.js';
+const TABS = ['ALL', 'UNREAD'];
+export function Messages(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, {
+        refetchInterval: globalStore.messages.open ? 5000 : 10000,
+    });
+    const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
+    const messagesQuery = useMessagesQuery({
+        first: 10,
+        ...(globalStore.messages.tab === 'UNREAD' && {
+            filter: {
+                markedAsRead: {
+                    equal: false,
+                },
+            },
+        }),
+    }, {
+        enabled: globalStore.messages.open,
+        refetchInterval: 10000,
+    });
+    const markAllMessagesAsReadMutation = useMarkAllMessagesAsReadMutation();
+    const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((e) => e.node)) ?? [];
+    const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
+        ? props.offsetTop
+        : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
+    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-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 ||
+                                                    !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 () => {
+                                                            await messagesQuery.fetchNextPage();
+                                                        }, className: "mt-4" })] }, tab)))] })] }) }) }) }) }), _jsx(MessageDetails, {})] }));
+}
+function Message() {
+    const messagesProps = useMessagesPropsContext();
+    const questsPageUrl = messagesProps.questsPageUrl ?? '/quests';
+    const transactionsPageUrl = messagesProps.transactionsPageUrl ?? '/transactions';
+    const message = useMessageContext();
+    const localeInfo = useLocaleInfo();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        messages: ctx.messages,
+        message: ctx.message,
+    })));
+    const markMessageAsReadMutation = useMarkMessageAsReadMutation();
+    const sessionQuery = useSessionQuery();
+    const session = sessionQuery.data;
+    return (_jsxs("button", { type: "button", className: "flex h-auto flex-shrink-0 cursor-pointer flex-col rounded-xs border border-border-secondary bg-bg-secondary 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: "font-normal text-text-tertiary-600 text-xs", children: format(new Date(message.dateTimeCreated), 'M/d/yyyy - h:mma', {
+                            in: tz(localeInfo.timezone),
+                        }) }), !message.markedAsRead && (_jsx("span", { className: "block size-2.5 rounded-full bg-utility-success-500" }))] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(MessageIcon, { type: message.icon, className: "size-5 text-brand-400" }), _jsx("h2", { className: "font-semibold text-sm text-text-primary-brand", children: message.title })] }), message.content && (_jsx("div", { className: "mt-2 line-clamp-3 text-wrap font-normal text-sm", 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: "rounded-md border border-button-secondary-border px-3 py-2 text-button-secondary-fg text-sm", href: normalizeActionUrl(action.url, session?.token || '', {
+                        transactionsPageUrl,
+                        questsPageUrl,
+                    }), onClick: (e) => {
+                        e.stopPropagation();
+                        globalStore.messages.setOpen(false);
+                    }, children: action.name }, index))) }))] }));
+}
+export function MessageDetails() {
+    const messagesProps = useMessagesPropsContext();
+    const questsPageUrl = messagesProps.questsPageUrl ?? '/quests';
+    const transactionsPageUrl = messagesProps.transactionsPageUrl ?? '/transactions';
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        message: ctx.message,
+    })));
+    const message = globalStore.message.data;
+    const transformContent = (content) => {
+        const QUOTE_REGEX = /["\u201C]([^"\u201D]+)["\u201D]/g;
+        const defaultContentFormat = 'Your journey continues with . Complete this quest to earn exclusive rewards and advance your progress.';
+        const isDefaultContent = content.replace(/“.*?”/, '').includes(defaultContentFormat) ?? false;
+        const match = QUOTE_REGEX.exec(content ?? '');
+        if (match && isDefaultContent) {
+            return `<p class="text-center">${content?.replace(QUOTE_REGEX, `<span class="!text-brand-500 !w-fit">“${match[1]}”</span>`)}</p>`;
+        }
+        return content;
+    };
+    const sessionQuery = useSessionQuery();
+    const session = sessionQuery.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: "mx-auto max-h-[80vh] min-w-[21.438rem] max-w-[21.438rem] overflow-y-auto rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(MessageIcon, { type: message?.icon ?? 'INFO', className: "size-6" }) }), _jsx(Dialog.Title, { className: "mt-lg text-center font-semibold text-lg lg:mt-xl", children: message?.title }), message?.content && (_jsx(Dialog.Description, { className: "mt-xs pb-5 text-center text-sm text-text-secondary-700 [&_li]:mb-1 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:text-left [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:text-left", dangerouslySetInnerHTML: {
+                                    __html: transformContent(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(action.url, session?.token || '', {
+                                            transactionsPageUrl,
+                                            questsPageUrl,
+                                        }), onClick: (e) => {
+                                            e.stopPropagation();
+                                            globalStore.message.setOpen(false);
+                                        }, children: action.name }) }, index))) })) : null] }) })] }) }));
+}

package/dist/lib/components/Messages/MessagesContext.d.ts

@@ -0,0 +1,12 @@
+import type { Message } from '../../types';
+import type { MessagesProps } from './Messages.lazy';
+export declare const MessagesPropsProvider: (props: {
+    value: MessagesProps;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useMessagesPropsContext: () => MessagesProps;
+export declare const MessageProvider: (props: {
+    value: Message;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useMessageContext: () => Message;

package/dist/lib/components/Messages/MessagesContext.js

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

package/dist/lib/components/Messages/MessagesPopup.d.ts

@@ -0,0 +1 @@
+export declare function MessagesPopup(): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Messages/MessagesPopup.js

@@ -0,0 +1,151 @@
+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 { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+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';
+const PAUSE_TIME = 1000 * 60 * 15; // 15 minutes
+const FORCE_PAUSE_TIME = 1000 * 10; // 10 seconds
+export function MessagesPopup() {
+    const messagesProps = useMessagesPropsContext();
+    const questsPageUrl = messagesProps.questsPageUrl ?? '/quests';
+    const transactionsPageUrl = messagesProps.transactionsPageUrl ?? '/transactions';
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+        message: ctx.message,
+        messages: ctx.messages,
+        gameLaunch: ctx.gameLaunch,
+        depositWithdrawal: ctx.depositWithdrawal,
+        kycReminder: ctx.kycReminder,
+        responsibleGamingReminder: ctx.responsibleGamingReminder,
+        signIn: ctx.signIn,
+        signUp: ctx.signUp,
+    })));
+    const markMessageAsReadMutation = useMarkMessageAsReadMutation();
+    const [paused, setPaused] = useState(false);
+    const [numberOfUnreadMessages, setNumberOfUnreadMessages] = useState(0);
+    useInterval(() => {
+        setPaused(false);
+    }, paused
+        ? globalStore.gameLaunch.details.status === 'PLAYING'
+            ? FORCE_PAUSE_TIME
+            : PAUSE_TIME
+        : null);
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (open) {
+                const message = messages.at(0);
+                if (!message)
+                    return;
+                if (message.markedAsRead)
+                    return;
+                markMessageAsReadMutation.mutate(message.id);
+            }
+            else {
+                setIndex_(0);
+                setNumberOfUnreadMessages(messages.length);
+                setPaused(true);
+            }
+        },
+    });
+    const messagesQuery = useMessagesQuery({
+        first: 20,
+        filter: {
+            popup: {
+                equal: true,
+            },
+            markedAsRead: {
+                equal: false,
+            },
+        },
+    }, {
+        enabled: !globalStore.depositWithdrawal.open &&
+            !globalStore.messages.open &&
+            !globalStore.message.open &&
+            !globalStore.account.open &&
+            !globalStore.account__mobile.open &&
+            !globalStore.kyc.open &&
+            !globalStore.kycReminder.open &&
+            !globalStore.responsibleGamingReminder.open,
+        refetchInterval: disclosure.open ? undefined : 1000 * 10,
+    });
+    const messages = messagesQuery.data?.pages.flatMap((page) => page.edges
+        .filter((edge) => globalStore.gameLaunch.details.status === 'PLAYING'
+        ? edge.node.force
+        : true)
+        .map((edge) => edge.node)) ?? [];
+    const [index, setIndex_] = useState(0);
+    const setIndex = (newIndex) => {
+        setIndex_(newIndex);
+        const message = messages.at(newIndex);
+        if (!message)
+            return;
+        if (message.markedAsRead)
+            return;
+        markMessageAsReadMutation.mutate(message.id);
+    };
+    useInterval(() => {
+        if (messages.length <= 0)
+            return;
+        disclosure.setOpen(true);
+    }, !disclosure.open && !paused ? 3000 : null);
+    // Resume showing messages if the number of unread messages changes
+    if (messages.length > numberOfUnreadMessages && paused) {
+        setPaused(false);
+    }
+    const transformContent = (content) => {
+        const QUOTE_REGEX = /["\u201C]([^"\u201D]+)["\u201D]/g;
+        const defaultContentFormat = 'Your journey continues with . Complete this quest to earn exclusive rewards and advance your progress.';
+        const isDefaultContent = content.replace(/“.*?”/, '').includes(defaultContentFormat) ?? false;
+        const match = QUOTE_REGEX.exec(content ?? '');
+        if (match && isDefaultContent) {
+            return `<p class="text-center">${content?.replace(QUOTE_REGEX, `<span class="!text-brand-500 !w-fit">“${match[1]}”</span>`)}</p>`;
+        }
+        return content;
+    };
+    const sessionQuery = useSessionQuery();
+    const session = sessionQuery.data;
+    const isKycClosed = !globalStore.kyc.open && !globalStore.kycReminder.open;
+    const isResponsibleGamingReminderClosed = !globalStore.responsibleGamingReminder.open;
+    useEffect(() => {
+        if (globalStore.gameLaunch.details.status === 'PLAYING')
+            setPaused(false);
+    }, [globalStore.gameLaunch.details.status]);
+    return (_jsx(Dialog.Root, { open: disclosure.open &&
+            !paused &&
+            isKycClosed &&
+            isResponsibleGamingReminderClosed, onOpenChange: (details) => {
+            disclosure.setOpen(details.open);
+        }, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto max-h-[80vh] min-w-[21.438rem] max-w-[21.438rem] overflow-y-auto rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Carousel.Root, { page: index, onPageChange: (details) => {
+                                    setIndex(details.page);
+                                }, slideCount: messages.length, allowMouseDrag: true, autoplay: false, children: [_jsx(Carousel.ItemGroup, { children: messages.map((message, index) => (_jsxs(Carousel.Item, { index: index, className: "select-none", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(MessageIcon, { type: message.icon, className: "size-6" }) }), _jsx("h2", { className: "mt-lg text-center font-semibold text-lg xl:mt-xl", children: message.title }), message.content && (_jsx("div", { dangerouslySetInnerHTML: {
+                                                        __html: transformContent(message.content),
+                                                    }, className: "mt-xs pb-5 text-center text-sm text-text-secondary-700 [&_li>ol]:list-decimal [&_li>ol]:pl-5 [&_li>ul]:list-disc [&_li>ul]:pl-5 [&_li]:mb-1 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:list-disc [&_ul]:pl-5" })), 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, session?.token || '', {
+                                                                questsPageUrl,
+                                                                transactionsPageUrl,
+                                                            }), onClick: (e) => {
+                                                                disclosure.setOpen(false);
+                                                                if (globalStore.gameLaunch.details.status ===
+                                                                    'PLAYING') {
+                                                                    window.location.href =
+                                                                        e.currentTarget.getAttribute('href') ?? '#';
+                                                                }
+                                                            }, children: action.name }) }, index))) })) : null] }, message.id))) }), _jsxs(Carousel.Control, { className: "mt-5 flex items-center lg:mt-3xl", children: [_jsxs(Carousel.PrevTrigger, { className: "hidden items-center gap-md font-semibold text-text-quarterary-500 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: "size-2.5 ui-current:w-5 rounded-full bg-bg-quaternary ui-current:bg-brand-400 transition-all duration-150" }, message.id))) }), _jsxs(Carousel.NextTrigger, { className: "hidden items-center gap-md font-semibold text-text-quarterary-500 disabled:invisible lg:flex", children: ["Next", _jsx(ChevronRightIcon, { className: "size-5" })] })] })] })] }) })] }) }));
+}

package/dist/lib/components/Messages/MessagesTrigger.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface ClassNameEntries {
+    root?: string;
+    iconButtonRoot?: string;
+    iconButtonLogo?: string;
+    unreadBadge?: string;
+}
+type MessagesTriggerProps = Omit<ComponentPropsWithRef<'button'>, 'className'> & {
+    asChild?: boolean;
+    className?: string | ClassNameEntries;
+};
+export declare function MessagesTrigger({ asChild, children, ...props }: MessagesTriggerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/Messages/MessagesTrigger.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ark } from '@ark-ui/react/factory';
+import { isString } from 'lodash-es';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useUnreadMessagesCountQuery } from '../../client/hooks/useUnreadMessagesCountQuery.js';
+import { Bell01Icon } from '../../icons/Bell01Icon.js';
+import { IconButton } from '../../ui/IconButton/index.js';
+export function MessagesTrigger({ asChild, children, ...props }) {
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        messages: ctx.messages,
+    })));
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, {
+        refetchInterval: globalStore.messages.open ? 5000 : 10000,
+    });
+    const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
+    return (_jsx(ark.button, { type: "button", "aria-label": "Toggle messages panel", "data-state": globalStore.messages.open ? 'open' : 'closed', ...props, onClick: (e) => {
+            globalStore.messages.setOpen(!globalStore.messages.open);
+            return props.onClick?.(e);
+        }, asChild: !children ? true : asChild, className: classNames.root, children: children ?? (_jsxs(IconButton, { size: "sm", colorScheme: "gray", className: twMerge('relative', classNames.iconButtonRoot), children: [!!unreadMessagesCount && (_jsx("div", { className: twMerge('-right-1.5 -top-1.5 border- absolute rounded-full border bg-brand-500 px-1.5 font-semibold text-2xs text-button-primary-fg leading-4.5', classNames.unreadBadge), children: unreadMessagesCount })), _jsx(Bell01Icon, { className: classNames.iconButtonLogo })] })) }));
+}

package/dist/lib/components/Messages/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Messages';
+export * from './MessagesTrigger';

package/dist/lib/components/Messages/index.js

@@ -0,0 +1,2 @@
+export * from './Messages.js';
+export * from './MessagesTrigger.js';

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

@@ -0,0 +1,6 @@
+interface NormalizeActionUrlOptions {
+    transactionsPageUrl: string;
+    questsPageUrl: string;
+}
+export declare function normalizeActionUrl(value: string, token: string, options: NormalizeActionUrlOptions): string;
+export {};

package/dist/lib/components/Messages/utils.js

@@ -0,0 +1,35 @@
+const QUEST_MILESTONE_LINK_REGEX = /^https:\/\/api\.trigger\.(?:development\.)?opexa\.io\/v1\/quests\/([^/]+)\/milestones\/([^/]+)\/link\/?$/;
+function isQuestMilestoneLink(url) {
+    const m = url.match(QUEST_MILESTONE_LINK_REGEX);
+    if (!m)
+        return { match: false };
+    return { match: true, questId: m[1], milestoneId: m[2] };
+}
+function appendTokenIfCustomLinkMilestone(url, token) {
+    if (!token)
+        return url;
+    if (!isQuestMilestoneLink(url).match)
+        return url;
+    const u = new URL(url);
+    if (!u.searchParams.has('token')) {
+        u.searchParams.set('token', token);
+    }
+    return u.toString();
+}
+export function normalizeActionUrl(value, token, options) {
+    const searchParams = new URLSearchParams(value);
+    if (value === 'quests') {
+        return options.questsPageUrl;
+    }
+    if (searchParams.has('personalCenter')) {
+        if (searchParams.get('personalCenter') === 'deposit' &&
+            searchParams.has('id')) {
+            return `${options.transactionsPageUrl}?tab=deposits&id=${searchParams.get('id')}`;
+        }
+        if (searchParams.get('personalCenter') === 'withdrawal' &&
+            searchParams.has('id')) {
+            return `${options.transactionsPageUrl}?tab=withdrawals&id=${searchParams.get('id')}`;
+        }
+    }
+    return appendTokenIfCustomLinkMilestone(value, token);
+}

package/dist/lib/components/MixpanelTracking/get-utm.d.ts

@@ -0,0 +1,18 @@
+export declare function getUTMParams(): {
+    utm_source: string;
+    utm_medium: string;
+    utm_campaign: string;
+    fbclid: string;
+    cxd: string;
+    gclid: string;
+};
+export declare function getSourceData(): {
+    utm_source: string;
+    utm_medium: string;
+    utm_campaign: string;
+    fbclid: string;
+    cxd: string;
+    gclid: string;
+    referrer: string;
+    source: string;
+};

package/dist/lib/components/MixpanelTracking/get-utm.js

@@ -0,0 +1,44 @@
+export function getUTMParams() {
+    const params = new URLSearchParams(window.location.search);
+    return {
+        utm_source: params.get('utm_source') || 'unknown',
+        utm_medium: params.get('utm_medium') || 'unknown',
+        utm_campaign: params.get('utm_campaign') || 'unknown',
+        fbclid: params.get('fbclid') || 'unknown',
+        cxd: params.get('cxd') || 'unknown',
+        gclid: params.get('gclid') || 'unknown',
+    };
+}
+export function getSourceData() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const utmSource = urlParams.get('utm_source');
+    const utmMedium = urlParams.get('utm_medium');
+    const utmCampaign = urlParams.get('utm_campaign');
+    const fbclid = urlParams.get('fbclid');
+    const cxd = urlParams.get('cxd');
+    const gclid = urlParams.get('gclid');
+    const referrer = document.referrer || 'direct';
+    let source = 'direct';
+    if (utmSource)
+        source = utmSource;
+    else if (fbclid)
+        source = 'facebook';
+    else if (gclid)
+        source = 'google';
+    else if (referrer.includes('facebook'))
+        source = 'facebook';
+    else if (referrer.includes('google'))
+        source = 'google';
+    else if (referrer !== 'direct')
+        source = referrer;
+    return {
+        utm_source: utmSource || 'none',
+        utm_medium: utmMedium || 'none',
+        utm_campaign: utmCampaign || 'none',
+        fbclid: fbclid || 'none',
+        cxd: cxd || 'none',
+        gclid: gclid || 'none',
+        referrer,
+        source,
+    };
+}

package/dist/lib/components/MixpanelTracking/index.d.ts

@@ -0,0 +1,5 @@
+export interface MixpanelTrackingProps {
+    mixpanelId: string;
+}
+export declare const MixpanelTracking: ({ mixpanelId }: MixpanelTrackingProps) => null;
+export default MixpanelTracking;

package/dist/lib/components/MixpanelTracking/index.js

@@ -0,0 +1,109 @@
+'use client';
+import { Capacitor } from '@capacitor/core';
+import mixpanel from 'mixpanel-browser';
+import { useEffect, useRef } from 'react';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useDepositsCountQuery } from '../../client/hooks/useDepositsCountQuery.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { getSourceData, getUTMParams } from './get-utm.js';
+export const MixpanelTracking = ({ mixpanelId }) => {
+    const initializedRef = useRef(false);
+    const session = useSessionQuery();
+    const btag = session.data?.btag;
+    const isAuthenticated = session.data?.status === 'authenticated';
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const kycStatus = account?.verificationStatus;
+    const depositCountQuery = useDepositsCountQuery();
+    const depositTotalCount = depositCountQuery.data;
+    useEffect(() => {
+        if (initializedRef.current)
+            return;
+        initializedRef.current = true;
+        console.log('MIXPANEL ID:', mixpanelId);
+        mixpanel.init(mixpanelId, {
+            autocapture: false,
+            autotrack: false,
+            record_sessions_percent: 0,
+            persistence: 'localStorage',
+        });
+        const distinctId = mixpanel.get_distinct_id();
+        mixpanel.identify(distinctId);
+        const { source, utm_source, utm_medium, utm_campaign, referrer } = getSourceData();
+        mixpanel.people.set({
+            platform: Capacitor.getPlatform() === 'android'
+                ? 'Android'
+                : Capacitor.getPlatform() === 'ios'
+                    ? 'iOS'
+                    : 'Web',
+            first_seen: new Date().toISOString(),
+            source,
+            utm_source,
+            utm_medium,
+            utm_campaign,
+            referrer,
+            isLoggedIn: isAuthenticated,
+            lastLoggedIn: isAuthenticated ? new Date().toISOString() : null,
+        });
+        if (typeof window !== 'undefined') {
+            const SESSION_KEY = 'last_mixpanel_session_tracked';
+            const ONE_DAY = 24 * 60 * 60 * 1000;
+            const last = window.localStorage.getItem(SESSION_KEY);
+            const now = Date.now();
+            const oneDayPassed = last && now - new Date(last).getTime() >= ONE_DAY;
+            if (!last || oneDayPassed) {
+                const isWeb = !Capacitor.getPlatform().includes('android') &&
+                    !Capacitor.getPlatform().includes('ios');
+                const resolvedSource = isWeb
+                    ? window.location.pathname
+                    : Capacitor.getPlatform().includes('android')
+                        ? 'android'
+                        : Capacitor.getPlatform().includes('ios')
+                            ? 'ios'
+                            : 'mobile web';
+                mixpanel.track('Session Start', {
+                    ...getUTMParams(),
+                    source: resolvedSource,
+                    referrer: (typeof document !== 'undefined' && document.referrer) || 'direct',
+                    btag: btag || 'organic',
+                });
+                window.localStorage.setItem(SESSION_KEY, new Date().toISOString());
+            }
+        }
+    }, [isAuthenticated, btag, mixpanelId]);
+    useEffect(() => {
+        if (!initializedRef.current)
+            return;
+        if (!isAuthenticated)
+            return;
+        mixpanel.people.set({
+            isLoggedIn: true,
+            lastLoggedIn: new Date().toISOString(),
+        });
+    }, [isAuthenticated]);
+    useEffect(() => {
+        if (depositTotalCount == null)
+            return;
+        mixpanel.people.set({
+            totalDeposits: depositTotalCount,
+        });
+    }, [depositTotalCount]);
+    useEffect(() => {
+        if (!kycStatus)
+            return;
+        mixpanel.people.set({
+            kycStatus,
+        });
+    }, [kycStatus]);
+    useEffect(() => {
+        if (!account)
+            return;
+        mixpanel.people.set({
+            email: account.emailAddress,
+            name: account.realName,
+            username: account.name,
+        });
+    }, [account]);
+    return null;
+};
+export default MixpanelTracking;

package/dist/lib/components/News/News.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties } from 'react';
+import type { News as TNews } from '../../types';
+export interface NewsProps {
+    news: TNews;
+    /** @default 'News' */
+    viewAllUrl?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function News(props: NewsProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/News/News.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { Prose } from '../../ui/Prose/index.js';
+import { stripTags } from '../../utils/stripTags.js';
+export function News(props) {
+    return (_jsxs(_Fragment, { children: [_jsx("meta", { name: "description", content: stripTags(props.news.content) }), _jsx("meta", { name: "og:title", content: props.news.title }), _jsx("meta", { name: "og:description", content: stripTags(props.news.content) }), _jsx("meta", { name: "og:image", content: props.news.image }), _jsx("meta", { name: "twitter:title", content: props.news.title }), _jsx("meta", { name: "twitter:description", content: stripTags(props.news.content) }), _jsx("meta", { name: "twitter:image", content: props.news.image }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsxs("div", { style: props.style, className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/news', className: "flex items-center gap-lg font-semibold text-button-secondary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all News"] }), _jsx(Image, { src: props.news.image, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-3xl block h-auto w-full rounded-xl lg:mt-6" }), _jsx("p", { className: "mt-xl font-semibold text-brand-400 text-sm lg:mt-6", children: props.news.category }), _jsx("h2", { className: "mt-xl font-semibold text-2xl lg:mt-6", children: props.news.title }), _jsx(Prose, { className: "mt-xl lg:mt-6", dangerouslySetInnerHTML: {
+                            __html: props.news.content,
+                        } })] })] }));
+}

package/dist/lib/components/News/index.d.ts

@@ -0,0 +1 @@
+export * from './News';

package/dist/lib/components/News/index.js

@@ -0,0 +1 @@
+export * from './News.js';

package/dist/lib/components/NewsFeed/News.d.ts

@@ -0,0 +1,6 @@
+import type { News as TNews } from '../../types';
+export interface NewsProps {
+    news: TNews;
+    viewDetailsUrl: string;
+}
+export declare function News({ news, viewDetailsUrl }: NewsProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/NewsFeed/News.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { Button } from '../../ui/Button/index.js';
+export function News({ news, viewDetailsUrl }) {
+    return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-primary-alt shadow-md", children: [_jsx(Image, { src: news.image, alt: "", width: 400, height: 274, loading: "lazy", unoptimized: true, className: "block h-[15.25rem] w-full object-cover" }), _jsxs("div", { className: "flex grow flex-col p-3xl", children: [_jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-brand-400 text-sm", children: news.category }), _jsx("h2", { className: "mt-2 line-clamp-1 font-semibold text-lg", children: news.title }), _jsx("p", { className: "mt-xs line-clamp-3 text-text-tertiary-600", dangerouslySetInnerHTML: {
+                                    __html: news.content,
+                                } })] }), _jsx(Button, { asChild: true, className: "mt-2xl", children: _jsxs(Link, { href: `${viewDetailsUrl}/${news.id}`, children: ["Read More", _jsxs("span", { className: "sr-only", children: [" about ", news.title] })] }) })] })] }, news.id));
+}

package/dist/lib/components/NewsFeed/NewsFeed.d.ts

@@ -0,0 +1,4 @@
+import { type NewsFeedCarouselProps } from './NewsFeedCarousel';
+import { type NewsFeedListProps } from './NewsFeedList';
+export type NewsFeedProps = NewsFeedListProps | NewsFeedCarouselProps;
+export declare function NewsFeed(props: NewsFeedProps): Promise<import("react/jsx-runtime").JSX.Element>;