@opexa/portal-components 0.0.99 → 0.0.101

package/dist/components/Jackpots/JackpotsList/useJackpotsListItemData.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useLocaleInfo } from '../../../client/hooks/index.js';
 import { useJackpotPayoutsQuery } from '../../../client/hooks/useJackpotPayoutsQuery.js';
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
 import { GAME_PROVIDER_DATA } from '../../../constants/index.js';
-import { ChevronLeftIcon, ChevronRightIcon } from '../../../icons/index.js';
+import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
 import { useJackpotsListItemContext, useJackpotsListPropsContext, } from './JackpotsListContext.js';
 import styles from './JackpotsListItem.module.css';
 export function useJackpotsListItemData() {
@@ -56,28 +57,6 @@ export function useJackpotsListItemData() {
             ? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
             : '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
     };
-    const starTierStyles = [
-        {
-            starColor: 'text-yellow-400',
-            numberColor: 'text-bg-primary',
-        },
-        {
-            starColor: 'text-utility-gray-700',
-            numberColor: 'text-bg-primary',
-        },
-        {
-            starColor: 'text-yellow-700',
-            numberColor: 'text-bg-primary',
-        },
-        {
-            starColor: 'text-bg-quaternary',
-            numberColor: 'text-text-primary-900',
-        },
-        {
-            starColor: 'text-bg-quaternary',
-            numberColor: 'text-text-primary-900',
-        },
-    ];
     return {
         jackpotPayouts,
         topJackpotPayout,
@@ -87,6 +66,5 @@ export function useJackpotsListItemData() {
         jackpotAmount,
         arrowImages,
         getAccumulatingJackpotDescription,
-        starTierStyles,
     };
 }

package/dist/components/Jackpots/useJackpotData.d.ts

@@ -1,6 +1,6 @@
 export declare function useJackpotData(): {
-    jackpotPayouts: import("../../types").JackpotPayout[];
-    topJackpotPayout: import("../../types").JackpotPayout;
+    jackpotPayouts: import("@opexa/portal-sdk-core").JackpotPayout[];
+    topJackpotPayout: import("@opexa/portal-sdk-core").JackpotPayout;
     filteredGameProviders: import("../../types").GameProviderData[];
     localeInfo: import("../../utils").LocaleInfo;
     isPayingOut: boolean;

package/dist/components/Jackpots/useJackpotData.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// useJackpotItemData.ts
 import { useCallback, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useLocaleInfo } from '../../client/hooks/index.js';

package/dist/components/Jackpots/useJackpotItemData.d.ts

@@ -0,0 +1,20 @@
+import type { Jackpot } from '@opexa/portal-sdk-core';
+import type { GameProviderData } from '../../types';
+export interface JackpotItemProps {
+    jackpot: Jackpot;
+    gameProviders: GameProviderData[];
+}
+export declare function useJackpotItemData({ jackpot, gameProviders, }: JackpotItemProps): {
+    jackpotPayouts: import("@opexa/portal-sdk-core").JackpotPayout[];
+    topJackpotPayout: import("@opexa/portal-sdk-core").JackpotPayout;
+    filteredGameProviders: GameProviderData[];
+    localeInfo: import("../../utils").LocaleInfo;
+    isPayingOut: boolean;
+    jackpotAmount: string;
+    arrowImages: import("react/jsx-runtime").JSX.Element[];
+    getAccumulatingJackpotDescription: (part: number, total: number) => string;
+    starTierStyles: {
+        starColor: string;
+        numberColor: string;
+    }[];
+};

package/dist/components/Jackpots/useJackpotItemData.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useLocaleInfo } from '../../client/hooks/index.js';
+import { useJackpotPayoutsQuery } from '../../client/hooks/useJackpotPayoutsQuery.js';
+import { ChevronLeftIcon, ChevronRightIcon } from '../../icons/index.js';
+import styles from '../JackpotCounter/JackpotCounterItem.module.css';
+export function useJackpotItemData({ jackpot, gameProviders, }) {
+    const jackpotPayoutsQuery = useJackpotPayoutsQuery({
+        first: 30,
+        filter: {
+            jackpot: {
+                equal: jackpot.id,
+            },
+        },
+        sort: {
+            cursor: 'AMOUNT',
+            order: 'DESC',
+        },
+    }, {
+        enabled: typeof window !== 'undefined',
+    });
+    const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    const topJackpotPayout = jackpotPayouts[0] ?? [];
+    const enabledJackpotGameProviders = useMemo(() => {
+        const gameProvider = Object.entries(jackpot?.jackpotTurnoverContributionPercentagePerGameProvider ?? {})
+            .filter(([, value]) => Number(value) > 0)
+            .map(([key]) => key);
+        return gameProvider;
+    }, [jackpot]);
+    const filteredGameProviders = gameProviders.filter((provider) => enabledJackpotGameProviders.includes(provider.id));
+    const localeInfo = useLocaleInfo();
+    const isPayingOut = jackpot.drawing;
+    const jackpotAmount = isPayingOut
+        ? jackpot.maximumJackpotPoolLimit
+        : jackpot.pool;
+    const Arrow = useCallback(({ index }) => {
+        const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
+        return (_jsx(Icon, { className: twMerge('scale-400 lg:scale-250 text-brand-300 min-w-2.5 lg:min-w-4', isPayingOut
+                ? styles['animate-wave-color-error']
+                : styles['animate-wave-color-success']), style: {
+                animationDelay: isPayingOut
+                    ? `${(40 - index - 1) * 0.1}s`
+                    : `${index * 0.1}s`,
+            } }));
+    }, [isPayingOut]);
+    const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => (_jsx(Arrow, { isFirst: i === 0, index: i }, i))), [Arrow]);
+    const getAccumulatingJackpotDescription = (part, total) => {
+        const percentage = total === 0 ? 0 : (part / total) * 100;
+        return percentage <= 90
+            ? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
+            : '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
+    };
+    const starTierStyles = [
+        {
+            starColor: 'text-yellow-400',
+            numberColor: 'text-bg-primary',
+        },
+        {
+            starColor: 'text-utility-gray-700',
+            numberColor: 'text-bg-primary',
+        },
+        {
+            starColor: 'text-yellow-700',
+            numberColor: 'text-bg-primary',
+        },
+        {
+            starColor: 'text-bg-quaternary',
+            numberColor: 'text-text-primary-900',
+        },
+        {
+            starColor: 'text-bg-quaternary',
+            numberColor: 'text-text-primary-900',
+        },
+    ];
+    return {
+        jackpotPayouts,
+        topJackpotPayout,
+        filteredGameProviders,
+        localeInfo,
+        isPayingOut,
+        jackpotAmount,
+        arrowImages,
+        getAccumulatingJackpotDescription,
+        starTierStyles,
+    };
+}

