@opexa/portal-components 0.0.67 → 0.0.69

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.
Files changed (32) hide show
  1. package/dist/client/hooks/index.d.ts +1 -0
  2. package/dist/client/hooks/index.js +1 -0
  3. package/dist/client/hooks/useBonusQuery.js +5 -2
  4. package/dist/client/hooks/useCashbackBonusesQuery.js +1 -0
  5. package/dist/client/hooks/useCashbackQuery.js +5 -2
  6. package/dist/client/hooks/usePromoQuery.js +5 -2
  7. package/dist/client/hooks/useRemainingTime.d.ts +7 -0
  8. package/dist/client/hooks/useRemainingTime.js +24 -0
  9. package/dist/components/Bonus/Bonus.client.d.ts +1 -1
  10. package/dist/components/Bonus/Bonus.client.js +27 -1
  11. package/dist/components/Bonus/Bonus.js +7 -0
  12. package/dist/components/Bonuses/Bonuses.client.js +8 -29
  13. package/dist/components/Bonuses/Bonuses.d.ts +1 -6
  14. package/dist/components/Bonuses/BonusesTrigger.js +6 -2
  15. package/dist/components/Cashback/Cashback.client.js +11 -7
  16. package/dist/components/Cashback/Cashback.js +4 -7
  17. package/dist/components/GameProviders/GameProviders.d.ts +2 -0
  18. package/dist/components/GameProviders/GameProviders.js +2 -1
  19. package/dist/components/Games/Game.d.ts +1 -0
  20. package/dist/components/Games/Game.js +1 -1
  21. package/dist/components/Games/GamesCarousel.client.js +1 -1
  22. package/dist/components/Games/GamesCarousel.d.ts +1 -0
  23. package/dist/components/Games/GamesList.client.js +1 -1
  24. package/dist/components/Games/GamesList.d.ts +1 -0
  25. package/dist/components/Promo/Promo.client.js +7 -3
  26. package/dist/components/Promo/Promo.js +2 -5
  27. package/dist/components/index.d.ts +0 -1
  28. package/dist/components/index.js +0 -1
  29. package/dist/server/utils/prefetchBonusQuery.js +5 -2
  30. package/dist/server/utils/prefetchCashbackQuery.js +5 -2
  31. package/dist/server/utils/prefetchPromoQuery.js +5 -2
  32. package/package.json +1 -1
@@ -48,6 +48,7 @@ export * from './usePlatformQuery';
48
48
  export * from './useProfileCompletionQuery';
49
49
  export * from './usePromoQuery';
50
50
  export * from './usePromosQuery';
51
+ export * from './useRemainingTime';
51
52
  export * from './useSendVerificationCodeMutation';
52
53
  export * from './useSessionQuery';
53
54
  export * from './useSignInMutation';
@@ -48,6 +48,7 @@ export * from './usePlatformQuery.js';
48
48
  export * from './useProfileCompletionQuery.js';
49
49
  export * from './usePromoQuery.js';
50
50
  export * from './usePromosQuery.js';
51
+ export * from './useRemainingTime.js';
51
52
  export * from './useSendVerificationCodeMutation.js';
52
53
  export * from './useSessionQuery.js';
53
54
  export * from './useSignInMutation.js';
@@ -1,4 +1,4 @@
1
- import { getBonus } from '@opexa/portal-sdk-core';
1
+ import { getBonuses } from '@opexa/portal-sdk-core';
2
2
  import { useQuery } from '@tanstack/react-query';
3
3
  import invariant from 'tiny-invariant';
4
4
  import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
@@ -20,7 +20,8 @@ export const useBonusQuery = (id, config) => {
20
20
  queryFn: () => getSession(),
21
21
  });
22
22
  invariant(session.status === 'authenticated');
23
- return await getBonus(id, {
23
+ /* FIXME: use getBonus query once api is fixed */
24
+ const bonuses = await getBonuses({
24
25
  signal,
25
26
  environment: ENVIRONMENT,
26
27
  headers: {
@@ -28,6 +29,8 @@ export const useBonusQuery = (id, config) => {
28
29
  Authorization: `Bearer ${session.token}`,
29
30
  },
30
31
  });
32
+ const bonus = bonuses.find((b) => b.id === id) ?? null;
33
+ return bonus;
31
34
  },
32
35
  });
33
36
  return query;
@@ -25,6 +25,7 @@ export const useCashbackBonusesQuery = (config) => {
25
25
  environment: ENVIRONMENT,
26
26
  headers: {
27
27
  'Platform-Code': PLATFORM_CODE,
28
+ Authorization: `Bearer ${session.token}`,
28
29
  },
29
30
  });
30
31
  },
@@ -1,4 +1,4 @@
1
- import { getCashback } from '@opexa/portal-sdk-core';
1
+ import { getCashbacks } from '@opexa/portal-sdk-core';
2
2
  import { useQuery } from '@tanstack/react-query';
3
3
  import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
4
4
  import { getCashbackQueryKey } from '../../utils/index.js';
