@opexa/portal-components 0.0.27 → 0.0.28

package/dist/components/Messages/Messages.jsx

@@ -0,0 +1,87 @@
+'use client';
+import { Portal } from '@ark-ui/react';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore, useMessagesQuery, useUnreadMessagesCountQuery, } from '../../client/hooks';
+import { Bell01Icon, SpinnerIcon, XIcon } from '../../icons';
+import { Drawer, IconButton, Tabs } from '../../ui';
+import { InfiniteScroll } from '../InfiniteScroll';
+import { MessageItem } from './MessageItem';
+import { MessagePopup } from './MessagePopup';
+const TABS = ['ALL', 'UNREAD'];
+export function Messages() {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({ messages: ctx.messages })));
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
+    const unreadMessagesCount = unreadMessagesCountQuery.data ?? 0;
+    const messagesQuery = useMessagesQuery({
+        first: 10,
+        ...(globalStore.messages.tab === 'UNREAD' && {
+            filter: {
+                markedAsRead: {
+                    equal: true,
+                },
+            },
+        }),
+    }, { refetchInterval: 5000 });
+    const messages = messagesQuery.data?.pages.flatMap((page) => page.edges.map((e) => e.node)) ?? [];
+    return (<>
+      <Drawer.Root open={globalStore.messages.open} onOpenChange={({ open }) => globalStore.messages.setOpen(open)} lazyMount unmountOnExit>
+        <Drawer.Trigger asChild>
+          <IconButton size="sm" colorScheme="gray" className="relative">
+            {!!unreadMessagesCount && (<div className="bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 rounded-full border px-1.5 text-2xs font-semibold">
+                {unreadMessagesCount}
+              </div>)}
+            <Bell01Icon />
+          </IconButton>
+        </Drawer.Trigger>
+
+        <Portal>
+          <Drawer.Backdrop />
+          <Drawer.Positioner>
+            <Drawer.Content className="bg-gray-50 bg-bg-primary flex flex-col">
+              <div className="flex flex-col space-y-6">
+                <div className="flex items-end justify-between px-4 pt-6">
+                  <p className="text-text-primary-brand text-xl font-semibold">
+                    Notifications
+                  </p>
+                  <Drawer.CloseTrigger className="p-2">
+                    <XIcon />
+                  </Drawer.CloseTrigger>
+                </div>
+
+                <Tabs.Root value={globalStore.messages.tab} onValueChange={(details) => globalStore.messages.setTab(z.enum(TABS).parse(details.value))} lazyMount unmountOnExit>
+                  <div className="mb-4 w-full px-4">
+                    <Tabs.List className="border-border-secondary w-full border">
+                      <Tabs.Trigger value="ALL" className="flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600">
+                        All
+                      </Tabs.Trigger>
+                      <Tabs.Trigger value="UNREAD" className="flex-1/5 ui-selected:text-text-primary-brand text-text-tertiary-600 flex items-center justify-center space-x-2">
+                        <div>Unread</div>
+                        {!!unreadMessagesCount && (<div className="border-border-primary bg-bg-secondary rounded-full border px-2 py-0.5">
+                            {unreadMessagesCount}
+                          </div>)}
+                      </Tabs.Trigger>
+                      <Tabs.Indicator className="bg-bg-active"/>
+                    </Tabs.List>
+                  </div>
+
+                  <div className="border-border-secondary mb-10 w-full border-t"/>
+
+                  {TABS.map((tab) => (<Tabs.Content key={tab} id="messages-scrollable" value={tab} className="scrollbar:w-2 scrollbar-track:bg-bg-primary-alt scrollbar-track:rounded-full scrollbar-thumb:bg-bg-quaternary scrollbar-thumb:rounded-full max-h-[calc(100vh-197px)] overflow-y-auto pb-4 pl-4" style={{ scrollbarGutter: 'stable' }}>
+                      {messages.length > 0 && (<div className="flex flex-col space-y-4">
+                          {messages.map((message) => (<MessageItem key={message.id} message={message}/>))}
+                        </div>)}
+
+                      <InfiniteScroll loader={<SpinnerIcon className="mx-auto size-5"/>} hasMore={!!messagesQuery.hasNextPage} loadMore={async () => {
+                await messagesQuery.fetchNextPage();
+            }} className="mt-4"/>
+                    </Tabs.Content>))}
+                </Tabs.Root>
+              </div>
+            </Drawer.Content>
+          </Drawer.Positioner>
+        </Portal>
+      </Drawer.Root>
+      <MessagePopup />
+    </>);
+}

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

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

