@opexa/portal-components 0.0.303 → 0.0.304

package/dist/client/hooks/useGlobalStore.d.ts

@@ -53,6 +53,13 @@ export interface TermsOfUseStore extends TermsAndConditionsStore {
 }
 export interface ResponsibleGamingStore extends TermsAndConditionsStore {
 }
+export interface HasPendingBonusStore {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    '~touched': boolean;
+    shouldShowWarning: boolean;
+    setShouldShowWarning: (shouldShow: boolean) => void;
+}
 export interface GlobalStore {
     signUp: PopupStore;
     signIn: PopupStore;
@@ -73,6 +80,7 @@ export interface GlobalStore {
     termsAndConditions: TermsAndConditionsStore;
     termsOfUse: TermsOfUseStore;
     responsibleGaming: ResponsibleGamingStore;
+    pendingBonus: HasPendingBonusStore;
 }
 export declare const useGlobalStore: import("zustand").UseBoundStore<import("zustand").StoreApi<GlobalStore>>;
 export {};

package/dist/client/hooks/useGlobalStore.js

@@ -371,4 +371,25 @@ export const useGlobalStore = create((set) => ({
         },
         '~touched': false,
     },
+    pendingBonus: {
+        open: false,
+        setOpen(open) {
+            set((prev) => ({
+                pendingBonus: {
+                    ...prev.pendingBonus,
+                    open,
+                    '~touched': true,
+                },
+            }));
+        },
+        shouldShowWarning: false,
+        setShouldShowWarning: (shouldShowWarning) => set((state) => ({
+            pendingBonus: {
+                ...state.pendingBonus,
+                shouldShowWarning,
+                '~touched': true,
+            },
+        })),
+        '~touched': false,
+    },
 }));

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

@@ -1,8 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { twMerge } from 'tailwind-merge';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { z } from 'zod';
 import { useShallow } from 'zustand/shallow';
+import { useBonusesQuery } from '../../client/hooks/useBonusesQuery.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { useWalletQuery } from '../../client/hooks/useWalletQuery.js';
@@ -15,24 +16,36 @@ import { Tabs } from '../../ui/Tabs/index.js';
 import { formatNumber } from '../../utils/formatNumber.js';
 import { Deposit } from './Deposit/Deposit.js';
 import { DepositWithdrawalPropsProvider } from './DepositWithdrawalContext.js';
+import HasPendingBonuses from './HasPendingBonuses.js';
 import { Withdrawal } from './Withdrawal/Withdrawal.js';
 export function DepositWithdrawal(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        pendingBonus: ctx.pendingBonus,
     })));
+    const bonusesQuery = useBonusesQuery();
+    const hasPendingBonus = Boolean(bonusesQuery?.data &&
+        bonusesQuery?.data?.length > 0 &&
+        bonusesQuery.data?.some((bonus) => +bonus.currentTurnoverRequirementContributionPercentage < 100));
     const localeInfo = useLocaleInfo();
     const walletQuery = useWalletQuery({
         refetchInterval: 5000,
     });
