@opexa/portal-components 0.0.757 → 0.0.759
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarousel.js +5 -1
- package/dist/components/Jackpots/JackpotsCarouselNext/JackpotsCarouselStageItem.js +1 -1
- package/dist/components/Jackpots/JackpotsList/JackpotsList.js +5 -1
- package/dist/components/Jackpots/JackpotsListNext/JackpotMultiStageDesktop.js +1 -1
- package/dist/components/Jackpots/JackpotsListNext/JackpotMultiStageMobile.js +1 -1
- package/dist/components/Jackpots/JackpotsListNext/JackpotsList.js +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import useEmblaCarousel from 'embla-carousel-react';
|
|
4
4
|
import { isString } from 'lodash-es';
|
|
5
5
|
import Link from 'next/link';
|
|
6
|
+
import { env } from 'process';
|
|
6
7
|
import { useCallback, useEffect, useState, } from 'react';
|
|
7
8
|
import { useIntersectionObserver } from 'usehooks-ts';
|
|
8
9
|
import { useFeatureFlag } from '../../../client/hooks/useFeatureFlag.js';
|
|
@@ -73,7 +74,10 @@ export function JackpotsCarousel({ style, className, ...props }) {
|
|
|
73
74
|
}
|
|
74
75
|
export function JackpotsCarousels(props) {
|
|
75
76
|
const future = useFeatureFlag();
|
|
76
|
-
if (
|
|
77
|
+
if (env.NEXT_PUBLIC_PLATFORM_CODE === 'W155' ||
|
|
78
|
+
env.NEXT_PUBLIC_PLATFORM_CODE === 'P702' ||
|
|
79
|
+
future.enabled) {
|
|
77
80
|
return _jsx(JackpotsCarouselNext, { ...props });
|
|
81
|
+
}
|
|
78
82
|
return _jsx(JackpotsCarousel, { ...props });
|
|
79
83
|
}
|
|
@@ -82,7 +82,7 @@ export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animat
|
|
|
82
82
|
const stage = jackpot.stage ?? 1;
|
|
83
83
|
const currentWinner = useMemo(() => jackpot.status === 'CLOSED'
|
|
84
84
|
? jackpot.stages?.[jackpot.stages.length - 1]
|
|
85
|
-
: jackpot.stages?.[
|
|
85
|
+
: jackpot.stages?.[stage - 2], [jackpot, stage]);
|
|
86
86
|
useEffect(() => {
|
|
87
87
|
if (isMobileDevice && mainTooltipOpen) {
|
|
88
88
|
const timeout = setTimeout(() => setMainTooltipOpen(false), 3000);
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { isString } from 'lodash-es';
|
|
4
4
|
import Image, {} from 'next/image';
|
|
5
|
+
import { env } from 'process';
|
|
5
6
|
import { useIntersectionObserver } from 'usehooks-ts';
|
|
6
7
|
import { useFeatureFlag } from '../../../client/hooks/useFeatureFlag.js';
|
|
7
8
|
import { useJackpotsQuery } from '../../../client/hooks/useJackpotsQuery.js';
|
|
@@ -38,7 +39,10 @@ export function JackpotsList(props) {
|
|
|
38
39
|
const classNames = isString(props.className)
|
|
39
40
|
? { root: props.className }
|
|
40
41
|
: (props.className ?? {});
|
|
41
|
-
if (
|
|
42
|
+
if (env.NEXT_PUBLIC_PLATFORM_CODE === 'W155' ||
|
|
43
|
+
env.NEXT_PUBLIC_PLATFORM_CODE === 'P702' ||
|
|
44
|
+
future.enabled) {
|
|
42
45
|
return _jsx(JackpotsListNext, { ...props });
|
|
46
|
+
}
|
|
43
47
|
return (_jsx(JackpotsListPropsContext, { value: props, children: _jsxs("div", { ref: ref, style: styles.root, className: classNames.root, children: [_jsx("div", { className: "mb-3 font-semibold text-lg lg:mb-4.5", children: props.heading ?? 'Jackpots' }), jackpots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: jackpots.map((jackpot, index) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemDesktop, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier }) }, index))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: jackpots.map((jackpot, index) => (_jsx(JackpotsListItemContext, { value: jackpot, children: _jsx(JackpotsListItemMobile, { style: styles.itemRoot, className: classNames, animate: props.animate, customJackpotChestImage: props.customJackpotChestImage, jackpotProfileShape: props.jackpotProfileShape, chestImagesByTier: props.chestImagesByTier }) }, index))) })] })) : (_jsxs("div", { className: "mt-5 flex h-fit flex-col items-center justify-center lg:mt-0 lg:h-62", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", className: "size-full h-29.5 w-29.5 mix-blend-luminosity lg:h-25 lg:w-25" }), _jsx("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: "No Jackpots" }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: ["No jackpots are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }) }));
|
|
44
48
|
}
|
|
@@ -60,7 +60,7 @@ export function JackpotMultiStageDesktop({ animate = true, customJackpotChestIma
|
|
|
60
60
|
const stage = jackpot.stage ?? 1;
|
|
61
61
|
const currentWinner = useMemo(() => jackpot.status === 'CLOSED'
|
|
62
62
|
? jackpot.stages?.[jackpot.stages.length - 1]
|
|
63
|
-
: jackpot.stages?.[
|
|
63
|
+
: jackpot.stages?.[stage - 2], [jackpot, stage]);
|
|
64
64
|
const ProfileIcon = () => jackpotProfileShape === 'oval' ? (_jsx("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: _jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }) })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" })] }));
|
|
65
65
|
const PayoutBadge = () => (_jsxs("div", { className: twMerge('flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', className?.latestPayoutBadgeRoot), children: [_jsx(Trophy01Icon, { className: twMerge('size-3.5 text-utility-brand-600', className?.latestPayoutBadgeIcon) }), "Winner"] }));
|
|
66
66
|
const ProgressBar = () => (_jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "font-semibold text-sm text-text-primary-900", children: ["Stage ", jackpot.stage, " Progress"] }), isCompleted ? 100 : currStageProgressPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: isCompleted ? 100 : currStageProgressPercentage, children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
|
|
@@ -77,7 +77,7 @@ export function JackpotMultiStageMobile({ animate = true, customJackpotChestImag
|
|
|
77
77
|
const stage = jackpot.stage ?? 1;
|
|
78
78
|
const currentWinner = useMemo(() => jackpot.status === 'CLOSED'
|
|
79
79
|
? jackpot.stages?.[jackpot.stages.length - 1]
|
|
80
|
-
: jackpot.stages?.[
|
|
80
|
+
: jackpot.stages?.[stage - 2], [jackpot, stage]);
|
|
81
81
|
const ProfileIcon = () => jackpotProfileShape === 'oval' ? (_jsx("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: _jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }) })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" })] }));
|
|
82
82
|
const PayoutBadge = () => (_jsxs("div", { className: twMerge('flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', className?.latestPayoutBadgeRoot), children: [_jsx(Trophy01Icon, { className: twMerge('size-3.5 text-utility-brand-600', className?.latestPayoutBadgeIcon) }), "Winner"] }));
|
|
83
83
|
const ProgressBar = () => (_jsxs("div", { className: "flex w-full flex-col items-center justify-between", children: [_jsxs("div", { className: "mb-[5px] flex w-full items-center justify-between", children: [_jsxs("div", { className: "font-semibold text-text-primary-900 text-xs", children: ["Stage ", jackpot.stage] }), isCompleted ? 100 : currStageProgressPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary", max: 100, value: isCompleted ? 100 : currStageProgressPercentage, "aria-valuemax": 100, "aria-label": "Stage progress", children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
|
|
@@ -12,7 +12,7 @@ import { JackpotsListItemDesktop } from './JackpotsListItemDesktop.js';
|
|
|
12
12
|
import { JackpotsListItemMobile } from './JackpotsListItemMobile.js';
|
|
13
13
|
export function JackpotsListNext(props) {
|
|
14
14
|
const jackpotsNextQuery = useJackpotsNextQuery({
|
|
15
|
-
first:
|
|
15
|
+
first: 25,
|
|
16
16
|
filter: {
|
|
17
17
|
deleted: {
|
|
18
18
|
equal: false,
|