@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.
@@ -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(_Fragment, { children: [_jsx(Image, { width: 66, height: 87, src: 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: [
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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.732",
3
+ "version": "0.0.734",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",