@opexa/portal-components 0.0.665 → 0.0.668

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

@@ -12,7 +12,7 @@ export interface CameraData {
 export interface UseCameraReturn<T extends string = never> {
     open(): Promise<void>;
     close(): Promise<void>;
-    snap(): Promise<CameraData | null>;
+    snap(): CameraData | null;
     reopen(): Promise<void>;
     reset(): Promise<void>;
     data: CameraData | null;

package/dist/client/hooks/useCamera.js

@@ -1,6 +1,5 @@
 import { isBoolean } 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 videoRef = useRef(null);
@@ -90,76 +89,33 @@ export function useCamera(options = {}) {
             resolve();
         });
     }, []);
-    const snap = useCallback(async () => {
-        setData(null);
-        setError(null);
-        setSnapping(true);
+    const snap = useCallback(() => {
         const video = videoRef.current;
+        if (!video)
+            return null;
         const canvas = document.createElement('canvas');
         const context = canvas.getContext('2d');
-        invariant(video, 'Could not find video element');
-        invariant(context, 'Could not get canvas context');
-        video.currentTime = 1;
+        if (!context)
+            return null;
         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
-        context.imageSmoothingEnabled = true;
-        context.imageSmoothingQuality = 'high';
-        context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
-        return new Promise((resolve) => {
-            canvas.toBlob(async (blob) => {
-                if (!blob) {
-                    setSnapping(false);
-                    resolve(null);
-                    return setError({
-                        name: 'CameraError',
-                        message: "'canvas.toBlob' failed to create blob",
-                    });
-                }
-                const url = canvas.toDataURL('image/jpeg', 1);
-                const file = new File([blob], `${crypto.randomUUID()}.jpeg`, {
-                    type: 'image/jpeg',
-                    endings: 'native',
-                    lastModified: Date.now(),
-                });
-                const image = new Image();
-                image.src = url;
-                image.alt = '';
-                image.width = canvas.width;
-                image.height = canvas.height;
-                if (!image.complete || image.naturalWidth === 0) {
-                    await new Promise((resolve, reject) => {
-                        image.onload = () => resolve();
-                        image.onerror = () => reject();
-                    });
-                }
-                const data = {
-                    url,
-                    file,
-                    image,
-                };
-                if (!options.transform) {
-                    setData(data);
-                    setSnapping(false);
-                    resolve(data);
-                    return;
-                }
-                const transformResult = await options.transform({
-                    ...data,
-                    video,
-                    canvas,
-                });
-                if (transformResult.ok) {
-                    setData(transformResult.data);
-                    resolve(transformResult.data);
-                }
-                else {
-                    setError(transformResult.error);
-                    resolve(null);
-                }
-                setSnapping(false);
-            }, 'image/jpeg', 1);
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const url = canvas.toDataURL('image/jpeg', 0.9);
+        const arr = atob(url.split(',')[1]);
+        const u8arr = new Uint8Array(arr.length);
+        for (let i = 0; i < arr.length; i++)
+            u8arr[i] = arr.charCodeAt(i);
+        const file = new File([u8arr], `${crypto.randomUUID()}.jpeg`, {
+            type: 'image/jpeg',
         });
-    }, [options]);
+        const image = new Image();
+        image.src = url;
+        image.width = canvas.width;
+        image.height = canvas.height;
+        const data = { url, file, image };
+        setData(data);
+        return data;
+    }, []);
     const reset = useCallback(() => {
         setData(null);
         setError(null);

package/dist/components/Account/Account.lazy.d.ts

@@ -51,5 +51,7 @@ export interface AccountProps {
     notificationsEnabled?: boolean;
     /** @default true */
     shouldShowAccountStatus?: boolean;
+    /** Avatar image source */
+    avatar?: string;
 }
 export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Account/Account.lazy.js

@@ -92,7 +92,7 @@ function Profile() {
                 return 'danger';
         }
     };
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", account?.id] }), accountProps.shouldShowAccountStatus && (_jsxs(Badge.Root, { colorScheme: getVerificationColorScheme(account?.verificationStatus), className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: capitalize(account?.verificationStatus || '') })] }))] })] })] }));
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: accountProps.avatar || avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", account?.id] }), accountProps.shouldShowAccountStatus && (_jsxs(Badge.Root, { colorScheme: getVerificationColorScheme(account?.verificationStatus), className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: capitalize(account?.verificationStatus || '') })] }))] })] })] }));
 }
 function Links({ router, classNames, }) {
     const accountProps = useAccountPropsContext();

package/dist/components/Account/AccountTrigger.d.ts

@@ -1,5 +1,7 @@
 import type { ComponentPropsWithRef } from 'react';
 export interface AccountTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
+    /** Avatar image source */
+    avatar?: string;
 }
-export declare function AccountTrigger({ asChild, children, ...props }: AccountTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccountTrigger({ asChild, children, avatar, ...props }: AccountTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Account/AccountTrigger.js

@@ -8,7 +8,7 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { XIcon } from '../../icons/XIcon.js';
 import avatarPlaceholder from '../../images/placeholder-avatar.png';
 import { IconButton } from '../../ui/IconButton/index.js';
-export function AccountTrigger({ asChild, children, ...props }) {
+export function AccountTrigger({ asChild, children, avatar, ...props }) {
     const desktop = useMediaQuery('(min-width: 1024px)', {
         defaultValue: true,
     });
@@ -22,5 +22,5 @@ export function AccountTrigger({ asChild, children, ...props }) {
     return (_jsx(ark.button, { type: "button", "aria-label": "Toggle account menu", "data-open": disclosure.open ? 'open' : 'closed', ...props, onClick: (e) => {
             disclosure.setOpen(!disclosure.open);
             return props.onClick?.(e);
-        }, asChild: !children ? true : asChild, children: children ?? (_jsx(IconButton, { id: "opexa-powerplay:account-trigger", size: "sm", colorScheme: "gray", children: !desktop && disclosure.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatarPlaceholder, alt: "", width: 64, height: 64, className: "size-10" })) })) }));
+        }, asChild: !children ? true : asChild, children: children ?? (_jsx(IconButton, { id: "opexa-powerplay:account-trigger", size: "sm", colorScheme: "gray", children: !desktop && disclosure.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatar || avatarPlaceholder, alt: "", width: 64, height: 64, className: "size-10" })) })) }));
 }

