@opexa/portal-components 0.0.65 → 0.0.66

package/dist/components/Messages/MessagePopup.js

@@ -0,0 +1,20 @@
+'use client';
+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 { 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(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/MessageTrigger.d.ts

@@ -0,0 +1,8 @@
+import type { Message } from '@opexa/portal-sdk-core';
+import type { ComponentPropsWithRef } from 'react';
+interface MessageTriggerProps extends ComponentPropsWithRef<'button'> {
+    message: Message;
+    asChild?: boolean;
+}
+export declare function MessageTrigger(props: MessageTriggerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Messages/MessageTrigger.js

@@ -0,0 +1,18 @@
+'use client';
+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';
+export function MessageTrigger(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        message: ctx.message,
+    })));
+    const markMessageAsReadMutation = useMarkMessageAsReadMutation();
+    return (_jsx(ark.button, { type: "button", "aria-label": "View message", "data-state": globalStore.message.open ? 'open' : 'closed', ...props, onClick: (e) => {
+            globalStore.message.setData(props.message);
+            globalStore.message.setOpen(true);
+            if (!props.message.markedAsRead)
+                markMessageAsReadMutation.mutate(props.message.id);
+            return props.onClick?.(e);
+        } }));
+}

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

@@ -0,0 +1,14 @@
+export interface MessagesProps {
+    children?: React.ReactNode;
+    /**
+     * @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.js

@@ -0,0 +1,38 @@
+'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, useMessagesQuery, useUnreadMessagesCountQuery, } from '../../client/hooks/index.js';
+import { Bell01Icon, SpinnerIcon, XIcon } from '../../icons/index.js';
+import { Drawer, IconButton, Tabs } from '../../ui/index.js';
+import { InfiniteScroll } from '../InfiniteScroll.js';
+import { MessageItem } from './MessageItem.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: 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: [_jsxs(Drawer.Root, { open: globalStore.messages.open, onOpenChange: ({ open }) => globalStore.messages.setOpen(open), lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, children: props.children ?? (_jsxs(IconButton, { size: "sm", colorScheme: "gray", className: "relative", children: [!!unreadMessagesCount && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 rounded-full border px-1.5 text-2xs font-semibold", children: unreadMessagesCount })), _jsx(Bell01Icon, {})] })) }), _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(MessageItem, { message: 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.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithRef } from 'react';
+interface MessagesTriggerProps extends ComponentPropsWithRef<'button'> {
+    asChild?: boolean;
+}
+export declare function MessagesTrigger(props: MessagesTriggerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Messages/MessagesTrigger.js

@@ -0,0 +1,14 @@
+'use client';
+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';
+export function MessagesTrigger(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        messages: ctx.messages,
+    })));
+    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);
+        } }));
+}

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

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

package/dist/components/Messages/index.js

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

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

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

package/dist/components/Messages/utils.js

@@ -0,0 +1,27 @@
+import { BellRingIcon } from '../../icons/index.js';
+// TODO: request icon assets for each type of MessageIcon
+const IMAGES = {
+    BELL: BellRingIcon,
+    BONUS: BellRingIcon,
+    CHECK: BellRingIcon,
+    CONFETTI: BellRingIcon,
+    GIFT: BellRingIcon,
+    STAR: BellRingIcon,
+    TROPHY: BellRingIcon,
+    INFO: BellRingIcon,
+};
+export function getMessageIcon(logo) {
+    if (logo === 'ALERT')
+        return IMAGES.INFO;
+    if (logo === 'CHECK')
+        return IMAGES.CHECK;
+    if (logo === 'MESSAGE')
+        return IMAGES.BELL;
+    if (logo === 'CELEBRATE')
+        return IMAGES.CONFETTI;
+    if (logo === 'GIFT')
+        return IMAGES.GIFT;
+    if (logo === 'INFO')
+        return IMAGES.INFO;
+    return IMAGES.TROPHY;
+}

package/dist/components/PortalProvider/PortalProvider.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface PortalProviderProps {
+    googleAnalyticsId?: string;
+    googleTagManagerId?: string;
+    googleRecaptchaSiteKey?: string;
+    facebookPixelId?: string;
+    children: ReactNode;
+}
+export declare function PortalProvider({ children, facebookPixelId, googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, }: PortalProviderProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/PortalProvider/PortalProvider.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+import { prefetchAccountQuery, prefetchSessionQuery, prefetchWalletQuery, } from '../../server/utils/index.js';
+import { FacebookPixel, GoogleRecaptcha } from '../../third-parties/index.js';
+import { getQueryClient } from '../../utils/index.js';
+import { Providers } from './Providers.js';
+import { Snackbar } from './Snackbar.js';
+import { WebVitals } from './WebVitals.js';
+export async function PortalProvider({ children, facebookPixelId, googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, }) {
+    const queryClient = getQueryClient();
+    await Promise.all([
+        prefetchSessionQuery(),
+        prefetchAccountQuery(),
+        prefetchWalletQuery(),
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsx(Providers, { children: _jsx(HydrationBoundary, { state: dehydrate(queryClient), children: children }) }), _jsx(Snackbar, {}), _jsx(WebVitals, {}), facebookPixelId && _jsx(FacebookPixel, { fbId: facebookPixelId }), googleAnalyticsId && _jsx(GoogleAnalytics, { gaId: googleAnalyticsId }), googleTagManagerId && _jsx(GoogleTagManager, { gtmId: googleTagManagerId }), googleRecaptchaSiteKey && (_jsx(GoogleRecaptcha, { siteKey: googleRecaptchaSiteKey }))] }));
+}

package/dist/components/PortalProvider/Providers.d.ts

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

package/dist/components/PortalProvider/Providers.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryClientProvider } from '@tanstack/react-query';
+import dynamic from 'next/dynamic';
+import { getQueryClient } from '../../utils/index.js';
+const ThemeProvider = dynamic(() => import('next-themes').then((mod) => mod.ThemeProvider), {
+    ssr: false,
+});
+export function Providers({ children }) {
+    const queryClient = getQueryClient();
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemeProvider, { attribute: "class", storageKey: "WebPortalTheme", enableSystem: false, enableColorScheme: false, defaultTheme: "dark", disableTransitionOnChange: true, children: children }) }));
+}

package/dist/components/PortalProvider/Snackbar.d.ts

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

package/dist/components/PortalProvider/Snackbar.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast, Toaster } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { toaster } from '../../client/utils/index.js';
+import { AlertCircleIcon, XIcon } from '../../icons/index.js';
+export function Snackbar() {
+    return (_jsx(Toaster, { toaster: toaster, children: (toast) => (_jsxs(Toast.Root, { className: twMerge('group', 'p-xl', 'border', 'border-border-primary', 'bg-bg-primary-alt', 'flex', 'items-start', 'gap-lg', 'w-[21.438rem]', 'lg:w-[1200px]', 'max-w-full', 'rounded-xl', 'shadow-xs', 'h-[var(--height)]', 'z-[var(--z-index)]', 'scale-[var(--scale)]', 'opacity-[var(--opacity)]', '[translate:var(--x)_var(--y)_0]', 'transition-all', 'duration-300'), children: [_jsxs("div", { className: "flex grow flex-col gap-xl lg:flex-row lg:gap-lg", children: [_jsx("div", { className: twMerge('flex', 'items-center', 'justify-center', 'size-9.5', 'border-2', 'rounded-full', toast.type === 'success' && 'border-text-success-primary/15', toast.type === 'warning' && 'border-text-warning-primary/15', toast.type === 'error' && 'border-text-error-primary/15'), children: _jsx("div", { className: twMerge('flex', 'items-center', 'justify-center', 'size-7', 'border-2', 'rounded-full', toast.type === 'success' && 'border-text-success-primary/35', toast.type === 'warning' && 'border-text-warning-primary/35', toast.type === 'error' && 'border-text-error-primary/35'), children: _jsx(AlertCircleIcon, { className: twMerge('size-5', toast.type === 'success' && 'text-text-success-primary', toast.type === 'warning' && 'text-text-warning-primary', toast.type === 'error' && 'text-text-error-primary') }) }) }), _jsxs("div", { className: "grow text-sm leading-none", children: [_jsx(Toast.Title, { className: "text-text-secondary-700 font-semibold", children: toast.title
+                                        ? toast.title
+                                        : toast.type === 'error'
+                                            ? 'Error'
+                                            : toast.type === 'warning'
+                                                ? 'Warning'
+                                                : 'Success' }), _jsx(Toast.Description, { className: "text-text-tertiary-600 mt-xs", children: toast.description
+                                        ? toast.description
+                                        : toast.type === 'error'
+                                            ? 'Something went wrong.'
+                                            : toast.type === 'warning'
+                                                ? 'Please be cautious.'
+                                                : 'Operation completed successfully.' })] })] }), _jsx(Toast.CloseTrigger, { className: "text-text-secondary-700", children: _jsx(XIcon, { className: "size-5" }) })] }, toast.id)) }));
+}

package/dist/components/PortalProvider/WebVitals.d.ts

@@ -0,0 +1 @@
+export declare function WebVitals(): null;

package/dist/components/PortalProvider/WebVitals.js

@@ -0,0 +1,8 @@
+'use client';
+import { useReportWebVitals } from 'next/web-vitals';
+export function WebVitals() {
+    useReportWebVitals((metric) => {
+        console.log(metric);
+    });
+    return null;
+}

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

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

package/dist/components/PortalProvider/index.js

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

package/dist/components/Promo/Promo.client.d.ts

@@ -0,0 +1,2 @@
+import type { PromoProps } from './Promo';
+export declare function Promo__client(props: PromoProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Promo/Promo.client.js

@@ -0,0 +1,27 @@
+'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 { useShallow } from 'zustand/shallow';
+import { useGlobalStore, useLocaleInfo, usePromoQuery, } from '../../client/hooks/index.js';
+import { ChevronLeftIcon } from '../../icons/index.js';
+import { Button, Prose } from '../../ui/index.js';
+export function Promo__client(props) {
+    const localeInfo = useLocaleInfo();
+    const promoQuery = usePromoQuery(props.id);
+    const promo = promoQuery.data;
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    if (!promo)
+        return null;
+    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: "", width: 1024, height: 600, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), _jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
+                    globalStore.depositWithdrawal.setOpen(true);
+                }, children: "Deposit Now" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: promo.name }), _jsxs("p", { className: "text-text-secondary-700 mt-xl lg:mt-6", children: ["Ends", ' ', format(promo.activationEndDateTime, 'MM/dd/yyy hh:mm:ss', {
+                        in: tz(localeInfo.timezone),
+                    })] }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
+                    __html: promo.description,
+                } }), _jsxs(Prose, { className: "bg-bg-secondary mt-xl rounded-2xl p-2xl lg:mt-16 lg:p-4xl", children: [_jsx("h2", { children: "Conclusion" }), _jsx("p", { children: "Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse." }), _jsx("p", { children: "Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus." }), _jsx("p", { children: "Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor." })] })] }));
+}

package/dist/components/Promo/Promo.d.ts

@@ -0,0 +1,7 @@
+export interface PromoProps {
+    id: string;
+    /** @default '/promos' */
+    viewAllPromosUrl?: string;
+    className?: string;
+}
+export declare function Promo(props: PromoProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Promo/Promo.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { notFound } from 'next/navigation';
+import { prefetchPromoQuery } from '../../server/utils/index.js';
+import { getPromoQueryKey, getQueryClient } from '../../utils/index.js';
+import { Promo__client } from './Promo.client.js';
+export async function Promo(props) {
+    await prefetchPromoQuery(props.id);
+    const promo = getQueryClient().getQueryData(getPromoQueryKey(props.id));
+    if (promo) {
+        return _jsx(Promo__client, { ...props });
+    }
+    else {
+        return notFound();
+    }
+}

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

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

package/dist/components/Promo/index.js

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

package/dist/components/Promos/Cashback.d.ts

@@ -0,0 +1,7 @@
+import type { Cashback as TCashback } from '@opexa/portal-sdk-core';
+interface CashbackProps {
+    data: TCashback;
+    viewDetailsUrl: string;
+}
+export declare function Cashback({ data, viewDetailsUrl, }: CashbackProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Promos/Cashback.js

@@ -0,0 +1,17 @@
+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 { useAvailablePromosQuery, useGlobalStore } from '../../client/hooks/index.js';
+import { Button } from '../../ui/index.js';
+export function Cashback({ data, viewDetailsUrl = '/promos/cashback', }) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const claimablePromos = useAvailablePromosQuery().data ?? [];
+    const claimable = claimablePromos.find((availablePromo) => availablePromo.id === data.id);
+    return (_jsxs("div", { className: "border-border-secondary bg-accent-50 bg-bg-primary-alt relative flex h-full flex-col overflow-hidden rounded-2xl border", children: [data.banner.url && (_jsx(Image, { src: data.banner.url, alt: data.name, width: 1200, height: 500, priority: true, className: "block aspect-[365/180] w-full object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pb-3xl pt-2xl", children: [_jsx("div", { className: "w-full grow text-center text-xl font-semibold", children: data.name }), _jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: [claimable && (_jsx(Button, { size: "sm", onClick: () => {
+                                    globalStore.depositWithdrawal.setOpen(true);
+                                    globalStore.depositWithdrawal.setPromo(data.id);
+                                }, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { href: `${viewDetailsUrl}/${data.id}`, children: "Read more" }) })] })] })] }));
+}

