@opexa/portal-components 0.0.139 → 0.0.140

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

@@ -0,0 +1,10 @@
+import type { CaptureSubject } from './useKYC';
+interface FileUploadProps {
+    name: string;
+    value: string;
+    hasDescription?: boolean;
+    onChange?: (id: string) => void;
+    captureObject: CaptureSubject;
+}
+declare function FileUpload({ value, name, hasDescription, onChange, captureObject, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export default FileUpload;

package/dist/components/KYC/FileUpload.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { useFileQuery } from '../../client/hooks/useFileQuery.js';
+import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
+import { UploadCloud02Icon } from '../../icons/UploadCloud02Icon.js';
+import { Button } from '../../ui/Button/index.js';
+import { useKYCContext } from './KYCContext.js';
+import { validateFile } from './utils.js';
+function FileUpload({ value, name, hasDescription, onChange, captureObject, }) {
+    const kyc = useKYCContext();
+    const { mutate, isPending } = useUploadImageFileMutation();
+    const { data: uploadedImage, isSuccess: uploadedImageReady } = useFileQuery(value);
+    if (isPending) {
+        return (_jsx("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: _jsx("div", { className: "flex items-center justify-center", children: _jsx("span", { className: "text-text-secondary-700", children: "Uploading..." }) }) }));
+    }
+    function handleFileChange(event) {
+        const file = event.target.files?.[0];
+        if (!file) {
+            console.error('No file selected');
+            return;
+        }
+        const error = validateFile(file);
+        if (error) {
+            console.error(error);
+            return;
+        }
+        mutate({ file }, {
+            onSuccess: (id) => {
+                onChange?.(id);
+            },
+        });
+    }
+    function handleUploadClick() {
+        const fileInput = document.getElementById(`file-upload-${name}`);
+        if (fileInput) {
+            fileInput.click();
+        }
+    }
+    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [uploadedImageReady ? (_jsxs("div", { className: "border-border-primary bg-bg-primary min-h-[9.25rem]", children: [_jsx(Image, { src: uploadedImage?.url ?? '', alt: "Uploaded", className: "w-full object-contain", width: 350, height: 350, draggable: false }), _jsx(Button, { size: "xs", variant: "outline", className: twMerge('mx-auto mt-4 w-fit', value && 'hidden'), type: "button", onClick: handleUploadClick, children: "Reupload" })] })) : hasDescription ? (_jsxs(_Fragment, { 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-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg cursor-pointer font-semibold", onClick: handleUploadClick, children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] })] })) : null, _jsx("input", { type: "file", id: `file-upload-${name}`, name: name, onChange: handleFileChange, accept: "image/png, image/jpg, image/jpeg", className: "hidden" }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => kyc.setCapturing(captureObject), disabled: isPending, type: "button", children: value ? 'Retake Photo' : 'Take a Photo' })] }));
+}
+export default FileUpload;

package/dist/components/KYC/IdentityVerification.js

@@ -1,37 +1,107 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { 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 { HelpCircleIcon } from '../../icons/HelpCircleIcon.js';
-import { UploadCloud02Icon } from '../../icons/UploadCloud02Icon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import DisplayImage from './DisplayImage.js';
+import FileUpload from './FileUpload.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',
+            });
+            kyc.setStep(3);
+        },
+        onError: (error) => {
+            toaster.error({
+                title: 'Failed to upload ID Front Image & Selfie Image',
+                description: error.message,
+            });
+        },
+    });
+    const { mutate: updateMemberVerification, isPending: updatePending } = useUpdateMemberVerificationMutation({
+        onSuccess: () => {
+            toaster.success({
+                title: 'ID Front Image & Selfie Image updated successfully',
+            });
+            kyc.setStep(3);
+        },
+        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,
     })));
-    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Verify your identity" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Verify your details to confirm your identity and secure your access." }), _jsxs("div", { className: "border-border-primary bg-bg-primary text-text-placeholder mt-7 rounded-xl border p-lg 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: (e) => {
-                    e.preventDefault();
-                    kyc.setStep(3);
-                }, children: [_jsxs(Field.Root, { children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Front of your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(UploadIdDocument, {})] }), _jsxs(Field.Root, { className: "mt-3", children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Selfie holding your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(UploadSelfie, {})] }), _jsx(Button, { type: "submit", className: "mt-6", children: "Continue" }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "mt-lg", onClick: () => {
+    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: '',
+            });
+        }
+        else {
+            updateMemberVerification({
+                id: memberId,
+                data: {
+                    selfieImage: values.selfieImage,
+                    idFrontImage: values.idFrontImage,
+                },
+            });
+        }
+    }
+    useEffect(() => {
+        if (kyc.idFrontImageId) {
+            form.setValue('idFrontImage', kyc.idFrontImageId);
+        }
+        if (kyc.selfieImageId) {
+            form.setValue('selfieImage', kyc.selfieImageId);
+        }
+    }, [form, kyc]);
+    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Verify your identity" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Verify your details to confirm your identity and secure your access." }), _jsxs("div", { className: "border-border-primary bg-bg-primary text-text-placeholder mt-7 rounded-xl border p-lg 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: [_jsxs(Field.Root, { invalid: !!form.formState.errors.idFrontImage, children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Front of your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(FileUpload, { value: kyc.idFrontImageId || '', hasDescription: true, name: "idFrontImage", captureObject: "ID_DOCUMENT", onChange: (file) => {
+                                    form.setValue('idFrontImage', file);
+                                    kyc.setFrontImageId(file);
+                                } }, "id-front-image-upload"), _jsx(Field.ErrorText, { children: form.formState.errors.idFrontImage?.message })] }), _jsxs(Field.Root, { className: "mt-3", invalid: !!form.formState.errors.selfieImage, children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Selfie holding your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(FileUpload, { value: kyc.selfieImageId || '', name: "selfieImage", captureObject: "SELFIE", onChange: (file) => {
+                                    form.setValue('selfieImage', file);
+                                } }, "selfie-image-upload"), _jsx(Field.ErrorText, { children: form.formState.errors.selfieImage?.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: () => {
                             kyc.setStep(3);
                             kyc.setDone(true);
                             globalStore.kyc.setOpen(false);
                         }, children: "Skip for now" })] }), _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { className: "bg-bg-primary-alt mx-auto min-h-full w-full p-3xl lg:h-auto lg:w-[400px]" }) })] }) })] }));
 }
