@opexa/portal-components 0.0.108 → 0.0.109

package/dist/client/hooks/useCreateGCashDepositMutation.js

@@ -1,12 +1,14 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createGCashDeposit, getDeposit, } from '../../services/wallet.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateGCashDepositMutationKey } from '../../utils/mutationKeys.js';
-import { getDepositsCountQueryKey } from '../../utils/queryKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useCreateGCashDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -44,6 +46,22 @@ export const useCreateGCashDepositMutation = (config) => {
                 error.message = 'Failed to process GCash deposit';
                 throw error;
             }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
             queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },

package/dist/client/hooks/useCreateMayaAppDepositMutation.js

@@ -1,12 +1,14 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createMayaAppDeposit, getDeposit, } from '../../services/wallet.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateMayaAppDepositMutationKey } from '../../utils/mutationKeys.js';
-import { getDepositsCountQueryKey } from '../../utils/queryKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useCreateMayaAppDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -44,6 +46,22 @@ export const useCreateMayaAppDepositMutation = (config) => {
                 error.message = 'Failed to process Maya deposit';
                 throw error;
             }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
             queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },

package/dist/client/hooks/useCreateMayaDepositMutation.js

@@ -1,12 +1,14 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createMayaDeposit, getDeposit, } from '../../services/wallet.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateMayaDepositMutationKey } from '../../utils/mutationKeys.js';
-import { getDepositsCountQueryKey } from '../../utils/queryKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useCreateMayaDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -44,6 +46,22 @@ export const useCreateMayaDepositMutation = (config) => {
                 error.message = 'Failed to process Maya deposit';
                 throw error;
             }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
             queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },

package/dist/client/hooks/useCreateOnlineBankDepositMutation.js

@@ -1,12 +1,14 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createAIOOnlineBankDeposit, getDeposit, } from '../../services/wallet.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateOnlineBankDepositMutationKey } from '../../utils/mutationKeys.js';
-import { getDepositsCountQueryKey } from '../../utils/queryKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useCreateOnlineBankDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -47,6 +49,22 @@ export const useCreateOnlineBankDepositMutation = (config) => {
                 error.message = 'Failed to process online bank deposit';
                 throw error;
             }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
             queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },

package/dist/client/hooks/useCreateQRPHDepositMutation.js

@@ -1,12 +1,14 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createAIOQRPHDeposit, getDeposit, } from '../../services/wallet.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateQRPHDepositMutationKey } from '../../utils/mutationKeys.js';
-import { getDepositsCountQueryKey } from '../../utils/queryKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useCreateQRPHDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -47,6 +49,22 @@ export const useCreateQRPHDepositMutation = (config) => {
                 error.message = 'Failed to process QR PH deposit';
                 throw error;
             }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
             queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },

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

