@opexa/portal-components 0.0.55 → 0.0.57

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

@@ -0,0 +1,14 @@
+type Step = 1 | 2 | 3 | (number & {});
+interface UseAccountVerificationReturn {
+    step: Step;
+    setStep: (step: Step) => void;
+    started: boolean;
+    setStarted: (started: boolean) => void;
+    completed: boolean;
+    setCompleted: (completed: boolean) => void;
+    reset: () => void;
+}
+export declare function useAccountVerification(): UseAccountVerificationReturn;
+export declare const AccountVerificationContext: import("react").Context<UseAccountVerificationReturn | null>;
+export declare function useAccountVerificationContext(): UseAccountVerificationReturn;
+export {};

package/dist/components/KYC/AccountVerificationContext.js

@@ -0,0 +1,27 @@
+import { createContext, useContext, useState } from 'react';
+import invariant from 'tiny-invariant';
+export function useAccountVerification() {
+    const [step, setStep] = useState(1);
+    const [started, setStarted] = useState(false);
+    const [completed, setCompleted] = useState(false);
+    function reset() {
+        setStep(1);
+        setStarted(false);
+        setCompleted(false);
+    }
+    return {
+        step,
+        setStep,
+        started,
+        setStarted,
+        completed,
+        setCompleted,
+        reset,
+    };
+}
+export const AccountVerificationContext = createContext(null);
+export function useAccountVerificationContext() {
+    const context = useContext(AccountVerificationContext);
+    invariant(context);
+    return context;
+}

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

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

package/dist/components/KYC/VerificationCapture.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { noop } from 'lodash-es';
+import Image from 'next/image';
+import { ArrowLeftIcon, CheckIcon, XIcon } from '../../icons/index.js';
+import uploadId from '../../images/capture-id-banner.png';
+import selfie from '../../images/capture-selfie-banner.png';
+import { Button, Checkbox, Field, Progress } from '../../ui/index.js';
+import { useAccountVerificationContext } from './AccountVerificationContext.js';
+export function VerificationCapture() {
+    const context = useAccountVerificationContext();
+    if (!context.started)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-4 items-center", children: [_jsxs("button", { className: "text-text-tertiary-600 flex gap-sm text-sm font-semibold", disabled: context.step <= 1, onClick: () => context.setStep(context.step - 1), children: [_jsx(ArrowLeftIcon, { className: "size-5" }), "Back"] }), _jsxs("div", { className: "col-span-2 flex justify-center gap-2", children: [_jsx(Progress.Root, { value: context.step >= 2 ? 100 : context.step >= 1 ? 50 : 0, onValueChange: noop, className: "w-22.5 shrink-0", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { value: context.completed ? 100 : context.step >= 3 ? 50 : 0, onValueChange: noop, className: "w-22.5 shrink-0", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] })] }), context.step === 1 && _jsx(Step1, {}), context.step === 2 && _jsx(Step2, {}), context.step === 3 && _jsx(Step3, {})] }));
+}
+function Step1() {
+    const context = useAccountVerificationContext();
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2xl text-center text-2xl font-semibold", children: "Prepare to upload your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt shadow-xs mt-6 rounded-2xl border", children: [_jsxs("div", { className: "px-4 py-5", 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"] })] })] }), _jsx("div", { className: "border-border-secondary border-t px-xl py-lg", children: _jsx(Button, { size: "sm", onClick: () => context.setStep(2), children: "Continue" }) })] })] }));
+}
+function Step2() {
+    const context = useAccountVerificationContext();
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2xl text-center text-2xl font-semibold", children: "Take a selfie holding your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt shadow-xs mt-6 rounded-2xl border", children: [_jsxs("div", { className: "px-4 py-5", 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"] })] })] }), _jsx("div", { className: "border-border-secondary border-t px-xl py-lg", children: _jsx(Button, { size: "sm", onClick: () => context.setStep(3), children: "Continue" }) })] })] }));
+}
+function Step3() {
+    const context = useAccountVerificationContext();
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2xl text-center text-2xl font-semibold", children: "Enter your basic and work-related information" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt shadow-xs mt-6 rounded-2xl border", children: [_jsxs("div", { className: "px-4 py-5", children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Permanent address" }), _jsx(Field.Input, {})] }), _jsxs(Field.Root, { className: "mt-6", children: [_jsx(Field.Label, { children: "Current address" }), _jsx(Field.Input, {})] }), _jsxs(Checkbox.Root, { className: "mt-sm", 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-6", children: [_jsx(Field.Label, { children: "Source of income" }), _jsx(Field.Input, {})] }), _jsxs(Field.Root, { className: "mt-6", children: [_jsx(Field.Label, { children: "Nature of work" }), _jsx(Field.Input, {})] }), _jsxs(Field.Root, { className: "mt-6", children: [_jsx(Field.Label, { children: "Place of birth" }), _jsx(Field.Input, {})] }), _jsxs(Field.Root, { className: "mt-6", children: [_jsx(Field.Label, { children: "Nationality" }), _jsx(Field.Input, {})] })] }), _jsx("div", { className: "border-border-secondary border-t px-xl py-lg", children: _jsx(Button, { size: "sm", onClick: () => {
+                                context.setCompleted(true);
+                            }, children: "Continue" }) })] })] }));
+}

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

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

