@opexa/portal-components 0.0.957 → 0.0.958

package/dist/lib/components/Quests/JourneyQuest.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isString } from 'lodash-es';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import { useCallback, useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/react/shallow';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { CoinsHandIcon } from '../../icons/CoinsHandIcon.js';
+import { FileCheck02Icon } from '../../icons/FileCheck02Icon.js';
+import { Link01Icon } from '../../icons/Link01Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/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 { getPercentage } from '../../utils/getPercentage.js';
+import { FacebookSignInTrigger } from '../SignIn/FacebookSignInTrigger.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+const GoogleSignInButton = dynamic(() => import('../SignIn/GoogleSignInTrigger.js').then((m) => m.GoogleSignInTrigger), {
+    ssr: false,
+    loading: () => null,
+});
+export function JourneyQuest(props) {
+    const disclosure = useDisclosure();
+    const quest = useQuestContext();
+    const featureFlag = useFeatureFlag();
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : props.className;
+    const { milestones, totalMilestones, currentMilestone, progressPercentage } = useMemo(() => {
+        if (!quest?.milestones) {
+            return {
+                milestones: [],
+                totalMilestones: 0,
+                currentMilestone: 0,
+                progressPercentage: 0,
+            };
+        }
+        const isBlucky = typeof window !== 'undefined' &&
+            window.location.href.includes('blucky');
+        const filteredMilestones = quest.milestones.filter((milestone) => {
+            if (!featureFlag.enabled && !isBlucky) {
+                return (milestone.type !== 'LINK_FACEBOOK_ACCOUNT' &&
+                    milestone.type !== 'LINK_GOOGLE_ACCOUNT');
+            }
+            return true;
+        });
+        const transformedMilestones = filteredMilestones.map((milestone) => ({
+            key: milestone.id,
+            label: milestone.name,
+            bonus: milestone.bonusAmount
+                ? parseFloat(milestone.bonusAmount)
+                : null,
+            isCompleted: milestone.cleared,
+            id: milestone.id,
+            description: milestone.description,
+        }));
+        const completedCount = filteredMilestones.filter((m) => m.cleared).length;
+        const total = filteredMilestones.length;
+        return {
+            milestones: transformedMilestones,
+            totalMilestones: total,
+            currentMilestone: completedCount,
+            progressPercentage: quest.progressPercentage
+                ? parseFloat(quest.progressPercentage)
+                : getPercentage(completedCount, total),
+        };
+    }, [quest, featureFlag]);
+    const progressValue = useMemo(() => {
+        return (progressPercentage || getPercentage(currentMilestone, totalMilestones));
+    }, [progressPercentage, currentMilestone, totalMilestones]);
+    const handleViewDetails = useCallback(() => {
+        disclosure.setOpen(true);
+    }, [disclosure]);
+    const localeInfo = useLocaleInfo();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('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', classNames?.root), 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, className: {
+                                            timeBadgeRoot: classNames?.timeBadgeRoot,
+                                            timeBadgeIcon: classNames?.timeBadgeIcon,
+                                            timeBadgeLabel: classNames?.timeBadgeLabel,
+                                            completedBadgeRoot: classNames?.completedBadgeRoot,
+                                            completedBadgeLabel: classNames?.completedBadgeLabel,
+                                            failedBadgeRoot: classNames?.failedBadgeRoot,
+                                            failedBadgeLabel: classNames?.failedBadgeLabel,
+                                        } }), quest.status === 'COMPLETED' && (_jsx(Badge.Root, { colorScheme: "success", size: "lg", round: false, className: classNames?.finalBonusBadgeRoot, children: _jsxs(Badge.Label, { className: classNames?.finalBonusBadgeLabel, children: ["Final Bonus:", ' ', formatNumber(quest.bonus, {
+                                                    currency: localeInfo.currency.code,
+                                                })] }) }))] }), _jsx("p", { className: twMerge('font-semibold text-xl', classNames?.title), children: quest?.name || 'Journey Quest' }), _jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, className: twMerge('h-2 rounded-full bg-bg-primary', classNames?.progressRoot), value: progressValue, children: _jsx(Progress.Track, { className: classNames?.progressTrack, children: _jsx(Progress.Range, { className: classNames?.progressRange }) }) }), _jsxs("p", { className: twMerge('text-text-quarterary-brand text-xs', classNames?.progressLabel), children: [currentMilestone, "/", totalMilestones] })] }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: milestones.map((milestone, index) => (_jsx(QuestMilestone, { label: milestone.label, bonus: milestone.bonus, isCompleted: milestone.isCompleted, checkboxControlStyle: props.checkboxControlStyle, className: {
+                                        name: classNames?.checkboxName,
+                                        bonus: classNames?.checkboxBonus,
+                                    } }, index))) })] }), _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(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen, quest: quest, milestones: milestones, className: {
+                    root: classNames?.dialogRoot,
+                    title: classNames?.dialogTitle,
+                    description: classNames?.dialogDescription,
+                    milestone: classNames?.dialogMilestone,
+                    milestoneName: classNames?.dialogMilestoneName,
+                    milestoneDescription: classNames?.dialogMilestoneDescription,
+                    completeBadge: classNames?.dialogCompleteBadge,
+                    uncompleteButton: classNames?.dialogUncompleteButton,
+                } })] }));
+}
+function Rules(props) {
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const context = useQuestContext();
+    const { verificationStatus } = context;
+    const { quest, milestones } = useMemo(() => {
+        return {
+            quest: props.quest,
+            milestones: props.milestones || [],
+        };
+    }, [props.quest, props.milestones]);
+    const allMilestonesCompleted = useMemo(() => {
+        if (!milestones.length)
+            return false;
+        return milestones.every((milestone) => milestone.isCompleted);
+    }, [milestones]);
+    const sessionQuery = useSessionQuery();
+    const session = sessionQuery.data;
+    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 p-4", children: _jsxs(Dialog.Content, { className: twMerge('mx-auto max-h-[80vh] min-h-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-10 md:scrollbar:h-2 md:scrollbar:w-2 md:scrollbar-thumb:rounded-full md:scrollbar-thumb:bg-bg-quaternary md:scrollbar-track:bg-transparent', props.className?.root), 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: twMerge('font-semibold text-lg text-text-primary-900', props.className?.title), children: quest?.name || 'Quest' }), _jsx("div", { className: "relative", children: _jsx("div", { className: "max-h-[30vh] overflow-y-auto", children: quest?.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
+                                                    __html: quest.description,
+                                                }, className: twMerge('mb-3', props.className?.description) })) : (_jsx("p", { className: twMerge(props.className?.description), children: "Ready for a challenge? Complete them all and get amazing rewards!" })) }) }), milestones.map((milestone) => {
+                                        const milestoneType = quest?.milestones?.find((m) => m.id === milestone.id)?.type;
+                                        const accountVerificationMessage = milestoneType === 'ACCOUNT_VERIFICATION'
+                                            ? verificationStatus === 'PENDING'
+                                                ? 'We’re verifying your details, You’ll be notified when your account is active'
+                                                : `Verify your account and get Php ${milestone.bonus} Bonus`
+                                            : null;
+                                        return (_jsxs("div", { className: twMerge('flex flex-col space-y-2.5 rounded-xl bg-bg-tertiary p-3', props.className?.milestone), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: twMerge('font-medium text-base text-text-primary-900', props.className?.milestoneName), children: milestone.label }), milestone.isCompleted && (_jsx("div", { className: twMerge('flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs', props.className?.completeBadge), children: "Complete" })), milestone.label === 'Account Verification' &&
+                                                            verificationStatus === 'PENDING' && (_jsx("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs", children: "Pending" }))] }), milestone.description ? (_jsx(Prose, { className: props.className?.milestoneDescription, dangerouslySetInnerHTML: {
+                                                        __html: milestone.description,
+                                                    } })) : milestone.bonus ? (_jsxs("p", { className: twMerge('ml-1', props.className?.milestoneDescription), children: [milestoneType === 'REGISTRATION' &&
+                                                            `Register and win Php ${milestone.bonus} Bonus`, accountVerificationMessage, milestoneType === 'FIRST_DEPOSIT' &&
+                                                            `Make your first deposit and get Php ${milestone.bonus} Bonus`, milestoneType === 'IOS_FIRST_LOGIN' &&
+                                                            `Login using iOS and get Php ${milestone.bonus} Bonus`, milestoneType === 'ANDROID_FIRST_LOGIN' &&
+                                                            `Login using Android and get Php ${milestone.bonus} Bonus`] })) : null, !milestone.isCompleted &&
+                                                    (milestoneType === 'ACCOUNT_VERIFICATION' ||
+                                                        milestoneType === 'FIRST_DEPOSIT') && (_jsxs(Button, { size: "sm", onClick: () => {
+                                                        if (milestoneType === 'ACCOUNT_VERIFICATION') {
+                                                            setOpen(false);
+                                                            globalStore.kyc.setOpen(true);
+                                                        }
+                                                        if (milestoneType === 'FIRST_DEPOSIT') {
+                                                            setOpen(false);
+                                                            globalStore.depositWithdrawal.setOpen(true);
+                                                            globalStore.depositWithdrawal.setTab('DEPOSIT');
+                                                        }
+                                                    }, "aria-label": `Complete ${milestone.label}`, disabled: milestoneType === 'ACCOUNT_VERIFICATION' &&
+                                                        verificationStatus === 'PENDING', children: [milestoneType === 'ACCOUNT_VERIFICATION' ? (_jsx(FileCheck02Icon, { className: "size-5" })) : (_jsx(CoinsHandIcon, { className: "size-5" })), milestoneType === 'FIRST_DEPOSIT'
+                                                            ? 'Deposit'
+                                                            : 'Verify Account'] })), !milestone.isCompleted &&
+                                                    milestoneType === 'LINK_FACEBOOK_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Facebook Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(FacebookSignInTrigger, { text: "Link Facebook Account", className: "!mt-0 flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })] })), !milestone.isCompleted &&
+                                                    milestoneType === 'LINK_GOOGLE_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Google Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(GoogleSignInButton, { text: "Link Google Account", className: "flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })] })), !milestone.isCompleted &&
+                                                    milestoneType === 'CUSTOM_LINK' &&
+                                                    (() => {
+                                                        const baseUrl = process.env.NEXT_PUBLIC_ENVIRONMENT === 'development'
+                                                            ? 'https://api.trigger.development.opexa.io'
+                                                            : 'https://api.trigger.opexa.io';
+                                                        const linkUrl = `${baseUrl}/v1/quests/${quest?.id}/milestones/${milestone.id}/link?token=${session?.token}`;
+                                                        return (_jsx(Button, { size: "sm", "aria-label": `Complete ${milestone.label}`, asChild: true, children: _jsxs(Link, { href: linkUrl, target: "_blank", rel: "noopener noreferrer", children: ["Click Here", _jsx(Link01Icon, { className: "size-5" })] }) }));
+                                                    })()] }, milestone.key));
+                                    }), quest?.bonus && (_jsx("div", { className: "flex h-full items-end", children: allMilestonesCompleted ? (_jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })) : (_jsx("div", { className: twMerge('w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center text-white', props.className?.uncompleteButton), children: _jsxs("p", { children: ["Complete target to", ' ', _jsxs("span", { className: "text-brand-400", children: ["\u20B1", quest?.bonus] }), ' ', "bonus!"] }) })) }))] })] }) })] }) }));
+}
+function QuestMilestone({ label, bonus, isCompleted = false, checkboxControlStyle, className, }) {
+    const localeInfo = useLocaleInfo();
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Checkbox.Root, { checked: isCompleted, children: [_jsx(Checkbox.Control, { className: "bg-transparent", style: checkboxControlStyle, children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: twMerge('font-medium text-sm leading-tight', className?.name), children: label }), _jsx(Checkbox.HiddenInput, {})] }), bonus && (_jsxs("div", { className: twMerge('rounded-[6px] border border-utility-brand-200 bg-utility-brand-50 px-1.5 py-0.5 font-medium text-utility-brand-700 text-xs leading-tight', className?.bonus), children: ["+", formatNumber(bonus, {
+                        currency: localeInfo.currency.code,
+                    }), ' ', "Bonus"] }))] }));
+}