package/dist/components/Promos/Promo.d.ts

@@ -0,0 +1,7 @@
+import type { Promo as TPromo } from '@opexa/portal-sdk-core';
+interface PromoProps {
+    data: TPromo;
+    viewDetailsUrl: string;
+}
+export declare function Promo({ data, viewDetailsUrl }: PromoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Promos/Promo.js

@@ -0,0 +1,17 @@
+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 { useAvailablePromosQuery, useGlobalStore } from '../../client/hooks/index.js';
+import { Button } from '../../ui/index.js';
+export function Promo({ data, viewDetailsUrl = '/promos' }) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const claimablePromos = useAvailablePromosQuery().data ?? [];
+    const claimable = claimablePromos.find((availablePromo) => availablePromo.id === data.id);
+    return (_jsxs("div", { className: "border-border-secondary bg-accent-50 bg-bg-primary-alt relative flex h-full flex-col overflow-hidden rounded-2xl border", children: [data.banner.url && (_jsx(Image, { src: data.banner.url, alt: data.name, width: 1200, height: 500, priority: true, className: "block aspect-[365/180] w-full object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pb-3xl pt-2xl", children: [_jsx("div", { className: "w-full grow text-center text-xl font-semibold", children: data.name }), _jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: [claimable && (_jsx(Button, { size: "sm", onClick: () => {
+                                    globalStore.depositWithdrawal.setOpen(true);
+                                    globalStore.depositWithdrawal.setPromo(data.id);
+                                }, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { href: `${viewDetailsUrl}/${data.id}`, children: "Read more" }) })] })] })] }));
+}