package/dist/components/KYC/VerificationComplete.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import { CheckCircleIcon } from '../../icons/index.js';
+import { AlertDialog, Button } from '../../ui/index.js';
+import { useAccountVerificationContext } from './AccountVerificationContext.js';
+export function VerificationComplete() {
+    const context = useAccountVerificationContext();
+    return (_jsx(AlertDialog.Root, { open: context.completed, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "bg-bg-overlay/75 backdrop-blur-sm" }), _jsx(AlertDialog.Positioner, { children: _jsxs(AlertDialog.Content, { className: "mx-auto w-[21.438rem] p-xl", 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(AlertDialog.Title, { className: "mt-3 text-center", children: "Submission Successful" }), _jsx(AlertDialog.Description, { 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(Button, { className: "mt-3xl", onClick: () => context.reset(), children: "Ok" })] }) })] }) }));
+}

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

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

package/dist/components/KYC/VerificationDetails.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ark } from '@ark-ui/react';
+import { twMerge } from 'tailwind-merge';
+import { useMemberVerificationQuery, useProfileCompletionQuery, } from '../../client/hooks/index.js';
+import { AlertCircleIcon, CheckVerified02Icon, CreditCard02Icon, FaceIdIcon, FileCheck02Icon, FileSearch02Icon, FileX02Icon, Globe05Icon, } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+import { useAccountVerificationContext } from './AccountVerificationContext.js';
+export function VerificationDetails() {
+    const context = useAccountVerificationContext();
+    const profileCompletionQuery = useProfileCompletionQuery();
+    const profileCompletion = profileCompletionQuery.data;
+    const verificationQuery = useMemberVerificationQuery();
+    const verification = verificationQuery.data;
+    const empty = verification == null;
+    const pending = verification?.status === 'PENDING';
+    const success = verification?.status === 'VERIFIED' || verification?.status === 'APPROVED';
+    const failed = verification?.status === 'REJECTED' ||
+        verification?.status === 'UNVERIFIED';
+    if (context.started)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Verify your identity" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "Complete personal verification to unlock all features and enhance account security." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountVerification
+                            ? 'text-text-success-primary'
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountVerification ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("div", { className: "shadow-xs border-border-secondary bg-bg-primary-alt mt-5 rounded-xl border", children: [_jsx("div", { className: "px-4 py-5", children: _jsxs("ul", { className: "space-y-lg", children: [_jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FileCheck02Icon, {}), "Basic Information"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(Globe05Icon, {}), "Proof of address"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(CreditCard02Icon, {}), "Government ID"] }), _jsxs("li", { className: "text-text-secondary-700 icon:size-6 icon:text-text-nav-item-button-icon flex items-center gap-lg", children: [_jsx(FaceIdIcon, {}), "Facial Verification"] })] }) }), _jsx("div", { className: "border-border-secondary flex justify-end border-t px-4 py-3 lg:py-xl", children: _jsx(Button, { size: "sm", onClick: () => {
+                                context.setStarted(true);
+                            }, className: "w-full lg:w-fit", children: "Verify Now" }) })] }), success && _jsx(VerificationSuccess, {}), pending && _jsx(VerificationInProgress, {}), failed && _jsx(VerificationFailed, {}), empty && _jsx(VerificationNotSubmitted, {})] }));
+}
+function VerificationNotSubmitted() {
+    return (_jsxs("div", { className: "shadow-xs border-border-primary bg-bg-primary-alt mt-6 flex flex-col gap-2 rounded-xl border p-xl lg:flex-row", children: [_jsx("div", { className: "border-text-warning-primary/10 flex size-[2.1875rem] items-center justify-center rounded-full border-2", children: _jsx("div", { className: "border-text-warning-primary/30 flex size-[1.666625rem] items-center justify-center rounded-full border-2", children: _jsx(AlertCircleIcon, { className: "text-text-warning-primary size-5" }) }) }), _jsx("p", { className: "text-text-tertiary-600 max-w-[800px] text-sm", children: "To serve you better and unlock all features, please provide valid identification documents. This helps protect your account and makes recovery easier if ever needed." })] }));
+}
+function VerificationInProgress() {
+    return (_jsxs("div", { className: "shadow-xs border-border-primary bg-bg-primary-alt mt-6 flex flex-col gap-2 rounded-xl border p-xl lg:flex-row", children: [_jsx("div", { className: "border-text-warning-primary/10 flex size-[2.1875rem] items-center justify-center rounded-full border-2", children: _jsx("div", { className: "border-text-warning-primary/30 flex size-[1.666625rem] items-center justify-center rounded-full border-2", children: _jsx(FileSearch02Icon, { className: "text-text-warning-primary size-5" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Under review" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm", children: "To serve you better and unlock all features, please provide valid identification documents. This helps protect your account and makes recovery easier if ever needed." })] })] }));
+}
+function VerificationSuccess() {
+    return (_jsxs("div", { className: "shadow-xs border-border-primary bg-bg-primary-alt mt-6 flex flex-col gap-2 rounded-xl border p-xl lg:flex-row", children: [_jsx("div", { className: "border-text-success-primary/10 flex size-[2.1875rem] items-center justify-center rounded-full border-2", children: _jsx("div", { className: "border-text-success-primary/30 flex size-[1.666625rem] items-center justify-center rounded-full border-2", children: _jsx(FileCheck02Icon, { className: "text-text-success-primary size-5" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Verification successful" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm", children: "Your account has been successfully verified. You now have full access to all features and improved account security." })] })] }));
+}
+function VerificationFailed() {
+    return (_jsxs("div", { className: "shadow-xs border-border-primary bg-bg-primary-alt mt-6 flex flex-col gap-2 rounded-xl border p-xl lg:flex-row", children: [_jsx("div", { className: "border-text-error-primary/10 flex size-[2.1875rem] items-center justify-center rounded-full border-2", children: _jsx("div", { className: "border-text-error-primary/30 flex size-[1.666625rem] items-center justify-center rounded-full border-2", children: _jsx(FileX02Icon, { className: "text-text-error-primary size-5" }) }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Verification failed" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm", children: "There was an issue with the verification process. Please try again or contact support for assistance." })] })] }));
+}

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

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

