@opexa/portal-components 0.0.898 → 0.0.900

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

@@ -90,6 +90,8 @@ export interface GlobalStore {
     pendingBonus: HasPendingBonusStore;
     kycVerificationStatus: PopupStore;
     bankInformationDetails: PopupStore;
+    isNonRegulated: boolean;
+    setIsNonRegulated: (isNonRegulated: boolean) => void;
 }
 export declare const useGlobalStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<GlobalStore>, "setState" | "devtools"> & {
     setState(partial: GlobalStore | Partial<GlobalStore> | ((state: GlobalStore) => GlobalStore | Partial<GlobalStore>), replace?: false | undefined, action?: (string | {

package/dist/client/hooks/useGlobalStore.js

@@ -478,4 +478,9 @@ export const useGlobalStore = create()(devtools(subscribeWithSelector((set) => (
         })),
         '~touched': false,
     },
+    isNonRegulated: false,
+    setIsNonRegulated: (isNonRegulated) => set((state) => ({
+        ...state,
+        isNonRegulated,
+    })),
 }))));

package/dist/components/Banner/Banner.client.d.ts

@@ -0,0 +1,12 @@
+import type { ImageProps } from 'next/image';
+export interface BannerEntry {
+    src: ImageProps['src'];
+    redirectUrl?: string;
+}
+export interface BannerProps {
+    banners: BannerEntry[];
+    imageWidth?: number | [mobile: number, desktop: number];
+    imageHeight?: number | [mobile: number, desktop: number];
+    className?: string;
+}
+export declare function Banner__client(props: BannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Banner/Banner.client.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import emblaCarouselAutoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel, {} from 'embla-carousel-react';
+import isMobile from 'is-mobile';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Fragment, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { dataAttr } from '../../utils/dataAttr.js';
+export function Banner__client(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop: true,
+        align: 'start',
+    }, [
+        emblaCarouselAutoplay({
+            playOnInit: true,
+            delay: 5000,
+        }),
+    ]);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    useEffect(() => {
+        function handler(detail) {
+            setCurrentIndex(detail?.selectedScrollSnap() ?? 0);
+        }
+        emblaApi?.on('scroll', handler);
+        emblaApi?.on('init', handler);
+        return () => {
+            emblaApi?.on('init', handler);
+            emblaApi?.off('scroll', handler);
+        };
+    }, [emblaApi]);
+    const imageWidth = !props.imageWidth
+        ? [400, 1200]
+        : Array.isArray(props.imageWidth)
+            ? props.imageWidth
+            : [props.imageWidth, props.imageWidth];
+    const imageHeight = !props.imageHeight
+        ? [225, 300]
+        : Array.isArray(props.imageHeight)
+            ? props.imageHeight
+            : [props.imageHeight, props.imageHeight];
+    return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
+                        const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0 }));
+                        return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
+                    }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
+                        emblaApi?.scrollTo(index);
+                    }, "aria-label": `Go to slide ${index + 1}`, "data-active": dataAttr(index === currentIndex) }, index))) })] }));
+}

package/dist/components/Banner/Banner.js

