@opexa/portal-components 0.0.921 → 0.0.923

package/dist/components/KYC/backup/Step4.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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/KYC/backup/useKYC.d.ts

@@ -0,0 +1,10 @@
+type Step = 1 | 2 | 3 | 4;
+export interface UseKYCReturn {
+    step: Step;
+    setStep: (step: Step) => void;
+}
+export declare function useKYC(): {
+    step: Step;
+    setStep: import("react").Dispatch<import("react").SetStateAction<Step>>;
+};
+export {};

package/dist/components/KYC/backup/useKYC.js

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+export function useKYC() {
+    const [step, setStep] = useState(1);
+    return {
+        step,
+        setStep,
+    };
+}

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

@@ -0,0 +1 @@
+export declare function loadFaceApiModels(): Promise<void>;

package/dist/components/KYC/loadModels.js

@@ -0,0 +1,9 @@
+import * as faceapi from 'face-api.js';
+export async function loadFaceApiModels() {
+    const MODEL_URL = '/models';
+    await Promise.all([
+        faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
+        faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
+        faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
+    ]);
+}

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

@@ -0,0 +1,25 @@
+type EventDetail = {
+    type: 'SELFIE_CAPTURED';
+    data: string;
+} | {
+    type: 'ID_DOCUMENT_CAPTURED';
+    data: string;
+};
+type UnsubscribeFn = () => void;
+type Subscriber = (detail: EventDetail) => UnsubscribeFn;
+export type CaptureSubject = 'SELFIE' | 'ID_DOCUMENT';
+export interface UseKYCReturn {
+    step: number;
+    setStep: (step: number) => void;
+    done: boolean;
+    setDone: (done: boolean) => void;
+    subscribe: (subscriber: Subscriber) => UnsubscribeFn;
+    triggerEvent: (detail: EventDetail) => void;
+    idFrontImageId: string | null;
+    setFrontImageId: (id: string | null) => void;
+    selfieImageId: string | null;
+    setSelfieImageId: (id: string | null) => void;
+    reset: () => void;
+}
+export declare function useKYC(): UseKYCReturn;
+export {};

package/dist/components/KYC/useKYC.js

@@ -0,0 +1,38 @@
+import { useRef, useState } from 'react';
+export function useKYC() {
+    const [step, setStep] = useState(2);
+    const [done, setDone] = useState(false);
+    const [idFrontImageId, setFrontImageId] = useState(null);
+    const [selfieImageId, setSelfieImageId] = useState(null);
+    const subscribers = useRef([]);
+    const subscribe = (subscriber) => {
+        subscribers.current.push(subscriber);
+        return () => {
+            subscribers.current = subscribers.current.filter((item) => item !== subscriber);
+        };
+    };
+    const triggerEvent = (detail) => {
+        subscribers.current.forEach((subscriber) => {
+            subscriber(detail);
+        });
+    };
+    const reset = () => {
+        setStep(1);
+        setDone(false);
+        setFrontImageId(null);
+        setSelfieImageId(null);
+    };
+    return {
+        step,
+        setStep,
+        done,
+        setDone,
+        idFrontImageId,
+        setFrontImageId,
+        selfieImageId,
+        setSelfieImageId,
+        subscribe,
+        triggerEvent,
+        reset,
+    };
+}

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

@@ -0,0 +1,9 @@
+export declare function loadFaceApiModels(): Promise<void>;
+export declare function dataURLtoBlob(dataURL: string): Blob;
+export declare const resizeFile: (file: File) => Promise<unknown>;
+export declare const MAX_FILE_SIZE = 10;
+export declare const MAX_NAME_LENGTH = 52;
+export declare const SUPPORTED_FILES: string[];
+export declare function validateFile(file: File): "File too large" | "File name too long" | "Unsupported file" | undefined;
+export declare function showPermissionInstructions(): void;
+export declare const cameraErrorDescriptions: Record<string, string>;

package/dist/components/KYC/utils.js

