@opexa/portal-components 0.0.917 → 0.0.920

package/dist/components/AccountInfo/AccountInfo.d.ts

@@ -9,6 +9,7 @@ interface BaseAccountInfoProps {
     facebookSso?: boolean;
     /** Avatar image source */
     avatar?: string;
+    variant?: string;
 }
 interface WithoutBranchCode extends BaseAccountInfoProps {
     shouldShowBranchCode?: false;

package/dist/components/AccountInfo/AccountInfo.js

@@ -37,6 +37,7 @@ import { IconButton } from '../../ui/IconButton/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getAccountQueryKey, getProfileCompletionQueryKey, } from '../../utils/queryKeys.js';
+import PhoneIcon from './icons/PhoneIcon.js';
 const accountSchema = z.object({
     name: z
         .string()
@@ -45,7 +46,7 @@ const accountSchema = z.object({
         .regex(/^[a-zA-Z0-9]+$/, 'Username can only contain letters and numbers'),
 });
 export function AccountInfo(props) {
-    return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(ProfileInfo, { avatar: props.avatar }), _jsx(ContactInfo, {}), _jsx(PersonalInfo, { shouldShowBranchCode: props.shouldShowBranchCode, branchCodes: props.branchCodes }), _jsx(SSO, { google: props.googleSso, facebook: props.facebookSso })] }));
+    return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(ProfileInfo, { avatar: props.avatar }), _jsx(ContactInfo, { variant: props.variant }), _jsx(PersonalInfo, { shouldShowBranchCode: props.shouldShowBranchCode, branchCodes: props.branchCodes }), _jsx(SSO, { google: props.googleSso, facebook: props.facebookSso })] }));
 }
 function ProfileInfo({ avatar }) {
     const [edit, setEdit] = useState(false);
@@ -155,7 +156,7 @@ function PersonalInfo(props) {
                     });
                 }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!account?.realName, children: [_jsx(Field.Label, { children: "Full 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, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay'), className: twMerge('h-full py-2.5', account?.birthDay && 'pointer-events-none') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] }), props.shouldShowBranchCode && (_jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Branch Code" }), _jsx(Field.Input, { type: "text", disabled: true, value: displayBranchName ?? account?.branchCode ?? '' })] }))] }), form.formState.isDirty && (_jsxs("div", { className: "flex justify-end gap-lg border-border-secondary 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() {
+function ContactInfo({ variant }) {
     const localeInfo = useLocaleInfo();
     const accountQuery = useAccountQuery();
     const profileCompletionQuery = useProfileCompletionQuery();
@@ -215,7 +216,7 @@ function ContactInfo() {
                             ? 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: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3.5 size-5" }), _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: "flex justify-end gap-lg border-border-secondary 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" })] }))] })] }));
+                }), 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: [variant === 'ofwin' ? (_jsx(PhoneIcon, {})) : (_jsx(localeInfo.country.flag, { className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3.5 size-5" })), _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: "flex justify-end gap-lg border-border-secondary 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({ google, facebook }) {
     const googleClientIdQuery = useGoogleClientIdQuery({ enabled: !!google });

package/dist/components/AccountInfo/icons/PhoneIcon.d.ts

@@ -0,0 +1,2 @@
+declare const PhoneIcon: () => import("react/jsx-runtime").JSX.Element;
+export default PhoneIcon;

package/dist/components/AccountInfo/icons/PhoneIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const PhoneIcon = () => {
+    return (_jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3.5 size-5", children: _jsx("path", { d: "M12 17.5H12.01M8.2 22H15.8C16.9201 22 17.4802 22 17.908 21.782C18.2843 21.5903 18.5903 21.2843 18.782 20.908C19 20.4802 19 19.9201 19 18.8V5.2C19 4.07989 19 3.51984 18.782 3.09202C18.5903 2.71569 18.2843 2.40973 17.908 2.21799C17.4802 2 16.9201 2 15.8 2H8.2C7.0799 2 6.51984 2 6.09202 2.21799C5.71569 2.40973 5.40973 2.71569 5.21799 3.09202C5 3.51984 5 4.0799 5 5.2V18.8C5 19.9201 5 20.4802 5.21799 20.908C5.40973 21.2843 5.71569 21.5903 6.09202 21.782C6.51984 22 7.07989 22 8.2 22ZM12.5 17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5C11.5 17.2239 11.7239 17 12 17C12.2761 17 12.5 17.2239 12.5 17.5Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+};
+export default PhoneIcon;

package/dist/components/DepositWithdrawal/Withdrawal/Withdrawal.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { lazy, Suspense, useEffect, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 import { useFeatureFlag } from '../../../client/hooks/useFeatureFlag.js';
 import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
@@ -15,15 +15,33 @@ import { onMobileDevice } from '../../../utils/onMobileDevice.js';
 import { parseDecimal } from '../../../utils/parseDecimal.js';
 import { useDepositWithdrawalPropsContext } from '../DepositWithdrawalContext.js';
 import { PaymentMethods } from '../PaymentMethods.js';
-import { GCashStandardCashInWithdrawal } from './GCashStandardCashInWithdrawal/GCashStandardCashInWithdrawal.js';
-import { GCashWithdrawal } from './GCashWithdrawal/GCashWithdrawal.js';
-import { InstapayGCashWithdrawal } from './InstapayGCashWithdrawal/InstapayGcashWithdrawal.js';
-import { InstapayPaymayaWithdrawal } from './InstapayPaymayaWithdrawal/InstapayPaymayaWithdrawal.js';
-import { InstapayWithdrawal } from './InstapayWithdrawal/InstapayWithdrawal.js';
-import { MayaAppWithdrawal } from './MayaAppWithdrawal/MayaAppWithdrawal.js';
-import { MayaWithdrawal } from './MayaWithdrawal/MayaWithdrawal.js';
-import { PisoPayWithdrawal } from './PisoPayWithdrawal/PisoPayWithdrawal.js';
-import { VentajaWithdrawal } from './VentajaWithdrawal/VentajaWithdrawal.js';
+const GCashStandardCashInWithdrawal = lazy(() => import('./GCashStandardCashInWithdrawal/GCashStandardCashInWithdrawal.js').then((m) => ({
+    default: m.GCashStandardCashInWithdrawal,
+})));
+const GCashWithdrawal = lazy(() => import('./GCashWithdrawal/GCashWithdrawal.js').then((m) => ({
+    default: m.GCashWithdrawal,
+})));
+const InstapayGCashWithdrawal = lazy(() => import('./InstapayGCashWithdrawal/InstapayGcashWithdrawal.js').then((m) => ({
+    default: m.InstapayGCashWithdrawal,
+})));
+const InstapayPaymayaWithdrawal = lazy(() => import('./InstapayPaymayaWithdrawal/InstapayPaymayaWithdrawal.js').then((m) => ({
+    default: m.InstapayPaymayaWithdrawal,
+})));
+const InstapayWithdrawal = lazy(() => import('./InstapayWithdrawal/InstapayWithdrawal.js').then((m) => ({
+    default: m.InstapayWithdrawal,
+})));
+const MayaAppWithdrawal = lazy(() => import('./MayaAppWithdrawal/MayaAppWithdrawal.js').then((m) => ({
+    default: m.MayaAppWithdrawal,
+})));
+const MayaWithdrawal = lazy(() => import('./MayaWithdrawal/MayaWithdrawal.js').then((m) => ({
+    default: m.MayaWithdrawal,
+})));
+const PisoPayWithdrawal = lazy(() => import('./PisoPayWithdrawal/PisoPayWithdrawal.js').then((m) => ({
+    default: m.PisoPayWithdrawal,
+})));
+const VentajaWithdrawal = lazy(() => import('./VentajaWithdrawal/VentajaWithdrawal.js').then((m) => ({
+    default: m.VentajaWithdrawal,
+})));
 export function Withdrawal() {
     const { onMaya } = useMayaAuth();
     const { allowUnverifiedAccounts } = useDepositWithdrawalPropsContext();
@@ -120,7 +138,7 @@ export function Withdrawal() {
     if (enabledPaymentMethods.length <= 0) {
         return _jsx(NoAvailablePaymentMethods, {});
     }
-    return (_jsxs(_Fragment, { children: [enabledPaymentMethods.length > 1 && (_jsx(PaymentMethods, { value: paymentMethod, onChange: setPaymentMethod, options: enabledPaymentMethods })), paymentMethod === 'GCASH' && _jsx(GCashWithdrawal, {}), paymentMethod === 'MAYA' && _jsx(MayaWithdrawal, {}), paymentMethod === 'MAYA_APP' && _jsx(MayaAppWithdrawal, {}), paymentMethod === 'INSTAPAY' && _jsx(InstapayWithdrawal, {}), paymentMethod === 'INSTAPAY_GCASH' && _jsx(InstapayGCashWithdrawal, {}), paymentMethod === 'INSTAPAY_PAYMAYA' && _jsx(InstapayPaymayaWithdrawal, {}), paymentMethod === 'VENTAJA_DISBURSEMENT' && _jsx(VentajaWithdrawal, {}), paymentMethod === 'PISO_PAY' && _jsx(PisoPayWithdrawal, {}), paymentMethod === 'GCASH_STANDARD_CASH_IN' && (_jsx(GCashStandardCashInWithdrawal, {}))] }));
+    return (_jsxs(_Fragment, { children: [enabledPaymentMethods.length > 1 && (_jsx(PaymentMethods, { value: paymentMethod, onChange: setPaymentMethod, options: enabledPaymentMethods })), _jsxs(Suspense, { fallback: _jsx(SpinnerIcon, { className: "mx-auto size-6" }), children: [paymentMethod === 'GCASH' && _jsx(GCashWithdrawal, {}), paymentMethod === 'MAYA' && _jsx(MayaWithdrawal, {}), paymentMethod === 'MAYA_APP' && _jsx(MayaAppWithdrawal, {}), paymentMethod === 'INSTAPAY' && _jsx(InstapayWithdrawal, {}), paymentMethod === 'INSTAPAY_GCASH' && _jsx(InstapayGCashWithdrawal, {}), paymentMethod === 'INSTAPAY_PAYMAYA' && _jsx(InstapayPaymayaWithdrawal, {}), paymentMethod === 'VENTAJA_DISBURSEMENT' && _jsx(VentajaWithdrawal, {}), paymentMethod === 'PISO_PAY' && _jsx(PisoPayWithdrawal, {}), paymentMethod === 'GCASH_STANDARD_CASH_IN' && (_jsx(GCashStandardCashInWithdrawal, {}))] })] }));
 }
 function AccountVerificationRequired() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({

package/package.json

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