@opexa/portal-components 0.0.311 → 0.0.313

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { noop } from 'lodash-es';
+import { Progress } from '../../../ui/Progress/index.js';
+import { useKYCDefaultContext } from './KYCDefaultContext.js';
+export function Indicator() {
+    const kyc = useKYCDefaultContext();
+    return (_jsxs("div", { className: "flex items-center justify-center gap-1.5 py-3", children: [_jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step > 1 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step > 2 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-10 shrink-0", value: kyc.step === 3 ? 100 : 0, onValueChange: noop, children: _jsx(Progress.Track, { className: "bg-bg-primary-hover", children: _jsx(Progress.Range, {}) }) })] }));
+}

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

@@ -0,0 +1,7 @@
+import type { ImageProps } from 'next/image';
+import { type KYCReminderProps } from '../KYCReminder';
+export interface KYCDefaultProps extends KYCReminderProps {
+    provider?: 'opexa';
+    logo: ImageProps['src'];
+}
+export declare function KYCDefault(props: KYCDefaultProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/KYC/KYCDefault/KYCDefaultContext.d.ts

@@ -0,0 +1,6 @@
+import type { UseKYCDefaultReturn } from './useKYCDefault';
+export declare const KYCDefaultContext: (props: {
+    value: UseKYCDefaultReturn;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useKYCDefaultContext: () => UseKYCDefaultReturn;

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

@@ -0,0 +1,2 @@
+import { createContext } from '../../../client/utils/createContext.js';
+export const [KYCDefaultContext, useKYCDefaultContext] = createContext();

package/dist/components/KYC/KYCDefault/PersonalInformation.d.ts

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

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

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useApproveMemberVerification } from '../../../client/hooks/useApproveMemberVerification.js';
+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 { CheckIcon } from '../../../icons/CheckIcon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Checkbox } from '../../../ui/Checkbox/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 { useKYCDefaultContext } from './KYCDefaultContext.js';
+const definition = z.object({
+    address: z.string().trim().min(1, 'Current address is required'),
+    permanentAddress: z.string().trim().min(1, 'Permanent address is required'),
+    sourceOfIncome: z.string().trim().min(1, 'Source of Income is required'),
+    natureOfWork: z.string().trim().min(1, 'Nature of Work is required'),
+    placeOfBirth: z.string().trim().min(1, 'Place of Birth is required'),
+    nationality: z.string().trim().min(1, 'Nationality is required'),
+});
+export function PersonalInformation() {
+    const kyc = useKYCDefaultContext();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+    })));
+    const memberVerificationQuery = useMemberVerificationQuery();
+    const memberVerificationId = memberVerificationQuery.data?.id;
+    const approveMemberVerificationMutation = useApproveMemberVerification();
+    const updateMemberVerificationMutation = useUpdateMemberVerificationMutation({
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+        onSuccess() {
+            const queryClient = getQueryClient();
+            queryClient.setQueryData(getMemberVerificationQueryKey(), (prev) => {
+                if (!prev)
+                    return prev;
+                return {
+                    ...prev,
+                    status: 'PENDING',
+                };
+            });
+            kyc.setDone(true);
+            globalStore.kyc.setOpen(false);
+            toaster.success({
+                title: 'Success',
+                description: 'Personal information has been set successfully.',
+            });
+        },
+    });
+    const createMemberVerificationMutation = useCreateMemberVerificationMutation({
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+        onSuccess() {
+            kyc.setDone(true);
+            globalStore.kyc.setOpen(false);
+            toaster.success({
+                title: 'Success',
+                description: 'Personal information has been set successfully.',
+            });
+        },
+    });
+    const form = useForm({
+        resolver: zodResolver(definition),
+        defaultValues: {
+            address: '',
+            nationality: '',
+            natureOfWork: '',
+            placeOfBirth: '',
+            permanentAddress: '',
+        },
+        mode: 'all',
+    });
+    async function onSubmit(values) {
+        if (!memberVerificationId) {
+            createMemberVerificationMutation.mutate({
+                ...values,
+            });
+        }
+        else {
+            await updateMemberVerificationMutation.mutateAsync({
+                id: memberVerificationId,
+                data: {
+                    ...values,
+                },
+            });
+            //approve status of member to be pending
+            await approveMemberVerificationMutation.mutateAsync({
+                id: memberVerificationId,
+            });
+        }
+    }
+    const address = form.watch('address');
+    const permanentAddress = form.watch('permanentAddress');
+    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center font-semibold text-lg", children: "Personal Information" }), _jsx(Dialog.Description, { className: "mt-xs text-center text-sm text-text-secondary-700", children: "Provide your basic details and work info." }), _jsxs("form", { className: "mt-7", onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.permanentAddress, children: [_jsx(Field.Label, { children: "Permanent address" }), _jsx(Field.Input, { placeholder: "Enter your permanent address", ...form.register('permanentAddress') }), _jsx(Field.ErrorText, { children: form.formState.errors.permanentAddress?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.address, children: [_jsx(Field.Label, { children: "Current address" }), _jsx(Field.Input, { placeholder: "Enter your current address", ...form.register('address') }), _jsx(Field.ErrorText, { children: form.formState.errors.address?.message })] }), _jsxs(Checkbox.Root, { className: "mt-md", checked: address !== '' &&
+                            permanentAddress !== '' &&
+                            address === permanentAddress, onCheckedChange: (details) => {
+                            if (details.checked === true) {
+                                form.setValue('address', form.getValues('permanentAddress'), {
+                                    shouldDirty: true,
+                                    shouldTouch: true,
+                                    shouldValidate: true,
+                                });
+                            }
+                        }, disabled: !permanentAddress, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { children: "Use permanent address as current address" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.sourceOfIncome, children: [_jsx(Field.Label, { children: "Source of income" }), _jsx(Field.Input, { placeholder: "Enter your source of income", ...form.register('sourceOfIncome') }), _jsx(Field.ErrorText, { children: form.formState.errors.sourceOfIncome?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.natureOfWork, children: [_jsx(Field.Label, { children: "Work Description" }), _jsx(Field.Input, { placeholder: "Enter your work description", ...form.register('natureOfWork') }), _jsx(Field.ErrorText, { children: form.formState.errors.natureOfWork?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.placeOfBirth, children: [_jsx(Field.Label, { children: "Place of birth" }), _jsx(Field.Input, { placeholder: "Enter your place of birth", ...form.register('placeOfBirth') }), _jsx(Field.ErrorText, { children: form.formState.errors.placeOfBirth?.message })] }), _jsxs(Field.Root, { className: "mt-2xl", invalid: !!form.formState.errors.nationality, children: [_jsx(Field.Label, { children: "Nationality" }), _jsx(Field.Input, { placeholder: "Enter your nationality", ...form.register('nationality') }), _jsx(Field.ErrorText, { children: form.formState.errors.nationality?.message })] }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: updateMemberVerificationMutation.isPending ||
+                            createMemberVerificationMutation.isPending, children: "Continue" }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "mt-lg", onClick: () => {
+                            globalStore.kyc.setOpen(false);
+                        }, disabled: updateMemberVerificationMutation.isPending ||
+                            createMemberVerificationMutation.isPending, children: "Skip for now" })] })] }));
+}