@@ -8,13 +8,16 @@ export const useCashbackQuery = (id, config) => {
8
8
  enabled: !id ? false : config?.enabled,
9
9
  queryKey: getCashbackQueryKey(id),
10
10
  queryFn: async ({ signal }) => {
11
- return await getCashback(id, {
11
+ /* FIXME: use getCashback query once api if fixed */
12
+ const cashbacks = await getCashbacks({
12
13
  signal,
13
14
  environment: ENVIRONMENT,
14
15
  headers: {
15
16
  'Platform-Code': PLATFORM_CODE,
16
17
  },
17
18
  });
19
+ const cashback = cashbacks.find((c) => c.id === id) ?? null;
20
+ return cashback;
18
21
  },
19
22
  });
20
23
  };
@@ -1,4 +1,4 @@
1
- import { getPromo } from '@opexa/portal-sdk-core';
1
+ import { getPromos } from '@opexa/portal-sdk-core';
2
2
  import { useQuery } from '@tanstack/react-query';
3
3
  import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
4
4
  import { getPromoQueryKey } from '../../utils/index.js';
@@ -8,13 +8,16 @@ export const usePromoQuery = (id, config) => {
8
8
  enabled: !id ? false : config?.enabled,
9
9
  queryKey: getPromoQueryKey(id),
10
10
  queryFn: async ({ signal }) => {
11
- return await getPromo(id, {
11
+ /* FIXME: use getPromo query once api is fixed */
12
+ const promos = await getPromos({
12
13
  signal,
13
14
  environment: ENVIRONMENT,
14
15
  headers: {
15
16
  'Platform-Code': PLATFORM_CODE,
16
17
  },
17
18
  });
19
+ const promo = promos.find((p) => p.id === id) ?? null;
20
+ return promo;
18
21
  },
19
22
  });
20
23
  };
@@ -0,0 +1,7 @@
1
+ export declare function useRemainingTime(value: Date | string | number): {
2
+ days: number;
3
+ hours: number;
4
+ minutes: number;
5
+ expired: boolean;
6
+ toString(): string;
7
+ };
@@ -0,0 +1,24 @@
1
+ import { differenceInDays, differenceInHours, differenceInMinutes, isAfter, } from 'date-fns';
2
+ import { isNumber, isString } from 'lodash-es';
3
+ import { useState } from 'react';
4
+ import { useInterval } from 'usehooks-ts';
5
+ export function useRemainingTime(value) {
6
+ const [now, setNow] = useState(new Date());
7
+ const expiration = isString(value) || isNumber(value) ? new Date(value) : value;
8
+ const expired = isAfter(now, expiration);
9
+ const days = expired ? 0 : differenceInDays(expiration, now);
10
+ const hours = expired ? 0 : differenceInHours(expiration, now) - days * 24;
11
+ const minutes = expired
12
+ ? 0
13
+ : differenceInMinutes(expiration, now) - days * 24 * 60 - hours * 60;
14
+ useInterval(() => setNow(new Date()), expired ? null : 1000);
15
+ return {
16
+ days,
17
+ hours,
18
+ minutes,
19
+ expired,
20
+ toString() {
21
+ return `${days}d:${hours}h:${minutes}m`;
22
+ },
23
+ };
24
+ }
@@ -1,2 +1,2 @@
1
1
  import type { BonusProps } from './Bonus';
2
- export declare function Bonus__client(props: BonusProps): import("react/jsx-runtime").JSX.Element;
2
+ export declare function Bonus__client(props: BonusProps): import("react/jsx-runtime").JSX.Element | null;
@@ -1,9 +1,35 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { clamp } from 'lodash-es';
3
4
  import Image from 'next/image';
4
5
  import Link from 'next/link';
6
+ import { useBonusQuery, useLocaleInfo, useRemainingTime, } from '../../client/hooks/index.js';
5
7
  import { ChevronLeftIcon, ChevronRightIcon, StopWatchIcon } from '../../icons/index.js';
8
+ import piggyBank from '../../images/piggy-bank.png';
6
9
  import { Badge, Collapsible, Progress, Prose } from '../../ui/index.js';
