@opexa/portal-components 0.0.885 → 0.0.886

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarousel.client.js

@@ -19,6 +19,7 @@ const JackpotsCarouselNext = lazy(() => import('../JackpotsCarouselNext/Jackpots
 import { JackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
 import { JackpotsCarouselItem } from './JackpotsCarouselItem.js';
 import { JackpotsCarouselItemCrazyWin } from './JackpotsCarouselItem.CrazyWin.js';
+import { JackpotsCarouselItemHappyBingo } from './JackpotsCarouselItem.HappyBingo.js';
 export function JackpotsCarousel__client({ style, className, ...props }) {
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
@@ -71,7 +72,7 @@ export function JackpotsCarousel__client({ style, className, ...props }) {
     const classNames = useMemo(() => (isString(className) ? { root: className } : (className ?? {})), [className]);
     if (jackpots.length <= 0)
         return null;
-    return (_jsxs("div", { ref: ref, style: styles.root, className: classNames.root, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-semibold text-lg", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/jackpots', className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] })] }), _jsx("div", { className: 'relative overflow-hidden pt-lg', ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: jackpots.map((jackpot, index) => props.variant === 'crazywin' ? (_jsx(JackpotsCarouselItemContext, { value: jackpot, children: _jsx(JackpotsCarouselItemCrazyWin, { index: index, className: classNames, viewAllUrl: props.viewAllUrl }) }, jackpot.id ?? index)) : (_jsx(JackpotsCarouselItemContext, { value: jackpot, children: _jsx(JackpotsCarouselItem, { style: styles.itemRoot, className: classNames, viewAllUrl: props.viewAllUrl, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier }) }, jackpot.id ?? index))) }) })] }));
+    return (_jsxs("div", { ref: ref, style: styles.root, className: classNames.root, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "font-semibold text-lg", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/jackpots', className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] })] }), _jsx("div", { className: "relative overflow-hidden pt-lg", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: jackpots.map((jackpot, index) => (_jsx(JackpotsCarouselItemContext, { value: jackpot, children: props.variant === 'crazywin' ? (_jsx(JackpotsCarouselItemCrazyWin, { index: index, className: classNames, viewAllUrl: props.viewAllUrl })) : props.variant === 'happybingo' ? (_jsx(JackpotsCarouselItemHappyBingo, { index: index, className: classNames, viewAllUrl: props.viewAllUrl })) : (_jsx(JackpotsCarouselItem, { style: styles.itemRoot, className: classNames, viewAllUrl: props.viewAllUrl, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier })) }, jackpot.id ?? index))) }) })] }));
 }
 export function JackpotsCarousels__client(props) {
     const future = useFeatureFlag();

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.CrazyWin.js

@@ -16,7 +16,7 @@ import treasureChest from '../../../images/treasure.webp';
 import { formatNumber } from '../../../utils/formatNumber.js';
 import { parseDecimal } from '../../../utils/parseDecimal.js';
 import styles from '../Jackpots.module.css';
-import { JACKPOTS_VARIATIONS } from '../utils.js';
+import { CRAZYWIN_JACKPOTS_VARIATIONS } from '../utils.js';
 import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
 export function JackpotsCarouselItemCrazyWin({ index, }) {
     const [ref] = useIntersectionObserver({
@@ -85,7 +85,7 @@ export function JackpotsCarouselItemCrazyWin({ index, }) {
     if (jackpot.status === 'DISABLED' && jackpot.drawing !== true) {
         return null;
     }
-    const variation = JACKPOTS_VARIATIONS[index % JACKPOTS_VARIATIONS.length];
+    const variation = CRAZYWIN_JACKPOTS_VARIATIONS[index % CRAZYWIN_JACKPOTS_VARIATIONS.length];
     return (_jsxs("div", { className: "w-full shrink-0", children: [_jsxs("div", { ref: ref, className: twMerge('relative flex w-full shrink-0 rounded-t-2xl p-3 text-center lg:gap-4 lg:p-5', variation.background), children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [[
                                 [
                                     styles['flicker-scale-fade-2'],
@@ -113,7 +113,7 @@ export function JackpotsCarouselItemCrazyWin({ index, }) {
                                 ],
                             ].map(([animationClass, positionClass], i) => (_jsx(Image, { src: star, alt: "star", draggable: "false", className: twMerge(animationClass, positionClass) }, i))), _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "mb-2 flex gap-1 font-medium", children: _jsxs("div", { className: twMerge('flex w-fit items-center justify-center gap-1 rounded-[10px] border border-[#82F0D0] px-[10px] py-1 text-[#82F0D0] text-xs lg:text-sm'), children: [_jsx("div", { className: twMerge('h-[6px] w-[6px] animate-color rounded-full', isPayingOut
                                                                             ? styles['pulse-error']
-                                                                            : styles['pulse-success']) }), _jsx("div", { className: twMerge('rounded text-[#CECFD2]'), children: isPayingOut ? 'Paying Out' : 'Accumulating' })] }) }), _jsx("div", { className: "mb-2 font-semibold text-[18px] text-white lg:mb-0 lg:text-2xl", children: jackpot?.name }), _jsx("div", { className: `${variation.poolBg} ${variation.textColor} flex w-fit rounded-lg px-2 font-semibold text-[26px] lg:text-[36px]`, children: formatNumber(jackpotAmount, {
+                                                                            : styles['pulse-success']) }), _jsx("div", { className: twMerge('rounded text-[#CECFD2]'), children: isPayingOut ? 'Paying Out' : 'Accumulating' })] }) }), _jsx("div", { className: "mb-2 text-left font-semibold text-[18px] text-white lg:mb-0 lg:text-2xl", children: jackpot?.name }), _jsx("div", { className: `${variation.poolBg} ${variation.textColor} flex w-fit rounded-lg px-2 font-semibold text-[26px] lg:text-[36px]`, children: formatNumber(jackpotAmount, {
                                                                 currency: localeInfo.currency.code,
                                                                 minDecimalPlaces: 2,
                                                                 maxDecimalPlaces: 2,
@@ -129,7 +129,7 @@ export function JackpotsCarouselItemCrazyWin({ index, }) {
                                                 maxDecimalPlaces: 2,
                                             }) || 'N/A'] })] }), _jsxs("div", { children: ["Multiplier Requirement:", ' ', _jsx("span", { className: "font-semibold text-[#FFE5AF]", children: jackpot.minimumMultiplier
                                             ? `${jackpot.minimumMultiplier}X or more`
-                                            : 'N/A' })] })] })), _jsx("button", { type: "button", className: 'text-nowrap text-[#FFE5AF] text-sm underline underline-offset-4', children: "Jackpot Rules" })] })] }));
+                                            : 'N/A' })] })] })), _jsx("button", { type: "button", className: "text-nowrap text-[#FFE5AF] text-sm underline underline-offset-4", children: "Jackpot Rules" })] })] }));
 }
 const getAccumulatingJackpotDescription = (part, total) => {
     const percentage = total === 0 ? 0 : (part / total) * 100;

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.HappyBingo.d.ts

@@ -0,0 +1,9 @@
+import type { ClassNameEntries } from './JackpotsCarousel';
+export interface JackpotsCarouselItemHappyBingoProps {
+    index: number;
+    className?: ClassNameEntries;
+    /** @default "/jackpots" */
+    viewAllUrl?: string;
+}
+export declare function JackpotsCarouselItemHappyBingo({ index, }: JackpotsCarouselItemHappyBingoProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const getAccumulatingJackpotDescription: (part: number, total: number) => string;

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.HappyBingo.js

@@ -0,0 +1,160 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress } from '@ark-ui/react/progress';
+import isMobile from 'is-mobile';
+import Image from 'next/image';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useIntersectionObserver } from 'usehooks-ts';
+import { useJackpotPayoutsQuery } from '../../../client/hooks/useJackpotPayoutsQuery.js';
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
+import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
+import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
+import { User02Icon } from '../../../icons/User02Icon.js';
+import treasureChestBg from '../../../images/chest-bg.webp';
+import coins from '../../../images/happy-bingo-coins.webp';
+import star from '../../../images/star.webp';
+import treasureChest from '../../../images/treasure.webp';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { getPercentage } from '../../../utils/getPercentage.js';
+import styles from '../Jackpots.module.css';
+import { HAPPYBINGO_JACKPOTS_VARIATIONS, maskName } from '../utils.js';
+import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
+export function JackpotsCarouselItemHappyBingo({ index, }) {
+    // 1. Hooks (Context, Data, State, Refs)
+    const [ref] = useIntersectionObserver({
+        threshold: 0.5,
+        rootMargin: '50px',
+    });
+    const jackpot = useJackpotsCarouselItemContext();
+    const jackpotPayoutsQuery = useJackpotPayoutsQuery({
+        first: 1,
+        filter: {
+            jackpot: {
+                equal: jackpot.id,
+            },
+        },
+    });
+    const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    const localeInfo = useLocaleInfo();
+    const [showSeeDetailsButton, setShowSeeDetailsButton] = useState(true);
+    const [infoIndex, setInfoIndex] = useState(0);
+    const [mainTooltipOpen, setMainTooltipOpen] = useState(false);
+    // 2. Derived State & Constants
+    const isPayingOut = jackpot.drawing;
+    const jackpotAmount = jackpot.pool;
+    const variation = HAPPYBINGO_JACKPOTS_VARIATIONS[index % HAPPYBINGO_JACKPOTS_VARIATIONS.length];
+    // 3. Memoized Callbacks & Values
+    const isMobileDevice = useMemo(() => isMobile(), []);
+    const getInfoBlocks = useCallback(() => {
+        return [
+            `Current Jackpot: <b>${formatNumber(jackpotAmount, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}</b>`,
+            `Minimum Payout Limit: <b>${formatNumber(jackpot.minimumJackpotPoolDrawingLimit, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}</b>`,
+            `Maximum Payout Limit: <b>${formatNumber(jackpot.maximumJackpotPoolLimit, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}</b>`,
+            isPayingOut
+                ? `The pot has hit <b>${formatNumber(jackpot.maximumJackpotPoolLimit, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                    maxDecimalPlaces: 2,
+                })}</b> Play now for your chance to win big! 🔥`
+                : getAccumulatingJackpotDescription(Number(jackpot.pool), Number(jackpot.maximumJackpotPoolLimit)),
+        ];
+    }, [isPayingOut, jackpot, jackpotAmount, localeInfo]);
+    const Arrow = useCallback(({ index }) => {
+        const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
+        return (_jsx(Icon, { className: twMerge('min-w-2.5 scale-400 text-brand-300 lg:min-w-4 lg:scale-250', isPayingOut
+                ? styles['animate-wave-color-error']
+                : styles['animate-wave-color-success']), style: {
+                animationDelay: isPayingOut
+                    ? `${(40 - index - 1) * 0.1}s`
+                    : `${index * 0.1}s`,
+            } }));
+    }, [isPayingOut]);
+    const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => _jsx(Arrow, { index: i }, i)), [Arrow]);
+    // 4. Effects
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setInfoIndex((i) => (i + 1) % getInfoBlocks().length);
+            setShowSeeDetailsButton((v) => !v);
+        }, 4000);
+        return () => clearInterval(interval);
+    }, [getInfoBlocks]);
+    useEffect(() => {
+        if (isMobileDevice && mainTooltipOpen) {
+            const timeout = setTimeout(() => setMainTooltipOpen(false), 3000);
+            return () => clearTimeout(timeout);
+        }
+    }, [mainTooltipOpen, isMobileDevice]);
+    // 5. Early Return
+    if (jackpot.status === 'DISABLED' && jackpot.drawing !== true) {
+        return null;
+    }
+    // 6. Main Render
+    return (_jsxs("div", { className: "w-full shrink-0", children: [_jsxs("div", { ref: ref, className: twMerge('relative flex w-full shrink-0 rounded-t-2xl p-3 lg:gap-4 lg:p-5', variation.background), children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [[
+                                [
+                                    styles['flicker-scale-fade-2'],
+                                    'absolute right-[38%] top-[2%] h-2 w-2 delay-75',
+                                ],
+                                [
+                                    styles['flicker-scale-fade'],
+                                    'absolute right-[20%] top-[10%] h-3 w-3',
+                                ],
+                                [
+                                    styles['flicker-scale-fade-2'],
+                                    'absolute right-[30%] top-[10%] h-5 w-5',
+                                ],
+                                [
+                                    styles['flicker-scale-fade'],
+                                    'absolute right-[36%] top-[35%] h-3 w-3',
+                                ],
+                                [
+                                    styles['flicker-scale-fade'],
+                                    'absolute right-[15%] top-[56%] h-3 w-3',
+                                ],
+                                [
+                                    styles['flicker-scale-fade-2'],
+                                    'absolute right-[50%] top-[55%] h-4 w-4',
+                                ],
+                            ].map(([animationClass, positionClass], i) => (_jsx(Image, { src: star, alt: "star", draggable: "false", className: twMerge(animationClass, positionClass), unoptimized: true }, i))), _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "mb-2 flex gap-1 font-medium", children: _jsxs("div", { className: twMerge('flex w-fit items-center justify-center gap-1 rounded-[10px] border border-[#FECDCA] bg-[#FEF3F2] px-2.5 py-1 text-sm'), children: [_jsx("div", { className: twMerge('h-[6px] w-[6px] animate-color rounded-full', isPayingOut
+                                                                            ? styles['pulse-error']
+                                                                            : styles['pulse-success']) }), _jsx("div", { className: twMerge('rounded text-[#344054]'), children: isPayingOut ? 'Paying Out' : 'Accumulating' })] }) }), _jsx("div", { className: "mb-2 text-left font-semibold text-[18px] text-white lg:mb-0 lg:text-2xl", children: jackpot?.name }), _jsx("div", { className: `${variation.poolBg} ${variation.textColor} flex w-fit rounded-lg px-2 font-semibold text-[26px] lg:text-[36px]`, children: formatNumber(jackpotAmount, {
+                                                                currency: localeInfo.currency.code,
+                                                                minDecimalPlaces: 2,
+                                                                maxDecimalPlaces: 2,
+                                                            }) })] }), _jsx(Image, { width: 175, height: 175, src: treasureChest, alt: "treasure chest", className: twMerge('absolute top-[0px] right-[-3px] h-[124px] w-[124px] md:top-0 lg:top-[-30px] lg:h-[175px] lg:w-[175px]'), priority: false, loading: "lazy", unoptimized: true })] }) }) }) }), _jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-1 flex justify-between", children: [_jsx("div", { className: "font-semibold text-text-primary-900 text-xs", "aria-live": "polite", children: formatNumber(0, {
+                                                    currency: localeInfo.currency.code,
+                                                    compact: true,
+                                                }) }), _jsxs("div", { className: "relative flex items-center justify-end gap-1.5", children: [isPayingOut ? (_jsx("div", { className: "flex w-6 items-center", children: [0, 1.5, 3].map((left, i) => (_jsx("div", { className: twMerge(`absolute left-${left}`, styles[`animate-arrow-red-flash-${i + 1}`]), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }, i))) })) : (_jsx("div", { className: "flex w-6 items-center", children: [0, 1.5, 3].map((left, i) => (_jsx("div", { className: twMerge(`absolute left-${left}`, styles[`animate-arrow-green-flash-${i + 1}`]), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }, i))) })), _jsx("div", { className: "font-semibold text-text-primary-900 text-xs", children: formatNumber(jackpot?.maximumJackpotPoolLimit, {
+                                                            currency: localeInfo.currency.code,
+                                                            compact: true,
+                                                        }) })] })] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuenow": getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuemax": 100, "aria-label": "Jackpot progress", children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full', variation.progressBg), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) }), _jsx("div", { className: "mt-2 h-2 text-left text-[#F5F5F6] text-xs lg:h-auto lg:text-sm", dangerouslySetInnerHTML: { __html: getInfoBlocks()[infoIndex] } }, infoIndex)] }), _jsx("div", { className: "mt-5 hidden items-start gap-5 text-white lg:flex", children: jackpotPayouts.length ? (_jsxs("div", { className: "flex h-full w-full flex-row items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-1 block font-bold text-lg", children: "Recent Payout \uD83C\uDF89" }), _jsxs("p", { className: "block text-xs leading-[18px] tracking-wider", children: ["Massive payout unlocked! ", _jsx("br", {}), " Who's next? \uD83D\uDCB0"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: twMerge(variation.topPayoutImgBorderColor, 'relative flex h-[54px] w-[54px] items-center justify-center rounded-full object-contain p-[3.5px]'), children: [_jsx("div", { className: twMerge('flex h-full w-full items-center justify-center rounded-full', variation.topPayoutImgBg), children: _jsx(User02Icon, { className: "h-[34px] w-auto" }) }), _jsx("div", { className: twMerge(variation.topPayoutImgBorderColor, '-right-1.5 absolute bottom-[-5px] lg:right-[-5px] lg:bottom-[-5px]', 'flex h-[34px] w-[34px] items-center justify-center rounded-full p-0.5'), children: _jsxs("div", { className: twMerge('flex h-full w-full items-center justify-center rounded-full font-bold text-[10px]', variation.topPayoutImgBorderColor, variation.textColor, variation.multiplierBg, variation.multiplierColor), children: [jackpotPayouts[0].multiplier, "x"] }) })] }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold text-2xl", children: maskName(jackpotPayouts[0].member.name) }), _jsx("p", { className: twMerge(variation.poolBg, 'rounded-lg px-2 font-semibold text-[22px]', variation.textColor), children: formatNumber(jackpotPayouts[0].amount, {
+                                                                currency: localeInfo.currency.code,
+                                                                minDecimalPlaces: 2,
+                                                                maxDecimalPlaces: 2,
+                                                            }) })] })] })] })) : (_jsxs("div", { className: "flex h-full w-full flex-row-reverse items-center justify-between", children: [_jsx(Image, { src: coins, alt: "coins", className: "ml-2", unoptimized: true }), _jsxs("div", { children: [_jsx("p", { className: "mt-1 font-semibold text-lg leading-6", children: "No one has won big yet" }), _jsxs("p", { className: "mt-1 text-[0.75rem] leading-[1.125rem]", children: ["You could be the first to win the ", _jsx("br", {}), " jackpot!"] })] })] })) })] }), isPayingOut ? (_jsx("div", { className: twMerge(styles['light-rays'], variation.raysColor, 'rounded-t-2xl [--light-rays-left:90%] [--light-rays-top:100px]') })) : (_jsx(Image, { width: 175, height: 175, src: treasureChestBg, alt: "treasure chest background", className: twMerge('absolute top-0 right-0 h-full w-[380px] object-cover opacity-50'), priority: false, loading: "lazy", unoptimized: true }))] }), _jsxs("div", { className: "relative flex h-[56px] min-h-[40px] w-full flex-1 items-center justify-between rounded-b-2xl bg-white px-4 py-[10px] text-[#475467] dark:bg-[#161B26] dark:text-[#94969C]", children: [showSeeDetailsButton ? (_jsxs("button", { type: "button", className: "] flex items-center gap-1 font-medium text-sm", children: ["See details", _jsx(ArrowNarrowUpRightIcon, { className: "h-5 w-5" })] })) : (_jsxs("div", { className: "w-full text-xs transition-opacity duration-500 ease-in-out", children: [_jsxs("div", { children: ["Minimum bet:", ' ', _jsxs("span", { className: "font-semibold text-[#A15C07] dark:text-[#EAAA08]", children: ["PHP", ' ', formatNumber(jackpot.minimumBet, {
+                                                currency: localeInfo.currency.code,
+                                                minDecimalPlaces: 2,
+                                                maxDecimalPlaces: 2,
+                                            }) || 'N/A'] })] }), _jsxs("div", { children: ["Multiplier Requirement:", ' ', _jsx("span", { className: "font-semibold text-[#A15C07] dark:text-[#EAAA08]", children: jackpot.minimumMultiplier
+                                            ? `${jackpot.minimumMultiplier}X or more`
+                                            : 'N/A' })] })] })), _jsx("button", { type: "button", className: "inline-flex h-9 items-center justify-center gap-1.5 text-nowrap rounded-lg border border-[#EAAA08] bg-white px-4 py-2.5 font-semibold text-[#A15C07] text-sm text-sm shadow-xs transition-colors duration-200 hover:border-[#FDE272] hover:bg-[#FEFBE8] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-[#EAAA08] disabled:hover:bg-white dark:border-[#333741] dark:bg-[#161B26] dark:text-[#CECFD2] dark:disabled:hover:border-[#333741] dark:disabled:hover:bg-[#161B26]", children: "Jackpot Rules" })] })] }));
+}
+export const getAccumulatingJackpotDescription = (part, total) => {
+    const percentage = total === 0 ? 0 : (part / total) * 100;
+    return percentage <= 90
+        ? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
+        : '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
+};

