@opexa/portal-components 0.0.108 → 0.0.110

package/dist/client/hooks/useCreateGCashDepositMutation.js

@@ -1,12 +1,14 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createGCashDeposit, getDeposit, } from '../../services/wallet.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateGCashDepositMutationKey } from '../../utils/mutationKeys.js';
-import { getDepositsCountQueryKey } from '../../utils/queryKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useCreateGCashDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -44,6 +46,22 @@ export const useCreateGCashDepositMutation = (config) => {
                 error.message = 'Failed to process GCash deposit';
                 throw error;
             }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
             queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },

package/dist/client/hooks/useCreateMayaAppDepositMutation.js

@@ -1,12 +1,14 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createMayaAppDeposit, getDeposit, } from '../../services/wallet.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateMayaAppDepositMutationKey } from '../../utils/mutationKeys.js';
-import { getDepositsCountQueryKey } from '../../utils/queryKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useCreateMayaAppDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -44,6 +46,22 @@ export const useCreateMayaAppDepositMutation = (config) => {
                 error.message = 'Failed to process Maya deposit';
                 throw error;
             }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
             queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },

package/dist/client/hooks/useCreateMayaDepositMutation.js

@@ -1,12 +1,14 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createMayaDeposit, getDeposit, } from '../../services/wallet.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateMayaDepositMutationKey } from '../../utils/mutationKeys.js';
-import { getDepositsCountQueryKey } from '../../utils/queryKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useCreateMayaDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -44,6 +46,22 @@ export const useCreateMayaDepositMutation = (config) => {
                 error.message = 'Failed to process Maya deposit';
                 throw error;
             }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
             queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },

package/dist/client/hooks/useCreateOnlineBankDepositMutation.js

@@ -1,12 +1,14 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createAIOOnlineBankDeposit, getDeposit, } from '../../services/wallet.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateOnlineBankDepositMutationKey } from '../../utils/mutationKeys.js';
-import { getDepositsCountQueryKey } from '../../utils/queryKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useCreateOnlineBankDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -47,6 +49,22 @@ export const useCreateOnlineBankDepositMutation = (config) => {
                 error.message = 'Failed to process online bank deposit';
                 throw error;
             }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
             queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },

package/dist/client/hooks/useCreateQRPHDepositMutation.js

@@ -1,12 +1,14 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
+import { clamp } from 'lodash-es';
 import invariant from 'tiny-invariant';
 import { ObjectType } from '../../services/ObjectType.js';
 import { createAIOQRPHDeposit, getDeposit, } from '../../services/wallet.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getCreateQRPHDepositMutationKey } from '../../utils/mutationKeys.js';
-import { getDepositsCountQueryKey } from '../../utils/queryKeys.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey, getDepositsCountQueryKey, } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 export const useCreateQRPHDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -47,6 +49,22 @@ export const useCreateQRPHDepositMutation = (config) => {
                 error.message = 'Failed to process QR PH deposit';
                 throw error;
             }
+            const depositsCount = queryClient.getQueryData(getDepositsCountQueryKey()) ?? 0;
+            if (depositsCount <= 0) {
+                queryClient.setQueryData(getAvailableQuestsQueryKey(), (prev) => {
+                    return prev?.map((quest) => {
+                        const progressPercentage = clamp(parseDecimal(quest.progressPercentage, 0) + 50, 100);
+                        if (quest.type === 'ONBOARDING') {
+                            return {
+                                ...quest,
+                                status: progressPercentage >= 100 ? 'COMPLETED' : quest.status,
+                                progressPercentage: progressPercentage.toFixed(2),
+                            };
+                        }
+                        return quest;
+                    });
+                });
+            }
             queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },

package/dist/client/hooks/useRemainingTime.d.ts