@@ -1,7 +1,18 @@
-export declare function useRemainingTime(value: Date | string | number): {
+type EventDetails = {
+    type: 'EXPIRED';
+};
+type UnsubscribeFn = () => void;
+type Subscriber = (details: EventDetails) => UnsubscribeFn;
+interface UseRemainingTimeOptions {
+    onExpired?: () => void;
+}
+export declare function useRemainingTime(value: Date | string | number, options?: UseRemainingTimeOptions): {
     days: number;
     hours: number;
     minutes: number;
     expired: boolean;
+    seconds: number;
     toString(): string;
+    subscribe: (subscriber: Subscriber) => () => void;
 };
+export {};

package/dist/client/hooks/useRemainingTime.js

@@ -1,8 +1,25 @@
-import { differenceInDays, differenceInHours, differenceInMinutes, isAfter, } from 'date-fns';
-import { isNumber, isString } from 'lodash-es';
-import { useState } from 'react';
+import { differenceInDays, differenceInHours, differenceInMinutes, differenceInSeconds, isAfter, } from 'date-fns';
+import { isNumber, isString, noop } from 'lodash-es';
+import { useRef, useState } from 'react';
 import { useInterval } from 'usehooks-ts';
-export function useRemainingTime(value) {
+export function useRemainingTime(value, options = {}) {
+    const subscribers = useRef([
+        () => {
+            options.onExpired?.();
+            return noop;
+        },
+    ]);
+    const subscribe = (subscriber) => {
+        subscribers.current.push(subscriber);
+        return () => {
+            subscribers.current = subscribers.current.filter((item) => item !== subscriber);
+        };
+    };
+    const triggerEvent = (details) => {
+        subscribers.current.forEach((subscriber) => {
+            subscriber(details);
+        });
+    };
     const [now, setNow] = useState(new Date());
     const expiration = isString(value) || isNumber(value) ? new Date(value) : value;
     const expired = isAfter(now, expiration);
@@ -11,14 +28,28 @@ export function useRemainingTime(value) {
     const minutes = expired
         ? 0
         : differenceInMinutes(expiration, now) - days * 24 * 60 - hours * 60;
-    useInterval(() => setNow(new Date()), expired ? null : 1000);
+    const seconds = expired
+        ? 0
+        : differenceInSeconds(expiration, now) -
+            days * 24 * 60 * 60 -
+            hours * 60 * 60 -
+            minutes * 60;
+    useInterval(() => {
+        const d = new Date();
+        setNow(d);
+        if (isAfter(d, expiration)) {
+            triggerEvent({ type: 'EXPIRED' });
+        }
+    }, expired ? null : 1000);
     return {
         days,
         hours,
         minutes,
         expired,
+        seconds,
         toString() {
-            return `${days}d:${hours}h:${minutes}m`;
+            return `${days}d:${hours}h:${minutes}m:${seconds}s`;
         },
+        subscribe,
     };
 }

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

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

package/dist/components/Quests/DailyCheckInQuest.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { addDays, isEqual, startOfDay } from 'date-fns';
+import { twMerge } from 'tailwind-merge';
+import { useCheckInDailyCheckInQuestMutation } from '../../client/hooks/useCheckInDailyCheckInQuestMutation.js';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { CalendarIcon } from '../../icons/CalendarIcon.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+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';
+import { dataAttr } from '../../utils/dataAttr.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey } from '../../utils/queryKeys.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function DailyCheckInQuest() {
+    const quest = useQuestContext();
+    const disclosure = useDisclosure();
+    const localeInfo = useLocaleInfo();
+    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: parseDecimal(thirdDayBonusAmount, 0),
+        6: parseDecimal(sixthDayBonusAmount, 0),
+        7: parseDecimal(seventhDayBonusAmount, 0),
+    };
+    const dailyCheckedInData = Array.from({ length: 7 }, (_, i) => {
+        const day = i + 1;
+        return {
+            day,
+            reward: checkedInRewards[day] ? checkedInRewards[day] : null,
+        };
+    });
+    const checkInDailyQuestMutation = useCheckInDailyCheckInQuestMutation({
+        onSuccess() {
+            toaster.success({
+                title: 'Check-in successful 🎉',
+                description: 'You’ve successfully checked in for today! Keep it up to maintain your streak!',
+            });
+        },
+        onError(e) {
+            toaster.error({
+                title: 'Check-in successful 🎉',
+                description: e.message ?? 'Check-In Failed',
+            });
+        },
+    });
+    const remainingTime = useRemainingTime(endDateTime);
+    return (_jsxs(_Fragment, { children: [_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(RemainingTime, {}), _jsx("button", { type: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", 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
+                                        ? `+${formatNumber(item.reward, {
+                                            currency: localeInfo.currency.code,
+                                            minDecimalPlaces: 0,
+                                            maxDecimalPlaces: 0,
+                                        })}`
+                                        : '-';
+                                    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 place-items-center", children: dailyCheckedInData.map((item) => (_jsxs("div", { className: "text-text-secondary-700 ui-active:text-brand-400 group relative size-fit", "data-active": dataAttr(item.day <= (checkInStreak ?? 0)), children: [_jsx(CalendarIcon, { className: "h-4.5 w-auto" }), _jsx("p", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xs leading-none", children: item.day })] }, item.day))) })] }), _jsx(Button, { onClick: () => checkInDailyQuestMutation.mutate(id), className: "disabled:bg-bg-primary disabled:text-text-disabled", disabled: status === 'COMPLETED' ||
+                            status === 'FAILED' ||
+                            remainingTime.expired ||
+                            hasCheckedInToday ||
+                            checkInDailyQuestMutation.isPending, children: hasCheckedInToday && status === 'IN_PROGRESS' ? (_jsx(RemainingTimeTilTomorrow, {})) : (_jsx("span", { children: "Check-In" })) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen })] }));
+}
+function RemainingTimeTilTomorrow() {
+    const queryClient = getQueryClient();
+    const remainingTime = useRemainingTime(startOfDay(addDays(new Date(), 1)), {
+        onExpired() {
+            queryClient.invalidateQueries({
+                queryKey: getAvailableQuestsQueryKey(),
+            });
+        },
+    });
+    return (_jsxs("div", { className: "flex items-center space-x-0.5", children: [_jsx(CheckIcon, { className: "size-5" }), _jsx("p", { children: remainingTime.toString() })] }));
+}
+function Rules(props) {
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "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("h2", { className: "text-text-primary-900 text-lg font-semibold", children: "Daily Check-In Rules" }), _jsxs("ol", { 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: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
+}

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

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

