@opexa/portal-components 0.0.138 → 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/dist/components/SignIn/MobileNumberSignIn.js

@@ -15,8 +15,6 @@ import { useSignInMutation } from '../../client/hooks/useSignInMutation.js';
 import { toaster } from '../../client/utils/toaster.js';
 import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
-import { FacebookIcon } from '../../icons/FacebookIcon.js';
-import { GoogleIcon } from '../../icons/GoogleIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Field } from '../../ui/Field/index.js';
@@ -106,11 +104,7 @@ export function MobileNumberSignIn() {
                                             }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I accept the", ' ', _jsx(Link, { href: signInProps.termsAndConditionsUrl ??
                                                                 '/terms-and-conditions', onClick: () => {
                                                                 dialog.setOpen(false);
-                                                            }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), _jsxs("div", { className: "mt-6 flex items-center gap-2", children: [_jsx("div", { className: "bg-text-tertiary-600/50 h-px flex-grow" }), _jsx("span", { className: "text-text-tertiary-600 text-sm font-semibold", children: "Log in directly with" }), _jsx("div", { className: "bg-text-tertiary-600/50 h-px flex-grow" })] }), _jsxs("div", { className: "mt-6", children: [_jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                    dialog.setOpen(false);
-                                }, className: "border-border-primary bg-bg-primary text-text-secondary-700", children: [_jsx(GoogleIcon, { className: "size-6" }), "Continue with Google"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                    dialog.setOpen(false);
-                                }, className: "border-border-primary bg-bg-primary text-text-secondary-700 mt-lg", children: [_jsx(FacebookIcon, { className: "size-6" }), "Continue with Facebook"] })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
+                                                            }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
                                     dialog.setOpen(false);
                                     globalStore.signUp.setOpen(true);
                                 }, children: "Sign up" })] })] })), context.step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -13,8 +13,6 @@ import { SECRET_QUESTIONS, SECRET_QUESTIONS_MAP } from '../../constants/index.js
 import { CheckIcon } from '../../icons/CheckIcon.js';
 import { EyeIcon } from '../../icons/EyeIcon.js';
 import { EyeOffIcon } from '../../icons/EyeOffIcon.js';
-import { FacebookIcon } from '../../icons/FacebookIcon.js';
-import { GoogleIcon } from '../../icons/GoogleIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Field } from '../../ui/Field/index.js';
@@ -129,11 +127,7 @@ export function NameAndPasswordSignIn() {
                                     }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I accept the", ' ', _jsx(Link, { href: signInProps.termsAndConditionsUrl ??
                                                         '/terms-and-conditions', onClick: () => {
                                                         dialog.setOpen(false);
-                                                    }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), _jsxs("div", { className: "mt-6 flex items-center gap-2", children: [_jsx("div", { className: "bg-text-tertiary-600/50 h-px flex-grow" }), _jsx("span", { className: "text-text-tertiary-600 text-sm font-semibold", children: "Log in directly with" }), _jsx("div", { className: "bg-text-tertiary-600/50 h-px flex-grow" })] }), _jsxs("div", { className: "mt-6", children: [_jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                            dialog.setOpen(false);
-                        }, className: "border-border-primary bg-bg-primary text-text-secondary-700", children: [_jsx(GoogleIcon, { className: "size-6" }), "Continue with Google"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                            dialog.setOpen(false);
-                        }, className: "border-border-primary bg-bg-primary text-text-secondary-700 mt-lg", children: [_jsx(FacebookIcon, { className: "size-6" }), "Continue with Facebook"] })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
+                                                    }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
                             dialog.setOpen(false);
                             globalStore.signUp.setOpen(true);
                         }, children: "Sign up" })] })] }));

package/dist/components/SignUp/SignUpForm.js

