@opexa/portal-components 0.0.27 → 0.0.28

package/dist/components/Jackpots/useJackpotItemData.jsx

@@ -0,0 +1,91 @@
+import { useCallback, useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useLocaleInfo } from '../../client/hooks';
+import { useJackpotPayoutsQuery } from '../../client/hooks/useJackpotPayoutsQuery';
+import { ChevronLeftIcon, ChevronRightIcon } from '../../icons';
+import styles from '../JackpotCounter/JackpotCounterItem.module.css';
+export function useJackpotItemData({ jackpot, gameProviders, }) {
+    const jackpotPayoutsQuery = useJackpotPayoutsQuery({
+        first: 30,
+        filter: {
+            jackpot: {
+                equal: jackpot.id,
+            },
+        },
+        sort: {
+            cursor: 'AMOUNT',
+            order: 'DESC',
+        },
+    });
+    const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
+    const topJackpotPayout = jackpotPayouts[0] ?? [];
+    const enabledJackpotGameProviders = useMemo(() => {
+        const gameProvider = Object.entries(jackpot?.jackpotTurnoverContributionPercentagePerGameProvider ?? {})
+            .filter(([_, value]) => Number(value) > 0)
+            .map(([key]) => key);
+        return gameProvider;
+    }, [jackpot]);
+    console.log('enabledJackpotGameProviders', enabledJackpotGameProviders);
+    const filteredGameProviders = gameProviders.filter((provider) => enabledJackpotGameProviders.includes(provider.id));
+    const localeInfo = useLocaleInfo();
+    const isPayingOut = jackpot.drawing;
+    const jackpotAmount = isPayingOut
+        ? jackpot.maximumJackpotPoolLimit
+        : jackpot.pool;
+    const Arrow = useCallback(({ index }) => {
+        const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
+        return (<Icon className={twMerge('scale-400 lg:scale-250 text-brand-300 min-w-2.5 lg:min-w-4', isPayingOut
+                ? styles['animate-wave-color-error']
+                : styles['animate-wave-color-success'])} style={{
+                animationDelay: isPayingOut
+                    ? `${(40 - index - 1) * 0.1}s`
+                    : `${index * 0.1}s`,
+            }}/>);
+    }, [isPayingOut]);
+    const arrowImages = useMemo(() => Array.from({ length: 40 }, (_, i) => (<Arrow key={i} isFirst={i === 0} index={i}/>)), [Arrow]);
+    const calculatePercentage = (part, total) => {
+        if (total === 0)
+            return 0;
+        return (part / total) * 100;
+    };
+    const getAccumulatingJackpotDescription = (part, total) => {
+        const percentage = total === 0 ? 0 : (part / total) * 100;
+        return percentage <= 90
+            ? 'The jackpot is heating up! Keep playing to stay in the action and watch it grow!'
+            : '🔥 It’s about to pop! Stay in the game for your shot at the prize!';
+    };
+    const starTierStyles = [
+        {
+            starColor: 'text-yellow-400',
+            numberColor: 'text-bg-primary',
+        },
+        {
+            starColor: 'text-utility-gray-700',
+            numberColor: 'text-bg-primary',
+        },
+        {
+            starColor: 'text-yellow-700',
+            numberColor: 'text-bg-primary',
+        },
+        {
+            starColor: 'text-bg-quaternary',
+            numberColor: 'text-text-primary-900',
+        },
+        {
+            starColor: 'text-bg-quaternary',
+            numberColor: 'text-text-primary-900',
+        },
+    ];
+    return {
+        jackpotPayouts,
+        topJackpotPayout,
+        filteredGameProviders,
+        localeInfo,
+        isPayingOut,
+        jackpotAmount,
+        arrowImages,
+        calculatePercentage,
+        getAccumulatingJackpotDescription,
+        starTierStyles,
+    };
+}

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

@@ -1,4 +1,4 @@
-import { ImageProps } from 'next/image';
+import type { ImageProps } from 'next/image';
 export interface KYCProps {
     logo: ImageProps['src'];
 }

package/dist/components/KYC/KYC.jsx

