@opexa/portal-components 0.0.899 → 0.0.900

package/dist/components/Quests/Crazywin/CWDailyCheckInQuest.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isEqual, startOfDay } from 'date-fns';
+import { isString } from 'lodash-es';
+import { useEffect, useMemo, 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 { InfoCircleIcon } from '../../../icons/InfoCircleIcon.js';
+import { XIcon } from '../../../icons/XIcon.js';
+import { Progress } from '../../../ui/Progress/index.js';
+import { useQuestContext } from '../QuestsContext.js';
+import { Countdown, DialogCheckin, QuestBadge } from './components/index.js';
+const CWDailyCheckInQuest = (props) => {
+    const { className } = props;
+    const classNames = isString(className) ? { root: className } : className;
+    const quest = useQuestContext();
+    const [isExpired, setIsExpired] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    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 handleOpenChange = (open) => {
+        setIsOpen(open);
+    };
+    const shouldShowBadge = useMemo(() => {
+        return (quest?.status === 'COMPLETED' || isExpired || quest?.status === 'FAILED');
+    }, [quest?.status, isExpired]);
+    const shouldShowCountdown = useMemo(() => {
+        return !shouldShowBadge;
+    }, [shouldShowBadge]);
+    const hasCheckedInToday = useMemo(() => {
+        const today = startOfDay(new Date());
+        if (!quest?.lastCheckInDate)
+            return false;
+        return isEqual(today, startOfDay(new Date(quest.lastCheckInDate)));
+    }, [quest?.lastCheckInDate]);
+    const checkedInRewards = useMemo(() => ({
+        3: quest?.thirdDayBonusAmount ?? 0,
+        6: quest?.sixthDayBonusAmount ?? 0,
+        7: quest?.seventhDayBonusAmount ?? 0,
+    }), [
+        quest?.thirdDayBonusAmount,
+        quest?.sixthDayBonusAmount,
+        quest?.seventhDayBonusAmount,
+    ]);
+    const dailyCheckedInData = useMemo(() => Array.from({ length: 7 }, (_, i) => {
+        const day = i + 1;
+        return {
+            day,
+            reward: day in checkedInRewards
+                ? checkedInRewards[day]
+                : null,
+        };
+    }), [checkedInRewards]);
+    const endDate = useMemo(() => {
+        if (!quest?.endDateTime)
+            return null;
+        const parsed = new Date(quest.endDateTime);
+        return Number.isNaN(parsed.getTime()) ? null : parsed;
+    }, [quest?.endDateTime]);
+    const progressStyle = {
+        '--width': `${quest.progressPercentage}%`,
+    };
+    useEffect(() => {
+        setIsExpired(new Date(quest?.endDateTime ?? new Date()).getTime() < Date.now());
+    }, [quest?.endDateTime]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('flex h-full flex-col space-y-2 rounded-2xl border border-[#373A41] bg-[#172627] p-4', classNames?.root), children: [_jsxs("div", { className: "flex items-center justify-between", children: [shouldShowCountdown && endDate && (_jsx(Countdown, { endDate: endDate, onEnd: (expired) => {
+                                    setIsExpired(expired);
+                                } })), shouldShowBadge && (_jsx(QuestBadge, { status: quest.status, isExpired: isExpired, type: "DAILY_CHECKIN" })), _jsx("button", { className: "rounded-lg border border-[#22262F] bg-[#0C0E12] p-2", onClick: () => {
+                                    setIsOpen(true);
+                                }, type: "button", children: _jsx(InfoCircleIcon, { className: "size-5 text-[#85888E]" }) })] }), _jsx("p", { className: "font-semibold text-xl", children: quest.name }), _jsx("p", { className: "text-[#A3A3A3] text-sm", dangerouslySetInnerHTML: { __html: quest.description } }), _jsxs("div", { className: "flex w-full flex-col space-y-2 pt-2", children: [_jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((checkin, index) => {
+                                    const done = checkin.day <= (quest?.checkInStreak ?? 0);
+                                    const isFailed = checkin.day === (quest?.checkInStreak ?? 0) + 1 &&
+                                        quest?.status === 'FAILED';
+                                    let body = _jsx("span", { className: "", children: "-" });
+                                    if (isFailed) {
+                                        body = _jsx(XIcon, { className: "size-4 text-[#F04438]" });
+                                    }
+                                    else if (done) {
+                                        body = _jsx(CheckIcon, { className: "size-4 text-[#FFE5AF]" });
+                                    }
+                                    else if (checkin.reward) {
+                                        body = _jsxs("span", { className: "", children: ["+\u20B1", checkin.reward] });
+                                    }
+                                    return (_jsx("div", { className: "flex items-center justify-center text-[#85888E] text-sm", children: body }, index));
+                                }) }), _jsx(Progress.Root, { max: 100, value: +quest.progressPercentage, className: twMerge('relative h-2 rounded-full bg-[#0C0E12]', classNames?.progressBarContainer), children: _jsx("div", { className: twMerge('h-full w-[var(--width,0)] flex-1 rounded-full bg-[#FFE5AF] transition-all duration-1000 ease-in-out', classNames?.progressBar), style: progressStyle }) })] }), _jsx("div", { className: "grid grid-cols-7 place-items-center", children: dailyCheckedInData.map((checkin, index) => {
+                            const isDone = checkin.day <= (quest?.checkInStreak ?? 0);
+                            return (_jsxs("div", { className: twMerge('group relative size-fit', isDone ? 'text-[#FFE5AF]' : 'text-[#85888E]', classNames?.calendarIconContainer), "data-active": isDone, children: [_jsx(CalendarIcon, { className: twMerge('h-4.5 w-auto', classNames?.calendarIcon) }), _jsx("p", { className: twMerge('-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 text-2xs leading-none', classNames?.calendarDayText), children: checkin.day })] }, index));
+                        }) }), _jsx("div", { className: "flex h-full w-full items-end", children: _jsx("button", { type: "button", className: twMerge('mt-2 w-full rounded-md py-2 text-center font-semibold text-[#713B12] text-sm transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50', classNames?.checkInButton), style: {
+                                background: quest?.status === 'COMPLETED' ||
+                                    quest?.status === 'FAILED' ||
+                                    isExpired ||
+                                    hasCheckedInToday
+                                    ? 'radial-gradient(694.11% 412.88% at -117.5% -146.67%, #D4C89A 45.26%, #C4A85A 78.33%)'
+                                    : 'radial-gradient(694.11% 412.88% at -117.5% -146.67%, #FFE5AF 45.26%, #EAC467 78.33%)',
+                            }, disabled: quest?.status === 'COMPLETED' ||
+                                quest?.status === 'FAILED' ||
+                                isExpired ||
+                                hasCheckedInToday, onClick: async () => {
+                                checkInDailyQuestMutation.mutate(quest.id);
+                            }, children: "Check-In" }) })] }), _jsx(DialogCheckin, { isOpen: isOpen, handleOpenChange: handleOpenChange, quest: quest })] }));
+};
+export default CWDailyCheckInQuest;