package/dist/components/Messages/MessagesTrigger.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 MessagesTrigger(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        messages: ctx.messages,
+    })));
+    return (<ark.button type="button" {...props} onClick={(e) => {
+            globalStore.messages.setOpen(!globalStore.messages.open);
+            return props.onClick?.(e);
+        }} data-state={globalStore.messages.open ? 'open' : 'closed'}/>);
+}

package/dist/components/Messages/index.js

@@ -0,0 +1,2 @@
+export * from './Messages';
+export * from './MessagesTrigger';

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

@@ -1,3 +1,3 @@
-import { MessageIcon } from '@opexa/portal-sdk-core';
+import type { MessageIcon } from '@opexa/portal-sdk-core';
 import { BellRingIcon } from '../../icons';
 export declare function getMessageIcon(logo: MessageIcon): typeof BellRingIcon;

package/dist/components/Messages/utils.js

@@ -1 +1,27 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");const r=require("../../icons/BellRingIcon.js"),e={BELL:r.BellRingIcon,CHECK:r.BellRingIcon,CONFETTI:r.BellRingIcon,GIFT:r.BellRingIcon,TROPHY:r.BellRingIcon,INFO:r.BellRingIcon};function i(n){return n==="ALERT"?e.INFO:n==="CHECK"?e.CHECK:n==="MESSAGE"?e.BELL:n==="CELEBRATE"?e.CONFETTI:n==="GIFT"?e.GIFT:n==="INFO"?e.INFO:e.TROPHY}exports.getMessageIcon=i;
+import { BellRingIcon } from '../../icons';
+// TODO: request icon assets for each type of MessageIcon
+const IMAGES = {
+    BELL: BellRingIcon,
+    BONUS: BellRingIcon,
+    CHECK: BellRingIcon,
+    CONFETTI: BellRingIcon,
+    GIFT: BellRingIcon,
+    STAR: BellRingIcon,
+    TROPHY: BellRingIcon,
+    INFO: BellRingIcon,
+};
+export function getMessageIcon(logo) {
+    if (logo === 'ALERT')
+        return IMAGES.INFO;
+    if (logo === 'CHECK')
+        return IMAGES.CHECK;
+    if (logo === 'MESSAGE')
+        return IMAGES.BELL;
+    if (logo === 'CELEBRATE')
+        return IMAGES.CONFETTI;
+    if (logo === 'GIFT')
+        return IMAGES.GIFT;
+    if (logo === 'INFO')
+        return IMAGES.INFO;
+    return IMAGES.TROPHY;
+}

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

@@ -1,2 +1,2 @@
-import { PortalProviderProps } from './PortalProvider';
+import type { PortalProviderProps } from './PortalProvider';
 export declare function PortalProvider__client({ googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, facebookPixelId, children, }: PortalProviderProps): import("react").JSX.Element;

package/dist/components/PortalProvider/PortalProvider.client.jsx