@@ -0,0 +1,79 @@
+import * as faceapi from 'face-api.js';
+import Resizer from 'react-image-file-resizer';
+export async function loadFaceApiModels() {
+    // const url = `${STATIC_ENDPOINT}/models`;
+    const url = '/models';
+    await Promise.all([
+        faceapi.nets.tinyFaceDetector.loadFromUri(url),
+        faceapi.nets.faceLandmark68Net.loadFromUri(url),
+        faceapi.nets.faceRecognitionNet.loadFromUri(url),
+    ]);
+}
+export function dataURLtoBlob(dataURL) {
+    const parts = dataURL.split(';base64,');
+    const contentType = parts[0].split(':')[1];
+    const raw = window.atob(parts[1]);
+    const rawLength = raw.length;
+    const uInt8Array = new Uint8Array(rawLength);
+    for (let i = 0; i < rawLength; ++i) {
+        uInt8Array[i] = raw.charCodeAt(i);
+    }
+    return new Blob([uInt8Array], { type: contentType });
+}
+export const resizeFile = (file) => new Promise((resolve) => {
+    Resizer.imageFileResizer(file, 300, 300, 'jpeg', 100, 0, (uri) => {
+        resolve(uri);
+    }, 'file');
+});
+export const MAX_FILE_SIZE = 10; /* in MB */
+export const MAX_NAME_LENGTH = 52;
+export const SUPPORTED_FILES = [
+    /* add more supported ext */
+    'image/png',
+    'image/jpg',
+    'image/jpeg',
+];
+function removeFilenameExt(subject) {
+    const l = subject.split('.');
+    l.pop();
+    return l.join('.');
+}
+export function validateFile(file) {
+    const fileType = file.type;
+    const fileSize = file.size / (1024 * 1024);
+    const nameLength = removeFilenameExt(file.name).length;
+    if (fileSize > MAX_FILE_SIZE)
+        return 'File too large';
+    if (nameLength > MAX_NAME_LENGTH)
+        return 'File name too long';
+    if (!SUPPORTED_FILES.includes(fileType))
+        return 'Unsupported file';
+}
+export function showPermissionInstructions() {
+    const instructions = `
+      Camera access is blocked. To enable camera access:
+
+      Chrome/Edge:
+      1. Click the camera icon in the address bar
+      2. Select "Always allow" and click "Done"
+      3. Or go to Settings > Privacy and security > Site settings > Camera
+
+      Firefox:
+      1. Click the shield icon in the address bar
+      2. Click on "Camera blocked"
+      3. Select "Allow" and refresh the page
+
+      Safari:
+      1. Go to Safari > Settings > Websites > Camera
+      2. Find this website and change to "Allow"
+
+      After changing permissions, please refresh the page and try again.
+        `;
+    alert(instructions);
+}
+export const cameraErrorDescriptions = {
+    NotAllowedError: 'We were unable to detect a camera on your device. Please ensure it is properly connected and accessible to this application.',
+    NotReadableError: 'We were unable to access your camera. Please check if another application is using it or try reconnecting your device.',
+    NotFoundError: 'No camera was found. Please connect a camera and try again.',
+    NoIdDetectedError: 'No ID document was detected in the frame. Please ensure your ID is clearly visible and try again.',
+};

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

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

package/dist/components/Messages/Message.js

@@ -0,0 +1,35 @@
+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 } 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() {
+    const message = useMessageContext();
+    const localeInfo = useLocaleInfo();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        message: ctx.message,
+        messages: ctx.messages,
+    })));
+    const markMessageAsReadMutation = useMarkMessageAsReadMutation();
+    const Icon = getMessageIcon(message.icon);
+    const handleViewMessage = async () => {
+        globalStore.message.setData(message);
+        globalStore.message.setOpen(true);
+        globalStore.messages.setOpen(false);
+        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: "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

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

package/dist/components/Messages/MessageContext.js

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

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

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

package/dist/components/Messages/MessagePopup.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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 { ComponentPropsWithRef } from 'react';
+import type { Message } from '../../types';
+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,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ark } from '@ark-ui/react/factory';
+import { useShallow } from 'zustand/shallow';
+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,
+    })));
+    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/PortalProvider/CXDTokenObserver.d.ts

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

package/dist/components/PortalProvider/CXDTokenObserver.js

