@opexa/portal-components 0.0.222 → 0.0.224

package/dist/client/hooks/useCamera.js

@@ -89,7 +89,15 @@ export function useCamera(options = {}) {
         video.currentTime = 1;
         const videoRect = video.getBoundingClientRect();
         const lowResolution = video.videoWidth < 640 || video.videoHeight < 480;
-        const scaleFactor = lowResolution ? (opts.scale ?? 2) : 1.25;
+        const hdResolution = video.videoWidth >= 1280 && video.videoHeight >= 720;
+        const highResolution = video.videoWidth >= 1920 && video.videoHeight >= 1080;
+        const scaleFactor = lowResolution
+            ? (opts.scale ?? 2)
+            : highResolution
+                ? 1
+                : hdResolution
+                    ? 1.15
+                    : 1.25;
         let x = 0;
         let y = 0;
         let w = video.videoWidth;

package/dist/client/hooks/useClaimCashbackBonusMutation.js

@@ -19,7 +19,7 @@ export const useClaimCashbackBonusMutation = (config) => {
                 },
             });
             queryClient.setQueryData(getCashbackBonusesQueryKey(), (prev) => prev?.map((bonus) => {
-                if (bonus.id !== id) {
+                if (bonus.id === id) {
                     return {
                         ...bonus,
                         balance: '0',

package/dist/components/Bonuses/Bonuses.client.js

@@ -24,7 +24,9 @@ import { Popover } from '../../ui/Popover/index.js';
 import { Progress } from '../../ui/Progress/index.js';
 import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
 import { formatNumber } from '../../utils/formatNumber.js';
+import { getQueryClient } from '../../utils/getQueryClient.js';
 import { parseDecimal } from '../../utils/parseDecimal.js';
+import { getCashbackBonusesQueryKey } from '../../utils/queryKeys.js';
 import { ClaimSpotBonus } from './ClaimSpotBonus.js';
 const TabSchema = z
     .enum(['all', 'active', 'cashbacks'])
@@ -84,11 +86,15 @@ function CashbackBonus(props) {
     const bonus = props.data;
     const cashback = bonus.cashback;
     const localeInfo = useLocaleInfo();
+    const queryClient = getQueryClient();
     const claimCashbackBonusMutation = useClaimCashbackBonusMutation({
         onSuccess() {
             toaster.success({
                 description: 'Bonus claimed successfully!',
             });
+            queryClient.invalidateQueries({
+                queryKey: getCashbackBonusesQueryKey(),
+            });
         },
         onError(error) {
             toaster.error({

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

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

package/dist/components/Disclaimer/Disclaimer.js

@@ -4,7 +4,7 @@ import { DisclaimerV1 } from './DisclaimerV1.js';
 import { DisclaimerV2 } from './DisclaimerV2.js';
 export function Disclaimer(props) {
     if (props.version === 'v2') {
-        return (_jsx(DisclaimerV2, { logo: props.logo, siteName: props.siteName, responsibleGamingContent: props.responsibleGamingContent, termsOfUseContent: props.termsOfUseContent, responsibleGamingLogo: props.responsibleGamingLogo }));
+        return (_jsx(DisclaimerV2, { logo: props.logo, siteName: props.siteName, responsibleGamingContent: props.responsibleGamingContent, termsOfUseContent: props.termsOfUseContent, responsibleGamingLogo: props.responsibleGamingLogo, redirectUrlOnNoConsent: props.redirectUrlOnNoConsent }));
     }
     return _jsx(DisclaimerV1, { ...props });
 }

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

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

package/dist/components/Disclaimer/DisclaimerV2.js

@@ -17,10 +17,27 @@ export function DisclaimerV2(props) {
     const acceptTriggerRef = useRef(null);
     const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
     const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false) }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false) }), _jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-sticky" }), _jsx(Dialog.Positioner, { className: "z-sticky", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start gap-y-4 p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false })] }), _jsx("div", { className: "text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), _jsxs(Checkbox.Root, { children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I have read and agreed to ", props.siteName, ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
+    const [isChecked, setIsChecked] = useState(true);
+    return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false) }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false) }), _jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-sticky" }), _jsx(Dialog.Positioner, { className: "z-sticky", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start gap-y-4 p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false })] }), _jsx("div", { className: "text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), _jsxs(Checkbox.Root, { checked: isChecked, onCheckedChange: (e) => {
+                                                        setIsChecked(!!e.checked);
+                                                    }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I have read and agreed to ", props.siteName, ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
                                                                         setTermsOfUseOpen(true);
                                                                     }, children: "Terms of Use" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
                                                                         setResponsibleGamingOpen(true);
-                                                                    }, children: "Responsible Gaming" })] }), _jsx(Checkbox.HiddenInput, {})] }), _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: disclaimer.close, variant: "outline", children: "Exit" }), _jsx(Button, { ref: acceptTriggerRef, type: "button", onClick: disclaimer.close, children: "Accept" })] })] }) })] }) })] }));
+                                                                    }, children: "Responsible Gaming" })] }), _jsx(Checkbox.HiddenInput, {})] }), _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();
+                                                    }
+                                                    else {
+                                                        window.location.href = props.redirectUrlOnNoConsent;
+                                                    }
+                                                }, variant: "outline", children: "Exit" }), _jsx(Button, { ref: acceptTriggerRef, type: "button", onClick: () => {
+                                                    if (isChecked) {
+                                                        disclaimer.close();
+                                                    }
+                                                    else {
+                                                        window.location.href = props.redirectUrlOnNoConsent;
+                                                    }
+                                                }, children: "Accept" })] })] }) })] }) })] }));
 }
 const Circle = () => (_jsx("div", { children: _jsx("div", { className: "border-brand-400 flex h-4.5 w-4.5 items-center justify-center rounded-full border", children: _jsx("div", { className: "bg-brand-400 h-3 w-3 rounded-full" }) }) }));

