@opexa/portal-components 0.0.885 → 0.0.887

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

@@ -0,0 +1,167 @@
+'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, formatProviderName, 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), 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-[#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", 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: "z-1 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", 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-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:70%] [--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 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", unoptimized: true }), "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", unoptimized: true }), "Game Providers"] }) })) })] }))] })] }));
+}

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

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

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

@@ -0,0 +1,167 @@
+'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 starTwo from '../../../images/3d-star.webp';
+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 { formatProviderName, HAPPYBINGO_JACKPOTS_VARIATIONS, maskName } from '../utils.js';
+import { useJackpotsListItemContext } from './JackpotsListContext.js';
+import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
+import { useJackpotsListItemData } from './useJackpotsListItemData.js';
+export function JackpotsListItemHappyBingo({ 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 = HAPPYBINGO_JACKPOTS_VARIATIONS[index % HAPPYBINGO_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), 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: "z-1 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", 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-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:70%] [--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 w-full flex-col items-center rounded-b-2xl bg-white px-4 text-[#475467] dark:bg-[#161B26] dark:text-[#94969C]", children: [_jsxs("div", { className: "flex w-full justify-between py-3", children: [_jsxs("button", { onClick: () => setSeeDetails((v) => !v), type: "button", className: "flex items-center gap-1 font-medium text-sm", children: ["See details", ' ', seeDetails ? (_jsx(ChevronUpIcon, { className: "h-5" })) : (_jsx(ChevronDownIcon, { className: "h-5" }))] }), _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" })] }), seeDetails && (_jsxs("div", { className: "w-full", children: [_jsxs("div", { children: [_jsx("div", { className: "mt-[6px] flex justify-between text-[#344054] text-lg dark:text-[#CECFD2]", children: _jsxs("div", { className: "flex items-center gap-3 font-semibold", children: [_jsx(Image, { src: starTwo, alt: "3d star", className: "size-6", unoptimized: true }), "Recent Payouts"] }) }), _jsx("div", { className: "mt-[1.25rem] mb-[2rem] gap-[0.625rem]", children: _jsx("div", { className: "w-full max-w-full overflow-x-auto overflow-y-hidden whitespace-nowrap rounded-xl border border-[#eaecf0] dark:border-[#1f242f]", children: _jsxs("table", { className: "w-full min-w-[700px]", children: [_jsx("thead", { className: "border-[#EAECF0] border-b dark:border-[#1F242F]", children: _jsx("tr", { className: "border-[#EAECF0] border-b bg-white px-0 last:border-b-0 odd:bg-[#F9FAFB] dark:border-[#1F242F] dark:bg-[#0C111D] dark:odd:bg-[#0C111D]", children: [
+                                                                'Player',
+                                                                'Game Provider',
+                                                                'Multiplier',
+                                                                'Prize',
+                                                                'Timestamp',
+                                                            ].map((label) => (_jsx("th", { className: "bg-white px-3xl py-lg text-left font-medium text-[#475467] text-xs dark:bg-[#0C111D] dark:text-[#94969C]", children: label }, label))) }) }), _jsx("tbody", { children: jackpotPayouts.length
+                                                            ? jackpotPayouts
+                                                                .filter((jp) => jp.id !== '5HMmGqAZDPqqeFHBmv')
+                                                                .map((jp) => (_jsxs("tr", { className: "border-[#EAECF0] border-b bg-white last:border-b-0 odd:bg-[#F9FAFB] dark:border-[#1F242F] dark:bg-[#0C111D] dark:odd:bg-[#0C111D]", children: [_jsx("td", { className: "px-3xl py-xl text-left text-[#475467] text-sm dark:text-[#94969C]", children: maskName(jp?.member?.name) }), _jsx("td", { className: "px-3xl py-xl text-left text-[#475467] text-sm dark:text-[#94969C]", children: formatProviderName(jp?.game.provider ?? '-') }), _jsxs("td", { className: "px-3xl py-xl text-left text-[#475467] text-sm dark:text-[#94969C]", children: [jp?.multiplier, "x"] }), _jsx("td", { className: "px-3xl py-xl text-left text-[#079455] text-sm dark:text-[#47CD89]", children: formatNumber(jp?.amount ?? 0, {
+                                                                            currency: localeInfo.currency.code,
+                                                                            minDecimalPlaces: 2,
+                                                                            maxDecimalPlaces: 2,
+                                                                        }) }), _jsx("td", { className: "px-3xl py-xl text-left text-[#475467] text-sm dark:text-[#94969C]", 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: "px-3xl py-xl text-left text-[#475467] text-sm dark:text-[#94969C]", children: "-" }), _jsx("td", { className: "px-3xl py-xl text-left text-[#475467] text-sm dark:text-[#94969C]", children: "-" }), _jsx("td", { className: "px-3xl py-xl text-left text-[#475467] text-sm dark:text-[#94969C]", children: "-" }), _jsx("td", { className: "px-3xl py-xl text-left text-[#475467] text-sm dark:text-[#94969C]", children: "-" }), _jsx("td", { className: "px-3xl py-xl text-left text-[#475467] text-sm dark:text-[#94969C]", 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 text-[#344054] dark:text-[#CECFD2]", children: [_jsx(Image, { src: treasureChest, alt: "treasure chest", className: "size-6", unoptimized: true }), "Jackpot Game Provider"] }) })) })] }))] })] }));
+}

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,17 @@ 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;
+export declare const getAccumulatingJackpotDescription: (part: number, total: number) => 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,61 @@ 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;
+};
+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/Promos/Cashback.d.ts

@@ -2,6 +2,9 @@ import type { Cashback as TCashback } from '../../types';
 interface CashbackProps {
     data: TCashback;
     viewDetailsUrl: string;
+    hasPromotionPeriod?: boolean;
+    roundedButtons?: boolean;
+    textOrientation?: 'left' | 'center';
 }
-export declare function Cashback({ data, viewDetailsUrl }: CashbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Cashback({ data, viewDetailsUrl, hasPromotionPeriod, roundedButtons, textOrientation, }: CashbackProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Promos/Cashback.js

@@ -1,18 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useAvailablePromosQuery } from '../../client/hooks/useAvailablePromosQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { Button } from '../../ui/Button/index.js';
-export function Cashback({ data, viewDetailsUrl }) {
+import { formatPromotionPeriod } from './utils.js';
+export function Cashback({ data, viewDetailsUrl, hasPromotionPeriod, roundedButtons, textOrientation = 'center', }) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
     })));
     const claimablePromos = useAvailablePromosQuery().data ?? [];
     const claimable = claimablePromos.find((availablePromo) => availablePromo.id === data.id);
-    return (_jsxs("div", { className: "relative flex h-full flex-col overflow-hidden rounded-2xl border border-border-secondary bg-accent-50 bg-bg-primary-alt", children: [data.banner?.url && (_jsx(Image, { src: data.banner.url, alt: data.name, width: 400, height: 202, loading: "lazy", unoptimized: true, className: "block aspect-[365/180] w-full object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pt-2xl pb-3xl", children: [_jsx("div", { className: "w-full grow text-center font-semibold text-xl", children: data.name }), _jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: [claimable && (_jsx(Button, { size: "sm", onClick: () => {
+    const promotionPeriod = formatPromotionPeriod(data.activationStartDateTime, data.activationEndDateTime);
+    return (_jsxs("div", { className: "relative flex h-full flex-col overflow-hidden rounded-2xl border border-border-secondary bg-accent-50 bg-bg-primary-alt", children: [data.banner?.url && (_jsx(Image, { src: data.banner.url, alt: data.name, width: 400, height: 202, loading: "lazy", unoptimized: true, className: "block aspect-[365/180] w-full object-cover" })), hasPromotionPeriod && (_jsxs("div", { className: "bg-black py-1.5 text-center font-bold text-3xs uppercase", children: ["PROMOTION PERIOD: ", promotionPeriod] })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pt-2xl pb-3xl", children: [_jsx("div", { className: twMerge('w-full grow font-semibold text-xl', textOrientation === 'center' ? 'text-center' : 'text-left'), children: data.name }), _jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: [claimable && (_jsx(Button, { size: "sm", onClick: () => {
                                     globalStore.depositWithdrawal.setOpen(true);
                                     globalStore.depositWithdrawal.setPromo(data.id);
-                                }, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsxs(Link, { href: `${viewDetailsUrl}/${data.id}`, children: ["Read more", _jsxs("span", { className: "sr-only", children: [" about ", data.name] })] }) })] })] })] }));
+                                }, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, className: roundedButtons ? 'rounded-full' : '', children: _jsxs(Link, { href: `${viewDetailsUrl}/${data.id}`, children: ["Read more", _jsxs("span", { className: "sr-only", children: [" about ", data.name] })] }) })] })] })] }));
 }

