@opexa/portal-components 0.0.231 → 0.0.233

package/dist/components/Quests/WageringQuest/WageringQuest.js

@@ -2,8 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
-import { Badge } from '../../../ui/index.js';
+import { ClockStopWatchIcon } from '../../../icons/ClockStopWatchIcon.js';
+import { InfoCircleIcon } from '../../../icons/InfoCircleIcon.js';
+import { Badge } from '../../../ui/Badge/index.js';
 import CountdownTimer from '../CountdownTimer.js';
 import { WageringQuestModal } from './WageringQuestModal.js';
 export function WageringQuest({ quest }) {

package/dist/components/Quests/WageringQuest/WageringQuestModal.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../../icons/index.js';
-import { Button, Dialog } from '../../../ui/index.js';
+import { XIcon } from '../../../icons/XIcon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
+import { Portal } from '../../../ui/Portal/index.js';
 export function WageringQuestModal(props) {
     return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: props.questName }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
 }

package/dist/components/SignUp/SignUpForm.js

@@ -46,6 +46,9 @@ export function SignUpForm() {
         itemToValue: (item) => item.code,
         itemToString: (item) => `${item.code} - ${item.name}`,
     });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+    })));
     const [step, setStep] = useState(1);
     const dialog = useDialogContext();
     const search = useSearchParams();
@@ -192,6 +195,7 @@ export function SignUpForm() {
                                     mobileNumber: mobileNumberParser.format(mobileNumber),
                                     verificationCode: verificationCode.join(''),
                                     referralCode: search.get('referralCode') ?? undefined,
+                                    domain: search.get('domain') ?? undefined,
                                     btag: search.get('btag') ?? undefined,
                                 });
                                 const name = mobileNumberParser.format(mobileNumber);
@@ -238,6 +242,7 @@ export function SignUpForm() {
                                 dialog.setOpen(false);
                                 step1Form.reset();
                                 step2Form.reset();
+                                globalStore.kyc.setOpen(true);
                                 setStep(1);
                             }
                             catch (error) {
@@ -251,7 +256,7 @@ export function SignUpForm() {
                                                 o.field.onChange(details.value);
                                             }, onValueComplete: () => {
                                                 form2Ref.current?.requestSubmit();
-                                            }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
+                                            }, children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "text-text-placeholder-subtle text-2xl font-medium", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
                                                 recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),

package/dist/components/shared/IdDocumentField.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFieldContext } from '@ark-ui/react';
 import Image from 'next/image';
-import { useRef } from 'react';
+import { useId, useLayoutEffect, useRef, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useMediaQuery } from 'usehooks-ts';
 import { useCamera } from '../../client/hooks/useCamera.js';
@@ -10,6 +10,7 @@ import { useControllableState } from '../../client/hooks/useControllableState.js
 import { useDisclosure } from '../../client/hooks/useDisclosure.js';
 import { useFileQuery } from '../../client/hooks/useFileQuery.js';
 import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
+import { createContext } from '../../client/utils/createContext.js';
 import { toaster } from '../../client/utils/toaster.js';
 import { Camera01Icon } from '../../icons/Camera01Icon.js';
 import { CameraOffIcon } from '../../icons/CameraOffIcon.js';
