@opexa/portal-components 0.0.633 → 0.0.634

package/dist/components/GameProviders/GameProvidersCarousel.d.ts

@@ -5,6 +5,8 @@ export interface ClassNameEntries {
     root?: string;
     thumbnailRoot?: string;
     thumbnailImage?: string;
+    thumbnailContainer?: string;
+    thumbnailRootContainer?: string;
 }
 export interface GameProvidersCarouselProps {
     layout: 'carousel';
@@ -28,5 +30,6 @@ export interface GameProvidersCarouselProps {
     gameProviderImages?: Partial<Record<GameProvider, ImageProps['src']>>;
     className?: string | ClassNameEntries;
     futureGameProviders?: GameProvider[];
+    hasSeeAll?: boolean;
 }
-export declare function GameProvidersCarousel(props: GameProvidersCarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function GameProvidersCarousel({ hasSeeAll, ...props }: GameProvidersCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GameProviders/GameProvidersCarousel.js

@@ -13,7 +13,7 @@ import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
 import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { callIfFn } from '../../utils/callIfFn.js';
-export function GameProvidersCarousel(props) {
+export function GameProvidersCarousel({ hasSeeAll = true, ...props }) {
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
         slidesToScroll: 3,
@@ -56,5 +56,5 @@ export function GameProvidersCarousel(props) {
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});
-    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: viewAllUrl, className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _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: "relative mt-lg overflow-hidden", children: _jsx("div", { className: "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", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), 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: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }) })] }));
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [hasSeeAll && (_jsxs(Link, { href: viewAllUrl, className: "flex gap-sm font-semibold text-button-tertiary-fg text-sm", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] })), _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) => (_jsx(Link, { href: viewGamesUrl(provider), 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: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }) })] }));
 }

package/dist/components/PortalProvider/PushNotifications.js

@@ -28,6 +28,10 @@ export const PushNotification = () => {
                 await registerFCMDevice({
                     type: platform === 'android' ? 'ANDROID' : 'IOS',
                     token: value,
+                }, {
+                    headers: {
+                        Authorization: `Bearer ${session.data.token}`,
+                    },
                 });
             }
         });

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

@@ -18,5 +18,6 @@ export interface QuestsProps {
     showTurnoverDecimals?: boolean;
     /** Optional styling hook for checkbox control inside specific quests */
     checkboxControlStyle?: CSSProperties;
+    gameProviderCarousel?: ReactNode;
 }
 export declare function Quests__client(props: QuestsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -61,7 +61,9 @@ export function Quests__client(props) {
                                             ? classNames?.journeyQuest
                                             : '', uncompletedIcon: props.uncompletedIcon, customComplete: quest.type === 'WAGERING'
                                     ? props.customComplete
-                                    : undefined, showTurnoverDecimals: props.showTurnoverDecimals, ...(quest.type === 'JOURNEY' || quest.type === 'ONBOARDING'
+                                    : undefined, ...(quest.type === 'WAGERING' && {
+                                    gameProviderCarousel: props.gameProviderCarousel,
+                                }), showTurnoverDecimals: props.showTurnoverDecimals, ...(quest.type === 'JOURNEY' || quest.type === 'ONBOARDING'
                                     ? {
                                         checkboxControlStyle: props.checkboxControlStyle,
                                     }

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface ClassNameEntries {
     root?: string;
     progressBarContainer?: string;
@@ -11,4 +11,5 @@ export declare function WageringQuest(props: {
     className?: string | ClassNameEntries;
     customComplete?: ReactNode;
     showTurnoverDecimals?: boolean;
+    gameProviderCarousel?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/WageringQuest.js

@@ -1,26 +1,18 @@
 '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';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { Prose } from '../../ui/Prose/index.js';
-import { callIfFn } from '../../utils/callIfFn.js';
 import { parseDecimal } from '../../utils/parseDecimal.js';
 import { useQuestContext } from './QuestsContext.js';
 import { RemainingTime } from './RemainingTime.js';
@@ -43,7 +35,7 @@ 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 })] }));
+                                    '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 })] }));
 }
 function Rules(props) {
     const quest = useQuestContext();
@@ -53,61 +45,5 @@ 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 && (_jsx(GameProvidersCarousel, { layout: "carousel", gameProviders: [
-                                    'JILI',
-                                    'PRAGMATICPLAY',
-                                    'HOLLYWOODTV',
-                                    'ALIZE',
-                                    'BTI',
-                                    'CQ9',
-                                    'DARWIN',
-                                    'DG',
-                                    'EVOLUTION_NETENT',
-                                    'EVOLUTION_REDTIGER',
-                                    'EZUGI',
-                                ] })), _jsx("div", { className: "pt-6 pb-4", children: _jsx(Button, { onClick: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
-}
-function GameProvidersCarousel(props) {
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-        align: 'start',
-        slidesToScroll: 3,
-        breakpoints: {
-            '(min-width: 1024px)': {
-                align: 'start',
-                slidesToScroll: 6,
-            },
-        },
-    });
-    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 viewGamesUrl = (data) => {
-        return props.viewGamesUrl
-            ? callIfFn(props.viewGamesUrl, data)
-                .replace(':id', data?.id)
-                .replace(':slug', data?.slug)
-            : `/providers/${data.slug}`;
-    };
-    const { enabled } = useFeatureFlag();
-    const combinedProviders = enabled
-        ? [...props.gameProviders, ...(props.futureGameProviders ?? [])]
-        : props.gameProviders;
-    const gameProviders = combinedProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
-    const classNames = isString(props.className)
-        ? { root: props.className }
-        : (props.className ?? {});
-    return (_jsxs("div", { className: "mt-6", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "font-semibold text-lg", children: props.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: "relative mt-lg overflow-hidden", children: _jsx("div", { className: "grid grid-flow-col grid-rows-1 gap-md", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('flex h-[3.5rem] w-[110px] items-center overflow-hidden rounded-md bg-brand-800', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ?? provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }) })] }));
+    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" }) })] }) })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@opexa/portal-components",
-	"version": "0.0.633",
+	"version": "0.0.634",
 	"exports": {
 		"./ui/*": {
 			"types": "./dist/ui/*/index.d.ts",