package/dist/components/Promos/CustomPromo.d.ts

@@ -2,6 +2,8 @@ import type { CustomPromo as TCustomPromo } from '../../types';
 interface CustomPromoProps {
     data: TCustomPromo;
     viewDetailsUrl: string;
+    roundedButtons?: boolean;
+    textOrientation?: 'left' | 'center';
 }
-export declare function CustomPromo({ data, viewDetailsUrl }: CustomPromoProps): import("react/jsx-runtime").JSX.Element;
+export declare function CustomPromo({ data, viewDetailsUrl, roundedButtons, textOrientation, }: CustomPromoProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Promos/CustomPromo.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
 import { Button } from '../../ui/Button/index.js';
-export function CustomPromo({ data, viewDetailsUrl }) {
-    return (_jsxs("div", { className: "relative flex h-full flex-col overflow-hidden rounded-2xl border border-border-secondary bg-accent-50 bg-bg-primary-alt", children: [_jsx(Image, { src: data.banner, alt: data.name, width: 400, height: 202, loading: "lazy", unoptimized: true, className: "block aspect-[365/180] w-full object-cover" }), _jsxs("div", { className: "flex flex-grow flex-col px-4 pt-2xl pb-3xl", children: [_jsx("div", { className: "w-full grow text-center font-semibold text-xl", children: data.name }), _jsx("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsxs(Link, { href: `${viewDetailsUrl}/${data.id}`, children: ["Read more", _jsxs("span", { className: "sr-only", children: [" about ", data.name] })] }) }) })] })] }));
+export function CustomPromo({ data, viewDetailsUrl, roundedButtons, textOrientation = 'center', }) {
+    return (_jsxs("div", { className: "relative flex h-full flex-col overflow-hidden rounded-2xl border border-border-secondary bg-accent-50 bg-bg-primary-alt", children: [_jsx(Image, { src: data.banner, alt: data.name, width: 400, height: 202, loading: "lazy", unoptimized: true, className: "block aspect-[365/180] w-full object-cover" }), _jsxs("div", { className: "flex flex-grow flex-col px-4 pt-2xl pb-3xl", children: [_jsx("div", { className: twMerge('w-full grow font-semibold text-xl', textOrientation === 'center' ? 'text-center' : 'text-left'), children: data.name }), _jsx("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: _jsx(Button, { size: "sm", variant: "outline", asChild: true, className: roundedButtons ? 'rounded-full' : '', children: _jsxs(Link, { href: `${viewDetailsUrl}/${data.id}`, children: ["Read more", _jsxs("span", { className: "sr-only", children: [" about ", data.name] })] }) }) })] })] }));
 }

package/dist/components/Promos/Promo.d.ts

@@ -2,6 +2,9 @@ import type { Promo as TPromo } from '../../types';
 interface PromoProps {
     data: TPromo;
     viewDetailsUrl: string;
+    hasPromotionPeriod?: boolean;
+    roundedButtons?: boolean;
+    textOrientation?: 'left' | 'center';
 }
-export declare function Promo({ data, viewDetailsUrl }: PromoProps): import("react/jsx-runtime").JSX.Element;
+export declare function Promo({ data, viewDetailsUrl, hasPromotionPeriod, roundedButtons, textOrientation, }: PromoProps): import("react/jsx-runtime").JSX.Element;
 export {};