@opexa/portal-components 0.0.448 → 0.0.449

package/dist/components/Quests/JourneyQuest.js

@@ -20,9 +20,17 @@ import { formatNumber } from '../../utils/formatNumber.js';
 import { getPercentage } from '../../utils/getPercentage.js';
 import { useQuestContext } from './QuestsContext.js';
 import { RemainingTime } from './RemainingTime.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
+import { FacebookSignInTrigger } from '../SignIn/FacebookSignInTrigger.js';
+import dynamic from 'next/dynamic';
+const GoogleSignInButton = dynamic(() => import('../SignIn/GoogleSignInTrigger.js').then((m) => m.GoogleSignInTrigger), {
+    ssr: false,
+    loading: () => null,
+});
 export function JourneyQuest() {
     const disclosure = useDisclosure();
     const quest = useQuestContext();
+    const featureFlag = useFeatureFlag();
     const { milestones, totalMilestones, currentMilestone, progressPercentage } = useMemo(() => {
         if (!quest?.milestones) {
             return {
@@ -32,7 +40,13 @@ export function JourneyQuest() {
                 progressPercentage: 0,
             };
         }
-        const transformedMilestones = quest.milestones.map((milestone) => ({
+        const filteredMilestones = quest.milestones.filter((milestone) => {
+            if (!featureFlag.enabled) {
+                return milestone.type !== 'LINK_FACEBOOK_ACCOUNT' && milestone.type !== 'LINK_GOOGLE_ACCOUNT';
+            }
+            return true;
+        });
+        const transformedMilestones = filteredMilestones.map((milestone) => ({
             key: milestone.type,
             label: milestone.name,
             bonus: milestone.bonusAmount
@@ -42,8 +56,8 @@ export function JourneyQuest() {
             id: milestone.id,
             description: milestone.description,
         }));
-        const completedCount = quest.milestones.filter((m) => m.cleared).length;
-        const total = quest.milestones.length;
+        const completedCount = filteredMilestones.filter((m) => m.cleared).length;
+        const total = filteredMilestones.length;
         return {
             milestones: transformedMilestones,
             totalMilestones: total,
@@ -85,7 +99,7 @@ function Rules(props) {
             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: "mx-auto min-h-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-5", 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: "font-semibold text-lg text-text-primary-900", children: quest?.name || 'Quest' }), _jsx("p", { children: quest?.description ||
+    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: "mx-auto min-h-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-5 mt-40", 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: "font-semibold text-lg text-text-primary-900", 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: "flex flex-col space-y-2.5 rounded-xl bg-bg-tertiary p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "font-medium text-base text-white", children: milestone.label }), milestone.isCompleted && (_jsx("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: "Complete" }))] }), milestone.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
                                                     __html: milestone.description,
                                                 } })) : milestone.bonus ? (_jsxs("p", { className: "ml-1", children: [milestone.key === 'REGISTRATION' &&
@@ -107,7 +121,9 @@ function Rules(props) {
                                                     }
                                                 }, "aria-label": `Complete ${milestone.label}`, children: [milestone.key === 'ACCOUNT_VERIFICATION' ? (_jsx(FileCheck02Icon, { className: "size-5" })) : (_jsx(CoinsHandIcon, { className: "size-5" })), 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: "w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg 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!"] }) })) }))] })] }) })] }) }));
+                                                        : 'Verify Account'] })), !milestone.isCompleted &&
+                                                milestone.key === 'LINK_FACEBOOK_ACCOUNT' && (_jsx(FacebookSignInTrigger, { text: 'Link Facebook Account', className: 'items-center justify-center rounded-md font-semibold shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none h-10 gap-md px-3 text-sm flex w-full bg-button-primary-bg text-button-primary-fg' })), !milestone.isCompleted &&
+                                                milestone.key === 'LINK_GOOGLE_ACCOUNT' && (_jsx(GoogleSignInButton, { text: 'Link Google Account', className: 'items-center justify-center rounded-md font-semibold shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none h-10 gap-md px-3 text-sm flex w-full bg-button-primary-bg text-button-primary-fg' }))] }, 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: "w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg 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/SignIn/FacebookSignInTrigger.d.ts

