@opexa/portal-components 0.0.263 → 0.0.265

package/dist/components/Disclaimer/DisclaimerV2.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Image from 'next/image';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { CheckIcon } from '../../icons/CheckIcon.js';
 import pagcorLogo from '../../images/pagcor2.png';
 import responsibleGamingLogo from '../../images/responsible-gaming.png';
@@ -18,8 +18,25 @@ export function DisclaimerV2(props) {
     const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
     const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
     const [isChecked, setIsChecked] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false), responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false), responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start gap-y-4 overflow-y-auto 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)"] })] }), !props.hasNoCheckbox ? (_jsxs(Checkbox.Root, { checked: isChecked, onCheckedChange: (e) => {
+    const [isTermsOfUseAccepted, setIsTermsOfUseAccepted] = useState(false);
+    const [isResponsibleGamingAccepted, setIsResponsibleGamingAccepted] = useState(false);
+    useEffect(() => {
+        if (isTermsOfUseAccepted && isResponsibleGamingAccepted) {
+            setIsChecked(true);
+        }
+    }, [isTermsOfUseAccepted, isResponsibleGamingAccepted]);
+    return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => {
+                    setIsResponsibleGamingAccepted(true);
+                    setResponsibleGamingOpen(false);
+                }, responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => {
+                    setIsTermsOfUseAccepted(true);
+                    setTermsOfUseOpen(false);
+                }, responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start gap-y-4 overflow-y-auto 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)"] })] }), !props.hasNoCheckbox ? (_jsxs(Checkbox.Root, { checked: isChecked, onCheckedChange: (e) => {
                                                         setIsChecked(!!e.checked);
+                                                        if (!e.checked) {
+                                                            setIsTermsOfUseAccepted(false);
+                                                            setIsResponsibleGamingAccepted(false);
+                                                        }
                                                     }, 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: () => {

package/dist/components/GameProviders/GameProvidersCarousel.js

@@ -15,7 +15,13 @@ import { callIfFn } from '../../utils/callIfFn.js';
 export function GameProvidersCarousel(props) {
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
-        slidesToScroll: 1,
+        slidesToScroll: 3,
+        breakpoints: {
+            '(min-width: 1024px)': {
+                align: 'start',
+                slidesToScroll: 6,
+            },
+        },
     });
     const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
     const [nextBtnDisabled, setNextBtnDisabled] = useState(true);

package/dist/components/Search/Search.lazy.js

@@ -22,6 +22,12 @@ import { Presence } from '../../ui/Presence/index.js';
 import { callIfFn } from '../../utils/callIfFn.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';
