@opexa/portal-components 0.0.885 → 0.0.887

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,7 +1,7 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
         view: "form" | "vca";
-        status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+        status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
         deposit: import("../../../../types").Deposit | null;
@@ -14,7 +14,7 @@ export declare const OnlineBankDepositContext: (props: {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useOnlineBankDepositContext: () => {
     view: "form" | "vca";
-    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: import("../../../../types").Deposit | null;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -2,7 +2,7 @@ import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
     view: "form" | "vca";
-    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: Deposit | null;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        status: "failed" | "idle" | "generating-qr-code" | "qr-code-generated" | "confirmed";
+        status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
         deposit: import("../../../../types").Deposit | null;
         errorMessage: {
             name: string;
@@ -13,7 +13,7 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    status: "failed" | "idle" | "generating-qr-code" | "qr-code-generated" | "confirmed";
+    status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
     deposit: import("../../../../types").Deposit | null;
     errorMessage: {
         name: string;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts

@@ -5,7 +5,7 @@ export interface GenerateQRCodeInput {
     promo?: string | null;
 }
 export declare function useQRPHDeposit(): {
-    status: "failed" | "idle" | "generating-qr-code" | "qr-code-generated" | "confirmed";
+    status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
     deposit: Deposit | null;
     errorMessage: {
         name: string;

package/dist/components/ForgotPassword/Crazywin/CWForgotPassword.d.ts

@@ -0,0 +1,6 @@
+import { type ImageProps } from 'next/image';
+type Props = {
+    logo: ImageProps['src'];
+};
+declare const ForgotPassword: ({ logo }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ForgotPassword;

package/dist/components/ForgotPassword/Crazywin/CWForgotPassword.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { XIcon } from '../../../icons/XIcon.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
+import CWForgotPasswordForm from './CWForgotPasswordForm.js';
+import styles from './ForgotPassword.module.css';
+const ForgotPassword = ({ logo }) => {
+    return (_jsx(Dialog.Content, { className: "bg-transparent h-full w-full overflow-y-invisible left-0 top-0 flex items-center", children: _jsxs("div", { className: "flex h-[90dvh] w-full flex-col justify-center scroll-smooth", children: [_jsxs("div", { className: "relative mx-auto w-full max-w-[22.5rem]", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto mt-8 h-auto w-[12.04544rem]", draggable: false }), _jsx(Dialog.CloseTrigger, { className: 'w-fit h-fit text-[#6C5200] rounded-md bg-gradient-to-t from-[#FFE5AF] to-[#EAC467] p-0.5', children: _jsx(XIcon, {}) })] }), _jsx("h2", { className: "mx-auto mt-10 w-fit bg-[linear-gradient(50deg,#c7802d_-5.1%,#ffe585_44.95%,#c7802d_109.05%)] bg-clip-text text-2xl font-bold uppercase text-transparent", children: "Forgot Password" }), _jsx("div", { className: twMerge('mx-auto mt-7.5 max-w-[20.6875rem] p-7.5', styles.card), children: _jsx(CWForgotPasswordForm, {}) })] }) }));
+};
+export default ForgotPassword;

package/dist/components/ForgotPassword/Crazywin/CWForgotPasswordForm.d.ts

@@ -0,0 +1,2 @@
+declare const CWForgotPasswordForm: () => import("react/jsx-runtime").JSX.Element;
+export default CWForgotPasswordForm;

package/dist/components/ForgotPassword/Crazywin/CWForgotPasswordForm.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import Image from 'next/image';
+import { useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useCooldown } from '../../../client/hooks/useCooldown.js';
+import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
+import { useMobileNumberParser } from '../../../client/hooks/useMobileNumberParser.js';
+import { useResetPasswordMutation } from '../../../client/hooks/useResetPasswordMutation.js';
+import { useSendVerificationCodeMutation } from '../../../client/hooks/useSendVerificationCodeMutation.js';
+import { toaster } from '../../../client/utils/toaster.js';
+import { EyeIcon } from '../../../icons/EyeIcon.js';
+import { EyeOffIcon } from '../../../icons/EyeOffIcon.js';
+import lockIcon from '../../../images/lock-icon.webp';
+import { createForgotPasswordSchema, } from '../../../schemas/forgotPasswordSchema.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Field } from '../../../ui/Field/index.js';
+import { PasswordInput } from '../../../ui/PasswordInput/index.js';
+const CWForgotPasswordForm = () => {
+    const mobileNumberParser = useMobileNumberParser();
+    const schema = useMemo(() => createForgotPasswordSchema(mobileNumberParser), [mobileNumberParser]);
+    const { register, watch, getValues, handleSubmit, formState: { isValid, isDirty, errors }, } = useForm({
+        resolver: zodResolver(schema),
+        mode: 'onChange',
+    });
+    const mobileNumberValue = watch('mobileNumber');
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        forgotPassword: ctx.forgotPassword,
+    })));
+    const commonInputClass = 'h-10 w-full rounded-full border-none bg-black/40 text-xs placeholder:text-text-placeholder focus:outline-none focus:ring-0';
+    const localeInfo = useLocaleInfo();
+    const sendVerificationCodeMutation = useSendVerificationCodeMutation();
+    const resetPasswordMutation = useResetPasswordMutation({
+        onSuccess() {
+            globalStore.forgotPassword.setOpen(false);
+            globalStore.signIn.setOpen(true);
+            toaster.success({
+                description: 'Your password has been updated.',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const cooldown = useCooldown({
+        max: 60,
+        duration: 1000 * 60,
+    });
+    const onSubmit = (data) => {
+        resetPasswordMutation.mutate({
+            mobileNumber: mobileNumberParser.format(data.mobileNumber),
+            newPassword: data.password,
+            verificationCode: data.verificationCode,
+        });
+    };
+    return (_jsx("form", { autoComplete: 'off', onSubmit: handleSubmit(onSubmit), children: _jsxs("div", { className: "space-y-4", children: [_jsxs(Field.Root, { invalid: !!errors.mobileNumber, children: [_jsx(Field.Label, { className: "text-xs", children: "Phone Number" }), _jsxs("div", { className: "relative flex h-10 gap-3", children: [_jsxs("div", { className: "flex h-full items-center gap-2 rounded-full bg-black/40 px-3.5 text-xs", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: commonInputClass, placeholder: "Enter Phone Number", ...register('mobileNumber') })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!errors.password, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full text-xs bg-black/40 border-0", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.password?.message })] })] }) }), _jsx(Field.Root, { invalid: !!errors.confirmPassword, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Confirm Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full text-xs bg-black/40 border-0", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.confirmPassword?.message })] })] }) }), _jsxs(Field.Root, { invalid: !!errors.verificationCode, children: [_jsx(Field.Label, { className: "text-xs", children: "OTP Code" }), _jsxs("div", { className: "relative", children: [_jsx(Field.Input, { className: twMerge(commonInputClass, 'pr-[5.75rem]'), placeholder: "Enter OTP Code", ...register('verificationCode') }), _jsx(Button, { type: "button", className: "absolute right-1 top-1/2 h-fit w-fit -translate-y-1/2 rounded-full py-[0.375rem] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1] bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)]", disabled: !mobileNumberValue || !!errors.mobileNumber || cooldown.cooling, onClick: async () => {
+                                        if (!cooldown.cooling) {
+                                            await sendVerificationCodeMutation.mutateAsync({
+                                                channel: 'SMS',
+                                                recipient: mobileNumberParser.format(getValues('mobileNumber'))
+                                            });
+                                            cooldown.start();
+                                            toaster.success({
+                                                description: `OTP sent to ${getValues('mobileNumber')}`
+                                            });
+                                        }
+                                    }, children: cooldown.cooling ? cooldown.countdown : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-7.5 text-sm rounded-full shadow-[inset_0px_-1px_2px_1px_#fff7e1] bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)]", fullWidth: true, disabled: !isValid || !isDirty, children: "Change Password" })] }) }));
+};
+export default CWForgotPasswordForm;

package/dist/components/ForgotPassword/Crazywin/ForgotPassword.module.css

@@ -0,0 +1,43 @@
+  .card {
+    --gradient-bg: radial-gradient(103.87% 100% at 50.15% 0%, #072b37 20.3%, #051125 100%);
+
+    --gradient-border-top: radial-gradient(
+      139.23% 113.41% at 50.14% 0%,
+      #8affdc 0.49%,
+      rgba(138, 255, 220, 0) 33.03%
+    );
+
+    --gradient-border-bottom: radial-gradient(
+      42.09% 54.21% at 50.14% 100%,
+      #8affdc 5.74%,
+      rgba(138, 255, 220, 0) 93.84%
+    );
+
+    position: relative;
+    background: var(--gradient-bg);
+    box-shadow: 0px 4px 14px 6px rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(25px);
+    border-radius: 1.25em;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .card::after,
+  .card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    border: 0.5px solid transparent;
+    border-image-slice: 1;
+  }
+
+  .card::before {
+    border-image-source: var(--gradient-border-bottom);
+  }
+
+  .card::after {
+    border-image-source: var(--gradient-border-top);
+  }

package/dist/components/ForgotPassword/ForgotPassword.lazy.d.ts

@@ -1,8 +1,11 @@
 import { type ImageProps } from 'next/image';
 import { type ReactNode } from 'react';
+type ForgotPasswordLayout = 'crazywin';
 export interface ForgotPasswordProps {
     logo: ImageProps['src'];
     children?: ReactNode;
     className?: string;
+    layout?: ForgotPasswordLayout;
 }
 export declare function ForgotPassword(props: ForgotPasswordProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ForgotPassword/ForgotPassword.lazy.js

@@ -8,12 +8,17 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
+import CrazywinForgotPassword from './Crazywin/CWForgotPassword.js';
 import { ForgotPasswordForm } from './ForgotPasswordForm.js';
 export function ForgotPassword(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         forgotPassword: ctx.forgotPassword,
     })));
+    const Body = {
+        crazywin: (_jsx(CrazywinForgotPassword, { logo: props.logo })),
+        default: (_jsxs(Dialog.Content, { className: twMerge('mx-auto h-full w-full items-start bg-bg-primary-alt p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(ForgotPasswordForm, {}) })] }))
+    };
     return (_jsx(Dialog.Root, { open: globalStore.forgotPassword.open, onOpenChange: (details) => {
             globalStore.forgotPassword.setOpen(details.open);
-        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: twMerge('mx-auto h-full w-full items-start bg-bg-primary-alt p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(ForgotPasswordForm, {}) })] }) })] }) }));
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: Body[props.layout ?? 'default'] })] }) }));
 }

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

@@ -14,9 +14,9 @@ import treasureChestBg from '../../../images/chest-bg.webp';
 import star from '../../../images/star.webp';
 import treasureChest from '../../../images/treasure.webp';
 import { formatNumber } from '../../../utils/formatNumber.js';
-import { parseDecimal } from '../../../utils/parseDecimal.js';
+import { getPercentage } from '../../../utils/getPercentage.js';
 import styles from '../Jackpots.module.css';
-import { JACKPOTS_VARIATIONS } from '../utils.js';
+import { CRAZYWIN_JACKPOTS_VARIATIONS, getAccumulatingJackpotDescription } 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'],
@@ -111,34 +111,23 @@ export function JackpotsCarouselItemCrazyWin({ index, }) {
                                     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
+                            ].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 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,
-                                                            }) })] }), _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, {
+                                                            }) })] }), _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)] })] }), 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 h-[56px] min-h-[40px] w-full flex-1 items-center justify-between rounded-b-2xl bg-[#171b26] px-4 py-[10px]", children: [showSeeDetailsButton ? (_jsxs("button", { type: "button", className: "flex items-center gap-1 font-medium text-[#fff] text-sm", children: ["See details", _jsx(ArrowNarrowUpRightIcon, { className: "h-5 w-5" })] })) : (_jsxs("div", { className: "w-full text-white text-xs opacity-100 transition-opacity duration-500 ease-in-out", children: [_jsxs("div", { children: ["Minimum bet:", ' ', _jsxs("span", { className: "font-semibold text-[#FFE5AF]", children: ["PHP", ' ', formatNumber(jackpot.minimumBet, {
+                                                        }) })] })] }), _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)] })] }), 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-[#171b26] px-4 py-[10px]", children: [showSeeDetailsButton ? (_jsxs("button", { type: "button", className: "flex items-center gap-1 font-medium text-[#fff] text-sm", children: ["See details", _jsx(ArrowNarrowUpRightIcon, { className: "h-5 w-5" })] })) : (_jsxs("div", { className: "w-full text-white text-xs opacity-100 transition-opacity duration-500 ease-in-out", children: [_jsxs("div", { children: ["Minimum bet:", ' ', _jsxs("span", { className: "font-semibold text-[#FFE5AF]", 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-[#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" })] })] }));
-}
-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!';
-};
-function getPercentage(value, total) {
-    const v = parseDecimal(value, 0);
-    const t = parseDecimal(total, 0);
-    return t === 0 ? 0 : (v / t) * 100;
+                                            : 'N/A' })] })] })), _jsx("button", { type: "button", className: "text-nowrap text-[#FFE5AF] text-sm underline underline-offset-4", children: "Jackpot Rules" })] })] }));
 }

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

@@ -0,0 +1,8 @@
+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;

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

@@ -0,0 +1,154 @@
+'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 { getAccumulatingJackpotDescription, 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" })] })] }));
+}

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,8 @@ 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 { JackpotsListItemHappyBingo } from './JackpotsListItem.HappyBingo.js';
 import { JackpotsListItemDesktop } from './JackpotsListItemDesktop.js';
 import { JackpotsListItemMobile } from './JackpotsListItemMobile.js';
 export function JackpotsList(props) {
@@ -43,5 +45,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 })) : props.variant === 'happybingo' ? (_jsx(JackpotsListItemHappyBingo, { 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 })) : props.variant === 'happybingo' ? (_jsx(JackpotsListItemHappyBingo, { 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;