package/dist/components/Quests/Crazywin/CWJourneyQuest.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties } from 'react';
+export interface ClassNameEntries {
+    root?: string;
+    checkboxName?: string;
+    checkboxBonus?: string;
+    dialogRoot?: string;
+    dialogMilestone?: string;
+    dialogMilestoneName?: string;
+    dialogMilestoneDescription?: string;
+    dialogCompleteBadge?: string;
+    dialogUncompleteButton?: string;
+}
+export interface JourneyQuestProps {
+    checkboxControlStyle?: CSSProperties;
+    className?: string | ClassNameEntries;
+}
+declare const CWJourneyQuest: (props: JourneyQuestProps) => import("react/jsx-runtime").JSX.Element;
+export default CWJourneyQuest;

package/dist/components/Quests/Crazywin/CWJourneyQuest.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isString } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useFeatureFlag } from '../../../client/hooks/useFeatureFlag.js';
+import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
+import { useGoogleClientIdQuery } from '../../../client/hooks/useGoogleClientIdQuery.js';
+import { useMemberVerificationQuery } from '../../../client/hooks/useMemberVerificationQuery.js';
+import { Progress } from '../../../ui/Progress/index.js';
+import { useQuestContext } from '../QuestsContext.js';
+import { Countdown, DialogJourney, ObjectiveItem, QuestBadge, } from './components/index.js';
+const CWJourneyQuest = (props) => {
+    const quest = useQuestContext();
+    const featureFlag = useFeatureFlag();
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : props.className;
+    const [isOpen, setIsOpen] = useState(false);
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const [isExpired, setIsExpired] = useState(new Date(quest?.endDateTime ?? new Date()).getTime() < Date.now());
+    const googleClientIdQuery = useGoogleClientIdQuery();
+    const googleClientId = googleClientIdQuery.data;
+    const memberVerificationQuery = useMemberVerificationQuery();
+    const verificationStatus = memberVerificationQuery.data?.status ?? 'UNVERIFIED';
+    const progressData = useMemo(() => {
+        const milestones = quest?.milestones ?? [];
+        const totalMilestones = milestones.length;
+        const clearedMilestones = milestones.filter((milestone) => milestone.cleared).length;
+        const progressPercentage = totalMilestones > 0
+            ? Math.min((clearedMilestones / totalMilestones) * 100, 100)
+            : 0;
+        return {
+            cleared: clearedMilestones,
+            total: totalMilestones,
+            progressPercentage,
+            progressText: `${clearedMilestones}/${totalMilestones}`,
+        };
+    }, [quest?.milestones]);
+    const shouldShowBadge = useMemo(() => {
+        return (quest?.status === 'COMPLETED' || isExpired || quest?.status === 'FAILED');
+    }, [quest?.status, isExpired]);
+    const shouldShowCountdown = useMemo(() => {
+        return !shouldShowBadge;
+    }, [shouldShowBadge]);
+    const endDate = useMemo(() => {
+        if (!quest?.endDateTime)
+            return null;
+        const parsed = new Date(quest.endDateTime);
+        return Number.isNaN(parsed.getTime()) ? null : parsed;
+    }, [quest?.endDateTime]);
+    const progressStyle = {
+        '--width': `${progressData.progressPercentage}%`,
+    };
+    function handleOpenChange(open) {
+        setIsOpen(open);
+    }
+    function getMilestoneDescription(milestone) {
+        if (!milestone.bonusAmount) {
+            return null;
+        }
+        switch (milestone.type) {
+            case 'REGISTRATION':
+                return `Register and win Php ${milestone.bonusAmount} Bonus`;
+            case 'ACCOUNT_VERIFICATION':
+                return `Verify your account and get Php ${milestone.bonusAmount} Bonus`;
+            case 'FIRST_DEPOSIT':
+                return `Make your first deposit and get Php ${milestone.bonusAmount} Bonus`;
+            case 'IOS_FIRST_LOGIN':
+                return `Login using iOS and get Php ${milestone.bonusAmount} Bonus`;
+            case 'ANDROID_FIRST_LOGIN':
+                return `Login using Android and get Php ${milestone.bonusAmount} Bonus`;
+            default:
+                return `Get Php ${milestone.bonusAmount} Bonus`;
+        }
+    }
+    function getCustomLinkUrl(milestone) {
+        const baseUrl = process.env.NODE_ENV === 'development'
+            ? 'https://api.trigger.development.opexa.io'
+            : 'https://api.trigger.opexa.io';
+        // const token =
+        // 	sessionQuery.data?.accessToken ?? sessionQuery.data?.refreshToken;
+        return `${baseUrl}/v1/quests/${quest.id}/milestones/${milestone.id}/link?token=${1}`;
+    }
+    function handleMilestoneButtonClick(milestone) {
+        if (milestone.type === 'ACCOUNT_VERIFICATION') {
+            globalStore.kyc.setOpen(true);
+        }
+        else if (milestone.type === 'FIRST_DEPOSIT') {
+            globalStore.depositWithdrawal.setOpen(true);
+            globalStore.depositWithdrawal.setTab('DEPOSIT');
+        }
+        handleOpenChange(false);
+    }
+    function loginWithFacebook() {
+        const currentUrl = window.location.origin;
+        window.open(`https://www.facebook.com/v20.0/dialog/oauth?client_id=564928586051406&state=${currentUrl},${process.env.NEXT_PUBLIC_PLATFORM_CODE}&redirect_uri=https://auth.development.opexa.io/facebook/auth`, '_self');
+    }
+    async function loginOrSignupUsingGoogle() {
+        const searchParams = new URLSearchParams();
+        if (!googleClientId)
+            return null;
+        searchParams.set('client_id', googleClientId);
+        searchParams.set('redirect_uri', 'https://auth.development.opexa.io/google/auth');
+        searchParams.set('scope', 'openid profile email phone https://www.googleapis.com/auth/user.birthday.read');
+        searchParams.set('response_type', 'code');
+        searchParams.set('state', `${window.location.origin},${process.env.NEXT_PUBLIC_PLATFORM_CODE}`);
+        const url = `https://accounts.google.com/o/oauth2/v2/auth?${searchParams.toString()}`;
+        window.open(url, '_self');
+    }
+    // optional: keep isExpired in sync when quest end time changes
+    useEffect(() => {
+        setIsExpired(new Date(quest?.endDateTime ?? new Date()).getTime() < Date.now());
+    }, [quest?.endDateTime]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('flex h-full flex-col space-y-2 rounded-2xl border border-[#373A41] bg-[#172627] p-4', classNames?.root), children: [shouldShowCountdown && endDate && (_jsx(Countdown, { endDate: endDate, onEnd: (expired) => {
+                            setIsExpired(expired);
+                        } })), shouldShowBadge && (_jsx(QuestBadge, { status: quest.status, isExpired: isExpired, type: "JOURNEY", bonusAmount: +quest.bonus })), _jsx("p", { className: "font-semibold text-xl", children: quest?.name }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, value: progressData.progressPercentage, className: "relative h-2 w-full rounded-full bg-[#0C0E12]", children: _jsx("div", { className: twMerge('h-full w-[var(--width,0)] flex-1 rounded-full bg-[#FFE5AF] transition-all duration-1000 ease-in-out'), style: progressStyle }) }), _jsx("p", { className: "text-xs", children: progressData.progressText })] }), _jsx("div", { className: "flex flex-col space-y-2", children: quest?.milestones
+                            ?.filter((milestone) => {
+                            if (!featureFlag.enabled) {
+                                return (milestone.type !== 'LINK_FACEBOOK_ACCOUNT' &&
+                                    milestone.type !== 'LINK_GOOGLE_ACCOUNT');
+                            }
+                            return true;
+                        })
+                            .map((milestone) => (_jsx(ObjectiveItem, { id: milestone.id, cleared: milestone.cleared, name: milestone.name, type: "JOURNEY", bonusAmount: +milestone.bonusAmount, style: props.checkboxControlStyle, className: {
+                                name: classNames?.checkboxName,
+                                bonus: classNames?.checkboxBonus,
+                            } }, milestone.id))) }), _jsx("div", { className: "flex h-full w-full items-end", children: _jsx("button", { type: "button", className: "mt-2 w-full rounded-md py-2 text-center font-semibold text-[#713B12] text-sm transition-colors duration-200", style: {
+                                background: 'radial-gradient(694.11% 412.88% at -117.5% -146.67%, #FFE5AF 45.26%, #EAC467 78.33%)',
+                            }, onClick: () => {
+                                setIsOpen(true);
+                            }, children: "View Details" }) })] }), _jsx(DialogJourney, { isOpen: isOpen, quest: quest, handleOpenChange: handleOpenChange, enabled: featureFlag.enabled, getMilestoneDescription: getMilestoneDescription, getCustomLinkUrl: getCustomLinkUrl, handleMilestoneButtonClick: handleMilestoneButtonClick, status: verificationStatus, loginWithFacebook: loginWithFacebook, loginOrSignupUsingGoogle: loginOrSignupUsingGoogle })] }));
+};
+export default CWJourneyQuest;