@@ -1,7 +1,18 @@
-export declare function useRemainingTime(value: Date | string | number): {
+type EventDetails = {
+    type: 'EXPIRED';
+};
+type UnsubscribeFn = () => void;
+type Subscriber = (details: EventDetails) => UnsubscribeFn;
+interface UseRemainingTimeOptions {
+    onExpired?: () => void;
+}
+export declare function useRemainingTime(value: Date | string | number, options?: UseRemainingTimeOptions): {
     days: number;
     hours: number;
     minutes: number;
     expired: boolean;
+    seconds: number;
     toString(): string;
+    subscribe: (subscriber: Subscriber) => () => void;
 };
+export {};

package/dist/client/hooks/useRemainingTime.js

@@ -1,8 +1,25 @@
-import { differenceInDays, differenceInHours, differenceInMinutes, isAfter, } from 'date-fns';
-import { isNumber, isString } from 'lodash-es';
-import { useState } from 'react';
+import { differenceInDays, differenceInHours, differenceInMinutes, differenceInSeconds, isAfter, } from 'date-fns';
+import { isNumber, isString, noop } from 'lodash-es';
+import { useRef, useState } from 'react';
 import { useInterval } from 'usehooks-ts';
-export function useRemainingTime(value) {
+export function useRemainingTime(value, options = {}) {
+    const subscribers = useRef([
+        () => {
+            options.onExpired?.();
+            return noop;
+        },
+    ]);
+    const subscribe = (subscriber) => {
+        subscribers.current.push(subscriber);
+        return () => {
+            subscribers.current = subscribers.current.filter((item) => item !== subscriber);
+        };
+    };
+    const triggerEvent = (details) => {
+        subscribers.current.forEach((subscriber) => {
+            subscriber(details);
+        });
+    };
     const [now, setNow] = useState(new Date());
     const expiration = isString(value) || isNumber(value) ? new Date(value) : value;
     const expired = isAfter(now, expiration);
@@ -11,14 +28,28 @@ export function useRemainingTime(value) {
     const minutes = expired
         ? 0
         : differenceInMinutes(expiration, now) - days * 24 * 60 - hours * 60;
-    useInterval(() => setNow(new Date()), expired ? null : 1000);
+    const seconds = expired
+        ? 0
+        : differenceInSeconds(expiration, now) -
+            days * 24 * 60 * 60 -
+            hours * 60 * 60 -
+            minutes * 60;
+    useInterval(() => {
+        const d = new Date();
+        setNow(d);
+        if (isAfter(d, expiration)) {
+            triggerEvent({ type: 'EXPIRED' });
+        }
+    }, expired ? null : 1000);
     return {
         days,
         hours,
         minutes,
         expired,
+        seconds,
         toString() {
-            return `${days}d:${hours}h:${minutes}m`;
+            return `${days}d:${hours}h:${minutes}m:${seconds}s`;
         },
+        subscribe,
     };
 }

package/dist/components/KYC/CaptureIdDocument.js

@@ -1,11 +1,205 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
 import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
 import { Camera01Icon } from '../../icons/Camera01Icon.js';
+import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
+import { dataURLtoBlob } from '../../utils/dataUrlToBlob.js';
+import { resizeFile } from '../../utils/resizeImageSize.js';
 import { useKYCContext } from './KYCContext.js';
 export function CaptureIdDocument() {
     const kyc = useKYCContext();
-    return (_jsxs("div", { className: "w-full p-4 lg:w-[640px] lg:px-12 lg:py-4xl", children: [_jsxs("button", { type: "button", className: "flex items-center gap-lg lg:absolute lg:right-5 lg:top-5 lg:p-md", onClick: () => kyc.setCapturing(null), children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "lg:max-w-auto text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", _jsx("br", { className: "hidden lg:block" }), " Avoid glare or reflections, and ensure all corners are within the frame."] }), _jsx("div", { className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8" }), _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", disabled: true, children: ["Capture", _jsx(Camera01Icon, { className: "size-5" })] })] }));
+    const { mutate, isPending } = useUploadImageFileMutation();
+    const [videoStream, setVideoStream] = useState(null);
+    const [cameraError, setCameraError] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [captureInProgress, setCaptureInProgress] = useState(false);
+    const [proccessImageCanvas, setProccessImageCanvas] = useState(null);
+    const videoElement = useRef(null);
+    const containerRef = useRef(null);
+    function stopCamera() {
+        if (videoStream) {
+            videoStream.getTracks().forEach((track) => track.stop());
+            setVideoStream(null);
+        }
+    }
+    useEffect(() => {
+        return () => {
+            stopCamera();
+        };
+    }, [videoStream]);
+    async function startCamera() {
+        try {
+            setIsLoading(true);
+            setCameraError(null);
+            setCaptureInProgress(true);
+            console.log('Starting camera...');
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    facingMode: 'environment',
+                    aspectRatio: 16 / 9,
+                    width: { ideal: 1920, max: 1920 },
+                    height: { ideal: 1080, max: 1080 },
+                    frameRate: {
+                        ideal: 30,
+                        max: 60,
+                    },
+                },
+                audio: false,
+            });
+            // Set the stream directly to the video element
+            if (videoElement.current) {
+                videoElement.current.srcObject = stream;
+                videoElement.current.onloadedmetadata = () => {
+                    console.log('Video metadata loaded, starting playback...');
+                    videoElement.current
+                        ?.play()
+                        .then(() => {
+                        setVideoStream(stream);
+                        setIsLoading(false);
+                    })
+                        .catch(() => {
+                        setCameraError('Failed to start camera stream. Please try again.');
+                        setIsLoading(false);
+                        // Stop the stream if playback fails
+                        stream.getTracks().forEach((track) => track.stop());
+                    });
+                };
+                videoElement.current.onerror = (err) => {
+                    console.error('Video element error:', err);
+                    setCameraError('Video playback error. Please try again.');
+                    setIsLoading(false);
+                    stream.getTracks().forEach((track) => track.stop());
+                };
+            }
+            else {
+                console.error('Video element not available');
+                setCameraError('Camera initialization failed. Please try again.');
+                setCaptureInProgress(false);
+                setIsLoading(false);
+                stream.getTracks().forEach((track) => track.stop());
+            }
+        }
+        catch (error) {
+            setIsLoading(false);
+            if (error instanceof DOMException) {
+                console.error('Error accessing camera:', error.message);
+                setCameraError(error.message);
+            }
+            else {
+                console.error('Unknown error accessing camera:', error);
+                setCameraError('An unknown error occurred. Please check permissions and try again.');
+            }
+            setCaptureInProgress(false);
+        }
+    }
+    function captureAndProcessImage() {
+        if (!videoElement.current || !videoStream) {
+            console.error('Video element or stream not available for capture');
+            return;
+        }
+        try {
+            const canvas = document.createElement('canvas');
+            const parentDiv = document.getElementById('parent');
+            canvas.width = parentDiv?.clientWidth || videoElement.current.width;
+            canvas.height = parentDiv?.clientHeight || videoElement.current.height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                console.error('Could not get 2D context for canvas');
+                setCameraError('Failed to process image. Please try again.');
+                setCaptureInProgress(false);
+                return;
+            }
+            ctx.drawImage(videoElement.current, 0, 0, canvas.width, canvas.height);
+            const imageSrc = canvas.toDataURL('image/png', 1.0);
+            setSelectedImage({ src: imageSrc });
+            setCaptureInProgress(false);
+            stopCamera();
+            const newImg = document.createElement('img');
+            newImg.src = imageSrc;
+            //@ts-expect-error jscanify is not typed
+            const scanner = new jscanify();
+            newImg.onload = () => {
+                try {
+                    if (containerRef.current) {
+                        // containerRef.current.innerHTML = '';
+                        const paperWidth = parentDiv?.clientWidth || videoElement.current?.videoWidth;
+                        const paperHeight = parentDiv?.clientHeight || videoElement.current?.videoHeight;
+                        //@ts-expect-error jscanify is not typed
+                        const contour = scanner.findPaperContour(cv.imread(newImg));
+                        const cornerPoints = scanner.getCornerPoints(contour);
+                        const resultCanvas = scanner.extractPaper(newImg, paperWidth, paperHeight, cornerPoints);
+                        newImg.className =
+                            'absolute inset-0 m-auto w-full h-auto md:max-h-[333px] md:max-w-[643px] aspect-video rounded-lg object-contain';
+                        setProccessImageCanvas(resultCanvas);
+                        containerRef.current.appendChild(resultCanvas);
+                        setCaptureInProgress(false);
+                        setSelectedImage({ src: resultCanvas.toDataURL('image/png') });
+                    }
+                }
+                catch (error) {
+                    console.error('Error processing image:', error);
+                    setCameraError('Failed to process image. Please try again.');
+                }
+            };
+            newImg.onerror = () => {
+                console.error('Error loading image');
+                setCameraError('Failed to load image. Please try again.');
+            };
+        }
+        catch (error) {
+            console.error('Error capturing image:', error);
+            setCameraError('Failed to capture image. Please try again.');
+            setCaptureInProgress(false);
+        }
+    }
+    async function uploadPhoto() {
+        if (!proccessImageCanvas) {
+            console.error('Failed to process the image. Please try again.');
+            return;
+        }
+        const blob = proccessImageCanvas.toDataURL('image/png', 1.0);
+        const processedBlob = dataURLtoBlob(blob);
+        const img = new File([processedBlob], 'frontImage', { type: 'image/jpeg' });
+        const resizedImage = (await resizeFile(img));
+        if (resizedImage) {
+            await mutate({
+                file: resizedImage,
+            }, {
+                onSuccess: (data) => {
+                    kyc.setFrontImageId(data);
+                    kyc.setCapturing(null);
+                },
+            });
+        }
+    }
+    function retakePhoto() {
+        setSelectedImage(null);
+        setCaptureInProgress(true);
+        setCameraError(null);
+        if (containerRef.current) {
+            const canvas = containerRef.current.querySelector('canvas');
+            if (canvas) {
+                canvas.width = canvas.width;
+            }
+            containerRef.current.innerHTML = '';
+        }
+        if (videoElement.current) {
+            videoElement.current.play();
+        }
+        startCamera();
+    }
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full p-4 lg:w-[640px] lg:px-12 lg:py-4xl", children: [_jsxs("button", { type: "button", className: "flex items-center gap-lg lg:absolute lg:right-5 lg:top-5 lg:p-md", onClick: () => {
+                        stopCamera();
+                        kyc.setCapturing(null);
+                    }, children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "lg:max-w-auto text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", _jsx("br", { className: "hidden lg:block" }), " Avoid glare or reflections, and ensure all corners are within the frame."] }), _jsx("div", { id: "parent", className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8", children: cameraError ? (_jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-red-500 mb-2 text-sm", children: "Camera Error" }), _jsx("p", { className: "text-gray-400 text-xs", children: cameraError })] }) })) : captureInProgress ? (_jsxs("div", { className: "relative flex h-fit w-full flex-col items-center justify-center", children: [_jsx("video", { ref: videoElement, autoPlay: true, muted: true, playsInline: true, className: "relative h-[60vh] w-full rounded-lg object-cover md:aspect-video md:max-h-[333px]", width: "100%", height: "100%" }), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-50", children: [_jsx("div", { className: twMerge('absolute inset-0 w-full bg-black/60 backdrop-blur-sm [clip-path:polygon(0%_0%,0%_100%,calc(50%-158px)_100%,calc(50%-158px)_calc(50%-100px),calc(50%+158px)_calc(50%-100px),calc(50%+158px)_calc(50%+100px),calc(50%-158px)_calc(50%+100px),calc(50%-158px)_100%,100%_100%,100%_0%)] md:[clip-path:polygon(0%_0%,0%_100%,calc(50%-225px)_100%,calc(50%-225px)_calc(50%-142px),calc(50%+225px)_calc(50%-142px),calc(50%+225px)_calc(50%+142px),calc(50%-225px)_calc(50%+142px),calc(50%-225px)_100%,100%_100%,100%_0%)]') }), _jsx("div", { className: "absolute inset-0 z-[60] mx-auto flex items-center justify-center", children: _jsx("div", { className: "relative aspect-[1011/638] h-[200px] md:h-[295px] md:w-[450px]", children: _jsx("div", { className: "h-full w-full rounded-lg border-4 border-dashed border-[#B54708]" }) }) })] })] })) : (_jsx("div", { ref: containerRef, className: "relative grid h-full w-full place-items-center rounded-lg object-contain md:max-h-[333px]" })) }), cameraError ? (_jsx("div", { className: "mt-4 text-center", children: _jsx(Button, { className: "mx-auto px-xl lg:w-fit", onClick: () => {
+                            setCameraError(null);
+                            startCamera();
+                        }, children: "Try Again" }) })) : captureInProgress ? (_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", onClick: captureAndProcessImage, children: ["Capture Image", _jsx(Camera01Icon, { className: "size-5" })] })) : selectedImage && selectedImage.src ? (_jsxs("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 md:flex-row", children: [_jsxs(Button, { className: "lg:w-fit", type: "button", onClick: retakePhoto, children: ["Retake Photo ", _jsx(Camera01Icon, { className: "ml-1" })] }), _jsxs(Button, { className: "lg:w-fit", type: "button", onClick: uploadPhoto, disabled: isPending, children: ["Use Photo ", _jsx(CheckCircleIcon, { className: "ml-1" })] })] })) : (_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", onClick: startCamera, disabled: isLoading || !!videoStream, children: [isLoading ? 'Starting Camera...' : 'Start Camera', _jsx(Camera01Icon, { className: "size-5" })] }))] }) }));
 }

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