10
+ import { capitalize, formatNumber, parseDecimal } from '../../utils/index.js';
7
11
  export function Bonus__client(props) {
8
- return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/rewards', className: "text-button-tertiary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to Rewards"] }), _jsx(Image, { src: "https://s3.ap-east-1.amazonaws.com/opexa-assets.opexasystem.com/assets/BSxIXEsa59_zzMAR27-ALLDAYREBATE06-STATIC-WEB-HB-1920x1080.png", alt: "", width: 1024, height: 600, className: "mt-3xl h-auto w-full rounded-xl" }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: "brand", className: "mt-xl lg:mt-6", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: "9d:10h:11m" })] }), _jsx("h1", { className: "text-text-primary-900 mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: "50 PHP First Deposit Bonus" }), _jsx("p", { className: "text-text-primary-brand mt-xl text-base lg:mt-6 lg:text-lg", children: "Complete the wagering before time runs out to convert your bonus balance into real money!" }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsx("p", { children: "Your bonus" }), _jsxs("p", { children: [_jsx("span", { className: "text-text-primary-900", children: "20.00" }), " / 50.00 PHP"] })] }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsx("p", { children: "Required Turnover" }), _jsx("p", { children: "5x" })] }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { children: "Wagering" }), _jsx("p", { children: "400/1000" })] }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] }), _jsxs(Collapsible.Root, { className: "mt-xl lg:mt-6", children: [_jsxs(Collapsible.Trigger, { className: "text-button-tertiary-fg flex w-fit items-center justify-center gap-sm text-sm font-semibold lg:mx-auto", children: ["Game Provider Contribution", _jsx(Collapsible.Indicator, { asChild: true, children: _jsx(ChevronRightIcon, { className: "size-5" }) })] }), _jsxs(Collapsible.Content, { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl space-y-1.5 rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Playson" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "25%" })] }), _jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Betsoft Gaming" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "13%" })] }), _jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Microgaming" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "50%" })] }), _jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Realtime Gaming" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "10%" })] })] })] }), _jsxs(Prose, { className: "mt-xl lg:mt-6", children: [_jsx("h3", { children: "How to get bonus" }), _jsxs("ol", { children: [_jsx("li", { children: "All OFWin members are eligible for this program." }), _jsx("li", { children: "50 PHP of game credit will be automatically credited to the new member account upon completion of first deposit Auctor vel in vitae placerat." }), _jsx("li", { children: "Member must reach a 5x turnover requirement before a withdrawal can be made. Attempting to make a withdrawal before this turnover requirement is completed could cause your bonus to be voided." }), _jsx("li", { children: "Players will have 10 days from the date the bonus is awarded to complete the rollover requirement." }), _jsx("li", { children: "Bets used to meet other bonus rollover requirements will not count toward this promotion." })] }), _jsx("h3", { children: "Terms and Conditions" }), _jsxs("ul", { children: [_jsx("li", { children: "Only one account per player is allowed. No same IP address/bank account name allowed. Players who have multiple or fraudulent accounts will not be qualified for the promotion." }), _jsx("li", { children: "Players that are found to have any duplicate accounts or those who participate in fraudulent activities may have their funds forfeited and their accounts closed." }), _jsx("li", { children: "OFWin reserves the right to amend or cancel this Referral Program at any time. OFWin General Terms and Conditions apply." })] })] })] }));
12
+ const bonusQuery = useBonusQuery(props.id);
13
+ const bonus = bonusQuery.data;
14
+ const localeInfo = useLocaleInfo();
15
+ const remainingTime = useRemainingTime(bonus?.expiration ?? new Date());
16
+ if (!bonus)
17
+ return null;
18
+ const turnoverRequirement = parseDecimal(bonus.turnoverRequirement, 0);
19
+ const currentTurnoverRequirementContribution = parseDecimal(bonus.currentTurnoverRequirementContribution, 0);
20
+ return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/rewards', className: "text-button-tertiary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to Rewards"] }), _jsx("div", { className: "mt-3xl", children: bonus.promo.banner?.url ? (_jsx(Image, { src: "https://s3.ap-east-1.amazonaws.com/opexa-assets.opexasystem.com/assets/BSxIXEsa59_zzMAR27-ALLDAYREBATE06-STATIC-WEB-HB-1920x1080.png", alt: "", width: 1024, height: 600, className: "h-auto w-full" })) : (_jsx(DefaultImage, {})) }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'gray', className: "mt-xl lg:mt-6", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] }), _jsx("h1", { className: "text-text-primary-900 mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: bonus.promo.name }), _jsx("p", { className: "text-text-primary-brand mt-xl text-base lg:mt-6 lg:text-lg", children: "Complete the wagering before time runs out to convert your bonus balance into real money!" }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsx("p", { children: "Your bonus" }), _jsxs("p", { children: [_jsx("span", { className: "text-text-primary-900", children: formatNumber(bonus.balance) }), ' ', "/ ", formatNumber(bonus.amount), " ", localeInfo.currency.code] })] }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsx("p", { children: "Required Turnover" }), _jsxs("p", { children: [turnoverRequirement, "x"] })] }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { children: "Wagering" }), _jsxs("p", { children: [currentTurnoverRequirementContribution, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { className: "mt-2", min: 0, max: turnoverRequirement, value: clamp(currentTurnoverRequirementContribution, 0, turnoverRequirement), children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] }), _jsxs(Collapsible.Root, { className: "mt-xl lg:mt-6", children: [_jsxs(Collapsible.Trigger, { className: "text-button-tertiary-fg flex w-fit items-center justify-center gap-sm text-sm font-semibold lg:mx-auto", children: ["Game Provider Contribution", _jsx(Collapsible.Indicator, { asChild: true, children: _jsx(ChevronRightIcon, { className: "size-5" }) })] }), _jsx(Collapsible.Content, { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl space-y-1.5 rounded-md border px-3.5 py-xl lg:mt-6", children: Object.entries(bonus.promo
21
+ .turnoverRequirementContributionPercentagePerGameProvider ?? {}).map(([provider, valueAsString]) => {
22
+ const value = parseDecimal(valueAsString, 0);
23
+ return (_jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: capitalize(provider, {
24
+ delimiter: capitalize.delimiters.UNDERSCORE,
25
+ }) }), _jsx(Progress.Root, { min: 0, max: 100, value: clamp(value, 0, 100), className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsxs("p", { className: "shrink-0 lg:w-14 lg:text-right", children: [formatNumber(value, {
26
+ maxDecimalPlaces: 1,
27
+ minDecimalPlaces: 0,
28
+ }), "%"] })] }, provider));
29
+ }) })] }), _jsx(Prose, { className: "mt-xl lg:mt-6", dangerouslySetInnerHTML: { __html: bonus.promo.description } })] }));
30
+ }
31
+ function DefaultImage() {
32
+ return (_jsx("div", { style: {
33
+ background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
34
+ }, className: "overflow-hidden rounded-xl", children: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-auto w-[50%] shrink-0", draggable: false, width: 1024, height: 1024, priority: true }) }));
9
35
  }
@@ -1,5 +1,12 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { notFound } from 'next/navigation';
3
+ import { prefetchBonusQuery } from '../../server/utils/index.js';
4
+ import { getBonusQueryKey, getQueryClient } from '../../utils/index.js';
2
5
  import { Bonus__client } from './Bonus.client.js';
3
6
  export async function Bonus(props) {
7
+ await prefetchBonusQuery(props.id);
8
+ const bonus = getQueryClient().getQueryData(getBonusQueryKey(props.id));
9
+ if (!bonus)
10
+ return notFound();
4
11
  return _jsx(Bonus__client, { ...props });
5
12
  }
@@ -1,13 +1,12 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { differenceInDays, differenceInHours, differenceInMinutes, isAfter, } from 'date-fns';
3
+ import { isAfter } from 'date-fns';
4
4
  import { clamp } from 'lodash-es';
5
5
  import Image from 'next/image';
6
6
  import Link from 'next/link';
7
7
  import { useState } from 'react';
8
- import { useInterval } from 'usehooks-ts';
9
8
  import { z } from 'zod';
10
- import { useBonusesQuery, useCashbackBonusesQuery, useClaimCashbackBonusMutation, useLocaleInfo, } from '../../client/hooks/index.js';
9
+ import { useBonusesQuery, useCashbackBonusesQuery, useClaimCashbackBonusMutation, useLocaleInfo, useRemainingTime, } from '../../client/hooks/index.js';
11
10
  import { Gift01Icon, StopWatchIcon } from '../../icons/index.js';
12
11
  import moneyOnHand from '../../images/money-on-hand.png';
13
12
  import piggyBank from '../../images/piggy-bank.png';
@@ -32,40 +31,20 @@ export function Bonuses__client(props) {
32
31
  const empty = bonuses.length === 0 && cashbackBonuses.length === 0;
33
32
  return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Rewards' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
34
33
  setTab(z.enum(TABS).parse(details.value));
35
- }, className: "mt-3", children: [TABS.map((value) => (_jsxs(SegmentGroup.Item, { value: value, children: [_jsxs(SegmentGroup.ItemText, { children: [" ", capitalize(value)] }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, value))), _jsx(SegmentGroup.Indicator, {})] }), empty && (_jsx(Empty, { className: "mt-8", icon: Gift01Icon, title: "No Rewards", message: "No reward is currently available." })), !empty && (_jsxs("div", { className: "mt-3xl grid gap-3xl lg:mt-lg lg:grid-cols-3", children: [tab !== 'CASHBACKS' && (_jsx(_Fragment, { children: bonuses.map((bonus) => (_jsx(Bonus, { data: bonus, viewDetailsUrl: props.viewBonusDetailsUrl ?? '/rewards/bonus' }, bonus.id))) })), cashbackBonuses.map((cashbackBonus) => (_jsx(CashbackBonus, { data: cashbackBonus, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/rewards/cashback' }, cashbackBonus.id)))] }))] }));
36
- }
37
- function useExpirationCounter(value) {
38
- const [now, setNow] = useState(new Date());
39
- const expiration = new Date(value);
40
- const expired = isAfter(now, expiration);
41
- const days = expired ? 0 : differenceInDays(expiration, now);
42
- const hours = expired ? 0 : differenceInHours(expiration, now) - days * 24;
43
- const minutes = expired
44
- ? 0
45
- : differenceInMinutes(expiration, now) - days * 24 * 60 - hours * 60;
46
- useInterval(() => setNow(new Date()), expired ? null : 1000);
47
- return {
48
- days,
49
- hours,
50
- minutes,
51
- toString() {
52
- return `${days}d:${hours}h:${minutes}m`;
53
- },
54
- expired,
55
- };
34
+ }, className: "mt-3", children: [TABS.map((value) => (_jsxs(SegmentGroup.Item, { value: value, children: [_jsxs(SegmentGroup.ItemText, { children: [" ", capitalize(value)] }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, value))), _jsx(SegmentGroup.Indicator, {})] }), empty && (_jsx(Empty, { className: "mt-8", icon: Gift01Icon, title: "No Rewards", message: "No reward is currently available." })), !empty && (_jsxs("div", { className: "mt-3xl grid gap-3xl lg:mt-lg lg:grid-cols-3", children: [tab !== 'CASHBACKS' && (_jsx(_Fragment, { children: bonuses.map((bonus) => (_jsx(Bonus, { data: bonus, viewDetailsUrl: props.viewBonusDetailsUrl ?? '/rewards' }, bonus.id))) })), cashbackBonuses.map((cashbackBonus) => (_jsx(CashbackBonus, { data: cashbackBonus }, cashbackBonus.id)))] }))] }));
56
35
  }
57
36
  function Bonus(props) {
58
37
  const bonus = props.data;
59
38
  const promo = bonus.promo;
60
39
  const localeInfo = useLocaleInfo();
61
- const expirationCounter = useExpirationCounter(bonus.expiration);
62
- return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex flex-col overflow-hidden rounded-2xl border", children: [_jsxs("div", { className: "relative", children: [promo.banner?.url ? (_jsx(Image, { src: promo.banner.url, alt: "", width: 400, height: 200, className: "h-auto w-full" })) : (_jsx(DefaultImage, { type: "bonus" })), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: expirationCounter.expired ? 'danger' : 'gray', className: "absolute right-4 top-4", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: expirationCounter.expired
63
- ? 'Expired'
64
- : expirationCounter.toString() })] })] }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("h2", { className: "text-center text-xl font-semibold text-white", children: promo.name }), _jsxs("div", { className: "mt-2 flex items-baseline justify-center gap-2", children: [_jsx("p", { className: "text-3xl font-semibold leading-none", children: formatNumber(bonus.balance, {
40
+ const remainingTime = useRemainingTime(bonus.expiration);
41
+ const currentTurnoverRequirementContributionPercentage = parseDecimal(bonus.currentTurnoverRequirementContributionPercentage, 0);
42
+ const turnoverRequirement = parseDecimal(bonus.turnoverRequirement, 0);
43
+ return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex flex-col overflow-hidden rounded-2xl border", children: [_jsxs("div", { className: "relative", children: [promo.banner?.url ? (_jsx(Image, { src: promo.banner.url, alt: "", width: 400, height: 200, className: "h-auto w-full" })) : (_jsx(DefaultImage, { type: "bonus" })), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'gray', className: "absolute right-4 top-4", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] })] }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("h2", { className: "text-center text-xl font-semibold text-white", children: promo.name }), _jsxs("div", { className: "mt-2 flex items-baseline justify-center gap-2", children: [_jsx("p", { className: "text-3xl font-semibold leading-none", children: formatNumber(bonus.balance, {
65
44
  currency: localeInfo.currency.code,
66
45
  }) }), _jsxs("p", { className: "text-text-secondary-700 text-xl font-semibold leading-none", children: ["/\u00A0", formatNumber(bonus.amount, {
67
46
  currency: localeInfo.currency.code,
68
- })] })] }), _jsxs("div", { className: "text-text-primary-brand mt-md flex justify-between", children: [_jsxs("p", { children: ["Wagering ", bonus.currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [bonus.currentTurnoverRequirementContributionPercentage, "/100"] })] }), _jsx(Progress.Root, { min: 0, max: 100, value: clamp(parseDecimal(bonus.currentTurnoverRequirementContributionPercentage, 0), 0, 100), className: "mt-2", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("div", { className: "grow" }), _jsx(Button, { variant: "outline", className: "mt-6", asChild: true, children: _jsx(Link, { href: `${props.viewDetailsUrl}/${bonus.id}`, children: "See More" }) })] })] }));
47
+ })] })] }), _jsxs("div", { className: "text-text-primary-brand mt-md flex justify-between", children: [_jsxs("p", { children: ["Wagering ", currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [currentTurnoverRequirementContributionPercentage, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { min: 0, max: 100, value: clamp(currentTurnoverRequirementContributionPercentage, 0, 100), className: "mt-2", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("div", { className: "grow" }), _jsx(Button, { variant: "outline", className: "mt-6", asChild: true, children: _jsx(Link, { href: `${props.viewDetailsUrl}/${bonus.id}`, children: "See More" }) })] })] }));
69
48
  }