+function lookup(value, compare) {
+    return value
+        .toLowerCase()
+        .replace(/\s+/g, '')
+        .includes(compare.toLowerCase().replace(/\s+/g, ''));
+}
 export function Search(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         search: ctx.search,
@@ -30,10 +36,9 @@ export function Search(props) {
     const [search, setSearch] = useState('');
     const gameProviders = props.gameProviders
         .map((provider) => GAME_PROVIDER_DATA[provider])
-        .filter((provider) => provider.name
-        .toLowerCase()
-        .replace(/\s+/g, '')
-        .includes(search.toLowerCase().replace(/\s+/g, '')));
+        .filter((provider) => {
+        return lookup(provider.name, search) || lookup(provider.slug, search);
+    });
     const gamesQuery = useGamesQuery({
         first: 18,
         search: gameProviders.length > 0 ? undefined : search,
@@ -48,7 +53,7 @@ export function Search(props) {
             },
         },
     }, {
-        enabled: search.length >= 3,
+        enabled: search.length >= 2,
     });
     const games = gamesQuery.data?.pages
         .map((page) => page.edges.map((edge) => edge.node))
@@ -68,10 +73,10 @@ export function Search(props) {
     return (_jsx(Dialog.Root, { open: globalStore.search.open, onOpenChange: (details) => {
             globalStore.search.setOpen(details.open);
             setSearch('');
-        }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary lg:min-h-auto mx-auto min-h-full w-full overflow-y-auto pt-xl lg:mt-[132px] lg:max-w-[1136px] lg:bg-unset lg:pt-0", children: [_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex items-center justify-between px-4 lg:hidden", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 40, className: "h-8 w-auto" }), _jsx(IconButton, { size: "sm", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "text-text-quinary size-6" }) })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Dialog.Context, { children: (api) => (_jsx("button", { type: "button", onClick: () => api.setOpen(false), className: "hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex", children: _jsx(XIcon, { className: "size-5 text-white" }) })) }) }), _jsx("div", { className: "mt-2xl px-4 lg:mt-xl lg:px-0", children: _jsxs("div", { className: "relative", children: [_jsx(SearchLgIcon, { className: "text-text-quinary pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(DebouncedInput, { ref: inputRef, value: search, placeholder: props.placeholder ?? 'Search', onChange: setSearch }), _jsx(Presence, { present: search.length > 0, asChild: true, lazyMount: true, children: _jsx("button", { type: "button", className: "text-text-secondary-700 absolute right-3.5 top-1/2 -translate-y-1/2 font-semibold", onClick: () => {
+        }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary lg:min-h-auto mx-auto min-h-full w-full overflow-y-auto pt-xl lg:mt-[132px] lg:max-w-[1136px] lg:bg-unset lg:px-2 lg:pt-0", children: [_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex items-center justify-between px-4 lg:hidden", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 40, className: "h-8 w-auto" }), _jsx(IconButton, { size: "sm", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "text-text-quinary size-6" }) })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Dialog.Context, { children: (api) => (_jsx("button", { type: "button", onClick: () => api.setOpen(false), className: "hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex", children: _jsx(XIcon, { className: "size-5 text-white" }) })) }) }), _jsx("div", { className: "mt-2xl px-4 lg:mt-xl lg:px-0", children: _jsxs("div", { className: "relative", children: [_jsx(SearchLgIcon, { className: "text-text-quinary pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(DebouncedInput, { ref: inputRef, value: search, placeholder: props.placeholder ?? 'Search', onChange: setSearch }), _jsx(Presence, { present: search.length > 0, asChild: true, lazyMount: true, children: _jsx("button", { type: "button", className: "text-text-secondary-700 absolute right-3.5 top-1/2 -translate-y-1/2 font-semibold", onClick: () => {
                                                     setSearch('');
                                                     inputRef.current?.focus();
-                                                }, children: "Clear" }) })] }) }), _jsx("div", { className: "lg:bg-bg-primary lg:border-border-primary mt-2xl p-xl pb-3xl lg:mt-2 lg:max-h-[41rem] lg:overflow-y-auto lg:rounded-xl lg:border", children: search.length <= 0 ? (_jsx(Alert, { message: "Search for your favorite game or provider." })) : search.length >= 1 && search.length <= 2 ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [empty && _jsx(Alert, { message: "No results found" }), !empty && (_jsxs(_Fragment, { children: [gameProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Providers" }), _jsx("div", { className: "mb-3xl mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), "aria-label": `View ${provider.name} games`, className: twMerge('bg-brand-800 flex h-14 w-full items-center rounded-md', classNames.providerThumbnailRoot), onClick: () => {
+                                                }, children: "Clear" }) })] }) }), _jsx("div", { className: "lg:bg-bg-primary lg:border-border-primary mt-2xl p-xl pb-3xl lg:mt-2 lg:max-h-[41rem] lg:overflow-y-auto lg:rounded-xl lg:border", children: search.length <= 0 ? (_jsx(Alert, { message: "Search for your favorite game or provider." })) : search.length === 1 ? (_jsx(Alert, { message: "Search requires at least 2 characters." })) : (_jsxs(_Fragment, { children: [empty && _jsx(Alert, { message: "No results found" }), !empty && (_jsxs(_Fragment, { children: [gameProviders.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Providers" }), _jsx("div", { className: "mb-3xl mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), "aria-label": `View ${provider.name} games`, className: twMerge('bg-brand-800 flex h-14 w-full items-center rounded-md', classNames.providerThumbnailRoot), onClick: () => {
                                                                     globalStore.search.setOpen(false);
                                                                 }, children: _jsx(Image, { src: props.gameProviderImages?.[provider.id] ??
                                                                         provider.logo, alt: "", width: 100, height: 50, className: twMerge('mx-auto h-auto w-full', classNames.providerThumbnailImage) }) }, provider.id))) })] })), games.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Games" }), _jsx("div", { className: "mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: games.map((game) => (_jsxs(GameLaunchTrigger, { game: game, className: twMerge('block w-full shadow-sm', classNames.gameThumbnailRoot), onClick: () => {

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
@@ -91,7 +91,7 @@ export function MobileNumberSignIn(props) {
             if (!v) {
                 ctx.addIssue({
                     code: z.ZodIssueCode.custom,
-                    message: 'You must accept the terms and conditions',
+                    message: 'You must accept the terms and conditions and the responsible gaming guidelines',
                 });
             }
         }),
@@ -126,7 +126,20 @@ export function MobileNumberSignIn(props) {
     const form2Ref = useRef(null);
     const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
     const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signInProps.termsOfUseContent ?? 'Terms of Use content', siteName: signInProps.siteName ?? 'Site', logo: signInProps.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false), responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signInProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signInProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false), responsibleGamingLogo: signInProps.responsibleGamingLogo }), context.step === 1 && (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
+    const [isTermsOfUseAccepted, setIsTermsOfUseAccepted] = useState(false);
+    const [isResponsibleGamingAccepted, setIsResponsibleGamingAccepted] = useState(false);
+    useEffect(() => {
+        if (isTermsOfUseAccepted && isResponsibleGamingAccepted) {
+            step1Form.setValue('termsAccepted', true);
+        }
+    }, [isResponsibleGamingAccepted, isTermsOfUseAccepted, step1Form]);
+    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signInProps.termsOfUseContent ?? 'Terms of Use content', siteName: signInProps.siteName ?? 'Site', logo: signInProps.logo, open: isTermsOfUseOpen, onCloseAction: () => {
+                    setIsTermsOfUseAccepted(true);
+                    setTermsOfUseOpen(false);
+                }, responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signInProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signInProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => {
+                    setIsResponsibleGamingAccepted(true);
+                    setResponsibleGamingOpen(false);
+                }, responsibleGamingLogo: signInProps.responsibleGamingLogo }), context.step === 1 && (_jsxs(_Fragment, { children: [_jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
                             sendVerificationCodeMutation.mutate({
                                 channel: 'SMS',
                                 recipient: mobileNumberParser.format(data.mobileNumber),
@@ -136,6 +149,10 @@ export function MobileNumberSignIn(props) {
                                                     paddingLeft: `calc(2.75rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
                                                 }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Log In" }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, className: "mt-xl", children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
                                                 o.field.onChange(details.checked);
+                                                if (!details.checked) {
+                                                    setIsTermsOfUseAccepted(false);
+                                                    setIsResponsibleGamingAccepted(false);
+                                                }
                                             }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I have read and accept the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
                                                                 setTermsOfUseOpen(true);
                                                             }, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useDialogContext } from '@ark-ui/react/dialog';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
@@ -89,7 +89,7 @@ export function NameAndPasswordSignIn(props) {
             if (!v) {
                 ctx.addIssue({
                     code: z.ZodIssueCode.custom,
-                    message: 'You must accept the terms and conditions',
+                    message: 'You must accept the terms and conditions and the responsible gaming guidelines',
                 });
             }
         }),
@@ -115,7 +115,20 @@ export function NameAndPasswordSignIn(props) {
         : null;
     const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
     const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signInProps.termsOfUseContent ?? 'Terms of Use content', siteName: signInProps.siteName ?? 'Site', logo: signInProps.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false), responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signInProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signInProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false), responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit((data) => {
+    const [isTermsOfUseAccepted, setIsTermsOfUseAccepted] = useState(false);
+    const [isResponsibleGamingAccepted, setIsResponsibleGamingAccepted] = useState(false);
+    useEffect(() => {
+        if (isTermsOfUseAccepted && isResponsibleGamingAccepted) {
+            form.setValue('termsAccepted', true);
+        }
+    }, [isResponsibleGamingAccepted, isTermsOfUseAccepted, form]);
+    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signInProps.termsOfUseContent ?? 'Terms of Use content', siteName: signInProps.siteName ?? 'Site', logo: signInProps.logo, open: isTermsOfUseOpen, onCloseAction: () => {
+                    setIsTermsOfUseAccepted(true);
+                    setTermsOfUseOpen(false);
+                }, responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signInProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signInProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => {
+                    setIsResponsibleGamingAccepted(true);
+                    setResponsibleGamingOpen(false);
+                }, responsibleGamingLogo: signInProps.responsibleGamingLogo }), _jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit((data) => {
                     if (!signInMutation.data) {
                         signInMutation.mutate({
                             type: 'NAME_AND_PASSWORD',
@@ -140,6 +153,10 @@ export function NameAndPasswordSignIn(props) {
                                             dialog.setOpen(false);
                                         }, children: "Forgot Password" }) })] }) }), signInMutation.data && (_jsxs(Field.Root, { invalid: !!form.formState.errors.secretAnswer, className: "mt-xl", children: [_jsx(Field.Label, { children: secretQuestion }), _jsx(Field.Input, { placeholder: "Answer the security question", ...form.register('secretAnswer') }), _jsx(Field.ErrorText, { children: form.formState.errors.secretAnswer?.message })] })), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: signInMutation.isPending || authenticateMutation.isPending, children: "Log In" }), _jsx(Controller, { control: form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, className: "mt-xl", children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
                                         o.field.onChange(details.checked);
+                                        if (!details.checked) {
+                                            setIsTermsOfUseAccepted(false);
+                                            setIsResponsibleGamingAccepted(false);
+                                        }
                                     }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I have read and accept the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
                                                         setTermsOfUseOpen(true);
                                                     }, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {

package/dist/components/SignUp/SignUpDefault/SignUpForm.js

@@ -5,7 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { ObjectId } from '@opexa/object-id';
 import { differenceInYears, format } from 'date-fns';
 import { useSearchParams } from 'next/navigation';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
@@ -76,7 +76,7 @@ export function SignUpForm() {
             if (!v) {
                 ctx.addIssue({
                     code: z.ZodIssueCode.custom,
-                    message: 'You must accept the terms and conditions',
+                    message: 'You must accept the terms and conditions and the responsible gaming guidelines',
                 });
             }
         }),
@@ -137,7 +137,20 @@ export function SignUpForm() {
     const branchCode = step1Form.watch('branchCode', '');
     const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
     const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signUpProps.termsOfUseContent ?? 'Terms of Use content', siteName: signUpProps.siteName ?? 'Site', logo: signUpProps.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false), responsibleGamingLogo: signUpProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signUpProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signUpProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false), responsibleGamingLogo: signUpProps.responsibleGamingLogo }), step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Create an account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", autoComplete: "off", onSubmit: step1Form.handleSubmit(async (data) => {
+    const [isTermsOfUseAccepted, setIsTermsOfUseAccepted] = useState(false);
+    const [isResponsibleGamingAccepted, setIsResponsibleGamingAccepted] = useState(false);
+    useEffect(() => {
+        if (isTermsOfUseAccepted && isResponsibleGamingAccepted) {
+            step1Form.setValue('termsAccepted', true);
+        }
+    }, [isResponsibleGamingAccepted, isTermsOfUseAccepted, step1Form]);
+    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: signUpProps.termsOfUseContent ?? 'Terms of Use content', siteName: signUpProps.siteName ?? 'Site', logo: signUpProps.logo, open: isTermsOfUseOpen, onCloseAction: () => {
+                    setIsTermsOfUseAccepted(true);
+                    setTermsOfUseOpen(false);
+                }, responsibleGamingLogo: signUpProps.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: signUpProps.responsibleGamingContent ?? 'Responsible Gaming content', logo: signUpProps.logo, open: isResponsibleGamingOpen, onCloseAction: () => {
+                    setIsResponsibleGamingAccepted(true);
+                    setResponsibleGamingOpen(false);
+                }, responsibleGamingLogo: signUpProps.responsibleGamingLogo }), step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Create an account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", autoComplete: "off", onSubmit: step1Form.handleSubmit(async (data) => {
                             try {
                                 await sendVerificationCodeMutation.mutateAsync({
                                     channel: 'SMS',
@@ -183,6 +196,10 @@ export function SignUpForm() {
                                                         return (_jsx(Select.Item, { item: item, "aria-disabled": item.disabled, className: twMerge(item.disabled && 'text-border-disabled'), children: _jsx("div", { title: label, className: "line-clamp-1", children: label }) }, item.code));
                                                     }) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.branchCode?.message })] }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: o.fieldState.invalid, children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
                                                 o.field.onChange(details.checked);
+                                                if (!details.checked) {
+                                                    setIsTermsOfUseAccepted(false);
+                                                    setIsResponsibleGamingAccepted(false);
+                                                }
                                             }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I have read and accept the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
                                                                 setTermsOfUseOpen(true);
                                                             }, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {

package/dist/components/SignUp/SignUpKYC/SignUpFormKYC.js

@@ -142,7 +142,7 @@ export function SignUpFormKYC() {
             if (!v) {
                 ctx.addIssue({
                     code: z.ZodIssueCode.custom,
-                    message: 'You must accept the terms and conditions',
+                    message: 'You must accept the terms and conditions and the responsible gaming guidelines',
                 });
             }
         }),
@@ -226,7 +226,20 @@ export function SignUpFormKYC() {
     const memberVerification = useMemberVerificationQuery();
     const memberId = memberVerification.data?.id;
     const { mutate: uploadImageFile } = useUploadImageFileMutation();
-    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent ?? 'Terms of Use content', siteName: props.siteName ?? 'Site', logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false), responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent ?? 'Responsible Gaming content', logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false), responsibleGamingLogo: props.responsibleGamingLogo }), step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Create an account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", autoComplete: "off", onSubmit: step1Form.handleSubmit(async (data) => {
+    const [isTermsOfUseAccepted, setIsTermsOfUseAccepted] = useState(false);
+    const [isResponsibleGamingAccepted, setIsResponsibleGamingAccepted] = useState(false);
+    useEffect(() => {
+        if (isTermsOfUseAccepted && isResponsibleGamingAccepted) {
+            step1Form.setValue('termsAccepted', true);
+        }
+    }, [isResponsibleGamingAccepted, isTermsOfUseAccepted, step1Form]);
+    return (_jsxs(_Fragment, { children: [_jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent ?? 'Terms of Use content', siteName: props.siteName ?? 'Site', logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => {
+                    setIsTermsOfUseAccepted(true);
+                    setTermsOfUseOpen(false);
+                }, responsibleGamingLogo: props.responsibleGamingLogo }), _jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent ?? 'Responsible Gaming content', logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => {
+                    setIsResponsibleGamingAccepted(true);
+                    setResponsibleGamingOpen(false);
+                }, responsibleGamingLogo: props.responsibleGamingLogo }), step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Create an account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Register instantly and start playing!" }), _jsxs("form", { className: "mt-3xl", autoComplete: "off", onSubmit: step1Form.handleSubmit(async (data) => {
                             try {
                                 await sendVerificationCodeMutation.mutateAsync({
                                     channel: 'SMS',
@@ -276,6 +289,10 @@ export function SignUpFormKYC() {
                                             props.setSelfieImage(file);
                                         } }, "selfie-image-upload"), _jsx(Field.ErrorText, { children: step1Form.formState.errors.selfieImage?.message })] }), _jsxs("div", { className: "mt-xl text-center text-sm", children: ["Prohibition to play in open and public places", _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx("div", { className: "flex size-5xl items-center justify-center overflow-hidden rounded-full bg-white", children: _jsx(Image, { src: pagcorLogo, alt: "", draggable: false, height: 62, width: 186, className: "h-9.5 w-auto object-contain" }) }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-10 w-auto", draggable: false })] })] }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: o.fieldState.invalid, children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
                                                 o.field.onChange(details.checked);
+                                                if (!details.checked) {
+                                                    setIsTermsOfUseAccepted(false);
+                                                    setIsResponsibleGamingAccepted(false);
+                                                }
                                             }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I have read and accept the", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
                                                                 setTermsOfUseOpen(true);
                                                             }, children: "Terms and Conditions" }), ' ', "and", ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {

package/dist/components/TransactionRecords/DepositRecordsTable.js

@@ -85,7 +85,7 @@ export function DepositRecordsTable() {
                     depositStatus: true,
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest deposit records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Deposit No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Deposit Method" }), _jsx(Table.Heading, { children: "Applied Amount" }), _jsx(Table.Heading, { children: "Received Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Deposit Time" }), _jsx(Table.Heading, { children: "Received Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.depositNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Deposit No." }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Deposit Method" }), _jsx(Table.Heading, { children: "Applied Amount" }), _jsx(Table.Heading, { children: "Received Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Deposit Time" }), _jsx(Table.Heading, { children: "Received Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.depositNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
                                                     currency: localeInfo.currency.code,

package/dist/components/TransactionRecords/TableFilters.js

@@ -21,6 +21,7 @@ const DEPOSIT_TYPES = [
     'MAYA',
     'MANUAL',
     'ONLINE_BANK',
+    'QR_PH'
 ];
 const DEPOSIT_TYPES_MAP = {
     BANK: 'Bank',
@@ -28,6 +29,7 @@ const DEPOSIT_TYPES_MAP = {
     MAYA: 'Maya',
     MANUAL: 'Manual',
     ONLINE_BANK: 'Online Bank',
+    QR_PH: 'QR PH',
 };
 const DEPOSIT_STATUSES = [
     'ACCEPTED',

package/dist/components/TransactionRecords/WithdrawalRecordsTable.js

@@ -85,7 +85,7 @@ export function WithdrawalRecordsTable() {
                     withdrawalStatus: true,
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest withdrawal records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: data.recipientMobileNumber }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
                                                     currency: localeInfo.currency.code,

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

@@ -47,38 +47,42 @@ export function useIdFrontImageField(props) {
         video: {
             facingMode: desktop ? 'user' : 'environment',
         },
-        async transform(ctx) {
-            const body = new FormData();
+        async transform(data) {
             const guideRect = guideRef.current?.getBoundingClientRect();
-            const videoRect = ctx.video.getBoundingClientRect();
+            const videoRect = data.video.getBoundingClientRect();
             invariant(guideRect, "'guideRef.getBoundingClientRect()' fails");
-            const scaleX = ctx.image.width / videoRect.width;
-            const scaleY = ctx.image.height / videoRect.height;
+            const scaleX = data.image.width / videoRect.width;
+            const scaleY = data.image.height / videoRect.height;
             const cropTop = (guideRect.top - videoRect.top) * scaleY;
             const cropLeft = (guideRect.left - videoRect.left) * scaleX;
             const cropWidth = guideRect.width * scaleX;
             const cropHeight = guideRect.height * scaleY;
-            body.append('image', ctx.file);
-            body.append('cropTop', cropTop.toString());
-            body.append('cropLeft', cropLeft.toString());
-            body.append('cropWidth', cropWidth.toString());
-            body.append('cropHeight', cropHeight.toString());
-            const response = await fetch('/api/transformers/id-front-image', {
-                method: 'POST',
-                body,
-            });
-            const blob = await response.blob();
-            const file = new File([blob], ctx.file.name, {
-                type: ctx.file.type,
-                endings: 'native',
-                lastModified: Date.now(),
-            });
+            const targetWidth = 1200;
+            const targetHeight = 757;
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            invariant(context, "'canvas.getContext' failed");
+            canvas.width = targetWidth;
+            canvas.height = targetHeight;
+            context.imageSmoothingEnabled = true;
+            context.imageSmoothingQuality = 'high';
+            context.filter = 'brightness(1.05) contrast(1.1) saturate(1.1)';
+            context.drawImage(data.image, cropLeft, cropTop, cropWidth, cropHeight, 0, 0, targetWidth, targetHeight);
+            const file = await new Promise((resolve) => canvas.toBlob((blob) => {
+                invariant(blob);
+                resolve(new File([blob], `front-image-${Date.now()}.jpeg`, {
+                    type: 'image/jpeg',
+                    endings: 'native',
+                    lastModified: Date.now(),
+                }));
+            }, 'image/jpeg', 1.0));
             const url = URL.createObjectURL(file);
             const image = new Image();
             image.src = url;
             image.alt = '';
-            image.width = ctx.image.width;
-            image.height = ctx.image.height;
+            image.width = targetWidth;
+            image.height = targetHeight;
+            context.filter = 'brightness(1.05)';
             return {
                 ok: true,
                 data: {

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

@@ -60,7 +60,6 @@ export function useSelfieImageField(props) {
                     },
                 };
             }
-            const body = new FormData();
             const guideRect = guideRef.current?.getBoundingClientRect();
             const videoRect = data.video.getBoundingClientRect();
             invariant(guideRect, "'guideRef.getBoundingClientRect()' fails");
@@ -70,27 +69,31 @@ export function useSelfieImageField(props) {
             const cropLeft = (guideRect.left - videoRect.left) * scaleX;
             const cropWidth = guideRect.width * scaleX;
             const cropHeight = guideRect.height * scaleY;
-            body.append('image', data.file);
-            body.append('cropTop', cropTop.toString());
-            body.append('cropLeft', cropLeft.toString());
-            body.append('cropWidth', cropWidth.toString());
-            body.append('cropHeight', cropHeight.toString());
-            const response = await fetch('/api/transformers/selfie-image', {
-                method: 'POST',
-                body,
-            });
-            const blob = await response.blob();
-            const file = new File([blob], data.file.name, {
-                type: data.file.type,
-                endings: 'native',
-                lastModified: Date.now(),
-            });
+            const targetWidth = 1200;
+            const targetHeight = 1200;
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            invariant(context, "'canvas.getContext' failed");
+            canvas.width = targetWidth;
+            canvas.height = targetHeight;
+            context.imageSmoothingEnabled = true;
+            context.imageSmoothingQuality = 'high';
+            context.filter = 'brightness(1.05)';
+            context.drawImage(data.image, cropLeft, cropTop, cropWidth, cropHeight, 0, 0, targetWidth, targetHeight);
+            const file = await new Promise((resolve) => canvas.toBlob((blob) => {
+                invariant(blob);
+                resolve(new File([blob], `front-image-${Date.now()}.jpeg`, {
+                    type: 'image/jpeg',
+                    endings: 'native',
+                    lastModified: Date.now(),
+                }));
+            }, 'image/jpeg', 1.0));
             const url = URL.createObjectURL(file);
             const image = new Image();
             image.src = url;
             image.alt = '';
-            image.width = data.image.width;
-            image.height = data.image.height;
+            image.width = targetWidth;
+            image.height = targetHeight;
             return {
                 ok: true,
                 data: {

package/dist/constants/GameProvider.js

@@ -82,13 +82,13 @@ export const GAME_PROVIDER_DATA = {
     },
     DG: {
         id: 'DG',
-        name: 'DG',
+        name: 'Dynasty Gaming',
         slug: 'dg',
         logo: dg,
     },
     DRBINGO: {
         id: 'DRBINGO',
-        name: 'DrBingo',
+        name: 'Dr Bingo',
         slug: 'drbingo',
         logo: drbingo,
     },
@@ -106,7 +106,7 @@ export const GAME_PROVIDER_DATA = {
     },
     EVOLUTION: {
         id: 'EVOLUTION',
-        name: 'Evolution',
+        name: 'Evolution Gaming',
         slug: 'evolution',
         logo: evolution,
     },
@@ -136,13 +136,13 @@ export const GAME_PROVIDER_DATA = {
     },
     HACKSAW: {
         id: 'HACKSAW',
-        name: 'Hacksaw',
+        name: 'Hacksaw Gaming',
         slug: 'hacksaw',
         logo: hacksaw,
     },
     HOLLYWOODTV: {
         id: 'HOLLYWOODTV',
-        name: 'HollywoodTV',
+        name: 'Hollywood TV',
         slug: 'hollywoodtv',
         logo: hollywoodtv,
     },
@@ -184,7 +184,7 @@ export const GAME_PROVIDER_DATA = {
     },
     KINGMAKER: {
         id: 'KINGMAKER',
-        name: 'Kingmaker',
+        name: 'King Maker',
         slug: 'kingmaker',
         logo: kingmaker,
     },
@@ -202,7 +202,7 @@ export const GAME_PROVIDER_DATA = {
     },
     MICROGAMING: {
         id: 'MICROGAMING',
-        name: 'Microgaming',
+        name: 'Micro Gaming',
         slug: 'microgaming',
         logo: microgaming,
     },
@@ -220,7 +220,7 @@ export const GAME_PROVIDER_DATA = {
     },
     PGSOFT: {
         id: 'PGSOFT',
-        name: 'PG',
+        name: 'PG Soft',
         slug: 'pgsoft',
         logo: pgsoft,
     },
@@ -244,7 +244,7 @@ export const GAME_PROVIDER_DATA = {
     },
     RTG: {
         id: 'RTG',
-        name: 'RTG',
+        name: 'Realtime Gaming',
         slug: 'rtg',
         logo: rtg,
     },
@@ -268,7 +268,7 @@ export const GAME_PROVIDER_DATA = {
     },
     YELLOWBAT: {
         id: 'YELLOWBAT',
-        name: 'YellowBat',
+        name: 'Yellow Bat',
         slug: 'yellowbat',
         logo: yellowbat,
     },

package/dist/handlers/index.d.ts

@@ -6,13 +6,6 @@ interface Context {
     params: Promise<Params>;
 }
 export declare const GET: (req: NextRequest, { params }: Context) => Promise<NextResponse<{
-    ok: true;
-    data?: never;
-} | {
-    ok: false;
-    message: string;
-    __error?: unknown;
-}> | NextResponse<{
     ok: false;
     message: string;
     __error?: unknown;
@@ -26,6 +19,13 @@ export declare const GET: (req: NextRequest, { params }: Context) => Promise<Nex
 } | {
     ok: true;
     data: import("../types").Session;
+}> | NextResponse<{
+    ok: true;
+    data?: never;
+} | {
+    ok: false;
+    message: string;
+    __error?: unknown;
 }>>;
 export declare const DELETE: (req: NextRequest, { params }: Context) => Promise<NextResponse<{
     ok: true;

package/dist/handlers/index.js

@@ -5,8 +5,6 @@ import { getSession } from './getSession.js';
 import { patchSession } from './patchSession.js';
 import { postAuthenticate } from './postAuthenticate.js';
 import { postSession } from './postSession.js';
-import { postTransformIdFrontImage } from './postTransformIdFrontImage.js';
-import { postTransformSelfieImage } from './postTransformSelfieImage.js';
 export const GET = async (req, { params }) => {
     const { auth } = await params;
     const path = auth[0];
@@ -29,21 +27,12 @@ export const DELETE = async (req, { params }) => {
 export const POST = async (req, { params }) => {
     const { auth } = await params;
     const path = auth[0];
-    const subpath = auth[1];
     if (path === 'sessions') {
         return await postSession(req);
     }
     if (path === 'authenticate') {
         return await postAuthenticate(req);
     }
-    if (path === 'transformers') {
-        if (subpath === 'selfie-image') {
-            return await postTransformSelfieImage(req);
-        }
-        if (subpath === 'id-front-image') {
-            return await postTransformIdFrontImage(req);
-        }
-    }
     return NextResponse.json({ ok: false, message: 'Not found' }, { status: 404 });
 };
 export const PATCH = async (req, { params }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.263",
+  "version": "0.0.265",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",
@@ -89,7 +89,6 @@
     "is-mobile": "^5.0.0",
     "lodash-es": "^4.17.21",
     "react-image-file-resizer": "^0.4.8",
-    "sharp": "^0.34.2",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^1.0.0",
     "tailwind-zag": "^1.0.2",