@opexa/portal-components 0.0.28 → 0.0.30

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

@@ -1,46 +0,0 @@
-'use client';
-import { Button, Dialog } from '../../../ui';
-import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../../icons';
-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';
-import { Button } from '../../../ui';
-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';
-import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../../icons';
-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';
-import { XIcon } from '../../icons';
-import { Dialog } from '../../ui';
-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';
-import { toaster } from '../../client/utils';
-import { ArrowLeftIcon, CheckIcon, FacebookIcon, GoogleIcon } from '../../icons';
-import { Button, Checkbox, Field, PinInput } from '../../ui';
-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>
-        </>)}
-    </>);
-}

package/dist/components/SignUp/SignUp.jsx

@@ -1,32 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import Image, {} from 'next/image';
-import { Suspense } from 'react';
-import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks';
-import { XIcon } from '../../icons';
-import { Dialog } from '../../ui';
-import { SignUpForm } from './SignUpForm';
-export function SignUp(props) {
-    const signUpStore = useGlobalStore(useShallow((popups) => popups.signUp));
-    return (<Dialog.Root open={signUpStore.open} onOpenChange={(details) => {
-            signUpStore.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}/>
-
-            <Suspense>
-              <SignUpForm />
-            </Suspense>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>);
-}