package/dist/components/Promo/Promo.client.js

@@ -0,0 +1,9 @@
+'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 Promo__client(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/Promo/Promo.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PromoContent } from './PromoContent.js';
+import { Promo__client } from './Promo.client.js';
 export async function Promo(props) {
     /**
      * await prefetchPromoQuery(props.id);
      */
-    return _jsx(PromoContent, { id: props.id });
+    return _jsx(Promo__client, { ...props });
 }

package/dist/components/Promos/PromoCarousel.js

@@ -10,8 +10,8 @@ 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 promosQuery = usePromosQuery();
+    const promos = promosQuery.data ?? [];
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
         slidesToScroll: 1,
@@ -37,5 +37,5 @@ export function PromoCarousel(props) {
         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))) }) }))] }));
+    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-[100%] grid-flow-col gap-1.5 lg:auto-cols-[calc((100%-(1.25rem*2))/3)] lg:gap-2xl'), children: promos.map((promo) => (_jsx(PromosItem, { promo: promo, redirectUrl: props.viewAllUrl }, promo.id))) }) }))] }));
 }

package/dist/components/Promos/PromoGrid.js

@@ -1,12 +1,11 @@
 '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))) }) }))] }));
+    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: "grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: promos.map((promo) => (_jsx(PromosItem, { promo: promo, redirectUrl: props.viewAllUrl }, promo.id))) }) }))] }));
 }

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

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

