@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.mutate({
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.mutate({
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 dynamic from 'next/dynamic';
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.mutate({
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.mutate({
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
- realName: z
88
+ firstName: z
87
89
  .string()
88
90
  .transform((val) => val.trim())
89
91
  .refine((val) => val.length >= 2, {
90
- message: 'Real name must be 2 or more characters',
92
+ message: 'First name must be 2 or more characters',
91
93
  })
92
94
  .refine((val) => val.length <= 50, {
93
- message: 'Real name must not be more than 50 characters',
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
- realName: '',
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.realName, className: "mt-xl", children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...step1Form.register('realName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.birthDay, className: "mt-xl", children: [_jsx(DateOfBirthField, { value: birthDay, onChange: (value) => {
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: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.389",
3
+ "version": "0.0.391",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",