@opexa/portal-components 0.0.451 → 0.0.452

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/PortalProvider/CXDTokenObserver.js

@@ -1,30 +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 { data: account } = useAccountQuery();
-    const accountCxd = {
-        cxd: account?.cellxpertDetails?.cxd,
-    };
-    const [cxd, setCxd, removeCxd] = useLocalStorage('cxd', null);
+    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 === accountCxd.cxd;
+        const isSame = cxd?.cxd === cxdToken;
         if (!isSame) {
             const extendedTimestamp = addHours(new Date(), 6).getTime();
             setCxd({
-                cxd: accountCxd.cxd,
+                cxd: cxdToken,
                 timestamp: extendedTimestamp,
             });
         }
-    }, account ? 100 : null);
-    useTimeout(() => {
-        removeCxd();
-    }, account ? removeCxdUntilInMs : null);
+    }, 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/JourneyQuest.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 import { useCallback, useMemo } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { useControllableState } from '../../client/hooks/useControllableState.js';
 import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
@@ -18,11 +20,9 @@ import { Progress } from '../../ui/Progress/index.js';
 import { Prose } from '../../ui/Prose/index.js';
 import { formatNumber } from '../../utils/formatNumber.js';
 import { getPercentage } from '../../utils/getPercentage.js';
+import { FacebookSignInTrigger } from '../SignIn/FacebookSignInTrigger.js';
 import { useQuestContext } from './QuestsContext.js';
 import { RemainingTime } from './RemainingTime.js';
-import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
-import { FacebookSignInTrigger } from '../SignIn/FacebookSignInTrigger.js';
-import dynamic from 'next/dynamic';
 const GoogleSignInButton = dynamic(() => import('../SignIn/GoogleSignInTrigger.js').then((m) => m.GoogleSignInTrigger), {
     ssr: false,
     loading: () => null,
@@ -42,7 +42,8 @@ export function JourneyQuest() {
         }
         const filteredMilestones = quest.milestones.filter((milestone) => {
             if (!featureFlag.enabled) {
-                return milestone.type !== 'LINK_FACEBOOK_ACCOUNT' && milestone.type !== 'LINK_GOOGLE_ACCOUNT';
+                return (milestone.type !== 'LINK_FACEBOOK_ACCOUNT' &&
+                    milestone.type !== 'LINK_GOOGLE_ACCOUNT');
             }
             return true;
         });
@@ -66,7 +67,7 @@ export function JourneyQuest() {
                 ? parseFloat(quest.progressPercentage)
                 : getPercentage(completedCount, total),
         };
-    }, [quest]);
+    }, [quest, featureFlag]);
     const progressValue = useMemo(() => {
         return (progressPercentage || getPercentage(currentMilestone, totalMilestones));
     }, [progressPercentage, currentMilestone, totalMilestones]);
@@ -99,7 +100,7 @@ function Rules(props) {
             return false;
         return milestones.every((milestone) => milestone.isCompleted);
     }, [milestones]);