@@ -24,52 +25,9 @@ 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({
-        value: props.value,
-        defaultValue: props.defaultValue ?? '',
-        onChange: props.onChange,
-    });
-    const query = useFileQuery(value, {
-        refetchInterval({ state }) {
-            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
-        },
-    });
-    const mutation = useUploadImageFileMutation({
-        onSuccess(id) {
-            setValue(id);
-        },
-        onMutate() {
-            setValue('');
-        },
-        onError(error) {
-            toaster.error({
-                title: 'Upload Failed',
-                description: error.message,
-            });
-        },
-        onSettled() {
-            if (inputRef.current) {
-                inputRef.current.value = '';
-            }
-        },
-    });
-    const inputRef = useRef(null);
-    const guideRef = useRef(null);
-    const desktop = useMediaQuery('(min-width: 1024px)');
-    const camera = useCamera({
-        video: {
-            facingMode: desktop ? 'user' : 'environment',
-        },
-    });
-    const disclosure = useDisclosure({
-        onOpenChange(open) {
-            if (open) {
-                camera.open();
-            }
-        },
-    });
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('border-border-primary bg-bg-primary group relative aspect-[352/180] w-full shrink-0 rounded-xl border p-xl', props.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
+    const context = useIdDocumentField(props);
+    const { field, setValue, query, mutation, inputRef, guideRef, camera, disclosure, } = context;
+    return (_jsxs(IdDocumentFieldProvider, { value: context, children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('border-border-primary bg-bg-primary group relative aspect-[352/180] w-full shrink-0 rounded-xl border p-xl', props.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
                     e.preventDefault();
                     const file = e.dataTransfer.files?.[0];
                     if (!file)
@@ -109,7 +67,7 @@ export function IdDocumentField(props) {
                     disclosure.setOpen(details.open);
                 }, onExitComplete: camera.close, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] rounded-lg px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", 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\u00A0the\u00A0frame."] }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsxs("div", { className: twMerge('border-border-disabled relative w-full overflow-hidden rounded-md border bg-black lg:rounded-lg', !camera.data && !camera.error && !camera.loading
                                                     ? 'block'
-                                                    : 'hidden'), children: [_jsx("video", { ...camera.videoProps }), _jsx("div", { ref: guideRef, className: "border-utility-warning-700 absolute left-1/2 top-1/2 aspect-[85.60/53.98] w-[calc(100%-1rem)] -translate-x-1/2 -translate-y-1/2 rounded-md border-2 border-dashed lg:w-[29.688rem]" })] }), camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
+                                                    : 'hidden'), children: [_jsx("video", { ...camera.videoProps }), _jsx(Mask, {})] }), camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
                                                             camera.reopen();
                                                         }, children: "Try again" })] })), camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), camera.data && (_jsx("div", { className: "border-border-disabled h-auto w-full overflow-hidden rounded-md border bg-black lg:rounded-lg", children: _jsx(Image, { src: camera.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "block h-auto w-full" }) }))] }), !camera.data && !camera.error && !camera.loading && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl lg:w-auto", onClick: () => {
                                                 const rect = guideRef.current?.getBoundingClientRect();
@@ -132,3 +90,114 @@ export function IdDocumentField(props) {
                                                     camera.reset();
                                                 }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) })] }));
 }
+/**
+ * -------------------------------------
+ *  Mask
+ * -------------------------------------
+ */
+function Mask() {
+    const id = useId();
+    const { guideRef, maskRef } = useIdDocumentFieldContext();
+    const [maskBox, setMaskBox] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    useLayoutEffect(() => {
+        const update = () => {
+            const guide = guideRef.current;
+            const mask = maskRef.current;
+            if (!guide || !mask)
+                return;
+            const guideRect = guide.getBoundingClientRect();
+            const maskRect = mask.getBoundingClientRect();
+            const x = guideRect.left - maskRect.left;
+            const y = guideRect.top - maskRect.top;
+            const width = guideRect.width;
+            const height = guideRect.height;
+            if (width && height) {
+                setMaskBox({
+                    x,
+                    y,
+                    width,
+                    height,
+                });
+            }
+        };
+        const observer = new ResizeObserver(update);
+        if (guideRef.current)
+            observer.observe(guideRef.current);
+        if (maskRef.current)
+            observer.observe(maskRef.current);
+        requestAnimationFrame(update);
+        return () => observer.disconnect();
+    }, [guideRef, maskRef]);
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { className: "pointer-events-none absolute h-full w-full", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8", ry: "8" })] }) }) }), _jsx("div", { ref: maskRef, className: "absolute inset-0 bg-black/60 backdrop-blur-sm", style: {
+                    mask: `url(#${id})`,
+                    WebkitMask: `url(#${id})`,
+                    maskRepeat: 'no-repeat',
+                    WebkitMaskRepeat: 'no-repeat',
+                } }), _jsx("div", { ref: guideRef, className: "border-utility-warning-700 pointer-events-none absolute left-1/2 top-1/2 z-10 aspect-[85.6/53.98] w-[calc(100%-1rem)] max-w-[24.688rem] -translate-x-1/2 -translate-y-1/2 rounded-md border-2 border-dashed" })] }));
+}
+function useIdDocumentField(props) {
+    const field = useFieldContext();
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? '',
+        onChange: props.onChange,
+    });
+    const query = useFileQuery(value, {
+        refetchInterval({ state }) {
+            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
+        },
+    });
+    const mutation = useUploadImageFileMutation({
+        onSuccess(id) {
+            setValue(id);
+        },
+        onMutate() {
+            setValue('');
+        },
+        onError(error) {
+            toaster.error({
+                title: 'Upload Failed',
+                description: error.message,
+            });
+        },
+        onSettled() {
+            if (inputRef.current) {
+                inputRef.current.value = '';
+            }
+        },
+    });
+    const inputRef = useRef(null);
+    const maskRef = useRef(null);
+    const guideRef = useRef(null);
+    const desktop = useMediaQuery('(min-width: 1024px)');
+    const camera = useCamera({
+        video: {
+            facingMode: desktop ? 'user' : 'environment',
+        },
+    });
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (open) {
+                camera.open();
+            }
+        },
+    });
+    return {
+        field,
+        value,
+        setValue,
+        query,
+        mutation,
+        camera,
+        disclosure,
+        inputRef,
+        guideRef,
+        maskRef,
+    };
+}
+const [IdDocumentFieldProvider, useIdDocumentFieldContext] = createContext();