@@ -0,0 +1,2 @@
+declare function DisplayImage(): import("react/jsx-runtime").JSX.Element;
+export default DisplayImage;

package/dist/components/KYC/DisplayImage.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useFileQuery } from '../../client/hooks/useFileQuery.js';
+import { useKYCContext } from './KYCContext.js';
+function DisplayImage() {
+    const kyc = useKYCContext();
+    const { data } = useFileQuery(kyc.idFrontImageId ?? '');
+    return (_jsx("div", { className: "border-border-primary bg-bg-primary min-h-[11.25rem]", children: data?.url && (_jsx(Image, { src: data.url, alt: "Uploaded", className: "w-full object-contain", width: 500, height: 500 })) }));
+}
+export default DisplayImage;

package/dist/components/KYC/IdentityVerification.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { HelpCircleIcon } from '../../icons/HelpCircleIcon.js';
@@ -7,6 +7,7 @@ import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { Portal } from '../../ui/Portal/index.js';
+import DisplayImage from './DisplayImage.js';
 import { useKYCContext } from './KYCContext.js';
 export function IdentityVerification() {
     const kyc = useKYCContext();
@@ -24,9 +25,9 @@ export function IdentityVerification() {
 }
 function UploadIdDocument() {
     const kyc = useKYCContext();
-    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: [_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 font-semibold", children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => {
+    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: [kyc.idFrontImageId ? (_jsx(DisplayImage, {})) : (_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 font-semibold", children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] })] })), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => {
                     kyc.setCapturing('ID_DOCUMENT');
-                }, children: "Take a photo" })] }));
+                }, children: kyc.idFrontImageId ? 'Rekate Photo' : 'Take a Photo' })] }));
 }
 function UploadSelfie() {
     const kyc = useKYCContext();

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

@@ -17,6 +17,8 @@ export interface UseKYCReturn {
     setCapturing: (capturing: CaptureSubject | null) => void;
     subscribe: (subscriber: Subscriber) => UnsubscribeFn;
     triggerEvent: (detail: EventDetail) => void;
+    idFrontImageId: string | null;
+    setFrontImageId: (id: string | null) => void;
 }
 export declare function useKYC(): UseKYCReturn;
 export {};

package/dist/components/KYC/useKYC.js

@@ -2,6 +2,7 @@ import { useRef, useState } from 'react';
 export function useKYC() {
     const [step, setStep] = useState(1);
     const [done, setDone] = useState(false);
+    const [idFrontImageId, setFrontImageId] = useState(null);
     const [capturing, setCapturing] = useState(null);
     const subscribers = useRef([]);
     const subscribe = (subscriber) => {
@@ -22,6 +23,8 @@ export function useKYC() {
         setDone,
         capturing,
         setCapturing,
+        idFrontImageId,
+        setFrontImageId,
         subscribe,
         triggerEvent,
     };

package/dist/components/NewsFeed/NewsFeed.d.ts

@@ -1,18 +1,4 @@
-import type { CSSProperties } from 'react';
-import type { News } from '../../types';
-export interface NewsFeedProps {
-    newsFeed: News[];
-    /** @default 'News' */
-    heading?: string;
-    /**
-     * @default '/news'
-     * @example
-     * ```ts
-     * '/custom-path' // '/custom-path/123'
-     * ```
-     */
-    viewDetailsUrl?: string;
-    className?: string;
-    style?: CSSProperties;
-}
-export declare function NewsFeed(props: NewsFeedProps): import("react/jsx-runtime").JSX.Element;
+import { type NewsFeedCarouselProps } from './NewsFeedCarousel';
+import { type NewsFeedListProps } from './NewsFeedList';
+export type NewsFeedProps = NewsFeedListProps | NewsFeedCarouselProps;
+export declare function NewsFeed(props: NewsFeedProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/NewsFeed/NewsFeed.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import Link from 'next/link';
-import { Button } from '../../ui/Button/index.js';
-export function NewsFeed(props) {
-    const heading = props.heading ?? 'News';
-    const viewDetailsUrl = props.viewDetailsUrl ?? '/news';
-    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), _jsx("div", { className: "mt-lg grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: props.newsFeed.map((news) => (_jsxs("div", { className: "bg-bg-primary-alt border-border-primary flex flex-col overflow-hidden rounded-2xl border shadow-md", children: [_jsx(Image, { src: news.image, alt: "", width: 356, height: 244, className: "block h-auto w-full" }), _jsxs("div", { className: "flex grow flex-col p-3xl", children: [_jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-brand-400 text-sm font-semibold", children: news.category }), _jsx("h2", { className: "mt-2 text-lg font-semibold", children: news.title }), _jsx("p", { className: "text-text-tertiary-600 mt-xs line-clamp-3", dangerouslySetInnerHTML: {
-                                                __html: news.content,
-                                            } })] }), _jsx(Button, { asChild: true, className: "mt-2xl", children: _jsx(Link, { href: `${viewDetailsUrl}/${news.id}`, children: "Read More" }) })] })] }, news.id))) })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NewsFeedCarousel, } from './NewsFeedCarousel.js';
+import { NewsFeedList } from './NewsFeedList.js';
+export async function NewsFeed(props) {
+    if (props.layout === 'list') {
+        return _jsx(NewsFeedList, { ...props });
+    }
+    else {
+        return _jsx(NewsFeedCarousel, { ...props });
+    }
 }

