@opexa/portal-components 0.0.982 → 0.0.984

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/client/hooks/useSignOutMutation.js +1 -0
  2. package/dist/components/KYC/KYCDefault/KYCDefault.js +4 -1
  3. package/dist/components/KYC/KYCReminder.lazy.js +11 -4
  4. package/dist/components/KYC/KycOpenOnHomeMount.js +14 -20
  5. package/dist/components/UpdateMobilePhoneNumber/UpdateMobilePhoneNumber.js +17 -8
  6. package/package.json +1 -1
package/dist/client/hooks/useSignOutMutation.js CHANGED
@@ -14,6 +14,7 @@ export const useSignOutMutation = (config) => {
14
14
  await queryClient.invalidateQueries({ queryKey: getSessionQueryKey() });
15
15
  queryClient.removeQueries();
16
16
  localStorage.removeItem(IDLE_TIMESTAMP_KEY);
17
+ sessionStorage.removeItem('hasSeenKycModal');
17
18
  },
18
19
  });
19
20
  };
package/dist/components/KYC/KYCDefault/KYCDefault.js CHANGED
@@ -19,13 +19,16 @@ export function KYCDefault(props) {
19
19
  kycReminder: ctx.kycReminder,
20
20
  responsibleGamingReminder: ctx.responsibleGamingReminder,
21
21
  updateMobilePhoneNumber: ctx.updateMobilePhoneNumber,
22
+ termsOfUse: ctx.termsOfUse,
22
23
  })));
23
24
  const kyc = useKYCDefault(props?.isSkippable ?? false, props?.hasKYCReviewPromo ?? false);
24
25
  const { isLoading: sessionLoading } = useSessionQuery();
25
26
  const isDialogOpen = globalStore.kyc.open &&
26
27
  !globalStore.kycReminder.open &&
27
28
  !sessionLoading &&
28
- !globalStore.disclaimer.open;
29
+ !globalStore.disclaimer.open &&
30
+ !globalStore.updateMobilePhoneNumber.open &&
31
+ !globalStore.termsOfUse.open;
29
32
  return (_jsxs(_Fragment, { children: [_jsx(KYCDefaultContext, { value: kyc, children: _jsx(Dialog.Root, { open: isDialogOpen, onOpenChange: (details) => {
30
33
  globalStore.kyc.setOpen(details.open);
31
34
  }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: kyc.reset, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "fixed top-[57px] overflow-hidden", children: _jsx(Dialog.Content, { className: "mx-auto h-full w-full overflow-y-auto bg-bg-primary-alt md:max-h-[95vh] lg:w-fit", children: _jsxs("div", { className: "mt-[calc(var(--safe-area-inset-top)*3)] flex h-dvh w-full flex-col overflow-y-auto p-3xl sm:h-fit lg:w-[400px]", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 1 && _jsx(IdentityVerification, {}), kyc.step === 2 && _jsx(PersonalInformation, {})] }) }) })] }) }) }), _jsx(KYCReminder, { ...props }), _jsx(KYCReview, {})] }));
package/dist/components/KYC/KYCReminder.lazy.js CHANGED
@@ -30,6 +30,8 @@ export function KYCReminder(props) {
30
30
  account: ctx.account,
31
31
  account__mobile: ctx.account__mobile,
32
32
  responsibleGamingReminder: ctx.responsibleGamingReminder,
33
+ disclaimer: ctx.disclaimer,
34
+ termsOfUse: ctx.termsOfUse,
33
35
  })));