package/dist/components/shared/SelfieField.js

@@ -2,13 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFieldContext } from '@ark-ui/react';
 import Image from 'next/image';
-import { useRef } from 'react';
+import { useId, useLayoutEffect, useRef, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useCamera } from '../../client/hooks/useCamera.js';
 import { useControllableState } from '../../client/hooks/useControllableState.js';
 import { useDisclosure } from '../../client/hooks/useDisclosure.js';
 import { useFileQuery } from '../../client/hooks/useFileQuery.js';
 import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
+import { createContext } from '../../client/utils/createContext.js';
 import { toaster } from '../../client/utils/toaster.js';
 import { Camera01Icon } from '../../icons/Camera01Icon.js';
 import { CameraOffIcon } from '../../icons/CameraOffIcon.js';
@@ -23,47 +24,9 @@ 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({
-        value: props.value,
-        defaultValue: props.defaultValue ?? '',
-        onChange: props.onChange,
-    });
-    const query = useFileQuery(value, {
-        refetchInterval({ state }) {
-            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
-        },
-    });
-    const mutation = useUploadImageFileMutation({
-        onSuccess(id) {
-            setValue(id);
-        },
-        onMutate() {
-            setValue('');
-        },
-        onError(error) {
-            toaster.error({
-                title: 'Upload Failed',
-                description: error.message,
-            });
-        },
-        onSettled() {
-            if (inputRef.current) {
-                inputRef.current.value = '';
-            }
-        },
-    });
-    const inputRef = useRef(null);
-    const guideRef = useRef(null);
-    const camera = useCamera();
-    const disclosure = useDisclosure({
-        onOpenChange(open) {
-            if (open) {
-                camera.open();
-            }
-        },
-    });
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('border-border-primary bg-bg-primary group relative aspect-[352/180] w-full shrink-0 rounded-xl border p-xl', props.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
+    const context = useSelfieField(props);
+    const { field, setValue, query, mutation, camera, disclosure, inputRef, guideRef, } = context;
+    return (_jsxs(SelfieFieldProvider, { value: context, children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('border-border-primary bg-bg-primary group relative aspect-[352/180] w-full shrink-0 rounded-xl border p-xl', props.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
                     e.preventDefault();
                     const file = e.dataTransfer.files?.[0];
                     if (!file)
@@ -103,7 +66,7 @@ export function SelfieField(props) {
                     disclosure.setOpen(details.open);
                 }, onExitComplete: camera.close, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] rounded-lg px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: "Make sure your face and ID are clearly visible, with no glare\u00A0or\u00A0blur." }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsxs("div", { className: twMerge('border-border-disabled relative w-full overflow-hidden rounded-md border bg-black lg:rounded-lg', !camera.data && !camera.error && !camera.loading
                                                     ? 'block'
-                                                    : 'hidden'), children: [_jsx("video", { ...camera.videoProps }), _jsx("div", { ref: guideRef, className: "border-utility-warning-700 absolute left-1/2 top-1/2 aspect-square w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-dashed lg:w-[29.688rem]" })] }), camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
+                                                    : 'hidden'), children: [_jsx("video", { ...camera.videoProps }), _jsx(Mask, {})] }), camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
                                                             camera.reopen();
                                                         }, children: "Try again" })] })), camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), camera.data && (_jsx("div", { className: "border-border-disabled h-auto w-full overflow-hidden rounded-md border bg-black lg:rounded-lg", children: _jsx(Image, { src: camera.data.url, alt: "", width: 600, height: 600, unoptimized: true, className: "block h-auto w-full" }) }))] }), !camera.data && !camera.error && !camera.loading && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl lg:w-auto", onClick: () => {
                                                 const rect = guideRef.current?.getBoundingClientRect();
