@opexa/portal-components 0.0.389 → 0.0.391
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,
|
|
@@ -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,
|
|
@@ -83,14 +85,23 @@ export function SignUpDefaultForm() {
|
|
|
83
85
|
});
|
|
84
86
|
}
|
|
85
87
|
}),
|
|
86
|
-
|
|
88
|
+
firstName: z
|
|
87
89
|
.string()
|
|
88
90
|
.transform((val) => val.trim())
|
|
89
91
|
.refine((val) => val.length >= 2, {
|
|
90
|
-
message: '
|
|
92
|
+
message: 'First name must be 2 or more characters',
|
|
91
93
|
})
|
|
92
94
|
.refine((val) => val.length <= 50, {
|
|
93
|
-
message: '
|
|
95
|
+
message: 'First name must not be more than 50 characters',
|
|
96
|
+
}),
|
|
97
|
+
lastName: z
|
|
98
|
+
.string()
|
|
99
|
+
.transform((val) => val.trim())
|
|
100
|
+
.refine((val) => val.length >= 2, {
|
|
101
|
+
message: 'Last name must be 2 or more characters',
|
|
102
|
+
})
|
|
103
|
+
.refine((val) => val.length <= 50, {
|
|
104
|
+
message: 'Last name must not be more than 50 characters',
|
|
94
105
|
}),
|
|
95
106
|
birthDay: z
|
|
96
107
|
.date({
|
|
@@ -125,7 +136,8 @@ export function SignUpDefaultForm() {
|
|
|
125
136
|
mode: 'all',
|
|
126
137
|
resolver: zodResolver(Step1Definition),
|
|
127
138
|
defaultValues: {
|
|
128
|
-
|
|
139
|
+
firstName: '',
|
|
140
|
+
lastName: '',
|
|
129
141
|
mobileNumber: '',
|
|
130
142
|
branchCode: signUpProps?.branches?.length
|
|
131
143
|
? signUpProps.branches[0]?.code
|
|
@@ -167,7 +179,7 @@ export function SignUpDefaultForm() {
|
|
|
167
179
|
}
|
|
168
180
|
}), 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: {
|
|
169
181
|
paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
|
|
170
|
-
}, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.
|
|
182
|
+
}, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.firstName, className: "mt-xl", children: [_jsx(Field.Label, { children: "First Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...step1Form.register('firstName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.firstName?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.lastName, className: "mt-xl", children: [_jsx(Field.Label, { children: "Last Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...step1Form.register('lastName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.lastName?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.birthDay, className: "mt-xl", children: [_jsx(DateOfBirthField, { value: birthDay, onChange: (value) => {
|
|
171
183
|
if (!value)
|
|
172
184
|
return;
|
|
173
185
|
step1Form.setValue('birthDay', value, {
|
|
@@ -229,6 +241,13 @@ export function SignUpDefaultForm() {
|
|
|
229
241
|
mobileNumber: mobileNumberParser.format(mobileNumber),
|
|
230
242
|
verificationCode: verificationCode.join(''),
|
|
231
243
|
referralCode: search.get('referralCode') ?? undefined,
|
|
244
|
+
//new signup
|
|
245
|
+
...(signUpProps?.branches &&
|
|
246
|
+
signUpProps.branches.length > 0 && {
|
|
247
|
+
branchCode: step1Form.getValues('branchCode'),
|
|
248
|
+
}),
|
|
249
|
+
realName: `${step1Form.getValues('firstName')} ${step1Form.getValues('lastName')}`,
|
|
250
|
+
birthDay: format(step1Form.getValues('birthDay'), 'yyyy-MM-dd'),
|
|
232
251
|
});
|
|
233
252
|
const name = mobileNumberParser.format(mobileNumber);
|
|
234
253
|
const password = `${name}${id}`;
|
|
@@ -253,26 +272,6 @@ export function SignUpDefaultForm() {
|
|
|
253
272
|
globalStore.signIn.setOpen(true);
|
|
254
273
|
return;
|
|
255
274
|
}
|
|
256
|
-
else {
|
|
257
|
-
const pollUpdateAccount = createPoll(async () => {
|
|
258
|
-
try {
|
|
259
|
-
await updateAccountMutation.mutateAsync({
|
|
260
|
-
branchCode: step1Form.getValues('branchCode'),
|
|
261
|
-
realName: step1Form.getValues('realName'),
|
|
262
|
-
birthDay: format(step1Form.getValues('birthDay'), 'yyyy-MM-dd'),
|
|
263
|
-
});
|
|
264
|
-
return true;
|
|
265
|
-
}
|
|
266
|
-
catch {
|
|
267
|
-
return false;
|
|
268
|
-
}
|
|
269
|
-
}, {
|
|
270
|
-
until: (ok) => ok,
|
|
271
|
-
maxAttempt: 8,
|
|
272
|
-
interval: 250,
|
|
273
|
-
});
|
|
274
|
-
await pollUpdateAccount();
|
|
275
|
-
}
|
|
276
275
|
globalStore.signUp.setOpen(false);
|
|
277
276
|
globalStore.kycReminder.setOpen(true);
|
|
278
277
|
step1Form.reset();
|
|
@@ -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: {
|