package/dist/components/NewsFeed/NewsFeedCarousel.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties } from 'react';
+import type { News } from '../../types';
+export interface NewsFeedCarouselProps {
+    layout: 'carousel';
+    newsFeed: News[];
+    /** @default 'News' */
+    heading?: string;
+    /** @default '/news' */
+    viewAllUrl?: string;
+    /**
+     * @default '/news'
+     * @example
+     * ```ts
+     * '/custom-path' // '/custom-path/123'
+     * ```
+     */
+    viewDetailsUrl?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function NewsFeedCarousel(props: NewsFeedCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NewsFeed/NewsFeedCarousel.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import useEmblaCarousel, {} from 'embla-carousel-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { Tv03Icon } from '../../icons/Tv03Icon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Empty } from '../shared/Empty.js';
+export function NewsFeedCarousel(props) {
+    const empty = props.newsFeed.length <= 0;
+    const heading = props.heading ?? 'News';
+    const viewAllUrl = props.viewAllUrl ?? '/news';
+    const viewDetailsUrl = props.viewDetailsUrl ?? '/news';
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+        breakpoints: {
+            '(min-width: 1024px)': {
+                slidesToScroll: 3,
+            },
+        },
+    });
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const onNextButtonClick = useCallback(async () => {
+        emblaApi?.scrollNext();
+    }, [emblaApi]);
+    const onSelect = useCallback((emblaApi) => {
+        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
+        setNextBtnDisabled(!emblaApi?.canScrollNext());
+    }, []);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: viewAllUrl, className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), empty && (_jsx(Empty, { icon: Tv03Icon, title: "No News", message: "No news is currently available.", className: "mt-8" })), !empty && (_jsx(_Fragment, { children: _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[100%] grid-flow-col gap-1.5 lg:auto-cols-[calc((100%-(1.25rem*2))/3)] lg:gap-2xl'), children: props.newsFeed.map((news) => (_jsxs("div", { className: "bg-bg-primary-alt border-border-primary flex flex-col overflow-hidden rounded-2xl border shadow-md", children: [_jsx(Image, { src: news.image, alt: "", width: 356, height: 244, className: "block h-auto w-full" }), _jsxs("div", { className: "flex grow flex-col p-3xl", children: [_jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-brand-400 text-sm font-semibold", children: news.category }), _jsx("h2", { className: "mt-2 text-lg font-semibold", children: news.title }), _jsx("p", { className: "text-text-tertiary-600 mt-xs line-clamp-3", dangerouslySetInnerHTML: {
+                                                        __html: news.content,
+                                                    } })] }), _jsx(Button, { asChild: true, className: "mt-2xl", children: _jsx(Link, { href: `${viewDetailsUrl}/${news.id}`, children: "Read More" }) })] })] }, news.id))) }) }) }))] }));
+}

