@opexa/portal-components 0.0.1007 → 0.0.1009
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.
- package/dist/client/hooks/useVerifyMobileNumber.d.ts +3 -0
- package/dist/client/hooks/useVerifyMobileNumber.js +20 -0
- package/dist/components/DepositWithdrawal/Deposit/AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.js +241 -0
- package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts +4 -4
- package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts +2 -2
- package/dist/components/KYC/KYCReview.js +5 -2
- package/dist/components/Messages/Messages.lazy.js +24 -2
- package/dist/components/SignUp/SignUpDefault/SignUpDefault.lazy.d.ts +1 -0
- package/dist/components/SignUp/SignUpDefault/SignUpDefaultForm.js +8 -1
- package/dist/components/SingleSignOn/SingleSignOn.d.ts +4 -0
- package/dist/components/SingleSignOn/SingleSignOn.js +185 -0
- package/dist/components/SingleSignOn/index.d.ts +1 -0
- package/dist/components/SingleSignOn/index.js +1 -0
- package/dist/lib/components/UpdateMobilePhoneNumber/UpdateMobilePhoneNumber.d.ts +1 -0
- package/dist/lib/components/UpdateMobilePhoneNumber/UpdateMobilePhoneNumber.js +152 -0
- package/dist/lib/components/UpdateMobilePhoneNumber/index.d.ts +1 -0
- package/dist/lib/components/UpdateMobilePhoneNumber/index.js +1 -0
- package/dist/schemas/forgotPasswordSchema.d.ts +4 -4
- package/dist/ui/AlertDialog/AlertDialog.d.ts +121 -121
- package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +11 -11
- package/dist/ui/Badge/Badge.d.ts +12 -12
- package/dist/ui/Badge/badge.anatomy.d.ts +1 -1
- package/dist/ui/Badge/badge.recipe.d.ts +3 -3
- package/dist/ui/Carousel/Carousel.d.ts +99 -99
- package/dist/ui/Carousel/carousel.recipe.d.ts +11 -11
- package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
- package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
- package/dist/ui/Clipboard/Clipboard.d.ts +18 -18
- package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
- package/dist/ui/Combobox/Combobox.d.ts +42 -42
- package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
- package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
- package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
- package/dist/ui/Dialog/Dialog.d.ts +33 -33
- package/dist/ui/Dialog/dialog.recipe.d.ts +3 -3
- package/dist/ui/Drawer/Drawer.d.ts +33 -33
- package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
- package/dist/ui/Menu/Menu.d.ts +90 -90
- package/dist/ui/Menu/menu.recipe.d.ts +5 -5
- package/dist/ui/SegmentGroup/SegmentGroup.d.ts +18 -18
- package/dist/ui/SegmentGroup/segmentGroup.recipe.d.ts +3 -3
- package/dist/ui/Select/Select.d.ts +45 -45
- package/dist/ui/Select/select.recipe.d.ts +3 -3
- package/dist/ui/Table/Table.d.ts +21 -21
- package/dist/ui/Table/table.anatomy.d.ts +1 -1
- package/dist/ui/Table/table.recipe.d.ts +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { zodResolver } from '@hookform/resolvers/zod';
|
|
4
|
+
import Image from 'next/image';
|
|
5
|
+
import { useParams, useRouter, useSearchParams } from 'next/navigation';
|
|
6
|
+
import { useEffect, useRef, useState } from 'react';
|
|
7
|
+
import { Controller, useForm } from 'react-hook-form';
|
|
8
|
+
import z from 'zod';
|
|
9
|
+
import { useCooldown } from '../../client/hooks/useCooldown.js';
|
|
10
|
+
import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
|
|
11
|
+
import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
|
|
12
|
+
import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
|
|
13
|
+
import { useSignInSSOMutation } from '../../client/hooks/useSignInSSOMutation.js';
|
|
14
|
+
import { useVerifyMobileNumber } from '../../client/hooks/useVerifyMobileNumber.js';
|
|
15
|
+
import { toaster } from '../../client/utils/toaster.js';
|
|
16
|
+
import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
|
|
17
|
+
import cinePopLogo from '../../images/cinepop-logo.png';
|
|
18
|
+
import dearUtolLogo from '../../images/dear-utol-logo.png';
|
|
19
|
+
import inplayLogo from '../../images/inplay-logo.png';
|
|
20
|
+
import lightBg from '../../images/light-bg.png';
|
|
21
|
+
import mariasDiary from '../../images/marias-diary-logo.png';
|
|
22
|
+
import secretConfessionsLogo from '../../images/secret-confessions-logo.png';
|
|
23
|
+
import { Button } from '../../ui/Button/index.js';
|
|
24
|
+
import { Dialog } from '../../ui/Dialog/index.js';
|
|
25
|
+
import { Field } from '../../ui/Field/index.js';
|
|
26
|
+
import { PinInput } from '../../ui/PinInput/index.js';
|
|
27
|
+
import { Portal } from '../../ui/Portal/index.js';
|
|
28
|
+
export function SingleSignOn() {
|
|
29
|
+
const params = useParams();
|
|
30
|
+
const searchParams = useSearchParams();
|
|
31
|
+
const router = useRouter();
|
|
32
|
+
const partnerId = params.partnerId;
|
|
33
|
+
const token = searchParams.get('token');
|
|
34
|
+
const [isSsoOpen, setIsSsoOpen] = useState(true);
|
|
35
|
+
const [showVerifyDialog, setShowVerifyDialog] = useState(false);
|
|
36
|
+
const ssoMutation = useSignInSSOMutation({
|
|
37
|
+
onSuccess: () => {
|
|
38
|
+
toaster.success({
|
|
39
|
+
description: 'Account created successfully',
|
|
40
|
+
});
|
|
41
|
+
setIsSsoOpen(false);
|
|
42
|
+
setShowVerifyDialog(true);
|
|
43
|
+
},
|
|
44
|
+
onError: () => {
|
|
45
|
+
toaster.error({
|
|
46
|
+
description: 'Account creation failed',
|
|
47
|
+
});
|
|
48
|
+
setIsSsoOpen(false);
|
|
49
|
+
router.push('/');
|
|
50
|
+
},
|
|
51
|
+
});
|
|
52
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: We only want to trigger the mutation when the URL parameters change.
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
// Trigger SSO login when component mounts
|
|
55
|
+
if (partnerId && token && !ssoMutation.isPending) {
|
|
56
|
+
ssoMutation.mutate({ partnerId, token });
|
|
57
|
+
}
|
|
58
|
+
}, [partnerId, token]);
|
|
59
|
+
if (ssoMutation.isPending) {
|
|
60
|
+
return (_jsx(Dialog.Root, { open: isSsoOpen, 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 h-[333px] w-[375px] flex-col items-center space-y-4 bg-[#111827] p-6 text-center", style: {
|
|
61
|
+
backgroundImage: `url(${lightBg.src})`,
|
|
62
|
+
}, children: [_jsx(Image, { src: inplayLogo, alt: "inplay logo", width: 82, height: 34, className: "h-auto w-[82px]" }), _jsx("div", { className: "mb-4 h-7 w-7 animate-spin rounded-full border-4 border-[#101730] border-t-[#F05027]" }), _jsx("div", { className: "text-[#CECFD2] text-sm", children: "We\u2019re creating an account for you..." }), _jsx("div", { className: "text-[#CECFD2] text-sm", children: "In the meantime, you can watch your favorite series on CinePop!" }), _jsxs("div", { className: "pt-3", children: [_jsx(Image, { src: cinePopLogo, alt: "cine poplogo", width: 151, height: 24, className: "mx-auto mb-2 h-auto w-[151px]" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { src: secretConfessionsLogo, alt: "secret confessions logo", width: 104, height: 53, className: "h-auto w-[104px]" }), _jsx(Image, { src: dearUtolLogo, alt: "dear utol logo", width: 105, height: 53, className: "h-auto w-[105px]" }), _jsx(Image, { src: mariasDiary, alt: "maria's diary logo", width: 104, height: 53, className: "h-auto w-[104px]" })] })] })] }) })] }) }));
|
|
63
|
+
}
|
|
64
|
+
if (showVerifyDialog) {
|
|
65
|
+
return (_jsx(VerifyMobileNumber, { onClose: () => {
|
|
66
|
+
setShowVerifyDialog(false);
|
|
67
|
+
router.push('/');
|
|
68
|
+
} }));
|
|
69
|
+
}
|
|
70
|
+
return null;
|
|
71
|
+
}
|
|
72
|
+
export function VerifyMobileNumber({ onClose }) {
|
|
73
|
+
const [step, setStep] = useState(1);
|
|
74
|
+
const sendVerificationCodeMutation = useSendVerificationCodeMutation({
|
|
75
|
+
onSuccess: () => {
|
|
76
|
+
setStep(2);
|
|
77
|
+
cooldown.start();
|
|
78
|
+
},
|
|
79
|
+
onError: (err) => {
|
|
80
|
+
toaster.error({
|
|
81
|
+
title: 'Sign In Failed',
|
|
82
|
+
description: err.message,
|
|
83
|
+
});
|
|
84
|
+
},
|
|
85
|
+
});
|
|
86
|
+
const verifyMobileNumberMutation = useVerifyMobileNumber({
|
|
87
|
+
onSuccess: async () => {
|
|
88
|
+
step1Form.reset();
|
|
89
|
+
step2Form.reset();
|
|
90
|
+
setStep(1);
|
|
91
|
+
toaster.success({
|
|
92
|
+
title: 'Verification Successful',
|
|
93
|
+
description: 'Your mobile number has been verified.',
|
|
94
|
+
});
|
|
95
|
+
onClose?.();
|
|
96
|
+
},
|
|
97
|
+
onError: (err) => {
|
|
98
|
+
const errorMessage = err.name === 'Forbidden'
|
|
99
|
+
? 'Please enter the correct verification code'
|
|
100
|
+
: err.message;
|
|
101
|
+
toaster.error({
|
|
102
|
+
title: 'Sign In Failed',
|
|
103
|
+
description: errorMessage,
|
|
104
|
+
});
|
|
105
|
+
},
|
|
106
|
+
});
|
|
107
|
+
const localeInfo = useLocaleInfo();
|
|
108
|
+
const mobileNumberParser = useMobileNumberParser();
|
|
109
|
+
const Step1Definition = z.object({
|
|
110
|
+
mobileNumber: z
|
|
111
|
+
.string()
|
|
112
|
+
.min(1, 'Mobile number is required')
|
|
113
|
+
.superRefine((v, ctx) => {
|
|
114
|
+
if (!mobileNumberParser.validate(v)) {
|
|
115
|
+
ctx.addIssue({
|
|
116
|
+
code: z.ZodIssueCode.custom,
|
|
117
|
+
message: 'Invalid mobile number',
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
}),
|
|
121
|
+
});
|
|
122
|
+
const Step2Definition = z.object({
|
|
123
|
+
verificationCode: z.array(z.string()).superRefine((val, ctx) => {
|
|
124
|
+
if (val.length !== 6 || val.some((v) => v.length !== 1)) {
|
|
125
|
+
ctx.addIssue({
|
|
126
|
+
code: z.ZodIssueCode.custom,
|
|
127
|
+
message: 'Please enter your 6-digit verification code.',
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
}),
|
|
131
|
+
});
|
|
132
|
+
const step1Form = useForm({
|
|
133
|
+
resolver: zodResolver(Step1Definition),
|
|
134
|
+
defaultValues: {
|
|
135
|
+
mobileNumber: '',
|
|
136
|
+
},
|
|
137
|
+
});
|
|
138
|
+
const step2Form = useForm({
|
|
139
|
+
resolver: zodResolver(Step2Definition),
|
|
140
|
+
defaultValues: {
|
|
141
|
+
verificationCode: Array.from({ length: 6 }).fill(''),
|
|
142
|
+
},
|
|
143
|
+
});
|
|
144
|
+
const cooldown = useCooldown({
|
|
145
|
+
max: 60,
|
|
146
|
+
duration: 1000 * 60,
|
|
147
|
+
});
|
|
148
|
+
const formRef = useRef(null);
|
|
149
|
+
return (_jsx(Dialog.Root, { open: true, 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: {
|
|
150
|
+
backgroundImage: `url(${lightBg.src})`,
|
|
151
|
+
}, 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) => {
|
|
152
|
+
sendVerificationCodeMutation.mutateAsync({
|
|
153
|
+
channel: 'SMS',
|
|
154
|
+
recipient: mobileNumberParser.format(data.mobileNumber),
|
|
155
|
+
strict: true,
|
|
156
|
+
});
|
|
157
|
+
}), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, className: "text-left", children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode }) }), _jsx(Field.Input, { style: {
|
|
158
|
+
paddingLeft: `calc(1.25rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
|
|
159
|
+
}, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Send Code" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Check your Phone" }), _jsxs("p", { className: "mt-xs text-center text-sm text-text-secondary-700", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold text-[#F05127]", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: formRef, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
|
|
160
|
+
verifyMobileNumberMutation.mutateAsync({
|
|
161
|
+
verificationCode: verificationCode.join(''),
|
|
162
|
+
});
|
|
163
|
+
}), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", onKeyDown: (e) => {
|
|
164
|
+
if (e.key === 'Backspace') {
|
|
165
|
+
step2Form.reset();
|
|
166
|
+
}
|
|
167
|
+
}, value: o.field.value, onValueChange: (details) => {
|
|
168
|
+
o.field.onChange(details.value);
|
|
169
|
+
o.field.onBlur();
|
|
170
|
+
}, otp: true, onValueComplete: () => {
|
|
171
|
+
formRef.current?.requestSubmit();
|
|
172
|
+
}, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-4 flex w-full items-center justify-center gap-xs text-xs", children: [_jsx("span", { className: "text-[#9CA3AF]", children: "Didn't receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-[#C084FC]", disabled: cooldown.cooling, onClick: async () => {
|
|
173
|
+
await sendVerificationCodeMutation.mutateAsync({
|
|
174
|
+
channel: 'SMS',
|
|
175
|
+
recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
|
|
176
|
+
});
|
|
177
|
+
cooldown.start();
|
|
178
|
+
}, children: cooldown.cooling
|
|
179
|
+
? `Resend in ${cooldown.countdown}s`
|
|
180
|
+
: 'Resend' })] }), _jsx("button", { type: "button", className: "absolute top-0 left-6 mx-auto mt-3xl flex h-8 w-8 items-center gap-1 rounded-full bg-[#1f2638] font-semibold text-sm text-text-tertiary-600", onClick: () => {
|
|
181
|
+
setStep(1);
|
|
182
|
+
step2Form.reset();
|
|
183
|
+
cooldown.stop();
|
|
184
|
+
}, children: _jsx(ArrowLeftIcon, { className: "mx-auto size-5" }) })] })] }))] })] }) })] }) }));
|
|
185
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SingleSignOn';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SingleSignOn.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function UpdateMobilePhoneNumber(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { zodResolver } from '@hookform/resolvers/zod';
|
|
4
|
+
import Image from 'next/image';
|
|
5
|
+
import { useEffect, useRef, useState } from 'react';
|
|
6
|
+
import { Controller, useForm } from 'react-hook-form';
|
|
7
|
+
import z from 'zod';
|
|
8
|
+
import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
|
|
9
|
+
import { useCooldown } from '../../client/hooks/useCooldown.js';
|
|
10
|
+
import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
|
|
11
|
+
import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
|
|
12
|
+
import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
|
|
13
|
+
import { useUpdateMobileNumber } from '../../client/hooks/useUpdateMobileNumber.js';
|
|
14
|
+
import { toaster } from '../../client/utils/toaster.js';
|
|
15
|
+
import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
|
|
16
|
+
import inplayLogo from '../../images/inplay-logo.png';
|
|
17
|
+
import lightBg from '../../images/light-bg.png';
|
|
18
|
+
import { Button } from '../../ui/Button/index.js';
|
|
19
|
+
import { Dialog } from '../../ui/Dialog/index.js';
|
|
20
|
+
import { Field } from '../../ui/Field/index.js';
|
|
21
|
+
import { PinInput } from '../../ui/PinInput/index.js';
|
|
22
|
+
import { Portal } from '../../ui/Portal/index.js';
|
|
23
|
+
export function UpdateMobilePhoneNumber() {
|
|
24
|
+
const accountQuery = useAccountQuery();
|
|
25
|
+
const account = accountQuery.data;
|
|
26
|
+
const isAccountLoading = accountQuery.isLoading;
|
|
27
|
+
const hasMobileNumber = !!account?.mobileNumber;
|
|
28
|
+
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
29
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: We only want to open the dialog when the account data loads, not on every hasMobileNumber change
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (!isAccountLoading && !!account && !hasMobileNumber) {
|
|
32
|
+
setIsDialogOpen(true);
|
|
33
|
+
}
|
|
34
|
+
else if (!isAccountLoading && !!account && hasMobileNumber) {
|
|
35
|
+
setIsDialogOpen(false);
|
|
36
|
+
}
|
|
37
|
+
}, [isAccountLoading, account?.mobileNumber]);
|
|
38
|
+
const [step, setStep] = useState(1);
|
|
39
|
+
const sendVerificationCodeMutation = useSendVerificationCodeMutation({
|
|
40
|
+
onSuccess: () => {
|
|
41
|
+
setStep(2);
|
|
42
|
+
cooldown.start();
|
|
43
|
+
},
|
|
44
|
+
onError: (err) => {
|
|
45
|
+
toaster.error({
|
|
46
|
+
title: 'Sign In Failed',
|
|
47
|
+
description: err.message,
|
|
48
|
+
});
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
const updateMobileNumberMutation = useUpdateMobileNumber({
|
|
52
|
+
onSuccess: async () => {
|
|
53
|
+
step1Form.reset();
|
|
54
|
+
step2Form.reset();
|
|
55
|
+
setStep(1);
|
|
56
|
+
toaster.success({
|
|
57
|
+
title: 'Verification Successful',
|
|
58
|
+
description: 'Your mobile number has been verified.',
|
|
59
|
+
});
|
|
60
|
+
setIsDialogOpen(false);
|
|
61
|
+
console.log('mobile number updated successfully');
|
|
62
|
+
},
|
|
63
|
+
onError: (err) => {
|
|
64
|
+
const errorMessage = err.message === 'Internal Server Error'
|
|
65
|
+
? `mobile number ${mobileNumberParser.format(step1Form.getValues('mobileNumber'))} is not available`
|
|
66
|
+
: err.message;
|
|
67
|
+
toaster.error({
|
|
68
|
+
title: 'Sign In Failed',
|
|
69
|
+
description: errorMessage,
|
|
70
|
+
});
|
|
71
|
+
console.log('error updating mobile number');
|
|
72
|
+
},
|
|
73
|
+
});
|
|
74
|
+
const localeInfo = useLocaleInfo();
|
|
75
|
+
const mobileNumberParser = useMobileNumberParser();
|
|
76
|
+
const Step1Definition = z.object({
|
|
77
|
+
mobileNumber: z
|
|
78
|
+
.string()
|
|
79
|
+
.min(1, 'Mobile number is required')
|
|
80
|
+
.superRefine((v, ctx) => {
|
|
81
|
+
if (!mobileNumberParser.validate(v)) {
|
|
82
|
+
ctx.addIssue({
|
|
83
|
+
code: z.ZodIssueCode.custom,
|
|
84
|
+
message: 'Invalid mobile number',
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
}),
|
|
88
|
+
});
|
|
89
|
+
const Step2Definition = z.object({
|
|
90
|
+
verificationCode: z.array(z.string()).superRefine((val, ctx) => {
|
|
91
|
+
if (val.length !== 6 || val.some((v) => v.length !== 1)) {
|
|
92
|
+
ctx.addIssue({
|
|
93
|
+
code: z.ZodIssueCode.custom,
|
|
94
|
+
message: 'Please enter your 6-digit verification code.',
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
}),
|
|
98
|
+
});
|
|
99
|
+
const step1Form = useForm({
|
|
100
|
+
resolver: zodResolver(Step1Definition),
|
|
101
|
+
defaultValues: {
|
|
102
|
+
mobileNumber: '',
|
|
103
|
+
},
|
|
104
|
+
});
|
|
105
|
+
const step2Form = useForm({
|
|
106
|
+
resolver: zodResolver(Step2Definition),
|
|
107
|
+
defaultValues: {
|
|
108
|
+
verificationCode: Array.from({ length: 6 }).fill(''),
|
|
109
|
+
},
|
|
110
|
+
});
|
|
111
|
+
const cooldown = useCooldown({
|
|
112
|
+
max: 60,
|
|
113
|
+
duration: 1000 * 60,
|
|
114
|
+
});
|
|
115
|
+
const formRef = useRef(null);
|
|
116
|
+
return (_jsx(Dialog.Root, { open: isDialogOpen, 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: {
|
|
117
|
+
backgroundImage: `url(${lightBg.src})`,
|
|
118
|
+
}, 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) => {
|
|
119
|
+
sendVerificationCodeMutation.mutateAsync({
|
|
120
|
+
channel: 'SMS',
|
|
121
|
+
recipient: mobileNumberParser.format(data.mobileNumber),
|
|
122
|
+
});
|
|
123
|
+
}), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, className: "text-left", children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode }) }), _jsx(Field.Input, { style: {
|
|
124
|
+
paddingLeft: `calc(1.25rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
|
|
125
|
+
}, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Send Code" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Check your Phone" }), _jsxs("p", { className: "mt-xs text-center text-sm text-text-secondary-700", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold text-[#F05127]", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: formRef, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
|
|
126
|
+
updateMobileNumberMutation.mutateAsync({
|
|
127
|
+
mobileNumber: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
|
|
128
|
+
verificationCode: verificationCode.join(''),
|
|
129
|
+
});
|
|
130
|
+
}), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", onKeyDown: (e) => {
|
|
131
|
+
if (e.key === 'Backspace') {
|
|
132
|
+
step2Form.reset();
|
|
133
|
+
}
|
|
134
|
+
}, value: o.field.value, onValueChange: (details) => {
|
|
135
|
+
o.field.onChange(details.value);
|
|
136
|
+
o.field.onBlur();
|
|
137
|
+
}, otp: true, onValueComplete: () => {
|
|
138
|
+
formRef.current?.requestSubmit();
|
|
139
|
+
}, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-4 flex w-full items-center justify-center gap-xs text-xs", children: [_jsx("span", { className: "text-[#9CA3AF]", children: "Didn't receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-[#C084FC]", disabled: cooldown.cooling, onClick: async () => {
|
|
140
|
+
await sendVerificationCodeMutation.mutateAsync({
|
|
141
|
+
channel: 'SMS',
|
|
142
|
+
recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
|
|
143
|
+
});
|
|
144
|
+
cooldown.start();
|
|
145
|
+
}, children: cooldown.cooling
|
|
146
|
+
? `Resend in ${cooldown.countdown}s`
|
|
147
|
+
: 'Resend' })] }), _jsx("button", { type: "button", className: "absolute top-0 left-6 mx-auto mt-3xl flex h-8 w-8 items-center gap-1 rounded-full bg-[#1f2638] font-semibold text-sm text-text-tertiary-600", onClick: () => {
|
|
148
|
+
setStep(1);
|
|
149
|
+
step2Form.reset();
|
|
150
|
+
cooldown.stop();
|
|
151
|
+
}, children: _jsx(ArrowLeftIcon, { className: "mx-auto size-5" }) })] })] }))] })] }) })] }) }));
|
|
152
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './UpdateMobilePhoneNumber';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './UpdateMobilePhoneNumber.js';
|
|
@@ -8,24 +8,24 @@ export declare const createForgotPasswordSchema: (mobileNumberParser: MobileNumb
|
|
|
8
8
|
mobileNumber: z.ZodEffects<z.ZodString, string, string>;
|
|
9
9
|
verificationCode: z.ZodEffects<z.ZodString, string, string>;
|
|
10
10
|
}, "strip", z.ZodTypeAny, {
|
|
11
|
+
mobileNumber: string;
|
|
11
12
|
password: string;
|
|
12
13
|
verificationCode: string;
|
|
13
|
-
mobileNumber: string;
|
|
14
14
|
confirmPassword: string;
|
|
15
15
|
}, {
|
|
16
|
+
mobileNumber: string;
|
|
16
17
|
password: string;
|
|
17
18
|
verificationCode: string;
|
|
18
|
-
mobileNumber: string;
|
|
19
19
|
confirmPassword: string;
|
|
20
20
|
}>, {
|
|
21
|
+
mobileNumber: string;
|
|
21
22
|
password: string;
|
|
22
23
|
verificationCode: string;
|
|
23
|
-
mobileNumber: string;
|
|
24
24
|
confirmPassword: string;
|
|
25
25
|
}, {
|
|
26
|
+
mobileNumber: string;
|
|
26
27
|
password: string;
|
|
27
28
|
verificationCode: string;
|
|
28
|
-
mobileNumber: string;
|
|
29
29
|
confirmPassword: string;
|
|
30
30
|
}>;
|
|
31
31
|
export type ForgotPasswordSchema = z.infer<ReturnType<typeof createForgotPasswordSchema>>;
|