@opexa/portal-components 0.0.455 → 0.0.457

package/dist/components/Account/Account.lazy.d.ts

@@ -48,5 +48,7 @@ export interface AccountProps {
     accountSettingsEnabled?: boolean;
     /** @default true */
     notificationsEnabled?: boolean;
+    /** @default true */
+    shouldShowAccountStatus?: boolean;
 }
 export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Account/Account.lazy.js

@@ -45,6 +45,7 @@ const defaultAccountProps = {
     accountSettingsUrl: '/account',
     accountSettingsEnabled: true,
     notificationsEnabled: true,
+    shouldShowAccountStatus: true,
 };
 const recipe = accountRecipe();
 export function Account(props) {
@@ -80,6 +81,7 @@ export function Account(props) {
 }
 function Profile() {
     const accountQuery = useAccountQuery();
+    const accountProps = useAccountPropsContext();
     const account = accountQuery.data;
     const getVerificationColorScheme = (status) => {
         switch (status) {
@@ -91,7 +93,7 @@ function Profile() {
                 return 'danger';
         }
     };
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", account?.id] }), _jsxs(Badge.Root, { colorScheme: getVerificationColorScheme(account?.verificationStatus), className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: capitalize(account?.verificationStatus || '') })] })] })] })] }));
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", account?.id] }), accountProps.shouldShowAccountStatus && (_jsxs(Badge.Root, { colorScheme: getVerificationColorScheme(account?.verificationStatus), className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: capitalize(account?.verificationStatus || '') })] }))] })] })] }));
 }
 function Wallet({ classNames }) {
     const localeInfo = useLocaleInfo();

package/dist/components/AccountInfo/GoogleDisconnect.d.ts

@@ -0,0 +1,7 @@
+import { type UseDisclosureReturn } from '../../client/hooks/useDisclosure';
+interface GoogleDisconnectProps {
+    onConfirmAction?: (ctx: UseDisclosureReturn) => React.ReactNode;
+    children?: (ctx: UseDisclosureReturn) => React.ReactNode;
+}
+export declare function GoogleDisconnect(props: GoogleDisconnectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AccountInfo/GoogleDisconnect.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDisclosure, } from '../../client/hooks/useDisclosure.js';
+import { LinkBrokenIcon } from '../../icons/LinkBrokenIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function GoogleDisconnect(props) {
+    const disclosure = useDisclosure();
+    return (_jsxs(_Fragment, { children: [props.children?.(disclosure), _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: disclosure.open, onOpenChange: (details) => disclosure.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 min-h-auto max-w-[25rem] overflow-y-auto rounded-xl p-6", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(LinkBrokenIcon, {}) }), _jsx("h2", { className: "mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Google Account" }), _jsx("p", { className: "text-center text-sm text-text-tertiary-600 leading-2xl", children: "Are you sure you want to disconnect your Google account? This may affect your ability to log in or sync data." })] }), _jsx("div", { className: "pt-6", children: props.onConfirmAction?.(disclosure) })] }) })] }) })] }));
+}

package/dist/components/PortalProvider/CXDTokenObserver.js

@@ -1,30 +1,30 @@
 'use client';
 import { addHours } from 'date-fns';
 import { clamp } from 'lodash-es';
+import { useSearchParams } from 'next/navigation';
 import { useLocalStorage, useTimeout } from 'usehooks-ts';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 export function CXDTokenObserver() {
-    const { data: account } = useAccountQuery();
-    const accountCxd = {
-        cxd: account?.cellxpertDetails?.cxd,
-    };
-    const [cxd, setCxd, removeCxd] = useLocalStorage('cxd', null);
+    const searchParams = useSearchParams();
+    const cxdToken = searchParams.get('cxd');
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const [cxd, setCxd, removeCxd] = useLocalStorage('WebPortalCellxpertCxd', null);
     const now = new Date();
+    const shouldTimeoutRun = cxdToken && account;
     const removeCxdUntilInMs = cxd?.timestamp
         ? clamp(cxd.timestamp - now.getTime(), 0, Infinity)
         : 0;
     useTimeout(() => {
-        const isSame = cxd?.cxd === accountCxd.cxd;
+        const isSame = cxd?.cxd === cxdToken;
         if (!isSame) {
             const extendedTimestamp = addHours(new Date(), 6).getTime();
             setCxd({
-                cxd: accountCxd.cxd,
+                cxd: cxdToken,
                 timestamp: extendedTimestamp,
             });
         }
-    }, account ? 100 : null);
-    useTimeout(() => {
-        removeCxd();
-    }, account ? removeCxdUntilInMs : null);
+    }, shouldTimeoutRun ? 100 : null);
+    useTimeout(() => removeCxd(), shouldTimeoutRun ? removeCxdUntilInMs : null);
     return null;
 }

package/dist/components/Quests/MultiWageringQuest.js

@@ -1,4 +1,5 @@
 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';
@@ -26,17 +27,9 @@ export function MultiWageringQuest() {
                 progressPercentage: 0,
             };
         }
-        const transformedStages = quest.stages.map((stage) => ({
-            bonusAmount: stage.bonusAmount,
-            bonusTurnoverRequirementMultiplier: stage.bonusTurnoverRequirementMultiplier,
-            cleared: stage.cleared,
-            dateTimeCleared: stage.dateTimeCleared,
-            targetTurnover: stage.targetTurnover,
-        }));
-        const total = quest.stages.length;
         return {
-            stages: transformedStages,
-            totalStage: total,
+            stages: quest.stages,
+            totalStage: quest.stages.length,
             currentStage: currentStage === 0 ? 1 : currentStage,
             progressPercentage: +quest.progressPercentage,
         };
@@ -45,18 +38,25 @@ export function MultiWageringQuest() {
         disclosure.setOpen(true);
     }, [disclosure]);
     const localeInfo = useLocaleInfo();
-    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: [_jsxs("div", { className: "flex max-h-7.5 items-center justify-between", children: [_jsx(RemainingTime, { endOfDay: true }), quest.status === 'COMPLETED' && (_jsx(Badge.Root, { colorScheme: "success", size: "lg", round: false, children: _jsxs(Badge.Label, { children: ["Final Bonus:", ' ', formatNumber(quest.bonus, {
-                                                    currency: localeInfo.currency.code,
-                                                })] }) }))] }), _jsx("p", { className: "font-semibold text-xl", children: quest?.name || 'Journey Quest' }), _jsx("div", { className: "text-sm", dangerouslySetInnerHTML: {
+    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-sm", children: ["Progress: ", quest.progressPercentage, "%"] }), _jsxs("p", { className: "text-sm", children: [quest.turnover, _jsxs("span", { className: "text-[#667085]", 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-sm text-text-quarterary-brand", children: ["Stage ", currentStage, " of ", totalStage] }), _jsx(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: _jsxs(Badge.Label, { className: "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) => {
+                                } }), _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: false, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: "View Details" }) })] }), _jsx(Stages, { open: disclosure.open, onOpenChange: disclosure.setOpen, quest: quest, stages: stages })] }));
+                                                }), ' ', "Bonus"] }) })] })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: handleViewDetails, "aria-label": "View Details", disabled: false, 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({
@@ -82,7 +82,7 @@ function Stages(props) {
 }
 function QuestWageringStageUnlocked({ bonus, stage, 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("div", { className: "rounded-[6px] border border-border-secondary bg-bg-secondary-alt px-1.5 py-0.5", children: _jsxs("p", { className: "font-medium text-xs leading-tight", 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 ", 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, {
                                     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" }) }) })] }));
 }

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

@@ -1,6 +1,7 @@
 'use client';
 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 { twMerge } from 'tailwind-merge';
@@ -12,10 +13,12 @@ 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 { MultiWageringQuest } from './MultiWageringQuest.js';
 import { OnboardingQuest } from './OnboardingQuest.js';
 import { QuestContext } from './QuestsContext.js';
 import { WageringQuest, } from './WageringQuest.js';
+const MultiWageringQuest = dynamic(() => import('./MultiWageringQuest.js').then((mod) => mod.MultiWageringQuest), {
+    ssr: false,
+});
 const QUEST_COMPONENT_MAP = {
     DAILY_CHECKIN: DailyCheckInQuest,
     ONBOARDING: OnboardingQuest,

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/styles/theme.css

@@ -274,10 +274,15 @@
 
   --color-border-checkbox-primary: #373a41;
   --color-bg-progress-bar-primary: var(--color-bg-primary);
+
   --color-bg-lock: #161B26;
   --color-border-lock: #333741;
   --color-text-lock: #85888E;
 
+  --color-border-badge: #373A41;
+  --color-bg-badge: #13161B;
+  --color-text-badge: #CECFD2;
+
 
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);