@opexa/portal-components 0.0.886 → 0.0.888

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/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 { CRAZYWIN_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({
@@ -111,19 +111,19 @@ 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 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,
@@ -131,14 +131,3 @@ export function JackpotsCarouselItemCrazyWin({ index, }) {
                                             ? `${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;
-}

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

@@ -6,4 +6,3 @@ export interface JackpotsCarouselItemHappyBingoProps {
     viewAllUrl?: string;
 }
 export declare function JackpotsCarouselItemHappyBingo({ index, }: JackpotsCarouselItemHappyBingoProps): import("react/jsx-runtime").JSX.Element | null;
-export declare const getAccumulatingJackpotDescription: (part: number, total: number) => string;

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

@@ -19,7 +19,7 @@ import treasureChest from '../../../images/treasure.webp';
 import { formatNumber } from '../../../utils/formatNumber.js';
 import { getPercentage } from '../../../utils/getPercentage.js';
 import styles from '../Jackpots.module.css';
-import { HAPPYBINGO_JACKPOTS_VARIATIONS, maskName } from '../utils.js';
+import { getAccumulatingJackpotDescription, HAPPYBINGO_JACKPOTS_VARIATIONS, maskName } from '../utils.js';
 import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
 export function JackpotsCarouselItemHappyBingo({ index, }) {
     // 1. Hooks (Context, Data, State, Refs)
@@ -144,7 +144,7 @@ export function JackpotsCarouselItemHappyBingo({ index, }) {
                                                                 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, {
+                                                            }) })] })] })] })) : (_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,
@@ -152,9 +152,3 @@ export function JackpotsCarouselItemHappyBingo({ index, }) {
                                             ? `${jackpot.minimumMultiplier}X or more`
                                             : 'N/A' })] })] })), _jsx("button", { type: "button", className: "inline-flex h-9 items-center justify-center gap-1.5 text-nowrap rounded-lg border border-[#EAAA08] bg-white px-4 py-2.5 font-semibold text-[#A15C07] text-sm text-sm shadow-xs transition-colors duration-200 hover:border-[#FDE272] hover:bg-[#FEFBE8] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-[#EAAA08] disabled:hover:bg-white dark:border-[#333741] dark:bg-[#161B26] dark:text-[#CECFD2] dark:disabled:hover:border-[#333741] dark:disabled:hover:bg-[#161B26]", children: "Jackpot Rules" })] })] }));
 }
-export const getAccumulatingJackpotDescription = (part, total) => {
-    const percentage = total === 0 ? 0 : (part / total) * 100;
-    return percentage <= 90
-        ? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
-        : '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
-};

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

@@ -10,6 +10,7 @@ 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) {
@@ -44,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: props.variant === 'crazywin' ? (_jsx(JackpotsListItemCrazyWin, { index: index, className: classNames })) : (_jsx(JackpotsListItemDesktop, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier })) }, index))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot, index) => (_jsx(JackpotsListItemContext, { value: jackpot, children: props.variant === 'crazywin' ? (_jsx(JackpotsListItemCrazyWin, { index: index, className: classNames })) : (_jsx(JackpotsListItemMobile, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier })) }, index))) })] })) : (_jsxs("div", { className: "mt-5 flex h-fit flex-col items-center justify-center lg:mt-0 lg:h-62", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", className: "size-full h-29.5 w-29.5 mix-blend-luminosity lg:h-25 lg:w-25" }), _jsx("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: "No Jackpots" }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: ["No jackpots are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
+    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.js

@@ -22,7 +22,7 @@ import treasureChest from '../../../images/treasure.webp';
 import { formatNumber } from '../../../utils/formatNumber.js';
 import { getPercentage } from '../../../utils/getPercentage.js';
 import styles from '../Jackpots.module.css';
-import { CRAZYWIN_JACKPOTS_VARIATIONS, maskName } from '../utils.js';
+import { CRAZYWIN_JACKPOTS_VARIATIONS, formatProviderName, maskName } from '../utils.js';
 import { useJackpotsListItemContext } from './JackpotsListContext.js';
 import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
 import { useJackpotsListItemData } from './useJackpotsListItemData.js';
@@ -133,23 +133,23 @@ export function JackpotsListItemCrazyWin({ 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 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)] })] }), _jsx("div", { className: "flex items-start gap-5 text-white", children: jackpotPayouts.length ? (_jsxs("div", { className: "flex h-full w-full flex-row items-center justify-between gap-3 lg:w-[280px] lg:flex-col lg:justify-center", children: [_jsx("p", { className: "hidden font-bold text-lg lg:block", children: "Recent Payout \uD83C\uDF89" }), _jsxs("div", { children: [_jsx("p", { className: "mb-1 block font-bold text-[14px] lg:hidden lg:text-lg", children: "Recent Payout \uD83C\uDF89" }), _jsxs("p", { className: "block text-xs leading-[18px] tracking-wider lg:hidden", children: ["Massive payout unlocked! ", _jsx("br", {}), " Who's next? \uD83D\uDCB0"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: `${variation.topPayoutImgBorderColor} relative flex h-[54px] w-[54px] items-center justify-center rounded-full object-contain p-[3.5px] lg:h-[74px] lg:w-[74px]`, children: [_jsx("div", { className: `flex h-full w-full items-center justify-center rounded-full ${variation.topPayoutImgBg}`, children: _jsx(User02Icon, { className: "h-[34px] w-auto lg:h-[44px]" }) }), _jsx("div", { className: `${variation.topPayoutImgBorderColor} absolute right-[-6px] bottom-[-5px] flex h-8 w-8 items-center justify-center rounded-full p-[2px] lg:right-0 lg:bottom-0`, children: _jsxs("div", { className: `flex h-full w-full items-center justify-center rounded-full font-bold text-[10px] ${variation.topPayoutImgBorderColor} ${variation.textColor} ${variation.multiplierBg} ${variation.multiplierColor}`, children: [jackpotPayouts[0].multiplier, "x"] }) })] }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold text-2xl", children: maskName(jackpotPayouts[0].member.name) }), _jsx("p", { className: `${variation.poolBg} rounded-lg px-2 font-semibold text-[22px] ${variation.textColor}`, children: formatNumber(jackpotPayouts[0].amount, {
+                                                                }) })] })] }), _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" }), _jsxs("div", { children: [_jsx("p", { className: "mt-1 font-semibold text-lg leading-6", children: "No one has won big yet" }), _jsxs("p", { className: "mt-1 text-start text-[0.75rem] leading-[1.125rem] lg:text-center", children: ["You could be the first to win the ", _jsx("br", {}), " jackpot!"] })] })] })) })] }), isPayingOut ? (_jsx("div", { className: twMerge(styles['light-rays'], variation.raysColor, 'rounded-t-2xl [--light-rays-left:90%] [--light-rays-top:100px]') })) : (_jsx(Image, { width: 175, height: 175, src: treasureChestBg, alt: "treasure chest background", className: twMerge('absolute top-0 right-0 h-full w-[380px] object-cover opacity-50'), priority: false, loading: "lazy" }))] }), _jsxs("div", { className: "relative flex w-full flex-col items-center rounded-b-2xl bg-[#171b26] px-4", children: [_jsxs("div", { className: "flex w-full justify-between py-4", children: [_jsxs("button", { onClick: () => setSeeDetails((v) => !v), type: "button", className: "flex items-center gap-1 font-medium text-[#fff] text-sm", children: ["See details", ' ', seeDetails ? (_jsx(ChevronUpIcon, { className: "h-5" })) : (_jsx(ChevronDownIcon, { className: "h-5" }))] }), _jsx("button", { type: "button", className: "text-nowrap text-[#FFE5AF] text-sm underline underline-offset-4", children: "Jackpot Rules" })] }), seeDetails && (_jsxs("div", { className: "w-full", children: [_jsxs("div", { children: [_jsx("div", { className: "mt-[6px] flex justify-between text-[#CECFD2] text-lg", children: _jsxs("div", { className: "flex items-center gap-3 font-semibold", children: [_jsx(Image, { src: coin, alt: "coin", className: "h-6" }), "Recent Payouts"] }) }), _jsx("div", { className: "mt-[1.25rem] mb-[2rem] gap-[0.625rem]", children: _jsx("div", { className: "flex-1 overflow-x-auto rounded-lg border border-[#1F242F]", children: _jsxs("table", { className: "w-full min-w-[700px]", children: [_jsx("thead", { children: _jsx("tr", { className: "h-[44px] bg-[#0C111D] text-[#94969C] text-xs", children: [
+                                                            }) })] })] }), _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',
@@ -163,11 +163,5 @@ export function JackpotsListItemCrazyWin({ index, }) {
                                                                             minDecimalPlaces: 2,
                                                                             maxDecimalPlaces: 2,
                                                                         }) }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: format(new Date(jp.dateTimeCreated), 'dd MMM yyyy h:mm a') })] }, jp.id)))
-                                                            : Array.from({ length: 5 }).map((_, i) => (_jsxs("tr", { className: "h-[44px] bg-[#0C111D] text-left text-[#94969C] text-sm", children: [_jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" }), _jsx("td", { className: "border-[#1F242F] border-b px-6 py-2", children: "-" })] }, i))) })] }) }) })] }), _jsx("div", { className: "w-full", children: Boolean(filteredGameProviders.length) && (_jsx(JackpotsListItemGameProviders, { gameProviders: filteredGameProviders, heading: _jsxs("div", { className: "flex items-center gap-3 font-semibold", children: [_jsx(Image, { src: treasureChest, alt: "treasure chest", className: "size-6" }), "Game Providers"] }) })) })] }))] })] }));
-}
-function formatProviderName(provider) {
-    return provider
-        .split('_')
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-        .join(' ');
+                                                            : 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/utils.d.ts

@@ -22,3 +22,4 @@ export declare const HAPPYBINGO_JACKPOTS_VARIATIONS: {
 }[];
 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

@@ -88,3 +88,9 @@ export const maskName = (name) => {
     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 {};

package/dist/components/Promos/Promo.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 Promo({ data, viewDetailsUrl }) {
+import { formatPromotionPeriod } from './utils.js';
+export function Promo({ 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/PromosGrid.d.ts

@@ -9,6 +9,9 @@ export interface PromosGridProps {
     /** @default "/promos/cashback" */
     viewCashbackDetailsUrl?: string;
     customPromos?: TCustomPromo[];
+    hasPromotionPeriod?: boolean;
+    roundedButtons?: boolean;
+    textOrientation?: 'left' | 'center';
     exclude?: string[];
     className?: string;
 }

package/dist/components/Promos/PromosGrid.js

@@ -15,5 +15,5 @@ export function PromosGrid(props) {
     const cashbacks = cashbacksQuery.data?.filter((item) => !blacklist.includes(item.id)) ?? [];
     const customPromos = props.customPromos?.filter((item) => !blacklist.includes(item.id)) ?? [];
     const empty = promos.length <= 0 && cashbacks.length <= 0 && customPromos.length <= 0;
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Promos' }), _jsx("div", { className: "grow" })] }), empty && (_jsx(Empty, { icon: Gift01Icon, title: "No Promos", message: "No promo is currently available.", className: "mt-8" })), !empty && (_jsx("div", { className: "relative mt-lg lg:overflow-hidden", children: _jsxs("div", { className: "grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: [promos.map((promo) => (_jsx(Promo, { data: promo, viewDetailsUrl: props.viewPromoDetailsUrl ?? '/promos' }, promo.id))), cashbacks.map((cashback) => (_jsx(Cashback, { data: cashback, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/cashback' }, cashback.id))), customPromos.map((customPromo) => (_jsx(CustomPromo, { data: customPromo, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/custom' }, customPromo.id)))] }) }))] }));
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Promos' }), _jsx("div", { className: "grow" })] }), empty && (_jsx(Empty, { icon: Gift01Icon, title: "No Promos", message: "No promo is currently available.", className: "mt-8" })), !empty && (_jsx("div", { className: "relative mt-lg lg:overflow-hidden", children: _jsxs("div", { className: "grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: [promos.map((promo) => (_jsx(Promo, { data: promo, viewDetailsUrl: props.viewPromoDetailsUrl ?? '/promos', hasPromotionPeriod: props.hasPromotionPeriod, roundedButtons: props.roundedButtons, textOrientation: props.textOrientation }, promo.id))), cashbacks.map((cashback) => (_jsx(Cashback, { data: cashback, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/cashback', hasPromotionPeriod: props.hasPromotionPeriod, roundedButtons: props.roundedButtons, textOrientation: props.textOrientation }, cashback.id))), customPromos.map((customPromo) => (_jsx(CustomPromo, { data: customPromo, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/custom', roundedButtons: props.roundedButtons, textOrientation: props.textOrientation }, customPromo.id)))] }) }))] }));
 }

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

@@ -0,0 +1 @@
+export declare function formatPromotionPeriod(start: string | null | undefined, until: string | null | undefined): string | null;

package/dist/components/Promos/utils.js

@@ -0,0 +1,10 @@
+import { format } from 'date-fns';
+export function formatPromotionPeriod(start, until) {
+    if (!start)
+        return null;
+    if (!until)
+        return null;
+    const s = format(start, 'd/MM/yyyy hh:mm a');
+    const u = format(until, 'd/MM/yyyy hh:mm a');
+    return `${s} - ${u}`;
+}

package/dist/components/SignIn/MobileNumberField.js

@@ -9,7 +9,9 @@ import { Field } from '../../ui/Field/index.js';
 import { getAllUniqueCountries, getCountryDetails, } from '../../utils/countries/getAllCountries.js';
 export const MobileNumberField = ({ enabledCountries, mobileNumber, onMobileNumberChange, setAreaCode, error, mobileNumberRegistration, }) => {
     const localeInfo = useLocaleInfo();
-    const [selectedCountry, setSelectedCountry] = useState(getCountryDetails(localeInfo.country.code));
+    const [selectedCountry, setSelectedCountry] = useState(getCountryDetails(enabledCountries.includes(localeInfo.country.code)
+        ? localeInfo.country.code
+        : 'AE'));
     const [search, setSearch] = useState('');
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const allCountries = useMemo(() => getAllUniqueCountries(enabledCountries), [enabledCountries]);
@@ -36,7 +38,6 @@ export const MobileNumberField = ({ enabledCountries, mobileNumber, onMobileNumb
                                 }, className: "rounded-md border border-border-primary bg-background bg-bg-primary px-3 py-2 shadow-xs transition-colors placeholder:text-text-placeholder hover:border-border-hover focus:border-border-brand focus:border-border-focus focus:shadow-brand-xs focus:outline-none", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(selectedCountry.flag, { className: "size-5" }), _jsx("span", { children: selectedCountry.areaCode }), _jsx(Popover.Indicator, { children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Popover.Positioner, { className: "w-full", children: _jsx(Popover.Content, { children: _jsx(Popover.Description, { children: _jsxs(Combobox.Root, { collection: countriesCollection, positioning: {
                                                 sameWidth: true,
                                             }, value: [selectedCountry.code], onValueChange: (details) => {
-                                                console.log('onValueChange?');
                                                 if (details.value && details.value.length > 0) {
                                                     setSelectedCountry(getCountryDetails(details.value[0]));
                                                     setAreaCode(getCountryDetails(details.value[0]).areaCode);
@@ -44,20 +45,22 @@ export const MobileNumberField = ({ enabledCountries, mobileNumber, onMobileNumb
                                                     setIsPopoverOpen(false);
                                                 }
                                             }, inputValue: search, onInputValueChange: (details) => {
-                                                console.log('onInputValueChange?');
                                                 setSearch(details.inputValue);
                                             }, open: isPopoverOpen, onOpenChange: (details) => {
-                                                console.log('onOpenChange?');
                                                 if (isPopoverOpen && !details.open) {
                                                     return;
                                                 }
-                                            }, openOnClick: true, children: [_jsx(Combobox.Control, { className: "rounded-lg border-1 shadow-none outline-none", children: _jsx(Combobox.Input, { placeholder: "Search country..." }) }), _jsx(Portal, { children: _jsx(Combobox.Positioner, { style: { zIndex: 9999 }, children: _jsx(Combobox.Content, { className: "w-full", style: { zIndex: 9999 }, children: _jsx(Combobox.ItemGroup, { children: countriesCollection.items
-                                                                    .filter((country) => search === '' ||
-                                                                    country.name
-                                                                        .toLowerCase()
-                                                                        .includes(search.toLowerCase()) ||
-                                                                    country.areaCode.includes(search))
-                                                                    .map((country) => (_jsxs(Combobox.Item, { item: country, children: [_jsxs(Combobox.ItemText, { children: [_jsx(country.flag, { className: "mr-2 inline-block size-5" }), country.name, " (", country.areaCode, ")"] }), _jsx(Combobox.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, country.code))) }) }) }) })] }) }) }) })] }), _jsx(Field.Input, { ...(mobileNumberRegistration || {}), style: { paddingLeft: '0.5rem' }, value: mobileNumber, onChange: handleMobileChange, placeholder: "Enter mobile number" })] }), _jsx(Field.ErrorText, { children: error })] }));
+                                            }, openOnClick: true, children: [_jsx(Combobox.Control, { className: "rounded-lg border-1 shadow-none outline-none", children: _jsx(Combobox.Input, { placeholder: "Search country..." }) }), _jsx(Portal, { children: _jsx(Combobox.Positioner, { style: { zIndex: 9999 }, children: _jsx(Combobox.Content, { className: "w-full", style: { zIndex: 9999 }, children: _jsx(Combobox.ItemGroup, { children: (() => {
+                                                                    const filteredCountries = countriesCollection.items.filter((country) => search === '' ||
+                                                                        country.name
+                                                                            .toLowerCase()
+                                                                            .includes(search.toLowerCase()) ||
+                                                                        country.areaCode.includes(search));
+                                                                    if (filteredCountries.length === 0) {
+                                                                        return (_jsx("div", { className: "p-3 text-center text-text-placeholder", children: "No countries found" }));
+                                                                    }
+                                                                    return filteredCountries.map((country) => (_jsxs(Combobox.Item, { item: country, children: [_jsxs(Combobox.ItemText, { children: [_jsx(country.flag, { className: "mr-2 inline-block size-5" }), country.name, " (", country.areaCode, ")"] }), _jsx(Combobox.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, country.code)));
+                                                                })() }) }) }) })] }) }) }) })] }), _jsx(Field.Input, { ...(mobileNumberRegistration || {}), style: { paddingLeft: '0.5rem' }, value: mobileNumber, onChange: handleMobileChange, placeholder: "Enter mobile number" })] }), _jsx(Field.ErrorText, { children: error })] }));
 };
 const countriesListCollection = (countries) => createListCollection({
     items: countries,

package/dist/schemas/forgotPasswordSchema.d.ts

@@ -0,0 +1,32 @@
+import { z } from 'zod';
+type MobileNumberParser = {
+    validate: (val: unknown) => val is string;
+};
+export declare const createForgotPasswordSchema: (mobileNumberParser: MobileNumberParser) => z.ZodEffects<z.ZodObject<{
+    password: z.ZodString;
+    confirmPassword: z.ZodString;
+    mobileNumber: z.ZodEffects<z.ZodString, string, string>;
+    verificationCode: z.ZodEffects<z.ZodString, string, string>;
+}, "strip", z.ZodTypeAny, {
+    password: string;
+    confirmPassword: string;
+    mobileNumber: string;
+    verificationCode: string;
+}, {
+    password: string;
+    confirmPassword: string;
+    mobileNumber: string;
+    verificationCode: string;
+}>, {
+    password: string;
+    confirmPassword: string;
+    mobileNumber: string;
+    verificationCode: string;
+}, {
+    password: string;
+    confirmPassword: string;
+    mobileNumber: string;
+    verificationCode: string;
+}>;
+export type ForgotPasswordSchema = z.infer<ReturnType<typeof createForgotPasswordSchema>>;
+export {};

package/dist/schemas/forgotPasswordSchema.js

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+export const createForgotPasswordSchema = (mobileNumberParser) => z.object({
+    password: z.string().min(8, 'Password must be 8 or more characters').max(20, 'Password must not be more than 20 characters'),
+    confirmPassword: z.string().min(8, 'Password must be 8 or more characters').max(20, 'Password must not be more than 20 characters'),
+    mobileNumber: z.string().superRefine((v, ctx) => {
+        if (!mobileNumberParser.validate(v)) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Invalid mobile number' });
+        }
+    }),
+    verificationCode: z.string().refine((v) => /^\d{4,6}$/.test(v), 'Invalid OTP'),
+}).superRefine((val, ctx) => {
+    if (val.password !== val.confirmPassword) {
+        ctx.addIssue({ path: ['confirmPassword'], code: z.ZodIssueCode.custom, message: 'Passwords do not match' });
+    }
+});

package/dist/services/game.d.ts

@@ -9,7 +9,7 @@ export interface GameSessionQueryVariables__Legacy {
 }
 export declare const getGameSession__legacy: (id: string, options?: GraphQLRequestOptions) => Promise<GameSession | null>;
 export type CreateGameSessionError__Legacy = {
-    name: 'GameDoesNotExistError';
+    name: 'GameDoesNotExistError' | 'GameProviderNotEnabledError' | 'GameTypeNotEnabledError';
     message: string;
 };
 export interface CreateGameSessionMutation__Legacy {

package/dist/services/game.js

@@ -36,4 +36,6 @@ const ERROR_CODES_MESSAGE_MAP = {
     GameProviderError: 'Game provider error',
     GameSessionAlreadyClosedError: 'Game session is already closed',
     GameSessionDoesNotExistError: 'Game session does not exist',
+    GameProviderNotEnabledError: 'Game provider is not enabled',
+    GameTypeNotEnabledError: 'Game type is not enabled',
 };

package/dist/services/queries.d.ts

@@ -9,7 +9,7 @@ export declare const REDEEM_POINTS_TO_CASH = "\n  mutation RedeemPointsToCash($i
 export declare const POINTS_WALLET_TRANSACTIONS = "\n  query PointsWalletTransactions(\n    $first: Int\n    $after: Cursor\n    $filter: MemberPointsWalletTransactionFilterInput\n  ) {\n    member {\n      pointsWalletTransactions(first: $first, after: $after, filter: $filter) {\n        edges {\n          cursor\n          node {\n            ... on PointsWalletTransaction {\n              id\n              type\n              amount\n              balance\n              dateTimeCreated\n            }\n          }\n        }\n        totalCount\n        pageInfo {\n          hasNextPage\n          endCursor\n        }\n      }\n    }\n  }\n";
 export declare const GAME_SESSION = "\n  query GameSession($id: ObjectId!) {\n    node(id: $id) {\n      ... on GameSession {\n        id\n        game\n        status\n        launchUrl\n        launchOptions\n      }\n    }\n  }\n";
 export declare const GAME_SESSION__LEGACY = "\n  query GameSession($id: ObjectId!) {\n    node(id: $id) {\n      ... on GameSession {\n        id\n        game {\n          id\n        }\n        status\n        launchUrl\n        dateTimeCreated\n        dateTimeLastUpdated\n      }\n    }\n  }\n";
-export declare const CREATE_GAME_SESSION = "\n  mutation CreateGameSession($input: CreateGameSessionInput!) {\n    createGameSession(input: $input) {\n      ... on GameDoesNotExistError {\n        name: __typename\n        message\n      }\n    }\n  }\n";
+export declare const CREATE_GAME_SESSION = "\n  mutation CreateGameSession($input: CreateGameSessionInput!) {\n    createGameSession(input: $input) {\n      ... on GameDoesNotExistError {\n        name: __typename\n        message\n      }\n      ... on GameProviderNotEnabledError {\n        name: __typename\n        message\n      }\n      ... on GameTypeNotEnabledError {\n        name: __typename\n        message\n      }\n    }\n  }\n";
 export declare const END_GAME_SESSION = "\n  mutation EndGameSession($input: EndGameSessionInput!) {\n    endGameSession(input: $input)\n  }\n";
 export declare const END_GAME_SESSION__LEGACY = "\n  mutation EndGameSession($input: EndGameSessionInput!) {\n    endGameSession(input: $input) {\n      ... on GameSessionDoesNotExistError {\n        name: __typename\n        message\n      }\n      ... on GameSessionAlreadyClosedError {\n        name: __typename\n        message\n      }\n      ... on GameProviderError {\n        name: __typename\n        message\n      }\n    }\n  }\n";
 export declare const RECOMMENDED_GAMES = "\n  query RecommendedGames {\n    recommendedGames {\n      id\n      name\n      type\n      provider\n    }\n  }\n";

package/dist/services/queries.js

@@ -167,6 +167,14 @@ export const CREATE_GAME_SESSION = /* GraphQL */ `
         name: __typename
         message
       }
+      ... on GameProviderNotEnabledError {
+        name: __typename
+        message
+      }
+      ... on GameTypeNotEnabledError {
+        name: __typename
+        message
+      }
     }
   }
 `;

package/dist/services/wallet.d.ts

@@ -556,7 +556,7 @@ export interface GameSessionQueryVariables {
 }
 export declare const getGameSession: (id: string, options?: GraphQLRequestOptions) => Promise<GameSession | null>;
 export type CreateGameSessionError = {
-    name: 'GameDoesNotExistError';
+    name: 'GameDoesNotExistError' | 'GameProviderNotEnabledError' | 'GameTypeNotEnabledError';
     message: string;
 };
 export interface CreateGameSessionMutation {

package/dist/services/wallet.js

@@ -550,6 +550,8 @@ const ERROR_CODES_MESSAGE_MAP = {
     DepositPromoMaximumAmountExceededError: 'Deposit amount exceeds maximum amount for selected promo',
     DepositPromoMinimumAmountNotMetError: 'Deposit amount does not meet minimum amount for selected promo',
     GameDoesNotExistError: 'Game does not exist',
+    GameProviderNotEnabledError: 'Game provider is not enabled',
+    GameTypeNotEnabledError: 'Game type is not enabled',
     InsufficientPointsError: 'Insufficient points',
     InvalidTransactionPasswordError: 'Invalid transaction password',
     InvalidWithdrawalAmountError: 'Invalid withdrawal amount',

package/package.json

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