@opexa/portal-components 0.0.289 → 0.0.290

package/dist/components/KYC/backup/Step1.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import { CheckIcon } from '../../../icons/CheckIcon.js';
-import { XIcon } from '../../../icons/XIcon.js';
-import uploadId from '../../../images/capture-id-banner.png';
-import { Button } from '../../../ui/Button/index.js';
-import { useKYCContext } from './KYCContext.js';
-export function Step1() {
-    const context = useKYCContext();
-    return (_jsxs("div", { className: "mt-2xl px-xl lg:mt-3xl lg:px-0", children: [_jsx("p", { className: "lg:text-text-secondary-700 text-center text-2xl font-semibold lg:text-base", children: "Prepare to upload your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt mt-6 rounded-xl border p-4 lg:mt-2xl lg:border-0 lg:bg-transparent lg:p-0", children: [_jsx(Image, { src: uploadId, alt: "", className: "h-auto w-full", width: 600, height: 352 }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Upload front side of your ID"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "Don't edit image of your ID"] })] }), _jsxs("div", { className: "mt-4xl space-y-lg", children: [_jsx(Button, { onClick: () => {
-                                    context.setStep(2);
-                                }, children: "Continue" }), _jsx(Button, { variant: "outline", children: "Continue on phone" })] })] })] }));
-}

package/dist/components/KYC/backup/Step2.d.ts

@@ -1 +0,0 @@
-export declare function Step2(): import("react/jsx-runtime").JSX.Element;

package/dist/components/KYC/backup/Step2.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import { CheckIcon } from '../../../icons/CheckIcon.js';
-import { XIcon } from '../../../icons/XIcon.js';
-import selfie from '../../../images/capture-selfie-banner.png';
-import { Button } from '../../../ui/Button/index.js';
-import { useKYCContext } from './KYCContext.js';
-export function Step2() {
-    const context = useKYCContext();
-    return (_jsxs("div", { className: "mt-2xl px-xl lg:mt-3xl lg:px-0", children: [_jsx("p", { className: "lg:text-text-secondary-700 text-center text-2xl font-semibold lg:text-base", children: "Take a selfie holding your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt mt-6 rounded-xl border p-4 lg:mt-2xl lg:border-0 lg:bg-transparent lg:p-0", children: [_jsx(Image, { src: selfie, alt: "", className: "h-auto w-full", width: 600, height: 352 }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Face and ID must be clearly visible"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "No hats, sunglasses, or masks"] })] }), _jsxs("div", { className: "mt-4xl space-y-lg", children: [_jsx(Button, { size: "sm", onClick: () => {
-                                    context.setStep(3);
-                                }, children: "Continue" }), _jsx(Button, { variant: "outline", children: "Continue on phone" })] })] })] }));
-}

package/dist/components/KYC/backup/Step3.d.ts

@@ -1 +0,0 @@
-export declare function Step3(): import("react/jsx-runtime").JSX.Element;