package/dist/components/Promos/Promos.d.ts

@@ -0,0 +1,15 @@
+export interface PromosProps {
+    /** @default "Promotions" */
+    heading?: string;
+    /** @default "/promos" */
+    viewAllUrl?: string;
+    /** @default "/promos" */
+    viewPromoDetailsUrl?: string;
+    /** @default "/promos/cashback" */
+    viewCashbackDetailsUrl?: string;
+    /** @default 1 */
+    className?: string;
+    /** @default 'carousel' */
+    layout?: 'carousel' | 'grid';
+}
+export declare function Promos(props: PromosProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Promos/Promos.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchCashbacksQuery, prefetchPromosQuery, } from '../../server/utils/index.js';
+import { PromosCarousel } from './PromosCarousel.js';
+import { PromosGrid } from './PromosGrid.js';
+export async function Promos(props) {
+    await Promise.all([prefetchPromosQuery(), prefetchCashbacksQuery()]);
+    if (props.layout === 'grid') {
+        return _jsx(PromosGrid, { ...props });
+    }
+    else {
+        return _jsx(PromosCarousel, { ...props });
+    }
+}

package/dist/components/Promos/PromosCarousel.d.ts

@@ -0,0 +1,2 @@
+import type { PromosProps } from './Promos';
+export declare function PromosCarousel(props: PromosProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promos/PromosCarousel.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import useEmblaCarousel, {} from 'embla-carousel-react';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useCashbacksQuery, usePromosQuery } from '../../client/hooks/index.js';
+import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, Gift01Icon, } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+import { Empty } from '../Empty.js';
+import { Cashback } from './Cashback.js';
+import { Promo } from './Promo.js';
+export function PromosCarousel(props) {
+    const promosQuery = usePromosQuery();
+    const cashbacksQuery = useCashbacksQuery();
+    const promos = promosQuery.data ?? [];
+    const cashbacks = cashbacksQuery.data ?? [];
+    const empty = promos.length <= 0 && cashbacks.length <= 0;
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+        breakpoints: {
+            '(min-width: 1024px)': {
+                slidesToScroll: 3,
+            },
+        },
+    });
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const onNextButtonClick = useCallback(async () => {
+        emblaApi?.scrollNext();
+    }, [emblaApi]);
+    const onSelect = useCallback((emblaApi) => {
+        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
+        setNextBtnDisabled(!emblaApi?.canScrollNext());
+    }, []);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promotions' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/promos', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), empty && (_jsx(Empty, { icon: Gift01Icon, title: "No Promos", message: "No promo is currently available.", className: "mt-8" })), !empty && (_jsx(_Fragment, { children: _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsxs("div", { className: twMerge('grid auto-cols-[100%] grid-flow-col gap-1.5 lg:auto-cols-[calc((100%-(1.25rem*2))/3)] lg:gap-2xl'), children: [promos.map((promo) => (_jsx(Promo, { data: promo, viewDetailsUrl: props.viewPromoDetailsUrl ?? '/promos' }, promo.id))), cashbacks.map((cashback) => (_jsx(Cashback, { data: cashback, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/cashback' }, cashback.id)))] }) }) }))] }));
+}

package/dist/components/Promos/PromosGrid.d.ts

@@ -0,0 +1,2 @@
+import type { PromosProps } from './Promos';
+export declare function PromosGrid(props: PromosProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promos/PromosGrid.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCashbacksQuery, usePromosQuery } from '../../client/hooks/index.js';
+import { Cashback } from './Cashback.js';
+import { Promo } from './Promo.js';
+export function PromosGrid(props) {
+    const promosQuery = usePromosQuery();
+    const cashbacksQuery = useCashbacksQuery();
+    const promos = promosQuery.data ?? [];
+    const cashbacks = cashbacksQuery.data ?? [];
+    const empty = promos.length <= 0 && cashbacks.length <= 0;
+    if (empty) {
+        return (_jsx("div", { className: props.className, children: _jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promos' }), _jsx("div", { className: "grow" })] }) }));
+    }
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promos' }), _jsx("div", { className: "grow" })] }), _jsx("div", { className: "relative mt-lg lg:overflow-hidden", children: _jsxs("div", { className: "grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: [promos.map((promo) => (_jsx(Promo, { data: promo, viewDetailsUrl: props.viewPromoDetailsUrl ?? '/promos' }, promo.id))), cashbacks.map((cashback) => (_jsx(Cashback, { data: cashback, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/cashback' }, cashback.id)))] }) })] }));
+}

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

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

package/dist/components/Promos/index.js

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

package/dist/components/Protected/Protected.d.ts

@@ -0,0 +1,6 @@
+interface ProtectedProps {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+}
+export declare function Protected(props: ProtectedProps): import("react").ReactNode;
+export {};

package/dist/components/Protected/Protected.js

@@ -0,0 +1,8 @@
+'use client';
+import { useSessionQuery } from '../../client/hooks/index.js';
+export function Protected(props) {
+    const query = useSessionQuery();
+    return query.data?.status === 'authenticated'
+        ? props.children
+        : (props.fallback ?? null);
+}

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

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

package/dist/components/Protected/index.js

@@ -0,0 +1 @@
+export * from './Protected.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 '@opexa/portal-sdk-core';
+export declare function DailyCheckInQuest({ quest }: {
+    quest: Quest;
+}): import("react/jsx-runtime").JSX.Element;