@@ -0,0 +1,39 @@
+'use client';
+import { Portal } from '@ark-ui/react';
+import Image from 'next/image';
+import { Dialog } from '../../ui';
+import { KYCContext } from './KYCContext';
+import { Step1 } from './Step1';
+import { Step2 } from './Step2';
+import { Step3 } from './Step3';
+import { StepIndicator } from './StepIndicator';
+import { UploadDocument } from './UploadDocument';
+import { UploadSelfie } from './UploadSelfie';
+import { useKYC } from './useKYC';
+export function KYC(props) {
+    const context = useKYC();
+    return (<KYCContext value={context}>
+      <Dialog.Root open={context.open} onOpenChange={(details) => {
+            context.setOpen(details.open);
+        }} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
+        <Portal>
+          <Dialog.Backdrop />
+          <Dialog.Positioner>
+            <Dialog.Content className="mx-auto w-fit">
+              {context.uploadingSelfie && <UploadSelfie />}
+              {context.uploadingDocument && <UploadDocument />}
+              {!context.uploadingSelfie && !context.uploadingDocument && (<div className="bg-bg-primary-alt flex h-full w-full flex-col p-3xl lg:h-[800px] lg:w-[400px] lg:rounded-xl">
+                  <Image src={props.logo} alt="" width={200} height={100} className="mx-auto h-auto w-[120px]" draggable={false}/>
+
+                  <StepIndicator />
+
+                  {context.step === 1 && <Step1 />}
+                  {context.step === 2 && <Step2 />}
+                  {context.step === 3 && <Step3 />}
+                </div>)}
+            </Dialog.Content>
+          </Dialog.Positioner>
+        </Portal>
+      </Dialog.Root>
+    </KYCContext>);
+}

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

@@ -1,3 +1,3 @@
-import { UseKYCReturn } from './useKYC';
-export declare const KYCContext: import('react').Context<UseKYCReturn | null>;
+import type { UseKYCReturn } from './useKYC';
+export declare const KYCContext: import("react").Context<UseKYCReturn | null>;
 export declare function useKYCContext(): UseKYCReturn;

package/dist/components/KYC/KYCContext.jsx

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+import invariant from 'tiny-invariant';
+export const KYCContext = createContext(null);
+export function useKYCContext() {
+    const context = useContext(KYCContext);
+    invariant(context);
+    return context;
+}

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

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 export interface KYCTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }

package/dist/components/KYC/KYCTrigger.jsx

@@ -0,0 +1,13 @@
+'use client';
+import { ark } from '@ark-ui/react';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks';
+export function KYCTrigger(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+    })));
+    return (<ark.button type="button" {...props} onClick={(e) => {
+            globalStore.kyc.setOpen(true);
+            return props.onClick?.(e);
+        }} data-state={globalStore.kyc.open ? 'open' : 'closed'}/>);
+}

package/dist/components/KYC/Step1.jsx

@@ -0,0 +1,37 @@
+import { Button, Field } from '../../ui';
+import { useKYCContext } from './KYCContext';
+export function Step1() {
+    const context = useKYCContext();
+    return (<form className="mt-3xl flex grow flex-col" onSubmit={(e) => {
+            e.preventDefault();
+            context.setStep(2);
+        }}>
+      <h2 className="text-text-primary-900 text-center text-lg">
+        Basic Information
+      </h2>
+      <p className="text-text-tertiary-600 text-center text-sm">
+        Enter your basic details for identification and communication.
+      </p>
+
+      <div className="mt-9 grow">
+        <Field.Root>
+          <Field.Label>Real name</Field.Label>
+          <Field.Input />
+        </Field.Root>
+        <Field.Root className="mt-xl">
+          <Field.Label>Date of birth</Field.Label>
+          <Field.Input type="date"/>
+        </Field.Root>
+        <Button type="submit" className="mt-xl">
+          Continue
+        </Button>
+      </div>
+
+      <div className="text-text-tertiary-600 mt-3xl w-full text-center text-sm">
+        Use another account.{' '}
+        <button type="button" className="text-button-tertiary-fg font-semibold">
+          Log out
+        </button>
+      </div>
+    </form>);
+}

package/dist/components/KYC/Step2.jsx

