@opexa/portal-components 0.0.388 → 0.0.390
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.
|
@@ -49,12 +49,24 @@ export function MobileNumberSignIn() {
|
|
|
49
49
|
globalStore.signIn.setOpen(false);
|
|
50
50
|
globalStore.kycReminder.setOpen(true);
|
|
51
51
|
},
|
|
52
|
+
onError: (err) => {
|
|
53
|
+
toaster.error({
|
|
54
|
+
title: 'Sign In Failed',
|
|
55
|
+
description: err.message,
|
|
56
|
+
});
|
|
57
|
+
},
|
|
52
58
|
});
|
|
53
59
|
const sendVerificationCodeMutation = useSendVerificationCodeMutation({
|
|
54
60
|
onSuccess: () => {
|
|
55
61
|
context.setStep(2);
|
|
56
62
|
cooldown.start();
|
|
57
63
|
},
|
|
64
|
+
onError: (err) => {
|
|
65
|
+
toaster.error({
|
|
66
|
+
title: 'Sign In Failed',
|
|
67
|
+
description: err.message,
|
|
68
|
+
});
|
|
69
|
+
},
|
|
58
70
|
});
|
|
59
71
|
const localeInfo = useLocaleInfo();
|
|
60
72
|
const mobileNumberParser = useMobileNumberParser();
|
|
@@ -112,17 +124,10 @@ export function MobileNumberSignIn() {
|
|
|
112
124
|
const form2Ref = useRef(null);
|
|
113
125
|
const featureFlag = useFeatureFlag();
|
|
114
126
|
return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
|
|
115
|
-
sendVerificationCodeMutation.
|
|
127
|
+
sendVerificationCodeMutation.mutateAsync({
|
|
116
128
|
channel: 'SMS',
|
|
117
129
|
recipient: mobileNumberParser.format(data.mobileNumber),
|
|
118
130
|
strict: true,
|
|
119
|
-
}, {
|
|
120
|
-
onError: (err) => {
|
|
121
|
-
toaster.error({
|
|
122
|
-
title: 'Sign In Failed',
|
|
123
|
-
description: err.message,
|
|
124
|
-
});
|
|
125
|
-
},
|
|
126
131
|
});
|
|
127
132
|
}), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { style: {
|
|
128
133
|
paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
|
|
@@ -157,17 +162,10 @@ export function MobileNumberSignIn() {
|
|
|
157
162
|
globalStore.signUp.setOpen(true);
|
|
158
163
|
}, children: "Sign up" })] })] })), context.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", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
|
|
159
164
|
const { mobileNumber } = step1Form.getValues();
|
|
160
|
-
signInMutation.
|
|
165
|
+
signInMutation.mutateAsync({
|
|
161
166
|
type: 'MOBILE_NUMBER',
|
|
162
167
|
mobileNumber: mobileNumberParser.format(mobileNumber),
|
|
163
168
|
verificationCode: verificationCode.join(''),
|
|
164
|
-
}, {
|
|
165
|
-
onError: (err) => {
|
|
166
|
-
toaster.error({
|
|
167
|
-
title: 'Sign In Failed',
|
|
168
|
-
description: err.message,
|
|
169
|
-
});
|
|
170
|
-
},
|
|
171
169
|
});
|
|
172
170
|
}), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", value: o.field.value, onValueChange: (details) => {
|
|
173
171
|
o.field.onChange(details.value);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useDialogContext } from '@ark-ui/react/dialog';
|
|
3
3
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
4
|
+
import dynamic from 'next/dynamic';
|
|
4
5
|
import Image from 'next/image';
|
|
5
6
|
import { useRouter } from 'next/navigation';
|
|
6
7
|
import { Controller, useForm } from 'react-hook-form';
|
|
@@ -8,6 +9,7 @@ import { twMerge } from 'tailwind-merge';
|
|
|
8
9
|
import { z } from 'zod';
|
|
9
10
|
import { useShallow } from 'zustand/shallow';
|
|
10
11
|
import { useAuthenticateMutation } from '../../client/hooks/useAuthenticateMutation.js';
|
|
12
|
+
import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
|
|
11
13
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
12
14
|
import { useSignInMutation } from '../../client/hooks/useSignInMutation.js';
|
|
13
15
|
import { toaster } from '../../client/utils/toaster.js';
|
|
@@ -21,10 +23,8 @@ import { Button } from '../../ui/Button/index.js';
|
|
|
21
23
|
import { Checkbox } from '../../ui/Checkbox/index.js';
|
|
22
24
|
import { Field } from '../../ui/Field/index.js';
|
|
23
25
|
import { PasswordInput } from '../../ui/PasswordInput/index.js';
|
|
24
|
-
import { useSignInContext, useSignInPropsContext } from './SignInContext.js';
|
|
25
26
|
import { FacebookSignInTrigger } from './FacebookSignInTrigger.js';
|
|
26
|
-
import
|
|
27
|
-
import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
|
|
27
|
+
import { useSignInContext, useSignInPropsContext } from './SignInContext.js';
|
|
28
28
|
const GoogleSignInButton = dynamic(() => import('./GoogleSignInTrigger.js').then((m) => m.GoogleSignInTrigger), {
|
|
29
29
|
ssr: false,
|
|
30
30
|
loading: () => null,
|
|
@@ -124,14 +124,14 @@ export function NameAndPasswordSignIn() {
|
|
|
124
124
|
const featureFlag = useFeatureFlag();
|
|
125
125
|
return (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit((data) => {
|
|
126
126
|
if (!signInMutation.data) {
|
|
127
|
-
signInMutation.
|
|
127
|
+
signInMutation.mutateAsync({
|
|
128
128
|
type: 'NAME_AND_PASSWORD',
|
|
129
129
|
name: data.name,
|
|
130
130
|
password: data.password,
|
|
131
131
|
});
|
|
132
132
|
}
|
|
133
133
|
else {
|
|
134
|
-
authenticateMutation.
|
|
134
|
+
authenticateMutation.mutateAsync({
|
|
135
135
|
type: 'SECURITY_QUESTION',
|
|
136
136
|
token: signInMutation.data.token,
|
|
137
137
|
secretAnswer: data.secretAnswer,
|
|
@@ -171,7 +171,7 @@ export function NameAndPasswordSignIn() {
|
|
|
171
171
|
globalStore.responsibleGaming.setNext('SIGN_IN');
|
|
172
172
|
globalStore.signIn.setOpen(false);
|
|
173
173
|
}
|
|
174
|
-
}, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), signInProps.showPublicPlayProhibition && (_jsxs("div", { className: twMerge('mt-3xl text-center text-sm', signInProps.className?.publicPlayProhibitionRoot), children: ["Prohibition to play in open and public places", _jsxs("div", { className: twMerge('mx-auto mt-5 flex h-13 w-fit items-center justify-center gap-3xl rounded-[60px] bg-[#1D0201] px-5 py-2', signInProps.className?.publicPlayProhibitionLogoContainer), children: [_jsx(Image, { src: signInProps.pagcorLogo ?? pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-10 w-auto" }), _jsx(Image, { src: signInProps.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-10 w-auto", draggable: false })] })] })), _jsxs("div", { className: "mt-6", children: [signInProps.googleSso && _jsx(GoogleSignInButton, {}), signInProps.facebookSso && featureFlag.enabled && (_jsx(FacebookSignInTrigger, {}))] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "font-semibold text-button-tertiary-fg", onClick: () => {
|
|
174
|
+
}, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), signInProps.showPublicPlayProhibition && (_jsxs("div", { className: twMerge('mt-3xl text-center text-sm', signInProps.className?.publicPlayProhibitionRoot), children: ["Prohibition to play in open and public places", _jsxs("div", { className: twMerge('mx-auto mt-5 flex h-13 w-fit items-center justify-center gap-3xl rounded-[60px] bg-[#1D0201] px-5 py-2', signInProps.className?.publicPlayProhibitionLogoContainer), children: [_jsx(Image, { src: signInProps.pagcorLogo ?? pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-10 w-auto" }), _jsx(Image, { src: signInProps.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-10 w-auto", draggable: false })] })] })), _jsxs("div", { className: "mt-6 flex items-center gap-2", children: [_jsx("div", { className: "h-px flex-grow bg-text-tertiary-600/50" }), _jsx("span", { className: "font-semibold text-sm text-text-tertiary-600", children: "Log in directly with" }), _jsx("div", { className: "h-px flex-grow bg-text-tertiary-600/50" })] }), _jsxs("div", { className: "mt-6", children: [signInProps.googleSso && _jsx(GoogleSignInButton, {}), signInProps.facebookSso && featureFlag.enabled && (_jsx(FacebookSignInTrigger, {}))] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "font-semibold text-button-tertiary-fg", onClick: () => {
|
|
175
175
|
dialog.setOpen(false);
|
|
176
176
|
globalStore.signUp.setOpen(true);
|
|
177
177
|
}, children: "Sign up" })] })] }));
|
|
@@ -13,6 +13,7 @@ import { z } from 'zod';
|
|
|
13
13
|
import { useShallow } from 'zustand/shallow';
|
|
14
14
|
import { useControllableState } from '../../../client/hooks/useControllableState.js';
|
|
15
15
|
import { useCooldown } from '../../../client/hooks/useCooldown.js';
|
|
16
|
+
import { useFeatureFlag } from '../../../client/hooks/useFeatureFlag.js';
|
|
16
17
|
import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
|
|
17
18
|
import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
|
|
18
19
|
import { useMobileNumberParser } from '../../../client/hooks/useMobileNumberParser.js';
|
|
@@ -42,6 +43,7 @@ import { createPoll } from '../../../utils/createPoll.js';
|
|
|
42
43
|
import { useSignUpDefaultPropsContext } from './SignUpDefaultContext.js';
|
|
43
44
|
export function SignUpDefaultForm() {
|
|
44
45
|
const signUpProps = useSignUpDefaultPropsContext();
|
|
46
|
+
const { enabled } = useFeatureFlag();
|
|
45
47
|
const branchCollection = createListCollection({
|
|
46
48
|
items: signUpProps.branches ?? [],
|
|
47
49
|
itemToValue: (item) => item.code,
|
|
@@ -229,6 +231,12 @@ export function SignUpDefaultForm() {
|
|
|
229
231
|
mobileNumber: mobileNumberParser.format(mobileNumber),
|
|
230
232
|
verificationCode: verificationCode.join(''),
|
|
231
233
|
referralCode: search.get('referralCode') ?? undefined,
|
|
234
|
+
//new signup
|
|
235
|
+
...(enabled && {
|
|
236
|
+
branchCode: step1Form.getValues('branchCode'),
|
|
237
|
+
realName: step1Form.getValues('realName'),
|
|
238
|
+
birthDay: format(step1Form.getValues('birthDay'), 'yyyy-MM-dd'),
|
|
239
|
+
}),
|
|
232
240
|
});
|
|
233
241
|
const name = mobileNumberParser.format(mobileNumber);
|
|
234
242
|
const password = `${name}${id}`;
|
|
@@ -253,7 +261,7 @@ export function SignUpDefaultForm() {
|
|
|
253
261
|
globalStore.signIn.setOpen(true);
|
|
254
262
|
return;
|
|
255
263
|
}
|
|
256
|
-
else {
|
|
264
|
+
else if (!enabled) {
|
|
257
265
|
const pollUpdateAccount = createPoll(async () => {
|
|
258
266
|
try {
|
|
259
267
|
await updateAccountMutation.mutateAsync({
|
|
@@ -60,8 +60,11 @@ export interface RegisterMemberAccountViaMobileMutationVariables {
|
|
|
60
60
|
};
|
|
61
61
|
referralCode?: string;
|
|
62
62
|
verificationCode?: string;
|
|
63
|
+
birthDay?: string;
|
|
64
|
+
realName?: string;
|
|
65
|
+
branchCode?: string;
|
|
63
66
|
}
|
|
64
|
-
export type RegisterMemberAccountViaMobileInput = Simplify<RegisterMemberAccountViaMobileMutationVariables['input'] & Pick<RegisterMemberAccountViaMobileMutationVariables, 'verificationCode' | 'referralCode'>>;
|
|
67
|
+
export type RegisterMemberAccountViaMobileInput = Simplify<RegisterMemberAccountViaMobileMutationVariables['input'] & Pick<RegisterMemberAccountViaMobileMutationVariables, 'verificationCode' | 'referralCode' | 'birthDay' | 'realName' | 'branchCode'>>;
|
|
65
68
|
export declare const registerMemberAccountViaMobile: (input: RegisterMemberAccountViaMobileInput, options?: GraphQLRequestOptions) => Promise<void>;
|
|
66
69
|
export interface RegisterMemberAccountByMobileNumberMutationVariables {
|
|
67
70
|
input: {
|