@opexa/portal-components 0.0.640 → 0.0.641

package/dist/components/KYC/KYCVerificationStatus.lazy.js

@@ -19,18 +19,15 @@ export function KYCVerificationStatus() {
     const icons = status === 'PENDING' ? bellIcon : alertIcon;
     return (_jsx(Dialog.Root, { open: globalStore.kycVerificationStatus.open, onOpenChange: (details) => {
             globalStore.kycVerificationStatus.setOpen(details.open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsx(Dialog.Content, { className: "mx-auto h-fit w-[450px] overflow-y-auto rounded-lg bg-bg-primary", children: _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mb-3xl grid h-[200px] w-full place-items-center rounded-xl bg-radial from-40% from-button-primary-bg to-bg-brand-solid", children: _jsx(Image, { src: icons, alt: "icon", className: "w-60 object-contain", draggable: false, width: 120, height: 120 }) }), _jsxs("h1", { className: "font-semibold text-lg text-white", children: [status === 'PENDING' && 'Verification in Progress', status === 'REJECTED' && 'Verification Rejected', status === 'UNVERIFIED' ||
-                                            (status === 'CREATED' && 'Verification Required')] }), _jsxs("p", { className: "mb-4xl text-[#94969C] text-base", children: [status === 'PENDING' &&
+        }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsx(Dialog.Content, { className: "mx-auto h-fit w-[450px] overflow-y-auto rounded-lg bg-bg-primary", children: _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mb-3xl grid h-[200px] w-full place-items-center rounded-xl bg-radial from-40% from-button-primary-bg to-bg-brand-solid", children: _jsx(Image, { src: icons, alt: "icon", className: "w-60 object-contain", draggable: false, width: 120, height: 120 }) }), _jsxs("h1", { className: "font-semibold text-lg text-white", children: [status === 'PENDING' && 'Verification in Progress', status === 'REJECTED' && 'Verification Rejected', status === 'UNVERIFIED' && 'Verification Required'] }), _jsxs("p", { className: "mb-4xl text-[#94969C] text-base", children: [status === 'PENDING' &&
                                             `Your account verification is still under review. Please wait
 								until it's approved before you can continue playing or
 								depositing.`, status === 'REJECTED' &&
-                                            'Your account verification was not approved. Please resubmit your verification to regain full access.', status === 'UNVERIFIED' ||
-                                            (status === 'CREATED' &&
-                                                'Your account is not yet verified. Please complete the verification process to continue playing or depositing.')] }), _jsxs(Button, { variant: "solid", className: twMerge('mb-2 w-full', status === 'PENDING' && 'hidden'), onClick: () => {
+                                            'Your account verification was not approved. Please resubmit your verification to regain full access.', status === 'UNVERIFIED' &&
+                                            'Your account is not yet verified. Please complete the verification process to continue playing or depositing.'] }), _jsxs(Button, { variant: "solid", className: twMerge('mb-2 w-full', status === 'PENDING' && 'hidden'), onClick: () => {
                                         globalStore.kycVerificationStatus.setOpen(false);
                                         globalStore.kyc.setOpen(true);
-                                    }, children: [status === 'REJECTED' && 'Resubmit Verification', status === 'UNVERIFIED' ||
-                                            (status === 'CREATED' && 'Verify Now')] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                    }, children: [status === 'REJECTED' && 'Resubmit Verification', status === 'UNVERIFIED' && 'Verify Now'] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
                                         globalStore.kycVerificationStatus.setOpen(false);
                                     }, children: "Close" })] }) }) })] }) }));
 }

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

@@ -1,13 +1,24 @@
+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 ClassNameEntries as WageringQuestClassNameEntries } from './WageringQuest';
+import { type WageringClassNameEntries, type ClassNameEntries as WageringQuestClassNameEntries } from './WageringQuest';
 export interface ClassNameEntries {
     root?: string;
     wageringQuest?: string | WageringQuestClassNameEntries;
     dailyCheckInQuest?: string | DailyCheckInQuestClassNameEntries;
     journeyQuest?: string | JourneyQuestClassNameEntries;
 }