@@ -0,0 +1,86 @@
+import { HelpCircleIcon, UploadCloud02Icon } from '../../icons';
+import { Button, Field } from '../../ui';
+import { useKYCContext } from './KYCContext';
+export function Step2() {
+    const context = useKYCContext();
+    return (<form className="mt-3xl flex grow flex-col items-start justify-start overflow-y-auto" onSubmit={(e) => {
+            e.preventDefault();
+            context.setStep(3);
+        }}>
+      <h2 className="text-text-primary-900 w-full text-center text-lg">
+        Verify Your Identity
+      </h2>
+      <p className="text-text-tertiary-600 w-full text-center text-sm">
+        Verify your details to confirm your identity and secure your access.
+      </p>
+
+      <div className="border-border-secondary bg-bg-brand-secondary-alt text-text-tertiary-600 mt-xl w-full rounded-xl border p-3 text-2xs leading-tight">
+        <h4 className="font-semibold">Instructions</h4>
+        <ol className="mt-2 list-inside list-decimal">
+          <li>Upload a full photo of your ID.</li>
+          <li>
+            Please ensure that all details in the uploaded image are legible.
+          </li>
+          <li>
+            Please ensure that the ID uploaded is within the validity period.
+          </li>
+        </ol>
+      </div>
+
+      <div className="scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full mt-xl w-full grow overflow-y-auto">
+        <Field.Root>
+          <Field.Label className="flex items-center gap-1.5">
+            Front of your ID{' '}
+            <HelpCircleIcon className="text-text-quinary size-4"/>
+          </Field.Label>
+          <div className="border-border-secondary bg-bg-primary rounded-xl border px-3xl py-xl">
+            <div className="border-border-secondary shadow-xs text-text-secondary-700 mx-auto flex size-8 items-center justify-center rounded-sm border">
+              <UploadCloud02Icon className="size-4"/>
+            </div>
+            <p className="text-text-tertiary-600 mt-lg text-center text-xs">
+              <span className="text-button-tertiary-fg font-semibold">
+                Click to upload
+              </span>{' '}
+              or drag and drop
+            </p>
+            <p className="text-text-tertiary-600 mt-xs text-center text-xs">
+              PNG, JPG or JPEG (max. 10mb)
+            </p>
+            <p className="text-text-tertiary-600 mt-xs text-center text-xs">
+              or
+            </p>
+            <Button size="xs" variant="outline" className="mx-auto mt-xs w-fit" onClick={() => {
+            context.setUploadingDocument(true);
+        }}>
+              Take a photo
+            </Button>
+          </div>
+        </Field.Root>
+
+        <Field.Root className="mt-3">
+          <Field.Label className="flex items-center gap-1.5">
+            Selfie holding your ID{' '}
+            <HelpCircleIcon className="text-text-quinary size-4"/>
+          </Field.Label>
+          <div className="border-border-secondary bg-bg-primary flex h-[180px] items-center justify-center rounded-xl border px-3xl py-xl">
+            <Button size="xs" variant="outline" className="w-fit" onClick={() => {
+            context.setUploadingDocument(true);
+        }}>
+              Take a photo
+            </Button>
+          </div>
+        </Field.Root>
+      </div>
+
+      <div className="mt-xl w-full">
+        <Button type="submit">Continue</Button>
+
+        <div className="text-text-tertiary-600 mt-3xl w-full text-center text-sm">
+          Use another account.{' '}
+          <button type="button" className="text-button-tertiary-fg font-semibold">
+            Log out
+          </button>
+        </div>
+      </div>
+    </form>);
+}

package/dist/components/KYC/Step3.jsx