-    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: "mx-auto min-h-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-5 mt-40", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: quest?.name || 'Quest' }), _jsx("p", { children: quest?.description ||
+    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: "mx-auto mt-40 min-h-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: quest?.name || 'Quest' }), _jsx("p", { children: quest?.description ||
                                             'Ready for a challenge? Complete them all and get amazing rewards!' }), milestones.map((milestone) => (_jsxs("div", { className: "flex flex-col space-y-2.5 rounded-xl bg-bg-tertiary p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "font-medium text-base text-white", children: milestone.label }), milestone.isCompleted && (_jsx("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: "Complete" }))] }), milestone.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
                                                     __html: milestone.description,
                                                 } })) : milestone.bonus ? (_jsxs("p", { className: "ml-1", children: [milestone.key === 'REGISTRATION' &&
@@ -122,8 +123,8 @@ function Rules(props) {
                                                 }, "aria-label": `Complete ${milestone.label}`, children: [milestone.key === 'ACCOUNT_VERIFICATION' ? (_jsx(FileCheck02Icon, { className: "size-5" })) : (_jsx(CoinsHandIcon, { className: "size-5" })), milestone.key === 'FIRST_DEPOSIT'
                                                         ? 'Deposit'
                                                         : 'Verify Account'] })), !milestone.isCompleted &&
-                                                milestone.key === 'LINK_FACEBOOK_ACCOUNT' && (_jsx(FacebookSignInTrigger, { text: 'Link Facebook Account', className: 'items-center justify-center rounded-md font-semibold shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none h-10 gap-md px-3 text-sm flex w-full bg-button-primary-bg text-button-primary-fg' })), !milestone.isCompleted &&
-                                                milestone.key === 'LINK_GOOGLE_ACCOUNT' && (_jsx(GoogleSignInButton, { text: 'Link Google Account', className: 'items-center justify-center rounded-md font-semibold shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none h-10 gap-md px-3 text-sm flex w-full bg-button-primary-bg text-button-primary-fg' }))] }, milestone.key))), quest?.bonus && (_jsx("div", { className: "flex h-full items-end", children: allMilestonesCompleted ? (_jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })) : (_jsx("div", { className: "w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { children: ["Complete target to", ' ', _jsxs("span", { className: "text-brand-400", children: ["\u20B1", quest?.bonus] }), ' ', "bonus!"] }) })) }))] })] }) })] }) }));
+                                                milestone.key === 'LINK_FACEBOOK_ACCOUNT' && (_jsx(FacebookSignInTrigger, { text: "Link Facebook Account", className: "flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })), !milestone.isCompleted &&
+                                                milestone.key === 'LINK_GOOGLE_ACCOUNT' && (_jsx(GoogleSignInButton, { text: "Link Google Account", className: "flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" }))] }, milestone.key))), quest?.bonus && (_jsx("div", { className: "flex h-full items-end", children: allMilestonesCompleted ? (_jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })) : (_jsx("div", { className: "w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { children: ["Complete target to", ' ', _jsxs("span", { className: "text-brand-400", children: ["\u20B1", quest?.bonus] }), ' ', "bonus!"] }) })) }))] })] }) })] }) }));
 }
 function QuestMilestone({ label, bonus, isCompleted = false, }) {
     const localeInfo = useLocaleInfo();

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

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

package/dist/components/Quests/MultiWageringQuest.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { Lock01Icon } from '../../icons/Lock01Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { Progress } from '../../ui/Progress/index.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function MultiWageringQuest() {
+    const disclosure = useDisclosure();
+    const quest = useQuestContext();
+    const { stages, totalStage, currentStage, progressPercentage } = useMemo(() => {
+        const currentStage = quest.stages.filter((m) => m.cleared).length;
+        if (!quest?.stages) {
+            return {
+                stages: [],
+                totalStage: 0,
+                currentStage: 0,
+                progressPercentage: 0,
+            };
+        }
+        const transformedStages = quest.stages.map((stage) => ({
+            bonusAmount: stage.bonusAmount,
+            bonusTurnoverRequirementMultiplier: stage.bonusTurnoverRequirementMultiplier,
+            cleared: stage.cleared,
+            dateTimeCleared: stage.dateTimeCleared,
+            targetTurnover: stage.targetTurnover,
+        }));
+        const total = quest.stages.length;
+        return {
+            stages: transformedStages,
+            totalStage: total,
+            currentStage: currentStage === 0 ? 1 : currentStage,
+            progressPercentage: +quest.progressPercentage,
+        };
+    }, [quest]);
+    const handleViewDetails = useCallback(() => {
+        disclosure.setOpen(true);
+    }, [disclosure]);
+    const localeInfo = useLocaleInfo();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-full w-full flex-col space-y-6 rounded-2xl border border-border-primary bg-bg-tertiary px-4 pt-5 pb-6", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-center justify-between", children: [_jsx(RemainingTime, { endOfDay: true }), quest.status === 'COMPLETED' && (_jsx(Badge.Root, { colorScheme: "success", size: "lg", round: false, children: _jsxs(Badge.Label, { children: ["Final Bonus:", ' ', formatNumber(quest.bonus, {
+                                                    currency: localeInfo.currency.code,
+                                                })] }) }))] }), _jsx("p", { className: "font-semibold text-xl", children: quest?.name || 'Journey Quest' }), _jsx("div", { className: "text-sm", dangerouslySetInnerHTML: {
+                                    __html: quest?.description ||
+                                        'Ready for a challenge? Complete them all and get amazing rewards!',
+                                } }), _jsxs("div", { className: "flex items-center justify-between pt-5", children: [_jsxs("p", { className: "text-sm", children: ["Progress: ", quest.progressPercentage, "%"] }), _jsxs("p", { className: "text-sm", children: [quest.turnover, _jsxs("span", { className: "text-[#667085]", children: ["/", quest.targetTurnover, " PHP"] })] })] }), _jsx(Progress.Root, { max: 100, className: "h-2 rounded-full bg-bg-primary", value: progressPercentage, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "text-sm text-text-quarterary-brand", children: ["Stage ", currentStage, " of ", totalStage] }), _jsx(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: _jsxs(Badge.Label, { className: "flex items-center justify-center text-xs", children: [_jsx("p", { className: "flex h-[10px] items-center justify-center", children: "+" }), ' ', formatNumber(quest.stages?.reduce((curr, prev) => {
+                                                    return curr + Number(prev.bonusAmount || 0);
+                                                }, 0), {
+                                                    currency: localeInfo.currency.code,
+                                                    maxDecimalPlaces: 0,
+                                                    minDecimalPlaces: 0,
+                                                }), ' ', "Bonus"] }) })] })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: handleViewDetails, "aria-label": "View Details", disabled: false, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: "View Details" }) })] }), _jsx(Stages, { open: disclosure.open, onOpenChange: disclosure.setOpen, quest: quest, stages: stages })] }));
+}
+function Stages(props) {
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    const currentStage = useMemo(() => {
+        const stage = props?.stages?.findLastIndex((stage) => stage.cleared) ?? 0;
+        return stage !== -1 ? stage + 1 : 1;
+    }, [props.stages]);
+    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: "mx-auto mt-40 min-h-auto min-w-[23rem] max-w-[25rem] overflow-y-auto rounded-xl px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: props.quest?.name || 'Quest' }), _jsx("div", { dangerouslySetInnerHTML: {
+                                            __html: props.quest?.description ||
+                                                'Ready for a challenge? Complete them all and get amazing rewards!',
+                                        } }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: props.stages.map((stage, idx) => {
+                                            if (currentStage >= idx + 1) {
+                                                return (_jsx(QuestWageringStageUnlocked, { data: stage, bonus: stage.bonusAmount, stage: idx, isCompleted: stage.cleared }, idx));
+                                            }
+                                            else {
+                                                return _jsx(QuestWageringStageLocked, { stage: idx }, idx);
+                                            }
+                                        }) }), _jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })] })] }) })] }) }));
+}
+function QuestWageringStageUnlocked({ bonus, stage, data, isCompleted = false, }) {
+    const localeInfo = useLocaleInfo();
+    return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl bg-bg-secondary p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx(Badge.Root, { colorScheme: isCompleted ? 'success' : 'blue', size: "md", round: true, children: _jsx(Badge.Label, { children: data.cleared ? 'Completed' : 'Ongoing' }) })] }), _jsxs("div", { className: "mt-2.5 flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", data.cleared ? 100 : 0, "%"] }), _jsx("div", { className: "rounded-[6px] border border-border-secondary bg-bg-secondary-alt px-1.5 py-0.5", children: _jsxs("p", { className: "font-medium text-xs leading-tight", children: ["+", formatNumber(bonus, {
+                                    currency: localeInfo.currency.code,
+                                }), ' ', "Bonus"] }) })] }), _jsx(Progress.Root, { max: 100, className: "mt-2 h-2 rounded-full bg-bg-primary", value: data.cleared ? 100 : 0, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) })] }));
+}
+function QuestWageringStageLocked({ stage }) {
+    return (_jsxs("div", { className: "mb-4 flex items-center justify-between rounded-xl bg-bg-secondary p-3", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx("div", { className: "flex items-center justify-center rounded-full border border-border-lock bg-bg-lock p-1", children: _jsx(Lock01Icon, { className: "size-3 stroke-3 font-medium text-text-lock" }) })] }));
+}

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

