@opexa/portal-components 0.0.253 → 0.0.255

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

@@ -1 +1,5 @@
-export declare function MobileNumberSignIn(): import("react/jsx-runtime").JSX.Element;
+interface Props {
+    siteName?: string;
+}
+export declare function MobileNumberSignIn(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -19,7 +19,8 @@ import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { PinInput } from '../../ui/PinInput/index.js';
 import { useSignInContext, useSignInPropsContext } from './SignInContext.js';
-export function MobileNumberSignIn() {
+import { getFriendlyErrorMessage } from './utils.js';
+export function MobileNumberSignIn(props) {
     const signInProps = useSignInPropsContext();
     const context = useSignInContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
@@ -27,8 +28,49 @@ export function MobileNumberSignIn() {
         signUp: ctx.signUp,
         kycReminder: ctx.kycReminder,
     })));
-    const signInMutation = useSignInMutation();
-    const sendVerificationCodeMutation = useSendVerificationCodeMutation();
+    const signInMutation = useSignInMutation({
+        onSuccess: () => {
+            context.setStep(2);
+            cooldown.start();
+        },
+        onError: (err) => {
+            const errorTitle = err.name === 'MEMBER_ACCOUNT_BLACKLISTED'
+                ? 'Your Account is Blacklisted'
+                : err.name === 'MEMBER_ACCOUNT_SUSPENDED'
+                    ? 'Your Account is Suspended'
+                    : 'Sign In Failed';
+            toaster.error({
+                title: errorTitle,
+                description: getFriendlyErrorMessage(err.name, {
+                    siteName: props.siteName,
+                    accountName: step1Form.getValues('mobileNumber'),
+                }),
+            });
+        },
+    });
+    const sendVerificationCodeMutation = useSendVerificationCodeMutation({
+        onSuccess: () => {
+            step1Form.reset();
+            step2Form.reset();
+            context.setStep(1);
+            globalStore.signIn.setOpen(false);
+            globalStore.kycReminder.setOpen(true);
+        },
+        onError: (err) => {
+            const errorTitle = err.name === 'MEMBER_ACCOUNT_BLACKLISTED'
+                ? 'Your Account is Blacklisted'
+                : err.name === 'MEMBER_ACCOUNT_SUSPENDED'
+                    ? 'Your Account is Suspended'
+                    : 'Sign In Failed';
+            toaster.error({
+                title: errorTitle,
+                description: getFriendlyErrorMessage(err.name, {
+                    siteName: props.siteName,
+                    accountName: step1Form.getValues('mobileNumber'),
+                }),
+            });
+        },
+    });
     const localeInfo = useLocaleInfo();
     const mobileNumberParser = useMobileNumberParser();
     const Step1Definition = z.object({
@@ -81,22 +123,11 @@ export function MobileNumberSignIn() {
     });
     const form2Ref = useRef(null);
     return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
-                            try {
-                                await sendVerificationCodeMutation.mutateAsync({
-                                    channel: 'SMS',
-                                    recipient: mobileNumberParser.format(data.mobileNumber),
-                                    strict: true,
-                                });
-                                context.setStep(2);
-                                cooldown.start();
-                            }
-                            catch (e) {
-                                toaster.error({
-                                    description: e instanceof Error
-                                        ? e.message
-                                        : 'Failed to send verification code',
-                                });
-                            }
+                            sendVerificationCodeMutation.mutate({
+                                channel: 'SMS',
+                                recipient: mobileNumberParser.format(data.mobileNumber),
+                                strict: true,
+                            });
                         }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "absolute left-3.5 top-1/2 flex shrink-0 -translate-y-1/2 items-center gap-md", children: [_jsx(localeInfo.country.flag, { className: "size-5" }), _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode })] }), _jsx(Field.Input, { style: {
                                                     paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
                                                 }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Log In" }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, className: "mt-xl", children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
@@ -109,25 +140,11 @@ export function MobileNumberSignIn() {
                                     globalStore.signUp.setOpen(true);
                                 }, children: "Sign up" })] })] })), context.step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
                             const { mobileNumber } = step1Form.getValues();
-                            try {
-                                await signInMutation.mutateAsync({
-                                    type: 'MOBILE_NUMBER',
-                                    mobileNumber: mobileNumberParser.format(mobileNumber),
-                                    verificationCode: verificationCode.join(''),
-                                });
-                                step1Form.reset();
-                                step2Form.reset();
-                                context.setStep(1);
-                                globalStore.signIn.setOpen(false);
-                                globalStore.kycReminder.setOpen(true);
-                            }
-                            catch (err) {
-                                toaster.error({
-                                    description: err instanceof Error
-                                        ? err.message
-                                        : 'Invalid Verification Code',
-                                });
-                            }
+                            signInMutation.mutate({
+                                type: 'MOBILE_NUMBER',
+                                mobileNumber: mobileNumberParser.format(mobileNumber),
+                                verificationCode: verificationCode.join(''),
+                            });
                         }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", value: o.field.value, onValueChange: (details) => {
                                                 o.field.onChange(details.value);
                                                 o.field.onBlur();

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

