@opexa/portal-components 0.0.596 → 0.0.598

package/dist/client/hooks/useGlobalStore.d.ts

@@ -53,6 +53,8 @@ export interface TermsOfUseStore extends TermsAndConditionsStore {
 }
 export interface ResponsibleGamingStore extends TermsAndConditionsStore {
 }
+export interface OnboardingStore extends TermsAndConditionsStore {
+}
 export interface ResponsibleGamingReminderStore extends PopupStore {
 }
 export interface HasPendingBonusStore {
@@ -82,6 +84,7 @@ export interface GlobalStore {
     termsAndConditions: TermsAndConditionsStore;
     termsOfUse: TermsOfUseStore;
     responsibleGaming: ResponsibleGamingStore;
+    onboarding: OnboardingStore;
     responsibleGamingReminder: ResponsibleGamingReminderStore;
     pendingBonus: HasPendingBonusStore;
 }

package/dist/client/hooks/useGlobalStore.js

@@ -372,6 +372,39 @@ export const useGlobalStore = create()(devtools(subscribeWithSelector((set) => (
         },
         '~touched': false,
     },
+    onboarding: {
+        open: false,
+        setOpen(open) {
+            set((prev) => ({
+                onboarding: {
+                    ...prev.onboarding,
+                    open,
+                    '~touched': true,
+                },
+            }));
+        },
+        next: null,
+        setNext(next) {
+            set((prev) => ({
+                onboarding: {
+                    ...prev.onboarding,
+                    next,
+                    '~touched': true,
+                },
+            }));
+        },
+        accepted: false,
+        setAccepted(accepted) {
+            set((prev) => ({
+                onboarding: {
+                    ...prev.onboarding,
+                    accepted,
+                    '~touched': true,
+                },
+            }));
+        },
+        '~touched': false,
+    },
     responsibleGamingReminder: {
         open: false,
         setOpen(open) {

package/dist/components/Disclaimer/DisclaimerV3.d.ts

@@ -6,5 +6,6 @@ export interface DisclaimerV3Props {
     responsibleGamingLogo?: ImageProps['src'];
     pagcorLogo?: ImageProps['src'];
     redirectUrlOnNoConsent?: string;
+    openOnboardingOnAgree?: boolean;
 }
 export declare function DisclaimerV3(props: DisclaimerV3Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/DisclaimerV3.js

@@ -17,6 +17,7 @@ export function DisclaimerV3(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         termsOfUse: ctx.termsOfUse,
         responsibleGaming: ctx.responsibleGaming,
+        onboarding: ctx.onboarding,
     })));
     const checked = (globalStore.termsOfUse.accepted &&
         globalStore.responsibleGaming.accepted) ||
@@ -37,6 +38,9 @@ export function DisclaimerV3(props) {
                                                 return;
                                             }
                                             disclaimer.close();
+                                            if (props.openOnboardingOnAgree) {
+                                                globalStore.onboarding.setOpen(true);
+                                            }
                                         }, children: "I Agree" }), _jsx(Button, { type: "button", onClick: () => {
                                             if (props.redirectUrlOnNoConsent) {
                                                 window.location.href = props.redirectUrlOnNoConsent;

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

@@ -7,6 +7,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useCallback, useEffect, useId, useMemo, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useIntersectionObserver } from 'usehooks-ts';
 import { useJackpotPayoutsQuery } from '../../../client/hooks/useJackpotPayoutsQuery.js';
 import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
 import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
@@ -27,6 +28,9 @@ import { parseDecimal } from '../../../utils/parseDecimal.js';
 import styles from '../Jackpots.module.css';
 import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
 export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', }) {
+    const [ref, inView] = useIntersectionObserver({
+        threshold: 0.75,
+    });
     const jackpot = useJackpotsCarouselItemContext();
     const jackpotPayoutsQuery = useJackpotPayoutsQuery({
         first: 30,
@@ -36,7 +40,7 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
             },
         },
     }, {
-        enabled: typeof window !== 'undefined',
+        enabled: typeof window !== 'undefined' && inView,
     });
     const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
     const latestJackpotPayout = jackpotPayouts[0] ?? [];
@@ -88,7 +92,7 @@ export function JackpotsCarouselItem({ style, className, viewAllUrl, animate = t
     if (jackpot.status === 'DISABLED' && jackpot.drawing !== true) {
         return null;
     }
-    return (_jsxs("div", { className: twMerge('relative flex w-full shrink-0 rounded-2xl border border-border-primary bg-bg-tertiary p-3 text-center lg:gap-4 lg:p-5', className?.itemRoot), style: style, children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [isPayingOut ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx("span", { className: "full size-1.5 animate-pulse rounded bg-utility-success-500" }), "Paying Out"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "Accumulating"] })), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(jackpotAmount, {
+    return (_jsxs("div", { ref: ref, className: twMerge('relative flex w-full shrink-0 rounded-2xl border border-border-primary bg-bg-tertiary p-3 text-center lg:gap-4 lg:p-5', className?.itemRoot), style: style, children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [isPayingOut ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx("span", { className: "full size-1.5 animate-pulse rounded bg-utility-success-500" }), "Paying Out"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "Accumulating"] })), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(jackpotAmount, {
                                                             currency: localeInfo.currency.code,
                                                             minDecimalPlaces: 2,
                                                             maxDecimalPlaces: 2,

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

@@ -25,7 +25,7 @@ import { JackpotsListItemRules } from './JackpotsListItemRules.js';
 import { useJackpotsListItemData } from './useJackpotsListItemData.js';
 export function JackpotsListItemDesktop({ animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', className, ...props }) {
     const jackpot = useJackpotsListItemContext();
-    const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, } = useJackpotsListItemData();
+    const { rootRef, jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, } = useJackpotsListItemData();
     const ProfileIcon = () => jackpotProfileShape === 'oval' ? (_jsxs("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: [_jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }), _jsx("div", { className: twMerge('absolute right-0 bottom-0 flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs', className?.latestPayoutRankRoot), children: "1st" })] })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" }), _jsx("div", { className: twMerge('-right-0 absolute bottom-0 z-20 flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 text-center font-bold text-brand-950 text-xs', className?.latestPayoutRankRoot), children: "1st" })] }));
     const PayoutBadge = () => (_jsxs("div", { className: twMerge('flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', className?.latestPayoutBadgeRoot), children: [_jsx(Trophy01Icon, { className: twMerge('size-3.5 text-utility-brand-600', className?.latestPayoutBadgeIcon) }), "Latest Payout"] }));
     const ProgressBar = () => (_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", children: formatNumber(0, {
@@ -68,7 +68,7 @@ export function JackpotsListItemDesktop({ animate = true, customJackpotChestImag
     if (jackpot.status === 'DISABLED' && jackpot.drawing !== true) {
         return null;
     }
-    return (_jsxs("div", { className: twMerge('rounded-2xl border border-border-primary bg-bg-tertiary', className?.itemRoot), children: [_jsxs("div", { style: props.style, className: twMerge('relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5'), children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [isPayingOut ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx("span", { className: "full size-1.5 animate-pulse rounded bg-utility-success-500" }), "Paying Out"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "Accumulating"] })), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(jackpotAmount, {
+    return (_jsxs("div", { ref: rootRef, className: twMerge('rounded-2xl border border-border-primary bg-bg-tertiary', className?.itemRoot), children: [_jsxs("div", { style: props.style, className: twMerge('relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5'), children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [isPayingOut ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx("span", { className: "full size-1.5 animate-pulse rounded bg-utility-success-500" }), "Paying Out"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "Accumulating"] })), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(jackpotAmount, {
                                                                     currency: localeInfo.currency.code,
                                                                     minDecimalPlaces: 2,
                                                                     maxDecimalPlaces: 2,

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

@@ -33,7 +33,7 @@ function getPercentage(value, total) {
 }
 export function JackpotsListItemMobile({ animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', className, ...props }) {
     const jackpot = useJackpotsListItemContext();
-    const { jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, } = useJackpotsListItemData();
+    const { rootRef, jackpotPayouts, topJackpotPayout, filteredGameProviders, localeInfo, isPayingOut, jackpotAmount, arrowImages, getAccumulatingJackpotDescription, } = useJackpotsListItemData();
     const [isDetailsVisible, setIsDetailsVisible] = useState(false);
     const [mainTooltipOpen, setMainTooltipOpen] = useState(false);
     const [minLimitTooltipOpen, setMinLimitTooltipOpen] = useState(false);
@@ -103,7 +103,7 @@ export function JackpotsListItemMobile({ animate = true, customJackpotChestImage
     if (jackpot.status === 'DISABLED' && jackpot.drawing !== true) {
         return null;
     }
-    return (_jsxs("div", { className: twMerge('rounded-2xl border border-border-primary bg-bg-primary', className?.itemRoot), children: [_jsxs("div", { style: props.style, className: "relative flex shrink-0 rounded-2xl bg-bg-tertiary p-3 text-center lg:gap-4 lg:p-5", children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_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: [isPayingOut ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx("span", { className: "full size-1.5 animate-pulse rounded bg-utility-success-500" }), "Paying Out"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "Accumulating"] })), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(jackpotAmount, {
+    return (_jsxs("div", { ref: rootRef, className: twMerge('rounded-2xl border border-border-primary bg-bg-primary', className?.itemRoot), children: [_jsxs("div", { style: props.style, className: "relative flex shrink-0 rounded-2xl bg-bg-tertiary p-3 text-center lg:gap-4 lg:p-5", children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_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: [isPayingOut ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx("span", { className: "full size-1.5 animate-pulse rounded bg-utility-success-500" }), "Paying Out"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "Accumulating"] })), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(jackpotAmount, {
                                                                 currency: localeInfo.currency.code,
                                                                 minDecimalPlaces: 2,
                                                                 maxDecimalPlaces: 2,

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

@@ -1,4 +1,5 @@
 export declare function useJackpotsListItemData(): {
+    rootRef: (node?: Element | null) => void;
     jackpotPayouts: import("../../../types").JackpotPayout[];
     topJackpotPayout: import("../../../types").JackpotPayout;
     filteredGameProviders: import("../../../types").GameProviderData[];

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } 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 { GAME_PROVIDER_DATA } from '../../../constants/index.js';
@@ -12,6 +13,9 @@ export function useJackpotsListItemData() {
     const jackpotsListProps = useJackpotsListPropsContext();
     const jackpot = useJackpotsListItemContext();
     const gameProviders = jackpotsListProps.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
+    const [rootRef, inView] = useIntersectionObserver({
+        threshold: 0.5,
+    });
     const jackpotPayoutsQuery = useJackpotPayoutsQuery({
         first: 30,
         filter: {
@@ -20,7 +24,7 @@ export function useJackpotsListItemData() {
             },
         },
     }, {
-        enabled: typeof window !== 'undefined',
+        enabled: typeof window !== 'undefined' && inView,
     });
     const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
     const topJackpotPayout = jackpotPayouts[0] ?? [];
@@ -52,6 +56,7 @@ export function useJackpotsListItemData() {
             : '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
     };
     return {
+        rootRef,
         jackpotPayouts,
         topJackpotPayout,
         filteredGameProviders,

package/dist/components/Onboarding/Onboarding.d.ts

@@ -0,0 +1 @@
+export declare function Onboarding(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Onboarding/Onboarding.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const OnboardingV1 = dynamic(() => import('./OnboardingV1.lazy.js').then((m) => m.Onboarding), {
+    ssr: false,
+    loading: () => null,
+});
+export function Onboarding() {
+    const touched = useGlobalStore(useShallow((ctx) => ctx.onboarding['~touched']));
+    if (!touched) {
+        return null;
+    }
+    return _jsx(OnboardingV1, {});
+}

package/dist/components/Onboarding/OnboardingV1.lazy.d.ts

@@ -0,0 +1 @@
+export declare function Onboarding(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Onboarding/OnboardingV1.lazy.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import firstStepBackground from '../../images/first-step-background.png';
+import fourthStepBackground from '../../images/fourth-step-background.png';
+import secondStepBackground from '../../images/second-step-background.png';
+import thirdStepBackground from '../../images/third-step-background.png';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+const AnimatedHeader = ({ text }) => {
+    if (text === '88PLAY') {
+        return (_jsx("div", { className: "relative", children: _jsxs("h1", { className: "venus-rising flex items-center font-bold text-4xl drop-shadow-lg", children: [_jsx("span", { className: "text-transparent", style: {
+                            backgroundImage: 'linear-gradient(to right, #B59440, #6A4C1A, #BD9B4D, #6A4C1A, #B99D47)',
+                            backgroundSize: '300% 100%',
+                            animation: 'gradient 8s linear infinite',
+                            backgroundClip: 'text',
+                            WebkitBackgroundClip: 'text',
+                        }, children: "88" }), _jsx("span", { className: "ml-2 text-white", children: "PLAY" })] }) }));
+    }
+    if (text === 'Secured Transactions') {
+        return (_jsx("div", { className: "relative", children: _jsxs("div", { className: "venus-rising text-center font-bold drop-shadow-lg", children: [_jsx("div", { className: "text-4xl text-transparent", style: {
+                            backgroundImage: 'linear-gradient(to right, #B59440, #6A4C1A, #BD9B4D, #6A4C1A, #B99D47)',
+                            backgroundSize: '300% 100%',
+                            animation: 'gradient 8s linear infinite',
+                            backgroundClip: 'text',
+                            WebkitBackgroundClip: 'text',
+                        }, children: "SECURED" }), _jsx("div", { className: "text-3xl text-transparent", style: {
+                            backgroundImage: 'linear-gradient(to right, #B59440, #6A4C1A, #BD9B4D, #6A4C1A, #B99D47)',
+                            backgroundSize: '300% 100%',
+                            animation: 'gradient 8s linear infinite',
+                            backgroundClip: 'text',
+                            WebkitBackgroundClip: 'text',
+                        }, children: "TRANSACTIONS" })] }) }));
+    }
+    return (_jsx("div", { className: "relative", children: _jsx("h1", { className: "venus-rising font-bold text-4xl text-transparent drop-shadow-lg", style: {
+                backgroundImage: 'linear-gradient(to right, #B59440, #6A4C1A, #BD9B4D, #6A4C1A, #B99D47)',
+                backgroundSize: '300% 100%',
+                animation: 'gradient 8s linear infinite',
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+            }, children: text }) }));
+};
+const carouselData = [
+    {
+        background: firstStepBackground,
+        headerText: '88PLAY',
+        description: 'Welcome to 88Play! your trusted PAGCOR-licensed online casino where every player is treated like a VIP and the fun never stops!',
+    },
+    {
+        background: secondStepBackground,
+        headerText: 'NEW GAMES',
+        description: 'Discover our latest casino titles, bringing you fresh excitement and more ways to win every time you play.',
+    },
+    {
+        background: thirdStepBackground,
+        headerText: 'Secured Transactions',
+        description: 'Enjoy fast, secure, and hassle-free deposits and withdrawals with trusted local payment options.',
+    },
+    {
+        background: fourthStepBackground,
+        headerText: 'Bonuses',
+        description: 'Unlock exciting rewards and exclusive promotions designed to boost your gaming experience.',
+    },
+];
+const CardStepper = ({ data }) => {
+    return (_jsxs("div", { className: "w-full", children: [_jsx("div", { className: "h-auto w-full", children: _jsx(Image, { src: data.background, alt: "Step Background", className: "h-auto w-full object-cover" }) }), _jsx("div", { className: "mt-4 flex h-auto w-full items-center justify-center", children: _jsx(AnimatedHeader, { text: data.headerText }) }), _jsx("div", { className: "mt-4 px-5 text-center text-sm text-white/50", children: data.description })] }));
+};
+const OnboardingCarousel = () => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        onboarding: ctx.onboarding,
+    })));
+    const nextStep = () => {
+        setCurrentStep((prev) => (prev + 1) % carouselData.length);
+    };
+    const goToStep = (step) => {
+        setCurrentStep(step);
+    };
+    const handleContinue = () => {
+        if (currentStep === carouselData.length - 1) {
+            // Last step - close dialog
+            globalStore.onboarding.setOpen(false);
+        }
+        else {
+            // Not last step - go to next
+            nextStep();
+        }
+    };
+    const handleSkip = () => {
+        // Skip always closes dialog
+        globalStore.onboarding.setOpen(false);
+    };
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCurrentStep((prev) => (prev + 1) % carouselData.length);
+        }, 5000);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsxs("div", { className: "mb-5 w-full", children: [_jsx("div", { className: "relative overflow-hidden", children: _jsx("div", { className: "flex transition-transform duration-300 ease-in-out", style: { transform: `translateX(-${currentStep * 100}%)` }, children: carouselData.map((stepData, index) => (_jsx("div", { className: "w-full flex-shrink-0", children: _jsx(CardStepper, { data: stepData }) }, index))) }) }), _jsx("div", { className: "mt-4 flex justify-center px-5", children: _jsx("div", { className: "flex space-x-2", children: carouselData.map((_, index) => (_jsx("button", { type: "button", onClick: () => goToStep(index), className: twMerge('h-2 rounded-full transition-all duration-300', index === currentStep ? 'w-5 bg-yellow-400' : 'w-2 bg-white/30'), "aria-label": `Go to step ${index + 1}` }, index))) }) }), _jsxs("div", { className: "mt-6 flex gap-3 px-5", children: [_jsx("button", { type: "button", onClick: handleSkip, className: "flex-1 rounded-lg border border-yellow-400/50 bg-transparent py-3 font-medium text-sm text-yellow-400 hover:bg-yellow-400/10", children: "Skip" }), _jsx("button", { type: "button", onClick: handleContinue, className: "flex-1 rounded-lg bg-yellow-400 py-3 font-medium text-black text-sm hover:bg-yellow-500", children: currentStep === carouselData.length - 1 ? 'Play Now' : 'Continue' })] })] }));
+};
+export function Onboarding() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
+        signUp: ctx.signUp,
+        disclaimer: ctx.disclaimer,
+        onboarding: ctx.onboarding,
+    })));
+    return (_jsx(Dialog.Root, { open: globalStore.onboarding.open, onOpenChange: (details) => {
+            globalStore.onboarding.setOpen(details.open);
+            if (!details.open)
+                globalStore.onboarding.setAccepted(true);
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
+            if (globalStore.onboarding.next === 'SIGN_IN') {
+                globalStore.signIn.setOpen(true);
+            }
+            if (globalStore.onboarding.next === 'SIGN_UP') {
+                globalStore.signUp.setOpen(true);
+            }
+            if (globalStore.onboarding.next === 'DISCLAIMER') {
+                globalStore.disclaimer.setOpen(true);
+            }
+            globalStore.onboarding.setNext(null);
+        }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsx(Dialog.Content, { className: twMerge('flex h-full w-full flex-col items-start overflow-y-auto lg:mx-auto lg:h-auto lg:max-h-[80vh] lg:w-[400px]', 'scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent'), children: _jsx(OnboardingCarousel, {}) }) })] }) }));
+}

package/dist/components/Onboarding/index.d.ts

@@ -0,0 +1 @@
+export * from './Onboarding';

package/dist/components/Onboarding/index.js

@@ -0,0 +1 @@
+export * from './Onboarding.js';

package/package.json

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