@opexa/portal-components 0.0.241 → 0.0.243

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

@@ -7,6 +7,7 @@ export interface CameraError<T extends string = never> {
 export interface CameraData {
     url: string;
     file: File;
+    image: HTMLImageElement;
 }
 export interface CameraCropPoints {
     x: number;
@@ -29,11 +30,15 @@ export interface UseCameraReturn<T extends string = never> {
     data: CameraData | null;
     error: CameraError<T> | null;
     loading: boolean;
+    snapping: boolean;
     videoRef: React.RefObject<HTMLVideoElement | null>;
     videoProps: ComponentPropsWithRef<'video'>;
 }
+export interface CameraTransformData extends CameraData {
+    canvas: HTMLCanvasElement;
+}
 export interface UseCameraOptions<T extends string = never> extends MediaStreamConstraints {
-    transform?(data: CameraData): CameraData | Promise<CameraData>;
+    transform?(data: CameraTransformData): CameraData | Promise<CameraData>;
     validate?(data: CameraData): CameraError<T> | void | null | undefined | Promise<CameraError<T> | void | null | undefined>;
 }
 export declare function useCamera<T extends string = never>(options?: UseCameraOptions<T>): UseCameraReturn<T>;

package/dist/client/hooks/useCamera.js

@@ -1,6 +1,7 @@
 import { isBoolean, isFunction, isObject } from 'lodash-es';
 import { useCallback, useMemo, useRef, useState, } from 'react';
 import invariant from 'tiny-invariant';
+import { useMediaQuery } from 'usehooks-ts';
 export function useCamera(options = {}) {
     const { transform, validate, ...constraints } = options;
     const videoRef = useRef(null);
@@ -8,6 +9,8 @@ export function useCamera(options = {}) {
     const [data, setData] = useState(null);
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(false);
+    const [snapping, setSnapping] = useState(false);
+    const desktop = useMediaQuery('(min-width: 1024px)');
     const [mirror, setMirror] = useState(false);
     const open = useCallback(async () => {
         setData(null);
@@ -31,10 +34,18 @@ export function useCamera(options = {}) {
                 video: {
                     facingMode: 'user',
                     noiseSuppression: true,
+                    width: {
+                        ideal: 9999,
+                    },
+                    height: {
+                        ideal: 9999,
+                    },
+                    aspectRatio: {
+                        exact: desktop ? 16 / 9 : 4 / 3,
+                    },
                     frameRate: {
-                        min: 15,
-                        max: 60,
-                        ideal: 30,
+                        max: 120,
+                        ideal: 90,
                     },
                     ...(isBoolean(constraints.video) ? {} : constraints.video),
                 },
@@ -74,10 +85,12 @@ export function useCamera(options = {}) {
         finally {
             setLoading(false);
         }
-    }, [constraints, setData, setError]);
+    }, [constraints, desktop]);
     const close = useCallback(() => {
         setData(null);
         setError(null);
+        setLoading(false);
+        setSnapping(false);
         return new Promise((resolve) => {
             stream.current?.getTracks().forEach((track) => track.stop());
             videoRef.current?.pause();
@@ -87,6 +100,7 @@ export function useCamera(options = {}) {
     const snap = useCallback(async (opts = {}) => {
         setData(null);
         setError(null);
+        setSnapping(true);
         const video = videoRef.current;
         const canvas = document.createElement('canvas');
         const context = canvas.getContext('2d');
@@ -98,12 +112,18 @@ export function useCamera(options = {}) {
         const hdResolution = video.videoWidth >= 1280 && video.videoHeight >= 720;
         const highResolution = video.videoWidth >= 1920 && video.videoHeight >= 1080;
         const scaleFactor = lowResolution
-            ? (opts.scale ?? 2)
+            ? (opts.scale ?? (opts.crop ? 2.15 : 2))
             : highResolution
-                ? 1
+                ? opts.crop
+                    ? 1.25
+                    : 1.15
                 : hdResolution
-                    ? 1.15
-                    : 1.25;
+                    ? opts.crop
+                        ? 1.5
+                        : 1.25
+                    : opts.crop
+                        ? 1.5
+                        : 2;
         let x = 0;
         let y = 0;
         let w = video.videoWidth;
@@ -127,6 +147,7 @@ export function useCamera(options = {}) {
         context.drawImage(video, x, y, w, h, 0, 0, w * scaleFactor, h * scaleFactor);
         canvas.toBlob(async (blob) => {
             if (!blob) {
+                setSnapping(false);
                 return setError({
                     name: 'CameraError',
                     message: "'canvas.toBlob' failed to create blob",
@@ -138,21 +159,46 @@ export function useCamera(options = {}) {
                 endings: 'native',
                 lastModified: Date.now(),
             });
-            const data = { url, file };
+            const image = new Image();
+            image.src = url;
+            image.alt = '';
+            image.width = canvas.width;
+            image.height = canvas.height;
+            if (!image.complete || image.naturalWidth === 0) {
+                await new Promise((resolve, reject) => {
+                    image.onload = () => resolve();
+                    image.onerror = () => reject();
+                });
+            }
+            const data = isFunction(transform)
+                ? await transform({
+                    url,
+                    file,
+                    image,
+                    canvas,
+                })
+                : {
+                    url,
+                    file,
+                    image,
+                };
             const error = await validate?.(data);
             if (error)
                 setError(error);
             else
-                setData(isFunction(transform) ? await transform(data) : data);
+                setData(data);
+            setSnapping(false);
         }, 'image/jpeg', 1);
     }, [mirror, transform, validate]);
     const reset = useCallback(() => {
         setData(null);
         setError(null);
         setLoading(false);
+        setSnapping(false);
         return Promise.resolve();
     }, [setData, setError]);
     const reopen = useCallback(async () => {
+        setSnapping(false);
         setLoading(true);
         close();
         await sleep();
@@ -171,8 +217,6 @@ export function useCamera(options = {}) {
             position: 'relative',
             boxSizing: 'border-box',
             background: 'transparent',
-            objectFit: 'cover',
-            objectPosition: 'center',
             transform: mirror ? 'scaleX(-1)' : 'none',
         },
     }), [mirror]);
@@ -185,6 +229,7 @@ export function useCamera(options = {}) {
         data,
         error,
         loading,
+        snapping,
         videoRef,
         videoProps,
     };

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

@@ -1,5 +1,21 @@
-export declare const FEATURE_FLAG_KEY = "FEATURE_FLAG_ENABLED";
-export declare const useFeatureFlag: () => {
-    featureFlagEnabled: boolean;
-    setFeatureFlagEnabled: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};
+export interface UseFeatureFlagReturn {
+    enabled: boolean;
+    enable(): Promise<void>;
+    disable(): Promise<void>;
+}
+export declare function useFeatureFlag(): UseFeatureFlagReturn;
+interface FeatureFlagEventDetail {
+    enabled: boolean;
+}
+type FeatureFlagEvent = CustomEvent<FeatureFlagEventDetail>;
+interface EventsMap {
+    'web-portal::feature-flag': FeatureFlagEvent;
+}
+type Listener<K extends keyof EventsMap> = (this: Window, event: EventsMap[K]) => void;
+declare global {
+    interface Window {
+        addEventListener<T extends keyof EventsMap>(type: T, listener: Listener<T>): void;
+        removeEventListener<K extends keyof EventsMap>(type: K, listener: Listener<K>): void;
+    }
+}
+export {};

package/dist/client/hooks/useFeatureFlag.js

@@ -1,16 +1,56 @@
 'use client';
 import { useEffect, useState } from 'react';
-export const FEATURE_FLAG_KEY = 'FEATURE_FLAG_ENABLED';
-export const useFeatureFlag = () => {
-    const [featureFlagEnabled, setFeatureFlagEnabled] = useState(false);
+import { FEATURE_FLAG_LOCAL_STORAGE_KEY } from '../../constants/index.js';
+const event = new CustomEvent('web-portal::feature-flag', {
+    detail: {
+        enabled: false,
+    },
+    bubbles: true,
+    cancelable: false,
+});
+export function useFeatureFlag() {
+    const [enabled, setEnabled] = useState(false);
+    function enable() {
+        return new Promise((resolve) => {
+            const event = new CustomEvent('web-portal::feature-flag', {
+                detail: {
+                    enabled: true,
+                },
+                bubbles: true,
+                cancelable: false,
+            });
+            window.dispatchEvent(event);
+            resolve();
+        });
+    }
+    function disable() {
+        return new Promise((resolve) => {
+            window.dispatchEvent(event);
+            resolve();
+        });
+    }
     useEffect(() => {
-        const storedFlag = localStorage.getItem(FEATURE_FLAG_KEY);
-        if (storedFlag !== null) {
-            setFeatureFlagEnabled(storedFlag === 'true');
+        if (localStorage.getItem(FEATURE_FLAG_LOCAL_STORAGE_KEY) != null) {
+            setEnabled(true);
         }
     }, []);
+    useEffect(() => {
+        const handle = (event) => {
+            if (event.detail.enabled) {
+                setEnabled(true);
+                localStorage.setItem(FEATURE_FLAG_LOCAL_STORAGE_KEY, '');
+            }
+            else {
+                setEnabled(false);
+                localStorage.removeItem(FEATURE_FLAG_LOCAL_STORAGE_KEY);
+            }
+        };
+        window.addEventListener('web-portal::feature-flag', handle);
+        return () => window.removeEventListener('web-portal::feature-flag', handle);
+    }, []);
     return {
-        featureFlagEnabled,
-        setFeatureFlagEnabled,
+        enabled,
+        enable,
+        disable,
     };
-};
+}

package/dist/components/Bonus/Bonus.client.js

@@ -13,7 +13,7 @@ import piggyBank from '../../images/piggy-bank.png';
 import { Badge } from '../../ui/Badge/index.js';
 import { Collapsible } from '../../ui/Collapsible/index.js';
 import { Progress } from '../../ui/Progress/index.js';
-import { Prose } from '../../ui/Prose.js';
+import { Prose } from '../../ui/Prose/index.js';
 import { capitalize } from '../../utils/capitalize.js';
 import { formatNumber } from '../../utils/formatNumber.js';
 import { parseDecimal } from '../../utils/parseDecimal.js';

package/dist/components/Cashback/Cashback.client.js

@@ -11,7 +11,7 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
 import { Button } from '../../ui/Button/index.js';
-import { Prose } from '../../ui/Prose.js';
+import { Prose } from '../../ui/Prose/index.js';
 export function Cashback__client(props) {
     const availablePromosQuery = useAvailablePromosQuery();
     const cashbackQuery = useCashbackQuery(props.id);

package/dist/components/CustomPromo/CustomPromo.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import Image from 'next/image';
 import Link from 'next/link';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
-import { Prose } from '../../ui/Prose.js';
+import { Prose } from '../../ui/Prose/index.js';
 import { stripTags } from '../../utils/stripTags.js';
 export function CustomPromo(props) {
     return (_jsxs(_Fragment, { children: [_jsx("meta", { name: "description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "og:title", content: props.promo.name }), _jsx("meta", { name: "og:description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "og:image", content: props.promo.banner }), _jsx("meta", { name: "twitter:title", content: props.promo.name }), _jsx("meta", { name: "twitter:description", content: stripTags(props.promo.description) }), _jsx("meta", { name: "twitter:image", content: props.promo.banner }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), _jsx(Image, { src: props.promo.banner, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: props.promo.name }), _jsx(Prose, { className: "mt-2xl lg:mt-6", dangerouslySetInnerHTML: {

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

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

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

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

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

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

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

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

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

@@ -28,6 +28,7 @@ import { Select } from '../../../../ui/Select/index.js';
 import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
+import { explainError } from '../../utils.js';
 import { TransactionPasswordNotSet } from '../TransactionPasswordNotSet.js';
 export function InstapayWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
@@ -148,7 +149,7 @@ export function InstapayWithdrawal() {
                 }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
                                                         "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
                                                         'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
-                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                        explainError(createWithdrawalMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
                                                     api.setOpen(false);
                                                 }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

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

@@ -1,3 +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", "VENTAJA", "PISO_PAY"]>;
 export type PaymentMethod = z.infer<typeof PaymentMethodDefinition>;
+export type DepositWithdrawalErrors = KnownDepositError | KnownWithdrawalError | WithdrawalError | string;
+export declare function explainError(error?: DepositWithdrawalErrors): string;

package/dist/components/DepositWithdrawal/utils.js

@@ -10,3 +10,34 @@ export const PaymentMethodDefinition = z.enum([
     'VENTAJA',
     '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.',
+    DEPOSIT_CREATION_REQUEST_FAILED: 'Failed to create deposit request. Please try again later.',
+    DEPOSIT_EXECUTION_REQUEST_FAILED: 'Failed to execute deposit request. Please try again later.',
+    FAILED_TO_PROCESS_PAYMENT: 'Failed to process payment. Please try again later.',
+    MINIMUM_DEPOSIT_AMOUNT_NOT_MET: 'The minimum deposit amount is not met. Please enter a valid amount.',
+    REQUEST_SESSION_EXPIRED: 'Your session has expired. Please refresh the page and try again.',
+    REQUEST_TIMEOUT: 'The request timed out. Please try again later.',
+    SYSTEM_CANCELLATION: 'The transaction was cancelled by the system. Please try again later.',
+    UNEXPECTED_ERROR: 'An unexpected error occurred. Please try again later.',
+    UNTOUCHED: 'The transaction has not been touched yet. Please try again later.',
+    WITHDRAWAL_ACCOUNT_EMPTY: 'Your withdrawal account is empty. Please add a withdrawal account before proceeding.',
+    WITHDRAWAL_CREATION_REQUEST_FAILED: 'Failed to create withdrawal request. Please try again later.',
+    WITHDRAWAL_EXECUTION_REQUEST_FAILED: 'Failed to execute withdrawal request. Please try again later.',
+    AccountNotVerifiedError: 'Account not verified. Please complete the verification process.',
+    TransactionPasswordNotSetError: 'Transaction password not set. Please set your transaction password before proceeding.',
+    InvalidTransactionPasswordError: 'Invalid transaction password. Please try again.',
+    InvalidWithdrawalAmountError: 'Invalid withdrawal amount. Please enter a valid amount.',
+    MobileNumberNotVerifiedError: 'Mobile number not verified. Please verify your mobile number before proceeding.',
+    NotEnoughBalanceError: 'Not enough balance to complete the transaction. Please add funds to your account.',
+    ReCAPTCHAVerificationFailedError: 'reCAPTCHA verification failed. Please try again.',
+    WalletDoesNotExistError: 'Wallet does not exist. Please check your wallet settings or contact support.',
+    WithdrawalDailyLimitExceededError: 'You have exceeded your daily withdrawal limit. Please try again tomorrow.',
+};
+export function explainError(error) {
+    if (error && errorMap[error]) {
+        return errorMap[error];
+    }
+    return 'An unexpected error occurred. Please try again later.';
+}

package/dist/components/GameLaunch/GameLaunch.lazy.js

@@ -22,7 +22,7 @@ import { AlertDialog } from '../../ui/AlertDialog/index.js';
 import { Button } from '../../ui/Button/index.js';
 import { IconButton } from '../../ui/IconButton/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { Presence } from '../../ui/Presence.js';
+import { Presence } from '../../ui/Presence/index.js';
 export function GameLaunch() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         gameLaunch: ctx.gameLaunch,

package/dist/components/GamesSearch/GamesSearch.js

@@ -10,7 +10,7 @@ import { SearchLgIcon } from '../../icons/SearchLgIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Combobox } from '../../ui/Combobox/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { Presence } from '../../ui/Presence.js';
+import { Presence } from '../../ui/Presence/index.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
 export function GamesSearch(props) {