@opexa/portal-components 0.0.237 → 0.0.239

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

@@ -1,6 +1,7 @@
 import { type ComponentPropsWithRef } from 'react';
+export type KnownCameraErrorName = 'CameraError' | 'PermissionDeniedError' | 'DeviceNotFoundError';
 export interface CameraError<T extends string = never> {
-    name: 'CameraError' | 'PermissionDeniedError' | 'DeviceNotFoundError' | T;
+    name: KnownCameraErrorName | T;
     message: string;
 }
 export interface CameraData {
@@ -32,7 +33,7 @@ export interface UseCameraReturn<T extends string = never> {
     videoProps: ComponentPropsWithRef<'video'>;
 }
 export interface UseCameraOptions<T extends string = never> extends MediaStreamConstraints {
-    transform?: (data: CameraData) => CameraData | Promise<CameraData>;
-    validate?: (data: CameraData) => CameraError<T> | null | undefined | Promise<CameraError<T> | null | undefined>;
+    transform?(data: CameraData): CameraData | Promise<CameraData>;
+    validate?(data: CameraData): CameraError<T> | void | null | undefined | Promise<CameraError<T> | void | null | undefined>;
 }
 export declare function useCamera<T extends string = never>(options?: UseCameraOptions<T>): UseCameraReturn<T>;

package/dist/client/hooks/useCamera.js

@@ -1,4 +1,4 @@
-import { isBoolean, isFunction } from 'lodash-es';
+import { isBoolean, isFunction, isObject } from 'lodash-es';
 import { useCallback, useMemo, useRef, useState, } from 'react';
 import invariant from 'tiny-invariant';
 export function useCamera(options = {}) {
@@ -8,6 +8,7 @@ export function useCamera(options = {}) {
     const [data, setData] = useState(null);
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(false);
+    const [mirror, setMirror] = useState(false);
     const open = useCallback(async () => {
         setData(null);
         setError(null);
@@ -40,6 +41,11 @@ export function useCamera(options = {}) {
             });
             node.srcObject = result;
             stream.current = result;
+            setMirror(!isObject(constraints.video)
+                ? true
+                : constraints.video.facingMode === 'environment'
+                    ? false
+                    : true);
         }
         catch (e) {
             if (e instanceof Error) {
@@ -114,6 +120,10 @@ export function useCamera(options = {}) {
         canvas.height = h * scaleFactor;
         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);
         canvas.toBlob(async (blob) => {
             if (!blob) {
@@ -135,7 +145,7 @@ export function useCamera(options = {}) {
             else
                 setData(isFunction(transform) ? await transform(data) : data);
         }, 'image/jpeg', 1);
-    }, [transform, validate]);
+    }, [mirror, transform, validate]);
     const reset = useCallback(() => {
         setData(null);
         setError(null);
@@ -161,8 +171,11 @@ export function useCamera(options = {}) {
             position: 'relative',
             boxSizing: 'border-box',
             background: 'transparent',
+            objectFit: 'cover',
+            objectPosition: 'center',
+            transform: mirror ? 'scaleX(-1)' : 'none',
         },
-    }), []);
+    }), [mirror]);
     return {
         snap,
         open,

package/dist/components/AccountVerification/AccountVerification.js

@@ -22,9 +22,9 @@ export function AccountVerification(props) {
     const profileCompletion = profileCompletionQuery.data;
     const verificationQuery = useMemberVerificationQuery();
     const verification = verificationQuery.data;
-    const isKycCompleted = verification &&
-        verification.status !== 'UNVERIFIED' &&
-        verification.status !== 'REJECTED';
+    const isKycCompleted = Boolean(verification?.status === 'VERIFIED') ||
+        Boolean(verification?.status === 'PENDING') ||
+        Boolean(verification?.status === 'APPROVED');
     const empty = verification == null;
     const pending = verification?.status === 'PENDING';
     const success = verification?.status === 'VERIFIED' || verification?.status === 'APPROVED';

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
-        view: "vca" | "form";
+        view: "form" | "vca";
         status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
@@ -13,7 +13,7 @@ export declare const OnlineBankDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useOnlineBankDepositContext: () => {
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        view: "qrCode" | "form";
+        view: "form" | "qrCode";
         status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
@@ -13,7 +13,7 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js

@@ -126,7 +126,6 @@ export function InstapayWithdrawal() {
         itemToValue: (item) => item.code,
         itemToString: (item) => item.name,
     }), [instapayBankList]);
-    console.log(bankCollection.items);
     return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", children: [_jsx(Controller, { control: form.control, name: "bankCode", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.bankCode, children: [_jsxs(Select.Root, { collection: bankCollection, positioning: {
                                 sameWidth: true,
                             }, value: o.field.value ? [o.field.value] : [], onValueChange: (details) => {

package/dist/components/Disclaimer/DisclaimerV2.js

@@ -18,7 +18,7 @@ export function DisclaimerV2(props) {
     const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
     const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
     const [isChecked, setIsChecked] = useState(true);
-    return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false) }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false) }), _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) => {
+    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: () => {
                                                                         setTermsOfUseOpen(true);

package/dist/components/Disclaimer/ResponsibleGaming.d.ts

@@ -5,5 +5,6 @@ export interface ResponsibleGamingProps {
     logo: ImageProps['src'];
     open: boolean;
     onCloseAction: () => void;
+    responsibleGamingLogo?: ImageProps['src'];
 }
-export declare function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, }: ResponsibleGamingProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }: ResponsibleGamingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/ResponsibleGaming.js

