@opexa/portal-components 0.0.27 → 0.0.29

package/dist/components/SignUp/SignUpForm.jsx

@@ -0,0 +1,230 @@
+'use client';
+import { useDialogContext } from '@ark-ui/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ObjectId, ObjectType } from '@opexa/portal-sdk-core/object-id';
+import { useSearchParams } from 'next/navigation';
+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, useSignUpMutation, } from '../../client/hooks/index.js';
+import { toaster } from '../../client/utils/index.js';
+import { ArrowLeftIcon, CheckIcon } from '../../icons/index.js';
+import { Button, Checkbox, Field, PinInput } from '../../ui/index.js';
+export function SignUpForm() {
+    const [step, setStep] = useState(1);
+    const dialog = useDialogContext();
+    const search = useSearchParams();
+    const signInStore = useGlobalStore(useShallow((popups) => popups.signIn));
+    const signUpMutation = useSignUpMutation();
+    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">
+            Create an account
+          </h2>
+          <p className="text-text-secondary-700 mt-xs text-center text-sm">
+            Register instantly and start playing!
+          </p>
+
+          <form className="mt-3xl" onSubmit={step1Form.handleSubmit(async (data) => {
+                try {
+                    await sendVerificationCodeMutation.mutateAsync({
+                        channel: 'SMS',
+                        recipient: mobileNumberParser.format(data.mobileNumber),
+                    });
+                    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}>
+              Create Account
+            </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="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);
+                signInStore.setOpen(true);
+            }}>
+              Log In
+            </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 id = ObjectId.generate(ObjectType.MemberAccount).toString();
+                const { mobileNumber } = step1Form.getValues();
+                try {
+                    await signUpMutation.mutateAsync({
+                        id,
+                        mobileNumber: mobileNumberParser.format(mobileNumber),
+                        verificationCode: verificationCode.join(''),
+                        referralCode: search.get('referralCode') ?? undefined,
+                        domain: search.get('domain') ?? undefined,
+                        btag: search.get('btag') ?? undefined,
+                    });
+                    const name = mobileNumberParser.format(mobileNumber);
+                    const password = `${name}${id}`;
+                    try {
+                        await signInMutation.mutateAsync({
+                            type: 'NAME_AND_PASSWORD',
+                            name: mobileNumberParser.format(mobileNumber),
+                            password,
+                        });
+                    }
+                    catch {
+                        signInStore.setOpen(true);
+                    }
+                    dialog.setOpen(false);
+                    step1Form.reset();
+                    step2Form.reset();
+                    setStep(1);
+                }
+                catch {
+                    toaster.error({
+                        title: '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:cursor-not-allowed disabled:opacity-75" 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>
+        </>)}
+    </>);
+}

package/dist/components/SignUp/SignUpTrigger.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 interface SignUpTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }

package/dist/components/SignUp/SignUpTrigger.jsx

@@ -0,0 +1,13 @@
+'use client';
+import { ark } from '@ark-ui/react';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/index.js';
+export function SignUpTrigger(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signUp: ctx.signUp,
+    })));
+    return (<ark.button type="button" {...props} onClick={(e) => {
+            globalStore.signUp.setOpen(!globalStore.signUp.open);
+            return props.onClick?.(e);
+        }} data-state={globalStore.signUp.open ? 'open' : 'closed'}/>);
+}

package/dist/components/SignUp/index.js

@@ -0,0 +1,2 @@
+export * from './SignUp';
+export * from './SignUpTrigger';

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

@@ -1,2 +1,2 @@
-import { TopWinsProps } from './TopWins';
+import type { TopWinsProps } from './TopWins';
 export declare function TopWins__client(props: TopWinsProps): import("react").JSX.Element | null;

package/dist/components/TopWins/TopWins.client.jsx

@@ -0,0 +1,48 @@
+'use client';
+import useEmblaCarousel from 'embla-carousel-react';
+import Image from 'next/image';
+import { useLocaleInfo, useTopWinsQuery } from '../../client/hooks/index.js';
+import { formatNumber, getGameImageUrl } from '../../utils/index.js';
+export function TopWins__client(props) {
+    const localeInfo = useLocaleInfo();
+    const topWinsQuery = useTopWinsQuery();
+    const topWins = topWinsQuery.data ?? [];
+    const [emblaRef] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    });
+    if (!topWins?.length)
+        return null;
+    return (<div className={props.className}>
+      <div className="mb-3 text-lg font-semibold md:mb-4">
+        {props.heading ?? 'Recent Big Wins'}
+      </div>
+
+      <div ref={emblaRef} className="relative lg:overflow-hidden">
+        <div className="flex gap-sm lg:gap-md">
+          {topWins.map((topWin) => (<div key={topWin.id} className="bg-bg-tertiary border-border-primary flex w-[calc((100%-(0.375rem*2))/3)] shrink-0 flex-col space-y-2 rounded-sm border p-2 text-center lg:w-[calc((100%-(0.5rem*5))/6)] xl:w-[calc((100%-(0.5rem*9))/10)]">
+              <div className="mx-auto aspect-square w-full">
+                {topWin.game && (<Image width={100} height={100} src={getGameImageUrl(topWin.game)} alt="" className="size-full rounded-sm object-cover"/>)}
+              </div>
+
+              <div className="space-y-0.5">
+                <div className="text-text-secondary-700 text-xs">
+                  {topWin.member.name}
+                </div>
+                <div className="text-text-primary-brand text-sm font-semibold">
+                  {formatNumber(topWin.payout, {
+                currency: localeInfo.currency.code,
+                minDecimalPlaces: 2,
+            })}
+                </div>
+                <div className="text-text-secondary-700 text-xs">
+                  {formatNumber(topWin.multiplier, {
+                minDecimalPlaces: 2,
+            })}
+                </div>
+              </div>
+            </div>))}
+        </div>
+      </div>
+    </div>);
+}