package/dist/components/KYC/backup/Step3.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckIcon } from '../../../icons/CheckIcon.js';
-import { Button } from '../../../ui/Button/index.js';
-import { Checkbox } from '../../../ui/Checkbox/index.js';
-import { Field } from '../../../ui/Field/index.js';
-import { useKYCContext } from './KYCContext.js';
-export function Step3() {
-    const context = useKYCContext();
-    return (_jsxs("div", { className: "mt-2xl px-xl lg:mt-3xl lg:px-0", children: [_jsx("p", { className: "lg:text-text-secondary-700 text-center text-2xl font-semibold lg:text-base", children: "Enter your basic and work-related information" }), _jsxs("form", { className: "border-border-secondary bg-bg-primary-alt mt-6 rounded-xl border p-4 lg:mt-2xl lg:border-0 lg:bg-transparent lg:p-0", onSubmit: (e) => {
-                    e.preventDefault();
-                    context.setStep(4);
-                }, children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Permanent address" }), _jsx(Field.Input, { placeholder: "Enter your permanent address" })] }), _jsxs(Checkbox.Root, { className: "mt-2xl", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { children: "Same as permanent address" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Field.Root, { className: "mt-sm", children: [_jsx(Field.Label, { children: "Current address" }), _jsx(Field.Input, { placeholder: "Enter your current address" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Source of income" }), _jsx(Field.Input, { placeholder: "Enter your source of income" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Work Description" }), _jsx(Field.Input, { placeholder: "Enter your work description" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Place of birth" }), _jsx(Field.Input, { placeholder: "Enter your place of birth" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Nationality" }), _jsx(Field.Input, { placeholder: "Enter your nationality" })] }), _jsx(Button, { type: "submit", className: "mt-4xl", children: "Submit" })] })] }));
-}

package/dist/components/KYC/backup/Step4.d.ts

@@ -1 +0,0 @@
-export declare function Step4(): import("react/jsx-runtime").JSX.Element;

package/dist/components/KYC/backup/Step4.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckCircleIcon } from '../../../icons/CheckCircleIcon.js';
-import { Button } from '../../../ui/Button/index.js';
-import { Dialog } from '../../../ui/Dialog/index.js';
-export function Step4() {
-    return (_jsxs("div", { children: [_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(CheckCircleIcon, {}) }), _jsx("h2", { className: "mt-3 text-center", children: "Submission Successful" }), _jsx("p", { className: "text-text-tertiary-600 text-center", children: "Your documents have been submitted successfully. They\u2019re now under review, and you\u2019ll receive a notification as soon as your account is verified." }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { className: "mt-3xl", onClick: () => api.setOpen(false), children: "Ok" })) })] }));
-}

package/dist/components/KYC/backup/useKYC.d.ts

@@ -1,10 +0,0 @@
-type Step = 1 | 2 | 3 | 4;
-export interface UseKYCReturn {
-    step: Step;
-    setStep: (step: Step) => void;
-}
-export declare function useKYC(): {
-    step: Step;
-    setStep: import("react").Dispatch<import("react").SetStateAction<Step>>;
-};
-export {};

package/dist/components/KYC/backup/useKYC.js

@@ -1,8 +0,0 @@
-import { useState } from 'react';
-export function useKYC() {
-    const [step, setStep] = useState(1);
-    return {
-        step,
-        setStep,
-    };
-}

package/dist/components/KYC/loadModels.d.ts

@@ -1 +0,0 @@
-export declare function loadFaceApiModels(): Promise<void>;

package/dist/components/KYC/loadModels.js

@@ -1,9 +0,0 @@
-import * as faceapi from 'face-api.js';
-export async function loadFaceApiModels() {
-    const MODEL_URL = '/models';
-    await Promise.all([
-        faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
-        faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
-        faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
-    ]);
-}

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

@@ -1,9 +0,0 @@
-export declare function loadFaceApiModels(): Promise<void>;
-export declare function dataURLtoBlob(dataURL: string): Blob;
-export declare const resizeFile: (file: File) => Promise<unknown>;
-export declare const MAX_FILE_SIZE = 10;
-export declare const MAX_NAME_LENGTH = 52;
-export declare const SUPPORTED_FILES: string[];
-export declare function validateFile(file: File): "File too large" | "File name too long" | "Unsupported file" | undefined;
-export declare function showPermissionInstructions(): void;
-export declare const cameraErrorDescriptions: Record<string, string>;

package/dist/components/KYC/utils.js