@@ -1 +1,5 @@
-export declare function NameAndPasswordSignIn(): import("react/jsx-runtime").JSX.Element;
+interface Props {
+    siteName?: string;
+}
+export declare function NameAndPasswordSignIn(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -18,7 +18,8 @@ import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { PasswordInput } from '../../ui/PasswordInput/index.js';
 import { useSignInContext, useSignInPropsContext } from './SignInContext.js';
-export function NameAndPasswordSignIn() {
+import { getFriendlyErrorMessage } from './utils.js';
+export function NameAndPasswordSignIn(props) {
     const signInProps = useSignInPropsContext();
     const context = useSignInContext();
     const dialog = useDialogContext();
@@ -42,9 +43,17 @@ export function NameAndPasswordSignIn() {
             }
         },
         onError(err) {
+            const errorTitle = err.name === 'MEMBER_ACCOUNT_BLACKLISTED'
+                ? 'Your Account is Blacklisted'
+                : err.name === 'MEMBER_ACCOUNT_SUSPENDED'
+                    ? 'Your Account is Suspended'
+                    : 'Sign In Failed';
             toaster.error({
-                description: err.message ||
-                    'An error occurred while signing in. Please try again.',
+                title: errorTitle,
+                description: getFriendlyErrorMessage(err.name, {
+                    siteName: props.siteName,
+                    accountName: form.getValues('name'),
+                }),
             });
         },
     });

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

@@ -6,5 +6,6 @@ export interface SignInProps {
     /** @default '/terms-and-conditions' */
     termsAndConditionsUrl?: string;
     children?: ReactNode;
+    siteName?: string;
 }
 export declare function SignIn(props: SignInProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignIn.lazy.js

@@ -15,5 +15,5 @@ export function SignIn(props) {
     const signInStore = useGlobalStore(useShallow((ctx) => ctx.signIn));
     return (_jsx(SignInPropsProvider, { value: props, children: _jsx(SignInProvider, { value: signIn, children: _jsx(Dialog.Root, { open: signInStore.open, onOpenChange: (details) => {
                     signInStore.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: twMerge('bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl overflow-y-auto', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-7.5 w-auto", draggable: false }), _jsx(SignInForm, {})] }) })] }) }) }) }));
+                }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: twMerge('bg-bg-primary-alt mx-auto h-full w-full items-start overflow-y-auto p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-7.5 w-auto", draggable: false }), _jsx(SignInForm, { siteName: props.siteName })] }) })] }) }) }) }));
 }

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

@@ -1 +1,5 @@
-export declare function SignInForm(): import("react/jsx-runtime").JSX.Element;
+interface Props {
+    siteName?: string;
+}
+export declare function SignInForm(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SignIn/SignInForm.js

@@ -4,7 +4,7 @@ import { MobileNumberSignIn } from './MobileNumberSignIn.js';
 import { NameAndPasswordSignIn } from './NameAndPasswordSignIn.js';
 import { useSignInContext } from './SignInContext.js';
 import { SignInMethod } from './SignInMethod.js';
-export function SignInForm() {
+export function SignInForm(props) {
     const context = useSignInContext();
-    return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Log in to your account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Welcome back! Please enter your details." })] })), _jsx(SignInMethod, {}), context.type === 'MOBILE_NUMBER' && _jsx(MobileNumberSignIn, {}), context.type === 'NAME_AND_PASSWORD' && _jsx(NameAndPasswordSignIn, {})] }));
+    return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Log in to your account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Welcome back! Please enter your details." })] })), _jsx(SignInMethod, {}), context.type === 'MOBILE_NUMBER' && (_jsx(MobileNumberSignIn, { siteName: props.siteName })), context.type === 'NAME_AND_PASSWORD' && (_jsx(NameAndPasswordSignIn, { siteName: props.siteName }))] }));
 }

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

@@ -0,0 +1,7 @@
+type Options = {
+    accountName?: string;
+    siteName?: string;
+};
+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,22 @@
+export function getFriendlyErrorMessage(code, options) {
+    const accountName = options?.accountName ?? '';
+    const siteName = options?.siteName ?? '';
+    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':
+            return 'Invalid username or password, please try again.';
+        default:
+            return 'Something went wrong. Please try again later.';
+    }
+}

package/dist/components/TransactionRecords/TransactionRecordsTable.js

@@ -55,7 +55,7 @@ export function TransactionRecordsTable() {
                     transactionType: true,
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest transaction records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Transaction Type" }), _jsx(Table.Heading, { children: "Transaction Time" }), _jsx(Table.Heading, { children: "Amount" }), _jsx(Table.Heading, { children: "Current Balance" }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Content" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Transaction Type" }), _jsx(Table.Heading, { children: "Transaction Time" }), _jsx(Table.Heading, { children: "Amount" }), _jsx(Table.Heading, { children: "Current Balance" }), _jsx(Table.Heading, { children: "Reference Number" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
                                                             in: tz(localeInfo.timezone),
@@ -67,5 +67,5 @@ export function TransactionRecordsTable() {
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.currentBalance, {
                                                     currency: localeInfo.currency.code,
                                                     minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: data.referenceNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.content || '/' })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: data.referenceNumber })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
 }

package/package.json

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