@opexa/portal-components 0.0.679 → 0.0.681

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

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

package/dist/client/hooks/useCamera.js

@@ -1,5 +1,6 @@
 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);
@@ -78,6 +79,67 @@ export function useCamera(options = {}) {
             setLoading(false);
         }
     }, [options, desktop]);
+    const openNativeCamera = useCallback(async () => {
+        setData(null);
+        setError(null);
+        setSnapping(true);
+        try {
+            // Dynamically import only when running native
+            const { Camera, CameraResultType } = await import('@capacitor/camera');
+            const photo = await Camera.getPhoto({
+                quality: 90,
+                resultType: CameraResultType.Uri,
+                saveToGallery: false,
+                allowEditing: false,
+            });
+            if (!photo.webPath) {
+                throw new Error('No photo returned from native camera');
+            }
+            console.log(photo, 'photo');
+            const response = await fetch(photo.webPath);
+            const blob = await response.blob();
+            const file = new File([blob], `${crypto.randomUUID()}.jpeg`, {
+                type: blob.type,
+                lastModified: Date.now(),
+            });
+            // Convert blob → base64 data URL
+            const url = await new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    if (typeof reader.result === 'string')
+                        resolve(reader.result);
+                    else
+                        reject(new Error('Failed to read image as data URL'));
+                };
+                reader.onerror = reject;
+                reader.readAsDataURL(blob);
+            });
+            const image = new Image();
+            image.src = url;
+            if (!image.complete || image.naturalWidth === 0) {
+                await new Promise((resolve, reject) => {
+                    image.onload = () => resolve();
+                    image.onerror = () => reject(new Error('Failed to load preview image'));
+                });
+            }
+            const data = {
+                url,
+                file,
+                image,
+            };
+            setData(data);
+            setSnapping(false);
+            return data;
+        }
+        catch (e) {
+            setError({
+                name: 'CameraError',
+                message: e instanceof Error ? e.message : 'Failed to open native camera',
+            });
+            setSnapping(false);
+            return null;
+        }
+    }, [setData, setError, setSnapping]);
     const close = useCallback(() => {
         setData(null);
         setError(null);
@@ -89,33 +151,76 @@ export function useCamera(options = {}) {
             resolve();
         });
     }, []);
-    const snap = useCallback(() => {
+    const snap = useCallback(async () => {
+        setData(null);
+        setError(null);
+        setSnapping(true);
         const video = videoRef.current;
-        if (!video)
-            return null;
         const canvas = document.createElement('canvas');
         const context = canvas.getContext('2d');
-        if (!context)
-            return null;
+        invariant(video, 'Could not find video element');
+        invariant(context, 'Could not get canvas context');
+        video.currentTime = 1;
         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
-        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',
+        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);
         });
-        const image = new Image();
-        image.src = url;
-        image.width = canvas.width;
-        image.height = canvas.height;
-        const data = { url, file, image };
-        setData(data);
-        return data;
-    }, []);
+    }, [options]);
     const reset = useCallback(() => {
         setData(null);
         setError(null);
@@ -157,6 +262,7 @@ export function useCamera(options = {}) {
     return {
         snap,
         open,
+        openNativeCamera,
         close,
         reopen,
         reset,

package/dist/client/utils/biometric.js

@@ -1,5 +1,5 @@
 import { addDays, isAfter } from 'date-fns';
-const SERVER = `com.${process.env.NEXT_PUBLIC_PLATFORM_CODE}.app`;
+const SERVER = `${process.env.NEXT_PUBLIC_PLATFORM_CODE?.toLocaleLowerCase()}.app`;
 export const BIOMETRIC_STORAGE_KEY = `${process.env.NEXT_PUBLIC_PLATFORM_CODE}__BiometricEnabled`;
 export var BiometryType;
 (function (BiometryType) {

package/dist/components/Banner/Banner.client.d.ts

@@ -0,0 +1,12 @@
+import type { ImageProps } from 'next/image';
+export interface BannerEntry {
+    src: ImageProps['src'];
+    redirectUrl?: string;
+}
+export interface BannerProps {
+    banners: BannerEntry[];
+    imageWidth?: number | [mobile: number, desktop: number];
+    imageHeight?: number | [mobile: number, desktop: number];
+    className?: string;
+}
+export declare function Banner__client(props: BannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Banner/Banner.client.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import emblaCarouselAutoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel, {} from 'embla-carousel-react';
+import isMobile from 'is-mobile';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Fragment, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { dataAttr } from '../../utils/dataAttr.js';
+export function Banner__client(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop: true,
+        align: 'start',
+    }, [
+        emblaCarouselAutoplay({
+            playOnInit: true,
+            delay: 5000,
+        }),
+    ]);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    useEffect(() => {
+        function handler(detail) {
+            setCurrentIndex(detail?.selectedScrollSnap() ?? 0);
+        }
+        emblaApi?.on('scroll', handler);
+        emblaApi?.on('init', handler);
+        return () => {
+            emblaApi?.on('init', handler);
+            emblaApi?.off('scroll', handler);
+        };
+    }, [emblaApi]);
+    const imageWidth = !props.imageWidth
+        ? [400, 1200]
+        : Array.isArray(props.imageWidth)
+            ? props.imageWidth
+            : [props.imageWidth, props.imageWidth];
+    const imageHeight = !props.imageHeight
+        ? [225, 300]
+        : Array.isArray(props.imageHeight)
+            ? props.imageHeight
+            : [props.imageHeight, props.imageHeight];
+    return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
+                        const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0 }));
+                        return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
+                    }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
+                        emblaApi?.scrollTo(index);
+                    }, "aria-label": `Go to slide ${index + 1}`, "data-active": dataAttr(index === currentIndex) }, index))) })] }));
+}

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHQRCode.js