@@ -44,7 +44,7 @@ export function Banner(props) {
             ? props.imageHeight
             : [props.imageHeight, props.imageHeight];
     return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
-                        const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0 }));
+                        const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0, fetchPriority: index === 0 ? 'high' : 'low', loading: index === 0 ? 'eager' : 'lazy' }));
                         return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
                     }) }) }), _jsx("div", { className: "-translate-x-1/2 absolute bottom-lg left-1/2 flex w-fit gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "size-3 ui-active:w-9 shrink-0 rounded-full border border-white bg-gray-300 ui-active:bg-brand-500 transition-all duration-300", onClick: () => {
                         emblaApi?.scrollTo(index);

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/DepositWithdrawal/Withdrawal/VentajaWithdrawal/PaymentMethods.d.ts

@@ -0,0 +1,10 @@
+import { type PaymentMethodCrazywin } from '../../utils';
+interface PaymentMethodsProps {
+    value?: PaymentMethodCrazywin;
+    onChange?: (value: PaymentMethodCrazywin) => void;
+    defaultValue?: PaymentMethodCrazywin;
+    options?: PaymentMethodCrazywin[];
+    className?: string;
+}
+export declare function PaymentMethods(props: PaymentMethodsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { useControllableState } from '../../../../client/hooks/useControllableState.js';
+import { CheckIcon } from '../../../../icons/CheckIcon.js';
+import gcash from '../../../../images/gcash.png';
+import instapay from '../../../../images/instapay.png';
+import maya from '../../../../images/maya.png';
+import { Checkbox } from '../../../../ui/Checkbox/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { PaymentMethodDefinitionCrazywin, } from '../../utils.js';
+const OPTIONS = [
+    {
+        value: 'INSTAPAY',
+        label: 'Instapay',
+        image: instapay,
+    },
+    {
+        value: 'GCASH',
+        label: 'GCash',
+        image: gcash,
+    },
+    {
+        value: 'MAYA',
+        label: 'Maya',
+        image: maya,
+    },
+];
+export function PaymentMethods(props) {
+    const options = props.options?.length
+        ? OPTIONS.filter((option) => props.options?.includes(option.value))
+        : OPTIONS;
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: options[0].value,
+        onChange: props.onChange,
+    });
+    return (_jsxs("div", { className: "mb-6", children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: "Available payment methods" }) }), _jsx(Checkbox.Group, { value: [value], onValueChange: (newValue) => {
+                    const lastValue = newValue.at(-1);
+                    if (!lastValue)
+                        return;
+                    setValue(PaymentMethodDefinitionCrazywin.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: [_jsx("div", { className: twMerge('rounded-xs bg-white px-sm py-[0.688rem]', option.value === 'GCASH' && 'bg-[#017EFF]'), 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 }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
+}

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

@@ -29,10 +29,10 @@ import { Select } from '../../../../ui/Select/index.js';
 import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
-import { PaymentMethods } from '../../PaymentMethods.js';
 import { ActiveTurnoverRequirement } from '../ActiveTurnoverRequirement.js';
 import { RequireFirstDeposit } from '../RequireFirstDeposit.js';
 import { TransactionPasswordNotSet } from '../TransactionPasswordNotSet.js';
+import { PaymentMethods } from './PaymentMethods.js';
 export function VentajaWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const [paymentMethod, setPaymentMethod] = useState('INSTAPAY');

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

@@ -2,5 +2,7 @@ import { z } from 'zod';
 import type { KnownDepositError, KnownWithdrawalError, WithdrawalError } from '../../types';
 export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "GCASH_STANDARD_CASH_IN", "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", "GCASH_WEBPAY", "MAYA_WEBPAY", "INSTAPAY_GCASH", "INSTAPAY_PAYMAYA", "AURIX_PAY_GCASH", "AURIX_PAY_PAYMAYA", "AURIX_PAY_GRAB_PAY", "AURIX_PAY_QRPH"]>;
 export type PaymentMethod = z.infer<typeof PaymentMethodDefinition>;
+export declare const PaymentMethodDefinitionCrazywin: z.ZodEnum<["GCASH", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY"]>;
+export type PaymentMethodCrazywin = z.infer<typeof PaymentMethodDefinitionCrazywin>;
 export type DepositWithdrawalErrors = KnownDepositError | KnownWithdrawalError | WithdrawalError | string;
 export declare function explainError(error?: DepositWithdrawalErrors): string;

package/dist/components/DepositWithdrawal/utils.js

@@ -23,6 +23,17 @@ export const PaymentMethodDefinition = z.enum([
     'AURIX_PAY_GRAB_PAY',
     'AURIX_PAY_QRPH',
 ]);
+export const PaymentMethodDefinitionCrazywin = z.enum([
+    'GCASH',
+    'MAYA_APP',
+    'MAYA',
+    'ONLINE_BANK',
+    'QRPH',
+    'INSTAPAY',
+    'LIBANGAN_PAY_IN',
+    'VENTAJA_DISBURSEMENT',
+    'PISO_PAY',
+]);
 const errorMap = {
     DAILY_PURCHASE_OR_DEPOSIT_LIMIT_EXCEEDED: 'You have exceeded your daily purchase or deposit limit. Please try again tomorrow.',
     INSUFFICIENT_BALANCE: 'You have insufficient balance for this transaction.',

package/dist/components/DigitainLauncher/Loading.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Loading() {
-    return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "border-blue-500 h-10 w-10 animate-spin rounded-full border-4 border-t-transparent" }), _jsx("p", { className: "text-gray-700 text-lg font-medium", children: "Loading Sports Book\u2026" })] }) }));
+    return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-blue-500 border-t-transparent" }), _jsx("p", { className: "font-medium text-gray-700 text-lg", children: "Loading Sports Book\u2026" })] }) }));
 }

