@opexa/portal-components 0.0.458 → 0.0.460

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/NoQuests.d.ts

@@ -0,0 +1,6 @@
+interface NoQuestsProps {
+    heading?: string;
+    description?: string;
+}
+export declare const NoQuests: ({ heading, description }: NoQuestsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Quests/NoQuests.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from 'next/image';
+import closeChest from '../../images/close-chest.png';
+export const NoQuests = ({ heading, description }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mb-3 font-semibold text-lg capitalize", children: 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" }), _jsx("div", { className: "mt-3 text-center text-sm text-text-tertiary-600", children: description ?? 'No available quests. Please check back later!' })] })] }));
+};

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';
@@ -13,6 +13,7 @@ import closeChest from '../../images/close-chest.png';
 import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
 import { DailyCheckInQuest, } from './DailyCheckInQuest.js';
 import { JourneyQuest } from './JourneyQuest.js';
+import { NoQuests } from './NoQuests.js';
 import { OnboardingQuest } from './OnboardingQuest.js';
 import { QuestContext } from './QuestsContext.js';
 import { WageringQuest, } from './WageringQuest.js';
@@ -57,14 +58,16 @@ export function Quests__client(props) {
     }
     return (_jsxs("div", { style: style, className: twMerge(classNames?.root), children: [_jsx("h2", { className: "font-semibold text-lg", children: heading ?? 'Quests' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
                     setTab(TabDefinition.catch('AVAILABLE').parse(details.value));
-                }, className: "mt-3 w-full overflow-x-auto lg:mt-4.5 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 grid gap-3xl lg:mt-lg lg:grid-cols-3", children: quests.map((quest) => {
+                }, className: "mt-3 w-full overflow-x-auto lg:mt-4.5 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 grid gap-3xl lg:mt-lg lg:grid-cols-3", children: quests.length > 0 ? (quests.map((quest) => {
                     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/package.json

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