@opexa/portal-components 0.0.460 → 0.0.461

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/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 searchParams = useSearchParams();
-    const cxdToken = searchParams.get('cxd');
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    const [cxd, setCxd, removeCxd] = useLocalStorage('WebPortalCellxpertCxd', null);
+    const { data: account } = useAccountQuery();
+    const accountCxd = {
+        cxd: account?.cellxpertDetails?.cxd,
+    };
+    const [cxd, setCxd, removeCxd] = useLocalStorage('cxd', 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 === cxdToken;
+        const isSame = cxd?.cxd === accountCxd.cxd;
         if (!isSame) {
             const extendedTimestamp = addHours(new Date(), 6).getTime();
             setCxd({
-                cxd: cxdToken,
+                cxd: accountCxd.cxd,
                 timestamp: extendedTimestamp,
             });
         }
-    }, shouldTimeoutRun ? 100 : null);
-    useTimeout(() => removeCxd(), shouldTimeoutRun ? removeCxdUntilInMs : null);
+    }, account ? 100 : null);
+    useTimeout(() => {
+        removeCxd();
+    }, account ? removeCxdUntilInMs : null);
     return null;
 }

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

@@ -0,0 +1,8 @@
+type Options = {
+    accountName?: string;
+    siteName?: string;
+    signInOptions?: 'MOBILE_NUMBER' | 'NAME_AND_PASSWORD';
+};
+export type ErrorCode = 'MEMBER_ACCOUNT_BLACKLISTED' | 'MEMBER_ACCOUNT_SUSPENDED' | 'INVALID_RECAPTCHA_RESPONSE' | 'MEMBER_NOT_FOUND' | 'RATE_LIMIT_REACH' | 'NOT_READY_TO_SEND_VERIFICATION_ERROR' | 'Forbidden';
+export declare function getFriendlyErrorMessage(code: ErrorCode, options?: Options): string;
+export {};

package/dist/components/SignIn/utils.js

@@ -0,0 +1,26 @@
+export function getFriendlyErrorMessage(code, options) {
+    const accountName = options?.accountName ?? '';
+    const siteName = options?.siteName ?? '';
+    const signInOptions = options?.signInOptions ?? 'NAME_AND_PASSWORD';
+    switch (code) {
+        case 'MEMBER_ACCOUNT_BLACKLISTED':
+            return `Your account ${accountName} has been blacklisted due to a serious violation of our policies. For more information or to appeal, please contact the ${siteName} Chat Support team.`;
+        case 'MEMBER_ACCOUNT_SUSPENDED':
+            return `Your account ${accountName} has been temporarily suspended. Please reach out to the ${siteName} Chat Support team to learn more and get help with resolving the issue.`;
+        case 'INVALID_RECAPTCHA_RESPONSE':
+            return 'Invalid reCAPTCHA response';
+        case 'MEMBER_NOT_FOUND':
+            return 'Account not found. Please check your username and try again.';
+        case 'RATE_LIMIT_REACH':
+            return 'Rate limit exceeded';
+        case 'NOT_READY_TO_SEND_VERIFICATION_ERROR':
+            return 'Your account is not ready to send verification requests. Please try again later.';
+        case 'Forbidden':
+            if (signInOptions === 'MOBILE_NUMBER') {
+                return 'Invalid verification code. Please check the code and try again.';
+            }
+            return 'Invalid username or password, please try again.';
+        default:
+            return 'Something went wrong. Please try again later.';
+    }
+}

package/dist/components/TopProgress/TopProgressBar.d.ts

