@opexa/portal-components 0.0.289 → 0.0.290

package/dist/components/Jackpots/useJackpotData.js

@@ -1,93 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// useJackpotItemData.ts
-import { useCallback, useMemo } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useLocaleInfo } from '../../client/hooks/index.js';
-import { useJackpotPayoutsQuery } from '../../client/hooks/useJackpotPayoutsQuery.js';
-import { GAME_PROVIDER_DATA } from '../../constants/index.js';
-import { ChevronLeftIcon, ChevronRightIcon } from '../../icons/index.js';
-import styles from '../JackpotCounter/JackpotCounterItem.module.css';
-import { useJackpotContext, useJackpotsPropsContext } from './JackpotsContext.js';
-export function useJackpotData() {
-    const jackpotsProps = useJackpotsPropsContext();
-    const jackpot = useJackpotContext();
-    const gameProviders = jackpotsProps.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
-    const jackpotPayoutsQuery = useJackpotPayoutsQuery({
-        first: 30,
-        filter: {
-            jackpot: {
-                equal: jackpot.id,
-            },
-        },
-        sort: {
-            cursor: 'AMOUNT',
-            order: 'DESC',
-        },
-    }, {
-        enabled: typeof window !== 'undefined',
-    });
-    const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
-    const topJackpotPayout = jackpotPayouts[0] ?? [];
-    const enabledJackpotGameProviders = useMemo(() => {
-        const gameProvider = Object.entries(jackpot?.jackpotTurnoverContributionPercentagePerGameProvider ?? {})
-            .filter(([, value]) => Number(value) > 0)
-            .map(([key]) => key);
-        return gameProvider;
-    }, [jackpot]);
-    const filteredGameProviders = gameProviders.filter((provider) => enabledJackpotGameProviders.includes(provider.id));
-    const localeInfo = useLocaleInfo();
-    const isPayingOut = jackpot.drawing;
-    const jackpotAmount = isPayingOut
-        ? jackpot.maximumJackpotPoolLimit
-        : jackpot.pool;
-    const Arrow = useCallback(({ index }) => {
-        const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
-        return (_jsx(Icon, { className: twMerge('scale-400 lg:scale-250 text-brand-300 min-w-2.5 lg:min-w-4', isPayingOut
-                ? styles['animate-wave-color-error']
-                : styles['animate-wave-color-success']), style: {
-                animationDelay: isPayingOut
-                    ? `${(40 - index - 1) * 0.1}s`
-                    : `${index * 0.1}s`,
-            } }));
-    }, [isPayingOut]);
-    const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => (_jsx(Arrow, { isFirst: i === 0, index: i }, i))), [Arrow]);
-    const getAccumulatingJackpotDescription = (part, total) => {
-        const percentage = total === 0 ? 0 : (part / total) * 100;
-        return percentage <= 90
-            ? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
-            : '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
-    };
-    const starTierStyles = [
-        {
-            starColor: 'text-yellow-400',
-            numberColor: 'text-bg-primary',
-        },
-        {
-            starColor: 'text-utility-gray-700',
-            numberColor: 'text-bg-primary',
-        },
-        {
-            starColor: 'text-yellow-700',
-            numberColor: 'text-bg-primary',
-        },
-        {
-            starColor: 'text-bg-quaternary',
-            numberColor: 'text-text-primary-900',
-        },
-        {
-            starColor: 'text-bg-quaternary',
-            numberColor: 'text-text-primary-900',
-        },
-    ];
-    return {
-        jackpotPayouts,
-        topJackpotPayout,
-        filteredGameProviders,
-        localeInfo,
-        isPayingOut,
-        jackpotAmount,
-        arrowImages,
-        getAccumulatingJackpotDescription,
-        starTierStyles,
-    };
-}

package/dist/components/Jackpots/useJackpotItemData.d.ts