@@ -0,0 +1,68 @@
+import { CheckIcon } from '../../icons';
+import { Button, Checkbox, Field } from '../../ui';
+import { useKYCContext } from './KYCContext';
+export function Step3() {
+    const context = useKYCContext();
+    return (<form className="mt-3xl flex grow flex-col items-start justify-start overflow-y-auto" onSubmit={(e) => {
+            e.preventDefault();
+            context.setOpen(false);
+        }}>
+      <h2 className="text-text-primary-900 w-full text-center text-lg">
+        Personal Information
+      </h2>
+      <p className="text-text-tertiary-600 w-full text-center text-sm">
+        Provide your basic details and work info.
+      </p>
+
+      <div className="scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full mt-4 w-full grow overflow-y-auto">
+        <Field.Root>
+          <Field.Label>Permanent address</Field.Label>
+          <Field.Input />
+        </Field.Root>
+
+        <Checkbox.Root className="mt-lg">
+          <Checkbox.Control>
+            <Checkbox.Indicator asChild>
+              <CheckIcon />
+            </Checkbox.Indicator>
+          </Checkbox.Control>
+          <Checkbox.Label>
+            Use permanent address as current address
+          </Checkbox.Label>
+          <Checkbox.HiddenInput />
+        </Checkbox.Root>
+
+        <Field.Root className="mt-xl">
+          <Field.Label>Current address</Field.Label>
+          <Field.Input />
+        </Field.Root>
+        <Field.Root className="mt-xl">
+          <Field.Label>Source of income</Field.Label>
+          <Field.Input />
+        </Field.Root>
+        <Field.Root className="mt-xl">
+          <Field.Label>Nature of work</Field.Label>
+          <Field.Input />
+        </Field.Root>
+        <Field.Root className="mt-xl">
+          <Field.Label>Place of birth</Field.Label>
+          <Field.Input />
+        </Field.Root>
+        <Field.Root className="mt-xl">
+          <Field.Label>Nationality</Field.Label>
+          <Field.Input />
+        </Field.Root>
+      </div>
+
+      <div className="mt-xl w-full">
+        <Button type="submit">Submit and Play</Button>
+
+        <div className="text-text-tertiary-600 mt-3xl w-full text-center text-sm">
+          Use another account.{' '}
+          <button type="button" className="text-button-tertiary-fg font-semibold">
+            Log out
+          </button>
+        </div>
+      </div>
+    </form>);
+}

package/dist/components/KYC/StepIndicator.jsx

@@ -0,0 +1,22 @@
+import { dataAttr } from '../../utils';
+import { useKYCContext } from './KYCContext';
+export function StepIndicator() {
+    const context = useKYCContext();
+    return (<div className="mx-auto mt-3xl flex w-fit items-center">
+      <Circle active={context.step >= 1}/>
+      <Line active={context.step >= 2}/>
+      <Circle active={context.step >= 2}/>
+      <Line active={context.step >= 3}/>
+      <Circle active={context.step >= 3}/>
+    </div>);
+}
+function Circle({ active }) {
+    return (<div className="ui-active:bg-bg-brand-solid ui-active:shadow-brand border-border-disabled-subtle bg-bg-disabled-subtle group flex size-6 items-center justify-center rounded-full transition-colors delay-300 duration-300" data-active={dataAttr(active)}>
+      <div className="bg-text-disabled-subtle size-2.5 rounded-full transition-all delay-300 duration-300 ui-group-active:bg-white"/>
+    </div>);
+}
+function Line({ active }) {
+    return (<div className="bg-bg-quaternary group relative h-0.5 w-20" data-active={dataAttr(active)}>
+      <div className="bg-text-brand-primary-600 absolute left-0 top-0 h-full w-0 transition-all duration-300 ui-group-active:w-full"/>
+    </div>);
+}

package/dist/components/KYC/UploadDocument.jsx

@@ -0,0 +1,30 @@
+import { Camera01Icon, CheckCircleIcon, XIcon } from '../../icons';
+import { Button } from '../../ui';
+import { useKYCContext } from './KYCContext';
+export function UploadDocument() {
+    const context = useKYCContext();
+    return (<div className="bg-bg-primary-alt relative w-[747px] rounded-xl pb-12 pt-4xl">
+      <button type="button" className="absolute right-4 top-4" onClick={() => context.setUploadingDocument(false)}>
+        <XIcon className="text-text-quinary size-5"/>
+      </button>
+      <h2 className="text-center text-xl font-semibold">
+        Take a Picture of Your Front ID
+      </h2>
+      <p className="text-text-tertiary-600 mt-md text-center">
+        Make sure your ID is clearly visible, well-lit, and not blurry.
+        <br /> Avoid glare or reflections, and ensure all corners are within the
+        frame.
+      </p>
+      <div className="mx-auto mt-10 h-[333px] w-[643px] rounded-xl bg-white/10"></div>
+      <div className="mx-auto mt-10 flex w-fit gap-3">
+        <Button variant="outline" fullWidth={false}>
+          <Camera01Icon />
+          Retake Photo
+        </Button>
+        <Button fullWidth={false}>
+          <CheckCircleIcon />
+          Use Photo
+        </Button>
+      </div>
+    </div>);
+}

package/dist/components/KYC/UploadSelfie.jsx

