@opexa/portal-components 0.0.176 → 0.0.178

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

@@ -0,0 +1,3 @@
+import type { Mutation } from '../../types';
+import { type UpdateSessionInput } from '../services/updateSession';
+export declare const useUpdateSessionMutation: Mutation<boolean, UpdateSessionInput>;

package/dist/client/hooks/useUpdateSessionMutation.js

@@ -0,0 +1,26 @@
+import { useMutation } from '@tanstack/react-query';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getUpdateSessionMutationKey } from '../../utils/mutationKeys.js';
+import { getSessionQueryKey } from '../../utils/queryKeys.js';
+import { updateSession, } from '../services/updateSession.js';
+export const useUpdateSessionMutation = (config) => {
+    const queryClient = getQueryClient();
+    return useMutation({
+        ...config,
+        mutationKey: getUpdateSessionMutationKey(),
+        mutationFn: async (input) => {
+            const ok = await updateSession(input);
+            queryClient.setQueryData(getSessionQueryKey(), (prev) => {
+                if (!prev)
+                    return prev;
+                if (!input.domain)
+                    return prev;
+                return {
+                    ...prev,
+                    ...input,
+                };
+            });
+            return ok;
+        },
+    });
+};

package/dist/client/services/updateSession.d.ts

@@ -0,0 +1,5 @@
+import { type HttpRequestOptions } from '../../services/httpRequest';
+export interface UpdateSessionInput {
+    domain?: string;
+}
+export declare const updateSession: (input: UpdateSessionInput, options?: HttpRequestOptions) => Promise<boolean>;

package/dist/client/services/updateSession.js

@@ -0,0 +1,15 @@
+import { cache } from 'react';
+import { httpRequest, } from '../../services/httpRequest.js';
+export const updateSession = cache(async (input, options) => {
+    try {
+        const { ok } = await httpRequest.json('/api/sessions', {
+            ...options,
+            method: 'PATCH',
+            body: JSON.stringify(input),
+        });
+        return ok;
+    }
+    catch {
+        return false;
+    }
+});

package/dist/components/KYC/CaptureIdDocument.js

@@ -10,7 +10,8 @@ import { XIcon } from '../../icons/XIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { useKYCContext } from './KYCContext.js';
-import { dataURLtoBlob, resizeFile } from './utils.js';
+import NoCameraError from './NoCameraError.js';
+import { dataURLtoBlob, resizeFile, showPermissionInstructions } from './utils.js';
 export function CaptureIdDocument() {
     const kyc = useKYCContext();
     const { mutate, isPending } = useUploadImageFileMutation();
@@ -89,7 +90,7 @@ export function CaptureIdDocument() {
             setIsLoading(false);
             if (error instanceof DOMException) {
                 console.error('Error accessing camera:', error.message);
-                setCameraError(error.message);
+                setCameraError(error.name);
             }
             else {
                 console.error('Unknown error accessing camera:', error);
@@ -149,12 +150,12 @@ export function CaptureIdDocument() {
             };
             newImg.onerror = () => {
                 console.error('Error loading image');
-                setCameraError('Failed to load image. Please try again.');
+                setCameraError('NoIdDetectedError');
             };
         }
         catch (error) {
             console.error('Error capturing image:', error);
-            setCameraError('Failed to capture image. Please try again.');
+            setCameraError('NoIdDetectedError');
             setCaptureInProgress(false);
         }
     }
@@ -194,11 +195,20 @@ export function CaptureIdDocument() {
         }
         startCamera();
     }
+    function checkCameraPermission() {
+        const constraints = { video: true };
+        navigator.mediaDevices
+            .getUserMedia(constraints)
+            .then(() => {
+            setCameraError(null);
+            startCamera();
+        })
+            .catch(() => {
+            showPermissionInstructions();
+        });
+    }
     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" })] }))] }) }));
+                    }, 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: ['NotAllowedError', 'NotReadableError', 'NotFoundError'].includes(cameraError) ? (_jsx(NoCameraError, { onRetry: checkCameraPermission, title: "Camera Access Required", description: "We were unable to detect a camera on your device. Please ensure it is properly connected and\r\n            accessible to this application." })) : 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]" })) }), 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: twMerge('disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit', cameraError && 'hidden'), onClick: startCamera, disabled: isLoading || !!videoStream, children: [isLoading ? 'Starting Camera...' : 'Start Camera', _jsx(Camera01Icon, { className: "size-5" })] }))] }) }));
 }

