@opexa/portal-components 0.0.459 → 0.0.461

package/dist/components/Quests/MultiWageringQuest.js

@@ -19,6 +19,18 @@ export function MultiWageringQuest() {
     const quest = useQuestContext();
     const { stages, totalStage, currentStage, progressPercentage } = useMemo(() => {
         const currentStage = quest.stages.filter((m) => m.cleared).length;
+        const getStageItemProgress = (overallProgress, stageNumber) => {
+            const stageSize = 100 / quest.stages.length;
+            const stageStart = (stageNumber - 1) * stageSize;
+            const stageEnd = stageStart + stageSize;
+            if (overallProgress >= stageEnd) {
+                return 100;
+            }
+            else if (overallProgress > stageStart) {
+                return ((overallProgress - stageStart) / stageSize) * 100;
+            }
+            return 0;
+        };
         if (!quest?.stages) {
             return {
                 stages: [],
@@ -27,8 +39,12 @@ export function MultiWageringQuest() {
                 progressPercentage: 0,
             };
         }
+        const transformedStages = quest.stages.map((stage, idx) => ({
+            ...stage,
+            progressValue: getStageItemProgress(parseFloat(quest.progressPercentage), idx + 1),
+        }));
         return {
-            stages: quest.stages,
+            stages: transformedStages,
             totalStage: quest.stages.length,
             currentStage: currentStage === 0 ? 1 : currentStage,
             progressPercentage: +quest.progressPercentage,
@@ -68,23 +84,23 @@ function Stages(props) {
         const stage = props?.stages?.findLastIndex((stage) => stage.cleared) ?? 0;
         return stage !== -1 ? stage + 1 : 1;
     }, [props.stages]);
-    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: "mx-auto mt-40 min-h-auto min-w-[23rem] max-w-[25rem] overflow-y-auto rounded-xl px-4 py-5", 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: "font-semibold text-lg text-text-primary-900", children: props.quest?.name || 'Quest' }), _jsx("div", { dangerouslySetInnerHTML: {
+    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: "mx-auto mt-40 min-h-auto min-w-[23rem] max-w-[25rem] overflow-y-auto rounded-xl px-4 py-5", 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: "font-semibold text-lg text-text-primary-900", children: props.quest?.name || 'Quest' }), _jsx("div", { className: "font-normal text-[#94969C] text-sm", dangerouslySetInnerHTML: {
                                             __html: props.quest?.description ||
                                                 'Ready for a challenge? Complete them all and get amazing rewards!',
                                         } }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: props.stages.map((stage, idx) => {
                                             if (currentStage >= idx + 1) {
-                                                return (_jsx(QuestWageringStageUnlocked, { data: stage, bonus: stage.bonusAmount, stage: idx, isCompleted: stage.cleared }, idx));
+                                                return (_jsx(QuestWageringStageUnlocked, { data: stage, progressValue: stage.progressValue, bonus: stage.bonusAmount, stage: idx, isCompleted: stage.cleared }, idx));
                                             }
                                             else {
                                                 return _jsx(QuestWageringStageLocked, { stage: idx }, idx);
                                             }
                                         }) }), _jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })] })] }) })] }) }));
 }
-function QuestWageringStageUnlocked({ bonus, stage, data, isCompleted = false, }) {
+function QuestWageringStageUnlocked({ bonus, stage, progressValue, data, isCompleted = false, }) {
     const localeInfo = useLocaleInfo();
-    return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl bg-bg-secondary p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx(Badge.Root, { colorScheme: isCompleted ? 'success' : 'blue', size: "md", round: true, children: _jsx(Badge.Label, { children: data.cleared ? 'Completed' : 'Ongoing' }) })] }), _jsxs("div", { className: "mt-2.5 flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", data.cleared ? 100 : 0, "%"] }), _jsx(Badge.Root, { size: "md", className: "border border-border-badge bg-bg-badge", round: false, children: _jsxs(Badge.Label, { className: "!text-text-badge", children: ["+", formatNumber(bonus, {
+    return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl bg-bg-secondary p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx(Badge.Root, { colorScheme: isCompleted ? 'success' : 'blue', size: "md", round: true, children: _jsx(Badge.Label, { children: data.cleared ? 'Completed' : 'Ongoing' }) })] }), _jsxs("div", { className: "mt-2.5 flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", progressValue, "%"] }), _jsx(Badge.Root, { size: "md", className: "border border-border-badge bg-bg-badge", round: false, children: _jsxs(Badge.Label, { className: "!text-text-badge", children: ["+", formatNumber(bonus, {
                                     currency: localeInfo.currency.code,
-                                }), ' ', "Bonus"] }) })] }), _jsx(Progress.Root, { max: 100, className: "mt-2 h-2 rounded-full bg-bg-primary", value: data.cleared ? 100 : 0, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) })] }));
+                                }), ' ', "Bonus"] }) })] }), _jsx(Progress.Root, { max: 100, className: "mt-2 h-2 rounded-full bg-bg-primary", value: progressValue ?? 0, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) })] }));
 }
 function QuestWageringStageLocked({ stage }) {
     return (_jsxs("div", { className: "mb-4 flex items-center justify-between rounded-xl bg-bg-secondary p-3", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx("div", { className: "flex items-center justify-center rounded-full border border-border-lock bg-bg-lock p-1", children: _jsx(Lock01Icon, { className: "size-3 stroke-3 font-medium text-text-lock" }) })] }));

