@opexa/portal-components 0.0.961 → 0.0.963
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/client/hooks/useCamera.d.ts +1 -1
- package/dist/client/hooks/useCamera.js +66 -22
- package/dist/client/hooks/useVerifyMobileNumber.d.ts +3 -0
- package/dist/client/hooks/useVerifyMobileNumber.js +20 -0
- package/dist/components/AccountInfo/AccountInfo.js +1 -1
- package/dist/components/AccountSecurity/AccountSecurity.js +1 -1
- 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/AurixPayGrabPayDeposit.d.ts +1 -0
- package/dist/components/DepositWithdrawal/Deposit/AurixPayPayMayaDeposit/AurixPayGrabPayDeposit.js +241 -0
- 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 +10 -20
- 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 +0 -1
- package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.js +1 -2
- package/dist/components/DepositWithdrawal/Withdrawal/GCashStandardCashInWithdrawal/GCashStandardCashInWithdrawal.js +1 -1
- package/dist/components/DepositWithdrawal/Withdrawal/GCashWithdrawal/GCashWithdrawal.js +1 -1
- package/dist/components/DepositWithdrawal/Withdrawal/InstapayGCashWithdrawal/InstapayGcashWithdrawal.js +2 -2
- package/dist/components/DepositWithdrawal/Withdrawal/InstapayPaymayaWithdrawal/InstapayPaymayaWithdrawal.js +2 -2
- package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js +1 -1
- package/dist/components/DepositWithdrawal/Withdrawal/MayaWithdrawal/MayaWithdrawal.js +1 -1
- package/dist/components/DepositWithdrawal/Withdrawal/VentajaWithdrawal/VentajaWithdrawal.js +1 -1
- package/dist/components/Disclaimer/DisclaimerV3.js +12 -21
- 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 +0 -8
- package/dist/components/GameProviders/GameProvidersCarousel.js +0 -32
- package/dist/components/Games/Game.js +1 -6
- package/dist/components/Jackpots/JackpotsCarouselNext/JackpotsCarouselStageItem.js +1 -1
- package/dist/components/Quests/Crazywin/components/Countdown.js +1 -1
- package/dist/components/SignUp/SignUpKYC/SelfieImageField/useSelfieImageField.js +1 -0
- package/dist/components/SingleSignOn/SingleSignOn.d.ts +4 -0
- package/dist/components/SingleSignOn/SingleSignOn.js +185 -0
- package/dist/components/SingleSignOn/index.d.ts +1 -0
- package/dist/components/SingleSignOn/index.js +1 -0
- 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/shared/SelfieImageField/useSelfieImageField.js +3 -1
- package/dist/handlers/index.d.ts +2 -2
- package/dist/lib/components/UpdateMobileNumber/UpdateMobileNumber.js +4 -0
- package/dist/schemas/forgotPasswordSchema.d.ts +4 -4
- 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 +72 -72
- package/dist/ui/Carousel/carousel.recipe.d.ts +8 -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 +42 -42
- 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 +45 -45
- 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
|
@@ -115,7 +115,7 @@ export function MayaDeposit() {
|
|
|
115
115
|
code: z.ZodIssueCode.too_big,
|
|
116
116
|
inclusive: true,
|
|
117
117
|
maximum: maximumAmount,
|
|
118
|
-
message: `Maximum amount is ${maximumAmount.toLocaleString()}
|
|
118
|
+
message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
|
|
119
119
|
});
|
|
120
120
|
}
|
|
121
121
|
}),
|
|
@@ -110,7 +110,7 @@ export function MayaWebpayDeposit() {
|
|
|
110
110
|
code: z.ZodIssueCode.too_big,
|
|
111
111
|
inclusive: true,
|
|
112
112
|
maximum: maximumAmount,
|
|
113
|
-
message: `Maximum amount is ${maximumAmount.toLocaleString()}
|
|
113
|
+
message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
|
|
114
114
|
});
|
|
115
115
|
}
|
|
116
116
|
}),
|
package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export declare const OnlineBankDepositContext: (props: {
|
|
2
2
|
value: {
|
|
3
3
|
view: "form" | "vca";
|
|
4
|
-
status: "
|
|
4
|
+
status: "failed" | "waiting" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
|
|
5
5
|
verify: () => void;
|
|
6
6
|
reset: () => void;
|
|
7
7
|
deposit: import("../../../../types").Deposit | null;
|
|
@@ -14,7 +14,7 @@ export declare const OnlineBankDepositContext: (props: {
|
|
|
14
14
|
children?: import("react").ReactNode | undefined;
|
|
15
15
|
}) => React.ReactNode, useOnlineBankDepositContext: () => {
|
|
16
16
|
view: "form" | "vca";
|
|
17
|
-
status: "
|
|
17
|
+
status: "failed" | "waiting" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
|
|
18
18
|
verify: () => void;
|
|
19
19
|
reset: () => void;
|
|
20
20
|
deposit: import("../../../../types").Deposit | null;
|
package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositForm.js
CHANGED
|
@@ -56,7 +56,7 @@ export function OnlineBankDepositForm() {
|
|
|
56
56
|
code: z.ZodIssueCode.too_big,
|
|
57
57
|
inclusive: true,
|
|
58
58
|
maximum: maximumAmount,
|
|
59
|
-
message: `Maximum amount is ${maximumAmount.toLocaleString()}
|
|
59
|
+
message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
|
|
60
60
|
});
|
|
61
61
|
}
|
|
62
62
|
}),
|
package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import type { Deposit } from '../../../../types';
|
|
|
2
2
|
export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
|
|
3
3
|
export declare function useOnlineBankDeposit(): {
|
|
4
4
|
view: "form" | "vca";
|
|
5
|
-
status: "
|
|
5
|
+
status: "failed" | "waiting" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
|
|
6
6
|
verify: () => void;
|
|
7
7
|
reset: () => void;
|
|
8
8
|
deposit: Deposit | null;
|
|
@@ -120,7 +120,7 @@ export function PisoPayDeposit() {
|
|
|
120
120
|
code: z.ZodIssueCode.too_big,
|
|
121
121
|
inclusive: true,
|
|
122
122
|
maximum: maximumAmount,
|
|
123
|
-
message: `Maximum amount is ${maximumAmount.toLocaleString()}
|
|
123
|
+
message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
|
|
124
124
|
});
|
|
125
125
|
}
|
|
126
126
|
}),
|
|
@@ -64,7 +64,7 @@ export function Form() {
|
|
|
64
64
|
code: z.ZodIssueCode.too_big,
|
|
65
65
|
inclusive: true,
|
|
66
66
|
maximum: maximumAmount,
|
|
67
|
-
message: `Maximum amount is ${maximumAmount.toLocaleString()}
|
|
67
|
+
message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
|
|
68
68
|
});
|
|
69
69
|
}
|
|
70
70
|
}),
|
|
@@ -11,7 +11,6 @@ export interface DepositWithdrawalProps {
|
|
|
11
11
|
libanganRedirectionUrl?: string;
|
|
12
12
|
hasPrivacyPolicyAndTermsOfUse?: boolean;
|
|
13
13
|
bypassDomains?: BypassDomainConfig[];
|
|
14
|
-
isOfWinSite?: boolean;
|
|
15
14
|
/**
|
|
16
15
|
* List of enabled withdrawal providers
|
|
17
16
|
* @example ['GCASH', 'MAYA_APP', 'VENTAJA_DISBURSEMENT']
|
|
@@ -21,11 +21,10 @@ import { HasPendingBonuses } from './HasPendingBonuses.js';
|
|
|
21
21
|
import { Withdrawal } from './Withdrawal/Withdrawal.js';
|
|
22
22
|
export function DepositWithdrawal(props) {
|
|
23
23
|
const bypassDepositKycCheck = useBypassKycChecker(props.bypassDomains) || props.bypassDepositKycCheck;
|
|
24
|
-
const { hasPrivacyPolicyAndTermsOfUse = true,
|
|
24
|
+
const { hasPrivacyPolicyAndTermsOfUse = true, ...restProps } = props;
|
|
25
25
|
const mergedProps = {
|
|
26
26
|
...restProps,
|
|
27
27
|
hasPrivacyPolicyAndTermsOfUse,
|
|
28
|
-
isOfWinSite,
|
|
29
28
|
bypassDepositKycCheck,
|
|
30
29
|
};
|
|
31
30
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
@@ -77,7 +77,7 @@ export function GCashStandardCashInWithdrawal() {
|
|
|
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()}`,
|
|
81
81
|
});
|
|
82
82
|
}
|
|
83
83
|
}),
|
|
@@ -77,7 +77,7 @@ export function GCashWithdrawal() {
|
|
|
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()}`,
|
|
81
81
|
});
|
|
82
82
|
}
|
|
83
83
|
}),
|
|
@@ -79,7 +79,7 @@ export function InstapayGCashWithdrawal() {
|
|
|
79
79
|
code: z.ZodIssueCode.too_big,
|
|
80
80
|
inclusive: true,
|
|
81
81
|
maximum: maximumAmount,
|
|
82
|
-
message: `Maximum amount is ${maximumAmount.toLocaleString()}
|
|
82
|
+
message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
|
|
83
83
|
});
|
|
84
84
|
}
|
|
85
85
|
}),
|
|
@@ -121,7 +121,7 @@ export function InstapayGCashWithdrawal() {
|
|
|
121
121
|
transactionPassword: data.password,
|
|
122
122
|
accountNumber: data.accountNumber,
|
|
123
123
|
accountName: data.accountName,
|
|
124
|
-
bankCode:
|
|
124
|
+
bankCode: "BNKGCH",
|
|
125
125
|
});
|
|
126
126
|
});
|
|
127
127
|
return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", id: "hook-form", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, children: [_jsx(Field.Label, { children: "Phone Number" }), _jsx(Field.Input, { ...form.register('accountNumber') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountNumber?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountName, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Account name" }), _jsx(Field.Input, { ...form.register('accountName') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountName?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Enter amount you want to withdraw" }), _jsx(Field.Input, { type: "number", ...form.register('amount') }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount').trim().replace(/,/g, ''), 0), onChange: (value) => {
|
|
@@ -79,7 +79,7 @@ export function InstapayPaymayaWithdrawal() {
|
|
|
79
79
|
code: z.ZodIssueCode.too_big,
|
|
80
80
|
inclusive: true,
|
|
81
81
|
maximum: maximumAmount,
|
|
82
|
-
message: `Maximum amount is ${maximumAmount.toLocaleString()}
|
|
82
|
+
message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
|
|
83
83
|
});
|
|
84
84
|
}
|
|
85
85
|
}),
|
|
@@ -121,7 +121,7 @@ export function InstapayPaymayaWithdrawal() {
|
|
|
121
121
|
transactionPassword: data.password,
|
|
122
122
|
accountNumber: data.accountNumber,
|
|
123
123
|
accountName: data.accountName,
|
|
124
|
-
bankCode:
|
|
124
|
+
bankCode: "BNKMYA",
|
|
125
125
|
});
|
|
126
126
|
});
|
|
127
127
|
return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", id: "hook-form", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, children: [_jsx(Field.Label, { children: "Phone Number" }), _jsx(Field.Input, { ...form.register('accountNumber') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountNumber?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountName, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Account name" }), _jsx(Field.Input, { ...form.register('accountName') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountName?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Enter amount you want to withdraw" }), _jsx(Field.Input, { type: "number", ...form.register('amount') }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount').trim().replace(/,/g, ''), 0), onChange: (value) => {
|
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()}`,
|
|
102
102
|
});
|
|
103
103
|
}
|
|
104
104
|
}),
|
|
@@ -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()}`,
|
|
81
81
|
});
|
|
82
82
|
}
|
|
83
83
|
}),
|
|
@@ -86,7 +86,7 @@ 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()}`,
|
|
90
90
|
});
|
|
91
91
|
}
|
|
92
92
|
}),
|
|
@@ -8,7 +8,6 @@ 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';
|
|
12
11
|
import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
|
|
13
12
|
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
14
13
|
import pagcorLogo from '../../images/pagcor2.png';
|
|
@@ -31,26 +30,12 @@ export function DisclaimerV3(props) {
|
|
|
31
30
|
const isAuthenticated = sessionQuery.data?.status === 'authenticated';
|
|
32
31
|
const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
|
|
33
32
|
const [showWarning, setShowWarning] = useState(false);
|
|
34
|
-
|
|
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", 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", 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", 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) => {
|
|
33
|
+
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", 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", children: "Notice" }), _jsx("div", { className: "mb-1 text-sm text-text-secondary-700", id: "disclaimer-description", children: "By entering this website, you acknowledge and confirm:" }), _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", "aria-label": "Restricted persons 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(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
|
|
49
34
|
if (e.checked === 'indeterminate')
|
|
50
35
|
return;
|
|
51
36
|
globalStore.termsOfUse.setAccepted(e.checked);
|
|
52
37
|
globalStore.responsibleGaming.setAccepted(e.checked);
|
|
53
|
-
}, className: "pt-2.5 pb-2 text-sm",
|
|
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: () => {
|
|
54
39
|
globalStore.termsOfUse.setOpen(true);
|
|
55
40
|
globalStore.termsOfUse.setNext('DISCLAIMER');
|
|
56
41
|
disclaimer.close();
|
|
@@ -73,11 +58,17 @@ export function DisclaimerV3(props) {
|
|
|
73
58
|
globalStore.onboarding.setOpen(true);
|
|
74
59
|
}
|
|
75
60
|
}, children: "I Agree" }), _jsx(Button, { type: "button", onClick: () => {
|
|
76
|
-
if (
|
|
77
|
-
|
|
78
|
-
|
|
61
|
+
if (props.redirectUrlOnNoConsent) {
|
|
62
|
+
if (Capacitor.isNativePlatform()) {
|
|
63
|
+
App.exitApp();
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
window.location.href = props.redirectUrlOnNoConsent;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
disclaimer.close();
|
|
79
71
|
}
|
|
80
|
-
handleExit();
|
|
81
72
|
}, variant: "outline", children: "Exit" })] })] }) })] }) }));
|
|
82
73
|
}
|
|
83
74
|
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: "overflow-y-invisible
|
|
9
|
+
return (_jsx(Dialog.Content, { className: "bg-transparent h-full w-full overflow-y-invisible left-0 top-0 flex items-center", 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: 'w-fit h-fit text-[#6C5200] rounded-md bg-gradient-to-t from-[#FFE5AF] to-[#EAC467] p-0.5', 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 text-2xl font-bold uppercase text-transparent", 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 text-xs bg-black/40 border-0", 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 text-xs bg-black/40 border-0", 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: "absolute right-1 top-1/2 h-fit w-fit -translate-y-1/2 rounded-full py-[0.375rem] text-sm shadow-[inset_0px_-1px_2px_1px_#fff7e1] bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)]", 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 rounded-full bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)]
|
|
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 text-sm rounded-full shadow-[inset_0px_-1px_2px_1px_#fff7e1] bg-[linear-gradient(89deg,#c7802d_-15.91%,#ffe585_28.75%,#ffeca6_49.46%,#c7802d_112.69%)]", 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: 'border-[#D0D5DD]
|
|
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: 'bg-transparent border-[#D0D5DD] 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: 'border-[#D0D5DD]
|
|
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: 'bg-transparent border-[#D0D5DD] 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: 'bg-transparent border-[#D0D5DD] 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: 'bg-transparent border-[#D0D5DD] 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 ?
|
|
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,18 +8,10 @@ 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
|
-
}
|
|
15
11
|
export interface GameProvidersCarouselProps {
|
|
16
12
|
layout: 'carousel';
|
|
17
13
|
gameProviders: GameProvider[];
|
|
18
14
|
heading?: string | ReactNode;
|
|
19
|
-
/**
|
|
20
|
-
* Scrolls the carousel to the matching provider id or slug on load.
|
|
21
|
-
*/
|
|
22
|
-
scrollProvider?: ActiveProvider;
|
|
23
15
|
/**
|
|
24
16
|
* @default '/providers'
|
|
25
17
|
*/
|
|
@@ -56,41 +56,9 @@ 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]);
|
|
67
59
|
const classNames = useMemo(() => isString(props.className)
|
|
68
60
|
? { root: props.className }
|
|
69
61
|
: (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]);
|
|
94
62
|
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) => {
|
|
95
63
|
const url = props.providerUrlMappings
|
|
96
64
|
? (props.providerUrlMappings
|
|
@@ -11,7 +11,6 @@ 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';
|
|
15
14
|
import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
|
|
16
15
|
import { GameLaunchTrigger } from '../GameLaunch/index.js';
|
|
17
16
|
import { BadgeNew } from './BadgeNew.js';
|
|
@@ -89,11 +88,7 @@ function GameImage({ priority }) {
|
|
|
89
88
|
image: game.image,
|
|
90
89
|
}), [game.reference, game.provider, game.image]);
|
|
91
90
|
const [imgSrc, setImgSrc] = useState(initialImageUrl);
|
|
92
|
-
return (_jsx(Image, { src: game.name
|
|
93
|
-
? RainbowballImg
|
|
94
|
-
: 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' &&
|
|
95
|
-
game.id === '22wQ1YcMwrBaZH3Mx7' &&
|
|
96
|
-
'object-cover'), onError: () => {
|
|
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: "aspect-square w-full rounded-t-md object-contain", onError: () => {
|
|
97
92
|
const fallbackThumbnail = props.fallbackThumbnails?.[game.provider];
|
|
98
93
|
if (fallbackThumbnail) {
|
|
99
94
|
setImgSrc(fallbackThumbnail);
|
|
@@ -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();
|