package/dist/components/KYC/CaptureSelfie.js

@@ -11,8 +11,9 @@ import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { onMobileDevice } from '../../utils/onMobileDevice.js';
 import { useKYCContext } from './KYCContext.js';
+import NoCameraError from './NoCameraError.js';
 import PersonOverlayDesktop from './PersonOverlayDesktop.js';
-import { dataURLtoBlob, loadFaceApiModels, resizeFile } from './utils.js';
+import { dataURLtoBlob, loadFaceApiModels, resizeFile, showPermissionInstructions, } from './utils.js';
 export function CaptureSelfie() {
     const kyc = useKYCContext();
     const { mutate, isPending } = useUploadImageFileMutation();
@@ -40,32 +41,46 @@ export function CaptureSelfie() {
         }
     }, [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.');
-                });
-            };
+        try {
+            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.');
+                    });
+                };
+            }
+        }
+        catch (error) {
+            if (error instanceof DOMException) {
+                console.error('Error accessing camera:', error.message);
+                setCameraError(error.name);
+            }
+            else {
+                console.error('Unknown error accessing camera:', error);
+                setCameraError('An unknown error occurred. Please check permissions and try again.');
+            }
+            setCaptureInProgress(false);
+            stopCamera();
         }
     }
     function startFaceDetection() {
@@ -241,6 +256,18 @@ export function CaptureSelfie() {
             });
         }
     }
+    function checkCameraPermission() {
+        const constraints = { video: true };
+        navigator.mediaDevices
+            .getUserMedia(constraints)
+            .then(() => {
+            setCameraError(null);
+            startCamera();
+        })
+            .catch(() => {
+            showPermissionInstructions();
+        });
+    }
     useEffect(() => {
         return () => {
             if (detectionIntervalRef.current) {
@@ -254,5 +281,5 @@ export function CaptureSelfie() {
     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: () => {
                     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 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: ["Rekate 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", disabled: isPending, 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" })] }))] }));
+                }, 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: ['NotAllowedError', 'NotReadableError', 'NotFoundError'].includes(cameraError) ? (_jsx(NoCameraError, { onRetry: checkCameraPermission, title: "Camera Access Required", description: "We were unable to detect a camera on your device. Please ensure it is properly connected and accessible to this application." })) : captureInProgress && !cameraError ? (_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: ["Rekate 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", disabled: isPending, children: ["Use Photo", _jsx(Camera01Icon, { className: "size-5" })] })] })), !captureInProgress && !cameraError && (_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/KYC/NoCameraError.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    onRetry: () => void;
+    title: string;
+    description: string;
+}
+declare function NoCameraError({ onRetry, title, description }: Props): import("react/jsx-runtime").JSX.Element;
+export default NoCameraError;

package/dist/components/KYC/NoCameraError.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../ui/Button/index.js';
+function NoCameraError({ onRetry, title, description }) {
+    return (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 p-4", children: [_jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-red-500 mb-2", children: title }), _jsx("p", { className: "mb-2 text-sm", children: description })] }), _jsx(Button, { className: "mx-auto px-xl lg:w-fit", onClick: onRetry, size: "sm", children: "Try Again" })] }));
+}
+export default NoCameraError;

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

@@ -5,3 +5,4 @@ export declare const MAX_FILE_SIZE = 10;
 export declare const MAX_NAME_LENGTH = 52;
 export declare const SUPPORTED_FILES: string[];
 export declare function validateFile(file: File): "File too large" | "File name too long" | "Unsupported file" | undefined;
+export declare function showPermissionInstructions(): void;

package/dist/components/KYC/utils.js

@@ -48,3 +48,25 @@ export function validateFile(file) {
     if (!SUPPORTED_FILES.includes(fileType))
         return 'Unsupported file';
 }
+export function showPermissionInstructions() {
+    const instructions = `
+      Camera access is blocked. To enable camera access:
+
+      Chrome/Edge:
+      1. Click the camera icon in the address bar
+      2. Select "Always allow" and click "Done"
+      3. Or go to Settings > Privacy and security > Site settings > Camera
+
+      Firefox:
+      1. Click the shield icon in the address bar
+      2. Click on "Camera blocked"
+      3. Select "Allow" and refresh the page
+
+      Safari:
+      1. Go to Safari > Settings > Websites > Camera
+      2. Find this website and change to "Allow"
+
+      After changing permissions, please refresh the page and try again.
+        `;
+    alert(instructions);
+}

