@opexa/portal-components 0.0.776 → 0.0.778

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        view: "qrCode" | "form";
+        view: "form" | "qrCode";
         status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
@@ -13,7 +13,7 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/Quests/JourneyQuest.js

@@ -122,17 +122,24 @@ function Rules(props) {
     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: "font-semibold text-lg text-text-primary-900", children: quest?.name || 'Quest' }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "max-h-[30vh] overflow-y-auto", children: quest?.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
                                                         __html: quest.description,
-                                                    }, className: 'mb-3' })) : (_jsx("p", { children: "Ready for a challenge? Complete them all and get amazing rewards!" })) }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-safe-area-inset-bottom h-8 bg-gradient-to-t from-bg-primary to-transparent" })] }), milestones.map((milestone) => (_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.description ? (_jsx(Prose, { className: props.className?.milestoneDescription, dangerouslySetInnerHTML: {
+                                                    }, className: "mb-3" })) : (_jsx("p", { children: "Ready for a challenge? Complete them all and get amazing rewards!" })) }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-safe-area-inset-bottom h-8 bg-gradient-to-t from-bg-primary to-transparent" })] }), milestones.map((milestone) => (_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.description ? (_jsx(Prose, { className: props.className?.milestoneDescription, dangerouslySetInnerHTML: {
                                                     __html: milestone.description,
-                                                } })) : milestone.bonus ? (_jsxs("p", { className: twMerge('ml-1', props.className?.milestoneDescription), children: [quest?.milestones?.find(m => m.id === milestone.id)?.type === 'REGISTRATION' &&
-                                                        `Register and win Php ${milestone.bonus} Bonus`, quest?.milestones?.find(m => m.id === milestone.id)?.type === 'ACCOUNT_VERIFICATION' &&
-                                                        `Verify your account and get Php ${milestone.bonus} Bonus`, quest?.milestones?.find(m => m.id === milestone.id)?.type === 'FIRST_DEPOSIT' &&
-                                                        `Make your first deposit and get Php ${milestone.bonus} Bonus`, quest?.milestones?.find(m => m.id === milestone.id)?.type === 'IOS_FIRST_LOGIN' &&
-                                                        `Login using iOS and get Php ${milestone.bonus} Bonus`, quest?.milestones?.find(m => m.id === milestone.id)?.type === 'ANDROID_FIRST_LOGIN' &&
+                                                } })) : milestone.bonus ? (_jsxs("p", { className: twMerge('ml-1', props.className?.milestoneDescription), children: [quest?.milestones?.find((m) => m.id === milestone.id)
+                                                        ?.type === 'REGISTRATION' &&
+                                                        `Register and win Php ${milestone.bonus} Bonus`, quest?.milestones?.find((m) => m.id === milestone.id)
+                                                        ?.type === 'ACCOUNT_VERIFICATION' &&
+                                                        `Verify your account and get Php ${milestone.bonus} Bonus`, quest?.milestones?.find((m) => m.id === milestone.id)
+                                                        ?.type === 'FIRST_DEPOSIT' &&
+                                                        `Make your first deposit and get Php ${milestone.bonus} Bonus`, quest?.milestones?.find((m) => m.id === milestone.id)
+                                                        ?.type === 'IOS_FIRST_LOGIN' &&
+                                                        `Login using iOS and get Php ${milestone.bonus} Bonus`, quest?.milestones?.find((m) => m.id === milestone.id)
+                                                        ?.type === 'ANDROID_FIRST_LOGIN' &&
                                                         `Login using Android and get Php ${milestone.bonus} Bonus`] })) : null, !milestone.isCompleted &&