package/dist/components/AccountInfo/AccountInfo.d.ts

@@ -7,6 +7,8 @@ interface BaseAccountInfoProps {
     className?: string;
     googleSso?: boolean;
     facebookSso?: boolean;
+    /** Avatar image source */
+    avatar?: string;
 }
 interface WithoutBranchCode extends BaseAccountInfoProps {
     shouldShowBranchCode?: false;

package/dist/components/AccountInfo/AccountInfo.js

@@ -25,7 +25,7 @@ import { FacebookIcon } from '../../icons/FacebookIcon.js';
 import { GoogleIcon } from '../../icons/GoogleIcon.js';
 import { LinkBroken02Icon } from '../../icons/LinkBroken02Icon.js';
 import { XIcon } from '../../icons/XIcon.js';
-import avatar from '../../images/placeholder-avatar.png';
+import avatarPlaceholder from '../../images/placeholder-avatar.png';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
@@ -41,9 +41,9 @@ const accountSchema = z.object({
         .regex(/^[a-zA-Z0-9]+$/, 'Username can only contain letters and numbers'),
 });
 export function AccountInfo(props) {
-    return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(ProfileInfo, {}), _jsx(ContactInfo, {}), _jsx(PersonalInfo, { shouldShowBranchCode: props.shouldShowBranchCode, branchCodes: props.branchCodes }), _jsx(SSO, { google: props.googleSso, facebook: props.facebookSso })] }));
+    return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(ProfileInfo, { avatar: props.avatar }), _jsx(ContactInfo, {}), _jsx(PersonalInfo, { shouldShowBranchCode: props.shouldShowBranchCode, branchCodes: props.branchCodes }), _jsx(SSO, { google: props.googleSso, facebook: props.facebookSso })] }));
 }
-function ProfileInfo() {
+function ProfileInfo({ avatar }) {
     const [edit, setEdit] = useState(false);
     const accountQuery = useAccountQuery();
     const account = accountQuery.data;
@@ -74,7 +74,7 @@ function ProfileInfo() {
         },
         resolver: zodResolver(accountSchema),
     });
