@opexa/portal-components 0.0.60 → 0.0.62

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

@@ -43,6 +43,8 @@ interface MessagesStore extends PopupStore {
 interface DepositWithdrawalStore extends PopupStore {
     tab: DepositWithdrawalTab;
     setTab: (tab: DepositWithdrawalTab) => void;
+    promo: string | null;
+    setPromo: (promo: string | null) => void;
 }
 interface GlobalStore {
     signUp: PopupStore;

package/dist/client/hooks/useGlobalStore.js

@@ -52,6 +52,15 @@ export const useGlobalStore = create((set) => ({
                 },
             }));
         },
+        promo: null,
+        setPromo(promo) {
+            set((prev) => ({
+                depositWithdrawal: {
+                    ...prev.depositWithdrawal,
+                    promo,
+                },
+            }));
+        },
     },
     gameLaunch: {
         details: { status: 'WAITING' },

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

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

package/dist/components/Cashback/Cashback.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 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." })] })] })] }));
+}

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

@@ -0,0 +1,10 @@
+export interface CashbackProps {
+    id: 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

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

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

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

package/dist/components/Cashback/index.js

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

package/dist/components/Promo/Promo.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 invariant from 'tiny-invariant';
+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 Promo__client(props) {
-    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"] }), _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-xl h-auto w-full rounded-xl lg:mt-6" }), _jsx(Button, { className: "mt-xl lg:mt-6", children: "Deposit Now" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: "Welcome Bonus 100% up to $500 + 10 Free Spins" }), _jsx("p", { className: "text-text-secondary-700 mt-xl lg:mt-6", children: "Ends 5/26/2025, 1:59:59 AM" }), _jsxs(Prose, { className: "mt-2xl lg:mt-6", children: [_jsx("p", { children: "Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien varius id." }), _jsx("p", { children: "Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet sodales id est ac volutpat." }), _jsx("p", { children: "Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci, tincidunt aenean tempus. Quis velit eget ut tortor tellus. Sed vel, congue felis elit erat nam nibh orci." }), _jsx("p", { children: "Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In aliquet pellentesque aenean hac vestibulum turpis mi bibendum diam. Tempor integer aliquam in vitae malesuada fringilla." }), _jsx("p", { children: "Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna. Viverra purus et erat auctor aliquam. Risus, volutpat vulputate posuere purus sit congue convallis aliquet. Arcu id augue ut feugiat donec porttitor neque. Mauris, neque ultricies eu vestibulum, bibendum quam lorem id. Dolor lacus, eget nunc lectus in tellus, pharetra, porttitor." }), _jsx("p", { children: "Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci, tincidunt aenean tempus. Quis velit eget ut tortor tellus. Sed vel, congue felis elit erat nam nibh orci." }), _jsx("h5", { children: "General Conditions:" }), _jsx("p", { children: "Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien varius id." }), _jsx("p", { children: "Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet sodales id est ac volutpat." })] }), _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." })] })] }));
+    const localeInfo = useLocaleInfo();
+    const promoQuery = usePromoQuery(props.id);
+    const promo = promoQuery.data;
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    invariant(promo);
+    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/Promo/Promo.js

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

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

@@ -3,5 +3,5 @@ interface PromosItemProps {
     promo: Promo;
     redirectUrl?: string;
 }