@@ -32,5 +32,5 @@ export function QRPHQRCode(props) {
             });
         }
     }
-    return (_jsxs(QrCode.Root, { value: props.qrCodeString, className: "mx-auto mt-6 w-[12.5rem] rounded-lg border border-border-primary bg-bg-brand-secondary-alt p-5 lg:w-[13rem] lg:p-6", children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { id: "qrph-qrcode", className: "mx-auto size-[10rem] rounded-[0.25rem] border border-border-primary bg-white", children: _jsx(QrCode.Pattern, {}) }), _jsx(QrCode.Overlay, { className: "bg-white p-0.5", children: _jsx(Image, { src: qrphIcon, alt: "", className: "size-8", width: 40, height: 40 }) })] }), Capacitor.isNativePlatform() ? (_jsx("button", { type: "button", onClick: handleNativeDownload, className: "mt-5 block w-full text-center font-semibold text-sm text-text-secondary-700", children: "Download QR Code to Device" })) : (_jsx(QrCode.DownloadTrigger, { fileName: `qrcode-${Date.now()}`, mimeType: "image/png", className: "mt-5 block w-full text-center font-semibold text-sm text-text-secondary-700", children: "Download QR Code" }))] }));
+    return (_jsxs(QrCode.Root, { value: props.qrCodeString, className: "mx-auto mt-6 w-[12.5rem] rounded-lg border border-border-primary bg-bg-brand-secondary-alt p-5 lg:w-[13rem] lg:p-6", children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { className: "mx-auto size-[10rem] rounded-[0.25rem] border border-border-primary bg-white", children: _jsx(QrCode.Pattern, {}) }), _jsx(QrCode.Overlay, { className: "bg-white p-0.5", children: _jsx(Image, { src: qrphIcon, alt: "", className: "size-8", width: 40, height: 40 }) })] }), Capacitor.isNativePlatform() ? (_jsx("button", { type: "button", onClick: handleNativeDownload, className: "mt-5 block w-full text-center font-semibold text-sm text-text-secondary-700", children: "Download QR Code to Device" })) : (_jsx(QrCode.DownloadTrigger, { fileName: `qrcode-${Date.now()}`, mimeType: "image/png", className: "mt-5 block w-full text-center font-semibold text-sm text-text-secondary-700", children: "Download QR Code" }))] }));
 }

package/dist/components/DigitainLauncher/Loading.d.ts

@@ -0,0 +1 @@
+export declare function Loading(): import("react/jsx-runtime").JSX.Element;

package/dist/components/DigitainLauncher/Loading.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Loading() {
+    return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-blue-500 border-t-transparent" }), _jsx("p", { className: "font-medium text-gray-700 text-lg", children: "Loading Sports Book\u2026" })] }) }));
+}

package/dist/components/GameLaunch/GameLaunchTrigger.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react/factory';
 import { BiometricAuthError } from 'capacitor-native-biometric';