package/dist/components/KYC/KYCDefault/index.d.ts

@@ -0,0 +1 @@
+export * from './KYCDefault';

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

@@ -0,0 +1 @@
+export * from './KYCDefault.js';

package/dist/components/KYC/KYCDefault/useKYCDefault.d.ts

@@ -0,0 +1,25 @@
+type EventDetail = {
+    type: 'SELFIE_CAPTURED';
+    data: string;
+} | {
+    type: 'ID_DOCUMENT_CAPTURED';
+    data: string;
+};
+type UnsubscribeFn = () => void;
+type Subscriber = (detail: EventDetail) => UnsubscribeFn;
+export type CaptureSubject = 'SELFIE' | 'ID_DOCUMENT';
+export interface UseKYCDefaultReturn {
+    step: number;
+    setStep: (step: number) => void;
+    done: boolean;
+    setDone: (done: boolean) => void;
+    subscribe: (subscriber: Subscriber) => UnsubscribeFn;
+    triggerEvent: (detail: EventDetail) => void;
+    idFrontImageId: string | null;
+    setFrontImageId: (id: string | null) => void;
+    selfieImageId: string | null;
+    setSelfieImageId: (id: string | null) => void;
+    reset: () => void;
+}
+export declare function useKYCDefault(): UseKYCDefaultReturn;
+export {};

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

