@opexa/portal-components 0.0.837 → 0.0.839

package/dist/components/Quests/MultiWageringQuest.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useMemo } from 'react';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { Lock01Icon } from '../../icons/Lock01Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { Progress } from '../../ui/Progress/index.js';
+import { Prose } from '../../ui/Prose/index.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function MultiWageringQuest() {
+    const disclosure = useDisclosure();
+    const quest = useQuestContext();
+    const { stages, totalStage, currentStage, progressPercentage } = useMemo(() => {
+        const currentStage = quest.stages.filter((m) => m.cleared).length;
+        const progress = [];
+        const turnover = parseFloat(quest.turnover || '0');
+        let remaining = turnover;
+        const stageTargets = quest.stages.map((s) => parseFloat(s.targetTurnover));
+        for (const target of stageTargets) {
+            if (remaining <= 0) {
+                progress.push(0);
+            }
+            else if (remaining >= target) {
+                progress.push(100);
+            }
+            else {
+                progress.push((remaining / target) * 100);
+            }
+            remaining -= target;
+        }
+        if (!quest?.stages) {
+            return {
+                stages: [],
+                totalStage: 0,
+                currentStage: 0,
+                progressPercentage: 0,
+            };
+        }
+        const transformedStages = quest.stages.map((stage, idx) => ({
+            ...stage,
+            progressValue: progress[idx],
+        }));
+        return {
+            stages: transformedStages,
+            totalStage: quest.stages.length,
+            currentStage: currentStage === 0 ? 1 : currentStage,
+            progressPercentage: +quest.progressPercentage,
+        };
+    }, [quest]);
+    const handleViewDetails = useCallback(() => {
+        disclosure.setOpen(true);
+    }, [disclosure]);
+    const localeInfo = useLocaleInfo();
+    const params = useSearchParams();
+    const questId = params.get('id');
+    const isOpen = useMemo(() => {
+        return questId === quest.id;
+    }, [questId, quest.id]);
+    const router = useRouter();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-full w-full flex-col space-y-6 rounded-2xl border border-border-primary bg-bg-tertiary px-4 pt-5 pb-6", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("div", { className: "flex max-h-7.5 items-center justify-between", children: _jsx(RemainingTime, { endOfDay: true }) }), _jsx("p", { className: "font-semibold text-xl", children: quest?.name || 'Multi Stage Wagering Quest' }), _jsx("div", { className: "text-[#CECFD2] text-sm", dangerouslySetInnerHTML: {
+                                    __html: quest?.description ||
+                                        'Ready for a challenge? Complete them all and get amazing rewards!',
+                                } }), _jsxs("div", { className: "flex items-center justify-between pt-5", children: [_jsxs("p", { className: "text-[#F5F5F6] text-sm", children: ["Progress: ", quest.progressPercentage, "%"] }), _jsxs("p", { className: "text-[#F5F5F6] text-sm", children: [quest.turnover, _jsxs("span", { className: "text-[#94969C]", children: ["/", quest.targetTurnover, " PHP"] })] })] }), _jsx(Progress.Root, { max: 100, className: "h-2 rounded-full bg-bg-primary", value: progressPercentage, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "text-[#F5F5F6] text-sm", children: ["Stage ", currentStage, " of ", totalStage] }), _jsx(Badge.Root, { size: "lg", className: "border border-border-badge bg-bg-badge", round: false, children: _jsxs(Badge.Label, { className: "!text-text-badge flex items-center justify-center text-xs", children: [_jsx("p", { className: "flex h-[10px] items-center justify-center", children: "+" }), ' ', formatNumber(quest.stages?.reduce((curr, prev) => {
+                                                    return curr + Number(prev.bonusAmount || 0);
+                                                }, 0), {
+                                                    currency: localeInfo.currency.code,
+                                                    maxDecimalPlaces: 0,
+                                                    minDecimalPlaces: 0,
+                                                }), ' ', "Bonus"] }) })] })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: handleViewDetails, "aria-label": "View Details", disabled: quest.status === 'FAILED' || quest.status === 'COMPLETED', className: "disabled:bg-bg-primary disabled:text-text-disabled", children: "View Details" }) })] }), _jsx(Stages, { open: disclosure.open || isOpen, onOpenChange: (open) => {
+                    disclosure.setOpen(open);
+                    router.push('/quests');
+                }, quest: quest, stages: stages })] }));
+}
+function Stages(props) {
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    const currentStage = useMemo(() => {
+        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 border border-border-wagering-popup 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(Prose, { dangerouslySetInnerHTML: {
+                                            __html: props.quest?.description ?? '',
+                                        } }), _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, 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, progressValue, data, isCompleted = false, }) {
+    const localeInfo = useLocaleInfo();
+    return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl border border-border-wagering-stage-popup bg-bg-wagering-stage-popup 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: 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 border border-border-wagering-stage-popup bg-bg-wagering-stage-popup 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/SessionWatcher/SessionWatcher.d.ts

@@ -0,0 +1 @@
+export declare function SessionWatcher(): null;

package/dist/components/SessionWatcher/SessionWatcher.js

@@ -0,0 +1,20 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect } from 'react';
+import { useSessionHealthQuery } from '../../client/hooks/useSessionHealthQuery.js';
+import { useSignOutMutation } from '../../client/hooks/useSignOutMutation.js';
+export function SessionWatcher() {
+    const router = useRouter();
+    const query = useSessionHealthQuery({ refetchInterval: 1000 * 5 });
+    const healthy = query.data ?? true;
+    const mutation = useSignOutMutation();
+    const signOut = useCallback(async () => {
+        await mutation.mutateAsync();
+        router.refresh();
+    }, [mutation, router]);
+    useEffect(() => {
+        if (!healthy)
+            signOut();
+    }, [healthy, signOut]);
+    return null;
+}

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

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

package/dist/components/SessionWatcher/index.js

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

package/dist/constants/GameProvider.js

@@ -36,6 +36,7 @@ import playtech from '../images/game-providers/PLAYTECH.png';
 import pragmaticplay from '../images/game-providers/PRAGMATIC_PLAY.png';
 import relaxgaming from '../images/game-providers/RELAX_GAMING.png';
 import rtg from '../images/game-providers/RTG.png';
+import rubyPlay from '../images/game-providers/RUBY_PLAY.png';
 import saba from '../images/game-providers/SABA.png';
 import sagaming from '../images/game-providers/SAGAMING.png';
 import spadegaming from '../images/game-providers/SPADEGAMING.png';
@@ -247,6 +248,12 @@ export const GAME_PROVIDER_DATA = {
         slug: 'relaxgaming',
         logo: relaxgaming,
     },
+    RUBYPLAY: {
+        id: 'RUBYPLAY',
+        name: 'Ruby Play',
+        slug: 'ruby-play',
+        logo: rubyPlay,
+    },
     RTG: {
         id: 'RTG',
         name: 'Realtime Gaming',

package/dist/icons/LinkBrokenIcon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function LinkBrokenIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/LinkBrokenIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LinkBrokenIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: _jsx("path", { d: "M8.5 15.5L15.5 8.49998M9 4V2M15 20V22M4 9H2M20 15H22M4.91421 4.91421L3.5 3.5M19.0858 19.0857L20.5 20.4999M12 17.6568L9.87871 19.7781C8.31662 21.3402 5.78396 21.3402 4.22186 19.7781C2.65976 18.216 2.65976 15.6833 4.22186 14.1212L6.34318 11.9999M17.6569 11.9999L19.7782 9.87859C21.3403 8.31649 21.3403 5.78383 19.7782 4.22174C18.2161 2.65964 15.6835 2.65964 14.1214 4.22174L12 6.34306", stroke: "#FEDF89", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}

package/dist/types/index.d.ts

@@ -157,7 +157,7 @@ export interface Announcement {
     dateTimeLastUpdated: string;
 }
 export type GameType = 'SLOTS' | 'SPORTS' | 'FISHING' | 'BINGO' | 'LIVE' | 'GAMES' | 'TABLE' | 'SPECIALTY' | 'NUMERICAL' | 'NUMERIC' | 'ARCADE';
-export type GameProvider = 'JILI' | 'JILI_BINGO' | 'PGSOFT' | 'FACHAI' | 'BTI' | 'DG' | 'PLAYTECH' | 'E2E' | 'ONEAPI_EVOLUTION' | 'EVOLUTION' | 'EVOLUTION_NETENT' | 'EVOLUTION_REDTIGER' | 'MEGABALL' | 'MEGA2SPIN' | 'DARWIN' | 'RTG' | 'DRBINGO' | 'HOLLYWOODTV' | 'CQ9' | 'JDB' | 'HABANERO' | 'SPINIX' | 'JOKER' | 'HACKSAW' | 'JDBGTF' | 'JDBSPRIBE' | 'MICROGAMING' | 'RELAXGAMING' | 'EVOPLAY' | 'BOOONGO' | 'BGAMING' | 'KINGMAKER' | 'KINGMIDAS' | 'YELLOWBAT' | 'ETENGJUE' | 'SABA' | 'PRAGMATICPLAY' | 'SPRIBE' | 'EZUGI' | 'ALIZE' | 'DIGITAIN' | 'BNG' | 'NO_LIMIT_CITY' | 'BIG_TIME_GAMING' | 'SAGAMING' | 'ONEAPI_SPADEGAMING' | 'JK8';
+export type GameProvider = 'JILI' | 'JILI_BINGO' | 'PGSOFT' | 'FACHAI' | 'BTI' | 'DG' | 'PLAYTECH' | 'E2E' | 'ONEAPI_EVOLUTION' | 'EVOLUTION' | 'EVOLUTION_NETENT' | 'EVOLUTION_REDTIGER' | 'MEGABALL' | 'MEGA2SPIN' | 'DARWIN' | 'RTG' | 'DRBINGO' | 'HOLLYWOODTV' | 'CQ9' | 'JDB' | 'HABANERO' | 'SPINIX' | 'JOKER' | 'HACKSAW' | 'JDBGTF' | 'JDBSPRIBE' | 'MICROGAMING' | 'RELAXGAMING' | 'EVOPLAY' | 'BOOONGO' | 'BGAMING' | 'KINGMAKER' | 'KINGMIDAS' | 'YELLOWBAT' | 'ETENGJUE' | 'SABA' | 'PRAGMATICPLAY' | 'SPRIBE' | 'EZUGI' | 'ALIZE' | 'DIGITAIN' | 'BNG' | 'NO_LIMIT_CITY' | 'BIG_TIME_GAMING' | 'SAGAMING' | 'ONEAPI_SPADEGAMING' | 'JK8' | 'RUBYPLAY';
 export type GameStatus = 'ACTIVE' | 'INACTIVE';
 export type GameTag = 'HOT' | 'hot' | 'NEW' | 'new' | 'TOP' | 'top' | 'POPULAR' | 'popular' | (string & {});
 export interface Game {