@opexa/portal-components 0.0.873 → 0.0.874

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

@@ -1,7 +1,7 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
         view: "form" | "vca";
-        status: "failed" | "waiting" | "processing" | "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: "failed" | "waiting" | "processing" | "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: "failed" | "waiting" | "processing" | "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/Jackpots/Jackpots.module.css

@@ -69,7 +69,7 @@
   content: '';
   position: absolute;
   top: var(--light-rays-top, 150px);
-  left: calc(50% - 90px);
+  left: var(--light-rays-left, calc(50% - 90px));
   margin: -100vmax;
   width: 200vmax;
   height: 200vmax;
@@ -218,4 +218,71 @@
   }
 }
 
+ /* --- Pulse Animations --- */
+  @keyframes pulseError {
+    0% {
+      background-color: #98a2b3;
+    }
+    100% {
+      background-color: #f04438;
+    }
+  }
+  @keyframes pulseSuccess {
+    0% {
+      background-color: #98a2b3;
+    }
+    100% {
+      background-color: #17b26a;
+    }
+  }
+  .pulse-error {
+    animation: pulseError 0.2s infinite alternate;
+  }
+  .pulse-success {
+    animation: pulseSuccess 0.2s infinite alternate;
+  }
 
+
+  /* --- Flicker Scale Fade (Stars) --- */
+  @keyframes flickerScaleFade {
+    0% {
+      opacity: 0;
+      transform: scale(1);
+    }
+    10% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    15% {
+      opacity: 0.7;
+    }
+    20% {
+      opacity: 1;
+    }
+    30% {
+      opacity: 0.9;
+    }
+    60% {
+      opacity: 1;
+      transform: scale(1.05);
+    }
+    90% {
+      opacity: 0.6;
+      transform: scale(1.08);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.1);
+    }
+  }
+  .flicker-scale-fade {
+    animation: flickerScaleFade 1.2s ease-in-out infinite;
+    opacity: 0;
+    transform: scale(1);
+  }
+  .flicker-scale-fade-2 {
+    animation: flickerScaleFade 1.2s ease-in-out infinite;
+    opacity: 0;
+    transform: scale(1);
+    animation-delay: -0.5s;
+  }

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarousel.client.d.ts

