@opexa/portal-components 0.0.448 → 0.0.450

package/dist/client/hooks/useCreateGCashStandardCashInWithdrawal.d.ts

@@ -0,0 +1,4 @@
+import type { SetOptional } from "type-fest";
+import { type CreateGCashWithdrawalInput } from "../../services/wallet";
+import type { Mutation } from "../../types";
+export declare const useCreateGCashStandardCashInWithdrawalMutation: Mutation<string, SetOptional<CreateGCashWithdrawalInput, "id">>;

package/dist/client/hooks/useCreateGCashStandardCashInWithdrawal.js

@@ -0,0 +1,28 @@
+import { ObjectId } from "@opexa/object-id";
+import { useMutation } from "@tanstack/react-query";
+import invariant from "tiny-invariant";
+import { ObjectType } from "../../services/ObjectType.js";
+import { createGCashWithdrawal, } from "../../services/wallet.js";
+import { getCreateGCashStandardCashInWithdrawalMutationKey } from "../../utils/mutationKeys.js";
+import { getSession } from "../services/getSession.js";
+export const useCreateGCashStandardCashInWithdrawalMutation = (config) => {
+    const mutation = useMutation({
+        ...config,
+        mutationKey: getCreateGCashStandardCashInWithdrawalMutationKey(),
+        mutationFn: async (input) => {
+            const id = input.id ?? ObjectId.generate(ObjectType.Withdrawal).toString();
+            const session = await getSession();
+            invariant(session.status === "authenticated");
+            await createGCashWithdrawal({ ...input, id }, {
+                headers: {
+                    Authorization: `Bearer ${session.token}`,
+                    ...(session.domain && {
+                        Domain: session.domain,
+                    }),
+                },
+            });
+            return id;
+        },
+    });
+    return mutation;
+};

package/dist/client/hooks/useCreateGCashWithdrawalMutation.d.ts

@@ -1,4 +1,4 @@
-import type { SetOptional } from 'type-fest';
-import { type CreateGCashWithdrawalInput } from '../../services/wallet';
-import type { Mutation } from '../../types';
-export declare const useCreateGCashWithdrawalMutation: Mutation<string, SetOptional<CreateGCashWithdrawalInput, 'id'>>;
+import type { SetOptional } from "type-fest";
+import { type CreateGCashWithdrawalInput } from "../../services/wallet";
+import type { Mutation } from "../../types";
+export declare const useCreateGCashWithdrawalMutation: Mutation<string, SetOptional<CreateGCashWithdrawalInput, "id">>;

package/dist/client/hooks/useCreateGCashWithdrawalMutation.js