package/dist/components/NewsFeed/NewsFeedList.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'react';
+import type { News } from '../../types';
+export interface NewsFeedListProps {
+    layout: 'list';
+    newsFeed: News[];
+    /** @default 'News' */
+    heading?: string;
+    /**
+     * @default '/news'
+     * @example
+     * ```ts
+     * '/custom-path' // '/custom-path/123'
+     * ```
+     */
+    viewDetailsUrl?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function NewsFeedList(props: NewsFeedListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NewsFeed/NewsFeedList.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { Tv03Icon } from '../../icons/Tv03Icon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Empty } from '../shared/Empty.js';
+export function NewsFeedList(props) {
+    const empty = props.newsFeed.length <= 0;
+    const heading = props.heading ?? 'News';
+    const viewDetailsUrl = props.viewDetailsUrl ?? '/news';
+    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), empty && (_jsx(Empty, { icon: Tv03Icon, title: "No News", message: "No news is currently available.", className: "mt-8" })), !empty && (_jsx("div", { className: "mt-lg grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: props.newsFeed.map((news) => (_jsxs("div", { className: "bg-bg-primary-alt border-border-primary flex flex-col overflow-hidden rounded-2xl border shadow-md", children: [_jsx(Image, { src: news.image, alt: "", width: 356, height: 244, className: "block h-auto w-full" }), _jsxs("div", { className: "flex grow flex-col p-3xl", children: [_jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-brand-400 text-sm font-semibold", children: news.category }), _jsx("h2", { className: "mt-2 text-lg font-semibold", children: news.title }), _jsx("p", { className: "text-text-tertiary-600 mt-xs line-clamp-3", dangerouslySetInnerHTML: {
+                                                __html: news.content,
+                                            } })] }), _jsx(Button, { asChild: true, className: "mt-2xl", children: _jsx(Link, { href: `${viewDetailsUrl}/${news.id}`, children: "Read More" }) })] })] }, news.id))) }))] }));
+}

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