package/dist/components/shared/IdDocumentField.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties, type Ref } from 'react';
-type ErrorCode = 'FILE_NAME_TOO_LONG' | 'FILE_SIZE_TOO_LARGE' | 'FILE_TYPE_NOT_SUPPORTED';
+import { type ValidateFileError } from '../../utils/validateFile';
 export interface IdDocumentFieldProps {
     ref?: Ref<HTMLDivElement>;
     id?: string;
@@ -12,7 +12,6 @@ export interface IdDocumentFieldProps {
     readOnly?: boolean;
     disabled?: boolean;
     required?: boolean;
-    onError?: (code: ErrorCode) => void;
+    onError?: (error: ValidateFileError) => void;
 }
 export declare function IdDocumentField(props: IdDocumentFieldProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/shared/IdDocumentField.js

@@ -22,6 +22,7 @@ import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { dataAttr } from '../../utils/dataAttr.js';
+import { validateFile } from '../../utils/validateFile.js';
 export function IdDocumentField(props) {
     const field = useFieldContext();
     const [value, setValue] = useControllableState({
@@ -131,24 +132,3 @@ export function IdDocumentField(props) {
                                                     camera.reset();
                                                 }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) })] }));
 }
-function validateFile(file) {
-    if (![
-        /**/
-        'image/png',
-        'image/jpg',
-        'image/jpeg',
-    ].includes(file.type)) {
-        return 'FILE_TYPE_NOT_SUPPORTED';
-    }
-    if (10 < file.size / (1024 * 1024)) {
-        return 'FILE_SIZE_TOO_LARGE';
-    }
-    if (48 <
-        file.name
-            .split('.')
-            .filter((_, i, self) => i + 1 < self.length)
-            .join('.').length) {
-        return 'FILE_NAME_TOO_LONG';
-    }
-    return null;
-}

