@opexa/portal-components 0.0.258 → 0.0.260

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

@@ -9,22 +9,10 @@ export interface CameraData {
     file: File;
     image: HTMLImageElement;
 }
-export interface CameraCropPoints {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export type ScaleFactor = 1 | 1.15 | 1.25 | 1.5 | 1.75 | 2 | 2.15 | 2.25 | 2.5 | 2.75 | 3;
-export interface CameraSnapOptions {
-    crop?: CameraCropPoints;
-    /** @default 2 */
-    scale?: ScaleFactor;
-}
 export interface UseCameraReturn<T extends string = never> {
     open(): Promise<void>;
     close(): Promise<void>;
-    snap(options?: CameraSnapOptions): Promise<void>;
+    snap(): Promise<void>;
     reopen(): Promise<void>;
     reset(): Promise<void>;
     data: CameraData | null;
@@ -34,11 +22,18 @@ export interface UseCameraReturn<T extends string = never> {
     videoRef: React.RefObject<HTMLVideoElement | null>;
     videoProps: ComponentPropsWithRef<'video'>;
 }
-export interface CameraTransformData extends CameraData {
+export type CameraTransformResult<T extends string = never> = {
+    ok: false;
+    error: CameraError<T>;
+} | {
+    ok: true;
+    data: CameraData;
+};
+export interface CameraTransformContext extends CameraData {
+    video: HTMLVideoElement;
     canvas: HTMLCanvasElement;
 }
 export interface UseCameraOptions<T extends string = never> extends MediaStreamConstraints {
-    transform?(data: CameraTransformData): CameraData | Promise<CameraData>;
-    validate?(data: CameraData): CameraError<T> | void | null | undefined | Promise<CameraError<T> | void | null | undefined>;
+    transform?(context: CameraTransformContext): CameraTransformResult<T> | Promise<CameraTransformResult<T>>;
 }
 export declare function useCamera<T extends string = never>(options?: UseCameraOptions<T>): UseCameraReturn<T>;

package/dist/client/hooks/useCamera.js

@@ -1,9 +1,8 @@
-import { isBoolean, isFunction, isObject } from 'lodash-es';
+import { isBoolean, isObject } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import invariant from 'tiny-invariant';
 import { useMediaQuery } from 'usehooks-ts';
 export function useCamera(options = {}) {
-    const { transform, validate, ...constraints } = options;
     const videoRef = useRef(null);
     const streamRef = useRef(null);
     const [data, setData] = useState(null);
@@ -30,7 +29,7 @@ export function useCamera(options = {}) {
             const result = await navigator.mediaDevices.getUserMedia({
                 audio: false,
                 preferCurrentTab: true,
-                ...constraints,
+                ...options,
                 video: {
                     facingMode: 'user',
                     noiseSuppression: true,
@@ -47,14 +46,14 @@ export function useCamera(options = {}) {
                         max: 120,
                         ideal: 90,
                     },
-                    ...(isBoolean(constraints.video) ? {} : constraints.video),
+                    ...(isBoolean(options.video) ? {} : options.video),
                 },
             });
             node.srcObject = result;
             streamRef.current = result;
-            setMirror(!isObject(constraints.video)
+            setMirror(!isObject(options.video)
                 ? true
-                : constraints.video.facingMode === 'environment'
+                : options.video.facingMode === 'environment'
                     ? false
                     : true);
         }
@@ -85,7 +84,7 @@ export function useCamera(options = {}) {
         finally {
             setLoading(false);
         }
-    }, [constraints, desktop]);
+    }, [options, desktop]);
     const close = useCallback(() => {
         setData(null);
         setError(null);
@@ -97,7 +96,7 @@ export function useCamera(options = {}) {
             resolve();
         });
     }, [setData, setError]);
-    const snap = useCallback(async (opts = {}) => {
+    const snap = useCallback(async () => {
         setData(null);
         setError(null);
         setSnapping(true);
@@ -107,44 +106,15 @@ export function useCamera(options = {}) {
         invariant(video, 'Could not find video element');
         invariant(context, 'Could not get canvas context');
         video.currentTime = 1;
-        const videoRect = video.getBoundingClientRect();
-        const lowResolution = video.videoWidth < 640 || video.videoHeight < 480;
-        const hdResolution = video.videoWidth >= 1280 && video.videoHeight >= 720;
-        const highResolution = video.videoWidth >= 1920 && video.videoHeight >= 1080;
-        const scaleFactor = lowResolution
-            ? (opts.scale ?? (opts.crop ? 2.15 : 2))
-            : highResolution
-                ? opts.crop
-                    ? 1.25
-                    : 1.15
-                : hdResolution
-                    ? opts.crop
-                        ? 1.5
-                        : 1.25
-                    : opts.crop
-                        ? 1.5
-                        : 2;
-        let x = 0;
-        let y = 0;
-        let w = video.videoWidth;
-        let h = video.videoHeight;
-        if (opts.crop) {
-            const scaleX = video.videoWidth / videoRect.width;
-            const scaleY = video.videoHeight / videoRect.height;
-            x = (opts.crop.x - videoRect.x) * scaleX;
-            y = (opts.crop.y - videoRect.y) * scaleY;
-            w = opts.crop.width * scaleX;
-            h = opts.crop.height * scaleY;
-        }
-        canvas.width = w * scaleFactor;
-        canvas.height = h * scaleFactor;
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
         context.imageSmoothingEnabled = true;
         context.imageSmoothingQuality = 'high';
         if (mirror) {
             context.translate(canvas.width, 0);
             context.scale(-1, 1);
         }
-        context.drawImage(video, x, y, w, h, 0, 0, w * scaleFactor, h * scaleFactor);
+        context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
         canvas.toBlob(async (blob) => {
             if (!blob) {
                 setSnapping(false);
@@ -170,26 +140,28 @@ export function useCamera(options = {}) {
                     image.onerror = () => reject();
                 });
             }
-            const data = isFunction(transform)
-                ? await transform({
-                    url,
-                    file,
-                    image,
-                    canvas,
-                })
-                : {
-                    url,
-                    file,
-                    image,
-                };
-            const error = await validate?.(data);
-            if (error)
-                setError(error);
-            else
+            const data = {
+                url,
+                file,
+                image,
+            };
+            if (!options.transform) {
                 setData(data);
+                setSnapping(false);
+                return;
+            }
+            const transformResult = await options.transform({
+                ...data,
+                video,
+                canvas,
+            });
+            if (transformResult.ok)
+                setData(transformResult.data);
+            else
+                setError(transformResult.error);
             setSnapping(false);
         }, 'image/jpeg', 1);
-    }, [mirror, transform, validate]);
+    }, [mirror, options]);
     const reset = useCallback(() => {
         setData(null);
         setError(null);

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

@@ -0,0 +1,4 @@
+import type { SetOptional } from 'type-fest';
+import { type UploadFileInput } from '../../services/file';
+import type { Mutation } from '../../types';
+export declare const useUploadFileMutation: Mutation<string, SetOptional<UploadFileInput, 'id'>>;

package/dist/client/hooks/useUploadFileMutation.js

@@ -0,0 +1,24 @@
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { uploadFile } from '../../services/file.js';
+import { ObjectType } from '../../services/ObjectType.js';
+import { getUploadFileMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUploadFileMutation = (config) => {
+    return useMutation({
+        ...config,
+        mutationKey: getUploadFileMutationKey(),
+        mutationFn: async (input) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const id = input.id ?? ObjectId.generate(ObjectType.File).toString();
+            await uploadFile({ ...input, id }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            return id;
+        },
+    });
+};

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

@@ -1,4 +1,4 @@
 import type { SetOptional } from 'type-fest';
-import { type UploadPrivateImageFileInput } from '../../services/file';
+import { type UploadFileInput } from '../../services/file';
 import type { Mutation } from '../../types';
-export declare const useUploadImageFileMutation: Mutation<string, SetOptional<UploadPrivateImageFileInput, 'id'>>;
+export declare const useUploadImageFileMutation: Mutation<string, SetOptional<UploadFileInput, 'id'>>;

package/dist/client/hooks/useUploadImageFileMutation.js

@@ -1,7 +1,7 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
-import { uploadPrivateImageFile, } from '../../services/file.js';
+import { uploadImageFile } from '../../services/file.js';
 import { ObjectType } from '../../services/ObjectType.js';
 import { getUploadImageFileMutationKey } from '../../utils/mutationKeys.js';
 import { getSession } from '../services/getSession.js';
@@ -13,7 +13,7 @@ export const useUploadImageFileMutation = (config) => {
             const session = await getSession();
             invariant(session.status === 'authenticated');
             const id = input.id ?? ObjectId.generate(ObjectType.File).toString();
-            await uploadPrivateImageFile({ ...input, id }, {
+            await uploadImageFile({ ...input, id }, {
                 headers: {
                     Authorization: `Bearer ${session.token}`,
                 },

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

@@ -0,0 +1,4 @@
+import type { SetOptional } from 'type-fest';
+import { type UploadFileInput } from '../../services/file';
+import type { Mutation } from '../../types';
+export declare const useUploadPrivateImageFileMutation: Mutation<string, SetOptional<UploadFileInput, 'id'>>;

package/dist/client/hooks/useUploadPrivateImageFileMutation.js

@@ -0,0 +1,24 @@
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { uploadPrivateImageFile, } from '../../services/file.js';
+import { ObjectType } from '../../services/ObjectType.js';
+import { getUploadPrivateImageFileMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUploadPrivateImageFileMutation = (config) => {
+    return useMutation({
+        ...config,
+        mutationKey: getUploadPrivateImageFileMutationKey(),
+        mutationFn: async (input) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const id = input.id ?? ObjectId.generate(ObjectType.File).toString();
+            await uploadPrivateImageFile({ ...input, id }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            return id;
+        },
+    });
+};

package/dist/components/Disclaimer/DisclaimerV2.js

@@ -17,7 +17,7 @@ export function DisclaimerV2(props) {
     const acceptTriggerRef = useRef(null);
     const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
     const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
-    const [isChecked, setIsChecked] = useState(true);
+    const [isChecked, setIsChecked] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false), responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false), responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start gap-y-4 overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false })] }), _jsx("div", { className: "text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), !props.hasNoCheckbox ? (_jsxs(Checkbox.Root, { checked: isChecked, onCheckedChange: (e) => {
                                                         setIsChecked(!!e.checked);
                                                     }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I have read and agreed to ", props.siteName, ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
@@ -35,7 +35,7 @@ export function DisclaimerV2(props) {
                                                     else {
                                                         window.location.href = props.redirectUrlOnNoConsent;
                                                     }
-                                                }, variant: "outline", children: "Exit" }), _jsx(Button, { ref: acceptTriggerRef, type: "button", onClick: () => {
+                                                }, variant: "outline", children: "Exit" }), _jsx(Button, { ref: acceptTriggerRef, type: "button", disabled: !isChecked, "aria-disabled": !isChecked, onClick: () => {
                                                     if (isChecked) {
                                                         disclaimer.close();
                                                     }

package/dist/components/Disclaimer/TermsOfUse.js

@@ -1,17 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image, {} from 'next/image';
-import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import pagcorLogo from '../../images/pagcor.png';
 import responsibleGamingLogo from '../../images/responsible-gaming.png';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 export function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }) {
-    const disclaimerStore = useGlobalStore(useShallow((state) => state.disclaimer));
     return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: [siteName, " Terms of Use"] }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: termsOfUseContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx("div", { className: "w-full", children: _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
                                         onCloseAction();
-                                        disclaimerStore.setOpen(true);
                                     }, children: "I Agree" }) })] }) })] }) }));
 }