-    return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Profile Info" }), _jsx("div", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt", children: _jsx("div", { className: "border-border-secondary px-4 py-5", children: _jsxs("div", { className: "flex items-start gap-xl", children: [_jsx(Image, { src: avatar, alt: "", width: 80, height: 80, className: "mt-2 size-14 shrink-0 rounded-md object-cover" }), edit ? (_jsxs("form", { onSubmit: form.handleSubmit((data) => {
+    return (_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-sm text-text-secondary-700", children: "Profile Info" }), _jsx("div", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt", children: _jsx("div", { className: "border-border-secondary px-4 py-5", children: _jsxs("div", { className: "flex items-start gap-xl", children: [_jsx(Image, { src: avatar || avatarPlaceholder, alt: "", width: 80, height: 80, className: "mt-2 size-14 shrink-0 rounded-md object-cover" }), edit ? (_jsxs("form", { onSubmit: form.handleSubmit((data) => {
                                     mutate({
                                         name: data.name,
                                     });
@@ -147,7 +147,7 @@ function PersonalInfo(props) {
                             ? data.birthDay
                             : undefined,
                     });
-                }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!account?.realName, children: [_jsx(Field.Label, { children: "Full name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), props.shouldShowBranchCode && (_jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Branch Code" }), _jsx(Field.Input, { type: "text", disabled: true, value: displayBranchName ?? account?.branchCode ?? '' })] }))] }), form.formState.isDirty && (_jsxs("div", { className: "flex justify-end gap-lg border-border-secondary border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
+                }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!account?.realName, children: [_jsx(Field.Label, { children: "Full name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay'), className: twMerge('h-full py-2.5', account?.birthDay && 'pointer-events-none') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), props.shouldShowBranchCode && (_jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Branch Code" }), _jsx(Field.Input, { type: "text", disabled: true, value: displayBranchName ?? account?.branchCode ?? '' })] }))] }), form.formState.isDirty && (_jsxs("div", { className: "flex justify-end gap-lg border-border-secondary border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
 }
 function ContactInfo() {
     const localeInfo = useLocaleInfo();

package/dist/components/KYC/KYCDefault/KYCDefault.js

@@ -20,7 +20,7 @@ export function KYCDefault(props) {
     const kyc = useKYCDefault(props?.isSkippable ?? false);
     const { isLoading: sessionLoading } = useSessionQuery();
     const isDialogOpen = !globalStore.kycReminder.open && globalStore.kyc.open && !sessionLoading;
-    return (_jsxs(_Fragment, { children: [_jsx(KYCDefaultContext, { value: kyc, children: _jsx(Dialog.Root, { open: isDialogOpen && !globalStore.responsibleGamingReminder.open, onOpenChange: (details) => {
+    return (_jsxs(_Fragment, { children: [_jsx(KYCDefaultContext, { value: kyc, children: _jsx(Dialog.Root, { open: true, 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: _jsx(Dialog.Content, { className: "mx-auto min-h-full w-full overflow-y-auto bg-bg-primary-alt lg:min-h-auto lg:w-fit", children: _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(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(IdentityVerification, {}), kyc.step === 2 && _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, { className: "fixed top-[57px]", children: _jsx(Dialog.Content, { className: "mx-auto min-h-full w-full overflow-y-auto bg-bg-primary-alt lg:min-h-auto lg:w-fit", children: _jsxs("div", { className: "mt-[calc(var(--safe-area-inset-top)*3)] flex h-dvh w-full flex-col overflow-y-auto p-3xl sm:h-fit sm:overflow-auto lg:w-[400px]", children: [_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(IdentityVerification, {}), kyc.step === 2 && _jsx(PersonalInformation, {})] }) }) })] }) }) }), _jsx(KYCReminder, { ...props })] }));
 }

package/dist/components/RegisterBiometrics/RegisterBiometrics.js

@@ -30,7 +30,9 @@ export function RegisterBiometrics() {
             Capacitor.isNativePlatform() &&
             !responsibleGamingReminder.open &&
             !kycModals.kyc.open &&
-            !kycModals.kycReminder.open, children: _jsx(Portal, { children: _jsx(Dialog.Positioner, { className: "flex items-center", children: _jsxs(Dialog.Content, { className: "flex w-full min-w-[320px] max-w-md flex-col gap-4 rounded-lg border-border-brand bg-bg-secondary p-6 shadow-lg", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx("h2", { className: "mt-4 w-full text-center font-bold text-2xl text-brand-500", children: "Register Biometric" }), _jsx("p", { className: "mt-2 grow text-center text-[#999]", children: "Would you like to setup biometric authentication?" }), _jsxs("div", { className: "flex gap-4 p-2", children: [_jsx(Button, { onClick: async () => {
+            !kycModals.kycReminder.open, children: _jsx(Portal, { children: _jsx(Dialog.Positioner, { className: "flex items-center", children: _jsxs(Dialog.Content, { className: "flex w-full min-w-[320px] max-w-md flex-col gap-4 rounded-lg border-border-brand bg-bg-secondary p-6 shadow-lg", children: [_jsx(Dialog.CloseTrigger, { onClick: () => {
+                                registerBiometricStore.setOpen(false);
+                            }, children: _jsx(XIcon, {}) }), _jsx("h2", { className: "mt-4 w-full text-center font-bold text-2xl text-brand-500", children: "Register Biometric" }), _jsx("p", { className: "mt-2 grow text-center text-[#999]", children: "Would you like to setup biometric authentication?" }), _jsxs("div", { className: "flex gap-4 p-2", children: [_jsx(Button, { onClick: async () => {
                                         if (!account)
                                             return;
                                         const ok = await performBiometricVerification({

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

@@ -103,5 +103,5 @@ function Video() {
     const y = (rootRect.height - guideRect.height) / 2;
     return (_jsxs("div", { ref: rootRef, 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("div", { className: "pointer-events-none absolute top-safe-area-inset-top right-0 left-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 bottom-safe-area-inset-bottom left-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute left-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { ref: context.guideRef, className: "-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-1/2 z-10 aspect-[85.6/53.98] w-[calc(100%-1rem)] max-w-[24.688rem] border-4 border-utility-warning-700 border-dashed transition-all duration-200" })] }));
+            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx("div", { className: "pointer-events-none absolute top-0 right-0 left-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 left-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute left-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { ref: context.guideRef, className: "-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-1/2 z-10 aspect-[85.6/53.98] w-[calc(100%-1rem)] max-w-[24.688rem] border-4 border-utility-warning-700 border-dashed transition-all duration-200" })] }));
 }

package/package.json

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