@opexa/portal-components 0.0.1079 → 0.0.1081

package/dist/components/Quests/JourneyQuest.js

@@ -132,6 +132,13 @@ function Rules(props) {
             return false;
         return milestones.every((milestone) => milestone.isCompleted);
     }, [milestones]);
+    const isExpired = useMemo(() => {
+        if (!quest?.daysToClear || !quest?.dateTimeCreated)
+            return false;
+        const targetDateTime = new Date(quest.dateTimeCreated);
+        targetDateTime.setDate(targetDateTime.getDate() + Number(quest.daysToClear));
+        return new Date() > targetDateTime;
+    }, [quest?.dateTimeCreated, quest?.daysToClear]);
     const sessionQuery = useSessionQuery();
     const session = sessionQuery.data;
     return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center p-4", children: _jsxs(Dialog.Content, { className: twMerge('mx-auto max-h-[80vh] min-h-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-10 md:scrollbar:h-2 md:scrollbar:w-2 md:scrollbar-thumb:rounded-full md:scrollbar-thumb:bg-bg-quaternary md:scrollbar-track:bg-transparent', props.className?.root), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: twMerge('font-semibold text-lg text-text-primary-900', props.className?.title), children: quest?.name || 'Quest' }), _jsx("div", { className: "relative", children: _jsx("div", { className: "max-h-[30vh] overflow-y-auto", children: quest?.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
@@ -162,19 +169,20 @@ function Rules(props) {
                                                             globalStore.depositWithdrawal.setOpen(true);
                                                             globalStore.depositWithdrawal.setTab('DEPOSIT');
                                                         }
-                                                    }, "aria-label": `Complete ${milestone.label}`, disabled: milestoneType === 'ACCOUNT_VERIFICATION' &&
-                                                        verificationStatus === 'PENDING', children: [milestoneType === 'ACCOUNT_VERIFICATION' ? (_jsx(FileCheck02Icon, { className: "size-5" })) : (_jsx(CoinsHandIcon, { className: "size-5" })), milestoneType === 'FIRST_DEPOSIT'
+                                                    }, "aria-label": `Complete ${milestone.label}`, disabled: isExpired ||
+                                                        (milestoneType === 'ACCOUNT_VERIFICATION' &&
+                                                            verificationStatus === 'PENDING'), children: [milestoneType === 'ACCOUNT_VERIFICATION' ? (_jsx(FileCheck02Icon, { className: "size-5" })) : (_jsx(CoinsHandIcon, { className: "size-5" })), milestoneType === 'FIRST_DEPOSIT'
                                                             ? 'Deposit'
                                                             : 'Verify Account'] })), !milestone.isCompleted &&