@@ -1,79 +0,0 @@
-import * as faceapi from 'face-api.js';
-import Resizer from 'react-image-file-resizer';
-export async function loadFaceApiModels() {
-    // const url = `${STATIC_ENDPOINT}/models`;
-    const url = '/models';
-    await Promise.all([
-        faceapi.nets.tinyFaceDetector.loadFromUri(url),
-        faceapi.nets.faceLandmark68Net.loadFromUri(url),
-        faceapi.nets.faceRecognitionNet.loadFromUri(url),
-    ]);
-}
-export function dataURLtoBlob(dataURL) {
-    const parts = dataURL.split(';base64,');
-    const contentType = parts[0].split(':')[1];
-    const raw = window.atob(parts[1]);
-    const rawLength = raw.length;
-    const uInt8Array = new Uint8Array(rawLength);
-    for (let i = 0; i < rawLength; ++i) {
-        uInt8Array[i] = raw.charCodeAt(i);
-    }
-    return new Blob([uInt8Array], { type: contentType });
-}
-export const resizeFile = (file) => new Promise((resolve) => {
-    Resizer.imageFileResizer(file, 300, 300, 'jpeg', 100, 0, (uri) => {
-        resolve(uri);
-    }, 'file');
-});
-export const MAX_FILE_SIZE = 10; /* in MB */
-export const MAX_NAME_LENGTH = 52;
-export const SUPPORTED_FILES = [
-    /* add more supported ext */
-    'image/png',
-    'image/jpg',
-    'image/jpeg',
-];
-function removeFilenameExt(subject) {
-    const l = subject.split('.');
-    l.pop();
-    return l.join('.');
-}
-export function validateFile(file) {
-    const fileType = file.type;
-    const fileSize = file.size / (1024 * 1024);
-    const nameLength = removeFilenameExt(file.name).length;
-    if (fileSize > MAX_FILE_SIZE)
-        return 'File too large';
-    if (nameLength > MAX_NAME_LENGTH)
-        return 'File name too long';
-    if (!SUPPORTED_FILES.includes(fileType))
-        return 'Unsupported file';
-}
-export function showPermissionInstructions() {
-    const instructions = `
-      Camera access is blocked. To enable camera access:
-
-      Chrome/Edge:
-      1. Click the camera icon in the address bar
-      2. Select "Always allow" and click "Done"
-      3. Or go to Settings > Privacy and security > Site settings > Camera
-
-      Firefox:
-      1. Click the shield icon in the address bar
-      2. Click on "Camera blocked"
-      3. Select "Allow" and refresh the page
-
-      Safari:
-      1. Go to Safari > Settings > Websites > Camera
-      2. Find this website and change to "Allow"
-
-      After changing permissions, please refresh the page and try again.
-        `;
-    alert(instructions);
-}
-export const cameraErrorDescriptions = {
-    NotAllowedError: 'We were unable to detect a camera on your device. Please ensure it is properly connected and accessible to this application.',
-    NotReadableError: 'We were unable to access your camera. Please check if another application is using it or try reconnecting your device.',
-    NotFoundError: 'No camera was found. Please connect a camera and try again.',
-    NoIdDetectedError: 'No ID document was detected in the frame. Please ensure your ID is clearly visible and try again.',
-};

package/dist/components/Messages/Message.d.ts

@@ -1 +0,0 @@
-export declare function Message(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/Message.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { tz } from '@date-fns/tz';
-import { format } from 'date-fns';
-import Link from 'next/link';
-import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
-import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
-import { useMessageContext } from './MessageContext.js';
-import { MessageIcon } from './MessageIcon.js';
-export function Message() {
-    const message = useMessageContext();
-    const localeInfo = useLocaleInfo();
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        message: ctx.message,
-        messages: ctx.messages,
-    })));
-    const markMessageAsReadMutation = useMarkMessageAsReadMutation();
-    const handleViewMessage = async () => {
-        globalStore.message.setData(message);
-        globalStore.message.setOpen(true);
-        globalStore.messages.setOpen(false);
-        if (!message.markedAsRead)
-            markMessageAsReadMutation.mutate(message.id);
-    };
-    const handleActionClick = (e) => {
-        e.stopPropagation();
-        globalStore.messages.setOpen(false);
-        globalStore.messages.setTab('ALL');
-    };
-    return (_jsxs("div", { role: "button", tabIndex: 0, className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5", onClick: handleViewMessage, "aria-pressed": "false", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(message.dateTimeCreated), 'M/d/yyyy - h:mma', {
-                            in: tz(localeInfo.timezone),
-                        }) }), !message.markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [_jsx(MessageIcon, { type: message.icon, className: "text-brand-400 size-5" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } }), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: action.url, onClick: handleActionClick, children: action.name }, index))) }))] }));
-}