@@ -26,6 +26,7 @@ interface StyleEntries {
     itemRoot?: CSSProperties;
 }
 export interface JackpotsCarouselProps {
+    variant?: 'crazywin' | 'happybingo';
     layout: 'carousel';
     /** @default "Promos" */
     heading?: string | ReactNode;

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

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

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

@@ -0,0 +1,8 @@
+import type { ClassNameEntries } from './JackpotsCarousel';
+export interface JackpotsCarouselItemCrazyWinProps {
+    index: number;
+    className?: ClassNameEntries;
+    /** @default "/jackpots" */
+    viewAllUrl?: string;
+}
+export declare function JackpotsCarouselItemCrazyWin({ index, }: JackpotsCarouselItemCrazyWinProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,144 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress } from '@ark-ui/react/progress';
+import isMobile from 'is-mobile';
+import Image from 'next/image';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useIntersectionObserver } from 'usehooks-ts';
+import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
+import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
+import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../../icons/ChevronRightIcon.js';
+import 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 styles from '../Jackpots.module.css';
+import { JACKPOTS_VARIATIONS } from '../utils.js';
+import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
+export function JackpotsCarouselItemCrazyWin({ index, }) {
+    const [ref] = useIntersectionObserver({
+        threshold: 0.5,
+        rootMargin: '50px',
+    });
+    const jackpot = useJackpotsCarouselItemContext();
+    const localeInfo = useLocaleInfo();
+    const isPayingOut = jackpot.drawing;
+    const jackpotAmount = jackpot.pool;
+    const [showSeeDetailsButton, setShowSeeDetailsButton] = useState(true);
+    const [infoIndex, setInfoIndex] = useState(0);
+    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]);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setInfoIndex((i) => (i + 1) % getInfoBlocks().length);
+            setShowSeeDetailsButton((v) => !v);
+        }, 4000);
+        return () => clearInterval(interval);
+    }, [getInfoBlocks]);
+    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]);
+    // Memoize arrow images array
+    const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => _jsx(Arrow, { index: i }, i)), [Arrow]);
+    const [mainTooltipOpen, setMainTooltipOpen] = useState(false);
+    const isMobileDevice = useMemo(() => isMobile(), []);
+    useEffect(() => {
+        if (isMobileDevice && mainTooltipOpen) {
+            const timeout = setTimeout(() => setMainTooltipOpen(false), 3000);
+            return () => clearTimeout(timeout);
+        }
+    }, [mainTooltipOpen, isMobileDevice]);
+    if (jackpot.status === 'DISABLED' && jackpot.drawing !== true) {
+        return null;
+    }
+    const variation = JACKPOTS_VARIATIONS[index % JACKPOTS_VARIATIONS.length];
+    return (_jsxs("div", { className: "w-full shrink-0", children: [_jsxs("div", { ref: ref, className: twMerge('relative flex w-full shrink-0 rounded-t-2xl p-3 text-center lg:gap-4 lg:p-5', variation.background), children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [[
+                                [
+                                    styles['flicker-scale-fade-2'],
+                                    'absolute right-[38%] top-[2%] h-2 w-2 delay-75',
+                                ],
+                                [
+                                    styles['flicker-scale-fade'],
+                                    'absolute right-[20%] top-[10%] h-3 w-3',
+                                ],
+                                [
+                                    styles['flicker-scale-fade-2'],
+                                    'absolute right-[30%] top-[10%] h-5 w-5',
+                                ],
+                                [
+                                    styles['flicker-scale-fade'],
+                                    'absolute right-[36%] top-[35%] h-3 w-3',
+                                ],
+                                [
+                                    styles['flicker-scale-fade'],
+                                    'absolute right-[15%] top-[56%] h-3 w-3',
+                                ],
+                                [
+                                    styles['flicker-scale-fade-2'],
+                                    'absolute right-[50%] top-[55%] h-4 w-4',
+                                ],
+                            ].map(([animationClass, positionClass], i) => (_jsx(Image, { src: star, alt: "star", draggable: "false", className: twMerge(animationClass, positionClass) }, i))), _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "mb-2 flex gap-1 font-medium", children: _jsxs("div", { className: twMerge('flex w-fit items-center justify-center gap-1 rounded-[10px] border border-[#82F0D0] px-[10px] py-1 text-[#82F0D0] text-xs lg:text-sm'), children: [_jsx("div", { className: twMerge('h-[6px] w-[6px] animate-color rounded-full', isPayingOut
+                                                                            ? styles['pulse-error']
+                                                                            : styles['pulse-success']) }), _jsx("div", { className: twMerge('rounded text-[#CECFD2]'), children: isPayingOut ? 'Paying Out' : 'Accumulating' })] }) }), _jsx("div", { className: "mb-2 font-semibold text-[18px] text-white lg:mb-0 lg:text-2xl", children: jackpot?.name }), _jsx("div", { className: `${variation.poolBg} ${variation.textColor} flex w-fit rounded-lg px-2 font-semibold text-[26px] lg:text-[36px]`, children: formatNumber(jackpotAmount, {
+                                                                currency: localeInfo.currency.code,
+                                                                minDecimalPlaces: 2,
+                                                                maxDecimalPlaces: 2,
+                                                            }) })] }), _jsx(Image, { width: 175, height: 175, src: treasureChest, alt: "treasure chest", className: twMerge('absolute top-[0px] right-[-3px] h-[124px] w-[124px] md:top-0 lg:top-[-30px] lg:h-[175px] lg:w-[175px]'), priority: false, loading: "lazy" })] }) }) }) }), _jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-1 flex justify-between", children: [_jsx("div", { className: "font-semibold text-text-primary-900 text-xs", "aria-live": "polite", children: formatNumber(0, {
+                                                    currency: localeInfo.currency.code,
+                                                    compact: true,
+                                                }) }), _jsxs("div", { className: "relative flex items-center justify-end gap-1.5", children: [isPayingOut ? (_jsx("div", { className: "flex w-6 items-center", children: [0, 1.5, 3].map((left, i) => (_jsx("div", { className: twMerge(`absolute left-${left}`, styles[`animate-arrow-red-flash-${i + 1}`]), children: _jsx(ChevronLeftIcon, { className: "size-4.5" }) }, i))) })) : (_jsx("div", { className: "flex w-6 items-center", children: [0, 1.5, 3].map((left, i) => (_jsx("div", { className: twMerge(`absolute left-${left}`, styles[`animate-arrow-green-flash-${i + 1}`]), children: _jsx(ChevronRightIcon, { className: "size-4.5" }) }, i))) })), _jsx("div", { className: "font-semibold text-text-primary-900 text-xs", children: formatNumber(jackpot?.maximumJackpotPoolLimit, {
+                                                            currency: localeInfo.currency.code,
+                                                            compact: true,
+                                                        }) })] })] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuenow": getPercentage(jackpot.pool, jackpot.maximumJackpotPoolLimit), "aria-valuemax": 100, "aria-label": "Jackpot progress", children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full', variation.progressBg), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) }), _jsx("div", { className: "mt-2 h-2 text-left text-[#F5F5F6] text-xs lg:h-auto lg:text-sm", dangerouslySetInnerHTML: { __html: getInfoBlocks()[infoIndex] } }, infoIndex)] })] }), 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, {
+                                                currency: localeInfo.currency.code,
+                                                minDecimalPlaces: 2,
+                                                maxDecimalPlaces: 2,
+                                            }) || 'N/A'] })] }), _jsxs("div", { children: ["Multiplier Requirement:", ' ', _jsx("span", { className: "font-semibold text-[#FFE5AF]", children: jackpot.minimumMultiplier
+                                            ? `${jackpot.minimumMultiplier}X or more`
+                                            : 'N/A' })] })] })), _jsx("button", { type: "button", className: 'text-nowrap text-[#FFE5AF] text-sm underline underline-offset-4', children: "Jackpot Rules" })] })] }));
+}
+const getAccumulatingJackpotDescription = (part, total) => {
+    const percentage = total === 0 ? 0 : (part / total) * 100;
+    return percentage <= 90
+        ? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
+        : '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
+};
+function getPercentage(value, total) {
+    const v = parseDecimal(value, 0);
+    const t = parseDecimal(total, 0);
+    return t === 0 ? 0 : (v / t) * 100;
+}

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