package/dist/components/Quests/Crazywin/CWOnboardingQuest.d.ts

@@ -0,0 +1,6 @@
+import { type CSSProperties } from 'react';
+export interface OnboardingQuestProps {
+    checkboxControlStyle?: CSSProperties;
+}
+declare const CWOnboardingQuest: (props: OnboardingQuestProps) => import("react/jsx-runtime").JSX.Element;
+export default CWOnboardingQuest;

package/dist/components/Quests/Crazywin/CWOnboardingQuest.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../../client/hooks/useMemberVerificationQuery.js';
+import { Progress } from '../../../ui/Progress/index.js';
+import { useQuestContext } from '../QuestsContext.js';
+import { Countdown, DialogOnboarding, ObjectiveItem, QuestBadge, } from './components/index.js';
+const CWOnboardingQuest = (props) => {
+    const quest = useQuestContext();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const endDate = useMemo(() => {
+        if (!quest?.endDateTime)
+            return null;
+        const parsed = new Date(quest.endDateTime);
+        return Number.isNaN(parsed.getTime()) ? null : parsed;
+    }, [quest?.endDateTime]);
+    const [isExpired, setIsExpired] = useState(() => endDate ? endDate.getTime() < Date.now() : false);
+    const [isOpen, setIsOpen] = useState(false);
+    const memberVerificationQuery = useMemberVerificationQuery();
+    const verificationStatus = memberVerificationQuery.data?.status ?? 'UNVERIFIED';
+    const progressData = useMemo(() => {
+        const totalTasks = 2;
+        const completedTasks = [
+            quest?.firstDepositCompleted,
+            quest?.accountVerificationCompleted,
+        ].filter(Boolean).length;
+        const progressPercentage = Math.min((completedTasks / totalTasks) * 100, 100);
+        return {
+            cleared: completedTasks,
+            total: totalTasks,
+            progressPercentage,
+            progressText: `${completedTasks}/${totalTasks}`,
+        };
+    }, [quest?.firstDepositCompleted, quest?.accountVerificationCompleted]);
+    const shouldShowBadge = useMemo(() => {
+        return (quest?.status === 'COMPLETED' || isExpired || quest?.status === 'FAILED');
+    }, [quest?.status, isExpired]);
+    const shouldShowCountdown = useMemo(() => {
+        return !shouldShowBadge;
+    }, [shouldShowBadge]);
+    function handleOpenChange(open) {
+        setIsOpen(open);
+    }
+    function handleTaskButtonClick(taskType) {
+        if (taskType === 'ACCOUNT_VERIFICATION') {
+            globalStore.kyc.setOpen(true);
+        }
+        else if (taskType === 'FIRST_DEPOSIT') {
+            globalStore.depositWithdrawal.setOpen(true);
+            globalStore.depositWithdrawal.setTab('DEPOSIT');
+        }
+        handleOpenChange(false);
+    }
+    function getTaskDescription(taskType) {
+        switch (taskType) {
+            case 'ACCOUNT_VERIFICATION':
+                return 'Verify your account and get bonus';
+            case 'FIRST_DEPOSIT':
+                return 'Make your first deposit and get bonus';
+            default:
+                return '';
+        }
+    }
+    const progressStyle = {
+        '--width': `${progressData.progressPercentage}%`,
+    };
+    useEffect(() => {
+        setIsExpired(new Date(quest?.endDateTime ?? new Date()).getTime() < Date.now());
+    }, [quest?.endDateTime]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('flex h-full flex-col space-y-2 rounded-2xl border border-[#373A41] bg-[#172627] p-4'), children: [shouldShowCountdown && endDate && (_jsx(Countdown, { endDate: endDate, onEnd: (expired) => {
+                            setIsExpired(expired);
+                        } })), shouldShowBadge && (_jsx(QuestBadge, { status: quest.status, isExpired: isExpired, type: "ONBOARDING" })), _jsx("p", { className: "font-semibold text-xl", children: quest.name }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, value: progressData.progressPercentage, className: "relative h-2 w-full rounded-full bg-[#0C0E12]", children: _jsx("div", { className: twMerge('h-full w-[var(--width,0)] flex-1 rounded-full bg-[#FFE5AF] transition-all duration-1000 ease-in-out'), style: progressStyle }) }), _jsx("p", { className: "text-xs", children: progressData.progressText })] }), _jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx(ObjectiveItem, { name: "First Deposit", id: "firstDeposit", cleared: quest?.firstDepositCompleted ?? false, type: "ONBOARDING", style: props.checkboxControlStyle }), _jsx(ObjectiveItem, { name: "Account Verification", id: "accountVerification", cleared: quest?.accountVerificationCompleted ?? false, type: "ONBOARDING", style: props.checkboxControlStyle })] }), _jsx("div", { className: "flex h-full w-full items-end", children: _jsx("button", { type: "button", className: "mt-2 w-full rounded-md py-2 text-center font-semibold text-[#713B12] text-sm transition-colors duration-200", style: {
+                                background: 'radial-gradient(694.11% 412.88% at -117.5% -146.67%, #FFE5AF 45.26%, #EAC467 78.33%)',
+                            }, onClick: () => setIsOpen(true), children: "View Details" }) })] }), _jsx(DialogOnboarding, { isOpen: isOpen, quest: quest, handleOpenChange: handleOpenChange, getTaskDescription: getTaskDescription, handleTaskButtonClick: handleTaskButtonClick, verificationStatus: verificationStatus })] }));
+};
+export default CWOnboardingQuest;

