@opexa/portal-components 0.0.141 → 0.0.143

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

@@ -0,0 +1,4 @@
+import type { SetOptional } from 'type-fest';
+import { type ApproveMemberVerificationInput } from '../../services/account';
+import type { Mutation } from '../../types';
+export declare const useApproveMemberVerification: Mutation<string, SetOptional<ApproveMemberVerificationInput, 'id'>>;

package/dist/client/hooks/useApproveMemberVerification.js

@@ -0,0 +1,31 @@
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { approveMemberVerification__next, } from '../../services/account.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
+import { getApproveMemberVerificationQueryKey } from '../../utils/mutationKeys.js';
+import { getAccountQueryKey } from '../../utils/queryKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useApproveMemberVerification = (config) => {
+    const mutation = useMutation({
+        ...config,
+        mutationKey: getApproveMemberVerificationQueryKey(),
+        mutationFn: async (data) => {
+            const session = await getSession();
+            const queryClient = getQueryClient();
+            invariant(session.status === 'authenticated');
+            await approveMemberVerification__next({
+                id: data.id || '',
+            }, { headers: { Authorization: `Bearer ${session.token}` } });
+            queryClient.setQueryData(getAccountQueryKey(), (prev) => {
+                if (!prev)
+                    return prev;
+                return {
+                    ...prev,
+                    verificationStatus: 'PENDING',
+                };
+            });
+            return data.id || '';
+        },
+    });
+    return mutation;
+};

package/dist/client/hooks/useCreateMemberVerificationMutation.js

@@ -25,9 +25,9 @@ export const useCreateMemberVerificationMutation = (config) => {
                 return {
                     id,
                     ...data,
-                    status: 'PENDING',
-                    selfieImage: { id: data.selfieImage, status: 'UPLOADING' },
-                    idFrontImage: { id: data.idFrontImage, status: 'UPLOADING' },
+                    status: 'UNVERIFIED',
+                    selfieImage: { id: data.selfieImage ?? '', status: 'UPLOADING' },
+                    idFrontImage: { id: data.idFrontImage ?? '', status: 'UPLOADING' },
                 };
             });
             queryClient.setQueryData(getAccountQueryKey(), (prev) => {
@@ -35,7 +35,7 @@ export const useCreateMemberVerificationMutation = (config) => {
                     return prev;
                 return {
                     ...prev,
-                    verificationStatus: 'PENDING',
+                    verificationStatus: 'UNVERIFIED',
                 };
             });
             return id;

package/dist/client/hooks/useUpdateMemberVerificationMutation.js

@@ -30,6 +30,7 @@ export const useUpdateMemberVerificationMutation = (config) => {
                     selfieImage: data.selfieImage
                         ? { id: data.selfieImage, status: 'UPLOADING' }
                         : prev.selfieImage,
+                    status: 'UNVERIFIED',
                 };
             });
         },

package/dist/components/Bonuses/Bonuses.client.js

@@ -20,6 +20,7 @@ import piggyBank from '../../images/piggy-bank.png';
 import ribbonEnvelope from '../../images/ribbon-envelope.png';
 import { Badge } from '../../ui/Badge/index.js';
 import { Button } from '../../ui/Button/index.js';
+import { Popover } from '../../ui/Popover/index.js';
 import { Progress } from '../../ui/Progress/index.js';
 import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
 import { capitalize } from '../../utils/capitalize.js';
@@ -91,11 +92,13 @@ function CashbackBonus(props) {
                             currency: localeInfo.currency.code,
                         }) }), _jsx("div", { className: "text-text-secondary-700 mt-2 line-clamp-1 text-center text-sm", dangerouslySetInnerHTML: {
                             __html: cashback.description,
-                        } }), _jsx("div", { className: "grow" }), _jsx(Button, { size: "sm", className: "mt-6", disabled: claimCashbackBonusMutation.isPending || disabled, onClick: () => {
+                        } }), _jsx("div", { className: "grow" }), disabled ? (_jsxs(Popover.Root, { lazyMount: true, unmountOnExit: true, positioning: {
+                            placement: 'top',
+                        }, children: [_jsx(Button, { size: "sm", className: "mt-6", "aria-disabled": true, asChild: true, children: _jsx(Popover.Trigger, { children: "Claim" }) }), _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "bg-bg-quaternary rounded-md px-2.5 py-2 text-sm font-medium", children: [_jsx(Popover.Arrow, { className: "arrow-bg-bg-quaternary arrow-size-3", children: _jsx(Popover.ArrowTip, {}) }), "You need", ' ', formatNumber(minimumCashback - balance, {
+                                            currency: localeInfo.currency.code,
+                                        }), ' ', "to claim this cashback."] }) })] })) : (_jsx(Button, { size: "sm", className: "mt-6", disabled: claimCashbackBonusMutation.isPending || disabled, onClick: () => {
                             claimCashbackBonusMutation.mutate(bonus.id);
-                        }, title: disabled
-                            ? `You need ${formatNumber(minimumCashback - balance)} to claim this cashback.`
-                            : undefined, children: "Claim" })] })] }));
+                        }, children: "Claim" }))] })] }));
 }
 function SpotBonus() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