@@ -1,20 +0,0 @@
-import type { Jackpot } from '@opexa/portal-sdk-core';
-import type { GameProviderData } from '../../types';
-export interface JackpotItemProps {
-    jackpot: Jackpot;
-    gameProviders: GameProviderData[];
-}
-export declare function useJackpotItemData({ jackpot, gameProviders, }: JackpotItemProps): {
-    jackpotPayouts: import("@opexa/portal-sdk-core").JackpotPayout[];
-    topJackpotPayout: import("@opexa/portal-sdk-core").JackpotPayout;
-    filteredGameProviders: GameProviderData[];
-    localeInfo: import("../../utils").LocaleInfo;
-    isPayingOut: boolean;
-    jackpotAmount: string;
-    arrowImages: import("react/jsx-runtime").JSX.Element[];
-    getAccumulatingJackpotDescription: (part: number, total: number) => string;
-    starTierStyles: {
-        starColor: string;
-        numberColor: string;
-    }[];
-};

package/dist/components/Jackpots/useJackpotItemData.js

@@ -1,87 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useLocaleInfo } from '../../client/hooks/index.js';
-import { useJackpotPayoutsQuery } from '../../client/hooks/useJackpotPayoutsQuery.js';
-import { ChevronLeftIcon, ChevronRightIcon } from '../../icons/index.js';
-import styles from '../JackpotCounter/JackpotCounterItem.module.css';
-export function useJackpotItemData({ jackpot, gameProviders, }) {
-    const jackpotPayoutsQuery = useJackpotPayoutsQuery({
-        first: 30,
-        filter: {
-            jackpot: {
-                equal: jackpot.id,
-            },
-        },
-        sort: {
-            cursor: 'AMOUNT',
-            order: 'DESC',
-        },
-    }, {
-        enabled: typeof window !== 'undefined',
-    });
-    const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
-    const topJackpotPayout = jackpotPayouts[0] ?? [];
-    const enabledJackpotGameProviders = useMemo(() => {
-        const gameProvider = Object.entries(jackpot?.jackpotTurnoverContributionPercentagePerGameProvider ?? {})
-            .filter(([, value]) => Number(value) > 0)
-            .map(([key]) => key);
-        return gameProvider;
-    }, [jackpot]);
-    const filteredGameProviders = gameProviders.filter((provider) => enabledJackpotGameProviders.includes(provider.id));
-    const localeInfo = useLocaleInfo();
-    const isPayingOut = jackpot.drawing;
-    const jackpotAmount = isPayingOut
-        ? jackpot.maximumJackpotPoolLimit
-        : jackpot.pool;
-    const Arrow = useCallback(({ index }) => {
-        const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
-        return (_jsx(Icon, { className: twMerge('scale-400 lg:scale-250 text-brand-300 min-w-2.5 lg:min-w-4', isPayingOut
-                ? styles['animate-wave-color-error']
-                : styles['animate-wave-color-success']), style: {
-                animationDelay: isPayingOut
-                    ? `${(40 - index - 1) * 0.1}s`
-                    : `${index * 0.1}s`,
-            } }));
-    }, [isPayingOut]);
-    const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => (_jsx(Arrow, { isFirst: i === 0, index: i }, i))), [Arrow]);
-    const getAccumulatingJackpotDescription = (part, total) => {
-        const percentage = total === 0 ? 0 : (part / total) * 100;
-        return percentage <= 90
-            ? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
-            : '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
-    };
-    const starTierStyles = [
-        {
-            starColor: 'text-yellow-400',
-            numberColor: 'text-bg-primary',
-        },
-        {
-            starColor: 'text-utility-gray-700',
-            numberColor: 'text-bg-primary',
-        },
-        {
-            starColor: 'text-yellow-700',
-            numberColor: 'text-bg-primary',
-        },
-        {
-            starColor: 'text-bg-quaternary',
-            numberColor: 'text-text-primary-900',
-        },
-        {
-            starColor: 'text-bg-quaternary',
-            numberColor: 'text-text-primary-900',
-        },
-    ];
-    return {
-        jackpotPayouts,
-        topJackpotPayout,
-        filteredGameProviders,
-        localeInfo,
-        isPayingOut,
-        jackpotAmount,
-        arrowImages,
-        getAccumulatingJackpotDescription,
-        starTierStyles,
-    };
-}

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

@@ -1 +0,0 @@
-export declare function AutoOpen(): null;

package/dist/components/KYC/AutoOpen.js

