@opexa/portal-components 0.0.28 → 0.0.30

package/dist/components/KYC/UploadSelfie.jsx

@@ -1,28 +0,0 @@
-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/Marquee/Marquee.jsx

@@ -1,20 +0,0 @@
-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/Messages/MessageItem.jsx

@@ -1,47 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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>);
-};

package/dist/components/Messages/Messages.jsx

@@ -1,87 +0,0 @@
-'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/PortalProvider/PortalProvider.client.jsx

@@ -1,54 +0,0 @@
-'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/Promo/Promo.jsx

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

package/dist/components/Promo/PromoContent.jsx

@@ -1,104 +0,0 @@
-'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/Promos/PromoCarousel.jsx

@@ -1,69 +0,0 @@
-'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.jsx

@@ -1,24 +0,0 @@
-'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.jsx

@@ -1,24 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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/Quests/DailyCheckInQuest/DailyCheckInQuest.jsx

@@ -1,104 +0,0 @@
-'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>);
-}