@@ -0,0 +1,38 @@
+import { useRef, useState } from 'react';
+export function useKYCDefault() {
+    const [step, setStep] = useState(2);
+    const [done, setDone] = useState(false);
+    const [idFrontImageId, setFrontImageId] = useState(null);
+    const [selfieImageId, setSelfieImageId] = useState(null);
+    const subscribers = useRef([]);
+    const subscribe = (subscriber) => {
+        subscribers.current.push(subscriber);
+        return () => {
+            subscribers.current = subscribers.current.filter((item) => item !== subscriber);
+        };
+    };
+    const triggerEvent = (detail) => {
+        subscribers.current.forEach((subscriber) => {
+            subscriber(detail);
+        });
+    };
+    const reset = () => {
+        setStep(1);
+        setDone(false);
+        setFrontImageId(null);
+        setSelfieImageId(null);
+    };
+    return {
+        step,
+        setStep,
+        done,
+        setDone,
+        idFrontImageId,
+        setFrontImageId,
+        selfieImageId,
+        setSelfieImageId,
+        subscribe,
+        triggerEvent,
+        reset,
+    };
+}

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

@@ -1,2 +1,3 @@
 import type { KYCReminderProps } from './KYCReminder.lazy';
 export declare function KYCReminder(props: KYCReminderProps): import("react/jsx-runtime").JSX.Element | undefined;
+export type { KYCReminderProps };

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

@@ -21,9 +21,9 @@ export function KYCReminder(props) {
     const isUploadCompleted = verification &&
         verification.idFrontImage !== null &&
         verification.selfieImage !== null;
-    const isVerified = Boolean(verification?.status === 'VERIFIED') ||
-        Boolean(verification?.status === 'PENDING') ||
-        Boolean(verification?.status === 'APPROVED');
+    const isVerified = verification?.status === 'VERIFIED' ||
+        verification?.status === 'PENDING' ||
+        verification?.status === 'APPROVED';
     const hasMissingData = !isBasicInfoCompleted || !isUploadCompleted || !isVerified;
     return (_jsx(Dialog.Root, { open: globalStore.kycReminder.open &&
             !sessionLoading &&

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

@@ -0,0 +1,5 @@
+import { type KYCReminderProps } from './KYCReminder';
+export interface KYCSumsubProps extends KYCReminderProps {
+    provider: 'sumsub';
+}
+export declare function KYCSumsub(props: KYCSumsubProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/KYC/KYCSumsub.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Sumsub from '@sumsub/websdk-react';
+import { useEffect, useState } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { useGenerateSumsubVerificationTokenMutation } from '../../client/hooks/useGenerateSumsubVerificationTokenMutation.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { Spinner02Icon } from '../../icons/Spinner02Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { KYCReminder } from './KYCReminder.js';
+export function KYCSumsub(props) {
+    const [open, setOpen] = useGlobalStore(useShallow((ctx) => [ctx.kyc.open, ctx.kyc.setOpen]));
+    const { mutate, mutateAsync, reset, isPending, isIdle } = useGenerateSumsubVerificationTokenMutation();
+    const [token, setToken] = useState('');
+    useEffect(() => {
+        if (open === true && isIdle && !token) {
+            mutate(undefined, {
+                onSuccess(token) {
+                    setToken(token);
+                },
+            });
+        }
+    }, [
+        /**/
+        open,
+        token,
+        isIdle,
+        mutate,
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsx(Dialog.Root, { open: open, onOpenChange: (details) => {
+                    setOpen(details.open);
+                }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
+                    reset();
+                    setToken('');
+                }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center justify-center lg:block", children: _jsxs(Dialog.Content, { className: "mx-auto flex h-full w-[calc(100%-2rem)] flex-col items-center justify-center overflow-y-auto rounded-md bg-transparent p-0 lg:mt-3 lg:block lg:h-auto lg:w-[600px]", children: [_jsx(Dialog.Context, { children: (api) => (_jsx("div", { className: "mb-3 flex w-full justify-end", children: _jsxs("button", { type: "button", className: "rounded-full bg-white/10 p-1 text-white backdrop-blur-md", onClick: () => {
+                                                    api.setOpen(false);
+                                                }, children: [_jsx(XIcon, { className: "!size-5" }), _jsx("span", { className: "sr-only", children: "Close" })] }) })) }), isPending ? (_jsx("div", { className: "w-full rounded-md bg-[#20252c] px-4 py-12", children: _jsx(Spinner02Icon, { className: "mx-auto size-8" }) })) : (_jsx("div", { className: "max-h-[calc(96dvh-2rem)] w-full overflow-y-auto lg:h-auto lg:max-h-[unset]", children: _jsx(Sumsub, { accessToken: token, expirationHandler: async () => {
+                                                const token = await mutateAsync();
+                                                return token;
+                                            }, config: {
+                                                lang: 'en',
+                                                theme: 'dark',
+                                            }, options: {
+                                                debug: process.env.NODE_ENV === 'development',
+                                                addViewportTag: false,
+                                                adaptIframeHeight: true,
+                                                enableScrollIntoView: true,
+                                            }, onMessage: (type, payload) => {
+                                                console.log({ type, payload });
+                                            }, onError: (error) => {
+                                                console.warn(error);
+                                            }, className: "block max-h-full w-full overflow-y-auto rounded-md", force: true }) }))] }) })] }) }), _jsx(KYCReminder, { ...props })] }));
+}

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