package/dist/components/KYC/Header.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronLeftIcon, XIcon } from '../../icons/index.js';
-import { Dialog, IconButton } from '../../ui/index.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { IconButton } from '../../ui/IconButton/index.js';
 export function Header() {
     return (_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "bg-bg-primary-alt relative flex items-center gap-xl px-xl py-md lg:justify-center lg:bg-transparent lg:p-0", children: [_jsx(IconButton, { size: "2xs", variant: "outline", colorScheme: "gray", className: "lg:hidden", onClick: () => api.setOpen(false), children: _jsx(ChevronLeftIcon, {}) }), _jsx(Dialog.Title, { className: "text-lg font-semibold", children: "Personal Verification" }), _jsx("button", { type: "button", className: "text-text-quinary absolute right-0 top-1/2 hidden -translate-y-1/2 lg:block", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "size-6" }) })] })) }));
 }

package/dist/components/KYC/Indicator.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { noop } from 'lodash-es';
-import { ArrowLeftIcon } from '../../icons/index.js';
-import { Progress } from '../../ui/index.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { Progress } from '../../ui/Progress/index.js';
 import { useKYCContext } from './KYCContext.js';
 export function Indicator() {
     const context = useKYCContext();

package/dist/components/KYC/KYC.d.ts

@@ -1 +1 @@
-export declare function KYC(): import("react/jsx-runtime").JSX.Element;
+export declare function KYC(): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/KYC/KYC.js

@@ -1,26 +1,14 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import { twMerge } from 'tailwind-merge';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
-import { Dialog } from '../../ui/index.js';
-import { Header } from './Header.js';
-import { Indicator } from './Indicator.js';
-import { KYCContext } from './KYCContext.js';
-import { Step1 } from './Step1.js';
-import { Step2 } from './Step2.js';
-import { Step3 } from './Step3.js';
-import { Step4 } from './Step4.js';
-import { useKYC } from './useKYC.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./KYC.lazy.js').then((m) => m.KYC), {
+    ssr: false,
+    loading: () => null,
+});
 export function KYC() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        kyc: ctx.kyc,
-    })));
-    const context = useKYC();
-    return (_jsx(KYCContext, { value: context, children: _jsx(Dialog.Root, { open: globalStore.kyc.open, onOpenChange: (details) => {
-                globalStore.kyc.setOpen(details.open);
-            }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: twMerge(context.step === 4 && 'flex items-center'), children: _jsxs(Dialog.Content, { className: twMerge(context.step < 4
-                                ? 'bg-bg-primary lg:bg-bg-primary-alt mx-auto h-full w-full lg:h-auto lg:w-[400px] lg:p-3xl'
-                                : 'mx-auto w-[25rem] max-w-[calc(100%-2rem)] p-3xl'), children: [context.step < 4 && _jsx(Header, {}), context.step < 4 && _jsx(Indicator, {}), context.step === 1 && _jsx(Step1, {}), context.step === 2 && _jsx(Step2, {}), context.step === 3 && _jsx(Step3, {}), context.step === 4 && _jsx(Step4, {})] }) })] }) }) }));
+    const touched = useGlobalStore(useShallow((ctx) => ctx.kyc['~touched']));
+    if (touched)
+        return _jsx(Component, {});
 }

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

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

