@opexa/portal-components 0.0.150 → 0.0.152

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

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

package/dist/client/hooks/useGlobalStore.js

@@ -126,10 +126,6 @@ export const useGlobalStore = create((set) => ({
                     open,
                     '~touched': true,
                 },
-                message: {
-                    ...prev.message,
-                    '~touched': true,
-                },
             }));
         },
         '~touched': false,
@@ -143,32 +139,6 @@ export const useGlobalStore = create((set) => ({
             }));
         },
     },
-    message: {
-        open: false,
-        setOpen(open) {
-            set((prev) => ({
-                message: {
-                    ...prev.message,
-                    open,
-                    '~touched': true,
-                },
-                messages: {
-                    ...prev.messages,
-                    '~touched': true,
-                },
-            }));
-        },
-        '~touched': false,
-        data: null,
-        setData(content) {
-            set((prev) => ({
-                message: {
-                    ...prev.message,
-                    data: content,
-                },
-            }));
-        },
-    },
     search: {
         open: false,
         setOpen(open) {

package/dist/components/KYC/IdentityVerification.js

@@ -49,7 +49,7 @@ export function IdentityVerification() {
                     return prev;
                 return {
                     ...prev,
-                    status: 'UNVERIFIED',
+                    status: 'CREATED',
                 };
             });
         },

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

@@ -1,3 +1,3 @@
 import type { KYCProps } from './KYC.lazy';