-export declare function PromosItem(props: PromosItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function PromosItem({ promo, redirectUrl, }: PromosItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Promos/PromoItem.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import Link from 'next/link';
+import { useShallow } from 'zustand/shallow';
+import { useAvailablePromosQuery, useGlobalStore } from '../../client/hooks/index.js';
 import { Button } from '../../ui/index.js';
-export function PromosItem(props) {
-    const { promo } = props;
-    return (_jsxs(Link, { href: `${props.redirectUrl ?? '/promos'}/${promo.id}`, className: "border-border-secondary bg-accent-50 bg-bg-primary-alt relative flex h-full flex-col overflow-hidden rounded-2xl border", children: [promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: promo.name, width: 1200, height: 500, priority: true, className: "block aspect-[365/180] w-full object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pb-3xl pt-2xl", children: [_jsx("div", { className: "w-full grow text-center text-xl font-semibold", children: promo.name }), _jsx("div", { className: "mt-auto pt-4", children: _jsx(Button, { size: "sm", asChild: true, children: _jsx("div", { role: "button", onClick: (e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                }, children: "Get bonus" }) }) })] })] }));
+export function PromosItem({ promo, redirectUrl = '/promos', }) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const availablePromos = useAvailablePromosQuery().data ?? [];
+    const claimablePromo = availablePromos.find((availablePromo) => availablePromo.id === promo.id);
+    return (_jsxs("div", { className: "border-border-secondary bg-accent-50 bg-bg-primary-alt relative flex h-full flex-col overflow-hidden rounded-2xl border", children: [promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: promo.name, width: 1200, height: 500, priority: true, className: "block aspect-[365/180] w-full object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pb-3xl pt-2xl", children: [_jsx("div", { className: "w-full grow text-center text-xl font-semibold", children: promo.name }), _jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: [claimablePromo && (_jsx(Button, { size: "sm", onClick: () => {
+                                    globalStore.depositWithdrawal.setOpen(true);
+                                    globalStore.depositWithdrawal.setPromo(promo.id);
+                                }, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { href: `${redirectUrl}/${promo.id}`, children: "Read more" }) })] })] })] }));
 }

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

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

package/dist/components/Rewards/Rewards.client.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { useBonusesQuery, useCashbacksQuery } from '../../client/hooks/index.js';
+import { StopWatchIcon } from '../../icons/index.js';
+import { Badge, Button, Progress, SegmentGroup } from '../../ui/index.js';
+export function Rewards__client(props) {
+    const bonusesQuery = useBonusesQuery();
+    const cashbacksQuery = useCashbacksQuery();
+    const bonuses = bonusesQuery.data ?? [];
+    const cashbacks = cashbacksQuery.data ?? [];
+    console.log({
+        bonuses,
+        cashbacks,
+    });
+    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, { viewDetailsUrl: props.viewBonusDetailsUrl ?? '/rewards/bonus' }), _jsx(Cashback, { viewDetailsUrl: props.viewCashbackDetailsUrl ?? '/rewards/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, 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" })] })] }));
+}

package/dist/components/Rewards/Rewards.d.ts

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

package/dist/components/Rewards/Rewards.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchBonusesQuery, prefetchCashbacksQuery, } from '../../server/utils/index.js';
+import { Rewards__client } from './Rewards.client.js';
+export async function Rewards(props) {
+    await Promise.all([prefetchBonusesQuery(), prefetchCashbacksQuery()]);
+    return _jsx(Rewards__client, { ...props });
+}

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

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

package/dist/components/Rewards/index.js

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

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

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

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -0,0 +1,117 @@
+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 { 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,
+    });
+    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", { 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);
+                                    }, 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"] })] })] }))] }));
+}

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

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

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -0,0 +1,53 @@
+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 { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore, useSignInMutation } from '../../client/hooks/index.js';
+import { toaster } from '../../client/utils/index.js';
+import { CheckIcon, EyeIcon, EyeOffIcon, FacebookIcon, GoogleIcon, } from '../../icons/index.js';
+import { Button, Checkbox, Field, PasswordInput } from '../../ui/index.js';
+import { useSignInContext } from './SignInContext.js';
+const Definition = z.object({
+    name: z.string(),
+    password: z.string(),
+    secretAnswer: z.string(),
+    termsAccepted: z.boolean().refine((val) => val, {
+        message: 'You must accept the terms and conditions',
+    }),
+});
+export function NameAndPasswordSignIn() {
+    const context = useSignInContext();
+    const dialog = useDialogContext();
+    const signUpStore = useGlobalStore(useShallow((popups) => popups.signUp));
+    const signInMutation = useSignInMutation();
+    const form = useForm({
+        resolver: zodResolver(Definition),
+        defaultValues: {
+            name: '',
+            password: '',
+            secretAnswer: '',
+        },
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit(async (data) => {
+                    try {
+                    }
+                    catch (e) {
+                        toaster.error({
+                            description: e instanceof Error
+                                ? e.message
+                                : 'Failed to send verification code',
+                        });
+                    }
+                }), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.name, children: [_jsx(Field.Label, { children: "Name" }), _jsx(Field.Input, { placeholder: "Enter your name", ...form.register('name') }), _jsx(Field.ErrorText, { children: form.formState.errors.name?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.name, className: "mt-xl", children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter your password", ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsx("button", { type: "button", tabIndex: -1, className: "text-button-tertiary-fg text-sm font-semibold", children: "Forgot Password" }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.secretAnswer, className: "mt-xl", children: [_jsx(Field.Label, { children: "What was the name of your first pet?" }), _jsx(Field.Input, { placeholder: "Answer the security question", ...form.register('secretAnswer') }), _jsx(Field.ErrorText, { children: form.formState.errors.secretAnswer?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: form.formState.isSubmitting, children: "Log In" }), _jsx(Controller, { control: form.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" })] })] }));
+}