@@ -0,0 +1 @@
+export declare function DailyCheckInQuest(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/DailyCheckInQuest.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { addDays, isEqual, startOfDay } from 'date-fns';
+import { twMerge } from 'tailwind-merge';
+import { useCheckInDailyCheckInQuestMutation } from '../../client/hooks/useCheckInDailyCheckInQuestMutation.js';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { CalendarIcon } from '../../icons/CalendarIcon.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+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';
+import { dataAttr } from '../../utils/dataAttr.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getAvailableQuestsQueryKey } from '../../utils/queryKeys.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function DailyCheckInQuest() {
+    const quest = useQuestContext();
+    const disclosure = useDisclosure();
+    const localeInfo = useLocaleInfo();
+    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: parseDecimal(thirdDayBonusAmount, 0),
+        6: parseDecimal(sixthDayBonusAmount, 0),
+        7: parseDecimal(seventhDayBonusAmount, 0),
+    };
+    const dailyCheckedInData = Array.from({ length: 7 }, (_, i) => {
+        const day = i + 1;
+        return {
+            day,
+            reward: checkedInRewards[day] ? checkedInRewards[day] : null,
+        };
+    });
+    const checkInDailyQuestMutation = useCheckInDailyCheckInQuestMutation({
+        onSuccess() {
+            toaster.success({
+                title: 'Check-in successful 🎉',
+                description: 'You’ve successfully checked in for today! Keep it up to maintain your streak!',
+            });
+        },
+        onError(e) {
+            toaster.error({
+                title: 'Check-in successful 🎉',
+                description: e.message ?? 'Check-In Failed',
+            });
+        },
+    });
+    const remainingTime = useRemainingTime(endDateTime);
+    return (_jsxs(_Fragment, { children: [_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(RemainingTime, {}), _jsx("button", { type: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", 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
+                                        ? `+${formatNumber(item.reward, {
+                                            currency: localeInfo.currency.code,
+                                            minDecimalPlaces: 0,
+                                            maxDecimalPlaces: 0,
+                                        })}`
+                                        : '-';
+                                    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 place-items-center", children: dailyCheckedInData.map((item) => (_jsxs("div", { className: "text-text-secondary-700 ui-active:text-brand-400 group relative size-fit", "data-active": dataAttr(item.day <= (checkInStreak ?? 0)), children: [_jsx(CalendarIcon, { className: "h-4.5 w-auto" }), _jsx("p", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xs leading-none", children: item.day })] }, item.day))) })] }), _jsx(Button, { onClick: () => checkInDailyQuestMutation.mutate(id), className: "disabled:bg-bg-primary disabled:text-text-disabled", disabled: status === 'COMPLETED' ||
+                            status === 'FAILED' ||
+                            remainingTime.expired ||
+                            hasCheckedInToday ||
+                            checkInDailyQuestMutation.isPending, children: hasCheckedInToday && status === 'IN_PROGRESS' ? (_jsx(RemainingTimeTilTomorrow, {})) : (_jsx("span", { children: "Check-In" })) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen })] }));
+}
+function RemainingTimeTilTomorrow() {
+    const queryClient = getQueryClient();
+    const remainingTime = useRemainingTime(startOfDay(addDays(new Date(), 1)), {
+        onExpired() {
+            queryClient.invalidateQueries({
+                queryKey: getAvailableQuestsQueryKey(),
+            });
+        },
+    });
+    return (_jsxs("div", { className: "flex items-center space-x-0.5", children: [_jsx(CheckIcon, { className: "size-5" }), _jsx("p", { children: remainingTime.toString() })] }));
+}
+function Rules(props) {
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.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("h2", { className: "text-text-primary-900 text-lg font-semibold", children: "Daily Check-In Rules" }), _jsxs("ol", { 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: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
+}

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

@@ -0,0 +1 @@
+export declare function OnboardingQuest(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/OnboardingQuest.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { noop } from 'lodash-es';
+import { useShallow } from 'zustand/shallow';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { CoinsHandIcon } from '../../icons/CoinsHandIcon.js';
+import { FileCheck02Icon } from '../../icons/FileCheck02Icon.js';
+import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Checkbox } from '../../ui/Checkbox/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function OnboardingQuest() {
+    const quest = useQuestContext();
+    const disclosure = useDisclosure();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const remainingTime = useRemainingTime(quest.endDateTime);
+    return (_jsxs(_Fragment, { children: [_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(RemainingTime, {}), _jsx("button", { type: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("h2", { className: "text-xl font-semibold", children: quest.name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: quest.description } })] }), _jsxs("div", { className: "w-full grow space-y-2", children: [_jsxs(Checkbox.Root, { checked: quest.accountVerificationCompleted, onCheckedChange: noop, children: [_jsx(Checkbox.Control, { className: "bg-transparent", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: "text-sm font-medium leading-tight", children: "Complete personal verification" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Checkbox.Root, { checked: quest.firstDepositCompleted, onCheckedChange: noop, children: [_jsx(Checkbox.Control, { className: "bg-transparent", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { className: "text-sm font-medium leading-tight", children: "Make your first deposit" }), _jsx(Checkbox.HiddenInput, {})] })] }), _jsxs("div", { className: "flex gap-lg", children: [_jsxs(Button, { size: "sm", onClick: () => {
+                                    globalStore.kyc.setOpen(true);
+                                }, disabled: quest.accountVerificationCompleted ||
+                                    quest.status === 'COMPLETED' ||
+                                    quest.status === 'FAILED' ||
+                                    remainingTime.expired, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: [quest.accountVerificationCompleted ? (_jsx(CheckIcon, { className: "size-5" })) : (_jsx(FileCheck02Icon, { className: "size-5" })), "Verify"] }), _jsxs(Button, { size: "sm", onClick: () => {
+                                    globalStore.depositWithdrawal.setTab('DEPOSIT');
+                                    globalStore.depositWithdrawal.setOpen(true);
+                                }, disabled: quest.firstDepositCompleted ||
+                                    quest.status === 'COMPLETED' ||
+                                    quest.status === 'FAILED' ||
+                                    remainingTime.expired, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: [_jsx(CoinsHandIcon, { className: "size-5" }), "Deposit"] })] })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen })] }));
+}
+function Rules(props) {
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.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("h2", { className: "text-text-primary-900 text-lg font-semibold", children: "Welcome Quest Rules" }), _jsxs("ol", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Begin your quest whenever you're ready" }), _jsx("li", { children: "Tackle the tasks in any order you like" }), _jsx("li", { children: "Finish all tasks and we'll credit your reward automatically!" })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
+}

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

@@ -1,6 +1,8 @@
+import { type CSSProperties } from 'react';
 export interface QuestsProps {
     /** @default "Quests" */
     heading?: string;
     className?: string;
+    style?: CSSProperties;
 }
 export declare function Quests__client(props: QuestsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/Quests.client.js

@@ -7,10 +7,10 @@ import { useAvailableQuestsQuery } from '../../client/hooks/useAvailableQuestsQu
 import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import closeChest from '../../images/close-chest.png';
 import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
-import { DailyCheckInQuest } from './DailyCheckInQuest/DailyCheckInQuest.js';
-import { OnboardingQuest } from './OnboardingQuest/OnboardingQuest.js';
+import { DailyCheckInQuest } from './DailyCheckInQuest.js';
+import { OnboardingQuest } from './OnboardingQuest.js';
 import { QuestContext } from './QuestsContext.js';
-import { WageringQuest } from './WageringQuest/WageringQuest.js';
+import { WageringQuest } from './WageringQuest.js';
 const QUEST_COMPONENT_MAP = {
     DAILY_CHECKIN: DailyCheckInQuest,
     ONBOARDING: OnboardingQuest,
@@ -28,12 +28,12 @@ export function Quests__client(props) {
                 : quest.status === 'IN_PROGRESS';
         });
     if (questsQuery.isLoading) {
-        return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
+        return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
     }
     if (!questsQuery.data?.length) {
-        return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { src: closeChest, width: 100, height: 100, alt: "No Quests Available", className: "mix-blend-luminosity", quality: 100 }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: "No available quests. Please check back later!" })] })] }));
+        return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { src: closeChest, width: 100, height: 100, alt: "No Quests Available", className: "mix-blend-luminosity", quality: 100 }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: "No available quests. Please check back later!" })] })] }));
     }
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
+    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
                     setTab(TabDefinition.catch('AVAILABLE').parse(details.value));
                 }, className: "mt-3 w-full overflow-x-auto lg:mt-4.5 lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "AVAILABLE", className: "w-full lg:w-fit", children: [_jsx(SegmentGroup.ItemText, { children: "Available" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "COMPLETED", className: "w-full lg:w-fit", children: [_jsx(SegmentGroup.ItemText, { children: "Completed" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsx("div", { className: "mt-3xl grid gap-3xl lg:mt-lg lg:grid-cols-3", children: quests.map((quest) => {
                     const QuestComponent = QUEST_COMPONENT_MAP[quest.type];

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