package/dist/components/Quests/Quests.client.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isString } from 'lodash-es';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
-import { useState, } from 'react';
+import { Suspense, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useAvailableQuestsQuery } from '../../client/hooks/useAvailableQuestsQuery.js';
@@ -62,10 +62,12 @@ export function Quests__client(props) {
                     const Quest = quest.stages?.length && featureFlag.enabled
                         ? QUEST_COMPONENT_MAP['MULTI_WAGERING']
                         : QUEST_COMPONENT_MAP[quest.type];
-                    return (_jsx(QuestContext, { value: quest, children: _jsx(Quest, { className: quest.type === 'WAGERING'
-                                ? classNames?.wageringQuest
-                                : quest.type === 'DAILY_CHECKIN'
-                                    ? classNames?.dailyCheckInQuest
-                                    : '', uncompletedIcon: props.uncompletedIcon, customComplete: quest.type === 'WAGERING' ? props.customComplete : undefined, showTurnoverDecimals: props.showTurnoverDecimals }) }, quest.id));
+                    return (_jsx(QuestContext, { value: quest, children: _jsx(Suspense, { children: _jsx(Quest, { className: quest.type === 'WAGERING'
+                                    ? classNames?.wageringQuest
+                                    : quest.type === 'DAILY_CHECKIN'
+                                        ? classNames?.dailyCheckInQuest
+                                        : '', uncompletedIcon: props.uncompletedIcon, customComplete: quest.type === 'WAGERING'
+                                    ? props.customComplete
+                                    : undefined, showTurnoverDecimals: props.showTurnoverDecimals }) }) }, quest.id));
                 })) : (_jsx(NoQuests, { heading: `${tab.toLowerCase()} Quests`, description: `You have no ${tab.toLowerCase()} quests yet.` })) })] }));
 }

package/dist/components/TopProgress/TopProgressBar.d.ts

