@opexa/portal-components 0.0.597 → 0.0.599

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/KYC/KYCReminder.lazy.js

@@ -49,7 +49,8 @@ export function KYCReminder(props) {
     const isAccountReady = !accountLoading;
     const isKYCReminderOpen = globalStore.kycReminder.open && !globalStore.kyc.open;
     const isResponsibleGamingReminderClosed = !globalStore.responsibleGamingReminder.open;
-    const isKYCStateRelevant = isNotVerified || ((isPending || isVerificationLocked) && featureFlag.enabled);
+    const isKYCStateRelevant = isNotVerified ||
+        ((isPending || isVerificationLocked) && featureFlag.enabled);
     return (_jsx(Dialog.Root, { open: isSessionReady &&
             isAccountReady &&
             isKYCReminderOpen &&
@@ -71,13 +72,14 @@ export function KYCReminder(props) {
                                                             responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: `h-[50px] w-auto shrink-0 ${props.responsibleGamingLogo?.styles ?? ''}`, draggable: false, unoptimized: true })] }), _jsx(Dialog.Context, { children: (api) => (_jsx("div", { className: "mt-6 space-y-lg", children: _jsx(Button, { onClick: () => {
                                                             api.setOpen(false);
                                                             globalStore.kyc.setOpen(true);
-                                                        }, children: "Complete KYC" }) })) })] })] })), isNotVerified && (!isVerificationLocked || !featureFlag.enabled) && (_jsxs(_Fragment, { children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-bg-primary p-2", children: _jsx(FileCheck02Icon, { className: "text-[#FEDF89]" }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "Personal Verification" }), _jsxs("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: ["All new users are required to complete identity verification to access the full range of ", props.siteName, " services, including withdrawals."] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "mt-3xl space-y-lg", children: [_jsx(Button, { onClick: () => {
+                                                        }, children: "Complete KYC" }) })) })] })] })), isNotVerified &&
+                                (!isVerificationLocked || !featureFlag.enabled) && (_jsxs(_Fragment, { children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-bg-primary p-2", children: _jsx(FileCheck02Icon, { className: "text-[#FEDF89]" }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "Personal Verification" }), _jsxs("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: ["All new users are required to complete identity verification to access the full range of ", props.siteName, ' ', "services, including withdrawals."] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "mt-3xl space-y-lg", children: [_jsx(Button, { onClick: () => {
                                                                 api.setOpen(false);
                                                                 globalStore.kyc.setOpen(true);
-                                                            }, children: "Verify Now" }), _jsx(Button, { type: "button", variant: "outline", fullWidth: true, onClick: () => api.setOpen(false), children: "Do it later" })] })) })] })] })), isPending && featureFlag.enabled && (_jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto mb-4 w-fit rounded-full bg-bg-primary p-2", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "VERIFICATION IN PROGRESS" }), _jsx("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: "Your account is verification-locked. Please wait for approval to regain full access to this platform." }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo?.logo ?? pagcorLogo, alt: "PAGCOR logo", height: 88, width: 88, className: `h-[88px] w-auto shrink-0 ${props.pagcorLogo?.styles ?? ''}`, draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo?.logo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: `h-[50px] w-auto shrink-0 ${props.responsibleGamingLogo?.styles ?? ''}`, draggable: false, unoptimized: true })] }), _jsx(Dialog.Context, { children: (api) => (_jsx("div", { className: "mt-6 space-y-lg", children: _jsx(Button, { onClick: () => {
-                                                    signOutMutation.mutate();
-                                                    globalStore.account.setOpen(false);
-                                                    globalStore.account__mobile.setOpen(false);
-                                                    router.push('/');
-                                                }, children: "Log Out" }) })) })] }))] }) })] }) }));
+                                                            }, children: "Verify Now" }), _jsx(Button, { type: "button", variant: "outline", fullWidth: true, onClick: () => api.setOpen(false), children: "Do it later" })] })) })] })] })), isPending && isVerificationLocked && featureFlag.enabled && (_jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto mb-4 w-fit rounded-full bg-bg-primary p-2", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "VERIFICATION IN PROGRESS" }), _jsx("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: "Your account is verification-locked. Please wait for approval to regain full access to this platform." }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo?.logo ?? pagcorLogo, alt: "PAGCOR logo", height: 88, width: 88, className: `h-[88px] w-auto shrink-0 ${props.pagcorLogo?.styles ?? ''}`, draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo?.logo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: `h-[50px] w-auto shrink-0 ${props.responsibleGamingLogo?.styles ?? ''}`, draggable: false, unoptimized: true })] }), _jsx("div", { className: "mt-6 space-y-lg", children: _jsx(Button, { onClick: () => {
+                                                signOutMutation.mutate();
+                                                globalStore.account.setOpen(false);
+                                                globalStore.account__mobile.setOpen(false);
+                                                router.push('/');
+                                            }, children: "Log Out" }) })] }))] }) })] }) }));
 }

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.597",
+	"version": "0.0.599",
 	"exports": {
 		"./ui/*": {
 			"types": "./dist/ui/*/index.d.ts",