package/dist/components/ForgotPassword/Crazywin/ForgotPassword.module.css

@@ -1,43 +1,43 @@
-  .card {
-    --gradient-bg: radial-gradient(103.87% 100% at 50.15% 0%, #072b37 20.3%, #051125 100%);
-
-    --gradient-border-top: radial-gradient(
-      139.23% 113.41% at 50.14% 0%,
-      #8affdc 0.49%,
-      rgba(138, 255, 220, 0) 33.03%
-    );
-
-    --gradient-border-bottom: radial-gradient(
-      42.09% 54.21% at 50.14% 100%,
-      #8affdc 5.74%,
-      rgba(138, 255, 220, 0) 93.84%
-    );
-
-    position: relative;
-    background: var(--gradient-bg);
-    box-shadow: 0px 4px 14px 6px rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(25px);
-    border-radius: 1.25em;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .card::after,
-  .card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    border: 0.5px solid transparent;
-    border-image-slice: 1;
-  }
-
-  .card::before {
-    border-image-source: var(--gradient-border-bottom);
-  }
-
-  .card::after {
-    border-image-source: var(--gradient-border-top);
+  .card {
+    --gradient-bg: radial-gradient(103.87% 100% at 50.15% 0%, #072b37 20.3%, #051125 100%);
+
+    --gradient-border-top: radial-gradient(
+      139.23% 113.41% at 50.14% 0%,
+      #8affdc 0.49%,
+      rgba(138, 255, 220, 0) 33.03%
+    );
+
+    --gradient-border-bottom: radial-gradient(
+      42.09% 54.21% at 50.14% 100%,
+      #8affdc 5.74%,
+      rgba(138, 255, 220, 0) 93.84%
+    );
+
+    position: relative;
+    background: var(--gradient-bg);
+    box-shadow: 0px 4px 14px 6px rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(25px);
+    border-radius: 1.25em;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .card::after,
+  .card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    border: 0.5px solid transparent;
+    border-image-slice: 1;
+  }
+
+  .card::before {
+    border-image-source: var(--gradient-border-bottom);
+  }
+
+  .card::after {
+    border-image-source: var(--gradient-border-top);
   }

package/dist/components/GameLaunch/GameLaunchTrigger.js

@@ -26,6 +26,7 @@ export function GameLaunchTrigger(props) {
         signIn: ctx.signIn,
         gameLaunch: ctx.gameLaunch,
         kycVerificationStatus: ctx.kycVerificationStatus,
+        isNonRegulated: ctx.isNonRegulated,
     })));
     const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
     const currentHour = new Date().getHours();
@@ -143,7 +144,8 @@ export function GameLaunchTrigger(props) {
                 return props.onClick?.(e);
             }
             //handle new kyc process to play only on verified members only
-            if (!bypassKycCheck &&
+            if (!globalStore.isNonRegulated &&
+                !bypassKycCheck &&
                 (verificationStatus === 'PENDING' ||
                     verificationStatus === 'REJECTED' ||
                     verificationStatus === 'UNVERIFIED' ||