@opexa/portal-components 0.0.899 → 0.0.900

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

@@ -0,0 +1,13 @@
+import type { MemberVerificationStatus } from '../../../../types';
+import type { QuestContextType } from '../../QuestsContext';
+type TaskType = 'ACCOUNT_VERIFICATION' | 'FIRST_DEPOSIT';
+type Props = {
+    isOpen: boolean;
+    quest: QuestContextType;
+    handleOpenChange: (open: boolean) => void;
+    getTaskDescription: (taskType: TaskType) => string;
+    handleTaskButtonClick: (taskType: TaskType) => void;
+    verificationStatus: MemberVerificationStatus;
+};
+declare const DialogQuest: ({ isOpen, quest, handleOpenChange, getTaskDescription, handleTaskButtonClick, verificationStatus, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default DialogQuest;

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

@@ -0,0 +1,19 @@
+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 DialogQuest = ({ isOpen, quest, handleOpenChange, getTaskDescription, handleTaskButtonClick, verificationStatus, }) => {
+    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 pb-5", 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("p", { className: "text-[#CECFD2] text-sm", dangerouslySetInnerHTML: { __html: quest.description } }), _jsxs("div", { className: "mt-4 flex w-full flex-col space-y-4", children: [_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: "First Deposit" }), quest?.firstDepositCompleted && (_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" }) }))] }), _jsx("p", { className: "px-4 font-normal text-[#94969C] text-sm", children: getTaskDescription('FIRST_DEPOSIT') }), !quest?.firstDepositCompleted && (_jsx("div", { className: "px-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: () => handleTaskButtonClick('FIRST_DEPOSIT'), children: "Deposit" }) }))] }), _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: "Account Verification" }), quest?.accountVerificationCompleted && (_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" }) }))] }), _jsx("p", { className: "px-4 font-normal text-[#94969C] text-sm", children: getTaskDescription('ACCOUNT_VERIFICATION') }), !quest?.accountVerificationCompleted && (_jsx("div", { className: "px-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: () => handleTaskButtonClick('ACCOUNT_VERIFICATION'), disabled: verificationStatus === 'PENDING' ||
+                                                            verificationStatus === 'VERIFIED', children: "Verify Account" }) }))] })] }), quest.bonus &&
+                                    quest?.firstDepositCompleted &&
+                                    quest?.accountVerificationCompleted ? (_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 DialogQuest;

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

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { XIcon } from '../../../../icons/XIcon.js';
+import { Dialog } from '../../../../ui/Dialog/index.js';
+import { Portal } from '../../../../ui/Portal/index.js';
+import StageItemLocked from './StageItemLocked.js';
+import StageItemUnlocked from './StageItemUnlocked.js';
+const DialogWagering = ({ quest, isOpen, handleOpenChange, currentStage, }) => {
+    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 pb-5", 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, {}) })] }) }), _jsxs("div", { className: "flex flex-col", 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', 'text-start', 'text-sm', 'text-[#A3A3A3]', 'lg:text-base', '*:text-inherit', '[&_strong]:text-inherit', 'mb-4'), dangerouslySetInnerHTML: { __html: quest.description } }), quest.program?.stages?.map((stage, index) => {
+                                            if (currentStage >= index + 1) {
+                                                return (_jsx(StageItemUnlocked, { stageLevel: currentStage, index: index, writableBonus: +quest.bonus, questCompleted: quest.status === 'COMPLETED', progressPercentage: +quest.progressPercentage, bonusAmount: stage.bonusAmount }, index));
+                                            }
+                                            else {
+                                                return _jsx(StageItemLocked, { index: index }, index);
+                                            }
+                                        }), _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" })] })] }) }) })] }) }));
+};
+export default DialogWagering;

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