70
49
  function CashbackBonus(props) {
71
50
  const bonus = props.data;
@@ -3,13 +3,8 @@ export interface BonusesProps {
3
3
  className?: string;
4
4
  /**
5
5
  * @description base URL for the bonus details page
6
- * @default "/rewards/bonus"
6
+ * @default "/rewards"
7
7
  */
8
8
  viewBonusDetailsUrl?: string;
9
- /**
10
- * @description base URL for the cashback details page
11
- * @default "/rewards/cashback"
12
- */
13
- viewCashbackDetailsUrl?: string;
14
9
  }
15
10
  export declare function Bonuses(props: BonusesProps): Promise<import("react/jsx-runtime").JSX.Element>;
@@ -6,9 +6,13 @@ import { useBonusesQuery, useCashbackBonusesQuery } from '../../client/hooks/ind
6
6
  import { Gift01Icon } from '../../icons/index.js';
7
7
  import { iconButtonRecipe } from '../../ui/IconButton/iconButton.recipe.js';
8
8
  export function BonusesTrigger(props) {
9
- const bonusesQuery = useBonusesQuery();
9
+ const bonusesQuery = useBonusesQuery({
10
+ refetchInterval: 10000,
11
+ });
12
+ const cashbackBonusesQuery = useCashbackBonusesQuery({
13
+ refetchInterval: 10000,
14
+ });
10
15
  const bonusesCount = bonusesQuery.data?.length ?? 0;
11
- const cashbackBonusesQuery = useCashbackBonusesQuery();
12
16
  const cashbackBonusesCount = cashbackBonusesQuery.data?.length ?? 0;
13
17
  const totalCount = bonusesCount + cashbackBonusesCount;
14
18
  return (_jsx(Link, { "aria-label": "View Rewards", "data-count": totalCount, ...props, href: props.href ?? '/rewards', className: iconButtonRecipe({
@@ -5,23 +5,27 @@ import { format } from 'date-fns';
5
5
  import Image from 'next/image';
6
6
  import Link from 'next/link';
7
7
  import { useShallow } from 'zustand/shallow';
8
- import { useGlobalStore, useLocaleInfo, usePromoQuery, } from '../../client/hooks/index.js';
8
+ import { useAvailablePromosQuery, useCashbackQuery, useGlobalStore, useLocaleInfo, } from '../../client/hooks/index.js';
9
9
  import { ChevronLeftIcon } from '../../icons/index.js';
10
10
  import { Button, Prose } from '../../ui/index.js';
11
11
  export function Cashback__client(props) {
12
+ const availablePromosQuery = useAvailablePromosQuery();
13
+ const cashbackQuery = useCashbackQuery(props.id);
14
+ const availablePromos = availablePromosQuery.data ?? [];
15
+ const cashback = cashbackQuery.data;
16
+ const claimable = availablePromos.some(({ id }) => id === props.id);
12
17
  const localeInfo = useLocaleInfo();
13
- const promoQuery = usePromoQuery(props.id);
14
- const promo = promoQuery.data;
15
18
  const globalStore = useGlobalStore(useShallow((ctx) => ({
16
19
  depositWithdrawal: ctx.depositWithdrawal,
17
20
  })));
18
- if (!promo)
21
+ if (!cashback)
19
22
  return null;
20
- return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: "", width: 1024, height: 600, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), _jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
23
+ return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), cashback.banner.url && (_jsx(Image, { src: cashback.banner.url, alt: "", width: 1024, height: 600, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), claimable && (_jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
21
24
  globalStore.depositWithdrawal.setOpen(true);
22
- }, children: "Deposit Now" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: promo.name }), _jsxs("p", { className: "text-text-secondary-700 mt-xl lg:mt-6", children: ["Ends", ' ', format(promo.activationEndDateTime, 'MM/dd/yyy hh:mm:ss A', {
25
+ globalStore.depositWithdrawal.setPromo(cashback.id);
26
+ }, children: "Deposit Now" })), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: cashback.name }), _jsxs("p", { className: "text-text-secondary-700 mt-xl lg:mt-6", children: ["Ends", ' ', format(cashback.activationEndDateTime, 'MM/dd/yyy hh:mm:ss a', {
23
27
  in: tz(localeInfo.timezone),
24
28
  })] }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
25
- __html: promo.description,
29
+ __html: cashback.description,
26
30
  } }), _jsxs(Prose, { className: "bg-bg-secondary mt-xl rounded-2xl p-2xl lg:mt-16 lg:p-4xl", children: [_jsx("h2", { children: "Conclusion" }), _jsx("p", { children: "Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse." }), _jsx("p", { children: "Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus." }), _jsx("p", { children: "Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor." })] })] }));