@@ -0,0 +1,6 @@
+type TopProgressBarPreset = 'Sunset' | 'Poppy' | 'Rosebud' | 'Sunshine' | 'Gold' | 'Twilight' | 'Powder' | 'Holly' | 'Northern Lights' | 'Raw Green' | 'Lime' | 'Nemesia' | 'Snowflake' | 'Blue Bird' | 'Blueprint' | 'Salvia' | 'Heartsease' | 'Amaranthus' | 'Candy' | 'Verbena';
+export declare const TopProgressBar: ({ preset, customPreset, }: {
+    preset?: TopProgressBarPreset;
+    customPreset?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TopProgress/TopProgressBar.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+// CSS gradient presets (inline styles), approximate Tailwind palette colors
+// --> check presets here <3 https://www.creative-tim.com/twcomponents/gradient-generator
+const PRESET_BG = {
+    Sunset: 'linear-gradient(90deg, #ef4444 0%, #f97316 100%)',
+    Poppy: 'linear-gradient(90deg, #fb7185 0%, #ef4444 100%)',
+    Rosebud: 'linear-gradient(90deg, #ec4899 0%, #f43f5e 100%)',
+    Sunshine: 'linear-gradient(90deg, #fde68a 0%, #facc15 100%)',
+    Gold: 'linear-gradient(90deg, #fde68a 0%, #eab308 100%)',
+    Twilight: 'linear-gradient(90deg, #f59e0b 0%, #ec4899 100%)',
+    Powder: 'linear-gradient(90deg, #ddd6fe 0%, #fbcfe8 100%)',
+    Holly: 'linear-gradient(90deg, #bfdbfe 0%, #a5f3fc 100%)',
+    'Northern Lights': 'linear-gradient(90deg, #99f6e4 0%, #14b8a6 100%)',
+    'Raw Green': 'linear-gradient(90deg, #a3e635 0%, #84cc16 100%)',
+    Lime: 'linear-gradient(90deg, #2dd4bf 0%, #fef08a 100%)',
+    Nemesia: 'linear-gradient(90deg, #34d399 0%, #22d3ee 100%)',
+    Snowflake: 'linear-gradient(90deg, #d946ef 0%, #22d3ee 100%)',
+    'Blue Bird': 'linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%)',
+    Blueprint: 'linear-gradient(90deg, #6366f1 0%, #3b82f6 100%)',
+    Salvia: 'linear-gradient(90deg, #2563eb 0%, #7c3aed 100%)',
+    Heartsease: 'linear-gradient(90deg, #c026d3 0%, #db2777 100%)',
+    Amaranthus: 'linear-gradient(90deg, #c026d3 0%, #9333ea 100%)',
+    Candy: 'linear-gradient(90deg, #d946ef 0%, #ec4899 100%)',
+    Verbena: 'linear-gradient(90deg, #8b5cf6 0%, #a855f7 100%)',
+};
+export const TopProgressBar = ({ preset = 'Gold', customPreset, }) => {
+    const [progress, setProgress] = useState(0);
+    const [visible, setVisible] = useState(false);
+    const incrementTimerRef = useRef(null);
+    const hideTimerRef = useRef(null);
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const currentUrl = useMemo(() => {
+        const sp = searchParams?.toString();
+        return `${pathname ?? ''}${sp ? `?${sp}` : ''}`;
+    }, [pathname, searchParams]);
+    const clearTimers = useCallback(() => {
+        if (incrementTimerRef.current) {
+            clearInterval(incrementTimerRef.current);
+            incrementTimerRef.current = null;
+        }
+        if (hideTimerRef.current) {
+            clearTimeout(hideTimerRef.current);
+            hideTimerRef.current = null;
+        }
+    }, []);
+    const startProgress = useCallback(() => {
+        clearTimers();
+        setVisible(true);
+        setProgress(8);
+        incrementTimerRef.current = window.setInterval(() => {
+            setProgress((prev) => {
+                if (prev >= 90)
+                    return prev;
+                const delta = Math.max(1, Math.min(10, 10 * Math.random()));
+                return Math.min(prev + delta, 90);
+            });
+        }, 250);
+    }, [clearTimers]);
+    const finishProgress = useCallback(() => {
+        setProgress(100);
+        if (incrementTimerRef.current) {
+            clearInterval(incrementTimerRef.current);
+            incrementTimerRef.current = null;
+        }
+        if (hideTimerRef.current) {
+            window.clearTimeout(hideTimerRef.current);
+        }
+        hideTimerRef.current = window.setTimeout(() => {
+            setVisible(false);
+            // Reset for next time after fade-out transition
+            hideTimerRef.current = window.setTimeout(() => setProgress(0), 200);
+        }, 150);
+    }, []);
+    // Trigger progress completion when URL changes
+    const previousUrl = useRef('');
+    useEffect(() => {
+        if (previousUrl.current !== currentUrl) {
+            previousUrl.current = currentUrl;
+            finishProgress();
+        }
+    }, [currentUrl, finishProgress]);
+    useEffect(() => {
+        const handleAnchorClick = (event) => {
+            const target = event.currentTarget;
+            if (!target)
+                return;
+            const href = target.getAttribute('href');
+            if (!href)
+                return;
+            const targetUrl = new URL(href, window.location.origin);
+            const current = new URL(window.location.href);
+            const isDifferent = targetUrl.origin !== current.origin ||
+                targetUrl.pathname !== current.pathname ||
+                targetUrl.search !== current.search;
+            if (isDifferent) {
+                startProgress();
+            }
+        };
+        const attachListeners = () => {
+            const anchors = document.querySelectorAll('a[href]');
+            anchors.forEach((a) => {
+                a.removeEventListener('click', handleAnchorClick);
+                a.addEventListener('click', handleAnchorClick);
+            });
+        };
+        const observer = new MutationObserver(() => attachListeners());
+        observer.observe(document, { childList: true, subtree: true });
+        attachListeners();
+        const originalPush = window.history.pushState;
+        const originalReplace = window.history.replaceState;
+        window.history.pushState = new Proxy(originalPush, {
+            apply: (target, thisArg, argArray) => {
+                const result = Reflect.apply(target, thisArg, argArray);
+                requestAnimationFrame(() => finishProgress());
+                return result;
+            },
+        });
+        window.history.replaceState = new Proxy(originalReplace, {
+            apply: (target, thisArg, argArray) => {
+                const result = Reflect.apply(target, thisArg, argArray);
+                requestAnimationFrame(() => finishProgress());
+                return result;
+            },
+        });
+        // Cleanup
+        return () => {
+            observer.disconnect();
+            const anchors = document.querySelectorAll('a[href]');
+            anchors.forEach((a) => a.removeEventListener('click', handleAnchorClick));
+            window.history.pushState = originalPush;
+            window.history.replaceState = originalReplace;
+            clearTimers();
+        };
+    }, [clearTimers, finishProgress, startProgress]);
+    return (_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed top-0 right-0 left-0 z-[9999]", children: _jsx("div", { className: twMerge('h-[3px] transition-[width,opacity] duration-200 ease-out', visible ? 'opacity-100' : 'opacity-0'), style: {
+                width: `${progress}%`,
+                background: customPreset ?? PRESET_BG[preset],
+                boxShadow: '0 0 10px rgba(255, 255, 255, 0.6)',
+            } }) }));
+};

