@opexa/portal-components 0.0.62 → 0.0.64

package/dist/client/hooks/index.d.ts

@@ -1,9 +1,17 @@
 export * from './useAccountQuery';
 export * from './useAuthenticateMutation';
 export * from './useAvailablePromosQuery';
+export * from './useAvailableQuestsQuery';
 export * from './useBetRecordsQuery';
 export * from './useBonusesQuery';
+export * from './useBonusQuery';
+export * from './useCashbackBonusesQuery';
+export * from './useCashbackBonusQuery';
+export * from './useCashbackQuery';
 export * from './useCashbacksQuery';
+export * from './useCheckInDailyCheckInQuestMutation';
+export * from './useClaimCashbackBonusMutation';
+export * from './useClaimSpotBonusMutation';
 export * from './useControllableState';
 export * from './useCooldown';
 export * from './useCreateGameSessionMutation';
@@ -53,5 +61,3 @@ export * from './useUnreadMessagesCountQuery';
 export * from './useUpdateAccountMutation';
 export * from './useWalletQuery';
 export * from './useWithdrawalRecordsQuery';
-export * from './useAvailableQuestsQuery';
-export * from './useCheckInDailyCheckInQuestMutation';

package/dist/client/hooks/index.js

@@ -1,9 +1,17 @@
 export * from './useAccountQuery.js';
 export * from './useAuthenticateMutation.js';
 export * from './useAvailablePromosQuery.js';
+export * from './useAvailableQuestsQuery.js';
 export * from './useBetRecordsQuery.js';
 export * from './useBonusesQuery.js';
+export * from './useBonusQuery.js';
+export * from './useCashbackBonusesQuery.js';
+export * from './useCashbackBonusQuery.js';
+export * from './useCashbackQuery.js';
 export * from './useCashbacksQuery.js';
+export * from './useCheckInDailyCheckInQuestMutation.js';
+export * from './useClaimCashbackBonusMutation.js';
+export * from './useClaimSpotBonusMutation.js';
 export * from './useControllableState.js';
 export * from './useCooldown.js';
 export * from './useCreateGameSessionMutation.js';
@@ -53,5 +61,3 @@ export * from './useUnreadMessagesCountQuery.js';
 export * from './useUpdateAccountMutation.js';
 export * from './useWalletQuery.js';
 export * from './useWithdrawalRecordsQuery.js';
-export * from './useAvailableQuestsQuery.js';
-export * from './useCheckInDailyCheckInQuestMutation.js';

package/dist/client/hooks/useBonusQuery.d.ts

@@ -0,0 +1,3 @@
+import { type Bonus } from '@opexa/portal-sdk-core';
+import type { Query } from '../../types';
+export declare const useBonusQuery: Query<Bonus | null, string>;

package/dist/client/hooks/useBonusQuery.js

