@opexa/portal-components 0.0.290 → 0.0.292

package/dist/client/hooks/useAuthenticateMutation.js

@@ -1,22 +1,27 @@
 import { useMutation } from '@tanstack/react-query';
+import { useReCaptcha } from 'next-recaptcha-v3';
 import { RECAPTCHA_HEADER_KEY } from '../../constants/index.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getAuthenticateMutationKey } from '../../utils/mutationKeys.js';
 import { getSessionQueryKey } from '../../utils/queryKeys.js';
 import { authenticate } from '../services/authenticate.js';
 import { getSession } from '../services/getSession.js';
-import { ReCAPTCHAExecute, ReCAPTCHAReady } from '../utils/recaptcha.js';
 export const useAuthenticateMutation = (config) => {
     const queryClient = getQueryClient();
+    const recaptcha = useReCaptcha();
     return useMutation({
         ...config,
         mutationKey: getAuthenticateMutationKey(),
         mutationFn: async (input) => {
             const session = await getSession();
-            await ReCAPTCHAReady();
+            const token = recaptcha.reCaptchaKey
+                ? await recaptcha.executeRecaptcha('submit')
+                : null;
             await authenticate(input, {
                 headers: {
-                    [RECAPTCHA_HEADER_KEY]: await ReCAPTCHAExecute({ action: 'submit' }),
+                    ...(token && {
+                        [RECAPTCHA_HEADER_KEY]: token,
+                    }),
                     ...(session.domain && {
                         Domain: session.domain,
                     }),

package/dist/client/hooks/useJackpotPayoutsQuery.js

@@ -6,6 +6,7 @@ export const useJackpotPayoutsQuery = (input, config) => {
         refetchOnMount: false,
         refetchOnReconnect: false,
         refetchOnWindowFocus: false,
+        refetchInterval: 3000, // 3 seconds
         ...config,
         queryKey: getJackpotPayoutsQueryKey(input),
         queryFn: ({ pageParam, signal }) => {

package/dist/client/hooks/useJackpotsCountQuery.js

@@ -6,6 +6,7 @@ export const useJackpotsCountQuery = (input, config) => {
         refetchOnMount: false,
         refetchOnReconnect: false,
         refetchOnWindowFocus: false,
+        refetchInterval: 3000, // 3 seconds
         ...config,
         queryKey: getJackpotsCountQueryKey(input),
         queryFn: async ({ signal }) => {

package/dist/client/hooks/useSignInMutation.js

@@ -1,22 +1,27 @@
 import { useMutation } from '@tanstack/react-query';
+import { useReCaptcha } from 'next-recaptcha-v3';
 import { RECAPTCHA_HEADER_KEY } from '../../constants/index.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { getSignInMutationKey } from '../../utils/mutationKeys.js';
 import { getSessionQueryKey } from '../../utils/queryKeys.js';
 import { getSession } from '../services/getSession.js';
 import { signIn } from '../services/signIn.js';
-import { ReCAPTCHAExecute, ReCAPTCHAReady } from '../utils/recaptcha.js';
 export const useSignInMutation = (config) => {
     const queryClient = getQueryClient();
+    const recaptcha = useReCaptcha();
     return useMutation({
         ...config,
         mutationKey: getSignInMutationKey(),
         mutationFn: async (input) => {
             const session = await getSession();
-            await ReCAPTCHAReady();
+            const token = recaptcha.reCaptchaKey
+                ? await recaptcha.executeRecaptcha('submit')
+                : null;
             const authenticator = await signIn(input, {
                 headers: {
-                    [RECAPTCHA_HEADER_KEY]: await ReCAPTCHAExecute({ action: 'submit' }),
+                    ...(token && {
+                        [RECAPTCHA_HEADER_KEY]: token,
+                    }),
                     ...(session.domain && {
                         Domain: session.domain,
                     }),

package/dist/components/Banner/Banner.client.d.ts

@@ -0,0 +1,12 @@
+import type { ImageProps } from 'next/image';
+export interface BannerEntry {
+    src: ImageProps['src'];
+    redirectUrl?: string;
+}
+export interface BannerProps {
+    banners: BannerEntry[];
+    imageWidth?: number | [mobile: number, desktop: number];
+    imageHeight?: number | [mobile: number, desktop: number];
+    className?: string;
+}
+export declare function Banner__client(props: BannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Banner/Banner.client.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import emblaCarouselAutoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel, {} from 'embla-carousel-react';
+import isMobile from 'is-mobile';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Fragment, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { dataAttr } from '../../utils/dataAttr.js';
+export function Banner__client(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop: true,
+        align: 'start',
+    }, [
+        emblaCarouselAutoplay({
+            playOnInit: true,
+            delay: 5000,
+        }),
+    ]);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    useEffect(() => {
+        function handler(detail) {
+            setCurrentIndex(detail?.selectedScrollSnap() ?? 0);
+        }
+        emblaApi?.on('scroll', handler);
+        emblaApi?.on('init', handler);
+        return () => {
+            emblaApi?.on('init', handler);
+            emblaApi?.off('scroll', handler);
+        };
+    }, [emblaApi]);
+    const imageWidth = !props.imageWidth
+        ? [400, 1200]
+        : Array.isArray(props.imageWidth)
+            ? props.imageWidth
+            : [props.imageWidth, props.imageWidth];
+    const imageHeight = !props.imageHeight
+        ? [225, 300]
+        : Array.isArray(props.imageHeight)
+            ? props.imageHeight
+            : [props.imageHeight, props.imageHeight];
+    return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
+                        const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0 }));
+                        return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
+                    }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
+                        emblaApi?.scrollTo(index);
+                    }, "aria-label": `Go to slide ${index + 1}`, "data-active": dataAttr(index === currentIndex) }, index))) })] }));
+}

package/dist/components/Bonus/Bonus.client.js

@@ -26,9 +26,9 @@ export function Bonus__client(props) {
         return null;
     const turnoverRequirement = parseDecimal(bonus.turnoverRequirement, 0);
     const currentTurnoverRequirementContribution = parseDecimal(bonus.currentTurnoverRequirementContribution, 0);
-    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/rewards', className: "text-button-tertiary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to Rewards"] }), _jsx("div", { className: "mt-3xl", children: bonus.promo.banner?.url ? (_jsx(Image, { src: bonus.promo.banner.url, alt: "", width: 1024, height: 600, unoptimized: true, priority: true, className: "h-auto w-full" })) : (_jsx(DefaultImage, {})) }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'gray', className: "mt-xl lg:mt-6", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] }), _jsx("h1", { className: "text-text-primary-900 mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: bonus.promo.name }), _jsx("p", { className: "text-text-primary-brand mt-xl text-base lg:mt-6 lg:text-lg", children: "Complete the wagering before time runs out to convert your bonus balance into real money!" }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsx("p", { children: "Your bonus balance" }), _jsx("p", { children: _jsx("span", { className: "text-text-primary-900", children: formatNumber(bonus.balance, {
+    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/rewards', className: "text-button-tertiary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Rewards"] }), _jsx("div", { className: "mt-3xl", children: bonus.promo.banner?.url ? (_jsx(Image, { src: bonus.promo.banner.url, alt: "", width: 1024, height: 600, unoptimized: true, priority: true, className: "h-auto w-full rounded-xl" })) : (_jsx(DefaultImage, {})) }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'brand-dark', className: "mt-xl lg:mt-6", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] }), _jsx("h1", { className: "text-text-primary-900 mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: bonus.promo.name }), _jsx("p", { className: "text-text-primary-brand mt-xl text-base lg:mt-6 lg:text-lg", children: "Complete the wagering before time runs out to convert your bonus balance into real money!" }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsx("p", { children: "Your bonus balance" }), _jsx("p", { children: _jsx("span", { className: "text-text-primary-900", children: formatNumber(bonus.balance, {
                                 currency: localeInfo.currency.code,
-                            }) }) })] }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { children: "Wagering" }), _jsxs("p", { children: [currentTurnoverRequirementContribution, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { className: "mt-2", min: 0, max: turnoverRequirement, value: clamp(currentTurnoverRequirementContribution, 0, turnoverRequirement), children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] }), _jsxs(Collapsible.Root, { className: "mt-xl lg:mt-6", children: [_jsxs(Collapsible.Trigger, { className: "text-button-tertiary-fg flex w-fit items-center justify-center gap-sm text-sm font-semibold lg:mx-auto", children: ["Game Provider Contribution", _jsx(Collapsible.Indicator, { asChild: true, children: _jsx(ChevronRightIcon, { className: "size-5" }) })] }), _jsx(Collapsible.Content, { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl space-y-1.5 rounded-md border px-3.5 py-xl lg:mt-6", children: Object.entries(bonus.promo
+                            }) }) })] }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { children: ["Wagering ", bonus.currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [currentTurnoverRequirementContribution, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { className: "mt-2", min: 0, max: turnoverRequirement, value: clamp(currentTurnoverRequirementContribution, 0, turnoverRequirement), children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] }), _jsxs(Collapsible.Root, { className: "mt-xl lg:mt-6", children: [_jsxs(Collapsible.Trigger, { className: "text-button-tertiary-fg flex items-center gap-sm text-sm font-semibold", children: ["Game Provider Contribution", _jsx(Collapsible.Indicator, { asChild: true, children: _jsx(ChevronRightIcon, { className: "size-5" }) })] }), _jsx(Collapsible.Content, { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl space-y-1.5 rounded-md border px-3.5 py-xl lg:mt-6", children: Object.entries(bonus.promo
                             .turnoverRequirementContributionPercentagePerGameProvider ?? {}).map(([provider, valueAsString]) => {
                             const value = parseDecimal(valueAsString, 0);
                             return (_jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: capitalize(provider, {
@@ -42,5 +42,5 @@ export function Bonus__client(props) {
 function DefaultImage() {
     return (_jsx("div", { style: {
             background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
-        }, className: "overflow-hidden rounded-xl", children: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-auto w-[50%] shrink-0", draggable: false, width: 1024, height: 1024, priority: true }) }));
+        }, className: "overflow-hidden rounded-xl", children: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-auto w-[50%] shrink-0 rounded-xl", draggable: false, width: 1024, height: 1024, priority: true }) }));
 }

package/dist/components/PortalProvider/PortalProvider.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
-export interface PortalProviderProps {
+import { type ProvidersProps } from './Providers';
+export interface PortalProviderProps extends ProvidersProps {
     children: ReactNode;
 }
-export declare function PortalProvider({ children }: PortalProviderProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function PortalProvider({ recaptchaSiteKey, children, }: PortalProviderProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/PortalProvider/PortalProvider.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import Script from 'next/script';
 import { Suspense } from 'react';
-import { INTERNALS__REPORT_WEB_VITALS, RECAPTCHA_SITE_KEY, } from '../../constants/index.js';
+import { INTERNALS__REPORT_WEB_VITALS } from '../../constants/index.js';
 import { prefetchAccountQuery } from '../../server/utils/prefetchAccountQuery.js';
 import { prefetchPlatformQuery } from '../../server/utils/prefetchPlatformQuery.js';
 import { prefetchSessionQuery } from '../../server/utils/prefetchSessionQuery.js';
@@ -13,7 +12,7 @@ import { Providers } from './Providers.js';
 import { SetupDomain } from './SetupDomain.js';
 import { Snackbar } from './Snackbar.js';
 import { WebVitals } from './WebVitals.js';
-export async function PortalProvider({ children }) {
+export async function PortalProvider({ recaptchaSiteKey, children, }) {
     const queryClient = getQueryClient();
     await Promise.allSettled([
         prefetchPlatformQuery(),
@@ -21,5 +20,5 @@ export async function PortalProvider({ children }) {
         prefetchAccountQuery(),
         prefetchWalletQuery(),
     ]);
-    return (_jsxs(_Fragment, { children: [INTERNALS__REPORT_WEB_VITALS && _jsx(WebVitals, {}), _jsx(Providers, { children: _jsxs(HydrationBoundary, { state: dehydrate(queryClient), children: [children, _jsx(Suspense, { fallback: null, children: _jsx(SetupDomain, {}) })] }) }), _jsx(Snackbar, {}), _jsx(Suspense, { fallback: null, children: _jsx(FeatureFlag, {}) }), RECAPTCHA_SITE_KEY && (_jsx(Script, { src: `https://www.google.com/recaptcha/api.js?render=${RECAPTCHA_SITE_KEY}` }))] }));
+    return (_jsxs(_Fragment, { children: [INTERNALS__REPORT_WEB_VITALS && _jsx(WebVitals, {}), _jsx(Providers, { recaptchaSiteKey: recaptchaSiteKey, children: _jsxs(HydrationBoundary, { state: dehydrate(queryClient), children: [children, _jsx(Suspense, { fallback: null, children: _jsx(SetupDomain, {}) })] }) }), _jsx(Snackbar, {}), _jsx(Suspense, { fallback: null, children: _jsx(FeatureFlag, {}) })] }));
 }

package/dist/components/PortalProvider/Providers.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
-export declare function Providers({ children }: {
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+import type { PropsWithChildren } from 'react';
+export interface ProvidersProps {
+    recaptchaSiteKey?: string;
+}
+export declare function Providers({ recaptchaSiteKey, children, }: PropsWithChildren<ProvidersProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/PortalProvider/Providers.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { QueryClientProvider } from '@tanstack/react-query';
+import { ReCaptchaProvider } from 'next-recaptcha-v3';
 import { getQueryClient } from '../../utils/getQueryClient.js';
-export function Providers({ children }) {
+export function Providers({ recaptchaSiteKey, children, }) {
     const queryClient = getQueryClient();
-    return (_jsx(QueryClientProvider, { client: queryClient, children: children }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ReCaptchaProvider, { reCaptchaKey: recaptchaSiteKey, children: children }) }));
 }

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

@@ -1,5 +1 @@
-interface Props {
-    siteName?: string;
-}
-export declare function MobileNumberSignIn(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function MobileNumberSignIn(): import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -19,8 +19,7 @@ import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { PinInput } from '../../ui/PinInput/index.js';
 import { useSignInContext, useSignInPropsContext } from './SignInContext.js';
-import { getFriendlyErrorMessage } from './utils.js';
-export function MobileNumberSignIn(props) {
+export function MobileNumberSignIn() {
     const signInProps = useSignInPropsContext();
     const router = useRouter();
     const context = useSignInContext();
@@ -40,18 +39,9 @@ export function MobileNumberSignIn(props) {
             globalStore.kycReminder.setOpen(true);
         },
         onError: (err) => {
-            const errorTitle = err.name === 'MEMBER_ACCOUNT_BLACKLISTED'
-                ? 'Your Account is Blacklisted'
-                : err.name === 'MEMBER_ACCOUNT_SUSPENDED'
-                    ? 'Your Account is Suspended'
-                    : 'Sign In Failed';
             toaster.error({
-                title: errorTitle,
-                description: getFriendlyErrorMessage(err.name, {
-                    siteName: props.siteName,
-                    accountName: step1Form.getValues('mobileNumber'),
-                    signInOptions: 'MOBILE_NUMBER',
-                }),
+                title: 'Sign In Failed',
+                description: err.message,
             });
         },
     });
@@ -61,17 +51,9 @@ export function MobileNumberSignIn(props) {
             cooldown.start();
         },
         onError: (err) => {
-            const errorTitle = err.name === 'MEMBER_ACCOUNT_BLACKLISTED'
-                ? 'Your Account is Blacklisted'
-                : err.name === 'MEMBER_ACCOUNT_SUSPENDED'
-                    ? 'Your Account is Suspended'
-                    : 'Sign In Failed';
             toaster.error({
-                title: errorTitle,
-                description: getFriendlyErrorMessage(err.name, {
-                    siteName: props.siteName,
-                    accountName: step1Form.getValues('mobileNumber'),
-                }),
+                title: 'Sign In Failed',
+                description: err.message,
             });
         },
     });

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

@@ -1,5 +1 @@
-interface Props {
-    siteName?: string;
-}
-export declare function NameAndPasswordSignIn(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function NameAndPasswordSignIn(): import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -18,8 +18,7 @@ import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { PasswordInput } from '../../ui/PasswordInput/index.js';
 import { useSignInContext, useSignInPropsContext } from './SignInContext.js';
-import { getFriendlyErrorMessage } from './utils.js';
-export function NameAndPasswordSignIn(props) {
+export function NameAndPasswordSignIn() {
     const signInProps = useSignInPropsContext();
     const context = useSignInContext();
     const router = useRouter();
@@ -46,17 +45,9 @@ export function NameAndPasswordSignIn(props) {
             }
         },
         onError(err) {
-            const errorTitle = err.name === 'MEMBER_ACCOUNT_BLACKLISTED'
-                ? 'Your Account is Blacklisted'
-                : err.name === 'MEMBER_ACCOUNT_SUSPENDED'
-                    ? 'Your Account is Suspended'
-                    : 'Sign In Failed';
             toaster.error({
-                title: errorTitle,
-                description: getFriendlyErrorMessage(err.name, {
-                    siteName: props.siteName,
-                    accountName: form.getValues('name'),
-                }),
+                title: 'Sign In Failed',
+                description: err.message,
             });
         },
     });
@@ -69,9 +60,10 @@ export function NameAndPasswordSignIn(props) {
             context.setStep(0);
             form.reset();
         },
-        onError() {
+        onError(error) {
             toaster.error({
-                description: 'Incorrect secret answer',
+                title: 'Sign In Failed',
+                description: error.message,
             });
         },
     });

package/dist/components/SignIn/SignIn.lazy.js

@@ -16,5 +16,5 @@ export function SignIn(props) {
     const signInStore = useGlobalStore(useShallow((ctx) => ctx.signIn));
     return (_jsx(SignInPropsProvider, { value: props, children: _jsx(SignInProvider, { value: signIn, children: _jsx(Dialog.Root, { open: signInStore.open, onOpenChange: (details) => {
                     signInStore.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: twMerge('bg-bg-primary-alt mx-auto h-full w-full items-start overflow-y-auto p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-7.5 w-auto", draggable: false }), _jsx(SignInForm, { siteName: props.siteName })] }) })] }) }) }) }));
+                }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: twMerge('bg-bg-primary-alt mx-auto h-full w-full items-start overflow-y-auto p-3xl pb-4xl lg:h-auto lg:w-[400px] lg:rounded-xl', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-7.5 w-auto", draggable: false }), _jsx(SignInForm, {})] }) })] }) }) }) }));
 }

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

@@ -1,5 +1 @@
-interface Props {
-    siteName?: string;
-}
-export declare function SignInForm(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function SignInForm(): import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/SignInForm.js

@@ -4,7 +4,7 @@ import { MobileNumberSignIn } from './MobileNumberSignIn.js';
 import { NameAndPasswordSignIn } from './NameAndPasswordSignIn.js';
 import { useSignInContext } from './SignInContext.js';
 import { SignInMethod } from './SignInMethod.js';
-export function SignInForm(props) {
+export function SignInForm() {
     const context = useSignInContext();
-    return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Log in to your account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Welcome back! Please enter your details." })] })), _jsx(SignInMethod, {}), context.type === 'MOBILE_NUMBER' && (_jsx(MobileNumberSignIn, { siteName: props.siteName })), context.type === 'NAME_AND_PASSWORD' && (_jsx(NameAndPasswordSignIn, { siteName: props.siteName }))] }));
+    return (_jsxs(_Fragment, { children: [context.step === 1 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Log in to your account" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Welcome back! Please enter your details." })] })), _jsx(SignInMethod, {}), context.type === 'MOBILE_NUMBER' && _jsx(MobileNumberSignIn, {}), context.type === 'NAME_AND_PASSWORD' && _jsx(NameAndPasswordSignIn, {})] }));
 }

package/dist/constants/EnvVar.d.ts

@@ -2,6 +2,4 @@ export declare const SITE_ID: string;
 export declare const PLATFORM_ID: string;
 export declare const PLATFORM_CODE: string;
 export declare const ENVIRONMENT: "production" | "development";
-export declare const RECAPTCHA_SITE_KEY: string;
-export declare const BYPASS_RECAPTCHA: boolean;
 export declare const INTERNALS__REPORT_WEB_VITALS: boolean;

package/dist/constants/EnvVar.js

@@ -18,17 +18,6 @@ export const ENVIRONMENT = z
     .enum(['production', 'development'])
     .catch('development')
     .parse(process.env.NEXT_PUBLIC_ENVIRONMENT);
-export const RECAPTCHA_SITE_KEY = z
-    .string()
-    .optional()
-    .default('')
-    .catch('')
-    .parse(process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY);
-export const BYPASS_RECAPTCHA = z
-    .any()
-    .transform(Boolean)
-    .catch(false)
-    .parse(process.env.NEXT_PUBLIC_BYPASS_RECAPTCHA);
 export const INTERNALS__REPORT_WEB_VITALS = z
     .any()
     .transform(Boolean)

package/dist/handlers/postAuthenticate.js

@@ -11,6 +11,7 @@ const AuthenticateDefinition = z.object({
 export async function postAuthenticate(request) {
     const body = await request.json();
     const parsed = AuthenticateDefinition.safeParse(body);
+    const userAgent = request.headers.get('user-agent');
     if (!parsed.success) {
         return NextResponse.json({
             ok: false,
@@ -28,6 +29,9 @@ export async function postAuthenticate(request) {
                 ...(domain && {
                     [DOMAIN_HEADER_KEY]: domain,
                 }),
+                ...(userAgent && {
+                    'User-Agent': userAgent,
+                }),
             },
         });
         const response = NextResponse.json({ ok: true }, { status: 201 });
@@ -44,7 +48,7 @@ export async function postAuthenticate(request) {
     catch (e) {
         return NextResponse.json({
             ok: false,
-            message: 'Unauthorized',
+            message: e instanceof Error ? e.message : 'Unauthorized',
             __error: e,
         }, { status: 401 });
     }

package/dist/handlers/postSession.js

@@ -30,6 +30,7 @@ const CreateSessionDefinition = z.union([
 export async function postSession(request) {
     const body = await request.json();
     const parsed = CreateSessionDefinition.safeParse(body);
+    const userAgent = request.headers.get('user-agent');
     if (!parsed.success) {
         return NextResponse.json({
             ok: false,
@@ -47,6 +48,9 @@ export async function postSession(request) {
                 ...(domain && {
                     [DOMAIN_HEADER_KEY]: domain,
                 }),
+                ...(userAgent && {
+                    'User-Agent': userAgent,
+                }),
             },
         });
         if (res.authenticator) {
@@ -71,7 +75,7 @@ export async function postSession(request) {
     catch (e) {
         return NextResponse.json({
             ok: false,
-            message: 'Unauthorized',
+            message: e instanceof Error ? e.message : 'Unauthorized',
             __error: e,
         }, { status: 401 });
     }

package/dist/services/graphqlRequest.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { BYPASS_RECAPTCHA, ENVIRONMENT, PLATFORM_CODE, PLATFORM_ID, RECAPTCHA_HEADER_KEY, SITE_ID, TEST_PASS_HEADER_KEY, } from '../constants/index.js';
+import { ENVIRONMENT, PLATFORM_CODE, PLATFORM_ID, SITE_ID } from '../constants/index.js';
 export async function graphqlRequest(url, query, variables, options) {
     const headers = new Headers();
     headers.set('Role', 'MEMBER');
@@ -12,10 +12,6 @@ export async function graphqlRequest(url, query, variables, options) {
     new Headers(options?.headers).forEach((value, key) => {
         headers.set(key, value);
     });
-    if (BYPASS_RECAPTCHA) {
-        headers.set(TEST_PASS_HEADER_KEY, '');
-        headers.delete(RECAPTCHA_HEADER_KEY);
-    }
     const info = getOperationInfo(query);
     const url_ = new URL(url);
     if (info) {
@@ -114,10 +110,6 @@ export async function graphqlUpload(url, query, variables, options) {
     headers.set('Platform-Code', PLATFORM_CODE);
     headers.set('Environment', ENVIRONMENT);
     headers.delete('Content-Type');
-    if (BYPASS_RECAPTCHA) {
-        headers.set(TEST_PASS_HEADER_KEY, '');
-        headers.delete(RECAPTCHA_HEADER_KEY);
-    }
     const body = createUploadBody(query, variables);
     const info = getOperationInfo(query);
     const url_ = new URL(url);

package/dist/services/httpRequest.js

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { BYPASS_RECAPTCHA, ENVIRONMENT, PLATFORM_CODE, PLATFORM_ID, RECAPTCHA_HEADER_KEY, SITE_ID, TEST_PASS_HEADER_KEY, } from '../constants/index.js';
+import { ENVIRONMENT, PLATFORM_CODE, PLATFORM_ID, SITE_ID } from '../constants/index.js';
 export async function httpRequest(url, opts = {}) {
     const headers = new Headers(opts.headers);
     headers.set('Role', 'MEMBER');
@@ -10,10 +10,6 @@ export async function httpRequest(url, opts = {}) {
     new Headers(opts.headers).forEach((value, key) => {
         headers.set(key, value);
     });
-    if (BYPASS_RECAPTCHA) {
-        headers.set(TEST_PASS_HEADER_KEY, '');
-        headers.delete(RECAPTCHA_HEADER_KEY);
-    }
     const res = await fetch(url, {
         ...opts,
         headers,
@@ -47,10 +43,6 @@ httpRequest.json = async (url, opts = {}) => {
     new Headers(opts.headers).forEach((value, key) => {
         headers.set(key, value);
     });
-    if (BYPASS_RECAPTCHA) {
-        headers.set(TEST_PASS_HEADER_KEY, '');
-        headers.delete(RECAPTCHA_HEADER_KEY);
-    }
     const response = await fetch(url, {
         ...opts,
         headers,

package/dist/styles/theme.css

@@ -178,6 +178,7 @@
   --color-brand-300: #fde272;
   --color-brand-400: #fac515;
   --color-brand-500: #eaaa08;
+  --color-brand-700: #d5b86f;
   --color-brand-800: #22262f;
   --color-brand-950: #542c0d;
   --color-gray-300: #d0d5dd;
@@ -204,6 +205,7 @@
   --color-button-tertiary-fg: #fac515;
   --color-button-tertiary-error-fg: #fda29b;
 
+  --color-bg-brand-dark-solid: #351e13;
   --color-bg-brand-solid: #ca8504;
   --color-bg-primary: #0c0e12;
   --color-bg-primary-900: #0c0e12;
@@ -256,6 +258,7 @@
   --color-border-disabled: #373a41;
   --color-border-disabled-subtle: #22262f;
   --color-border-brand: #fac515;
+  --color-border-brand-dark: #6b4328;
   --color-border-brand-solid: #ca8504;
 
   --font-sans: var(--font-sans);

package/dist/third-parties/FacebookPixel/FacebookPixel.d.ts

@@ -0,0 +1,4 @@
+export interface FacebookPixelProps {
+    fbId: string;
+}
+export declare function FacebookPixel(props: FacebookPixelProps): null;

package/dist/third-parties/FacebookPixel/FacebookPixel.js

@@ -0,0 +1,4 @@
+export function FacebookPixel(props) {
+    console.log(props);
+    return null;
+}

package/dist/third-parties/FacebookPixel/api.js

@@ -0,0 +1 @@
+"use strict";

package/dist/third-parties/FacebookPixel/index.d.ts

@@ -0,0 +1 @@
+export * from './FacebookPixel';

package/dist/third-parties/FacebookPixel/index.js

@@ -0,0 +1 @@
+export * from './FacebookPixel.js';

package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.d.ts

@@ -0,0 +1,4 @@
+export interface GoogleRecaptchaProps {
+    siteKey: string;
+}
+export declare function GoogleRecaptcha(props: GoogleRecaptchaProps): null;

package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.js

@@ -0,0 +1,4 @@
+export function GoogleRecaptcha(props) {
+    console.log(props);
+    return null;
+}

package/dist/third-parties/GoogleRecaptcha/api.js

@@ -0,0 +1 @@
+"use strict";

package/dist/third-parties/GoogleRecaptcha/index.d.ts

@@ -0,0 +1 @@
+export * from './GoogleRecaptcha';

package/dist/third-parties/GoogleRecaptcha/index.js

@@ -0,0 +1 @@
+export * from './GoogleRecaptcha.js';

package/dist/third-parties/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FacebookPixel';
+export * from './GoogleRecaptcha';

package/dist/third-parties/index.js

@@ -0,0 +1,2 @@
+export * from './FacebookPixel/index.js';
+export * from './GoogleRecaptcha/index.js';

package/dist/ui/Badge/Badge.d.ts

@@ -23,6 +23,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -57,6 +58,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -91,6 +93,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -129,6 +132,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -163,6 +167,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -197,6 +202,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -235,6 +241,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -269,6 +276,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -303,6 +311,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -341,6 +350,7 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -375,6 +385,7 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -409,6 +420,7 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};

package/dist/ui/Badge/badge.recipe.d.ts

@@ -19,6 +19,7 @@ export declare const badgeRecipe: import("tailwind-variants").TVReturnType<{
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -53,6 +54,7 @@ export declare const badgeRecipe: import("tailwind-variants").TVReturnType<{
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};
@@ -87,6 +89,7 @@ export declare const badgeRecipe: import("tailwind-variants").TVReturnType<{
     colorScheme: {
         gray: {};
         brand: {};
+        'brand-dark': {};
         danger: {};
         success: {};
         warning: {};

package/dist/ui/Badge/badge.recipe.js

@@ -29,6 +29,7 @@ export const badgeRecipe = tv({
         colorScheme: {
             gray: {},
             brand: {},
+            'brand-dark': {},
             danger: {},
             success: {},
             warning: {},
@@ -64,6 +65,16 @@ export const badgeRecipe = tv({
                 icon: 'text-utility-brand-600',
             },
         },
+        {
+            variant: 'subtle',
+            colorScheme: 'brand-dark',
+            className: {
+                root: 'bg-bg-brand-dark-solid border-border-brand-dark border',
+                label: 'text-brand-700',
+                indicator: 'bg-utility-brand-500',
+                icon: 'text-brand-700',
+            },
+        },
         {
             variant: 'subtle',
             colorScheme: 'success',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.290",
+  "version": "0.0.292",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",
@@ -87,6 +87,7 @@
     "embla-carousel-react": "^8.6.0",
     "is-mobile": "^5.0.0",
     "lodash-es": "^4.17.21",
+    "next-recaptcha-v3": "^1.5.2",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^1.0.0",
     "tailwind-zag": "^1.0.2",

package/dist/client/utils/recaptcha.d.ts

@@ -1,14 +0,0 @@
-export interface ReCAPTCHAExecuteOptions {
-    action: 'submit' | (string & {});
-}
-export interface ReCAPTCHA {
-    ready(callback: () => void): void;
-    execute(siteKey: string, options: ReCAPTCHAExecuteOptions): Promise<string>;
-}
-export declare function ReCAPTCHAReady(): Promise<void>;
-export declare function ReCAPTCHAExecute(options: ReCAPTCHAExecuteOptions): Promise<string>;
-declare global {
-    interface Window {
-        grecaptcha: ReCAPTCHA;
-    }
-}

package/dist/client/utils/recaptcha.js

@@ -1,18 +0,0 @@
-import { RECAPTCHA_SITE_KEY } from '../../constants/index.js';
-let loaded = false;
-export function ReCAPTCHAReady() {
-    return new Promise((resolve) => {
-        if (!loaded) {
-            window.grecaptcha.ready(() => {
-                loaded = true;
-                resolve();
-            });
-        }
-        else {
-            resolve();
-        }
-    });
-}
-export async function ReCAPTCHAExecute(options) {
-    return await window.grecaptcha.execute(RECAPTCHA_SITE_KEY, options);
-}