@@ -0,0 +1,28 @@
+import { Camera01Icon, CheckCircleIcon, XIcon } from '../../icons';
+import { Button } from '../../ui';
+import { useKYCContext } from './KYCContext';
+export function UploadSelfie() {
+    const context = useKYCContext();
+    return (<div className="bg-bg-primary-alt relative w-[747px] rounded-xl pb-12 pt-4xl">
+      <button type="button" className="absolute right-4 top-4" onClick={() => context.setUploadingSelfie(false)}>
+        <XIcon className="text-text-quinary size-5"/>
+      </button>
+      <h2 className="text-center text-xl font-semibold">
+        Take a Selfie Holding Your ID
+      </h2>
+      <p className="text-text-tertiary-600 mt-md text-center">
+        Make sure your face and ID are clearly visible, with no glare or blur.
+      </p>
+      <div className="mx-auto mt-10 h-[333px] w-[643px] rounded-xl bg-white/10"></div>
+      <div className="mx-auto mt-10 flex w-fit gap-3">
+        <Button variant="outline" fullWidth={false}>
+          <Camera01Icon />
+          Retake Photo
+        </Button>
+        <Button fullWidth={false}>
+          <CheckCircleIcon />
+          Use Photo
+        </Button>
+      </div>
+    </div>);
+}

package/dist/components/KYC/index.js

@@ -0,0 +1,2 @@
+export * from './KYC';
+export * from './KYCTrigger';

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

@@ -7,8 +7,8 @@ export declare function useKYC(): {
     step: Step;
     setStep: (value: Step) => void;
     uploadingSelfie: boolean;
-    setUploadingSelfie: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    setUploadingSelfie: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     uploadingDocument: boolean;
-    setUploadingDocument: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    setUploadingDocument: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
 export {};

package/dist/components/KYC/useKYC.js

@@ -1 +1,32 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),p=require("zustand/shallow");require("@opexa/portal-sdk-core");require("@tanstack/react-query");require("tiny-invariant");require("../../constants/index.js");require("../../utils/capitalize.js");require("../../utils/parseDecimal.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../client/services/getSession.js");require("lodash-es");require("@opexa/portal-sdk-core/object-id");const S=require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");require("usehooks-ts");function f(){const[s,t]=r.useState(1),[o,n]=S.useGlobalStore(p.useShallow(e=>[e.kyc.open,e.kyc.setOpen])),[l,u]=r.useState(!1),[a,i]=r.useState(!1);function q(e){n(e),e||setTimeout(()=>{t(1),u(!1),i(!1)},1e3)}function c(e){t(e)}return{open:o,setOpen:q,step:s,setStep:c,uploadingSelfie:l,setUploadingSelfie:u,uploadingDocument:a,setUploadingDocument:i}}exports.useKYC=f;
+import { useState } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks';
+export function useKYC() {
+    const [step, setStep_] = useState(1);
+    const [open, setOpen_] = useGlobalStore(useShallow((ctx) => [ctx.kyc.open, ctx.kyc.setOpen]));
+    const [uploadingSelfie, setUploadingSelfie] = useState(false);
+    const [uploadingDocument, setUploadingDocument] = useState(false);
+    function setOpen(value) {
+        setOpen_(value);
+        if (!value) {
+            setTimeout(() => {
+                setStep_(1);
+                setUploadingSelfie(false);
+                setUploadingDocument(false);
+            }, 1000);
+        }
+    }
+    function setStep(value) {
+        setStep_(value);
+    }
+    return {
+        open,
+        setOpen,
+        step,
+        setStep,
+        uploadingSelfie,
+        setUploadingSelfie,
+        uploadingDocument,
+        setUploadingDocument,
+    };
+}

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

@@ -1 +0,0 @@
-export {};

package/dist/components/Marquee/Marquee.jsx

@@ -0,0 +1,20 @@
+import { twMerge } from 'tailwind-merge';
+export function Marquee(props) {
+    return (<div className={twMerge('border-border-primary bg-bg-primary text-text-secondary-700 shadow-xs flex gap-lg rounded-lg border p-1 pr-2.5 text-sm font-medium', props.className)}>
+      <div className="border-border-primary flex shrink-0 items-center gap-sm rounded-sm border px-2 py-0.5">
+        <span className="bg-utility-success-500 outline-utility-success-100 size-2 rounded-full outline-2"/>
+        <span>What&apos;s new</span>
+      </div>
+
+      <div className="flex grow items-center overflow-hidden">
+        <div className="flex items-center whitespace-nowrap">
+          <div className="animate-marquee pr-4 [animation-delay:1s]">
+            {props.children}
+          </div>
+          <div className="animate-marquee pr-4 [animation-delay:1s]">
+            {props.children}
+          </div>
+        </div>
+      </div>
+    </div>);
+}