34
36
  const signOutMutation = useSignOutMutation({
35
37
  async onSuccess() {
@@ -63,7 +65,7 @@ export function KYCReminder(props) {
63
65
  const isAccountReady = !accountLoading;
64
66
  const isSessionReady = !sessionLoading && session?.status === 'authenticated';
65
67
  const isKYCReminderOpen = globalStore.kycReminder.open && !globalStore.kyc.open;
66
- const isResponsibleGamingReminderClosed = !globalStore.responsibleGamingReminder.open;
68
+ const isDisclaimerClosed = !globalStore.disclaimer.open && !globalStore.termsOfUse.open;
67
69
  const isKYCStateRelevant = isNotVerified ||
68
70
  (isPending && isVerificationLocked) ||
69
71
  (isNotVerified && isVerificationLocked);
@@ -71,9 +73,11 @@ export function KYCReminder(props) {
71
73
  isAccountReady &&
72
74
  isKYCReminderOpen &&
73
75
  isKYCStateRelevant &&
74
- isResponsibleGamingReminderClosed, onOpenChange: (details) => {
76
+ isDisclaimerClosed, onOpenChange: (details) => {
77
+ if (!details.open && isVerificationLocked)
78
+ return;
75
79
  globalStore.kycReminder.setOpen(details.open);
76
- }, 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: () => {
80
+ }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-[999]" }), _jsx(Dialog.Positioner, { className: "z-[999] 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: () => {
77
81
  api.setOpen(false);
78
82
  globalStore.kyc.setOpen(true);
79
83
  }, children: "Complete KYC" }), ' ', _jsx(Button, { className: "bg-transparent text-text-brand-primary-600", onClick: async () => {
@@ -126,7 +130,10 @@ export function KYCReminder(props) {
126
130
  !(daysFromCreationToNow <= 3 && daysFromCreationToNow > 1) && (_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: () => {
127
131
  api.setOpen(false);
128
132
  globalStore.kyc.setOpen(true);
129
- }, children: "Verify Now" }), _jsx(Button, { type: "button", variant: "outline", fullWidth: true, onClick: () => api.setOpen(false), children: "Do it later" })] })) })] })] })), isPending && isVerificationLocked && (_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, { className: "bg-transparent text-text-brand-primary-600", onClick: async () => {
133
+ }, children: "Verify Now" }), _jsx(Button, { type: "button", variant: "outline", fullWidth: true, onClick: () => {
134
+ api.setOpen(false);
135
+ globalStore.responsibleGamingReminder.setOpen(true);
136
+ }, children: "Do it later" })] })) })] })] })), isPending && isVerificationLocked && (_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, { className: "bg-transparent text-text-brand-primary-600", onClick: async () => {
130
137
  if (Capacitor.isNativePlatform()) {
131
138
  const session = await getQueryClient().fetchQuery({
132
139
  queryKey: getSessionQueryKey(),
package/dist/components/KYC/KycOpenOnHomeMount.js CHANGED
@@ -16,7 +16,6 @@ export function KycOpenOnHomeMount(props) {
16
16
  const isKycCompleted = account?.verified ||
17
17
  verification?.sumsubVerified ||
18
18
  verification?.status === 'APPROVED' ||
19
- verification?.status === 'PENDING' ||
20
19
  verification?.status === 'VERIFIED'; //add default value on null return
21
20
  useEffect(() => {
22
21
  // If bypass is enabled, do nothing.
@@ -27,9 +26,21 @@ export function KycOpenOnHomeMount(props) {
27
26
  const shouldShowReminder = Boolean(props.isSkippable);
28
27
  const hasSeenKycModal = sessionStorage.getItem('hasSeenKycModal');
29
28
  const isFirstVisit = !hasSeenKycModal;
30
- // Handle member verification locked FIRST (highest priority)
29
+ // 1. If KYC is completed, early return
30
+ if (isKycCompleted) {
31
+ setkycReminderOpen(false);
32
+ setkycOpen(false);
33
+ sessionStorage.removeItem('hasSeenKycModal');
34
+ return;
35
+ }
36
+ // 2. Handle member verification locked
37
+ if (isVerificationLocked) {
38
+ setkycReminderOpen(true);
39
+ setkycOpen(false);
40
+ return;
41
+ }
31
42
  // Handle rejected verification status
32
- if (isRejected) {
43
+ else if (isRejected) {
33
44
  if (isFirstVisit) {
34
45
  setkycReminderOpen(false);
35
46
  setkycOpen(true);
@@ -52,23 +63,6 @@ export function KycOpenOnHomeMount(props) {
52
63
  setkycOpen(!shouldShowReminder);
53
64
  }
54
65
  }
55
- else if (isVerificationLocked) {
56
- if (isFirstVisit) {
57
- setkycReminderOpen(true);
58
- setkycOpen(false);
59
- }
60
- else {
61
- sessionStorage.setItem('hasSeenKycModal', 'true');
62
- setkycReminderOpen(!shouldShowReminder);
63
- setkycOpen(shouldShowReminder);
64
- }
65
- }
66
- // Handle completed kyc progress
67
- else if (isKycCompleted) {
68
- setkycReminderOpen(false);
69
- setkycOpen(false);
70
- sessionStorage.removeItem('hasSeenKycModal');
71
- }
72
66
  }
73
67
  }, [
74
68
  setkycReminderOpen,
package/dist/components/UpdateMobilePhoneNumber/UpdateMobilePhoneNumber.js CHANGED
@@ -5,8 +5,10 @@ import Image from 'next/image';
5
5
  import { useEffect, useRef, useState } from 'react';
6
6
  import { Controller, useForm } from 'react-hook-form';
7
7
  import z from 'zod';
8
+ import { useShallow } from 'zustand/shallow';
8
9
  import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
9
10
  import { useCooldown } from '../../client/hooks/useCooldown.js';
11
+ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
10
12
  import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
11
13
  import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
12
14
  import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
@@ -21,25 +23,31 @@ import { Field } from '../../ui/Field/index.js';
21
23
  import { PinInput } from '../../ui/PinInput/index.js';
22
24
  import { Portal } from '../../ui/Portal/index.js';
23
25
  export function UpdateMobilePhoneNumber() {
26
+ const globalStore = useGlobalStore(useShallow((ctx) => ({
27
+ updateMobilePhoneNumber: ctx.updateMobilePhoneNumber,
28
+ kyc: ctx.kyc,
29
+ })));
24
30
  const accountQuery = useAccountQuery();
25
31
  const account = accountQuery.data;
26
32
  const isAccountLoading = accountQuery.isLoading;
27
33
  const hasMobileNumber = !!account?.mobileNumber;
28
- const [open, setOpen] = useState(false);
29
34
  const hasExecuted = useRef(false);
30
35
  useEffect(() => {
31
36
  if (!isAccountLoading && !!account && !hasExecuted.current) {
32
37
  if (!hasMobileNumber) {
33
- setTimeout(() => {
34
- setOpen(true);
35
- }, 500);
38
+ globalStore.updateMobilePhoneNumber.setOpen(true);
36
39
  }
37
40
  else {
38
- setOpen(false);
41
+ globalStore.updateMobilePhoneNumber.setOpen(false);
39
42
  }
40
43
  hasExecuted.current = true;
41
44
  }
42
- }, [isAccountLoading, account, hasMobileNumber]);
45
+ }, [
46
+ isAccountLoading,
47
+ account,
48
+ hasMobileNumber,
49
+ globalStore.updateMobilePhoneNumber,
50
+ ]);
43
51
  const [step, setStep] = useState(1);
44
52
  const sendVerificationCodeMutation = useSendVerificationCodeMutation({
45
53
  onSuccess: () => {
@@ -62,7 +70,8 @@ export function UpdateMobilePhoneNumber() {
62
70
  title: 'Verification Successful',
63
71
  description: 'Your mobile number has been verified.',
64
72
  });
65
- setOpen(false);
73
+ globalStore.updateMobilePhoneNumber.setOpen(false);
74
+ globalStore.kyc.setOpen(true);
66
75
  },
67
76
  onError: (err) => {
68
77
  const errorMessage = err.message === 'Internal Server Error'
@@ -116,7 +125,7 @@ export function UpdateMobilePhoneNumber() {
116
125
  duration: 1000 * 60,
117
126
  });
118
127
  const formRef = useRef(null);
119
- return (_jsx(Dialog.Root, { open: open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: '!z-[calc(var(--z-dialog)+2)] flex items-center', children: _jsxs(Dialog.Content, { className: "flex w-[375px] flex-col items-center space-y-4 rounded-xl bg-[#111827] p-6 text-center", style: {
128
+ return (_jsx(Dialog.Root, { open: globalStore.updateMobilePhoneNumber.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center", children: _jsxs(Dialog.Content, { className: "flex w-[375px] flex-col items-center space-y-4 rounded-xl bg-[#111827] p-6 text-center", style: {
120
129
  backgroundImage: `url(${lightBg.src})`,
121
130
  }, children: [_jsx(Image, { src: inplayLogo, alt: "inplay logo", width: 82, height: 34, className: "h-auto w-[82px]" }), _jsxs("div", { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "font-bold text-sm", children: ["Get ", _jsx("span", { className: "text-[#F05127]", children: "\u20B150 Bonus" }), " when you verify your account and play."] }), _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
122
131
  sendVerificationCodeMutation.mutateAsync({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.982",
3
+ "version": "0.0.984",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",