@opexa/portal-components 0.0.957 → 0.0.958

package/dist/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/components/Quests/DailyCheckInQuest.d.ts

@@ -0,0 +1,15 @@
+export interface ClassNameEntries {
+    root?: string;
+    rewardContainer?: string;
+    progressBarContainer?: string;
+    progressBar?: string;
+    calendarIconContainer?: string;
+    calendarIcon?: string;
+    calendarDayText?: string;
+    checkInButton?: string;
+}
+export type UncompletedIconType = 'x' | 'minus';
+export declare function DailyCheckInQuest(props: {
+    className?: string | ClassNameEntries;
+    uncompletedIcon?: UncompletedIconType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Quests/DailyCheckInQuest.js

@@ -0,0 +1,103 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { addDays, isEqual, startOfDay } from 'date-fns';
+import { isString } from 'lodash-es';
+import { twMerge } from 'tailwind-merge';
+import { useCheckInDailyCheckInQuestMutation } from '../../client/hooks/useCheckInDailyCheckInQuestMutation.js';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+import { MinusIcon } from '../../icons/MinusIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { Prose } from '../../ui/Prose/index.js';
+import { dataAttr } from '../../utils/dataAttr.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey } from '../../utils/queryKeys.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function DailyCheckInQuest(props) {
+    const { className, uncompletedIcon = 'x' } = props;
+    const classNames = isString(className) ? { root: className } : className;
+    const quest = useQuestContext();
+    const disclosure = useDisclosure();
+    const localeInfo = useLocaleInfo();
+    const { name, description, status, lastCheckInDate, progressPercentage, checkInStreak, thirdDayBonusAmount, sixthDayBonusAmount, seventhDayBonusAmount, endDateTime, id, } = quest;
+    const today = startOfDay(new Date());
+    const hasCheckedInToday = lastCheckInDate
+        ? isEqual(today, startOfDay(new Date(lastCheckInDate)))
+        : false;
+    const checkedInRewards = {
+        3: parseDecimal(thirdDayBonusAmount, 0),
+        6: parseDecimal(sixthDayBonusAmount, 0),
+        7: parseDecimal(seventhDayBonusAmount, 0),
+    };
+    const dailyCheckedInData = Array.from({ length: 7 }, (_, i) => {
+        const day = i + 1;
+        return {
+            day,
+            reward: checkedInRewards[day] ? checkedInRewards[day] : null,
+        };
+    });
+    const checkInDailyQuestMutation = useCheckInDailyCheckInQuestMutation({
+        onSuccess() {
+            toaster.success({
+                title: 'Check-in successful 🎉',
+                description: "You've successfully checked in for today! Keep it up to maintain your streak!",
+            });
+        },
+        onError(e) {
+            toaster.error({
+                title: 'Check-in successful 🎉',
+                description: e.message ?? 'Check-In Failed',
+            });
+        },
+    });
+    const remainingTime = useRemainingTime(endDateTime);
+    const renderUncompletedIcon = () => {
+        return uncompletedIcon === 'minus' ? (_jsx(MinusIcon, { className: "size-2 text-text-secondary-700" })) : (_jsx(XIcon, { className: "size-4 text-text-secondary-700" }));
+    };
+    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-start justify-between", children: [_jsx(RemainingTime, {}), _jsx("button", { type: "button", className: "flex size-9 cursor-pointer items-center justify-center rounded-md border border-border-secondary bg-bg-primary", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", children: _jsx(InfoCircleIcon, { className: "size-5 text-text-disabled" }) })] }), _jsx("p", { className: "font-semibold text-xl", children: name }), _jsx(Prose, { className: "text-wrap font-normal text-sm text-text-secondary-700", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => {
+                                    const done = item.day <= (checkInStreak ?? 0);
+                                    const reward = item.reward ? (`+${formatNumber(item.reward, {
+                                        currency: localeInfo.currency.code,
+                                        minDecimalPlaces: 0,
+                                        maxDecimalPlaces: 0,
+                                    })}`) : done ? (_jsx(CheckIcon, { className: "size-4" })) : (renderUncompletedIcon());
+                                    return (_jsx("div", { className: twMerge('flex items-center justify-center', done ? 'text-brand-400' : 'text-text-secondary-700', classNames?.rewardContainer), children: _jsx("p", { children: status === 'FAILED' && !done ? (_jsx(XIcon, { className: "size-4 text-text-secondary-700" })) : (reward) }) }, item.day));
+                                }) }), _jsx("div", { className: twMerge('h-2 w-full overflow-hidden rounded-full bg-bg-primary', classNames?.progressBarContainer), children: _jsx("div", { className: twMerge('h-full rounded-full bg-utility-brand-600 transition-all duration-300', classNames?.progressBar), style: { width: `${progressPercentage}%` } }) }), _jsx("div", { className: "grid grid-cols-7 place-items-center", children: dailyCheckedInData.map((item) => (_jsxs("div", { className: twMerge('group relative size-fit text-text-secondary-700 ui-active:text-brand-400', classNames?.calendarIconContainer), "data-active": dataAttr(item.day <= (checkInStreak ?? 0)), 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: item.day })] }, item.day))) })] }), _jsx(Button, { onClick: () => checkInDailyQuestMutation.mutate(id), className: twMerge('disabled:bg-bg-primary disabled:text-text-disabled', classNames?.checkInButton), disabled: status === 'COMPLETED' ||
+                            status === 'FAILED' ||
+                            remainingTime.expired ||
+                            hasCheckedInToday ||
+                            checkInDailyQuestMutation.isPending, children: hasCheckedInToday && status === 'IN_PROGRESS' ? (_jsx(RemainingTimeTilTomorrow, {})) : status === 'COMPLETED' ? (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(CheckIcon, { className: "size-5" }), _jsx("p", { children: "Bonus added to your balance" })] })) : (_jsx("span", { children: "Check-In" })) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen })] }));
+}
+function CalendarIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "18", viewBox: "0 0 17 18", fill: "none", ...props, children: _jsx("path", { d: "M11.5477 0.666687V4.00002M4.88102 0.666687V4.00002M4.71436 17.3334H11.7144C13.1145 17.3334 13.8146 17.3334 14.3493 17.0609C14.8197 16.8212 15.2022 16.4387 15.4419 15.9683C15.7144 15.4336 15.7144 14.7335 15.7144 13.3334V6.33335C15.7144 4.93322 15.7144 4.23316 15.4419 3.69838C15.2022 3.22797 14.8197 2.84552 14.3493 2.60584C13.8146 2.33335 13.1145 2.33335 11.7144 2.33335H4.71436C3.31422 2.33335 2.61416 2.33335 2.07938 2.60584C1.60897 2.84552 1.22652 3.22797 0.986839 3.69838C0.714355 4.23316 0.714355 4.93322 0.714355 6.33335V13.3334C0.714355 14.7335 0.714355 15.4336 0.986839 15.9683C1.22652 16.4387 1.60897 16.8212 2.07938 17.0609C2.61416 17.3334 3.31422 17.3334 4.71436 17.3334Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function RemainingTimeTilTomorrow() {
+    const queryClient = getQueryClient();
+    const remainingTime = useRemainingTime(startOfDay(addDays(new Date(), 1)), {
+        onExpired() {
+            queryClient.invalidateQueries({
+                queryKey: getAvailableQuestsQueryKey(),
+            });
+        },
+    });
+    return (_jsxs("div", { className: "flex items-center space-x-0.5", children: [_jsx(CheckIcon, { className: "size-5" }), _jsxs("p", { children: ["Available in ", remainingTime.toString()] })] }));
+}
+function Rules(props) {
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto max-w-[21.438rem] overflow-y-auto rounded-xl px-4 pt-5 pb-0", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: "Daily Check-In Rules" }), _jsxs("ol", { className: "group list-disc text-wrap pl-4 font-normal text-sm text-text-tertiary-600", children: [_jsx("li", { children: "Earn rewards just for checking in each day!" }), _jsx("li", { children: "Stay consistent to unlock special rewards on the 3rd, 5th, and 7th day." }), _jsx("li", { children: "Missing a day will reset your streak, starting again from Day 1." }), _jsx("li", { children: "Each check-in unlocks the next one on the following day." }), _jsx("li", { children: "Successfully check in for 7 consecutive days to complete the quest and reset the cycle." })] })] }), _jsx("div", { className: "pt-6 pb-4", children: _jsx(Button, { onClick: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
+}

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

@@ -0,0 +1,33 @@
+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;
+    progressLabel?: string;
+    checkboxName?: string;
+    checkboxBonus?: string;
+    dialogRoot?: string;
+    dialogTitle?: string;
+    dialogDescription?: string;
+    dialogMilestone?: string;
+    dialogMilestoneName?: string;
+    dialogMilestoneDescription?: string;
+    dialogCompleteBadge?: string;
+    dialogUncompleteButton?: string;
+}
+export interface JourneyQuestProps {
+    checkboxControlStyle?: CSSProperties;
+    className?: string | ClassNameEntries;
+}
+export declare function JourneyQuest(props: JourneyQuestProps): import("react/jsx-runtime").JSX.Element;