@@ -0,0 +1,34 @@
+import { getBonus } from '@opexa/portal-sdk-core';
+import { useQuery } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
+import { getBonusQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getSession } from '../services/index.js';
+import { useSessionQuery } from './useSessionQuery.js';
+export const useBonusQuery = (id, config) => {
+    const queryClient = getQueryClient();
+    const sessionQuery = useSessionQuery();
+    const query = useQuery({
+        ...config,
+        enabled: config?.enabled === false
+            ? false
+            : sessionQuery.data?.status === 'authenticated',
+        queryKey: getBonusQueryKey(id),
+        queryFn: async ({ signal }) => {
+            const session = await queryClient.fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: () => getSession(),
+            });
+            invariant(session.status === 'authenticated');
+            return await getBonus(id, {
+                signal,
+                environment: ENVIRONMENT,
+                headers: {
+                    'Platform-Code': PLATFORM_CODE,
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+        },
+    });
+    return query;
+};

package/dist/client/hooks/useCashbackBonusQuery.d.ts

@@ -0,0 +1,3 @@
+import { type CashbackBonus } from '@opexa/portal-sdk-core';
+import type { Query } from '../../types';
+export declare const useCashbackBonusQuery: Query<CashbackBonus | null, string>;

package/dist/client/hooks/useCashbackBonusQuery.js

@@ -0,0 +1,34 @@
+import { getCashbackBonus } from '@opexa/portal-sdk-core';
+import { useQuery } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
+import { getCashbackBonusQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getSession } from '../services/index.js';
+import { useSessionQuery } from './useSessionQuery.js';
+export const useCashbackBonusQuery = (id, config) => {
+    const queryClient = getQueryClient();
+    const sessionQuery = useSessionQuery();
+    const query = useQuery({
+        ...config,
+        enabled: config?.enabled === false
+            ? false
+            : sessionQuery.data?.status === 'authenticated',
+        queryKey: getCashbackBonusQueryKey(id),
+        queryFn: async ({ signal }) => {
+            const session = await queryClient.fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: () => getSession(),
+            });
+            invariant(session.status === 'authenticated');
+            return await getCashbackBonus(id, {
+                signal,
+                environment: ENVIRONMENT,
+                headers: {
+                    'Platform-Code': PLATFORM_CODE,
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+        },
+    });
+    return query;
+};

package/dist/client/hooks/useCashbackBonusesQuery.d.ts

@@ -0,0 +1,3 @@
+import { type CashbackBonus } from '@opexa/portal-sdk-core';
+import type { Query } from '../../types';
+export declare const useCashbackBonusesQuery: Query<CashbackBonus[]>;

package/dist/client/hooks/useCashbackBonusesQuery.js

@@ -0,0 +1,32 @@
+import { getCashbackBonuses } from '@opexa/portal-sdk-core';
+import { useQuery } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
+import { getCashbackBonusesQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getSession } from '../services/index.js';
+import { useSessionQuery } from './useSessionQuery.js';
+export const useCashbackBonusesQuery = (config) => {
+    const queryClient = getQueryClient();
+    const sessionQuery = useSessionQuery();
+    return useQuery({
+        ...config,
+        enabled: config?.enabled === false
+            ? false
+            : sessionQuery.data?.status === 'authenticated',
+        queryKey: getCashbackBonusesQueryKey(),
+        queryFn: async ({ signal }) => {
+            const session = await queryClient.fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: () => getSession(),
+            });
+            invariant(session.status === 'authenticated');
+            return await getCashbackBonuses({
+                signal,
+                environment: ENVIRONMENT,
+                headers: {
+                    'Platform-Code': PLATFORM_CODE,
+                },
+            });
+        },
+    });
+};

package/dist/client/hooks/useCashbackQuery.d.ts

@@ -0,0 +1,3 @@
+import { type Cashback } from '@opexa/portal-sdk-core';
+import type { Query } from '../../types';
+export declare const useCashbackQuery: Query<Cashback | null, string>;

package/dist/client/hooks/useCashbackQuery.js

@@ -0,0 +1,20 @@
+import { getCashback } from '@opexa/portal-sdk-core';
+import { useQuery } from '@tanstack/react-query';
+import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
+import { getCashbackQueryKey } from '../../utils/index.js';
+export const useCashbackQuery = (id, config) => {
+    return useQuery({
+        ...config,
+        enabled: !id ? false : config?.enabled,
+        queryKey: getCashbackQueryKey(id),
+        queryFn: async ({ signal }) => {
+            return await getCashback(id, {
+                signal,
+                environment: ENVIRONMENT,
+                headers: {
+                    'Platform-Code': PLATFORM_CODE,
+                },
+            });
+        },
+    });
+};

package/dist/client/hooks/useClaimCashbackBonusMutation.d.ts

@@ -0,0 +1,2 @@
+import type { Mutation } from '../../types';
+export declare const useClaimCashbackBonusMutation: Mutation<void, string>;

package/dist/client/hooks/useClaimCashbackBonusMutation.js

