@opexa/portal-components 0.0.153 → 0.0.155

package/dist/components/AccountVerification/AccountVerification.js

@@ -6,7 +6,6 @@ import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
 import { useProfileCompletionQuery } from '../../client/hooks/useProfileCompletionQuery.js';
-import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { AlertCircleIcon } from '../../icons/AlertCircleIcon.js';
 import { CheckVerified02Icon } from '../../icons/CheckVerified02Icon.js';
 import { CreditCard02Icon } from '../../icons/CreditCard02Icon.js';
@@ -20,8 +19,6 @@ export function AccountVerification(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,
     })));
-    const sessionQuery = useSessionQuery();
-    const session = sessionQuery.data;
     const profileCompletionQuery = useProfileCompletionQuery();
     const profileCompletion = profileCompletionQuery.data;
     const verificationQuery = useMemberVerificationQuery();
@@ -33,8 +30,7 @@ export function AccountVerification(props) {
         verification?.status === 'UNVERIFIED';
     return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Verify your identity" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "Complete personal verification to unlock all features and enhance account security." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountVerification
                             ? 'text-text-success-primary'
-                            : 'text-text-warning-primary'), children: profileCompletion?.accountVerification ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("div", { className: "shadow-xs border-border-secondary bg-bg-primary-alt mt-5 rounded-xl border", children: [_jsx("div", { className: "px-4 py-5", children: _jsxs("ul", { className: "space-y-lg", children: [_jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FileCheck02Icon, {}), "Basic Information"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(Globe05Icon, {}), "Proof of address"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(CreditCard02Icon, {}), "Government ID"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FaceIdIcon, {}), "Facial Verification"] })] }) }), _jsx("div", { className: "border-border-secondary flex justify-end border-t px-4 py-3 lg:py-xl", children: ((verification && verification.status !== 'PENDING') ||
-                            session?.status === 'authenticated') && (_jsx(Button, { size: "sm", className: "w-full lg:w-fit", onClick: () => globalStore.kyc.setOpen(true), children: "Verify Now" })) })] }), success && _jsx(VerificationSuccess, {}), pending && _jsx(VerificationInProgress, {}), failed && _jsx(VerificationFailed, {}), empty && _jsx(VerificationNotSubmitted, {})] }));
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountVerification ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("div", { className: "shadow-xs border-border-secondary bg-bg-primary-alt mt-5 rounded-xl border", children: [_jsx("div", { className: "px-4 py-5", children: _jsxs("ul", { className: "space-y-lg", children: [_jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FileCheck02Icon, {}), "Basic Information"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(Globe05Icon, {}), "Proof of address"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(CreditCard02Icon, {}), "Government ID"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FaceIdIcon, {}), "Facial Verification"] })] }) }), _jsx("div", { className: "border-border-secondary flex justify-end border-t px-4 py-3 lg:py-xl", children: (!verification || verification?.status === 'REJECTED') && (_jsx(Button, { size: "sm", className: "w-full lg:w-fit", onClick: () => globalStore.kyc.setOpen(true), children: "Verify Now" })) })] }), success && _jsx(VerificationSuccess, {}), pending && _jsx(VerificationInProgress, {}), failed && _jsx(VerificationFailed, {}), empty && _jsx(VerificationNotSubmitted, {})] }));
 }
 function VerificationNotSubmitted() {
     return (_jsxs("div", { className: "shadow-xs border-border-primary bg-bg-primary-alt mt-6 flex flex-col gap-2 rounded-xl border p-xl lg:flex-row", children: [_jsx("div", { className: "border-text-warning-primary/10 flex size-[2.1875rem] items-center justify-center rounded-full border-2", children: _jsx("div", { className: "border-text-warning-primary/30 flex size-[1.666625rem] items-center justify-center rounded-full border-2", children: _jsx(AlertCircleIcon, { className: "text-text-warning-primary size-5" }) }) }), _jsx("p", { className: "text-text-tertiary-600 max-w-[800px] text-sm", children: "To serve you better and unlock all features, please provide valid identification documents. This helps protect your account and makes recovery easier if ever needed." })] }));

package/dist/components/DepositWithdrawal/Withdrawal/Withdrawal.js

@@ -84,7 +84,14 @@ export function Withdrawal() {
     return (_jsxs(_Fragment, { children: [_jsx(PaymentMethods, { value: paymentMethod, onChange: setPaymentMethod, options: enabledPaymentMethods }), paymentMethod === 'GCASH' && _jsx(GCashWithdrawal, {}), paymentMethod === 'MAYA' && _jsx(MayaWithdrawal, {}), paymentMethod === 'MAYA_APP' && _jsx(MayaAppWithdrawal, {}), paymentMethod === 'INSTAPAY' && _jsx(InstapayWithdrawal, {})] }));
 }
 function AccountVerificationRequired() {
-    return (_jsxs("div", { className: "pt-xl", children: [_jsx("div", { className: "bg-bg-warning-secondary mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, { className: "text-text-featured-icon-light-warning size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold", children: "Personal Verification" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: "To withdraw funds, you must first verify your identity. Complete personal verification to ensure your account\u2019s security." }), _jsx(Button, { className: "mt-3xl", children: "Verify Now" })] }));
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    return (_jsxs("div", { className: "pt-xl", children: [_jsx("div", { className: "bg-bg-warning-secondary mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, { className: "text-text-featured-icon-light-warning size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold", children: "Personal Verification" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: "To withdraw funds, you must first verify your identity. Complete personal verification to ensure your account\u2019s security." }), _jsx(Button, { className: "mt-3xl", onClick: () => {
+                    globalStore.kyc.setOpen(true);
+                    globalStore.depositWithdrawal.setOpen(false);
+                }, children: "Verify Now" })] }));
 }
 function InsufficientBalance() {
     const setTab = useGlobalStore(useShallow((ctx) => ctx.depositWithdrawal.setTab));

package/dist/components/KYC/AutoOpen.d.ts

@@ -0,0 +1 @@
+export declare function AutoOpen(): null;

package/dist/components/KYC/AutoOpen.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+export function AutoOpen() {
+    const kycStore = useGlobalStore(useShallow((ctx) => ctx.kyc));
+    const { data: session } = useSessionQuery();
+    const { data: account } = useAccountQuery();
+    const { data: verification } = useMemberVerificationQuery();
+    const shouldOpen = !account?.realName ||
+        !account?.birthDay ||
+        !verification ||
+        verification.status === 'REJECTED';
+    useEffect(() => {
+        if (session?.status == 'authenticated' &&
+            !kycStore['~touched'] &&
+            shouldOpen) {
+            kycStore.setOpen(true);
+            return;
+        }
+    }, [kycStore, session?.status, shouldOpen]);
+    return null;
+}

package/dist/components/KYC/BasicInformation.js

@@ -5,11 +5,11 @@ import { isNil, omitBy, size } from 'lodash-es';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import invariant from 'tiny-invariant';
+import { useInterval } from 'usehooks-ts';
 import { z } from 'zod';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useUpdateAccountMutation } from '../../client/hooks/useUpdateAccountMutation.js';
 import { toaster } from '../../client/utils/toaster.js';
-import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
@@ -55,6 +55,8 @@ export function BasicInformation() {
     });
     const accountQuery = useAccountQuery();
     const account = accountQuery.data;
+    const completed = account != null && account.realName != null && account.birthDay != null;
+    useInterval(() => kyc.setStep(2), completed ? 1000 : null);
     const updateAccountMutation = useUpdateAccountMutation({
         onError(error) {
             toaster.error({
@@ -80,8 +82,6 @@ export function BasicInformation() {
             });
         }
     }, [account, form, kyc]);
-    if (accountQuery.isLoading)
-        return _jsx(SpinnerIcon, {});
     return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Basic Information" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Enter your basic details for identification and communication." }), _jsxs("form", { className: "mt-3", onSubmit: form.handleSubmit((data) => {
                     invariant(account);
                     const input = omitBy({
@@ -93,5 +93,7 @@ export function BasicInformation() {
                     if (size(input) === 0)
                         return kyc.setStep(2);
                     updateAccountMutation.mutate(input);
-                }), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!accountQuery.data?.realName, children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-3", invalid: !!form.formState.errors.branchCode, readOnly: !!accountQuery.data?.birthDay, children: [_jsx(Field.Label, { children: "Date of Birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), _jsx(Button, { type: "submit", className: "mt-8", disabled: updateAccountMutation.isPending, children: "Continue" })] })] }));
+                }), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!accountQuery.data?.realName, children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-3", invalid: !!form.formState.errors.branchCode, readOnly: !!accountQuery.data?.birthDay, children: [_jsx(Field.Label, { children: "Date of Birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), _jsx(Button, { type: "submit", className: "mt-8", disabled: accountQuery.isLoading ||
+                            updateAccountMutation.isPending ||
+                            completed, children: completed ? (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", className: "size-5", children: [_jsx("path", { fill: "currentColor", d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25" }), _jsx("path", { fill: "currentColor", d: "M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z", children: _jsx("animateTransform", { attributeName: "transform", dur: "0.75s", repeatCount: "indefinite", type: "rotate", values: "0 12 12;360 12 12" }) })] })) : ('Continue') })] })] }));
 }