package/dist/components/Jackpots/JackpotsList/JackpotsList.d.ts

@@ -34,6 +34,7 @@ interface StyleEntries {
     itemRoot?: CSSProperties;
 }
 export interface JackpotsListProps {
+    variant?: 'happybingo' | 'crazywin';
     layout: 'list';
     /** @default "Jackpots" */
     heading?: string | ReactNode;

package/dist/components/Jackpots/JackpotsList/JackpotsList.js

@@ -9,6 +9,7 @@ import closeChest from '../../../images/close-chest.png';
 import { isStyleEntries } from '../../../utils/isStyleEntries.js';
 import { JackpotsListNext } from '../JackpotsListNext/JackpotsList.js';
 import { JackpotsListItemContext, JackpotsListPropsContext, } from './JackpotsListContext.js';
+import { JackpotsListItemCrazyWin } from './JackpotsListItem.CrazyWin.js';
 import { JackpotsListItemDesktop } from './JackpotsListItemDesktop.js';
 import { JackpotsListItemMobile } from './JackpotsListItemMobile.js';
 export function JackpotsList(props) {
@@ -43,5 +44,5 @@ export function JackpotsList(props) {
         future.enabled) {
         return _jsx(JackpotsListNext, { ...props });
     }
-    return (_jsx(JackpotsListPropsContext, { value: props, children: _jsxs("div", { ref: ref, style: styles.root, className: classNames.root, children: [_jsx("div", { className: "mb-3 font-semibold text-lg lg:mb-4.5", children: props.heading ?? 'Jackpots' }), jackpots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: jackpots.map((jackpot, index) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemDesktop, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier }) }, index))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot, index) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemMobile, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier }) }, index))) })] })) : (_jsxs("div", { className: "mt-5 flex h-fit flex-col items-center justify-center lg:mt-0 lg:h-62", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", className: "size-full h-29.5 w-29.5 mix-blend-luminosity lg:h-25 lg:w-25" }), _jsx("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: "No Jackpots" }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: ["No jackpots are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
+    return (_jsx(JackpotsListPropsContext, { value: props, children: _jsxs("div", { ref: ref, style: styles.root, className: classNames.root, children: [_jsx("div", { className: "mb-3 font-semibold text-lg lg:mb-4.5", children: props.heading ?? 'Jackpots' }), jackpots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: jackpots.map((jackpot, index) => (_jsx(JackpotsListItemContext, { value: jackpot, children: props.variant === 'crazywin' ? (_jsx(JackpotsListItemCrazyWin, { index: index, className: classNames })) : (_jsx(JackpotsListItemDesktop, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier })) }, index))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot, index) => (_jsx(JackpotsListItemContext, { value: jackpot, children: props.variant === 'crazywin' ? (_jsx(JackpotsListItemCrazyWin, { index: index, className: classNames })) : (_jsx(JackpotsListItemMobile, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier })) }, index))) })] })) : (_jsxs("div", { className: "mt-5 flex h-fit flex-col items-center justify-center lg:mt-0 lg:h-62", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", className: "size-full h-29.5 w-29.5 mix-blend-luminosity lg:h-25 lg:w-25" }), _jsx("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: "No Jackpots" }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: ["No jackpots are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
 }

package/dist/components/Jackpots/JackpotsList/JackpotsListItem.CrazyWin.d.ts

@@ -0,0 +1,6 @@
+import type { ClassNameEntries } from './JackpotsList';
+export interface JackpotsListItemDesktopCrazyWinProps {
+    index: number;
+    className?: ClassNameEntries;
+}
+export declare function JackpotsListItemCrazyWin({ index, }: JackpotsListItemDesktopCrazyWinProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Jackpots/JackpotsList/JackpotsListItem.CrazyWin.js

@@ -0,0 +1,173 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress } from '@ark-ui/react/progress';
+import { format } from 'date-fns';
+import isMobile from 'is-mobile';
+import Image from 'next/image';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useIntersectionObserver } from 'usehooks-ts';
+import { useJackpotPayoutsQuery } from '../../../client/hooks/useJackpotPayoutsQuery.js';
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
+import { ChevronDownIcon } from '../../../icons/ChevronDownIcon.js';
+import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
+import { ChevronUpIcon } from '../../../icons/ChevronUpIcon.js';
+import { User02Icon } from '../../../icons/User02Icon.js';
+import treasureChestBg from '../../../images/chest-bg.webp';
+import coin from '../../../images/coin.webp';
+import coins from '../../../images/coins.webp';
+import star from '../../../images/star.webp';
+import treasureChest from '../../../images/treasure.webp';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { getPercentage } from '../../../utils/getPercentage.js';
+import styles from '../Jackpots.module.css';
+import { CRAZYWIN_JACKPOTS_VARIATIONS, maskName } from '../utils.js';
+import { useJackpotsListItemContext } from './JackpotsListContext.js';
+import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
+import { useJackpotsListItemData } from './useJackpotsListItemData.js';
+export function JackpotsListItemCrazyWin({ index, }) {
+    const jackpot = useJackpotsListItemContext();
+    const localeInfo = useLocaleInfo();
+    const { getAccumulatingJackpotDescription, filteredGameProviders } = useJackpotsListItemData();
+    const jackpotPayoutsQuery = useJackpotPayoutsQuery({
+        first: 30,
+        filter: {
+            jackpot: {
+                equal: jackpot.id,
+            },
+        },
+    });
+    const [ref] = useIntersectionObserver({
+        threshold: 0.5,
+        rootMargin: '50px',
+    });
+    const [infoIndex, setInfoIndex] = useState(0);
+    const [seeDetails, setSeeDetails] = useState(false);
+    const [mainTooltipOpen, setMainTooltipOpen] = useState(false);
+    const isPayingOut = jackpot.drawing;
+    const jackpotAmount = jackpot.pool;
+    const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    const variation = CRAZYWIN_JACKPOTS_VARIATIONS[index % CRAZYWIN_JACKPOTS_VARIATIONS.length];
+    const isMobileDevice = useMemo(() => isMobile(), []);
+    const getInfoBlocks = useCallback(() => {
+        return [
+            `Current Jackpot: <b>${formatNumber(jackpotAmount, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}</b>`,
+            `Minimum Payout Limit: <b>${formatNumber(jackpot.minimumJackpotPoolDrawingLimit, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}</b>`,
+            `Maximum Payout Limit: <b>${formatNumber(jackpot.maximumJackpotPoolLimit, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+                maxDecimalPlaces: 2,
+            })}</b>`,
+            isPayingOut
+                ? `The pot has hit <b>${formatNumber(jackpot.maximumJackpotPoolLimit, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                    maxDecimalPlaces: 2,
+                })}</b> Play now for your chance to win big! 🔥`
+                : getAccumulatingJackpotDescription(Number(jackpot.pool), Number(jackpot.maximumJackpotPoolLimit)),
+        ];
+    }, [
+        isPayingOut,
+        jackpot,
+        jackpotAmount,
+        localeInfo,
+        getAccumulatingJackpotDescription,
+    ]);
+    const Arrow = useCallback(({ index }) => {
+        const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
+        return (_jsx(Icon, { className: twMerge('min-w-2.5 scale-400 text-brand-300 lg:min-w-4 lg:scale-250', isPayingOut
+                ? styles['animate-wave-color-error']
+                : styles['animate-wave-color-success']), style: {
+                animationDelay: isPayingOut
+                    ? `${(40 - index - 1) * 0.1}s`
+                    : `${index * 0.1}s`,
+            } }));
+    }, [isPayingOut]);
+    const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => _jsx(Arrow, { index: i }, i)), [Arrow]);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setInfoIndex((i) => (i + 1) % getInfoBlocks().length);
+        }, 4000);
+        return () => clearInterval(interval);
+    }, [getInfoBlocks]);
+    useEffect(() => {
+        if (isMobileDevice && mainTooltipOpen) {
+            const timeout = setTimeout(() => setMainTooltipOpen(false), 3000);
+            return () => clearTimeout(timeout);
+        }
+    }, [mainTooltipOpen, isMobileDevice]);
+    if (jackpot.status === 'DISABLED' && jackpot.drawing !== true) {
+        return null;
+    }
+    return (_jsxs("div", { className: "w-full shrink-0", children: [_jsxs("div", { ref: ref, className: twMerge('relative flex w-full shrink-0 rounded-t-2xl p-3 text-center lg:gap-4 lg:p-5', variation.background), children: [_jsxs("div", { className: "flex w-full flex-col gap-6 lg:flex-row lg:gap-0", children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [[
+                                        [
+                                            styles['flicker-scale-fade-2'],
+                                            'absolute right-[38%] top-[2%] h-2 w-2 delay-75',
+                                        ],
+                                        [
+                                            styles['flicker-scale-fade'],
+                                            'absolute right-[20%] top-[10%] h-3 w-3',
+                                        ],
+                                        [
+                                            styles['flicker-scale-fade-2'],
+                                            'absolute right-[30%] top-[10%] h-5 w-5',
+                                        ],
+                                        [
+                                            styles['flicker-scale-fade'],
+                                            'absolute right-[36%] top-[35%] h-3 w-3',
+                                        ],
+                                        [
+                                            styles['flicker-scale-fade'],
+                                            'absolute right-[15%] top-[56%] h-3 w-3',
+                                        ],
+                                        [
+                                            styles['flicker-scale-fade-2'],
+                                            'absolute right-[50%] top-[55%] h-4 w-4',
+                                        ],
+                                    ].map(([animationClass, positionClass], i) => (_jsx(Image, { src: star, alt: "star", draggable: "false", className: twMerge(animationClass, positionClass) }, i))), _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "mb-2 flex gap-1 font-medium", children: _jsxs("div", { className: twMerge('flex w-fit items-center justify-center gap-1 rounded-[10px] border border-[#82F0D0] px-[10px] py-1 text-[#82F0D0] text-xs lg:text-sm'), children: [_jsx("div", { className: twMerge('h-[6px] w-[6px] animate-color rounded-full', isPayingOut
+                                                                                    ? styles['pulse-error']
+                                                                                    : styles['pulse-success']) }), _jsx("div", { className: twMerge('rounded text-[#CECFD2]'), children: isPayingOut ? 'Paying Out' : 'Accumulating' })] }) }), _jsx("div", { className: "mb-2 text-left font-semibold text-[18px] text-white lg:mb-0 lg:text-2xl", children: jackpot?.name }), _jsx("div", { className: `${variation.poolBg} ${variation.textColor} flex w-fit rounded-lg px-2 font-semibold text-[26px] lg:text-[36px]`, children: formatNumber(jackpotAmount, {
+                                                                        currency: localeInfo.currency.code,
+                                                                        minDecimalPlaces: 2,
+                                                                        maxDecimalPlaces: 2,
+                                                                    }) })] }), _jsx(Image, { width: 175, height: 175, src: treasureChest, alt: "treasure chest", className: twMerge('absolute top-[0px] right-[-3px] h-[124px] w-[124px] md:top-0 lg:top-[-30px] lg:h-[175px] lg:w-[175px]'), priority: false, loading: "lazy" })] }) }) }) }), _jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-1 flex justify-between", children: [_jsx("div", { className: "font-semibold text-text-primary-900 text-xs", "aria-live": "polite", children: formatNumber(0, {
+                                                            currency: localeInfo.currency.code,
+                                                            compact: true,
+                                                        }) }), _jsxs("div", { className: "relative flex items-center justify-end gap-1.5", children: [isPayingOut ? (_jsx("div", { className: "flex w-6 items-center", children: [0, 1.5, 3].map((left, i) => (_jsx("div", { className: twMerge(`absolute left-${left}`, styles[`animate-arrow-red-flash-${i + 1}`]), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }, i))) })) : (_jsx("div", { className: "flex w-6 items-center", children: [0, 1.5, 3].map((left, i) => (_jsx("div", { className: twMerge(`absolute left-${left}`, styles[`animate-arrow-green-flash-${i + 1}`]), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }, i))) })), _jsx("div", { className: "font-semibold text-text-primary-900 text-xs", children: formatNumber(jackpot?.maximumJackpotPoolLimit, {
+                                                                    currency: localeInfo.currency.code,
+                                                                    compact: true,
+                                                                }) })] })] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuenow": getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuemax": 100, "aria-label": "Jackpot progress", children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full', variation.progressBg), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) }), _jsx("div", { className: "mt-2 h-2 text-left text-[#F5F5F6] text-xs lg:h-auto lg:text-sm", dangerouslySetInnerHTML: { __html: getInfoBlocks()[infoIndex] } }, infoIndex)] })] }), _jsx("div", { className: "flex items-start gap-5 text-white", children: jackpotPayouts.length ? (_jsxs("div", { className: "flex h-full w-full flex-row items-center justify-between gap-3 lg:w-[280px] lg:flex-col lg:justify-center", children: [_jsx("p", { className: "hidden font-bold text-lg lg:block", children: "Recent Payout \uD83C\uDF89" }), _jsxs("div", { children: [_jsx("p", { className: "mb-1 block font-bold text-[14px] lg:hidden lg:text-lg", children: "Recent Payout \uD83C\uDF89" }), _jsxs("p", { className: "block text-xs leading-[18px] tracking-wider lg:hidden", children: ["Massive payout unlocked! ", _jsx("br", {}), " Who's next? \uD83D\uDCB0"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: `${variation.topPayoutImgBorderColor} relative flex h-[54px] w-[54px] items-center justify-center rounded-full object-contain p-[3.5px] lg:h-[74px] lg:w-[74px]`, children: [_jsx("div", { className: `flex h-full w-full items-center justify-center rounded-full ${variation.topPayoutImgBg}`, children: _jsx(User02Icon, { className: "h-[34px] w-auto lg:h-[44px]" }) }), _jsx("div", { className: `${variation.topPayoutImgBorderColor} absolute right-[-6px] bottom-[-5px] flex h-8 w-8 items-center justify-center rounded-full p-[2px] lg:right-0 lg:bottom-0`, children: _jsxs("div", { className: `flex h-full w-full items-center justify-center rounded-full font-bold text-[10px] ${variation.topPayoutImgBorderColor} ${variation.textColor} ${variation.multiplierBg} ${variation.multiplierColor}`, children: [jackpotPayouts[0].multiplier, "x"] }) })] }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold text-2xl", children: maskName(jackpotPayouts[0].member.name) }), _jsx("p", { className: `${variation.poolBg} rounded-lg px-2 font-semibold text-[22px] ${variation.textColor}`, children: formatNumber(jackpotPayouts[0].amount, {
+                                                                currency: localeInfo.currency.code,
+                                                                minDecimalPlaces: 2,
+                                                                maxDecimalPlaces: 2,
+                                                            }) })] })] }), _jsxs("p", { className: "hidden text-center text-xs leading-[18px] tracking-wider lg:block", children: ["Massive payout unlocked! ", _jsx("br", {}), " Who's next? \uD83D\uDCB0"] })] })) : (_jsxs("div", { className: "flex h-full w-full flex-row-reverse items-center justify-between lg:w-[280px] lg:flex-col lg:justify-center", children: [_jsx(Image, { src: coins, alt: "coins", className: "ml-2" }), _jsxs("div", { children: [_jsx("p", { className: "mt-1 font-semibold text-lg leading-6", children: "No one has won big yet" }), _jsxs("p", { className: "mt-1 text-start text-[0.75rem] leading-[1.125rem] lg:text-center", children: ["You could be the first to win the ", _jsx("br", {}), " jackpot!"] })] })] })) })] }), isPayingOut ? (_jsx("div", { className: twMerge(styles['light-rays'], variation.raysColor, 'rounded-t-2xl [--light-rays-left:90%] [--light-rays-top:100px]') })) : (_jsx(Image, { width: 175, height: 175, src: treasureChestBg, alt: "treasure chest background", className: twMerge('absolute top-0 right-0 h-full w-[380px] object-cover opacity-50'), priority: false, loading: "lazy" }))] }), _jsxs("div", { className: "relative flex w-full flex-col items-center rounded-b-2xl bg-[#171b26] px-4", children: [_jsxs("div", { className: "flex w-full justify-between py-4", children: [_jsxs("button", { onClick: () => setSeeDetails((v) => !v), type: "button", className: "flex items-center gap-1 font-medium text-[#fff] text-sm", children: ["See details", ' ', seeDetails ? (_jsx(ChevronUpIcon, { className: "h-5" })) : (_jsx(ChevronDownIcon, { className: "h-5" }))] }), _jsx("button", { type: "button", className: "text-nowrap text-[#FFE5AF] text-sm underline underline-offset-4", children: "Jackpot Rules" })] }), seeDetails && (_jsxs("div", { className: "w-full", children: [_jsxs("div", { children: [_jsx("div", { className: "mt-[6px] flex justify-between text-[#CECFD2] text-lg", children: _jsxs("div", { className: "flex items-center gap-3 font-semibold", children: [_jsx(Image, { src: coin, alt: "coin", className: "h-6" }), "Recent Payouts"] }) }), _jsx("div", { className: "mt-[1.25rem] mb-[2rem] gap-[0.625rem]", children: _jsx("div", { className: "flex-1 overflow-x-auto rounded-lg border border-[#1F242F]", children: _jsxs("table", { className: "w-full min-w-[700px]", children: [_jsx("thead", { children: _jsx("tr", { className: "h-[44px] bg-[#0C111D] text-[#94969C] text-xs", children: [
+                                                                'Player',
+                                                                'Game Provider',
+                                                                'Multiplier',
+                                                                'Prize',
+                                                                'Timestamp',
+                                                            ].map((label) => (_jsx("th", { className: "whitespace-nowrap border-[#1F242F] border-b px-6 py-2 text-left", children: label }, label))) }) }), _jsx("tbody", { children: jackpotPayouts.length
+                                                            ? jackpotPayouts
+                                                                .filter((jp) => jp.id !== '5HMmGqAZDPqqeFHBmv')
+                                                                .map((jp) => (_jsxs("tr", { className: "h-[44px] bg-[#0C111D] text-left text-[#94969C] text-sm", children: [_jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: maskName(jp?.member?.name) }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: formatProviderName(jp?.game.provider ?? '-') }), _jsxs("td", { className: "border-[#1F242F] border-b px-6 py-2", children: [jp?.multiplier, "x"] }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2 text-[#47CD89]", children: formatNumber(jp?.amount ?? 0, {
+                                                                            currency: localeInfo.currency.code,
+                                                                            minDecimalPlaces: 2,
+                                                                            maxDecimalPlaces: 2,
+                                                                        }) }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: format(new Date(jp.dateTimeCreated), 'dd MMM yyyy h:mm a') })] }, jp.id)))
+                                                            : Array.from({ length: 5 }).map((_, i) => (_jsxs("tr", { className: "h-[44px] bg-[#0C111D] text-left text-[#94969C] text-sm", children: [_jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" })] }, i))) })] }) }) })] }), _jsx("div", { className: "w-full", children: Boolean(filteredGameProviders.length) && (_jsx(JackpotsListItemGameProviders, { gameProviders: filteredGameProviders, heading: _jsxs("div", { className: "flex items-center gap-3 font-semibold", children: [_jsx(Image, { src: treasureChest, alt: "treasure chest", className: "size-6" }), "Game Providers"] }) })) })] }))] })] }));
+}
+function formatProviderName(provider) {
+    return provider
+        .split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+}

package/dist/components/Jackpots/JackpotsList/JackpotsListItemGameProviders.d.ts

@@ -1,11 +1,13 @@
 import { type ImageProps } from 'next/image';
+import { type ReactNode } from 'react';
 import type { GameProviderData } from '../../../types';
 interface JackpotGameProvider extends GameProviderData {
     redirectUrl: string;
     providedLogo?: ImageProps['src'];
 }
 export interface JackpotsListItemGameProvidersProps {
+    heading?: string | ReactNode;
     gameProviders: JackpotGameProvider[];
 }
-export declare function JackpotsListItemGameProviders({ gameProviders, }: JackpotsListItemGameProvidersProps): import("react/jsx-runtime").JSX.Element;
+export declare function JackpotsListItemGameProviders({ heading, gameProviders, }: JackpotsListItemGameProvidersProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Jackpots/JackpotsList/JackpotsListItemGameProviders.js

@@ -9,7 +9,7 @@ import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
 import { ArrowRightIcon } from '../../../icons/ArrowRightIcon.js';
 import { Button } from '../../../ui/Button/index.js';
 import { useJackpotsListPropsContext } from './JackpotsListContext.js';
-export function JackpotsListItemGameProviders({ gameProviders, }) {
+export function JackpotsListItemGameProviders({ heading, gameProviders, }) {
     const jackpotsProps = useJackpotsListPropsContext();
     const classNames = isString(jackpotsProps.className)
         ? { root: jackpotsProps.className }
@@ -41,5 +41,5 @@ export function JackpotsListItemGameProviders({ gameProviders, }) {
         emblaApi.on('select', onSelect);
         emblaApi.on('reInit', onSelect);
     }, [emblaApi, onSelect]);
-    return (_jsxs("div", { className: twMerge('p-4 pb-8', classNames.providerRoot), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: twMerge('font-semibold text-lg text-text-primary-900', classNames.providerHeading), children: "Jackpot Game Providers" }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: twMerge('rounded-r-none border-r-0', classNames.providerNavigationButton), "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: twMerge('rounded-l-none', classNames.providerNavigationButton), "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] }), _jsx("div", { className: "relative mt-3 overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: provider.redirectUrl, className: twMerge('min-w-27.5 rounded-md bg-brand-800 lg:bg-bg-primary-900', classNames.providerThumbnailRoot), children: _jsx(Image, { src: provider.providedLogo ?? provider.logo, alt: "provider", className: twMerge('size-full', classNames.providerThumbnailImage), width: 300, height: 150 }) }, provider.slug))) }) })] }));
+    return (_jsxs("div", { className: twMerge('p-4 pb-8', classNames.providerRoot), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: twMerge('font-semibold text-lg text-text-primary-900', classNames.providerHeading), children: heading ?? 'Jackpot Game Providers' }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: twMerge('rounded-r-none border-r-0', classNames.providerNavigationButton), "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: twMerge('rounded-l-none', classNames.providerNavigationButton), "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] }), _jsx("div", { className: "relative mt-3 overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: provider.redirectUrl, className: twMerge('min-w-27.5 rounded-md bg-brand-800 lg:bg-bg-primary-900', classNames.providerThumbnailRoot), children: _jsx(Image, { src: provider.providedLogo ?? provider.logo, alt: "provider", className: twMerge('size-full', classNames.providerThumbnailImage), width: 300, height: 150 }) }, provider.slug))) }) })] }));
 }

package/dist/components/Jackpots/utils.d.ts

@@ -1,4 +1,4 @@
-export declare const JACKPOTS_VARIATIONS: {
+export declare const CRAZYWIN_JACKPOTS_VARIATIONS: {
     background: string;
     progressBg: string;
     textColor: string;
@@ -9,3 +9,16 @@ export declare const JACKPOTS_VARIATIONS: {
     topPayoutImgBg: string;
     raysColor: string;
 }[];
+export declare const HAPPYBINGO_JACKPOTS_VARIATIONS: {
+    background: string;
+    progressBg: string;
+    textColor: string;
+    poolBg: string;
+    multiplierColor: string;
+    multiplierBg: string;
+    topPayoutImgBorderColor: string;
+    topPayoutImgBg: string;
+    raysColor: string;
+}[];
+export declare function formatProviderName(provider: string): string;
+export declare const maskName: (name: string) => string;

package/dist/components/Jackpots/utils.js

@@ -1,4 +1,4 @@
-export const JACKPOTS_VARIATIONS = [
+export const CRAZYWIN_JACKPOTS_VARIATIONS = [
     // Green
     {
         background: 'bg-[linear-gradient(241.67deg,#1A534C_1.19%,#051B29_100%)]',
@@ -36,3 +36,55 @@ export const JACKPOTS_VARIATIONS = [
         raysColor: '[--color-jackpot-rays-primary:#c04e48] [--color-jackpot-rays-secondary:#8f2731]',
     },
 ];
+export const HAPPYBINGO_JACKPOTS_VARIATIONS = [
+    // Orange
+    {
+        background: 'bg-[linear-gradient(241.67deg,#FFD238_1.19%,#FF7D02_100%)]',
+        progressBg: 'bg-[#CA8504]',
+        textColor: 'text-[#713B12]',
+        poolBg: 'bg-[linear-gradient(180deg,#FFDE21_0%,#FFD012_47%,#FFBF00_100%)]',
+        multiplierColor: 'text-[#713B12]',
+        multiplierBg: 'bg-[linear-gradient(241.67deg,#FFD238_1.19%,#FF7D02_100%)]',
+        topPayoutImgBorderColor: 'bg-[linear-gradient(180deg,#FFDE21_28.33%,#FFBF00_57.84%,#FF9442_100%)]',
+        topPayoutImgBg: 'bg-[#FFD238]',
+        raysColor: '[--color-rays-primary:#f2ac25] [--color-rays-secondary:#febb2a]',
+    },
+    // Purple
+    {
+        background: 'bg-[linear-gradient(45deg,#4300B1_0%,#A531DC_100%)]',
+        progressBg: 'bg-[#B485FF]',
+        textColor: 'text-[#fff]',
+        poolBg: 'bg-[linear-gradient(180deg,#9E77ED_0%,#8057D9_100%)]',
+        multiplierBg: 'bg-[linear-gradient(45deg,_#4300B1_0%,_#A531DC_100%)]',
+        multiplierColor: 'text-[#fff]',
+        topPayoutImgBorderColor: 'bg-[linear-gradient(180deg,#9E77ED_0%,#8057D9_100%)]',
+        topPayoutImgBg: 'bg-[#5E0DBD]',
+        raysColor: '[--color-rays-primary:#8222c6] [--color-rays-secondary:#8e24d2]',
+    },
+    // Blue
+    {
+        background: 'bg-[linear-gradient(241.67deg,#01C1FA_1.19%,#015EEA_100%)]',
+        progressBg: 'bg-[#01C4FB]',
+        textColor: 'text-[#344054]',
+        poolBg: 'bg-[linear-gradient(180deg,_#89F7FE_0%,_#66A6FF_100%)]',
+        multiplierBg: 'bg-[linear-gradient(241.67deg,_#01C1FA_1.19%,_#015EEA_100%)]',
+        multiplierColor: 'text-[#fff]',
+        topPayoutImgBorderColor: 'bg-[linear-gradient(180deg,_#89F7FE_0%,_#66A6FF_100%)]',
+        topPayoutImgBg: 'bg-[#01C1FA]',
+        raysColor: '[--color-rays-primary:#17a6f6] [--color-rays-secondary:#159ce9]',
+    },
+];
+export function formatProviderName(provider) {
+    return provider
+        .split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+}
+export const maskName = (name) => {
+    if (name.length <= 7) {
+        return '*'.repeat(name.length);
+    }
+    const visiblePart = name.slice(0, 3);
+    const maskedPart = '*'.repeat(7);
+    return visiblePart + maskedPart;
+};

package/dist/components/SignIn/MobileNumberField.js

@@ -33,9 +33,10 @@ export const MobileNumberField = ({ enabledCountries, mobileNumber, onMobileNumb
                             setSearch('');
                         }, children: [_jsx(Popover.Trigger, { onClick: () => {
                                     setIsPopoverOpen(!isPopoverOpen);
-                                }, className: "rounded-md border border-border-primary bg-background bg-bg-primary px-3 py-2 shadow-xs transition-colors placeholder:text-text-placeholder hover:border-border-hover focus:border-border-brand focus:border-border-focus focus:shadow-brand-xs focus:outline-none", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(selectedCountry.flag, { className: "size-5" }), _jsx("span", { children: selectedCountry.areaCode }), _jsx(Popover.Indicator, { children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Popover.Positioner, { className: "w-full", children: _jsx(Popover.Content, { children: _jsx(Popover.Description, { children: isPopoverOpen && (_jsxs(Combobox.Root, { collection: countriesCollection, positioning: {
+                                }, className: "rounded-md border border-border-primary bg-background bg-bg-primary px-3 py-2 shadow-xs transition-colors placeholder:text-text-placeholder hover:border-border-hover focus:border-border-brand focus:border-border-focus focus:shadow-brand-xs focus:outline-none", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(selectedCountry.flag, { className: "size-5" }), _jsx("span", { children: selectedCountry.areaCode }), _jsx(Popover.Indicator, { children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Popover.Positioner, { className: "w-full", children: _jsx(Popover.Content, { children: _jsx(Popover.Description, { children: _jsxs(Combobox.Root, { collection: countriesCollection, positioning: {
                                                 sameWidth: true,
                                             }, value: [selectedCountry.code], onValueChange: (details) => {
+                                                console.log('onValueChange?');
                                                 if (details.value && details.value.length > 0) {
                                                     setSelectedCountry(getCountryDetails(details.value[0]));
                                                     setAreaCode(getCountryDetails(details.value[0]).areaCode);
@@ -43,11 +44,11 @@ export const MobileNumberField = ({ enabledCountries, mobileNumber, onMobileNumb
                                                     setIsPopoverOpen(false);
                                                 }
                                             }, inputValue: search, onInputValueChange: (details) => {
+                                                console.log('onInputValueChange?');
                                                 setSearch(details.inputValue);
                                             }, open: isPopoverOpen, onOpenChange: (details) => {
-                                                // Prevent combobox from closing when we want it open
+                                                console.log('onOpenChange?');
                                                 if (isPopoverOpen && !details.open) {
-                                                    // Don't let combobox close itself
                                                     return;
                                                 }
                                             }, openOnClick: true, children: [_jsx(Combobox.Control, { className: "rounded-lg border-1 shadow-none outline-none", children: _jsx(Combobox.Input, { placeholder: "Search country..." }) }), _jsx(Portal, { children: _jsx(Combobox.Positioner, { style: { zIndex: 9999 }, children: _jsx(Combobox.Content, { className: "w-full", style: { zIndex: 9999 }, children: _jsx(Combobox.ItemGroup, { children: countriesCollection.items
@@ -56,7 +57,7 @@ export const MobileNumberField = ({ enabledCountries, mobileNumber, onMobileNumb
                                                                         .toLowerCase()
                                                                         .includes(search.toLowerCase()) ||
                                                                     country.areaCode.includes(search))
-                                                                    .map((country) => (_jsxs(Combobox.Item, { item: country, children: [_jsxs(Combobox.ItemText, { children: [_jsx(country.flag, { className: "mr-2 inline-block size-5" }), country.name, " (", country.areaCode, ")"] }), _jsx(Combobox.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, country.code))) }) }) }) })] })) }) }) })] }), _jsx(Field.Input, { ...(mobileNumberRegistration || {}), style: { paddingLeft: '0.5rem' }, value: mobileNumber, onChange: handleMobileChange, placeholder: "Enter mobile number" })] }), _jsx(Field.ErrorText, { children: error })] }));
+                                                                    .map((country) => (_jsxs(Combobox.Item, { item: country, children: [_jsxs(Combobox.ItemText, { children: [_jsx(country.flag, { className: "mr-2 inline-block size-5" }), country.name, " (", country.areaCode, ")"] }), _jsx(Combobox.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, country.code))) }) }) }) })] }) }) }) })] }), _jsx(Field.Input, { ...(mobileNumberRegistration || {}), style: { paddingLeft: '0.5rem' }, value: mobileNumber, onChange: handleMobileChange, placeholder: "Enter mobile number" })] }), _jsx(Field.ErrorText, { children: error })] }));
 };
 const countriesListCollection = (countries) => createListCollection({
     items: countries,

package/dist/icons/User02Icon.d.ts

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

package/dist/icons/User02Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function User02Icon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@opexa/portal-components",
-	"version": "0.0.885",
+	"version": "0.0.886",
 	"exports": {
 		"./ui/*": {
 			"types": "./dist/ui/*/index.d.ts",