@@ -0,0 +1,28 @@
+import { claimCashbackBonus } from '@opexa/portal-sdk-core';
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
+import { getCashbackBonusesQueryKey, getClaimCashbackBonusMutationKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getSession } from '../services/index.js';
+export const useClaimCashbackBonusMutation = (config) => {
+    const queryClient = getQueryClient();
+    return useMutation({
+        ...config,
+        mutationKey: getClaimCashbackBonusMutationKey(),
+        mutationFn: async (id) => {
+            const session = await queryClient.fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: () => getSession(),
+            });
+            invariant(session.status === 'authenticated');
+            await claimCashbackBonus(id, {
+                environment: ENVIRONMENT,
+                headers: {
+                    'Platform-Code': PLATFORM_CODE,
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            queryClient.setQueryData(getCashbackBonusesQueryKey(), (prev) => prev?.filter((bonus) => bonus.id !== id));
+        },
+    });
+};

package/dist/client/hooks/useClaimSpotBonusMutation.d.ts

@@ -0,0 +1,2 @@
+import type { Mutation } from '../../types';
+export declare const useClaimSpotBonusMutation: Mutation<void, string>;

package/dist/client/hooks/useClaimSpotBonusMutation.js

@@ -0,0 +1,28 @@
+import { claimSpotBonus } from '@opexa/portal-sdk-core';
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
+import { getBonusesQueryKey, getClaimSpotBonusMutationKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { getSession } from '../services/index.js';
+export const useClaimSpotBonusMutation = (config) => {
+    const queryClient = getQueryClient();
+    return useMutation({
+        ...config,
+        mutationKey: getClaimSpotBonusMutationKey(),
+        mutationFn: async (id) => {
+            const session = await queryClient.fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: () => getSession(),
+            });
+            invariant(session.status === 'authenticated');
+            await claimSpotBonus(id, {
+                environment: ENVIRONMENT,
+                headers: {
+                    'Platform-Code': PLATFORM_CODE,
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            queryClient.setQueryData(getBonusesQueryKey(), (prev) => prev?.filter((bonus) => bonus.id !== id));
+        },
+    });
+};

package/dist/client/utils/createContext.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface CreateContextOptions<T, S extends boolean> {
+    strict?: S;
+    defaultValue?: T;
+}
+type CreateContextReturn<T, S extends boolean> = [S] extends [true] ? [React.Context<T>, () => T] : [React.Context<T>, () => T | null];
+export declare function createContext<T>(options?: CreateContextOptions<T, true>): CreateContextReturn<T, true>;
+export declare function createContext<T>(options?: CreateContextOptions<T, false>): CreateContextReturn<T, false>;
+export {};

package/dist/client/utils/createContext.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import invariant from 'tiny-invariant';
+export function createContext(options) {
+    const strict = options?.strict ?? true;
+    const defaultValue = options?.defaultValue ?? null;
+    const Context = React.createContext(defaultValue ?? null);
+    function useContext() {
+        const context = React.useContext(Context);
+        if (!context && strict)
+            invariant(context);
+        return context;
+    }
+    return [Context, useContext];
+}

package/dist/client/utils/index.d.ts

@@ -1,2 +1,3 @@
+export * from './createContext';
 export * from './createRecipeContext';
 export * from './toaster';

package/dist/client/utils/index.js

@@ -1,2 +1,3 @@
+export * from './createContext.js';
 export * from './createRecipeContext.js';
 export * from './toaster.js';

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

@@ -0,0 +1,2 @@
+import type { BonusesProps } from './Bonuses';
+export declare function Bonuses__client(props: BonusesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Bonuses/Bonuses.client.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { differenceInDays, differenceInHours, differenceInMinutes, isAfter, } from 'date-fns';
+import { clamp } from 'lodash-es';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+import { useInterval } from 'usehooks-ts';
+import { z } from 'zod';
+import { useBonusesQuery, useCashbackBonusesQuery, useClaimCashbackBonusMutation, useLocaleInfo, } from '../../client/hooks/index.js';
+import { Gift01Icon, StopWatchIcon } from '../../icons/index.js';
+import { Badge, Button, Progress, SegmentGroup } from '../../ui/index.js';
+import { capitalize, formatNumber, parseDecimal } from '../../utils/index.js';
+import { Empty } from '../Empty.js';
+import moneyOnHand from './money-on-hand.png';
+import piggyBank from './piggy-bank.png';
+const TABS = ['ALL', 'ACTIVE', 'CASHBACKS'];
+export function Bonuses__client(props) {
+    const [tab, setTab] = useState(TABS[0]);
+    const bonusesQuery = useBonusesQuery();
+    const cashbackBonusesQuery = useCashbackBonusesQuery();
+    const bonuses = tab === 'CASHBACKS'
+        ? []
+        : (bonusesQuery.data ?? []).filter((bonus) => {
+            return tab === 'ACTIVE' ? (new Date(), bonus.expiration) : true;
+        });
+    const cashbackBonuses = (cashbackBonusesQuery.data ?? []).filter((bonus) => {
+        return tab === 'ACTIVE'
+            ? isAfter(new Date(), bonus.cashback.activationEndDateTime)
+            : true;
+    });
+    const empty = bonuses.length === 0 && cashbackBonuses.length === 0;
+    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) => {
+                    setTab(z.enum(TABS).parse(details.value));
+                }, 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)))] }))] }));
+}
+function useExpirationCounter(value) {
+    const [now, setNow] = useState(new Date());
+    const expiration = new Date(value);
+    const expired = isAfter(now, expiration);
+    const days = expired ? 0 : differenceInDays(expiration, now);
+    const hours = expired ? 0 : differenceInHours(expiration, now) - days * 24;
+    const minutes = expired
+        ? 0
+        : differenceInMinutes(expiration, now) - days * 24 * 60 - hours * 60;
+    useInterval(() => setNow(new Date()), expired ? null : 1000);
+    return {
+        days,
+        hours,
+        minutes,
+        toString() {
+            return `${days}d:${hours}h:${minutes}m`;
+        },
+        expired,
+    };
+}
+function Bonus(props) {
+    const bonus = props.data;
+    const promo = bonus.promo;
+    const localeInfo = useLocaleInfo();
+    const expirationCounter = useExpirationCounter(bonus.expiration);
+    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
+                                    ? 'Expired'
+                                    : 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, {
+                                    currency: localeInfo.currency.code,
+                                }) }), _jsxs("p", { className: "text-text-secondary-700 text-xl font-semibold leading-none", children: ["/\u00A0", formatNumber(bonus.amount, {
+                                        currency: localeInfo.currency.code,
+                                    })] })] }), _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" }) })] })] }));
+}
+function CashbackBonus(props) {
+    const bonus = props.data;
+    const cashback = bonus.cashback;
+    const localeInfo = useLocaleInfo();
+    const claimCashbackBonusMutation = useClaimCashbackBonusMutation();
+    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex flex-col overflow-hidden rounded-2xl border", children: [cashback.banner?.url ? (_jsx(Image, { src: cashback.banner.url, alt: "", width: 400, height: 200, className: "h-auto w-full" })) : (_jsx(DefaultImage, { type: "cashback" })), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "text-center text-xl font-semibold text-white", children: cashback.name }), _jsx("h2", { className: "mt-2 text-center text-3xl font-semibold text-white", children: formatNumber(bonus.balance, {
+                            currency: localeInfo.currency.code,
+                        }) }), _jsx("div", { className: "text-text-secondary-700 mt-2 line-clamp-1 text-center text-sm", dangerouslySetInnerHTML: {
+                            __html: cashback.description,
+                        } }), _jsx("div", { className: "grow" }), _jsx(Button, { className: "mt-6", disabled: claimCashbackBonusMutation.isPending, onClick: () => {
+                            claimCashbackBonusMutation.mutate(bonus.id);
+                        }, children: "Claim" })] })] }));
+}
+function DefaultImage({ type }) {
+    return (_jsxs("div", { style: {
+            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)',
+        }, children: [type === 'bonus' && (_jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-auto w-[50%] shrink-0", draggable: false, width: 600 })), type === 'cashback' && (_jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-auto w-[50%] shrink-0", draggable: false, width: 600 }))] }));
+}