package/dist/components/Quests/OnboardingQuest.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { noop } from 'lodash-es';
+import { useShallow } from 'zustand/shallow';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { CoinsHandIcon } from '../../icons/CoinsHandIcon.js';
+import { FileCheck02Icon } from '../../icons/FileCheck02Icon.js';
+import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function OnboardingQuest() {
+    const quest = useQuestContext();
+    const disclosure = useDisclosure();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const remainingTime = useRemainingTime(quest.endDateTime);
+    return (_jsxs(_Fragment, { children: [_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(RemainingTime, {}), _jsx("button", { type: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("h2", { className: "text-xl font-semibold", children: quest.name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: quest.description } })] }), _jsxs("div", { className: "w-full grow space-y-2", children: [_jsxs(Checkbox.Root, { checked: quest.accountVerificationCompleted, onCheckedChange: noop, children: [_jsx(Checkbox.Control, { className: "bg-transparent", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: "text-sm font-medium leading-tight", children: "Complete personal verification" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Checkbox.Root, { checked: quest.firstDepositCompleted, onCheckedChange: noop, children: [_jsx(Checkbox.Control, { className: "bg-transparent", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: "text-sm font-medium leading-tight", children: "Make your first deposit" }), _jsx(Checkbox.HiddenInput, {})] })] }), _jsxs("div", { className: "flex gap-lg", children: [_jsxs(Button, { size: "sm", onClick: () => {
+                                    globalStore.kyc.setOpen(true);
+                                }, disabled: quest.accountVerificationCompleted ||
+                                    quest.status === 'COMPLETED' ||
+                                    quest.status === 'FAILED' ||
+                                    remainingTime.expired, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: [quest.accountVerificationCompleted ? (_jsx(CheckIcon, { className: "size-5" })) : (_jsx(FileCheck02Icon, { className: "size-5" })), "Verify"] }), _jsxs(Button, { size: "sm", onClick: () => {
+                                    globalStore.depositWithdrawal.setTab('DEPOSIT');
+                                    globalStore.depositWithdrawal.setOpen(true);
+                                }, disabled: quest.firstDepositCompleted ||
+                                    quest.status === 'COMPLETED' ||
+                                    quest.status === 'FAILED' ||
+                                    remainingTime.expired, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: [_jsx(CoinsHandIcon, { className: "size-5" }), "Deposit"] })] })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen })] }));
+}
+function Rules(props) {
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "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("h2", { className: "text-text-primary-900 text-lg font-semibold", children: "Welcome Quest Rules" }), _jsxs("ol", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Begin your quest whenever you're ready" }), _jsx("li", { children: "Tackle the tasks in any order you like" }), _jsx("li", { children: "Finish all tasks and we'll credit your reward automatically!" })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
+}

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

