@opexa/portal-components 0.0.27 → 0.0.28

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

@@ -0,0 +1,46 @@
+'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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,58 @@
+'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

@@ -0,0 +1,38 @@
+'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/Quests/index.js

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

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

@@ -1,5 +1,5 @@
-import { ImageProps } from 'next/image';
-import { ReactNode } from 'react';
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
 export interface SignInProps {
     logo: ImageProps['src'];
     children?: ReactNode;

package/dist/components/SignIn/SignIn.jsx

@@ -0,0 +1,29 @@
+'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

@@ -0,0 +1,233 @@
+'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/SignIn/SignInTrigger.d.ts

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

package/dist/components/SignIn/SignInTrigger.jsx

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

package/dist/components/SignIn/index.js

@@ -0,0 +1,2 @@
+export * from './SignIn';
+export * from './SignInTrigger';

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

@@ -1,5 +1,5 @@
-import { ImageProps } from 'next/image';
-import { ReactNode } from 'react';
+import { type ImageProps } from 'next/image';
+import { type ReactNode } from 'react';
 export interface SignUpProps {
     logo: ImageProps['src'];
     children?: ReactNode;

package/dist/components/SignUp/SignUp.jsx

@@ -0,0 +1,32 @@
+'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>);
+}