package/dist/components/Marquee/index.js

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

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

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

package/dist/components/Messages/MessageItem.jsx

@@ -0,0 +1,47 @@
+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';
+import { getMessageIcon } from '../../components/Messages/utils';
+export function MessageItem({ message }) {
+    const { id, title, dateTimeCreated, content, markedAsRead, icon, actions } = message;
+    const localeInfo = useLocaleInfo();
+    const { messages: messagesStore } = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
+    const { mutate } = useMarkMessageAsReadMutation();
+    const Icon = getMessageIcon(icon);
+    const handleViewMessage = async () => {
+        mutate(id);
+        messagesStore.setOpen(false);
+        messagesStore.message.setData(message);
+        messagesStore.message.setOpen(true);
+    };
+    const handleActionClick = (e) => {
+        e.stopPropagation();
+        messagesStore.setOpen(false);
+        messagesStore.setTab('ALL');
+    };
+    return (<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">
+      <div className="flex items-center space-x-2">
+        <p className="text-text-tertiary-600 text-xs font-normal">
+          {format(new Date(dateTimeCreated), 'M/d/yyyy - h:mma', {
+            in: tz(localeInfo.timezone),
+        })}
+        </p>
+        {!markedAsRead && (<div className="bg-utility-success-500 h-2.5 w-2.5 rounded-full"/>)}
+      </div>
+
+      <div className="mb-2 flex items-center space-x-2">
+        <Icon className="text-brand-400"/>
+        <p className="text-text-primary-brand text-sm font-semibold">{title}</p>
+      </div>
+
+      <p className="line-clamp-3 text-wrap text-sm font-normal" dangerouslySetInnerHTML={{ __html: content }}/>
+
+      {actions.length > 0 && (<div className="mt-2 flex flex-wrap items-center justify-end gap-2">
+          {actions.map((action, index) => (<Link key={index} className="border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm" href={action.url} onClick={handleActionClick}>
+              {action.name}
+            </Link>))}
+        </div>)}
+    </div>);
+}

package/dist/components/Messages/MessagePopup.jsx

@@ -0,0 +1,43 @@
+import { Portal } from '@ark-ui/react';
+import Link from 'next/link';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks';
+import { XIcon } from '../../icons';
+import { Dialog } from '../../ui';
+import { getMessageIcon } from './utils';
+export const MessagePopup = () => {
+    const { messages: messagesStore } = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
+    const message = messagesStore.message.data;
+    const Icon = getMessageIcon(message?.icon ?? 'MESSAGE');
+    return (<Dialog.Root lazyMount unmountOnExit open={messagesStore.message.open} onOpenChange={({ open }) => {
+            messagesStore.message.setOpen(open);
+        }} closeOnEscape={false} closeOnInteractOutside={false}>
+      <Portal>
+        <Dialog.Backdrop className="!z-[calc(var(--z-dialog)+1)]"/>
+        <Dialog.Positioner className="!z-[calc(var(--z-dialog)+2)] flex items-center justify-center">
+          <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">
+            <Dialog.CloseTrigger>
+              <XIcon />
+            </Dialog.CloseTrigger>
+            <div className="pb-6">
+              <div className="bg-bg-brand-secondary mx-auto w-fit rounded-full p-3">
+                <Icon className="text-text-brand" height="24" width="24"/>
+              </div>
+              <p className="text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight">
+                {message?.title}
+              </p>
+              <div className="text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight" dangerouslySetInnerHTML={{ __html: message?.content ?? '' }}/>
+            </div>
+
+            {message?.actions.length ? (<div className="flex flex-col space-y-2 px-4 pb-8 pt-6 text-center">
+                {message.actions.map((action, index) => (<Link className="bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold" key={index} href={action.url} onClick={() => {
+                    messagesStore.message.setOpen(false);
+                }}>
+                    {action.name}
+                  </Link>))}
+              </div>) : null}
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>);
+};