-export declare function KYC(props: KYCProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function KYC(props: KYCProps): import("react/jsx-runtime").JSX.Element;
 export type { KYCProps };

package/dist/components/KYC/KYC.js

@@ -1,6 +1,7 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import dynamic from 'next/dynamic';
+import Script from 'next/script';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 const Component = dynamic(() => import('./KYC.lazy.js').then((m) => m.KYC), {
@@ -9,6 +10,5 @@ const Component = dynamic(() => import('./KYC.lazy.js').then((m) => m.KYC), {
 });
 export function KYC(props) {
     const touched = useGlobalStore(useShallow((ctx) => ctx.kyc['~touched']));
-    if (touched)
-        return _jsx(Component, { ...props });
+    return (_jsxs(_Fragment, { children: [touched && _jsx(Component, { ...props }), _jsx(Script, { src: "https://docs.opencv.org/4.7.0/opencv.js", async: true }), _jsx(Script, { src: "https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js", strategy: "afterInteractive" })] }));
 }

package/dist/components/Messages/Message.js

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

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

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

package/dist/components/Messages/MessageContext.js

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

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

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

package/dist/components/Messages/MessagePopup.js

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

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

@@ -1,3 +1,3 @@
 import type { MessagesProps } from './Messages.lazy';
-export declare function Messages(props: MessagesProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function Messages(props: MessagesProps): import("react/jsx-runtime").JSX.Element;
 export type { MessagesProps };

package/dist/components/Messages/Messages.js

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

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

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

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

@@ -1,6 +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/components/Messages/MessagesContext.js

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

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

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

package/dist/components/Messages/MessagesPopup.js

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

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

@@ -1,4 +1,2 @@
-export * from './MessagePopup';
 export * from './Messages';
 export * from './MessagesTrigger';
-export * from './MessageTrigger';

package/dist/components/Messages/index.js

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

package/dist/components/Quests/CountdownTimer.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+type TimeLeft = {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+interface CountdownTimerProps {
+    startDateTime?: string;
+    endDateTime?: string;
+    renderAction: (timeLeft: TimeLeft) => ReactNode;
+    onEnd?: () => void;
+}
+export default function CountdownTimer({ startDateTime, endDateTime, renderAction, onEnd, }: CountdownTimerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Quests/CountdownTimer.js

@@ -0,0 +1,33 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { differenceInSeconds, parseISO } from 'date-fns';
+import { useCallback, useEffect, useState } from 'react';
+export default function CountdownTimer({ startDateTime, endDateTime, renderAction, onEnd, }) {
+    const calculateTimeLeft = useCallback(() => {
+        const start = startDateTime ? parseISO(startDateTime) : new Date();
+        const end = endDateTime ? parseISO(endDateTime) : new Date();
+        const totalSeconds = Math.max(differenceInSeconds(end, start), 0);
+        const days = Math.floor(totalSeconds / (60 * 60 * 24));
+        const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
+        const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
+        const seconds = totalSeconds % 60;
+        return { days, hours, minutes, seconds };
+    }, [startDateTime, endDateTime]);
+    const [timeLeft, setTimeLeft] = useState(calculateTimeLeft);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            const newTimeLeft = calculateTimeLeft();
+            setTimeLeft(newTimeLeft);
+            const isZero = newTimeLeft.days === 0 &&
+                newTimeLeft.hours === 0 &&
+                newTimeLeft.minutes === 0 &&
+                newTimeLeft.seconds === 0;
+            if (isZero) {
+                clearInterval(interval);
+                onEnd?.();
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [calculateTimeLeft, onEnd]);
+    return _jsx(_Fragment, { children: renderAction(timeLeft) });
+}

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts

@@ -0,0 +1,4 @@
+import type { Quest } from '../../../types';
+export declare function DailyCheckInQuest({ quest }: {
+    quest: Quest;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { addDays, isEqual, startOfDay } from 'date-fns';
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useCheckInDailyCheckInQuestMutation } from '../../../client/hooks/useCheckInDailyCheckInQuestMutation.js';
+import { toaster } from '../../../client/utils/toaster.js';
+import { CalendarIcon } from '../../../icons/CalendarIcon.js';
+import { CheckIcon } from '../../../icons/CheckIcon.js';
+import { ClockStopWatchIcon } from '../../../icons/ClockStopWatchIcon.js';
+import { InfoCircleIcon } from '../../../icons/InfoCircleIcon.js';
+import { Badge } from '../../../ui/Badge/index.js';
+import { Button } from '../../../ui/Button/index.js';
+import { getQueryClient } from '../../../utils/getQueryClient.js';
+import { getAvailableQuestsQueryKey } from '../../../utils/queryKeys.js';
+import CountdownTimer from '../CountdownTimer.js';
+import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
+export function DailyCheckInQuest({ quest }) {
+    const queryClient = getQueryClient();
+    const [showRules, setShowRules] = useState(false);
+    const [isExpired, setIsExpired] = useState(false);
+    const { name, description, status, lastCheckInDate, progressPercentage, checkInStreak, thirdDayBonusAmount, sixthDayBonusAmount, seventhDayBonusAmount, endDateTime, id, } = quest;
+    const today = startOfDay(new Date());
+    const hasCheckedInToday = lastCheckInDate
+        ? isEqual(today, startOfDay(new Date(lastCheckInDate)))
+        : false;
+    const checkedInRewards = {
+        3: thirdDayBonusAmount,
+        6: sixthDayBonusAmount,
+        7: seventhDayBonusAmount,
+    };
+    const dailyCheckedInData = Array.from({ length: 7 }, (_, i) => {
+        const day = i + 1;
+        return {
+            day,
+            reward: checkedInRewards[day] ?? 0,
+        };
+    });
+    const { mutate } = useCheckInDailyCheckInQuestMutation({
+        onSuccess() {
+            toaster.success({
+                title: 'Check-in successful 🎉',
+                description: 'You’ve successfully checked in for today! Keep it up to maintain your streak!',
+            });
+            queryClient.invalidateQueries({
+                queryKey: getAvailableQuestsQueryKey(),
+            });
+        },
+        onError(e) {
+            toaster.error({
+                title: 'Check-in successful 🎉',
+                description: e.message ?? 'Check-In Failed',
+            });
+        },
+    });
+    const handleCheckIn = async () => mutate(id);
+    return (_jsxs(_Fragment, { children: [_jsx(DailyCheckInQuestModal, { modalState: {
+                    isOpen: showRules,
+                    setIsOpen: setShowRules,
+                } }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(CountdownTimer, { endDateTime: endDateTime, renderAction: (timeLeft) => (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsxs(Badge.Label, { children: [timeLeft.days, "d:", timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => setIsExpired(true) }), _jsx("div", { role: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => {
+                                    const reward = item.reward ? `+₱${item.reward}` : '-';
+                                    return (_jsx("div", { className: twMerge('flex items-center justify-center', item.day <= (checkInStreak || 0)
+                                            ? 'text-brand-400'
+                                            : 'text-text-secondary-700'), children: _jsx("p", { children: reward }) }, item.day));
+                                }) }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercentage}%` } }) }), _jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => (_jsx("div", { className: "flex items-center justify-center", children: _jsx(CalendarWithDayNumber, { day: item.day, currentCheckedInDays: checkInStreak || 0 }, item.day) }, item.day))) })] }), _jsx(Button, { onClick: handleCheckIn, className: "disabled:bg-bg-primary disabled:text-text-disabled", disabled: isExpired ||
+                            status === 'COMPLETED' ||
+                            status === 'FAILED' ||
+                            hasCheckedInToday, children: hasCheckedInToday && status === 'IN_PROGRESS' ? (_jsx(CountdownTimer, { endDateTime: startOfDay(addDays(new Date(), 1)).toISOString(), renderAction: (timeLeft) => (_jsxs("div", { className: "flex items-center space-x-0.5", children: [_jsx(CheckIcon, {}), _jsxs("p", { children: [timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => {
+                                queryClient.invalidateQueries({
+                                    queryKey: getAvailableQuestsQueryKey(),
+                                });
+                            } })) : ('Check-In') })] })] }));
+}
+function CalendarWithDayNumber({ day, currentCheckedInDays, }) {
+    return (_jsxs("div", { className: twMerge('group relative h-fit w-fit', day <= currentCheckedInDays
+            ? 'text-brand-400'
+            : 'text-text-secondary-700'), children: [_jsx(CalendarIcon, {}), _jsx("div", { className: "absolute inset-0 mt-1 flex items-center justify-center text-2xs lg:mt-[2px]", children: _jsx("p", { className: "text-center", children: day }) })] }));
+}

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    modalState: {
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+    };
+}
+export declare function DailyCheckInQuestModal(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from '../../../icons/XIcon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
+import { Portal } from '../../../ui/Portal/index.js';
+export function DailyCheckInQuestModal(props) {
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(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 max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: "Daily Check-In Rules" }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn rewards just for checking in each day!" }), _jsx("li", { children: "Stay consistent to unlock special rewards on the 3rd, 5th, and 7th day." }), _jsx("li", { children: "Missing a day will reset your streak, starting again from Day 1." }), _jsx("li", { children: "Each check-in unlocks the next one on the following day." }), _jsx("li", { children: "Successfully check in for 7 consecutive days to complete the quest and reset the cycle." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
+}

package/dist/components/Quests/OnboardingQuest/OnboardingQuest.d.ts

@@ -0,0 +1,4 @@
+import type { Quest } from '../../../types';
+export declare function OnboardingQuest(props: {
+    quest: Quest;
+}): null;

package/dist/components/Quests/OnboardingQuest/OnboardingQuest.js

@@ -0,0 +1,4 @@
+export function OnboardingQuest(props) {
+    console.log('OnboardingQuest not implemented', props.quest);
+    return null;
+}

package/dist/components/Quests/WageringQuest/WageringQuest.d.ts

@@ -0,0 +1,4 @@
+import type { Quest } from '../../../types';
+export declare function WageringQuest({ quest }: {
+    quest: Quest;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/WageringQuest/WageringQuest.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { ClockStopWatchIcon } from '../../../icons/ClockStopWatchIcon.js';
+import { InfoCircleIcon } from '../../../icons/InfoCircleIcon.js';
+import { Badge } from '../../../ui/Badge/index.js';
+import CountdownTimer from '../CountdownTimer.js';
+import { WageringQuestModal } from './WageringQuestModal.js';
+export function WageringQuest({ quest }) {
+    const [showRules, setShowRules] = useState(false);
+    const [isExpired, setIsExpired] = useState(false);
+    const { progressPercentage, turnover, targetTurnover, name, description, endDateTime, bonus, status, } = quest;
+    return (_jsxs(_Fragment, { children: [_jsx(WageringQuestModal, { questName: name, modalState: {
+                    isOpen: showRules,
+                    setIsOpen: setShowRules,
+                } }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(CountdownTimer, { endDateTime: endDateTime, renderAction: (timeLeft) => (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsxs(Badge.Label, { children: [timeLeft.days, "d:", timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => setIsExpired(true) }), _jsx("div", { role: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: "text-text-primary-brand group flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", parseInt(progressPercentage).toFixed(2), "%"] }), _jsxs("p", { children: [turnover, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " PHP"] })] })] }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercentage}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx("div", { className: "bg-button-secondary-bg border-bg-primary-hover w-full rounded-md border px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { className: twMerge(isExpired || status === 'COMPLETED' || status === 'FAILED'
+                                    ? ['opacity-50 grayscale']
+                                    : ''), children: ["Complete to get ", _jsxs("span", { className: "text-brand-400", children: ["\u20B1", bonus] }), ' ', "bonus!"] }) }) })] })] }));
+}