@opexa/portal-components 0.0.259 → 0.0.261

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

@@ -9,22 +9,10 @@ export interface CameraData {
     file: File;
     image: HTMLImageElement;
 }
-export interface CameraCropPoints {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export type ScaleFactor = 1 | 1.15 | 1.25 | 1.5 | 1.75 | 2 | 2.15 | 2.25 | 2.5 | 2.75 | 3;
-export interface CameraSnapOptions {
-    crop?: CameraCropPoints;
-    /** @default 2 */
-    scale?: ScaleFactor;
-}
 export interface UseCameraReturn<T extends string = never> {
     open(): Promise<void>;
     close(): Promise<void>;
-    snap(options?: CameraSnapOptions): Promise<void>;
+    snap(): Promise<void>;
     reopen(): Promise<void>;
     reset(): Promise<void>;
     data: CameraData | null;
@@ -34,11 +22,18 @@ export interface UseCameraReturn<T extends string = never> {
     videoRef: React.RefObject<HTMLVideoElement | null>;
     videoProps: ComponentPropsWithRef<'video'>;
 }
-export interface CameraTransformData extends CameraData {
+export type CameraTransformResult<T extends string = never> = {
+    ok: false;
+    error: CameraError<T>;
+} | {
+    ok: true;
+    data: CameraData;
+};
+export interface CameraTransformContext extends CameraData {
+    video: HTMLVideoElement;
     canvas: HTMLCanvasElement;
 }
 export interface UseCameraOptions<T extends string = never> extends MediaStreamConstraints {
-    transform?(data: CameraTransformData): CameraData | Promise<CameraData>;
-    validate?(data: CameraData): CameraError<T> | void | null | undefined | Promise<CameraError<T> | void | null | undefined>;
+    transform?(context: CameraTransformContext): CameraTransformResult<T> | Promise<CameraTransformResult<T>>;
 }
 export declare function useCamera<T extends string = never>(options?: UseCameraOptions<T>): UseCameraReturn<T>;

package/dist/client/hooks/useCamera.js

@@ -1,9 +1,8 @@
-import { isBoolean, isFunction, isObject } from 'lodash-es';
+import { isBoolean, isObject } from 'lodash-es';
 import { useCallback, useEffect, 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);
     const streamRef = useRef(null);
     const [data, setData] = useState(null);
@@ -30,7 +29,7 @@ export function useCamera(options = {}) {
             const result = await navigator.mediaDevices.getUserMedia({
                 audio: false,
                 preferCurrentTab: true,
-                ...constraints,
+                ...options,
                 video: {
                     facingMode: 'user',
                     noiseSuppression: true,
@@ -47,14 +46,14 @@ export function useCamera(options = {}) {
                         max: 120,
                         ideal: 90,
                     },
-                    ...(isBoolean(constraints.video) ? {} : constraints.video),
+                    ...(isBoolean(options.video) ? {} : options.video),
                 },
             });
             node.srcObject = result;
             streamRef.current = result;
-            setMirror(!isObject(constraints.video)
+            setMirror(!isObject(options.video)
                 ? true
-                : constraints.video.facingMode === 'environment'
+                : options.video.facingMode === 'environment'
                     ? false
                     : true);
         }
@@ -85,7 +84,7 @@ export function useCamera(options = {}) {
         finally {
             setLoading(false);
         }
-    }, [constraints, desktop]);
+    }, [options, desktop]);
     const close = useCallback(() => {
         setData(null);
         setError(null);
@@ -97,7 +96,7 @@ export function useCamera(options = {}) {
             resolve();
         });
     }, [setData, setError]);