package/dist/components/shared/SelfieField.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties, type Ref } from 'react';
-type ErrorCode = 'FILE_NAME_TOO_LONG' | 'FILE_SIZE_TOO_LARGE' | 'FILE_TYPE_NOT_SUPPORTED';
+import { type ValidateFileError } from '../../utils/validateFile';
 export interface SelfieFieldProps {
     ref?: Ref<HTMLDivElement>;
     id?: string;
@@ -12,7 +12,6 @@ export interface SelfieFieldProps {
     readOnly?: boolean;
     disabled?: boolean;
     required?: boolean;
-    onError?: (code: ErrorCode) => void;
+    onError?: (error: ValidateFileError) => void;
 }
 export declare function SelfieField(props: SelfieFieldProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/shared/SelfieField.js

@@ -21,6 +21,7 @@ import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { dataAttr } from '../../utils/dataAttr.js';
+import { validateFile } from '../../utils/validateFile.js';
 export function SelfieField(props) {
     const field = useFieldContext();
     const [value, setValue] = useControllableState({
@@ -125,24 +126,3 @@ export function SelfieField(props) {
                                                     camera.reset();
                                                 }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) })] }));
 }
-function validateFile(file) {
-    if (![
-        /**/
-        'image/png',
-        'image/jpg',
-        'image/jpeg',
-    ].includes(file.type)) {
-        return 'FILE_TYPE_NOT_SUPPORTED';
-    }
-    if (10 < file.size / (1024 * 1024)) {
-        return 'FILE_SIZE_TOO_LARGE';
-    }
-    if (48 <
-        file.name
-            .split('.')
-            .filter((_, i, self) => i + 1 < self.length)
-            .join('.').length) {
-        return 'FILE_NAME_TOO_LONG';
-    }
-    return null;
-}

package/dist/utils/validateFile.d.ts

@@ -0,0 +1,28 @@
+export interface ValidateFileOptions {
+    /**
+     * @description Maximum file size in MB.
+     * @default 10
+     */
+    maxFileSize?: number;
+    /**
+     * @description Maximum file name length.
+     * @default 48
+     */
+    maxFileName?: number;
+    /**
+     * @description Supported mime types.
+     * @default
+     * [
+     *  'image/png',
+     *  'image/jpg',
+     *  'image/jpeg'
+     * ]
+     */
+    supportedFiles?: string[];
+}
+export type ValidateFileErrorName = 'FILE_NAME_TOO_LONG' | 'FILE_SIZE_TOO_LARGE' | 'FILE_TYPE_NOT_SUPPORTED';
+export interface ValidateFileError {
+    name: ValidateFileErrorName;
+    message: string;
+}
+export declare function validateFile(file: File, options?: ValidateFileOptions): ValidateFileError | null;

package/dist/utils/validateFile.js

@@ -0,0 +1,37 @@
+export function validateFile(file, options) {
+    const maxFileSize = options?.maxFileSize ?? 10;
+    const maxFileName = options?.maxFileName ?? 48;
+    const supportedFiles = options?.supportedFiles ?? [
+        'image/png',
+        'image/jpg',
+        'image/jpeg',
+    ];
+    if (!supportedFiles.includes(file.type)) {
+        return {
+            name: 'FILE_TYPE_NOT_SUPPORTED',
+            message: 'File type not supported.',
+        };
+    }
+    if (mb(file.size) > maxFileSize) {
+        return {
+            name: 'FILE_SIZE_TOO_LARGE',
+            message: 'File size too large.',
+        };
+    }
+    if (basename(file.name).length > maxFileName) {
+        return {
+            name: 'FILE_NAME_TOO_LONG',
+            message: 'File name is too long.',
+        };
+    }
+    return null;
+}
+function mb(bytes) {
+    return bytes / (1024 * 1024);
+}
+function basename(name) {
+    return name
+        .split('.')
+        .filter((_, i, self) => i + 1 < self.length)
+        .join('.');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.222",
+  "version": "0.0.224",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",