package/dist/components/Messages/MessageContext.d.ts

@@ -1,6 +0,0 @@
-import type { Message } from '../../types';
-export declare const MessageContext: (props: {
-    value: Message;
-} & {
-    children?: import("react").ReactNode | undefined;
-}) => React.ReactNode, useMessageContext: () => Message;

package/dist/components/Messages/MessageContext.js

@@ -1,2 +0,0 @@
-import { createContext } from '../../client/utils/createContext.js';
-export const [MessageContext, useMessageContext] = createContext();

package/dist/components/Messages/MessageItem.d.ts

@@ -1,4 +0,0 @@
-import type { Message } from '@opexa/portal-sdk-core';
-export declare function MessageItem({ message }: {
-    message: Message;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/MessageItem.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { tz } from '@date-fns/tz';
-import { format } from 'date-fns';
-import Link from 'next/link';
-import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useLocaleInfo, useMarkMessageAsReadMutation, } from '../../client/hooks/index.js';
-import { getMessageIcon } from '../../components/Messages/utils.js';
-export function MessageItem({ message }) {
-    const { 
-    /**/
-    id, icon, title, content, actions, markedAsRead, dateTimeCreated, } = message;
-    const localeInfo = useLocaleInfo();
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        message: ctx.message,
-        messages: ctx.messages,
-    })));
-    const markMessageAsReadMutation = useMarkMessageAsReadMutation();
-    const Icon = getMessageIcon(icon);
-    const handleViewMessage = async () => {
-        globalStore.message.setData(message);
-        globalStore.message.setOpen(true);
-        globalStore.messages.setOpen(false);
-        if (!markedAsRead)
-            markMessageAsReadMutation.mutate(id);
-    };
-    const handleActionClick = (e) => {
-        e.stopPropagation();
-        globalStore.messages.setOpen(false);
-        globalStore.messages.setTab('ALL');
-    };
-    return (_jsxs("div", { role: "button", tabIndex: 0, className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5", onClick: handleViewMessage, "aria-pressed": "false", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(dateTimeCreated), 'M/d/yyyy - h:mma', {
-                            in: tz(localeInfo.timezone),
-                        }) }), !markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [_jsx(Icon, { className: "text-brand-400" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: content } }), actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: action.url, onClick: handleActionClick, children: action.name }, index))) }))] }));
-}

package/dist/components/Messages/MessagePopup.d.ts

@@ -1 +0,0 @@
-export declare const MessagePopup: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Messages/MessagePopup.js

@@ -1,19 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from 'next/link';
-import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-import { XIcon } from '../../icons/XIcon.js';
-import { Dialog } from '../../ui/Dialog/index.js';
-import { Portal } from '../../ui/Portal/index.js';
-import { MessageIcon } from './MessageIcon.js';
-export const MessagePopup = () => {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({ message: ctx.message })));
-    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.message.open, onOpenChange: ({ open }) => {
-            globalStore.message.setOpen(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: "min-h-auto mx-auto min-w-[21.438rem] max-w-[21.438rem] rounded-xl px-xl pb-0 pt-5 shadow-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "bg-bg-brand-secondary mx-auto w-fit rounded-full p-3", children: _jsx(MessageIcon, { type: globalStore.message.data?.icon ?? 'INFO', className: "text-text-brand size-6" }) }), _jsx("p", { className: "text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight", children: globalStore.message.data?.title }), _jsx("div", { className: "text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight", dangerouslySetInnerHTML: {
-                                            __html: globalStore.message.data?.content ?? '',
-                                        } })] }), globalStore.message.data?.actions.length ? (_jsx("div", { className: "flex flex-col space-y-2 px-4 pb-8 pt-6 text-center", children: globalStore.message.data.actions.map((action, index) => (_jsx(Link, { className: "bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold", href: action.url, onClick: () => {
-                                        globalStore.message.setOpen(false);
-                                    }, children: action.name }, index))) })) : null] }) })] }) }));
-};