package/dist/components/KYC/KYC.lazy.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Header } from './Header.js';
+import { Indicator } from './Indicator.js';
+import { KYCContext } from './KYCContext.js';
+import { Step1 } from './Step1.js';
+import { Step2 } from './Step2.js';
+import { Step3 } from './Step3.js';
+import { Step4 } from './Step4.js';
+import { useKYC } from './useKYC.js';
+export function KYC() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+    })));
+    const context = useKYC();
+    return (_jsx(KYCContext, { value: context, children: _jsx(Dialog.Root, { open: globalStore.kyc.open, onOpenChange: (details) => {
+                globalStore.kyc.setOpen(details.open);
+            }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: twMerge(context.step === 4 && 'flex items-center'), children: _jsxs(Dialog.Content, { className: twMerge(context.step < 4
+                                ? 'bg-bg-primary lg:bg-bg-primary-alt mx-auto h-full w-full lg:h-auto lg:w-[400px] lg:p-3xl'
+                                : 'mx-auto w-[25rem] max-w-[calc(100%-2rem)] p-3xl'), children: [context.step < 4 && _jsx(Header, {}), context.step < 4 && _jsx(Indicator, {}), context.step === 1 && _jsx(Step1, {}), context.step === 2 && _jsx(Step2, {}), context.step === 3 && _jsx(Step3, {}), context.step === 4 && _jsx(Step4, {})] }) })] }) }) }));
+}

package/dist/components/KYC/KYCContext.js

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

package/dist/components/KYC/KYCTrigger.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 export function KYCTrigger(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,

package/dist/components/KYC/Step1.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
-import { CheckIcon, XIcon } from '../../icons/index.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
 import uploadId from '../../images/capture-id-banner.png';
-import { Button } from '../../ui/index.js';
+import { Button } from '../../ui/Button/index.js';
 import { useKYCContext } from './KYCContext.js';
 export function Step1() {
     const context = useKYCContext();

package/dist/components/KYC/Step2.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
-import { CheckIcon, XIcon } from '../../icons/index.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
 import selfie from '../../images/capture-selfie-banner.png';
-import { Button } from '../../ui/index.js';
+import { Button } from '../../ui/Button/index.js';
 import { useKYCContext } from './KYCContext.js';
 export function Step2() {
     const context = useKYCContext();

package/dist/components/KYC/Step3.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckIcon } from '../../icons/index.js';
-import { Button, Checkbox, Field } from '../../ui/index.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Field } from '../../ui/Field/index.js';
 import { useKYCContext } from './KYCContext.js';
 export function Step3() {
     const context = useKYCContext();

package/dist/components/KYC/Step4.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckCircleIcon } from '../../icons/index.js';
-import { Button, Dialog } from '../../ui/index.js';
+import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
 export function Step4() {
     return (_jsxs("div", { children: [_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(CheckCircleIcon, {}) }), _jsx("h2", { className: "mt-3 text-center", children: "Submission Successful" }), _jsx("p", { className: "text-text-tertiary-600 text-center", children: "Your documents have been submitted successfully. They\u2019re now under review, and you\u2019ll receive a notification as soon as your account is verified." }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { className: "mt-3xl", onClick: () => api.setOpen(false), children: "Ok" })) })] }));
 }

package/dist/components/Messages/Message.js

@@ -3,7 +3,9 @@ import { tz } from '@date-fns/tz';
 import { format } from 'date-fns';
 import Link from 'next/link';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useLocaleInfo, useMarkMessageAsReadMutation, } from '../../client/hooks/index.js';
+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';
 export function Message() {

package/dist/components/Messages/MessageContext.js

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

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

@@ -0,0 +1,4 @@
+import type { Message } from '@opexa/portal-sdk-core';
+export declare function MessageItem({ message }: {
+    message: Message;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/MessageItem.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tz } from '@date-fns/tz';
+import { format } from 'date-fns';
+import Link from 'next/link';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore, useLocaleInfo, useMarkMessageAsReadMutation, } from '../../client/hooks/index.js';
+import { getMessageIcon } from '../../components/Messages/utils.js';
+export function MessageItem({ message }) {
+    const { 
+    /**/
+    id, icon, title, content, actions, markedAsRead, dateTimeCreated, } = message;
+    const localeInfo = useLocaleInfo();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        message: ctx.message,
+        messages: ctx.messages,
+    })));
+    const markMessageAsReadMutation = useMarkMessageAsReadMutation();
+    const Icon = getMessageIcon(icon);
+    const handleViewMessage = async () => {
+        globalStore.message.setData(message);
+        globalStore.message.setOpen(true);
+        globalStore.messages.setOpen(false);
+        if (!markedAsRead)
+            markMessageAsReadMutation.mutate(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(dateTimeCreated), 'M/d/yyyy - h:mma', {
+                            in: tz(localeInfo.timezone),
+                        }) }), !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: title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: content } }), actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: 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))) }))] }));
+}

