@opexa/portal-components 0.0.966 → 0.0.967
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/__tests__/utils/mocks.d.ts +1 -1
- package/dist/client/hooks/useCamera.js +15 -55
- package/dist/components/AccountInfo/AccountInfo.js +1 -1
- package/dist/components/AccountSecurity/AccountSecurity.js +1 -1
- package/dist/components/Banner/Banner.js +3 -3
- package/dist/components/DepositWithdrawal/Deposit/AiOGCashDeposit/AiOGCashDeposit.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/AiOGrabPayDeposit/AiOGrabPayDeposit.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/AiOPayMayaDeposit/AiOPayMayaDeposit.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/AurixPayGCashDeposit/AurixPayGCashDeposit.js +2 -2
- package/dist/components/DepositWithdrawal/Deposit/AurixPayGrabPayDeposit/AurixPayGrabPayDeposit.js +2 -2
- package/dist/components/DepositWithdrawal/Deposit/AurixPayPayMayaDeposit/AurixPayPayMayaDeposit.js +2 -2
- package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/Form.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/Deposit.js +22 -11
- package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit/GCashWebpayDeposit.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/LibanganDeposit/LibanganDeposit.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/MayaAppDeposit/MayaAppDeposit.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/MayaDeposit/MayaDeposit.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/MayaWebpayDeposit/MayaWebpayDeposit.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts +2 -2
- package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositForm.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts +1 -1
- package/dist/components/DepositWithdrawal/Deposit/PisoPayDeposit/PisoPayDeposit.js +1 -1
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/Form.js +1 -1
- package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.d.ts +1 -0
- package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.js +2 -1
- package/dist/components/DepositWithdrawal/Withdrawal/GCashStandardCashInWithdrawal/GCashStandardCashInWithdrawal.js +2 -2
- package/dist/components/DepositWithdrawal/Withdrawal/GCashWithdrawal/GCashWithdrawal.js +2 -2
- package/dist/components/DepositWithdrawal/Withdrawal/InstapayGCashWithdrawal/InstapayGcashWithdrawal.js +3 -3
- package/dist/components/DepositWithdrawal/Withdrawal/InstapayPaymayaWithdrawal/InstapayPaymayaWithdrawal.js +3 -3
- package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js +1 -1
- package/dist/components/DepositWithdrawal/Withdrawal/MayaAppWithdrawal/MayaAppWithdrawal.js +1 -1
- package/dist/components/DepositWithdrawal/Withdrawal/MayaWithdrawal/MayaWithdrawal.js +2 -2
- package/dist/components/DepositWithdrawal/Withdrawal/PisoPayWithdrawal/PisoPayWithdrawal.js +1 -1
- package/dist/components/DepositWithdrawal/Withdrawal/TransactionPasswordNotSet.js +2 -2
- package/dist/components/DepositWithdrawal/Withdrawal/VentajaWithdrawal/VentajaWithdrawal.js +5 -5
- package/dist/components/Disclaimer/DisclaimerV1.js +3 -3
- package/dist/components/Disclaimer/DisclaimerV2.js +3 -3
- package/dist/components/Disclaimer/DisclaimerV3.js +24 -15
- package/dist/components/ForgotPassword/Crazywin/CWForgotPassword.js +1 -1
- package/dist/components/ForgotPassword/Crazywin/CWForgotPasswordForm.js +2 -2
- package/dist/components/ForgotPassword/ForgotPasswordForm.js +3 -3
- package/dist/components/GameProviders/GameProvidersCarousel.d.ts +8 -0
- package/dist/components/GameProviders/GameProvidersCarousel.js +32 -0
- package/dist/components/Games/Game.js +2 -1
- package/dist/components/GamesSearch/GamesSearch.js +8 -5
- package/dist/components/Jackpots/JackpotsCarouselNext/JackpotsCarouselStageItem.js +1 -1
- package/dist/components/Quests/Crazywin/components/Countdown.js +1 -1
- package/dist/components/Search/Search.lazy.js +8 -5
- package/dist/components/SignUp/SignUpKYC/SelfieImageField/useSelfieImageField.js +0 -1
- package/dist/components/TermsOfUse/TermsOfUseV2.lazy.d.ts +1 -1
- package/dist/components/TermsOfUse/TermsOfUseV2.lazy.js +1 -1
- package/dist/components/TermsOfUse/TermsOfUseV3.lazy.d.ts +1 -1
- package/dist/components/TermsOfUse/TermsOfUseV3.lazy.js +1 -1
- package/dist/components/UpdateMobilePhoneNumber/UpdateMobilePhoneNumber.d.ts +1 -0
- package/dist/{lib/components/UpdateMobileNumber/UpdateMobileNumber.js → components/UpdateMobilePhoneNumber/UpdateMobilePhoneNumber.js} +3 -5
- package/dist/components/UpdateMobilePhoneNumber/index.d.ts +1 -0
- package/dist/components/UpdateMobilePhoneNumber/index.js +1 -0
- package/dist/components/shared/SelfieImageField/useSelfieImageField.js +1 -3
- package/dist/handlers/index.d.ts +2 -2
- package/dist/schemas/forgotPasswordSchema.d.ts +4 -4
- package/dist/services/auth.d.ts +2 -2
- package/dist/services/httpRequest.d.ts +2 -2
- package/dist/ui/AlertDialog/AlertDialog.d.ts +154 -154
- package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +14 -14
- package/dist/ui/Badge/Badge.d.ts +12 -12
- package/dist/ui/Badge/badge.anatomy.d.ts +1 -1
- package/dist/ui/Badge/badge.recipe.d.ts +3 -3
- package/dist/ui/Carousel/Carousel.d.ts +126 -72
- package/dist/ui/Carousel/carousel.recipe.d.ts +14 -8
- package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
- package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
- package/dist/ui/Clipboard/Clipboard.d.ts +18 -18
- package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
- package/dist/ui/Collapsible/Collapsible.d.ts +20 -20
- package/dist/ui/Collapsible/collapsible.recipe.d.ts +5 -5
- package/dist/ui/Combobox/Combobox.d.ts +43 -43
- package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
- package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
- package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
- package/dist/ui/Dialog/Dialog.d.ts +33 -33
- package/dist/ui/Dialog/dialog.recipe.d.ts +3 -3
- package/dist/ui/Drawer/Drawer.d.ts +33 -33
- package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
- package/dist/ui/Menu/Menu.d.ts +198 -198
- package/dist/ui/Menu/menu.recipe.d.ts +11 -11
- package/dist/ui/Popover/Popover.d.ts +88 -88
- package/dist/ui/Popover/popover.recipe.d.ts +8 -8
- package/dist/ui/QrCode/QrCode.d.ts +25 -25
- package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
- package/dist/ui/Select/Select.d.ts +46 -46
- package/dist/ui/Select/select.recipe.d.ts +3 -3
- package/dist/ui/Table/Table.d.ts +21 -21
- package/dist/ui/Table/table.anatomy.d.ts +1 -1
- package/dist/ui/Table/table.recipe.d.ts +3 -3
- package/dist/ui/Tabs/Tabs.d.ts +15 -15
- package/dist/ui/Tabs/tabs.recipe.d.ts +3 -3
- package/package.json +1 -1
- package/dist/client/hooks/useVerifyMobileNumber.d.ts +0 -3
- package/dist/client/hooks/useVerifyMobileNumber.js +0 -20
- package/dist/components/DepositWithdrawal/Deposit/AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.d.ts +0 -1
- package/dist/components/DepositWithdrawal/Deposit/AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.js +0 -241
- package/dist/components/SingleSignOn/SingleSignOn.d.ts +0 -4
- package/dist/components/SingleSignOn/SingleSignOn.js +0 -185
- package/dist/components/SingleSignOn/index.d.ts +0 -1
- package/dist/components/SingleSignOn/index.js +0 -1
- package/dist/components/UpdateMobileNumber/UpdateMobileNumber.d.ts +0 -3
- package/dist/components/UpdateMobileNumber/UpdateMobileNumber.js +0 -141
- package/dist/components/UpdateMobileNumber/index.d.ts +0 -1
- package/dist/components/UpdateMobileNumber/index.js +0 -1
- package/dist/lib/components/UpdateMobileNumber/UpdateMobileNumber.d.ts +0 -1
- package/dist/lib/components/UpdateMobileNumber/index.d.ts +0 -1
- package/dist/lib/components/UpdateMobileNumber/index.js +0 -1
package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js
CHANGED
|
@@ -98,7 +98,7 @@ export function InstapayWithdrawal() {
|
|
|
98
98
|
code: z.ZodIssueCode.too_big,
|
|
99
99
|
inclusive: true,
|
|
100
100
|
maximum: maximumAmount,
|
|
101
|
-
message: `Maximum amount is ${maximumAmount.toLocaleString()}
|
|
101
|
+
message: `Maximum amount is ${maximumAmount.toLocaleString()}. Please contact support.`,
|
|
102
102
|
});
|
|
103
103
|
}
|
|
104
104
|
}),
|
|
@@ -116,7 +116,7 @@ export function MayaAppWithdrawal() {
|
|
|
116
116
|
shouldDirty: true,
|
|
117
117
|
shouldValidate: true,
|
|
118
118
|
});
|
|
119
|
-
}, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "
|
|
119
|
+
}, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Withdrawal Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(ActiveTurnoverRequirement, {}), _jsx(RequireFirstDeposit, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending || turnoverRequirement > 0, children: "Withdraw" }), depositWithdrawalProps.hasPrivacyPolicyAndTermsOfUse && (_jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] })), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
|
|
120
120
|
if (!details.open) {
|
|
121
121
|
setStatus('waiting');
|
|
122
122
|
}
|
|
@@ -77,7 +77,7 @@ export function MayaWithdrawal() {
|
|
|
77
77
|
code: z.ZodIssueCode.too_big,
|
|
78
78
|
inclusive: true,
|
|
79
79
|
maximum: maximumAmount,
|
|
80
|
-
message: `Maximum amount is ${maximumAmount.toLocaleString()}
|
|
80
|
+
message: `Maximum amount is ${maximumAmount.toLocaleString()}. Please contact support.`,
|
|
81
81
|
});
|
|
82
82
|
}
|
|
83
83
|
}),
|
|
@@ -126,7 +126,7 @@ export function MayaWithdrawal() {
|
|
|
126
126
|
shouldDirty: true,
|
|
127
127
|
shouldValidate: true,
|
|
128
128
|
});
|
|
129
|
-
}, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "
|
|
129
|
+
}, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Withdrawal Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(ActiveTurnoverRequirement, {}), _jsx(RequireFirstDeposit, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending || turnoverRequirement > 0, children: "Withdraw" }), depositWithdrawalProps.hasPrivacyPolicyAndTermsOfUse && (_jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] })), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
|
|
130
130
|
if (!details.open) {
|
|
131
131
|
setStatus('waiting');
|
|
132
132
|
}
|
|
@@ -150,7 +150,7 @@ export function PisoPayWithdrawal() {
|
|
|
150
150
|
shouldDirty: true,
|
|
151
151
|
shouldValidate: true,
|
|
152
152
|
});
|
|
153
|
-
}, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "
|
|
153
|
+
}, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Withdrawal Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(ActiveTurnoverRequirement, {}), _jsx(RequireFirstDeposit, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending || turnoverRequirement > 0, children: "Withdraw" }), depositWithdrawalProps.hasPrivacyPolicyAndTermsOfUse && (_jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] })), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
|
|
154
154
|
if (!details.open) {
|
|
155
155
|
setStatus('waiting');
|
|
156
156
|
}
|
|
@@ -17,7 +17,7 @@ export function TransactionPasswordNotSet() {
|
|
|
17
17
|
return null;
|
|
18
18
|
if (account.transactionPassword)
|
|
19
19
|
return null;
|
|
20
|
-
return (_jsxs("div", { className: "mt-lg rounded-xl border border-border-primary bg-bg-primary-alt p-xl", children: [_jsx("div", { className: "flex size-8.5 items-center justify-center rounded-full border-[1.667px] border-text-warning-primary/10", children: _jsx("div", { className: "flex size-6.5 items-center justify-center rounded-full border-[1.667px] border-text-warning-primary/30", children: _jsx(PasscodeLockIcon, { className: "size-5 text-text-warning-primary" }) }) }), _jsx("p", { className: "mt-lg text-sm text-text-tertiary-600", children: "It looks like you haven\u2019t set up your
|
|
20
|
+
return (_jsxs("div", { className: "mt-lg rounded-xl border border-border-primary bg-bg-primary-alt p-xl", children: [_jsx("div", { className: "flex size-8.5 items-center justify-center rounded-full border-[1.667px] border-text-warning-primary/10", children: _jsx("div", { className: "flex size-6.5 items-center justify-center rounded-full border-[1.667px] border-text-warning-primary/30", children: _jsx(PasscodeLockIcon, { className: "size-5 text-text-warning-primary" }) }) }), _jsx("p", { className: "mt-lg text-sm text-text-tertiary-600", children: "It looks like you haven\u2019t set up your withdrawal password yet. You can do it now." }), _jsxs(Link, { href: depositWithdrawalProps.accountSecurityUrl ?? '/account/security', className: "mt-lg flex items-center gap-sm font-semibold text-brand- text-brand-400 text-sm", onClick: () => {
|
|
21
21
|
globalStore.depositWithdrawal.setOpen(false);
|
|
22
|
-
}, children: ["Set
|
|
22
|
+
}, children: ["Set withdrawal password", _jsx(ArrowRightIcon, { className: "size-5 text-text-brand-700" })] })] }));
|
|
23
23
|
}
|
|
@@ -86,15 +86,15 @@ export function VentajaWithdrawal() {
|
|
|
86
86
|
code: z.ZodIssueCode.too_big,
|
|
87
87
|
inclusive: true,
|
|
88
88
|
maximum: maximumAmount,
|
|
89
|
-
message: `Maximum amount is ${maximumAmount.toLocaleString()}
|
|
89
|
+
message: `Maximum amount is ${maximumAmount.toLocaleString()}. Please contact support.`,
|
|
90
90
|
});
|
|
91
91
|
}
|
|
92
92
|
}),
|
|
93
93
|
password: z
|
|
94
94
|
.string()
|
|
95
|
-
.min(1, '
|
|
96
|
-
.min(8, '
|
|
97
|
-
.max(64, '
|
|
95
|
+
.min(1, 'Withdrawal Password is required')
|
|
96
|
+
.min(8, 'Withdrawal Password must be 8 or more characters')
|
|
97
|
+
.max(64, 'Withdrawal Password must be not be more than 64 characters'),
|
|
98
98
|
accountNumber: z
|
|
99
99
|
.string()
|
|
100
100
|
.min(1, paymentMethod === 'INSTAPAY'
|
|
@@ -204,7 +204,7 @@ export function VentajaWithdrawal() {
|
|
|
204
204
|
shouldDirty: true,
|
|
205
205
|
shouldValidate: true,
|
|
206
206
|
});
|
|
207
|
-
}, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), account?.transactionPassword && (_jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "
|
|
207
|
+
}, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), account?.transactionPassword && (_jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Withdrawal Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter Withdrawal password", ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] })), _jsx(TransactionPasswordNotSet, {}), _jsx(ActiveTurnoverRequirement, {}), _jsx(RequireFirstDeposit, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending || !account?.transactionPassword, children: "Withdraw" }), _jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
|
|
208
208
|
if (!details.open) {
|
|
209
209
|
setStatus('waiting');
|
|
210
210
|
}
|
|
@@ -23,14 +23,14 @@ export function DisclaimerV1(props) {
|
|
|
23
23
|
})));
|
|
24
24
|
const checked = globalStore.termsOfUse.accepted;
|
|
25
25
|
const [warn, setWarn] = useState(false);
|
|
26
|
-
return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:max-h-[80vh] lg:w-[400px] lg:rounded-xl", style: { msOverflowStyle: 'none', scrollbarWidth: 'none' }, children: [_jsx(Image, { src: props.logo, alt: "", width: 142, height: 30, className: "mx-auto h-auto w-[8.875rem]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 74, width: 88, className: "h-[5.5rem] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 185, className: "h-[3.875rem] w-auto shrink-0", draggable: false })] }), _jsx("p", { className: "mt-4 text-center text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "mt-5", children: _jsx("ul", { className: "space-y-1", children: items.map((item, index) => (_jsxs("li", { className: "flex items-start gap-md text-sm text-text-secondary-700", children: [_jsx("div", { className: "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full bg-bg-brand-solid", children: _jsx("div", { className: "size-1.5 rounded-full bg-cyan-950" }) }), item] }, index))) }) }), _jsxs(Field.Root, { invalid: warn, className: "mt-2xl", children: [_jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
|
|
26
|
+
return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { "data-testid": "disclaimer-v1-dialog", className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:max-h-[80vh] lg:w-[400px] lg:rounded-xl", style: { msOverflowStyle: 'none', scrollbarWidth: 'none' }, children: [_jsx(Image, { src: props.logo, alt: "", width: 142, height: 30, className: "mx-auto h-auto w-[8.875rem]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 74, width: 88, className: "h-[5.5rem] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 185, className: "h-[3.875rem] w-auto shrink-0", draggable: false })] }), _jsx("p", { className: "mt-4 text-center text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "mt-5", children: _jsx("ul", { className: "space-y-1", "data-testid": "disclaimer-v1-restrictions-list", children: items.map((item, index) => (_jsxs("li", { className: "flex items-start gap-md text-sm text-text-secondary-700", children: [_jsx("div", { className: "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full bg-bg-brand-solid", children: _jsx("div", { className: "size-1.5 rounded-full bg-cyan-950" }) }), item] }, index))) }) }), _jsxs(Field.Root, { invalid: warn, className: "mt-2xl", children: [_jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
|
|
27
27
|
if (e.checked === 'indeterminate')
|
|
28
28
|
return;
|
|
29
29
|
globalStore.termsOfUse.setAccepted(e.checked);
|
|
30
30
|
setWarn(!e.checked);
|
|
31
|
-
}, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { className: "text-sm", children: ["I am at least 21 years of age, I accept the", ' ', _jsx(Link, { href: props.termsOfUseUrl ?? '/terms-of-use', className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
31
|
+
}, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { className: "text-sm", children: ["I am at least 21 years of age, I accept the", ' ', _jsx(Link, { href: props.termsOfUseUrl ?? '/terms-of-use', className: "text-brand-400 underline underline-offset-2", "data-testid": "disclaimer-v1-terms-link", onClick: () => {
|
|
32
32
|
globalStore.termsOfUse.setOpen(false);
|
|
33
|
-
}, children: "Terms of Use" }), ' ', "and I am not playing in open or public space."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Field.ErrorText, { className: "!mt-2xl flex items-center justify-center gap-2 text-error-600 text-sm", children: [_jsx(AlertCircleIcon, { className: "size-4 shrink-0 text-error-600" }), "Please agree to ", props.siteName, "\u2019s Terms of Use to proceed."] })] }), _jsx("p", { className: "mt-2xl text-sm", children: "Funds or credits in the account of any individual found ineligible to participate will be forfeited and turned over to the government as required by law." }), _jsxs("div", { className: "flex w-full flex-col gap-lg", children: [_jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, disabled: !checked, children: "Accept" }), _jsx(Button, { variant: "outline", type: "button", className: "mt-lg", onClick: () => {
|
|
33
|
+
}, children: "Terms of Use" }), ' ', "and I am not playing in open or public space."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Field.ErrorText, { className: "!mt-2xl flex items-center justify-center gap-2 text-error-600 text-sm", children: [_jsx(AlertCircleIcon, { className: "size-4 shrink-0 text-error-600" }), "Please agree to ", props.siteName, "\u2019s Terms of Use to proceed."] })] }), _jsx("p", { className: "mt-2xl text-sm", children: "Funds or credits in the account of any individual found ineligible to participate will be forfeited and turned over to the government as required by law." }), _jsxs("div", { className: "flex w-full flex-col gap-lg", children: [_jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, disabled: !checked, "data-testid": "disclaimer-v1-accept-btn", children: "Accept" }), _jsx(Button, { variant: "outline", type: "button", className: "mt-lg", "data-testid": "disclaimer-v1-exit-btn", onClick: () => {
|
|
34
34
|
if (props.exitRedirect) {
|
|
35
35
|
window.location.href = props.exitRedirect;
|
|
36
36
|
return;
|
|
@@ -54,7 +54,7 @@ export function DisclaimerV2(props) {
|
|
|
54
54
|
sessionStorage.clear();
|
|
55
55
|
},
|
|
56
56
|
});
|
|
57
|
-
return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: twMerge('flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start gap-y-4 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent pt-3xl lg:mx-auto lg:h-auto lg:max-h-[85vh] lg:w-[500px] lg:rounded-xl', classNames.root), "aria-label": `${props.siteName} Player Disclaimer`, "aria-describedby": "disclaimer-description", children: [_jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, 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: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsx("div", { className: "px-3xl text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow px-3xl", children: _jsxs(Dialog.Description, { className: "space-y-2 text-sm", id: "disclaimer-description", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Government Official or employee connected directly with the operation of the Government or any of 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, or the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons under 21 years of age."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons included in the PAGCOR's National Database of Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Accounts that do not complete the full KYC process within the 72-hour period will be subject to permanent suspension and forfeiture of any funds in the account."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Funds or credits in the account of a player who is found ineligible to play shall mean forfeiture of said funds/credit in favor of the Government."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "You are prohibited from playing in open and public places."] })] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
|
|
57
|
+
return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: twMerge('flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start gap-y-4 overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent pt-3xl lg:mx-auto lg:h-auto lg:max-h-[85vh] lg:w-[500px] lg:rounded-xl', classNames.root), "data-testid": "disclaimer-v2-dialog", "aria-label": `${props.siteName} Player Disclaimer`, "aria-describedby": "disclaimer-description", children: [_jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, 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: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsx("div", { className: "px-3xl text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow px-3xl", children: _jsxs(Dialog.Description, { className: "space-y-2 text-sm", id: "disclaimer-description", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", "data-testid": "disclaimer-v2-restrictions-list", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Government Official or employee connected directly with the operation of the Government or any of 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, or the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons under 21 years of age."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons included in the PAGCOR's National Database of Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Accounts that do not complete the full KYC process within the 72-hour period will be subject to permanent suspension and forfeiture of any funds in the account."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Funds or credits in the account of a player who is found ineligible to play shall mean forfeiture of said funds/credit in favor of the Government."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "You are prohibited from playing in open and public places."] })] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
|
|
58
58
|
if (e.checked === 'indeterminate')
|
|
59
59
|
return;
|
|
60
60
|
globalStore.termsOfUse.setAccepted(e.checked);
|
|
@@ -63,7 +63,7 @@ export function DisclaimerV2(props) {
|
|
|
63
63
|
globalStore.termsOfUse.setOpen(true);
|
|
64
64
|
globalStore.termsOfUse.setNext('DISCLAIMER');
|
|
65
65
|
disclaimer.close();
|
|
66
|
-
}, children: "Terms of Use" }), ' ', "and I am not playing in open or public place."] }), _jsx(Checkbox.HiddenInput, {})] }), showWarning && (_jsxs("div", { className: twMerge('mt-2 flex max-w-full items-center gap-2 break-words rounded-md text-text-error-primary text-xs'), role: "alert", "aria-live": "assertive", children: [_jsx(AlertCircleIcon, { className: "size-5 text-text-error-primary" }), "Please agree to ", props.siteName, "'s Terms of Use to proceed."] })), _jsx("div", { children: "Funds or credits in the account of any individual found ineligible to participate will be forfeited and turned over to the government as required by law" }), _jsxs("div", { className: "text-text-secondary-700", children: ["Self Exclusion Site:", _jsxs("a", { href: "https://osea.pagcor.ph/", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", children: [' ', "osea.pagcor.ph"] })] }), _jsxs("div", { children: [_jsx("div", { className: "text-text-secondary-700", children: "Visit PAGCOR\u2019s Responsible Gaming Program to know more:" }), _jsxs("a", { href: "https://www.pagcor.ph/regulatory/responsible-gaming.php", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", children: [' ', "pagcor.ph/regulatory/responsible-gaming.php"] })] })] }) }), _jsxs("div", { className: twMerge('mt-2 flex w-full gap-3 border-bg-secondary border-t px-3xl py-3xl', classNames.buttonsContainer), children: [_jsx(Button, { type: "button", onClick: async () => {
|
|
66
|
+
}, children: "Terms of Use" }), ' ', "and I am not playing in open or public place."] }), _jsx(Checkbox.HiddenInput, {})] }), showWarning && (_jsxs("div", { className: twMerge('mt-2 flex max-w-full items-center gap-2 break-words rounded-md text-text-error-primary text-xs'), role: "alert", "aria-live": "assertive", children: [_jsx(AlertCircleIcon, { className: "size-5 text-text-error-primary" }), "Please agree to ", props.siteName, "'s Terms of Use to proceed."] })), _jsx("div", { children: "Funds or credits in the account of any individual found ineligible to participate will be forfeited and turned over to the government as required by law" }), _jsxs("div", { className: "text-text-secondary-700", children: ["Self Exclusion Site:", _jsxs("a", { href: "https://osea.pagcor.ph/", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", "data-testid": "disclaimer-v2-osea-link", children: [' ', "osea.pagcor.ph"] })] }), _jsxs("div", { children: [_jsx("div", { className: "text-text-secondary-700", children: "Visit PAGCOR\u2019s Responsible Gaming Program to know more:" }), _jsxs("a", { href: "https://www.pagcor.ph/regulatory/responsible-gaming.php", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", "data-testid": "disclaimer-v2-pagcor-link", children: [' ', "pagcor.ph/regulatory/responsible-gaming.php"] })] })] }) }), _jsxs("div", { className: twMerge('mt-2 flex w-full gap-3 border-bg-secondary border-t px-3xl py-3xl', classNames.buttonsContainer), children: [_jsx(Button, { type: "button", "data-testid": "disclaimer-v2-exit-btn", onClick: async () => {
|
|
67
67
|
if (Capacitor.isNativePlatform()) {
|
|
68
68
|
const session = await getQueryClient().fetchQuery({
|
|
69
69
|
queryKey: getSessionQueryKey(),
|
|
@@ -86,7 +86,7 @@ export function DisclaimerV2(props) {
|
|
|
86
86
|
else {
|
|
87
87
|
disclaimer.close();
|
|
88
88
|
}
|
|
89
|
-
}, variant: "outline", children: "Exit" }), _jsx(Button, { type: "button", onClick: () => {
|
|
89
|
+
}, variant: "outline", children: "Exit" }), _jsx(Button, { type: "button", "data-testid": "disclaimer-v2-accept-btn", onClick: () => {
|
|
90
90
|
if (!checked) {
|
|
91
91
|
setShowWarning(true);
|
|
92
92
|
setTimeout(() => setShowWarning(false), 4000);
|
|
@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge';
|
|
|
8
8
|
import { useShallow } from 'zustand/shallow';
|
|
9
9
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
10
10
|
import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
|
|
11
|
+
import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
|
|
11
12
|
import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
|
|
12
13
|
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
13
14
|
import pagcorLogo from '../../images/pagcor2.png';
|
|
@@ -30,20 +31,34 @@ export function DisclaimerV3(props) {
|
|
|
30
31
|
const isAuthenticated = sessionQuery.data?.status === 'authenticated';
|
|
31
32
|
const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
|
|
32
33
|
const [showWarning, setShowWarning] = useState(false);
|
|
33
|
-
|
|
34
|
+
const signOutMutation = useSignOutMutation();
|
|
35
|
+
const handleExit = () => {
|
|
36
|
+
if (props.redirectUrlOnNoConsent) {
|
|
37
|
+
if (Capacitor.isNativePlatform()) {
|
|
38
|
+
App.exitApp();
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
window.location.href = props.redirectUrlOnNoConsent;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
disclaimer.close();
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { "aria-label": `${props.siteName} Player Disclaimer`, "aria-labelledby": "disclaimer-title", "aria-describedby": "disclaimer-description", "data-testid": "disclaimer-v3-dialog", className: twMerge('flex h-full scrollbar:h-2 scrollbar:w-2 w-full flex-col items-start overflow-y-auto scrollbar-thumb:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent p-3xl lg:mx-auto lg:h-auto lg:max-h-[85vh] lg:w-[500px] lg:rounded-xl'), children: [_jsx("div", { className: "mx-auto h-auto max-w-[120px]", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "h-full w-full object-cover", draggable: false, unoptimized: true }) }), _jsxs("div", { className: "my-4 grid w-full grid-cols-2 items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo ?? pagcorLogo, alt: "PAGCOR logo", height: 50, width: 186, className: "mx-auto h-[43px] w-auto shrink-0 object-contain", draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: "mx-auto h-[50px] w-auto shrink-0", draggable: false, unoptimized: true })] }), _jsx("div", { className: "w-full text-center font-semibold text-2xl uppercase", id: "disclaimer-title", "data-testid": "disclaimer-v3-title", children: "Notice" }), _jsx("div", { className: "mt-2 mb-1 text-sm text-text-secondary-700", id: "disclaimer-description", children: "By entering this website, you acknowledge and confirm:" }), _jsx("div", { className: "mt-4 w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", "aria-label": "Restricted persons list", "data-testid": "disclaimer-v3-restrictions-list", children: [_jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are 21 years old and above."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not a government official, or employee connected directly with the operation of the Government or any of its agencies, member of the Armed Forces of the Philippines including the Army, Navy, Air Force, or the Philippine Nationa Police."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are not included in the PAGCOR's National Database Restricted Persons (NDRP)."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "Funds or credits in the account of player who is found ineligible to play shall mean forfeiture of said funds/credits in favor of the Government."] }), _jsxs("li", { className: "flex gap-4 text-text-placeholder", children: [_jsx(Circle, {}), "You are prohibited from playing in open and public places."] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
|
|
34
49
|
if (e.checked === 'indeterminate')
|
|
35
50
|
return;
|
|
36
51
|
globalStore.termsOfUse.setAccepted(e.checked);
|
|
37
52
|
globalStore.responsibleGaming.setAccepted(e.checked);
|
|
38
|
-
}, className: "pt-2.5 pb-2 text-sm", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["You agree and read the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
53
|
+
}, className: "pt-2.5 pb-2 text-sm", colorScheme: "neutral", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["You agree and read the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", "data-testid": "disclaimer-v3-terms-btn", onClick: () => {
|
|
39
54
|
globalStore.termsOfUse.setOpen(true);
|
|
40
55
|
globalStore.termsOfUse.setNext('DISCLAIMER');
|
|
41
56
|
disclaimer.close();
|
|
42
|
-
}, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
|
|
57
|
+
}, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", "data-testid": "disclaimer-v3-rg-btn", onClick: () => {
|
|
43
58
|
globalStore.responsibleGaming.setOpen(true);
|
|
44
59
|
globalStore.responsibleGaming.setNext('DISCLAIMER');
|
|
45
60
|
disclaimer.close();
|
|
46
|
-
}, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs("li", { className: "mt-5", children: ["Self Exclusion Site:\u00A0", _jsx("a", { href: "https://osea.pagcor.ph", target: "_blank", className: "text-brand-400 underline underline-offset-2", rel: "noopener", children: "https://osea.pagcor.ph/" })] }), _jsxs("li", { className: "mt-5", children: ["To know more about PAGCOR's Responsible Gaming Program:\u00A0", _jsx("a", { href: "https://www.pagcor.ph/regulatory/responsible-gaming.php", target: "_blank", className: "text-brand-400 underline underline-offset-2", rel: "noopener", children: "https://www.pagcor.ph/regulatory/responsible-gaming.php" })] })] }), _jsx("div", { className: twMerge('mx-auto mt-2 flex max-w-full items-center gap-2 break-words rounded-md text-text-error-primary text-xs', showWarning ? 'h-[28px] opacity-100' : 'opacity-0'), role: "alert", "aria-live": "assertive", children: showWarning && (_jsxs(_Fragment, { children: [_jsx(AlertCircleIcon, { className: "size-5 text-text-error-primary" }), "Please agree to ", props.siteName, "'s Terms of Use and Responsible Gaming to proceed."] })) })] }) }), _jsxs("div", { className: "row mt-4 flex w-full flex-col gap-3", children: [_jsx(Button, { type: "button", onClick: () => {
|
|
61
|
+
}, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs("li", { className: "mt-5", children: ["Self Exclusion Site:\u00A0", _jsx("a", { href: "https://osea.pagcor.ph", target: "_blank", className: "text-brand-400 underline underline-offset-2", rel: "noopener", "data-testid": "disclaimer-v3-osea-link", children: "https://osea.pagcor.ph/" })] }), _jsxs("li", { className: "mt-5", children: ["To know more about PAGCOR's Responsible Gaming Program:\u00A0", _jsx("a", { href: "https://www.pagcor.ph/regulatory/responsible-gaming.php", target: "_blank", className: "text-brand-400 underline underline-offset-2", rel: "noopener", "data-testid": "disclaimer-v3-pagcor-link", children: "https://www.pagcor.ph/regulatory/responsible-gaming.php" })] })] }), _jsx("div", { className: twMerge('mx-auto mt-2 flex max-w-full items-center gap-2 break-words rounded-md text-text-error-primary text-xs', showWarning ? 'h-[28px] opacity-100' : 'opacity-0'), role: "alert", "aria-live": "assertive", children: showWarning && (_jsxs(_Fragment, { children: [_jsx(AlertCircleIcon, { className: "size-5 text-text-error-primary" }), "Please agree to ", props.siteName, "'s Terms of Use and Responsible Gaming to proceed."] })) })] }) }), _jsxs("div", { className: "row mt-4 flex w-full flex-col gap-3", children: [_jsx(Button, { type: "button", "data-testid": "disclaimer-v3-agree-btn", onClick: () => {
|
|
47
62
|
if (!checked) {
|
|
48
63
|
setShowWarning(true);
|
|
49
64
|
setTimeout(() => setShowWarning(false), 4000);
|
|
@@ -57,18 +72,12 @@ export function DisclaimerV3(props) {
|
|
|
57
72
|
if (props.openOnboardingOnAgree) {
|
|
58
73
|
globalStore.onboarding.setOpen(true);
|
|
59
74
|
}
|
|
60
|
-
}, children: "I Agree" }), _jsx(Button, { type: "button", onClick: () => {
|
|
61
|
-
if (
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
66
|
-
window.location.href = props.redirectUrlOnNoConsent;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
else {
|
|
70
|
-
disclaimer.close();
|
|
75
|
+
}, children: "I Agree" }), _jsx(Button, { type: "button", "data-testid": "disclaimer-v3-exit-btn", onClick: () => {
|
|
76
|
+
if (isAuthenticated && !checked) {
|
|
77
|
+
signOutMutation.mutate();
|
|
78
|
+
handleExit();
|
|
71
79
|
}
|
|
80
|
+
handleExit();
|
|
72
81
|
}, variant: "outline", children: "Exit" })] })] }) })] }) }));
|
|
73
82
|
}
|
|
74
83
|
const Circle = () => (_jsx("div", { children: _jsx("div", { className: "flex h-4.5 w-4.5 items-center justify-center rounded-full border-[5px] border-brand-400", children: _jsx("div", { className: "h-2 w-2 rounded-full bg-bg-disabled" }) }) }));
|
|
@@ -6,6 +6,6 @@ import { Dialog } from '../../../ui/Dialog/index.js';
|
|
|
6
6
|
import CWForgotPasswordForm from './CWForgotPasswordForm.js';
|
|
7
7
|
import styles from './ForgotPassword.module.css';
|
|
8
8
|
const ForgotPassword = ({ logo }) => {
|
|
9
|
-
return (_jsx(Dialog.Content, { className: "
|
|
9
|
+
return (_jsx(Dialog.Content, { className: "overflow-y-invisible top-0 left-0 flex h-full w-full items-center bg-transparent", children: _jsxs("div", { className: "flex h-[90dvh] w-full flex-col justify-center scroll-smooth", children: [_jsxs("div", { className: "relative mx-auto w-full max-w-[22.5rem]", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto mt-8 h-auto w-[12.04544rem]", draggable: false }), _jsx(Dialog.CloseTrigger, { className: 'h-fit w-fit rounded-md bg-gradient-to-t from-[#FFE5AF] to-[#EAC467] p-0.5 text-[#6C5200]', children: _jsx(XIcon, {}) })] }), _jsx("h2", { className: "mx-auto mt-10 w-fit bg-[linear-gradient(50deg,#c7802d_-5.1%,#ffe585_44.95%,#c7802d_109.05%)] bg-clip-text font-bold text-2xl text-transparent uppercase", children: "Forgot Password" }), _jsx("div", { className: twMerge('mx-auto mt-7.5 max-w-[20.6875rem] p-7.5', styles.card), children: _jsx(CWForgotPasswordForm, {}) })] }) }));
|
|
10
10
|
};
|
|
11
11
|
export default ForgotPassword;
|
|
@@ -59,7 +59,7 @@ const CWForgotPasswordForm = () => {
|
|
|
59
59
|
verificationCode: data.verificationCode,
|
|
60
60
|
});
|
|
61
61
|
};
|
|
62
|
-
return (_jsx("form", { autoComplete: 'off', onSubmit: handleSubmit(onSubmit), children: _jsxs("div", { className: "space-y-4", children: [_jsxs(Field.Root, { invalid: !!errors.mobileNumber, children: [_jsx(Field.Label, { className: "text-xs", children: "Phone Number" }), _jsxs("div", { className: "relative flex h-10 gap-3", children: [_jsxs("div", { className: "flex h-full items-center gap-2 rounded-full bg-black/40 px-3.5 text-xs", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: commonInputClass, placeholder: "Enter Phone Number", ...register('mobileNumber') })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!errors.password, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full
|
|
62
|
+
return (_jsx("form", { autoComplete: 'off', onSubmit: handleSubmit(onSubmit), children: _jsxs("div", { className: "space-y-4", children: [_jsxs(Field.Root, { invalid: !!errors.mobileNumber, children: [_jsx(Field.Label, { className: "text-xs", children: "Phone Number" }), _jsxs("div", { className: "relative flex h-10 gap-3", children: [_jsxs("div", { className: "flex h-full items-center gap-2 rounded-full bg-black/40 px-3.5 text-xs", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { className: commonInputClass, placeholder: "Enter Phone Number", ...register('mobileNumber') })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!errors.password, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full border-0 bg-black/40 text-xs", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.password?.message })] })] }) }), _jsx(Field.Root, { invalid: !!errors.confirmPassword, children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: "text-xs", children: "Confirm Password" }), _jsxs("div", { children: [_jsxs(PasswordInput.Control, { className: "relative flex h-10 items-center rounded-full border-0 bg-black/40 text-xs", children: [_jsx(Image, { src: lockIcon, alt: "lock icon", width: 20, height: 20, className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 h-5 w-5" }), _jsx(PasswordInput.Input, { className: "pl-10", placeholder: "8 - 20 characters", ...register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, { className: "text-white/50" }), asChild: true, children: _jsx(EyeIcon, { className: "text-white/50" }) }) })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.confirmPassword?.message })] })] }) }), _jsxs(Field.Root, { invalid: !!errors.verificationCode, children: [_jsx(Field.Label, { className: "text-xs", children: "OTP Code" }), _jsxs("div", { className: "relative", children: [_jsx(Field.Input, { className: twMerge(commonInputClass, 'pr-[5.75rem]'), placeholder: "Enter OTP Code", ...register('verificationCode') }), _jsx(Button, { type: "button", className: "-translate-y-1/2 absolute top-1/2 right-1 h-fit w-fit rounded-full bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)] py-[0.375rem] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1]", disabled: !mobileNumberValue || !!errors.mobileNumber || cooldown.cooling, onClick: async () => {
|
|
63
63
|
if (!cooldown.cooling) {
|
|
64
64
|
await sendVerificationCodeMutation.mutateAsync({
|
|
65
65
|
channel: 'SMS',
|
|
@@ -70,6 +70,6 @@ const CWForgotPasswordForm = () => {
|
|
|
70
70
|
description: `OTP sent to ${getValues('mobileNumber')}`
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
|
-
}, children: cooldown.cooling ? cooldown.countdown : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-7.5
|
|
73
|
+
}, children: cooldown.cooling ? cooldown.countdown : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-7.5 rounded-full bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1]", fullWidth: true, disabled: !isValid || !isDirty, children: "Change Password" })] }) }));
|
|
74
74
|
};
|
|
75
75
|
export default CWForgotPasswordForm;
|
|
@@ -113,9 +113,9 @@ export function ForgotPasswordForm({ layout }) {
|
|
|
113
113
|
newPassword: step1Form.getValues('newPassword'),
|
|
114
114
|
verificationCode: step1Form.getValues('verificationCode'),
|
|
115
115
|
});
|
|
116
|
-
}), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', 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, { className: '
|
|
116
|
+
}), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', 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, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', style: {
|
|
117
117
|
paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
|
|
118
|
-
}, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.newPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "New Password" }), _jsxs(PasswordInput.Control, { className: '
|
|
118
|
+
}, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.newPassword, className: "mt-xl", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "New Password" }), _jsxs(PasswordInput.Control, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', children: [_jsx(PasswordInput.Input, { placeholder: "Enter your new password", ...step1Form.register('newPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.newPassword?.message })] }) }), _jsx(Field.Root, { invalid: !!step1Form.formState.errors.confirmPassword, className: "mt-xl bg-transparent", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "Confirm Password" }), _jsxs(PasswordInput.Control, { className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]', children: [_jsx(PasswordInput.Input, { placeholder: "Confirm new password", ...step1Form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.confirmPassword?.message })] }) }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.verificationCode, className: "mt-xl bg-transparent", children: [_jsx(Field.Label, { className: 'text-[#344054] dark:text-[#CECFD2]', children: "OTP Code" }), _jsxs("div", { className: "grid grid-cols-[1fr_104px] gap-2", children: [_jsx(Field.Input, { placeholder: "Enter OTP Code", ...step1Form.register('verificationCode'), className: 'border-[#D0D5DD] bg-transparent dark:border-[#333741]' }), _jsx(Button, { variant: 'outline', className: 'bg-transparent', type: 'button', disabled: !mobileNumberValue || !!step1Form.formState.errors.mobileNumber || cooldown.cooling, onClick: async () => {
|
|
119
119
|
if (!cooldown.cooling) {
|
|
120
120
|
try {
|
|
121
121
|
await sendVerificationCodeMutation.mutateAsync({
|
|
@@ -132,7 +132,7 @@ export function ForgotPasswordForm({ layout }) {
|
|
|
132
132
|
});
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
|
-
}, children: cooldown.cooling ? cooldown.countdown
|
|
135
|
+
}, children: cooldown.cooling ? `${cooldown.countdown} sec` : 'Get OTP' })] }), _jsx(Field.ErrorText, { className: "text-[#ff2525b3] text-xs", children: step1Form.formState.errors.verificationCode?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting || !step1Form.formState.isValid || !step1Form.formState.isDirty, children: "Set up New Password" })] })] }));
|
|
136
136
|
}
|
|
137
137
|
return (_jsxs(_Fragment, { children: [step === 1 && (_jsxs(_Fragment, { children: [Header[step], _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
|
|
138
138
|
try {
|
|
@@ -8,10 +8,18 @@ export interface ClassNameEntries {
|
|
|
8
8
|
thumbnailContainer?: string;
|
|
9
9
|
thumbnailRootContainer?: string;
|
|
10
10
|
}
|
|
11
|
+
export interface ActiveProvider {
|
|
12
|
+
activeProvider?: GameProvider | string;
|
|
13
|
+
jump?: boolean;
|
|
14
|
+
}
|
|
11
15
|
export interface GameProvidersCarouselProps {
|
|
12
16
|
layout: 'carousel';
|
|
13
17
|
gameProviders: GameProvider[];
|
|
14
18
|
heading?: string | ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* Scrolls the carousel to the matching provider id or slug on load.
|
|
21
|
+
*/
|
|
22
|
+
scrollProvider?: ActiveProvider;
|
|
15
23
|
/**
|
|
16
24
|
* @default '/providers'
|
|
17
25
|
*/
|
|
@@ -56,9 +56,41 @@ export function GameProvidersCarousel({ hasSeeAll = true, ...props }) {
|
|
|
56
56
|
? [...props.gameProviders, ...(props.futureGameProviders ?? [])]
|
|
57
57
|
: props.gameProviders, [enabled, props.gameProviders, props.futureGameProviders]);
|
|
58
58
|
const gameProviders = useMemo(() => combinedProviders.map((provider) => GAME_PROVIDER_DATA[provider]), [combinedProviders]);
|
|
59
|
+
const resolvedActiveProvider = props.scrollProvider?.activeProvider;
|
|
60
|
+
const shouldJump = props.scrollProvider?.jump ?? false;
|
|
61
|
+
const activeProviderIndex = useMemo(() => {
|
|
62
|
+
if (!resolvedActiveProvider)
|
|
63
|
+
return -1;
|
|
64
|
+
return gameProviders.findIndex((provider) => provider.id === resolvedActiveProvider ||
|
|
65
|
+
provider.slug === resolvedActiveProvider);
|
|
66
|
+
}, [gameProviders, resolvedActiveProvider]);
|
|
59
67
|
const classNames = useMemo(() => isString(props.className)
|
|
60
68
|
? { root: props.className }
|
|
61
69
|
: (props.className ?? {}), [props.className]);
|
|
70
|
+
const getSlidesToScroll = useCallback(() => {
|
|
71
|
+
const desktopSlidesToScroll = props.carouselOptions?.breakpoints[1024]?.slidesToScroll ?? 6;
|
|
72
|
+
if (typeof window === 'undefined')
|
|
73
|
+
return 3;
|
|
74
|
+
return window.matchMedia('(min-width: 1024px)').matches
|
|
75
|
+
? desktopSlidesToScroll
|
|
76
|
+
: 3;
|
|
77
|
+
}, [props.carouselOptions?.breakpoints]);
|
|
78
|
+
const scrollToActiveProvider = useCallback(() => {
|
|
79
|
+
if (!emblaApi || activeProviderIndex < 0)
|
|
80
|
+
return;
|
|
81
|
+
const slidesToScroll = Math.max(1, getSlidesToScroll());
|
|
82
|
+
const snapIndex = Math.floor(activeProviderIndex / slidesToScroll);
|
|
83
|
+
emblaApi.scrollTo(snapIndex, shouldJump);
|
|
84
|
+
}, [emblaApi, activeProviderIndex, getSlidesToScroll, shouldJump]);
|
|
85
|
+
useEffect(() => {
|
|
86
|
+
if (!emblaApi || activeProviderIndex < 0)
|
|
87
|
+
return;
|
|
88
|
+
scrollToActiveProvider();
|
|
89
|
+
emblaApi.on('reInit', scrollToActiveProvider);
|
|
90
|
+
return () => {
|
|
91
|
+
emblaApi.off('reInit', scrollToActiveProvider);
|
|
92
|
+
};
|
|
93
|
+
}, [emblaApi, activeProviderIndex, scrollToActiveProvider]);
|
|
62
94
|
return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [hasSeeAll && (_jsxs(Link, { href: viewAllUrl, className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] })), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), _jsx("div", { ref: emblaRef, className: twMerge('relative mt-lg overflow-hidden', classNames.thumbnailRootContainer), children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md', classNames.thumbnailContainer), children: gameProviders.map((provider) => {
|
|
63
95
|
const url = props.providerUrlMappings
|
|
64
96
|
? (props.providerUrlMappings
|
|
@@ -11,6 +11,7 @@ import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
|
|
|
11
11
|
import { useUnmarkGameAsFavoriteMutation } from '../../client/hooks/useUnmarkGameAsFavoriteMutation.js';
|
|
12
12
|
import { toaster } from '../../client/utils/toaster.js';
|
|
13
13
|
import { Star01Icon } from '../../icons/Star01Icon.js';
|
|
14
|
+
import RainbowballImg from '../../images/rainbow-ball-online.webp';
|
|
14
15
|
import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
|
|
15
16
|
import { GameLaunchTrigger } from '../GameLaunch/index.js';
|
|
16
17
|
import { BadgeNew } from './BadgeNew.js';
|
|
@@ -88,7 +89,7 @@ function GameImage({ priority }) {
|
|
|
88
89
|
image: game.image,
|
|
89
90
|
}), [game.reference, game.provider, game.image]);
|
|
90
91
|
const [imgSrc, setImgSrc] = useState(initialImageUrl);
|
|
91
|
-
return (_jsx(Image, { src: imgSrc, alt: game.name, width: 200, height: 200, loading: priority ? undefined : 'lazy', priority: priority, unoptimized: true, sizes: "(max-width: 768px) 33vw, 200px", className:
|
|
92
|
+
return (_jsx(Image, { src: game.name === 'Rainbow Ball' ? RainbowballImg : imgSrc, alt: game.name, width: 200, height: 200, loading: priority ? undefined : 'lazy', priority: priority, unoptimized: true, sizes: "(max-width: 768px) 33vw, 200px", className: twMerge('aspect-square w-full rounded-t-md object-contain', game.name === 'Rainbow Ball' && 'object-cover'), onError: () => {
|
|
92
93
|
const fallbackThumbnail = props.fallbackThumbnails?.[game.provider];
|
|
93
94
|
if (fallbackThumbnail) {
|
|
94
95
|
setImgSrc(fallbackThumbnail);
|
|
@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge';
|
|
|
8
8
|
import { useBypassKycChecker, } from '../../client/hooks/useBypassKycChecker.js';
|
|
9
9
|
import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
|
|
10
10
|
import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
|
|
11
|
+
import RainbowballImg from '../../images/rainbow-ball-online.webp';
|
|
11
12
|
import { Button } from '../../ui/Button/index.js';
|
|
12
13
|
import { Combobox } from '../../ui/Combobox/index.js';
|
|
13
14
|
import { Portal } from '../../ui/Portal/index.js';
|
|
@@ -60,11 +61,13 @@ export function GamesSearch(props) {
|
|
|
60
61
|
}, children: "Clear" }));
|
|
61
62
|
} })] }), _jsx(Portal, { children: _jsx(Combobox.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsx(Presence, { present: api.open, children: _jsx("div", { className: "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm", onClick: () => api.setOpen(false) }) }), _jsx(Combobox.Positioner, { children: searchInput.trim().length > 0 && (_jsx(Combobox.Content, { className: "z-50 max-h-[33.25rem] overflow-y-auto p-0", children: showMinLengthWarning ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [games.length <= 0 && (_jsx(Alert, { message: "No results found" })), games.length > 0 && (_jsxs("div", { className: "p-xl", children: [_jsx(Combobox.Context, { children: (api) => (_jsx("div", { className: twMerge('grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5', classNames.gameSearchResult), children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: isBypass, game: game, onClick: () => {
|
|
62
63
|
api.setOpen(false);
|
|
63
|
-
}, className: twMerge('md:hover:-translate-y-1 relative flex h-full w-full flex-col shadow-sm transition-transform duration-200', classNames.thumbnailRoot), children: [_jsx(Image, { src:
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
64
|
+
}, className: twMerge('md:hover:-translate-y-1 relative flex h-full w-full flex-col shadow-sm transition-transform duration-200', classNames.thumbnailRoot), children: [_jsx(Image, { src: game.name === 'Rainbow Ball'
|
|
65
|
+
? RainbowballImg
|
|
66
|
+
: getGameImageUrl({
|
|
67
|
+
reference: game.reference,
|
|
68
|
+
provider: game.provider,
|
|
69
|
+
image: game.image,
|
|
70
|
+
}), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('flex w-full flex-1 items-center justify-center break-words rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', classNames.thumbnailTitle), children: fixMojibake(game.name) })] }, game.id))) })) }), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-4xl w-fit', classNames.loadMoreButton), onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })) })] })) }) })] }) }));
|
|
68
71
|
}
|
|
69
72
|
function Alert({ message }) {
|
|
70
73
|
return (_jsxs("div", { className: "py-lg", role: "alert", "aria-live": "polite", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-lg border border-border-primary bg-bg-secondary shadow-xs", children: _jsx(SearchLgIcon, { className: "size-6 text-text-secondary-700" }) }), _jsx("p", { className: "mt-4 text-center text-text-secondary-700", children: message })] }));
|
|
@@ -25,7 +25,7 @@ import { maskFirstLast } from '../../../utils/mask.js';
|
|
|
25
25
|
import styles from '../Jackpots.module.css';
|
|
26
26
|
import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
|
|
27
27
|
export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animate = true, customJackpotStageChest, medalImage, jackpotProfileShape = 'oval', }) {
|
|
28
|
-
const [ref,
|
|
28
|
+
const [ref, _inView] = useIntersectionObserver({
|
|
29
29
|
threshold: 0.75,
|
|
30
30
|
});
|
|
31
31
|
const jackpot = useJackpotsCarouselItemContext();
|
|
@@ -14,6 +14,7 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
|
14
14
|
import { GAME_PROVIDER_DATA } from '../../constants/index.js';
|
|
15
15
|
import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
|
|
16
16
|
import { XIcon } from '../../icons/XIcon.js';
|
|
17
|
+
import RainbowballImg from '../../images/rainbow-ball-online.webp';
|
|
17
18
|
import { Button } from '../../ui/Button/index.js';
|
|
18
19
|
import { Dialog } from '../../ui/Dialog/index.js';
|
|
19
20
|
import { Field } from '../../ui/Field/index.js';
|
|
@@ -86,11 +87,13 @@ export function Search(props) {
|
|
|
86
87
|
}, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ??
|
|
87
88
|
provider.logo, alt: "", width: 100, height: 50, className: twMerge('mx-auto h-auto w-full', classNames.providerThumbnailImage) }) }, provider.id))) })] })), games.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "font-semibold text-lg", children: "Games" }), _jsx("div", { className: twMerge('mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5', classNames.gameSearchResult), children: games.map((game) => (_jsxs(GameLaunchTrigger, { bypassKycCheck: isBypass, game: game, className: twMerge('block w-full shadow-sm', classNames.gameThumbnailRoot), onClick: () => {
|
|
88
89
|
globalStore.search.setOpen(false);
|
|
89
|
-
}, children: [_jsx(Image, { src:
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
90
|
+
}, children: [_jsx(Image, { src: game.name === 'Rainbow Ball'
|
|
91
|
+
? RainbowballImg
|
|
92
|
+
: getGameImageUrl({
|
|
93
|
+
reference: game.reference,
|
|
94
|
+
provider: game.provider,
|
|
95
|
+
image: game.image,
|
|
96
|
+
}), alt: "", width: 200, height: 200, loading: "lazy", unoptimized: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('block w-full rounded-b-md bg-bg-tertiary px-2 py-2.5 text-center font-semibold text-text-primary-brand text-xs', props.variant !== '88play' && 'truncate', classNames.gameThumbnailTitle), children: fixMojibake(game.name) })] }, game.id))) })] })), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: twMerge('mx-auto mt-12 w-fit', classNames.loadMoreButton), onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) }) })] }) })] }) }));
|
|
94
97
|
}
|
|
95
98
|
function DebouncedInput(props) {
|
|
96
99
|
const [value, setValue] = useControllableState({
|
|
@@ -6,4 +6,4 @@ export interface TermsOfUseV2Props {
|
|
|
6
6
|
siteName: string;
|
|
7
7
|
responsibleGamingLogo?: ImageProps['src'];
|
|
8
8
|
}
|
|
9
|
-
export declare function TermsOfUseV2({ logo,
|
|
9
|
+
export declare function TermsOfUseV2({ logo, content }: TermsOfUseV2Props): import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,7 +9,7 @@ import { ScrollToTopIcon } from '../../icons/ScrollToTopIcon.js';
|
|
|
9
9
|
import { Button } from '../../ui/Button/index.js';
|
|
10
10
|
import { Dialog } from '../../ui/Dialog/index.js';
|
|
11
11
|
import { Portal } from '../../ui/Portal/index.js';
|
|
12
|
-
export function TermsOfUseV2({ logo,
|
|
12
|
+
export function TermsOfUseV2({ logo, content }) {
|
|
13
13
|
const scrollableContentRef = useRef(null);
|
|
14
14
|
const [hasReachedBottom, setHasReachedBottom] = useState(false);
|
|
15
15
|
const [isAtBottom, setIsAtBottom] = useState(false);
|