package/dist/components/TopWins/TopWins.jsx

@@ -0,0 +1,6 @@
+import { prefetchTopWinsQuery } from '../../server/utils/index.js';
+import { TopWins__client } from './TopWins.client';
+export async function TopWins(props) {
+    await prefetchTopWinsQuery();
+    return <TopWins__client {...props}/>;
+}

package/dist/components/TopWins/index.js

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

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

@@ -1,2 +1,2 @@
-import { TournamentCounterProps } from './TournamentCounter';
+import type { TournamentCounterProps } from './TournamentCounter';
 export declare function TournamentCounter__client(props: TournamentCounterProps): import("react").JSX.Element | null;

package/dist/components/TournamentCounter/TournamentCounter.client.jsx

@@ -0,0 +1,84 @@
+'use client';
+import useEmblaCarousel from 'embla-carousel-react';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { useJackpotsQuery } from '../../client/hooks/index.js';
+import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+import { TournamentCounterItem } from './TournamentCounterItem';
+export function TournamentCounter__client(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    });
+    const scrollPrev = useCallback(() => {
+        if (emblaApi)
+            emblaApi.scrollPrev();
+    }, [emblaApi]);
+    const scrollNext = useCallback(() => {
+        if (emblaApi)
+            emblaApi.scrollNext();
+    }, [emblaApi]);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const onSelect = useCallback(() => {
+        if (!emblaApi)
+            return;
+        setCanScrollPrev(emblaApi.canScrollPrev());
+        setCanScrollNext(emblaApi.canScrollNext());
+    }, [emblaApi]);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect();
+        emblaApi.on('select', onSelect);
+        emblaApi.on('reInit', onSelect);
+    }, [emblaApi, onSelect]);
+    const jackpotsQuery = useJackpotsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+            deleted: {
+                equal: false,
+            },
+        },
+        sort: {
+            cursor: 'POOL',
+            order: 'DESC',
+        },
+    });
+    const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    if (jackpots.length <= 0)
+        return null;
+    return (<div className={props.className}>
+      <div className="flex items-center justify-between">
+        <div className="text-lg font-semibold">
+          {props.heading ?? 'Tournaments'}
+        </div>
+        <div className="flex items-center md:gap-3xl">
+          <Link href={props.viewAllUrl ?? '/tournaments'} 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 disabled={!canScrollPrev} onClick={scrollPrev} variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" aria-label="Previous">
+              <ArrowLeftIcon className="size-5"/>
+            </Button>
+            <Button disabled={!canScrollNext} onClick={scrollNext} variant="outline" colorScheme="gray" className="rounded-l-none" aria-label="Next">
+              <span className="sr-only">Next</span>
+              <ArrowRightIcon className="size-5"/>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative mt-lg lg:overflow-hidden" ref={emblaRef}>
+        <div className="flex gap-2.5">
+          {jackpots.map((jackpot) => (<TournamentCounterItem key={jackpot.id} jackpot={jackpot} viewAllUrl={props.viewAllUrl} className="w-full"/>))}
+        </div>
+      </div>
+    </div>);
+}

package/dist/components/TournamentCounter/TournamentCounter.jsx

@@ -0,0 +1,20 @@
+import { prefetchJackpotsQuery } from '../../server/utils/index.js';
+import { TournamentCounter__client } from './TournamentCounter.client';
+export async function TournamentCounter(props) {
+    await prefetchJackpotsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+            deleted: {
+                equal: false,
+            },
+        },
+        sort: {
+            cursor: 'POOL',
+            order: 'DESC',
+        },
+    });
+    return <TournamentCounter__client {...props}/>;
+}

package/dist/components/TournamentCounter/TournamentCounterItem.d.ts

@@ -1,5 +1,5 @@
-import { Jackpot } from '@opexa/portal-sdk-core';
-import { default as React } from 'react';
+import type { Jackpot } from '@opexa/portal-sdk-core';
+import React from 'react';
 export interface TournamentCounterItemProps {
     jackpot: Jackpot;
     /** @default "/jackpots" */