@@ -6,8 +6,8 @@ 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 ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, }) {
-    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: [_jsx(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: responsibleGamingContent }), _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: 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: () => {
+export function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }) {
+    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: [_jsx(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: responsibleGamingContent }), _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();
                                     }, children: "I Agree" }) })] }) })] }) }));
 }

package/dist/components/Disclaimer/TermsOfUse.d.ts

@@ -6,5 +6,6 @@ export interface TermsOfUseProps {
     onCloseAction: () => void;
     termsOfUseContent: string | ReactNode;
     siteName: string;
+    responsibleGamingLogo?: ImageProps['src'];
 }
-export declare function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, }: TermsOfUseProps): import("react/jsx-runtime").JSX.Element;
+export declare function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }: TermsOfUseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/TermsOfUse.js

@@ -8,9 +8,9 @@ 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, }) {
+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: 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: () => {
+    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/KYC/KYC.lazy.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Image from 'next/image';
+import { useEffect } from 'react';
 import { useShallow } from 'zustand/shallow';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
@@ -22,12 +23,18 @@ export function KYC(props) {
     const { data: account } = useAccountQuery();
     const { data: verification } = useMemberVerificationQuery();
     const isBasicInfoCompleted = account?.realName !== null && account?.birthDay !== null;
-    const isUploadCompleted = verification &&
-        verification.idFrontImage !== null &&
-        verification.selfieImage !== null;
-    const isRejected = Boolean(verification?.status === 'REJECTED');
-    const hasMissingData = !isBasicInfoCompleted || !isUploadCompleted || isRejected;
+    const isUploadCompleted = Boolean(verification?.idFrontImage) && Boolean(verification?.selfieImage);
+    const isVerified = Boolean(verification?.status === 'VERIFIED') ||
+        Boolean(verification?.status === 'PENDING') ||
+        Boolean(verification?.status === 'APPROVED');
+    const hasMissingData = !isBasicInfoCompleted || !isUploadCompleted || !isVerified;
+    const steps = !isBasicInfoCompleted ? 1 : !isUploadCompleted ? 2 : 3;
+    useEffect(() => {
+        if (steps) {
+            kyc.setStep(steps);
+        }
+    }, [steps, kyc]);
     return (_jsxs(_Fragment, { children: [_jsx(KYCContext, { value: kyc, children: _jsx(Dialog.Root, { open: globalStore.kyc.open && hasMissingData, onOpenChange: (details) => {
                         globalStore.kyc.setOpen(details.open);
-                    }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: kyc.reset, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt lg:min-h-auto mx-auto min-h-full w-full lg:w-fit overflow-y-auto", children: [kyc.capturing === 'SELFIE' && _jsx(CaptureSelfie, {}), kyc.capturing === 'ID_DOCUMENT' && _jsx(CaptureIdDocument, {}), !kyc.capturing && (_jsxs("div", { className: "flex h-dvh w-full flex-col overflow-y-auto p-3xl sm:h-fit sm:overflow-auto lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 1 && _jsx(BasicInformation, {}), kyc.step === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }))] }) })] }) }) }), _jsx(KYCReminder, { ...props })] }));
+                    }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: kyc.reset, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt lg:min-h-auto mx-auto min-h-full w-full overflow-y-auto lg:w-fit", children: [kyc.capturing === 'SELFIE' && _jsx(CaptureSelfie, {}), kyc.capturing === 'ID_DOCUMENT' && _jsx(CaptureIdDocument, {}), !kyc.capturing && (_jsxs("div", { className: "flex h-dvh w-full flex-col overflow-y-auto p-3xl sm:h-fit sm:overflow-auto lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 1 && _jsx(BasicInformation, {}), kyc.step === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }))] }) })] }) }) }), _jsx(KYCReminder, { ...props })] }));
 }