-    return (_jsx(DepositWithdrawalPropsProvider, { value: props, children: _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
-                globalStore.depositWithdrawal.setOpen(details.open);
-                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: twMerge('py-3xl mx-auto h-full w-full overflow-y-auto px-4 lg:min-h-[80vh] lg:w-[480px] lg:rounded-xl', 'scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded-full'), children: [_jsxs(Dialog.Header, { className: "gap-xl flex items-center", children: [_jsx("div", { className: "border-border-primary shadow-xs text-text-secondary-700 flex size-10 items-center justify-center rounded-md border text-gray-700", 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) => {
-                                                globalStore.depositWithdrawal.setTab(z.enum(['DEPOSIT', 'WITHDRAWAL']).parse(details.value));
-                                            }, lazyMount: true, unmountOnExit: true, className: "mt-3xl space-y-4xl", children: [_jsxs(Tabs.List, { className: "w-full", children: [_jsx(Tabs.Trigger, { value: "DEPOSIT", className: "grow", children: "Deposit" }), _jsx(Tabs.Trigger, { value: "WITHDRAWAL", className: "grow", children: "Withdrawal" }), _jsx(Tabs.Indicator, {})] }), _jsx(Tabs.Content, { value: "DEPOSIT", className: "space-y-3xl", children: _jsx(Deposit, {}) }), _jsx(Tabs.Content, { value: "WITHDRAWAL", className: "space-y-3xl", children: _jsx(Withdrawal, {}) })] })] })] }) })] }) }) }));
+    //check if the user has pending/ongoing bonuses
+    useEffect(() => {
+        if (hasPendingBonus && !globalStore.pendingBonus.shouldShowWarning) {
+            globalStore.pendingBonus.setShouldShowWarning(hasPendingBonus);
+        }
+    }, [hasPendingBonus]);
+    return (_jsxs(_Fragment, { children: [_jsx(DepositWithdrawalPropsProvider, { value: props, children: _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.depositWithdrawal.open, onOpenChange: (details) => {
+                        globalStore.depositWithdrawal.setOpen(details.open);
+                        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 py-3xl mx-auto min-h-full w-full overflow-y-auto px-4 lg:w-[480px] lg:rounded-xl", children: [_jsxs(Dialog.Header, { className: "gap-xl flex items-center", children: [_jsx("div", { className: "border-border-primary shadow-xs text-text-secondary-700 flex size-10 items-center justify-center rounded-md border text-gray-700", 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) => {
+                                                        globalStore.depositWithdrawal.setTab(z.enum(['DEPOSIT', 'WITHDRAWAL']).parse(details.value));
+                                                    }, lazyMount: true, unmountOnExit: true, className: "mt-3xl space-y-4xl", children: [_jsxs(Tabs.List, { className: "w-full", children: [_jsx(Tabs.Trigger, { value: "DEPOSIT", className: "grow", children: "Deposit" }), _jsx(Tabs.Trigger, { value: "WITHDRAWAL", className: "grow", children: "Withdrawal" }), _jsx(Tabs.Indicator, {})] }), _jsx(Tabs.Content, { value: "DEPOSIT", className: "space-y-3xl", children: _jsx(Deposit, {}) }), _jsx(Tabs.Content, { value: "WITHDRAWAL", className: "space-y-3xl", children: _jsx(Withdrawal, {}) })] })] })] }) })] }) }) }), _jsx(HasPendingBonuses, {})] }));
 }

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

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

package/dist/components/DepositWithdrawal/HasPendingBonuses.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { AlertTriangleIcon } from '../../icons/AlertTriangle.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+function HasPendingBonuses(props) {
+    const hasPendingBonusStore = useGlobalStore(useShallow((ctx) => ctx.pendingBonus));
+    return (_jsx(Dialog.Root, { open: hasPendingBonusStore.open, onOpenChange: (details) => {
+            hasPendingBonusStore.setOpen(details.open);
+        }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-tooltip flex items-center justify-center", children: _jsxs(Dialog.Content, { className: twMerge('bg-bg-primary-alt p-3xl pb-4xl mx-auto h-fit w-[90vw] overflow-y-auto rounded-2xl text-center lg:h-auto lg:w-[400px] lg:rounded-xl', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx("div", { className: "mb-xl bg-bg-warning-secondary mx-auto flex w-fit items-center justify-center rounded-full p-3", children: _jsx(AlertTriangleIcon, { className: "size-6 text-[#FEDF89]" }) }), _jsx("h1", { className: "text-text-primary-900 text-lg font-semibold", children: "Confirm Promo Cancellation" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "Proceeding will cancel the promo and result in the loss of your active bonus. Do you want to continue?" }), _jsxs(Dialog.Footer, { className: "mt-4xl flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                            hasPendingBonusStore.setOpen(false);
+                                        }, children: "No" }), _jsx(Button, { type: "submit", onClick: () => {
+                                            hasPendingBonusStore.setOpen(false);
+                                            hasPendingBonusStore.setShouldShowWarning(false);
+                                        }, children: "Yes" })] })] }) })] }) }));
+}
+export default HasPendingBonuses;

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

@@ -31,6 +31,7 @@ export function GCashWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        hasPendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
     const localeInfo = useLocaleInfo();