package/dist/components/Quests/Crazywin/CWWageringQuestNext.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import type { StageItemLockedClassNameEntries, StageItemUnlockedClassNameEntries } from '../WageringQuest__next';
+export interface ClassNameEntries {
+    root?: string;
+    stageBadge?: string;
+    stageBadgeIcon?: string;
+    stageBadgeText?: string;
+    progressBarContainer?: string;
+    progressBar?: string;
+    bonusText?: string;
+    bonusAmount?: string;
+    bonusContainer?: string;
+    stageItemUnlocked?: StageItemUnlockedClassNameEntries;
+    stageItemLocked?: StageItemLockedClassNameEntries;
+}
+declare const CWWageringQuestNext: (props: {
+    className?: string | ClassNameEntries;
+    customComplete?: ReactNode;
+    showTurnoverDecimals?: boolean;
+    gameProviderCarousel?: ReactNode;
+    gameProviderViewPageUrl?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CWWageringQuestNext;

package/dist/components/Quests/Crazywin/CWWageringQuestNext.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isString } from 'lodash-es';
+import { useEffect, useMemo, useState, } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Flag05Icon } from '../../../icons/Flag05Icon.js';
+import { PlusIcon } from '../../../icons/PlusIcon.js';
+import { Progress } from '../../../ui/Progress/index.js';
+import { useQuestContext } from '../QuestsContext.js';
+import { Countdown, DialogWagering, QuestBadge } from './components/index.js';
+const CWWageringQuestNext = (props) => {
+    const { className } = props;
+    const classNames = isString(className) ? { root: className } : className;
+    const quest = useQuestContext();
+    const [isExpired, setIsExpired] = useState(new Date(quest?.endDateTime ?? new Date()).getTime() < Date.now());
+    const [isOpen, setIsOpen] = useState(false);
+    const shouldShowBadge = useMemo(() => {
+        return (quest?.status === 'COMPLETED' || isExpired || quest?.status === 'FAILED');
+    }, [quest?.status, isExpired]);
+    const shouldShowCountdown = useMemo(() => {
+        return !shouldShowBadge;
+    }, [shouldShowBadge]);
+    function handleOpenChange(open) {
+        setIsOpen(open);
+    }
+    const currentStage = useMemo(() => {
+        if (quest.stage === null ||
+            quest.stage === undefined ||
+            quest.stage === 0) {
+            return (quest?.stage ?? 0) + 1;
+        }
+        return quest.stage;
+    }, [quest.stage]);
+    const endDate = useMemo(() => {
+        if (!quest?.endDateTime)
+            return null;
+        const parsed = new Date(quest.endDateTime);
+        return Number.isNaN(parsed.getTime()) ? null : parsed;
+    }, [quest?.endDateTime]);
+    const progressStyle = {
+        '--width': `${quest.progressPercentage}%`,
+    };
+    useEffect(() => {
+        setIsExpired(new Date(quest?.endDateTime ?? new Date()).getTime() < Date.now());
+    }, [quest?.endDateTime]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('flex h-full flex-col space-y-2 rounded-2xl border border-[#373A41] bg-[#172627] p-4', classNames?.root), children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex gap-2", children: [_jsxs("div", { className: twMerge('flex w-fit items-center gap-1 rounded-lg border border-[#9E165F] bg-[#4E0D30] px-2 py-0.5', classNames?.stageBadge), children: [_jsx(Flag05Icon, { className: twMerge('size-4 text-[#EE46BC]', classNames?.stageBadgeIcon) }), _jsxs("p", { className: twMerge('font-medium text-[#FAA7E0] text-sm', classNames?.stageBadgeText), children: ["Stage ", currentStage] })] }), shouldShowCountdown && endDate && (_jsx(Countdown, { endDate: endDate, onEnd: (expired) => {
+                                        setIsExpired(expired);
+                                    }, type: quest?.type })), shouldShowBadge && (_jsx(QuestBadge, { status: quest.status, isExpired: isExpired, type: "WAGERING" }))] }) }), _jsx("p", { className: "font-semibold text-xl", children: quest?.name }), _jsx("p", { className: twMerge('prose', 'prose-h1:m-0', 'prose-h2:m-0', 'prose-h3:m-0', 'prose-h4:m-0', 'prose-h5:m-0', 'prose-h6:m-0', 'prose-a:m-0', 'prose-p:m-0', 'mt-3', 'text-start', 'text-sm', 'text-[#A3A3A3]', 'lg:text-base', '*:text-inherit', '[&_strong]:text-inherit'), dangerouslySetInnerHTML: { __html: quest.description } }), _jsxs("div", { className: "flex flex-col space-y-2 pt-5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", Math.round(+quest.progressPercentage), "%"] }), _jsxs("p", { children: [quest.turnover, _jsxs("span", { className: "text-[#94969C]", children: ["/", quest.targetTurnover, " PHP"] })] })] }), _jsx(Progress.Root, { max: 100, value: +quest.progressPercentage, className: twMerge('relative h-2 rounded-full bg-[#0C0E12] md:w-full', classNames?.progressBarContainer), children: _jsx("div", { className: twMerge('h-full w-[var(--width,0)] flex-1 rounded-full bg-[#FFE5AF] transition-all duration-1000 ease-in-out', classNames?.progressBar), style: progressStyle }) }), _jsxs("p", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "tex-sm text-[#F5F5F6]", children: ["Stage ", currentStage, " of ", quest?.program.stages?.length] }), _jsxs("span", { className: "flex items-center justify-between gap-xs rounded-md border border-[#333741] bg-[#0C111D] px-[0.375rem] py-[0.125rem] font-medium text-[#CECFD2] text-xs", children: [_jsx(PlusIcon, { className: "size-3 stroke-[2.5px]" }), " \u20B1", quest.bonus, "Bonus"] })] })] }), quest?.status === 'IN_PROGRESS' && (_jsx("div", { className: "flex h-full w-full items-end", children: _jsx("button", { type: "button", className: "mt-2 w-full rounded-md py-2 text-center font-semibold text-[#713B12] text-sm transition-colors duration-200", style: {
+                                background: 'radial-gradient(694.11% 412.88% at -117.5% -146.67%, #FFE5AF 45.26%, #EAC467 78.33%)',
+                            }, onClick: () => {
+                                setIsOpen(true);
+                            }, children: "View Details" }) }))] }), _jsx(DialogWagering, { quest: quest, isOpen: isOpen, handleOpenChange: handleOpenChange, currentStage: currentStage })] }));
+};
+export default CWWageringQuestNext;