package/dist/components/Messages/MessageTrigger.d.ts

@@ -1,8 +0,0 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { Message } from '../../types';
-interface MessageTriggerProps extends ComponentPropsWithRef<'button'> {
-    message: Message;
-    asChild?: boolean;
-}
-export declare function MessageTrigger(props: MessageTriggerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Messages/MessageTrigger.js

@@ -1,19 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ark } from '@ark-ui/react/factory';
-import { useShallow } from 'zustand/shallow';
-import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
-import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
-export function MessageTrigger(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        message: ctx.message,
-    })));
-    const markMessageAsReadMutation = useMarkMessageAsReadMutation();
-    return (_jsx(ark.button, { type: "button", "aria-label": "View message", "data-state": globalStore.message.open ? 'open' : 'closed', ...props, onClick: (e) => {
-            globalStore.message.setData(props.message);
-            globalStore.message.setOpen(true);
-            if (!props.message.markedAsRead)
-                markMessageAsReadMutation.mutate(props.message.id);
-            return props.onClick?.(e);
-        } }));
-}

package/dist/components/Promo/PromoContent.d.ts

@@ -1,2 +0,0 @@
-import type { PromoProps } from './Promo';
-export declare function PromoContent(props: PromoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promo/PromoContent.js

@@ -1,9 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import Link from 'next/link';
-import { ChevronLeftIcon } from '../../icons/index.js';
-import { Button, Prose } from '../../ui/index.js';
-export function PromoContent(props) {
-    return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), _jsx(Image, { src: "https://s3.ap-east-1.amazonaws.com/opexa-assets.opexasystem.com/assets/BSxIXEsa59_zzMAR27-ALLDAYREBATE06-STATIC-WEB-HB-1920x1080.png", alt: "", width: 1024, height: 600, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" }), _jsx(Button, { className: "mt-xl lg:mt-6", children: "Deposit Now" }), _jsx("h1", { className: "mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: "Welcome Bonus 100% up to $500 + 10 Free Spins" }), _jsx("p", { className: "text-text-secondary-700 mt-xl lg:mt-6", children: "Ends 5/26/2025, 1:59:59 AM" }), _jsxs(Prose, { className: "mt-2xl lg:mt-6", children: [_jsx("p", { children: "Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien varius id." }), _jsx("p", { children: "Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet sodales id est ac volutpat." }), _jsx("p", { children: "Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci, tincidunt aenean tempus. Quis velit eget ut tortor tellus. Sed vel, congue felis elit erat nam nibh orci." }), _jsx("p", { children: "Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In aliquet pellentesque aenean hac vestibulum turpis mi bibendum diam. Tempor integer aliquam in vitae malesuada fringilla." }), _jsx("p", { children: "Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna. Viverra purus et erat auctor aliquam. Risus, volutpat vulputate posuere purus sit congue convallis aliquet. Arcu id augue ut feugiat donec porttitor neque. Mauris, neque ultricies eu vestibulum, bibendum quam lorem id. Dolor lacus, eget nunc lectus in tellus, pharetra, porttitor." }), _jsx("p", { children: "Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci, tincidunt aenean tempus. Quis velit eget ut tortor tellus. Sed vel, congue felis elit erat nam nibh orci." }), _jsx("h5", { children: "General Conditions:" }), _jsx("p", { children: "Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien varius id." }), _jsx("p", { children: "Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet sodales id est ac volutpat." })] }), _jsxs(Prose, { className: "bg-bg-secondary mt-xl rounded-2xl p-2xl lg:mt-16 lg:p-4xl", children: [_jsx("h2", { children: "Conclusion" }), _jsx("p", { children: "Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse." }), _jsx("p", { children: "Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus." }), _jsx("p", { children: "Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor." })] })] }));
-}

package/dist/components/Promos/PromoCarousel.d.ts

