@opexa/portal-components 0.0.45 → 0.0.47

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

@@ -50,5 +50,6 @@ export * from './useTournamentsQuery';
 export * from './useTransactionRecordsQuery';
 export * from './useUnmarkGameAsFavoriteMutation';
 export * from './useUnreadMessagesCountQuery';
+export * from './useUpdateAccountMutation';
 export * from './useWalletQuery';
 export * from './useWithdrawalRecordsQuery';

package/dist/client/hooks/index.js

@@ -50,5 +50,6 @@ export * from './useTournamentsQuery.js';
 export * from './useTransactionRecordsQuery.js';
 export * from './useUnmarkGameAsFavoriteMutation.js';
 export * from './useUnreadMessagesCountQuery.js';
+export * from './useUpdateAccountMutation.js';
 export * from './useWalletQuery.js';
 export * from './useWithdrawalRecordsQuery.js';

package/dist/client/hooks/useCreateGCashDepositMutation.js

@@ -3,7 +3,7 @@ import { ObjectId, ObjectType } from '@opexa/portal-sdk-core/object-id';
 import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
-import { createPoll, getCreateGCashDepositMutationKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { createPoll, getCreateGCashDepositMutationKey, getDepositsCountQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 export const useCreateGCashDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -51,6 +51,7 @@ export const useCreateGCashDepositMutation = (config) => {
                 error.message = 'Failed to process GCash deposit';
                 throw error;
             }
+            queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },
     });

package/dist/client/hooks/useCreateMayaAppDepositMutation.js

@@ -3,7 +3,7 @@ import { ObjectId, ObjectType } from '@opexa/portal-sdk-core/object-id';
 import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
-import { createPoll, getCreateMayaAppDepositMutationKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { createPoll, getCreateMayaAppDepositMutationKey, getDepositsCountQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 export const useCreateMayaAppDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -51,6 +51,7 @@ export const useCreateMayaAppDepositMutation = (config) => {
                 error.message = 'Failed to process Maya deposit';
                 throw error;
             }
+            queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },
     });

package/dist/client/hooks/useCreateMayaDepositMutation.js

@@ -3,7 +3,7 @@ import { ObjectId, ObjectType } from '@opexa/portal-sdk-core/object-id';
 import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
-import { createPoll, getCreateMayaDepositMutationKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { createPoll, getCreateMayaDepositMutationKey, getDepositsCountQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 export const useCreateMayaDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -51,6 +51,7 @@ export const useCreateMayaDepositMutation = (config) => {
                 error.message = 'Failed to process Maya deposit';
                 throw error;
             }
+            queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },
     });

package/dist/client/hooks/useCreateOnlineBankDepositMutation.js

@@ -3,7 +3,7 @@ import { ObjectId, ObjectType } from '@opexa/portal-sdk-core/object-id';
 import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
-import { createPoll, getCreateOnlineBankDepositMutationKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { createPoll, getCreateOnlineBankDepositMutationKey, getDepositsCountQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 export const useCreateOnlineBankDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -54,6 +54,7 @@ export const useCreateOnlineBankDepositMutation = (config) => {
                 error.message = 'Failed to process online bank deposit';
                 throw error;
             }
+            queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },
     });

package/dist/client/hooks/useCreateQRPHDepositMutation.js

@@ -3,7 +3,7 @@ import { ObjectId, ObjectType } from '@opexa/portal-sdk-core/object-id';
 import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
-import { createPoll, getCreateQRPHDepositMutationKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
+import { createPoll, getCreateQRPHDepositMutationKey, getDepositsCountQueryKey, getQueryClient, getSessionQueryKey, } from '../../utils/index.js';
 import { getSession } from '../services/index.js';
 export const useCreateQRPHDepositMutation = (config) => {
     const queryClient = getQueryClient();
@@ -54,6 +54,7 @@ export const useCreateQRPHDepositMutation = (config) => {
                 error.message = 'Failed to process QR PH deposit';
                 throw error;
             }
+            queryClient.setQueryData(getDepositsCountQueryKey(), (prev) => prev ? prev + 1 : 1);
             return res;
         },
     });

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

@@ -5,4 +5,5 @@ export declare function useMobileNumberParser(): {
         mobileNumber: string;
         areaCode: string;
     };
+    equals: (mobileNumber0: unknown, mobileNumber1: unknown) => boolean;
 };

