@opexa/portal-components 0.0.64 → 0.0.65

package/dist/components/Promos/Promos.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { prefetchCashbacksQuery, prefetchPromosQuery, } from '../../server/utils/index.js';
-import { PromosCarousel } from './PromosCarousel.js';
-import { PromosGrid } from './PromosGrid.js';
-export async function Promos(props) {
-    await Promise.all([prefetchPromosQuery(), prefetchCashbacksQuery()]);
-    if (props.layout === 'grid') {
-        return _jsx(PromosGrid, { ...props });
-    }
-    else {
-        return _jsx(PromosCarousel, { ...props });
-    }
-}

package/dist/components/Promos/PromosCarousel.d.ts

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

package/dist/components/Promos/PromosCarousel.js

@@ -1,45 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import useEmblaCarousel, {} from 'embla-carousel-react';
-import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useCashbacksQuery, usePromosQuery } from '../../client/hooks/index.js';
-import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, Gift01Icon, } from '../../icons/index.js';
-import { Button } from '../../ui/index.js';
-import { Empty } from '../Empty.js';
-import { Cashback } from './Cashback.js';
-import { Promo } from './Promo.js';
-export function PromosCarousel(props) {
-    const promosQuery = usePromosQuery();
-    const cashbacksQuery = useCashbacksQuery();
-    const promos = promosQuery.data ?? [];
-    const cashbacks = cashbacksQuery.data ?? [];
-    const empty = promos.length <= 0 && cashbacks.length <= 0;
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-        align: 'start',
-        slidesToScroll: 1,
-        breakpoints: {
-            '(min-width: 1024px)': {
-                slidesToScroll: 3,
-            },
-        },
-    });
-    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
-    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
-    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
-    const onNextButtonClick = useCallback(async () => {
-        emblaApi?.scrollNext();
-    }, [emblaApi]);
-    const onSelect = useCallback((emblaApi) => {
-        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
-        setNextBtnDisabled(!emblaApi?.canScrollNext());
-    }, []);
-    useEffect(() => {
-        if (!emblaApi)
-            return;
-        onSelect(emblaApi);
-        emblaApi.on('reInit', onSelect).on('select', onSelect);
-    }, [emblaApi, onSelect]);
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promotions' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/promos', 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" }) })] })] })] }), empty && (_jsx(Empty, { icon: Gift01Icon, title: "No Promos", message: "No promo is currently available.", className: "mt-8" })), !empty && (_jsx(_Fragment, { children: _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsxs("div", { className: twMerge('grid auto-cols-[100%] grid-flow-col gap-1.5 lg:auto-cols-[calc((100%-(1.25rem*2))/3)] lg:gap-2xl'), children: [promos.map((promo) => (_jsx(Promo, { data: promo, viewDetailsUrl: props.viewPromoDetailsUrl ?? '/promos' }, promo.id))), cashbacks.map((cashback) => (_jsx(Cashback, { data: cashback, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/cashback' }, cashback.id)))] }) }) }))] }));
-}

package/dist/components/Promos/PromosGrid.d.ts

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

package/dist/components/Promos/PromosGrid.js

@@ -1,16 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCashbacksQuery, usePromosQuery } from '../../client/hooks/index.js';
-import { Cashback } from './Cashback.js';
-import { Promo } from './Promo.js';
-export function PromosGrid(props) {
-    const promosQuery = usePromosQuery();
-    const cashbacksQuery = useCashbacksQuery();
-    const promos = promosQuery.data ?? [];
-    const cashbacks = cashbacksQuery.data ?? [];
-    const empty = promos.length <= 0 && cashbacks.length <= 0;
-    if (empty) {
-        return (_jsx("div", { className: props.className, children: _jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promos' }), _jsx("div", { className: "grow" })] }) }));
-    }
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promos' }), _jsx("div", { className: "grow" })] }), _jsx("div", { className: "relative mt-lg lg:overflow-hidden", children: _jsxs("div", { className: "grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: [promos.map((promo) => (_jsx(Promo, { data: promo, viewDetailsUrl: props.viewPromoDetailsUrl ?? '/promos' }, promo.id))), cashbacks.map((cashback) => (_jsx(Cashback, { data: cashback, viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/promos/cashback' }, cashback.id)))] }) })] }));
-}

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

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

