@opexa/portal-components 0.0.410 → 0.0.411

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

@@ -8,6 +8,8 @@ export interface ClassNameEntries {
     calendarDayText?: string;
     checkInButton?: string;
 }
+export type UncompletedIconType = 'x' | 'minus';
 export declare function DailyCheckInQuest(props: {
     className?: string | ClassNameEntries;
+    uncompletedIcon?: UncompletedIconType;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/DailyCheckInQuest.js

@@ -11,6 +11,7 @@ import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
 import { toaster } from '../../client/utils/toaster.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
 import { InfoCircleIcon } from '../../icons/InfoCircleIcon.js';
+import { MinusIcon } from '../../icons/MinusIcon.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
@@ -24,7 +25,7 @@ import { getAvailableQuestsQueryKey } from '../../utils/queryKeys.js';
 import { useQuestContext } from './QuestsContext.js';
 import { RemainingTime } from './RemainingTime.js';
 export function DailyCheckInQuest(props) {
-    const { className } = props;
+    const { className, uncompletedIcon = 'x' } = props;
     const classNames = isString(className) ? { root: className } : className;
     const quest = useQuestContext();
     const disclosure = useDisclosure();
@@ -50,7 +51,7 @@ export function DailyCheckInQuest(props) {
         onSuccess() {
             toaster.success({
                 title: 'Check-in successful 🎉',
-                description: 'You’ve successfully checked in for today! Keep it up to maintain your streak!',
+                description: "You've successfully checked in for today! Keep it up to maintain your streak!",
             });
         },
         onError(e) {
@@ -61,13 +62,16 @@ export function DailyCheckInQuest(props) {
         },
     });
     const remainingTime = useRemainingTime(endDateTime);
+    const renderUncompletedIcon = () => {
+        return uncompletedIcon === 'minus' ? (_jsx(MinusIcon, { className: "size-2" })) : (_jsx(XIcon, { className: "size-4" }));
+    };
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('flex h-full w-full flex-col space-y-6 rounded-2xl border border-border-primary bg-bg-tertiary px-4 pt-5 pb-6', classNames?.root), children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(RemainingTime, {}), _jsx("button", { type: "button", className: "flex size-9 cursor-pointer items-center justify-center rounded-md border border-border-secondary bg-bg-primary", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", children: _jsx(InfoCircleIcon, { className: "size-5 text-text-disabled" }) })] }), _jsx("p", { className: "font-semibold text-xl", children: name }), _jsx(Prose, { className: "text-wrap font-normal text-sm text-text-secondary-700", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => {
                                     const done = item.day <= (checkInStreak ?? 0);
                                     const reward = item.reward ? (`+${formatNumber(item.reward, {
                                         currency: localeInfo.currency.code,
                                         minDecimalPlaces: 0,
                                         maxDecimalPlaces: 0,
-                                    })}`) : done ? (_jsx(CheckIcon, { className: "size-4" })) : (_jsx(XIcon, { className: "size-4" }));
+                                    })}`) : done ? (_jsx(CheckIcon, { className: "size-4" })) : (renderUncompletedIcon());
                                     return (_jsx("div", { className: twMerge('flex items-center justify-center', done ? 'text-brand-400' : 'text-text-secondary-700', classNames?.rewardContainer), children: _jsx("p", { children: reward }) }, item.day));
                                 }) }), _jsx("div", { className: twMerge('h-2 w-full overflow-hidden rounded-full bg-bg-primary', classNames?.progressBarContainer), children: _jsx("div", { className: twMerge('h-full rounded-full bg-utility-brand-600 transition-all duration-300', classNames?.progressBar), style: { width: `${progressPercentage}%` } }) }), _jsx("div", { className: "grid grid-cols-7 place-items-center", children: dailyCheckedInData.map((item) => (_jsxs("div", { className: twMerge('group relative size-fit text-text-secondary-700 ui-active:text-brand-400', classNames?.calendarIconContainer), "data-active": dataAttr(item.day <= (checkInStreak ?? 0)), children: [_jsx(CalendarIcon, { className: twMerge('h-4.5 w-auto', classNames?.calendarIcon) }), _jsx("p", { className: twMerge('-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 text-2xs leading-none', classNames?.calendarDayText), children: item.day })] }, item.day))) })] }), _jsx(Button, { onClick: () => checkInDailyQuestMutation.mutate(id), className: twMerge('disabled:bg-bg-primary disabled:text-text-disabled', classNames?.checkInButton), disabled: status === 'COMPLETED' ||
                             status === 'FAILED' ||

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

@@ -11,5 +11,6 @@ export interface QuestsProps {
     heading?: string | ReactNode;
     className?: string | ClassNameEntries;
     style?: CSSProperties;
+    uncompletedIcon?: 'x' | 'minus';
 }
 export declare function Quests__client(props: QuestsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isString } from 'lodash-es';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useAvailableQuestsQuery } from '../../client/hooks/useAvailableQuestsQuery.js';
@@ -56,6 +56,6 @@ export function Quests__client(props) {
                                 ? classNames?.wageringQuest
                                 : quest.type === 'DAILY_CHECKIN'
                                     ? classNames?.dailyCheckInQuest
-                                    : '' }) }, quest.id));
+                                    : '', uncompletedIcon: props.uncompletedIcon }) }, quest.id));
                 }) })] }));
 }

package/dist/icons/MinusIcon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function MinusIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/MinusIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function MinusIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "6", height: "2", fill: "none", viewBox: "0 0 6 2", ...props, children: _jsx("path", { fill: "#344054", d: "M5.224.347v1.471H.064V.347z" }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@opexa/portal-components",
-	"version": "0.0.410",
+	"version": "0.0.411",
 	"exports": {
 		"./ui/*": {
 			"types": "./dist/ui/*/index.d.ts",