@@ -0,0 +1,54 @@
+'use client';
+import { Toast, Toaster } from '@ark-ui/react';
+import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { twMerge } from 'tailwind-merge';
+import { toaster } from '../../client/utils';
+import { AlertCircleIcon, XIcon } from '../../icons';
+import { FacebookPixel, GoogleRecaptcha } from '../../third-parties';
+import { getQueryClient } from '../../utils';
+export function PortalProvider__client({ googleAnalyticsId, googleTagManagerId, googleRecaptchaSiteKey, facebookPixelId, children, }) {
+    const queryClient = getQueryClient();
+    return (<QueryClientProvider client={queryClient}>
+      {children}
+
+      <Toaster toaster={toaster}>
+        {(toast) => (<Toast.Root key={toast.id} className="shadow-xs border-gray-300 group z-[var(--z-index)] flex h-[var(--height)] w-[860px] max-w-full scale-[var(--scale)] items-center gap-lg rounded-xl border bg-white p-xl opacity-[var(--opacity)] transition-all duration-300 [translate:var(--x)_var(--y)_0]">
+            <div className={twMerge('flex size-9.5 items-center justify-center rounded-full border-2', toast.type === 'error'
+                ? 'border-red-500/15'
+                : 'border-green-500/15')}>
+              <div className={twMerge('flex size-7 items-center justify-center rounded-full border-2', toast.type === 'error'
+                ? 'border-red-500/35'
+                : 'border-green-500/35')}>
+                <AlertCircleIcon className={twMerge('size-5', toast.type === 'error' ? 'text-red-500' : 'text-green-500')}/>
+              </div>
+            </div>
+
+            <div className="grow text-sm leading-none">
+              <Toast.Title className="font-semibold">
+                {toast.title
+                ? toast.title
+                : toast.type === 'error'
+                    ? 'Error'
+                    : 'Success'}
+              </Toast.Title>
+              <Toast.Description className="text-gray-700 mt-1">
+                {toast.description
+                ? toast.description
+                : toast.type === 'error'
+                    ? 'Something went wrong.'
+                    : 'Operation completed successfully.'}
+              </Toast.Description>
+            </div>
+            <Toast.CloseTrigger className="text-gray-400 hover:text-gray-500 self-start">
+              <XIcon className="size-5"/>
+            </Toast.CloseTrigger>
+          </Toast.Root>)}
+      </Toaster>
+
+      {facebookPixelId && <FacebookPixel fbId={facebookPixelId}/>}
+      {googleAnalyticsId && <GoogleAnalytics gaId={googleAnalyticsId}/>}
+      {googleTagManagerId && <GoogleTagManager gtmId={googleTagManagerId}/>}
+      {googleRecaptchaSiteKey && (<GoogleRecaptcha siteKey={googleRecaptchaSiteKey}/>)}
+    </QueryClientProvider>);
+}