@@ -12,6 +12,7 @@ import { useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
 import { useCooldown } from '../../client/hooks/useCooldown.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
@@ -28,8 +29,6 @@ import { CheckIcon } from '../../icons/CheckIcon.js';
 import { ChevronDownIcon } from '../../icons/ChevronDownIcon.js';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
 import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
-import { FacebookIcon } from '../../icons/FacebookIcon.js';
-import { GoogleIcon } from '../../icons/GoogleIcon.js';
 import { ObjectType } from '../../services/ObjectType.js';
 import { Button } from '../../ui/Button/index.js';
 import { Checkbox } from '../../ui/Checkbox/index.js';
@@ -149,18 +148,17 @@ export function SignUpForm() {
                             }
                         }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "absolute left-3.5 top-1/2 flex shrink-0 -translate-y-1/2 items-center gap-md", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { style: {
                                                     paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
-                                                }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.realName, className: "mt-xl", children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...step1Form.register('realName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.birthDay, className: "mt-xl", children: [_jsxs(DatePicker.Root, { size: "md", variant: "outline", placeholder: "MM/DD/YYYY", lazyMount: true, unmountOnExit: true, fixedWeeks: true, selectionMode: "single", value: birthDay ? [parseDate(birthDay)] : [], onValueChange: (details) => {
-                                            const value = details.value.at(0)?.toDate(DEVICE_TIMEZONE);
-                                            if (value) {
-                                                step1Form.setValue('birthDay', value, {
-                                                    shouldDirty: true,
-                                                    shouldTouch: true,
-                                                    shouldValidate: true,
-                                                });
-                                            }
-                                        }, children: [_jsx(DatePicker.Label, { children: "Date of Birth" }), _jsxs(DatePicker.Control, { children: [_jsx(DatePicker.Input, { onBlur: () => {
-                                                            step1Form.trigger('birthDay');
-                                                        } }), _jsx(DatePicker.Trigger, { children: _jsx(CalendarIcon, {}) })] }), _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { children: _jsx(DatePicker.View, { view: "day", children: _jsx(DatePicker.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: api.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.substring(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: api.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] })) }) }) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.birthDay?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.branchCode, className: "mt-xl", children: [_jsxs(Select.Root, { value: [branchCode], onValueChange: (details) => {
+                                                }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.realName, className: "mt-xl", children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...step1Form.register('realName') }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.birthDay, className: "mt-xl", children: [_jsx(DateOfBirthField, { value: birthDay, onChange: (value) => {
+                                            if (!value)
+                                                return;
+                                            step1Form.setValue('birthDay', value, {
+                                                shouldDirty: true,
+                                                shouldTouch: true,
+                                                shouldValidate: true,
+                                            });
+                                        }, onBlur: () => {
+                                            step1Form.trigger('birthDay');
+                                        } }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.birthDay?.message })] }), _jsxs(Field.Root, { invalid: !!step1Form.formState.errors.branchCode, className: "mt-xl", children: [_jsxs(Select.Root, { value: [branchCode], onValueChange: (details) => {
                                             step1Form.setValue('branchCode', details.value.at(0) ?? BRANCH_CODES[0].code, {
                                                 shouldDirty: true,
                                                 shouldTouch: true,
@@ -174,11 +172,7 @@ export function SignUpForm() {
                                             }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I accept the", ' ', _jsx(Link, { href: signUpProps.termsAndConditionsUrl ??
                                                                 '/terms-and-conditions', onClick: () => {
                                                                 dialog.setOpen(false);
-                                                            }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), ' ', _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Create Account" })] }), _jsxs("div", { className: "mt-6 flex items-center gap-2", children: [_jsx("div", { className: "bg-text-tertiary-600/50 h-px flex-grow" }), _jsx("span", { className: "text-text-tertiary-600 text-sm font-semibold", children: "Log in directly with" }), _jsx("div", { className: "bg-text-tertiary-600/50 h-px flex-grow" })] }), _jsxs("div", { className: "mt-6", children: [_jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                    dialog.setOpen(false);
-                                }, className: "border-border-primary bg-bg-primary text-text-secondary-700", children: [_jsx(GoogleIcon, { className: "size-6" }), "Sign in with Google"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                    dialog.setOpen(false);
-                                }, className: "border-border-primary bg-bg-primary text-text-secondary-700 mt-lg", children: [_jsx(FacebookIcon, { className: "size-6" }), "Sign in with Facebook"] })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Already have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
+                                                            }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), ' ', _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Create Account" })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Already have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
                                     dialog.setOpen(false);
                                     signInStore.setOpen(true);
                                 }, children: "Log In" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
@@ -255,3 +249,18 @@ export function SignUpForm() {
                                 }, children: [_jsx(ArrowLeftIcon, { className: "size-5" }), "Back"] })] })] }))] }));
 }
 const DEVICE_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
+function DateOfBirthField(props) {
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? null,
+        onChange: props.onChange,
+    });
+    return (_jsxs(DatePicker.Root, { size: "md", variant: "outline", placeholder: "MM/DD/YYYY", lazyMount: true, unmountOnExit: true, fixedWeeks: true, selectionMode: "single", value: value ? [parseDate(value)] : [], onValueChange: (details) => {
+            const value = details.value.at(0)?.toDate(DEVICE_TIMEZONE);
+            setValue(value ?? null);
+        }, children: [_jsx(DatePicker.Label, { children: "Date of Birth" }), _jsxs(DatePicker.Control, { children: [_jsx(DatePicker.Input, { onBlur: props.onBlur, onFocus: props.onFocus }), _jsx(DatePicker.Trigger, { children: _jsx(CalendarIcon, {}) })] }), _jsx(DatePicker.Positioner, { children: _jsxs(DatePicker.Content, { children: [_jsx(DatePicker.View, { view: "day", children: _jsx(DatePicker.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: api.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.substring(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: api.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] })) }) }), _jsx(DatePicker.View, { view: "month", children: _jsx(DatePicker.Context, { children: (datePicker) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsx(DatePicker.Table, { children: _jsx(DatePicker.TableBody, { children: datePicker
+                                                    .getMonthsGrid({ columns: 4, format: 'short' })
+                                                    .map((months, id) => (_jsx(DatePicker.TableRow, { children: months.map((month, id) => (_jsx(DatePicker.TableCell, { value: month.value, children: _jsx(DatePicker.TableCellTrigger, { className: "w-[4.425rem]", children: month.label }) }, id))) }, id))) }) })] })) }) }), _jsx(DatePicker.View, { view: "year", children: _jsx(DatePicker.Context, { children: (datePicker) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsx(DatePicker.Table, { children: _jsx(DatePicker.TableBody, { children: datePicker
+                                                    .getYearsGrid({ columns: 4 })
+                                                    .map((years, id) => (_jsx(DatePicker.TableRow, { children: years.map((year, id) => (_jsx(DatePicker.TableCell, { value: year.value, children: _jsx(DatePicker.TableCellTrigger, { className: "w-[4.425rem]", children: year.label }) }, id))) }, id))) }) })] })) }) })] }) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.138",
+  "version": "0.0.140",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",
@@ -77,7 +77,7 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.14.1",
+    "@ark-ui/react": "^5.14.2",
     "@date-fns/tz": "^1.2.0",
     "@next/third-parties": "^15.3.4",
     "@tailwindcss/typography": "^0.5.16",