@@ -1,45 +0,0 @@
-import { useEffect } from 'react';
-import { useShallow } from 'zustand/shallow';
-import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
-import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
-import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
-import { KYC_PROMPT_LOCALSTORAGE_KEY } from '../../constants/index.js';
-export function AutoOpen() {
-    const kycStore = useGlobalStore(useShallow((ctx) => ctx.kyc));
-    const { data: session } = useSessionQuery();
-    const { data: account } = useAccountQuery();
-    const { data: verification } = useMemberVerificationQuery();
-    const isBasicInfoCompleted = account?.realName !== null && account?.birthDay !== null;
-    const isUploadCompleted = verification &&
-        verification.idFrontImage !== null &&
-        verification.selfieImage !== null;
-    const isRejected = Boolean(verification?.status === 'REJECTED');
-    const step = !isBasicInfoCompleted
-        ? 1
-        : isRejected
-            ? 2
-            : isUploadCompleted
-                ? 3
-                : 2;
-    const shouldOpen = !account?.realName ||
-        !account?.birthDay ||
-        !verification ||
-        verification.status === 'REJECTED' ||
-        verification.status === 'UNVERIFIED';
-    useEffect(() => {
-        if (session?.status == 'authenticated' &&
-            !kycStore['~touched'] &&
-            shouldOpen &&
-            localStorage.getItem(KYC_PROMPT_LOCALSTORAGE_KEY) == null) {
-            kycStore.setOpen(true);
-            return;
-        }
-    }, [kycStore, session?.status, shouldOpen]);
-    useEffect(() => {
-        if (step) {
-            kycStore.setStep(step);
-        }
-    }, [kycStore, step]);
-    return null;
-}

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

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

package/dist/components/KYC/CaptureIdDocument.js

