@opexa/portal-components 0.0.171 → 0.0.173

package/dist/components/KYC/CaptureSelfie.js

@@ -2,6 +2,7 @@
 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 { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
 import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
 import { Camera01Icon } from '../../icons/Camera01Icon.js';
@@ -178,9 +179,15 @@ export function CaptureSelfie() {
             videoStream.getTracks().forEach((track) => track.stop());
             setVideoStream(null);
         }
-        if (videoRef.current) {
+        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);
     }
@@ -247,5 +254,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" })] })] })), !selectedImage && (_jsxs(Button, { className: "mx-auto mt-6 px-xl lg:mt-8", 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: 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" })] }))] }));
 }

package/dist/components/Messages/MessagesPopup.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useInterval } from 'usehooks-ts';
 import { useShallow } from 'zustand/shallow';
 import { useDisclosure } from '../../client/hooks/useDisclosure.js';
@@ -30,6 +30,10 @@ export function MessagesPopup() {
         depositWithdrawal: ctx.depositWithdrawal,
     })));
     const markMessageAsReadMutation = useMarkMessageAsReadMutation();
+    const [paused, setPaused] = useState(false);
+    useInterval(() => {
+        setPaused(false);
+    }, paused ? 1000 * 15 : null);
     const disclosure = useDisclosure({
         onOpenChange(open) {
             if (open) {
@@ -41,13 +45,11 @@ export function MessagesPopup() {
                 markMessageAsReadMutation.mutate(message.id);
             }
             else {
-                setPaused(true);
                 setIndex_(0);
+                setPaused(true);
             }
         },
     });
-    const [paused, setPaused] = useState(false);
-    useInterval(() => setPaused(false), paused ? 1000 * 30 : null);
     const messagesQuery = useMessagesQuery({
         first: 10,
         filter: {
@@ -65,7 +67,7 @@ export function MessagesPopup() {
             !globalStore.message.open &&
             !globalStore.kyc.open &&
             !paused,
-        refetchInterval: disclosure.open ? undefined : 10000,
+        refetchInterval: disclosure.open ? undefined : 1000 * 10,
     });
     const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((edge) => edge.node)) ?? [];
     const [index, setIndex_] = useState(0);
@@ -78,16 +80,16 @@ export function MessagesPopup() {
             return;
         markMessageAsReadMutation.mutate(message.id);
     };
-    useEffect(() => {
-        if (messages.length > 0) {
-            disclosure.setOpen(true);
-        }
-    }, [disclosure, messages.length, paused]);
+    useInterval(() => {
+        if (messages.length <= 0)
+            return;
+        disclosure.setOpen(true);
+    }, disclosure.open || paused ? null : 2500);
     return (_jsx(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => {
             disclosure.setOpen(details.open);
         }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Carousel.Root, { page: index, onPageChange: (details) => {
                                     setIndex(details.page);
-                                }, slideCount: messages.length, allowMouseDrag: true, children: [_jsx(Carousel.ItemGroup, { children: messages.map((message, index) => (_jsxs(Carousel.Item, { index: index, className: "select-none", children: [_jsx("div", { className: "bg-bg-brand-secondary text-text-brand mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(MessageIcon, { type: message.icon, className: "size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold xl:mt-xl", children: message.title }), message.content && (_jsx("div", { dangerouslySetInnerHTML: { __html: message.content }, className: "text-text-secondary-700 mt-xs pb-5 text-center text-sm" })), message.image && (_jsx("div", { className: "mt-5 pb-5", children: _jsx(Image, { src: message.image, alt: "", width: 400, height: 250, loading: "lazy", unoptimized: true, className: "h-auto w-full rounded-sm" }) })), message.actions.length ? (_jsx("div", { className: "mt-3xl flex flex-col gap-2 text-center lg:mt-4xl", children: message.actions.map((action, index) => (_jsx(Button, { asChild: true, children: _jsx(Link, { href: normalizeActionUrl(action.url, {
+                                }, slideCount: messages.length, allowMouseDrag: true, autoplay: false, children: [_jsx(Carousel.ItemGroup, { children: messages.map((message, index) => (_jsxs(Carousel.Item, { index: index, className: "select-none", children: [_jsx("div", { className: "bg-bg-brand-secondary text-text-brand mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(MessageIcon, { type: message.icon, className: "size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold xl:mt-xl", children: message.title }), message.content && (_jsx("div", { dangerouslySetInnerHTML: { __html: message.content }, className: "text-text-secondary-700 mt-xs pb-5 text-center text-sm" })), message.image && (_jsx("div", { className: "mt-5 pb-5", children: _jsx(Image, { src: message.image, alt: "", width: 400, height: 250, loading: "lazy", unoptimized: true, className: "h-auto w-full rounded-sm" }) })), message.actions.length ? (_jsx("div", { className: "mt-3xl flex flex-col gap-2 text-center lg:mt-4xl", children: message.actions.map((action, index) => (_jsx(Button, { asChild: true, children: _jsx(Link, { href: normalizeActionUrl(action.url, {
                                                                 questsPageUrl,
                                                                 transactionsPageUrl,
                                                             }), onClick: () => {

package/dist/handlers.js

@@ -1,7 +1,7 @@
 import { addDays, addMinutes, subMinutes } from 'date-fns';
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
-import { ACCESS_TOKEN_COOKIE_NAME, DOMAIN_COOKIE_NAME, DOMAIN_HEADER_KEY, PLATFORM_CODE, RECAPTCHA_HEADER_KEY, REFRESH_TOKEN_COOKIE_NAME, } from './constants/index.js';
+import { ACCESS_TOKEN_COOKIE_NAME, DOMAIN_COOKIE_NAME, DOMAIN_HEADER_KEY, RECAPTCHA_HEADER_KEY, REFRESH_TOKEN_COOKIE_NAME, } from './constants/index.js';
 import { authenticate, createSession, destroySession, refreshSession, } from './services/auth.js';
 const CreateSessionDefinition = z.union([
     z.object({
@@ -163,18 +163,17 @@ export const POST = async (request, { params }) => {
     if (path === 'sessions') {
         const body = await request.json();
         const parsed = CreateSessionDefinition.safeParse(body);
-        const recaptcha = request.headers.get(RECAPTCHA_HEADER_KEY);
-        const domain = request.headers.get(DOMAIN_HEADER_KEY);
         if (!parsed.success) {
             return NextResponse.json({
                 ok: false,
                 message: parsed.error.issues[0].message,
             }, { status: 400 });
         }
+        const recaptcha = request.headers.get(RECAPTCHA_HEADER_KEY);
+        const domain = request.headers.get(DOMAIN_HEADER_KEY);
         try {
             const res = await createSession(parsed.data, {
                 headers: {
-                    'Platform-Code': PLATFORM_CODE,
                     ...(recaptcha && {
                         [RECAPTCHA_HEADER_KEY]: recaptcha,
                     }),
@@ -218,18 +217,17 @@ export const POST = async (request, { params }) => {
     if (path === 'authenticate') {
         const body = await request.json();
         const parsed = AuthenticateDefinition.safeParse(body);
-        const recaptcha = request.headers.get(RECAPTCHA_HEADER_KEY);
-        const domain = request.headers.get(DOMAIN_HEADER_KEY);
         if (!parsed.success) {
             return NextResponse.json({
                 ok: false,
                 message: parsed.error.issues[0].message,
             }, { status: 400 });
         }
+        const recaptcha = request.headers.get(RECAPTCHA_HEADER_KEY);
+        const domain = request.headers.get(DOMAIN_HEADER_KEY);
         try {
             const res = await authenticate(parsed.data, {
                 headers: {
-                    'Platform-Code': PLATFORM_CODE,
                     ...(recaptcha && {
                         [RECAPTCHA_HEADER_KEY]: recaptcha,
                     }),

package/dist/middleware.js

@@ -12,13 +12,20 @@ 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.get('m')) {
+    if (req.nextUrl.searchParams.has('m')) {
         res.cookies.set(DOMAIN_COOKIE_NAME, `${req.nextUrl.origin}/${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/package.json

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