@opexa/portal-components 0.0.957 → 0.0.958

package/dist/lib/components/Bonus/Bonus.client.d.ts

@@ -0,0 +1,12 @@
+import type { GameProvider } from '../../types';
+export interface BonusProps {
+    id: string;
+    className?: string;
+    /**
+     * @description URL for the bonuses details page
+     * @default "/rewards"
+     */
+    viewAllUrl?: string;
+    gameProviders: GameProvider[];
+}
+export declare function Bonus__client(props: BonusProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/lib/components/Bonus/Bonus.client.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { clamp } from 'lodash-es';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useBonusQuery } from '../../client/hooks/useBonusQuery.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { StopWatchIcon } from '../../icons/StopWatchIcon.js';
+import piggyBank from '../../images/piggy-bank.png';
+import { Badge } from '../../ui/Badge/index.js';
+import { Collapsible } from '../../ui/Collapsible/index.js';
+import { Progress } from '../../ui/Progress/index.js';
+import { Prose } from '../../ui/Prose/index.js';
+import { capitalize } from '../../utils/capitalize.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+export function Bonus__client(props) {
+    const bonusQuery = useBonusQuery(props.id);
+    const bonus = bonusQuery.data;
+    const gameProviders = props.gameProviders ?? [];
+    const enabledGameProviders = bonus?.enabledGameProviders ?? [];
+    const localeInfo = useLocaleInfo();
+    const remainingTime = useRemainingTime(bonus?.expiration ?? new Date());
+    if (!bonus)
+        return null;
+    const turnoverRequirement = parseDecimal(bonus.turnoverRequirement, 0);
+    const currentTurnoverRequirementContribution = parseDecimal(bonus.currentTurnoverRequirementContribution, 0);
+    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/rewards', className: "flex items-center gap-lg font-semibold text-button-tertiary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Rewards"] }), _jsx("div", { className: "mt-3xl", children: bonus.promo.banner?.url ? (_jsx(Image, { src: bonus.promo.banner.url, alt: "", width: 1024, height: 600, unoptimized: true, priority: true, className: "h-auto w-full rounded-xl" })) : (_jsx(DefaultImage, {})) }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'brand-dark', 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: "mt-xl font-semibold text-2xl text-text-primary-900 lg:mt-6 lg:text-3xl", children: bonus.promo.name }), _jsx("p", { className: "mt-xl text-base text-text-primary-brand 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: "mt-xl flex items-center justify-between rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: [_jsx("p", { children: "Your bonus balance" }), _jsx("p", { children: _jsx("span", { className: "text-text-primary-900", children: formatNumber(bonus.balance, {
+                                currency: localeInfo.currency.code,
+                                minDecimalPlaces: 2,
+                            }) }) })] }), _jsxs("div", { className: "mt-xl rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: ["Wagering", !Number.isNaN(Number(bonus.currentTurnoverRequirementContributionPercentage)) && _jsxs("p", { children: [bonus.currentTurnoverRequirementContributionPercentage, "%"] }), _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: 'flex w-full items-center justify-center gap-sm font-semibold text-button-tertiary-fg text-sm sm:justify-start', children: ["Game Provider Contribution", _jsx(Collapsible.Indicator, { asChild: true, children: _jsx(ChevronRightIcon, { className: "size-5" }) })] }), _jsx(Collapsible.Content, { className: "mt-xl space-y-1.5 rounded-md border border-border-primary bg-bg-tertiary px-3.5 py-xl text-text-secondary-700 lg:mt-6", children: Object.entries(bonus.promo
+                            .turnoverRequirementContributionPercentagePerGameProvider ?? {})
+                            .filter(([provider, valueAsString]) => gameProviders.includes(provider) && valueAsString !== "0")
+                            .map(([provider, valueAsString]) => {
+                            const value = parseDecimal(valueAsString, 0);
+                            return (_jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: capitalize(provider, {
+                                            delimiter: capitalize.delimiters.UNDERSCORE,
+                                        }) }), enabledGameProviders.includes(provider) ? (_jsxs(_Fragment, { children: [_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, {
+                                                        maxDecimalPlaces: 1,
+                                                        minDecimalPlaces: 0,
+                                                    }), "%"] })] })) : (_jsxs(_Fragment, { children: [_jsx(Progress.Root, { min: 0, max: 100, value: 0, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "shrink-0 lg:w-14 lg:text-right", children: "0%" })] }))] }, provider));
+                        }) })] }), _jsx(Prose, { className: "mt-xl lg:mt-6", dangerouslySetInnerHTML: { __html: bonus.promo.description } })] }));
+}
+function DefaultImage() {
+    return (_jsx("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)',
+        }, className: "overflow-hidden rounded-xl", children: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-auto w-[50%] shrink-0 rounded-xl", draggable: false, width: 1024, height: 1024, priority: true }) }));
+}

package/dist/lib/components/Bonus/Bonus.d.ts

@@ -0,0 +1,3 @@
+import { type BonusProps } from './Bonus.client';
+export declare function Bonus(props: BonusProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { BonusProps };

package/dist/lib/components/Bonus/Bonus.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { notFound } from 'next/navigation';
+import { getSession } from '../../server/services/getSession.js';
+import { prefetchBonusQuery } from '../../server/utils/prefetchBonusQuery.js';
+import { getBonus } from '../../services/wallet.js';
+import { stripTags } from '../../utils/stripTags.js';
+import { Bonus__client } from './Bonus.client.js';
+async function fetchBonus(id) {
+    const session = await getSession();
+    if (session.status === 'unauthenticated')
+        return null;
+    return await getBonus(id, {
+        headers: {
+            Authorization: `Bearer ${session.token}`,
+        },
+    });
+}
+export async function Bonus(props) {
+    const [result] = await Promise.allSettled([
+        fetchBonus(props.id),
+        prefetchBonusQuery(props.id),
+    ]);
+    if (result.status === 'fulfilled' && result.value) {
+        return (_jsxs(_Fragment, { children: [_jsx("meta", { name: "description", content: stripTags(result.value.promo.description) }), _jsx("meta", { name: "og:title", content: result.value.promo.name }), _jsx("meta", { name: "og:description", content: stripTags(result.value.promo.description) }), _jsx("meta", { name: "og:image", content: result.value.promo.banner?.url }), _jsx("meta", { name: "twitter:title", content: result.value.promo.name }), _jsx("meta", { name: "twitter:description", content: stripTags(result.value.promo.description) }), _jsx("meta", { name: "twitter:image", content: result.value.promo.banner?.url }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx(Bonus__client, { ...props })] }));
+    }
+    else {
+        return notFound();
+    }
+}

package/dist/lib/components/Bonus/index.d.ts

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

package/dist/lib/components/Bonus/index.js

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

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

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+export interface BonusesProps {
+    heading?: string | ReactNode;
+    className?: string;
+    /**
+     * @description base URL for the bonus details page
+     * @default "/rewards"
+     */
+    viewBonusDetailsUrl?: string;
+}
+export declare function Bonuses__client(props: BonusesProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,143 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { clamp } from 'lodash-es';
+import Image from 'next/image';
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useMemo } from 'react';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useBonusesQuery } from '../../client/hooks/useBonusesQuery.js';
+import { useCashbackBonusesQuery } from '../../client/hooks/useCashbackBonusesQuery.js';
+import { useClaimCashbackBonusMutation } from '../../client/hooks/useClaimCashbackBonusMutation.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { StopWatchIcon } from '../../icons/StopWatchIcon.js';
+import moneyOnHand from '../../images/money-on-hand.png';
+import piggyBank from '../../images/piggy-bank.png';
+import ribbonEnvelope from '../../images/ribbon-envelope.png';
+import { Badge } from '../../ui/Badge/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Popover } from '../../ui/Popover/index.js';
+import { Progress } from '../../ui/Progress/index.js';
+import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getCashbackBonusesQueryKey } from '../../utils/queryKeys.js';
+import { ClaimSpotBonus } from './ClaimSpotBonus.js';
+const TabSchema = z
+    .enum(['all', 'active', 'cashbacks'])
+    .optional()
+    .nullable()
+    .catch('all')
+    .transform((v) => v ?? 'all');
+export function Bonuses__client(props) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const tab = TabSchema.parse(searchParams.get('tab'));
+    const setTab = (tab) => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.set('tab', tab);
+        router.push(`${pathname}?${params.toString()}`);
+    };
+    const currentDate = useMemo(() => new Date(), []);
+    const bonusesQuery = useBonusesQuery({
+        ...(tab === 'active' && {
+            filter: {
+                expiration: {
+                    greaterThanOrEqual: currentDate,
+                },
+            },
+        }),
+    }, {
+        refetchInterval: 5000,
+        enabled: tab !== 'cashbacks',
+    });
+    const cashbackBonusesQuery = useCashbackBonusesQuery({
+        refetchInterval: 5000,
+    });
+    const bonuses = bonusesQuery.data ?? [];
+    const cashbackBonuses = cashbackBonusesQuery.data ?? [];
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "font-semibold text-lg", children: props.heading ?? 'Rewards' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
+                            setTab(TabSchema.parse(details.value));
+                        }, className: "mt-3", children: [_jsxs(SegmentGroup.Item, { value: "all", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "active", children: [_jsx(SegmentGroup.ItemText, { children: "Active" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "cashbacks", children: [_jsx(SegmentGroup.ItemText, { children: "Cashbacks" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsxs("div", { className: "mt-3xl grid gap-3xl lg:mt-lg lg:grid-cols-3", children: [tab === 'all' && _jsx(SpotBonus, {}), tab !== 'cashbacks' &&
+                                bonuses.map((bonus) => (_jsx(Bonus, { data: bonus, viewDetailsUrl: props.viewBonusDetailsUrl ?? '/rewards' }, bonus.id))), cashbackBonuses.map((cashbackBonus) => (_jsx(CashbackBonus, { data: cashbackBonus }, cashbackBonus.id))), tab === 'active' && bonuses.length === 0 && (_jsx(BonusesEmptyState, { heading: "Active" })), tab === 'cashbacks' && cashbackBonuses.length === 0 && (_jsx(BonusesEmptyState, { heading: "Cashbacks" }))] })] }), _jsx(ClaimSpotBonus, {})] }));
+}
+function Bonus(props) {
+    const bonus = props.data;
+    const promo = bonus.promo;
+    const localeInfo = useLocaleInfo();
+    const remainingTime = useRemainingTime(bonus.expiration);
+    const currentTurnoverRequirementContributionPercentage = parseDecimal(bonus.currentTurnoverRequirementContributionPercentage, 0);
+    const turnoverRequirement = parseDecimal(bonus.turnoverRequirement, 0);
+    return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [_jsxs("div", { className: "relative", children: [promo.banner?.url ? (_jsx(Image, { src: promo.banner.url, alt: "", width: 400, height: 200, className: "h-[11.25rem] w-full object-cover" })) : (_jsx("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: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'brand-dark', className: "absolute top-4 right-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: "line-clamp-1 text-center font-semibold text-xl", children: promo.name }), _jsx("div", { className: "mt-2 flex items-baseline justify-center gap-2", children: _jsx("p", { className: "font-semibold text-3xl leading-none", children: formatNumber(bonus.balance, {
+                                currency: localeInfo.currency.code,
+                                minDecimalPlaces: 2,
+                            }) }) }), _jsxs("div", { className: "mt-md flex justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Wagering ", currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [bonus.currentTurnoverRequirementContribution, "/", 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, { size: "sm", 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 queryClient = getQueryClient();
+    const claimCashbackBonusMutation = useClaimCashbackBonusMutation({
+        onSuccess() {
+            toaster.success({
+                description: 'Bonus claimed successfully!',
+            });
+            queryClient.invalidateQueries({
+                queryKey: getCashbackBonusesQueryKey(),
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const currentAccumulatedCashbackAmount = parseDecimal(bonus.balance, 0);
+    const totalAccumulatedCashbackAmount = parseDecimal(bonus.total, 0);
+    const minimumCashback = parseDecimal(props.data.cashback.minimumCashback, 0);
+    const maximumMonthlyCashbackLimit = parseDecimal(props.data.cashback.maximumMonthlyCashback, 0);
+    const hasNoCashback = currentAccumulatedCashbackAmount <= 0;
+    const hasReachedOrExceededMonthlyLimit = currentAccumulatedCashbackAmount === 0 &&
+        totalAccumulatedCashbackAmount === maximumMonthlyCashbackLimit;
+    const belowMinimumCashbackThreshold = currentAccumulatedCashbackAmount < minimumCashback;
+    const disabled = hasNoCashback ||
+        hasReachedOrExceededMonthlyLimit ||
+        belowMinimumCashbackThreshold;
+    return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [cashback.banner?.url ? (_jsx(Image, { src: cashback.banner.url, alt: "", width: 400, height: 200, className: "h-[11.25rem] w-full object-cover" })) : (_jsx("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: _jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "line-clamp-1 text-center font-semibold text-xl", children: cashback.name }), _jsx("h2", { className: 'mt-2 text-center font-semibold text-3xl', children: formatNumber(currentAccumulatedCashbackAmount, {
+                            currency: localeInfo.currency.code,
+                            minDecimalPlaces: 2,
+                        }) }), _jsx("div", { className: "mt-2 line-clamp-1 text-center text-sm text-text-secondary-700", dangerouslySetInnerHTML: {
+                            __html: cashback.description,
+                        } }), _jsx("div", { className: "grow" }), disabled ? (_jsxs(Popover.Root, { lazyMount: true, unmountOnExit: true, positioning: {
+                            placement: 'top',
+                        }, children: [_jsx(Button, { size: "sm", className: "mt-6", "aria-disabled": true, asChild: true, children: _jsx(Popover.Trigger, { children: "Claim" }) }), _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "rounded-md bg-bg-quaternary px-2.5 py-2 font-medium text-sm", children: [_jsx(Popover.Arrow, { className: "arrow-bg-bg-quaternary arrow-size-3", children: _jsx(Popover.ArrowTip, {}) }), hasReachedOrExceededMonthlyLimit ? (_jsx(_Fragment, { children: "You've claimed the maximum cashback for this month." })) : (_jsxs(_Fragment, { children: ["You need", ' ', formatNumber(minimumCashback - currentAccumulatedCashbackAmount, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }), ' ', "to claim this cashback."] }))] }) })] })) : (_jsx(Button, { size: "sm", className: "mt-6", disabled: claimCashbackBonusMutation.isPending || disabled, onClick: () => {
+                            claimCashbackBonusMutation.mutate(bonus.id);
+                        }, children: "Claim" }))] })] }));
+}
+function SpotBonus() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        spotBonus: ctx.spotBonus,
+    })));
+    return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [_jsx("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: _jsx(Image, { src: ribbonEnvelope, alt: "", className: "mx-auto h-[11.25rem] w-[80%] object-cover", draggable: false, width: 600, height: 341 }) }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "text-center font-semibold text-xl", children: "Special Rewards" }), _jsx("p", { className: "mt-2 text-center font-semibold text-3xl", children: "Promo Code" }), _jsx("p", { className: "mt-2 text-center text-sm text-text-secondary-700", children: "Have a promo code? Don\u2019t miss out, redeem it now\u00A0and\u00A0enjoy exclusive rewards!" }), _jsx("div", { className: "grow" }), _jsx(Button, { size: "sm", onClick: () => {
+                            globalStore.spotBonus.setOpen(true);
+                        }, className: "mt-6", children: "Enter Promo Code" })] })] }));
+}
+function BonusesEmptyState({ heading }) {
+    return (_jsxs("div", { className: "col-span-full mt-11 flex w-full flex-col items-center justify-center lg:col-span-3", children: [_jsx(Image, { width: 151, height: 107, src: moneyOnHand, alt: "Money on hand", className: 'size-full h-auto w-[151px] mix-blend-luminosity' }), _jsxs("div", { className: "mt-4 font-semibold text-base text-text-primary-900", children: ["No ", heading, " Rewards"] }), _jsxs("div", { className: "mt-1 text-center text-sm text-text-tertiary-600", children: ["No ", heading, " Rewards are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }));
+}

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

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

package/dist/lib/components/Bonuses/Bonuses.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { prefetchBonusesQuery } from '../../server/utils/prefetchBonusesQuery.js';
+import { prefetchCashbacksQuery } from '../../server/utils/prefetchCashbacksQuery.js';
+import { Bonuses__client } from './Bonuses.client.js';
+export async function Bonuses(props) {
+    await Promise.allSettled([prefetchBonusesQuery(), prefetchCashbacksQuery()]);
+    return (_jsx(Suspense, { fallback: null, children: _jsx(Bonuses__client, { ...props }) }));
+}

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

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface ClassNameEntries {
+    root?: string;
+    icon?: string;
+    unreadBadge?: string;
+}
+export interface BonusesTriggerProps extends Omit<ComponentPropsWithRef<'a'>, 'className'> {
+    className?: string | ClassNameEntries;
+}
+export declare function BonusesTrigger({ children, className, ...props }: BonusesTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Bonuses/BonusesTrigger.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isString } from 'lodash-es';
+import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
+import { useBonusesCountQuery } from '../../client/hooks/useBonusesCountQuery.js';
+import { useCashbackBonusesCountQuery } from '../../client/hooks/useCashbackBonusesCountQuery.js';
+import { Gift01Icon } from '../../icons/Gift01Icon.js';
+import { iconButtonRecipe } from '../../ui/IconButton/iconButton.recipe.js';
+export function BonusesTrigger({ children, className, ...props }) {
+    const bonusesCountQuery = useBonusesCountQuery({
+        refetchInterval: 10000,
+    });
+    const cashbackBonusesCountQuery = useCashbackBonusesCountQuery({
+        refetchInterval: 10000,
+    });
+    const bonusesCount = bonusesCountQuery.data ?? 0;
+    const cashbackBonusesCount = cashbackBonusesCountQuery.data ?? 0;
+    const totalCount = bonusesCount + cashbackBonusesCount;
+    const classNames = isString(className)
+        ? { root: className }
+        : (className ?? {});
+    return (_jsx(Link, { "aria-label": "View Rewards", "data-count": totalCount, ...props, href: props.href ?? '/rewards', className: iconButtonRecipe({
+            size: 'sm',
+            colorScheme: 'gray',
+            className: twMerge('relative', classNames.root),
+        }), children: children ?? (_jsxs(_Fragment, { children: [totalCount > 0 && (_jsx("div", { className: twMerge('-right-1.5 -top-1.5 absolute min-w-5 rounded-full border bg-brand-500 px-1.5 font-semibold text-2xs text-button-primary-fg leading-4.5', classNames.unreadBadge), children: totalCount })), _jsx(Gift01Icon, { className: classNames.icon })] })) }));
+}

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

@@ -0,0 +1 @@
+export declare function ClaimSpotBonus(): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/lib/components/Bonuses/ClaimSpotBonus.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+const Component = dynamic(() => import('./ClaimSpotBonus.lazy.js').then((m) => m.ClaimSpotBonus), {
+    ssr: false,
+    loading: () => null,
+});
+export function ClaimSpotBonus() {
+    const touched = useGlobalStore(useShallow((ctx) => ctx.spotBonus['~touched']));
+    if (touched)
+        return _jsx(Component, {});
+}

package/dist/lib/components/Bonuses/ClaimSpotBonus.lazy.d.ts

@@ -0,0 +1 @@
+export declare function ClaimSpotBonus(): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Bonuses/ClaimSpotBonus.lazy.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import Image from 'next/image';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useClaimSpotBonusMutation } from '../../client/hooks/useClaimSpotBonusMutation.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { toaster } from '../../client/utils/toaster.js';
+import ribbonEnvelope from '../../images/ribbon-envelope.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+const definition = z.object({
+    code: z
+        .string()
+        .min(1, 'Code is required')
+        .max(10, 'Promo code is too long (max 10 characters)')
+        .trim(),
+});
+export function ClaimSpotBonus() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        spotBonus: ctx.spotBonus,
+    })));
+    const claimSpotBonusMutation = useClaimSpotBonusMutation({
+        onSuccess() {
+            form.reset();
+            globalStore.spotBonus.setOpen(false);
+            toaster.success({
+                description: 'You have successfully redeemed your bonus!!',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const form = useForm({
+        resolver: zodResolver(definition),
+        defaultValues: {
+            code: '',
+        },
+    });
+    return (_jsx(Dialog.Root, { open: globalStore.spotBonus.open, onOpenChange: (details) => globalStore.spotBonus.setOpen(details.open), lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center lg:items-start", children: _jsxs(Dialog.Content, { className: "mx-auto w-[25rem] max-w-full overflow-y-auto rounded-xl p-3xl", children: [_jsx("div", { className: "overflow-hidden rounded-md", 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: _jsx(Image, { src: ribbonEnvelope, alt: "", className: "mx-auto h-[12.5rem] w-[80%] object-cover", draggable: false, width: 600, height: 341 }) }), _jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit((data) => {
+                                    claimSpotBonusMutation.mutate(data.code);
+                                }), children: [_jsx("h2", { className: "text-center font-semibold text-lg", children: "Enter Promo Code" }), _jsx("p", { className: "mt-xs text-center text-sm text-text-tertiary-600", children: "Claim your reward by entering a promo or gift code!" }), _jsxs(Field.Root, { invalid: !!form.formState.errors.code, className: "mt-2xl", children: [_jsx(Field.Input, { size: "sm", placeholder: "Enter promo code", ...form.register('code') }), _jsx(Field.ErrorText, { children: form.formState.errors.code?.message })] }), _jsxs("div", { className: "mt-4xl flex gap-lg", children: [_jsx(Button, { variant: "outline", onClick: () => {
+                                                    globalStore.spotBonus.setOpen(false);
+                                                    form.reset();
+                                                }, disabled: claimSpotBonusMutation.isPending, children: "Cancel" }), _jsx(Button, { type: "submit", disabled: claimSpotBonusMutation.isPending, children: "Claim" })] })] })] }) })] }) }));
+}

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