package/dist/components/Search/Search.lazy.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { isString } from 'lodash-es';
 import Image, {} from 'next/image';
 import Link from 'next/link';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useDebounceCallback } from 'usehooks-ts';
 import { useShallow } from 'zustand/shallow';
@@ -64,10 +64,11 @@ export function Search(props) {
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});
+    console.log({ search });
     return (_jsx(Dialog.Root, { open: globalStore.search.open, onOpenChange: (details) => {
             globalStore.search.setOpen(details.open);
             setSearch('');
-        }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary lg:min-h-auto mx-auto min-h-full w-full pt-xl lg:mt-[132px] lg:max-w-[1136px] lg:bg-unset lg:pt-0 overflow-y-auto", children: [_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex items-center justify-between px-4 lg:hidden", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 40, className: "h-8 w-auto" }), _jsx(IconButton, { size: "sm", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "text-text-quinary size-6" }) })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Dialog.Context, { children: (api) => (_jsx("button", { type: "button", onClick: () => api.setOpen(false), className: "hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex", children: _jsx(XIcon, { className: "size-5 text-white" }) })) }) }), _jsx("div", { className: "mt-2xl px-4 lg:mt-xl lg:px-0", children: _jsxs("div", { className: "relative", children: [_jsx(SearchLgIcon, { className: "text-text-quinary pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(DebouncedInput, { ref: inputRef, value: search, placeholder: props.placeholder ?? 'Search', onChange: setSearch }), _jsx(Presence, { present: search.length > 0, asChild: true, lazyMount: true, children: _jsx("button", { type: "button", className: "text-text-secondary-700 absolute right-3.5 top-1/2 -translate-y-1/2 font-semibold", onClick: () => {
+        }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary lg:min-h-auto mx-auto min-h-full w-full overflow-y-auto pt-xl lg:mt-[132px] lg:max-w-[1136px] lg:bg-unset lg:pt-0", children: [_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex items-center justify-between px-4 lg:hidden", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 40, className: "h-8 w-auto" }), _jsx(IconButton, { size: "sm", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "text-text-quinary size-6" }) })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Dialog.Context, { children: (api) => (_jsx("button", { type: "button", onClick: () => api.setOpen(false), className: "hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex", children: _jsx(XIcon, { className: "size-5 text-white" }) })) }) }), _jsx("div", { className: "mt-2xl px-4 lg:mt-xl lg:px-0", children: _jsxs("div", { className: "relative", children: [_jsx(SearchLgIcon, { className: "text-text-quinary pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(DebouncedInput, { ref: inputRef, value: search, placeholder: props.placeholder ?? 'Search', onChange: setSearch }), _jsx(Presence, { present: search.length > 0, asChild: true, lazyMount: true, children: _jsx("button", { type: "button", className: "text-text-secondary-700 absolute right-3.5 top-1/2 -translate-y-1/2 font-semibold", onClick: () => {
                                                     setSearch('');
                                                     inputRef.current?.focus();
                                                 }, children: "Clear" }) })] }) }), _jsx("div", { className: "lg:bg-bg-primary lg:border-border-primary mt-2xl p-xl pb-3xl lg:mt-2 lg:max-h-[41rem] lg:overflow-y-auto lg:rounded-xl lg:border", children: search.length <= 0 ? (_jsx(Alert, { message: "Search for your favorite game or provider." })) : search.length >= 1 && search.length <= 2 ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [empty && _jsx(Alert, { message: "No results found" }), !empty && (_jsxs(_Fragment, { children: [gameProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Providers" }), _jsx("div", { className: "mb-3xl mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), "aria-label": `View ${provider.name} games`, className: twMerge('bg-brand-800 flex h-14 w-full items-center rounded-md', classNames.providerThumbnailRoot), onClick: () => {
@@ -88,6 +89,9 @@ function DebouncedInput(props) {
     });
     const setValueDebounced = useDebounceCallback(setValue, 300);
     const [internalValue, setInternalValue] = useState(value);
+    useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
     return (_jsx(Field.Input, { ref: props.ref, type: "search", value: internalValue, onChange: (e) => {
             setInternalValue(e.target.value);
             setValueDebounced(e.target.value);

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -48,6 +48,7 @@ export function MobileNumberSignIn(props) {
                 description: getFriendlyErrorMessage(err.name, {
                     siteName: props.siteName,
                     accountName: step1Form.getValues('mobileNumber'),
+                    signInOptions: 'MOBILE_NUMBER',
                 }),
             });
         },

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

@@ -1,6 +1,7 @@
 type Options = {
     accountName?: string;
     siteName?: string;
+    signInOptions?: 'MOBILE_NUMBER' | 'NAME_AND_PASSWORD';
 };
 export type ErrorCode = 'MEMBER_ACCOUNT_BLACKLISTED' | 'MEMBER_ACCOUNT_SUSPENDED' | 'INVALID_RECAPTCHA_RESPONSE' | 'MEMBER_NOT_FOUND' | 'RATE_LIMIT_REACH' | 'NOT_READY_TO_SEND_VERIFICATION_ERROR' | 'Forbidden';
 export declare function getFriendlyErrorMessage(code: ErrorCode, options?: Options): string;

package/dist/components/SignIn/utils.js

@@ -1,6 +1,7 @@
 export function getFriendlyErrorMessage(code, options) {
     const accountName = options?.accountName ?? '';
     const siteName = options?.siteName ?? '';
+    const signInOptions = options?.signInOptions ?? 'NAME_AND_PASSWORD';
     switch (code) {
         case 'MEMBER_ACCOUNT_BLACKLISTED':
             return `Your account ${accountName} has been blacklisted due to a serious violation of our policies. For more information or to appeal, please contact the ${siteName} Chat Support team.`;
@@ -15,6 +16,9 @@ export function getFriendlyErrorMessage(code, options) {
         case 'NOT_READY_TO_SEND_VERIFICATION_ERROR':
             return 'Your account is not ready to send verification requests. Please try again later.';
         case 'Forbidden':
+            if (signInOptions === 'MOBILE_NUMBER') {
+                return 'Invalid verification code. Please check the code and try again.';
+            }
             return 'Invalid username or password, please try again.';
         default:
             return 'Something went wrong. Please try again later.';

package/dist/components/shared/IdFrontImageField/IdFrontImageField.client.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type ValidateFileError } from '../../../utils/validateFile';
+import { type UseIdFrontImageFieldProps } from './useIdFrontImageField';
+export interface IdFrontImageFieldProps extends UseIdFrontImageFieldProps {
+    ref?: RefObject<HTMLDivElement | null>;
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    invalid?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    onError?: (error: ValidateFileError) => void;
+}
+export declare function IdFrontImageField__client(props: IdFrontImageFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/IdFrontImageField/IdFrontImageField.client.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useEffect, useId, useState, } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Camera01Icon } from '../../../icons/Camera01Icon.js';
+import { CameraOffIcon } from '../../../icons/CameraOffIcon.js';
+import { CheckCircleIcon } from '../../../icons/CheckCircleIcon.js';
+import { RefreshCcw01Icon } from '../../../icons/RefreshCcw01Icon.js';
+import { Spinner02Icon } from '../../../icons/Spinner02Icon.js';
+import { UploadCloud02Icon } from '../../../icons/UploadCloud02Icon.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 { createSplitProps } from '../../../utils/createSplitProps.js';
+import { validateFile, } from '../../../utils/validateFile.js';
+import { IdFrontImageFieldProvider, useIdFrontImageFieldContext, } from './IdFrontImageFieldContext.js';
+import { useIdFrontImageField, } from './useIdFrontImageField.js';
+export function IdFrontImageField__client(props) {
+    const [useIdFrontImageFieldProps, localProps] = createSplitProps([
+        'value',
+        'onChange',
+        'defaultValue',
+    ])(props);
+    const context = useIdFrontImageField(useIdFrontImageFieldProps);
+    return (_jsxs(IdFrontImageFieldProvider, { value: context, children: [_jsxs("div", { ref: localProps.ref, id: localProps.id, style: localProps.style, className: twMerge('border-border-primary bg-bg-primary group relative aspect-[352/180] w-full shrink-0 rounded-xl border p-xl', localProps.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
+                    e.preventDefault();
+                    const file = e.dataTransfer.files?.[0];
+                    if (!file)
+                        return;
+                    const error = validateFile(file);
+                    if (error)
+                        return localProps.onError?.(error);
+                    context.mutation.mutate({ file });
+                }, "aria-describedby": context.field?.ariaDescribedby, children: [_jsx("input", { id: context.field?.ids?.control, ref: context.inputRef, type: "file", accept: "image/png, image/jpeg", onChange: (e) => {
+                            const file = e.target.files?.[0];
+                            if (!file)
+                                return;
+                            const error = validateFile(file);
+                            if (error)
+                                return localProps.onError?.(error);
+                            context.mutation.mutate({ file });
+                        }, disabled: context.field?.disabled ||
+                            context.query.isLoading ||
+                            context.mutation.isPending ||
+                            localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" }) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
+                                                    context.inputRef.current?.click();
+                                                }, disabled: context.field?.disabled ||
+                                                    context.field?.readOnly ||
+                                                    context.query.isLoading ||
+                                                    context.mutation.isPending ||
+                                                    localProps.disabled ||
+                                                    localProps.readOnly, className: "text-button-secondary-fg font-semibold disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: () => {
+                                    context.disclosure.setOpen(true);
+                                }, disabled: context.field?.disabled ||
+                                    context.field?.readOnly ||
+                                    context.query.isLoading ||
+                                    context.mutation.isPending ||
+                                    localProps.disabled ||
+                                    localProps.readOnly, children: "Take a photo" })] })), context.query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.query.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "h-auto w-full rounded-md" }), _jsx("button", { type: "button", className: "backdrop-blur-xs absolute right-2 top-2 rounded-full bg-white/10 p-1", onClick: () => {
+                                    context.setValue('');
+                                }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
+}
+/**
+ * -------------------------------------
+ *  Camera
+ * -------------------------------------
+ */
+function Camera() {
+    const context = useIdFrontImageFieldContext();
+    return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
+            context.disclosure.setOpen(details.open);
+        }, 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 Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", 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\u00A0the\u00A0frame."] }), _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-[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: 378.08, 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();
+                                    }, disabled: context.camera.snapping ||
+                                        context.camera.loading ||
+                                        !!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);
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                            context.camera.reset();
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
+}
+/**
+ * -------------------------------------
+ *  Video
+ * -------------------------------------
+ */
+function Video() {
+    const id = useId();
+    const context = useIdFrontImageFieldContext();
+    const [maskBox, setMaskBox] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        const update = () => {
+            const guide = context.guideRef.current;
+            const mask = context.maskRef.current;
+            if (!guide || !mask)
+                return;
+            const guideRect = guide.getBoundingClientRect();
+            const maskRect = mask.getBoundingClientRect();
+            const x = guideRect.left - maskRect.left;
+            const y = guideRect.top - maskRect.top;
+            const width = guideRect.width;
+            const height = guideRect.height;
+            if (width && height) {
+                setMaskBox({
+                    x,
+                    y,
+                    width,
+                    height,
+                });
+            }
+        };
+        const observer = new ResizeObserver(update);
+        if (context.guideRef.current)
+            observer.observe(context.guideRef.current);
+        if (context.maskRef.current)
+            observer.observe(context.maskRef.current);
+        requestAnimationFrame(update);
+        return () => observer.disconnect();
+    }, [context.guideRef, context.maskRef]);
+    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: "border-utility-warning-700 pointer-events-none absolute left-1/2 top-1/2 z-10 aspect-[85.6/53.98] w-[calc(100%-1rem)] max-w-[24.688rem] -translate-x-1/2 -translate-y-1/2 rounded-md border-4 border-dashed transition-all duration-200" })] }));
+}