@@ -1,2 +0,0 @@
-import type { PromosProps } from './Promos';
-export declare function PromoCarousel(props: PromosProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promos/PromoCarousel.js

@@ -1,41 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import useEmblaCarousel, {} from 'embla-carousel-react';
-import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { usePromosQuery } from '../../client/hooks/index.js';
-import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, Gift01Icon, } from '../../icons/index.js';
-import { Button } from '../../ui/index.js';
-import { Empty } from '../Empty.js';
-import { PromosItem } from './PromoItem.js';
-export function PromoCarousel(props) {
-    const promosQuery = usePromosQuery({});
-    const promos = promosQuery.data || [];
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-        align: 'start',
-        slidesToScroll: 1,
-        breakpoints: {
-            '(min-width: 1024px)': {
-                slidesToScroll: 3,
-            },
-        },
-    });
-    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
-    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
-    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
-    const onNextButtonClick = useCallback(async () => {
-        emblaApi?.scrollNext();
-    }, [emblaApi]);
-    const onSelect = useCallback((emblaApi) => {
-        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
-        setNextBtnDisabled(!emblaApi?.canScrollNext());
-    }, []);
-    useEffect(() => {
-        if (!emblaApi)
-            return;
-        onSelect(emblaApi);
-        emblaApi.on('reInit', onSelect).on('select', onSelect);
-    }, [emblaApi, onSelect]);
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promotions' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/promos', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), promos.length <= 0 && (_jsx(Empty, { icon: Gift01Icon, title: "No Promos", message: "No promo is currently available.", className: "mt-8" })), promos.length >= 1 && (_jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/1)] grid-flow-col gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/3)] lg:gap-md'), children: promos.map((promo) => (_jsx(PromosItem, { promo: promo, shouldShowDescription: props.shouldShowDescription }, promo.id))) }) }))] }));
-}

package/dist/components/Promos/PromoGrid.d.ts

@@ -1,2 +0,0 @@
-import type { PromosProps } from './Promos';
-export declare function PromoGrid(props: PromosProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promos/PromoGrid.js

@@ -1,12 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { twMerge } from 'tailwind-merge';
-import { usePromosQuery } from '../../client/hooks/index.js';
-import { Gift01Icon } from '../../icons/index.js';
-import { Empty } from '../Empty.js';
-import { PromosItem } from './PromoItem.js';
-export function PromoGrid(props) {
-    const promosQuery = usePromosQuery({});
-    const promos = promosQuery.data || [];
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Promos' }), _jsx("div", { className: "grow" })] }), promos.length <= 0 && (_jsx(Empty, { icon: Gift01Icon, title: "No Promos", message: "No promo is currently available.", className: "mt-lg" })), promos.length >= 1 && (_jsx("div", { className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid grid-cols-1 gap-sm lg:grid-cols-3 lg:gap-md'), children: promos.map((promo) => (_jsx(PromosItem, { promo: promo, shouldShowDescription: props.shouldShowDescription }, promo.id))) }) }))] }));
-}

package/dist/components/Promos/PromoItem.d.ts

@@ -1,7 +0,0 @@
-import type { Promo } from '@opexa/portal-sdk-core';
-interface PromosItemProps {
-    promo: Promo;
-    shouldShowDescription?: boolean;
-}
-export declare function PromosItem(props: PromosItemProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Promos/PromoItem.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import { useRouter } from 'next/navigation';
-import { twJoin } from 'tailwind-merge';
-import { Button } from '../../ui/index.js';
-export function PromosItem(props) {
-    const { promo } = props;
-    const router = useRouter();
-    return (_jsxs("div", { className: "border-border-primary bg-accent-50 relative flex h-full flex-col rounded-md border", children: [promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: promo.name, width: 1200, height: 500, priority: true, className: "aspect-[1200/500] w-full rounded-t-md object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col p-4", children: [_jsx("p", { className: twJoin('w-full text-xl font-bold', props.shouldShowDescription ? 'text-start' : 'text-center'), children: promo.name }), props.shouldShowDescription && promo.description && (_jsx("p", { className: "text-gray-600 mb-2 line-clamp-2 w-full overflow-hidden text-start text-sm", dangerouslySetInnerHTML: { __html: promo.description } })), _jsx("div", { className: "mt-auto pt-4", children: _jsx(Button, { className: "w-full text-sm font-semibold", onClick: () => router.push(`/promos/${promo.id}`), children: "Get Bonus" }) })] })] }, promo.id));
-}