@@ -0,0 +1,30 @@
+'use client';
+import { addHours } from 'date-fns';
+import { clamp } from 'lodash-es';
+import { useSearchParams } from 'next/navigation';
+import { useLocalStorage, useTimeout } from 'usehooks-ts';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+export function CXDTokenObserver() {
+    const searchParams = useSearchParams();
+    const cxdToken = searchParams.get('cxd');
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const [cxd, setCxd, removeCxd] = useLocalStorage('WebPortalCellxpertCxd', null);
+    const now = new Date();
+    const shouldTimeoutRun = cxdToken && account;
+    const removeCxdUntilInMs = cxd?.timestamp
+        ? clamp(cxd.timestamp - now.getTime(), 0, Infinity)
+        : 0;
+    useTimeout(() => {
+        const isSame = cxd?.cxd === cxdToken;
+        if (!isSame) {
+            const extendedTimestamp = addHours(new Date(), 6).getTime();
+            setCxd({
+                cxd: cxdToken,
+                timestamp: extendedTimestamp,
+            });
+        }
+    }, shouldTimeoutRun ? 100 : null);
+    useTimeout(() => removeCxd(), shouldTimeoutRun ? removeCxdUntilInMs : null);
+    return null;
+}

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

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

package/dist/components/PortalProvider/LinkGoogleAccountObserver.js

@@ -0,0 +1,29 @@
+'use client';
+import { useSearchParams } from 'next/navigation';
+import { useTimeout } from 'usehooks-ts';
+import { toaster } from '../../client/utils/toaster.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getSessionQueryKey } from '../../utils/queryKeys.js';
+export function LinkGoogleAccountObserver() {
+    const searchParams = useSearchParams();
+    const code = searchParams.get('message') ?? searchParams.get('status');
+    const queryClient = getQueryClient();
+    useTimeout(() => {
+        if (code === 'duplicate') {
+            return toaster.error({
+                title: 'Duplicate Account',
+                description: 'An account with this email already exists. Please try signing in instead.',
+            });
+        }
+        if (code === 'linked') {
+            queryClient.invalidateQueries({
+                queryKey: getSessionQueryKey(),
+            });
+            return toaster.success({
+                title: 'Google Account Linked Successfully',
+                description: 'Your Google account has been successfully connected.',
+            });
+        }
+    }, code ? 100 : null);
+    return null;
+}

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!"] }) }) })] })] }));
+}

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

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

package/dist/components/Quests/WageringQuest/WageringQuestModal.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 WageringQuestModal(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: props.questName }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
+}

package/dist/components/ResponsibleGaming/ResponsibleGamingV2.lazy.js

@@ -44,7 +44,7 @@ export function ResponsibleGamingV2(props) {
                 globalStore.disclaimer.setOpen(true);
             }
             globalStore.responsibleGaming.setNext(null);
-        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-hidden p-4 sm:p-6 lg:mx-auto lg:max-h-[90vh] lg:w-[500px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: props.logo, alt: "", width: 250, height: 150, className: "mx-auto h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(Dialog.Title, { className: "my-3 text-center font-semibold text-brand-400 sm:mt-6 sm:text-lg lg:my-xl lg:text-2xl", children: "Responsible Gaming Guidelines" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col rounded-md bg-[#021C25] px-2 py-2", children: _jsxs("div", { ref: scrollableContentRef, className: "mt-2 scrollbar:h-2 scrollbar:w-2 flex-1 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-track:rounded-full bg-[#021C25] scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-bg-primary p-3 pr-4 sm:mt-xs sm:p-4", onScroll: (e) => {
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-hidden p-4 sm:p-6 lg:mx-auto lg:max-h-[90vh] lg:w-[500px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: props.logo, alt: "", width: 250, height: 150, className: "mx-auto h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(Dialog.Title, { className: "my-3 text-center font-semibold text-brand-400 sm:mt-6 sm:text-lg lg:my-xl lg:text-2xl", children: "Responsible Gaming Guidelines" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col rounded-md bg-bg-primary-alt px-2 py-2", children: _jsxs("div", { ref: scrollableContentRef, className: "mt-2 scrollbar:h-2 scrollbar:w-2 flex-1 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-track:rounded-full bg-bg-primary-alt scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-bg-primary p-3 pr-4 sm:mt-xs sm:p-4", onScroll: (e) => {
                                                 const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
                                                 const atBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
                                                 setIsAtBottom(atBottom);

package/dist/components/SessionWatcher/SessionWatcher.d.ts

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