@opexa/portal-components 0.0.301 → 0.0.303
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Account/Account.lazy.js +1 -1
- package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.js +2 -1
- package/dist/components/Disclaimer/DisclaimerV2.js +2 -2
- package/dist/components/Quests/JourneyQuest.js +10 -8
- package/dist/components/Quests/Quests.client.js +12 -5
- package/dist/components/ResponsibleGaming/ResponsibleGaming.lazy.js +2 -1
- package/dist/components/SignUp/SignUpDefault/SignUpDefault.lazy.js +1 -1
- package/dist/components/SignUp/SignUpKYC/SignUpKYC.lazy.js +1 -1
- package/dist/components/SignUp/SignUpKYC/SignUpKYCForm.js +1 -1
- package/dist/components/TermsAndConditions/TermsAndConditions.lazy.js +2 -1
- package/dist/components/TermsOfUse/TermsOfUse.lazy.js +2 -1
- package/package.json +1 -1
|
@@ -56,7 +56,7 @@ export function Account(props) {
|
|
|
56
56
|
: [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
|
|
57
57
|
return (_jsxs(AccountPropsContext, { value: Object.assign({}, defaultAccountProps, props), children: [_jsx(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
|
|
58
58
|
globalStore.account__mobile.setOpen(details.open);
|
|
59
|
-
}, lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
|
|
59
|
+
}, lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]', 'overflow-auto'), style: {
|
|
60
60
|
['--offset-top-mobile']: mobileOffsetTop,
|
|
61
61
|
['--offset-top-desktop']: desktopOffsetTop,
|
|
62
62
|
}, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { router: router })] }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
4
|
import { z } from 'zod';
|
|
4
5
|
import { useShallow } from 'zustand/shallow';
|
|
5
6
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
@@ -28,7 +29,7 @@ export function DepositWithdrawal(props) {
|
|
|
28
29
|
if (!details.open) {
|
|
29
30
|
globalStore.depositWithdrawal.setPromo(null);
|
|
30
31
|
}
|
|
31
|
-
}, closeOnEscape: false, closeOnInteractOutside: false, 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:
|
|
32
|
+
}, closeOnEscape: false, closeOnInteractOutside: false, 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: twMerge('py-3xl mx-auto h-full w-full overflow-y-auto px-4 lg:min-h-[80vh] lg:w-[480px] lg:rounded-xl', 'scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full'), children: [_jsxs(Dialog.Header, { className: "gap-xl flex items-center", children: [_jsx("div", { className: "border-border-primary shadow-xs text-text-secondary-700 flex size-10 items-center justify-center rounded-md border text-gray-700", children: _jsx(Wallet02Icon, { className: "size-5" }) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" }), _jsx(Dialog.Context, { children: (api) => (_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, {}) })) })] }), _jsxs(Dialog.Body, { className: "mt-3xl", children: [_jsx("p", { className: "text-text-secondary-700 text-center text-sm", children: "Deposit Balance" }), _jsx("p", { className: "text-center text-3xl font-bold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
|
|
32
33
|
currency: localeInfo.currency.code,
|
|
33
34
|
minDecimalPlaces: 2,
|
|
34
35
|
}) }), _jsxs(Tabs.Root, { value: globalStore.depositWithdrawal.tab, onValueChange: (details) => {
|
|
@@ -22,7 +22,7 @@ export function DisclaimerV2(props) {
|
|
|
22
22
|
})));
|
|
23
23
|
const checked = globalStore.termsOfUse.accepted && globalStore.responsibleGaming.accepted;
|
|
24
24
|
const [showWarning, setShowWarning] = useState(false);
|
|
25
|
-
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: "flex h-full w-full flex-col items-start gap-y-4 overflow-y-auto
|
|
25
|
+
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: "p-3xl lg:min-h-[80vh] flex h-full w-full flex-col items-start gap-y-4 overflow-y-auto lg:mx-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "gap-3xl flex w-full items-center justify-center", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false })] }), _jsx("div", { className: "text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), _jsxs(Checkbox.Root, { checked: checked, onCheckedChange: (e) => {
|
|
26
26
|
if (e.checked === 'indeterminate')
|
|
27
27
|
return;
|
|
28
28
|
globalStore.termsOfUse.setAccepted(e.checked);
|
|
@@ -51,4 +51,4 @@ export function DisclaimerV2(props) {
|
|
|
51
51
|
disclaimer.close();
|
|
52
52
|
}, children: "Accept" })] })] }) })] }) }));
|
|
53
53
|
}
|
|
54
|
-
const Circle = () => (_jsx("div", { children: _jsx("div", { className: "border-brand-400
|
|
54
|
+
const Circle = () => (_jsx("div", { children: _jsx("div", { className: "border-brand-400 h-4.5 w-4.5 flex items-center justify-center rounded-full border", children: _jsx("div", { className: "bg-brand-400 h-3 w-3 rounded-full" }) }) }));
|
|
@@ -6,6 +6,8 @@ import { useDisclosure } from '../../client/hooks/useDisclosure.js';
|
|
|
6
6
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
7
7
|
import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
|
|
8
8
|
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
9
|
+
import { CoinsHandIcon } from '../../icons/CoinsHandIcon.js';
|
|
10
|
+
import { FileCheck02Icon } from '../../icons/FileCheck02Icon.js';
|
|
9
11
|
import { XIcon } from '../../icons/XIcon.js';
|
|
10
12
|
import { Button } from '../../ui/Button/index.js';
|
|
11
13
|
import { Checkbox } from '../../ui/Checkbox/index.js';
|
|
@@ -56,7 +58,7 @@ export function JourneyQuest() {
|
|
|
56
58
|
const handleViewDetails = useCallback(() => {
|
|
57
59
|
disclosure.setOpen(true);
|
|
58
60
|
}, [disclosure]);
|
|
59
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("div", { className: "
|
|
61
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("div", { className: "max-h-7.5 flex items-start justify-between", children: _jsx(RemainingTime, {}) }), _jsx("p", { className: "text-xl font-semibold", children: quest?.name || 'Journey Quest' }), _jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, className: "bg-bg-primary h-2 rounded-full", value: progressValue, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) }), _jsxs("p", { className: "text-text-quarterary-brand text-xs", children: [currentMilestone, "/", totalMilestones] })] }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: milestones.map((milestone) => (_jsx(QuestMilestone, { label: milestone.label, bonus: milestone.bonus, isCompleted: milestone.isCompleted }, milestone.key))) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: handleViewDetails, "aria-label": "View Details", disabled: false, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: "View Details" }) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen, quest: quest, milestones: milestones })] }));
|
|
60
62
|
}
|
|
61
63
|
function Rules(props) {
|
|
62
64
|
const [open, setOpen] = useControllableState({
|
|
@@ -79,17 +81,17 @@ function Rules(props) {
|
|
|
79
81
|
return false;
|
|
80
82
|
return milestones.every((milestone) => milestone.isCompleted);
|
|
81
83
|
}, [milestones]);
|
|
82
|
-
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[400px] overflow-y-auto rounded-xl px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "text-text-quarterary-brand group flex flex-col space-y-5 text-sm", children: [_jsx("h2", { className: "text-text-primary-900 text-lg font-semibold", children: quest?.name || 'Quest' }), _jsx("p", { children: quest?.description ||
|
|
84
|
+
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "text-text-quarterary-brand group flex flex-col space-y-5 text-sm", children: [_jsx("h2", { className: "text-text-primary-900 text-lg font-semibold", children: quest?.name || 'Quest' }), _jsx("p", { children: quest?.description ||
|
|
83
85
|
'Ready for a challenge? Complete them all and get amazing rewards!' }), milestones.map((milestone) => (_jsxs("div", { className: "bg-bg-tertiary flex flex-col space-y-2.5 rounded-xl p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-base font-medium text-white", children: milestone.label }), milestone.isCompleted && (_jsx("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: "Complete" }))] }), milestone.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
|
|
84
86
|
__html: milestone.description,
|
|
85
|
-
} })) : (_jsxs("p", { className: "ml-1", children: [milestone.key === 'REGISTRATION' &&
|
|
87
|
+
} })) : milestone.bonus ? (_jsxs("p", { className: "ml-1", children: [milestone.key === 'REGISTRATION' &&
|
|
86
88
|
`Register and win Php ${milestone.bonus} Bonus`, milestone.key === 'ACCOUNT_VERIFICATION' &&
|
|
87
89
|
`Verify your account and get Php ${milestone.bonus} Bonus`, milestone.key === 'FIRST_DEPOSIT' &&
|
|
88
90
|
`Make your first deposit and get Php ${milestone.bonus} Bonus`, milestone.key === 'IOS_FIRST_LOGIN' &&
|
|
89
91
|
`Login using iOS and get Php ${milestone.bonus} Bonus`, milestone.key === 'ANDROID_FIRST_LOGIN' &&
|
|
90
|
-
`Login using Android and get Php ${milestone.bonus} Bonus`] })), !milestone.isCompleted &&
|
|
92
|
+
`Login using Android and get Php ${milestone.bonus} Bonus`] })) : null, !milestone.isCompleted &&
|
|
91
93
|
(milestone.key === 'ACCOUNT_VERIFICATION' ||
|
|
92
|
-
milestone.key === 'FIRST_DEPOSIT') && (
|
|
94
|
+
milestone.key === 'FIRST_DEPOSIT') && (_jsxs(Button, { size: "sm", onClick: () => {
|
|
93
95
|
if (milestone.key === 'ACCOUNT_VERIFICATION') {
|
|
94
96
|
setOpen(false);
|
|
95
97
|
globalStore.kyc.setOpen(true);
|
|
@@ -99,9 +101,9 @@ function Rules(props) {
|
|
|
99
101
|
globalStore.depositWithdrawal.setOpen(true);
|
|
100
102
|
globalStore.depositWithdrawal.setTab('DEPOSIT');
|
|
101
103
|
}
|
|
102
|
-
}, "aria-label": `Complete ${milestone.label}`, children: milestone.key === 'FIRST_DEPOSIT'
|
|
103
|
-
|
|
104
|
-
|
|
104
|
+
}, "aria-label": `Complete ${milestone.label}`, children: [milestone.key === 'ACCOUNT_VERIFICATION' ? (_jsx(FileCheck02Icon, { className: "size-5" })) : (_jsx(CoinsHandIcon, { className: "size-5" })), milestone.key === 'FIRST_DEPOSIT'
|
|
105
|
+
? 'Deposit'
|
|
106
|
+
: 'Verify Account'] }))] }, milestone.key))), quest?.bonus && (_jsx("div", { className: "flex h-full items-end", children: allMilestonesCompleted ? (_jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })) : (_jsx("div", { className: "bg-button-secondary-bg border-bg-primary-hover w-full rounded-md border px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { children: ["Complete target to", ' ', _jsxs("span", { className: "text-brand-400", children: ["\u20B1", quest?.bonus] }), ' ', "bonus!"] }) })) }))] })] }) })] }) }));
|
|
105
107
|
}
|
|
106
108
|
function QuestMilestone({ label, bonus, isCompleted = false, }) {
|
|
107
109
|
const localeInfo = useLocaleInfo();
|
|
@@ -18,7 +18,7 @@ const QUEST_COMPONENT_MAP = {
|
|
|
18
18
|
WAGERING: WageringQuest,
|
|
19
19
|
JOURNEY: JourneyQuest,
|
|
20
20
|
};
|
|
21
|
-
const TabDefinition = z.enum(['AVAILABLE', 'COMPLETED']);
|
|
21
|
+
const TabDefinition = z.enum(['AVAILABLE', 'COMPLETED', 'FAILED']);
|
|
22
22
|
export function Quests__client(props) {
|
|
23
23
|
const [tab, setTab] = useState('AVAILABLE');
|
|
24
24
|
const questsQuery = useAvailableQuestsQuery({
|
|
@@ -27,9 +27,16 @@ export function Quests__client(props) {
|
|
|
27
27
|
const quests = !questsQuery.data?.length
|
|
28
28
|
? []
|
|
29
29
|
: questsQuery.data.filter((quest) => {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
if (tab === 'AVAILABLE') {
|
|
31
|
+
return quest.status === 'IN_PROGRESS';
|
|
32
|
+
}
|
|
33
|
+
else if (tab === 'COMPLETED') {
|
|
34
|
+
return quest.status === 'COMPLETED';
|
|
35
|
+
}
|
|
36
|
+
else if (tab === 'FAILED') {
|
|
37
|
+
return quest.status === 'FAILED';
|
|
38
|
+
}
|
|
39
|
+
return false;
|
|
33
40
|
});
|
|
34
41
|
if (questsQuery.isLoading) {
|
|
35
42
|
return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
|
|
@@ -39,7 +46,7 @@ export function Quests__client(props) {
|
|
|
39
46
|
}
|
|
40
47
|
return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
|
|
41
48
|
setTab(TabDefinition.catch('AVAILABLE').parse(details.value));
|
|
42
|
-
}, className: "mt-3 w-full overflow-x-auto lg:
|
|
49
|
+
}, className: "lg:mt-4.5 mt-3 w-full overflow-x-auto lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "AVAILABLE", className: "w-full lg:w-fit", children: [_jsx(SegmentGroup.ItemText, { children: "Available" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "COMPLETED", className: "w-full lg:w-fit", children: [_jsx(SegmentGroup.ItemText, { children: "Completed" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "FAILED", className: "w-full lg:w-fit", children: [_jsx(SegmentGroup.ItemText, { children: "Failed" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsx("div", { className: "mt-3xl gap-3xl lg:mt-lg grid lg:grid-cols-3", children: quests.map((quest) => {
|
|
43
50
|
const Quest = QUEST_COMPONENT_MAP[quest.type];
|
|
44
51
|
return (_jsx(QuestContext, { value: quest, children: _jsx(Quest, {}) }, quest.id));
|
|
45
52
|
}) })] }));
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Image, {} from 'next/image';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
4
|
import { useShallow } from 'zustand/shallow';
|
|
4
5
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
5
6
|
import pagcorLogo from '../../images/pagcor.png';
|
|
@@ -29,7 +30,7 @@ export function ResponsibleGaming(props) {
|
|
|
29
30
|
globalStore.disclaimer.setOpen(true);
|
|
30
31
|
}
|
|
31
32
|
globalStore.responsibleGaming.setNext(null);
|
|
32
|
-
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className:
|
|
33
|
+
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('p-3xl flex h-full w-full flex-col items-start overflow-y-auto lg:mx-auto lg:min-h-[80vh] lg:w-[400px]', 'scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full'), children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[7.5rem]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: props.content }), _jsxs("div", { className: "gap-3xl mt-5 flex items-center justify-center", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[5.5rem] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[3.875rem] w-auto shrink-0", draggable: false })] })] }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { type: "button", className: "mt-3 py-2.5", onClick: () => {
|
|
33
34
|
api.setOpen(false);
|
|
34
35
|
}, children: "I Agree" })) })] }) })] }) }));
|
|
35
36
|
}
|
|
@@ -14,5 +14,5 @@ export function SignUpDefault(props) {
|
|
|
14
14
|
const signUpStore = useGlobalStore(useShallow((ctx) => ctx.signUp));
|
|
15
15
|
return (_jsx(SignUpDefaultPropsProvider, { value: props, children: _jsx(Dialog.Root, { open: signUpStore.open, onOpenChange: (details) => {
|
|
16
16
|
signUpStore.setOpen(details.open);
|
|
17
|
-
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: twMerge('bg-bg-primary-alt p-3xl pb-4xl mx-auto h-full w-full items-start overflow-y-auto lg:h-
|
|
17
|
+
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: twMerge('bg-bg-primary-alt p-3xl pb-4xl mx-auto h-full w-full items-start overflow-y-auto lg:min-h-[80vh] lg:w-[400px] lg:rounded-xl', 'scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(Suspense, { children: _jsx(SignUpDefaultForm, {}) })] }) })] }) }) }));
|
|
18
18
|
}
|
|
@@ -14,5 +14,5 @@ export function SignUpKYC(props) {
|
|
|
14
14
|
const signUpStore = useGlobalStore(useShallow((ctx) => ctx.signUp));
|
|
15
15
|
return (_jsx(SignUpKYCPropsProvider, { value: props, children: _jsx(Dialog.Root, { open: signUpStore.open, onOpenChange: (details) => {
|
|
16
16
|
signUpStore.setOpen(details.open);
|
|
17
|
-
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { className: twMerge('bg-bg-primary-alt z-banner mx-auto flex size-full flex-col items-start overflow-y-auto
|
|
17
|
+
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { className: twMerge('bg-bg-primary-alt z-banner p-3xl pb-4xl mx-auto flex size-full flex-col items-start overflow-y-auto lg:min-h-[80vh] lg:w-fit lg:rounded-xl', 'scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full', props.className), children: _jsxs("div", { className: "size-full lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[7.5rem]", draggable: false }), _jsx(Suspense, { children: _jsx(SignUpKYCForm, {}) })] }) }) })] }) }) }));
|
|
18
18
|
}
|
|
@@ -300,7 +300,7 @@ export function SignUpKYCForm() {
|
|
|
300
300
|
globalStore.responsibleGaming.setNext('SIGN_UP');
|
|
301
301
|
globalStore.signUp.setOpen(false);
|
|
302
302
|
}
|
|
303
|
-
}, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Create Account" })] }), _jsxs("div", { className: "gap-xs mt-6 flex w-full items-center justify-center text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Already have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
|
|
303
|
+
}, children: "Responsible Gaming" }), ' ', "guidelines."] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Create Account" })] }), _jsxs("div", { className: "gap-xs mt-6 flex w-full items-center justify-center text-sm pb-8", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Already have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
|
|
304
304
|
dialog.setOpen(false);
|
|
305
305
|
globalStore.signIn.setOpen(true);
|
|
306
306
|
}, children: "Log In" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Image, {} from 'next/image';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
4
|
import { useShallow } from 'zustand/shallow';
|
|
4
5
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
5
6
|
import pagcorLogo from '../../images/pagcor.png';
|
|
@@ -29,7 +30,7 @@ export function TermsAndConditions({ logo, siteName, content, ...props }) {
|
|
|
29
30
|
globalStore.disclaimer.setOpen(true);
|
|
30
31
|
}
|
|
31
32
|
globalStore.termsAndConditions.setNext(null);
|
|
32
|
-
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className:
|
|
33
|
+
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('p-3xl flex h-full w-full flex-col items-start overflow-y-auto lg:mx-auto lg:min-h-[80vh] lg:w-[400px]', 'scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full'), children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: [siteName, " Terms of Use"] }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: content }), _jsxs("div", { className: "gap-3xl mt-5 flex items-center justify-center", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[5.5rem] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[3.875rem] w-auto shrink-0", draggable: false })] })] }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { type: "button", className: "mt-3 py-2.5", onClick: () => {
|
|
33
34
|
api.setOpen(false);
|
|
34
35
|
}, children: "I Agree" })) })] }) })] }) }));
|
|
35
36
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Image, {} from 'next/image';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
4
|
import { useShallow } from 'zustand/shallow';
|
|
4
5
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
5
6
|
import pagcorLogo from '../../images/pagcor.png';
|
|
@@ -29,7 +30,7 @@ export function TermsOfUse({ logo, siteName, content, ...props }) {
|
|
|
29
30
|
globalStore.disclaimer.setOpen(true);
|
|
30
31
|
}
|
|
31
32
|
globalStore.termsOfUse.setNext(null);
|
|
32
|
-
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className:
|
|
33
|
+
}, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: twMerge('p-3xl flex h-full w-full flex-col items-start overflow-y-auto lg:mx-auto lg:min-h-[80vh] lg:w-[400px]', 'scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full'), children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: [siteName, " Terms of Use"] }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: content }), _jsxs("div", { className: "gap-3xl mt-5 flex items-center justify-center", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[5.5rem] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[3.875rem] w-auto shrink-0", draggable: false })] })] }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { type: "button", className: "mt-3 py-2.5", onClick: () => {
|
|
33
34
|
api.setOpen(false);
|
|
34
35
|
}, children: "I Agree" })) })] }) })] }) }));
|
|
35
36
|
}
|