@@ -1 +1,6 @@
-export declare const FacebookSignInTrigger: () => import("react/jsx-runtime").JSX.Element | null;
+interface FacebookSignInTriggerProps {
+    text?: string;
+    className?: string;
+}
+export declare const FacebookSignInTrigger: (props: FacebookSignInTriggerProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/SignIn/FacebookSignInTrigger.js

@@ -9,7 +9,7 @@ import { AUTH_ENDPOINT, PLATFORM_CODE } from '../../constants/index.js';
 import { FacebookIcon } from '../../icons/FacebookIcon.js';
 import { httpRequest } from '../../services/httpRequest.js';
 import { Button } from '../../ui/Button/index.js';
-export const FacebookSignInTrigger = () => {
+export const FacebookSignInTrigger = (props) => {
     const signInStore = useGlobalStore(useShallow((ctx) => ctx.signIn));
     const signIn = useSignInMutation({
         onError: () => {
@@ -46,6 +46,6 @@ export const FacebookSignInTrigger = () => {
                 description: 'Failed to sign in with Facebook. Please try again.',
             });
         }, render: ({ onClick }) => {
-            return (_jsxs(Button, { variant: "outline", onClick: onClick, colorScheme: "gray", className: "mt-lg border-border-primary bg-bg-primary text-text-secondary-700", children: [_jsx(FacebookIcon, { className: "size-6" }), "Continue with Facebook"] }));
+            return (_jsxs(Button, { variant: "outline", 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'] }));
         } }));
 };

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

@@ -1,5 +1,7 @@
 import type { ComponentPropsWithRef } from 'react';
 export interface GoogleSignInTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
+    text?: string;
+    className?: string;
 }
 export declare const GoogleSignInTrigger: (props: GoogleSignInTriggerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SignIn/GoogleSignInTrigger.js

@@ -18,7 +18,7 @@ export const GoogleSignInTrigger = (props) => {
         return null;
     return (_jsx(GoogleOAuthProvider, { clientId: googleClientId, children: _jsx(Trigger, { ...props }) }));
 };
-const Trigger = ({ children, disabled, asChild, onClick, ...props }) => {
+const Trigger = ({ children, disabled, asChild, onClick, text, className, ...props }) => {
     const signInStore = useGlobalStore(useShallow((ctx) => ctx.signIn));
     const signIn = useSignInMutation({
         onError: () => {
@@ -56,5 +56,5 @@ const Trigger = ({ children, disabled, asChild, onClick, ...props }) => {
     return (_jsx(ark.button, { type: "button", onClick: (e) => {
             onClick?.(e);
             signInGoogle();
-        }, asChild: !children ? true : asChild, disabled: signIn.isPending || disabled, ...props, children: children ?? (_jsxs(Button, { variant: "outline", colorScheme: "gray", className: "bg-bg-primary", children: [_jsx(GoogleIcon, { className: "size-6" }), "Continue with Google"] })) }));
+        }, asChild: !children ? true : asChild, disabled: signIn.isPending || disabled, ...props, children: children ?? (_jsxs(Button, { variant: "outline", colorScheme: "gray", className: `bg-bg-primary ${className}`, children: [_jsx(GoogleIcon, { className: "size-6" }), text ?? 'Continue with Google'] })) }));
 };

package/dist/constants/EnvVar.d.ts

@@ -1,5 +1,5 @@
 export declare const SITE_ID: string;
 export declare const PLATFORM_ID: string;
 export declare const PLATFORM_CODE: string;
-export declare const ENVIRONMENT: "development" | "production";
+export declare const ENVIRONMENT: "production" | "development";
 export declare const INTERNALS__REPORT_WEB_VITALS: boolean;

package/dist/types/index.d.ts

@@ -703,7 +703,7 @@ 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 type JourneyQuestMilestoneType = 'REGISTRATION' | 'ACCOUNT_VERIFICATION' | 'FIRST_DEPOSIT' | 'IOS_FIRST_LOGIN' | 'ANDROID_FIRST_LOGIN' | 'LINK_FACEBOOK_ACCOUNT' | 'LINK_GOOGLE_ACCOUNT' | 'CUSTOM';
 export interface JourneyQuestMilestone {
     id: string;
     type: JourneyQuestMilestoneType;
@@ -735,6 +735,7 @@ export interface Quest {
     bonusAmount?: string;
     firstDepositCompleted?: boolean;
     accountVerificationCompleted?: boolean;
+    milestones?: JourneyQuestMilestone[];
 }
 interface TopWinGame {
     id: string;