@opexa/portal-components 0.0.29 → 0.0.31

package/dist/components/Promos/PromoCarousel.jsx

@@ -1,69 +0,0 @@
-'use client';
-import useEmblaCarousel, {} from 'embla-carousel-react';
-import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { 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';
-import { PromosItem } from './PromoItem';
-export function PromoCarousel(props) {
-    const promosQuery = usePromosQuery({});
-    const promos = promosQuery.data || [];
-    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 (<div className={props.className}>
-      <div className="flex items-center">
-        <h2 className="text-lg font-semibold">
-          {props.heading ?? 'Promotions'}
-        </h2>
-        <div className="grow"/>
-        <div className="flex items-center justify-center gap-xl">
-          <Link href={props.viewAllUrl ?? '/promos'} className="text-button-tertiary-fg flex gap-sm text-sm font-semibold">
-            See All
-            <ChevronRightIcon className="size-5 lg:hidden"/>
-          </Link>
-          <div className="hidden lg:flex">
-            <Button variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" onClick={onPrevButtonClick} disabled={prevBtnDisabled} aria-label="Previous">
-              <ArrowLeftIcon className="size-5"/>
-            </Button>
-            <Button variant="outline" colorScheme="gray" className="rounded-l-none" onClick={onNextButtonClick} disabled={nextBtnDisabled} aria-label="Next">
-              <ArrowRightIcon className="size-5"/>
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {promos.length <= 0 && (<Empty icon={Gift01Icon} title="No Promos" message="No promo is currently available." className="mt-8"/>)}
-
-      {promos.length >= 1 && (<div ref={emblaRef} className="relative mt-lg lg:overflow-hidden">
-          <div className={twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/1)] grid-flow-col gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/3)] lg:gap-md')}>
-            {promos.map((promo) => (<PromosItem key={promo.id} promo={promo} shouldShowDescription={props.shouldShowDescription}/>))}
-          </div>
-        </div>)}
-    </div>);
-}

package/dist/components/Promos/PromoGrid.jsx

@@ -1,24 +0,0 @@
-'use client';
-import { twMerge } from 'tailwind-merge';
-import { usePromosQuery } from '../../client/hooks/index.js';
-import { Gift01Icon } from '../../icons/index.js';
-import { Empty } from '../Empty';
-import { PromosItem } from './PromoItem';
-export function PromoGrid(props) {
-    const promosQuery = usePromosQuery({});
-    const promos = promosQuery.data || [];
-    return (<div className={props.className}>
-      <div className="flex items-center">
-        <h2 className="text-lg font-semibold">{props.heading ?? 'Promos'}</h2>
-        <div className="grow"/>
-      </div>
-
-      {promos.length <= 0 && (<Empty icon={Gift01Icon} title="No Promos" message="No promo is currently available." className="mt-lg"/>)}
-
-      {promos.length >= 1 && (<div className="relative mt-lg lg:overflow-hidden">
-          <div className={twMerge('grid grid-cols-1 gap-sm lg:grid-cols-3 lg:gap-md')}>
-            {promos.map((promo) => (<PromosItem key={promo.id} promo={promo} shouldShowDescription={props.shouldShowDescription}/>))}
-          </div>
-        </div>)}
-    </div>);
-}

package/dist/components/Promos/PromoItem.jsx

@@ -1,24 +0,0 @@
-import Image from 'next/image';
-import { useRouter } from 'next/navigation';
-import { twJoin } from 'tailwind-merge';
-import { Button } from '../../ui/index.js';
-export function PromosItem(props) {
-    const { promo } = props;
-    const router = useRouter();
-    return (<div key={promo.id} className="border-gray-50 bg-accent-50 relative flex h-full flex-col rounded-md border">
-      {promo.banner.url && (<Image src={promo.banner.url} alt={promo.name} width={1200} height={500} priority className="aspect-[1200/500] w-full rounded-t-md object-cover"/>)}
-      <div className="flex flex-grow flex-col p-4">
-        <p className={twJoin('w-full text-xl font-bold', props.shouldShowDescription ? 'text-start' : 'text-center')}>
-          {promo.name}
-        </p>
-
-        {props.shouldShowDescription && promo.description && (<p className="text-gray-600 mb-2 line-clamp-2 w-full overflow-hidden text-start text-sm" dangerouslySetInnerHTML={{ __html: promo.description }}/>)}
-
-        <div className="mt-auto pt-4">
-          <Button className="w-full" variant="outline" onClick={() => router.push(`/promos/${promo.id}`)}>
-            Read More
-          </Button>
-        </div>
-      </div>
-    </div>);
-}

package/dist/components/Promos/Promos.jsx