package/dist/components/KYC/FileUpload.js

@@ -1,17 +1,43 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Image from 'next/image';
+import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useFileQuery } from '../../client/hooks/useFileQuery.js';
+import invariant from 'tiny-invariant';
 import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
+import { getSession } from '../../client/services/getSession.js';
 import { UploadCloud02Icon } from '../../icons/UploadCloud02Icon.js';
+import { getFile } from '../../services/file.js';
 import { Button } from '../../ui/Button/index.js';
+import { createPoll } from '../../utils/createPoll.js';
 import { useKYCContext } from './KYCContext.js';
 import { validateFile } from './utils.js';
 function FileUpload({ value, name, hasDescription, onChange, captureObject, }) {
     const kyc = useKYCContext();
     const { mutate, isPending } = useUploadImageFileMutation();
-    const { data: uploadedImage, isSuccess: uploadedImageReady } = useFileQuery(value);
+    const [uploadedImageUrl, setUploadedImageUrl] = useState(null);
+    async function pollImage(id) {
+        if (!id)
+            return;
+        const poll = createPoll(async () => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const file = await getFile(id, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            return file ?? null;
+        }, { until: (r) => !!r, interval: 1000, maxAttempt: 5 });
+        const image = await poll();
+        if (!image) {
+            console.error('Image not found or failed to load');
+        }
+        setUploadedImageUrl(image?.url ?? null);
+    }
+    useEffect(() => {
+        pollImage(value);
+    }, [value]);
     if (isPending) {
         return (_jsx("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: _jsx("div", { className: "flex items-center justify-center", children: _jsx("span", { className: "text-text-secondary-700", children: "Uploading..." }) }) }));
     }
@@ -38,6 +64,6 @@ function FileUpload({ value, name, hasDescription, onChange, captureObject, }) {
             fileInput.click();
         }
     }
-    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [uploadedImageReady ? (_jsxs("div", { className: "border-border-primary bg-bg-primary min-h-[9.25rem]", children: [_jsx(Image, { src: uploadedImage?.url ?? '', alt: "Uploaded", className: "w-full object-contain", width: 350, height: 350, draggable: false }), _jsx(Button, { size: "xs", variant: "outline", className: twMerge('mx-auto mt-4 w-fit', value && 'hidden'), type: "button", onClick: handleUploadClick, children: "Reupload" })] })) : hasDescription ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg cursor-pointer font-semibold", onClick: handleUploadClick, children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] })] })) : null, _jsx("input", { type: "file", id: `file-upload-${name}`, name: name, onChange: handleFileChange, accept: "image/png, image/jpg, image/jpeg", className: "hidden" }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => kyc.setCapturing(captureObject), disabled: isPending, type: "button", children: value ? 'Retake Photo' : 'Take a Photo' })] }));
+    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [uploadedImageUrl ? (_jsxs("div", { className: "border-border-primary bg-bg-primary min-h-[9.25rem]", children: [_jsx(Image, { src: uploadedImageUrl, alt: "Uploaded", className: "w-full object-contain", width: 350, height: 350, draggable: false }), _jsx(Button, { size: "xs", variant: "outline", className: twMerge('mx-auto mt-4 w-fit', value && 'hidden'), type: "button", onClick: handleUploadClick, children: "Reupload" })] })) : hasDescription ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg cursor-pointer font-semibold", onClick: handleUploadClick, children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] })] })) : null, _jsx("input", { type: "file", id: `file-upload-${name}`, name: name, onChange: handleFileChange, accept: "image/png, image/jpg, image/jpeg", className: "hidden" }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => kyc.setCapturing(captureObject), disabled: isPending, type: "button", children: value ? 'Retake Photo' : 'Take a Photo' })] }));
 }
 export default FileUpload;

package/dist/components/KYC/KYC.js

@@ -4,11 +4,12 @@ import dynamic from 'next/dynamic';
 import Script from 'next/script';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { AutoOpen } from './AutoOpen.js';
 const Component = dynamic(() => import('./KYC.lazy.js').then((m) => m.KYC), {
     ssr: false,
     loading: () => null,
 });
 export function KYC(props) {
     const touched = useGlobalStore(useShallow((ctx) => ctx.kyc['~touched']));
-    return (_jsxs(_Fragment, { children: [touched && _jsx(Component, { ...props }), _jsx(Script, { src: "https://docs.opencv.org/4.7.0/opencv.js", async: true }), _jsx(Script, { src: "https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js", strategy: "afterInteractive" })] }));
+    return (_jsxs(_Fragment, { children: [touched && _jsx(Component, { ...props }), _jsx(AutoOpen, {}), _jsx(Script, { src: "https://docs.opencv.org/4.7.0/opencv.js", async: true }), _jsx(Script, { src: "https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js", strategy: "afterInteractive" })] }));
 }

package/dist/components/KYC/KYC.lazy.js

@@ -1,14 +1,11 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
-import { useEffect } from 'react';
 import { useShallow } from 'zustand/shallow';
-import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
+import { BasicInformation } from './BasicInformation.js';
 import { CaptureIdDocument } from './CaptureIdDocument.js';
 import { CaptureSelfie } from './CaptureSelfie.js';
 import { IdentityVerification } from './IdentityVerification.js';
@@ -17,31 +14,11 @@ import { KYCContext } from './KYCContext.js';
 import { PersonalInformation } from './PersonalInformation.js';
 import { useKYC } from './useKYC.js';
 export function KYC(props) {
-    const kyc = useKYC();
-    const accountQuery = useAccountQuery();
-    const memberVerification = useMemberVerificationQuery();
-    const isBasicInfoVerified = Boolean(accountQuery.data?.realName) &&
-        Boolean(accountQuery.data?.birthDay);
-    const isMemberUploaded = Boolean(memberVerification.data?.idFrontImage) &&
-        Boolean(memberVerification.data?.selfieImage);
-    const memberStatus = memberVerification.data?.status;
-    //check steps
-    useEffect(() => {
-        if (memberStatus === 'REJECTED') {
-            kyc.setStep(2);
-        }
-        else if (isBasicInfoVerified && isMemberUploaded) {
-            kyc.setStep(3);
-        }
-    }, [isBasicInfoVerified, isMemberUploaded, memberStatus, kyc]);
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,
     })));