27
31
  }
@@ -1,15 +1,12 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { notFound } from 'next/navigation';
3
3
  import { prefetchCashbackQuery } from '../../server/utils/index.js';
4
- import { getPromoQueryKey, getQueryClient } from '../../utils/index.js';
4
+ import { getCashbackQueryKey, getQueryClient } from '../../utils/index.js';
5
5
  import { Cashback__client } from './Cashback.client.js';
6
6
  export async function Cashback(props) {
7
7
  await prefetchCashbackQuery(props.id);
8
- const promo = getQueryClient().getQueryData(getPromoQueryKey(props.id));
9
- if (promo) {
10
- return _jsx(Cashback__client, { ...props });
11
- }
12
- else {
8
+ const cashback = getQueryClient().getQueryData(getCashbackQueryKey(props.id));
9
+ if (!cashback)
13
10
  return notFound();
14
- }
11
+ return _jsx(Cashback__client, { ...props });
15
12
  }
@@ -7,5 +7,7 @@ export interface GameProvidersProps {
7
7
  */
8
8
  viewAllUrl?: string;
9
9
  className?: string;
10
+ gameProviderContainerClass?: string;
11
+ gameProviderImageClass?: string;
10
12
  }
11
13
  export declare function GameProviders(props: GameProvidersProps): import("react/jsx-runtime").JSX.Element;