-        view: "vca" | "form";
+        view: "form" | "vca";
         status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
@@ -13,7 +13,7 @@ export declare const OnlineBankDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useOnlineBankDepositContext: () => {
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        view: "qrCode" | "form";
+        view: "form" | "qrCode";
         status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
@@ -13,7 +13,7 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/GCashFailed/GCashFailed.d.ts

@@ -0,0 +1,8 @@
+import type { ImageProps } from 'next/image';
+import type { CSSProperties } from 'react';
+export interface GCashFailedProps {
+    logo: ImageProps['src'];
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function GCashFailed(props: GCashFailedProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GCashFailed/GCashFailed.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { twMerge } from 'tailwind-merge';
+import { useCooldown } from '../../client/hooks/useCooldown.js';
+import { XCircleIcon } from '../../icons/XCircleIcon.js';
+export function GCashFailed(props) {
+    const router = useRouter();
+    const cooldown = useCooldown({
+        autoplay: true,
+        onCooldown() {
+            router.replace('/');
+        },
+    });
+    return (_jsx("div", { style: props.style, className: twMerge('flex min-h-dvh items-center p-4 py-8', props.className), children: _jsxs("div", { className: "bg-bg-primary-alt mx-auto w-full max-w-[26.25rem] rounded-xl p-10", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto block h-7.5 w-auto" }), _jsxs("div", { className: "mt-16", children: [_jsx(XCircleIcon, { className: "text-utility-error-500 mx-auto size-[3.75rem]" }), _jsx("h2", { className: "mt-6 text-center text-3xl font-bold", children: "Deposit Error" }), _jsx("p", { className: "text-text-tertiary-600 mt-3 text-center", children: "Sorry, we encountered an error while processing your deposit request. Please try again later." }), _jsxs("div", { className: "text-text-tertiary-600 mt-[4.875rem] text-center text-sm", children: [_jsx("p", { children: "You will be redirected shortly," }), _jsxs("p", { children: ["in about", ' ', _jsx("span", { className: "text-brand-400 text-lg font-bold", children: cooldown.countdown }), ' ', "second/s."] })] })] })] }) }));
+}

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

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

package/dist/components/GCashFailed/index.js

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

package/dist/components/GCashSuccess/GCashSuccess.d.ts

@@ -0,0 +1,9 @@
+import type { ImageProps } from 'next/image';
+import { type CSSProperties } from 'react';
+interface GCashSuccessProps {
+    logo: ImageProps['src'];
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function GCashSuccess(props: GCashSuccessProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/GCashSuccess/GCashSuccess.js

@@ -0,0 +1,88 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useCooldown } from '../../client/hooks/useCooldown.js';
+import { getSession } from '../../client/services/getSession.js';
+import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
+import { getDepositRecords } from '../../services/report.js';
+import { getDeposit, touchGCashDeposit } from '../../services/wallet.js';
+import { Button } from '../../ui/Button/index.js';
+import { createPoll } from '../../utils/createPoll.js';
+export function GCashSuccess(props) {
+    const router = useRouter();
+    const [loading, setLoading] = useState(true);
+    const cooldown = useCooldown({
+        autoplay: true,
+        onCooldown() {
+            router.replace('/');
+        },
+    });
+    const init = useCallback(async () => {
+        try {
+            const session = await getSession();
+            if (session.status !== 'authenticated') {
+                router.replace('/');
+                return;
+            }
+            const depositRecords = await getDepositRecords({
+                first: 1,
+                filter: {
+                    status: {
+                        equal: 'ACCEPTED',
+                    },
+                },
+            }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            const depositRecord = depositRecords.edges.at(0)?.node;
+            if (!depositRecord) {
+                router.replace('/');
+                return;
+            }
+            await touchGCashDeposit(depositRecord.deposit, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            setLoading(false);
+            cooldown.start();
+            const deposit = await createPoll(() => getDeposit(depositRecord.deposit, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            }), {
+                until: (r) => {
+                    if (r?.status === 'APPROVED' ||
+                        r?.status === 'REJECTED' ||
+                        r?.status === 'CONFIRMED') {
+                        return true;
+                    }
+                    else {
+                        return false;
+                    }
+                },
+                interval: 1000,
+                maxAttempt: 10,
+            })();
+            if (deposit?.status === 'APPROVED' ||
+                deposit?.status === 'REJECTED' ||
+                deposit?.status === 'CONFIRMED') {
+                router.replace('/');
+            }
+        }
+        catch {
+            router.replace('/');
+        }
+    }, [cooldown, router]);
+    useEffect(() => {
+        init();
+    }, [init]);
+    return (_jsx("div", { style: props.style, className: twMerge('flex min-h-dvh items-center p-4 py-8', props.className), children: _jsxs("div", { className: "bg-bg-primary-alt mx-auto w-full max-w-[26.25rem] rounded-xl p-10", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto block h-7.5 w-auto" }), _jsx("div", { className: "mt-16", children: loading ? (_jsx(SpinnerIcon, { className: "mx-auto size-8" })) : (_jsxs(_Fragment, { children: [_jsx(CheckCircleIcon, { className: "text-utility-success-500 mx-auto size-[3.75rem]" }), _jsx("h2", { className: "mt-6 text-center text-3xl font-bold", children: "Success" }), _jsx("p", { className: "text-text-tertiary-600 mt-3 text-center", children: "Your deposit request has succeeded." }), _jsxs("div", { className: "text-text-tertiary-600 mt-10 text-center text-sm", children: [_jsx("p", { children: "You will be redirected shortly," }), _jsxs("p", { children: ["in about", ' ', _jsx("span", { className: "text-brand-400 text-lg font-bold", children: cooldown.countdown }), ' ', "second/s."] })] }), _jsx(Button, { variant: "outline", asChild: true, children: _jsx(Link, { href: "/", replace: true, className: "mt-14", children: "Proceed" }) })] })) })] }) }));
+}

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

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

package/dist/components/GCashSuccess/index.js

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

package/dist/components/KYC/BasicInformation.js

@@ -64,6 +64,10 @@ export function BasicInformation() {
         },
         onSuccess() {
             kyc.setStep(2);
+            toaster.success({
+                title: 'Success',
+                description: 'Basic information has been set successfully.',
+            });
         },
     });
     useEffect(() => {

package/dist/components/KYC/IdentityVerification.js

@@ -28,7 +28,6 @@ export function IdentityVerification() {
             toaster.success({
                 title: 'ID Front Image & Selfie Image uploaded successfully',
             });
-            kyc.setStep(3);
         },
         onError: (error) => {
             toaster.error({
@@ -42,7 +41,6 @@ export function IdentityVerification() {
             toaster.success({
                 title: 'ID Front Image & Selfie Image updated successfully',
             });
-            kyc.setStep(3);
         },
         onError: (error) => {
             toaster.error({
@@ -75,6 +73,7 @@ export function IdentityVerification() {
                 placeOfBirth: '',
                 sourceOfIncome: '',
             });
+            kyc.setStep(3);
         }
         else {
             updateMemberVerification({
@@ -84,6 +83,7 @@ export function IdentityVerification() {
                     idFrontImage: values.idFrontImage,
                 },
             });
+            kyc.setStep(3);
         }
     }
     useEffect(() => {
@@ -100,8 +100,6 @@ export function IdentityVerification() {
                                 } }, "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]" }) })] }) })] }));
 }

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

@@ -34,8 +34,8 @@ export function KYC(props) {
         else if (memberStatus === 'REJECTED') {
             kyc.setStep(2);
         }
-        else if (isBasicInfoVerified) {
-            kyc.setStep(isMemberUploaded ? 3 : 2);
+        else if (isBasicInfoVerified && isMemberUploaded) {
+            kyc.setStep(3);
         }
     }, [isBasicInfoVerified, isMemberUploaded, memberStatus, kyc]);
     const globalStore = useGlobalStore(useShallow((ctx) => ({

package/dist/components/KYC/PersonalInformation.js

@@ -1,9 +1,9 @@
 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 { 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';
@@ -29,7 +29,8 @@ export function PersonalInformation() {
         kyc: ctx.kyc,
     })));
     const memberVerificationQuery = useMemberVerificationQuery();
-    const memberVerification = memberVerificationQuery.data;
+    const memberVerificationId = memberVerificationQuery.data?.id;
+    const approveMemberVerificationMutation = useApproveMemberVerification();
     const updateMemberVerificationMutation = useUpdateMemberVerificationMutation({
         onError(error) {
             toaster.error({
@@ -39,6 +40,10 @@ export function PersonalInformation() {
         onSuccess() {
             kyc.setDone(true);
             globalStore.kyc.setOpen(false);
+            toaster.success({
+                title: 'Success',
+                description: 'Personal information has been set successfully.',
+            });
         },
     });
     const createMemberVerificationMutation = useCreateMemberVerificationMutation({
@@ -50,6 +55,10 @@ export function PersonalInformation() {
         onSuccess() {
             kyc.setDone(true);
             globalStore.kyc.setOpen(false);
+            toaster.success({
+                title: 'Success',
+                description: 'Personal information has been set successfully.',
+            });
         },
     });
     const form = useForm({
@@ -63,32 +72,28 @@ export function PersonalInformation() {
         },
         mode: 'all',
     });
-    useEffect(() => {
-        if (memberVerification) {
-            form.reset(memberVerification);
+    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,
+            });
         }
-    }, [form, memberVerification]);
+    }
     const address = form.watch('address');
     const permanentAddress = form.watch('permanentAddress');
-    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Personal Information" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Provide your basic details and work info." }), _jsxs("form", { className: "mt-7", onSubmit: form.handleSubmit((data) => {
-                    if (memberVerification) {
-                        updateMemberVerificationMutation.mutate({
-                            id: memberVerification.id,
-                            data: {
-                                ...data,
-                                selfieImage: '',
-                                idFrontImage: '',
-                            },
-                        });
-                    }
-                    else {
-                        createMemberVerificationMutation.mutate({
-                            ...data,
-                            selfieImage: '',
-                            idFrontImage: '',
-                        });
-                    }
-                }), 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 !== '' &&
+    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Personal Information" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", 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) {
@@ -100,7 +105,6 @@ export function PersonalInformation() {
                             }
                         }, 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: () => {
-                            kyc.setDone(true);
                             globalStore.kyc.setOpen(false);
                         }, disabled: updateMemberVerificationMutation.isPending ||
                             createMemberVerificationMutation.isPending, children: "Skip for now" })] })] }));