+    const kyc = useKYC();
     return (_jsx(KYCContext, { value: kyc, children: _jsx(Dialog.Root, { open: globalStore.kyc.open, onOpenChange: (details) => {
                 globalStore.kyc.setOpen(details.open);
-            }, lazyMount: true, unmountOnExit: true, onExitComplete: () => {
-                kyc.setStep(2);
-                kyc.setDone(false);
-                kyc.setCapturing(null);
-            }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt lg:min-h-auto mx-auto min-h-full w-full lg:w-fit", children: [kyc.capturing === 'SELFIE' && _jsx(CaptureSelfie, {}), kyc.capturing === 'ID_DOCUMENT' && _jsx(CaptureIdDocument, {}), !kyc.capturing && (_jsxs("div", { className: "w-full p-3xl lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }))] }) })] }) }) }));
+            }, lazyMount: true, unmountOnExit: true, onExitComplete: kyc.reset, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt lg:min-h-auto mx-auto min-h-full w-full lg:w-fit", children: [kyc.capturing === 'SELFIE' && _jsx(CaptureSelfie, {}), kyc.capturing === 'ID_DOCUMENT' && _jsx(CaptureIdDocument, {}), !kyc.capturing && (_jsxs("div", { className: "w-full p-3xl lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 1 && _jsx(BasicInformation, {}), kyc.step === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }))] }) })] }) }) }));
 }

