@opexa/portal-components 0.0.957 → 0.0.959

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

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { GAME_PROVIDER_DATA } from '../../constants/index.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
+import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { Prose } from '../../ui/Prose/index.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function WageringQuest(props) {
+    const { className, customComplete, showTurnoverDecimals = true } = props;
+    const classNames = isString(className) ? { root: className } : className;
+    const quest = useQuestContext();
+    const disclosure = useDisclosure();
+    const localeInfo = useLocaleInfo();
+    const { progressPercentage, turnover, targetTurnover, name, description, endDateTime, bonus, status, } = quest;
+    const remainingTime = useRemainingTime(endDateTime);
+    const formatTurnover = (value) => {
+        if (showTurnoverDecimals) {
+            return value;
+        }
+        // Remove decimals and format as whole number
+        const numericValue = parseFloat(value);
+        return Math.floor(numericValue).toString();
+    };
+    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: [_jsxs("div", { className: "group flex items-center justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Progress ", parseDecimal(progressPercentage, 0).toFixed(0), "%"] }), _jsxs("p", { children: [formatTurnover(turnover), _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " ", localeInfo.currency.code] })] })] }), _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: "flex h-full items-end", children: _jsx("div", { className: twMerge('w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center', classNames?.bonusContainer), children: status === 'COMPLETED' && customComplete ? (_jsx("div", { className: twMerge(classNames?.bonusText), children: customComplete })) : (_jsxs("p", { className: twMerge((remainingTime.expired ||
+                                    status === 'COMPLETED' ||
+                                    status === 'FAILED') &&
+                                    'opacity-50 grayscale', classNames?.bonusText), children: ["Complete to get", ' ', _jsxs("span", { className: twMerge('text-brand-400', classNames?.bonusAmount), children: ["\u20B1", bonus] }), ' ', "bonus!"] })) }) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen, gameProviderCarousel: props.gameProviderCarousel, gameProviders: Object.entries(quest.turnoverRequirementContributionPercentagePerGameProvider ?? [])
+                    .filter(([_, value]) => +value > 0)
+                    .map(([key]) => key) })] }));
+}
+function Rules(props) {
+    const quest = useQuestContext();
+    const featureFlag = useFeatureFlag();
+    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: quest.name }), _jsxs("ol", { className: "group list-disc text-wrap pl-4 font-normal text-sm text-text-tertiary-600", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), ((!featureFlag.enabled &&
+                                typeof window !== 'undefined' &&
+                                (window.location.href.includes('blucky') ||
+                                    window.location.href.includes('powerplay') ||
+                                    window.location.href.includes('inplay'))) ||
+                                featureFlag.enabled) && (_jsx(GameProvidersCarousel, { gameProviders: props.gameProviders ?? [] })), _jsx("div", { className: "pt-6 pb-4", children: _jsx(Button, { onClick: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
+}
+export function GameProvidersCarousel({ ...props }) {
+    const context = useQuestContext();
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 2,
+        breakpoints: {
+            '(min-width: 1024px)': {
+                align: 'start',
+                slidesToScroll: 2,
+            },
+        },
+    });
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const onNextButtonClick = useCallback(async () => {
+        emblaApi?.scrollNext();
+    }, [emblaApi]);
+    const onSelect = useCallback((emblaApi) => {
+        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
+        setNextBtnDisabled(!emblaApi?.canScrollNext());
+    }, []);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
+    const classNames = isString(context.className)
+        ? { root: context.className }
+        : (context.className ?? {});
+    return (_jsxs("div", { className: twMerge(classNames.root, gameProviders.length === 0 && 'hidden'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: context.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsx("div", { className: "flex items-center justify-center gap-xl", children: _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] }) })] }), _jsx("div", { ref: emblaRef, className: twMerge('relative mt-lg overflow-hidden', classNames.thumbnailRootContainer), children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md', classNames.thumbnailContainer), children: gameProviders.map((provider) => {
+                        const url = context.settings
+                            ? (context.settings
+                                .find(({ providers }) => providers.includes(provider.id))
+                                ?.url.replace(':slug', provider.slug)
+                                .replace(':id', provider?.id) ??
+                                `/providers/${provider.slug}`)
+                            : `/providers/${provider.slug}`;
+                        return (_jsx(Link, { href: url, className: twMerge('flex h-full w-full items-center overflow-hidden rounded-md bg-brand-800 lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: context.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id));
+                    }) }) })] }));
+}

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

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+import type { GameProvider } from '../../types';
+export interface StageItemUnlockedClassNameEntries {
+    root?: string;
+    header?: string;
+    stageTitle?: string;
+    statusBadgeCompleted?: string;
+    statusBadgeOngoing?: string;
+    body?: string;
+    progressText?: string;
+    bonusBadge?: string;
+    progressBarContainer?: string;
+    progressBar?: string;
+}
+export interface StageItemLockedClassNameEntries {
+    root?: string;
+    stageTitle?: string;
+    lockIconContainer?: string;
+    lockIcon?: string;
+}
+export interface ClassNameEntries {
+    root?: string;
+    title?: string;
+    description?: string;
+    timeBadgeRoot?: string;
+    timeBadgeIcon?: string;
+    timeBadgeLabel?: string;
+    completedBadgeRoot?: string;
+    completedBadgeLabel?: string;
+    failedBadgeRoot?: string;
+    failedBadgeLabel?: string;
+    progressRoot?: string;
+    progressTrack?: string;
+    progressRange?: string;
+    progressLabel?: string;
+    stageBadgeRoot?: string;
+    stageBadgeIcon?: string;
+    stageBadgeLabel?: string;
+    bonusBadgeRoot?: string;
+    bonusBadgeLabel?: string;
+    stageProgress?: string;
+    stageItemUnlocked?: StageItemUnlockedClassNameEntries;
+    stageItemLocked?: StageItemLockedClassNameEntries;
+}
+export declare function WageringQuestNext(props: {
+    className?: string | ClassNameEntries;
+    customComplete?: ReactNode;
+    showTurnoverDecimals?: boolean;
+    gameProviderCarousel?: ReactNode;
+    gameProviderViewPageUrl?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface WageringClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailImage?: string;
+    thumbnailContainer?: string;
+    thumbnailRootContainer?: string;
+}
+export interface GameProvidersCarouselProps {
+    gameProviders: GameProvider[];
+    gameProviderViewPageUrl?: string;
+}
+export declare function GameProvidersCarousel({ ...props }: GameProvidersCarouselProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,144 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Progress } from '@ark-ui/react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { GAME_PROVIDER_DATA } from '../../constants/index.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
+import { Flag05Icon } from '../../icons/Flag05Icon.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 { Prose } from '../../ui/Prose/index.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function WageringQuestNext(props) {
+    const { className, showTurnoverDecimals = true } = props;
+    const classNames = isString(className) ? { root: className } : className;
+    const quest = useQuestContext();
+    const disclosure = useDisclosure();
+    const localeInfo = useLocaleInfo();
+    const { progressPercentage, turnover, targetTurnover, name, description, bonus, status, } = quest;
+    const currentStage = useMemo(() => {
+        return quest.stage === null ||
+            quest.stage === undefined ||
+            quest.stage === 0
+            ? (quest?.stage ?? 0) + 1
+            : quest.stage;
+    }, [quest.stage]);
+    const formatTurnover = (value) => {
+        if (showTurnoverDecimals) {
+            return value;
+        }
+        const numericValue = parseFloat(value);
+        return Math.floor(numericValue).toString();
+    };
+    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 gap-2", children: [_jsxs(Badge.Root, { className: twMerge('flex w-fit items-center gap-1 rounded-md border border-[#9E165F] bg-[#4E0D30] px-2 py-1', classNames?.stageBadgeRoot), children: [_jsx(Badge.Icon, { className: twMerge('size-4 text-[#EE46BC]', classNames?.stageBadgeIcon), children: _jsx(Flag05Icon, {}) }), _jsxs(Badge.Label, { className: twMerge('font-medium text-[#FAA7E0] text-sm', classNames?.stageBadgeLabel), children: ["Stage ", currentStage] })] }), _jsx(RemainingTime, { className: {
+                                            timeBadgeRoot: classNames?.timeBadgeRoot,
+                                            timeBadgeIcon: classNames?.timeBadgeIcon,
+                                            timeBadgeLabel: classNames?.timeBadgeLabel,
+                                            completedBadgeRoot: classNames?.completedBadgeRoot,
+                                            completedBadgeLabel: classNames?.completedBadgeLabel,
+                                            failedBadgeRoot: classNames?.failedBadgeRoot,
+                                            failedBadgeLabel: classNames?.failedBadgeLabel,
+                                        } })] }), _jsx("p", { className: twMerge('font-semibold text-xl', classNames?.title), children: name }), _jsx(Prose, { className: twMerge('text-wrap font-normal text-sm text-text-secondary-700', classNames?.description), dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: twMerge('group flex items-center justify-between text-text-primary-brand', classNames?.progressLabel), children: [_jsxs("p", { children: ["Progress ", parseDecimal(progressPercentage, 0).toFixed(0), "%"] }), _jsxs("p", { children: [formatTurnover(turnover), _jsxs("span", { children: ["/", targetTurnover, " ", localeInfo.currency.code] })] })] }), _jsx(Progress.Root, { max: 100, className: twMerge('h-2 rounded-full bg-bg-primary', classNames?.progressRoot), value: Number(progressPercentage), children: _jsx(Progress.Track, { className: classNames?.progressTrack, children: _jsx(Progress.Range, { className: classNames?.progressRange }) }) }), _jsxs("div", { className: "group flex items-center justify-between text-text-primary-brand", children: [_jsxs("p", { className: classNames?.stageProgress, children: ["Stage ", currentStage, " of ", quest?.program.stages?.length] }), _jsx(Badge.Root, { className: twMerge('rounded-[6px] border border-utility-brand-200 bg-utility-brand-50 px-1.5 py-0.5', classNames?.bonusBadgeRoot), children: _jsxs(Badge.Label, { className: twMerge('font-medium text-utility-brand-700 text-xs leading-tight', classNames?.bonusBadgeLabel), children: ["+", '  ', formatNumber(bonus, {
+                                                    currency: localeInfo.currency.code,
+                                                }), '  ', "Bonus"] }) })] })] }), status === 'IN_PROGRESS' && (_jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: () => disclosure.setOpen(true), "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, gameProviderCarousel: props.gameProviderCarousel, gameProviders: Object.entries(quest.turnoverRequirementContributionPercentagePerGameProvider ?? [])
+                    .filter(([_, value]) => +value > 0)
+                    .map(([key]) => key), className: classNames, gameProviderViewPageUrl: props.gameProviderViewPageUrl })] }));
+}
+function Rules(props) {
+    const quest = useQuestContext();
+    const featureFlag = useFeatureFlag();
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    const currentStage = useMemo(() => {
+        return quest.stage === null ||
+            quest.stage === undefined ||
+            quest.stage === 0
+            ? (quest?.stage ?? 0) + 1
+            : quest.stage;
+    }, [quest.stage]);
+    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 flex max-h-[80vh] min-h-auto max-w-[400px] flex-col rounded-xl px-4 pt-5 pb-0", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-shrink-0 flex-col space-y-5", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: quest.name }), _jsx("p", { className: "mb-4 font-normal text-sm text-text-tertiary-600", children: "Play and roll your way to rewards! Ready for a challenge? Complete them all and get amazing rewards!" })] }), _jsx("div", { className: "flex-1 overflow-y-auto md:scrollbar:w-2 md:scrollbar-thumb:rounded-full md:scrollbar-thumb:bg-bg-quaternary md:scrollbar-track:bg-transparent", children: (quest?.program.stages ?? []).map((stage, index) => currentStage >= index + 1 ? (_jsx(StageItemUnlocked, { stageDetails: stage, stageLevel: currentStage, index: index, writableBonus: quest.bonus, questCompleted: quest.status === 'COMPLETED', className: props.className?.stageItemUnlocked }, index)) : (_jsx(StageItemLocked, { index: index, className: props.className?.stageItemLocked }, index))) }), _jsxs("div", { className: "flex-shrink-0", children: [((!featureFlag.enabled &&
+                                        typeof window !== 'undefined' &&
+                                        (window.location.href.includes('blucky') ||
+                                            window.location.href.includes('powerplay') ||
+                                            window.location.href.includes('inplay'))) ||
+                                        featureFlag.enabled) && (_jsx(GameProvidersCarousel, { gameProviders: props.gameProviders ?? [], gameProviderViewPageUrl: props.gameProviderViewPageUrl })), _jsx("div", { className: "pt-6 pb-4", children: _jsx(Button, { onClick: () => setOpen(false), children: "Close" }) })] })] }) })] }) }));
+}
+export function GameProvidersCarousel({ ...props }) {
+    const context = useQuestContext();
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 2,
+    });
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const onNextButtonClick = useCallback(async () => {
+        emblaApi?.scrollNext();
+    }, [emblaApi]);
+    const onSelect = useCallback((emblaApi) => {
+        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
+        setNextBtnDisabled(!emblaApi?.canScrollNext());
+    }, []);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    const gameProviders = props.gameProviders
+        .filter((provider) => Array.isArray(context.gameProviderLists)
+        ? context.gameProviderLists.includes(provider)
+        : true)
+        .map((provider) => GAME_PROVIDER_DATA[provider])
+        .filter(Boolean);
+    const classNames = isString(context.className)
+        ? { root: context.className }
+        : (context.className ?? {});
+    return (_jsxs("div", { className: twMerge(classNames.root, gameProviders.length === 0 && 'hidden'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: context.heading ?? 'Game Providers' }), _jsx("div", { className: "grow" }), _jsx("div", { className: "flex items-center justify-center gap-xl", children: _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] }) })] }), _jsx("div", { ref: emblaRef, className: twMerge('relative mt-lg overflow-hidden', classNames.thumbnailRootContainer), children: _jsx("div", { className: twMerge('flex gap-1.5', classNames.thumbnailContainer), children: gameProviders.map((provider) => {
+                        const url = props.gameProviderViewPageUrl
+                            ? props.gameProviderViewPageUrl
+                                .replace(':slug', provider.slug)
+                                .replace(':id', provider.id)
+                            : context.settings
+                                ? (context.settings
+                                    .find(({ providers }) => providers.includes(provider.id))
+                                    ?.url.replace(':slug', provider.slug)
+                                    .replace(':id', provider?.id) ??
+                                    `/providers/${provider.slug}`)
+                                : `/providers/${provider.slug}`;
+                        return (_jsx(Link, { href: url, className: twMerge('flex h-16 w-[110px] flex-shrink-0 items-center overflow-hidden rounded-md bg-brand-800', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: context.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full object-contain', classNames.thumbnailImage) }) }, provider.id));
+                    }) }) })] }));
+}
+function StageItemUnlocked({ stageLevel, stageDetails, index, writableBonus, questCompleted, className, }) {
+    const quest = useQuestContext();
+    const isCompleted = questCompleted || stageLevel > index + 1;
+    const progress = stageLevel > index + 1
+        ? 100
+        : Math.round(Number(quest.progressPercentage ?? 0));
+    return (_jsxs("div", { className: twMerge('mb-4 flex flex-col justify-between rounded-xl bg-bg-tertiary p-3', className?.root), children: [_jsxs("div", { className: twMerge('flex items-center justify-between space-x-2', className?.header), children: [_jsxs("p", { className: twMerge('font-medium', className?.stageTitle), children: ["Stage ", index + 1] }), isCompleted ? (_jsx("div", { className: twMerge('w-fit rounded-full border border-[#085D3A] bg-[#053321] px-2 py-0.5 font-medium text-[#75E0A7] text-sm', className?.statusBadgeCompleted), children: "Completed" })) : (_jsx("div", { className: twMerge('w-fit rounded-full border border-[#065986] bg-[#062C41] px-2 py-0.5 font-medium text-[#7CD4FD] text-sm', className?.statusBadgeOngoing), children: "Ongoing" }))] }), _jsxs("div", { className: twMerge('flex justify-between pt-[11px] pb-2', className?.body), children: [_jsxs("p", { className: twMerge('text-sm', className?.progressText), children: ["Progress: ", progress, "%"] }), _jsx("div", { className: twMerge('rounded-[6px] border border-utility-brand-200 bg-utility-brand-50 px-1.5 py-0.5 font-medium text-utility-brand-700 text-xs leading-tight', className?.bonusBadge), children: stageLevel > index + 1
+                            ? `+ ${stageDetails.bonusAmount} Bonus`
+                            : `+ ${writableBonus} Bonus` })] }), _jsx("div", { className: twMerge('h-2 w-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarContainer), children: _jsx("div", { className: twMerge('h-full rounded-full bg-utility-brand-600 transition-all duration-300', className?.progressBar), style: { width: `${progress}%` } }) })] }));
+}
+function StageItemLocked({ index, className, }) {
+    return (_jsxs("div", { className: twMerge('mb-4 flex items-center justify-between rounded-xl bg-bg-tertiary p-3', className?.root), children: [_jsxs("p", { className: twMerge('font-medium', className?.stageTitle), children: ["Stage ", index + 1] }), _jsx("div", { className: twMerge('flex size-6 items-center justify-center rounded-full border border-utility-brand-200 bg-utility-brand-50', className?.lockIconContainer), children: _jsx(Lock01Icon, { className: twMerge('size-3 stroke-2 font-medium text-utility-brand-500', className?.lockIcon) }) })] }));
+}

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

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

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

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

package/dist/lib/components/RegisterBiometrics/RegisterBiometrics.d.ts

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

package/dist/lib/components/RegisterBiometrics/RegisterBiometrics.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
+import { BiometricAuthError } from 'capacitor-native-biometric';
+import { useShallow } from 'zustand/shallow';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { getSession } from '../../client/services/getSession.js';
+import { deleteBiometricCredentials, getBiometricInfo, performBiometricVerification, saveBiometricCredentials, } from '../../client/utils/biometric.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { createSingleUseToken } from '../../services/auth.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getSessionQueryKey } from '../../utils/queryKeys.js';
+export function RegisterBiometrics() {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const registerBiometricStore = useGlobalStore(useShallow((ctx) => ctx.registerBiometrics));
+    const responsibleGamingReminder = useGlobalStore(useShallow((ctx) => ctx.responsibleGamingReminder));
+    const kycModals = useGlobalStore(useShallow((ctx) => {
+        return {
+            kyc: ctx.kyc,
+            kycReminder: ctx.kycReminder,
+        };
+    }));
+    return (_jsx(Dialog.Root, { open: registerBiometricStore.open &&
+            Capacitor.isNativePlatform() &&
+            !responsibleGamingReminder.open &&
+            !kycModals.kyc.open &&
+            !kycModals.kycReminder.open, children: _jsx(Portal, { children: _jsx(Dialog.Positioner, { className: "flex items-center", children: _jsxs(Dialog.Content, { className: "flex w-full min-w-[320px] max-w-md flex-col gap-4 rounded-lg border-border-brand bg-bg-secondary p-6 shadow-lg", children: [_jsx(Dialog.CloseTrigger, { onClick: () => {
+                                registerBiometricStore.setOpen(false);
+                            }, children: _jsx(XIcon, {}) }), _jsx("h2", { className: "mt-4 w-full text-center font-bold text-2xl text-brand-500", children: "Register Biometric" }), _jsx("p", { className: "mt-2 grow text-center text-[#999]", children: "Would you like to setup biometric authentication?" }), _jsxs("div", { className: "flex gap-4 p-2", children: [_jsx(Button, { onClick: async () => {
+                                        if (!account)
+                                            return;
+                                        const ok = await performBiometricVerification({
+                                            reason: 'Setup biometric authentication',
+                                            title: 'Biometric Setup',
+                                            fallbackTitle: 'Biometric Setup',
+                                            negativeButtonText: 'Cancel',
+                                        });
+                                        if (!ok) {
+                                            const info = await getBiometricInfo();
+                                            if (info.errorCode === BiometricAuthError.APP_CANCEL ||
+                                                info.errorCode === BiometricAuthError.USER_CANCEL ||
+                                                info.errorCode === BiometricAuthError.SYSTEM_CANCEL ||
+                                                info.errorCode === undefined ||
+                                                info.errorCode === null) {
+                                                return;
+                                            }
+                                            else {
+                                                registerBiometricStore.setOpen(false);
+                                                toaster.error({ description: 'Biometric setup failed' });
+                                                return;
+                                            }
+                                        }
+                                        const session = await getQueryClient().fetchQuery({
+                                            queryKey: getSessionQueryKey(),
+                                            queryFn: async () => getSession(),
+                                        });
+                                        const res = await createSingleUseToken({
+                                            headers: {
+                                                Authorization: `Bearer ${session.token}`,
+                                            },
+                                        });
+                                        if (!res.token) {
+                                            toaster.error({ description: 'Biometric setup failed' });
+                                            return;
+                                        }
+                                        await deleteBiometricCredentials();
+                                        try {
+                                            await saveBiometricCredentials({
+                                                username: account.name,
+                                                password: res.token,
+                                            });
+                                        }
+                                        catch {
+                                            toaster.error({ description: 'Biometric setup failed' });
+                                            registerBiometricStore.setOpen(false);
+                                            return;
+                                        }
+                                        toaster.success({
+                                            description: 'Biometric setup successful',
+                                        });
+                                        registerBiometricStore.setOpen(false);
+                                    }, className: "text-sm", children: "Sure" }), _jsx(Button, { className: "border-border-dark text-sm text-text-primary-900", variant: "outline", onClick: () => {
+                                        registerBiometricStore.setOpen(false);
+                                    }, children: "Not now" })] })] }) }) }) }));
+}

package/dist/lib/components/RegisterBiometrics/index.d.ts

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

package/dist/lib/components/RegisterBiometrics/index.js

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

package/dist/lib/components/ResponsibleGaming/ResponsibleGaming.d.ts

@@ -0,0 +1,5 @@
+import type { ResponsibleGamingProps as LazyProps } from './ResponsibleGaming.lazy';
+export type ResponsibleGamingProps = LazyProps & {
+    version?: '1' | '2' | '3';
+};
+export declare function ResponsibleGaming({ version, ...props }: ResponsibleGamingProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/lib/components/ResponsibleGaming/ResponsibleGaming.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const V1 = dynamic(() => import('./ResponsibleGaming.lazy.js').then((m) => m.ResponsibleGaming), {
+    ssr: false,
+    loading: () => null,
+});
+const V2 = dynamic(() => import('./ResponsibleGamingV2.lazy.js').then((m) => m.ResponsibleGamingV2), {
+    ssr: false,
+    loading: () => null,
+});
+const V3 = dynamic(() => import('./ResponsibleGamingV3.lazy.js').then((m) => m.ResponsibleGamingV3), {
+    ssr: false,
+    loading: () => null,
+});
+export function ResponsibleGaming({ version = '1', ...props }) {
+    const touched = useGlobalStore(useShallow((ctx) => ctx.responsibleGaming['~touched']));
+    if (!touched) {
+        return null;
+    }
+    if (version === '2') {
+        return _jsx(V2, { ...props });
+    }
+    if (version === '3') {
+        return _jsx(V3, { ...props });
+    }
+    return _jsx(V1, { ...props });
+}

package/dist/lib/components/ResponsibleGaming/ResponsibleGaming.lazy.d.ts

@@ -0,0 +1,8 @@
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+export interface ResponsibleGamingProps {
+    logo: ImageProps['src'];
+    content: string | ReactNode;
+    responsibleGamingLogo?: ImageProps['src'];
+}
+export declare function ResponsibleGaming(props: ResponsibleGamingProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/ResponsibleGaming/ResponsibleGaming.lazy.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function ResponsibleGaming(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        signUp: ctx.signUp,
+        disclaimer: ctx.disclaimer,
+        responsibleGaming: ctx.responsibleGaming,
+    })));
+    return (_jsx(Dialog.Root, { open: globalStore.responsibleGaming.open, onOpenChange: (details) => {
+            globalStore.responsibleGaming.setOpen(details.open);
+            if (!details.open)
+                globalStore.responsibleGaming.setAccepted(true);
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
+            if (globalStore.responsibleGaming.next === 'SIGN_IN') {
+                globalStore.signIn.setOpen(true);
+            }
+            if (globalStore.responsibleGaming.next === 'SIGN_UP') {
+                globalStore.signUp.setOpen(true);
+            }
+            if (globalStore.responsibleGaming.next === 'DISCLAIMER') {
+                globalStore.disclaimer.setOpen(true);
+            }
+            globalStore.responsibleGaming.setNext(null);
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:max-h-[80vh] lg:w-[400px]', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[7.5rem]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center font-semibold text-brand-400 text-lg", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "mt-xs text-sm leading-2xl", children: props.content }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[5.5rem] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[3.875rem] w-auto shrink-0", draggable: false })] })] }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { type: "button", className: "mt-3 py-2.5", onClick: () => {
+                                        api.setOpen(false);
+                                    }, children: "I Agree" })) })] }) })] }) }));
+}