package/dist/lib/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/lib/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/lib/components/Quests/OnboardingQuest.d.ts

@@ -0,0 +1,5 @@
+import type { CSSProperties } from 'react';
+export interface OnboardingQuestProps {
+    checkboxControlStyle?: CSSProperties;
+}
+export declare function OnboardingQuest(props: OnboardingQuestProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Quests/OnboardingQuest.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { noop } from 'lodash-es';
+import { useShallow } from 'zustand/shallow';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { CoinsHandIcon } from '../../icons/CoinsHandIcon.js';
+import { FileCheck02Icon } from '../../icons/FileCheck02Icon.js';
+import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function OnboardingQuest(props) {
+    const quest = useQuestContext();
+    const disclosure = useDisclosure();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const memberVerificationQuery = useMemberVerificationQuery();
+    const remainingTime = useRemainingTime(quest.endDateTime);
+    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-start justify-between", children: [_jsx(RemainingTime, {}), _jsx("button", { type: "button", className: "flex size-9 cursor-pointer items-center justify-center rounded-md border border-border-secondary bg-bg-primary", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", children: _jsx(InfoCircleIcon, { className: "size-5 text-text-disabled" }) })] }), _jsx("h2", { className: "font-semibold text-xl", children: quest.name }), _jsx("div", { className: "text-wrap font-normal text-sm text-text-secondary-700", dangerouslySetInnerHTML: { __html: quest.description } })] }), _jsxs("div", { className: "w-full grow space-y-2", children: [_jsxs(Checkbox.Root, { checked: quest.accountVerificationCompleted, onCheckedChange: noop, children: [_jsx(Checkbox.Control, { className: "bg-transparent", style: props.checkboxControlStyle, children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: "font-medium text-sm leading-tight", children: "Complete personal verification" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Checkbox.Root, { checked: quest.firstDepositCompleted, onCheckedChange: noop, children: [_jsx(Checkbox.Control, { className: "bg-transparent", style: props.checkboxControlStyle, children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: "font-medium text-sm leading-tight", children: "Make your first deposit" }), _jsx(Checkbox.HiddenInput, {})] })] }), _jsxs("div", { className: "flex gap-lg", children: [_jsxs(Button, { size: "sm", onClick: () => {
+                                    globalStore.kyc.setOpen(true);
+                                }, disabled: quest.accountVerificationCompleted ||
+                                    quest.status === 'COMPLETED' ||
+                                    quest.status === 'FAILED' ||
+                                    remainingTime.expired ||
+                                    memberVerificationQuery.data?.status === 'PENDING' ||
+                                    memberVerificationQuery.data?.status === 'VERIFIED', className: "disabled:bg-bg-primary disabled:text-text-disabled", children: [quest.accountVerificationCompleted ? (_jsx(CheckIcon, { className: "size-5" })) : (_jsx(FileCheck02Icon, { className: "size-5" })), "Verify"] }), _jsxs(Button, { size: "sm", onClick: () => {
+                                    globalStore.depositWithdrawal.setTab('DEPOSIT');
+                                    globalStore.depositWithdrawal.setOpen(true);
+                                }, disabled: quest.firstDepositCompleted ||
+                                    quest.status === 'COMPLETED' ||
+                                    quest.status === 'FAILED' ||
+                                    remainingTime.expired, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: [_jsx(CoinsHandIcon, { className: "size-5" }), "Deposit"] })] })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen })] }));
+}
+function Rules(props) {
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    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 min-h-auto max-w-[21.438rem] overflow-y-auto rounded-xl px-4 pt-5 pb-0", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: "Welcome Quest Rules" }), _jsxs("ol", { className: "group list-disc text-wrap pl-4 font-normal text-sm text-text-tertiary-600", children: [_jsx("li", { children: "Begin your quest whenever you're ready" }), _jsx("li", { children: "Tackle the tasks in any order you like" }), _jsx("li", { children: "Finish all tasks and we'll credit your reward automatically!" })] })] }), _jsx("div", { className: "pt-6 pb-4", children: _jsx(Button, { onClick: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
+}