@@ -4,6 +4,7 @@ import useEmblaCarousel from 'embla-carousel-react';
4
4
  import Image from 'next/image';
5
5
  import Link from 'next/link';
6
6
  import { useCallback, useEffect, useState } from 'react';
7
+ import { twMerge } from 'tailwind-merge';
7
8
  import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon } from '../../icons/index.js';
8
9
  import { Button } from '../../ui/index.js';
9
10
  export function GameProviders(props) {
@@ -28,5 +29,5 @@ export function GameProviders(props) {
28
29
  emblaApi.on('reInit', onSelect).on('select', onSelect);
29
30
  }, [emblaApi, onSelect]);
30
31
  const viewAllUrl = props.viewAllUrl ?? '/games/providers';
31
- return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: viewAllUrl, className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", 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 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: props.gameProviders.map((provider) => (_jsx(Link, { href: `${viewAllUrl}/${provider.slug}`, className: "bg-gray-800 flex w-full items-center rounded-md px-md py-sm lg:h-[5.75rem]", children: _jsx(Image, { src: provider.logo, alt: "", width: 300, height: 150, className: "mx-auto h-auto w-full" }) }, provider.id))) }) })] }));
32
+ return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: viewAllUrl, className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", 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 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: props.gameProviders.map((provider) => (_jsx(Link, { href: `${viewAllUrl}/${provider.slug}`, className: twMerge('bg-gray-800 flex w-full items-center rounded-md px-md py-sm lg:h-[5.75rem]', props.gameProviderContainerClass), children: _jsx(Image, { src: provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', props.gameProviderImageClass) }) }, provider.id))) }) })] }));
32
33
  }