+import { useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 import { useCreateGameSessionMutation } from '../../client/hooks/useCreateGameSessionMutation.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
@@ -9,7 +10,7 @@ import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerifica
 import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { getSession } from '../../client/services/getSession.js';
 import { signIn } from '../../client/services/signIn.js';
-import { getBiometricCredentials, getBiometricInfo, hasSavedBiometry, performBiometricVerification, saveBiometricCredentials, } from '../../client/utils/biometric.js';
+import { deleteBiometricCredentials, getBiometricCredentials, getBiometricInfo, hasSavedBiometry, performBiometricVerification, saveBiometricCredentials, } from '../../client/utils/biometric.js';
 import { toaster } from '../../client/utils/toaster.js';
 import { createSingleUseToken } from '../../services/auth.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
@@ -23,6 +24,7 @@ export function GameLaunchTrigger(props) {
         gameLaunch: ctx.gameLaunch,
         kycVerificationStatus: ctx.kycVerificationStatus,
     })));
+    const [hasCancelledBiometric, setHasCancelledBiometric] = useState(false);
     const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
     const currentHour = new Date().getHours();
     const between3amAnd3pm = currentHour >= 15 || currentHour < 3;
@@ -44,7 +46,7 @@ export function GameLaunchTrigger(props) {
                 : 'open', ...props, disabled: disabled, onClick: async (e) => {
             props.onClick?.(e);
             if (sessionQuery.data?.status === 'unauthenticated') {
-                if (hasSavedBiometry()) {
+                if (hasSavedBiometry() && !hasCancelledBiometric) {
                     const ok = await performBiometricVerification({
                         reason: 'Login to your account',
                         title: 'Login',
@@ -56,7 +58,10 @@ export function GameLaunchTrigger(props) {
                         const info = await getBiometricInfo();
                         if (info.errorCode === BiometricAuthError.APP_CANCEL ||
                             info.errorCode === BiometricAuthError.USER_CANCEL ||
-                            info.errorCode === BiometricAuthError.SYSTEM_CANCEL) {
+                            info.errorCode === BiometricAuthError.SYSTEM_CANCEL ||
+                            info.errorCode === undefined ||
+                            info.errorCode === null) {
+                            setHasCancelledBiometric(true);
                             console.log('Biometric verification cancelled');
                         }
                         else {
@@ -71,10 +76,21 @@ export function GameLaunchTrigger(props) {
                         globalStore.signIn.setOpen(!globalStore.signIn.open);
                         return;
                     }
-                    await signIn({
-                        type: 'SINGLE_USE_TOKEN',
-                        token: credentials.password,
-                    });
+                    try {
+                        console.log('Signing in using biometric credentials');
+                        await signIn({
+                            type: 'SINGLE_USE_TOKEN',
+                            token: credentials.password,
+                        });
+                    }
+                    catch (error) {
+                        toaster.error({
+                            title: 'Biometric sign-in token has expired.',
+                            description: 'Please sign in with your mobile number or username to re-enable biometric login.',
+                        });
+                        deleteBiometricCredentials();
+                        globalStore.signIn.setOpen(!globalStore.signIn.open);
+                    }
                     getQueryClient().invalidateQueries({
                         queryKey: getSessionQueryKey(),
                     });
@@ -95,19 +111,56 @@ export function GameLaunchTrigger(props) {
                         else {
                             console.warn('Failed to updated biometric credentials');
                             globalStore.signIn.setOpen(!globalStore.signIn.open);
-                            return;
                         }
                     }
                     else {
                         console.error('Failed to create token');
                         globalStore.signIn.setOpen(!globalStore.signIn.open);
-                        return;
                     }
                 }
                 else {
-                    globalStore.signIn.setOpen(true);
-                    return;
+                    // still update biometric credentials if user has cancelled biometric once
+                    if (hasCancelledBiometric) {
+                        const credentials = await getBiometricCredentials();
+                        if (!credentials) {
+                            toaster.error({ description: 'Biometric verification failed' });
+                            globalStore.signIn.setOpen(!globalStore.signIn.open);
+                            return;
+                        }
+                        await signIn({
+                            type: 'SINGLE_USE_TOKEN',
+                            token: credentials.password,
+                        });
+                        getQueryClient().invalidateQueries({
+                            queryKey: getSessionQueryKey(),
+                        });
+                        const session = await getSession();
+                        const r = await createSingleUseToken({
+                            headers: {
+                                Authorization: `Bearer ${session.token}`,
+                            },
+                        });
+                        if (r.token) {
+                            const saved = await saveBiometricCredentials({
+                                username: credentials.username,
+                                password: r.token,
+                            });
+                            if (saved) {
+                                console.info('Biometric credentials has been updated');
+                            }
+                            else {
+                                console.warn('Failed to updated biometric credentials');
+                                globalStore.signIn.setOpen(!globalStore.signIn.open);
+                            }
+                        }
+                        else {
+                            console.error('Failed to create token');
+                            globalStore.signIn.setOpen(!globalStore.signIn.open);
+                        }
+                    }
+                    globalStore.signIn.setOpen(!globalStore.signIn.open);
                 }
+                return props.onClick?.(e);
             }
             //handle new kyc process to play only on verified members only
             if (verificationStatus === 'PENDING' ||

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

@@ -0,0 +1 @@
+export declare function BasicInformation(): import("react/jsx-runtime").JSX.Element;

package/dist/components/KYC/BasicInformation.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { differenceInYears, format, isSameDay, isValid, parse } from 'date-fns';
+import { isNil, omitBy, size } from 'lodash-es';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import invariant from 'tiny-invariant';
+import { z } from 'zod';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useUpdateAccountMutation } from '../../client/hooks/useUpdateAccountMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { useKYCContext } from './KYCContext.js';
+const definition = z.object({
+    realName: z
+        .string()
+        .min(3, 'Name must be 3 or more characters')
+        .max(50, 'Name must not be more than 50 characters')
+        .regex(/^[a-z0-9 ]+$/gi, 'Name must not contain special characters')
+        .trim(),
+    birthDay: z
+        .string()
+        .min(1, 'Date of birth is required')
+        .superRefine((value, ctx) => {
+        const dob = parse(value, 'yyyy-MM-dd', new Date());
+        if (!isValid(dob)) {
+            return ctx.addIssue({
+                code: z.ZodIssueCode.invalid_date,
+            });
+        }
+        const now = new Date();
+        const age = differenceInYears(now, dob);
+        if (age < 21) {
+            return ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: 'You must be at least 21 years old',
+            });
+        }
+    }),
+    branchCode: z.string().min(4).max(10).optional().or(z.literal('')),
+});
+export function BasicInformation() {
+    const kyc = useKYCContext();
+    const form = useForm({
+        resolver: zodResolver(definition),
+        mode: 'all',
+        defaultValues: {
+            birthDay: '',
+            branchCode: '',
+            realName: '',
+        },
+    });
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const stepCompleted = account != null && account.realName != null && account.birthDay != null;
+    useEffect(() => {
+        if (stepCompleted)
+            kyc.setStep(2);
+    }, [stepCompleted, kyc]);
+    useEffect(() => {
+        if (account) {
+            form.reset({
+                realName: account.realName ?? '',
+                birthDay: account.birthDay
+                    ? format(account.birthDay, 'yyyy-MM-dd')
+                    : '',
+            });
+        }
+    }, [account, form]);
+    const updateAccountMutation = useUpdateAccountMutation({
+        onError(error) {
+            toaster.error({
+                title: 'Error',
+                description: error.message,
+            });
+        },
+        onSuccess() {
+            kyc.setStep(2);
+            toaster.success({
+                title: 'Success',
+                description: 'Basic information has been set successfully.',
+            });
+        },
+    });
+    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center font-semibold text-lg", children: "Basic Information" }), _jsx(Dialog.Description, { className: "mt-xs text-center text-sm text-text-secondary-700", children: "Enter your basic details for identification and communication." }), _jsxs("form", { className: "mt-3", onSubmit: form.handleSubmit((data) => {
+                    invariant(account);
+                    const input = omitBy({
+                        realName: account.realName === data.realName ? undefined : data.realName,
+                        birthDay: account.birthDay && isSameDay(data.birthDay, account.birthDay)
+                            ? undefined
+                            : format(data.birthDay, 'yyyy-MM-dd'),
+                    }, isNil);
+                    if (size(input) === 0)
+                        return kyc.setStep(2);
+                    updateAccountMutation.mutate(input);
+                }), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!accountQuery.data?.realName, children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-3", invalid: !!form.formState.errors.branchCode, readOnly: !!accountQuery.data?.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 })] }), _jsx(Button, { type: "submit", className: "mt-8", disabled: accountQuery.isLoading ||
+                            updateAccountMutation.isPending ||
+                            stepCompleted, children: "Continue" })] })] }));
+}

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