@@ -0,0 +1,2 @@
+export * from './Bonuses';
+export * from './BonusesTrigger';

package/dist/lib/components/Bonuses/index.js

@@ -0,0 +1,2 @@
+export * from './Bonuses.js';
+export * from './BonusesTrigger.js';

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

@@ -0,0 +1,18 @@
+export interface ClassNameEntries {
+    root?: string;
+    cashbackDescription?: string;
+}
+export interface CashbackProps {
+    id: string;
+    /** @default '/promos' */
+    viewAllPromosUrl?: string;
+    className?: string | ClassNameEntries;
+    transformDescription?: {
+        replacements: {
+            pattern: string;
+            replace: string;
+            flags?: string;
+        }[];
+    };
+}
+export declare function Cashback__client(props: CashbackProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,54 @@
+'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 { isString } from 'lodash-es';
+import Image from 'next/image';
+import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useAvailablePromosQuery } from '../../client/hooks/useAvailablePromosQuery.js';
+import { useCashbackQuery } from '../../client/hooks/useCashbackQuery.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Prose } from '../../ui/Prose/index.js';
+export function Cashback__client(props) {
+    const availablePromosQuery = useAvailablePromosQuery();
+    const cashbackQuery = useCashbackQuery(props.id);
+    const availablePromos = availablePromosQuery.data ?? [];
+    const cashback = cashbackQuery.data;
+    const claimable = availablePromos.some(({ id }) => id === props.id);
+    const localeInfo = useLocaleInfo();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    if (!cashback)
+        return null;
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    const descriptionHtml = (() => {
+        let html = cashback.description ?? '';
+        const cfg = props.transformDescription;
+        if (cfg?.replacements?.length) {
+            for (const r of cfg.replacements) {
+                try {
+                    const re = new RegExp(r.pattern, r.flags ?? 'g');
+                    html = html.replace(re, r.replace);
+                }
+                catch {
+                    // ignore invalid regex
+                }
+            }
+        }
+        return html;
+    })();
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "flex w-fit items-center gap-lg font-semibold text-button-tertiary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), cashback.banner?.url && (_jsx(Image, { src: cashback.banner.url, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), claimable && (_jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
+                    globalStore.depositWithdrawal.setOpen(true);
+                    globalStore.depositWithdrawal.setPromo(cashback.id);
+                }, children: "Deposit Now" })), _jsx("h1", { className: "mt-xl font-semibold text-2xl lg:mt-6 lg:text-3xl", children: cashback.name }), _jsxs("p", { className: "mt-xl text-text-secondary-700 lg:mt-6", children: ["Ends", ' ', format(cashback.activationEndDateTime, 'MM/dd/yyy hh:mm:ss a', {
+                        in: tz(localeInfo.timezone),
+                    })] }), _jsx(Prose, { className: twMerge('mt-2xl lg:mt-6', classNames.cashbackDescription), dangerouslySetInnerHTML: { __html: descriptionHtml } })] }));
+}

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