-                                                    milestoneType === 'LINK_FACEBOOK_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Facebook Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(FacebookSignInTrigger, { text: "Link Facebook Account", className: "!mt-0 flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })] })), !milestone.isCompleted &&
-                                                    milestoneType === 'LINK_GOOGLE_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Google Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(GoogleSignInButton, { text: "Link Google Account", className: "flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })] })), !milestone.isCompleted &&
+                                                    milestoneType === 'LINK_FACEBOOK_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Facebook Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(FacebookSignInTrigger, { text: "Link Facebook Account", className: "!mt-0 flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none", disabled: isExpired })] })), !milestone.isCompleted &&
+                                                    milestoneType === 'LINK_GOOGLE_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Google Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(GoogleSignInButton, { text: "Link Google Account", className: "flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none", disabled: isExpired })] })), !milestone.isCompleted &&
                                                     milestoneType === 'CUSTOM_LINK' &&
                                                     (() => {
                                                         const baseUrl = process.env.NEXT_PUBLIC_ENVIRONMENT === 'development'
                                                             ? 'https://api.trigger.development.opexa.io'
                                                             : 'https://api.trigger.opexa.io';
                                                         const linkUrl = `${baseUrl}/v1/quests/${quest?.id}/milestones/${milestone.id}/link?token=${session?.token}`;
-                                                        return (_jsx(Button, { size: "sm", "aria-label": `Complete ${milestone.label}`, asChild: true, children: _jsxs(Link, { href: linkUrl, target: "_blank", rel: "noopener noreferrer", children: ["Click Here", _jsx(Link01Icon, { className: "size-5" })] }) }));
+                                                        return (_jsx(Button, { size: "sm", "aria-label": `Complete ${milestone.label}`, asChild: !isExpired, disabled: isExpired, children: isExpired ? (_jsx("span", { children: "Quest Expired" })) : (_jsxs(Link, { href: linkUrl, target: "_blank", rel: "noopener noreferrer", children: ["Click Here", _jsx(Link01Icon, { className: "size-5" })] })) }));
                                                     })()] }, milestone.key));
                                     }), quest?.bonus && (_jsx("div", { className: "flex h-full items-end", children: allMilestonesCompleted ? (_jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })) : (_jsx("div", { className: twMerge('w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center text-white', props.className?.uncompleteButton), children: _jsxs("p", { children: ["Complete target to", ' ', _jsxs("span", { className: "text-brand-400", children: ["\u20B1", quest?.bonus] }), ' ', "bonus!"] }) })) }))] })] }) })] }) }));
 }

package/dist/components/Quests/RemainingTime.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { endOfDay } from 'date-fns';
+import { useMemo } from 'react';
 import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
 import { ClockStopWatchIcon } from '../../icons/ClockStopWatchIcon.js';
 import { Badge } from '../../ui/Badge/index.js';
 import { useQuestContext } from './QuestsContext.js';
 export function RemainingTime({ endOfDay: useEndOfDay = false, className, }) {
     const quest = useQuestContext();
-    const targetDateTime = useEndOfDay
-        ? endOfDay(new Date(quest.endDateTime)).toISOString()
-        : quest.endDateTime;
+    const targetDateTime = useMemo(() => {
+        const date = new Date(quest.dateTimeCreated);
+        date.setDate(date.getDate() + Number(quest.daysToClear ?? 0));
+        return date;
+    }, [quest.dateTimeCreated, quest.daysToClear]);
     const remainingTime = useRemainingTime(targetDateTime);
     if (quest.status === 'COMPLETED') {
         return (_jsx(Badge.Root, { size: "lg", colorScheme: "success", round: false, className: className?.completedBadgeRoot, children: _jsx(Badge.Label, { className: className?.completedBadgeLabel, children: "Completed" }) }));

package/dist/components/SignIn/FacebookSignInTrigger.d.ts

@@ -1,4 +1,5 @@
-interface FacebookSignInTriggerProps {
+import type { ComponentPropsWithRef } from 'react';
+interface FacebookSignInTriggerProps extends ComponentPropsWithRef<'button'> {
     text?: string;
     className?: string;
 }

package/dist/components/SignIn/FacebookSignInTrigger.js

@@ -46,6 +46,6 @@ export const FacebookSignInTrigger = (props) => {
                 description: 'Failed to sign in with Facebook. Please try again.',
             });
         }, render: ({ onClick }) => {
-            return (_jsxs(Button, { variant: "outline", id: "fb-btn", onClick: onClick, colorScheme: "gray", className: `mt-lg border-border-primary bg-bg-primary text-text-secondary-700 ${props.className}`, children: [_jsx(FacebookIcon, { className: "size-6" }), props.text ?? 'Continue with Facebook'] }));
+            return (_jsxs(Button, { variant: "outline", id: "fb-btn", onClick: onClick, colorScheme: "gray", disabled: props.disabled, className: `mt-lg border-border-primary bg-bg-primary text-text-secondary-700 ${props.className}`, children: [_jsx(FacebookIcon, { className: "size-6" }), props.text ?? 'Continue with Facebook'] }));
         } }));
 };

package/package.json

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