@opexa/portal-components 0.0.680 → 0.0.682

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -6,11 +6,13 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { Controller, useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
+import invariant from 'tiny-invariant';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
 import { useAuthenticateMutation } from '../../client/hooks/useAuthenticateMutation.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useSignInMutation } from '../../client/hooks/useSignInMutation.js';
+import { getSession } from '../../client/services/getSession.js';
 import { hasSavedBiometry } from '../../client/utils/biometric.js';
 import { toaster } from '../../client/utils/toaster.js';
 import { SECRET_QUESTIONS, SECRET_QUESTIONS_MAP } from '../../constants/index.js';
@@ -19,6 +21,7 @@ import { EyeIcon } from '../../icons/EyeIcon.js';
 import { EyeOffIcon } from '../../icons/EyeOffIcon.js';
 import pagcorLogo from '../../images/pagcor-round-icon.png';
 import responsibleGamingLogo from '../../images/responsible-gaming-gold.png';
+import { unregisterFCMDevice } from '../../services/trigger.js';
 import { Button } from '../../ui/Button/index.js';
 import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Field } from '../../ui/Field/index.js';
@@ -45,12 +48,20 @@ export function NameAndPasswordSignIn() {
         registerBiometrics: ctx.registerBiometrics,
     })));
     const signInMutation = useSignInMutation({
-        onSuccess(authenticator) {
+        onSuccess: async (authenticator) => {
             if (authenticator) {
                 context.setStep(2);
             }
             else {
-                console.log('hasSavedBiometry', hasSavedBiometry());
+                const session = await getSession();
+                invariant(session.status === 'authenticated');
+                await unregisterFCMDevice({
+                    type: ['IOS', 'ANDROID'],
+                }, {
+                    headers: {
+                        Authorization: `Bearer ${session.token}`,
+                    },
+                });
                 if (!hasSavedBiometry()) {
                     globalStore.registerBiometrics.setOpen(true);
                 }
@@ -72,12 +83,21 @@ export function NameAndPasswordSignIn() {
         },
     });
     const authenticateMutation = useAuthenticateMutation({
-        onSuccess() {
+        onSuccess: async () => {
             globalStore.signIn.setOpen(false);
             authenticateMutation.reset();
             signInMutation.reset();
             context.setStep(0);
             form.reset();
+            const session = await getSession();
+            invariant(session.status === 'authenticated');
+            await unregisterFCMDevice({
+                type: ['IOS', 'ANDROID'],
+            }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
             if (signInProps.shouldShowResponsibleGamingReminder) {
                 globalStore.responsibleGamingReminder.setOpen(true);
             }

package/dist/components/SignIn/SignInTrigger.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 interface SignInTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }

package/dist/components/SignIn/SignInTrigger.js

@@ -1,22 +1,24 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react/factory';
+import { useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { getSession } from '../../client/services/getSession.js';
 import { signIn } from '../../client/services/signIn.js';
-import { BiometricAuthError, getBiometricCredentials, getBiometricInfo, hasSavedBiometry, performBiometricVerification, saveBiometricCredentials, } from '../../client/utils/biometric.js';
+import { BiometricAuthError, deleteBiometricCredentials, getBiometricCredentials, getBiometricInfo, hasSavedBiometry, performBiometricVerification, saveBiometricCredentials, } from '../../client/utils/biometric.js';
 import { toaster } from '../../client/utils/toaster.js';
 import { createSingleUseToken } from '../../services/auth.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getSessionQueryKey } from '../../utils/queryKeys.js';
 export function SignInTrigger(props) {
+    const [hasCancelledBiometric, setHasCancelledBiometric] = useState(false);
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         signIn: ctx.signIn,
         registerBiometrics: ctx.registerBiometrics,
     })));
     return (_jsx(ark.button, { type: "button", "aria-label": "Sign in", "data-state": globalStore.signIn.open ? 'open' : 'closed', ...props, onClick: async (e) => {
-            if (hasSavedBiometry()) {
+            if (hasSavedBiometry() && !hasCancelledBiometric) {
                 const ok = await performBiometricVerification({
                     reason: 'Login to your account',
                     title: 'Login',
@@ -28,7 +30,10 @@ export function SignInTrigger(props) {
                     const info = await getBiometricInfo();
                     if (info.errorCode === BiometricAuthError.APP_CANCEL ||
                         info.errorCode === BiometricAuthError.USER_CANCEL ||
-                        info.errorCode === BiometricAuthError.SYSTEM_CANCEL) {
+                        info.errorCode === BiometricAuthError.SYSTEM_CANCEL ||
+                        info.errorCode === undefined ||
+                        info.errorCode === null) {
+                        setHasCancelledBiometric(true);
                         console.log('Biometric verification cancelled');
                     }
                     else {
@@ -43,10 +48,21 @@ export function SignInTrigger(props) {
                     globalStore.signIn.setOpen(!globalStore.signIn.open);
                     return;
                 }
-                await signIn({
-                    type: 'SINGLE_USE_TOKEN',
-                    token: credentials.password,
-                });
+                try {
+                    await signIn({
+                        type: 'SINGLE_USE_TOKEN',
+                        token: credentials.password,
+                    });
+                }
+                catch (err) {
+                    console.log(err);
+                    toaster.error({
+                        title: 'Biometric removed or token expired.',
+                        description: 'Please sign in with your mobile number or username to re-enable biometric login.',
+                    });
+                    deleteBiometricCredentials();
+                    globalStore.signIn.setOpen(!globalStore.signIn.open);
+                }
                 getQueryClient().invalidateQueries({
                     queryKey: getSessionQueryKey(),
                 });
@@ -75,6 +91,45 @@ export function SignInTrigger(props) {
                 }
             }
             else {
+                // still update biometric credentials if user has cancelled biometric once
+                if (hasCancelledBiometric) {
+                    const credentials = await getBiometricCredentials();
+                    if (!credentials) {
+                        toaster.error({ description: 'Biometric verification failed' });
+                        globalStore.signIn.setOpen(!globalStore.signIn.open);
+                        return;
+                    }
+                    await signIn({
+                        type: 'SINGLE_USE_TOKEN',
+                        token: credentials.password,
+                    });
+                    getQueryClient().invalidateQueries({
+                        queryKey: getSessionQueryKey(),
+                    });
+                    const session = await getSession();
+                    const r = await createSingleUseToken({
+                        headers: {
+                            Authorization: `Bearer ${session.token}`,
+                        },
+                    });
+                    if (r.token) {
+                        const saved = await saveBiometricCredentials({
+                            username: credentials.username,
+                            password: r.token,
+                        });
+                        if (saved) {
+                            console.info('Biometric credentials has been updated');
+                        }
+                        else {
+                            console.warn('Failed to updated biometric credentials');
+                            globalStore.signIn.setOpen(!globalStore.signIn.open);
+                        }
+                    }
+                    else {
+                        console.error('Failed to create token');
+                        globalStore.signIn.setOpen(!globalStore.signIn.open);
+                    }
+                }
                 globalStore.signIn.setOpen(!globalStore.signIn.open);
             }
             return props.onClick?.(e);

package/dist/components/TopWins/TopWins.client.js

@@ -24,7 +24,7 @@ export function TopWins__client(props) {
     return (_jsxs("div", { className: twMerge('w-full', classNames.root), children: [_jsx("div", { className: twMerge('mb-3 font-semibold text-lg md:mb-4'), children: props.heading ?? 'Recent Big Wins' }), _jsx("div", { ref: emblaRef, className: twMerge('relative lg:overflow-hidden'), children: _jsx("div", { className: twMerge('flex gap-sm lg:gap-md'), children: topWins.map((topWin) => (_jsxs("div", { className: twMerge('flex w-[calc((100%-(0.375rem*2))/3)] shrink-0 flex-col space-y-2 rounded-sm border border-border-primary bg-bg-tertiary p-2 text-center lg:w-[calc((100%-(0.5rem*5))/6)] xl:w-[calc((100%-(0.5rem*9))/10)]', classNames.card), children: [_jsx("div", { className: twMerge('mx-auto aspect-square w-full', classNames.image), children: topWin.game && (_jsx(Image, { src: getGameImageUrl({
                                         id: topWin.game.id,
                                         provider: topWin.game.provider,
-                                    }), alt: "", width: 120, height: 120, loading: "lazy", unoptimized: true, className: twMerge('size-full rounded-sm object-cover', classNames.image) })) }), _jsxs("div", { className: twMerge('space-y-0.5'), children: [_jsx("div", { className: twMerge('text-text-secondary-700 text-xs', classNames.playerName), children: topWin.member.name }), _jsx("div", { className: twMerge('break-words font-semibold text-sm text-text-primary-brand', classNames.amount), children: formatNumber(topWin.payout, {
+                                    }), alt: topWin.game.name, width: 120, height: 120, loading: "lazy", unoptimized: true, className: twMerge('size-full rounded-sm object-cover', classNames.image) })) }), _jsxs("div", { className: twMerge('space-y-0.5'), children: [_jsx("div", { className: twMerge('text-text-secondary-700 text-xs', classNames.playerName), children: topWin.member.name }), _jsx("div", { className: twMerge('break-words font-semibold text-sm text-text-primary-brand', classNames.amount), children: formatNumber(topWin.payout, {
                                             currency: localeInfo.currency.code,
                                             minDecimalPlaces: 2,
                                         }) }), _jsxs("div", { className: twMerge('break-words text-text-secondary-700 text-xs', classNames.multiplier), children: [formatNumber(topWin.multiplier, {

package/dist/components/shared/IdFrontImageField/IdFrontImageField.client.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
 import Image from 'next/image';
 import { useRef } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -52,8 +53,16 @@ export function IdFrontImageField__client(props) {
                                                     context.query.isLoading ||
                                                     context.mutation.isPending ||
                                                     localProps.disabled ||
-                                                    localProps.readOnly, className: "font-semibold text-button-secondary-fg disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: () => {
-                                    context.disclosure.setOpen(true);
+                                                    localProps.readOnly, className: "font-semibold text-button-secondary-fg disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: async () => {
+                                    if (Capacitor.isNativePlatform()) {
+                                        const data = await context.camera.openNativeCamera();
+                                        if (!data?.file)
+                                            return;
+                                        context.mutation.mutate({ file: data.file });
+                                    }
+                                    else {
+                                        context.disclosure.setOpen(true);
+                                    }
                                 }, disabled: context.field?.disabled ||
                                     context.field?.readOnly ||
                                     context.query.isLoading ||
@@ -70,6 +79,7 @@ export function IdFrontImageField__client(props) {
  */
 function Camera() {
     const context = useIdFrontImageFieldContext();
+    console.log(context.camera, 'context.camera');
     return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
             context.disclosure.setOpen(details.open);
         }, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: context.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: "mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg bg-bg-primary-alt 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: "mt-md text-center text-text-tertiary-600 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: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "flex aspect-[4/3] flex-col items-center justify-center rounded-md border border-border-disabled bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "size-10 text-center text-text-placeholder-subtle lg:size-12" }), _jsx("h2", { className: "mt-3 font-semibold text-sm lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "mt-0.5 text-center text-text-tertiary-600 text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {

package/dist/components/shared/SelfieImageField/SelfieImageField.client.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
 import Image from 'next/image';
 import { useRef } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -52,8 +53,16 @@ export function SelfieImageField__client(props) {
                                                     context.query.isLoading ||
                                                     context.mutation.isPending ||
                                                     localProps.disabled ||
-                                                    localProps.readOnly, className: "font-semibold text-button-secondary-fg disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: () => {
-                                    context.disclosure.setOpen(true);
+                                                    localProps.readOnly, className: "font-semibold text-button-secondary-fg disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: async () => {
+                                    if (Capacitor.isNativePlatform()) {
+                                        const data = await context.camera.openNativeCamera();
+                                        if (!data?.file)
+                                            return;
+                                        context.mutation.mutate({ file: data.file });
+                                    }
+                                    else {
+                                        context.disclosure.setOpen(true);
+                                    }
                                 }, disabled: context.field?.disabled ||
                                     context.field?.readOnly ||
                                     context.query.isLoading ||

package/dist/icons/LinkBrokenIcon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function LinkBrokenIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/LinkBrokenIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LinkBrokenIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: _jsx("path", { d: "M8.5 15.5L15.5 8.49998M9 4V2M15 20V22M4 9H2M20 15H22M4.91421 4.91421L3.5 3.5M19.0858 19.0857L20.5 20.4999M12 17.6568L9.87871 19.7781C8.31662 21.3402 5.78396 21.3402 4.22186 19.7781C2.65976 18.216 2.65976 15.6833 4.22186 14.1212L6.34318 11.9999M17.6569 11.9999L19.7782 9.87859C21.3403 8.31649 21.3403 5.78383 19.7782 4.22174C18.2161 2.65964 15.6835 2.65964 14.1214 4.22174L12 6.34306", stroke: "#FEDF89", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}