@opexa/portal-components 0.0.732 → 0.0.734
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/JackpotsCarouselNext/JackpotsCarouselStageItem.d.ts +1 -1
- package/dist/components/Jackpots/JackpotsCarouselNext/JackpotsCarouselStageItem.js +4 -4
- package/dist/components/Jackpots/JackpotsList/JackpotsList.js +0 -1
- package/dist/components/Jackpots/JackpotsListNext/JackpotMultiStageDesktop.js +4 -2
- package/dist/components/Jackpots/JackpotsListNext/JackpotMultiStageMobile.js +2 -2
- package/dist/components/KYC/KYCDefault/KYCVerificationStatus.lazy.js +2 -0
- package/package.json +1 -1
|
@@ -57,4 +57,4 @@ export interface JackpotsCarouselItemProps {
|
|
|
57
57
|
};
|
|
58
58
|
jackpotProfileShape?: 'oval' | 'star';
|
|
59
59
|
}
|
|
60
|
-
export declare function JackpotsCarouselStageItem({ style, className, viewAllUrl, animate, customJackpotStageChest, jackpotProfileShape, }: JackpotsCarouselItemProps): import("react/jsx-runtime").JSX.Element | null;
|
|
60
|
+
export declare function JackpotsCarouselStageItem({ style, className, viewAllUrl, animate, customJackpotStageChest, medalImage, jackpotProfileShape, }: JackpotsCarouselItemProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -26,7 +26,7 @@ import { mask } from '../../../utils/mask.js';
|
|
|
26
26
|
import { parseDecimal } from '../../../utils/parseDecimal.js';
|
|
27
27
|
import styles from '../Jackpots.module.css';
|
|
28
28
|
import { useJackpotsCarouselItemContext } from './JackpotsCarouselContext.js';
|
|
29
|
-
export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animate = true, customJackpotStageChest, jackpotProfileShape = 'oval', }) {
|
|
29
|
+
export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animate = true, customJackpotStageChest, medalImage, jackpotProfileShape = 'oval', }) {
|
|
30
30
|
const [ref, inView] = useIntersectionObserver({
|
|
31
31
|
threshold: 0.75,
|
|
32
32
|
});
|
|
@@ -90,7 +90,7 @@ export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animat
|
|
|
90
90
|
const [mainTooltipOpen, setMainTooltipOpen] = useState(false);
|
|
91
91
|
const [minLimitTooltipOpen, setMinLimitTooltipOpen] = useState(false);
|
|
92
92
|
const isMobileDevice = useMemo(() => isMobile(), []);
|
|
93
|
-
const target = parseFloat(jackpot.stages?.[jackpot.stage]?.targetTurnover ?? '0');
|
|
93
|
+
const target = parseFloat(jackpot.stages?.[jackpot.stage - 1]?.targetTurnover ?? '0');
|
|
94
94
|
const total = parseFloat(jackpot.totalTurnover ?? '0');
|
|
95
95
|
const currStageProgressPercentage = getPercentage(total, target);
|
|
96
96
|
useEffect(() => {
|
|
@@ -118,7 +118,7 @@ export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animat
|
|
|
118
118
|
currency: localeInfo.currency.code,
|
|
119
119
|
minDecimalPlaces: 2,
|
|
120
120
|
maxDecimalPlaces: 2,
|
|
121
|
-
}) }), _jsxs("div", { className: twMerge('mt-[0.625rem] flex w-fit items-center gap-1 rounded-full border border-[#932F19] bg-[#511C10] py-[0.125rem] pr-[0.5rem] pl-[0.375rem] text-[#F7B27A] text-xs', className?.jackpotTurnoverRoot), children: [_jsx(Target04Icon, { className: twMerge('size-3.5 text-[#EF6820]', className?.jackpotTurnoverIcon) }), _jsxs("p", { children: ["Turnover Target:", ' ', formatNumber(jackpot.stages?.[jackpot.stage]?.targetTurnover, {
|
|
121
|
+
}) }), _jsxs("div", { className: twMerge('mt-[0.625rem] flex w-fit items-center gap-1 rounded-full border border-[#932F19] bg-[#511C10] py-[0.125rem] pr-[0.5rem] pl-[0.375rem] text-[#F7B27A] text-xs', className?.jackpotTurnoverRoot), children: [_jsx(Target04Icon, { className: twMerge('size-3.5 text-[#EF6820]', className?.jackpotTurnoverIcon) }), _jsxs("p", { children: ["Turnover Target:", ' ', formatNumber(jackpot.stages?.[jackpot.stage - 1]?.targetTurnover, {
|
|
122
122
|
currency: localeInfo.currency.code,
|
|
123
123
|
minDecimalPlaces: 2,
|
|
124
124
|
maxDecimalPlaces: 2,
|
|
@@ -128,7 +128,7 @@ export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animat
|
|
|
128
128
|
currency: localeInfo.currency.code,
|
|
129
129
|
minDecimalPlaces: 2,
|
|
130
130
|
maxDecimalPlaces: 2,
|
|
131
|
-
}) })] })] })) : (_jsxs(
|
|
131
|
+
}) })] })] })) : (_jsxs("div", { className: twMerge('flex flex-row gap-[8.5px]', medalImage?.wrapper), children: [_jsx(Image, { width: 66, height: 87, src: medalImage?.image || firstPlace, alt: "firstPlace", className: "size-full h-auto w-[4.125rem] mix-blend-luminosity" }), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: "No winners yet" }), _jsx("div", { className: "text-text-secondary-700 text-xs", children: "You could be the first to win the jackpot!" })] })] })) })] }) }) }), _jsxs("div", { className: "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"] }), currStageProgressPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: currStageProgressPercentage, "aria-valuenow": currStageProgressPercentage, "aria-valuemax": 100, "aria-label": "Jackpot 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 }) }) }) })] })] }), _jsxs("div", { className: twMerge('z-1 hidden flex-1 space-y-4 lg:block', className?.recentPayoutsRoot), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Image, { width: 24, height: 24, src: leaderboard, alt: "leaderboardIcon", className: "size-full h-auto w-6" }), _jsx("div", { className: "font-semibold text-lg text-text-primary-900", children: "Stages" })] }), _jsxs(Link, { className: "flex font-semibold text-button-tertiary-fg text-sm", href: viewAllUrl ?? '/jackpots', children: ["See details", _jsx(ChevronRightIcon, { className: "size-5" })] })] }), _jsx(OverallProgressBar, {}), _jsx("div", { className: twMerge('max-h-[17rem] overflow-y-scroll', styles.scrollArea), children: _jsx("div", { className: "overflow-hidden rounded-xl border-gray-200", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsx("tr", { className: twMerge('h-8 whitespace-nowrap bg-bg-secondary text-left font-medium text-text-tertiary-600 text-xs', className?.recentPayoutsTableHeadRow), children: [
|
|
132
132
|
'Stage',
|
|
133
133
|
'Player',
|
|
134
134
|
'Turnover Target',
|
|
@@ -38,7 +38,6 @@ export function JackpotsList(props) {
|
|
|
38
38
|
const classNames = isString(props.className)
|
|
39
39
|
? { root: props.className }
|
|
40
40
|
: (props.className ?? {});
|
|
41
|
-
console.log('future', future.enabled);
|
|
42
41
|
if (future.enabled)
|
|
43
42
|
return _jsx(JackpotsListNext, { ...props });
|
|
44
43
|
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!"] })] }))] }) }));
|
|
@@ -48,13 +48,15 @@ export function JackpotMultiStageDesktop({ animate = true, customJackpotChestIma
|
|
|
48
48
|
};
|
|
49
49
|
};
|
|
50
50
|
const chestImages = getChestImages(jackpot.stage ?? 1);
|
|
51
|
-
const target = parseFloat(jackpot.stages?.[jackpot.stage]?.targetTurnover ?? '0');
|
|
51
|
+
const target = parseFloat(jackpot.stages?.[jackpot.stage - 1]?.targetTurnover ?? '0');
|
|
52
52
|
const total = parseFloat(jackpot.totalTurnover ?? '0');
|
|
53
53
|
const currStageProgressPercentage = getPercentage(total, target);
|
|
54
54
|
const totalTurnover = jackpot.totalTurnover;
|
|
55
55
|
const overallTurnover = parseDecimal(jackpot.totalTurnover, 0) /
|
|
56
56
|
(jackpot.stages?.reduce((acc, stage) => acc + parseFloat(stage.targetTurnover ?? '0'), 0) ?? 0);
|
|
57
57
|
const overallPercentage = getPercentage(totalTurnover, overallTurnover);
|
|
58
|
+
console.log(jackpot.stages, 'jackpot.stages');
|
|
59
|
+
console.log(jackpot.stage, 'jackpot.stage');
|
|
58
60
|
const ProfileIcon = () => jackpotProfileShape === 'oval' ? (_jsxs("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" }), _jsx("div", { className: twMerge('absolute right-0 bottom-safe-area-inset-bottom flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 font-bold text-brand-950 text-xs', className?.latestPayoutRankRoot), children: "1st" })] })) : (_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" }), _jsx("div", { className: twMerge('-right-0 absolute bottom-safe-area-inset-bottom z-20 flex h-7 w-7 items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-yellow-400 text-center font-bold text-brand-950 text-xs', className?.latestPayoutRankRoot), children: "1st" })] }));
|
|
59
61
|
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"] }));
|
|
60
62
|
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"] }), currStageProgressPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: 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 }) }) }) })] }));
|
|
@@ -86,7 +88,7 @@ export function JackpotMultiStageDesktop({ animate = true, customJackpotChestIma
|
|
|
86
88
|
currency: localeInfo.currency.code,
|
|
87
89
|
minDecimalPlaces: 2,
|
|
88
90
|
maxDecimalPlaces: 2,
|
|
89
|
-
}) }), _jsxs("div", { className: twMerge('mt-[1.0625rem] flex w-fit items-center gap-1 rounded-full border border-[#932F19] bg-[#511C10] py-[0.125rem] pr-[0.5rem] pl-[0.375rem] text-[#F7B27A] text-xs', className?.jackpotTurnoverRoot), children: [_jsx(Target04Icon, { className: twMerge('size-3.5 text-[#EF6820]', className?.jackpotTurnoverIcon) }), _jsxs("p", { children: ["Turnover Target:", ' ', formatNumber(jackpot.stages?.[jackpot.stage]?.targetTurnover, {
|
|
91
|
+
}) }), _jsxs("div", { className: twMerge('mt-[1.0625rem] flex w-fit items-center gap-1 rounded-full border border-[#932F19] bg-[#511C10] py-[0.125rem] pr-[0.5rem] pl-[0.375rem] text-[#F7B27A] text-xs', className?.jackpotTurnoverRoot), children: [_jsx(Target04Icon, { className: twMerge('size-3.5 text-[#EF6820]', className?.jackpotTurnoverIcon) }), _jsxs("p", { children: ["Turnover Target:", ' ', formatNumber(jackpot.stages?.[jackpot.stage - 1]?.targetTurnover, {
|
|
90
92
|
currency: localeInfo.currency.code,
|
|
91
93
|
minDecimalPlaces: 2,
|
|
92
94
|
maxDecimalPlaces: 2,
|
|
@@ -72,7 +72,7 @@ export function JackpotMultiStageMobile({ animate = true, customJackpotChestImag
|
|
|
72
72
|
return () => clearTimeout(timeout);
|
|
73
73
|
}
|
|
74
74
|
}, [minLimitTooltipOpen]);
|
|
75
|
-
const target = parseFloat(jackpot.stages?.[jackpot.stage]?.targetTurnover ?? '0');
|
|
75
|
+
const target = parseFloat(jackpot.stages?.[jackpot.stage - 1]?.targetTurnover ?? '0');
|
|
76
76
|
const total = parseFloat(jackpot.totalTurnover ?? '0');
|
|
77
77
|
const currStageProgressPercentage = getPercentage(total, target);
|
|
78
78
|
const totalTurnover = jackpot.totalTurnover;
|
|
@@ -110,7 +110,7 @@ export function JackpotMultiStageMobile({ animate = true, customJackpotChestImag
|
|
|
110
110
|
currency: localeInfo.currency.code,
|
|
111
111
|
minDecimalPlaces: 2,
|
|
112
112
|
maxDecimalPlaces: 2,
|
|
113
|
-
}) }), _jsxs("div", { className: twMerge('mt-[15px] mb-[10px] flex w-fit items-center gap-1 rounded-full border border-[#932F19] bg-[#511C10] py-[0.125rem] pr-[0.5rem] pl-[0.375rem] text-[#F7B27A] text-xs', className?.jackpotTurnoverRoot), children: [_jsx(Target04Icon, { className: twMerge('size-3.5 text-[#EF6820]', className?.jackpotTurnoverIcon) }), _jsxs("p", { children: ["Turnover Target:", ' ', formatNumber(jackpot.stages?.[jackpot.stage]?.targetTurnover, {
|
|
113
|
+
}) }), _jsxs("div", { className: twMerge('mt-[15px] mb-[10px] flex w-fit items-center gap-1 rounded-full border border-[#932F19] bg-[#511C10] py-[0.125rem] pr-[0.5rem] pl-[0.375rem] text-[#F7B27A] text-xs', className?.jackpotTurnoverRoot), children: [_jsx(Target04Icon, { className: twMerge('size-3.5 text-[#EF6820]', className?.jackpotTurnoverIcon) }), _jsxs("p", { children: ["Turnover Target:", ' ', formatNumber(jackpot.stages?.[jackpot.stage - 1]?.targetTurnover, {
|
|
114
114
|
currency: localeInfo.currency.code,
|
|
115
115
|
minDecimalPlaces: 2,
|
|
116
116
|
maxDecimalPlaces: 2,
|
|
@@ -13,6 +13,7 @@ export function KYCVerificationStatus() {
|
|
|
13
13
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
14
14
|
kycVerificationStatus: ctx.kycVerificationStatus,
|
|
15
15
|
kyc: ctx.kyc,
|
|
16
|
+
depositWithdrawal: ctx.depositWithdrawal,
|
|
16
17
|
})));
|
|
17
18
|
const verificationQuery = useMemberVerificationQuery();
|
|
18
19
|
const status = verificationQuery.data?.status ?? 'UNVERIFIED';
|
|
@@ -26,6 +27,7 @@ export function KYCVerificationStatus() {
|
|
|
26
27
|
'Your account verification was not approved. Please resubmit your verification to regain full access.', status === 'UNVERIFIED' &&
|
|
27
28
|
'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: () => {
|
|
28
29
|
globalStore.kycVerificationStatus.setOpen(false);
|
|
30
|
+
globalStore.depositWithdrawal.setOpen(false);
|
|
29
31
|
globalStore.kyc.setOpen(true);
|
|
30
32
|
}, children: [status === 'REJECTED' && 'Resubmit Verification', status === 'UNVERIFIED' && 'Verify Now'] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
|
|
31
33
|
globalStore.kycVerificationStatus.setOpen(false);
|