package/dist/components/Messages/Message.js

@@ -7,7 +7,7 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
 import { useMessageContext } from './MessageContext.js';
-import { getMessageIcon } from './utils.js';
+import { MessageIcon } from './MessageIcon.js';
 export function Message() {
     const message = useMessageContext();
     const localeInfo = useLocaleInfo();
@@ -16,7 +16,6 @@ export function Message() {
         messages: ctx.messages,
     })));
     const markMessageAsReadMutation = useMarkMessageAsReadMutation();
-    const Icon = getMessageIcon(message.icon);
     const handleViewMessage = async () => {
         globalStore.message.setData(message);
         globalStore.message.setOpen(true);
@@ -24,12 +23,11 @@ export function Message() {
         if (!message.markedAsRead)
             markMessageAsReadMutation.mutate(message.id);
     };
-    const handleActionClick = (e) => {
-        e.stopPropagation();
-        globalStore.messages.setOpen(false);
-        globalStore.messages.setTab('ALL');
-    };
     return (_jsxs("div", { role: "button", tabIndex: 0, className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5", onClick: handleViewMessage, "aria-pressed": "false", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(message.dateTimeCreated), 'M/d/yyyy - h:mma', {
                             in: tz(localeInfo.timezone),
-                        }) }), !message.markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [_jsx(Icon, { className: "text-brand-400" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } }), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: action.url, onClick: handleActionClick, children: action.name }, index))) }))] }));
+                        }) }), !message.markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [_jsx(MessageIcon, { type: message.icon, className: "text-brand-400 size-5" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } }), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: action.url, onClick: (e) => {
+                        e.stopPropagation();
+                        globalStore.messages.setOpen(false);
+                        globalStore.messages.setTab('ALL');
+                    }, children: action.name }, index))) }))] }));
 }

