@opexa/portal-components 0.0.51 → 0.0.52
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/GamesSearch/GamesSearch.js +1 -1
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts +1 -1
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js +9 -9
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js +1 -1
- package/dist/components/Quests/OnboardingQuest/OnboardingQuest.d.ts +4 -0
- package/dist/components/Quests/OnboardingQuest/OnboardingQuest.js +4 -0
- package/dist/components/Quests/Quests.d.ts +6 -1
- package/dist/components/Quests/Quests.js +7 -10
- package/dist/components/Quests/WageringQuest/WageringQuest.d.ts +1 -1
- package/dist/components/Quests/WageringQuest/WageringQuest.js +5 -4
- package/dist/components/Quests/WageringQuest/WageringQuestModal.js +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -29,7 +29,7 @@ export function GamesSearch(props) {
|
|
|
29
29
|
placement: 'bottom',
|
|
30
30
|
}, inputValue: search, onInputValueChange: (details) => {
|
|
31
31
|
setSearch(details.inputValue);
|
|
32
|
-
}, selectionBehavior: "preserve", allowCustomValue: true, children: [_jsxs(Combobox.Control, { children: [_jsx(Combobox.Input, {}), _jsx(Combobox.Context, { children: (api) => {
|
|
32
|
+
}, selectionBehavior: "preserve", allowCustomValue: true, children: [_jsxs(Combobox.Control, { children: [_jsx(Combobox.Input, { placeholder: "Search" }), _jsx(Combobox.Context, { children: (api) => {
|
|
33
33
|
if (api.inputValue.length <= 0)
|
|
34
34
|
return null;
|
|
35
35
|
return (_jsx("span", { className: "text-text-secondary-700 px-3.5 font-semibold", tabIndex: 0, onClick: () => {
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { addDays, isEqual, startOfDay } from 'date-fns';
|
|
3
4
|
import { useState } from 'react';
|
|
4
5
|
import { twMerge } from 'tailwind-merge';
|
|
5
|
-
import { CalendarIcon, CheckIcon, ClockStopWatchIcon, InfoCircleIcon, } from '../../../icons/index.js';
|
|
6
|
-
import { Button } from '../../../ui/index.js';
|
|
7
|
-
import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
|
|
8
|
-
import CountdownTimer from '../CountdownTimer.js';
|
|
9
|
-
import { addDays, isEqual, startOfDay } from 'date-fns';
|
|
10
|
-
import { getAvailableQuestsQueryKey, getQueryClient } from '../../../utils/index.js';
|
|
11
6
|
import { useCheckInDailyCheckInQuestMutation } from '../../../client/hooks/index.js';
|
|
12
7
|
import { toaster } from '../../../client/utils/index.js';
|
|
13
|
-
|
|
8
|
+
import { CalendarIcon, CheckIcon, ClockStopWatchIcon, InfoCircleIcon, } from '../../../icons/index.js';
|
|
9
|
+
import { Badge, Button } from '../../../ui/index.js';
|
|
10
|
+
import { getAvailableQuestsQueryKey, getQueryClient } from '../../../utils/index.js';
|
|
11
|
+
import CountdownTimer from '../CountdownTimer.js';
|
|
12
|
+
import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
|
|
13
|
+
export function DailyCheckInQuest({ quest }) {
|
|
14
14
|
const queryClient = getQueryClient();
|
|
15
15
|
const [showRules, setShowRules] = useState(false);
|
|
16
16
|
const [isExpired, setIsExpired] = useState(false);
|
|
@@ -52,7 +52,7 @@ export default function DailyCheckInQuest({ quest }) {
|
|
|
52
52
|
return (_jsxs(_Fragment, { children: [_jsx(DailyCheckInQuestModal, { modalState: {
|
|
53
53
|
isOpen: showRules,
|
|
54
54
|
setIsOpen: setShowRules,
|
|
55
|
-
} }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full
|
|
55
|
+
} }), _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: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(CountdownTimer, { endDateTime: endDateTime, renderAction: (timeLeft) => (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsxs(Badge.Label, { children: [timeLeft.days, "d:", timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => setIsExpired(true) }), _jsx("div", { role: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => {
|
|
56
56
|
const reward = item.reward ? `+₱${item.reward}` : '-';
|
|
57
57
|
return (_jsx("div", { className: twMerge('flex items-center justify-center', item.day <= (checkInStreak || 0)
|
|
58
58
|
? 'text-brand-400'
|
|
@@ -69,5 +69,5 @@ export default function DailyCheckInQuest({ quest }) {
|
|
|
69
69
|
function CalendarWithDayNumber({ day, currentCheckedInDays, }) {
|
|
70
70
|
return (_jsxs("div", { className: twMerge('group relative h-fit w-fit', day <= currentCheckedInDays
|
|
71
71
|
? 'text-brand-400'
|
|
72
|
-
: 'text-text-secondary-700'), children: [_jsx(CalendarIcon, {}), _jsx("div", { className: "absolute inset-0 mt-
|
|
72
|
+
: 'text-text-secondary-700'), children: [_jsx(CalendarIcon, {}), _jsx("div", { className: "absolute inset-0 mt-1 flex items-center justify-center text-2xs lg:mt-[2px]", children: _jsx("p", { className: "text-center", children: day }) })] }));
|
|
73
73
|
}
|
|
@@ -4,5 +4,5 @@ import { Portal } from '@ark-ui/react';
|
|
|
4
4
|
import { XIcon } from '../../../icons/index.js';
|
|
5
5
|
import { Button, Dialog } from '../../../ui/index.js';
|
|
6
6
|
export function DailyCheckInQuestModal(props) {
|
|
7
|
-
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(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-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-
|
|
7
|
+
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(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-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: "Daily Check-In Rules" }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn rewards just for checking in each day!" }), _jsx("li", { children: "Stay consistent to unlock special rewards on the 3rd, 5th, and 7th day." }), _jsx("li", { children: "Missing a day will reset your streak, starting again from Day 1." }), _jsx("li", { children: "Each check-in unlocks the next one on the following day." }), _jsx("li", { children: "Successfully check in for 7 consecutive days to complete the quest and reset the cycle." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
|
|
8
8
|
}
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface QuestsProps {
|
|
2
|
+
/** @default "Quests" */
|
|
3
|
+
heading?: string;
|
|
4
|
+
className?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare function Quests(props: QuestsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,26 +4,23 @@ import Image from 'next/image';
|
|
|
4
4
|
import { useAvailableQuestsQuery } from '../../client/hooks/index.js';
|
|
5
5
|
import { SpinnerIcon } from '../../icons/index.js';
|
|
6
6
|
import closeChest from '../../images/close-chest.png';
|
|
7
|
-
import DailyCheckInQuest from './DailyCheckInQuest/DailyCheckInQuest.js';
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
console.log('OnboardingQuest not implemented', props.quest);
|
|
11
|
-
return null;
|
|
12
|
-
}
|
|
7
|
+
import { DailyCheckInQuest } from './DailyCheckInQuest/DailyCheckInQuest.js';
|
|
8
|
+
import { OnboardingQuest } from './OnboardingQuest/OnboardingQuest.js';
|
|
9
|
+
import { WageringQuest } from './WageringQuest/WageringQuest.js';
|
|
13
10
|
const QUEST_COMPONENT_MAP = {
|
|
14
11
|
DAILY_CHECKIN: DailyCheckInQuest,
|
|
15
12
|
ONBOARDING: OnboardingQuest,
|
|
16
13
|
WAGERING: WageringQuest,
|
|
17
14
|
};
|
|
18
|
-
export function Quests() {
|
|
15
|
+
export function Quests(props) {
|
|
19
16
|
const query = useAvailableQuestsQuery();
|
|
20
17
|
if (query.isLoading) {
|
|
21
|
-
return (_jsxs("div", { className:
|
|
18
|
+
return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
|
|
22
19
|
}
|
|
23
20
|
if (!query.data?.length) {
|
|
24
|
-
return (_jsxs("div", { className:
|
|
21
|
+
return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { src: closeChest, width: 100, height: 100, alt: "No Quests Available", className: "mix-blend-luminosity", quality: 100 }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: "No available quests. Please check back later!" })] })] }));
|
|
25
22
|
}
|
|
26
|
-
return (_jsxs("div", { className:
|
|
23
|
+
return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "grid grid-cols-1 gap-3xl lg:grid-cols-3", children: query.data.map((quest, index) => {
|
|
27
24
|
const QuestComponent = QUEST_COMPONENT_MAP[quest.type];
|
|
28
25
|
return _jsx(QuestComponent, { quest: quest }, index);
|
|
29
26
|
}) })] }));
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
5
|
import { ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
|
|
5
|
-
import {
|
|
6
|
+
import { Badge } from '../../../ui/index.js';
|
|
6
7
|
import CountdownTimer from '../CountdownTimer.js';
|
|
7
|
-
import {
|
|
8
|
-
export
|
|
8
|
+
import { WageringQuestModal } from './WageringQuestModal.js';
|
|
9
|
+
export function WageringQuest({ quest }) {
|
|
9
10
|
const [showRules, setShowRules] = useState(false);
|
|
10
11
|
const [isExpired, setIsExpired] = useState(false);
|
|
11
12
|
const { progressPercentage, turnover, targetTurnover, name, description, endDateTime, bonus, status, } = quest;
|
|
12
13
|
return (_jsxs(_Fragment, { children: [_jsx(WageringQuestModal, { questName: name, modalState: {
|
|
13
14
|
isOpen: showRules,
|
|
14
15
|
setIsOpen: setShowRules,
|
|
15
|
-
} }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full
|
|
16
|
+
} }), _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: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(CountdownTimer, { endDateTime: endDateTime, renderAction: (timeLeft) => (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsxs(Badge.Label, { children: [timeLeft.days, "d:", timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => setIsExpired(true) }), _jsx("div", { role: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: "text-text-primary-brand group flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", parseInt(progressPercentage).toFixed(2), "%"] }), _jsxs("p", { children: [turnover, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " PHP"] })] })] }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercentage}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _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", { className: twMerge(isExpired || status === 'COMPLETED' || status === 'FAILED'
|
|
16
17
|
? ['opacity-50 grayscale']
|
|
17
18
|
: ''), children: ["Complete to get ", _jsxs("span", { className: "text-brand-400", children: ["\u20B1", bonus] }), ' ', "bonus!"] }) }) })] })] }));
|
|
18
19
|
}
|
|
@@ -4,5 +4,5 @@ import { Portal } from '@ark-ui/react';
|
|
|
4
4
|
import { XIcon } from '../../../icons/index.js';
|
|
5
5
|
import { Button, Dialog } from '../../../ui/index.js';
|
|
6
6
|
export function WageringQuestModal(props) {
|
|
7
|
-
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(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-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-
|
|
7
|
+
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(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-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: props.questName }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
|
|
8
8
|
}
|