@@ -0,0 +1 @@
+export declare function RemainingTime(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/RemainingTime.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { ClockStopWatchIcon } from '../../icons/ClockStopWatchIcon.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { useQuestContext } from './QuestsContext.js';
+export function RemainingTime() {
+    const quest = useQuestContext();
+    const remainingTime = useRemainingTime(quest.endDateTime);
+    if (quest.status === 'COMPLETED') {
+        return (_jsx(Badge.Root, { size: "lg", colorScheme: "success", round: false, children: _jsx(Badge.Label, { children: "Completed" }) }));
+    }
+    if (quest.status === 'FAILED') {
+        return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, children: _jsx(Badge.Label, { children: "Failed" }) }));
+    }
+    if (remainingTime.expired) {
+        return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, children: _jsx(Badge.Label, { children: "Expired" }) }));
+    }
+    return (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.toString() })] }));
+}

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

@@ -0,0 +1 @@
+export declare function WageringQuest(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/WageringQuest.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+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';
+import { parseDecimal } from '../../utils/parseDecimal.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function WageringQuest() {
+    const quest = useQuestContext();
+    const disclosure = useDisclosure();
+    const localeInfo = useLocaleInfo();
+    const { progressPercentage, turnover, targetTurnover, name, description, endDateTime, bonus, status, } = quest;
+    const remainingTime = useRemainingTime(endDateTime);
+    return (_jsxs(_Fragment, { children: [_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(RemainingTime, {}), _jsx("button", { type: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", 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: [_jsxs("div", { className: "text-text-primary-brand group flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", parseDecimal(progressPercentage, 0).toFixed(2), "%"] }), _jsxs("p", { children: [turnover, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " ", localeInfo.currency.code] })] })] }), _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: "flex h-full items-end", children: _jsx("div", { className: "bg-button-secondary-bg border-bg-primary-hover w-full rounded-md border px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { className: twMerge(remainingTime.expired ||
+                                    status === 'COMPLETED' ||
+                                    status === 'FAILED'
+                                    ? 'opacity-50 grayscale'
+                                    : ''), children: ["Complete to get ", _jsxs("span", { className: "text-brand-400", children: ["\u20B1", bonus] }), ' ', "bonus!"] }) }) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen })] }));
+}
+function Rules(props) {
+    const quest = useQuestContext();
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.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("h2", { className: "text-text-primary-900 text-lg font-semibold", children: quest.name }), _jsxs("ol", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => setOpen(false), children: "Ok" }) })] }) })] }) }));
+}