package/dist/lib/components/Quests/Quests.client.d.ts

@@ -0,0 +1,42 @@
+import { type ImageProps } from 'next/image';
+import { type CSSProperties, type ReactNode } from 'react';
+import type { GameProvider } from '../../types';
+import type { ClassNameEntries as DailyCheckInQuestClassNameEntries } from './DailyCheckInQuest';
+import type { ClassNameEntries as JourneyQuestClassNameEntries } from './JourneyQuest';
+import type { WageringClassNameEntries, ClassNameEntries as WageringQuestClassNameEntries } from './WageringQuest';
+import type { ClassNameEntries as WageringQuestNextClassNameEntries } from './WageringQuest__next';
+export interface ClassNameEntries {
+    root?: string;
+    wageringQuest?: string | WageringQuestClassNameEntries;
+    wageringQuestNext?: string | WageringQuestNextClassNameEntries;
+    dailyCheckInQuest?: string | DailyCheckInQuestClassNameEntries;
+    journeyQuest?: string | JourneyQuestClassNameEntries;
+}
+export interface GameProviderSettings {
+    gameProviderLists?: GameProvider[];
+    settings?: {
+        providers: GameProvider[];
+        url: string;
+    }[];
+    className?: string | WageringClassNameEntries;
+    gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
+    heading?: string | ReactNode;
+}
+type Variant = 'crazywin' | 'default';
+export interface QuestsProps {
+    /** @default "Quests" */
+    heading?: string | ReactNode;
+    className?: string | ClassNameEntries;
+    style?: CSSProperties;
+    uncompletedIcon?: 'x' | 'minus';
+    customComplete?: ReactNode;
+    showTurnoverDecimals?: boolean;
+    /** Optional styling hook for checkbox control inside specific quests */
+    checkboxControlStyle?: CSSProperties;
+    gameProviderSettings?: GameProviderSettings;
+    /** Custom URL template for game provider links. Use :slug and :id as placeholders */
+    gameProviderViewPageUrl?: string;
+    variant?: Variant;
+}
+export declare function Quests__client(props: QuestsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,111 @@
+'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 { Suspense, useEffect, useState, } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useAvailableQuestsQuery } from '../../client/hooks/useAvailableQuestsQuery.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
+import closeChest from '../../images/close-chest.png';
+import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
+const CWDailyCheckInQuest = dynamic(() => import('./Crazywin/CWDailyCheckInQuest.js').then((mod) => mod.default), { ssr: false, loading: () => null });
+const CWJourneyQuest = dynamic(() => import('./Crazywin/CWJourneyQuest.js').then((mod) => mod.default), { ssr: false, loading: () => null });
+const CWOnboardingQuest = dynamic(() => import('./Crazywin/CWOnboardingQuest.js').then((mod) => mod.default), { ssr: false, loading: () => null });
+const CWWageringQuestNext = dynamic(() => import('./Crazywin/CWWageringQuestNext.js').then((mod) => mod.default), { ssr: false, loading: () => null });
+const DailyCheckInQuest = dynamic(() => import('./DailyCheckInQuest.js').then((mod) => mod.DailyCheckInQuest), { ssr: false, loading: () => null });
+const JourneyQuest = dynamic(() => import('./JourneyQuest.js').then((mod) => mod.JourneyQuest), { ssr: false, loading: () => null });
+const OnboardingQuest = dynamic(() => import('./OnboardingQuest.js').then((mod) => mod.OnboardingQuest), { ssr: false, loading: () => null });
+const WageringQuest = dynamic(() => import('./WageringQuest.js').then((mod) => mod.WageringQuest), { ssr: false, loading: () => null });
+const WageringQuestNext = dynamic(() => import('./WageringQuest__next.js').then((mod) => mod.WageringQuestNext), { ssr: false, loading: () => null });
+import { NoQuests } from './NoQuests.js';
+import { QuestContext } from './QuestsContext.js';
+const TabDefinition = z.enum(['AVAILABLE', 'COMPLETED', 'FAILED']);
+export function Quests__client(props) {
+    const featureFlag = useFeatureFlag();
+    const accountQuery = useAccountQuery();
+    const NEXT_WAGERING_SITE_MATCHES = ['blucky', 'powerplay', 'inplay', 'ofwin'];
+    const isNextWageringBrandSite = typeof window !== 'undefined' &&
+        NEXT_WAGERING_SITE_MATCHES.some((m) => window.location.href.includes(m));
+    const useNextWagering = featureFlag.enabled || isNextWageringBrandSite;
+    const [variant, setVariant] = useState('default');
+    const QUEST_COMPONENT_MAP = {
+        crazywin: {
+            DAILY_CHECKIN: CWDailyCheckInQuest,
+            ONBOARDING: CWOnboardingQuest,
+            WAGERING: CWWageringQuestNext,
+            JOURNEY: CWJourneyQuest,
+        },
+        default: {
+            DAILY_CHECKIN: DailyCheckInQuest,
+            ONBOARDING: OnboardingQuest,
+            WAGERING: useNextWagering ? WageringQuestNext : WageringQuest,
+            JOURNEY: JourneyQuest,
+        },
+    };
+    const { className, style, heading } = props;
+    const classNames = isString(className) ? { root: className } : className;
+    const [tab, setTab] = useState('AVAILABLE');
+    const questsQuery = useAvailableQuestsQuery({
+        refetchInterval: 7500,
+    });
+    const quests = !questsQuery.data?.length
+        ? []
+        : questsQuery.data.filter((quest) => {
+            if (tab === 'AVAILABLE') {
+                return quest.status === 'IN_PROGRESS';
+            }
+            else if (tab === 'COMPLETED') {
+                return quest.status === 'COMPLETED';
+            }
+            else if (tab === 'FAILED') {
+                return quest.status === 'FAILED';
+            }
+            return false;
+        });
+    useEffect(() => {
+        setVariant(() => {
+            switch (props.variant) {
+                case 'crazywin':
+                    return 'crazywin';
+                default:
+                    return 'default';
+            }
+        });
+    }, [props.variant]);
+    if (questsQuery.isLoading) {
+        return (_jsxs("div", { style: style, className: classNames?.root, children: [_jsx("h2", { className: "mb-3 font-semibold text-lg", children: heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
+    }
+    if (!questsQuery.data?.length) {
+        return (_jsxs("div", { style: style, className: classNames?.root, children: [_jsx("h2", { className: "mb-3 font-semibold text-lg", 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-4 font-semibold text-base text-text-primary-900", children: heading ?? 'Quests' }), _jsx("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: "No available quests. Please check back later!" })] })] }));
+    }
+    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.length > 0 ? (quests.map((quest) => {
+                    const Quest = QUEST_COMPONENT_MAP[variant][quest.type];
+                    return (_jsx(QuestContext, { value: {
+                            ...quest,
+                            ...props.gameProviderSettings,
+                            verificationStatus: accountQuery.data?.verificationStatus ?? 'UNVERIFIED',
+                        }, children: _jsx(Suspense, { children: _jsx(Quest, { className: quest.type === 'WAGERING'
+                                    ? featureFlag.enabled
+                                        ? classNames?.wageringQuestNext
+                                        : classNames?.wageringQuest
+                                    : quest.type === 'DAILY_CHECKIN'
+                                        ? classNames?.dailyCheckInQuest
+                                        : quest.type === 'JOURNEY'
+                                            ? classNames?.journeyQuest
+                                            : '', uncompletedIcon: props.uncompletedIcon, customComplete: quest.type === 'WAGERING'
+                                    ? props.customComplete
+                                    : undefined, showTurnoverDecimals: props.showTurnoverDecimals, gameProviderViewPageUrl: quest.type === 'WAGERING'
+                                    ? props.gameProviderViewPageUrl
+                                    : undefined, ...(quest.type === 'JOURNEY' || quest.type === 'ONBOARDING'
+                                    ? {
+                                        checkboxControlStyle: props.checkboxControlStyle,
+                                    }
+                                    : {}) }) }) }, quest.id));
+                })) : (_jsx(NoQuests, { heading: `${tab.toLowerCase()} Quests`, description: `You have no ${tab.toLowerCase()} quests yet.` })) })] }));
+}