package/dist/components/shared/IdFrontImageField/IdFrontImageField.d.ts

@@ -0,0 +1,2 @@
+import type { IdFrontImageFieldProps } from './IdFrontImageField.client';
+export declare function IdFrontImageField(props: IdFrontImageFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/IdFrontImageField/IdFrontImageField.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { Spinner02Icon } from '../../../icons/Spinner02Icon.js';
+const Component = dynamic(() => import('./IdFrontImageField.client.js').then((mod) => mod.IdFrontImageField__client), {
+    ssr: false,
+    loading: () => (_jsx("div", { className: "border-border-primary bg-bg-primary flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border", children: _jsx(Spinner02Icon, { className: "text-text-quinary size-8" }) })),
+});
+export function IdFrontImageField(props) {
+    return _jsx(Component, { ...props });
+}

package/dist/components/shared/IdFrontImageField/IdFrontImageFieldContext.d.ts

@@ -0,0 +1,6 @@
+import type { UseIdFrontImageFieldReturn } from './useIdFrontImageField';
+export declare const IdFrontImageFieldProvider: (props: {
+    value: UseIdFrontImageFieldReturn;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useIdFrontImageFieldContext: () => UseIdFrontImageFieldReturn;

package/dist/components/shared/IdFrontImageField/IdFrontImageFieldContext.js

@@ -0,0 +1,2 @@
+import { createContext } from '../../../client/utils/createContext.js';
+export const [IdFrontImageFieldProvider, useIdFrontImageFieldContext] = createContext();

package/dist/components/shared/IdFrontImageField/index.d.ts

@@ -0,0 +1 @@
+export * from './IdFrontImageField';

package/dist/components/shared/IdFrontImageField/index.js

@@ -0,0 +1 @@
+export * from './IdFrontImageField.js';

package/dist/components/shared/IdFrontImageField/useIdFrontImageField.d.ts

@@ -0,0 +1,22 @@
+export interface UseIdFrontImageFieldProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    defaultValue?: string;
+}
+export interface UseIdFrontImageFieldReturn extends ReturnType<typeof useIdFrontImageField> {
+}
+export declare function useIdFrontImageField(props: UseIdFrontImageFieldProps): {
+    field: import("@ark-ui/react").UseFieldContext;
+    value: string;
+    setValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    query: import("@tanstack/react-query").UseQueryResult<import("../../../types").File | null, Error>;
+    mutation: import("@tanstack/react-query").UseMutationResult<string, Error, {
+        file: globalThis.File;
+        id?: string | undefined;
+    }, unknown>;
+    camera: import("../../../client/hooks/useCamera").UseCameraReturn<never>;
+    disclosure: import("../../../client/hooks/useDisclosure").UseDisclosureReturn;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+    guideRef: import("react").RefObject<HTMLDivElement | null>;
+    maskRef: import("react").RefObject<HTMLDivElement | null>;
+};