@@ -1,4 +1,5 @@
1
1
  export interface GameProps {
2
2
  badge?: 'top' | 'new' | 'popular';
3
+ gameNameClass?: string;
3
4
  }
4
5
  export declare function Game(props: GameProps): import("react/jsx-runtime").JSX.Element;
@@ -33,5 +33,5 @@ export function Game(props) {
33
33
  }, "aria-disabled": markGameAsFavoriteMutation.isPending ||
34
34
  unmarkGameAsFavoriteMutation.isPending, className: "rounded-xs absolute right-2 top-2 flex size-9 items-center justify-center bg-black/65 blur-[0.5px]", children: _jsx(Star01Icon, { className: twMerge('size-5', markedAsFavorite
35
35
  ? 'fill-yellow-400 text-yellow-400'
36
- : 'text-white') }) })), _jsx(Image, { src: game.image, alt: "", width: 200, height: 200, priority: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: "bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold", children: game.name })] }));
36
+ : 'text-white') }) })), _jsx(Image, { src: game.image, alt: "", width: 200, height: 200, priority: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-3.5 text-center text-xs font-semibold', props.gameNameClass), children: game.name })] }));
37
37
  }
@@ -54,5 +54,5 @@ export function GamesCarousel__client(props) {
54
54
  ? 'grid-rows-3'
55
55
  : numOfRows === 2
56
56
  ? 'grid-rows-2'
57
- : 'grid-rows-1'), children: games.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge }) }, game.id))) }) })] }));
57
+ : 'grid-rows-1'), children: games.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, gameNameClass: props.gameNameClass }) }, game.id))) }) })] }));
58
58
  }
@@ -12,5 +12,6 @@ export interface GamesCarouselProps {
12
12
  badge?: 'top' | 'new' | 'popular';
13
13
  filter?: GamesInput['filter'];
14
14
  className?: string;
15
+ gameNameClass?: string;
15
16
  }
16
17
  export declare function GamesCarousel(props: GamesCarouselProps): Promise<import("react/jsx-runtime").JSX.Element>;
@@ -10,5 +10,5 @@ export function GamesList__client(props) {
10
10
  first: props.first ?? 24,
11
11
  filter: props.filter,
12
12
  });
13
- return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: availableRows.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge }) }, game.id))) }), _jsxs("div", { className: "mt-3xl flex flex-col items-center", children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: "mt-lg", children: "Load More" }))] })] }));
13
+ return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: availableRows.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, gameNameClass: props.gameNameClass }) }, game.id))) }), _jsxs("div", { className: "mt-3xl flex flex-col items-center", children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: "mt-lg", children: "Load More" }))] })] }));
14
14
  }
@@ -7,5 +7,6 @@ export interface GamesListProps {
7
7
  /** @default "Games"*/
8
8
  heading?: string;
9
9
  className?: string;
10
+ gameNameClass?: string;
10
11
  }
11
12
  export declare function GamesList(props: GamesListProps): Promise<import("react/jsx-runtime").JSX.Element>;
@@ -5,21 +5,25 @@ import { format } from 'date-fns';
5
5
  import Image from 'next/image';
6
6
  import Link from 'next/link';
7
7
  import { useShallow } from 'zustand/shallow';
8
- import { useGlobalStore, useLocaleInfo, usePromoQuery, } from '../../client/hooks/index.js';
8
+ import { useAvailablePromosQuery, useGlobalStore, useLocaleInfo, usePromoQuery, } from '../../client/hooks/index.js';
9
9
  import { ChevronLeftIcon } from '../../icons/index.js';
10
10
  import { Button, Prose } from '../../ui/index.js';