@@ -1,6 +1,8 @@
+import { type CSSProperties } from 'react';
 export interface QuestsProps {
     /** @default "Quests" */
     heading?: string;
     className?: string;
+    style?: CSSProperties;
 }
 export declare function Quests__client(props: QuestsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/Quests.client.js

@@ -7,10 +7,10 @@ import { useAvailableQuestsQuery } from '../../client/hooks/useAvailableQuestsQu
 import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import closeChest from '../../images/close-chest.png';
 import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
-import { DailyCheckInQuest } from './DailyCheckInQuest/DailyCheckInQuest.js';
-import { OnboardingQuest } from './OnboardingQuest/OnboardingQuest.js';
+import { DailyCheckInQuest } from './DailyCheckInQuest.js';
+import { OnboardingQuest } from './OnboardingQuest.js';
 import { QuestContext } from './QuestsContext.js';
-import { WageringQuest } from './WageringQuest/WageringQuest.js';
+import { WageringQuest } from './WageringQuest.js';
 const QUEST_COMPONENT_MAP = {
     DAILY_CHECKIN: DailyCheckInQuest,
     ONBOARDING: OnboardingQuest,
@@ -28,12 +28,12 @@ export function Quests__client(props) {
                 : quest.status === 'IN_PROGRESS';
         });
     if (questsQuery.isLoading) {
-        return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
+        return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
     }
     if (!questsQuery.data?.length) {
-        return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { src: closeChest, width: 100, height: 100, alt: "No Quests Available", className: "mix-blend-luminosity", quality: 100 }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: "No available quests. Please check back later!" })] })] }));
+        return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { src: closeChest, width: 100, height: 100, alt: "No Quests Available", className: "mix-blend-luminosity", quality: 100 }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: "No available quests. Please check back later!" })] })] }));
     }
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
+    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
                     setTab(TabDefinition.catch('AVAILABLE').parse(details.value));
                 }, className: "mt-3 w-full overflow-x-auto lg:mt-4.5 lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "AVAILABLE", className: "w-full lg:w-fit", children: [_jsx(SegmentGroup.ItemText, { children: "Available" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "COMPLETED", className: "w-full lg:w-fit", children: [_jsx(SegmentGroup.ItemText, { children: "Completed" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsx("div", { className: "mt-3xl grid gap-3xl lg:mt-lg lg:grid-cols-3", children: quests.map((quest) => {
                     const QuestComponent = QUEST_COMPONENT_MAP[quest.type];

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

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

package/dist/components/Quests/RemainingTime.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { ClockStopWatchIcon } from '../../icons/ClockStopWatchIcon.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { useQuestContext } from './QuestsContext.js';
+export function RemainingTime() {
+    const quest = useQuestContext();
+    const remainingTime = useRemainingTime(quest.endDateTime);
+    if (quest.status === 'COMPLETED') {
+        return (_jsx(Badge.Root, { size: "lg", colorScheme: "success", round: false, children: _jsx(Badge.Label, { children: "Completed" }) }));
+    }
+    if (quest.status === 'FAILED') {
+        return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, children: _jsx(Badge.Label, { children: "Failed" }) }));
+    }
+    if (remainingTime.expired) {
+        return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, children: _jsx(Badge.Label, { children: "Expired" }) }));
+    }
+    return (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.toString() })] }));
+}

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

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

package/dist/components/Quests/WageringQuest.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+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';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function WageringQuest() {
+    const quest = useQuestContext();
+    const disclosure = useDisclosure();
+    const localeInfo = useLocaleInfo();
+    const { progressPercentage, turnover, targetTurnover, name, description, endDateTime, bonus, status, } = quest;
+    const remainingTime = useRemainingTime(endDateTime);
+    return (_jsxs(_Fragment, { children: [_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(RemainingTime, {}), _jsx("button", { type: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", 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 ", parseDecimal(progressPercentage, 0).toFixed(2), "%"] }), _jsxs("p", { children: [turnover, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " ", localeInfo.currency.code] })] })] }), _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(remainingTime.expired ||
+                                    status === 'COMPLETED' ||
+                                    status === 'FAILED'
+                                    ? 'opacity-50 grayscale'
+                                    : ''), children: ["Complete to get ", _jsxs("span", { className: "text-brand-400", children: ["\u20B1", bonus] }), ' ', "bonus!"] }) }) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen })] }));
+}
+function Rules(props) {
+    const quest = useQuestContext();
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "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("h2", { className: "text-text-primary-900 text-lg font-semibold", children: quest.name }), _jsxs("ol", { 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: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.108",
+  "version": "0.0.109",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",