package/dist/components/SignIn/SignIn.js

@@ -11,5 +11,5 @@ export function SignIn(props) {
     const signInStore = useGlobalStore(useShallow((popups) => popups.signIn));
     return (_jsx(Dialog.Root, { open: signInStore.open, onOpenChange: (details) => {
             signInStore.setOpen(details.open);
-        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsx(SignInForm, {})] }) })] }) }));
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-7.5 w-auto", draggable: false }), _jsx(SignInForm, {})] }) })] }) }));
 }

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

@@ -0,0 +1,12 @@
+type SignInStep = 1 | 2 | (number & {});
+type SignInType = 'NAME_AND_PASSWORD' | 'MOBILE_NUMBER';
+export interface UseSignInReturn {
+    step: SignInStep;
+    setStep: (step: SignInStep) => void;
+    type: SignInType;
+    setType: (type: SignInType) => void;
+}
+export declare function useSignIn(): UseSignInReturn;
+export declare const SignInContext: import("react").Context<UseSignInReturn | null>;
+export declare const useSignInContext: () => UseSignInReturn;
+export {};

package/dist/components/SignIn/SignInContext.js

@@ -0,0 +1,18 @@
+import { createContext, useContext, useState } from 'react';
+import invariant from 'tiny-invariant';
+export function useSignIn() {
+    const [step, setStep] = useState(1);
+    const [type, setType] = useState('MOBILE_NUMBER');
+    return {
+        step,
+        setStep,
+        type,
+        setType,
+    };
+}
+export const SignInContext = createContext(null);
+export const useSignInContext = () => {
+    const context = useContext(SignInContext);
+    invariant(context);
+    return context;
+};

package/dist/components/SignIn/SignInForm.js

@@ -1,118 +1,10 @@
 'use client';
-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 { useState } 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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MobileNumberSignIn } from './MobileNumberSignIn.js';
+import { NameAndPasswordSignIn } from './NameAndPasswordSignIn.js';
+import { SignInContext, useSignIn } from './SignInContext.js';
+import { SignInMethod } from './SignInMethod.js';
 export function SignInForm() {
-    const [step, setStep] = useState(1);
-    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,
-    });
-    return (_jsxs(_Fragment, { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Log in to your account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Welcome back! Please enter your details." }), _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
-                            try {
-                                await sendVerificationCodeMutation.mutateAsync({
-                                    channel: 'SMS',
-                                    recipient: mobileNumberParser.format(data.mobileNumber),
-                                    strict: true,
-                                });
-                                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" })] })] })), 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", { 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();
-                                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);
-                                    }, 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: () => {
-                                    setStep(1);
-                                    step2Form.reset();
-                                    cooldown.stop();
-                                }, children: [_jsx(ArrowLeftIcon, { className: "size-5" }), "Back"] })] })] }))] }));
+    const context = useSignIn();
+    return (_jsxs(SignInContext, { value: context, children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Log in to your account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Welcome back! Please enter your details." })] })), _jsx(SignInMethod, {}), context.type === 'MOBILE_NUMBER' && _jsx(MobileNumberSignIn, {}), context.type === 'NAME_AND_PASSWORD' && _jsx(NameAndPasswordSignIn, {})] }));
 }

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

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