@opexa/portal-components 0.0.685 → 0.0.686

package/dist/components/KYC/KYCReminder.lazy.js

@@ -17,6 +17,12 @@ import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 export function KYCReminder(props) {
+    console.log('[KYCReminder] Component rendered with props:', {
+        siteName: props.siteName,
+        hasLogo: !!props.logo,
+        hasTitleBgColor: !!props.titleBgColor,
+        hasDescriptionBgColor: !!props.descriptionBgColor
+    });
     const router = useRouter();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,
@@ -44,9 +50,22 @@ export function KYCReminder(props) {
     });
     const { data: session, isLoading: sessionLoading } = useSessionQuery();
     const { data: account, isLoading: accountLoading } = useAccountQuery();
+    console.log('[KYCReminder] Query states:', {
+        sessionLoading,
+        accountLoading,
+        sessionStatus: session?.status,
+        hasAccount: !!account
+    });
     const isPending = account?.verificationStatus === 'PENDING';
     const isNotVerified = account?.verificationStatus === 'UNVERIFIED';
     const isVerificationLocked = account?.status === 'VERIFICATION_LOCKED';
+    console.log('[KYCReminder] Account verification states:', {
+        verificationStatus: account?.verificationStatus,
+        accountStatus: account?.status,
+        isPending,
+        isNotVerified,
+        isVerificationLocked
+    });
     const daysFromCreationToNow = useMemo(() => {
         if (!account?.dateTimeCreated)
             return 0;
@@ -54,6 +73,12 @@ export function KYCReminder(props) {
         const now = new Date();
         return differenceInCalendarDays(now, creationDate);
     }, [account?.dateTimeCreated]);
+    console.log('[KYCReminder] Account timing:', {
+        dateTimeCreated: account?.dateTimeCreated,
+        daysFromCreationToNow,
+        isWithin3Days: daysFromCreationToNow <= 3,
+        isAfter1Day: daysFromCreationToNow > 1
+    });
     const isAccountReady = !accountLoading;
     const isSessionReady = !sessionLoading && session?.status === 'authenticated';
     const isKYCReminderOpen = globalStore.kycReminder.open && !globalStore.kyc.open;
@@ -61,13 +86,49 @@ export function KYCReminder(props) {
     const isKYCStateRelevant = isNotVerified ||
         (isPending && isVerificationLocked) ||
         (isNotVerified && isVerificationLocked);
-    return (_jsx(Dialog.Root, { open: isSessionReady &&
-            isAccountReady &&
-            isKYCReminderOpen &&
-            isKYCStateRelevant &&
-            isResponsibleGamingReminderClosed, onOpenChange: (details) => {
+    console.log('[KYCReminder] Global store states:', {
+        kycReminderOpen: globalStore.kycReminder.open,
+        kycOpen: globalStore.kyc.open,
+        responsibleGamingReminderOpen: globalStore.responsibleGamingReminder.open,
+        isKYCReminderOpen,
+        isResponsibleGamingReminderClosed
+    });
+    console.log('[KYCReminder] Ready states:', {
+        isAccountReady,
+        isSessionReady,
+        isKYCStateRelevant
+    });
+    const shouldModalOpen = isSessionReady &&
+        isAccountReady &&
+        isKYCReminderOpen &&
+        isKYCStateRelevant &&
+        isResponsibleGamingReminderClosed;
+    console.log('[KYCReminder] Final modal decision:', {
+        shouldModalOpen,
+        conditions: {
+            isSessionReady,
+            isAccountReady,
+            isKYCReminderOpen,
+            isKYCStateRelevant,
+            isResponsibleGamingReminderClosed
+        }
+    });
+    return (_jsx(Dialog.Root, { open: shouldModalOpen, onOpenChange: (details) => {
+            console.log('[KYCReminder] Dialog open change:', details);
             globalStore.kycReminder.setOpen(details.open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto h-fit max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg bg-bg-primary lg:max-w-[400px]", children: [!isPending && isNotVerified && isVerificationLocked && (_jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto mb-4 w-fit rounded-full 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: "Temporarily Locked" }), _jsx("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: "Your account has been locked due to incomplete verification. Please complete your verification to restore full access." }), _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) => (_jsxs("div", { className: "mt-6 space-y-lg", children: [_jsx(Button, { onClick: () => {
+        }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto h-fit max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg bg-bg-primary lg:max-w-[400px]", children: [(() => {
+                                const condition1 = !isPending && isNotVerified && isVerificationLocked;
+                                const condition2 = isNotVerified && daysFromCreationToNow <= 3 && daysFromCreationToNow > 1 && !isVerificationLocked;
+                                const condition3 = isNotVerified && !isVerificationLocked && !(daysFromCreationToNow <= 3 && daysFromCreationToNow > 1);
+                                const condition4 = isPending && isVerificationLocked;
+                                console.log('[KYCReminder] Modal variant conditions:', {
+                                    condition1_TemporarilyLocked: condition1,
+                                    condition2_FriendlyReminder: condition2,
+                                    condition3_PersonalVerification: condition3,
+                                    condition4_VerificationInProgress: condition4
+                                });
+                                return null;
+                            })(), !isPending && isNotVerified && isVerificationLocked && (_jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto mb-4 w-fit rounded-full 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: "Temporarily Locked" }), _jsx("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: "Your account has been locked due to incomplete verification. Please complete your verification to restore full access." }), _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) => (_jsxs("div", { className: "mt-6 space-y-lg", children: [_jsx(Button, { onClick: () => {
                                                         api.setOpen(false);
                                                         globalStore.kyc.setOpen(true);
                                                     }, children: "Complete KYC" }), ' ', _jsx(Button, { className: "bg-transparent text-text-brand-primary-600", onClick: () => {

package/dist/components/KYC/KycOpenOnHomeMount.js

@@ -4,12 +4,42 @@ import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
 export function KycOpenOnHomeMount(props) {
+    console.log('[KycOpenOnHomeMount] Component mounted with props:', props);
     const setkycReminderOpen = useGlobalStore((s) => s.kycReminder.setOpen);
     const setkycOpen = useGlobalStore((s) => s.kyc.setOpen);
     const { data: verification, isLoading: verificationLoading } = useMemberVerificationQuery();
     const { data: account, isLoading: accountLoading } = useAccountQuery();
+    console.log('[KycOpenOnHomeMount] Query states:', {
+        verificationLoading,
+        accountLoading,
+        hasVerificationData: !!verification,
+        hasAccountData: !!account
+    });
     const isVerificationLocked = account?.status === 'VERIFICATION_LOCKED';
     const isPending = account?.verificationStatus === 'PENDING';
+    console.log('[KycOpenOnHomeMount] Account status:', {
+        accountStatus: account?.status,
+        verificationStatus: account?.verificationStatus,
+        isVerificationLocked,
+        isPending,
+        verified: account?.verified
+    });
+    console.log('[KycOpenOnHomeMount] Verification data:', {
+        sumsubVerified: verification?.sumsubVerified,
+        status: verification?.status,
+        nationality: !!verification?.nationality,
+        natureOfWork: !!verification?.natureOfWork,
+        sourceOfIncome: !!verification?.sourceOfIncome,
+        permanentAddress: !!verification?.permanentAddress,
+        placeOfBirth: !!verification?.placeOfBirth,
+        address: !!verification?.address,
+        selfieImage: !!verification?.selfieImage,
+        idFrontImage: !!verification?.idFrontImage
+    });
+    console.log('[KycOpenOnHomeMount] Account KYC data:', {
+        realName: !!account?.realName,
+        birthDay: !!account?.birthDay
+    });
     const hasntSubmittedCompliantDocs = account?.verified ||
         verification?.sumsubVerified ||
         verification?.status === 'APPROVED' ||
@@ -32,30 +62,53 @@ export function KycOpenOnHomeMount(props) {
             !verification?.permanentAddress ||
             !verification?.placeOfBirth ||
             !verification?.address;
+    console.log('[KycOpenOnHomeMount] KYC status calculations:', {
+        hasntSubmittedCompliantDocs,
+        hasntCompletedKYC,
+        isSkippable: props.isSkippable
+    });
     useEffect(() => {
-        console.log(hasntSubmittedCompliantDocs, hasntCompletedKYC);
+        console.log('[KycOpenOnHomeMount] useEffect triggered');
+        console.log('[KycOpenOnHomeMount] Current state:', {
+            hasntSubmittedCompliantDocs,
+            hasntCompletedKYC,
+            verificationLoading,
+            accountLoading,
+            isPending,
+            isVerificationLocked,
+            isSkippable: props.isSkippable
+        });
         if (!verificationLoading && !accountLoading) {
+            console.log('[KycOpenOnHomeMount] Queries loaded, processing logic...');
             // Handle pending case with feature flag
             if (isPending) {
+                console.log('[KycOpenOnHomeMount] Account is pending - closing KYC modal, opening reminder');
                 setkycOpen(false);
                 setkycReminderOpen(true);
             }
             if (hasntSubmittedCompliantDocs || hasntCompletedKYC) {
                 if (props.isSkippable) {
+                    console.log('[KycOpenOnHomeMount] KYC incomplete but skippable - opening reminder');
                     setkycReminderOpen(true);
                 }
                 else {
+                    console.log('[KycOpenOnHomeMount] KYC incomplete and not skippable - opening KYC modal');
                     setkycOpen(true);
                 }
             }
             else if ((!hasntSubmittedCompliantDocs && hasntCompletedKYC) ||
                 isVerificationLocked) {
+                console.log('[KycOpenOnHomeMount] Partial completion or verification locked - opening reminder');
                 setkycReminderOpen(true);
             }
             else {
+                console.log('[KycOpenOnHomeMount] KYC complete - closing reminder');
                 setkycReminderOpen(false);
             }
         }
+        else {
+            console.log('[KycOpenOnHomeMount] Still loading queries, skipping logic');
+        }
     }, [
         setkycReminderOpen,
         setkycOpen,