@@ -0,0 +1,7 @@
+interface Props {
+    onRetry: () => void;
+    title: string;
+    description: string;
+}
+declare function NoCameraError({ onRetry, title, description }: Props): import("react/jsx-runtime").JSX.Element;
+export default NoCameraError;

package/dist/components/KYC/NoCameraError.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../ui/Button/index.js';
+function NoCameraError({ onRetry, title, description }) {
+    return (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 p-4", children: [_jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-red-500 mb-2", children: title }), _jsx("p", { className: "mb-2 text-sm", children: description })] }), _jsx(Button, { className: "mx-auto px-xl lg:w-fit", onClick: onRetry, size: "sm", children: "Try Again" })] }));
+}
+export default NoCameraError;

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

@@ -0,0 +1,7 @@
+interface Props {
+    isFaceCentered: boolean;
+    width: number;
+    height: number;
+}
+declare function PersonOverlayDesktop({ isFaceCentered, height, width }: Props): import("react/jsx-runtime").JSX.Element;
+export default PersonOverlayDesktop;

package/dist/components/KYC/PersonOverlayDesktop.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function PersonOverlayDesktop({ isFaceCentered, height, width }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pointer-events-none absolute inset-0 hidden md:block", children: _jsxs("svg", { width: `${width}px`, height: `${height}px`, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: "max-h-full w-full", children: [_jsxs("defs", { children: [_jsx("path", { id: "head-shoulder-path", d: "M 389.605 124.529 C 390.221 129.441 390.638 134.433 390.846 139.492 L 390.932 151.978 C 390.841 155.321 390.658 158.636 390.388 161.919 C 388.294 162.987 388.18 164.214 389 168 L 390.277 171.709 L 395 181 C 395.61 182.222 396.985 183.052 398.459 183.693 L 399.097 183.956 C 401.81 185.016 404.425 186.275 406.923 187.715 L 420.473 198.503 C 424.405 202.729 427.713 207.542 430.252 212.795 L 435.357 229.337 C 435.78 232.162 436 235.055 436 238 V 244.833 V 258.5 H 436 V 272.167 V 285.833 H 436 V 299.5 V 313.167 H 436 V 320 C 436 321.36 435.73 322.651 435.242 323.827 L 429.827 329.242 C 428.651 329.73 427.36 330 426 330 H 418.275 H 402.825 V 330 H 387.375 H 371.925 V 330 H 356.475 H 341.025 V 330 H 325.575 H 310.125 V 330 H 294.675 H 279.225 V 330 H 263.775 H 248.325 V 330 H 232.875 H 217.425 V 330 H 201.975 H 186.525 V 330 H 171.075 H 155.625 V 330 H 140.175 H 124.725 V 330 H 117 C 115.641 330 114.349 329.73 113.173 329.242 L 107.758 323.827 C 107.27 322.651 107 321.36 107 320 V 313.167 V 299.5 H 107 V 285.833 V 272.167 H 107 V 258.5 V 244.833 H 107 V 238 C 107 235.088 107.214 232.227 107.628 229.433 L 112.622 213.056 C 115.107 207.848 118.347 203.067 122.2 198.856 L 135.494 188.055 C 137.641 186.783 139.877 185.647 142.19 184.656 L 143.186 184.241 C 144.876 183.555 146.441 182.623 147.83 181.498 L 153.722 172.52 C 154.177 170.759 154.329 168.902 154.116 167.011 L 153.981 165.769 C 153.85 164.525 153.732 163.276 153.627 162.022 C 151.354 158.847 151.164 155.472 151.069 152.068 L 151.153 139.492 C 151.36 134.462 151.773 129.498 152.383 124.613 L 152.394 124.529 L 154.894 109.723 C 155.95 104.771 157.212 99.9212 158.668 95.1875 L 163.727 81.0498 C 165.649 76.3661 167.77 71.8259 170.076 67.4453 L 177.715 54.5254 C 180.508 50.3027 183.489 46.274 186.641 42.457 L 196.832 31.4316 C 200.471 27.9227 204.28 24.6674 208.24 21.6846 L 220.789 13.4502 C 225.168 10.9758 229.688 8.8149 234.332 6.9912 L 248.66 2.544 C 253.508 1.4258 258.458 0.6639 263.493 0.2832 L 278.506 0.2832 C 283.541 0.6638 288.491 1.4259 293.339 2.544 L 307.667 6.9912 C 312.311 8.8149 316.831 10.9758 321.21 13.4502 L 333.759 21.6846 C 337.719 24.6673 341.528 27.9227 345.167 31.4316 L 355.359 42.458 C 358.511 46.2749 361.491 50.3038 364.284 54.5264 L 371.923 67.4453 C 374.229 71.826 376.35 76.3661 378.272 81.0498 L 383.331 95.1875 C 384.787 99.9212 386.049 104.771 387.105 109.723 L 389.605 124.529 Z" }), _jsxs("mask", { id: "outline-mask", children: [_jsx("rect", { width: "100%", height: "100%", fill: "white" }), _jsx("use", { href: "#head-shoulder-path", fill: "black" })] })] }), _jsx("rect", { width: "100%", height: "100%", fill: !isFaceCentered
+                                ? 'rgba(156, 156, 156, 0.40)'
+                                : 'rgba(34, 139, 87, 0.75)', mask: "url(#outline-mask)" }), _jsx("use", { href: "#head-shoulder-path", fill: "none", stroke: !isFaceCentered ? '#B54708' : '#34D399', strokeWidth: "3", strokeDasharray: "10 5" })] }) }), _jsx("div", { className: "pointer-events-none absolute inset-0 block md:hidden", children: _jsxs("svg", { className: "block md:hidden", width: "100%", height: "100%", viewBox: "0 0 400 400", preserveAspectRatio: "xMidYMid slice", children: [_jsxs("defs", { children: [_jsx("path", { id: "fill-path", d: "M 300.85 220.1 C 301.15 223.9 302.705 227.284 305.171 230.096 V 230.097 L 311.15 234.9 L 316.351 238.504 C 320.778 242.037 324.741 246.126 328.135 250.665 L 336.459 265.409 C 338.554 270.577 340.015 276.069 340.746 281.79 V 320.036 V 359.74 V 369.667 L 340.28 374.731 C 338.938 377.967 336.351 380.555 333.115 381.896 H 300.872 H 264.633 H 228.396 H 192.158 H 155.921 H 119.682 H 83.4439 H 74.3844 L 69.319 381.896 C 66.0834 380.554 63.4953 377.967 62.1539 374.731 V 339.888 V 320.036 V 300.184 L 62.15 281.9 C 62.459 275.847 63.967 270.273 66.127 265.038 L 74.702 250.13 C 78.005 245.806 81.828 241.899 86.08 238.506 L 86.819 237.925 L 98.284 229.572 L 104.15 223.9 C 105.146 217.607 104.959 215.459 104.343 213.349 L 102.15 210.9 L 98.15 202.9 C 97.985 196.059 96.943 188.701 96.423 181.159 L 96.31 160.744 C 96.641 154.989 97.273 149.337 98.193 143.813 L 98.454 142.294 L 102.789 124.231 C 104.631 118.212 106.825 112.406 109.34 106.849 L 118.126 90.483 C 121.479 85.154 125.161 80.154 129.135 75.528 L 142.322 62.463 C 147.129 58.431 152.22 54.874 157.55 51.845 L 174.504 44.306 C 180.364 42.381 186.424 41.058 192.638 40.394 L 211.201 40.394 C 217.414 41.057 223.474 42.381 229.334 44.306 L 246.288 51.845 C 251.619 54.874 256.709 58.431 261.516 62.463 L 274.703 75.528 C 278.677 80.154 282.359 85.154 285.712 90.483 L 294.499 106.849 C 297.014 112.406 299.208 118.212 301.049 124.231 L 305.385 142.294 V 142.293 C 306.447 148.299 307.168 154.46 307.529 160.744 L 307.403 181.33 C 306.867 188.989 305.792 196.459 304.224 203.681 C 301.374 206.417 300.58 209.572 300.15 212.9 L 300.15 214.9 L 300.85 220.1 Z" }), _jsx("path", { id: "border-path", d: "M 300.85 220.1 C 301.15 223.9 302.705 227.284 305.171 230.096 V 230.097 L 311.15 234.9 L 316.351 238.504 C 320.778 242.037 324.741 246.126 328.135 250.665 L 336.459 265.409 C 338.554 270.577 340.015 276.069 340.746 281.79 V 320.036 V 359.74 V 369.667 L 340.28 374.731 C 338.938 377.967 336.351 380.555 333.115 381.896 H 300.872 H 264.633 H 228.396 H 192.158 H 155.921 H 119.682 H 83.4439 H 74.3844 L 69.319 381.896 C 66.0834 380.554 63.4953 377.967 62.1539 374.731 V 339.888 V 320.036 V 300.184 L 62.15 281.9 C 62.459 275.847 63.967 270.273 66.127 265.038 L 74.702 250.13 C 78.005 245.806 81.828 241.899 86.08 238.506 L 86.819 237.925 L 98.284 229.572 L 104.15 223.9 C 105.146 217.607 104.959 215.459 104.343 213.349 L 102.15 210.9 L 98.15 202.9 C 97.985 196.059 96.943 188.701 96.423 181.159 L 96.31 160.744 C 96.641 154.989 97.273 149.337 98.193 143.813 L 98.454 142.294 L 102.789 124.231 C 104.631 118.212 106.825 112.406 109.34 106.849 L 118.126 90.483 C 121.479 85.154 125.161 80.154 129.135 75.528 L 142.322 62.463 C 147.129 58.431 152.22 54.874 157.55 51.845 L 174.504 44.306 C 180.364 42.381 186.424 41.058 192.638 40.394 L 211.201 40.394 C 217.414 41.057 223.474 42.381 229.334 44.306 L 246.288 51.845 C 251.619 54.874 256.709 58.431 261.516 62.463 L 274.703 75.528 C 278.677 80.154 282.359 85.154 285.712 90.483 L 294.499 106.849 C 297.014 112.406 299.208 118.212 301.049 124.231 L 305.385 142.294 V 142.293 C 306.447 148.299 307.168 154.46 307.529 160.744 L 307.403 181.33 C 306.867 188.989 305.792 196.459 304.224 203.681 C 301.374 206.417 300.58 209.572 300.15 212.9 L 300.15 214.9 L 300.85 220.1 Z" }), _jsx("clipPath", { id: "face-cutout", children: _jsx("use", { href: "#fill-path" }) }), _jsxs("mask", { id: "face-mask", children: [_jsx("rect", { x: "0", y: "0", width: "400", height: "400", fill: "white" }), _jsx("use", { href: "#fill-path", fill: "black" })] })] }), _jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: !isFaceCentered
+                                ? 'rgba(156, 156, 156, 0.40)'
+                                : 'rgba(34, 139, 87, 0.75)', mask: "url(#face-mask)" }), _jsx("use", { href: "#border-path", fill: "none", stroke: !isFaceCentered ? '#B54708' : '#34D399', strokeWidth: "3", strokeDasharray: "12 8", strokeLinecap: "round", id: "border-element" })] }) })] }));
+}
+export default PersonOverlayDesktop;

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

