@opexa/portal-components 0.0.241 → 0.0.243

package/dist/components/shared/SelfieField.js

@@ -1,12 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import '@mediapipe/face_detection';
-import * as faceDetection from '@tensorflow-models/face-detection';
-import '@tensorflow/tfjs-backend-webgl';
-import '@tensorflow/tfjs-core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFieldContext } from '@ark-ui/react';
+import * as faceapi from 'face-api.js';
 import Image from 'next/image';
-import { useId, useLayoutEffect, useRef, useState, } from 'react';
+import { cache, useEffect, useId, useRef, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useInterval } from 'usehooks-ts';
 import { useCamera } from '../../client/hooks/useCamera.js';
@@ -34,17 +31,7 @@ export function SelfieField(props) {
                     const file = e.dataTransfer.files?.[0];
                     if (!file)
                         return;
-                    const face = await getFaceFromFile(file);
-                    const error = validateFile(file, {
-                        customValidator() {
-                            if (!face) {
-                                return {
-                                    name: 'FaceNotFoundError',
-                                    message: 'Please ensure your face is clearly visible in the photo.',
-                                };
-                            }
-                        },
-                    });
+                    const error = validateFile(file);
                     if (error)
                         return props.onError?.(error);
                     context.mutation.mutate({ file });
@@ -55,13 +42,6 @@ export function SelfieField(props) {
                             const error = validateFile(file);
                             if (error)
                                 return props.onError?.(error);
-                            const face = await getFaceFromFile(file);
-                            if (!face) {
-                                return props.onError?.({
-                                    name: 'FaceNotFoundError',
-                                    message: 'Please ensure your face is clearly visible in the photo.',
-                                });
-                            }
                             context.mutation.mutate({ file });
                         }, disabled: context.field?.disabled ||
                             context.query.isLoading ||
@@ -93,41 +73,31 @@ function Camera() {
     const context = useSelfieFieldContext();
     return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
             context.disclosure.setOpen(details.open);
-        }, onExitComplete: context.camera.close, 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 overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: "Make sure your face and ID are clearly visible, with no glare\u00A0or\u00A0blur." }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsxs("div", { className: twMerge('border-border-disabled relative w-full overflow-hidden rounded-md border bg-black lg:rounded-lg', !context.camera.data &&
-                                            !context.camera.error &&
-                                            !context.camera.loading
-                                            ? 'block'
-                                            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx(Mask, {})] }), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
+        }, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: context.camera.close, 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 overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: "Make sure your face and ID are clearly visible, with no glare\u00A0or\u00A0blur." }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
                                                     context.camera.reopen();
-                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled h-auto w-full overflow-hidden rounded-md border bg-black lg:rounded-lg", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 600, unoptimized: true, className: "block h-auto w-full" }) }))] }), !context.camera.data &&
-                                !context.camera.error &&
-                                !context.camera.loading && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl lg:w-auto", onClick: () => {
-                                        const rect = context.guideRef.current?.getBoundingClientRect();
-                                        const crop = !rect
-                                            ? undefined
-                                            : {
-                                                y: rect.y,
-                                                x: rect.x,
-                                                width: rect.width,
-                                                height: rect.height,
-                                            };
-                                        context.camera.snap({ crop });
-                                    }, disabled: !context.faceFound, children: [_jsx(Camera01Icon, { className: "size-5" }), "Capture"] }) })), context.camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10", children: [_jsxs(Button, { onClick: () => {
+                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled aspect-[4/3] w-full overflow-hidden rounded-md border bg-black lg:aspect-video", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 600, unoptimized: true, className: "mx-auto mt-2 block h-[calc(100%-1rem)] w-auto" }) }))] }), !context.camera.data && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl py-lg lg:w-[10rem]", onClick: () => {
+                                        context.camera.snap({
+                                            crop: context.guideRef.current?.getBoundingClientRect(),
+                                        });
+                                    }, disabled: !context.faceFound ||
+                                        context.camera.loading ||
+                                        context.camera.snapping ||
+                                        !!context.camera.error, children: [context.camera.snapping ? (_jsx(Spinner02Icon, { className: "size-5" })) : (_jsx(Camera01Icon, { className: "size-5" })), "Capture"] }) })), context.camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10 lg:justify-center", children: [_jsxs(Button, { onClick: () => {
                                             const file = context.camera.data?.file;
                                             if (!file)
                                                 return;
                                             context.mutation.mutate({ file });
                                             context.disclosure.setOpen(false);
