@opexa/portal-components 0.0.1080 → 0.0.1082
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.
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { endOfDay as getEndOfDay } from 'date-fns';
|
|
2
3
|
import { isString } from 'lodash-es';
|
|
3
4
|
import dynamic from 'next/dynamic';
|
|
4
5
|
import Link from 'next/link';
|
|
@@ -10,6 +11,7 @@ import { useDisclosure } from '../../client/hooks/useDisclosure.js';
|
|
|
10
11
|
import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
|
|
11
12
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
12
13
|
import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
|
|
14
|
+
import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
|
|
13
15
|
import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
|
|
14
16
|
import { CheckIcon } from '../../icons/CheckIcon.js';
|
|
15
17
|
import { CoinsHandIcon } from '../../icons/CoinsHandIcon.js';
|
|
@@ -132,13 +134,16 @@ function Rules(props) {
|
|
|
132
134
|
return false;
|
|
133
135
|
return milestones.every((milestone) => milestone.isCompleted);
|
|
134
136
|
}, [milestones]);
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
137
|
+
//prevent members to perform actions after the quest has expired
|
|
138
|
+
const targetDateTime = useMemo(() => {
|
|
139
|
+
if (!quest?.dateTimeCreated)
|
|
140
|
+
return null;
|
|
141
|
+
const date = new Date(quest.dateTimeCreated);
|
|
142
|
+
date.setDate(date.getDate() + Number(quest?.daysToClear ?? 0));
|
|
143
|
+
return getEndOfDay(date);
|
|
141
144
|
}, [quest?.dateTimeCreated, quest?.daysToClear]);
|
|
145
|
+
const remainingTime = useRemainingTime(targetDateTime ?? new Date());
|
|
146
|
+
const isExpired = quest?.status === 'FAILED' || remainingTime.expired;
|
|
142
147
|
const sessionQuery = useSessionQuery();
|
|
143
148
|
const session = sessionQuery.data;
|
|
144
149
|
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: {
|
|
@@ -15,7 +15,7 @@ export function RemainingTime({ endOfDay: useEndOfDay = false, className, }) {
|
|
|
15
15
|
if (quest.status === 'COMPLETED') {
|
|
16
16
|
return (_jsx(Badge.Root, { size: "lg", colorScheme: "success", round: false, className: className?.completedBadgeRoot, children: _jsx(Badge.Label, { className: className?.completedBadgeLabel, children: "Completed" }) }));
|
|
17
17
|
}
|
|
18
|
-
if (quest.status === 'FAILED') {
|
|
18
|
+
if (quest.status === 'FAILED' || remainingTime.expired) {
|
|
19
19
|
return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, className: className?.failedBadgeRoot, children: _jsx(Badge.Label, { className: className?.failedBadgeLabel, children: "Failed" }) }));
|
|
20
20
|
}
|
|
21
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() })] }));
|