package/dist/components/Quests/CountdownTimer.d.ts

@@ -1,15 +0,0 @@
-import { type ReactNode } from 'react';
-type TimeLeft = {
-    days: number;
-    hours: number;
-    minutes: number;
-    seconds: number;
-};
-interface CountdownTimerProps {
-    startDateTime?: string;
-    endDateTime?: string;
-    renderAction: (timeLeft: TimeLeft) => ReactNode;
-    onEnd?: () => void;
-}
-export default function CountdownTimer({ startDateTime, endDateTime, renderAction, onEnd, }: CountdownTimerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Quests/CountdownTimer.js

@@ -1,33 +0,0 @@
-'use client';
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { differenceInSeconds, parseISO } from 'date-fns';
-import { useCallback, useEffect, useState } from 'react';
-export default function CountdownTimer({ startDateTime, endDateTime, renderAction, onEnd, }) {
-    const calculateTimeLeft = useCallback(() => {
-        const start = startDateTime ? parseISO(startDateTime) : new Date();
-        const end = endDateTime ? parseISO(endDateTime) : new Date();
-        const totalSeconds = Math.max(differenceInSeconds(end, start), 0);
-        const days = Math.floor(totalSeconds / (60 * 60 * 24));
-        const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
-        const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
-        const seconds = totalSeconds % 60;
-        return { days, hours, minutes, seconds };
-    }, [startDateTime, endDateTime]);
-    const [timeLeft, setTimeLeft] = useState(calculateTimeLeft);
-    useEffect(() => {
-        const interval = setInterval(() => {
-            const newTimeLeft = calculateTimeLeft();
-            setTimeLeft(newTimeLeft);
-            const isZero = newTimeLeft.days === 0 &&
-                newTimeLeft.hours === 0 &&
-                newTimeLeft.minutes === 0 &&
-                newTimeLeft.seconds === 0;
-            if (isZero) {
-                clearInterval(interval);
-                onEnd?.();
-            }
-        }, 1000);
-        return () => clearInterval(interval);
-    }, [calculateTimeLeft, onEnd]);
-    return _jsx(_Fragment, { children: renderAction(timeLeft) });
-}

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts

@@ -1,4 +0,0 @@
-import type { Quest } from '../../../types';
-export declare function DailyCheckInQuest({ quest }: {
-    quest: Quest;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js

@@ -1,78 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { addDays, isEqual, startOfDay } from 'date-fns';
-import { useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useCheckInDailyCheckInQuestMutation } from '../../../client/hooks/useCheckInDailyCheckInQuestMutation.js';
-import { toaster } from '../../../client/utils/toaster.js';
-import { CalendarIcon } from '../../../icons/CalendarIcon.js';
-import { CheckIcon } from '../../../icons/CheckIcon.js';
-import { ClockStopWatchIcon } from '../../../icons/ClockStopWatchIcon.js';
-import { InfoCircleIcon } from '../../../icons/InfoCircleIcon.js';
-import { Badge } from '../../../ui/Badge/index.js';
-import { Button } from '../../../ui/Button/index.js';
-import { getQueryClient } from '../../../utils/getQueryClient.js';
-import { getAvailableQuestsQueryKey } from '../../../utils/queryKeys.js';
-import CountdownTimer from '../CountdownTimer.js';
-import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
-export function DailyCheckInQuest({ quest }) {
-    const queryClient = getQueryClient();
-    const [showRules, setShowRules] = useState(false);
-    const [isExpired, setIsExpired] = useState(false);
-    const { name, description, status, lastCheckInDate, progressPercentage, checkInStreak, thirdDayBonusAmount, sixthDayBonusAmount, seventhDayBonusAmount, endDateTime, id, } = quest;
-    const today = startOfDay(new Date());
-    const hasCheckedInToday = lastCheckInDate
-        ? isEqual(today, startOfDay(new Date(lastCheckInDate)))
-        : false;
-    const checkedInRewards = {
-        3: thirdDayBonusAmount,
-        6: sixthDayBonusAmount,
-        7: seventhDayBonusAmount,
-    };
-    const dailyCheckedInData = Array.from({ length: 7 }, (_, i) => {
-        const day = i + 1;
-        return {
-            day,
-            reward: checkedInRewards[day] ?? 0,
-        };
-    });
-    const { mutate } = useCheckInDailyCheckInQuestMutation({
-        onSuccess() {
-            toaster.success({
-                title: 'Check-in successful 🎉',
-                description: 'You’ve successfully checked in for today! Keep it up to maintain your streak!',
-            });
-            queryClient.invalidateQueries({
-                queryKey: getAvailableQuestsQueryKey(),
-            });
-        },
-        onError(e) {
-            toaster.error({
-                title: 'Check-in successful 🎉',
-                description: e.message ?? 'Check-In Failed',
-            });
-        },
-    });
-    const handleCheckIn = async () => mutate(id);
-    return (_jsxs(_Fragment, { children: [_jsx(DailyCheckInQuestModal, { modalState: {
-                    isOpen: showRules,
-                    setIsOpen: setShowRules,
-                } }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(CountdownTimer, { endDateTime: endDateTime, renderAction: (timeLeft) => (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsxs(Badge.Label, { children: [timeLeft.days, "d:", timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => setIsExpired(true) }), _jsx("div", { role: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => {
-                                    const reward = item.reward ? `+₱${item.reward}` : '-';
-                                    return (_jsx("div", { className: twMerge('flex items-center justify-center', item.day <= (checkInStreak || 0)
-                                            ? 'text-brand-400'
-                                            : 'text-text-secondary-700'), children: _jsx("p", { children: reward }) }, item.day));
-                                }) }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercentage}%` } }) }), _jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => (_jsx("div", { className: "flex items-center justify-center", children: _jsx(CalendarWithDayNumber, { day: item.day, currentCheckedInDays: checkInStreak || 0 }, item.day) }, item.day))) })] }), _jsx(Button, { onClick: handleCheckIn, className: "disabled:bg-bg-primary disabled:text-text-disabled", disabled: isExpired ||
-                            status === 'COMPLETED' ||
-                            status === 'FAILED' ||
-                            hasCheckedInToday, children: hasCheckedInToday && status === 'IN_PROGRESS' ? (_jsx(CountdownTimer, { endDateTime: startOfDay(addDays(new Date(), 1)).toISOString(), renderAction: (timeLeft) => (_jsxs("div", { className: "flex items-center space-x-0.5", children: [_jsx(CheckIcon, {}), _jsxs("p", { children: [timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => {
-                                queryClient.invalidateQueries({
-                                    queryKey: getAvailableQuestsQueryKey(),
-                                });
-                            } })) : ('Check-In') })] })] }));
-}
-function CalendarWithDayNumber({ day, currentCheckedInDays, }) {
-    return (_jsxs("div", { className: twMerge('group relative h-fit w-fit', day <= currentCheckedInDays
-            ? 'text-brand-400'
-            : 'text-text-secondary-700'), children: [_jsx(CalendarIcon, {}), _jsx("div", { className: "absolute inset-0 mt-1 flex items-center justify-center text-2xs lg:mt-[2px]", children: _jsx("p", { className: "text-center", children: day }) })] }));
-}

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    modalState: {
-        isOpen: boolean;
-        setIsOpen: (isOpen: boolean) => void;
-    };
-}
-export declare function DailyCheckInQuestModal(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};