11
11
  export function Promo__client(props) {
12
12
  const localeInfo = useLocaleInfo();
13
+ const availablePromosQuery = useAvailablePromosQuery();
14
+ const availablePromos = availablePromosQuery.data ?? [];
13
15
  const promoQuery = usePromoQuery(props.id);
14
16
  const promo = promoQuery.data;
17
+ const claimable = availablePromos.some(({ id }) => id === promo?.id);
15
18
  const globalStore = useGlobalStore(useShallow((ctx) => ({
16
19
  depositWithdrawal: ctx.depositWithdrawal,
17
20
  })));
18
21
  if (!promo)
19
22
  return null;
20
- return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: "", width: 1024, height: 600, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), _jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
23
+ return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: "", width: 1024, height: 600, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), claimable && (_jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
21
24
  globalStore.depositWithdrawal.setOpen(true);
22
- }, children: "Deposit Now" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: promo.name }), _jsxs("p", { className: "text-text-secondary-700 mt-xl lg:mt-6", children: ["Ends", ' ', format(promo.activationEndDateTime, 'MM/dd/yyy hh:mm:ss', {
25
+ globalStore.depositWithdrawal.setPromo(promo.id);
26
+ }, children: "Deposit Now" })), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: promo.name }), _jsxs("p", { className: "text-text-secondary-700 mt-xl lg:mt-6", children: ["Ends", ' ', format(promo.activationEndDateTime, 'MM/dd/yyy hh:mm:ss', {
23
27
  in: tz(localeInfo.timezone),
24
28
  })] }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
25
29
  __html: promo.description,
@@ -6,10 +6,7 @@ import { Promo__client } from './Promo.client.js';
6
6
  export async function Promo(props) {
7
7
  await prefetchPromoQuery(props.id);
8
8
  const promo = getQueryClient().getQueryData(getPromoQueryKey(props.id));
9
- if (promo) {
10
- return _jsx(Promo__client, { ...props });
11
- }
12
- else {
9
+ if (!promo)
13
10
  return notFound();
14
- }
11
+ return _jsx(Promo__client, { ...props });
15
12
  }
@@ -7,7 +7,6 @@ export * from './BetRecords';
7
7
  export * from './Bonus';
8
8
  export * from './Bonuses';
9
9
  export * from './Cashback';
10
- export * from './CashbackBonus';
11
10
  export * from './DepositWithdrawal';
12
11
  export * from './Disclaimer';
13
12
  export * from './FavoriteGames';
@@ -7,7 +7,6 @@ export * from './BetRecords/index.js';
7
7
  export * from './Bonus/index.js';
8
8
  export * from './Bonuses/index.js';
9
9
  export * from './Cashback/index.js';
10
- export * from './CashbackBonus/index.js';
11
10
  export * from './DepositWithdrawal/index.js';
12
11
  export * from './Disclaimer/index.js';
13
12
  export * from './FavoriteGames/index.js';
@@ -1,4 +1,4 @@
1
- import { getBonus } from '@opexa/portal-sdk-core';
1
+ import { getBonuses } from '@opexa/portal-sdk-core';
2
2
  import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
3
3
  import { getBonusQueryKey, getQueryClient } from '../../utils/index.js';
4
4
  import { getSession } from '../services/getSession.js';
@@ -9,7 +9,8 @@ export const prefetchBonusQuery = async (id) => {
9
9
  await getQueryClient().prefetchQuery({
10
10
  queryKey: getBonusQueryKey(id),
11
11
  queryFn: async ({ signal }) => {
12
- return await getBonus(id, {
12
+ /* FIXME: use getBonus query once api is fixed */
13
+ const bonuses = await getBonuses({
13
14
  signal,
14
15
  environment: ENVIRONMENT,
15
16
  headers: {
@@ -17,6 +18,8 @@ export const prefetchBonusQuery = async (id) => {
17
18
  Authorization: `Bearer ${session.token}`,
18
19
  },
19
20
  });
21
+ const bonus = bonuses.find((b) => b.id === id) ?? null;
22
+ return bonus;
20
23
  },
21
24
  });
22
25
  };
@@ -1,17 +1,20 @@
1
- import { getCashback } from '@opexa/portal-sdk-core';
1
+ import { getCashbacks } from '@opexa/portal-sdk-core';
2
2
  import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
3
3
  import { getCashbackQueryKey, getQueryClient } from '../../utils/index.js';
4
4
  export const prefetchCashbackQuery = async (id) => {
5
5
  await getQueryClient().prefetchQuery({
6
6
  queryKey: getCashbackQueryKey(id),
7
7
  queryFn: async ({ signal }) => {
8
- return await getCashback(id, {
8
+ /* FIXME: use getCashback query once api if fixed */
9
+ const cashbacks = await getCashbacks({
9
10
  signal,
10
11
  environment: ENVIRONMENT,
11
12
  headers: {
12
13
  'Platform-Code': PLATFORM_CODE,
13
14
  },
14
15
  });
16
+ const cashback = cashbacks.find((c) => c.id === id) ?? null;
17
+ return cashback;
15
18
  },
16
19
  });
17
20
  };
@@ -1,17 +1,20 @@
1
- import { getPromo } from '@opexa/portal-sdk-core';
1
+ import { getPromos } from '@opexa/portal-sdk-core';
2
2
  import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
3
3
  import { getPromoQueryKey, getQueryClient } from '../../utils/index.js';
4
4
  export const prefetchPromoQuery = async (id) => {
5
5
  await getQueryClient().prefetchQuery({
6
6
  queryKey: getPromoQueryKey(id),
7
7
  queryFn: async ({ signal }) => {
8
- return await getPromo(id, {
8
+ /* FIXME: use getPromo query once api is fixed */
9
+ const promos = await getPromos({
9
10
  signal,
10
11
  environment: ENVIRONMENT,
11
12
  headers: {
12
13
  'Platform-Code': PLATFORM_CODE,
13
14
  },
14
15
  });
16
+ const promo = promos.find((p) => p.id === id) ?? null;
17
+ return promo;
15
18
  },
16
19
  });
17
20
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.67",
3
+ "version": "0.0.69",
4
4
  "exports": {
5
5
  ".": {
6
6
  "types": "./dist/components/index.d.ts",