@@ -1,219 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
-import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
-import { Camera01Icon } from '../../icons/Camera01Icon.js';
-import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
-import { XIcon } from '../../icons/XIcon.js';
-import { Button } from '../../ui/Button/index.js';
-import { Dialog } from '../../ui/Dialog/index.js';
-import { useKYCContext } from './KYCContext.js';
-import NoCameraError from './NoCameraError.js';
-import { cameraErrorDescriptions, dataURLtoBlob, resizeFile, showPermissionInstructions, } from './utils.js';
-export function CaptureIdDocument() {
-    const kyc = useKYCContext();
-    const { mutate, isPending } = useUploadImageFileMutation();
-    const [videoStream, setVideoStream] = useState(null);
-    const [cameraError, setCameraError] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const [selectedImage, setSelectedImage] = useState(null);
-    const [captureInProgress, setCaptureInProgress] = useState(false);
-    const [proccessImageCanvas, setProccessImageCanvas] = useState(null);
-    const videoElement = useRef(null);
-    const containerRef = useRef(null);
-    function stopCamera() {
-        if (videoStream) {
-            videoStream.getTracks().forEach((track) => track.stop());
-            setVideoStream(null);
-        }
-    }
-    useEffect(() => {
-        return () => {
-            stopCamera();
-        };
-    }, [videoStream]);
-    async function startCamera() {
-        try {
-            setIsLoading(true);
-            setCameraError(null);
-            setCaptureInProgress(true);
-            console.log('Starting camera...');
-            const stream = await navigator.mediaDevices.getUserMedia({
-                video: {
-                    facingMode: 'environment',
-                    aspectRatio: 16 / 9,
-                    width: { ideal: 1920, max: 1920 },
-                    height: { ideal: 1080, max: 1080 },
-                    frameRate: {
-                        ideal: 30,
-                        max: 60,
-                    },
-                },
-                audio: false,
-            });
-            // Set the stream directly to the video element
-            if (videoElement.current) {
-                videoElement.current.srcObject = stream;
-                videoElement.current.onloadedmetadata = () => {
-                    console.log('Video metadata loaded, starting playback...');
-                    videoElement.current
-                        ?.play()
-                        .then(() => {
-                        setVideoStream(stream);
-                        setIsLoading(false);
-                    })
-                        .catch(() => {
-                        setCameraError('Failed to start camera stream. Please try again.');
-                        setIsLoading(false);
-                        // Stop the stream if playback fails
-                        stream.getTracks().forEach((track) => track.stop());
-                    });
-                };
-                videoElement.current.onerror = (err) => {
-                    console.error('Video element error:', err);
-                    setCameraError('Video playback error. Please try again.');
-                    setIsLoading(false);
-                    stream.getTracks().forEach((track) => track.stop());
-                };
-            }
-            else {
-                console.error('Video element not available');
-                setCameraError('Camera initialization failed. Please try again.');
-                setCaptureInProgress(false);
-                setIsLoading(false);
-                stream.getTracks().forEach((track) => track.stop());
-            }
-        }
-        catch (error) {
-            setIsLoading(false);
-            if (error instanceof DOMException) {
-                console.error('Error accessing camera:', error.message);
-                setCameraError(error.name);
-            }
-            else {
-                console.error('Unknown error accessing camera:', error);
-                setCameraError('An unknown error occurred. Please check permissions and try again.');
-            }
-            setCaptureInProgress(false);
-        }
-    }
-    function captureAndProcessImage() {
-        if (!videoElement.current || !videoStream) {
-            console.error('Video element or stream not available for capture');
-            return;
-        }
-        try {
-            const canvas = document.createElement('canvas');
-            const parentDiv = document.getElementById('parent');
-            canvas.width = parentDiv?.clientWidth || videoElement.current.width;
-            canvas.height = parentDiv?.clientHeight || videoElement.current.height;
-            const ctx = canvas.getContext('2d');
-            if (!ctx) {
-                console.error('Could not get 2D context for canvas');
-                setCameraError('Failed to process image. Please try again.');
-                setCaptureInProgress(false);
-                return;
-            }
-            ctx.drawImage(videoElement.current, 0, 0, canvas.width, canvas.height);
-            const imageSrc = canvas.toDataURL('image/png', 1.0);
-            setSelectedImage({ src: imageSrc });
-            setCaptureInProgress(false);
-            stopCamera();
-            const newImg = document.createElement('img');
-            newImg.src = imageSrc;
-            //@ts-expect-error jscanify is not typed
-            const scanner = new jscanify();
-            newImg.onload = () => {
-                try {
-                    if (containerRef.current) {
-                        // containerRef.current.innerHTML = '';
-                        const paperWidth = parentDiv?.clientWidth || videoElement.current?.videoWidth;
-                        const paperHeight = parentDiv?.clientHeight || videoElement.current?.videoHeight;
-                        //@ts-expect-error jscanify is not typed
-                        const contour = scanner.findPaperContour(cv.imread(newImg));
-                        const cornerPoints = scanner.getCornerPoints(contour);
-                        const resultCanvas = scanner.extractPaper(newImg, paperWidth, paperHeight, cornerPoints);
-                        newImg.className =
-                            'absolute inset-0 m-auto w-full h-auto md:max-h-[333px] md:max-w-[643px] aspect-video rounded-lg object-contain';
-                        setProccessImageCanvas(resultCanvas);
-                        containerRef.current.appendChild(resultCanvas);
-                        setCaptureInProgress(false);
-                        setSelectedImage({ src: resultCanvas.toDataURL('image/png') });
-                    }
-                }
-                catch (error) {
-                    console.error('Error processing image:', error);
-                    setCameraError('Failed to process image. Please try again.');
-                }
-            };
-            newImg.onerror = () => {
-                console.error('Error loading image');
-                setCameraError('NoIdDetectedError');
-            };
-        }
-        catch (error) {
-            console.error('Error capturing image:', error);
-            setCameraError('NoIdDetectedError');
-            setCaptureInProgress(false);
-        }
-    }
-    async function uploadPhoto() {
-        if (!proccessImageCanvas) {
-            console.error('Failed to process the image. Please try again.');
-            return;
-        }
-        const blob = proccessImageCanvas.toDataURL('image/png', 1.0);
-        const processedBlob = dataURLtoBlob(blob);
-        const img = new File([processedBlob], 'frontImage', { type: 'image/jpeg' });
-        const resizedImage = (await resizeFile(img));
-        if (resizedImage) {
-            await mutate({
-                file: resizedImage,
-            }, {
-                onSuccess: (data) => {
-                    kyc.setFrontImageId(data);
-                    kyc.setCapturing(null);
-                },
-            });
-        }
-    }
-    function retakePhoto() {
-        setSelectedImage(null);
-        setCaptureInProgress(true);
-        setCameraError(null);
-        if (containerRef.current) {
-            const canvas = containerRef.current.querySelector('canvas');
-            if (canvas) {
-                canvas.width = canvas.width;
-            }
-            containerRef.current.innerHTML = '';
-        }
-        if (videoElement.current) {
-            videoElement.current.play();
-        }
-        startCamera();
-    }
-    function checkCameraPermission() {
-        const constraints = { video: true };
-        navigator.mediaDevices
-            .getUserMedia(constraints)
-            .then(() => {
-            setCameraError(null);
-            startCamera();
-        })
-            .catch(() => {
-            showPermissionInstructions();
-        });
-    }
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full p-4 lg:w-[640px] lg:px-12 lg:py-4xl", children: [_jsxs("button", { type: "button", className: "flex items-center gap-lg lg:absolute lg:right-5 lg:top-5 lg:p-md", onClick: () => {
-                        stopCamera();
-                        kyc.setCapturing(null);
-                    }, children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "lg:max-w-auto text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", _jsx("br", { className: "hidden lg:block" }), " Avoid glare or reflections, and ensure all corners are within the frame."] }), _jsx("div", { id: "parent", className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8", children: [
-                        'NotAllowedError',
-                        'NotReadableError',
-                        'NotFoundError',
-                        'NoIdDetectedError',
-                    ].includes(cameraError) ? (_jsx(NoCameraError, { onRetry: checkCameraPermission, title: "Camera Access Required", description: cameraErrorDescriptions[cameraError] })) : captureInProgress ? (_jsxs("div", { className: "relative flex h-fit w-full flex-col items-center justify-center", children: [_jsx("video", { ref: videoElement, autoPlay: true, muted: true, playsInline: true, className: "relative h-[50vh] w-full rounded-lg object-cover md:aspect-video md:max-h-[333px]", width: "100%", height: "100%" }), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-50", children: [_jsx("div", { className: twMerge('absolute inset-0 w-full bg-black/60 backdrop-blur-sm [clip-path:polygon(0%_0%,0%_100%,calc(50%-158px)_100%,calc(50%-158px)_calc(50%-100px),calc(50%+158px)_calc(50%-100px),calc(50%+158px)_calc(50%+100px),calc(50%-158px)_calc(50%+100px),calc(50%-158px)_100%,100%_100%,100%_0%)] md:[clip-path:polygon(0%_0%,0%_100%,calc(50%-225px)_100%,calc(50%-225px)_calc(50%-142px),calc(50%+225px)_calc(50%-142px),calc(50%+225px)_calc(50%+142px),calc(50%-225px)_calc(50%+142px),calc(50%-225px)_100%,100%_100%,100%_0%)]') }), _jsx("div", { className: "absolute inset-0 z-[60] mx-auto flex items-center justify-center", children: _jsx("div", { className: "relative aspect-[1011/638] h-[200px] md:h-[295px] md:w-[450px]", children: _jsx("div", { className: "h-full w-full rounded-lg border-4 border-dashed border-[#B54708]" }) }) })] })] })) : (_jsx("div", { ref: containerRef, className: "relative grid h-full w-full place-items-center rounded-lg object-contain md:max-h-[333px]" })) }), captureInProgress ? (_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", onClick: captureAndProcessImage, children: ["Capture Image", _jsx(Camera01Icon, { className: "size-5" })] })) : selectedImage && selectedImage.src ? (_jsxs("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 md:flex-row", children: [_jsxs(Button, { className: "lg:w-fit", type: "button", onClick: retakePhoto, children: ["Retake Photo ", _jsx(Camera01Icon, { className: "ml-1" })] }), _jsxs(Button, { className: "lg:w-fit", type: "button", onClick: uploadPhoto, disabled: isPending, children: ["Use Photo ", _jsx(CheckCircleIcon, { className: "ml-1" })] })] })) : (_jsxs(Button, { className: twMerge('disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit', cameraError && 'hidden'), onClick: startCamera, disabled: isLoading || !!videoStream, children: [isLoading ? 'Starting Camera...' : 'Start Camera', _jsx(Camera01Icon, { className: "size-5" })] }))] }) }));
-}

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

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