package/dist/components/Promos/PromoItem.js

@@ -1,10 +1,11 @@
 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 Link from 'next/link';
 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));
+    return (_jsxs(Link, { href: `${props.redirectUrl ?? '/promos'}/${promo.id}`, className: "border-border-secondary bg-accent-50 bg-bg-primary-alt relative flex h-full flex-col overflow-hidden rounded-2xl border", children: [promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: promo.name, width: 1200, height: 500, priority: true, className: "block aspect-[365/180] w-full object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pb-3xl pt-2xl", children: [_jsx("div", { className: "w-full grow text-center text-xl font-semibold", children: promo.name }), _jsx("div", { className: "mt-auto pt-4", children: _jsx(Button, { size: "sm", asChild: true, children: _jsx("div", { role: "button", onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }, children: "Get bonus" }) }) })] })] }));
 }

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

@@ -3,11 +3,9 @@ export interface PromosProps {
     heading?: string;
     /** @default "/promos" */
     viewAllUrl?: string;
-    /** @default true */
-    shouldShowDescription?: boolean;
     /** @default 1 */
     className?: string;
     /** @default 'carousel' */
     layout?: 'carousel' | 'grid';
 }
-export declare function Promos(props: PromosProps): import("react/jsx-runtime").JSX.Element;
+export declare function Promos(props: PromosProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Promos/Promos.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchPromosQuery } from '../../server/utils/index.js';
 import { PromoCarousel } from './PromoCarousel.js';
 import { PromoGrid } from './PromoGrid.js';
-export function Promos(props) {
+export async function Promos(props) {
+    await prefetchPromosQuery();
     if (props.layout === 'grid') {
         return _jsx(PromoGrid, { ...props });
     }

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

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

package/dist/components/Quests/Quests.client.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useAvailableQuestsQuery } from '../../client/hooks/index.js';
+import { SpinnerIcon } from '../../icons/index.js';
+import closeChest from '../../images/close-chest.png';
+import { DailyCheckInQuest } from './DailyCheckInQuest/DailyCheckInQuest.js';
+import { OnboardingQuest } from './OnboardingQuest/OnboardingQuest.js';
+import { WageringQuest } from './WageringQuest/WageringQuest.js';
+const QUEST_COMPONENT_MAP = {
+    DAILY_CHECKIN: DailyCheckInQuest,
+    ONBOARDING: OnboardingQuest,
+    WAGERING: WageringQuest,
+};
+export function Quests__client(props) {
+    const query = useAvailableQuestsQuery();
+    if (query.isLoading) {
+        return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
+    }
+    if (!query.data?.length) {
+        return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { src: closeChest, width: 100, height: 100, alt: "No Quests Available", className: "mix-blend-luminosity", quality: 100 }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: "No available quests. Please check back later!" })] })] }));
+    }
+    return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "grid grid-cols-1 gap-3xl lg:grid-cols-3", children: query.data.map((quest, index) => {
+                    const QuestComponent = QUEST_COMPONENT_MAP[quest.type];
+                    return _jsx(QuestComponent, { quest: quest }, index);
+                }) })] }));
+}

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