-    const snap = useCallback(async (opts = {}) => {
+    const snap = useCallback(async () => {
         setData(null);
         setError(null);
         setSnapping(true);
@@ -107,44 +106,15 @@ export function useCamera(options = {}) {
         invariant(video, 'Could not find video element');
         invariant(context, 'Could not get canvas context');
         video.currentTime = 1;
-        const videoRect = video.getBoundingClientRect();
-        const lowResolution = video.videoWidth < 640 || video.videoHeight < 480;
-        const hdResolution = video.videoWidth >= 1280 && video.videoHeight >= 720;
-        const highResolution = video.videoWidth >= 1920 && video.videoHeight >= 1080;
-        const scaleFactor = lowResolution
-            ? (opts.scale ?? (opts.crop ? 2.15 : 2))
-            : highResolution
-                ? opts.crop
-                    ? 1.25
-                    : 1.15
-                : hdResolution
-                    ? opts.crop
-                        ? 1.5
-                        : 1.25
-                    : opts.crop
-                        ? 1.5
-                        : 2;
-        let x = 0;
-        let y = 0;
-        let w = video.videoWidth;
-        let h = video.videoHeight;
-        if (opts.crop) {
-            const scaleX = video.videoWidth / videoRect.width;
-            const scaleY = video.videoHeight / videoRect.height;
-            x = (opts.crop.x - videoRect.x) * scaleX;
-            y = (opts.crop.y - videoRect.y) * scaleY;
-            w = opts.crop.width * scaleX;
-            h = opts.crop.height * scaleY;
-        }
-        canvas.width = w * scaleFactor;
-        canvas.height = h * scaleFactor;
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
         context.imageSmoothingEnabled = true;
         context.imageSmoothingQuality = 'high';
         if (mirror) {
             context.translate(canvas.width, 0);
             context.scale(-1, 1);
         }
-        context.drawImage(video, x, y, w, h, 0, 0, w * scaleFactor, h * scaleFactor);
+        context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
         canvas.toBlob(async (blob) => {
             if (!blob) {
                 setSnapping(false);
@@ -170,26 +140,28 @@ export function useCamera(options = {}) {
                     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
+            const data = {
+                url,
+                file,
+                image,
+            };
+            if (!options.transform) {
                 setData(data);
+                setSnapping(false);
+                return;
+            }
+            const transformResult = await options.transform({
+                ...data,
+                video,
+                canvas,
+            });
+            if (transformResult.ok)
+                setData(transformResult.data);
+            else
+                setError(transformResult.error);
             setSnapping(false);
         }, 'image/jpeg', 1);
-    }, [mirror, transform, validate]);
+    }, [mirror, options]);
     const reset = useCallback(() => {
         setData(null);
         setError(null);

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

@@ -0,0 +1,4 @@
+import type { SetOptional } from 'type-fest';
+import { type UploadFileInput } from '../../services/file';
+import type { Mutation } from '../../types';
+export declare const useUploadFileMutation: Mutation<string, SetOptional<UploadFileInput, 'id'>>;

package/dist/client/hooks/useUploadFileMutation.js

@@ -0,0 +1,24 @@
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { uploadFile } from '../../services/file.js';
+import { ObjectType } from '../../services/ObjectType.js';
+import { getUploadFileMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUploadFileMutation = (config) => {
+    return useMutation({
+        ...config,
+        mutationKey: getUploadFileMutationKey(),
+        mutationFn: async (input) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const id = input.id ?? ObjectId.generate(ObjectType.File).toString();
+            await uploadFile({ ...input, id }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            return id;
+        },
+    });
+};

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

@@ -1,4 +1,4 @@
 import type { SetOptional } from 'type-fest';
-import { type UploadPrivateImageFileInput } from '../../services/file';
+import { type UploadFileInput } from '../../services/file';
 import type { Mutation } from '../../types';
-export declare const useUploadImageFileMutation: Mutation<string, SetOptional<UploadPrivateImageFileInput, 'id'>>;
+export declare const useUploadImageFileMutation: Mutation<string, SetOptional<UploadFileInput, 'id'>>;

package/dist/client/hooks/useUploadImageFileMutation.js

@@ -1,7 +1,7 @@
 import { ObjectId } from '@opexa/object-id';
 import { useMutation } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
-import { uploadPrivateImageFile, } from '../../services/file.js';
+import { uploadImageFile } from '../../services/file.js';
 import { ObjectType } from '../../services/ObjectType.js';
 import { getUploadImageFileMutationKey } from '../../utils/mutationKeys.js';
 import { getSession } from '../services/getSession.js';
@@ -13,7 +13,7 @@ export const useUploadImageFileMutation = (config) => {
             const session = await getSession();
             invariant(session.status === 'authenticated');
             const id = input.id ?? ObjectId.generate(ObjectType.File).toString();
-            await uploadPrivateImageFile({ ...input, id }, {
+            await uploadImageFile({ ...input, id }, {
                 headers: {
                     Authorization: `Bearer ${session.token}`,
                 },

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

@@ -0,0 +1,4 @@
+import type { SetOptional } from 'type-fest';
+import { type UploadFileInput } from '../../services/file';
+import type { Mutation } from '../../types';
+export declare const useUploadPrivateImageFileMutation: Mutation<string, SetOptional<UploadFileInput, 'id'>>;

package/dist/client/hooks/useUploadPrivateImageFileMutation.js

@@ -0,0 +1,24 @@
+import { ObjectId } from '@opexa/object-id';
+import { useMutation } from '@tanstack/react-query';
+import invariant from 'tiny-invariant';
+import { uploadPrivateImageFile, } from '../../services/file.js';
+import { ObjectType } from '../../services/ObjectType.js';
+import { getUploadPrivateImageFileMutationKey } from '../../utils/mutationKeys.js';
+import { getSession } from '../services/getSession.js';
+export const useUploadPrivateImageFileMutation = (config) => {
+    return useMutation({
+        ...config,
+        mutationKey: getUploadPrivateImageFileMutationKey(),
+        mutationFn: async (input) => {
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            const id = input.id ?? ObjectId.generate(ObjectType.File).toString();
+            await uploadPrivateImageFile({ ...input, id }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+            return id;
+        },
+    });
+};

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/Disclaimer/Disclaimer.d.ts

@@ -8,7 +8,7 @@ type DisclaimerProps = DisclaimerV1Props | {
     responsibleGamingContent: string | ReactNode;
     termsOfUseContent: string | ReactNode;
     responsibleGamingLogo?: ImageProps['src'];
-    redirectUrlOnNoConsent: string;
+    redirectUrlOnNoConsent?: string;
     hasNoCheckbox?: boolean;
 };
 export declare function Disclaimer(props: DisclaimerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/DisclaimerV2.d.ts

@@ -6,7 +6,7 @@ export interface DisclaimerProps {
     responsibleGamingContent: ReactNode;
     termsOfUseContent: ReactNode;
     responsibleGamingLogo?: ImageProps['src'];
-    redirectUrlOnNoConsent: string;
+    redirectUrlOnNoConsent?: string;
     hasNoCheckbox?: boolean;
 }
 export declare function DisclaimerV2(props: DisclaimerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/DisclaimerV2.js

@@ -29,18 +29,20 @@ export function DisclaimerV2(props) {
                                                             }, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
                                                                 setResponsibleGamingOpen(true);
                                                             }, children: "Responsible Gaming" })] })), _jsx("div", { children: "Funds or credits in the account of any individual found ineligible to participate will be forfeited and turned over to the government as required by law" })] }) }), _jsxs("div", { className: "mt-4 flex w-full gap-3", children: [_jsx(Button, { type: "button", onClick: () => {
-                                                    if (isChecked) {
-                                                        disclaimer.close();
+                                                    if (props.redirectUrlOnNoConsent) {
+                                                        window.location.href = props.redirectUrlOnNoConsent;
                                                     }
                                                     else {
-                                                        window.location.href = props.redirectUrlOnNoConsent;
+                                                        disclaimer.close();
                                                     }
-                                                }, variant: "outline", children: "Exit" }), _jsx(Button, { ref: acceptTriggerRef, type: "button", onClick: () => {
+                                                }, variant: "outline", children: "Exit" }), _jsx(Button, { ref: acceptTriggerRef, type: "button", disabled: !isChecked, "aria-disabled": !isChecked, onClick: () => {
                                                     if (isChecked) {
                                                         disclaimer.close();
                                                     }
                                                     else {
-                                                        window.location.href = props.redirectUrlOnNoConsent;
+                                                        if (props.redirectUrlOnNoConsent) {
+                                                            window.location.href = props.redirectUrlOnNoConsent;
+                                                        }
                                                     }
                                                 }, children: "Accept" })] })] }) })] }) })] }));
 }

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) {