package/dist/client/hooks/useMobileNumberParser.js

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useLocaleInfo } from './useLocaleInfo.js';
 export function useMobileNumberParser() {
     const localeInfo = useLocaleInfo();
@@ -12,7 +13,7 @@ export function useMobileNumberParser() {
      * format('+639190000001'); // '+639190000001'
      * ```
      */
-    const format = (value) => {
+    const format = useCallback((value) => {
         if (value.startsWith(localeInfo.mobileNumber.areaCode)) {
             return value;
         }
@@ -23,7 +24,7 @@ export function useMobileNumberParser() {
             return '+' + value;
         }
         return localeInfo.mobileNumber.areaCode + value;
-    };
+    }, [localeInfo.mobileNumber.areaCode]);
     /**
      * Parses a mobile number based on the current locale information.
      * Returns the area code and the mobile number as separate values.
@@ -35,13 +36,13 @@ export function useMobileNumberParser() {
      * parse('9190000001');    // { mobileNumber: '9190000001', areaCode: '+63' }
      * ```
      */
-    const parse = (value) => {
+    const parse = useCallback((value) => {
         const mobileNumber = format(value).replace(localeInfo.mobileNumber.areaCode, '');
         return {
             mobileNumber: mobileNumber,
             areaCode: localeInfo.mobileNumber.areaCode,
         };
-    };
+    }, [format, localeInfo.mobileNumber.areaCode]);
     /**
      * Validates a mobile number based on the current locale information.
      * @example
@@ -52,12 +53,22 @@ export function useMobileNumberParser() {
      * validate('+639190000001'); // true
      * ```
      */
-    const validate = (value) => {
+    const validate = useCallback((value) => {
         return (typeof value === 'string' && localeInfo.mobileNumber.pattern.test(value));
-    };
+    }, [localeInfo.mobileNumber.pattern]);
+    const equals = useCallback((mobileNumber0, mobileNumber1) => {
+        if (!validate(mobileNumber0))
+            return false;
+        if (!validate(mobileNumber1))
+            return false;
+        const v0 = format(mobileNumber0);
+        const v1 = format(mobileNumber1);
+        return v0 === v1;
+    }, [format, validate]);
     return {
         validate,
         format,
         parse,
+        equals,
     };
 }

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

@@ -0,0 +1,3 @@
+import { type UpdateMemberAccountDataInput } from '@opexa/portal-sdk-core';
+import type { Mutation } from '../../types';
+export declare const useUpdateAccountMutation: Mutation<void, UpdateMemberAccountDataInput>;

package/dist/client/hooks/useUpdateAccountMutation.js

@@ -0,0 +1,61 @@
+import { updateMemberAccount, } from '@opexa/portal-sdk-core';
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
+import { getAccountQueryKey, getProfileCompletionQueryKey, getQueryClient, getSessionQueryKey, getUpdateAccountMutationKey, } from '../../utils/index.js';
+import { getSession } from '../services/index.js';
+import { useAccountQuery } from './useAccountQuery.js';
+export const useUpdateAccountMutation = (config) => {
+    const queryClient = getQueryClient();
+    const accountQuery = useAccountQuery();
+    return useMutation({
+        ...config,
+        mutationKey: getUpdateAccountMutationKey(),
+        mutationFn: async (input) => {
+            const session = await queryClient.fetchQuery({
+                queryKey: getSessionQueryKey(),
+                queryFn: () => getSession(),
+            });
+            invariant(session.status === 'authenticated');
+            invariant(accountQuery.data);
+            await updateMemberAccount(accountQuery.data.id, input, {
+                environment: ENVIRONMENT,
+                headers: {
+                    'Platform-Code': PLATFORM_CODE,
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            queryClient.setQueryData(getAccountQueryKey(), (prev) => {
+                if (!prev)
+                    return;
+                return {
+                    ...prev,
+                    name: input.name ?? prev.name,
+                    validId: input.validId ?? prev.validId,
+                    nickName: input.nickName ?? prev.nickName,
+                    realName: input.realName ?? prev.realName,
+                    birthDay: input.birthDay ?? prev.birthDay,
+                    emailAddress: input.emailAddress ?? prev.emailAddress,
+                    mobileNumber: input.mobileNumber ?? prev.mobileNumber,
+                    transactionPassword: input.transactionPassword ? true : false,
+                    secretAnswerSubmitted: input.secretAnswer ? true : false,
+                    dateTimeLastUpdated: new Date().toISOString(),
+                };
+            });
+            queryClient.setQueryData(getProfileCompletionQueryKey(), (prev) => {
+                if (!prev)
+                    return;
+                return {
+                    ...prev,
+                    accountPassword: input.password ? true : prev.accountPassword,
+                    transactionPassword: input.transactionPassword
+                        ? true
+                        : prev.transactionPassword,
+                    accountVerification: input.realName && input.mobileNumber
+                        ? true
+                        : prev.accountVerification,
+                };
+            });
+        },
+    });
+};

package/dist/components/Account/Account.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Portal } from '@ark-ui/react';
 import Image from 'next/image';
 import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
 import { useAccountQuery, useGlobalStore, useLocaleInfo, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks/index.js';
 import { AlertCircleIcon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, Gift01Icon, Logout01Icon, Settings02Icon, XIcon, } from '../../icons/index.js';
@@ -20,10 +21,14 @@ export function Account(props) {
     const betRecordsUrl = props.betRecordsUrl ?? '/bet-records';
     const transactionsUrl = props.transactionsUrl ?? '/transactions';
     const accountSettingsUrl = props.accountSettingsUrl ?? '/account';
+    const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
+        ? props.offsetTop
+        : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
     return (_jsxs(_Fragment, { children: [_jsxs(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
                     globalStore.account__mobile.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, className: "lg:hidden", children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: globalStore.account__mobile.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatarPlaceholder, alt: "", width: 100, height: 100, className: "size-10" })) })) }), _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: "relative top-[var(--top,0px)] flex h-[calc(100%-var(--top,0px))] w-full flex-col px-xl py-6", style: {
-                                    ['--top']: props.offsetTop ?? '0px',
+                }, lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, className: "lg:hidden", children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: globalStore.account__mobile.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatarPlaceholder, alt: "", width: 100, height: 100, className: "size-10" })) })) }), _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
+                                    ['--offset-top-mobile']: mobileOffsetTop,
+                                    ['--offset-top-desktop']: desktopOffsetTop,
                                 }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl })] }) }) })] }), _jsxs(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
                     globalStore.account.setOpen(details.open);
                 }, lazyMount: true, unmountOnExit: true, positioning: {

package/dist/components/AccountInfo/AccountInfo.js

@@ -1,10 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { format } from 'date-fns';
-import { noop } from 'lodash-es';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { differenceInYears, format } from 'date-fns';
 import Image from 'next/image';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
-import { useAccountQuery, useLocaleInfo, useMobileNumberParser, } from '../../client/hooks/index.js';
+import { z } from 'zod';
+import { useAccountQuery, useLocaleInfo, useMobileNumberParser, useUpdateAccountMutation, } from '../../client/hooks/index.js';
+import { toaster } from '../../client/utils/index.js';
 import { FacebookIcon, GoogleIcon } from '../../icons/index.js';
 import avatar from '../../images/placeholder-avatar.png';
 import { Button, Field, IconButton } from '../../ui/index.js';
@@ -19,16 +23,120 @@ function ProfileInfo() {
 function PersonalInfo() {
     const accountQuery = useAccountQuery();
     const account = accountQuery.data;
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Personal Data" }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Real name" }), _jsx(Field.Input, { value: account?.realName ?? '', onChange: noop, readOnly: true })] }), _jsxs(Field.Root, { className: "mt-6", children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", value: account?.birthDay ? format(account.birthDay, 'yyyy-MM-dd') : '', readOnly: true })] })] }), _jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, children: "Cancel" }), _jsx(Button, { size: "sm", fullWidth: false, children: "Save Changes" })] })] })] }));
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            toaster.success({
+                description: 'Changes saved!',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z.object({
+        realName: z.string().min(4).max(50).optional().or(z.literal('')),
+        birthDay: z
+            .string()
+            .optional()
+            .or(z.literal(''))
+            .superRefine((val, ctx) => {
+            if (!val)
+                return;
+            const date = new Date(val);
+            const age = differenceInYears(new Date(), date);
+            if (age < 21) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'You must be at least 21 years old',
+                });
+            }
+        }),
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            birthDay: '',
+            realName: '',
+        },
+    });
+    useEffect(() => {
+        if (account) {
+            form.reset({
+                realName: account.realName ?? '',
+                birthDay: account.birthDay
+                    ? format(account.birthDay, 'yyyy-MM-dd')
+                    : '',
+            });
+        }
+    }, [account, form]);
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Personal Data" }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+                    updateAccountMutation.mutate({
+                        realName: data.realName && account?.realName !== data.realName
+                            ? data.realName
+                            : undefined,
+                        birthDay: data.birthDay && account?.birthDay !== data.birthDay
+                            ? data.birthDay
+                            : undefined,
+                    });
+                }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, children: [_jsx(Field.Label, { children: "Real name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
 }
 function ContactInfo() {
     const localeInfo = useLocaleInfo();
     const accountQuery = useAccountQuery();
     const account = accountQuery.data;
-    const mobileNumberParser = useMobileNumberParser();
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Contact Info" }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { className: "pl-10.5", value: account?.mobileNumber
-                                                    ? mobileNumberParser.format(account?.mobileNumber)
-                                                    : '', readOnly: true, onChange: noop })] })] }), _jsxs(Field.Root, { className: "mt-6", children: [_jsx(Field.Label, { children: "Email address" }), _jsx(Field.Input, { defaultValue: account?.emailAddress ?? '' })] })] }), _jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, children: "Cancel" }), _jsx(Button, { size: "sm", fullWidth: false, children: "Save Changes" })] })] })] }));
+    const { parse, format, equals } = useMobileNumberParser();
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            toaster.success({
+                description: 'Changes saved!',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z.object({
+        emailAddress: z.string().email().optional().or(z.literal('')),
+        mobileNumber: z
+            .string()
+            .regex(localeInfo.mobileNumber.pattern, 'Invalid mobile number')
+            .optional()
+            .or(z.literal('')),
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            mobileNumber: '',
+            emailAddress: '',
+        },
+    });
+    useEffect(() => {
+        if (account) {
+            form.reset({
+                emailAddress: account.emailAddress ?? '',
+                mobileNumber: account.mobileNumber
+                    ? parse(account.mobileNumber).mobileNumber
+                    : '',
+            });
+        }
+    }, [account, form, parse]);
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Contact Info" }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+                    updateAccountMutation.mutate({
+                        emailAddress: data.emailAddress && account?.emailAddress !== data.emailAddress
+                            ? data.emailAddress
+                            : undefined,
+                        mobileNumber: data.mobileNumber &&
+                            !equals(account?.mobileNumber, data.mobileNumber)
+                            ? format(data.mobileNumber)
+                            : undefined,
+                    });
+                }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { className: "pl-10.5", readOnly: account?.mobileNumber != null, ...form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.emailAddress, children: [_jsx(Field.Label, { children: "Email address" }), _jsx(Field.Input, { ...form.register('emailAddress') }), _jsx(Field.ErrorText, { children: form.formState.errors.emailAddress?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: updateAccountMutation.isPending || !form.formState.isValid, children: "Save Changes" })] }))] })] }));
 }
 function SSO() {
     return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Account Connections" }), _jsxs("div", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(GoogleIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: "Google" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-xs leading-tight", children: "Not Connected" })] })] }), _jsx(Button, { fullWidth: false, children: "Connect" })] }), _jsxs("div", { className: "mt-6 flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(FacebookIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: "Facebook" }), _jsx("p", { className: "text-text-success-primary-600 mt-xs text-xs leading-tight", children: "Connected" })] })] }), _jsx("button", { className: "text-button-tertiary-error-fg text-sm font-semibold", children: "Disconnect" })] })] })] }));

package/dist/components/AccountSecurity/AccountSecurity.js

@@ -1,8 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ark, createListCollection, Portal } from '@ark-ui/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
-import { useProfileCompletionQuery } from '../../client/hooks/index.js';
+import { z } from 'zod';
+import { useProfileCompletionQuery, useUpdateAccountMutation, } from '../../client/hooks/index.js';
+import { toaster } from '../../client/utils/index.js';
 import { AlertCircleIcon, CheckIcon, CheckVerified02Icon, ChevronDownIcon, EyeIcon, EyeOffIcon, } from '../../icons/index.js';
 import { Button, Field, PasswordInput, Select } from '../../ui/index.js';
 export function AccountSecurity(props) {
@@ -11,18 +15,130 @@ export function AccountSecurity(props) {
 function LoginPassword() {
     const profileCompletionQuery = useProfileCompletionQuery();
     const profileCompletion = profileCompletionQuery.data;
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            form.reset();
+            toaster.success({
+                description: 'Changes saved!',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z
+        .object({
+        password: z.string().min(8).max(150).optional().or(z.literal('')),
+        confirmPassword: z.string().optional(),
+        secretQuestion: z.enum(SECRET_QUESTIONS).nullable().optional(),
+        secretAnswer: z
+            .string()
+            .min(2, 'Answer is too short')
+            .optional()
+            .or(z.literal('')),
+    })
+        .superRefine((data, ctx) => {
+        if (data.password && data.password !== data.confirmPassword) {
+            ctx.addIssue({
+                path: ['confirmPassword'],
+                code: z.ZodIssueCode.custom,
+                message: 'Passwords do not match',
+            });
+        }
+        if (data.secretAnswer && !data.secretQuestion) {
+            ctx.addIssue({
+                path: ['secretQuestion'],
+                code: z.ZodIssueCode.custom,
+                message: 'Please select a security question',
+            });
+        }
+        if (data.secretQuestion && !data.secretAnswer) {
+            ctx.addIssue({
+                path: ['secretAnswer'],
+                code: z.ZodIssueCode.custom,
+                message: 'Please provide an answer to the security question',
+            });
+        }
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            password: '',
+            confirmPassword: '',
+            secretAnswer: '',
+            secretQuestion: null,
+        },
+    });
+    const secretQuestion = form.watch('secretQuestion');
     return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Log in password" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "Access your account by logging in with your name and password." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountPassword
                             ? 'text-text-success-primary'
-                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsx(Field.Root, { children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, {}), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }) }), _jsx(Field.Root, { className: "mt-6", children: _jsxs(Select.Root, { collection: secretQuestionCollection, lazyMount: true, positioning: {
-                                        sameWidth: true,
-                                    }, children: [_jsx(Select.Label, { children: "Security Question" }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, { placeholder: "Game Vendor" }), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: secretQuestionCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: secretQuestionCollection.stringifyItem(provider) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider))) }) }) }) })] }) }), _jsxs(Field.Root, { className: "mt-6", children: [_jsx(Field.Label, { children: "Answer" }), _jsx(Field.Input, {})] })] }), _jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, children: "Cancel" }), _jsx(Button, { size: "sm", fullWidth: false, children: "Save Changes" })] })] })] }));
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+                    updateAccountMutation.mutate({
+                        password: data.password ? data.password : undefined,
+                        secretAnswer: data.secretAnswer ? data.secretAnswer : undefined,
+                        secretQuestion: data.secretQuestion
+                            ? data.secretQuestion
+                            : undefined,
+                    });
+                }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.confirmPassword, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.confirmPassword?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.secretQuestion, children: [_jsxs(Select.Root, { deselectable: true, collection: secretQuestionCollection, lazyMount: true, positioning: {
+                                            sameWidth: true,
+                                        }, value: secretQuestion ? [secretQuestion] : [], onValueChange: (details) => {
+                                            form.setValue('secretQuestion', z.enum(SECRET_QUESTIONS).safeParse(details.value.at(0))
+                                                .data ?? null, {
+                                                shouldDirty: true,
+                                                shouldTouch: true,
+                                                shouldValidate: true,
+                                            });
+                                        }, children: [_jsx(Select.Label, { children: "Security Question" }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: secretQuestionCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: secretQuestionCollection.stringifyItem(provider) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider))) }) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.secretQuestion?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.secretAnswer, children: [_jsx(Field.Label, { children: "Answer" }), _jsx(Field.Input, { ...form.register('secretAnswer') }), _jsx(Field.ErrorText, { children: form.formState.errors.secretAnswer?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: updateAccountMutation.isPending || !form.formState.isValid, children: "Save Changes" })] }))] })] }));
 }
 function TransactionPassword() {
     const profileCompletionQuery = useProfileCompletionQuery();
     const profileCompletion = profileCompletionQuery.data;
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            form.reset();
+            toaster.success({
+                description: 'Changes saved!',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z
+        .object({
+        password: z.string().min(8).max(150).optional().or(z.literal('')),
+        confirmPassword: z.string().optional(),
+    })
+        .superRefine((data, ctx) => {
+        if (data.password && data.password !== data.confirmPassword) {
+            ctx.addIssue({
+                path: ['confirmPassword'],
+                code: z.ZodIssueCode.custom,
+                message: 'Passwords do not match',
+            });
+        }
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            password: '',
+            confirmPassword: '',
+        },
+    });
     return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Transaction password" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "The transaction password secures and confirms your wallet withdrawals." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountPassword
                             ? 'text-text-success-primary'
-                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsx(Field.Root, { children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, {}), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }) }), _jsx(Field.Root, { className: "mt-6", children: _jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, {}), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }) })] }), _jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, children: "Cancel" }), _jsx(Button, { size: "sm", fullWidth: false, children: "Save Changes" })] })] })] }));
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+                    updateAccountMutation.mutate({
+                        password: data.password ? data.password : undefined,
+                    });
+                }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.confirmPassword, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.confirmPassword?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
 }
 const SECRET_QUESTIONS = [
     'BEST_CHILDHOOD_FRIEND',