package/dist/icons/Tv03Icon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function Tv03Icon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/Tv03Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Tv03Icon(props) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M17 3L12 7L7 3M6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V11.8C22 10.1198 22 9.27976 21.673 8.63803C21.3854 8.07354 20.9265 7.6146 20.362 7.32698C19.7202 7 18.8802 7 17.2 7H6.8C5.11984 7 4.27976 7 3.63803 7.32698C3.07354 7.6146 2.6146 8.07354 2.32698 8.63803C2 9.27976 2 10.1198 2 11.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z" }) }));
+}

package/dist/utils/dataUrlToBlob.d.ts

@@ -0,0 +1 @@
+export declare function dataURLtoBlob(dataURL: string): Blob;

package/dist/utils/dataUrlToBlob.js

@@ -0,0 +1,11 @@
+export function dataURLtoBlob(dataURL) {
+    const parts = dataURL.split(';base64,');
+    const contentType = parts[0].split(':')[1];
+    const raw = window.atob(parts[1]);
+    const rawLength = raw.length;
+    const uInt8Array = new Uint8Array(rawLength);
+    for (let i = 0; i < rawLength; ++i) {
+        uInt8Array[i] = raw.charCodeAt(i);
+    }
+    return new Blob([uInt8Array], { type: contentType });
+}

package/dist/utils/resizeImageSize.d.ts

@@ -0,0 +1 @@
+export declare const resizeFile: (file: File) => Promise<unknown>;

package/dist/utils/resizeImageSize.js

@@ -0,0 +1,6 @@
+import Resizer from 'react-image-file-resizer';
+export const resizeFile = (file) => new Promise((resolve) => {
+    Resizer.imageFileResizer(file, 300, 300, 'jpeg', 100, 0, (uri) => {
+        resolve(uri);
+    }, 'file');
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.108",
+  "version": "0.0.110",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",
@@ -86,6 +86,7 @@
     "embla-carousel-react": "^8.6.0",
     "is-mobile": "^5.0.0",
     "lodash-es": "^4.17.21",
+    "react-image-file-resizer": "^0.4.8",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^1.0.0",
     "tailwind-zag": "^1.0.2",