@opexa/portal-components 0.0.696 → 0.0.697

package/dist/components/DepositWithdrawal/Deposit/Deposit.js

@@ -7,7 +7,6 @@ import { usePaymentSettingsQuery } from '../../../client/hooks/usePaymentSetting
 import { AlertCircleIcon } from '../../../icons/AlertCircleIcon.js';
 import { SpinnerIcon } from '../../../icons/SpinnerIcon.js';
 import { onMobileDevice } from '../../../utils/onMobileDevice.js';
-import { AiOPaymentMethods } from '../AiOPaymentMethods.js';
 import { PaymentMethods } from '../PaymentMethods.js';
 import { AiOGCashDeposit } from './AiOGCashDeposit/AiOGCashDeposit.js';
 import { AiOGrabPayDeposit } from './AiOGrabPayDeposit/AiOGrabPayDeposit.js';
@@ -25,15 +24,6 @@ export function Deposit() {
     const paymentSettingsQuery = usePaymentSettingsQuery();
     const paymentSettings = paymentSettingsQuery.data;
     const featureFlag = useFeatureFlag();
-    const aioDepositMethodEnabled = (() => {
-        const isMobile = onMobileDevice();
-        const enabledKey = isMobile ? 'mobileWebEnabled' : 'webEnabled';
-        return (paymentSettings?.aioGCashDepositGatewaySettings?.[enabledKey] ||
-            paymentSettings?.aioPayMayaDepositGatewaySettings?.[enabledKey] ||
-            paymentSettings?.aioGrabPayDepositGatewaySettings?.[enabledKey] ||
-            paymentSettings?.aioPalawanPayDepositGatewaySettings?.[enabledKey] ||
-            false);
-    })();
     const enabledPaymentMethods = (() => {
         const l = [];
         if (onMaya) {
@@ -69,45 +59,24 @@ export function Deposit() {
                 method: 'PISO_PAY',
                 condition: () => paymentSettings?.pisoPayDepositGatewaySettings?.[enabledKey] || false,
             },
-            {
-                method: 'AIO_EWALLET',
-                condition: () => featureFlag.enabled && aioDepositMethodEnabled,
-            },
-        ];
-        paymentMethods.forEach(({ method, condition }) => {
-            if (condition()) {
-                l.push(method);
-            }
-        });
-        return l;
-    })();
-    const enabledAiOeWalletPaymentMethods = (() => {
-        const l = [];
-        const isMobile = onMobileDevice();
-        const enabledKey = isMobile ? 'mobileWebEnabled' : 'webEnabled';
-        const m = [
             {
                 method: 'AIO_GCASH',
-                condition: () => paymentSettings?.aioGCashDepositGatewaySettings?.[enabledKey] ||
-                    false,
+                condition: () => (paymentSettings?.aioGCashDepositGatewaySettings?.[enabledKey] && featureFlag.enabled) || false,
             },
             {
                 method: 'AIO_PAY_MAYA',
-                condition: () => paymentSettings?.aioPayMayaDepositGatewaySettings?.[enabledKey] ||
-                    false,
+                condition: () => (paymentSettings?.aioPayMayaDepositGatewaySettings?.[enabledKey] && featureFlag.enabled) || false,
             },
             {
                 method: 'AIO_GRAB_PAY',
-                condition: () => paymentSettings?.aioGrabPayDepositGatewaySettings?.[enabledKey] ||
-                    false,
+                condition: () => (paymentSettings?.aioGrabPayDepositGatewaySettings?.[enabledKey] && featureFlag.enabled) || false,
             },
             {
                 method: 'AIO_PALAWAN_PAY',
-                condition: () => paymentSettings?.aioPalawanPayDepositGatewaySettings?.[enabledKey] ||
-                    false,
+                condition: () => (paymentSettings?.aioPalawanPayDepositGatewaySettings?.[enabledKey] && featureFlag.enabled) || false,
             },
         ];
-        m.forEach(({ method, condition }) => {
+        paymentMethods.forEach(({ method, condition }) => {
             if (condition()) {
                 l.push(method);
             }
@@ -115,7 +84,6 @@ export function Deposit() {
         return l;
     })();
     const [paymentMethod, setPaymentMethod] = useState();
-    const [paymentMethodAiOeWallet, setPaymentMethodAiOeWallet] = useState('AIO_GCASH');
     useEffect(() => {
         if (enabledPaymentMethods.length > 0 && !paymentMethod) {
             setPaymentMethod(enabledPaymentMethods[0]);
@@ -129,15 +97,10 @@ export function Deposit() {
     if (!isMayaSessionValid) {
         return _jsx(MayaSessionSessionExpired, {});
     }
-    if (enabledPaymentMethods.length <= 0 &&
-        enabledAiOeWalletPaymentMethods.length <= 0) {
+    if (enabledPaymentMethods.length <= 0) {
         return _jsx(NoAvailablePaymentMethods, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsx(PaymentMethods, { value: paymentMethod, onChange: setPaymentMethod, options: enabledPaymentMethods }), paymentMethod === 'QRPH' && _jsx(QRPHDeposit, {}), paymentMethod === 'GCASH' && _jsx(GCashDeposit, {}), paymentMethod === 'MAYA' && _jsx(MayaDeposit, {}), paymentMethod === 'MAYA_APP' && _jsx(MayaAppDeposit, {}), paymentMethod === 'ONLINE_BANK' && _jsx(OnlineBankDeposit, {}), paymentMethod === 'LIBANGAN_PAY_IN' && _jsx(LibanganDeposit, {}), paymentMethod === 'PISO_PAY' && _jsx(PisoPayDeposit, {}), paymentMethod === 'AIO_EWALLET' && (_jsxs(_Fragment, { children: [_jsx(AiOPaymentMethods, { value: paymentMethodAiOeWallet, onChange: setPaymentMethodAiOeWallet, options: enabledAiOeWalletPaymentMethods, label: "AIO eWallet payment methods", defaultValue: "AIO_GCASH" }), paymentMethodAiOeWallet === 'AIO_GCASH' &&
-                        paymentMethod === 'AIO_EWALLET' && _jsx(AiOGCashDeposit, {}), paymentMethodAiOeWallet === 'AIO_PAY_MAYA' &&
-                        paymentMethod === 'AIO_EWALLET' && _jsx(AiOPayMayaDeposit, {}), paymentMethodAiOeWallet === 'AIO_GRAB_PAY' &&
-                        paymentMethod === 'AIO_EWALLET' && _jsx(AiOGrabPayDeposit, {}), paymentMethodAiOeWallet === 'AIO_PALAWAN_PAY' &&
-                        paymentMethod === 'AIO_EWALLET' && _jsx(AiOPalawanPayDeposit, {})] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(PaymentMethods, { value: paymentMethod, onChange: setPaymentMethod, options: enabledPaymentMethods }), paymentMethod === 'QRPH' && _jsx(QRPHDeposit, {}), paymentMethod === 'GCASH' && _jsx(GCashDeposit, {}), paymentMethod === 'MAYA' && _jsx(MayaDeposit, {}), paymentMethod === 'MAYA_APP' && _jsx(MayaAppDeposit, {}), paymentMethod === 'ONLINE_BANK' && _jsx(OnlineBankDeposit, {}), paymentMethod === 'LIBANGAN_PAY_IN' && _jsx(LibanganDeposit, {}), paymentMethod === 'PISO_PAY' && _jsx(PisoPayDeposit, {}), paymentMethod === 'AIO_GCASH' && _jsx(AiOGCashDeposit, {}), paymentMethod === 'AIO_PAY_MAYA' && _jsx(AiOPayMayaDeposit, {}), paymentMethod === 'AIO_GRAB_PAY' && _jsx(AiOGrabPayDeposit, {}), paymentMethod === 'AIO_PALAWAN_PAY' && _jsx(AiOPalawanPayDeposit, {})] }));
 }
 function MayaSessionSessionExpired() {
     return (_jsxs("div", { className: "py-xl", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-warning-secondary", children: _jsx(AlertCircleIcon, { className: "size-6 text-text-featured-icon-light-warning" }) }), _jsx("h2", { className: "mt-lg text-center font-semibold text-lg", children: "Session Expired" }), _jsx("p", { className: "mx-auto mt-xs max-w-[25rem] text-center text-sm text-text-tertiary-600", children: "Your session has timed out. To continue with deposits or withdrawals, Please try reloading the app." })] }));

package/dist/components/DepositWithdrawal/PaymentMethods.js

@@ -10,7 +10,8 @@ import maya from '../../images/maya.png';
 import onlineBank from '../../images/online-bank.png';
 import pisoPay from '../../images/piso-pay.png';
 import qrph from '../../images/QRPH.png';
-import wallet from '../../images/wallet.png';
+import palawanPay from '../../images/palawanpay.png';
+import grabPay from '../../images/grabpay.png';
 import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { PaymentMethodDefinition } from './utils.js';
@@ -61,9 +62,24 @@ const OPTIONS = [
         image: pisoPay,
     },
     {
-        value: 'AIO_EWALLET',
-        label: 'AIO eWallet',
-        image: wallet,
+        value: 'AIO_GCASH',
+        label: 'GCash',
+        image: gcash,
+    },
+    {
+        value: 'AIO_PAY_MAYA',
+        label: 'Maya',
+        image: maya,
+    },
+    {
+        value: 'AIO_GRAB_PAY',
+        label: 'GrabPay',
+        image: grabPay,
+    },
+    {
+        value: 'AIO_PALAWAN_PAY',
+        label: 'Palawan Pay',
+        image: palawanPay,
     },
 ];
 export function PaymentMethods(props) {
@@ -80,9 +96,10 @@ export function PaymentMethods(props) {
                     if (!lastValue)
                         return;
                     setValue(PaymentMethodDefinition.parse(lastValue));
-                }, className: "grid grid-cols-2 gap-x-4 gap-y-3", children: options.map((option) => (_jsxs(Checkbox.Root, { value: option.value, className: "flex cursor-pointer items-center justify-between rounded-xl border border-border-secondary ui-checked:border-border-brand-solid p-lg", children: [_jsxs("div", { className: twMerge('rounded-xs bg-white px-sm py-[0.688rem]', option.value === 'GCASH' && 'bg-[#017EFF]', option.value === 'AIO_EWALLET' &&
-                                'flex items-center space-x-sm bg-bg-secondary'), children: [_jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: twMerge('w-auto', option.value === 'LIBANGAN_PAY_IN' ||
-                                        option.value === 'VENTAJA_DISBURSEMENT'
-                                        ? 'h-[2.5rem]'
-                                        : 'h-[1.063rem]'), draggable: false }), option.value === 'AIO_EWALLET' && (_jsx("p", { className: "text-text-secondary-700 text-xs leading-tight", children: "AIO eWallet" }))] }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
+                }, className: "grid grid-cols-2 gap-x-4 gap-y-3", children: options.map((option) => (_jsxs(Checkbox.Root, { value: option.value, className: "flex cursor-pointer items-center justify-between rounded-xl border border-border-secondary ui-checked:border-border-brand-solid p-lg", children: [_jsx("div", { className: twMerge('rounded-xs', option.value === 'AIO_GRAB_PAY'
+                                ? 'bg-transparent px-0 py-0'
+                                : 'bg-white px-sm py-[0.688rem]', option.value.includes('GCASH') && 'bg-[#017EFF]', option.value === 'AIO_PALAWAN_PAY' && 'bg-[#026308]', option.value === 'AIO_PAY_MAYA' && 'bg-black'), children: _jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: twMerge('w-auto', 'h-[1.063rem]', option.value === 'LIBANGAN_PAY_IN' ||
+                                    option.value === 'VENTAJA_DISBURSEMENT'
+                                    ? 'h-[2.5rem]'
+                                    : '', option.value === 'AIO_GRAB_PAY' && 'h-[3rem] rounded-[4px]', option.value === 'AIO_PALAWAN_PAY' && 'h-[2rem]'), draggable: false }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
 }

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

@@ -1,8 +1,6 @@
 import { z } from 'zod';
 import type { KnownDepositError, KnownWithdrawalError, WithdrawalError } from '../../types';
-export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY", "AIO_EWALLET"]>;
-export declare const AiOeWalletPaymentMethodDefinition: z.ZodEnum<["AIO_GCASH", "AIO_PAY_MAYA", "AIO_GRAB_PAY", "AIO_PALAWAN_PAY"]>;
+export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY", "AIO_GCASH", "AIO_PAY_MAYA", "AIO_GRAB_PAY", "AIO_PALAWAN_PAY"]>;
 export type PaymentMethod = z.infer<typeof PaymentMethodDefinition>;
-export type AiOeWalletPaymentMethod = z.infer<typeof AiOeWalletPaymentMethodDefinition>;
 export type DepositWithdrawalErrors = KnownDepositError | KnownWithdrawalError | WithdrawalError | string;
 export declare function explainError(error?: DepositWithdrawalErrors): string;

package/dist/components/DepositWithdrawal/utils.js

@@ -9,9 +9,6 @@ export const PaymentMethodDefinition = z.enum([
     'LIBANGAN_PAY_IN',
     'VENTAJA_DISBURSEMENT',
     'PISO_PAY',
-    'AIO_EWALLET',
-]);
-export const AiOeWalletPaymentMethodDefinition = z.enum([
     'AIO_GCASH',
     'AIO_PAY_MAYA',
     'AIO_GRAB_PAY',

package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css

@@ -0,0 +1,184 @@
+@keyframes arrow-green-flash {
+  0% {
+    color: #abefc6;
+  }
+  100% {
+    color: #079455;
+  }
+}
+
+.animate-arrow-green-flash-1 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+.animate-arrow-green-flash-2 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-green-flash-3 {
+  animation: arrow-green-flash 0.4s infinite;
+}
+
+@keyframes arrow-red-flash {
+  0%,
+  100% {
+    color: #f97066;
+  }
+  50% {
+    color: #fecdca;
+  }
+}
+
+.animate-arrow-red-flash-1 {
+  animation: arrow-red-flash 0.4s infinite;
+}
+
+.animate-arrow-red-flash-2 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-red-flash-3 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+/* Animated BG */
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.light-rays {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  --first: var(--color-bg-tertiary);
+  --second: var(--color-bg-quaternary);
+}
+
+.light-rays::before,
+.light-rays::after {
+  content: '';
+  position: absolute;
+  top: var(--light-rays-top, 150px);
+  left: calc(50% - 90px);
+  margin: -100vmax;
+  width: 200vmax;
+  height: 200vmax;
+  opacity: 0.6;
+  transform-origin: center;
+}
+
+.light-rays::before {
+  background: conic-gradient(
+    var(--first) 0deg 7.2deg,
+    var(--second) 7.2deg 14.4deg,
+    var(--first) 14.4deg 21.6deg,
+    var(--second) 21.6deg 28.8deg,
+    var(--first) 28.8deg 36deg,
+    var(--second) 36deg 43.2deg,
+    var(--first) 43.2deg 50.4deg,
+    var(--second) 50.4deg 57.6deg,
+    var(--first) 57.6deg 64.8deg,
+    var(--second) 64.8deg 72deg,
+    var(--first) 72deg 79.2deg,
+    var(--second) 79.2deg 86.4deg,
+    var(--first) 86.4deg 93.6deg,
+    var(--second) 93.6deg 100.8deg,
+    var(--first) 100.8deg 108deg,
+    var(--second) 108deg 115.2deg,
+    var(--first) 115.2deg 122.4deg,
+    var(--second) 122.4deg 129.6deg,
+    var(--first) 129.6deg 136.8deg,
+    var(--second) 136.8deg 144deg,
+    var(--first) 144deg 151.2deg,
+    var(--second) 151.2deg 158.4deg,
+    var(--first) 158.4deg 165.6deg,
+    var(--second) 165.6deg 172.8deg,
+    var(--first) 172.8deg 180deg,
+    var(--second) 180deg 187.2deg,
+    var(--first) 187.2deg 194.4deg,
+    var(--second) 194.4deg 201.6deg,
+    var(--first) 201.6deg 208.8deg,
+    var(--second) 208.8deg 216deg,
+    var(--first) 216deg 223.2deg,
+    var(--second) 223.2deg 230.4deg,
+    var(--first) 230.4deg 237.6deg,
+    var(--second) 237.6deg 244.8deg,
+    var(--first) 244.8deg 252deg,
+    var(--second) 252deg 259.2deg,
+    var(--first) 259.2deg 266.4deg,
+    var(--second) 266.4deg 273.6deg,
+    var(--first) 273.6deg 280.8deg,
+    var(--second) 280.8deg 288deg,
+    var(--first) 288deg 295.2deg,
+    var(--second) 295.2deg 302.4deg,
+    var(--first) 302.4deg 309.6deg,
+    var(--second) 309.6deg 316.8deg,
+    var(--first) 316.8deg 324deg,
+    var(--second) 324deg 331.2deg,
+    var(--first) 331.2deg 338.4deg,
+    var(--second) 338.4deg 345.6deg,
+    var(--first) 345.6deg 352.8deg,
+    var(--second) 352.8deg 360deg
+  );
+  animation: rotate 20s linear infinite;
+}
+
+@media (max-width: 1024px) {
+  .light-rays::before,
+  .light-rays::after {
+    left: auto;
+    right: 11%;
+  }
+}
+
+/* ScrollArea.module.css */
+.scrollArea {
+  overflow-y: scroll;
+  padding-right: 4px;
+}
+
+/* WebKit-based browsers */
+.scrollArea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: var(--color-bg-primary-alt);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-quaternary);
+  border-radius: 9999px;
+}
+
+@keyframes waveColor {
+  0%,
+  2.5% {
+    color: var(--wave-highlight-color);
+  }
+  2.51%,
+  100% {
+    color: var(--color-brand-300);
+  }
+}
+
+.animate-wave-color-success {
+  --wave-highlight-color: var(--color-success-800);
+  animation: waveColor 4s ease-in-out infinite;
+}
+
+.animate-wave-color-error {
+  --wave-highlight-color: var(--color-error-600);
+  animation: waveColor 4s ease-in-out infinite;
+}

package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css

@@ -0,0 +1,184 @@
+@keyframes arrow-green-flash {
+  0% {
+    color: #abefc6;
+  }
+  100% {
+    color: #079455;
+  }
+}
+
+.animate-arrow-green-flash-1 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+.animate-arrow-green-flash-2 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-green-flash-3 {
+  animation: arrow-green-flash 0.4s infinite;
+}
+
+@keyframes arrow-red-flash {
+  0%,
+  100% {
+    color: #f97066;
+  }
+  50% {
+    color: #fecdca;
+  }
+}
+
+.animate-arrow-red-flash-1 {
+  animation: arrow-red-flash 0.4s infinite;
+}
+
+.animate-arrow-red-flash-2 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-red-flash-3 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+/* Animated BG */
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.light-rays {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  --first: var(--color-bg-tertiary);
+  --second: var(--color-bg-quaternary);
+}
+
+.light-rays::before,
+.light-rays::after {
+  content: '';
+  position: absolute;
+  top: var(--light-rays-top, 150px);
+  left: calc(50% - 90px);
+  margin: -100vmax;
+  width: 200vmax;
+  height: 200vmax;
+  opacity: 0.6;
+  transform-origin: center;
+}
+
+.light-rays::before {
+  background: conic-gradient(
+    var(--first) 0deg 7.2deg,
+    var(--second) 7.2deg 14.4deg,
+    var(--first) 14.4deg 21.6deg,
+    var(--second) 21.6deg 28.8deg,
+    var(--first) 28.8deg 36deg,
+    var(--second) 36deg 43.2deg,
+    var(--first) 43.2deg 50.4deg,
+    var(--second) 50.4deg 57.6deg,
+    var(--first) 57.6deg 64.8deg,
+    var(--second) 64.8deg 72deg,
+    var(--first) 72deg 79.2deg,
+    var(--second) 79.2deg 86.4deg,
+    var(--first) 86.4deg 93.6deg,
+    var(--second) 93.6deg 100.8deg,
+    var(--first) 100.8deg 108deg,
+    var(--second) 108deg 115.2deg,
+    var(--first) 115.2deg 122.4deg,
+    var(--second) 122.4deg 129.6deg,
+    var(--first) 129.6deg 136.8deg,
+    var(--second) 136.8deg 144deg,
+    var(--first) 144deg 151.2deg,
+    var(--second) 151.2deg 158.4deg,
+    var(--first) 158.4deg 165.6deg,
+    var(--second) 165.6deg 172.8deg,
+    var(--first) 172.8deg 180deg,
+    var(--second) 180deg 187.2deg,
+    var(--first) 187.2deg 194.4deg,
+    var(--second) 194.4deg 201.6deg,
+    var(--first) 201.6deg 208.8deg,
+    var(--second) 208.8deg 216deg,
+    var(--first) 216deg 223.2deg,
+    var(--second) 223.2deg 230.4deg,
+    var(--first) 230.4deg 237.6deg,
+    var(--second) 237.6deg 244.8deg,
+    var(--first) 244.8deg 252deg,
+    var(--second) 252deg 259.2deg,
+    var(--first) 259.2deg 266.4deg,
+    var(--second) 266.4deg 273.6deg,
+    var(--first) 273.6deg 280.8deg,
+    var(--second) 280.8deg 288deg,
+    var(--first) 288deg 295.2deg,
+    var(--second) 295.2deg 302.4deg,
+    var(--first) 302.4deg 309.6deg,
+    var(--second) 309.6deg 316.8deg,
+    var(--first) 316.8deg 324deg,
+    var(--second) 324deg 331.2deg,
+    var(--first) 331.2deg 338.4deg,
+    var(--second) 338.4deg 345.6deg,
+    var(--first) 345.6deg 352.8deg,
+    var(--second) 352.8deg 360deg
+  );
+  animation: rotate 20s linear infinite;
+}
+
+@media (max-width: 1024px) {
+  .light-rays::before,
+  .light-rays::after {
+    left: auto;
+    right: 11%;
+  }
+}
+
+/* ScrollArea.module.css */
+.scrollArea {
+  overflow-y: scroll;
+  padding-right: 4px;
+}
+
+/* WebKit-based browsers */
+.scrollArea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: var(--color-bg-primary-alt);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-quaternary);
+  border-radius: 9999px;
+}
+
+@keyframes waveColor {
+  0%,
+  2.5% {
+    color: var(--wave-highlight-color);
+  }
+  2.51%,
+  100% {
+    color: var(--color-brand-300);
+  }
+}
+
+.animate-wave-color-success {
+  --wave-highlight-color: var(--color-success-800);
+  animation: waveColor 4s ease-in-out infinite;
+}
+
+.animate-wave-color-error {
+  --wave-highlight-color: var(--color-error-600);
+  animation: waveColor 4s ease-in-out infinite;
+}

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

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

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

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { differenceInYears, format, isSameDay, isValid, parse } from 'date-fns';
+import { isNil, omitBy, size } from 'lodash-es';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import invariant from 'tiny-invariant';
+import { z } from 'zod';
+import { useAccountQuery } from '../../../client/hooks/useAccountQuery.js';
+import { useUpdateAccountMutation } from '../../../client/hooks/useUpdateAccountMutation.js';
+import { toaster } from '../../../client/utils/toaster.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
+import { Field } from '../../../ui/Field/index.js';
+import { useKYCDefaultContext } from './KYCDefaultContext.js';
+const definition = z.object({
+    realName: z
+        .string()
+        .min(3, 'Name must be 3 or more characters')
+        .max(50, 'Name must not be more than 50 characters')
+        .regex(/^[a-z0-9 ]+$/gi, 'Name must not contain special characters')
+        .trim(),
+    birthDay: z
+        .string()
+        .min(1, 'Date of birth is required')
+        .superRefine((value, ctx) => {
+        const dob = parse(value, 'yyyy-MM-dd', new Date());
+        if (!isValid(dob)) {
+            return ctx.addIssue({
+                code: z.ZodIssueCode.invalid_date,
+            });
+        }
+        const now = new Date();
+        const age = differenceInYears(now, dob);
+        if (age < 21) {
+            return ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: 'You must be at least 21 years old',
+            });
+        }
+    }),
+    branchCode: z.string().min(4).max(10).optional().or(z.literal('')),
+});
+export function BasicInformation() {
+    const kyc = useKYCDefaultContext();
+    const form = useForm({
+        resolver: zodResolver(definition),
+        mode: 'all',
+        defaultValues: {
+            birthDay: '',
+            branchCode: '',
+            realName: '',
+        },
+    });
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const stepCompleted = account != null && account.realName != null && account.birthDay != null;
+    useEffect(() => {
+        if (stepCompleted)
+            kyc.setStep(2);
+    }, [stepCompleted, kyc]);
+    useEffect(() => {
+        if (account) {
+            form.reset({
+                realName: account.realName ?? '',
+                birthDay: account.birthDay
+                    ? format(account.birthDay, 'yyyy-MM-dd')
+                    : '',
+            });
+        }
+    }, [account, form]);
+    const updateAccountMutation = useUpdateAccountMutation({
+        onError(error) {
+            toaster.error({
+                title: 'Error',
+                description: error.message,
+            });
+        },
+        onSuccess() {
+            kyc.setStep(2);
+            toaster.success({
+                title: 'Success',
+                description: 'Basic information has been set successfully.',
+            });
+        },
+    });
+    return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center font-semibold text-lg", children: "Basic Information" }), _jsx(Dialog.Description, { className: "mt-xs text-center text-sm text-text-secondary-700", children: "Enter your basic details for identification and communication." }), _jsxs("form", { className: "mt-3", onSubmit: form.handleSubmit((data) => {
+                    invariant(account);
+                    const input = omitBy({
+                        realName: account.realName === data.realName ? undefined : data.realName,
+                        birthDay: account.birthDay && isSameDay(data.birthDay, account.birthDay)
+                            ? undefined
+                            : format(data.birthDay, 'yyyy-MM-dd'),
+                    }, isNil);
+                    if (size(input) === 0)
+                        return kyc.setStep(2);
+                    updateAccountMutation.mutate(input);
+                }), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!accountQuery.data?.realName, children: [_jsx(Field.Label, { children: "Real Name" }), _jsx(Field.Input, { placeholder: "Enter your real name", ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-3", invalid: !!form.formState.errors.branchCode, readOnly: !!accountQuery.data?.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 })] }), _jsx(Button, { type: "submit", className: "mt-8", disabled: accountQuery.isLoading ||
+                            updateAccountMutation.isPending ||
+                            stepCompleted, children: "Continue" })] })] }));
+}

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

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

package/dist/components/KYC/KYCVerificationStatus.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+const Component = dynamic(() => import('./KYCVerificationStatus.lazy.js').then((m) => m.KYCVerificationStatus), {
+    ssr: false,
+    loading: () => null,
+});
+export function KYCVerificationStatus() {
+    return _jsx(Component, {});
+}

package/dist/components/KYC/KYCVerificationStatus.lazy.d.ts

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