@opexa/portal-components 0.0.293 → 0.0.294

package/dist/client/utils/recaptcha.d.ts

@@ -0,0 +1,14 @@
+export interface ReCAPTCHAExecuteOptions {
+    action: 'submit' | (string & {});
+}
+export interface ReCAPTCHA {
+    ready(callback: () => void): void;
+    execute(siteKey: string, options: ReCAPTCHAExecuteOptions): Promise<string>;
+}
+export declare function ReCAPTCHAReady(): Promise<void>;
+export declare function ReCAPTCHAExecute(options: ReCAPTCHAExecuteOptions): Promise<string>;
+declare global {
+    interface Window {
+        grecaptcha: ReCAPTCHA;
+    }
+}

package/dist/client/utils/recaptcha.js

@@ -0,0 +1,18 @@
+import { RECAPTCHA_SITE_KEY } from '../../constants/index.js';
+let loaded = false;
+export function ReCAPTCHAReady() {
+    return new Promise((resolve) => {
+        if (!loaded) {
+            window.grecaptcha.ready(() => {
+                loaded = true;
+                resolve();
+            });
+        }
+        else {
+            resolve();
+        }
+    });
+}
+export async function ReCAPTCHAExecute(options) {
+    return await window.grecaptcha.execute(RECAPTCHA_SITE_KEY, options);
+}

package/dist/components/Quests/JourneyQuest.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { useControllableState } from '../../client/hooks/useControllableState.js';
 import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
 import { XIcon } from '../../icons/XIcon.js';
@@ -9,41 +12,51 @@ import { Checkbox } from '../../ui/Checkbox/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
 import { Progress } from '../../ui/Progress/index.js';