package/dist/components/KYC/useKYC.d.ts

@@ -21,6 +21,7 @@ export interface UseKYCReturn {
     setFrontImageId: (id: string | null) => void;
     selfieImageId: string | null;
     setSelfieImageId: (id: string | null) => void;
+    reset: () => void;
 }
 export declare function useKYC(): UseKYCReturn;
 export {};

package/dist/components/KYC/useKYC.js

@@ -17,6 +17,13 @@ export function useKYC() {
             subscriber(detail);
         });
     };
+    const reset = () => {
+        setStep(1);
+        setDone(false);
+        setCapturing(null);
+        setFrontImageId(null);
+        setSelfieImageId(null);
+    };
     return {
         step,
         setStep,
@@ -30,5 +37,6 @@ export function useKYC() {
         setSelfieImageId,
         subscribe,
         triggerEvent,
+        reset,
     };
 }

package/dist/components/Messages/Message.js

@@ -7,12 +7,8 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
 import { useMessageContext } from './MessageContext.js';
-import { MessageIcon } from './MessageIcon.js';
-import { useMessagesPropsContext } from './MessagesContext.js';
-import { normalizeActionUrl } from './utils.js';
+import { getMessageIcon } from './utils.js';
 export function Message() {
-    const messagesProps = useMessagesPropsContext();
-    const transactionsPageUrl = messagesProps.transactionsPageUrl ?? '/transactions';
     const message = useMessageContext();
     const localeInfo = useLocaleInfo();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
@@ -20,6 +16,7 @@ export function Message() {
         messages: ctx.messages,
     })));
     const markMessageAsReadMutation = useMarkMessageAsReadMutation();