@@ -1,10 +0,0 @@
-import { PromoCarousel } from './PromoCarousel';
-import { PromoGrid } from './PromoGrid';
-export function Promos(props) {
-    if (props.layout === 'grid') {
-        return <PromoGrid {...props}/>;
-    }
-    else {
-        return <PromoCarousel {...props}/>;
-    }
-}

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.jsx

@@ -1,104 +0,0 @@
-'use client';
-import { CalendarIcon, ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
-import { twMerge } from 'tailwind-merge';
-import { Button } from '../../../ui/index.js';
-import { useState } from 'react';
-import { DailyCheckInQuestModal } from './DailyCheckInQuestModal';
-export default function DailyCheckInQuest() {
-    const [showRules, setShowRules] = useState(false);
-    // dummy data
-    const dailyCheckedInData = [
-        {
-            day: 1,
-            reward: 0,
-        },
-        {
-            day: 2,
-            reward: 0,
-        },
-        {
-            day: 3,
-            reward: 5,
-        },
-        {
-            day: 4,
-            reward: 0,
-        },
-        {
-            day: 5,
-            reward: 10,
-        },
-        {
-            day: 6,
-            reward: 0,
-        },
-        {
-            day: 7,
-            reward: 20,
-        },
-    ];
-    const checkedInDays = 4;
-    const totalDays = 7;
-    const progressPercent = (checkedInDays / totalDays) * 100;
-    return (<>
-      <DailyCheckInQuestModal modalState={{
-            isOpen: showRules,
-            setIsOpen: setShowRules,
-        }}/>
-      <div className="border-border-primary bg-bg-tertiary flex h-full w-full min-w-[343px] flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5">
-        <div className="flex flex-col space-y-2">
-          <div className="flex max-h-7.5 items-start justify-between">
-            <div className="border-utility-brand-200 bg-utility-brand-50 rounded-xs flex items-center space-x-1 border py-1 pl-2 pr-2.5">
-              <ClockStopWatchIcon className="text-brand-400"/>
-              <p className="text-utility-brand-700 text-sm font-medium">
-                6d:10h:11m:10s
-              </p>
-            </div>
-
-            <div role="button" className="rounded-xs bg-bg-primary border-border-secondary cursor-pointer border p-2" onClick={() => setShowRules((prev) => !prev)}>
-              <InfoCircleIcon className="text-text-disabled"/>
-            </div>
-          </div>
-          <p className="text-xl font-semibold">Daily Check-In</p>
-          <p className="text-text-secondary-700 text-wrap text-sm font-normal">
-            Check in for 7 days in a row to earn a bonus, don’t miss a day to
-            keep your streak!
-          </p>
-        </div>
-
-        <div className="flex w-full flex-col space-y-2">
-          <div className="grid grid-cols-7">
-            {dailyCheckedInData.map((item) => {
-            const reward = item.reward ? `+₱${item.reward}` : '-';
-            return (<div key={item.day} className={twMerge('flex items-center justify-center', item.day <= checkedInDays
-                    ? 'text-brand-400'
-                    : 'text-text-secondary-700')}>
-                  <p>{reward}</p>
-                </div>);
-        })}
-          </div>
-
-          <div className="bg-bg-primary h-2 w-full overflow-hidden rounded-full">
-            <div className="bg-utility-brand-600 h-full rounded-full transition-all duration-300" style={{ width: `${progressPercent}%` }}/>
-          </div>
-
-          <div className="grid grid-cols-7">
-            {dailyCheckedInData.map((item) => (<div key={item.day} className="flex items-center justify-center">
-                <CalendarWithDayNumber key={item.day} day={item.day} currentCheckedInDays={checkedInDays}/>
-              </div>))}
-          </div>
-        </div>
-        <Button>Check-In</Button>
-      </div>
-    </>);
-}
-function CalendarWithDayNumber({ day, currentCheckedInDays, }) {
-    return (<div className={twMerge('group relative h-fit w-fit', day <= currentCheckedInDays
-            ? 'text-brand-400'
-            : 'text-text-secondary-700')}>
-      <CalendarIcon />
-      <div className="absolute inset-0 mt-[4px] flex items-center justify-center text-2xs lg:mt-[2px]">
-        <p className="text-center">{day}</p>
-      </div>
-    </div>);
-}

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

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

package/dist/components/Quests/Quests.jsx

@@ -1,12 +0,0 @@
-import DailyCheckInQuest from './DailyCheckInQuest/DailyCheckInQuest';
-import WageringQuest from './WageringQuest/WageringQuest';
-export function Quests() {
-    return (<div className="mt-6 flex w-full flex-col px-4 lg:px-0">
-      <h3 className="mb-3 text-lg">Quests</h3>
-
-      <div className="grid grid-cols-1 gap-3xl lg:grid-cols-3">
-        <DailyCheckInQuest />
-        <WageringQuest />
-      </div>
-    </div>);
-}

package/dist/components/Quests/WageringQuest/WageringQuest.jsx

@@ -1,58 +0,0 @@
-'use client';
-import { ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
-import { Button } from '../../../ui/index.js';
-import { useState } from 'react';
-import { WageringQuestModal } from './WageringQuestModal';
-export default function WageringQuest() {
-    const [showRules, setShowRules] = useState(false);
-    const totalBet = 200;
-    const targetBet = 500;
-    const progressPercent = (totalBet / targetBet) * 100;
-    return (<>
-      <WageringQuestModal modalState={{
-            isOpen: showRules,
-            setIsOpen: setShowRules,
-        }}/>
-      <div className="border-border-primary bg-bg-tertiary flex h-full w-full min-w-[343px] flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5">
-        <div className="flex flex-col space-y-2">
-          <div className="flex max-h-7.5 items-start justify-between">
-            <div className="border-utility-brand-200 bg-utility-brand-50 rounded-xs flex items-center space-x-1 border py-1 pl-2 pr-2.5">
-              <ClockStopWatchIcon className="text-brand-400"/>
-              <p className="text-utility-brand-700 text-sm font-medium">
-                6d:10h:11m:10s
-              </p>
-            </div>
-
-            <div role="button" className="rounded-xs bg-bg-primary border-border-secondary cursor-pointer border p-2" onClick={() => setShowRules((prev) => !prev)}>
-              <InfoCircleIcon className="text-text-disabled"/>
-            </div>
-          </div>
-          <p className="text-xl font-semibold">Slots - total bet of ₱500</p>
-          <p className="text-text-secondary-700 text-wrap text-sm font-normal">
-            Play any slot game and place a total of ₱500 in bets to claim your
-            reward!
-          </p>
-        </div>
-
-        <div className="flex w-full flex-col space-y-2">
-          <div className="text-text-primary-brand group flex items-center justify-between">
-            <p>Progress {progressPercent}%</p>
-            <p>
-              {totalBet}
-              <span className="text-text-quarterary-brand">/{targetBet}</span>
-            </p>
-          </div>
-          <div className="bg-bg-primary h-2 w-full overflow-hidden rounded-full">
-            <div className="bg-utility-brand-600 h-full rounded-full transition-all duration-300" style={{ width: `${progressPercent}%` }}/>
-          </div>
-        </div>
-        <div className="flex h-full items-end">
-          <Button variant="solid" className="bg-button-secondary-bg border-bg-primary-hover border text-white">
-            <p>
-              Complete to get <span className="text-brand-400">₱50</span> bonus!
-            </p>
-          </Button>
-        </div>
-      </div>
-    </>);
-}

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

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

package/dist/components/SignIn/SignIn.jsx

@@ -1,29 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import Image, {} from 'next/image';
-import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/index.js';
-import { XIcon } from '../../icons/index.js';
-import { Dialog } from '../../ui/index.js';
-import { SignInForm } from './SignInForm';
-export function SignIn(props) {
-    const signInStore = useGlobalStore(useShallow((popups) => popups.signIn));
-    return (<Dialog.Root open={signInStore.open} onOpenChange={(details) => {
-            signInStore.setOpen(details.open);
-        }} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
-      <Portal>
-        <Dialog.Backdrop />
-        <Dialog.Positioner>
-          <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">
-            <Dialog.CloseTrigger>
-              <XIcon />
-            </Dialog.CloseTrigger>
-
-            <Image src={props.logo} alt="" width={200} height={100} className="mx-auto h-auto w-[120px]" draggable={false}/>
-
-            <SignInForm />
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>);
-}

package/dist/components/SignIn/SignInForm.jsx

@@ -1,233 +0,0 @@
-'use client';
-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';
-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 (<>
-      {step === 1 && (<>
-          <h2 className="mt-xl text-center text-lg font-semibold">
-            Log in to your account
-          </h2>
-          <p className="text-text-secondary-700 mt-xs text-center text-sm">
-            Welcome back! Please enter your details.
-          </p>
-
-          <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',
-                    });
-                }
-            })}>
-            <Field.Root invalid={!!step1Form.formState.errors.mobileNumber}>
-              <Field.Label>Mobile Number</Field.Label>
-              <div className="relative">
-                <localeInfo.country.flag className="absolute left-3.5 top-1/2 size-5 shrink-0 -translate-y-1/2"/>
-                <Field.Input className="pl-11" placeholder={`${localeInfo.mobileNumber.areaCode}${localeInfo.mobileNumber.example}`} {...step1Form.register('mobileNumber')}/>
-              </div>
-              <Field.ErrorText>
-                {step1Form.formState.errors.mobileNumber?.message}
-              </Field.ErrorText>
-            </Field.Root>
-
-            <Button type="submit" className="mt-3xl" disabled={step1Form.formState.isSubmitting}>
-              Log In
-            </Button>
-
-            <Controller control={step1Form.control} name="termsAccepted" render={(o) => (<Checkbox.Root className="mt-xl" invalid={o.fieldState.invalid} checked={o.field.value} onCheckedChange={(details) => {
-                    o.field.onChange(details.checked);
-                }}>
-                  <Checkbox.Control>
-                    <Checkbox.Indicator asChild>
-                      <CheckIcon />
-                    </Checkbox.Indicator>
-                  </Checkbox.Control>
-                  <Checkbox.Label>
-                    I am at least 21 years of age and I accept the{' '}
-                    <span className="text-brand-400 whitespace-nowrap underline underline-offset-2">
-                      Terms and Conditions.
-                    </span>
-                  </Checkbox.Label>
-                  <Checkbox.HiddenInput />
-                </Checkbox.Root>)}/>
-          </form>
-
-          <div className="relative mt-6 text-center">
-            <hr className="-translte-y-1/2 text-text-tertiary-600/50 absolute top-1/2 w-full"/>
-            <span className="text-text-tertiary-600 bg-bg-primary-alt relative px-md text-center text-sm font-semibold">
-              Log in directly with
-            </span>
-          </div>
-
-          <div className="mt-6">
-            <Button variant="outline" colorScheme="gray" onClick={() => {
-                dialog.setOpen(false);
-            }} className="border-border-primary bg-bg-primary text-text-secondary-700">
-              <GoogleIcon className="size-6"/>
-              Continue with Google
-            </Button>
-            <Button variant="outline" colorScheme="gray" onClick={() => {
-                dialog.setOpen(false);
-            }} className="border-border-primary bg-bg-primary text-text-secondary-700 mt-lg">
-              <FacebookIcon className="size-6"/>
-              Continue with Facebook
-            </Button>
-          </div>
-
-          <div className="mt-6 flex w-full items-center justify-center gap-xs text-sm">
-            <span className="text-text-tertiary-600">
-              Don&apos;t have an account?
-            </span>
-            <button type="submit" className="text-button-tertiary-fg font-semibold" onClick={() => {
-                dialog.setOpen(false);
-                signUpStore.setOpen(true);
-            }}>
-              Sign up
-            </button>
-          </div>
-        </>)}
-
-      {step === 2 && (<>
-          <h2 className="mt-xl text-center text-lg font-semibold">
-            Check your Phone
-          </h2>
-          <p className="text-text-secondary-700 mt-xs text-center text-sm">
-            We&rsquo;ve sent a verification code to your mobile number{' '}
-            <span className="font-semibold">
-              {mobileNumberParser.format(step1Form.getValues('mobileNumber'))}
-            </span>{' '}
-            via text
-          </p>
-
-          <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',
-                    });
-                }
-            })}>
-            <Controller name="verificationCode" control={step2Form.control} render={(o) => (<PinInput.Root placeholder="0" invalid={o.fieldState.invalid} value={o.field.value} onValueChange={(details) => {
-                    o.field.onChange(details.value);
-                }}>
-                  <PinInput.Control className="grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md">
-                    <PinInput.Input index={0}/>
-                    <PinInput.Input index={1}/>
-                    <PinInput.Input index={2}/>
-                    <span className="text-text-placeholder-subtle text-2xl font-medium">
-                      –
-                    </span>
-                    <PinInput.Input index={3}/>
-                    <PinInput.Input index={4}/>
-                    <PinInput.Input index={5}/>
-                  </PinInput.Control>
-                  <PinInput.HiddenInput />
-                </PinInput.Root>)}/>
-
-            <Button type="submit" className="mt-4xl" disabled={step2Form.formState.isSubmitting}>
-              Verify
-            </Button>
-
-            <div className="mt-3 flex w-full items-center justify-center gap-xs text-sm">
-              <span className="text-text-secondary-700">
-                Didn&apos;t recieve the code?
-              </span>
-              <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();
-            }}>
-                {cooldown.cooling
-                ? `Resend in ${cooldown.countdown}s`
-                : 'Resend'}
-              </button>
-            </div>
-
-            <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();
-            }}>
-              <ArrowLeftIcon className="size-5"/>
-              Back
-            </button>
-          </form>
-        </>)}
-    </>);
-}