@opexa/portal-components 0.0.263 → 0.0.264
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/components/Disclaimer/DisclaimerV2.js +19 -2
- package/dist/components/SignIn/MobileNumberSignIn.js +20 -3
- package/dist/components/SignIn/NameAndPasswordSignIn.js +20 -3
- package/dist/components/SignUp/SignUpDefault/SignUpForm.js +20 -3
- package/dist/components/SignUp/SignUpKYC/SignUpFormKYC.js +19 -2
- package/dist/components/shared/IdFrontImageField/useIdFrontImageField.js +26 -22
- package/dist/components/shared/SelfieImageField/useSelfieImageField.js +21 -18
- package/dist/handlers/index.d.ts +7 -7
- package/dist/handlers/index.js +0 -11
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import Image from 'next/image';
|
|
4
|
-
import { useRef, useState } from 'react';
|
|
4
|
+
import { useEffect, useRef, useState } from 'react';
|
|
5
5
|
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
6
6
|
import pagcorLogo from '../../images/pagcor2.png';
|
|
7
7
|
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
@@ -18,8 +18,25 @@ export function DisclaimerV2(props) {
|
|
|
18
18
|
const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
|
|
19
19
|
const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
|
|
20
20
|
const [isChecked, setIsChecked] = useState(false);
|
|
21
|
-
|
|
21
|
+
const [isTermsOfUseAccepted, setIsTermsOfUseAccepted] = useState(false);
|
|
22
|
+
const [isResponsibleGamingAccepted, setIsResponsibleGamingAccepted] = useState(false);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (isTermsOfUseAccepted && isResponsibleGamingAccepted) {
|
|
25
|
+
setIsChecked(true);
|
|
26
|
+
}
|
|
27
|
+
}, [isTermsOfUseAccepted, isResponsibleGamingAccepted]);
|
|
28
|
+
return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => {
|
|
29
|
+
setIsResponsibleGamingAccepted(true);
|
|
30
|
+
setResponsibleGamingOpen(false);
|
|
31
|
+
}, responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => {
|
|
32
|
+
setIsTermsOfUseAccepted(true);
|
|
33
|
+
setTermsOfUseOpen(false);
|
|
34
|
+
}, responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start gap-y-4 overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false })] }), _jsx("div", { className: "text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), !props.hasNoCheckbox ? (_jsxs(Checkbox.Root, { checked: isChecked, onCheckedChange: (e) => {
|
|
22
35
|
setIsChecked(!!e.checked);
|
|
36
|
+
if (!e.checked) {
|
|
37
|
+
setIsTermsOfUseAccepted(false);
|
|
38
|
+
setIsResponsibleGamingAccepted(false);
|
|
39
|
+
}
|
|
23
40
|
}, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I have read and agreed to ", props.siteName, ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
24
41
|
setTermsOfUseOpen(true);
|
|
25
42
|
}, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
3
|
-
import { useRef, useState } from 'react';
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
4
|
import { Controller, useForm } from 'react-hook-form';
|
|
5
5
|
import { z } from 'zod';
|
|
6
6
|
import { useShallow } from 'zustand/shallow';
|
|
@@ -91,7 +91,7 @@ export function MobileNumberSignIn(props) {
|
|
|
91
91
|
if (!v) {
|
|
92
92
|
ctx.addIssue({
|
|
93
93
|
code: z.ZodIssueCode.custom,
|
|
94
|
-
message: 'You must accept the terms and conditions',
|
|
94
|
+
message: 'You must accept the terms and conditions and the responsible gaming guidelines',
|
|
95
95
|
});
|
|
96
96
|
}
|
|
97
97
|
}),
|
|
@@ -126,7 +126,20 @@ export function MobileNumberSignIn(props) {
|
|
|
126
126
|
const form2Ref = useRef(null);
|
|
127
127
|
const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
|
|
128
128
|
const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
|
|
129
|
-
|
|
129
|
+
const [isTermsOfUseAccepted, setIsTermsOfUseAccepted] = useState(false);
|
|
130
|
+
const [isResponsibleGamingAccepted, setIsResponsibleGamingAccepted] = useState(false);
|
|
131
|
+
useEffect(() => {
|
|
132
|
+
if (isTermsOfUseAccepted && isResponsibleGamingAccepted) {
|
|
133
|
+
step1Form.setValue('termsAccepted', true);
|
|
134
|
+
}
|
|
135
|
+
}, [isResponsibleGamingAccepted, isTermsOfUseAccepted, step1Form]);
|
|
136
|
+
return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signInProps.termsOfUseContent ?? 'Terms of Use content', siteName: signInProps.siteName ?? 'Site', logo: signInProps.logo, open: isTermsOfUseOpen, onCloseAction: () => {
|
|
137
|
+
setIsTermsOfUseAccepted(true);
|
|
138
|
+
setTermsOfUseOpen(false);
|
|
139
|
+
}, responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signInProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signInProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => {
|
|
140
|
+
setIsResponsibleGamingAccepted(true);
|
|
141
|
+
setResponsibleGamingOpen(false);
|
|
142
|
+
}, responsibleGamingLogo: signInProps.responsibleGamingLogo }), context.step === 1 && (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
|
|
130
143
|
sendVerificationCodeMutation.mutate({
|
|
131
144
|
channel: 'SMS',
|
|
132
145
|
recipient: mobileNumberParser.format(data.mobileNumber),
|
|
@@ -136,6 +149,10 @@ export function MobileNumberSignIn(props) {
|
|
|
136
149
|
paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
|
|
137
150
|
}, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Log In" }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, className: "mt-xl", children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
|
|
138
151
|
o.field.onChange(details.checked);
|
|
152
|
+
if (!details.checked) {
|
|
153
|
+
setIsTermsOfUseAccepted(false);
|
|
154
|
+
setIsResponsibleGamingAccepted(false);
|
|
155
|
+
}
|
|
139
156
|
}, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I have read and accept the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
140
157
|
setTermsOfUseOpen(true);
|
|
141
158
|
}, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
@@ -1,7 +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 { useState } from 'react';
|
|
4
|
+
import { useEffect, useState } from 'react';
|
|
5
5
|
import { Controller, useForm } from 'react-hook-form';
|
|
6
6
|
import { z } from 'zod';
|
|
7
7
|
import { useShallow } from 'zustand/shallow';
|
|
@@ -89,7 +89,7 @@ export function NameAndPasswordSignIn(props) {
|
|
|
89
89
|
if (!v) {
|
|
90
90
|
ctx.addIssue({
|
|
91
91
|
code: z.ZodIssueCode.custom,
|
|
92
|
-
message: 'You must accept the terms and conditions',
|
|
92
|
+
message: 'You must accept the terms and conditions and the responsible gaming guidelines',
|
|
93
93
|
});
|
|
94
94
|
}
|
|
95
95
|
}),
|
|
@@ -115,7 +115,20 @@ export function NameAndPasswordSignIn(props) {
|
|
|
115
115
|
: null;
|
|
116
116
|
const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
|
|
117
117
|
const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
|
|
118
|
-
|
|
118
|
+
const [isTermsOfUseAccepted, setIsTermsOfUseAccepted] = useState(false);
|
|
119
|
+
const [isResponsibleGamingAccepted, setIsResponsibleGamingAccepted] = useState(false);
|
|
120
|
+
useEffect(() => {
|
|
121
|
+
if (isTermsOfUseAccepted && isResponsibleGamingAccepted) {
|
|
122
|
+
form.setValue('termsAccepted', true);
|
|
123
|
+
}
|
|
124
|
+
}, [isResponsibleGamingAccepted, isTermsOfUseAccepted, form]);
|
|
125
|
+
return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signInProps.termsOfUseContent ?? 'Terms of Use content', siteName: signInProps.siteName ?? 'Site', logo: signInProps.logo, open: isTermsOfUseOpen, onCloseAction: () => {
|
|
126
|
+
setIsTermsOfUseAccepted(true);
|
|
127
|
+
setTermsOfUseOpen(false);
|
|
128
|
+
}, responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signInProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signInProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => {
|
|
129
|
+
setIsResponsibleGamingAccepted(true);
|
|
130
|
+
setResponsibleGamingOpen(false);
|
|
131
|
+
}, responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit((data) => {
|
|
119
132
|
if (!signInMutation.data) {
|
|
120
133
|
signInMutation.mutate({
|
|
121
134
|
type: 'NAME_AND_PASSWORD',
|
|
@@ -140,6 +153,10 @@ export function NameAndPasswordSignIn(props) {
|
|
|
140
153
|
dialog.setOpen(false);
|
|
141
154
|
}, children: "Forgot Password" }) })] }) }), signInMutation.data && (_jsxs(Field.Root, { invalid: !!form.formState.errors.secretAnswer, className: "mt-xl", children: [_jsx(Field.Label, { children: secretQuestion }), _jsx(Field.Input, { placeholder: "Answer the security question", ...form.register('secretAnswer') }), _jsx(Field.ErrorText, { children: form.formState.errors.secretAnswer?.message })] })), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: signInMutation.isPending || authenticateMutation.isPending, children: "Log In" }), _jsx(Controller, { control: form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, className: "mt-xl", children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
|
|
142
155
|
o.field.onChange(details.checked);
|
|
156
|
+
if (!details.checked) {
|
|
157
|
+
setIsTermsOfUseAccepted(false);
|
|
158
|
+
setIsResponsibleGamingAccepted(false);
|
|
159
|
+
}
|
|
143
160
|
}, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I have read and accept the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
144
161
|
setTermsOfUseOpen(true);
|
|
145
162
|
}, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
@@ -5,7 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
5
5
|
import { ObjectId } from '@opexa/object-id';
|
|
6
6
|
import { differenceInYears, format } from 'date-fns';
|
|
7
7
|
import { useSearchParams } from 'next/navigation';
|
|
8
|
-
import { useRef, useState } from 'react';
|
|
8
|
+
import { useEffect, useRef, useState } from 'react';
|
|
9
9
|
import { Controller, useForm } from 'react-hook-form';
|
|
10
10
|
import { twMerge } from 'tailwind-merge';
|
|
11
11
|
import { z } from 'zod';
|
|
@@ -76,7 +76,7 @@ export function SignUpForm() {
|
|
|
76
76
|
if (!v) {
|
|
77
77
|
ctx.addIssue({
|
|
78
78
|
code: z.ZodIssueCode.custom,
|
|
79
|
-
message: 'You must accept the terms and conditions',
|
|
79
|
+
message: 'You must accept the terms and conditions and the responsible gaming guidelines',
|
|
80
80
|
});
|
|
81
81
|
}
|
|
82
82
|
}),
|
|
@@ -137,7 +137,20 @@ export function SignUpForm() {
|
|
|
137
137
|
const branchCode = step1Form.watch('branchCode', '');
|
|
138
138
|
const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
|
|
139
139
|
const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
|
|
140
|
-
|
|
140
|
+
const [isTermsOfUseAccepted, setIsTermsOfUseAccepted] = useState(false);
|
|
141
|
+
const [isResponsibleGamingAccepted, setIsResponsibleGamingAccepted] = useState(false);
|
|
142
|
+
useEffect(() => {
|
|
143
|
+
if (isTermsOfUseAccepted && isResponsibleGamingAccepted) {
|
|
144
|
+
step1Form.setValue('termsAccepted', true);
|
|
145
|
+
}
|
|
146
|
+
}, [isResponsibleGamingAccepted, isTermsOfUseAccepted, step1Form]);
|
|
147
|
+
return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signUpProps.termsOfUseContent ?? 'Terms of Use content', siteName: signUpProps.siteName ?? 'Site', logo: signUpProps.logo, open: isTermsOfUseOpen, onCloseAction: () => {
|
|
148
|
+
setIsTermsOfUseAccepted(true);
|
|
149
|
+
setTermsOfUseOpen(false);
|
|
150
|
+
}, responsibleGamingLogo: signUpProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signUpProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signUpProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => {
|
|
151
|
+
setIsResponsibleGamingAccepted(true);
|
|
152
|
+
setResponsibleGamingOpen(false);
|
|
153
|
+
}, responsibleGamingLogo: signUpProps.responsibleGamingLogo }), step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Create an account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", autoComplete: "off", onSubmit: step1Form.handleSubmit(async (data) => {
|
|
141
154
|
try {
|
|
142
155
|
await sendVerificationCodeMutation.mutateAsync({
|
|
143
156
|
channel: 'SMS',
|
|
@@ -183,6 +196,10 @@ export function SignUpForm() {
|
|
|
183
196
|
return (_jsx(Select.Item, { item: item, "aria-disabled": item.disabled, className: twMerge(item.disabled && 'text-border-disabled'), children: _jsx("div", { title: label, className: "line-clamp-1", children: label }) }, item.code));
|
|
184
197
|
}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.branchCode?.message })] }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: o.fieldState.invalid, children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
|
|
185
198
|
o.field.onChange(details.checked);
|
|
199
|
+
if (!details.checked) {
|
|
200
|
+
setIsTermsOfUseAccepted(false);
|
|
201
|
+
setIsResponsibleGamingAccepted(false);
|
|
202
|
+
}
|
|
186
203
|
}, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I have read and accept the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
187
204
|
setTermsOfUseOpen(true);
|
|
188
205
|
}, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
@@ -142,7 +142,7 @@ export function SignUpFormKYC() {
|
|
|
142
142
|
if (!v) {
|
|
143
143
|
ctx.addIssue({
|
|
144
144
|
code: z.ZodIssueCode.custom,
|
|
145
|
-
message: 'You must accept the terms and conditions',
|
|
145
|
+
message: 'You must accept the terms and conditions and the responsible gaming guidelines',
|
|
146
146
|
});
|
|
147
147
|
}
|
|
148
148
|
}),
|
|
@@ -226,7 +226,20 @@ export function SignUpFormKYC() {
|
|
|
226
226
|
const memberVerification = useMemberVerificationQuery();
|
|
227
227
|
const memberId = memberVerification.data?.id;
|
|
228
228
|
const { mutate: uploadImageFile } = useUploadImageFileMutation();
|
|
229
|
-
|
|
229
|
+
const [isTermsOfUseAccepted, setIsTermsOfUseAccepted] = useState(false);
|
|
230
|
+
const [isResponsibleGamingAccepted, setIsResponsibleGamingAccepted] = useState(false);
|
|
231
|
+
useEffect(() => {
|
|
232
|
+
if (isTermsOfUseAccepted && isResponsibleGamingAccepted) {
|
|
233
|
+
step1Form.setValue('termsAccepted', true);
|
|
234
|
+
}
|
|
235
|
+
}, [isResponsibleGamingAccepted, isTermsOfUseAccepted, step1Form]);
|
|
236
|
+
return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent ?? 'Terms of Use content', siteName: props.siteName ?? 'Site', logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => {
|
|
237
|
+
setIsTermsOfUseAccepted(true);
|
|
238
|
+
setTermsOfUseOpen(false);
|
|
239
|
+
}, responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent ?? 'Responsible Gaming content', logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => {
|
|
240
|
+
setIsResponsibleGamingAccepted(true);
|
|
241
|
+
setResponsibleGamingOpen(false);
|
|
242
|
+
}, responsibleGamingLogo: props.responsibleGamingLogo }), step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Create an account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", autoComplete: "off", onSubmit: step1Form.handleSubmit(async (data) => {
|
|
230
243
|
try {
|
|
231
244
|
await sendVerificationCodeMutation.mutateAsync({
|
|
232
245
|
channel: 'SMS',
|
|
@@ -276,6 +289,10 @@ export function SignUpFormKYC() {
|
|
|
276
289
|
props.setSelfieImage(file);
|
|
277
290
|
} }, "selfie-image-upload"), _jsx(Field.ErrorText, { children: step1Form.formState.errors.selfieImage?.message })] }), _jsxs("div", { className: "mt-xl text-center text-sm", children: ["Prohibition to play in open and public places", _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx("div", { className: "flex size-5xl items-center justify-center overflow-hidden rounded-full bg-white", children: _jsx(Image, { src: pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-9.5 w-auto object-contain" }) }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-10 w-auto", draggable: false })] })] }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: o.fieldState.invalid, children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
|
|
278
291
|
o.field.onChange(details.checked);
|
|
292
|
+
if (!details.checked) {
|
|
293
|
+
setIsTermsOfUseAccepted(false);
|
|
294
|
+
setIsResponsibleGamingAccepted(false);
|
|
295
|
+
}
|
|
279
296
|
}, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I have read and accept the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
280
297
|
setTermsOfUseOpen(true);
|
|
281
298
|
}, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
@@ -47,38 +47,42 @@ export function useIdFrontImageField(props) {
|
|
|
47
47
|
video: {
|
|
48
48
|
facingMode: desktop ? 'user' : 'environment',
|
|
49
49
|
},
|
|
50
|
-
async transform(
|
|
51
|
-
const body = new FormData();
|
|
50
|
+
async transform(data) {
|
|
52
51
|
const guideRect = guideRef.current?.getBoundingClientRect();
|
|
53
|
-
const videoRect =
|
|
52
|
+
const videoRect = data.video.getBoundingClientRect();
|
|
54
53
|
invariant(guideRect, "'guideRef.getBoundingClientRect()' fails");
|
|
55
|
-
const scaleX =
|
|
56
|
-
const scaleY =
|
|
54
|
+
const scaleX = data.image.width / videoRect.width;
|
|
55
|
+
const scaleY = data.image.height / videoRect.height;
|
|
57
56
|
const cropTop = (guideRect.top - videoRect.top) * scaleY;
|
|
58
57
|
const cropLeft = (guideRect.left - videoRect.left) * scaleX;
|
|
59
58
|
const cropWidth = guideRect.width * scaleX;
|
|
60
59
|
const cropHeight = guideRect.height * scaleY;
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
60
|
+
const targetWidth = 1200;
|
|
61
|
+
const targetHeight = 757;
|
|
62
|
+
const canvas = document.createElement('canvas');
|
|
63
|
+
const context = canvas.getContext('2d');
|
|
64
|
+
invariant(context, "'canvas.getContext' failed");
|
|
65
|
+
canvas.width = targetWidth;
|
|
66
|
+
canvas.height = targetHeight;
|
|
67
|
+
context.imageSmoothingEnabled = true;
|
|
68
|
+
context.imageSmoothingQuality = 'high';
|
|
69
|
+
context.filter = 'brightness(1.05) contrast(1.1) saturate(1.1)';
|
|
70
|
+
context.drawImage(data.image, cropLeft, cropTop, cropWidth, cropHeight, 0, 0, targetWidth, targetHeight);
|
|
71
|
+
const file = await new Promise((resolve) => canvas.toBlob((blob) => {
|
|
72
|
+
invariant(blob);
|
|
73
|
+
resolve(new File([blob], `front-image-${Date.now()}.jpeg`, {
|
|
74
|
+
type: 'image/jpeg',
|
|
75
|
+
endings: 'native',
|
|
76
|
+
lastModified: Date.now(),
|
|
77
|
+
}));
|
|
78
|
+
}, 'image/jpeg', 1.0));
|
|
76
79
|
const url = URL.createObjectURL(file);
|
|
77
80
|
const image = new Image();
|
|
78
81
|
image.src = url;
|
|
79
82
|
image.alt = '';
|
|
80
|
-
image.width =
|
|
81
|
-
image.height =
|
|
83
|
+
image.width = targetWidth;
|
|
84
|
+
image.height = targetHeight;
|
|
85
|
+
context.filter = 'brightness(1.05)';
|
|
82
86
|
return {
|
|
83
87
|
ok: true,
|
|
84
88
|
data: {
|
|
@@ -60,7 +60,6 @@ export function useSelfieImageField(props) {
|
|
|
60
60
|
},
|
|
61
61
|
};
|
|
62
62
|
}
|
|
63
|
-
const body = new FormData();
|
|
64
63
|
const guideRect = guideRef.current?.getBoundingClientRect();
|
|
65
64
|
const videoRect = data.video.getBoundingClientRect();
|
|
66
65
|
invariant(guideRect, "'guideRef.getBoundingClientRect()' fails");
|
|
@@ -70,27 +69,31 @@ export function useSelfieImageField(props) {
|
|
|
70
69
|
const cropLeft = (guideRect.left - videoRect.left) * scaleX;
|
|
71
70
|
const cropWidth = guideRect.width * scaleX;
|
|
72
71
|
const cropHeight = guideRect.height * scaleY;
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
72
|
+
const targetWidth = 1200;
|
|
73
|
+
const targetHeight = 1200;
|
|
74
|
+
const canvas = document.createElement('canvas');
|
|
75
|
+
const context = canvas.getContext('2d');
|
|
76
|
+
invariant(context, "'canvas.getContext' failed");
|
|
77
|
+
canvas.width = targetWidth;
|
|
78
|
+
canvas.height = targetHeight;
|
|
79
|
+
context.imageSmoothingEnabled = true;
|
|
80
|
+
context.imageSmoothingQuality = 'high';
|
|
81
|
+
context.filter = 'brightness(1.05)';
|
|
82
|
+
context.drawImage(data.image, cropLeft, cropTop, cropWidth, cropHeight, 0, 0, targetWidth, targetHeight);
|
|
83
|
+
const file = await new Promise((resolve) => canvas.toBlob((blob) => {
|
|
84
|
+
invariant(blob);
|
|
85
|
+
resolve(new File([blob], `front-image-${Date.now()}.jpeg`, {
|
|
86
|
+
type: 'image/jpeg',
|
|
87
|
+
endings: 'native',
|
|
88
|
+
lastModified: Date.now(),
|
|
89
|
+
}));
|
|
90
|
+
}, 'image/jpeg', 1.0));
|
|
88
91
|
const url = URL.createObjectURL(file);
|
|
89
92
|
const image = new Image();
|
|
90
93
|
image.src = url;
|
|
91
94
|
image.alt = '';
|
|
92
|
-
image.width =
|
|
93
|
-
image.height =
|
|
95
|
+
image.width = targetWidth;
|
|
96
|
+
image.height = targetHeight;
|
|
94
97
|
return {
|
|
95
98
|
ok: true,
|
|
96
99
|
data: {
|
package/dist/handlers/index.d.ts
CHANGED
|
@@ -6,13 +6,6 @@ interface Context {
|
|
|
6
6
|
params: Promise<Params>;
|
|
7
7
|
}
|
|
8
8
|
export declare const GET: (req: NextRequest, { params }: Context) => Promise<NextResponse<{
|
|
9
|
-
ok: true;
|
|
10
|
-
data?: never;
|
|
11
|
-
} | {
|
|
12
|
-
ok: false;
|
|
13
|
-
message: string;
|
|
14
|
-
__error?: unknown;
|
|
15
|
-
}> | NextResponse<{
|
|
16
9
|
ok: false;
|
|
17
10
|
message: string;
|
|
18
11
|
__error?: unknown;
|
|
@@ -26,6 +19,13 @@ export declare const GET: (req: NextRequest, { params }: Context) => Promise<Nex
|
|
|
26
19
|
} | {
|
|
27
20
|
ok: true;
|
|
28
21
|
data: import("../types").Session;
|
|
22
|
+
}> | NextResponse<{
|
|
23
|
+
ok: true;
|
|
24
|
+
data?: never;
|
|
25
|
+
} | {
|
|
26
|
+
ok: false;
|
|
27
|
+
message: string;
|
|
28
|
+
__error?: unknown;
|
|
29
29
|
}>>;
|
|
30
30
|
export declare const DELETE: (req: NextRequest, { params }: Context) => Promise<NextResponse<{
|
|
31
31
|
ok: true;
|
package/dist/handlers/index.js
CHANGED
|
@@ -5,8 +5,6 @@ import { getSession } from './getSession.js';
|
|
|
5
5
|
import { patchSession } from './patchSession.js';
|
|
6
6
|
import { postAuthenticate } from './postAuthenticate.js';
|
|
7
7
|
import { postSession } from './postSession.js';
|
|
8
|
-
import { postTransformIdFrontImage } from './postTransformIdFrontImage.js';
|
|
9
|
-
import { postTransformSelfieImage } from './postTransformSelfieImage.js';
|
|
10
8
|
export const GET = async (req, { params }) => {
|
|
11
9
|
const { auth } = await params;
|
|
12
10
|
const path = auth[0];
|
|
@@ -29,21 +27,12 @@ export const DELETE = async (req, { params }) => {
|
|
|
29
27
|
export const POST = async (req, { params }) => {
|
|
30
28
|
const { auth } = await params;
|
|
31
29
|
const path = auth[0];
|
|
32
|
-
const subpath = auth[1];
|
|
33
30
|
if (path === 'sessions') {
|
|
34
31
|
return await postSession(req);
|
|
35
32
|
}
|
|
36
33
|
if (path === 'authenticate') {
|
|
37
34
|
return await postAuthenticate(req);
|
|
38
35
|
}
|
|
39
|
-
if (path === 'transformers') {
|
|
40
|
-
if (subpath === 'selfie-image') {
|
|
41
|
-
return await postTransformSelfieImage(req);
|
|
42
|
-
}
|
|
43
|
-
if (subpath === 'id-front-image') {
|
|
44
|
-
return await postTransformIdFrontImage(req);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
36
|
return NextResponse.json({ ok: false, message: 'Not found' }, { status: 404 });
|
|
48
37
|
};
|
|
49
38
|
export const PATCH = async (req, { params }) => {
|