@@ -126,3 +89,102 @@ export function SelfieField(props) {
                                                     camera.reset();
                                                 }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) })] }));
 }
+/**
+ * -------------------------------------
+ *  Mask
+ * -------------------------------------
+ */
+function Mask() {
+    const id = useId();
+    const { guideRef, maskRef } = useSelfieFieldContext();
+    const [maskBox, setMaskBox] = useState({
+        cx: 0,
+        cy: 0,
+        r: 0,
+    });
+    useLayoutEffect(() => {
+        const update = () => {
+            const guide = guideRef.current;
+            const mask = maskRef.current;
+            if (!guide || !mask)
+                return;
+            const guideRect = guide.getBoundingClientRect();
+            const maskRect = mask.getBoundingClientRect();
+            const cx = guideRect.left + guideRect.width / 2 - maskRect.left;
+            const cy = guideRect.top + guideRect.height / 2 - maskRect.top;
+            const r = guideRect.width / 2;
+            setMaskBox({
+                cx,
+                cy,
+                r,
+            });
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        if (guideRef.current)
+            observer.observe(guideRef.current);
+        if (maskRef.current)
+            observer.observe(maskRef.current);
+        return () => observer.disconnect();
+    }, [guideRef, maskRef]);
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { className: "absolute h-full w-full", children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { width: "100%", height: "100%", fill: "white" }), _jsx("circle", { cx: maskBox.cx, cy: maskBox.cy, r: maskBox.r, fill: "black" })] }) }), _jsx("div", { ref: maskRef, className: "absolute inset-0 bg-black/60 backdrop-blur-sm", style: {
+                    mask: `url(#${id})`,
+                    WebkitMask: `url(#${id})`,
+                } }), _jsx("div", { ref: guideRef, className: "border-utility-warning-700 absolute left-1/2 top-1/2 z-20 aspect-square w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-dashed lg:w-[29.688rem]" })] }));
+}
+function useSelfieField(props) {
+    const field = useFieldContext();
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? '',
+        onChange: props.onChange,
+    });
+    const query = useFileQuery(value, {
+        refetchInterval({ state }) {
+            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
+        },
+    });
+    const mutation = useUploadImageFileMutation({
+        onSuccess(id) {
+            setValue(id);
+        },
+        onMutate() {
+            setValue('');
+        },
+        onError(error) {
+            toaster.error({
+                title: 'Upload Failed',
+                description: error.message,
+            });
+        },
+        onSettled() {
+            if (inputRef.current) {
+                inputRef.current.value = '';
+            }
+        },
+    });
+    const inputRef = useRef(null);
+    const maskRef = useRef(null);
+    const guideRef = useRef(null);
+    const camera = useCamera();
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (open) {
+                camera.open();
+            }
+        },
+    });
+    return {
+        field,
+        value,
+        setValue,
+        query,
+        mutation,
+        camera,
+        disclosure,
+        inputRef,
+        guideRef,
+        maskRef,
+    };
+}
+const [SelfieFieldProvider, useSelfieFieldContext] = createContext();

package/dist/constants/BranchCode.d.ts

@@ -0,0 +1,4 @@
+export declare const BRANCH_CODES: {
+    code: string;
+    name: string;
+}[];

package/dist/constants/BranchCode.js