@@ -0,0 +1,11 @@
+export declare const JACKPOTS_VARIATIONS: {
+    background: string;
+    progressBg: string;
+    textColor: string;
+    poolBg: string;
+    multiplierColor: string;
+    multiplierBg: string;
+    topPayoutImgBorderColor: string;
+    topPayoutImgBg: string;
+    raysColor: string;
+}[];

package/dist/components/Jackpots/utils.js

@@ -0,0 +1,38 @@
+export const JACKPOTS_VARIATIONS = [
+    // Green
+    {
+        background: 'bg-[linear-gradient(241.67deg,#1A534C_1.19%,#051B29_100%)]',
+        progressBg: 'bg-[#073333]',
+        textColor: 'text-[#09232E]',
+        poolBg: 'bg-[linear-gradient(6.3deg,#215B5F_4.86%,#88FFD7_119.22%)]',
+        multiplierColor: 'text-[#fff]',
+        multiplierBg: 'bg-[linear-gradient(241.67deg,#1A534C_1.19%,#051B29_100%)]',
+        topPayoutImgBorderColor: 'bg-[linear-gradient(6.3deg,#215B5F_4.86%,#88FFD7_119.22%)]',
+        topPayoutImgBg: 'bg-[linear-gradient(241.67deg,#1A534C_1.19%,#051B29_100%)]',
+        raysColor: '[--color-jackpot-rays-primary:#0f3333] [--color-jackpot-rays-secondary:#144342]',
+    },
+    // Purple
+    {
+        background: 'bg-[linear-gradient(241.67deg,#1C1D83_1.19%,#31033F_100%)]',
+        progressBg: 'bg-[#301059]',
+        textColor: 'text-[#fff]',
+        poolBg: 'bg-[linear-gradient(180deg,#7442D9_0%,#451C7D_100%)]',
+        multiplierBg: 'bg-[linear-gradient(241.67deg,#1C1D83_1.19%,#31033F_100%)]',
+        multiplierColor: 'text-[#fff]',
+        topPayoutImgBorderColor: 'bg-[linear-gradient(180deg,_#9E77ED_0%,#8057D9_100%)]',
+        topPayoutImgBg: 'bg-[linear-gradient(241.67deg,#1C1D83_1.19%,#31033F_100%)]',
+        raysColor: '[--color-jackpot-rays-primary:#251166] [--color-jackpot-rays-secondary:#352676]',
+    },
+    // Red
+    {
+        background: 'bg-[linear-gradient(241.67deg,#F86246_1.19%,#5B0A26_100%)]',
+        progressBg: 'bg-[#A63D40]',
+        textColor: 'text-[#fff]',
+        poolBg: 'bg-[linear-gradient(180deg,_#D05C58_0%,_#75222E_100%)]',
+        multiplierBg: 'bg-[linear-gradient(241.67deg,#F86246_1.19%,#5B0A26_100%)]',
+        multiplierColor: 'text-[#fff]',
+        topPayoutImgBorderColor: 'bg-[linear-gradient(180deg,#D05C58_0%,#75222E_100%)]',
+        topPayoutImgBg: 'bg-[linear-gradient(241.67deg,#F86246_1.19%,#5B0A26_100%)]',
+        raysColor: '[--color-jackpot-rays-primary:#c04e48] [--color-jackpot-rays-secondary:#8f2731]',
+    },
+];

