@opexa/portal-components 0.0.287 → 0.0.288

package/dist/client/hooks/useAuthenticateMutation.js

@@ -1,9 +1,11 @@
 import { useMutation } from '@tanstack/react-query';
+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();
     return useMutation({
@@ -11,8 +13,10 @@ export const useAuthenticateMutation = (config) => {
         mutationKey: getAuthenticateMutationKey(),
         mutationFn: async (input) => {
             const session = await getSession();
+            await ReCAPTCHAReady();
             await authenticate(input, {
                 headers: {
+                    [RECAPTCHA_HEADER_KEY]: await ReCAPTCHAExecute({ action: 'submit' }),
                     ...(session.domain && {
                         Domain: session.domain,
                     }),

package/dist/client/hooks/useSignInMutation.js

@@ -1,9 +1,11 @@
 import { useMutation } from '@tanstack/react-query';
+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();
     return useMutation({
@@ -11,8 +13,10 @@ export const useSignInMutation = (config) => {
         mutationKey: getSignInMutationKey(),
         mutationFn: async (input) => {
             const session = await getSession();
+            await ReCAPTCHAReady();
             const authenticator = await signIn(input, {
                 headers: {
+                    [RECAPTCHA_HEADER_KEY]: await ReCAPTCHAExecute({ action: 'submit' }),
                     ...(session.domain && {
                         Domain: session.domain,
                     }),

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,18 @@
+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);
+}

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/DepositWithdrawal/Deposit/LibanganDeposit/LibanganDeposit.js

@@ -149,7 +149,7 @@ export function LibanganDeposit() {
             createDepositMutation.mutate({
                 amount: data.amount.toString(),
                 promo: data.promo ?? undefined,
-                redirectionUrl: depositWithdrawalProps.redirectionUrl,
+                redirectionUrl: depositWithdrawalProps.libanganRedirectionUrl,
             });
         }), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
                                 o.field.onChange(details.value);

package/dist/components/DepositWithdrawal/Deposit/PisoPayDeposit/PisoPayDeposit.js

@@ -149,7 +149,7 @@ export function PisoPayDeposit() {
     return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
             const id = ObjectId.generate(ObjectType.Deposit).toString();
             const domain = window.location.hostname === 'localhost'
-                ? 'https://uat.powerplay.ph'
+                ? 'https://opexa.io'
                 : window.location.origin;
             createDepositMutation.reset();
             createDepositMutation.mutate({

package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.d.ts

@@ -5,8 +5,7 @@ export interface DepositWithdrawalProps {
     privacyPolicyUrl?: string;
     /** @default "/account/security" */
     accountSecurityUrl?: string;
-    redirectionUrl?: string;
-    /** @default true */
-    canWithdrawWithoutVerification?: boolean;
+    allowUnverifiedAccounts?: boolean;
+    libanganRedirectionUrl?: string;
 }
 export declare function DepositWithdrawal(props: DepositWithdrawalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.js

@@ -28,7 +28,7 @@ export function DepositWithdrawal(props) {
                 if (!details.open) {
                     globalStore.depositWithdrawal.setPromo(null);
                 }
-            }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto mx-auto min-h-full w-full px-4 py-3xl lg:w-[480px] lg:rounded-xl overflow-y-auto", children: [_jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-10 items-center justify-center rounded-md border", children: _jsx(Wallet02Icon, { className: "size-5" }) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" }), _jsx(Dialog.Context, { children: (api) => (_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, {}) })) })] }), _jsxs(Dialog.Body, { className: "mt-3xl", children: [_jsx("p", { className: "text-text-secondary-700 text-center text-sm", children: "Deposit Balance" }), _jsx("p", { className: "text-center text-3xl font-bold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
+            }, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto mx-auto min-h-full w-full overflow-y-auto px-4 py-3xl lg:w-[480px] lg:rounded-xl", children: [_jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-10 items-center justify-center rounded-md border", children: _jsx(Wallet02Icon, { className: "size-5" }) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" }), _jsx(Dialog.Context, { children: (api) => (_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, {}) })) })] }), _jsxs(Dialog.Body, { className: "mt-3xl", children: [_jsx("p", { className: "text-text-secondary-700 text-center text-sm", children: "Deposit Balance" }), _jsx("p", { className: "text-center text-3xl font-bold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
                                                 currency: localeInfo.currency.code,
                                                 minDecimalPlaces: 2,
                                             }) }), _jsxs(Tabs.Root, { value: globalStore.depositWithdrawal.tab, onValueChange: (details) => {

package/dist/components/DepositWithdrawal/Withdrawal/Withdrawal.js

@@ -22,7 +22,7 @@ import { PisoPayWithdrawal } from './PisoPayWithdrawal/PisoPayWithdrawal.js';
 import { VentajaWithdrawal } from './VentajaWithdrawal/VentajaWithdrawal.js';
 export function Withdrawal() {
     const [onMMA] = useOnMMA();
-    const { canWithdrawWithoutVerification } = useDepositWithdrawalPropsContext();
+    const { allowUnverifiedAccounts } = useDepositWithdrawalPropsContext();
     const walletQuery = useWalletQuery();
     const wallet = walletQuery.data;
     const paymentSettingsQuery = usePaymentSettingsQuery();
@@ -93,7 +93,7 @@ export function Withdrawal() {
     if ((!memberVerification ||
         memberVerification.status === 'REJECTED' ||
         memberVerification.status === 'UNVERIFIED') &&
-        !canWithdrawWithoutVerification) {
+        !allowUnverifiedAccounts) {
         return _jsx(AccountVerificationRequired, {});
     }
     if (enabledPaymentMethods.length <= 0) {

package/dist/components/DigitainLauncher/DigitianContainter.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import isMobile from 'is-mobile';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -43,5 +43,5 @@ export function DigitainContainer(props) {
         const intervalId = setInterval(checkAndBoot, 500);
         return () => clearInterval(intervalId);
     }, [props.params]);
-    return (_jsxs(_Fragment, { children: [' ', _jsxs("div", { className: twJoin(!isLoading && 'hidden'), children: [_jsx(Loading, {}), ' '] }), _jsx("div", { id: "digitain-container", className: twJoin(isLoading && 'hidden') }), ' '] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: twJoin(!isLoading && 'hidden'), children: _jsx(Loading, {}) }), _jsx("div", { id: "digitain-container", className: twJoin(isLoading && 'hidden') })] }));
 }

package/dist/components/DigitainLauncher/types.d.ts

@@ -43,7 +43,12 @@ interface SportAppInstance {
     }) => void;
     addEventListener: (eventName: 'sportAppEventDispatch', listener: SportAppEventListener) => void;
 }
-export interface DigitiainBootstrapperInterface {
+export interface DigitiainBootstrapper {
     boot: (params: DigitainBootstrapperParams, options: BootstrapperOptions) => Promise<SportAppInstance>;
 }
+declare global {
+    interface Window {
+        Bootstrapper: DigitiainBootstrapper;
+    }
+}
 export {};

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

@@ -1,9 +1,5 @@
 import { type ReactNode } from 'react';
 export interface PortalProviderProps {
-    googleAnalyticsId?: string;
-    googleTagManagerId?: string;
-    googleRecaptchaSiteKey?: string;
-    facebookPixelId?: string;
     children: ReactNode;
 }
-export declare function PortalProvider({ children, facebookPixelId, googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, }: PortalProviderProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function PortalProvider({ children }: PortalProviderProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/PortalProvider/PortalProvider.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+import Script from 'next/script';
 import { Suspense } from 'react';
-import { INTERNALS__REPORT_WEB_VITALS } from '../../constants/index.js';
+import { INTERNALS__REPORT_WEB_VITALS, RECAPTCHA_SITE_KEY, } 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';
 import { prefetchWalletQuery } from '../../server/utils/prefetchWalletQuery.js';
-import { FacebookPixel, GoogleRecaptcha } from '../../third-parties/index.js';
 import { getQueryClient } from '../../utils/getQueryClient.js';
 import { FeatureFlag } from './FeatureFlag.js';
 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, facebookPixelId, googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, }) {
+export async function PortalProvider({ children }) {
     const queryClient = getQueryClient();
     await Promise.allSettled([
         prefetchPlatformQuery(),
@@ -22,5 +21,5 @@ export async function PortalProvider({ children, facebookPixelId, googleAnalytic
         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, {}) }), facebookPixelId && _jsx(FacebookPixel, { fbId: facebookPixelId }), googleAnalyticsId && _jsx(GoogleAnalytics, { gaId: googleAnalyticsId }), googleTagManagerId && _jsx(GoogleTagManager, { gtmId: googleTagManagerId }), googleRecaptchaSiteKey && (_jsx(GoogleRecaptcha, { siteKey: googleRecaptchaSiteKey }))] }));
+    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}` }))] }));
 }

package/dist/constants/EnvVar.d.ts

@@ -1,6 +1,7 @@
 export declare const SITE_ID: string;
 export declare const PLATFORM_ID: string;
 export declare const PLATFORM_CODE: string;
-export declare const ENVIRONMENT: "development" | "production";
+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,6 +18,12 @@ 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)

package/dist/handlers/index.d.ts

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

package/dist/handlers/postTransformIdFrontImage.js

@@ -44,19 +44,34 @@ export async function postTransformIdFrontImage(request) {
         height: parsed.data.cropHeight,
     })
         .resize({
+        fit: 'contain',
         width: 1200,
         height: 757,
         kernel: sharp.kernel.lanczos3,
         withoutEnlargement: true,
     })
         .modulate({
-        brightness: 1.025,
-        saturation: 1.025,
+        brightness: 1.03,
+        saturation: 1.05,
+    })
+        .median(1)
+        .blur(0.3)
+        .sharpen({
+        sigma: 1,
+        m1: 0.5,
+        m2: 1.0,
+        x1: 2,
+        y2: 10,
+        y3: 20,
+    })
+        .webp({
+        effort: 6,
+        quality: 100,
+        alphaQuality: 100,
+        lossless: false,
+        nearLossless: false,
+        smartSubsample: true,
     })
-        .median(3)
-        .blur()
-        .sharpen()
-        .webp()
         .toBuffer();
     return new NextResponse(cropped, {
         headers: {

package/dist/handlers/postTransformSelfieImage.js

@@ -44,23 +44,34 @@ export async function postTransformSelfieImage(request) {
         height: parsed.data.cropHeight,
     })
         .resize({
+        fit: 'contain',
         width: 1200,
         height: 1200,
         kernel: sharp.kernel.lanczos3,
         withoutEnlargement: true,
     })
+        .modulate({
+        brightness: 1.03,
+        saturation: 1.05,
+    })
+        .median(1)
+        .blur(0.3)
         .sharpen({
-        sigma: 1.15,
-        m1: 2.0,
-        m2: 5.0,
+        sigma: 1,
+        m1: 0.5,
+        m2: 1.0,
+        x1: 2,
+        y2: 10,
+        y3: 20,
     })
-        .modulate({
-        brightness: 1.025,
-        saturation: 1.025,
+        .webp({
+        effort: 6,
+        quality: 100,
+        alphaQuality: 100,
+        lossless: false,
+        nearLossless: false,
+        smartSubsample: true,
     })
-        .median(3)
-        .blur()
-        .webp()
         .toBuffer();
     return new NextResponse(cropped, {
         headers: {

package/dist/styles/theme.css

@@ -39,6 +39,10 @@
     display: none;
   }
 
+  .grecaptcha-badge {
+    visibility: hidden !important;
+  }
+
   @media screen and (min-width: 0px) and (orientation: portrait) {
     :root {
       --root-fs: 14px;