-                                                (quest?.milestones?.find(m => m.id === milestone.id)?.type === 'ACCOUNT_VERIFICATION' ||
-                                                    quest?.milestones?.find(m => m.id === milestone.id)?.type === 'FIRST_DEPOSIT') && (_jsxs(Button, { size: "sm", onClick: () => {
-                                                    const milestoneType = quest?.milestones?.find(m => m.id === milestone.id)?.type;
+                                                (quest?.milestones?.find((m) => m.id === milestone.id)
+                                                    ?.type === 'ACCOUNT_VERIFICATION' ||
+                                                    quest?.milestones?.find((m) => m.id === milestone.id)
+                                                        ?.type === 'FIRST_DEPOSIT') && (_jsxs(Button, { size: "sm", onClick: () => {
+                                                    const milestoneType = quest?.milestones?.find((m) => m.id === milestone.id)?.type;
                                                     if (milestoneType === 'ACCOUNT_VERIFICATION') {
                                                         setOpen(false);
                                                         globalStore.kyc.setOpen(true);
@@ -142,12 +149,17 @@ function Rules(props) {
                                                         globalStore.depositWithdrawal.setOpen(true);
                                                         globalStore.depositWithdrawal.setTab('DEPOSIT');
                                                     }
-                                                }, "aria-label": `Complete ${milestone.label}`, children: [quest?.milestones?.find(m => m.id === milestone.id)?.type === 'ACCOUNT_VERIFICATION' ? (_jsx(FileCheck02Icon, { className: "size-5" })) : (_jsx(CoinsHandIcon, { className: "size-5" })), quest?.milestones?.find(m => m.id === milestone.id)?.type === 'FIRST_DEPOSIT'
+                                                }, "aria-label": `Complete ${milestone.label}`, children: [quest?.milestones?.find((m) => m.id === milestone.id)
+                                                        ?.type === 'ACCOUNT_VERIFICATION' ? (_jsx(FileCheck02Icon, { className: "size-5" })) : (_jsx(CoinsHandIcon, { className: "size-5" })), quest?.milestones?.find((m) => m.id === milestone.id)
+                                                        ?.type === 'FIRST_DEPOSIT'
                                                         ? 'Deposit'
                                                         : 'Verify Account'] })), !milestone.isCompleted &&
-                                                quest?.milestones?.find(m => m.id === milestone.id)?.type === '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 &&
-                                                quest?.milestones?.find(m => m.id === milestone.id)?.type === '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 &&
-                                                quest?.milestones?.find(m => m.id === milestone.id)?.type === 'CUSTOM_LINK' &&
+                                                quest?.milestones?.find((m) => m.id === milestone.id)
+                                                    ?.type === '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 &&
+                                                quest?.milestones?.find((m) => m.id === milestone.id)
+                                                    ?.type === '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 &&
+                                                quest?.milestones?.find((m) => m.id === milestone.id)
+                                                    ?.type === 'CUSTOM_LINK' &&
                                                 (() => {
                                                     const baseUrl = process.env.NEXT_PUBLIC_ENVIRONMENT === 'development'
                                                         ? 'https://api.trigger.development.opexa.io'
@@ -158,7 +170,7 @@ function Rules(props) {
 }
 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-border-secondary bg-bg-secondary-alt px-1.5 py-0.5 font-medium text-xs leading-tight', className?.bonus), children: ["+", formatNumber(bonus, {
+    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/components/Quests/Quests.client.js

@@ -6,6 +6,7 @@ import { Suspense, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 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';
@@ -15,14 +16,16 @@ import { NoQuests } from './NoQuests.js';
 import { OnboardingQuest } from './OnboardingQuest.js';
 import { QuestContext } from './QuestsContext.js';
 import { WageringQuest, } from './WageringQuest.js';
-const QUEST_COMPONENT_MAP = {
-    DAILY_CHECKIN: DailyCheckInQuest,
-    ONBOARDING: OnboardingQuest,
-    WAGERING: WageringQuest,
-    JOURNEY: JourneyQuest,
-};
+import { WageringQuestNext } from './WageringQuest__next.js';
 const TabDefinition = z.enum(['AVAILABLE', 'COMPLETED', 'FAILED']);
 export function Quests__client(props) {
+    const featureFlag = useFeatureFlag();
+    const QUEST_COMPONENT_MAP = {
+        DAILY_CHECKIN: DailyCheckInQuest,
+        ONBOARDING: OnboardingQuest,
+        WAGERING: featureFlag.enabled ? WageringQuestNext : WageringQuest,
+        JOURNEY: JourneyQuest,
+    };
     const { className, style, heading } = props;
     const classNames = isString(className) ? { root: className } : className;
     const [tab, setTab] = useState('AVAILABLE');

package/dist/components/Quests/WageringQuest__next.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 WageringQuestNext(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;

package/dist/components/Quests/WageringQuest__next.js

@@ -0,0 +1,125 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { GAME_PROVIDER_DATA } from '../../constants/index.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
+import { Flag05Icon } from '../../icons/Flag05Icon.js';
+import { Lock01Icon } from '../../icons/Lock01Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { Prose } from '../../ui/Prose/index.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function WageringQuestNext(props) {
+    const { className, showTurnoverDecimals = true } = props;
+    const classNames = isString(className) ? { root: className } : className;
+    const quest = useQuestContext();
+    const disclosure = useDisclosure();
+    const localeInfo = useLocaleInfo();
+    const { progressPercentage, turnover, targetTurnover, name, description, bonus, status, } = quest;
+    const currentStage = useMemo(() => {
+        return quest.stage === null ||
+            quest.stage === undefined ||
+            quest.stage === 0
+            ? (quest?.stage ?? 0) + 1
+            : quest.stage;
+    }, [quest.stage]);
+    const formatTurnover = (value) => {
+        if (showTurnoverDecimals) {
+            return value;
+        }
+        // Remove decimals and format as whole number
+        const numericValue = parseFloat(value);
+        return Math.floor(numericValue).toString();
+    };
+    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-start gap-2", children: [_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-md border border-[#9E165F] bg-[#4E0D30] px-2 py-1", children: [_jsx(Flag05Icon, { className: "size-4 text-[#EE46BC]" }), _jsxs("p", { className: "font-medium text-[#FAA7E0] text-sm", children: ["Stage ", currentStage] })] }), _jsx(RemainingTime, {})] }), _jsx("p", { className: "font-semibold text-xl", children: name }), _jsx(Prose, { className: "text-wrap font-normal text-sm text-text-secondary-700", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: "group flex items-center justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Progress ", parseDecimal(progressPercentage, 0).toFixed(0), "%"] }), _jsxs("p", { children: [formatTurnover(turnover), _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " ", localeInfo.currency.code] })] })] }), _jsx("div", { className: twMerge('h-2 w-full overflow-hidden rounded-full bg-bg-primary', classNames?.progressBarContainer), children: _jsx("div", { className: twMerge('h-full rounded-full bg-utility-brand-600 transition-all duration-300', classNames?.progressBar), style: { width: `${progressPercentage}%` } }) }), _jsxs("div", { className: "group flex items-center justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Stage ", currentStage, " of ", quest?.program.stages?.length] }), _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'), children: ["+", formatNumber(bonus, {
+                                                currency: localeInfo.currency.code,
+                                            }), ' ', "Bonus"] })] })] }), status === 'IN_PROGRESS' && (_jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: () => disclosure.setOpen(true), "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, gameProviderCarousel: props.gameProviderCarousel, gameProviders: Object.entries(quest.turnoverRequirementContributionPercentagePerGameProvider ?? [])
+                    .filter(([_, value]) => +value > 0)
+                    .map(([key]) => key) })] }));
+}
+function Rules(props) {
+    const quest = useQuestContext();
+    const featureFlag = useFeatureFlag();
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    const currentStage = useMemo(() => {
+        return quest.stage === null ||
+            quest.stage === undefined ||
+            quest.stage === 0
+            ? (quest?.stage ?? 0) + 1
+            : quest.stage;
+    }, [quest.stage]);
+    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-[400px] 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: quest.name }), _jsx("p", { className: "mb-4 font-normal text-sm text-text-tertiary-600", children: "Play and roll your way to rewards! Ready for a challenge? Complete them all and get amazing rewards!" })] }), (quest?.program.stages ?? []).map((stage, index) => currentStage >= index + 1 ? (_jsx(StageItemUnlocked, { stageDetails: stage, stageLevel: currentStage, index: index, writableBonus: quest.bonus, questCompleted: quest.status === 'COMPLETED' }, index)) : (_jsx(StageItemLocked, { index: index }, index))), ((!featureFlag.enabled &&
+                                (window.location.href.includes('blucky') ||
+                                    window.location.href.includes('powerplay') ||
+                                    window.location.href.includes('inplay'))) ||
+                                featureFlag.enabled) && (_jsx(GameProvidersCarousel, { gameProviders: props.gameProviders ?? [] })), _jsx("div", { className: "pt-6 pb-4", children: _jsx(Button, { onClick: () => setOpen(false), children: "Close" }) })] }) })] }) }));
+}
+export function GameProvidersCarousel({ ...props }) {
+    const context = useQuestContext();
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 2,
+    });
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const onNextButtonClick = useCallback(async () => {
+        emblaApi?.scrollNext();
+    }, [emblaApi]);
+    const onSelect = useCallback((emblaApi) => {
+        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
+        setNextBtnDisabled(!emblaApi?.canScrollNext());
+    }, []);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
+    const classNames = isString(context.className)
+        ? { root: context.className }
+        : (context.className ?? {});
+    return (_jsxs("div", { className: twMerge(classNames.root, gameProviders.length === 0 && 'hidden'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: context.heading ?? 'Game Providers' }), _jsx("div", { className: "grow" }), _jsx("div", { className: "flex items-center justify-center gap-xl", children: _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] }) })] }), _jsx("div", { ref: emblaRef, className: twMerge('relative mt-lg overflow-hidden', classNames.thumbnailRootContainer), children: _jsx("div", { className: twMerge('flex gap-1.5', classNames.thumbnailContainer), children: gameProviders.map((provider) => {
+                        const url = context.settings
+                            ? (context.settings
+                                .find(({ providers }) => providers.includes(provider.id))
+                                ?.url.replace(':slug', provider.slug)
+                                .replace(':id', provider?.id) ??
+                                `/providers/${provider.slug}`)
+                            : `/providers/${provider.slug}`;
+                        return (_jsx(Link, { href: url, className: twMerge('flex h-16 w-[110px] flex-shrink-0 items-center overflow-hidden rounded-md bg-brand-800', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: context.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full object-contain', classNames.thumbnailImage) }) }, provider.id));
+                    }) }) })] }));
+}
+function StageItemUnlocked({ stageLevel, stageDetails, index, writableBonus, questCompleted, }) {
+    const quest = useQuestContext();
+    const isCompleted = questCompleted || stageLevel > index + 1;
+    const progress = stageLevel > index + 1
+        ? 100
+        : Math.round(Number(quest.progressPercentage ?? 0));
+    return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl bg-bg-tertiary p-3", children: [_jsxs("div", { className: "flex items-center justify-between space-x-2", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", index + 1] }), isCompleted ? (_jsx("div", { className: "w-fit rounded-full border border-[#085D3A] bg-[#053321] px-2 py-0.5", children: _jsx("p", { className: "font-medium text-[#75E0A7] text-sm", children: "Completed" }) })) : (_jsx("div", { className: "w-fit rounded-full border border-[#065986] bg-[#062C41] px-2 py-0.5", children: _jsx("p", { className: "font-medium text-[#7CD4FD] text-sm", children: "Ongoing" }) }))] }), _jsxs("div", { className: "flex justify-between pt-[11px] pb-2", children: [_jsxs("p", { className: "text-sm", children: ["Progress: ", progress, "%"] }), _jsx("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'), children: stageLevel > index + 1
+                            ? `+ ${stageDetails.bonusAmount} Bonus`
+                            : `+ ${writableBonus} Bonus` })] }), _jsx("div", { className: twMerge('h-2 w-full overflow-hidden rounded-full bg-bg-primary'), children: _jsx("div", { className: twMerge('h-full rounded-full bg-utility-brand-600 transition-all duration-300'), style: { width: `${progress}%` } }) })] }));
+}
+function StageItemLocked({ index }) {
+    return (_jsxs("div", { className: "mb-4 flex items-center justify-between rounded-xl bg-bg-tertiary p-3", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", index + 1] }), _jsx("div", { className: "flex size-6 items-center justify-center rounded-full border border-utility-brand-200 bg-utility-brand-50", children: _jsx(Lock01Icon, { className: "size-3 stroke-2 font-medium text-utility-brand-500" }) })] }));
+}

package/dist/services/queries.d.ts

@@ -114,10 +114,10 @@ export declare const COMPLETE_ONBOARDING = "\n  mutation CompleteOnboarding($inp
 export declare const SKIP_ONBOARDING = "\n  mutation SkipOnboarding {\n    skipOnboarding\n  }\n";
 export declare const QUEST_PROGRAM_FRAGMENT = "\n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n";
 export declare const DAILY_CHECKIN_FRAGMENT = "\n  \n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n\n  fragment DailyCheckinQuestFragment on DailyCheckInQuest {\n    id\n    name\n    description\n    type\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    endDateTime\n    dateTimeCreated\n    lastCheckInDate\n    startDateTime\n    checkInStreak\n\n    thirdDayBonusAmount\n    seventhDayBonusAmount\n    sixthDayBonusAmount\n  }\n";
-export declare const WAGERING_FRAGMENT = "\n  fragment WageringQuestFragment on WageringQuest {\n    bonus\n    id\n    name\n    type\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    targetTurnover\n    endDateTime\n    dateTimeCreated\n    stage\n    dateTimeCompleted\n    turnoverRequirementContributionPercentagePerGameProvider\n  }\n";
+export declare const WAGERING_FRAGMENT = "\n  fragment WageringQuestFragment on WageringQuest {\n    bonus\n    id\n    name\n    type\n    description\n    program {\n      ...QuestProgramFragment\n      ...on WageringQuestProgram {\n        stages {\n            targetTurnover\n            bonusTurnoverRequirementMultiplier\n            bonusAmount\n        }\n      }\n    }\n    status\n    progressPercentage\n    turnover\n    targetTurnover\n    endDateTime\n    dateTimeCreated\n    stage\n    dateTimeCompleted\n    turnoverRequirementContributionPercentagePerGameProvider\n  }\n";
 export declare const JOURNEY_FRAGMENT = "\n  fragment JourneyQuestFragment on JourneyQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n    status\n    type\n    progressPercentage\n    bonus\n    bonusAwarded\n    dateTimeCreated\n    endDateTime\n    milestones {\n      id\n      type\n      name\n      bonusAmount\n      cleared\n      description\n    }\n  }\n";
 export declare const ONBOARDING_QUEST_FRAGMENT = "\n  fragment OnboardingQuestFragment on OnboardingQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    type\n    progressPercentage\n    bonus\n    endDateTime\n    dateTimeCreated\n    firstDepositCompleted\n    accountVerificationCompleted\n  }\n";
-export declare const AVAILABLE_QUESTS = "\n  \n  fragment WageringQuestFragment on WageringQuest {\n    bonus\n    id\n    name\n    type\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    targetTurnover\n    endDateTime\n    dateTimeCreated\n    stage\n    dateTimeCompleted\n    turnoverRequirementContributionPercentagePerGameProvider\n  }\n\n  \n  \n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n\n  fragment DailyCheckinQuestFragment on DailyCheckInQuest {\n    id\n    name\n    description\n    type\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    endDateTime\n    dateTimeCreated\n    lastCheckInDate\n    startDateTime\n    checkInStreak\n\n    thirdDayBonusAmount\n    seventhDayBonusAmount\n    sixthDayBonusAmount\n  }\n\n  \n  fragment OnboardingQuestFragment on OnboardingQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    type\n    progressPercentage\n    bonus\n    endDateTime\n    dateTimeCreated\n    firstDepositCompleted\n    accountVerificationCompleted\n  }\n\n  \n  fragment JourneyQuestFragment on JourneyQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n    status\n    type\n    progressPercentage\n    bonus\n    bonusAwarded\n    dateTimeCreated\n    endDateTime\n    milestones {\n      id\n      type\n      name\n      bonusAmount\n      cleared\n      description\n    }\n  }\n\n\n  query AvailableQuests {\n    availableQuests {\n      ... on Quest {\n        ... on WageringQuest {\n          ...WageringQuestFragment\n        }\n        ... on DailyCheckInQuest {\n          ...DailyCheckinQuestFragment\n        }\n        ... on OnboardingQuest {\n          ...OnboardingQuestFragment\n        }\n        ... on JourneyQuest {\n          ...JourneyQuestFragment\n        }\n      }\n    }\n  }\n";
+export declare const AVAILABLE_QUESTS = "\n  \n  fragment WageringQuestFragment on WageringQuest {\n    bonus\n    id\n    name\n    type\n    description\n    program {\n      ...QuestProgramFragment\n      ...on WageringQuestProgram {\n        stages {\n            targetTurnover\n            bonusTurnoverRequirementMultiplier\n            bonusAmount\n        }\n      }\n    }\n    status\n    progressPercentage\n    turnover\n    targetTurnover\n    endDateTime\n    dateTimeCreated\n    stage\n    dateTimeCompleted\n    turnoverRequirementContributionPercentagePerGameProvider\n  }\n\n  \n  \n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n\n  fragment DailyCheckinQuestFragment on DailyCheckInQuest {\n    id\n    name\n    description\n    type\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    endDateTime\n    dateTimeCreated\n    lastCheckInDate\n    startDateTime\n    checkInStreak\n\n    thirdDayBonusAmount\n    seventhDayBonusAmount\n    sixthDayBonusAmount\n  }\n\n  \n  fragment OnboardingQuestFragment on OnboardingQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    type\n    progressPercentage\n    bonus\n    endDateTime\n    dateTimeCreated\n    firstDepositCompleted\n    accountVerificationCompleted\n  }\n\n  \n  fragment JourneyQuestFragment on JourneyQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n    status\n    type\n    progressPercentage\n    bonus\n    bonusAwarded\n    dateTimeCreated\n    endDateTime\n    milestones {\n      id\n      type\n      name\n      bonusAmount\n      cleared\n      description\n    }\n  }\n\n\n  query AvailableQuests {\n    availableQuests {\n      ... on Quest {\n        ... on WageringQuest {\n          ...WageringQuestFragment\n        }\n        ... on DailyCheckInQuest {\n          ...DailyCheckinQuestFragment\n        }\n        ... on OnboardingQuest {\n          ...OnboardingQuestFragment\n        }\n        ... on JourneyQuest {\n          ...JourneyQuestFragment\n        }\n      }\n    }\n  }\n";
 export declare const AVAILABLE_QUEST_IDS = "\n  query AvailableQuestIds {\n    availableQuests {\n      ... on Node {\n        id\n      }\n    }\n  }\n";
 export declare const CHECK_IN_DAILY_QUEST = "\n  mutation checkInDailyCheckInQuest($input: CheckInDailyCheckInQuestInput!) {\n    checkInDailyCheckInQuest(input: $input)\n  }\n";
 export declare const TOP_WINS = "\n  query TopWins($first: Int) {\n    topWins(first: $first) {\n      id\n      game {\n        id\n        name\n        type\n        provider\n      }\n      member {\n        id\n        name\n      }\n      multiplier\n      payout\n    }\n  }\n";

package/dist/services/queries.js

@@ -2720,8 +2720,14 @@ export const WAGERING_FRAGMENT = /* GraphQL */ `
     description
     program {
       ...QuestProgramFragment
+      ...on WageringQuestProgram {
+        stages {
+            targetTurnover
+            bonusTurnoverRequirementMultiplier
+            bonusAmount
+        }
+      }
     }
-
     status
     progressPercentage
     turnover

package/dist/types/index.d.ts

@@ -716,11 +716,18 @@ export type OnboardingPlayerExperience = 'ROOKIE' | 'VETERAN';
 export type QuestType = 'WAGERING' | 'DAILY_CHECKIN' | 'ONBOARDING' | 'JOURNEY';
 export type QuestStatus = 'IN_PROGRESS' | 'COMPLETED' | 'FAILED';
 export type QuestProgramStatus = 'ACTIVE' | 'INACTIVE' | 'DELETED';
+export interface WageringQuestStageSettings {
+    targetTurnover: number;
+    bonusTurnoverRequirementMultiplier: number;
+    bonusAmount: number;
+    stages: WageringQuestStageSettings[];
+}
 export interface QuestProgram {
     type: QuestType;
     name: string;
     status: QuestProgramStatus;
     description: string;
+    stages: WageringQuestStageSettings[];
 }
 export type MemberStatus = 'ACTIVE' | 'BLACKLISTED' | 'SUSPENDED';
 export type JourneyQuestMilestoneType = 'REGISTRATION' | 'ACCOUNT_VERIFICATION' | 'FIRST_DEPOSIT' | 'IOS_FIRST_LOGIN' | 'ANDROID_FIRST_LOGIN' | 'LINK_FACEBOOK_ACCOUNT' | 'LINK_GOOGLE_ACCOUNT' | 'CUSTOM_LINK' | 'CUSTOM';
@@ -763,6 +770,7 @@ export interface Quest {
     firstDepositCompleted?: boolean;
     accountVerificationCompleted?: boolean;
     milestones?: JourneyQuestMilestone[];
+    stage?: number;
     dateTimeCompleted?: string;
     turnoverRequirementContributionPercentagePerGameProvider?: Partial<Record<GameProvider, string>>;
     stages?: WageringQuestStage[];