@opexa/portal-components 0.0.185 → 0.0.187

package/dist/components/Quests/DailyCheckInQuest.js

@@ -8,7 +8,6 @@ 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';
@@ -59,22 +58,22 @@ export function DailyCheckInQuest() {
     });
     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("div", { 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));
+                                    const done = item.day <= (checkInStreak ?? 0);
+                                    const reward = item.reward ? (`+${formatNumber(item.reward, {
+                                        currency: localeInfo.currency.code,
+                                        minDecimalPlaces: 0,
+                                        maxDecimalPlaces: 0,
+                                    })}`) : done ? (_jsx(CheckIcon, { className: "size-4" })) : ('-');
+                                    return (_jsx("div", { className: twMerge('flex items-center justify-center', done ? '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 CalendarIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "18", viewBox: "0 0 17 18", fill: "none", ...props, children: _jsx("path", { d: "M11.5477 0.666687V4.00002M4.88102 0.666687V4.00002M4.71436 17.3334H11.7144C13.1145 17.3334 13.8146 17.3334 14.3493 17.0609C14.8197 16.8212 15.2022 16.4387 15.4419 15.9683C15.7144 15.4336 15.7144 14.7335 15.7144 13.3334V6.33335C15.7144 4.93322 15.7144 4.23316 15.4419 3.69838C15.2022 3.22797 14.8197 2.84552 14.3493 2.60584C13.8146 2.33335 13.1145 2.33335 11.7144 2.33335H4.71436C3.31422 2.33335 2.61416 2.33335 2.07938 2.60584C1.60897 2.84552 1.22652 3.22797 0.986839 3.69838C0.714355 4.23316 0.714355 4.93322 0.714355 6.33335V13.3334C0.714355 14.7335 0.714355 15.4336 0.986839 15.9683C1.22652 16.4387 1.60897 16.8212 2.07938 17.0609C2.61416 17.3334 3.31422 17.3334 4.71436 17.3334Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 function RemainingTimeTilTomorrow() {
     const queryClient = getQueryClient();
     const remainingTime = useRemainingTime(startOfDay(addDays(new Date(), 1)), {

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

@@ -1,4 +1,4 @@
 import type { SignUpProps } from './SignUpDefault/SignUp.lazy';
-import type { SignUpPagcorProps } from './SignUpPagcor/SignUpPagcor.lazy';
-export declare function SignUp(props: SignUpProps | SignUpPagcorProps): import("react/jsx-runtime").JSX.Element | null;
+import type { SignUpKYCProps } from './SignUpKYC/SignUpKYC.lazy';
+export declare function SignUp(props: SignUpProps | SignUpKYCProps): import("react/jsx-runtime").JSX.Element | null;
 export type { SignUpProps };

package/dist/components/SignUp/SignUp.js

@@ -7,7 +7,7 @@ const SignUpDefault = dynamic(() => import('./SignUpDefault/SignUp.lazy.js').the
     ssr: false,
     loading: () => null,
 });
-const SignUpPagcor = dynamic(() => import('./SignUpPagcor/SignUpPagcor.lazy.js').then((m) => m.SignUpPagcor), {
+const SignUpKYC = dynamic(() => import('./SignUpKYC/SignUpKYC.lazy.js').then((m) => m.SignUpKYC), {
     ssr: false,
     loading: () => null,
 });
@@ -15,8 +15,8 @@ export function SignUp(props) {
     const touched = useGlobalStore(useShallow((ctx) => ctx.signUp['~touched']));
     if (!touched)
         return null;
-    if (props.layout === 'pagcor') {
-        return _jsx(SignUpPagcor, { ...props });
+    if (props.layout === 'kyc') {
+        return _jsx(SignUpKYC, { ...props });
     }
     return _jsx(SignUpDefault, { ...props });
 }

package/dist/components/SignUp/SignUpForm.js

@@ -192,7 +192,6 @@ export function SignUpForm() {
                                     mobileNumber: mobileNumberParser.format(mobileNumber),
                                     verificationCode: verificationCode.join(''),
                                     referralCode: search.get('referralCode') ?? undefined,
-                                    domain: search.get('domain') ?? undefined,
                                     btag: search.get('btag') ?? undefined,
                                 });
                                 const name = mobileNumberParser.format(mobileNumber);
@@ -252,7 +251,7 @@ export function SignUpForm() {
                                                 o.field.onChange(details.value);
                                             }, onValueComplete: () => {
                                                 form2Ref.current?.requestSubmit();
-                                            }, children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
+                                            }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
                                                 recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),

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

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

package/dist/components/SignUp/SignUpKYC/CaptureIdDocument.js

@@ -0,0 +1,198 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+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 { Portal } from '../../../ui/Portal/index.js';
+import { dataURLtoBlob, resizeFile } from '../../KYC/utils.js';
+import { useSignUpKYCPropsContext } from './SignUpKYCContext.js';
+export function CaptureIdDocument() {
+    const props = useSignUpKYCPropsContext();
+    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) {
+            props.setFrontImage(resizedImage);
+            props.setCapturing(null);
+            stopCamera();
+        }
+    }
+    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(Dialog.Root, { open: props.capturing === 'ID_DOCUMENT', lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { className: twMerge('bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-fit lg:rounded-xl', props.className), 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();
+                                        props.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, 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/SignUp/SignUpKYC/CaptureSelfie.d.ts

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

package/dist/components/SignUp/SignUpKYC/CaptureSelfie.js

@@ -0,0 +1,251 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as faceapi from 'face-api.js';
+import { useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
+import { Camera01Icon } from '../../../icons/Camera01Icon.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 { onMobileDevice } from '../../../utils/onMobileDevice.js';
+import PersonOverlayDesktop from '../../KYC/PersonOverlayDesktop.js';
+import { dataURLtoBlob, loadFaceApiModels, resizeFile } from '../../KYC/utils.js';
+import { useSignUpKYCPropsContext } from './SignUpKYCContext.js';
+export function CaptureSelfie() {
+    const props = useSignUpKYCPropsContext();
+    const mobileDevice = onMobileDevice();
+    const [modelsLoaded, setModelsLoaded] = useState(false);
+    const [videoStream, setVideoStream] = useState(null);
+    const [cameraError, setCameraError] = useState(null);
+    const [captureInProgress, setCaptureInProgress] = useState(false);
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [isFaceCentered, setIsFaceCentered] = useState(false);
+    const [isCapturing, setIsCapturing] = useState(false);
+    const [countdown, setCountdown] = useState(3);
+    const videoRef = useRef(null);
+    const faceCanvasRef = useRef(null);
+    const detectionIntervalRef = useRef(null);
+    const countdownTimerRef = useRef(null);
+    useEffect(() => {
+        loadFaceApiModels()
+            .then(() => setModelsLoaded(true))
+            .catch(() => setModelsLoaded(false));
+    }, []);
+    useEffect(() => {
+        if (captureInProgress) {
+            startFaceDetection();
+        }
+    }, [captureInProgress]);
+    async function startCamera() {
+        setCaptureInProgress(true);
+        const stream = await navigator.mediaDevices.getUserMedia({
+            video: {
+                facingMode: mobileDevice ? 'user' : 'environment',
+                aspectRatio: mobileDevice ? 9 / 16 : 16 / 9,
+                width: { ideal: 1920 },
+                height: { ideal: 1080 },
+            },
+            audio: false,
+        });
+        setVideoStream(stream);
+        if (videoRef.current) {
+            videoRef.current.srcObject = stream;
+            videoRef.current.onloadedmetadata = () => {
+                videoRef.current
+                    ?.play()
+                    .then(() => {
+                    if (modelsLoaded) {
+                        startFaceDetection();
+                    }
+                })
+                    .catch((error) => {
+                    console.error('Error playing video:', error);
+                    setCameraError('Failed to play video stream. Please check your camera settings.');
+                });
+            };
+        }
+    }
+    function startFaceDetection() {
+        if (!modelsLoaded) {
+            console.error('Cannot start face detection: video element not ready or models not loaded');
+            return;
+        }
+        if (!faceCanvasRef.current) {
+            faceCanvasRef.current = faceapi.createCanvasFromMedia(videoRef.current);
+            const parentDiv = document.getElementById('parent');
+            faceCanvasRef.current.className = `absolute inset-0 m-auto h-${parentDiv?.clientHeight} w-${parentDiv?.clientWidth} md:aspect-video object-cover md:object-contain`;
+            faceCanvasRef.current.style.width = `${videoRef.current?.clientWidth}px`;
+            faceCanvasRef.current.style.height = `${videoRef.current?.clientHeight}px`;
+        }
+        const displaySize = {
+            width: videoRef.current?.clientWidth || 643,
+            height: videoRef.current?.clientHeight || 333,
+        };
+        // Clear any existing interval
+        if (detectionIntervalRef.current) {
+            clearInterval(detectionIntervalRef.current);
+        }
+        faceapi.matchDimensions(faceCanvasRef.current, displaySize);
+        let countdownInterval = null;
+        detectionIntervalRef.current = window.setInterval(async () => {
+            if (!videoRef.current || !faceCanvasRef.current) {
+                console.error('Video or canvas element is not ready');
+                return;
+            }
+            try {
+                const detection = await faceapi
+                    .detectSingleFace(videoRef.current, new faceapi.TinyFaceDetectorOptions())
+                    .withFaceLandmarks();
+                if (detection) {
+                    const resizedDetection = faceapi.resizeResults(detection, displaySize);
+                    const frame_height = resizedDetection.detection.box.height;
+                    const frame_width = resizedDetection.detection.box.width;
+                    const frame_x = resizedDetection.detection.box.x;
+                    const frame_y = resizedDetection.detection.box.y;
+                    const faceCenterX = frame_x + frame_width / 2;
+                    const faceCenterY = frame_y + frame_height / 2;
+                    const screenCenterX = displaySize.width / 2;
+                    const screenCenterY = displaySize.height / 2;
+                    const centerThresholdX = displaySize.width * 0.15;
+                    const centerThresholdY = displaySize.height * 0.15;
+                    const isFaceCentered = Math.abs(faceCenterX - screenCenterX) <= centerThresholdX &&
+                        Math.abs(faceCenterY - screenCenterY) <= centerThresholdY;
+                    setIsFaceCentered(isFaceCentered);
+                    const faceDetectionConfidence = detection.detection.score * 100;
+                    // const context = faceCanvasRef.current.getContext('2d');
+                    // if (context) {
+                    //   context.clearRect(
+                    //     0,
+                    //     0,
+                    //     faceCanvasRef.current.width,
+                    //     faceCanvasRef.current.height,
+                    //   );
+                    //   faceapi.draw.drawDetections(
+                    //     faceCanvasRef.current,
+                    //     resizedDetection,
+                    //   );
+                    //   faceapi.draw.drawFaceLandmarks(
+                    //     faceCanvasRef.current,
+                    //     resizedDetection,
+                    //   );
+                    // }
+                    //adjust the faceDetectionConfidence if need
+                    if (isFaceCentered && faceDetectionConfidence >= 65) {
+                        if (!countdownInterval) {
+                            setIsCapturing(true);
+                            countdownInterval = setInterval(() => {
+                                setCountdown((prev) => {
+                                    if (prev === 1) {
+                                        clearInterval(countdownInterval);
+                                        countdownInterval = null;
+                                        captureImage();
+                                        return 3;
+                                    }
+                                    return prev - 1;
+                                });
+                            }, 1000);
+                        }
+                    }
+                    else {
+                        if (countdownInterval) {
+                            clearInterval(countdownInterval);
+                            countdownInterval = null;
+                            setCountdown(3);
+                            setIsCapturing(false);
+                        }
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Error during face detection:', error);
+                setCameraError('An error occurred while detecting your face. Please try again.');
+            }
+        }, 100);
+    }
+    function stopCamera() {
+        setCaptureInProgress(false);
+        if (detectionIntervalRef.current) {
+            clearInterval(detectionIntervalRef.current);
+            detectionIntervalRef.current = null;
+        }
+        if (countdownTimerRef.current) {
+            clearInterval(countdownTimerRef.current);
+            countdownTimerRef.current = null;
+        }
+        if (videoStream) {
+            videoStream.getTracks().forEach((track) => track.stop());
+            setVideoStream(null);
+        }
+        if (videoRef.current && videoRef.current.srcObject) {
+            const stream = videoRef.current.srcObject;
+            stream.getTracks().forEach((track) => {
+                track.stop();
+            });
+            videoRef.current.srcObject = null;
+            videoRef.current.pause();
+            videoRef.current.currentTime = 0;
+            videoRef.current.load();
+        }
+        setCountdown(3);
+    }
+    function captureImage() {
+        if (videoRef.current && faceCanvasRef.current) {
+            const canvas = document.createElement('canvas');
+            canvas.width = videoRef.current.videoWidth;
+            canvas.height = videoRef.current.videoHeight;
+            const context = canvas.getContext('2d');
+            if (context) {
+                context.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
+                const imageData = canvas.toDataURL('image/png');
+                setSelectedImage(imageData);
+                stopCamera();
+            }
+        }
+    }
+    function retakePhoto() {
+        setSelectedImage(null);
+        setCaptureInProgress(true);
+        setCameraError(null);
+        if (faceCanvasRef.current) {
+            const canvas = faceCanvasRef.current.querySelector('canvas');
+            if (canvas) {
+                canvas.width = canvas.width;
+            }
+            faceCanvasRef.current.innerHTML = '';
+        }
+        if (videoRef.current) {
+            videoRef.current.play();
+        }
+        startCamera();
+    }
+    async function usePhoto() {
+        if (!selectedImage) {
+            console.error('No photo selected to use');
+            return;
+        }
+        const blob = dataURLtoBlob(selectedImage);
+        const img = new File([blob], 'image', { type: blob.type });
+        const resizedImage = (await resizeFile(img));
+        if (resizedImage) {
+            props.setSelfieImage(resizedImage);
+            props.setCapturing(null);
+            stopCamera();
+        }
+    }
+    useEffect(() => {
+        return () => {
+            if (detectionIntervalRef.current) {
+                clearInterval(detectionIntervalRef.current);
+            }
+            if (countdownTimerRef.current) {
+                clearInterval(countdownTimerRef.current);
+            }
+        };
+    }, []);
+    return (_jsx(Dialog.Root, { open: props.capturing === 'SELFIE', lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { className: twMerge('bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-fit lg:rounded-xl', props.className), 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();
+                                        props.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 Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: "Make sure your face and ID are clearly visible, with no glare or blur." }), _jsx("div", { id: "parent", className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8", children: captureInProgress ? (_jsxs("div", { className: "relative flex h-fit w-full flex-col items-center justify-center", children: [_jsx("video", { ref: videoRef, autoPlay: true, muted: true, className: "h-[60vh] w-full rounded-lg object-cover md:aspect-video md:h-[333px]", width: "100%", height: "100%" }), _jsx("canvas", { ref: faceCanvasRef, className: "absolute inset-0 h-[60vh] w-full object-cover md:aspect-video md:h-[333px] md:object-contain", width: "100%", height: "100%" }), isCapturing && (_jsx("span", { className: "absolute inset-x-0 bottom-8 flex items-center justify-center text-5xl font-bold text-[#713B12CC] md:bottom-4", children: countdown })), !isFaceCentered && (_jsx("span", { className: "absolute inset-x-0 bottom-12 mx-auto w-1/2 text-center text-xs text-white md:bottom-3", children: "Please center your face in the camera view. Make sure your ID is clearly visible next to your face." })), _jsx(PersonOverlayDesktop, { isFaceCentered: isFaceCentered, width: videoRef.current?.clientWidth || 543, height: videoRef.current?.clientHeight || 333 })] })) : (selectedImage && (_jsx("img", { src: selectedImage, alt: "Captured Photo", className: "h-full w-full rounded-lg object-cover md:aspect-video md:h-[333px]" }))) }), selectedImage && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 md:flex-row", children: [_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-4 px-xl disabled:opacity-100", size: "sm", onClick: retakePhoto, type: "button", children: ["Retake Photo", _jsx(Camera01Icon, { className: "size-5" })] }), _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-4 px-xl disabled:opacity-100", size: "sm", onClick: usePhoto, type: "button", children: ["Use Photo", _jsx(Camera01Icon, { className: "size-5" })] })] })), !captureInProgress && (_jsxs(Button, { className: twMerge('mx-auto mt-6 px-xl lg:mt-8', selectedImage && 'hidden'), onClick: startCamera, disabled: !modelsLoaded, type: "button", children: ["Start Camera", _jsx(Camera01Icon, { className: "size-5" })] }))] }) }) })] }) }));
+}

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

@@ -0,0 +1,10 @@
+import type { CaptureSubject } from '../../KYC/useKYC';
+interface FileUploadProps {
+    name: string;
+    value: File | null;
+    hasDescription?: boolean;
+    onChange?: (id: File) => void;
+    captureObject: CaptureSubject;
+}
+declare function ImageUploader({ value, name, hasDescription, onChange, captureObject, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export default ImageUploader;

package/dist/components/SignUp/SignUpKYC/ImageUploader.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useEffect, useRef, useState } from 'react';
+import { UploadCloud02Icon } from '../../../icons/UploadCloud02Icon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { validateFile } from '../../KYC/utils.js';
+import { useSignUpKYCPropsContext } from './SignUpKYCContext.js';
+function ImageUploader({ value, name, hasDescription = true, onChange, captureObject, }) {
+    const props = useSignUpKYCPropsContext();
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const [error, setError] = useState(null);
+    const fileInputRef = useRef(null);
+    const handleFileChange = (event) => {
+        const file = event.target.files?.[0];
+        if (!file) {
+            setError('No file selected');
+            return;
+        }
+        const validationError = validateFile(file);
+        if (validationError) {
+            setError(validationError);
+            return;
+        }
+        setError(null);
+        const url = URL.createObjectURL(file);
+        setPreviewUrl(url);
+        onChange?.(file);
+        return () => URL.revokeObjectURL(url);
+    };
+    const handleUploadClick = () => {
+        fileInputRef.current?.click();
+    };
+    useEffect(() => {
+        if (value) {
+            setPreviewUrl(URL.createObjectURL(value));
+        }
+    }, [value]);
+    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col items-center justify-center gap-lg rounded-xl border px-3xl py-xl", children: [error && (_jsx("p", { className: "text-text-error-600 mb-2 text-center text-sm", children: error })), previewUrl ? (_jsxs("div", { className: "flex w-full flex-col items-center", children: [_jsx("div", { className: "relative h-[9.25rem] w-full overflow-hidden rounded-md", children: _jsx(Image, { src: previewUrl, alt: "Uploaded image preview", fill: true, className: "object-contain", draggable: false, priority: true }) }), _jsx(Button, { size: "xs", variant: "outline", className: "mt-4 w-fit", type: "button", onClick: handleUploadClick, children: "Reupload" })] })) : (hasDescription && (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border-primary shadow-xs 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 hover:underline", onClick: handleUploadClick, children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG, or JPEG (max. 10MB)"] })] }))), _jsx("input", { type: "file", id: `file-upload-${name}`, name: name, ref: fileInputRef, onChange: handleFileChange, accept: "image/png,image/jpg,image/jpeg", className: "hidden", "aria-label": "Upload image file" }), _jsx(Button, { size: "xs", variant: "outline", className: "mt-4 w-fit", onClick: () => props.setCapturing(captureObject), type: "button", children: value ? 'Retake Photo' : 'Take a Photo' })] }));
+}
+export default ImageUploader;

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

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