@@ -3,4 +3,4 @@ export interface QuestsProps {
     heading?: string;
     className?: string;
 }
-export declare function Quests(props: QuestsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Quests(props: QuestsProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Quests/Quests.js

@@ -1,27 +1,7 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import { useAvailableQuestsQuery } from '../../client/hooks/index.js';
-import { SpinnerIcon } from '../../icons/index.js';
-import closeChest from '../../images/close-chest.png';
-import { DailyCheckInQuest } from './DailyCheckInQuest/DailyCheckInQuest.js';
-import { OnboardingQuest } from './OnboardingQuest/OnboardingQuest.js';
-import { WageringQuest } from './WageringQuest/WageringQuest.js';
-const QUEST_COMPONENT_MAP = {
-    DAILY_CHECKIN: DailyCheckInQuest,
-    ONBOARDING: OnboardingQuest,
-    WAGERING: WageringQuest,
-};
-export function Quests(props) {
-    const query = useAvailableQuestsQuery();
-    if (query.isLoading) {
-        return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
-    }
-    if (!query.data?.length) {
-        return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { src: closeChest, width: 100, height: 100, alt: "No Quests Available", className: "mix-blend-luminosity", quality: 100 }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: "No available quests. Please check back later!" })] })] }));
-    }
-    return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "grid grid-cols-1 gap-3xl lg:grid-cols-3", children: query.data.map((quest, index) => {
-                    const QuestComponent = QUEST_COMPONENT_MAP[quest.type];
-                    return _jsx(QuestComponent, { quest: quest }, index);
-                }) })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchAvailableQuestsQuery } from '../../server/utils/index.js';
+import { Quests__client } from './Quests.client.js';
+export async function Quests(props) {
+    await prefetchAvailableQuestsQuery();
+    return _jsx(Quests__client, { ...props });
 }

package/dist/components/Tournaments/Tournaments.client.d.ts

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

package/dist/components/Tournaments/Tournaments.client.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { useTournamentsQuery } from '../../client/hooks/index.js';
+import closeChest from '../../images/close-chest.png';
+import { TournamentItemDesktop } from './TournamentItemDesktop.js';
+import { TournamentItemMobile } from './TournamentItemMobile.js';
+export function Tournaments__client(props) {
+    const tournamentsQuery = useTournamentsQuery({
+        first: 100,
+        filter: {
+            status: {
+                equal: 'ACTIVE',
+            },
+        },
+    });
+    const tournaments = tournamentsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    return (_jsxs("div", { className: props.className, children: [_jsx("div", { className: "mb-3 text-lg font-semibold lg:mb-4.5", children: props.heading ?? 'Tournaments' }), tournaments.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: tournaments.map((tournament, i) => (_jsx(TournamentItemDesktop, { tournament: tournament, gameProviders: props.gameProviders }, i))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: tournaments.map((tournament, i) => (_jsx(TournamentItemMobile, { tournament: tournament, gameProviders: props.gameProviders }, i))) })] })) : (_jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", quality: 100, className: "h-29.5 w-29.5 lg:h-25 lg:w-25 size-full mix-blend-luminosity" }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Tournaments' }), _jsxs("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'tournaments', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }));
+}

package/dist/components/Tournaments/Tournaments.d.ts

@@ -7,4 +7,4 @@ export interface TournamentsProps {
     className?: string;
     gameProviders: GameProviderData[];
 }