+export interface GameProviderSettings {
+    settings?: {
+        providers: GameProvider[];
+        url: string;
+    }[];
+    className?: string | WageringClassNameEntries;
+    gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
+    heading?: string | ReactNode;
+}
 export interface QuestsProps {
     /** @default "Quests" */
     heading?: string | ReactNode;
@@ -18,6 +29,6 @@ export interface QuestsProps {
     showTurnoverDecimals?: boolean;
     /** Optional styling hook for checkbox control inside specific quests */
     checkboxControlStyle?: CSSProperties;
-    gameProviderCarousel?: ReactNode;
+    gameProviderSettings?: GameProviderSettings;
 }
 export declare function Quests__client(props: QuestsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isString } from 'lodash-es';
-import Image from 'next/image';
+import Image, {} from 'next/image';
 import { Suspense, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
@@ -53,7 +53,10 @@ export function Quests__client(props) {
                     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[quest.type];
-                    return (_jsx(QuestContext, { value: quest, children: _jsx(Suspense, { children: _jsx(Quest, { className: quest.type === 'WAGERING'
+                    return (_jsx(QuestContext, { value: {
+                            ...quest,
+                            ...props.gameProviderSettings,
+                        }, children: _jsx(Suspense, { children: _jsx(Quest, { className: quest.type === 'WAGERING'
                                     ? classNames?.wageringQuest
                                     : quest.type === 'DAILY_CHECKIN'
                                         ? classNames?.dailyCheckInQuest
@@ -61,9 +64,7 @@ export function Quests__client(props) {
                                             ? classNames?.journeyQuest
                                             : '', uncompletedIcon: props.uncompletedIcon, customComplete: quest.type === 'WAGERING'
                                     ? props.customComplete
-                                    : undefined, ...(quest.type === 'WAGERING' && {
-                                    gameProviderCarousel: props.gameProviderCarousel,
-                                }), showTurnoverDecimals: props.showTurnoverDecimals, ...(quest.type === 'JOURNEY' || quest.type === 'ONBOARDING'
+                                    : undefined, showTurnoverDecimals: props.showTurnoverDecimals, ...(quest.type === 'JOURNEY' || quest.type === 'ONBOARDING'
                                     ? {
                                         checkboxControlStyle: props.checkboxControlStyle,
                                     }

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

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

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { GameProvider } from '../../types';
 export interface ClassNameEntries {
     root?: string;
     progressBarContainer?: string;
@@ -13,3 +14,14 @@ export declare function WageringQuest(props: {
     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.js

@@ -1,12 +1,19 @@
 '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, 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 { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { GAME_PROVIDER_DATA } from '../../constants/index.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
 import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Button } from '../../ui/Button/index.js';
@@ -35,7 +42,9 @@ export function WageringQuest(props) {
     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 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("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(2), "%"] }), _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}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _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', classNames?.bonusContainer), children: status === 'COMPLETED' && customComplete ? (_jsx("div", { className: twMerge(classNames?.bonusText), children: customComplete })) : (_jsxs("p", { className: twMerge((remainingTime.expired ||
                                     status === 'COMPLETED' ||
                                     status === 'FAILED') &&
-                                    'opacity-50 grayscale', classNames?.bonusText), children: ["Complete to get", ' ', _jsxs("span", { className: twMerge('text-brand-400', classNames?.bonusAmount), children: ["\u20B1", bonus] }), ' ', "bonus!"] })) }) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen, gameProviderCarousel: props.gameProviderCarousel })] }));
+                                    'opacity-50 grayscale', classNames?.bonusText), children: ["Complete to get", ' ', _jsxs("span", { className: twMerge('text-brand-400', classNames?.bonusAmount), children: ["\u20B1", bonus] }), ' ', "bonus!"] })) }) })] }), _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();
@@ -45,5 +54,48 @@ function Rules(props) {
         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: quest.name }), _jsxs("ol", { className: "group list-disc text-wrap pl-4 font-normal text-sm text-text-tertiary-600", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), featureFlag.enabled && props?.gameProviderCarousel, _jsx("div", { className: "pt-6 pb-4", children: _jsx(Button, { onClick: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
+    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: quest.name }), _jsxs("ol", { className: "group list-disc text-wrap pl-4 font-normal text-sm text-text-tertiary-600", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), featureFlag.enabled && (_jsx(GameProvidersCarousel, { gameProviders: props.gameProviders ?? [] })), _jsx("div", { className: "pt-6 pb-4", children: _jsx(Button, { onClick: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
+}
+export function GameProvidersCarousel({ ...props }) {
+    const context = useQuestContext();
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 3,
+        breakpoints: {
+            '(min-width: 1024px)': {
+                align: 'start',
+                slidesToScroll: 3,
+            },
+        },
+    });
+    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 ?? '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('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md', 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-full w-full items-center overflow-hidden rounded-md bg-brand-800 lg:h-[5.75rem]', 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', classNames.thumbnailImage) }) }, provider.id));
+                    }) }) })] }));
 }

package/dist/handlers/postToken.d.ts

@@ -1,16 +1,16 @@
 import { type NextRequest, NextResponse } from 'next/server';
 export declare function postToken(request: NextRequest): Promise<NextResponse<{
+    ok: true;
+    data?: never;
+} | {
     ok: false;
     message: string;
     __error?: unknown;
-} | {
-    ok: true;
-    data: string;
 }> | NextResponse<{
-    ok: true;
-    data?: never;
-} | {
     ok: false;
     message: string;
     __error?: unknown;
+} | {
+    ok: true;
+    data: string;
 }>>;

package/dist/types/index.d.ts

@@ -755,6 +755,8 @@ export interface Quest {
     accountVerificationCompleted?: boolean;
     milestones?: JourneyQuestMilestone[];
     dateTimeCompleted?: string;
+    turnoverRequirementContributionPercentagePerGameProvider?: Partial<Record<GameProvider, string>>;
+    stages?: WageringQuestStage[];
 }
 interface TopWinGame {
     id: string;