-                                        }, children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
                                             context.camera.reset();
-                                        }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
 }
 /*
  * -------------------------------------
- *  Mask
+ *  Video
  * -------------------------------------
  */
-function Mask() {
+function Video() {
     const id = useId();
     const context = useSelfieFieldContext();
     const [maskBox, setMaskBox] = useState({
@@ -136,7 +106,7 @@ function Mask() {
         width: 0,
         height: 0,
     });
-    useLayoutEffect(() => {
+    useEffect(() => {
         const update = () => {
             const guide = context.guideRef.current;
             const mask = context.maskRef.current;
@@ -165,12 +135,43 @@ function Mask() {
         requestAnimationFrame(update);
         return () => observer.disconnect();
     }, [context.guideRef, context.maskRef]);
-    return (_jsxs(_Fragment, { children: [_jsx("svg", { className: "pointer-events-none absolute h-full w-full", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8" /* change to 100% for circle */, ry: "8" /* change to 100% for circle */ })] }) }) }), _jsx("div", { ref: context.maskRef, className: "absolute inset-0 bg-black/60 backdrop-blur-sm", style: {
+    const [videoSize, setVideoSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        const video = context.camera.videoRef.current;
+        if (!video)
+            return;
+        const updateVideoWidth = () => {
+            const rect = video.getBoundingClientRect();
+            setVideoSize({
+                width: rect.width,
+                height: rect.height,
+            });
+        };
+        video.addEventListener('loadedmetadata', updateVideoWidth);
+        video.addEventListener('resize', updateVideoWidth);
+        return () => {
+            video.removeEventListener('loadedmetadata', updateVideoWidth);
+            video.removeEventListener('resize', updateVideoWidth);
+        };
+    }, [context.camera.videoRef]);
+    const guideWidth = videoSize.width <= 0 || videoSize.height <= 0
+        ? 0
+        : videoSize.width > videoSize.height
+            ? videoSize.height
+            : videoSize.width;
+    return (_jsxs("div", { className: twMerge('relative h-auto w-full overflow-hidden', !context.camera.data && !context.camera.error && !context.camera.loading
+            ? 'block'
+            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx("svg", { className: "pointer-events-none absolute -inset-4 size-[200%]", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "200%", height: "200%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8", ry: "8" })] }) }) }), _jsx("div", { ref: context.maskRef, className: "absolute -inset-4 size-[200%] bg-black/60 backdrop-blur-sm", style: {
                     mask: `url(#${id})`,
                     WebkitMask: `url(#${id})`,
                     maskRepeat: 'no-repeat',
                     WebkitMaskRepeat: 'no-repeat',
-                } }), _jsx("div", { ref: context.guideRef, className: twMerge('border-utility-warning-700 absolute left-1/2 top-1/2 z-20 aspect-square w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-md border-2 border-dashed transition-all duration-200 lg:w-[24.688rem]', context.faceFound && 'border-utility-success-700 border-solid') })] }));
+                } }), _jsx("div", { ref: context.guideRef, className: twMerge('border-utility-warning-700 absolute left-1/2 top-1/2 z-20 aspect-square -translate-x-1/2 -translate-y-1/2 rounded-md border-2 border-dashed', context.faceFound && 'border-utility-success-700', guideWidth <= 0 ? 'hidden' : 'block'), style: {
+                    width: `calc(${guideWidth}px - 2rem)`,
+                } })] }));
 }
 function useSelfieField(props) {
     const field = useFieldContext();
@@ -208,17 +209,18 @@ function useSelfieField(props) {
     const guideRef = useRef(null);
     const camera = useCamera({
         async validate(data) {
-            const face = await getFaceFromFile(data.file);
-            console.log(face);
             /*
-             ⛏️ FIXME
-            if (!face) {
-              return {
-                name: 'FaceNotFoundError',
-                message: 'Please ensure your face is clearly visible in the photo.',
-              };
-            }
+             * 💁‍♂️
+             * Check if we still have the face.
+             * User could have moved away from the camera
              */
+            const ok = await validateFaceFromImage(data.image);
+            if (!ok) {
+                return {
+                    name: 'FaceNotFoundError',
+                    message: 'Please ensure your face is clearly visible in the photo.',
+                };
+            }
         },
     });
     const disclosure = useDisclosure({
@@ -230,32 +232,10 @@ function useSelfieField(props) {
     });
     const [faceFound, setFaceFound] = useState(false);
     useInterval(async () => {
-        if (!camera.videoRef.current)
+        if (!camera.videoRef.current || !guideRef.current) {
             return setFaceFound(false);
-        if (!guideRef.current)
-            return setFaceFound(false);
-        const guide = guideRef.current;
-        const video = camera.videoRef.current;
-        const guideRect = guide.getBoundingClientRect();
-        const videoRect = video.getBoundingClientRect();
-        const face = await getFace(video);
-        if (!face)
-            return setFaceFound(false);
-        /* ⛏️ FIXME */
-        const scaleX = videoRect.width / video.videoWidth;
-        const scaleY = videoRect.height / video.videoHeight;
-        const offsetX = videoRect.left;
-        const offsetY = videoRect.top;
-        const faceBoxX = offsetX + face.box.xMin * video.videoWidth * scaleX;
-        const faceBoxY = offsetY + face.box.yMin * video.videoHeight * scaleY;
-        const faceBoxWidth = (face.box.xMax - face.box.xMin) * video.videoWidth * scaleX;
-        const faceBoxHeight = (face.box.yMax - face.box.yMin) * video.videoHeight * scaleY;
-        const faceIsInsideGuide = faceBoxX >= guideRect.left &&
-            faceBoxY >= guideRect.top &&
-            faceBoxX + faceBoxWidth <= guideRect.right &&
-            faceBoxY + faceBoxHeight <= guideRect.bottom;
-        console.log({ faceIsInsideGuide });
-        setFaceFound(true);
+        }
+        setFaceFound(await validateFace(camera.videoRef.current, guideRef.current));
     }, disclosure.open && !camera.data && !camera.error && !camera.loading
         ? 1000
         : null);
@@ -279,44 +259,61 @@ const [SelfieFieldProvider, useSelfieFieldContext] = createContext();
  *  Utils
  * -------------------------------------
  */
-let __face_detector__;
-async function getFaceDetector() {
-    if (__face_detector__)
-        return __face_detector__;
-    __face_detector__ = await faceDetection.createDetector(faceDetection.SupportedModels.MediaPipeFaceDetector, {
-        runtime: 'tfjs',
-        maxFaces: 1,
-    });
-    return __face_detector__;
-}
-async function getFace(video) {
-    if (!video || video.readyState < 2)
-        return null;
-    try {
-        const detector = await getFaceDetector();
-        const faces = await detector.estimateFaces(video);
-        return faces.at(0) ?? null;
-    }
-    catch {
-        return null;
-    }
+let __faceapi_models_loaded__ = false;
+async function loadFaceApiModels() {
+    if (__faceapi_models_loaded__)
+        return;
+    await Promise.all([
+        faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
+        faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
+        faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
+    ]);
+    __faceapi_models_loaded__ = true;
 }
-function fileToImage(file) {
-    return new Promise((resolve, reject) => {
-        const img = new globalThis.Image();
-        img.src = URL.createObjectURL(file);
-        img.onload = () => resolve(img);
-        img.onerror = () => reject('Failed to load image');
-    });
-}
-async function getFaceFromFile(file) {
-    try {
-        const detector = await getFaceDetector();
-        const image = await fileToImage(file);
-        const faces = await detector.estimateFaces(image);
-        return faces.at(0) ?? null;
-    }
-    catch {
-        return null;
-    }
+const validateFace = cache(async (video, guide) => {
+    await loadFaceApiModels();
+    const videoRect = video.getBoundingClientRect();
+    const guideRect = guide.getBoundingClientRect();
+    const canvas = document.createElement('canvas');
+    canvas.width = videoRect.width;
+    canvas.height = videoRect.height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return false;
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const detection = await faceapi.detectSingleFace(canvas, new faceapi.TinyFaceDetectorOptions({
+        inputSize: 224,
+        scoreThreshold: 0.75,
+    }));
+    if (!detection)
+        return false;
+    const { x, y, width, height } = detection.box;
+    const faceBox = {
+        left: x,
+        right: x + width,
+        top: y,
+        bottom: y + height,
+    };
+    const guideBox = {
+        left: guideRect.left - videoRect.left,
+        right: guideRect.right - videoRect.left,
+        top: guideRect.top - videoRect.top,
+        bottom: guideRect.bottom - videoRect.top,
+    };
+    const overlapWidth = Math.max(0, Math.min(faceBox.right, guideBox.right) -
+        Math.max(faceBox.left, guideBox.left));
+    const overlapHeight = Math.max(0, Math.min(faceBox.bottom, guideBox.bottom) -
+        Math.max(faceBox.top, guideBox.top));
+    const overlapArea = overlapWidth * overlapHeight;
+    const faceArea = width * height;
+    const overlapRatio = overlapArea / faceArea;
+    return overlapRatio >= 0.6;
+});
+export async function validateFaceFromImage(img) {
+    await loadFaceApiModels();
+    const detection = await faceapi.detectSingleFace(img, new faceapi.TinyFaceDetectorOptions({
+        inputSize: 224,
+        scoreThreshold: 0.5,
+    }));
+    return detection != null;
 }

package/dist/constants/StorageKey.d.ts

@@ -1,3 +1,4 @@
 export declare const ACCESS_TOKEN_COOKIE_NAME: string;
 export declare const REFRESH_TOKEN_COOKIE_NAME: string;
 export declare const DOMAIN_COOKIE_NAME: string;
+export declare const FEATURE_FLAG_LOCAL_STORAGE_KEY: string;

package/dist/constants/StorageKey.js

@@ -1,3 +1,4 @@
 export const ACCESS_TOKEN_COOKIE_NAME = 'WebPortalAuthAccessToken';
 export const REFRESH_TOKEN_COOKIE_NAME = 'WebPortalAuthRefreshToken';
 export const DOMAIN_COOKIE_NAME = 'WebPortalDomain';
+export const FEATURE_FLAG_LOCAL_STORAGE_KEY = 'WebPortalFeatureFlag';

package/dist/services/httpRequest.js

@@ -72,16 +72,35 @@ const KnownErrorSchema = z
     .object({
     code: z.string().optional(),
     message: z.string().optional(),
+    __error: z
+        .object({
+        name: z
+            .union([z.string(), z.object({ code: z.string().optional() })])
+            .optional(),
+        message: z.string().optional(),
+    })
+        .optional(),
 })
     .nullable()
     .catch(null)
-    .transform((v) => v?.code ?? v?.message ?? null);
+    .transform((v) => {
+    if (v?.__error) {
+        return ((typeof v.__error.name === 'string'
+            ? v.__error.name
+            : v.__error.name?.code) ??
+            v.__error.message ??
+            v.code ??
+            v.message ??
+            null);
+    }
+    return v?.code ?? v?.message ?? null;
+});
 function getErrorMessage(code) {
     switch (code) {
-        case 'ACCOUNT_BLACKLISTED':
-            return 'Account is blacklisted';
+        case 'MEMBER_ACCOUNT_BLACKLISTED':
+            return 'Your account has been blacklisted due to a serious violation of our policies. For more information or to appeal, please contac Chat Support team.';
         case 'MEMBER_ACCOUNT_SUSPENDED':
-            return 'Account is suspended';
+            return 'Your account has been temporarily suspended. Please reach out to the Chat Support team to learn more and get help with resolving the issue.';
         case 'INVALID_RECAPTCHA_RESPONSE':
             return 'Invalid reCAPTCHA response';
         case 'MEMBER_NOT_FOUND':
@@ -90,6 +109,8 @@ function getErrorMessage(code) {
             return 'Rate limit exceeded';
         case 'NOT_READY_TO_SEND_VERIFICATION_ERROR':
             return 'Not ready to send verification code';
+        case 'Forbidden':
+            return 'Invalid username or password. Please try again.';
         default:
             return 'Something went wrong. Please try again later.';
     }