@@ -0,0 +1,6 @@
+type TopProgressBarPreset = 'Sunset' | 'Poppy' | 'Rosebud' | 'Sunshine' | 'Gold' | 'Twilight' | 'Powder' | 'Holly' | 'Northern Lights' | 'Raw Green' | 'Lime' | 'Nemesia' | 'Snowflake' | 'Blue Bird' | 'Blueprint' | 'Salvia' | 'Heartsease' | 'Amaranthus' | 'Candy' | 'Verbena';
+export declare const TopProgressBar: ({ preset, customPreset, }: {
+    preset?: TopProgressBarPreset;
+    customPreset?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TopProgress/TopProgressBar.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+// CSS gradient presets (inline styles), approximate Tailwind palette colors
+// --> check presets here <3 https://www.creative-tim.com/twcomponents/gradient-generator
+const PRESET_BG = {
+    Sunset: 'linear-gradient(90deg, #ef4444 0%, #f97316 100%)',
+    Poppy: 'linear-gradient(90deg, #fb7185 0%, #ef4444 100%)',
+    Rosebud: 'linear-gradient(90deg, #ec4899 0%, #f43f5e 100%)',
+    Sunshine: 'linear-gradient(90deg, #fde68a 0%, #facc15 100%)',
+    Gold: 'linear-gradient(90deg, #fde68a 0%, #eab308 100%)',
+    Twilight: 'linear-gradient(90deg, #f59e0b 0%, #ec4899 100%)',
+    Powder: 'linear-gradient(90deg, #ddd6fe 0%, #fbcfe8 100%)',
+    Holly: 'linear-gradient(90deg, #bfdbfe 0%, #a5f3fc 100%)',
+    'Northern Lights': 'linear-gradient(90deg, #99f6e4 0%, #14b8a6 100%)',
+    'Raw Green': 'linear-gradient(90deg, #a3e635 0%, #84cc16 100%)',
+    Lime: 'linear-gradient(90deg, #2dd4bf 0%, #fef08a 100%)',
+    Nemesia: 'linear-gradient(90deg, #34d399 0%, #22d3ee 100%)',
+    Snowflake: 'linear-gradient(90deg, #d946ef 0%, #22d3ee 100%)',
+    'Blue Bird': 'linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%)',
+    Blueprint: 'linear-gradient(90deg, #6366f1 0%, #3b82f6 100%)',
+    Salvia: 'linear-gradient(90deg, #2563eb 0%, #7c3aed 100%)',
+    Heartsease: 'linear-gradient(90deg, #c026d3 0%, #db2777 100%)',
+    Amaranthus: 'linear-gradient(90deg, #c026d3 0%, #9333ea 100%)',
+    Candy: 'linear-gradient(90deg, #d946ef 0%, #ec4899 100%)',
+    Verbena: 'linear-gradient(90deg, #8b5cf6 0%, #a855f7 100%)',
+};
+export const TopProgressBar = ({ preset = 'Gold', customPreset, }) => {
+    const [progress, setProgress] = useState(0);
+    const [visible, setVisible] = useState(false);
+    const incrementTimerRef = useRef(null);
+    const hideTimerRef = useRef(null);
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const currentUrl = useMemo(() => {
+        const sp = searchParams?.toString();
+        return `${pathname ?? ''}${sp ? `?${sp}` : ''}`;
+    }, [pathname, searchParams]);
+    const clearTimers = useCallback(() => {
+        if (incrementTimerRef.current) {
+            clearInterval(incrementTimerRef.current);
+            incrementTimerRef.current = null;
+        }
+        if (hideTimerRef.current) {
+            clearTimeout(hideTimerRef.current);
+            hideTimerRef.current = null;
+        }
+    }, []);
+    const startProgress = useCallback(() => {
+        clearTimers();
+        setVisible(true);
+        setProgress(8);
+        incrementTimerRef.current = window.setInterval(() => {
+            setProgress((prev) => {
+                if (prev >= 90)
+                    return prev;
+                const delta = Math.max(1, Math.min(10, 10 * Math.random()));
+                return Math.min(prev + delta, 90);
+            });
+        }, 250);
+    }, [clearTimers]);
+    const finishProgress = useCallback(() => {
+        setProgress(100);
+        if (incrementTimerRef.current) {
+            clearInterval(incrementTimerRef.current);
+            incrementTimerRef.current = null;
+        }
+        if (hideTimerRef.current) {
+            window.clearTimeout(hideTimerRef.current);
+        }
+        hideTimerRef.current = window.setTimeout(() => {
+            setVisible(false);
+            // Reset for next time after fade-out transition
+            hideTimerRef.current = window.setTimeout(() => setProgress(0), 200);
+        }, 150);
+    }, []);
+    // Trigger progress completion when URL changes
+    const previousUrl = useRef('');
+    useEffect(() => {
+        if (previousUrl.current !== currentUrl) {
+            previousUrl.current = currentUrl;
+            finishProgress();
+        }
+    }, [currentUrl, finishProgress]);
+    useEffect(() => {
+        const handleAnchorClick = (event) => {
+            const target = event.currentTarget;
+            if (!target)
+                return;
+            const href = target.getAttribute('href');
+            if (!href)
+                return;
+            const targetUrl = new URL(href, window.location.origin);
+            const current = new URL(window.location.href);
+            const isDifferent = targetUrl.origin !== current.origin ||
+                targetUrl.pathname !== current.pathname ||
+                targetUrl.search !== current.search;
+            if (isDifferent) {
+                startProgress();
+            }
+        };
+        const attachListeners = () => {
+            const anchors = document.querySelectorAll('a[href]');
+            anchors.forEach((a) => {
+                a.removeEventListener('click', handleAnchorClick);
+                a.addEventListener('click', handleAnchorClick);
+            });
+        };
+        const observer = new MutationObserver(() => attachListeners());
+        observer.observe(document, { childList: true, subtree: true });
+        attachListeners();
+        const originalPush = window.history.pushState;
+        const originalReplace = window.history.replaceState;
+        window.history.pushState = new Proxy(originalPush, {
+            apply: (target, thisArg, argArray) => {
+                const result = Reflect.apply(target, thisArg, argArray);
+                requestAnimationFrame(() => finishProgress());
+                return result;
+            },
+        });
+        window.history.replaceState = new Proxy(originalReplace, {
+            apply: (target, thisArg, argArray) => {
+                const result = Reflect.apply(target, thisArg, argArray);
+                requestAnimationFrame(() => finishProgress());
+                return result;
+            },
+        });
+        // Cleanup
+        return () => {
+            observer.disconnect();
+            const anchors = document.querySelectorAll('a[href]');
+            anchors.forEach((a) => a.removeEventListener('click', handleAnchorClick));
+            window.history.pushState = originalPush;
+            window.history.replaceState = originalReplace;
+            clearTimers();
+        };
+    }, [clearTimers, finishProgress, startProgress]);
+    return (_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed top-0 right-0 left-0 z-[9999]", children: _jsx("div", { className: twMerge('h-[3px] transition-[width,opacity] duration-200 ease-out', visible ? 'opacity-100' : 'opacity-0'), style: {
+                width: `${progress}%`,
+                background: customPreset ?? PRESET_BG[preset],
+                boxShadow: '0 0 10px rgba(255, 255, 255, 0.6)',
+            } }) }));
+};

package/dist/components/TopProgress/index.d.ts

@@ -0,0 +1 @@
+export * from './TopProgressBar';

package/dist/components/TopProgress/index.js

@@ -0,0 +1 @@
+export * from './TopProgressBar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@opexa/portal-components",
-	"version": "0.0.459",
+	"version": "0.0.461",
 	"exports": {
 		"./ui/*": {
 			"types": "./dist/ui/*/index.d.ts",