package/dist/components/PortalProvider/PortalProvider.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 import { Suspense } from 'react';
+import { INTERNALS__REPORT_WEB_VITALS } from '../../constants/index.js';
 import { prefetchAccountQuery } from '../../server/utils/prefetchAccountQuery.js';
 import { prefetchPlatformQuery } from '../../server/utils/prefetchPlatformQuery.js';
 import { prefetchSessionQuery } from '../../server/utils/prefetchSessionQuery.js';
@@ -20,5 +21,5 @@ export async function PortalProvider({ children, facebookPixelId, googleAnalytic
         prefetchAccountQuery(),
         prefetchWalletQuery(),
     ]);
-    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 }))] }));
+    return (_jsxs(_Fragment, { children: [INTERNALS__REPORT_WEB_VITALS && _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/shared/SelfieField.d.ts

@@ -12,7 +12,7 @@ export interface SelfieFieldProps extends UseSelfieFieldProps {
     readOnly?: boolean;
     disabled?: boolean;
     required?: boolean;
-    onError?: (error: ValidateFileError) => void;
+    onError?: (error: ValidateFileError<'FaceNotFoundError'>) => void;
 }
 export declare function SelfieField(props: SelfieFieldProps): import("react/jsx-runtime").JSX.Element;
 interface UseSelfieFieldProps {

package/dist/components/shared/SelfieField.js

@@ -29,22 +29,39 @@ import { Portal } from '../../ui/Portal/index.js';
 import { validateFile } from '../../utils/validateFile.js';
 export function SelfieField(props) {
     const context = useSelfieField(props);
-    return (_jsxs(SelfieFieldProvider, { value: context, children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('group', 'border', 'border-border-primary', 'bg-bg-primary', 'relative', 'w-full', 'aspect-[352/180]', 'shrink-0', 'rounded-xl', 'p-xl', props.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
+    return (_jsxs(SelfieFieldProvider, { value: context, children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('group', 'border', 'border-border-primary', 'bg-bg-primary', 'relative', 'w-full', 'aspect-[352/180]', 'shrink-0', 'rounded-xl', 'p-xl', props.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: async (e) => {
                     e.preventDefault();
                     const file = e.dataTransfer.files?.[0];
                     if (!file)
                         return;
-                    const error = validateFile(file);
+                    const face = await getFaceFromFile(file);
+                    const error = validateFile(file, {
+                        customValidator() {
+                            if (!face) {
+                                return {
+                                    name: 'FaceNotFoundError',
+                                    message: 'Please ensure your face is clearly visible in the photo.',
+                                };
+                            }
+                        },
+                    });
                     if (error)
                         return props.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) => {
+                }, "aria-describedby": context.field?.ariaDescribedby, children: [_jsx("input", { id: context.field?.ids?.control, ref: context.inputRef, type: "file", accept: "image/png, image/jpeg", onChange: async (e) => {
                             const file = e.target.files?.[0];
                             if (!file)
                                 return;
                             const error = validateFile(file);
                             if (error)
                                 return props.onError?.(error);
+                            const face = await getFaceFromFile(file);
+                            if (!face) {
+                                return props.onError?.({
+                                    name: 'FaceNotFoundError',
+                                    message: 'Please ensure your face is clearly visible in the photo.',
+                                });
+                            }
                             context.mutation.mutate({ file });
                         }, disabled: context.field?.disabled ||
                             context.query.isLoading ||
@@ -202,7 +219,6 @@ function useSelfieField(props) {
               };
             }
              */
-            return null;
         },
     });
     const disclosure = useDisclosure({

package/dist/constants/EnvVar.d.ts

@@ -3,3 +3,4 @@ export declare const PLATFORM_ID: string;
 export declare const PLATFORM_CODE: string;
 export declare const ENVIRONMENT: "production" | "development";
 export declare const BYPASS_RECAPTCHA: boolean;
+export declare const INTERNALS__REPORT_WEB_VITALS: boolean;

package/dist/constants/EnvVar.js

@@ -23,3 +23,8 @@ export const BYPASS_RECAPTCHA = z
     .transform(Boolean)
     .catch(false)
     .parse(process.env.NEXT_PUBLIC_BYPASS_RECAPTCHA);
+export const INTERNALS__REPORT_WEB_VITALS = z
+    .any()
+    .transform(Boolean)
+    .catch(false)
+    .parse(process.env.NEXT_PUBLIC_REPORT_WEB_VITALS);

package/dist/utils/validateFile.d.ts

@@ -1,4 +1,4 @@
-export interface ValidateFileOptions {
+export interface ValidateFileOptions<T extends string = never> {
     /**
      * @description Maximum file size in MB.
      * @default 10
@@ -19,10 +19,11 @@ export interface ValidateFileOptions {
      * ]
      */
     supportedFiles?: string[];
+    customValidator?(file: File): ValidateFileError<T> | null | undefined | void;
 }
-export type ValidateFileErrorName = 'FILE_NAME_TOO_LONG' | 'FILE_SIZE_TOO_LARGE' | 'FILE_TYPE_NOT_SUPPORTED';
-export interface ValidateFileError {
-    name: ValidateFileErrorName;
+export type KnownValidateFileErrorName = 'FileNameTooLongError' | 'FileSizeTooLargeError' | 'FileTypeNotSupportedError';
+export interface ValidateFileError<T extends string = never> {
+    name: KnownValidateFileErrorName | T;
     message: string;
 }
-export declare function validateFile(file: File, options?: ValidateFileOptions): ValidateFileError | null;
+export declare function validateFile<T extends string = never>(file: File, options?: ValidateFileOptions<T>): ValidateFileError<T> | null;

package/dist/utils/validateFile.js

@@ -11,22 +11,27 @@ export function validateFile(file, options) {
         ];
     if (!supportedFiles.includes(file.type)) {
         return {
-            name: 'FILE_TYPE_NOT_SUPPORTED',
+            name: 'FileTypeNotSupportedError',
             message: 'File type not supported.',
         };
     }
     if (mb(file.size) > maxFileSize) {
         return {
-            name: 'FILE_SIZE_TOO_LARGE',
+            name: 'FileSizeTooLargeError',
             message: 'File size too large.',
         };
     }
     if (basename(file.name).length > maxFileName) {
         return {
-            name: 'FILE_NAME_TOO_LONG',
+            name: 'FileNameTooLongError',
             message: 'File name is too long.',
         };
     }
+    if (options?.customValidator) {
+        const err = options.customValidator(file);
+        if (err)
+            return err;
+    }
     return null;
 }
 function mb(bytes) {

package/package.json

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