+    const Icon = getMessageIcon(message.icon);
     const handleViewMessage = async () => {
         globalStore.message.setData(message);
         globalStore.message.setOpen(true);
@@ -27,11 +24,12 @@ export function Message() {
         if (!message.markedAsRead)
             markMessageAsReadMutation.mutate(message.id);
     };
+    const handleActionClick = (e) => {
+        e.stopPropagation();
+        globalStore.messages.setOpen(false);
+        globalStore.messages.setTab('ALL');
+    };
     return (_jsxs("div", { role: "button", tabIndex: 0, className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5", onClick: handleViewMessage, "aria-pressed": "false", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(message.dateTimeCreated), 'M/d/yyyy - h:mma', {
                             in: tz(localeInfo.timezone),
-                        }) }), !message.markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(MessageIcon, { type: message.icon, className: "text-brand-400 size-5" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), message.content && (_jsx("p", { className: "mt-2 line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } })), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: normalizeActionUrl(transactionsPageUrl, action.url), onClick: (e) => {
-                        e.stopPropagation();
-                        globalStore.messages.setOpen(false);
-                        globalStore.messages.setTab('ALL');
-                    }, children: action.name }, index))) }))] }));
+                        }) }), !message.markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [_jsx(Icon, { className: "text-brand-400" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } }), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: action.url, onClick: handleActionClick, children: action.name }, index))) }))] }));
 }

package/dist/components/Messages/MessageContext.d.ts

@@ -1,5 +1,5 @@
 import type { Message } from '../../types';