package/dist/components/Promos/index.js

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

package/dist/components/Protected/Protected.d.ts

@@ -1,6 +0,0 @@
-interface ProtectedProps {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-}
-export declare function Protected(props: ProtectedProps): import("react").ReactNode;
-export {};

package/dist/components/Protected/Protected.js

@@ -1,8 +0,0 @@
-'use client';
-import { useSessionQuery } from '../../client/hooks/index.js';
-export function Protected(props) {
-    const query = useSessionQuery();
-    return query.data?.status === 'authenticated'
-        ? props.children
-        : (props.fallback ?? null);
-}

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

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

package/dist/components/Protected/index.js

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

package/dist/components/Quests/CountdownTimer.d.ts

@@ -1,15 +0,0 @@
-import { type ReactNode } from 'react';
-type TimeLeft = {
-    days: number;
-    hours: number;
-    minutes: number;
-    seconds: number;
-};
-interface CountdownTimerProps {
-    startDateTime?: string;
-    endDateTime?: string;
-    renderAction: (timeLeft: TimeLeft) => ReactNode;
-    onEnd?: () => void;
-}
-export default function CountdownTimer({ startDateTime, endDateTime, renderAction, onEnd, }: CountdownTimerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Quests/CountdownTimer.js

@@ -1,33 +0,0 @@
-'use client';
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { differenceInSeconds, parseISO } from 'date-fns';
-import { useCallback, useEffect, useState } from 'react';
-export default function CountdownTimer({ startDateTime, endDateTime, renderAction, onEnd, }) {
-    const calculateTimeLeft = useCallback(() => {
-        const start = startDateTime ? parseISO(startDateTime) : new Date();
-        const end = endDateTime ? parseISO(endDateTime) : new Date();
-        const totalSeconds = Math.max(differenceInSeconds(end, start), 0);
-        const days = Math.floor(totalSeconds / (60 * 60 * 24));
-        const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
-        const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
-        const seconds = totalSeconds % 60;
-        return { days, hours, minutes, seconds };
-    }, [startDateTime, endDateTime]);
-    const [timeLeft, setTimeLeft] = useState(calculateTimeLeft);
-    useEffect(() => {
-        const interval = setInterval(() => {
-            const newTimeLeft = calculateTimeLeft();
-            setTimeLeft(newTimeLeft);
-            const isZero = newTimeLeft.days === 0 &&
-                newTimeLeft.hours === 0 &&
-                newTimeLeft.minutes === 0 &&
-                newTimeLeft.seconds === 0;
-            if (isZero) {
-                clearInterval(interval);
-                onEnd?.();
-            }
-        }, 1000);
-        return () => clearInterval(interval);
-    }, [calculateTimeLeft, onEnd]);
-    return _jsx(_Fragment, { children: renderAction(timeLeft) });
-}

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts

@@ -1,4 +0,0 @@
-import type { Quest } from '@opexa/portal-sdk-core';
-export declare function DailyCheckInQuest({ quest }: {
-    quest: Quest;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js

@@ -1,73 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { addDays, isEqual, startOfDay } from 'date-fns';
-import { useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useCheckInDailyCheckInQuestMutation } from '../../../client/hooks/index.js';
-import { toaster } from '../../../client/utils/index.js';
-import { CalendarIcon, CheckIcon, ClockStopWatchIcon, InfoCircleIcon, } from '../../../icons/index.js';
-import { Badge, Button } from '../../../ui/index.js';
-import { getAvailableQuestsQueryKey, getQueryClient } from '../../../utils/index.js';
-import CountdownTimer from '../CountdownTimer.js';
-import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
-export function DailyCheckInQuest({ quest }) {
-    const queryClient = getQueryClient();
-    const [showRules, setShowRules] = useState(false);
-    const [isExpired, setIsExpired] = useState(false);
-    const { name, description, status, lastCheckInDate, progressPercentage, checkInStreak, thirdDayBonusAmount, sixthDayBonusAmount, seventhDayBonusAmount, endDateTime, id, } = quest;
-    const today = startOfDay(new Date());
-    const hasCheckedInToday = lastCheckInDate
-        ? isEqual(today, startOfDay(new Date(lastCheckInDate)))
-        : false;
-    const checkedInRewards = {
-        3: thirdDayBonusAmount,
-        6: sixthDayBonusAmount,
-        7: seventhDayBonusAmount,
-    };
-    const dailyCheckedInData = Array.from({ length: 7 }, (_, i) => {
-        const day = i + 1;
-        return {
-            day,
-            reward: checkedInRewards[day] ?? 0,
-        };
-    });
-    const { mutate } = useCheckInDailyCheckInQuestMutation({
-        onSuccess() {
-            toaster.success({
-                title: 'Check-in successful 🎉',
-                description: 'You’ve successfully checked in for today! Keep it up to maintain your streak!',
-            });
-            queryClient.invalidateQueries({
-                queryKey: getAvailableQuestsQueryKey(),
-            });
-        },
-        onError(e) {
-            toaster.error({
-                title: 'Check-in successful 🎉',
-                description: e.message ?? 'Check-In Failed',
-            });
-        },
-    });
-    const handleCheckIn = async () => mutate(id);
-    return (_jsxs(_Fragment, { children: [_jsx(DailyCheckInQuestModal, { modalState: {
-                    isOpen: showRules,
-                    setIsOpen: setShowRules,
-                } }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(CountdownTimer, { endDateTime: endDateTime, renderAction: (timeLeft) => (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsxs(Badge.Label, { children: [timeLeft.days, "d:", timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => setIsExpired(true) }), _jsx("div", { role: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => {
-                                    const reward = item.reward ? `+₱${item.reward}` : '-';
-                                    return (_jsx("div", { className: twMerge('flex items-center justify-center', item.day <= (checkInStreak || 0)
-                                            ? 'text-brand-400'
-                                            : 'text-text-secondary-700'), children: _jsx("p", { children: reward }) }, item.day));
-                                }) }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercentage}%` } }) }), _jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => (_jsx("div", { className: "flex items-center justify-center", children: _jsx(CalendarWithDayNumber, { day: item.day, currentCheckedInDays: checkInStreak || 0 }, item.day) }, item.day))) })] }), _jsx(Button, { onClick: handleCheckIn, className: "disabled:bg-bg-primary disabled:text-text-disabled", disabled: isExpired ||
-                            status === 'COMPLETED' ||
-                            status === 'FAILED' ||
-                            hasCheckedInToday, children: hasCheckedInToday && status === 'IN_PROGRESS' ? (_jsx(CountdownTimer, { endDateTime: startOfDay(addDays(new Date(), 1)).toISOString(), renderAction: (timeLeft) => (_jsxs("div", { className: "flex items-center space-x-0.5", children: [_jsx(CheckIcon, {}), _jsxs("p", { children: [timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => {
-                                queryClient.invalidateQueries({
-                                    queryKey: getAvailableQuestsQueryKey(),
-                                });
-                            } })) : ('Check-In') })] })] }));
-}
-function CalendarWithDayNumber({ day, currentCheckedInDays, }) {
-    return (_jsxs("div", { className: twMerge('group relative h-fit w-fit', day <= currentCheckedInDays
-            ? 'text-brand-400'
-            : 'text-text-secondary-700'), children: [_jsx(CalendarIcon, {}), _jsx("div", { className: "absolute inset-0 mt-1 flex items-center justify-center text-2xs lg:mt-[2px]", children: _jsx("p", { className: "text-center", children: day }) })] }));
-}

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    modalState: {
-        isOpen: boolean;
-        setIsOpen: (isOpen: boolean) => void;
-    };
-}
-export declare function DailyCheckInQuestModal(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js

@@ -1,8 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../../icons/index.js';
-import { Button, Dialog } from '../../../ui/index.js';
-export function DailyCheckInQuestModal(props) {
-    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: "Daily Check-In Rules" }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn rewards just for checking in each day!" }), _jsx("li", { children: "Stay consistent to unlock special rewards on the 3rd, 5th, and 7th day." }), _jsx("li", { children: "Missing a day will reset your streak, starting again from Day 1." }), _jsx("li", { children: "Each check-in unlocks the next one on the following day." }), _jsx("li", { children: "Successfully check in for 7 consecutive days to complete the quest and reset the cycle." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
-}

package/dist/components/Quests/OnboardingQuest/OnboardingQuest.d.ts

@@ -1,4 +0,0 @@
-import type { Quest } from '@opexa/portal-sdk-core';
-export declare function OnboardingQuest(props: {
-    quest: Quest;
-}): null;

package/dist/components/Quests/OnboardingQuest/OnboardingQuest.js

@@ -1,4 +0,0 @@
-export function OnboardingQuest(props) {
-    console.log('OnboardingQuest not implemented', props.quest);
-    return null;
-}

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

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

package/dist/components/Quests/Quests.client.js

@@ -1,27 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import { useAvailableQuestsQuery } from '../../client/hooks/index.js';
-import { SpinnerIcon } from '../../icons/index.js';
-import closeChest from '../../images/close-chest.png';
-import { DailyCheckInQuest } from './DailyCheckInQuest/DailyCheckInQuest.js';
-import { OnboardingQuest } from './OnboardingQuest/OnboardingQuest.js';
-import { WageringQuest } from './WageringQuest/WageringQuest.js';
-const QUEST_COMPONENT_MAP = {
-    DAILY_CHECKIN: DailyCheckInQuest,
-    ONBOARDING: OnboardingQuest,
-    WAGERING: WageringQuest,
-};
-export function Quests__client(props) {
-    const query = useAvailableQuestsQuery();
-    if (query.isLoading) {
-        return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
-    }
-    if (!query.data?.length) {
-        return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { src: closeChest, width: 100, height: 100, alt: "No Quests Available", className: "mix-blend-luminosity", quality: 100 }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: "No available quests. Please check back later!" })] })] }));
-    }
-    return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "grid grid-cols-1 gap-3xl lg:grid-cols-3", children: query.data.map((quest, index) => {
-                    const QuestComponent = QUEST_COMPONENT_MAP[quest.type];
-                    return _jsx(QuestComponent, { quest: quest }, index);
-                }) })] }));
-}

package/dist/components/Quests/Quests.d.ts

@@ -1,6 +0,0 @@
-export interface QuestsProps {
-    /** @default "Quests" */
-    heading?: string;
-    className?: string;
-}
-export declare function Quests(props: QuestsProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Quests/Quests.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { prefetchAvailableQuestsQuery } from '../../server/utils/index.js';
-import { Quests__client } from './Quests.client.js';
-export async function Quests(props) {
-    await prefetchAvailableQuestsQuery();
-    return _jsx(Quests__client, { ...props });
-}

package/dist/components/Quests/WageringQuest/WageringQuest.d.ts

@@ -1,4 +0,0 @@
-import type { Quest } from '@opexa/portal-sdk-core';
-export declare function WageringQuest({ quest }: {
-    quest: Quest;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/WageringQuest/WageringQuest.js

@@ -1,19 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
-import { Badge } from '../../../ui/index.js';
-import CountdownTimer from '../CountdownTimer.js';
-import { WageringQuestModal } from './WageringQuestModal.js';
-export function WageringQuest({ quest }) {
-    const [showRules, setShowRules] = useState(false);
-    const [isExpired, setIsExpired] = useState(false);
-    const { progressPercentage, turnover, targetTurnover, name, description, endDateTime, bonus, status, } = quest;
-    return (_jsxs(_Fragment, { children: [_jsx(WageringQuestModal, { questName: name, modalState: {
-                    isOpen: showRules,
-                    setIsOpen: setShowRules,
-                } }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(CountdownTimer, { endDateTime: endDateTime, renderAction: (timeLeft) => (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsxs(Badge.Label, { children: [timeLeft.days, "d:", timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => setIsExpired(true) }), _jsx("div", { role: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: "text-text-primary-brand group flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", parseInt(progressPercentage).toFixed(2), "%"] }), _jsxs("p", { children: [turnover, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " PHP"] })] })] }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercentage}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx("div", { className: "bg-button-secondary-bg border-bg-primary-hover w-full rounded-md border px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { className: twMerge(isExpired || status === 'COMPLETED' || status === 'FAILED'
-                                    ? ['opacity-50 grayscale']
-                                    : ''), children: ["Complete to get ", _jsxs("span", { className: "text-brand-400", children: ["\u20B1", bonus] }), ' ', "bonus!"] }) }) })] })] }));
-}

package/dist/components/Quests/WageringQuest/WageringQuestModal.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    questName: string;
-    modalState: {
-        isOpen: boolean;
-        setIsOpen: (isOpen: boolean) => void;
-    };
-}
-export declare function WageringQuestModal(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Quests/WageringQuest/WageringQuestModal.js

@@ -1,8 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../../icons/index.js';
-import { Button, Dialog } from '../../../ui/index.js';
-export function WageringQuestModal(props) {
-    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: props.questName }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
-}

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

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

package/dist/components/Quests/index.js

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

package/dist/components/Search/Search.d.ts

@@ -1,6 +0,0 @@
-import { type ImageProps } from 'next/image';
-interface SearchProps {
-    logo: ImageProps['src'];
-}
-export declare function Search(props: SearchProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Search/Search.js

@@ -1,38 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import Image, {} from 'next/image';
-import { useRef, useState } from 'react';
-import { useShallow } from 'zustand/shallow';
-import { useGamesQuery, useGlobalStore } from '../../client/hooks/index.js';
-import { SearchLgIcon, XIcon } from '../../icons/index.js';
-import providerHacksaw from '../../images/hacksaw-gaming.png';
-import { Button, Dialog, Field, IconButton, Presence } from '../../ui/index.js';
-import { GameLaunchTrigger } from '../GameLaunch/index.js';
-export function Search(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        search: ctx.search,
-    })));
-    const inputRef = useRef(null);
-    const [search, setSearch] = useState('');
-    const gamesQuery = useGamesQuery({
-        first: 18,
-        search,
-    }, {
-        enabled: search.length >= 3,
-    });
-    const games = gamesQuery.data?.pages
-        .map((page) => page.edges.map((edge) => edge.node))
-        .flat() ?? [];
-    return (_jsx(Dialog.Root, { open: globalStore.search.open, onOpenChange: (details) => globalStore.search.setOpen(details.open), lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary lg:min-h-auto mx-auto min-h-full w-full pt-xl lg:mt-[132px] lg:max-w-[1136px] lg:bg-unset lg:pt-0", children: [_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex items-center justify-between px-4 lg:hidden", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 40, className: "h-8 w-auto" }), _jsx(IconButton, { size: "sm", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "text-text-quinary size-6" }) })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Dialog.Context, { children: (api) => (_jsx("button", { type: "button", onClick: () => api.setOpen(false), className: "hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex", children: _jsx(XIcon, { className: "size-5 text-white" }) })) }) }), _jsx("div", { className: "mt-2xl px-4 lg:mt-xl lg:px-0", children: _jsxs("div", { className: "relative", children: [_jsx(SearchLgIcon, { className: "text-text-quinary pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { ref: inputRef, type: "search", value: search, onChange: (e) => {
-                                                setSearch(e.target.value);
-                                            }, className: "pl-10 pr-16", placeholder: "Search", autoComplete: "off" }), _jsx(Presence, { present: search.length > 0, asChild: true, lazyMount: true, children: _jsx("button", { type: "button", className: "text-text-secondary-700 absolute right-3.5 top-1/2 -translate-y-1/2 font-semibold", onClick: () => {
-                                                    setSearch('');
-                                                    inputRef.current?.focus();
-                                                }, children: "Clear" }) })] }) }), _jsx("div", { className: "lg:bg-bg-primary lg:border-border-primary mt-2xl p-xl pb-3xl lg:mt-2 lg:rounded-xl lg:border", children: search.length <= 0 ? (_jsx(Alert, { message: "Search for your favorite game or provider." })) : search.length >= 1 && search.length <= 2 ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [games.length <= 0 && _jsx(Alert, { message: "No results found" }), games.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Providers" }), _jsx("div", { className: "mb-3xl mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: _jsx("div", { className: "bg-gray-800 flex h-14 w-full items-center rounded-md", children: _jsx(Image, { src: providerHacksaw, alt: "", width: 100, height: 50, className: "mx-auto h-auto w-full" }) }) }), _jsx("h2", { className: "text-lg font-semibold", children: "Games" }), _jsx("div", { className: "mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: games.map((game) => (_jsxs(GameLaunchTrigger, { game: game, className: "block w-full shadow-sm", onClick: () => {
-                                                            globalStore.search.setOpen(false);
-                                                        }, children: [_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 })] }, game.id))) }), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: "mx-auto mt-12 w-fit", onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })] }) })] }) }));
-}
-function Alert({ message }) {
-    return (_jsxs("div", { className: "py-lg", role: "alert", "aria-live": "polite", children: [_jsx("div", { className: "bg-bg-secondary shadow-xs border-border-primary mx-auto flex size-12 items-center justify-center rounded-lg border", children: _jsx(SearchLgIcon, { className: "text-text-secondary-700 size-6" }) }), _jsx("p", { className: "text-text-secondary-700 mt-4 text-center", children: message })] }));
-}

package/dist/components/Search/SearchTrigger.d.ts

@@ -1,5 +0,0 @@
-import type { ComponentPropsWithRef } from 'react';
-export interface SearchTriggerProps extends ComponentPropsWithRef<'button'> {
-    asChild?: boolean;
-}
-export declare function SearchTrigger(props: SearchTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Search/SearchTrigger.js

@@ -1,14 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ark } from '@ark-ui/react';
-import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
-export function SearchTrigger(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        search: ctx.search,
-    })));
-    return (_jsx(ark.button, { type: "button", "aria-label": "Search", "data-state": globalStore.search.open ? 'open' : 'closed', ...props, onClick: (e) => {
-            globalStore.search.setOpen(!globalStore.search.open);
-            return props.onClick?.(e);
-        } }));
-}

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

@@ -1,2 +0,0 @@
-export * from './Search';
-export * from './SearchTrigger';

package/dist/components/Search/index.js

@@ -1,2 +0,0 @@
-export * from './Search.js';
-export * from './SearchTrigger.js';

package/dist/components/SignIn/MobileNumberSignIn.d.ts

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

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -1,121 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useDialogContext } from '@ark-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCooldown, useGlobalStore, useLocaleInfo, useMobileNumberParser, useSendVerificationCodeMutation, useSignInMutation, } from '../../client/hooks/index.js';
-import { toaster } from '../../client/utils/index.js';
-import { ArrowLeftIcon, CheckIcon, FacebookIcon, GoogleIcon, } from '../../icons/index.js';
-import { Button, Checkbox, Field, PinInput } from '../../ui/index.js';
-import { useSignInContext } from './SignInContext.js';
-export function MobileNumberSignIn() {
-    const context = useSignInContext();
-    const dialog = useDialogContext();
-    const signUpStore = useGlobalStore(useShallow((popups) => popups.signUp));
-    const signInMutation = useSignInMutation();
-    const sendVerificationCodeMutation = useSendVerificationCodeMutation();
-    const localeInfo = useLocaleInfo();
-    const mobileNumberParser = useMobileNumberParser();
-    const Step1Definition = z.object({
-        mobileNumber: z.string().superRefine((v, ctx) => {
-            if (!mobileNumberParser.validate(v)) {
-                ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    message: 'Invalid mobile number',
-                });
-            }
-        }),
-        termsAccepted: z.boolean().superRefine((v, ctx) => {
-            if (!v) {
-                ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    message: 'You must accept the terms and conditions',
-                });
-            }
-        }),
-    });
-    const Step2Definition = z.object({
-        verificationCode: z.array(z.string().min(1).max(1).trim()).min(6).max(6),
-    });
-    const step1Form = useForm({
-        resolver: zodResolver(Step1Definition),
-        defaultValues: {
-            mobileNumber: '',
-            termsAccepted: false,
-        },
-    });
-    const step2Form = useForm({
-        resolver: zodResolver(Step2Definition),
-        defaultValues: {
-            verificationCode: Array.from({ length: 6 }).fill(''),
-        },
-    });
-    const cooldown = useCooldown({
-        max: 60,
-        duration: 1000 * 60,
-    });
-    const form2Ref = useRef(null);
-    return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
-                            try {
-                                await sendVerificationCodeMutation.mutateAsync({
-                                    channel: 'SMS',
-                                    recipient: mobileNumberParser.format(data.mobileNumber),
-                                    strict: true,
-                                });
-                                context.setStep(2);
-                                cooldown.start();
-                            }
-                            catch (e) {
-                                toaster.error({
-                                    description: e instanceof Error
-                                        ? e.message
-                                        : 'Failed to send verification code',
-                                });
-                            }
-                        }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "absolute left-3.5 top-1/2 size-5 shrink-0 -translate-y-1/2" }), _jsx(Field.Input, { className: "pl-11", placeholder: `${localeInfo.mobileNumber.areaCode}${localeInfo.mobileNumber.example}`, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Log In" }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Checkbox.Root, { className: "mt-xl", invalid: o.fieldState.invalid, checked: o.field.value, onCheckedChange: (details) => {
-                                        o.field.onChange(details.checked);
-                                    }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I accept the", ' ', _jsx("span", { className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), _jsx(Checkbox.HiddenInput, {})] })) })] }), _jsxs("div", { className: "relative mt-6 text-center", children: [_jsx("hr", { className: "-translte-y-1/2 text-text-tertiary-600/50 absolute top-1/2 w-full" }), _jsx("span", { className: "text-text-tertiary-600 bg-bg-primary-alt relative px-md text-center text-sm font-semibold", children: "Log in directly with" })] }), _jsxs("div", { className: "mt-6", children: [_jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                    dialog.setOpen(false);
-                                }, className: "border-border-primary bg-bg-primary text-text-secondary-700", children: [_jsx(GoogleIcon, { className: "size-6" }), "Continue with Google"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                    dialog.setOpen(false);
-                                }, className: "border-border-primary bg-bg-primary text-text-secondary-700 mt-lg", children: [_jsx(FacebookIcon, { className: "size-6" }), "Continue with Facebook"] })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
-                                    dialog.setOpen(false);
-                                    signUpStore.setOpen(true);
-                                }, children: "Sign up" })] })] })), context.step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
-                            const { mobileNumber } = step1Form.getValues();
-                            try {
-                                await signInMutation.mutateAsync({
-                                    type: 'MOBILE_NUMBER',
-                                    mobileNumber: mobileNumberParser.format(mobileNumber),
-                                    verificationCode: verificationCode.join(''),
-                                });
-                                dialog.setOpen(false);
-                                step1Form.reset();
-                                step2Form.reset();
-                                context.setStep(1);
-                            }
-                            catch {
-                                toaster.error({
-                                    description: 'Invalid Verification Code',
-                                });
-                            }
-                        }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(PinInput.Root, { placeholder: "0", invalid: o.fieldState.invalid, value: o.field.value, onValueChange: (details) => {
-                                        o.field.onChange(details.value);
-                                    }, otp: true, onValueComplete: () => {
-                                        form2Ref.current?.requestSubmit();
-                                    }, children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold", disabled: cooldown.cooling, onClick: async () => {
-                                            await sendVerificationCodeMutation.mutateAsync({
-                                                channel: 'SMS',
-                                                recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
-                                            });
-                                            cooldown.start();
-                                        }, children: cooldown.cooling
-                                            ? `Resend in ${cooldown.countdown}s`
-                                            : 'Resend' })] }), _jsxs("button", { type: "button", className: "text-text-tertiary-600 mx-auto mt-3xl flex w-fit items-center gap-1 text-sm font-semibold", onClick: () => {
-                                    context.setStep(1);
-                                    step2Form.reset();
-                                    cooldown.stop();
-                                }, children: [_jsx(ArrowLeftIcon, { className: "size-5" }), "Back"] })] })] }))] }));
-}