@opexa/portal-components 0.0.461 → 0.0.462

package/dist/components/AccountInfo/GoogleDisconnect.d.ts

@@ -0,0 +1,7 @@
+import { type UseDisclosureReturn } from '../../client/hooks/useDisclosure';
+interface GoogleDisconnectProps {
+    onConfirmAction?: (ctx: UseDisclosureReturn) => React.ReactNode;
+    children?: (ctx: UseDisclosureReturn) => React.ReactNode;
+}
+export declare function GoogleDisconnect(props: GoogleDisconnectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AccountInfo/GoogleDisconnect.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDisclosure, } from '../../client/hooks/useDisclosure.js';
+import { LinkBrokenIcon } from '../../icons/LinkBrokenIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function GoogleDisconnect(props) {
+    const disclosure = useDisclosure();
+    return (_jsxs(_Fragment, { children: [props.children?.(disclosure), _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: disclosure.open, onOpenChange: (details) => disclosure.setOpen(details.open), 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)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto max-w-[25rem] overflow-y-auto rounded-xl p-6", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(LinkBrokenIcon, {}) }), _jsx("h2", { className: "mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Google Account" }), _jsx("p", { className: "text-center text-sm text-text-tertiary-600 leading-2xl", children: "Are you sure you want to disconnect your Google account? This may affect your ability to log in or sync data." })] }), _jsx("div", { className: "pt-6", children: props.onConfirmAction?.(disclosure) })] }) })] }) })] }));
+}

package/dist/components/Maya/Maya.d.ts

@@ -1 +1,26 @@
-export declare function Maya(): import("react/jsx-runtime").JSX.Element;
+import { type ImageProps } from 'next/image';
+export interface ClassNameEntries {
+    root?: string;
+    banner?: string;
+    logo?: string;
+    progressRoot?: string;
+    progressTrack?: string;
+    progressTrackCompleteBG?: string;
+    progressTrackIncompleteBG?: string;
+    progressTrackOuter?: string;
+    progressTrackInner?: string;
+    progressBar?: string;
+    progressLabel?: string;
+    licensedBy?: string;
+    pagcorLogo?: string;
+    responsibleGamingLogo?: string;
+}
+interface MayaProps {
+    logo: ImageProps['src'];
+    responsibleGamingLogo?: ImageProps['src'];
+    pagcorLogo?: ImageProps['src'];
+    banner?: ImageProps['src'];
+    className?: string | ClassNameEntries;
+}
+export declare function Maya({ logo, responsibleGamingLogo, pagcorLogo, banner, className, }: MayaProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Maya/Maya.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
+import { isString } from 'lodash-es';
+import Image, {} from 'next/image';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -9,8 +10,9 @@ import { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { useSignInMutation } from '../../client/hooks/useSignInMutation.js';
 import { signOut } from '../../client/services/signOut.js';
 import { toaster } from '../../client/utils/toaster.js';
-import pagcorLogo from '../../images/pagcor.png';
-export function Maya() {
+import pagcorLogoDefault from '../../images/pagcor2.png';
+import responsibleGamingLogoDefault from '../../images/responsible-gaming.png';
+export function Maya({ logo, responsibleGamingLogo, pagcorLogo, banner, className, }) {
     const signIn = useSignInMutation();
     const router = useRouter();
     const searchParams = useSearchParams();
@@ -20,24 +22,22 @@ export function Maya() {
     const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
     const session = useSessionQuery();
     const mayaSessionId = searchParams.get('sessionId');
+    const classNames = isString(className)
+        ? { root: className }
+        : (className ?? {});
     const init = async () => {
         setProgress(25);
-        /* Decide when a session already exists */
         if (session.data) {
-            /* Is there a maya session id? */
             if (mayaSessionId) {
-                /* Is the maya session id new? */
                 if (localStorage.getItem(mayaSessIdKey) === mayaSessionId) {
                     setProgress(100);
                     return;
                 }
                 setProgress(50);
-                /* Need to remove existing session and create a new one */
                 await signOut();
                 await sleep(1000);
             }
             else {
-                /* No new maya session ID? use existing session */
                 setProgress(100);
                 return;
             }
@@ -47,10 +47,7 @@ export function Maya() {
             throw new Error('Maya session ID is required');
         }
         await new Promise((resolve, reject) => {
-            signIn.mutate({
-                type: 'MAYA',
-                session: mayaSessionId,
-            }, {
+            signIn.mutate({ type: 'MAYA', session: mayaSessionId }, {
                 onSuccess: () => {
                     setProgress(100);
                     setComplete(true);
@@ -86,6 +83,5 @@ export function Maya() {
         };
         runInit();
     }, []);
-    return (_jsx("div", { className: "relative flex min-h-screen flex-col border dark:bg-[#1F242F]", children: _jsxs("div", { className: "absolute bottom-0 w-full shrink-0 bg-[#F9FAFB] p-6 dark:bg-[#161B26]", children: [_jsxs("div", { className: "mt-4", children: [_jsx("div", { className: twMerge('overflow-hidden rounded-full p-px', !complete && 'bg-[#D0D5DD] dark:bg-[#333741]', complete &&
-                                'bg-gradient-to-r from-[#FFDE21] via-[#FFD012] to-[#FFBF00]'), id: "progress:root", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progress, "aria-labelledby": "progress:label", children: _jsx("div", { className: "rounded-full bg-[#F2F4F7] p-px dark:bg-[#1F242F]", children: _jsx("div", { className: "relative h-4 w-full overflow-hidden rounded-full bg-white", children: _jsx("div", { className: twMerge('absolute left-0 h-full rounded-full bg-gradient-to-r from-[#FFDE21] via-[#FFBF00] to-[#FF9442] transition-all duration-150'), style: { width: `${progress}%` } }) }) }) }), _jsxs("span", { id: "progress:label", className: "mt-3 block text-center text-[#344054] text-sm dark:text-[#CECFD2]", children: [progress, "% Loading..."] })] }), _jsxs("div", { className: "mt-7 flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-[#475467] text-xs dark:text-[#94969C]", children: "Officially Licensed by" }), _jsx(Image, { src: pagcorLogo, alt: "Pagcor Logo", height: 30, width: 30, className: "w-auto shrink-0" })] })] }) }));
+    return (_jsxs("div", { className: twMerge('relative flex min-h-screen flex-col', classNames.root), children: [banner && (_jsx(Image, { src: banner, alt: "brand logo", height: 50, width: 120, className: twMerge('w-full grow object-cover object-top', classNames.banner) })), _jsxs("div", { className: twMerge('absolute bottom-0 w-full shrink-0 bg-[#1F1F1F] p-6', classNames.progressRoot), children: [_jsxs("div", { children: [_jsx(Image, { src: logo, alt: "brand logo", height: 50, width: 120, className: twMerge('mx-auto mb-5 h-12.5 w-auto', classNames.logo) }), _jsx("div", { className: twMerge('overflow-hidden rounded-full p-px', !complete && (classNames.progressTrackIncompleteBG ?? 'bg-[#373A41]'), complete && (classNames.progressTrackCompleteBG ?? 'bg-[#ffb300]'), classNames.progressTrack), id: "progress:root", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progress, "aria-labelledby": "progress:label", children: _jsx("div", { className: twMerge('rounded-full bg-[#1F1F1F] p-px', classNames.progressTrackOuter), children: _jsx("div", { className: twMerge('relative h-4 w-full overflow-hidden rounded-full bg-[#22262e]', classNames.progressTrackInner), children: _jsx("div", { className: twMerge('absolute left-0 h-full rounded-full bg-[#ffb300] transition-all duration-150', classNames.progressBar), style: { width: `${progress}%` } }) }) }) }), _jsxs("span", { id: "progress:label", className: twMerge('mt-3 block text-center text-[#CECFD2] text-sm', classNames.progressLabel), children: [progress, "% Loading..."] })] }), _jsxs("div", { className: twMerge('mt-7 flex items-center justify-center gap-2 text-[#94969C] text-xs', classNames.licensedBy), children: [_jsx("span", { children: "Officially Licensed by" }), _jsx(Image, { src: pagcorLogo ?? pagcorLogoDefault, alt: "PAGCOR logo", height: 43, width: 88, className: twMerge('h-[43px] w-auto shrink-0', classNames.pagcorLogo), draggable: false, unoptimized: true }), _jsx(Image, { src: responsibleGamingLogo ?? responsibleGamingLogoDefault, alt: "Responsible Gaming logo", height: 50, width: 186, className: twMerge('h-[50px] w-auto shrink-0', classNames.responsibleGamingLogo), draggable: false, unoptimized: true })] })] })] }));
 }

package/dist/components/PortalProvider/CXDTokenObserver.js

@@ -1,30 +1,30 @@
 'use client';
 import { addHours } from 'date-fns';
 import { clamp } from 'lodash-es';
+import { useSearchParams } from 'next/navigation';
 import { useLocalStorage, useTimeout } from 'usehooks-ts';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 export function CXDTokenObserver() {
-    const { data: account } = useAccountQuery();
-    const accountCxd = {
-        cxd: account?.cellxpertDetails?.cxd,
-    };
-    const [cxd, setCxd, removeCxd] = useLocalStorage('cxd', null);
+    const searchParams = useSearchParams();
+    const cxdToken = searchParams.get('cxd');
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const [cxd, setCxd, removeCxd] = useLocalStorage('WebPortalCellxpertCxd', null);
     const now = new Date();
+    const shouldTimeoutRun = cxdToken && account;
     const removeCxdUntilInMs = cxd?.timestamp
         ? clamp(cxd.timestamp - now.getTime(), 0, Infinity)
         : 0;
     useTimeout(() => {
-        const isSame = cxd?.cxd === accountCxd.cxd;
+        const isSame = cxd?.cxd === cxdToken;
         if (!isSame) {
             const extendedTimestamp = addHours(new Date(), 6).getTime();
             setCxd({
-                cxd: accountCxd.cxd,
+                cxd: cxdToken,
                 timestamp: extendedTimestamp,
             });
         }
-    }, account ? 100 : null);
-    useTimeout(() => {
-        removeCxd();
-    }, account ? removeCxdUntilInMs : null);
+    }, shouldTimeoutRun ? 100 : null);
+    useTimeout(() => removeCxd(), shouldTimeoutRun ? removeCxdUntilInMs : null);
     return null;
 }

package/dist/icons/LinkBrokenIcon.d.ts

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

package/dist/icons/LinkBrokenIcon.js

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