package/dist/components/TopProgress/index.d.ts

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

package/dist/components/TopProgress/index.js

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

package/dist/constants/Branches.d.ts

@@ -0,0 +1,2 @@
+import type { Branch } from '../types';
+export declare const BRANCHES: Branch[];

package/dist/constants/Branches.js

@@ -0,0 +1,42 @@
+export const BRANCHES = [
+    {
+        code: 'BRCAL',
+        name: 'Bingo Republic 2nd floor Primark Center Deparo St., Caloocan City',
+    },
+    {
+        code: 'BRNAG',
+        name: 'Bingo Republic 3rd floor Robinsons Mall, Naga City, Camarines Sur',
+    },
+    {
+        code: 'BRANT',
+        name: 'Bingo Republic 2nd floor Robinsons Mall, San Vicente,Antique',
+    },
+    {
+        code: 'BRCLA',
+        name: 'Clark',
+    },
+    {
+        code: 'BRLAG',
+        name: 'Laguna',
+    },
+    {
+        code: 'BREAS',
+        name: 'Eastwood City, Quezon City',
+    },
+    {
+        code: 'BRMAR',
+        name: 'Bingo ng Bayan 4th floor Marikina Public Market, Marikina City',
+    },
+    {
+        code: 'BRILO',
+        name: 'Iloilo',
+    },
+    {
+        code: 'BRFIM',
+        name: 'Fisher Mall,Quezon City',
+    },
+    {
+        code: 'BRCAC',
+        name: 'Villa Caceres Hotel, Naga City,Camsur',
+    },
+];

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';