package/dist/components/Messages/MessagePopup.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Portal } from '@ark-ui/react';
 import Link from 'next/link';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
-import { XIcon } from '../../icons/index.js';
-import { Dialog } from '../../ui/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
 import { getMessageIcon } from './utils.js';
 export const MessagePopup = () => {
     const globalStore = useGlobalStore(useShallow((ctx) => ({ message: ctx.message })));

package/dist/components/Messages/MessageTrigger.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useMarkMessageAsReadMutation, } from '../../client/hooks/index.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
 export function MessageTrigger(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         message: ctx.message,

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

@@ -1,13 +1,3 @@
-export interface MessagesProps {
-    /**
-     * @default '0px'
-     * @example
-     * ```tsx
-     * offsetTop="1em"
-     * offsetTop="1rem"
-     * offsetTop="16px"
-     * ```
-     */
-    offsetTop?: string | [mobile: string, desktop: string];
-}
-export declare function Messages(props: MessagesProps): import("react/jsx-runtime").JSX.Element;
+import type { MessagesProps } from './Messages.lazy';
+export declare function Messages(props: MessagesProps): import("react/jsx-runtime").JSX.Element | undefined;
+export type { MessagesProps };

package/dist/components/Messages/Messages.js

@@ -1,39 +1,14 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import { twMerge } from 'tailwind-merge';
-import { z } from 'zod';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useMessagesQuery, useUnreadMessagesCountQuery, } from '../../client/hooks/index.js';
-import { SpinnerIcon, XIcon } from '../../icons/index.js';
-import { Drawer, Tabs } from '../../ui/index.js';
-import { InfiniteScroll } from '../InfiniteScroll.js';
-import { Message } from './Message.js';
-import { MessageContext } from './MessageContext.js';
-import { MessagePopup } from './MessagePopup.js';
-const TABS = ['ALL', 'UNREAD'];
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./Messages.lazy.js').then((mod) => mod.Messages), {
+    ssr: false,
+    loading: () => null,
+});
 export function Messages(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
-    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
-    const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
-    const messagesQuery = useMessagesQuery({
-        first: 10,
-        ...(globalStore.messages.tab === 'UNREAD' && {
-            filter: {
-                markedAsRead: {
-                    equal: false,
-                },
-            },
-        }),
-    }, { refetchInterval: 5000 });
-    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 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(MessageContext, { 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, {})] }));
+    const touched = useGlobalStore(useShallow((ctx) => ctx.messages['~touched']));
+    if (touched)
+        return _jsx(Component, { ...props });
 }

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

@@ -0,0 +1,13 @@
+export interface MessagesProps {
+    /**
+     * @default '0px'
+     * @example
+     * ```tsx
+     * offsetTop="1em"
+     * offsetTop="1rem"
+     * offsetTop="16px"
+     * ```
+     */
+    offsetTop?: string | [mobile: string, desktop: string];
+}
+export declare function Messages(props: MessagesProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMessagesQuery } from '../../client/hooks/useMessagesQuery.js';
+import { useUnreadMessagesCountQuery } from '../../client/hooks/useUnreadMessagesCountQuery.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Drawer } from '../../ui/Drawer/index.js';
+import { Tabs } from '../../ui/Tabs/index.js';
+import { InfiniteScroll } from '../InfiniteScroll.js';
+import { Message } from './Message.js';
+import { MessageContext } from './MessageContext.js';
+import { MessagePopup } from './MessagePopup.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: 5000,
+    });
+    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 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(MessageContext, { 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/MessagesTrigger.js

@@ -2,14 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useUnreadMessagesCountQuery, } from '../../client/hooks/index.js';
-import { Bell01Icon } from '../../icons/index.js';
-import { IconButton } from '../../ui/index.js';
+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 globalStore = useGlobalStore(useShallow((ctx) => ({
         messages: ctx.messages,
     })));
-    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
+    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);

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

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

package/dist/components/Messages/utils.js

@@ -1,4 +1,4 @@
-import { BellRingIcon } from '../../icons/index.js';
+import { BellRingIcon } from '../../icons/BellRingIcon.js';
 // TODO: request icon assets for each type of MessageIcon
 const IMAGES = {
     BELL: BellRingIcon,