package/dist/lib/components/Quests/Quests.d.ts

@@ -0,0 +1,3 @@
+import { type QuestsProps } from './Quests.client';
+export declare function Quests(props: QuestsProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { QuestsProps };

package/dist/lib/components/Quests/Quests.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchAvailableQuestsQuery } from '../../server/utils/prefetchAvailableQuestsQuery.js';
+import { Quests__client } from './Quests.client.js';
+export async function Quests(props) {
+    await prefetchAvailableQuestsQuery();
+    return _jsx(Quests__client, { ...props });
+}

package/dist/lib/components/Quests/QuestsContext.d.ts

@@ -0,0 +1,8 @@
+import type { MemberAccountVerificationStatus, Quest } from '../../types';
+import type { GameProviderSettings } from './Quests.client';
+export type QuestContextType = Quest & GameProviderSettings & Record<'verificationStatus', MemberAccountVerificationStatus>;
+export declare const QuestContext: (props: {
+    value: QuestContextType;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useQuestContext: () => QuestContextType;

package/dist/lib/components/Quests/QuestsContext.js

@@ -0,0 +1,2 @@
+import { createContext } from '../../client/utils/createContext.js';
+export const [QuestContext, useQuestContext] = createContext();

package/dist/lib/components/Quests/RemainingTime.d.ts

@@ -0,0 +1,14 @@
+interface RemainingTimeProps {
+    endOfDay?: boolean;
+    className?: {
+        completedBadgeRoot?: string;
+        completedBadgeLabel?: string;
+        failedBadgeRoot?: string;
+        failedBadgeLabel?: string;
+        timeBadgeRoot?: string;
+        timeBadgeIcon?: string;
+        timeBadgeLabel?: string;
+    };
+}
+export declare function RemainingTime({ endOfDay: useEndOfDay, className, }: RemainingTimeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/Quests/RemainingTime.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { endOfDay } from 'date-fns';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { ClockStopWatchIcon } from '../../icons/ClockStopWatchIcon.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { useQuestContext } from './QuestsContext.js';
+export function RemainingTime({ endOfDay: useEndOfDay = false, className, }) {
+    const quest = useQuestContext();
+    const targetDateTime = useEndOfDay
+        ? endOfDay(new Date(quest.endDateTime)).toISOString()
+        : quest.endDateTime;
+    const remainingTime = useRemainingTime(targetDateTime);
+    if (quest.status === 'COMPLETED') {
+        return (_jsx(Badge.Root, { size: "lg", colorScheme: "success", round: false, className: className?.completedBadgeRoot, children: _jsx(Badge.Label, { className: className?.completedBadgeLabel, children: "Completed" }) }));
+    }
+    if (quest.status === 'FAILED' || remainingTime.expired) {
+        return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, className: className?.failedBadgeRoot, children: _jsx(Badge.Label, { className: className?.failedBadgeLabel, children: "Failed" }) }));
+    }
+    return (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, className: className?.timeBadgeRoot, children: [_jsx(Badge.Icon, { className: className?.timeBadgeIcon, children: _jsx(ClockStopWatchIcon, {}) }), _jsx(Badge.Label, { className: className?.timeBadgeLabel, children: remainingTime.toString() })] }));
+}

package/dist/lib/components/Quests/WageringQuest.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import type { GameProvider } from '../../types';
+export interface ClassNameEntries {
+    root?: string;
+    progressBarContainer?: string;
+    progressBar?: string;
+    bonusText?: string;
+    bonusAmount?: string;
+    bonusContainer?: string;
+}
+export declare function WageringQuest(props: {
+    className?: string | ClassNameEntries;
+    customComplete?: ReactNode;
+    showTurnoverDecimals?: boolean;
+    gameProviderCarousel?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export interface WageringClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailImage?: string;
+    thumbnailContainer?: string;
+    thumbnailRootContainer?: string;
+}
+export interface GameProvidersCarouselProps {
+    gameProviders: GameProvider[];
+}
+export declare function GameProvidersCarousel({ ...props }: GameProvidersCarouselProps): import("react/jsx-runtime").JSX.Element;