package/dist/components/PortalProvider/PortalProvider.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface PortalProviderProps {
     googleAnalyticsId?: string;
     googleTagManagerId?: string;

package/dist/components/PortalProvider/PortalProvider.jsx

@@ -0,0 +1,18 @@
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+import {} from 'react';
+import { prefetchAccountQuery, prefetchSessionQuery, prefetchWalletQuery, } from '../../server/utils';
+import { getQueryClient } from '../../utils';
+import { PortalProvider__client } from './PortalProvider.client';
+export async function PortalProvider({ children, ...props }) {
+    const queryClient = getQueryClient();
+    await Promise.all([
+        prefetchSessionQuery(),
+        prefetchAccountQuery(),
+        prefetchWalletQuery(),
+    ]);
+    return (<PortalProvider__client {...props}>
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        {children}
+      </HydrationBoundary>
+    </PortalProvider__client>);
+}

package/dist/components/PortalProvider/index.js

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

package/dist/components/Promo/Promo.jsx

@@ -0,0 +1,7 @@
+import { PromoContent } from './PromoContent';
+export async function Promo(props) {
+    /**
+     * await prefetchPromoQuery(props.id);
+     */
+    return <PromoContent id={props.id}/>;
+}

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

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

package/dist/components/Promo/PromoContent.jsx

@@ -0,0 +1,104 @@
+'use client';
+import Image from 'next/image';
+import Link from 'next/link';
+import { ChevronLeftIcon } from '../../icons';
+import { Button, Prose } from '../../ui';
+export function PromoContent(props) {
+    return (<div className={props.className}>
+      <Link href={props.viewAllPromosUrl ?? '/promos'} className="text-button-tertiary-fg flex w-fit items-center gap-lg text-lg font-semibold">
+        <ChevronLeftIcon className="size-6"/>
+        Back to all Promotions
+      </Link>
+      <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"/>
+      <Button className="mt-xl lg:mt-6">Deposit Now</Button>
+
+      <h1 className="mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl">
+        Welcome Bonus 100% up to $500 + 10 Free Spins
+      </h1>
+
+      <p className="text-text-secondary-700 mt-xl lg:mt-6">
+        Ends 5/26/2025, 1:59:59 AM
+      </p>
+
+      <Prose className="mt-2xl lg:mt-6">
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <h5>General Conditions:</h5>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+      </Prose>
+      <Prose className="bg-bg-secondary mt-xl rounded-2xl p-2xl lg:mt-16 lg:p-4xl">
+        <h2>Conclusion</h2>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+      </Prose>
+    </div>);
+}

package/dist/components/Promo/index.js

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

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

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

package/dist/components/Promos/PromoCarousel.jsx

@@ -0,0 +1,69 @@
+'use client';
+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';
+import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, Gift01Icon, } from '../../icons';
+import { Button } from '../../ui';
+import { Empty } from '../Empty';
+import { PromosItem } from './PromoItem';
+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 (<div className={props.className}>
+      <div className="flex items-center">
+        <h2 className="text-lg font-semibold">
+          {props.heading ?? 'Promotions'}
+        </h2>
+        <div className="grow"/>
+        <div className="flex items-center justify-center gap-xl">
+          <Link href={props.viewAllUrl ?? '/promos'} className="text-button-tertiary-fg flex gap-sm text-sm font-semibold">
+            See All
+            <ChevronRightIcon className="size-5 lg:hidden"/>
+          </Link>
+          <div className="hidden lg:flex">
+            <Button variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" onClick={onPrevButtonClick} disabled={prevBtnDisabled} aria-label="Previous">
+              <ArrowLeftIcon className="size-5"/>
+            </Button>
+            <Button variant="outline" colorScheme="gray" className="rounded-l-none" onClick={onNextButtonClick} disabled={nextBtnDisabled} aria-label="Next">
+              <ArrowRightIcon className="size-5"/>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {promos.length <= 0 && (<Empty icon={Gift01Icon} title="No Promos" message="No promo is currently available." className="mt-8"/>)}
+
+      {promos.length >= 1 && (<div ref={emblaRef} className="relative mt-lg lg:overflow-hidden">
+          <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')}>
+            {promos.map((promo) => (<PromosItem key={promo.id} promo={promo} shouldShowDescription={props.shouldShowDescription}/>))}
+          </div>
+        </div>)}
+    </div>);
+}

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

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

package/dist/components/Promos/PromoGrid.jsx

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

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