-export declare function Tournaments(props: TournamentsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tournaments(props: TournamentsProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Tournaments/Tournaments.js

@@ -1,12 +1,8 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import { useTournamentsQuery } from '../../client/hooks/index.js';
-import closeChest from '../../images/close-chest.png';
-import { TournamentItemDesktop } from './TournamentItemDesktop.js';
-import { TournamentItemMobile } from './TournamentItemMobile.js';
-export function Tournaments(props) {
-    const tournamentsQuery = useTournamentsQuery({
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchTournamentsQuery } from '../../server/utils/index.js';
+import { Tournaments__client } from './Tournaments.client.js';
+export async function Tournaments(props) {
+    await prefetchTournamentsQuery({
         first: 100,
         filter: {
             status: {
@@ -14,6 +10,5 @@ export function Tournaments(props) {
             },
         },
     });
-    const tournaments = tournamentsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
-    return (_jsxs("div", { className: props.className, children: [_jsx("div", { className: "mb-3 text-lg font-semibold lg:mb-4.5", children: props.heading ?? 'Tournaments' }), tournaments.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden flex-col gap-6 lg:flex", children: tournaments.map((tournament, i) => (_jsx(TournamentItemDesktop, { tournament: tournament, gameProviders: props.gameProviders }, i))) }), _jsx("div", { className: "flex flex-col gap-6 lg:hidden", children: tournaments.map((tournament, i) => (_jsx(TournamentItemMobile, { tournament: tournament, gameProviders: props.gameProviders }, i))) })] })) : (_jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { width: 100, height: 100, src: closeChest, alt: "closeChest", quality: 100, className: "h-29.5 w-29.5 lg:h-25 lg:w-25 size-full mix-blend-luminosity" }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Tournaments' }), _jsxs("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: ["No ", props.heading?.toLocaleLowerCase() ?? 'tournaments', " are running at the moment. ", _jsx("br", {}), "Please check back later!"] })] }))] }));
+    return _jsx(Tournaments__client, { ...props });
 }

package/dist/server/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './prefetchAccountQuery';
 export * from './prefetchAvailablePromosQuery';
+export * from './prefetchAvailableQuestsQuery';
 export * from './prefetchBetRecordsQuery';
 export * from './prefetchBonusesQuery';
 export * from './prefetchCashbacksQuery';

package/dist/server/utils/index.js

@@ -1,5 +1,6 @@
 export * from './prefetchAccountQuery.js';
 export * from './prefetchAvailablePromosQuery.js';
+export * from './prefetchAvailableQuestsQuery.js';
 export * from './prefetchBetRecordsQuery.js';
 export * from './prefetchBonusesQuery.js';
 export * from './prefetchCashbacksQuery.js';

package/dist/server/utils/prefetchAvailableQuestsQuery.d.ts

@@ -0,0 +1 @@
+export declare const prefetchAvailableQuestsQuery: () => Promise<void>;

package/dist/server/utils/prefetchAvailableQuestsQuery.js

@@ -0,0 +1,22 @@
+import { getAvailableQuests } from '@opexa/portal-sdk-core';
+import { ENVIRONMENT, PLATFORM_CODE } from '../../constants/index.js';
+import { getAvailableQuestsQueryKey, getQueryClient } from '../../utils/index.js';
+import { getSession } from '../services/getSession.js';
+export const prefetchAvailableQuestsQuery = async () => {
+    const session = await getSession();
+    if (session.status === 'unauthenticated')
+        return;
+    await getQueryClient().prefetchQuery({
+        queryKey: getAvailableQuestsQueryKey(),
+        queryFn: async ({ signal }) => {
+            return await getAvailableQuests({
+                signal,
+                environment: ENVIRONMENT,
+                headers: {
+                    'Platform-Code': PLATFORM_CODE,
+                    Authorization: `Bearer ${session.token}`,
+                },
+            });
+        },
+    });
+};