@opexa/portal-components 0.0.1116 → 0.0.1118
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.
|
@@ -37,7 +37,11 @@ export function GamesList__client(props) {
|
|
|
37
37
|
return [...topGameRows, ...rest];
|
|
38
38
|
}, [topGamesToDisplay, topGameRows, availableRows]);
|
|
39
39
|
const [currentPage, setCurrentPage] = useState(1);
|
|
40
|
-
const
|
|
40
|
+
const isFullyLoaded = !hasNextPage && !loading;
|
|
41
|
+
const displayTotalRows = isFullyLoaded
|
|
42
|
+
? sortedRows.length
|
|
43
|
+
: Math.max(totalRows, sortedRows.length);
|
|
44
|
+
const totalPages = Math.ceil(displayTotalRows / perPage);
|
|
41
45
|
useEffect(() => {
|
|
42
46
|
if (pagination === 'paginated') {
|
|
43
47
|
const requiredRows = currentPage * perPage;
|
|
@@ -69,5 +73,5 @@ export function GamesList__client(props) {
|
|
|
69
73
|
} }) }, game.id));
|
|
70
74
|
}) }), _jsx("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: pagination === 'paginated' && sortedRows.length > 0 ? (_jsx(GamesPagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (page) => {
|
|
71
75
|
setCurrentPage(page);
|
|
72
|
-
} })) : (_jsxs(_Fragment, { children: [_jsx(Progress.Root, { min: 0, max:
|
|
76
|
+
} })) : (_jsxs(_Fragment, { children: [_jsx(Progress.Root, { min: 0, max: displayTotalRows, value: sortedRows.length, onValueChange: noop, className: twMerge('w-[12.5rem]', classNames.progressRoot), children: _jsx(Progress.Track, { className: twMerge('bg-bg-tertiary', classNames.progressTrack), children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "mt-md text-button-tertiary-fg text-sm", children: `Displaying ${sortedRows.length} of ${displayTotalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: twMerge('mt-lg', classNames.loadMoreButton), children: "Load More" }))] })) })] }))] }) }));
|
|
73
77
|
}
|
|
@@ -82,6 +82,16 @@ export function SignUpDefaultForm() {
|
|
|
82
82
|
.refine((val) => val.length <= 50, {
|
|
83
83
|
message: 'First name must not be more than 50 characters',
|
|
84
84
|
});
|
|
85
|
+
const middleNameBaseSchema = z
|
|
86
|
+
.string()
|
|
87
|
+
.regex(/^[a-z ]*$/gi, 'Middle name must contain only letters')
|
|
88
|
+
.transform((val) => val.trim())
|
|
89
|
+
.refine((val) => val.length === 0 || val.length >= 2, {
|
|
90
|
+
message: 'Middle name must be 2 or more characters',
|
|
91
|
+
})
|
|
92
|
+
.refine((val) => val.length <= 50, {
|
|
93
|
+
message: 'Middle name must not be more than 50 characters',
|
|
94
|
+
});
|
|
85
95
|
const lastNameBaseSchema = z
|
|
86
96
|
.string()
|
|
87
97
|
.min(1, 'Last name is required')
|
|
@@ -142,6 +152,9 @@ export function SignUpDefaultForm() {
|
|
|
142
152
|
firstName: signUpProps.basicSignUp
|
|
143
153
|
? z.string().optional()
|
|
144
154
|
: firstNameBaseSchema,
|
|
155
|
+
middleName: signUpProps.showMiddleNameField
|
|
156
|
+
? middleNameBaseSchema.optional()
|
|
157
|
+
: z.string().optional(),
|
|
145
158
|
lastName: signUpProps.basicSignUp
|
|
146
159
|
? z.string().optional()
|
|
147
160
|
: lastNameBaseSchema,
|
|
@@ -182,6 +195,7 @@ export function SignUpDefaultForm() {
|
|
|
182
195
|
resolver: zodResolver(Step1Definition),
|
|
183
196
|
defaultValues: {
|
|
184
197
|
firstName: '',
|
|
198
|
+
middleName: '',
|
|
185
199
|
lastName: '',
|
|
186
200
|
mobileNumber: '',
|
|
187
201
|
branchCode: signUpProps?.branches?.length
|
|
@@ -239,7 +253,7 @@ export function SignUpDefaultForm() {
|
|
|
239
253
|
}
|
|
240
254
|
}), 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: {
|
|
241
255
|
paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
|
|
242
|
-
}, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), !signUpProps.basicSignUp && (_jsxs(_Fragment, { children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.firstName, className: "mt-xl", children: [_jsx(Field.Label, { children: "First Name" }), _jsx(Field.Input, { placeholder: "Enter your first 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 last 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) => {
|
|
256
|
+
}, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), !signUpProps.basicSignUp && (_jsxs(_Fragment, { children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.firstName, className: "mt-xl", children: [_jsx(Field.Label, { children: "First Name" }), _jsx(Field.Input, { placeholder: "Enter your first name", ...step1Form.register('firstName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.firstName?.message })] }), signUpProps.showMiddleNameField && (_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.middleName, className: "mt-xl", children: [_jsxs(Field.Label, { children: ["Middle Name", ' ', _jsx("span", { className: "font-normal text-text-tertiary-600 text-xs", children: "(Optional)" })] }), _jsx(Field.Input, { placeholder: "Enter your middle name", ...step1Form.register('middleName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.middleName?.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 last 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) => {
|
|
243
257
|
if (!value)
|
|
244
258
|
return;
|
|
245
259
|
step1Form.setValue('birthDay', value, {
|
|
@@ -298,7 +312,13 @@ export function SignUpDefaultForm() {
|
|
|
298
312
|
mobileNumber: mobileNumberParser.format(mobileNumber),
|
|
299
313
|
verificationCode: verificationCode.join(''),
|
|
300
314
|
...(!signUpProps.basicSignUp && {
|
|
301
|
-
realName:
|
|
315
|
+
realName: [
|
|
316
|
+
step1Form.getValues('firstName'),
|
|
317
|
+
step1Form.getValues('middleName'),
|
|
318
|
+
step1Form.getValues('lastName'),
|
|
319
|
+
]
|
|
320
|
+
.filter(Boolean)
|
|
321
|
+
.join(' '),
|
|
302
322
|
...(!!birthdayValue && {
|
|
303
323
|
birthDay: format(birthdayValue, 'yyyy-MM-dd'),
|
|
304
324
|
}),
|