@@ -1,4 +1,4 @@
-import { Promo } from '@opexa/portal-sdk-core';
+import type { Promo } from '@opexa/portal-sdk-core';
 interface PromosItemProps {
     promo: Promo;
     shouldShowDescription?: boolean;

package/dist/components/Promos/PromoItem.jsx

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

package/dist/components/Promos/Promos.jsx

@@ -0,0 +1,10 @@
+import { PromoCarousel } from './PromoCarousel';
+import { PromoGrid } from './PromoGrid';
+export function Promos(props) {
+    if (props.layout === 'grid') {
+        return <PromoGrid {...props}/>;
+    }
+    else {
+        return <PromoCarousel {...props}/>;
+    }
+}

package/dist/components/Promos/index.js

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

package/dist/components/Protected/Protected.d.ts

@@ -2,5 +2,5 @@ interface ProtectedProps {
     children: React.ReactNode;
     fallback?: React.ReactNode;
 }
-export declare function Protected(props: ProtectedProps): import('react').ReactNode;
+export declare function Protected(props: ProtectedProps): import("react").ReactNode;
 export {};

package/dist/components/Protected/Protected.jsx

@@ -0,0 +1,8 @@
+'use client';
+import { useSessionQuery } from '../../client/hooks';
+export function Protected(props) {
+    const query = useSessionQuery();
+    return query.data?.status === 'authenticated'
+        ? props.children
+        : (props.fallback ?? null);
+}

package/dist/components/Protected/index.js

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

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.jsx

@@ -0,0 +1,104 @@
+'use client';
+import { CalendarIcon, ClockStopWatchIcon, InfoCircleIcon } from '../../../icons';
+import { twMerge } from 'tailwind-merge';
+import { Button } from '../../../ui';
+import { useState } from 'react';
+import { DailyCheckInQuestModal } from './DailyCheckInQuestModal';
+export default function DailyCheckInQuest() {
+    const [showRules, setShowRules] = useState(false);
+    // dummy data
+    const dailyCheckedInData = [
+        {
+            day: 1,
+            reward: 0,
+        },
+        {
+            day: 2,
+            reward: 0,
+        },
+        {
+            day: 3,
+            reward: 5,
+        },
+        {
+            day: 4,
+            reward: 0,
+        },
+        {
+            day: 5,
+            reward: 10,
+        },
+        {
+            day: 6,
+            reward: 0,
+        },
+        {
+            day: 7,
+            reward: 20,
+        },
+    ];
+    const checkedInDays = 4;
+    const totalDays = 7;
+    const progressPercent = (checkedInDays / totalDays) * 100;
+    return (<>
+      <DailyCheckInQuestModal modalState={{
+            isOpen: showRules,
+            setIsOpen: setShowRules,
+        }}/>
+      <div className="border-border-primary bg-bg-tertiary flex h-full w-full min-w-[343px] flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5">
+        <div className="flex flex-col space-y-2">
+          <div className="flex max-h-7.5 items-start justify-between">
+            <div className="border-utility-brand-200 bg-utility-brand-50 rounded-xs flex items-center space-x-1 border py-1 pl-2 pr-2.5">
+              <ClockStopWatchIcon className="text-brand-400"/>
+              <p className="text-utility-brand-700 text-sm font-medium">
+                6d:10h:11m:10s
+              </p>
+            </div>
+
+            <div role="button" className="rounded-xs bg-bg-primary border-border-secondary cursor-pointer border p-2" onClick={() => setShowRules((prev) => !prev)}>
+              <InfoCircleIcon className="text-text-disabled"/>
+            </div>
+          </div>
+          <p className="text-xl font-semibold">Daily Check-In</p>
+          <p className="text-text-secondary-700 text-wrap text-sm font-normal">
+            Check in for 7 days in a row to earn a bonus, don’t miss a day to
+            keep your streak!
+          </p>
+        </div>
+
+        <div className="flex w-full flex-col space-y-2">
+          <div className="grid grid-cols-7">
+            {dailyCheckedInData.map((item) => {
+            const reward = item.reward ? `+₱${item.reward}` : '-';
+            return (<div key={item.day} className={twMerge('flex items-center justify-center', item.day <= checkedInDays
+                    ? 'text-brand-400'
+                    : 'text-text-secondary-700')}>
+                  <p>{reward}</p>
+                </div>);
+        })}
+          </div>
+
+          <div className="bg-bg-primary h-2 w-full overflow-hidden rounded-full">
+            <div className="bg-utility-brand-600 h-full rounded-full transition-all duration-300" style={{ width: `${progressPercent}%` }}/>
+          </div>
+
+          <div className="grid grid-cols-7">
+            {dailyCheckedInData.map((item) => (<div key={item.day} className="flex items-center justify-center">
+                <CalendarWithDayNumber key={item.day} day={item.day} currentCheckedInDays={checkedInDays}/>
+              </div>))}
+          </div>
+        </div>
+        <Button>Check-In</Button>
+      </div>
+    </>);
+}
+function CalendarWithDayNumber({ day, currentCheckedInDays, }) {
+    return (<div className={twMerge('group relative h-fit w-fit', day <= currentCheckedInDays
+            ? 'text-brand-400'
+            : 'text-text-secondary-700')}>
+      <CalendarIcon />
+      <div className="absolute inset-0 mt-[4px] flex items-center justify-center text-2xs lg:mt-[2px]">
+        <p className="text-center">{day}</p>
+      </div>
+    </div>);
+}