@@ -0,0 +1,8 @@
+import type { GameProvider } from '../../../../types';
+import { type GameProviderConfig } from '../../../../types/crazywinTypes';
+type Props = {
+    providers: GameProvider[];
+    gameProviderConfig: GameProviderConfig;
+};
+declare const GameProviders: ({ providers, gameProviderConfig }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default GameProviders;

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

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useFeatureFlag } from '../../../../client/hooks/useFeatureFlag.js';
+import { ArrowLeftIcon } from '../../../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../../../icons/ArrowRightIcon.js';
+import Chest from '../../../../images/treasure.webp';
+import { BINGO_REQUIRES_FUTURE_FLAG, CASINO_REQUIRES_FUTURE_FLAG, SLOT_REQUIRES_FUTURE_FLAG, SPECIALTY_REQUIRES_FUTURE_FLAG, TABLE_REQUIRES_FUTURE_FLAG, } from '../../../../types/crazywinTypes.js';
+import { getProviderData } from '../../../../utils/getProviderData.js';
+import { withMarketId } from '../../../../utils/withMarketId.js';
+const GameProviders = ({ providers, gameProviderConfig }) => {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const featureFlag = useFeatureFlag();
+    const mParam = searchParams.get('m'); // replaces Svelte `page.url.searchParams.get('m')`
+    const [isScrollLeftDisabled, setIsScrollLeftDisabled] = useState(true);
+    const [isScrollRightDisabled, setIsScrollRightDisabled] = useState(false);
+    const providerMenuRef = useRef(null);
+    // Scroll handler (Svelte $effect that sets scroll buttons enabled/disabled)
+    useEffect(() => {
+        const el = providerMenuRef.current;
+        if (!el)
+            return;
+        const handleScroll = () => {
+            setIsScrollLeftDisabled(el.scrollLeft === 0);
+            setIsScrollRightDisabled(el.scrollLeft + el.clientWidth >= el.scrollWidth);
+        };
+        el.addEventListener('scroll', handleScroll);
+        // run once to initialize
+        handleScroll();
+        return () => {
+            el.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    // Horizontal scroll with wheel (Svelte $effect handleHorizScroll)
+    useEffect(() => {
+        const el = providerMenuRef.current;
+        if (!el)
+            return;
+        const handle = (e) => {
+            const sw = el.scrollWidth;
+            const sl = el.scrollLeft;
+            const cw = el.clientWidth;
+            const scrollable = sw > cw;
+            if (!scrollable)
+                return;
+            e.preventDefault();
+            const left = sl + e.deltaY;
+            el.scrollBy({ left });
+        };
+        // passive: false so we can call preventDefault
+        el.addEventListener('wheel', handle, { passive: false });
+        return () => {
+            el.removeEventListener('wheel', handle);
+        };
+    }, []);
+    // Derived options (Svelte $derived.by)
+    const options = useMemo(() => {
+        const filtered = providers?.filter((provider) => {
+            if (featureFlag.enabled)
+                return true;
+            const requiresFutureFlag = [
+                ...BINGO_REQUIRES_FUTURE_FLAG,
+                ...CASINO_REQUIRES_FUTURE_FLAG,
+                ...SLOT_REQUIRES_FUTURE_FLAG,
+                ...SPECIALTY_REQUIRES_FUTURE_FLAG,
+                ...TABLE_REQUIRES_FUTURE_FLAG,
+            ].includes(provider);
+            return !requiresFutureFlag;
+        });
+        return filtered?.map((provider) => getProviderData(provider));
+    }, [providers, featureFlag.enabled]);
+    const next = () => {
+        const el = providerMenuRef.current;
+        if (!el)
+            return;
+        el.scrollLeft += 300;
+    };
+    const prev = () => {
+        const el = providerMenuRef.current;
+        if (!el)
+            return;
+        if (el.scrollLeft > 0) {
+            el.scrollLeft -= 300;
+        }
+    };
+    const onProviderChange = async (value) => {
+        if (!value)
+            return;
+        // questStore.isOpen = false;
+        if (gameProviderConfig.bingoGameProviders.includes(value)) {
+            router.push(withMarketId(`/bingo/${value.toLowerCase()}`, mParam), {
+                scroll: false,
+            });
+        }
+        else if (gameProviderConfig.casinoGameProviders.includes(value)) {
+            router.push(withMarketId(`/casino/${value.toLowerCase()}`, mParam), {
+                scroll: false,
+            });
+        }
+        else if (gameProviderConfig.sportsGameProviders.includes(value)) {
+            // Temp removed
+            // if (value === 'BTI') {
+            // 	router.push(withMarketId(`/sports`), { scroll: false });
+            // 	await gameStore.play('SPORTS:BTI');
+            // }
+            // if (value === 'DIGITAIN') {
+            // 	router.push(withMarketId(`/sports`), { scroll: false });
+            // 	await gameStore.play__DIGITAIN();
+            // }
+        }
+        else if (gameProviderConfig.slotsGameProviders.includes(value)) {
+            router.push(withMarketId(`/slot/${value.toLowerCase()}`, mParam), {
+                scroll: false,
+            });
+        }
+        else if (gameProviderConfig.specialtyGameProviders.includes(value)) {
+            router.push(withMarketId(`/specialty/${value.toLowerCase()}`, mParam), {
+                scroll: false,
+            });
+        }
+        else if (gameProviderConfig.tableGameProviders.includes(value)) {
+            router.push(withMarketId(`/table/${value.toLowerCase()}`, mParam), {
+                scroll: false,
+            });
+        }
+    };
+    if (!options.length) {
+        return null;
+    }
+    return (_jsxs("div", { className: "h-fit", children: [_jsxs("div", { className: "mb-[12px] flex w-full items-center justify-between", children: [_jsxs("div", { className: "flex items-end gap-2", children: [_jsx(Image, { src: Chest.src, alt: "Chest Treasure Quest", className: "block h-auto w-full", priority: true, width: 28, height: 28 }), _jsx("p", { className: "font-semibold text-lg", children: "Game Provider" })] }), _jsxs("div", { className: "flex h-[2.5rem]", children: [_jsx("button", { type: "button", onClick: prev, className: "flex h-[inherit] w-11 items-center justify-center rounded-l-full border border-[#333741] bg-[#0C111D] bg-primary text-white disabled:cursor-not-allowed disabled:text-[#98A2B3]", disabled: isScrollLeftDisabled, children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx("button", { type: "button", onClick: next, className: "flex h-[inherit] w-11 items-center justify-center rounded-r-full border border-[#333741] border-l-0 bg-[#0C111D] bg-primary text-white disabled:cursor-not-allowed disabled:text-[#98A2B3]", disabled: options.length <= 2 || isScrollRightDisabled, children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] }), _jsx("section", { ref: providerMenuRef, className: "slider overflow-x-invisible flex h-fit w-full items-end gap-1.5 scroll-smooth rounded", "data-testid": "providers-container ", children: options.map((item, index) => {
+                    const imageCandidate = Array.isArray(item.image)
+                        ? (item.image[1] ?? item.image[0])
+                        : item.image;
+                    const src = typeof imageCandidate === 'string' ? imageCandidate : null;
+                    return (_jsx("button", { type: "button", className: twMerge('flex h-fit shrink-0 grow-0 items-center rounded', 'relative', 'transform transition-transform duration-300', 'data-selected:translate-y-[-8px]', 'h-fit w-[8.625rem]'), onClick: () => {
+                            onProviderChange(item.value);
+                        }, "data-testid": "game-provider.{item.label.replaceAll(' ', '_').toLowerCase()}-button", children: src ? (_jsx(Image, { alt: item.label, src: src, className: "h-auto w-auto", draggable: "false" })) : (_jsx("div", { className: "flex w-[inherit] items-center justify-center rounded-xl bg-black/80", children: _jsx("span", { className: twMerge('bg-clip-text align-center font-lilita-one text-2xl', 'uppercase leading-none tracking-[0.075rem]', 'bg-[linear-gradient(180deg,#c7ddff_0%,#418dff_100%)]', 'drop-shadow-[0px_2px_2.8px_rgba(215,100,255,0.5)]', '[-webkit-background-clip:text]', '[-webkit-text-fill-color:transparent]', 'lg:2xl'), children: "All" }) })) }, index));
+                }) })] }));
+};
+export default GameProviders;

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

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+type Props = {
+    id: string;
+    cleared: boolean;
+    name: string;
+    type: 'JOURNEY' | 'ONBOARDING' | 'WAGERING' | 'DAILY_CHECKIN';
+    bonusAmount?: number;
+    style?: CSSProperties;
+    className?: {
+        name?: string;
+        bonus?: string;
+    };
+};
+declare const ObjectiveItem: ({ id, cleared, name, type, bonusAmount, style, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ObjectiveItem;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { CheckIcon } from '../../../../icons/CheckIcon.js';
+import { Checkbox } from '../../../../ui/Checkbox/index.js';
+const ObjectiveItem = ({ id, cleared, name, type, bonusAmount, style, className, }) => {
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "flex items-center space-x-2", children: _jsxs(Checkbox.Root, { id: id, checked: cleared, className: "items-center", children: [_jsx(Checkbox.Control, { className: "bg-transparent", style: style, children: _jsx(Checkbox.Indicator, { asChild: true, className: "flex size-4 shrink-0 items-center justify-center rounded border border-[#FFE5AF] bg-[#FFE5AF] transition-colors duration-150", children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: twMerge(className?.name), children: _jsx("p", { className: "font-medium text-sm", children: name }) }), _jsx(Checkbox.HiddenInput, {})] }) }), type === 'JOURNEY' && (_jsxs("div", { className: twMerge('rounded-md border border-[#333741] bg-[#0C111D] py-0.5 pr-1.5 pl-1 text-[#CECFD2] text-xs', className?.bonus), children: ["+ \u20B1", bonusAmount, " Bonus"] }))] }));
+};
+export default ObjectiveItem;

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

@@ -0,0 +1,8 @@
+type Props = {
+    status?: string;
+    isExpired: boolean;
+    type: 'JOURNEY' | 'ONBOARDING' | 'WAGERING' | 'DAILY_CHECKIN';
+    bonusAmount?: number;
+};
+declare const QuestBadge: ({ status, isExpired, type, bonusAmount }: Props) => import("react/jsx-runtime").JSX.Element;
+export default QuestBadge;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { currencyFormatter } from '../../../../utils/formatter.js';
+const QuestBadge = ({ status, isExpired, type, bonusAmount }) => {
+    const variant = status === 'COMPLETED'
+        ? 'completed'
+        : isExpired || status === 'FAILED'
+            ? 'failed'
+            : 'default';
+    const label = variant === 'completed'
+        ? 'Completed'
+        : variant === 'failed'
+            ? 'Failed'
+            : null;
+    const body = (_jsx("div", { className: twMerge('w-fit rounded-full border px-2 py-0.5', variant === 'completed' && 'border-[#085D3A] bg-[#053321]', variant === 'failed' && 'border-[#7A1E1E] bg-[#3D0F0F]'), children: _jsx("p", { className: twMerge('font-medium text-sm', variant === 'completed' && 'text-[#75E0A7]', variant === 'failed' && 'text-[#F87171]'), children: label }) }));
+    if (type === 'JOURNEY') {
+        return variant === 'completed' ? (_jsxs("div", { className: "flex items-center justify-between", children: [body, _jsx("div", { className: "w-fit rounded-lg border border-[#085D3A] bg-[#053321] px-2.5 py-1", children: _jsxs("p", { className: "font-medium text-[#75E0A7] text-sm", children: ["Final Bonus ", currencyFormatter.format(bonusAmount ?? 0)] }) })] })) : (body);
+    }
+    return body;
+};
+export default QuestBadge;

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

@@ -0,0 +1,4 @@
+declare const StageItemLocked: ({ index }: {
+    index: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default StageItemLocked;

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

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Lock01Icon } from '../../../../icons/Lock01Icon.js';
+const StageItemLocked = ({ index }) => {
+    return (_jsxs("div", { className: "mb-4 flex items-center justify-between rounded-xl bg-[#0D1217] p-3", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", index + 1] }), _jsx("div", { className: "flex items-center justify-center rounded-full border border-[#333741] bg-[#0D1217] p-1 text-[#161B26]", children: _jsx(Lock01Icon, { className: "size-3 stroke-2 font-medium text-[#667085]" }) })] }));
+};
+export default StageItemLocked;

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

@@ -0,0 +1,10 @@
+type Props = {
+    index: number;
+    stageLevel: number;
+    questCompleted: boolean;
+    progressPercentage: number;
+    writableBonus: number;
+    bonusAmount: number;
+};
+declare const StageItemUnlocked: ({ index, stageLevel, questCompleted, progressPercentage, writableBonus, bonusAmount, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default StageItemUnlocked;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Progress } from '../../../../ui/Progress/index.js';
+const StageItemUnlocked = ({ index, stageLevel, questCompleted, progressPercentage, writableBonus, bonusAmount, }) => {
+    const numberFormatter = useMemo(() => new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+        currency: 'PHP',
+        style: 'currency',
+    }), []);
+    const progressStyle = {
+        '--width': `${stageLevel > index + 1 ? 100 : progressPercentage.toFixed(0)}%`,
+    };
+    let badge = (_jsx("div", { className: "w-fit rounded-full border border-[#065986] bg-[#062C41] px-2 py-0.5", children: _jsx("p", { className: "font-medium text-[#7CD4FD] text-sm", children: "Ongoing" }) }));
+    if (questCompleted) {
+        badge = (_jsx("div", { className: "w-fit rounded-full border border-[#085D3A] bg-[#053321] px-2 py-0.5", children: _jsx("p", { className: "font-medium text-[#75E0A7] text-sm", children: "Completed" }) }));
+    }
+    else if (stageLevel > index + 1) {
+        badge = (_jsx("div", { className: "w-fit rounded-full border border-[#085D3A] bg-[#053321] px-2 py-0.5", children: _jsx("p", { className: "font-medium text-[#75E0A7] text-sm", children: "Completed" }) }));
+    }
+    return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl border-[#EAECF0] bg-[#0D1217] p-3 text-[#CECFD2]", children: [_jsxs("div", { className: "flex items-center justify-between space-x-2", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", index + 1] }), badge] }), _jsxs("div", { className: "flex justify-between pt-[11px] pb-2", children: [_jsxs("p", { className: "text-sm", children: ["Progress:", ' ', stageLevel > index + 1 ? 100 : progressPercentage.toFixed(0), "%"] }), _jsx("div", { className: "flex items-center justify-center rounded-md border border-[#333741] bg-[#0C111D] p-1 font-medium text-[#CECFD2] text-xs dark:border-[#333741] dark:bg-[#0C111D]", children: stageLevel > index + 1
+                            ? `+ ${numberFormatter.format(bonusAmount)} Bonus`
+                            : `+ ${numberFormatter.format(writableBonus)} Bonus` })] }), _jsx(Progress.Root, { max: 100, value: stageLevel > index + 1 ? 100 : parseInt(progressPercentage.toFixed(0)), className: "relative h-2 rounded-full bg-[#0C0E12] md:w-full", 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 }) })] }));
+};
+export default StageItemUnlocked;

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

@@ -0,0 +1,10 @@
+import Countdown from './Countdown';
+import DialogCheckin from './DialogCheckin';
+import DialogJourney from './DialogJourney';
+import DialogOnboarding from './DialogOnboarding';
+import DialogWagering from './DialogWagering';
+import ObjectiveItem from './ObjectiveItem';
+import QuestBadge from './QuestBadge';
+import StageItemLocked from './StageItemLocked';
+import StageItemUnlocked from './StageItemUnlocked';
+export { Countdown, DialogCheckin, DialogJourney, DialogOnboarding, DialogWagering, ObjectiveItem, QuestBadge, StageItemLocked, StageItemUnlocked, };

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

@@ -0,0 +1,10 @@
+import Countdown from './Countdown.js';
+import DialogCheckin from './DialogCheckin.js';
+import DialogJourney from './DialogJourney.js';
+import DialogOnboarding from './DialogOnboarding.js';
+import DialogWagering from './DialogWagering.js';
+import ObjectiveItem from './ObjectiveItem.js';
+import QuestBadge from './QuestBadge.js';
+import StageItemLocked from './StageItemLocked.js';
+import StageItemUnlocked from './StageItemUnlocked.js';
+export { Countdown, DialogCheckin, DialogJourney, DialogOnboarding, DialogWagering, ObjectiveItem, QuestBadge, StageItemLocked, StageItemUnlocked, };

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

@@ -1,10 +1,16 @@
 import { type CSSProperties } from 'react';
 export interface ClassNameEntries {
     root?: string;
+    title?: string;
+    timeBadgeRoot?: string;
+    timeBadgeIcon?: string;
+    timeBadgeLabel?: string;
     completedBadgeRoot?: string;
     completedBadgeLabel?: string;
     failedBadgeRoot?: string;
     failedBadgeLabel?: string;
+    finalBonusBadgeRoot?: string;
+    finalBonusBadgeLabel?: string;
     progressRoot?: string;
     progressTrack?: string;
     progressRange?: string;

package/dist/components/Quests/JourneyQuest.js

@@ -86,13 +86,16 @@ export function JourneyQuest(props) {
     }, [disclosure]);
     const localeInfo = useLocaleInfo();
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('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', classNames?.root), 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, className: {
+                                            timeBadgeRoot: classNames?.timeBadgeRoot,
+                                            timeBadgeIcon: classNames?.timeBadgeIcon,
+                                            timeBadgeLabel: classNames?.timeBadgeLabel,
                                             completedBadgeRoot: classNames?.completedBadgeRoot,
                                             completedBadgeLabel: classNames?.completedBadgeLabel,
                                             failedBadgeRoot: classNames?.failedBadgeRoot,
                                             failedBadgeLabel: classNames?.failedBadgeLabel,
-                                        } }), quest.status === 'COMPLETED' && (_jsx(Badge.Root, { colorScheme: "success", size: "lg", round: false, children: _jsxs(Badge.Label, { children: ["Final Bonus:", ' ', formatNumber(quest.bonus, {
+                                        } }), quest.status === 'COMPLETED' && (_jsx(Badge.Root, { colorScheme: "success", size: "lg", round: false, className: classNames?.finalBonusBadgeRoot, children: _jsxs(Badge.Label, { className: classNames?.finalBonusBadgeLabel, children: ["Final Bonus:", ' ', formatNumber(quest.bonus, {
                                                     currency: localeInfo.currency.code,
-                                                })] }) }))] }), _jsx("p", { className: "font-semibold text-xl", children: quest?.name || 'Journey Quest' }), _jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, className: twMerge('h-2 rounded-full bg-bg-primary', classNames?.progressRoot), value: progressValue, children: _jsx(Progress.Track, { className: classNames?.progressTrack, children: _jsx(Progress.Range, { className: classNames?.progressRange }) }) }), _jsxs("p", { className: twMerge('text-text-quarterary-brand text-xs', classNames?.progressLabel), children: [currentMilestone, "/", totalMilestones] })] }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: milestones.map((milestone, index) => (_jsx(QuestMilestone, { label: milestone.label, bonus: milestone.bonus, isCompleted: milestone.isCompleted, checkboxControlStyle: props.checkboxControlStyle, className: {
+                                                })] }) }))] }), _jsx("p", { className: twMerge('font-semibold text-xl', classNames?.title), children: quest?.name || 'Journey Quest' }), _jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, className: twMerge('h-2 rounded-full bg-bg-primary', classNames?.progressRoot), value: progressValue, children: _jsx(Progress.Track, { className: classNames?.progressTrack, children: _jsx(Progress.Range, { className: classNames?.progressRange }) }) }), _jsxs("p", { className: twMerge('text-text-quarterary-brand text-xs', classNames?.progressLabel), children: [currentMilestone, "/", totalMilestones] })] }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: milestones.map((milestone, index) => (_jsx(QuestMilestone, { label: milestone.label, bonus: milestone.bonus, isCompleted: milestone.isCompleted, checkboxControlStyle: props.checkboxControlStyle, className: {
                                         name: classNames?.checkboxName,
                                         bonus: classNames?.checkboxBonus,
                                     } }, index))) })] }), _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(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen, quest: quest, milestones: milestones, className: {

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

@@ -22,6 +22,7 @@ export interface GameProviderSettings {
     gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
     heading?: string | ReactNode;
 }
+type Variant = 'crazywin' | 'default';
 export interface QuestsProps {
     /** @default "Quests" */
     heading?: string | ReactNode;
@@ -35,5 +36,7 @@ export interface QuestsProps {
     gameProviderSettings?: GameProviderSettings;
     /** Custom URL template for game provider links. Use :slug and :id as placeholders */
     gameProviderViewPageUrl?: string;
+    variant?: Variant;
 }
 export declare function Quests__client(props: QuestsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isString } from 'lodash-es';
 import Image, {} from 'next/image';
-import { Suspense, useState, } from 'react';
+import { Suspense, useEffect, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
@@ -11,6 +11,10 @@ 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 CWDailyCheckInQuest from './Crazywin/CWDailyCheckInQuest.js';
+import CWJourneyQuest from './Crazywin/CWJourneyQuest.js';
+import CWOnboardingQuest from './Crazywin/CWOnboardingQuest.js';
+import CWWageringQuestNext from './Crazywin/CWWageringQuestNext.js';
 import { DailyCheckInQuest, } from './DailyCheckInQuest.js';
 import { JourneyQuest, } from './JourneyQuest.js';
 import { NoQuests } from './NoQuests.js';
@@ -26,11 +30,20 @@ export function Quests__client(props) {
     const isNextWageringBrandSite = typeof window !== 'undefined' &&
         NEXT_WAGERING_SITE_MATCHES.some((m) => window.location.href.includes(m));
     const useNextWagering = featureFlag.enabled || isNextWageringBrandSite;
+    const [variant, setVariant] = useState('default');
     const QUEST_COMPONENT_MAP = {
-        DAILY_CHECKIN: DailyCheckInQuest,
-        ONBOARDING: OnboardingQuest,
-        WAGERING: useNextWagering ? WageringQuestNext : WageringQuest,
-        JOURNEY: JourneyQuest,
+        crazywin: {
+            DAILY_CHECKIN: CWDailyCheckInQuest,
+            ONBOARDING: CWOnboardingQuest,
+            WAGERING: CWWageringQuestNext,
+            JOURNEY: CWJourneyQuest,
+        },
+        default: {
+            DAILY_CHECKIN: DailyCheckInQuest,
+            ONBOARDING: OnboardingQuest,
+            WAGERING: useNextWagering ? WageringQuestNext : WageringQuest,
+            JOURNEY: JourneyQuest,
+        },
     };
     const { className, style, heading } = props;
     const classNames = isString(className) ? { root: className } : className;
@@ -52,6 +65,16 @@ export function Quests__client(props) {
             }
             return false;
         });
+    useEffect(() => {
+        setVariant(() => {
+            switch (props.variant) {
+                case 'crazywin':
+                    return 'crazywin';
+                default:
+                    return 'default';
+            }
+        });
+    }, [props.variant]);
     if (questsQuery.isLoading) {
         return (_jsxs("div", { style: style, className: classNames?.root, children: [_jsx("h2", { className: "mb-3 font-semibold text-lg", children: heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
     }
@@ -61,11 +84,11 @@ 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.length > 0 ? (quests.map((quest) => {
-                    const Quest = QUEST_COMPONENT_MAP[quest.type];
+                    const Quest = QUEST_COMPONENT_MAP[variant][quest.type];
                     return (_jsx(QuestContext, { value: {
                             ...quest,
                             ...props.gameProviderSettings,
-                            verificationStatus: accountQuery.data?.verificationStatus ?? 'UNVERIFIED'
+                            verificationStatus: accountQuery.data?.verificationStatus ?? 'UNVERIFIED',
                         }, children: _jsx(Suspense, { children: _jsx(Quest, { className: quest.type === 'WAGERING'
                                     ? featureFlag.enabled
                                         ? classNames?.wageringQuestNext

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

@@ -5,6 +5,9 @@ interface RemainingTimeProps {
         completedBadgeLabel?: string;
         failedBadgeRoot?: string;
         failedBadgeLabel?: string;
+        timeBadgeRoot?: string;
+        timeBadgeIcon?: string;
+        timeBadgeLabel?: string;
     };
 }
 export declare function RemainingTime({ endOfDay: useEndOfDay, className, }: RemainingTimeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/RemainingTime.js

@@ -16,5 +16,5 @@ export function RemainingTime({ endOfDay: useEndOfDay = false, className, }) {
     if (quest.status === 'FAILED' || remainingTime.expired) {
         return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, className: className?.failedBadgeRoot, children: _jsx(Badge.Label, { className: className?.failedBadgeLabel, children: "Failed" }) }));
     }
-    return (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.toString() })] }));
+    return (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, className: className?.timeBadgeRoot, children: [_jsx(Badge.Icon, { className: className?.timeBadgeIcon, children: _jsx(ClockStopWatchIcon, {}) }), _jsx(Badge.Label, { className: className?.timeBadgeLabel, children: remainingTime.toString() })] }));
 }