@@ -0,0 +1 @@
+export declare function IdentityVerification(): import("react/jsx-runtime").JSX.Element;

package/dist/components/KYC/IdentityVerification.js

@@ -0,0 +1,120 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useCreateMemberVerificationMutation } from '../../client/hooks/useCreateMemberVerificationMutation.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
+import { useUpdateMemberVerificationMutation } from '../../client/hooks/useUpdateMemberVerificationMutation.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getMemberVerificationQueryKey } from '../../utils/queryKeys.js';
+import { IdFrontImageField } from '../shared/IdFrontImageField/index.js';
+import { SelfieImageField } from '../shared/SelfieImageField/index.js';
+import { useKYCContext } from './KYCContext.js';
+const formSchema = z.object({
+    selfieImage: z.string().min(1, 'Selfie image is required.'),
+    idFrontImage: z.string().min(1, 'Front image of ID is required.'),
+});
+export function IdentityVerification() {
+    const kyc = useKYCContext();
+    const { mutate: createMemberVerification, isPending: createPending } = useCreateMemberVerificationMutation({
+        onSuccess: () => {
+            toaster.success({
+                title: 'ID Front Image & Selfie Image uploaded successfully',
+            });
+        },
+        onError: (error) => {
+            toaster.error({
+                title: 'Failed to upload ID Front Image & Selfie Image',
+                description: error.message,
+            });
+        },
+    });
+    const { mutate: updateMemberVerification, isPending: updatePending } = useUpdateMemberVerificationMutation({
+        onSuccess: () => {
+            const queryClient = getQueryClient();
+            toaster.success({
+                title: 'ID Front Image & Selfie Image updated successfully',
+            });
+            queryClient.setQueryData(getMemberVerificationQueryKey(), (prev) => {
+                if (!prev)
+                    return prev;
+                return {
+                    ...prev,
+                    status: 'CREATED',
+                };
+            });
+        },
+        onError: (error) => {
+            toaster.error({
+                title: 'Failed to upload ID Front Image & Selfie Image',
+                description: error.message,
+            });
+        },
+    });
+    const memberVerification = useMemberVerificationQuery();
+    const memberId = memberVerification.data?.id;
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+    })));
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            idFrontImage: '',
+            selfieImage: '',
+        },
+    });
+    function onSubmit(values) {
+        if (!memberId) {
+            createMemberVerification({
+                selfieImage: values.selfieImage,
+                idFrontImage: values.idFrontImage,
+                address: '',
+                nationality: '',
+                natureOfWork: '',
+                permanentAddress: '',
+                placeOfBirth: '',
+                sourceOfIncome: '',
+            });
+            kyc.setStep(3);
+        }
+        else {
+            updateMemberVerification({
+                id: memberId,
+                data: {
+                    selfieImage: values.selfieImage,
+                    idFrontImage: values.idFrontImage,
+                },
+            });
+            kyc.setStep(3);
+        }
+    }
+    useEffect(() => {
+        if (kyc.selfieImageId)
+            form.setValue('selfieImage', kyc.selfieImageId);
+        if (kyc.idFrontImageId)
+            form.setValue('idFrontImage', kyc.idFrontImageId);
+    }, [form, kyc.idFrontImageId, kyc.selfieImageId]);
+    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center font-semibold text-lg", children: "Verify your identity" }), _jsx(Dialog.Description, { className: "mt-xs text-center text-sm text-text-secondary-700", children: "Verify your details to confirm your identity and secure your access." }), _jsxs("div", { className: "mt-7 rounded-xl border border-border-primary bg-bg-primary p-lg text-text-placeholder text-xs leading-tight", children: [_jsx("h3", { className: "font-semibold", children: "Instructions" }), _jsxs("ol", { className: "mt-2 list-inside list-decimal", children: [_jsx("li", { children: "Upload a full photo of your ID." }), _jsx("li", { children: "Please ensure that all details in the uploaded image are legible." }), _jsx("li", { children: "Please ensure that the ID uploaded is within the validity period." })] })] }), _jsxs("form", { className: "mt-xl", onSubmit: form.handleSubmit(onSubmit), children: [_jsx(Controller, { control: form.control, name: "idFrontImage", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsx(Field.Label, { children: "Front of your ID" }), _jsx(IdFrontImageField, { value: o.field.value, onChange: o.field.onChange, onError: (error) => {
+                                        form.setValue('idFrontImage', '');
+                                        form.setError('idFrontImage', {
+                                            type: 'validate',
+                                            message: error.message,
+                                        });
+                                    } }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Controller, { control: form.control, name: "selfieImage", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, className: "mt-3", children: [_jsx(Field.Label, { children: "Selfie holding your ID" }), _jsx(SelfieImageField, { value: o.field.value, onChange: o.field.onChange, onError: (error) => {
+                                        form.setValue('selfieImage', '');
+                                        form.setError('selfieImage', {
+                                            type: 'validate',
+                                            message: error.message,
+                                        });
+                                    } }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-6", disabled: createPending || updatePending, children: "Continue" }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "mt-lg", type: "button", onClick: () => {
+                            globalStore.kyc.setOpen(false);
+                        }, children: "Skip for now" })] })] }));
+}

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

@@ -0,0 +1 @@
+export declare function Indicator(): import("react/jsx-runtime").JSX.Element;