package/dist/components/Bonuses/Bonuses.d.ts

@@ -3,13 +3,13 @@ export interface BonusesProps {
     className?: string;
     /**
      * @description base URL for the bonus details page
-     * @default "/rewards"
+     * @default "/rewards/bonus"
      */
     viewBonusDetailsUrl?: string;
     /**
      * @description base URL for the cashback details page
-     * @default "/cashbacks"
+     * @default "/rewards/cashback"
      */
     viewCashbackDetailsUrl?: string;
 }
-export declare function Bonuses(props: BonusesProps): import("react/jsx-runtime").JSX.Element;
+export declare function Bonuses(props: BonusesProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Bonuses/Bonuses.js

@@ -1,15 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import Link from 'next/link';
-import { StopWatchIcon } from '../../icons/index.js';
-import { Badge, Button, Progress, SegmentGroup } from '../../ui/index.js';
-export function Bonuses(props) {
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Rewards' }), _jsxs(SegmentGroup.Root, { defaultValue: "all", className: "mt-3 w-full lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "active", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Active" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "cashbacks", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Cashback" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsxs("div", { className: "mt-3xl grid gap-3xl lg:grid-cols-3", children: [_jsx(Bonus, {}), _jsx(Cashback, {})] })] }));
-}
-function Bonus(props) {
-    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary overflow-hidden rounded-2xl border", children: [_jsxs("div", { className: "relative", children: [_jsx(Image, { src: "https://images.pexels.com/photos/5868275/pexels-photo-5868275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", alt: "", width: 400, height: 200, className: "h-auto w-full" }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: "brand", className: "absolute right-4 top-4", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: "9d:10h:11m" })] })] }), _jsxs("div", { className: "px-xl py-3xl", children: [_jsx("h2", { className: "text-center text-xl font-semibold text-white", children: "50 PHP First Deposit Bonus" }), _jsxs("div", { className: "text-text-primary-brand mt-xl flex justify-between", children: [_jsx("p", { children: "Your bonus" }), _jsx("p", { children: "\u20B120.00" })] }), _jsxs("div", { className: "text-text-primary-brand mt-2 flex justify-between", children: [_jsx("p", { children: "Wagering 40%" }), _jsx("p", { children: "400/1000" })] }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx(Button, { variant: "outline", className: "mt-6", asChild: true, children: _jsx(Link, { href: props.viewDetailsUrl ?? '/rewards/1', children: "See More" }) })] })] }));
-}
-function Cashback(props) {
-    console.log(props);
-    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary overflow-hidden rounded-2xl border", children: [_jsx(Image, { src: "https://images.pexels.com/photos/5868275/pexels-photo-5868275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", alt: "", width: 400, height: 200, className: "h-auto w-full" }), _jsxs("div", { className: "px-xl py-3xl", children: [_jsx("p", { className: "text-center text-xl font-semibold text-white", children: "Cashback" }), _jsx("h2", { className: "mt-2 text-center text-3xl font-semibold text-white", children: "\u20B120.48" }), _jsx("p", { className: "text-text-secondary-700 mt-2 text-center text-sm", children: "Claim your cashback reward and explore other exciting offers!" }), _jsx(Button, { className: "mt-6", children: "Claim" })] })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchBonusesQuery, prefetchCashbacksQuery, } from '../../server/utils/index.js';
+import { Bonuses__client } from './Bonuses.client.js';
+export async function Bonuses(props) {
+    await Promise.all([prefetchBonusesQuery(), prefetchCashbacksQuery()]);
+    return _jsx(Bonuses__client, { ...props });
 }

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

@@ -1,2 +1,2 @@
 import type { CashbackProps } from './Cashback';
-export declare function Cashback__client(props: CashbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Cashback__client(props: CashbackProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Cashback/Cashback.client.js

@@ -1,9 +1,27 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tz } from '@date-fns/tz';
+import { format } from 'date-fns';
 import Image from 'next/image';
 import Link from 'next/link';
-import { ChevronLeftIcon, ChevronRightIcon, StopWatchIcon } from '../../icons/index.js';
-import { Badge, Collapsible, Progress, Prose } from '../../ui/index.js';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore, useLocaleInfo, usePromoQuery, } from '../../client/hooks/index.js';
+import { ChevronLeftIcon } from '../../icons/index.js';
+import { Button, Prose } from '../../ui/index.js';
 export function Cashback__client(props) {
-    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." })] })] })] }));
+    const localeInfo = useLocaleInfo();
+    const promoQuery = usePromoQuery(props.id);
+    const promo = promoQuery.data;
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    if (!promo)
+        return null;
+    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: () => {
+                    globalStore.depositWithdrawal.setOpen(true);
+                }, 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', {
+                        in: tz(localeInfo.timezone),
+                    })] }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
+                    __html: promo.description,
+                } }), _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." })] })] }));
 }