package/dist/lib/components/ResponsibleGaming/ResponsibleGamingV2.lazy.d.ts

@@ -0,0 +1,8 @@
+import { type ImageProps } from 'next/image';
+import { type ReactNode } from 'react';
+export interface ResponsibleGamingV2Props {
+    logo: ImageProps['src'];
+    content: string | ReactNode;
+    responsibleGamingLogo?: ImageProps['src'];
+}
+export declare function ResponsibleGamingV2(props: ResponsibleGamingV2Props): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/ResponsibleGaming/ResponsibleGamingV2.lazy.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import { useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { ScrollToBottomIcon } from '../../icons/ScrollToBottomIcon.js';
+import { ScrollToTopIcon } from '../../icons/ScrollToTopIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function ResponsibleGamingV2(props) {
+    const [hasReachedBottom, setHasReachedBottom] = useState(false);
+    const [isAtBottom, setIsAtBottom] = useState(false);
+    const scrollableContentRef = useRef(null);
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        signUp: ctx.signUp,
+        disclaimer: ctx.disclaimer,
+        responsibleGaming: ctx.responsibleGaming,
+    })));
+    useEffect(() => {
+        if (scrollableContentRef.current) {
+            const { scrollHeight, clientHeight } = scrollableContentRef.current;
+            const atBottom = scrollHeight <= clientHeight;
+            setIsAtBottom(atBottom);
+            if (atBottom) {
+                setHasReachedBottom(true);
+            }
+        }
+    }, []);
+    return (_jsx(Dialog.Root, { open: globalStore.responsibleGaming.open, onOpenChange: (details) => {
+            globalStore.responsibleGaming.setOpen(details.open);
+            if (!details.open)
+                globalStore.responsibleGaming.setAccepted(true);
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
+            if (globalStore.responsibleGaming.next === 'SIGN_IN') {
+                globalStore.signIn.setOpen(true);
+            }
+            if (globalStore.responsibleGaming.next === 'SIGN_UP') {
+                globalStore.signUp.setOpen(true);
+            }
+            if (globalStore.responsibleGaming.next === 'DISCLAIMER') {
+                globalStore.disclaimer.setOpen(true);
+            }
+            globalStore.responsibleGaming.setNext(null);
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('relative flex h-full w-full flex-col items-start overflow-hidden p-4 sm:p-6 lg:mx-auto lg:max-h-[90vh] lg:w-[500px] lg:p-3xl', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: [_jsx(Image, { src: props.logo, alt: "", width: 250, height: 150, className: "mx-auto h-auto w-20 sm:w-24 lg:w-[7.5rem]", draggable: false }), _jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(Dialog.Title, { className: "my-3 text-center font-semibold text-brand-400 sm:mt-6 sm:text-lg lg:my-xl lg:text-2xl", children: "Responsible Gaming Guidelines" }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col rounded-md bg-bg-primary-alt px-2 py-2", children: _jsxs("div", { ref: scrollableContentRef, className: "mt-2 scrollbar:h-2 scrollbar:w-2 flex-1 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-track:rounded-full bg-bg-primary-alt scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-bg-primary p-3 pr-4 sm:mt-xs sm:p-4", onScroll: (e) => {
+                                                const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+                                                const atBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
+                                                setIsAtBottom(atBottom);
+                                                if (atBottom) {
+                                                    setHasReachedBottom(true);
+                                                }
+                                            }, children: [_jsx(Dialog.Description, { className: "text-xs leading-relaxed sm:text-sm sm:leading-2xl", children: props.content }), _jsx(Button, { type: "button", className: twMerge('absolute right-6 bottom-7 z-10 size-10 rounded-lg transition-colors duration-75 ease-in-out sm:right-6 sm:bottom-6 lg:right-8 lg:bottom-8', isAtBottom
+                                                        ? 'border border-[#CECFD2] bg-bg-secondary'
+                                                        : 'bg-bg-brand-secondary'), onClick: () => {
+                                                        if (scrollableContentRef.current) {
+                                                            scrollableContentRef.current.scrollTo({
+                                                                top: isAtBottom
+                                                                    ? 0
+                                                                    : scrollableContentRef.current.scrollHeight,
+                                                                behavior: 'smooth',
+                                                            });
+                                                        }
+                                                    }, children: isAtBottom ? _jsx(ScrollToTopIcon, {}) : _jsx(ScrollToBottomIcon, {}) })] }) })] }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { type: "button", className: twMerge('mt-4 w-full py-2 text-sm sm:py-2.5 sm:text-base', hasReachedBottom
+                                        ? 'bg-bg-brand-secondary'
+                                        : 'bg-bg-disabled text-text-disabled'), onClick: () => {
+                                        api.setOpen(false);
+                                    }, disabled: !hasReachedBottom, children: "I Agree" })) })] }) })] }) }));
+}

package/dist/lib/components/ResponsibleGaming/ResponsibleGamingV3.lazy.d.ts

@@ -0,0 +1,8 @@
+import { type ImageProps } from 'next/image';
+import { type ReactNode } from 'react';
+export interface ResponsibleGamingV3Props {
+    logo: ImageProps['src'];
+    content: string | ReactNode;
+    responsibleGamingLogo?: ImageProps['src'];
+}
+export declare function ResponsibleGamingV3(props: ResponsibleGamingV3Props): import("react/jsx-runtime").JSX.Element;