package/dist/components/PortalProvider/PortalProvider.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface PortalProviderProps {
     googleAnalyticsId?: string;
     googleTagManagerId?: string;

package/dist/components/PortalProvider/PortalProvider.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+import { Suspense } from 'react';
 import { prefetchAccountQuery } from '../../server/utils/prefetchAccountQuery.js';
 import { prefetchPlatformQuery } from '../../server/utils/prefetchPlatformQuery.js';
 import { prefetchSessionQuery } from '../../server/utils/prefetchSessionQuery.js';
@@ -8,6 +9,7 @@ import { prefetchWalletQuery } from '../../server/utils/prefetchWalletQuery.js';
 import { FacebookPixel, GoogleRecaptcha } from '../../third-parties/index.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { Providers } from './Providers.js';
+import { SetupDomain } from './SetupDomain.js';
 import { Snackbar } from './Snackbar.js';
 import { WebVitals } from './WebVitals.js';
 export async function PortalProvider({ children, facebookPixelId, googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, }) {
@@ -18,5 +20,5 @@ export async function PortalProvider({ children, facebookPixelId, googleAnalytic
         prefetchAccountQuery(),
         prefetchWalletQuery(),
     ]);
-    return (_jsxs(_Fragment, { children: [_jsx(WebVitals, {}), _jsx(Providers, { children: _jsx(HydrationBoundary, { state: dehydrate(queryClient), children: children }) }), _jsx(Snackbar, {}), facebookPixelId && _jsx(FacebookPixel, { fbId: facebookPixelId }), googleAnalyticsId && _jsx(GoogleAnalytics, { gaId: googleAnalyticsId }), googleTagManagerId && _jsx(GoogleTagManager, { gtmId: googleTagManagerId }), googleRecaptchaSiteKey && (_jsx(GoogleRecaptcha, { siteKey: googleRecaptchaSiteKey }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(WebVitals, {}), _jsx(Providers, { children: _jsxs(HydrationBoundary, { state: dehydrate(queryClient), children: [children, _jsx(Suspense, { fallback: null, children: _jsx(SetupDomain, {}) })] }) }), _jsx(Snackbar, {}), facebookPixelId && _jsx(FacebookPixel, { fbId: facebookPixelId }), googleAnalyticsId && _jsx(GoogleAnalytics, { gaId: googleAnalyticsId }), googleTagManagerId && _jsx(GoogleTagManager, { gtmId: googleTagManagerId }), googleRecaptchaSiteKey && (_jsx(GoogleRecaptcha, { siteKey: googleRecaptchaSiteKey }))] }));
 }

package/dist/components/PortalProvider/SetupDomain.d.ts

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

package/dist/components/PortalProvider/SetupDomain.js

@@ -0,0 +1,20 @@
+'use client';
+import { useSearchParams } from 'next/navigation';
+import { useTimeout } from 'usehooks-ts';
+import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
+import { useUpdateSessionMutation } from '../../client/hooks/useUpdateSessionMutation.js';
+export function SetupDomain() {
+    const searchParams = useSearchParams();
+    const sessionQuery = useSessionQuery();
+    const updateSessionMutation = useUpdateSessionMutation();
+    useTimeout(() => {
+        const market = searchParams.get('m');
+        const domain = market
+            ? `${window.location.host}/${market}`
+            : `${window.location.host}`;
+        if (domain === sessionQuery.data?.domain)
+            return;
+        updateSessionMutation.mutate({ domain });
+    }, sessionQuery.isPending ? null : 1000);
+    return null;
+}

package/dist/handlers.d.ts

@@ -36,3 +36,8 @@ export declare const POST: (request: NextRequest, { params }: {
         auth: string[];
     }>;
 }) => Promise<NextResponse>;
+export declare const PATCH: (request: NextRequest, { params }: {
+    params: Promise<{
+        auth: string[];
+    }>;
+}) => Promise<NextResponse>;

package/dist/handlers.js

@@ -62,7 +62,7 @@ export const GET = async (request, { params }) => {
     if (path === 'sessions') {
         const accessToken = request.cookies.get(ACCESS_TOKEN_COOKIE_NAME)?.value;
         const refreshToken = request.cookies.get(REFRESH_TOKEN_COOKIE_NAME)?.value;
-        const domain = request.cookies.get(DOMAIN_COOKIE_NAME)?.value ?? request.nextUrl.origin;
+        const domain = request.cookies.get(DOMAIN_COOKIE_NAME)?.value ?? request.nextUrl.host;
         if (!refreshToken) {
             const response = NextResponse.json({
                 ok: true,
@@ -260,3 +260,38 @@ export const POST = async (request, { params }) => {
         message: 'Not found',
     }, { status: 404 });
 };
+const UpdateSessionDefinition = z.object({
+    domain: z.string().optional().nullable(),
+});
+export const PATCH = async (request, { params }) => {
+    const { auth } = await params;
+    const path = auth[0];
+    /*
+     *
+     * PATCH -> /api/sessions
+     *
+     */
+    if (path === 'sessions') {
+        const body = await request.json();
+        const parsed = UpdateSessionDefinition.safeParse(body);
+        if (!parsed.success) {
+            return NextResponse.json({
+                ok: false,
+                message: parsed.error.issues[0].message,
+            }, { status: 400 });
+        }
+        const response = NextResponse.json({ ok: true });
+        if (parsed.data.domain) {
+            response.cookies.set(DOMAIN_COOKIE_NAME, parsed.data.domain, {
+                expires: addDays(new Date(), 30),
+                httpOnly: true,
+                sameSite: 'strict',
+            });
+        }
+        return response;
+    }
+    return NextResponse.json({
+        ok: false,
+        message: 'Not found',
+    }, { status: 404 });
+};

package/dist/middleware.js

@@ -1,25 +1,11 @@
-import { addDays, addMinutes } from 'date-fns';
+import { addMinutes } from 'date-fns';
 import { NextFetchEvent, NextResponse, } from 'next/server';
-import { ACCESS_TOKEN_COOKIE_NAME, DOMAIN_COOKIE_NAME, REFRESH_TOKEN_COOKIE_NAME, } from './constants/index.js';
+import { ACCESS_TOKEN_COOKIE_NAME, REFRESH_TOKEN_COOKIE_NAME, } from './constants/index.js';
 import { refreshSession } from './services/auth.js';
 export const middleware = async (req) => {
     const accessToken = req.cookies.get(ACCESS_TOKEN_COOKIE_NAME)?.value;
     const refreshToken = req.cookies.get(REFRESH_TOKEN_COOKIE_NAME)?.value;
     const res = NextResponse.next();
-    if (req.nextUrl.searchParams.has('m')) {
-        res.cookies.set(DOMAIN_COOKIE_NAME, `${req.nextUrl.hostname}/${req.nextUrl.searchParams.get('m')}`, {
-            expires: addDays(new Date(), 30),
-            httpOnly: true,
-            sameSite: 'strict',
-        });
-    }
-    if (!res.cookies.has(DOMAIN_COOKIE_NAME)) {
-        res.cookies.set(DOMAIN_COOKIE_NAME, req.nextUrl.origin, {
-            expires: addDays(new Date(), 30),
-            httpOnly: true,
-            sameSite: 'strict',
-        });
-    }
     if (!accessToken && refreshToken) {
         try {
             const data = await refreshSession({

package/dist/server/services/getSession.js

@@ -5,9 +5,10 @@ export const getSession = cache(async () => {
     const Cookies = await cookies();
     const Headers = await headers();
     const token = Cookies.get(ACCESS_TOKEN_COOKIE_NAME)?.value;
-    const headerProto = Headers.get('x-forwarded-proto') ?? 'http';
-    const headerHost = Headers.get('x-forwarded-host') ?? 'localhost';
-    const domain = Cookies.get(DOMAIN_COOKIE_NAME)?.value ?? `${headerProto}://${headerHost}`;
+    const domain = Cookies.get(DOMAIN_COOKIE_NAME)?.value ??
+        Headers.get('host') ??
+        Headers.get('x-forwarded-host') ??
+        'localhost';
     return token
         ? {
             status: 'authenticated',

package/dist/utils/mutationKeys.d.ts

@@ -30,3 +30,4 @@ export declare const getCompleteOnboardingMutationKey: () => MutationKey;
 export declare const getSkipOnboardingMutationKey: () => MutationKey;
 export declare const getUploadImageFileMutationKey: () => MutationKey;
 export declare const getResetPasswordMutationKey: () => MutationKey;
+export declare const getUpdateSessionMutationKey: () => MutationKey;

package/dist/utils/mutationKeys.js

@@ -114,3 +114,7 @@ export const getResetPasswordMutationKey = () => [
     PARENT_KEY,
     'resetPassword',
 ];
+export const getUpdateSessionMutationKey = () => [
+    PARENT_KEY,
+    'updateSession',
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.176",
+  "version": "0.0.178",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",