@@ -6,11 +6,13 @@ import { useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useAvailableQuestsQuery } from '../../client/hooks/useAvailableQuestsQuery.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import closeChest from '../../images/close-chest.png';
 import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
 import { DailyCheckInQuest, } from './DailyCheckInQuest.js';
 import { JourneyQuest } from './JourneyQuest.js';
+import { MultiWageringQuest } from './MultiWageringQuest.js';
 import { OnboardingQuest } from './OnboardingQuest.js';
 import { QuestContext } from './QuestsContext.js';
 import { WageringQuest, } from './WageringQuest.js';
@@ -19,12 +21,14 @@ const QUEST_COMPONENT_MAP = {
     ONBOARDING: OnboardingQuest,
     WAGERING: WageringQuest,
     JOURNEY: JourneyQuest,
+    MULTI_WAGERING: MultiWageringQuest,
 };
 const TabDefinition = z.enum(['AVAILABLE', 'COMPLETED', 'FAILED']);
 export function Quests__client(props) {
     const { className, style, heading } = props;
     const classNames = isString(className) ? { root: className } : className;
     const [tab, setTab] = useState('AVAILABLE');
+    const featureFlag = useFeatureFlag();
     const questsQuery = useAvailableQuestsQuery({
         refetchInterval: 7500,
     });
@@ -51,7 +55,9 @@ export function Quests__client(props) {
     return (_jsxs("div", { style: style, className: twMerge(classNames?.root), children: [_jsx("h2", { className: "font-semibold text-lg", children: 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, {})] }), _jsxs(SegmentGroup.Item, { value: "FAILED", className: "w-full lg:w-fit", children: [_jsx(SegmentGroup.ItemText, { children: "Failed" }), _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 Quest = QUEST_COMPONENT_MAP[quest.type];
+                    const Quest = quest.stages?.length && featureFlag.enabled
+                        ? QUEST_COMPONENT_MAP['MULTI_WAGERING']
+                        : QUEST_COMPONENT_MAP[quest.type];
                     return (_jsx(QuestContext, { value: quest, children: _jsx(Quest, { className: quest.type === 'WAGERING'
                                 ? classNames?.wageringQuest
                                 : quest.type === 'DAILY_CHECKIN'

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

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

package/dist/components/SessionWatcher/SessionWatcher.js

@@ -0,0 +1,20 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect } from 'react';
+import { useSessionHealthQuery } from '../../client/hooks/useSessionHealthQuery.js';
+import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
+export function SessionWatcher() {
+    const router = useRouter();
+    const query = useSessionHealthQuery({ refetchInterval: 1000 * 5 });
+    const healthy = query.data ?? true;
+    const mutation = useSignOutMutation();
+    const signOut = useCallback(async () => {
+        await mutation.mutateAsync();
+        router.refresh();
+    }, [mutation, router]);
+    useEffect(() => {
+        if (!healthy)
+            signOut();
+    }, [healthy, signOut]);
+    return null;
+}

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

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

package/dist/components/SessionWatcher/index.js

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

package/dist/icons/LinkBrokenIcon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function LinkBrokenIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/LinkBrokenIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LinkBrokenIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: _jsx("path", { d: "M8.5 15.5L15.5 8.49998M9 4V2M15 20V22M4 9H2M20 15H22M4.91421 4.91421L3.5 3.5M19.0858 19.0857L20.5 20.4999M12 17.6568L9.87871 19.7781C8.31662 21.3402 5.78396 21.3402 4.22186 19.7781C2.65976 18.216 2.65976 15.6833 4.22186 14.1212L6.34318 11.9999M17.6569 11.9999L19.7782 9.87859C21.3403 8.31649 21.3403 5.78383 19.7782 4.22174C18.2161 2.65964 15.6835 2.65964 14.1214 4.22174L12 6.34306", stroke: "#FEDF89", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}

package/dist/services/queries.d.ts

@@ -110,10 +110,10 @@ export declare const COMPLETE_ONBOARDING = "\n  mutation CompleteOnboarding($inp
 export declare const SKIP_ONBOARDING = "\n  mutation SkipOnboarding {\n    skipOnboarding\n  }\n";
 export declare const QUEST_PROGRAM_FRAGMENT = "\n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n";
 export declare const DAILY_CHECKIN_FRAGMENT = "\n  \n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n\n  fragment DailyCheckinQuestFragment on DailyCheckInQuest {\n    id\n    name\n    description\n    type\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    endDateTime\n    dateTimeCreated\n    lastCheckInDate\n    startDateTime\n    checkInStreak\n\n    thirdDayBonusAmount\n    seventhDayBonusAmount\n    sixthDayBonusAmount\n  }\n";
-export declare const WAGERING_FRAGMENT = "\n  fragment WageringQuestFragment on WageringQuest {\n    bonus\n    id\n    name\n    type\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    targetTurnover\n    endDateTime\n    dateTimeCreated\n  }\n";
+export declare const WAGERING_FRAGMENT = "\n  fragment WageringQuestFragment on WageringQuest {\n    bonus\n    id\n    name\n    type\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    targetTurnover\n    endDateTime\n    dateTimeCreated\n    stages{\n       targetTurnover\n       bonusTurnoverRequirementMultiplier\n       bonusAmount\n       cleared\n       dateTimeCleared\n    }\n  }\n";
 export declare const JOURNEY_FRAGMENT = "\n  fragment JourneyQuestFragment on JourneyQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n    status\n    type\n    progressPercentage\n    bonus\n    bonusAwarded\n    dateTimeCreated\n    endDateTime\n    milestones {\n      id\n      type\n      name\n      bonusAmount\n      cleared\n      description\n    }\n  }\n";
 export declare const ONBOARDING_QUEST_FRAGMENT = "\n  fragment OnboardingQuestFragment on OnboardingQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    type\n    progressPercentage\n    bonus\n    endDateTime\n    dateTimeCreated\n    firstDepositCompleted\n    accountVerificationCompleted\n  }\n";
-export declare const AVAILABLE_QUESTS = "\n  \n  fragment WageringQuestFragment on WageringQuest {\n    bonus\n    id\n    name\n    type\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    targetTurnover\n    endDateTime\n    dateTimeCreated\n  }\n\n  \n  \n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n\n  fragment DailyCheckinQuestFragment on DailyCheckInQuest {\n    id\n    name\n    description\n    type\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    endDateTime\n    dateTimeCreated\n    lastCheckInDate\n    startDateTime\n    checkInStreak\n\n    thirdDayBonusAmount\n    seventhDayBonusAmount\n    sixthDayBonusAmount\n  }\n\n  \n  fragment OnboardingQuestFragment on OnboardingQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    type\n    progressPercentage\n    bonus\n    endDateTime\n    dateTimeCreated\n    firstDepositCompleted\n    accountVerificationCompleted\n  }\n\n  \n  fragment JourneyQuestFragment on JourneyQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n    status\n    type\n    progressPercentage\n    bonus\n    bonusAwarded\n    dateTimeCreated\n    endDateTime\n    milestones {\n      id\n      type\n      name\n      bonusAmount\n      cleared\n      description\n    }\n  }\n\n\n  query AvailableQuests {\n    availableQuests {\n      ... on Quest {\n        ... on WageringQuest {\n          ...WageringQuestFragment\n        }\n        ... on DailyCheckInQuest {\n          ...DailyCheckinQuestFragment\n        }\n        ... on OnboardingQuest {\n          ...OnboardingQuestFragment\n        }\n        ... on JourneyQuest {\n          ...JourneyQuestFragment\n        }\n      }\n    }\n  }\n";
+export declare const AVAILABLE_QUESTS = "\n  \n  fragment WageringQuestFragment on WageringQuest {\n    bonus\n    id\n    name\n    type\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    targetTurnover\n    endDateTime\n    dateTimeCreated\n    stages{\n       targetTurnover\n       bonusTurnoverRequirementMultiplier\n       bonusAmount\n       cleared\n       dateTimeCleared\n    }\n  }\n\n  \n  \n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n\n  fragment DailyCheckinQuestFragment on DailyCheckInQuest {\n    id\n    name\n    description\n    type\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    endDateTime\n    dateTimeCreated\n    lastCheckInDate\n    startDateTime\n    checkInStreak\n\n    thirdDayBonusAmount\n    seventhDayBonusAmount\n    sixthDayBonusAmount\n  }\n\n  \n  fragment OnboardingQuestFragment on OnboardingQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    type\n    progressPercentage\n    bonus\n    endDateTime\n    dateTimeCreated\n    firstDepositCompleted\n    accountVerificationCompleted\n  }\n\n  \n  fragment JourneyQuestFragment on JourneyQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n    status\n    type\n    progressPercentage\n    bonus\n    bonusAwarded\n    dateTimeCreated\n    endDateTime\n    milestones {\n      id\n      type\n      name\n      bonusAmount\n      cleared\n      description\n    }\n  }\n\n\n  query AvailableQuests {\n    availableQuests {\n      ... on Quest {\n        ... on WageringQuest {\n          ...WageringQuestFragment\n        }\n        ... on DailyCheckInQuest {\n          ...DailyCheckinQuestFragment\n        }\n        ... on OnboardingQuest {\n          ...OnboardingQuestFragment\n        }\n        ... on JourneyQuest {\n          ...JourneyQuestFragment\n        }\n      }\n    }\n  }\n";
 export declare const AVAILABLE_QUEST_IDS = "\n  query AvailableQuestIds {\n    availableQuests {\n      ... on Node {\n        id\n      }\n    }\n  }\n";
 export declare const CHECK_IN_DAILY_QUEST = "\n  mutation checkInDailyCheckInQuest($input: CheckInDailyCheckInQuestInput!) {\n    checkInDailyCheckInQuest(input: $input)\n  }\n";
 export declare const TOP_WINS = "\n  query TopWins($first: Int) {\n    topWins(first: $first) {\n      id\n      game {\n        id\n        name\n        type\n        provider\n      }\n      member {\n        id\n        name\n      }\n      multiplier\n      payout\n    }\n  }\n";

package/dist/services/queries.js

@@ -2422,6 +2422,13 @@ export const WAGERING_FRAGMENT = /* GraphQL */ `
     targetTurnover
     endDateTime
     dateTimeCreated
+    stages{
+       targetTurnover
+       bonusTurnoverRequirementMultiplier
+       bonusAmount
+       cleared
+       dateTimeCleared
+    }
   }
 `;
 export const JOURNEY_FRAGMENT = /* GraphQL */ `

package/dist/styles/theme.css

@@ -274,6 +274,9 @@
 
   --color-border-checkbox-primary: #373a41;
   --color-bg-progress-bar-primary: var(--color-bg-primary);
+  --color-bg-lock: #161B26;
+  --color-border-lock: #333741;
+  --color-text-lock: #85888E;
 
 
   --font-sans: var(--font-sans);

package/dist/types/index.d.ts

@@ -693,7 +693,7 @@ export interface Message {
 }
 export type OnboardingStatus = 'PENDING' | 'SKIPPED' | 'COMPLETED';
 export type OnboardingPlayerExperience = 'ROOKIE' | 'VETERAN';
-export type QuestType = 'WAGERING' | 'DAILY_CHECKIN' | 'ONBOARDING' | 'JOURNEY';
+export type QuestType = 'WAGERING' | 'DAILY_CHECKIN' | 'ONBOARDING' | 'JOURNEY' | 'MULTI_WAGERING';
 export type QuestStatus = 'IN_PROGRESS' | 'COMPLETED' | 'FAILED';
 export type QuestProgramStatus = 'ACTIVE' | 'INACTIVE' | 'DELETED';
 export interface QuestProgram {
@@ -712,6 +712,13 @@ export interface JourneyQuestMilestone {
     cleared: boolean;
     description: string;
 }
+export interface WageringQuestStage {
+    targetTurnover: string;
+    bonusTurnoverRequirementMultiplier: number;
+    bonusAmount: number;
+    cleared: boolean;
+    dateTimeCleared: Date;
+}
 export interface Quest {
     id: string;
     name: string;
@@ -736,6 +743,7 @@ export interface Quest {
     firstDepositCompleted?: boolean;
     accountVerificationCompleted?: boolean;
     milestones?: JourneyQuestMilestone[];
+    stages?: WageringQuestStage[];
 }
 interface TopWinGame {
     id: string;

package/dist/ui/Badge/Badge.d.ts

@@ -37,7 +37,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -72,7 +72,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -107,7 +107,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 interface BadgeLabelProps extends ComponentPropsWithRef<'span'> {
     asChild?: boolean;
 }
@@ -146,7 +146,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -181,7 +181,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -216,7 +216,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 interface BadgeIndicatorProps extends ComponentPropsWithRef<'svg'> {
     asChild?: boolean;
 }
@@ -255,7 +255,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -290,7 +290,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -325,7 +325,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 interface BadgeIconProps extends ComponentPropsWithRef<'svg'> {
     asChild?: boolean;
 }
@@ -364,7 +364,7 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -399,7 +399,7 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -434,5 +434,5 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 export {};

package/dist/ui/Badge/badge.anatomy.d.ts

@@ -1 +1 @@
-export declare const badgeAnatomy: import("@ark-ui/react/anatomy").AnatomyInstance<"label" | "root" | "icon" | "indicator">;
+export declare const badgeAnatomy: import("@ark-ui/react/anatomy").AnatomyInstance<"label" | "root" | "indicator" | "icon">;

package/dist/ui/Badge/badge.recipe.d.ts

@@ -33,7 +33,7 @@ export declare const badgeRecipe: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -68,7 +68,7 @@ export declare const badgeRecipe: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -103,4 +103,4 @@ export declare const badgeRecipe: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>;
+}, Record<"label" | "root" | "indicator" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>;