@opexa/portal-components 0.0.1078 → 0.0.1080
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Disclaimer/DisclaimerV2.js +27 -25
- package/dist/components/Quests/JourneyQuest.js +13 -5
- package/dist/components/Quests/RemainingTime.js +7 -5
- package/dist/components/SignIn/FacebookSignInTrigger.d.ts +2 -1
- package/dist/components/SignIn/FacebookSignInTrigger.js +1 -1
- package/package.json +1 -1
|
@@ -70,6 +70,32 @@ export function DisclaimerV2(props) {
|
|
|
70
70
|
sessionStorage.clear();
|
|
71
71
|
},
|
|
72
72
|
});
|
|
73
|
+
const handleExit = async () => {
|
|
74
|
+
if (props.redirectUrlOnNoConsent) {
|
|
75
|
+
if (Capacitor.isNativePlatform()) {
|
|
76
|
+
const session = await getQueryClient().fetchQuery({
|
|
77
|
+
queryKey: getSessionQueryKey(),
|
|
78
|
+
queryFn: async () => getSession(),
|
|
79
|
+
});
|
|
80
|
+
if (session.status === 'authenticated') {
|
|
81
|
+
await unregisterFCMDevice({
|
|
82
|
+
type: ['IOS', 'ANDROID'],
|
|
83
|
+
}, {
|
|
84
|
+
headers: {
|
|
85
|
+
Authorization: `Bearer ${session.token}`,
|
|
86
|
+
},
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
App.exitApp();
|
|
90
|
+
}
|
|
91
|
+
else {
|
|
92
|
+
window.location.href = props.redirectUrlOnNoConsent;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
else {
|
|
96
|
+
disclaimer.close();
|
|
97
|
+
}
|
|
98
|
+
};
|
|
73
99
|
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) => {
|
|
74
100
|
if (e.checked === 'indeterminate')
|
|
75
101
|
return;
|
|
@@ -79,31 +105,7 @@ export function DisclaimerV2(props) {
|
|
|
79
105
|
globalStore.termsOfUse.setOpen(true);
|
|
80
106
|
globalStore.termsOfUse.setNext('DISCLAIMER');
|
|
81
107
|
disclaimer.close();
|
|
82
|
-
}, 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:
|
|
83
|
-
if (Capacitor.isNativePlatform()) {
|
|
84
|
-
const session = await getQueryClient().fetchQuery({
|
|
85
|
-
queryKey: getSessionQueryKey(),
|
|
86
|
-
queryFn: async () => getSession(),
|
|
87
|
-
});
|
|
88
|
-
if (session.status === 'authenticated') {
|
|
89
|
-
await unregisterFCMDevice({
|
|
90
|
-
type: ['IOS', 'ANDROID'],
|
|
91
|
-
}, {
|
|
92
|
-
headers: {
|
|
93
|
-
Authorization: `Bearer ${session.token}`,
|
|
94
|
-
},
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
App.exitApp(); // close app on mobile
|
|
98
|
-
}
|
|
99
|
-
signOutMutation.mutate();
|
|
100
|
-
if (props.redirectUrlOnNoConsent) {
|
|
101
|
-
window.location.href = props.redirectUrlOnNoConsent;
|
|
102
|
-
}
|
|
103
|
-
else {
|
|
104
|
-
disclaimer.close();
|
|
105
|
-
}
|
|
106
|
-
}, variant: "outline", children: "Exit" }), _jsx(Button, { type: "button", "data-testid": "disclaimer-v2-accept-btn", onClick: () => {
|
|
108
|
+
}, 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: handleExit, variant: "outline", children: "Exit" }), _jsx(Button, { type: "button", "data-testid": "disclaimer-v2-accept-btn", onClick: () => {
|
|
107
109
|
if (!checked) {
|
|
108
110
|
setShowWarning(true);
|
|
109
111
|
setTimeout(() => setShowWarning(false), 4000);
|
|
@@ -132,6 +132,13 @@ function Rules(props) {
|
|
|
132
132
|
return false;
|
|
133
133
|
return milestones.every((milestone) => milestone.isCompleted);
|
|
134
134
|
}, [milestones]);
|
|
135
|
+
const isExpired = useMemo(() => {
|
|
136
|
+
if (!quest?.daysToClear || !quest?.dateTimeCreated)
|
|
137
|
+
return false;
|
|
138
|
+
const targetDateTime = new Date(quest.dateTimeCreated);
|
|
139
|
+
targetDateTime.setDate(targetDateTime.getDate() + Number(quest.daysToClear));
|
|
140
|
+
return new Date() > targetDateTime;
|
|
141
|
+
}, [quest?.dateTimeCreated, quest?.daysToClear]);
|
|
135
142
|
const sessionQuery = useSessionQuery();
|
|
136
143
|
const session = sessionQuery.data;
|
|
137
144
|
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 p-4", children: _jsxs(Dialog.Content, { className: twMerge('mx-auto max-h-[80vh] min-h-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-10 md:scrollbar:h-2 md:scrollbar:w-2 md:scrollbar-thumb:rounded-full md:scrollbar-thumb:bg-bg-quaternary md:scrollbar-track:bg-transparent', props.className?.root), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: twMerge('font-semibold text-lg text-text-primary-900', props.className?.title), children: quest?.name || 'Quest' }), _jsx("div", { className: "relative", children: _jsx("div", { className: "max-h-[30vh] overflow-y-auto", children: quest?.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
|
|
@@ -162,19 +169,20 @@ function Rules(props) {
|
|
|
162
169
|
globalStore.depositWithdrawal.setOpen(true);
|
|
163
170
|
globalStore.depositWithdrawal.setTab('DEPOSIT');
|
|
164
171
|
}
|
|
165
|
-
}, "aria-label": `Complete ${milestone.label}`, disabled:
|
|
166
|
-
|
|
172
|
+
}, "aria-label": `Complete ${milestone.label}`, disabled: isExpired ||
|
|
173
|
+
(milestoneType === 'ACCOUNT_VERIFICATION' &&
|
|
174
|
+
verificationStatus === 'PENDING'), children: [milestoneType === 'ACCOUNT_VERIFICATION' ? (_jsx(FileCheck02Icon, { className: "size-5" })) : (_jsx(CoinsHandIcon, { className: "size-5" })), milestoneType === 'FIRST_DEPOSIT'
|
|
167
175
|
? 'Deposit'
|
|
168
176
|
: 'Verify Account'] })), !milestone.isCompleted &&
|
|
169
|
-
milestoneType === 'LINK_FACEBOOK_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Facebook Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(FacebookSignInTrigger, { text: "Link Facebook Account", className: "!mt-0 flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })] })), !milestone.isCompleted &&
|
|
170
|
-
milestoneType === 'LINK_GOOGLE_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Google Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(GoogleSignInButton, { text: "Link Google Account", className: "flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })] })), !milestone.isCompleted &&
|
|
177
|
+
milestoneType === 'LINK_FACEBOOK_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Facebook Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(FacebookSignInTrigger, { text: "Link Facebook Account", className: "!mt-0 flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none", disabled: isExpired })] })), !milestone.isCompleted &&
|
|
178
|
+
milestoneType === 'LINK_GOOGLE_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Google Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(GoogleSignInButton, { text: "Link Google Account", className: "flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none", disabled: isExpired })] })), !milestone.isCompleted &&
|
|
171
179
|
milestoneType === 'CUSTOM_LINK' &&
|
|
172
180
|
(() => {
|
|
173
181
|
const baseUrl = process.env.NEXT_PUBLIC_ENVIRONMENT === 'development'
|
|
174
182
|
? 'https://api.trigger.development.opexa.io'
|
|
175
183
|
: 'https://api.trigger.opexa.io';
|
|
176
184
|
const linkUrl = `${baseUrl}/v1/quests/${quest?.id}/milestones/${milestone.id}/link?token=${session?.token}`;
|
|
177
|
-
return (_jsx(Button, { size: "sm", "aria-label": `Complete ${milestone.label}`, asChild:
|
|
185
|
+
return (_jsx(Button, { size: "sm", "aria-label": `Complete ${milestone.label}`, asChild: !isExpired, disabled: isExpired, children: isExpired ? (_jsx("span", { children: "Quest Expired" })) : (_jsxs(Link, { href: linkUrl, target: "_blank", rel: "noopener noreferrer", children: ["Click Here", _jsx(Link01Icon, { className: "size-5" })] })) }));
|
|
178
186
|
})()] }, milestone.key));
|
|
179
187
|
}), 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: twMerge('w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center text-white', props.className?.uncompleteButton), children: _jsxs("p", { children: ["Complete target to", ' ', _jsxs("span", { className: "text-brand-400", children: ["\u20B1", quest?.bonus] }), ' ', "bonus!"] }) })) }))] })] }) })] }) }));
|
|
180
188
|
}
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
3
|
import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
|
|
4
4
|
import { ClockStopWatchIcon } from '../../icons/ClockStopWatchIcon.js';
|
|
5
5
|
import { Badge } from '../../ui/Badge/index.js';
|
|
6
6
|
import { useQuestContext } from './QuestsContext.js';
|
|
7
7
|
export function RemainingTime({ endOfDay: useEndOfDay = false, className, }) {
|
|
8
8
|
const quest = useQuestContext();
|
|
9
|
-
const targetDateTime =
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const targetDateTime = useMemo(() => {
|
|
10
|
+
const date = new Date(quest.dateTimeCreated);
|
|
11
|
+
date.setDate(date.getDate() + Number(quest.daysToClear ?? 0));
|
|
12
|
+
return date;
|
|
13
|
+
}, [quest.dateTimeCreated, quest.daysToClear]);
|
|
12
14
|
const remainingTime = useRemainingTime(targetDateTime);
|
|
13
15
|
if (quest.status === 'COMPLETED') {
|
|
14
16
|
return (_jsx(Badge.Root, { size: "lg", colorScheme: "success", round: false, className: className?.completedBadgeRoot, children: _jsx(Badge.Label, { className: className?.completedBadgeLabel, children: "Completed" }) }));
|
|
15
17
|
}
|
|
16
|
-
if (quest.status === 'FAILED'
|
|
18
|
+
if (quest.status === 'FAILED') {
|
|
17
19
|
return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, className: className?.failedBadgeRoot, children: _jsx(Badge.Label, { className: className?.failedBadgeLabel, children: "Failed" }) }));
|
|
18
20
|
}
|
|
19
21
|
return (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, className: className?.timeBadgeRoot, children: [_jsx(Badge.Icon, { className: className?.timeBadgeIcon, children: _jsx(ClockStopWatchIcon, {}) }), _jsx(Badge.Label, { className: className?.timeBadgeLabel, children: remainingTime.toString() })] }));
|
|
@@ -46,6 +46,6 @@ export const FacebookSignInTrigger = (props) => {
|
|
|
46
46
|
description: 'Failed to sign in with Facebook. Please try again.',
|
|
47
47
|
});
|
|
48
48
|
}, render: ({ onClick }) => {
|
|
49
|
-
return (_jsxs(Button, { variant: "outline", id: "fb-btn", onClick: onClick, colorScheme: "gray", className: `mt-lg border-border-primary bg-bg-primary text-text-secondary-700 ${props.className}`, children: [_jsx(FacebookIcon, { className: "size-6" }), props.text ?? 'Continue with Facebook'] }));
|
|
49
|
+
return (_jsxs(Button, { variant: "outline", id: "fb-btn", onClick: onClick, colorScheme: "gray", disabled: props.disabled, className: `mt-lg border-border-primary bg-bg-primary text-text-secondary-700 ${props.className}`, children: [_jsx(FacebookIcon, { className: "size-6" }), props.text ?? 'Continue with Facebook'] }));
|
|
50
50
|
} }));
|
|
51
51
|
};
|