@@ -1,3 +1,2 @@
 export * from './KYC';
-export * from './KYCReminder';
 export * from './KYCTrigger';

package/dist/components/KYC/index.js

@@ -1,3 +1,2 @@
 export * from './KYC.js';
-export * from './KYCReminder.js';
 export * from './KYCTrigger.js';

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

@@ -0,0 +1,9 @@
+export declare function loadFaceApiModels(): Promise<void>;
+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;
+export declare function showPermissionInstructions(): void;
+export declare const cameraErrorDescriptions: Record<string, string>;

package/dist/components/KYC/utils.js

@@ -0,0 +1,79 @@
+import * as faceapi from 'face-api.js';
+import Resizer from 'react-image-file-resizer';
+export async function loadFaceApiModels() {
+    // const url = `${STATIC_ENDPOINT}/models`;
+    const url = '/models';
+    await Promise.all([
+        faceapi.nets.tinyFaceDetector.loadFromUri(url),
+        faceapi.nets.faceLandmark68Net.loadFromUri(url),
+        faceapi.nets.faceRecognitionNet.loadFromUri(url),
+    ]);
+}
+export function dataURLtoBlob(dataURL) {
+    const parts = dataURL.split(';base64,');
+    const contentType = parts[0].split(':')[1];
+    const raw = window.atob(parts[1]);
+    const rawLength = raw.length;
+    const uInt8Array = new Uint8Array(rawLength);
+    for (let i = 0; i < rawLength; ++i) {
+        uInt8Array[i] = raw.charCodeAt(i);
+    }
+    return new Blob([uInt8Array], { type: contentType });
+}
+export const resizeFile = (file) => new Promise((resolve) => {
+    Resizer.imageFileResizer(file, 300, 300, 'jpeg', 100, 0, (uri) => {
+        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';
+}
+export function showPermissionInstructions() {
+    const instructions = `
+      Camera access is blocked. To enable camera access:
+
+      Chrome/Edge:
+      1. Click the camera icon in the address bar
+      2. Select "Always allow" and click "Done"
+      3. Or go to Settings > Privacy and security > Site settings > Camera
+
+      Firefox:
+      1. Click the shield icon in the address bar
+      2. Click on "Camera blocked"
+      3. Select "Allow" and refresh the page
+
+      Safari:
+      1. Go to Safari > Settings > Websites > Camera
+      2. Find this website and change to "Allow"
+
+      After changing permissions, please refresh the page and try again.
+        `;
+    alert(instructions);
+}
+export const cameraErrorDescriptions = {
+    NotAllowedError: 'We were unable to detect a camera on your device. Please ensure it is properly connected and accessible to this application.',
+    NotReadableError: 'We were unable to access your camera. Please check if another application is using it or try reconnecting your device.',
+    NotFoundError: 'No camera was found. Please connect a camera and try again.',
+    NoIdDetectedError: 'No ID document was detected in the frame. Please ensure your ID is clearly visible and try again.',
+};

package/dist/components/Quests/JourneyQuest.js

@@ -58,7 +58,7 @@ export function JourneyQuest() {
     const handleViewDetails = useCallback(() => {
         disclosure.setOpen(true);
     }, [disclosure]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-full w-full flex-col space-y-6 rounded-2xl border border-border-primary bg-bg-tertiary px-4 pt-5 pb-6", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("div", { className: "flex max-h-7.5 items-start justify-between", children: _jsx(RemainingTime, {}) }), _jsx("p", { className: "font-semibold text-xl", children: quest?.name || 'Journey Quest' }), _jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, className: "h-2 rounded-full bg-bg-primary", value: progressValue, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) }), _jsxs("p", { className: "text-text-quarterary-brand text-xs", children: [currentMilestone, "/", totalMilestones] })] }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: milestones.map((milestone) => (_jsx(QuestMilestone, { label: milestone.label, bonus: milestone.bonus, isCompleted: milestone.isCompleted }, milestone.key))) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: handleViewDetails, "aria-label": "View Details", disabled: false, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: "View Details" }) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen, quest: quest, milestones: milestones })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-full w-full flex-col space-y-6 rounded-2xl border border-border-primary bg-bg-tertiary px-4 pt-5 pb-6", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("div", { className: "flex max-h-7.5 items-start justify-between", children: _jsx(RemainingTime, { endOfDay: true }) }), _jsx("p", { className: "font-semibold text-xl", children: quest?.name || 'Journey Quest' }), _jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, className: "h-2 rounded-full bg-bg-primary", value: progressValue, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) }), _jsxs("p", { className: "text-text-quarterary-brand text-xs", children: [currentMilestone, "/", totalMilestones] })] }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: milestones.map((milestone) => (_jsx(QuestMilestone, { label: milestone.label, bonus: milestone.bonus, isCompleted: milestone.isCompleted }, milestone.key))) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: handleViewDetails, "aria-label": "View Details", disabled: false, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: "View Details" }) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen, quest: quest, milestones: milestones })] }));
 }
 function Rules(props) {
     const [open, setOpen] = useControllableState({

package/dist/components/Quests/RemainingTime.d.ts

@@ -1 +1,5 @@
-export declare function RemainingTime(): import("react/jsx-runtime").JSX.Element;
+interface RemainingTimeProps {
+    endOfDay?: boolean;
+}
+export declare function RemainingTime({ endOfDay: useEndOfDay }: RemainingTimeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Quests/RemainingTime.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { endOfDay } from 'date-fns';
 import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
 import { ClockStopWatchIcon } from '../../icons/ClockStopWatchIcon.js';
 import { Badge } from '../../ui/Badge/index.js';
 import { useQuestContext } from './QuestsContext.js';
-export function RemainingTime() {
+export function RemainingTime({ endOfDay: useEndOfDay = false }) {
     const quest = useQuestContext();
-    const remainingTime = useRemainingTime(quest.endDateTime);
+    const targetDateTime = useEndOfDay
+        ? endOfDay(new Date(quest.endDateTime)).toISOString()
+        : quest.endDateTime;
+    const remainingTime = useRemainingTime(targetDateTime);
     if (quest.status === 'COMPLETED') {
         return (_jsx(Badge.Root, { size: "lg", colorScheme: "success", round: false, children: _jsx(Badge.Label, { children: "Completed" }) }));
     }

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

@@ -0,0 +1,8 @@
+type Options = {
+    accountName?: string;
+    siteName?: string;
+    signInOptions?: 'MOBILE_NUMBER' | 'NAME_AND_PASSWORD';
+};
+export type ErrorCode = 'MEMBER_ACCOUNT_BLACKLISTED' | 'MEMBER_ACCOUNT_SUSPENDED' | 'INVALID_RECAPTCHA_RESPONSE' | 'MEMBER_NOT_FOUND' | 'RATE_LIMIT_REACH' | 'NOT_READY_TO_SEND_VERIFICATION_ERROR' | 'Forbidden';
+export declare function getFriendlyErrorMessage(code: ErrorCode, options?: Options): string;
+export {};

package/dist/components/SignIn/utils.js

@@ -0,0 +1,26 @@
+export function getFriendlyErrorMessage(code, options) {
+    const accountName = options?.accountName ?? '';
+    const siteName = options?.siteName ?? '';
+    const signInOptions = options?.signInOptions ?? 'NAME_AND_PASSWORD';
+    switch (code) {
+        case 'MEMBER_ACCOUNT_BLACKLISTED':
+            return `Your account ${accountName} has been blacklisted due to a serious violation of our policies. For more information or to appeal, please contact the ${siteName} Chat Support team.`;
+        case 'MEMBER_ACCOUNT_SUSPENDED':
+            return `Your account ${accountName} has been temporarily suspended. Please reach out to the ${siteName} Chat Support team to learn more and get help with resolving the issue.`;
+        case 'INVALID_RECAPTCHA_RESPONSE':
+            return 'Invalid reCAPTCHA response';
+        case 'MEMBER_NOT_FOUND':
+            return 'Account not found. Please check your username and try again.';
+        case 'RATE_LIMIT_REACH':
+            return 'Rate limit exceeded';
+        case 'NOT_READY_TO_SEND_VERIFICATION_ERROR':
+            return 'Your account is not ready to send verification requests. Please try again later.';
+        case 'Forbidden':
+            if (signInOptions === 'MOBILE_NUMBER') {
+                return 'Invalid verification code. Please check the code and try again.';
+            }
+            return 'Invalid username or password, please try again.';
+        default:
+            return 'Something went wrong. Please try again later.';
+    }
+}

package/dist/components/SignUp/SignUpDefault/SignUp.lazy.d.ts

@@ -0,0 +1,17 @@
+import { type ImageProps } from 'next/image';
+import { type ReactNode } from 'react';
+import type { Branch } from '../../../types';
+export interface SignUpProps {
+    logo: ImageProps['src'];
+    children?: ReactNode;
+    /** @default "/terms-and-conditions" */
+    termsAndConditionsUrl?: string;
+    termsOfUseContent?: ReactNode;
+    responsibleGamingContent?: ReactNode;
+    responsibleGamingLogo?: ImageProps['src'];
+    siteName?: string;
+    className?: string;
+    branches?: Branch[];
+    layout: 'default';
+}
+export declare function SignUp(props: SignUpProps): import("react/jsx-runtime").JSX.Element;