package/dist/components/Messages/MessageIcon.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { Merge } from 'type-fest';
+import type { MessageIcon as TMessageIcon } from '../../types';
+export type MessageIconProps = Merge<ComponentPropsWithRef<'svg'>, {
+    type: TMessageIcon;
+}>;
+export declare function MessageIcon(props: MessageIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/MessageIcon.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertTriangleIcon } from '../../icons/AlertTriangle.js';
+import { AnnotationInfoIcon } from '../../icons/AnnotationInfoIcon.js';
+import { BellRinging04Icon } from '../../icons/BellRinging04Icon.js';
+import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
+import { ConfettiIcon } from '../../icons/ConfettiIcon.js';
+import { Gift01Icon } from '../../icons/Gift01Icon.js';
+const MAP = {
+    ALERT: AlertTriangleIcon,
+    CELEBRATE: ConfettiIcon,
+    CHECK: CheckCircleIcon,
+    MESSAGE: BellRinging04Icon,
+    CONGRATS: Gift01Icon,
+    INFO: AnnotationInfoIcon,
+};
+export function MessageIcon(props) {
+    const { type, ...rest } = props;
+    const Component = MAP[type];
+    return _jsx(Component, { ...rest });
+}

package/dist/components/Messages/MessagePopup.js

@@ -6,13 +6,12 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { getMessageIcon } from './utils.js';
+import { MessageIcon } from './MessageIcon.js';
 export const MessagePopup = () => {
     const globalStore = useGlobalStore(useShallow((ctx) => ({ message: ctx.message })));
-    const Icon = getMessageIcon(globalStore.message.data?.icon ?? 'MESSAGE');
     return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.message.open, onOpenChange: ({ open }) => {
             globalStore.message.setOpen(open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl px-xl pb-0 pt-5 shadow-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "bg-bg-brand-secondary mx-auto w-fit rounded-full p-3", children: _jsx(Icon, { className: "text-text-brand", height: "24", width: "24" }) }), _jsx("p", { className: "text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight", children: globalStore.message.data?.title }), _jsx("div", { className: "text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight", dangerouslySetInnerHTML: {
+        }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl px-xl pb-0 pt-5 shadow-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "bg-bg-brand-secondary mx-auto w-fit rounded-full p-3", children: _jsx(MessageIcon, { type: globalStore.message.data?.icon ?? 'INFO', className: "text-text-brand size-6" }) }), _jsx("p", { className: "text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight", children: globalStore.message.data?.title }), _jsx("div", { className: "text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight", dangerouslySetInnerHTML: {
                                             __html: globalStore.message.data?.content ?? '',
                                         } })] }), globalStore.message.data?.actions.length ? (_jsx("div", { className: "flex flex-col space-y-2 px-4 pb-8 pt-6 text-center", children: globalStore.message.data.actions.map((action, index) => (_jsx(Link, { className: "bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold", href: action.url, onClick: () => {
                                         globalStore.message.setOpen(false);

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

@@ -1,10 +1,12 @@
 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;
     className?: string;
+    branches?: Branch[];
 }
 export declare function SignUp(props: SignUpProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SignUp/SignUpForm.js

@@ -21,7 +21,7 @@ import { useSignInMutation } from '../../client/hooks/useSignInMutation.js';
 import { useSignUpMutation } from '../../client/hooks/useSignUpMutation.js';
 import { useUpdateAccountMutation } from '../../client/hooks/useUpdateAccountMutation.js';
 import { toaster } from '../../client/utils/toaster.js';
-import { BRANCH_CODES } from '../../constants/index.js';
+import { BRANCHES } from '../../constants/index.js';
 import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
 import { CalendarIcon } from '../../icons/CalendarIcon.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
@@ -39,13 +39,16 @@ import { Select } from '../../ui/Select/index.js';
 import { Tooltip } from '../../ui/Tooltip/index.js';
 import { createPoll } from '../../utils/createPoll.js';
 import { useSignUpPropsContext } from './SignUpContext.js';
-const branchCollection = createListCollection({
-    items: BRANCH_CODES,
-    itemToValue: (item) => item.code,
-    itemToString: (item) => `${item.code} - ${item.name}`,
-});
 export function SignUpForm() {
     const signUpProps = useSignUpPropsContext();
+    const branchCollection = createListCollection({
+        items: signUpProps.branches ?? BRANCHES,
+        itemToValue: (item) => item.code,
+        itemToString: (item) => `${item.code} - ${item.name}`,
+    });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+    })));
     const [step, setStep] = useState(1);
     const dialog = useDialogContext();
     const search = useSearchParams();
@@ -114,7 +117,7 @@ export function SignUpForm() {
         defaultValues: {
             mobileNumber: '',
             termsAccepted: false,
-            branchCode: BRANCH_CODES[0].code,
+            branchCode: signUpProps?.branches?.[0]?.code ?? BRANCHES[0].code,
             realName: '',
         },
     });
@@ -160,7 +163,9 @@ export function SignUpForm() {
                                         }, 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, {
+                                            step1Form.setValue('branchCode', details.value.at(0) ??
+                                                signUpProps?.branches?.[0]?.code ??
+                                                BRANCHES[0].code, {
                                                 shouldDirty: true,
                                                 shouldTouch: true,
                                                 shouldValidate: true,
@@ -237,6 +242,7 @@ export function SignUpForm() {
                                 dialog.setOpen(false);
                                 step1Form.reset();
                                 step2Form.reset();
+                                globalStore.kyc.setOpen(true);
                                 setStep(1);
                             }
                             catch (error) {