@opexa/portal-components 0.0.980 → 0.0.981
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.
|
@@ -25,8 +25,7 @@ export function KYCDefault(props) {
|
|
|
25
25
|
const isDialogOpen = globalStore.kyc.open &&
|
|
26
26
|
!globalStore.kycReminder.open &&
|
|
27
27
|
!sessionLoading &&
|
|
28
|
-
!globalStore.disclaimer.open
|
|
29
|
-
!globalStore.updateMobilePhoneNumber.open;
|
|
28
|
+
!globalStore.disclaimer.open;
|
|
30
29
|
return (_jsxs(_Fragment, { children: [_jsx(KYCDefaultContext, { value: kyc, children: _jsx(Dialog.Root, { open: isDialogOpen, onOpenChange: (details) => {
|
|
31
30
|
globalStore.kyc.setOpen(details.open);
|
|
32
31
|
}, 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, {})] }));
|
|
@@ -5,10 +5,8 @@ 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';
|
|
9
8
|
import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
|
|
10
9
|
import { useCooldown } from '../../client/hooks/useCooldown.js';
|
|
11
|
-
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
12
10
|
import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
|
|
13
11
|
import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
|
|
14
12
|
import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
|
|
@@ -23,34 +21,25 @@ import { Field } from '../../ui/Field/index.js';
|
|
|
23
21
|
import { PinInput } from '../../ui/PinInput/index.js';
|
|
24
22
|
import { Portal } from '../../ui/Portal/index.js';
|
|
25
23
|
export function UpdateMobilePhoneNumber() {
|
|
26
|
-
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
27
|
-
updateMobilePhoneNumber: ctx.updateMobilePhoneNumber,
|
|
28
|
-
kyc: ctx.kyc,
|
|
29
|
-
})));
|
|
30
24
|
const accountQuery = useAccountQuery();
|
|
31
25
|
const account = accountQuery.data;
|
|
32
26
|
const isAccountLoading = accountQuery.isLoading;
|
|
33
27
|
const hasMobileNumber = !!account?.mobileNumber;
|
|
28
|
+
const [open, setOpen] = useState(false);
|
|
34
29
|
const hasExecuted = useRef(false);
|
|
35
30
|
useEffect(() => {
|
|
36
31
|
if (!isAccountLoading && !!account && !hasExecuted.current) {
|
|
37
32
|
if (!hasMobileNumber) {
|
|
38
|
-
|
|
39
|
-
|
|
33
|
+
setTimeout(() => {
|
|
34
|
+
setOpen(true);
|
|
35
|
+
}, 500);
|
|
40
36
|
}
|
|
41
37
|
else {
|
|
42
|
-
|
|
43
|
-
globalStore.updateMobilePhoneNumber.setOpen(false);
|
|
38
|
+
setOpen(false);
|
|
44
39
|
}
|
|
45
40
|
hasExecuted.current = true;
|
|
46
41
|
}
|
|
47
|
-
}, [
|
|
48
|
-
isAccountLoading,
|
|
49
|
-
account,
|
|
50
|
-
hasMobileNumber,
|
|
51
|
-
globalStore.updateMobilePhoneNumber,
|
|
52
|
-
]);
|
|
53
|
-
console.log('UpdateMobilePhoneNumber open:', globalStore.updateMobilePhoneNumber.open);
|
|
42
|
+
}, [isAccountLoading, account, hasMobileNumber]);
|
|
54
43
|
const [step, setStep] = useState(1);
|
|
55
44
|
const sendVerificationCodeMutation = useSendVerificationCodeMutation({
|
|
56
45
|
onSuccess: () => {
|
|
@@ -73,8 +62,7 @@ export function UpdateMobilePhoneNumber() {
|
|
|
73
62
|
title: 'Verification Successful',
|
|
74
63
|
description: 'Your mobile number has been verified.',
|
|
75
64
|
});
|
|
76
|
-
|
|
77
|
-
globalStore.kyc.setOpen(true);
|
|
65
|
+
setOpen(false);
|
|
78
66
|
},
|
|
79
67
|
onError: (err) => {
|
|
80
68
|
const errorMessage = err.message === 'Internal Server Error'
|
|
@@ -128,7 +116,7 @@ export function UpdateMobilePhoneNumber() {
|
|
|
128
116
|
duration: 1000 * 60,
|
|
129
117
|
});
|
|
130
118
|
const formRef = useRef(null);
|
|
131
|
-
return (_jsx(Dialog.Root, { open:
|
|
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: {
|
|
132
120
|
backgroundImage: `url(${lightBg.src})`,
|
|
133
121
|
}, 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) => {
|
|
134
122
|
sendVerificationCodeMutation.mutateAsync({
|