package/dist/constants/Endpoint.js

@@ -1,45 +1,56 @@
 import { ENVIRONMENT } from './EnvVar.js';
 export const ACCOUNT_GRAPHQL_ENDPOINT = {
     development: 'https://account.development.opexa.io/graphql',
+    staging: 'https://account.staging.atalos.io/graphql',
     production: 'https://account.opexa.io/graphql',
 }[ENVIRONMENT];
 export const FILE_GRAPHQL_ENDPOINT = {
     development: 'https://file.development.opexa.io/graphql',
+    staging: 'https://file.staging.atalos.io/graphql',
     production: 'https://file.opexa.io/graphql',
 }[ENVIRONMENT];
 export const GAME_GRAPHQL_ENDPOINT = {
     development: 'https://game.development.opexa.io/graphql',
+    staging: 'https://game.staging.atalos.io/graphql',
     production: 'https://game.opexa.io/graphql',
 }[ENVIRONMENT];
 export const PORTAL_GRAPHQL_ENDPOINT = {
     development: 'https://portal.development.opexa.io/graphql',
+    staging: 'https://portal.staging.atalos.io/graphql',
     production: 'https://portal.opexa.io/graphql',
 }[ENVIRONMENT];
 export const REPORT_GRAPHQL_ENDPOINT = {
     development: 'https://report.development.opexa.io/graphql',
+    staging: 'https://report.staging.atalos.io/graphql',
     production: 'https://report.opexa.io/graphql',
 }[ENVIRONMENT];
 export const TRIGGER_GRAPHQL_ENDPOINT = {
     development: 'https://trigger.development.opexa.io/graphql',
+    staging: 'https://trigger.staging.atalos.io/graphql',
     production: 'https://trigger.opexa.io/graphql',
 }[ENVIRONMENT];
 export const WALLET_GRAPHQL_ENDPOINT = {
     development: 'https://wallet.development.opexa.io/graphql',
+    staging: 'https://wallet.staging.atalos.io/graphql',
     production: 'https://wallet.opexa.io/graphql',
 }[ENVIRONMENT];
 export const AUTH_ENDPOINT = {
     development: 'https://auth.development.opexa.io',
+    staging: 'https://auth.staging.atalos.io',
     production: 'https://auth.opexa.io',
 }[ENVIRONMENT];
 export const CMS_PORTAL_ENDPOINT = {
     development: 'https://portal-api.opexacms.io',
+    staging: 'https://portal-api.staging.opexacms.io',
     production: 'https://portal-api.opexacms.io',
 }[ENVIRONMENT];
 export const STATIC_ENDPOINT = {
     development: 'https://static.development.atalos.io',
+    staging: 'https://static.atalos.io',
     production: 'https://static.atalos.io',
 }[ENVIRONMENT];
 export const OPEXAPAY_ENDPOINT = {
     development: 'https://external.opexapay.development.opexa.io',
+    staging: 'https://external.opexapay.staging.atalos.io',
     production: 'https://external.opexapay.opexa.io',
 }[ENVIRONMENT];

package/dist/constants/EnvVar.d.ts

@@ -1,5 +1,5 @@
 export declare const SITE_ID: string;
 export declare const PLATFORM_ID: string;
 export declare const PLATFORM_CODE: string;
-export declare const ENVIRONMENT: "production" | "development";
+export declare const ENVIRONMENT: "production" | "staging" | "development";
 export declare const INTERNALS__REPORT_WEB_VITALS: boolean;

package/dist/constants/EnvVar.js

@@ -15,7 +15,7 @@ export const PLATFORM_CODE = z
     .trim()
     .parse(process.env.NEXT_PUBLIC_PLATFORM_CODE);
 export const ENVIRONMENT = z
-    .enum(['production', 'development'])
+    .enum(['production', 'staging', 'development'])
     .catch('development')
     .parse(process.env.NEXT_PUBLIC_ENVIRONMENT);
 export const INTERNALS__REPORT_WEB_VITALS = z