package/dist/components/Quests/Crazywin/components/Countdown.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    endDate: Date;
+    onEnd: (value: boolean) => void;
+    type?: string;
+};
+declare const Countdown: ({ endDate, onEnd, type }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Countdown;

package/dist/components/Quests/Crazywin/components/Countdown.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { endOfDay } from 'date-fns';
+import { useEffect, useState } from 'react';
+import { ClockStopWatchIcon } from '../../../../icons/ClockStopWatchIcon.js';
+const Countdown = ({ endDate, onEnd, type }) => {
+    const [time, setTime] = useState({
+        days: '00',
+        hours: '00',
+        minutes: '00',
+        seconds: '00',
+    });
+    useEffect(() => {
+        let intervalId = null;
+        const calculateTimeRemaining = () => {
+            const endOfDayTime = endOfDay(endDate);
+            let end;
+            if (type === 'WAGERING') {
+                end = endDate.getTime();
+            }
+            else {
+                end = endOfDayTime.getTime();
+            }
+            const now = new Date().getTime();
+            const distance = end - now;
+            if (distance < 0) {
+                setTime({
+                    days: '00',
+                    hours: '00',
+                    minutes: '00',
+                    seconds: '00',
+                });
+                if (intervalId !== null) {
+                    clearInterval(intervalId);
+                    onEnd(true);
+                }
+                return;
+            }
+            const d = Math.floor(distance / (1000 * 60 * 60 * 24));
+            const h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+            const s = Math.floor((distance % (1000 * 60)) / 1000);
+            const removeLeadingZeros = (value) => value === 0 ? '0' : value.toString().replace(/^0+/, '');
+            setTime({
+                days: removeLeadingZeros(d),
+                hours: removeLeadingZeros(h),
+                minutes: removeLeadingZeros(m),
+                seconds: removeLeadingZeros(s),
+            });
+        };
+        // Initial calculation
+        onEnd(false);
+        calculateTimeRemaining();
+        intervalId = window.setInterval(calculateTimeRemaining, 1000);
+        return () => {
+            if (intervalId !== null) {
+                clearInterval(intervalId);
+            }
+        };
+    }, [endDate, onEnd, type]);
+    return (_jsx("div", { className: "flex items-center gap-1 md:gap-2", children: _jsxs("div", { className: "flex items-center rounded-[4px] border border-[#854A0E] bg-[#542C0D] px-2 py-[2px] text-xs md:text-sm", children: [_jsx(ClockStopWatchIcon, { className: "mx-1 h-3.5 w-3.5 stroke-[2.5] text-[#FDE272]" }), _jsx("span", { className: "font-semibold text-[#FDE272]", children: `${time.days}d` }), _jsx("span", { className: "mx-1 md:block", children: ":" }), _jsx("span", { className: "font-semibold text-[#FDE272]", children: `${time.hours}h` }), _jsx("span", { className: "mx-1", children: ":" }), _jsx("span", { className: "font-semibold text-[#FDE272]", children: `${time.minutes}m` }), _jsx("span", { className: "mx-1", children: ":" }), _jsx("span", { className: "font-semibold text-[#FDE272]", children: `${time.seconds}s` })] }) }));
+};
+export default Countdown;

package/dist/components/Quests/Crazywin/components/DialogCheckin.d.ts

@@ -0,0 +1,8 @@
+import type { QuestContextType } from '../../QuestsContext';
+type Props = {
+    isOpen: boolean;
+    quest: QuestContextType;
+    handleOpenChange: (open: boolean) => void;
+};
+declare const DialogCheckin: ({ isOpen, quest, handleOpenChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export default DialogCheckin;

package/dist/components/Quests/Crazywin/components/DialogCheckin.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from '../../../../icons/XIcon.js';
+import { Dialog } from '../../../../ui/Dialog/index.js';
+import { Portal } from '../../../../ui/Portal/index.js';
+const DialogCheckin = ({ isOpen, quest, handleOpenChange }) => {
+    return (_jsx(Dialog.Root, { open: isOpen, onOpenChange: (details) => {
+            handleOpenChange(details.open);
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "z-tooltip flex items-center justify-center p-6", children: _jsx(Dialog.Content, { className: "", children: _jsxs("div", { className: "overflow-y-invisible mx-auto flex h-full w-full flex-col bg-[#0C0E12] px-4 py-5 lg:h-auto lg:rounded-xl", children: [_jsx("div", { className: "relative w-full p-4", children: _jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsxs("h2", { className: "font-semibold text-xl", children: [quest?.name, " Rules"] }), _jsx(Dialog.CloseTrigger, { className: "relative top-0 right-0", children: _jsx(XIcon, {}) })] }) }), _jsxs("div", { className: "mx-auto flex flex-col space-y-5 p-5 lg:max-w-[400px]", children: [_jsxs("ol", { className: "group list-disc text-wrap pl-4 font-normal text-[#CECFD2]", 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("button", { type: "button", className: "mt-2 w-full rounded-md py-2 text-center font-semibold text-[#713B12] text-sm transition-colors duration-200", style: {
+                                                background: 'radial-gradient(694.11% 412.88% at -117.5% -146.67%, #FFE5AF 45.26%, #EAC467 78.33%)',
+                                            }, onClick: () => handleOpenChange(false), children: "Ok" })] })] }) }) })] }) }));
+};
+export default DialogCheckin;