-export declare const MessageProvider: (props: {
+export declare const MessageContext: (props: {
     value: Message;
 } & {
     children?: import("react").ReactNode | undefined;

package/dist/components/Messages/MessageContext.js

@@ -1,2 +1,2 @@
 import { createContext } from '../../client/utils/createContext.js';
-export const [MessageProvider, useMessageContext] = createContext();
+export const [MessageContext, useMessageContext] = createContext();

package/dist/components/Messages/MessagePopup.d.ts

@@ -1 +1 @@
-export declare function MessagePopup(): import("react/jsx-runtime").JSX.Element;
+export declare const MessagePopup: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/MessagePopup.js

@@ -1,24 +1,20 @@
 'use client';
 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 { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { MessageIcon } from './MessageIcon.js';
-import { useMessagesPropsContext } from './MessagesContext.js';
-import { normalizeActionUrl } from './utils.js';
-export function MessagePopup() {
-    const messagesProps = useMessagesPropsContext();
-    const transactionsPageUrl = messagesProps.transactionsPageUrl ?? '/transactions';
+import { getMessageIcon } from './utils.js';
+export const MessagePopup = () => {
     const globalStore = useGlobalStore(useShallow((ctx) => ({ message: ctx.message })));
+    const Icon = getMessageIcon(globalStore.message.data?.icon ?? 'MESSAGE');
     return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.message.open, onOpenChange: ({ open }) => {
             globalStore.message.setOpen(open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl px-xl pb-0 pt-5 shadow-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "bg-bg-brand-secondary mx-auto w-fit rounded-full p-3", children: _jsx(MessageIcon, { type: globalStore.message.data?.icon ?? 'INFO', className: "text-text-brand size-6" }) }), _jsx("p", { className: "text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight", children: globalStore.message.data?.title }), globalStore.message.data?.content && (_jsx("div", { className: "text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight", dangerouslySetInnerHTML: {
-                                            __html: globalStore.message.data.content,
-                                        } })), globalStore.message.data?.image && (_jsx(Image, { src: globalStore.message.data.image, alt: "", width: 400, height: 400, loading: "lazy", unoptimized: true, className: "mt-5 h-auto w-full" }))] }), globalStore.message.data?.actions.length ? (_jsx("div", { className: "flex flex-col space-y-2 px-4 pb-8 pt-6 text-center", children: globalStore.message.data.actions.map((action, index) => (_jsx(Link, { className: "bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold", href: normalizeActionUrl(transactionsPageUrl, action.url), onClick: () => {
+        }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl px-xl pb-0 pt-5 shadow-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "bg-bg-brand-secondary mx-auto w-fit rounded-full p-3", children: _jsx(Icon, { className: "text-text-brand", height: "24", width: "24" }) }), _jsx("p", { className: "text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight", children: globalStore.message.data?.title }), _jsx("div", { className: "text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight", dangerouslySetInnerHTML: {
+                                            __html: globalStore.message.data?.content ?? '',
+                                        } })] }), globalStore.message.data?.actions.length ? (_jsx("div", { className: "flex flex-col space-y-2 px-4 pb-8 pt-6 text-center", children: globalStore.message.data.actions.map((action, index) => (_jsx(Link, { className: "bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold", href: action.url, onClick: () => {
                                         globalStore.message.setOpen(false);
                                     }, children: action.name }, index))) })) : null] }) })] }) }));
-}
+};

package/dist/components/Messages/MessagesPopup.js

@@ -22,8 +22,11 @@ export function MessagesPopup() {
     const messagesProps = useMessagesPropsContext();
     const transactionsPageUrl = messagesProps.transactionsPageUrl ?? '/transactions';
     const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
         message: ctx.message,
         messages: ctx.messages,
+        gameLaunch: ctx.gameLaunch,
+        depositWithdrawal: ctx.depositWithdrawal,
     })));
     const markMessageAsReadMutation = useMarkMessageAsReadMutation();
     const [paused, setPaused] = useState(false);
@@ -53,7 +56,12 @@ export function MessagesPopup() {
             },
         },
     }, {
-        enabled: !globalStore.messages.open && !globalStore.message.open && !paused,
+        enabled: globalStore.gameLaunch.details.status === 'WAITING' &&
+            !globalStore.depositWithdrawal.open &&
+            !globalStore.messages.open &&
+            !globalStore.message.open &&
+            !globalStore.kyc.open &&
+            !paused,
         refetchInterval: disclosure.open ? undefined : 10_000,
     });
     const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [];