@@ -101,6 +102,10 @@ export function GCashWithdrawal() {
         }
     }, [form, minimumAmount]);
     const handleSubmit = form.handleSubmit(async (data) => {
+        if (globalStore.hasPendingBonus.shouldShowWarning) {
+            globalStore.hasPendingBonus.setOpen(true);
+            return;
+        }
         createWithdrawalMutation.mutate({
             amount: data.amount,
             recipientMobileNumber: mobileNumberParser.format(data.mobileNumber),

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

@@ -37,6 +37,7 @@ export function InstapayWithdrawal() {
     const { enabled } = useFeatureFlag();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        hasPendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
     const createWithdrawalMutation = useCreateInstapayWithdrawalMutation({
@@ -59,8 +60,7 @@ export function InstapayWithdrawal() {
             form.reset();
             setStatus('success');
         },
-        onError(err) {
-            console.log(err, 'error');
+        onError() {
             setStatus('failed');
         },
     });
@@ -137,6 +137,10 @@ export function InstapayWithdrawal() {
         }
     }, [form, instapayBankList]);
     const handleSubmit = form.handleSubmit(async (data) => {
+        if (globalStore.hasPendingBonus.shouldShowWarning) {
+            globalStore.hasPendingBonus.setOpen(true);
+            return;
+        }
         if (enabled) {
             createWithdrawalNextMutation.mutate({
                 amount: data.amount,

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

@@ -29,6 +29,7 @@ export function MayaAppWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        pendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
     const createWithdrawalMutation = useCreateMayaAppWithdrawalMutation({
@@ -92,6 +93,10 @@ export function MayaAppWithdrawal() {
         }
     }, [form, minimumAmount]);
     const handleSubmit = form.handleSubmit(async (data) => {
+        if (globalStore.pendingBonus.shouldShowWarning) {
+            globalStore.pendingBonus.setOpen(true);
+            return;
+        }
         createWithdrawalMutation.mutate({
             amount: data.amount,
             transactionPassword: data.password,

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

@@ -31,6 +31,7 @@ export function MayaWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        hasPendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
     const localeInfo = useLocaleInfo();
@@ -101,6 +102,10 @@ export function MayaWithdrawal() {
         }
     }, [form, minimumAmount]);
     const handleSubmit = form.handleSubmit(async (data) => {
+        if (globalStore.hasPendingBonus.shouldShowWarning) {
+            globalStore.hasPendingBonus.setOpen(true);
+            return;
+        }
         createWithdrawalMutation.mutate({
             amount: data.amount,
             recipientMobileNumber: mobileNumberParser.format(data.mobileNumber),

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

@@ -33,6 +33,7 @@ export function PisoPayWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        pendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
     const createWithdrawalMutation = useCreatePisoPayWithdrawalMutation({
@@ -115,6 +116,10 @@ export function PisoPayWithdrawal() {
         }
     }, [form]);
     const handleSubmit = form.handleSubmit(async (data) => {
+        if (globalStore.pendingBonus.shouldShowWarning) {
+            globalStore.pendingBonus.setOpen(true);
+            return;
+        }
         createWithdrawalMutation.mutate({
             amount: data.amount,
             transactionPassword: data.password,

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

@@ -33,6 +33,7 @@ export function VentajaWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
+        pendingBonus: ctx.pendingBonus,
     })));
     const [status, setStatus] = useState('waiting');
     const createWithdrawalMutation = useCreateVentajaDisbursementWithdrawalMutation({
@@ -114,6 +115,10 @@ export function VentajaWithdrawal() {
         }
     }, [form, instapayBankList]);
     const handleSubmit = form.handleSubmit(async (data) => {
+        if (globalStore.pendingBonus.shouldShowWarning) {
+            globalStore.pendingBonus.setOpen(true);
+            return;
+        }
         createWithdrawalMutation.mutate({
             input: {
                 amount: data.amount,

package/dist/components/Disclaimer/ResponsibleGaming.d.ts

@@ -0,0 +1,10 @@
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+export interface ResponsibleGamingProps {
+    responsibleGamingContent: string | ReactNode;
+    logo: ImageProps['src'];
+    open: boolean;
+    onCloseAction: () => void;
+    responsibleGamingLogo?: ImageProps['src'];
+}
+export declare function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }: ResponsibleGamingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/ResponsibleGaming.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }) {
+    return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: responsibleGamingContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx("div", { className: "w-full", children: _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
+                                        onCloseAction();
+                                    }, children: "I Agree" }) })] }) })] }) }));
+}

package/dist/components/Disclaimer/TermsOfUse.d.ts

@@ -0,0 +1,11 @@
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+export interface TermsOfUseProps {
+    logo: ImageProps['src'];
+    open: boolean;
+    onCloseAction: () => void;
+    termsOfUseContent: string | ReactNode;
+    siteName: string;
+    responsibleGamingLogo?: ImageProps['src'];
+}
+export declare function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }: TermsOfUseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Disclaimer/TermsOfUse.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import pagcorLogo from '../../images/pagcor.png';
+import responsibleGamingLogo from '../../images/responsible-gaming.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }) {
+    return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: [siteName, " Terms of Use"] }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: termsOfUseContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx("div", { className: "w-full", children: _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
+                                        onCloseAction();
+                                    }, children: "I Agree" }) })] }) })] }) }));
+}