@@ -0,0 +1,42 @@
+export const BRANCH_CODES = [
+    {
+        code: 'BRCAL',
+        name: 'Bingo Republic 2nd floor Primark Center Deparo St., Caloocan City',
+    },
+    {
+        code: 'BRNAG',
+        name: 'Bingo Republic 3rd floor Robinsons Mall, Naga City, Camarines Sur',
+    },
+    {
+        code: 'BRANT',
+        name: 'Bingo Republic 2nd floor Robinsons Mall, San Vicente,Antique',
+    },
+    {
+        code: 'BRCLA',
+        name: 'Clark',
+    },
+    {
+        code: 'BRLAG',
+        name: 'Laguna',
+    },
+    {
+        code: 'BREAS',
+        name: 'Eastwood City, Quezon City',
+    },
+    {
+        code: 'BRMAR',
+        name: 'Bingo ng Bayan 4th floor Marikina Public Market, Marikina City',
+    },
+    {
+        code: 'BRILO',
+        name: 'Iloilo',
+    },
+    {
+        code: 'BRFIM',
+        name: 'Fisher Mall,Quezon City',
+    },
+    {
+        code: 'BRCAC',
+        name: 'Villa Caceres Hotel, Naga City,Camsur',
+    },
+];

package/dist/constants/endpoints.d.ts

@@ -0,0 +1,10 @@
+export declare const ACCOUNT_GRAPHQL_ENDPOINT: string;
+export declare const FILE_GRAPHQL_ENDPOINT: string;
+export declare const GAME_GRAPHQL_ENDPOINT: string;
+export declare const PORTAL_GRAPHQL_ENDPOINT: string;
+export declare const REPORT_GRAPHQL_ENDPOINT: string;
+export declare const TRIGGER_GRAPHQL_ENDPOINT: string;
+export declare const WALLET_GRAPHQL_ENDPOINT: string;
+export declare const AUTH_ENDPOINT: string;
+export declare const CMS_PORTAL_ENDPOINT: string;
+export declare const STATIC_ENDPOINT: string;

package/dist/constants/endpoints.js

@@ -0,0 +1,41 @@
+import { ENVIRONMENT } from './envVars.js';
+export const ACCOUNT_GRAPHQL_ENDPOINT = {
+    development: 'https://account.development.opexa.io/graphql',
+    production: 'https://account.opexa.io/graphql',
+}[ENVIRONMENT];
+export const FILE_GRAPHQL_ENDPOINT = {
+    development: 'https://file.development.opexa.io/graphql',
+    production: 'https://file.opexa.io/graphql',
+}[ENVIRONMENT];
+export const GAME_GRAPHQL_ENDPOINT = {
+    development: 'https://game.development.opexa.io/graphql',
+    production: 'https://game.opexa.io/graphql',
+}[ENVIRONMENT];
+export const PORTAL_GRAPHQL_ENDPOINT = {
+    development: 'https://portal.development.opexa.io/graphql',
+    production: 'https://portal.opexa.io/graphql',
+}[ENVIRONMENT];
+export const REPORT_GRAPHQL_ENDPOINT = {
+    development: 'https://report.development.opexa.io/graphql',
+    production: 'https://report.opexa.io/graphql',
+}[ENVIRONMENT];
+export const TRIGGER_GRAPHQL_ENDPOINT = {
+    development: 'https://trigger.development.opexa.io/graphql',
+    production: 'https://trigger.opexa.io/graphql',
+}[ENVIRONMENT];
+export const WALLET_GRAPHQL_ENDPOINT = {
+    development: 'https://wallet.development.opexa.io/graphql',
+    production: 'https://wallet.opexa.io/graphql',
+}[ENVIRONMENT];
+export const AUTH_ENDPOINT = {
+    development: 'https://auth.development.opexa.io',
+    production: 'https://auth.opexa.io',
+}[ENVIRONMENT];
+export const CMS_PORTAL_ENDPOINT = {
+    development: 'https://portal-api.opexacms.io',
+    production: 'https://portal-api.opexacms.io',
+}[ENVIRONMENT];
+export const STATIC_ENDPOINT = {
+    development: 'https://static.development.atalos.io',
+    production: 'https://static.atalos.io',
+}[ENVIRONMENT];