@@ -0,0 +1,3 @@
+import { type CashbackProps } from './Cashback.client';
+export declare function Cashback(props: CashbackProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { CashbackProps };

package/dist/lib/components/Cashback/Cashback.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { notFound } from 'next/navigation';
+import { prefetchCashbackQuery } from '../../server/utils/prefetchCashbackQuery.js';
+import { getCashback } from '../../services/wallet.js';
+import { stripTags } from '../../utils/stripTags.js';
+import { Cashback__client } from './Cashback.client.js';
+export async function Cashback(props) {
+    const [result] = await Promise.allSettled([
+        getCashback(props.id),
+        prefetchCashbackQuery(props.id),
+    ]);
+    if (result.status === 'fulfilled' && result.value) {
+        return (_jsxs(_Fragment, { children: [_jsx("meta", { name: "description", content: stripTags(result.value.description) }), _jsx("meta", { name: "og:title", content: result.value.name }), _jsx("meta", { name: "og:description", content: stripTags(result.value.description) }), _jsx("meta", { name: "og:image", content: result.value.banner?.url }), _jsx("meta", { name: "twitter:title", content: result.value.name }), _jsx("meta", { name: "twitter:description", content: stripTags(result.value.description) }), _jsx("meta", { name: "twitter:image", content: result.value.banner?.url }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx(Cashback__client, { ...props })] }));
+    }
+    else {
+        return notFound();
+    }
+}

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

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

package/dist/lib/components/Cashback/index.js

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

package/dist/lib/components/CustomPromo/CustomPromo.d.ts

@@ -0,0 +1,7 @@
+import type { CustomPromo as TCustomPromo } from '../../types';
+export interface CustomPromoProps {
+    promo: TCustomPromo;
+    viewAllPromosUrl?: string;
+    className?: string;
+}
+export declare function CustomPromo(props: CustomPromoProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/lib/components/CustomPromo/CustomPromo.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { Prose } from '../../ui/Prose/index.js';
+import { stripTags } from '../../utils/stripTags.js';
+export async function CustomPromo(props) {
+    return (_jsxs(_Fragment, { children: [_jsx("meta", { name: "description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "og:title", content: props.promo.name }), _jsx("meta", { name: "og:description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "og:image", content: props.promo.banner }), _jsx("meta", { name: "twitter:title", content: props.promo.name }), _jsx("meta", { name: "twitter:description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "twitter:image", content: props.promo.banner }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "flex w-fit items-center gap-lg font-semibold text-button-tertiary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), _jsx(Image, { src: props.promo.banner, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" }), _jsx("h1", { className: "mt-xl font-semibold text-2xl lg:mt-6 lg:text-3xl", children: props.promo.name }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {
+                            __html: props.promo.description,
+                        } })] })] }));
+}

package/dist/lib/components/CustomPromo/index.d.ts

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

package/dist/lib/components/CustomPromo/index.js

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

package/dist/lib/components/DateOfBirthField.d.ts

@@ -0,0 +1,10 @@
+import type { FocusEventHandler } from 'react';
+interface DateOfBirthFieldProps {
+    value?: Date | null;
+    onChange?: (value: Date | null) => void;
+    defaultValue?: Date | null;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+}
+export default function DateOfBirthField(props: DateOfBirthFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};