package/dist/components/Quests/Crazywin/components/DialogJourney.d.ts

@@ -0,0 +1,17 @@
+import type { JourneyQuestMilestone, MemberVerificationStatus } from '../../../../types';
+import type { QuestContextType } from '../../QuestsContext';
+type Fn<T> = (milestone: JourneyQuestMilestone) => T;
+type Props = {
+    isOpen: boolean;
+    quest: QuestContextType;
+    handleOpenChange: (open: boolean) => void;
+    enabled: boolean;
+    getMilestoneDescription: Fn<string | null>;
+    getCustomLinkUrl: Fn<string>;
+    handleMilestoneButtonClick: Fn<void>;
+    status: MemberVerificationStatus;
+    loginWithFacebook: () => void;
+    loginOrSignupUsingGoogle: () => void;
+};
+declare const DialogJourney: ({ isOpen, quest, handleOpenChange, enabled, getMilestoneDescription, getCustomLinkUrl, handleMilestoneButtonClick, status, loginWithFacebook, loginOrSignupUsingGoogle, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default DialogJourney;

package/dist/components/Quests/Crazywin/components/DialogJourney.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { CoinsHandIcon } from '../../../../icons/CoinsHandIcon.js';
+import { File02Icon } from '../../../../icons/File02Icon.js';
+import { Link01Icon } from '../../../../icons/Link01Icon.js';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { Dialog } from '../../../../ui/Dialog/index.js';
+import { Portal } from '../../../../ui/Portal/index.js';
+const DialogJourney = ({ isOpen, quest, handleOpenChange, enabled, getMilestoneDescription, getCustomLinkUrl, handleMilestoneButtonClick, status, loginWithFacebook, loginOrSignupUsingGoogle, }) => {
+    return (_jsx(Dialog.Root, { open: isOpen, onOpenChange: (details) => {
+            handleOpenChange(details.open);
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "z-tooltip flex items-center justify-center", children: _jsx(Dialog.Content, { className: "", children: _jsxs("div", { className: "overflow-y-invisible mx-auto flex h-full w-full max-w-[400px] flex-col bg-[#0C0E12] px-4 py-5 lg:h-auto lg:rounded-xl", children: [_jsx("div", { className: "relative w-full p-4", children: _jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("h2", { className: "font-semibold text-xl", children: quest?.name }), _jsx(Dialog.CloseTrigger, { className: "relative top-0 right-0", children: _jsx(XIcon, {}) })] }) }), _jsx("div", { className: "text-[#CECFD2] text-sm", dangerouslySetInnerHTML: { __html: quest.description } }), _jsx("div", { className: "mt-4 flex w-full flex-col space-y-4", children: quest?.milestones
+                                        ?.filter((milestone) => {
+                                        if (!enabled) {
+                                            return (milestone.type !== 'LINK_FACEBOOK_ACCOUNT' &&
+                                                milestone.type !== 'LINK_GOOGLE_ACCOUNT');
+                                        }
+                                        return true;
+                                    })
+                                        .map((milestone) => {
+                                        return (_jsxs("div", { className: "flex flex-col space-y-2.5 rounded-xl bg-[#0D1217] py-3", children: [_jsxs("div", { className: "flex w-full items-center justify-between px-3", children: [_jsx("p", { className: "font-medium text-base", children: milestone.name }), milestone.cleared && (_jsx("div", { className: "rounded-full border border-[#085D3A] bg-[#053321] px-2 py-0.5", children: _jsx("p", { className: "font-medium text-[#75E0A7] text-xs", children: "Completed" }) }))] }), getMilestoneDescription(milestone) && (_jsx("p", { className: "px-4 font-normal text-[#94969C] text-sm", children: getMilestoneDescription(milestone) })), milestone.type?.includes('CUSTOM') &&
+                                                    milestone?.description && (_jsxs("div", { className: "px-4", children: [_jsx("p", { className: twMerge('prose', 'prose-h1:m-0', 'prose-h2:m-0', 'prose-h3:m-0', 'prose-h4:m-0', 'prose-h5:m-0', 'prose-h6:m-0', 'prose-a:m-0', 'prose-p:m-0', 'mt-3', 'space-y-6', 'text-start', 'text-sm', 'text-[#94969C]', 'lg:text-base', '*:block'), dangerouslySetInnerHTML: {
+                                                                __html: milestone.description,
+                                                            } }), !milestone.cleared &&
+                                                            milestone.type === 'CUSTOM_LINK' && (_jsxs("a", { className: "mt-2 flex w-full items-center justify-center gap-1 rounded-md py-2 text-center font-semibold text-[#713B12] text-sm transition-colors duration-200", style: {
+                                                                background: 'radial-gradient(694.11% 412.88% at -117.5% -146.67%, #FFE5AF 45.26%, #EAC467 78.33%)',
+                                                            }, href: getCustomLinkUrl(milestone), target: "_blank", rel: "noopener noreferrer", children: ["Click Here ", _jsx(Link01Icon, { className: "size-5" })] }))] })), !milestone.cleared &&
+                                                    (milestone.type === 'ACCOUNT_VERIFICATION' ||
+                                                        milestone.type === 'FIRST_DEPOSIT') && (_jsx("div", { className: "px-4", children: _jsxs("button", { type: "button", className: "mt-2 w-full rounded-md py-2 text-center font-semibold text-[#713B12] text-sm transition-colors duration-200", style: {
+                                                            background: 'radial-gradient(694.11% 412.88% at -117.5% -146.67%, #FFE5AF 45.26%, #EAC467 78.33%)',
+                                                        }, onClick: () => handleMilestoneButtonClick(milestone), disabled: status === 'PENDING' || status === 'VERIFIED', children: [milestone.type === 'ACCOUNT_VERIFICATION' && (_jsx(File02Icon, { className: "mr-1 inline size-5" })), milestone.type === 'FIRST_DEPOSIT' && (_jsx(CoinsHandIcon, { className: "mr-1 inline size-5" })), milestone.type === 'ACCOUNT_VERIFICATION'
+                                                                ? 'Verify Account'
+                                                                : 'Deposit'] }) })), milestone.type === 'LINK_FACEBOOK_ACCOUNT' && (_jsx("div", { className: "px-4", children: _jsxs("button", { type: "button", className: "mt-2 flex w-full items-center justify-center gap-1 rounded-md py-2 text-center font-semibold text-[#713B12] text-sm transition-colors duration-200", style: {
+                                                            background: 'radial-gradient(694.11% 412.88% at -117.5% -146.67%, #FFE5AF 45.26%, #EAC467 78.33%)',
+                                                        }, onClick: loginWithFacebook, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 256 256", className: "size-6", children: [_jsx("path", { fill: "#1877F2", d: "M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445" }), _jsx("path", { fill: "#FFF", d: "m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A129 129 0 0 0 128 256a129 129 0 0 0 20-1.555V165z" })] }), "Link Facebook Account"] }) })), milestone.type === 'LINK_GOOGLE_ACCOUNT' && (_jsx("div", { className: "px-4", children: _jsxs("button", { type: "button", className: "mt-2 flex w-full items-center justify-center gap-1 rounded-md py-2 text-center font-semibold text-[#713B12] text-sm transition-colors duration-200", style: {
+                                                            background: 'radial-gradient(694.11% 412.88% at -117.5% -146.67%, #FFE5AF 45.26%, #EAC467 78.33%)',
+                                                        }, onClick: loginOrSignupUsingGoogle, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "31.27", height: "32", viewBox: "0 0 256 262", className: "size-6", children: [_jsx("path", { fill: "#4285F4", d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.90 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" }), _jsx("path", { fill: "#34A853", d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" }), _jsx("path", { fill: "#FBBC05", d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z" }), _jsx("path", { fill: "#EB4335", d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" })] }), "Link Google Account"] }) }))] }, milestone.id));
+                                    }) }), quest.bonus &&
+                                    quest.milestones?.every((milestone) => milestone.cleared) ? (_jsx("div", { className: "mt-4", children: _jsx("button", { type: "button", className: "mt-2 w-full rounded-md py-2 text-center font-semibold text-[#713B12] text-sm transition-colors duration-200", style: {
+                                            background: 'radial-gradient(694.11% 412.88% at -117.5% -146.67%, #FFE5AF 45.26%, #EAC467 78.33%)',
+                                        }, onClick: () => handleOpenChange(false), children: "Close" }) })) : (_jsx("div", { className: "mt-6 w-full rounded-lg border border-[#22262F] bg-[#13161B] px-3.5 py-2.5 text-center", children: _jsxs("p", { className: "text-sm", children: ["Complete to get", ' ', _jsxs("span", { className: "font-semibold text-[#FFE5AF]", children: ["\u20B1", quest.bonus] }), ' ', "bonus!"] }) }))] }) }) })] }) }));
+};
+export default DialogJourney;