package/dist/constants/gameProviders.d.ts

@@ -1,5 +1,4 @@
-import type { GameProvider } from '@opexa/portal-sdk-core';
-import type { GameProviderData } from '../types';
+import type { GameProvider, GameProviderData } from '../types';
 export declare const GAME_PROVIDER_DATA: Record<GameProvider, GameProviderData>;
 export declare const GAME_PROVIDERS: ["ALIZE", "BGAMING", "BOOONGO", "EVOPLAY", "BTI", "CQ9", "DARWIN", "DG", "DRBINGO", "E2E", "ETENGJUE", "EVOLUTION", "EVOLUTION_REDTIGER", "EZUGI", "FACHAI", "HABANERO", "HACKSAW", "HOLLYWOODTV", "JDB", "JILI", "JDBGTF", "JOKER", "JDBSPRIBE", "JILI_BINGO", "KINGMAKER", "KINGMIDAS", "MEGA2SPIN", "MICROGAMING", "MEGABALL", "ONEAPI_EVOLUTION", "PGSOFT", "PLAYTECH", "PRAGMATICPLAY", "RELAXGAMING", "RTG", "SABA", "SPINIX", "SPRIBE", "YELLOWBAT", "EVOLUTIONNETENT", "EVOLUTION_NETENT"];
 export declare const LEGACY_GAME_PROVIDERS: ["JILI", "PGSOFT", "FACHAI", "BTI", "DG", "PLAYTECH", "E2E", "ONEAPI_EVOLUTION", "CQ9", "JDB", "HABANERO", "SPINIX", "JOKER", "HACKSAW", "EVOLUTIONNETENT", "JDBGTF", "JDBSPRIBE", "MICROGAMING", "RELAXGAMING", "EVOPLAY", "BOOONGO", "BGAMING", "KINGMAKER", "KINGMIDAS", "YELLOWBAT", "ETENGJUE", "SABA", "PRAGMATICPLAY", "SPRIBE", "EZUGI", "ALIZE"];

package/dist/constants/gameProviders.js

@@ -283,6 +283,12 @@ export const GAME_PROVIDER_DATA = {
         slug: 'evolution-netent',
         logo: evolutionNetent,
     },
+    DIGITAIN: {
+        id: 'DIGITAIN',
+        name: 'Digitain',
+        slug: 'digitain',
+        logo: '',
+    },
 };
 export const GAME_PROVIDERS = [
     'ALIZE',

package/dist/constants/gameTypes.d.ts

@@ -1,4 +1,3 @@
-import type { GameType } from '@opexa/portal-sdk-core';
-import type { GameTypeData } from '../types';
+import type { GameType, GameTypeData } from '../types';
 export declare const GAME_TYPE_DATA: Record<GameType, GameTypeData>;
 export declare const GAME_TYPES: ["ARCADE", "BINGO", "FISHING", "GAMES", "LIVE", "NUMERICAL", "SLOTS", "SPECIALTY", "SPORTS", "TABLE"];

package/dist/constants/headerKeys.d.ts

@@ -1 +1,2 @@
 export declare const RECAPTCHA_HEADER_KEY: string;
+export declare const TEST_PASS_HEADER_KEY: string;

package/dist/constants/headerKeys.js

@@ -1 +1,2 @@
 export const RECAPTCHA_HEADER_KEY = 'Google-Recaptcha-Response';
+export const TEST_PASS_HEADER_KEY = 'Test-Pass';

package/dist/constants/secretQuestions.d.ts

@@ -1,3 +1,3 @@
-import type { SecretQuestion } from '@opexa/portal-sdk-core';
+import type { SecretQuestion } from '../types';
 export declare const SECRET_QUESTIONS: ["BEST_CHILDHOOD_FRIEND", "BIRTH_PLACE", "FAVORITE_BOOK", "FAVORITE_MOVIE", "FAVORITE_TEACHER", "FIRST_CAR", "FIRST_PET", "FIRST_SCHOOL", "MOTHERS_MAIDEN_NAME", "PARENTS_MET_CITY"];
 export declare const SECRET_QUESTIONS_MAP: Record<SecretQuestion, string>;