@@ -65,7 +73,7 @@ export function MessagesPopup() {
     }, [disclosure, messages.length, paused]);
     return (_jsx(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => {
             disclosure.setOpen(details.open);
-        }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Carousel.Root, { page: page, onPageChange: (details) => {
+        }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Carousel.Root, { page: page, onPageChange: (details) => {
                                     setPage(details.page);
                                     const message = messages.at(details.page - 1);
                                     if (!message)

package/dist/components/Quests/CountdownTimer.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+type TimeLeft = {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+interface CountdownTimerProps {
+    startDateTime?: string;
+    endDateTime?: string;
+    renderAction: (timeLeft: TimeLeft) => ReactNode;
+    onEnd?: () => void;
+}
+export default function CountdownTimer({ startDateTime, endDateTime, renderAction, onEnd, }: CountdownTimerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Quests/CountdownTimer.js

@@ -0,0 +1,33 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { differenceInSeconds, parseISO } from 'date-fns';
+import { useCallback, useEffect, useState } from 'react';
+export default function CountdownTimer({ startDateTime, endDateTime, renderAction, onEnd, }) {
+    const calculateTimeLeft = useCallback(() => {
+        const start = startDateTime ? parseISO(startDateTime) : new Date();
+        const end = endDateTime ? parseISO(endDateTime) : new Date();
+        const totalSeconds = Math.max(differenceInSeconds(end, start), 0);
+        const days = Math.floor(totalSeconds / (60 * 60 * 24));
+        const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
+        const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
+        const seconds = totalSeconds % 60;
+        return { days, hours, minutes, seconds };
+    }, [startDateTime, endDateTime]);
+    const [timeLeft, setTimeLeft] = useState(calculateTimeLeft);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            const newTimeLeft = calculateTimeLeft();
+            setTimeLeft(newTimeLeft);
+            const isZero = newTimeLeft.days === 0 &&
+                newTimeLeft.hours === 0 &&
+                newTimeLeft.minutes === 0 &&
+                newTimeLeft.seconds === 0;
+            if (isZero) {
+                clearInterval(interval);
+                onEnd?.();
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [calculateTimeLeft, onEnd]);
+    return _jsx(_Fragment, { children: renderAction(timeLeft) });
+}

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts

@@ -0,0 +1,4 @@
+import type { Quest } from '../../../types';
+export declare function DailyCheckInQuest({ quest }: {
+    quest: Quest;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { addDays, isEqual, startOfDay } from 'date-fns';
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useCheckInDailyCheckInQuestMutation } from '../../../client/hooks/useCheckInDailyCheckInQuestMutation.js';
+import { toaster } from '../../../client/utils/toaster.js';
+import { CalendarIcon } from '../../../icons/CalendarIcon.js';
+import { CheckIcon } from '../../../icons/CheckIcon.js';
+import { ClockStopWatchIcon } from '../../../icons/ClockStopWatchIcon.js';
+import { InfoCircleIcon } from '../../../icons/InfoCircleIcon.js';
+import { Badge } from '../../../ui/Badge/index.js';
+import { Button } from '../../../ui/Button/index.js';
+import { getQueryClient } from '../../../utils/getQueryClient.js';
+import { getAvailableQuestsQueryKey } from '../../../utils/queryKeys.js';
+import CountdownTimer from '../CountdownTimer.js';
+import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
+export function DailyCheckInQuest({ quest }) {
+    const queryClient = getQueryClient();
+    const [showRules, setShowRules] = useState(false);
+    const [isExpired, setIsExpired] = useState(false);
+    const { name, description, status, lastCheckInDate, progressPercentage, checkInStreak, thirdDayBonusAmount, sixthDayBonusAmount, seventhDayBonusAmount, endDateTime, id, } = quest;
+    const today = startOfDay(new Date());
+    const hasCheckedInToday = lastCheckInDate
+        ? isEqual(today, startOfDay(new Date(lastCheckInDate)))
+        : false;
+    const checkedInRewards = {
+        3: thirdDayBonusAmount,
+        6: sixthDayBonusAmount,
+        7: seventhDayBonusAmount,
+    };
+    const dailyCheckedInData = Array.from({ length: 7 }, (_, i) => {
+        const day = i + 1;
+        return {
+            day,
+            reward: checkedInRewards[day] ?? 0,
+        };
+    });
+    const { mutate } = useCheckInDailyCheckInQuestMutation({
+        onSuccess() {
+            toaster.success({
+                title: 'Check-in successful 🎉',
+                description: 'You’ve successfully checked in for today! Keep it up to maintain your streak!',
+            });
+            queryClient.invalidateQueries({
+                queryKey: getAvailableQuestsQueryKey(),
+            });
+        },
+        onError(e) {
+            toaster.error({
+                title: 'Check-in successful 🎉',
+                description: e.message ?? 'Check-In Failed',
+            });
+        },
+    });
+    const handleCheckIn = async () => mutate(id);
+    return (_jsxs(_Fragment, { children: [_jsx(DailyCheckInQuestModal, { modalState: {
+                    isOpen: showRules,
+                    setIsOpen: setShowRules,
+                } }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(CountdownTimer, { endDateTime: endDateTime, renderAction: (timeLeft) => (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsxs(Badge.Label, { children: [timeLeft.days, "d:", timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => setIsExpired(true) }), _jsx("div", { role: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => {
+                                    const reward = item.reward ? `+₱${item.reward}` : '-';
+                                    return (_jsx("div", { className: twMerge('flex items-center justify-center', item.day <= (checkInStreak || 0)
+                                            ? 'text-brand-400'
+                                            : 'text-text-secondary-700'), children: _jsx("p", { children: reward }) }, item.day));
+                                }) }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercentage}%` } }) }), _jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => (_jsx("div", { className: "flex items-center justify-center", children: _jsx(CalendarWithDayNumber, { day: item.day, currentCheckedInDays: checkInStreak || 0 }, item.day) }, item.day))) })] }), _jsx(Button, { onClick: handleCheckIn, className: "disabled:bg-bg-primary disabled:text-text-disabled", disabled: isExpired ||
+                            status === 'COMPLETED' ||
+                            status === 'FAILED' ||
+                            hasCheckedInToday, children: hasCheckedInToday && status === 'IN_PROGRESS' ? (_jsx(CountdownTimer, { endDateTime: startOfDay(addDays(new Date(), 1)).toISOString(), renderAction: (timeLeft) => (_jsxs("div", { className: "flex items-center space-x-0.5", children: [_jsx(CheckIcon, {}), _jsxs("p", { children: [timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => {
+                                queryClient.invalidateQueries({
+                                    queryKey: getAvailableQuestsQueryKey(),
+                                });
+                            } })) : ('Check-In') })] })] }));
+}
+function CalendarWithDayNumber({ day, currentCheckedInDays, }) {
+    return (_jsxs("div", { className: twMerge('group relative h-fit w-fit', day <= currentCheckedInDays
+            ? 'text-brand-400'
+            : 'text-text-secondary-700'), children: [_jsx(CalendarIcon, {}), _jsx("div", { className: "absolute inset-0 mt-1 flex items-center justify-center text-2xs lg:mt-[2px]", children: _jsx("p", { className: "text-center", children: day }) })] }));
+}

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    modalState: {
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+    };
+}
+export declare function DailyCheckInQuestModal(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/components/Quests/OnboardingQuest/OnboardingQuest.d.ts

@@ -0,0 +1,4 @@
+import type { Quest } from '../../../types';
+export declare function OnboardingQuest(props: {
+    quest: Quest;
+}): null;

package/dist/components/Quests/OnboardingQuest/OnboardingQuest.js

@@ -0,0 +1,4 @@
+export function OnboardingQuest(props) {
+    console.log('OnboardingQuest not implemented', props.quest);
+    return null;
+}

package/dist/components/Quests/WageringQuest/WageringQuest.d.ts

@@ -0,0 +1,4 @@
+import type { Quest } from '../../../types';
+export declare function WageringQuest({ quest }: {
+    quest: Quest;
+}): import("react/jsx-runtime").JSX.Element;