+import { Prose } from '../../ui/Prose/index.js';
 import { formatNumber } from '../../utils/formatNumber.js';
 import { getPercentage } from '../../utils/getPercentage.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
 export function JourneyQuest() {
     const disclosure = useDisclosure();
-    const localeInfo = useLocaleInfo();
-    //   dummy data
-    const totalMilestones = 5;
-    const currentMilestone = 3;
-    const milestones = [
-        {
-            key: 'REGISTRATION',
-            label: 'Registration',
-            bonus: 20,
-            isCompleted: true,
-        },
-        {
-            key: 'ACCOUNT_VERIFICATION',
-            label: 'Account Verification',
-            bonus: null,
-            isCompleted: false,
-        },
-        {
-            key: 'FIRST_DEPOSIT',
-            label: 'First Deposit',
-            bonus: 20,
-            isCompleted: false,
-        },
-        {
-            key: 'IOS_FIRST_LOGIN',
-            label: 'IOS First Login',
-            bonus: null,
-            isCompleted: true,
-        },
-    ];
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("div", { className: "flex max-h-7.5 items-start justify-between" }), _jsx("p", { className: "text-xl font-semibold", children: "Blucky Starter Quest" }), _jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, className: "bg-bg-primary h-2 rounded-full", value: getPercentage(currentMilestone, totalMilestones), children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) }), _jsxs("p", { className: "text-text-quarterary-brand text-xs", children: [currentMilestone, "/", totalMilestones] })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [milestones.map((milestone) => (_jsx(QuestMilestone, { label: milestone.label, bonus: milestone.bonus, isCompleted: milestone.isCompleted }, milestone.key))), _jsx(QuestMilestone, { label: "Watch our Live event" }, "CUSTOM")] })] }), _jsx(Button, { size: "sm", onClick: () => disclosure.setOpen(true), "aria-label": "View Details", disabled: false, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: "View Details" })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen })] }));
+    const quest = useQuestContext();
+    const { milestones, totalMilestones, currentMilestone, progressPercentage } = useMemo(() => {
+        if (!quest?.milestones) {
+            return {
+                milestones: [],
+                totalMilestones: 0,
+                currentMilestone: 0,
+                progressPercentage: 0,
+            };
+        }
+        const transformedMilestones = quest.milestones.map((milestone) => ({
+            key: milestone.type,
+            label: milestone.name,
+            bonus: milestone.bonusAmount
+                ? parseFloat(milestone.bonusAmount)
+                : null,
+            isCompleted: milestone.cleared,
+            id: milestone.id,
+            description: milestone.description,
+        }));
+        const completedCount = quest.milestones.filter((m) => m.cleared).length;
+        const total = quest.milestones.length;
+        return {
+            milestones: transformedMilestones,
+            totalMilestones: total,
+            currentMilestone: completedCount,
+            progressPercentage: quest.progressPercentage
+                ? parseFloat(quest.progressPercentage)
+                : getPercentage(completedCount, total),
+        };
+    }, [quest]);
+    const progressValue = useMemo(() => {
+        return (progressPercentage || getPercentage(currentMilestone, totalMilestones));
+    }, [progressPercentage, currentMilestone, totalMilestones]);
+    const handleViewDetails = useCallback(() => {
+        disclosure.setOpen(true);
+    }, [disclosure]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("div", { className: "flex max-h-7.5 items-start justify-between", children: _jsx(RemainingTime, {}) }), _jsx("p", { className: "text-xl font-semibold", children: quest?.name || 'Journey Quest' }), _jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, className: "bg-bg-primary h-2 rounded-full", value: progressValue, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) }), _jsxs("p", { className: "text-text-quarterary-brand text-xs", children: [currentMilestone, "/", totalMilestones] })] }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: milestones.map((milestone) => (_jsx(QuestMilestone, { label: milestone.label, bonus: milestone.bonus, isCompleted: milestone.isCompleted }, milestone.key))) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: handleViewDetails, "aria-label": "View Details", disabled: false, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: "View Details" }) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen, quest: quest, milestones: milestones })] }));
 }
 function Rules(props) {
     const [open, setOpen] = useControllableState({
@@ -51,7 +64,44 @@ function Rules(props) {
         defaultValue: props.defaultOpen ?? false,
         onChange: props.onOpenChange,
     });
-    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", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[400px] overflow-y-auto rounded-xl px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "text-text-quarterary-brand group flex flex-col space-y-5 text-sm", children: [_jsx("h2", { className: "text-text-primary-900 text-lg font-semibold", children: "Blucky Starter Quest" }), _jsx("p", { children: "Ready for a challenge? Complete them all and get amazing rewards!" }), _jsxs("div", { className: "bg-bg-tertiary flex flex-col space-y-2.5 rounded-xl p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-base font-medium text-white", children: "Registration" }), _jsx("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: "Complete" })] }), _jsx("p", { className: "ml-1", children: "Register and win Php 50 Bonus" })] }), _jsxs("div", { className: "bg-bg-tertiary flex flex-col space-y-2.5 rounded-xl p-3", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("p", { className: "text-base font-medium text-white", children: "Account Verification" }) }), _jsx("p", { className: "ml-1", children: "Verify your account and get Php 50 Bonus" }), _jsx(Button, { size: "sm", onClick: () => { }, "aria-label": "Verify Account", children: "Verify Account" })] }), _jsxs("div", { className: "bg-bg-tertiary flex flex-col space-y-2.5 rounded-xl p-3", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("p", { className: "text-base font-medium text-white", children: "First Deposit" }) }), _jsx("p", { className: "ml-1", children: "Make your first deposit and get Php 50 Bonus" }), _jsx(Button, { size: "sm", onClick: () => { }, "aria-label": "Deposit", children: "Deposit" })] }), _jsxs("div", { className: "bg-bg-tertiary flex flex-col space-y-2.5 rounded-xl p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-base font-medium text-white", children: "IOS First Login" }), _jsx("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: "Complete" })] }), _jsx("p", { className: "ml-1", children: "Login using iOS and get Php 50 Bonus" })] }), _jsxs("div", { className: "bg-bg-tertiary flex flex-col space-y-2.5 rounded-xl p-3", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("p", { className: "whitespace-nowrap text-base font-medium text-white", children: "Like and Share our Official Facebook Page" }) }), _jsx("p", { className: "ml-1", children: "Win amazing prizes and bonus if you share and like our Official Facebook Page BLucky." })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx("div", { className: "bg-button-secondary-bg border-bg-primary-hover w-full rounded-md border px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { children: ["Complete target to", ' ', _jsx("span", { className: "text-brand-400", children: "\u20B150" }), " bonus!"] }) }) })] })] }) })] }) }));
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kyc: ctx.kyc,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const { quest, milestones } = useMemo(() => {
+        return {
+            quest: props.quest,
+            milestones: props.milestones || [],
+        };
+    }, [props.quest, props.milestones]);
+    const allMilestonesCompleted = useMemo(() => {
+        if (!milestones.length)
+            return false;
+        return milestones.every((milestone) => milestone.isCompleted);
+    }, [milestones]);
+    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", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[400px] overflow-y-auto rounded-xl px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "text-text-quarterary-brand group flex flex-col space-y-5 text-sm", children: [_jsx("h2", { className: "text-text-primary-900 text-lg font-semibold", children: quest?.name || 'Quest' }), _jsx("p", { children: quest?.description ||
+                                            'Ready for a challenge? Complete them all and get amazing rewards!' }), milestones.map((milestone) => (_jsxs("div", { className: "bg-bg-tertiary flex flex-col space-y-2.5 rounded-xl p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-base font-medium text-white", children: milestone.label }), milestone.isCompleted && (_jsx("div", { className: "border-utility-success-200 bg-utility-success-50 text-utility-success-700 flex w-fit items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", children: "Complete" }))] }), milestone.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
+                                                    __html: milestone.description,
+                                                } })) : (_jsxs("p", { className: "ml-1", children: [milestone.key === 'REGISTRATION' &&
+                                                        `Register and win Php ${milestone.bonus} Bonus`, milestone.key === 'ACCOUNT_VERIFICATION' &&
+                                                        `Verify your account and get Php ${milestone.bonus} Bonus`, milestone.key === 'FIRST_DEPOSIT' &&
+                                                        `Make your first deposit and get Php ${milestone.bonus} Bonus`, milestone.key === 'IOS_FIRST_LOGIN' &&
+                                                        `Login using iOS and get Php ${milestone.bonus} Bonus`, milestone.key === 'ANDROID_FIRST_LOGIN' &&
+                                                        `Login using Android and get Php ${milestone.bonus} Bonus`] })), !milestone.isCompleted &&
+                                                (milestone.key === 'ACCOUNT_VERIFICATION' ||
+                                                    milestone.key === 'FIRST_DEPOSIT') && (_jsx(Button, { size: "sm", onClick: () => {
+                                                    if (milestone.key === 'ACCOUNT_VERIFICATION') {
+                                                        setOpen(false);
+                                                        globalStore.kyc.setOpen(true);
+                                                    }
+                                                    if (milestone.key === 'FIRST_DEPOSIT') {
+                                                        setOpen(false);
+                                                        globalStore.depositWithdrawal.setOpen(true);
+                                                        globalStore.depositWithdrawal.setTab('DEPOSIT');
+                                                    }
+                                                }, "aria-label": `Complete ${milestone.label}`, children: milestone.key === 'FIRST_DEPOSIT'
+                                                    ? 'Deposit'
+                                                    : 'Verify Account' }))] }, 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: "bg-button-secondary-bg border-bg-primary-hover w-full rounded-md border px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { children: ["Complete target to", ' ', _jsxs("span", { className: "text-brand-400", children: ["\u20B1", quest?.bonus] }), ' ', "bonus!"] }) })) }))] })] }) })] }) }));
 }
 function QuestMilestone({ label, bonus, isCompleted = false, }) {
     const localeInfo = useLocaleInfo();

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

@@ -8,7 +8,7 @@ import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
 import closeChest from '../../images/close-chest.png';
 import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
 import { DailyCheckInQuest } from './DailyCheckInQuest.js';
-// import { JourneyQuest } from './JourneyQuest.js';
+import { JourneyQuest } from './JourneyQuest.js';
 import { OnboardingQuest } from './OnboardingQuest.js';
 import { QuestContext } from './QuestsContext.js';
 import { WageringQuest } from './WageringQuest.js';
@@ -16,7 +16,7 @@ const QUEST_COMPONENT_MAP = {
     DAILY_CHECKIN: DailyCheckInQuest,
     ONBOARDING: OnboardingQuest,
     WAGERING: WageringQuest,
-    // JOURNEY: JourneyQuest,
+    JOURNEY: JourneyQuest,
 };
 const TabDefinition = z.enum(['AVAILABLE', 'COMPLETED']);
 export function Quests__client(props) {

package/dist/services/queries.d.ts

@@ -109,8 +109,9 @@ export declare const SKIP_ONBOARDING = "\n  mutation SkipOnboarding {\n    skipO
 export declare const QUEST_PROGRAM_FRAGMENT = "\n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n";
 export declare const DAILY_CHECKIN_FRAGMENT = "\n  \n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n\n  fragment DailyCheckinQuestFragment on DailyCheckInQuest {\n    id\n    name\n    description\n    type\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    endDateTime\n    dateTimeCreated\n    lastCheckInDate\n    startDateTime\n    checkInStreak\n\n    thirdDayBonusAmount\n    seventhDayBonusAmount\n    sixthDayBonusAmount\n  }\n";
 export declare const WAGERING_FRAGMENT = "\n  fragment WageringQuestFragment on WageringQuest {\n    bonus\n    id\n    name\n    type\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    targetTurnover\n    endDateTime\n    dateTimeCreated\n  }\n";
+export declare const JOURNEY_FRAGMENT = "\n  fragment JourneyQuestFragment on JourneyQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n    status\n    type\n    progressPercentage\n    bonus\n    bonusAwarded\n    dateTimeCreated\n    endDateTime\n    milestones {\n      id\n      type\n      name\n      bonusAmount\n      cleared\n      description\n    }\n  }\n";
 export declare const ONBOARDING_QUEST_FRAGMENT = "\n  fragment OnboardingQuestFragment on OnboardingQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    type\n    progressPercentage\n    bonus\n    endDateTime\n    dateTimeCreated\n    firstDepositCompleted\n    accountVerificationCompleted\n  }\n";
-export declare const AVAILABLE_QUESTS = "\n  \n  fragment WageringQuestFragment on WageringQuest {\n    bonus\n    id\n    name\n    type\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    targetTurnover\n    endDateTime\n    dateTimeCreated\n  }\n\n  \n  \n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n\n  fragment DailyCheckinQuestFragment on DailyCheckInQuest {\n    id\n    name\n    description\n    type\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    endDateTime\n    dateTimeCreated\n    lastCheckInDate\n    startDateTime\n    checkInStreak\n\n    thirdDayBonusAmount\n    seventhDayBonusAmount\n    sixthDayBonusAmount\n  }\n\n  \n  fragment OnboardingQuestFragment on OnboardingQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    type\n    progressPercentage\n    bonus\n    endDateTime\n    dateTimeCreated\n    firstDepositCompleted\n    accountVerificationCompleted\n  }\n\n\n  query AvailableQuests {\n    availableQuests {\n      ... on Quest {\n        ... on WageringQuest {\n          ...WageringQuestFragment\n        }\n        ... on DailyCheckInQuest {\n          ...DailyCheckinQuestFragment\n        }\n        ... on OnboardingQuest {\n          ...OnboardingQuestFragment\n        }\n      }\n    }\n  }\n";
+export declare const AVAILABLE_QUESTS = "\n  \n  fragment WageringQuestFragment on WageringQuest {\n    bonus\n    id\n    name\n    type\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    targetTurnover\n    endDateTime\n    dateTimeCreated\n  }\n\n  \n  \n  fragment QuestProgramFragment on QuestProgram {\n    status\n    type\n    name\n    description\n  }\n\n  fragment DailyCheckinQuestFragment on DailyCheckInQuest {\n    id\n    name\n    description\n    type\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    progressPercentage\n    turnover\n    endDateTime\n    dateTimeCreated\n    lastCheckInDate\n    startDateTime\n    checkInStreak\n\n    thirdDayBonusAmount\n    seventhDayBonusAmount\n    sixthDayBonusAmount\n  }\n\n  \n  fragment OnboardingQuestFragment on OnboardingQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n\n    status\n    type\n    progressPercentage\n    bonus\n    endDateTime\n    dateTimeCreated\n    firstDepositCompleted\n    accountVerificationCompleted\n  }\n\n  \n  fragment JourneyQuestFragment on JourneyQuest {\n    id\n    name\n    description\n    program {\n      ...QuestProgramFragment\n    }\n    status\n    type\n    progressPercentage\n    bonus\n    bonusAwarded\n    dateTimeCreated\n    endDateTime\n    milestones {\n      id\n      type\n      name\n      bonusAmount\n      cleared\n      description\n    }\n  }\n\n\n  query AvailableQuests {\n    availableQuests {\n      ... on Quest {\n        ... on WageringQuest {\n          ...WageringQuestFragment\n        }\n        ... on DailyCheckInQuest {\n          ...DailyCheckinQuestFragment\n        }\n        ... on OnboardingQuest {\n          ...OnboardingQuestFragment\n        }\n        ... on JourneyQuest {\n          ...JourneyQuestFragment\n        }\n      }\n    }\n  }\n";
 export declare const AVAILABLE_QUEST_IDS = "\n  query AvailableQuestIds {\n    availableQuests {\n      ... on Node {\n        id\n      }\n    }\n  }\n";
 export declare const CHECK_IN_DAILY_QUEST = "\n  mutation checkInDailyCheckInQuest($input: CheckInDailyCheckInQuestInput!) {\n    checkInDailyCheckInQuest(input: $input)\n  }\n";
 export declare const TOP_WINS = "\n  query TopWins($first: Int) {\n    topWins(first: $first) {\n      id\n      game {\n        id\n        name\n        type\n        provider\n      }\n      member {\n        id\n        name\n      }\n      multiplier\n      payout\n    }\n  }\n";

package/dist/services/queries.js

@@ -2301,6 +2301,31 @@ export const WAGERING_FRAGMENT = /* GraphQL */ `
     dateTimeCreated
   }
 `;
+export const JOURNEY_FRAGMENT = /* GraphQL */ `
+  fragment JourneyQuestFragment on JourneyQuest {
+    id
+    name
+    description
+    program {
+      ...QuestProgramFragment
+    }
+    status
+    type
+    progressPercentage
+    bonus
+    bonusAwarded
+    dateTimeCreated
+    endDateTime
+    milestones {
+      id
+      type
+      name
+      bonusAmount
+      cleared
+      description
+    }
+  }
+`;
 export const ONBOARDING_QUEST_FRAGMENT = /* GraphQL */ `
   fragment OnboardingQuestFragment on OnboardingQuest {
     id
@@ -2324,6 +2349,7 @@ export const AVAILABLE_QUESTS = /* GraphQL */ `
   ${WAGERING_FRAGMENT}
   ${DAILY_CHECKIN_FRAGMENT}
   ${ONBOARDING_QUEST_FRAGMENT}
+  ${JOURNEY_FRAGMENT}
 
   query AvailableQuests {
     availableQuests {
@@ -2337,6 +2363,9 @@ export const AVAILABLE_QUESTS = /* GraphQL */ `
         ... on OnboardingQuest {
           ...OnboardingQuestFragment
         }
+        ... on JourneyQuest {
+          ...JourneyQuestFragment
+        }
       }
     }
   }

package/dist/types/index.d.ts

@@ -684,7 +684,7 @@ export interface Message {
 }
 export type OnboardingStatus = 'PENDING' | 'SKIPPED' | 'COMPLETED';
 export type OnboardingPlayerExperience = 'ROOKIE' | 'VETERAN';
-export type QuestType = 'WAGERING' | 'DAILY_CHECKIN' | 'ONBOARDING';
+export type QuestType = 'WAGERING' | 'DAILY_CHECKIN' | 'ONBOARDING' | 'JOURNEY';
 export type QuestStatus = 'IN_PROGRESS' | 'COMPLETED' | 'FAILED';
 export type QuestProgramStatus = 'ACTIVE' | 'INACTIVE' | 'DELETED';
 export interface QuestProgram {
@@ -694,6 +694,15 @@ export interface QuestProgram {
     description: string;
 }
 export type MemberStatus = 'ACTIVE' | 'BLACKLISTED' | 'SUSPENDED';
+export type JourneyQuestMilestoneType = 'REGISTRATION' | 'ACCOUNT_VERIFICATION' | 'FIRST_DEPOSIT' | 'IOS_FIRST_LOGIN' | 'ANDROID_FIRST_LOGIN' | 'CUSTOM';
+export interface JourneyQuestMilestone {
+    id: string;
+    type: JourneyQuestMilestoneType;
+    name: string;
+    bonusAmount: string;
+    cleared: boolean;
+    description: string;
+}
 export interface Quest {
     id: string;
     name: string;

package/package.json

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

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

@@ -1,12 +0,0 @@
-import type { ImageProps } from 'next/image';
-export interface BannerEntry {
-    src: ImageProps['src'];
-    redirectUrl?: string;
-}
-export interface BannerProps {
-    banners: BannerEntry[];
-    imageWidth?: number | [mobile: number, desktop: number];
-    imageHeight?: number | [mobile: number, desktop: number];
-    className?: string;
-}
-export declare function Banner__client(props: BannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Banner/Banner.client.js

@@ -1,49 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import emblaCarouselAutoplay from 'embla-carousel-autoplay';
-import useEmblaCarousel, {} from 'embla-carousel-react';
-import isMobile from 'is-mobile';
-import Image from 'next/image';
-import Link from 'next/link';
-import { Fragment, useEffect, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { dataAttr } from '../../utils/dataAttr.js';
-export function Banner__client(props) {
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-        loop: true,
-        align: 'start',
-    }, [
-        emblaCarouselAutoplay({
-            playOnInit: true,
-            delay: 5000,
-        }),
-    ]);
-    const [currentIndex, setCurrentIndex] = useState(0);
-    useEffect(() => {
-        function handler(detail) {
-            setCurrentIndex(detail?.selectedScrollSnap() ?? 0);
-        }
-        emblaApi?.on('scroll', handler);
-        emblaApi?.on('init', handler);
-        return () => {
-            emblaApi?.on('init', handler);
-            emblaApi?.off('scroll', handler);
-        };
-    }, [emblaApi]);
-    const imageWidth = !props.imageWidth
-        ? [400, 1200]
-        : Array.isArray(props.imageWidth)
-            ? props.imageWidth
-            : [props.imageWidth, props.imageWidth];
-    const imageHeight = !props.imageHeight
-        ? [225, 300]
-        : Array.isArray(props.imageHeight)
-            ? props.imageHeight
-            : [props.imageHeight, props.imageHeight];
-    return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
-                        const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0 }));
-                        return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
-                    }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
-                        emblaApi?.scrollTo(index);
-                    }, "aria-label": `Go to slide ${index + 1}`, "data-active": dataAttr(index === currentIndex) }, index))) })] }));
-}

package/dist/third-parties/FacebookPixel/FacebookPixel.d.ts

@@ -1,4 +0,0 @@
-export interface FacebookPixelProps {
-    fbId: string;
-}
-export declare function FacebookPixel(props: FacebookPixelProps): null;

package/dist/third-parties/FacebookPixel/FacebookPixel.js

@@ -1,4 +0,0 @@
-export function FacebookPixel(props) {
-    console.log(props);
-    return null;
-}

package/dist/third-parties/FacebookPixel/api.js

@@ -1 +0,0 @@
-"use strict";

package/dist/third-parties/FacebookPixel/index.d.ts

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

package/dist/third-parties/FacebookPixel/index.js

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

package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.d.ts

@@ -1,4 +0,0 @@
-export interface GoogleRecaptchaProps {
-    siteKey: string;
-}
-export declare function GoogleRecaptcha(props: GoogleRecaptchaProps): null;

package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.js

@@ -1,4 +0,0 @@
-export function GoogleRecaptcha(props) {
-    console.log(props);
-    return null;
-}

package/dist/third-parties/GoogleRecaptcha/api.js

@@ -1 +0,0 @@
-"use strict";

package/dist/third-parties/GoogleRecaptcha/index.d.ts

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

package/dist/third-parties/GoogleRecaptcha/index.js

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

package/dist/third-parties/index.d.ts

@@ -1,2 +0,0 @@
-export * from './FacebookPixel';
-export * from './GoogleRecaptcha';

package/dist/third-parties/index.js

@@ -1,2 +0,0 @@
-export * from './FacebookPixel/index.js';
-export * from './GoogleRecaptcha/index.js';