@@ -1,10 +1,10 @@
-import { ObjectId } from '@opexa/object-id';
-import { useMutation } from '@tanstack/react-query';
-import invariant from 'tiny-invariant';
-import { ObjectType } from '../../services/ObjectType.js';
-import { createGCashWithdrawal, } from '../../services/wallet.js';
-import { getCreateGCashWithdrawalMutationKey } from '../../utils/mutationKeys.js';
-import { getSession } from '../services/getSession.js';
+import { ObjectId } from "@opexa/object-id";
+import { useMutation } from "@tanstack/react-query";
+import invariant from "tiny-invariant";
+import { ObjectType } from "../../services/ObjectType.js";
+import { createGCashWithdrawal, } from "../../services/wallet.js";
+import { getCreateGCashWithdrawalMutationKey } from "../../utils/mutationKeys.js";
+import { getSession } from "../services/getSession.js";
 export const useCreateGCashWithdrawalMutation = (config) => {
     const mutation = useMutation({
         ...config,
@@ -12,7 +12,7 @@ export const useCreateGCashWithdrawalMutation = (config) => {
         mutationFn: async (input) => {
             const id = input.id ?? ObjectId.generate(ObjectType.Withdrawal).toString();
             const session = await getSession();
-            invariant(session.status === 'authenticated');
+            invariant(session.status === "authenticated");
             await createGCashWithdrawal({ ...input, id }, {
                 headers: {
                     Authorization: `Bearer ${session.token}`,

package/dist/components/DepositWithdrawal/Withdrawal/GCashWithdrawal/GCashWithdrawal.js

@@ -1,54 +1,70 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { zodResolver } from '@hookform/resolvers/zod';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCreateGCashWithdrawalMutation } from '../../../../client/hooks/useCreateGCashWithdrawalMutation.js';
-import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
-import { useLocaleInfo } from '../../../../client/hooks/useLocaleInfo.js';
-import { useMobileNumberParser } from '../../../../client/hooks/useMobileNumberParser.js';
-import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
-import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
-import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
-import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
-import { EyeIcon } from '../../../../icons/EyeIcon.js';
-import { EyeOffIcon } from '../../../../icons/EyeOffIcon.js';
-import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
-import { XIcon } from '../../../../icons/XIcon.js';
-import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
-import { Button } from '../../../../ui/Button/index.js';
-import { Field } from '../../../../ui/Field/index.js';
-import { NumberInput } from '../../../../ui/NumberInput/index.js';
-import { PasswordInput } from '../../../../ui/PasswordInput/index.js';
-import { Portal } from '../../../../ui/Portal/index.js';
-import { parseDecimal } from '../../../../utils/parseDecimal.js';
-import { AmountChoices } from '../../AmountChoices.js';
-import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
-import { explainError } from '../../utils.js';
-import { TransactionPasswordNotSet } from '../TransactionPasswordNotSet.js';
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+import { useShallow } from "zustand/shallow";
+import { useCreateGCashWithdrawalMutation } from "../../../../client/hooks/useCreateGCashWithdrawalMutation.js";
+import { useCreateGCashStandardCashInWithdrawalMutation } from "../../../../client/hooks/useCreateGCashStandardCashInWithdrawal.js";
+import { useGlobalStore } from "../../../../client/hooks/useGlobalStore.js";
+import { useLocaleInfo } from "../../../../client/hooks/useLocaleInfo.js";
+import { useMobileNumberParser } from "../../../../client/hooks/useMobileNumberParser.js";
+import { usePaymentSettingsQuery } from "../../../../client/hooks/usePaymentSettingsQuery.js";
+import { AlertCircleIcon } from "../../../../icons/AlertCircleIcon.js";
+import { ChevronDownIcon } from "../../../../icons/ChevronDownIcon.js";
+import { ChevronUpIcon } from "../../../../icons/ChevronUpIcon.js";
+import { EyeIcon } from "../../../../icons/EyeIcon.js";
+import { EyeOffIcon } from "../../../../icons/EyeOffIcon.js";
+import { SpinnerIcon } from "../../../../icons/SpinnerIcon.js";
+import { XIcon } from "../../../../icons/XIcon.js";
+import { AlertDialog } from "../../../../ui/AlertDialog/index.js";
+import { Button } from "../../../../ui/Button/index.js";
+import { Field } from "../../../../ui/Field/index.js";
+import { NumberInput } from "../../../../ui/NumberInput/index.js";
+import { PasswordInput } from "../../../../ui/PasswordInput/index.js";
+import { Portal } from "../../../../ui/Portal/index.js";
+import { parseDecimal } from "../../../../utils/parseDecimal.js";
+import { AmountChoices } from "../../AmountChoices.js";
+import { useDepositWithdrawalPropsContext } from "../../DepositWithdrawalContext.js";
+import { explainError } from "../../utils.js";
+import { TransactionPasswordNotSet } from "../TransactionPasswordNotSet.js";
+import { useFeatureFlag } from "../../../../client/hooks/useFeatureFlag.js";
 export function GCashWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
+    const featureFlag = useFeatureFlag();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         depositWithdrawal: ctx.depositWithdrawal,
         hasPendingBonus: ctx.pendingBonus,
     })));
-    const [status, setStatus] = useState('waiting');
+    const [status, setStatus] = useState("waiting");
     const localeInfo = useLocaleInfo();
     const mobileNumberParser = useMobileNumberParser();
-    const createWithdrawalMutation = useCreateGCashWithdrawalMutation({
-        onMutate() {
-            setStatus('processing');
-        },
-        onSuccess() {
-            setStatus('success');
-            form.reset();
-        },
-        onError() {
-            setStatus('failed');
-        },
-    });
+    const createWithdrawalMutation = featureFlag.enabled
+        ? useCreateGCashStandardCashInWithdrawalMutation({
+            onMutate() {
+                setStatus("processing");
+            },
+            onSuccess() {
+                setStatus("success");
+                form.reset();
+            },
+            onError() {
+                setStatus("failed");
+            },
+        })
+        : useCreateGCashWithdrawalMutation({
+            onMutate() {
+                setStatus("processing");
+            },
+            onSuccess() {
+                setStatus("success");
+                form.reset();
+            },
+            onError() {
+                setStatus("failed");
+            },
+        });
     const paymentSettingsQuery = usePaymentSettingsQuery();
     const paymentSettings = paymentSettingsQuery.data;
     const gatewaySettings = paymentSettings?.gcashWithdrawalGatewaySettings;
@@ -59,7 +75,7 @@ export function GCashWithdrawal() {
             const n = parseDecimal(val, 0);
             if (n < minimumAmount) {
                 ctx.addIssue({
-                    type: 'number',
+                    type: "number",
                     code: z.ZodIssueCode.too_small,
                     inclusive: true,
                     minimum: minimumAmount,
@@ -68,7 +84,7 @@ export function GCashWithdrawal() {
             }
             if (n > maximumAmount) {
                 ctx.addIssue({
-                    type: 'number',
+                    type: "number",
                     code: z.ZodIssueCode.too_big,
                     inclusive: true,
                     maximum: maximumAmount,
@@ -78,27 +94,27 @@ export function GCashWithdrawal() {
         }),
         password: z
             .string()
-            .min(8, 'Password must be 8 or more characters')
-            .max(64, 'Password must be not be more than 64 characters'),
+            .min(8, "Password must be 8 or more characters")
+            .max(64, "Password must be not be more than 64 characters"),
         mobileNumber: z
             .string()
-            .regex(localeInfo.mobileNumber.pattern, 'Invalid mobile number'),
+            .regex(localeInfo.mobileNumber.pattern, "Invalid mobile number"),
     });
     const form = useForm({
-        mode: 'all',
+        mode: "all",
         resolver: zodResolver(definition),
         defaultValues: {
-            amount: '0',
-            password: '',
-            mobileNumber: '',
+            amount: "0",
+            password: "",
+            mobileNumber: "",
         },
     });
     useEffect(() => {
         if (minimumAmount) {
             form.reset({
                 amount: minimumAmount.toString(),
-                password: '',
-                mobileNumber: '',
+                password: "",
+                mobileNumber: "",
             });
         }
     }, [form, minimumAmount]);
@@ -113,25 +129,25 @@ export function GCashWithdrawal() {
             transactionPassword: data.password,
         });
     });
-    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3.5 size-5" }), _jsx(Field.Input, { className: "pl-10.5", ...form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
+    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3.5 size-5" }), _jsx(Field.Input, { className: "pl-10.5", ...form.register("mobileNumber") })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
                                 o.field.onChange(details.value);
                             }, formatOptions: {
                                 maximumFractionDigits: 2,
                                 minimumFractionDigits: 0,
-                            }, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to withdraw" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
-                    form.setValue('amount', value.toString(), {
+                            }, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to withdraw" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch("amount"), 0), onChange: (value) => {
+                    form.setValue("amount", value.toString(), {
                         shouldTouch: true,
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...form.register("password") }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["Upon withdrawing, you agree to our", " ", _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? "/terms-of-use", onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), " ", "and", " ", _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? "/privacy-policy", onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== "waiting", onOpenChange: (details) => {
                     if (!details.open) {
-                        setStatus('waiting');
+                        setStatus("waiting");
                     }
-                }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
-                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
-                                                        'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
-                                                        explainError(createWithdrawalMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === "processing", children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === "processing" && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === "success" && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === "failed" && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === "processing" && "Processing Withdraw", status === "success" && "Withdrawal Submitted", status === "failed" && "Withdraw Failed"] }), _jsxs(AlertDialog.Description, { children: [status === "processing" &&
+                                                        "We're verifying your account and amount. Please hold a moment.", status === "success" &&
+                                                        "Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.", status === "failed" &&
+                                                        explainError(createWithdrawalMutation.error?.name)] })] }), (status === "failed" || status === "success") && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
                                                     api.setOpen(false);
-                                                }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
+                                                }, children: status === "failed" ? "Try Again" : "Ok" })) }) }))] }) })] }) })] }));
 }

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;