package/dist/components/Cashback/Cashback.d.ts

@@ -1,10 +1,7 @@
 export interface CashbackProps {
     id: string;
+    /** @default '/promos' */
+    viewAllPromosUrl?: string;
     className?: string;
-    /**
-     * @description URL for the bonuses details page
-     * @default "/rewards"
-     */
-    viewAllUrl?: string;
 }
 export declare function Cashback(props: CashbackProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Cashback/Cashback.js

@@ -1,5 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { notFound } from 'next/navigation';
+import { prefetchCashbackQuery } from '../../server/utils/index.js';
+import { getPromoQueryKey, getQueryClient } from '../../utils/index.js';
 import { Cashback__client } from './Cashback.client.js';
 export async function Cashback(props) {
-    return _jsx(Cashback__client, { ...props });
+    await prefetchCashbackQuery(props.id);
+    const promo = getQueryClient().getQueryData(getPromoQueryKey(props.id));
+    if (promo) {
+        return _jsx(Cashback__client, { ...props });
+    }
+    else {
+        return notFound();
+    }
 }

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

@@ -0,0 +1,2 @@
+import type { CashbackBonusProps } from './CashbackBonus';
+export declare function CashbackBonus__client(props: CashbackBonusProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CashbackBonus/CashbackBonus.client.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { ChevronLeftIcon, ChevronRightIcon, StopWatchIcon } from '../../icons/index.js';
+import { Badge, Collapsible, Progress, Prose } from '../../ui/index.js';
+export function CashbackBonus__client(props) {
+    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." })] })] })] }));
+}

package/dist/components/CashbackBonus/CashbackBonus.d.ts

@@ -0,0 +1,10 @@
+export interface CashbackBonusProps {
+    id: string;
+    className?: string;
+    /**
+     * @description URL for the bonuses details page
+     * @default "/rewards"
+     */
+    viewAllUrl?: string;
+}
+export declare function CashbackBonus(props: CashbackBonusProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/CashbackBonus/CashbackBonus.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CashbackBonus__client } from './CashbackBonus.client.js';
+export async function CashbackBonus(props) {
+    return _jsx(CashbackBonus__client, { ...props });
+}

package/dist/components/CashbackBonus/index.d.ts

@@ -0,0 +1 @@
+export * from './CashbackBonus';

package/dist/components/CashbackBonus/index.js

@@ -0,0 +1 @@
+export * from './CashbackBonus.js';

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -8,8 +8,7 @@ export declare const OnlineBankDepositContext: import("react").Context<{
         amount: string;
         promo?: string | null;
     }) => void;
-} | null>;
-export declare const useOnlineBankDepositContext: () => {
+}>, useOnlineBankDepositContext: () => {
     view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.js

@@ -1,8 +1,2 @@
-import { createContext, useContext } from 'react';
-import invariant from 'tiny-invariant';
-export const OnlineBankDepositContext = createContext(null);
-export const useOnlineBankDepositContext = () => {
-    const context = useContext(OnlineBankDepositContext);
-    invariant(context);
-    return context;
-};
+import { createContext } from '../../../../client/utils/index.js';
+export const [OnlineBankDepositContext, useOnlineBankDepositContext] = createContext();

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -8,8 +8,7 @@ export declare const QRPHDepositContext: import("react").Context<{
         amount: string;
         promo?: string | null;
     }) => void;
-} | null>;
-export declare const useQRPHDepositContext: () => {
+}>, useQRPHDepositContext: () => {
     view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;