-function UploadIdDocument() {
-    const kyc = useKYCContext();
-    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [kyc.idFrontImageId ? (_jsx(DisplayImage, { id: kyc.idFrontImageId })) : (_jsxs(_Fragment, { 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-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg font-semibold", children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] })] })), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => {
-                    kyc.setCapturing('ID_DOCUMENT');
-                }, children: kyc.idFrontImageId ? 'Rekate Photo' : 'Take a Photo' })] }));
-}
-function UploadSelfie() {
-    const kyc = useKYCContext();
-    return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [kyc.selfieImageId ? (_jsx(DisplayImage, { id: kyc.selfieImageId })) : (_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-quinary size-4" }) })), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => {
-                    kyc.setCapturing('SELFIE');
-                }, children: "Take a photo" })] }));
-}

package/dist/components/KYC/KYC.lazy.js

@@ -1,7 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } 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';
+import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
@@ -15,6 +19,25 @@ import { PersonalInformation } from './PersonalInformation.js';
 import { useKYC } from './useKYC.js';
 export function KYC(props) {
     const kyc = useKYC();
+    const accountQuery = useAccountQuery();
+    const memberVerification = useMemberVerificationQuery();
+    const isBasicInfoVerified = Boolean(accountQuery.data?.realName) &&
+        Boolean(accountQuery.data?.birthDay);
+    const isMemberUploaded = Boolean(memberVerification.data?.idFrontImage) &&
+        Boolean(memberVerification.data?.selfieImage);
+    const memberStatus = memberVerification.data?.status;
+    //check steps
+    useEffect(() => {
+        if (!isBasicInfoVerified) {
+            kyc.setStep(1);
+        }
+        else if (memberStatus === 'REJECTED') {
+            kyc.setStep(2);
+        }
+        else if (isBasicInfoVerified) {
+            kyc.setStep(isMemberUploaded ? 3 : 2);
+        }
+    }, [isBasicInfoVerified, isMemberUploaded, memberStatus, kyc]);
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         kyc: ctx.kyc,
     })));

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

@@ -7,7 +7,7 @@ type EventDetail = {
 };
 type UnsubscribeFn = () => void;
 type Subscriber = (detail: EventDetail) => UnsubscribeFn;
-type CaptureSubject = 'SELFIE' | 'ID_DOCUMENT';
+export type CaptureSubject = 'SELFIE' | 'ID_DOCUMENT';
 export interface UseKYCReturn {
     step: number;
     setStep: (step: number) => void;

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

@@ -1,2 +1,6 @@
 export declare function dataURLtoBlob(dataURL: string): Blob;
 export declare const resizeFile: (file: File) => Promise<unknown>;
+export declare const MAX_FILE_SIZE = 10;
+export declare const MAX_NAME_LENGTH = 52;
+export declare const SUPPORTED_FILES: string[];
+export declare function validateFile(file: File): "File too large" | "File name too long" | "Unsupported file" | undefined;

package/dist/components/KYC/utils.js

@@ -15,3 +15,27 @@ export const resizeFile = (file) => new Promise((resolve) => {
         resolve(uri);
     }, 'file');
 });
+export const MAX_FILE_SIZE = 10; /* in MB */
+export const MAX_NAME_LENGTH = 52;
+export const SUPPORTED_FILES = [
+    /* add more supported ext */
+    'image/png',
+    'image/jpg',
+    'image/jpeg',
+];
+function removeFilenameExt(subject) {
+    const l = subject.split('.');
+    l.pop();
+    return l.join('.');
+}
+export function validateFile(file) {
+    const fileType = file.type;
+    const fileSize = file.size / (1024 * 1024);
+    const nameLength = removeFilenameExt(file.name).length;
+    if (fileSize > MAX_FILE_SIZE)
+        return 'File too large';
+    if (nameLength > MAX_NAME_LENGTH)
+        return 'File name too long';
+    if (!SUPPORTED_FILES.includes(fileType))
+        return 'Unsupported file';
+}

package/package.json

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