@opexa/portal-components 0.0.451 → 0.0.454

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
-        view: "vca" | "form";
+        view: "form" | "vca";
         status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
@@ -13,7 +13,7 @@ export declare const OnlineBankDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useOnlineBankDepositContext: () => {
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        view: "qrCode" | "form";
+        view: "form" | "qrCode";
         status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
@@ -13,7 +13,7 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '../../../../types';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

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

@@ -1,35 +1,35 @@
 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 { 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";
+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 { useCreateGCashStandardCashInWithdrawalMutation } from '../../../../client/hooks/useCreateGCashStandardCashInWithdrawal.js';
+import { useCreateGCashWithdrawalMutation } from '../../../../client/hooks/useCreateGCashWithdrawalMutation.js';
+import { useFeatureFlag } from '../../../../client/hooks/useFeatureFlag.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';
 export function GCashWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const featureFlag = useFeatureFlag();
@@ -37,34 +37,33 @@ export function GCashWithdrawal() {
         depositWithdrawal: ctx.depositWithdrawal,
         hasPendingBonus: ctx.pendingBonus,
     })));
-    const [status, setStatus] = useState("waiting");
+    const [status, setStatus] = useState('waiting');
     const localeInfo = useLocaleInfo();
     const mobileNumberParser = useMobileNumberParser();
-    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 createWithdrawalMutationNext = useCreateGCashStandardCashInWithdrawalMutation({
+        onMutate() {
+            setStatus('processing');
+        },
+        onSuccess() {
+            setStatus('success');
+            form.reset();
+        },
+        onError() {
+            setStatus('failed');
+        },
+    });
+    const createWithdrawalMutation = useCreateGCashWithdrawalMutation({
+        onMutate() {
+            setStatus('processing');
+        },
+        onSuccess() {
+            setStatus('success');
+            form.reset();
+        },
+        onError() {
+            setStatus('failed');
+        },
+    });
     const paymentSettingsQuery = usePaymentSettingsQuery();
     const paymentSettings = paymentSettingsQuery.data;
     const gatewaySettings = paymentSettings?.gcashWithdrawalGatewaySettings;
@@ -75,7 +74,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,
@@ -84,7 +83,7 @@ export function GCashWithdrawal() {
             }
             if (n > maximumAmount) {
                 ctx.addIssue({
-                    type: "number",
+                    type: 'number',
                     code: z.ZodIssueCode.too_big,
                     inclusive: true,
                     maximum: maximumAmount,
@@ -94,27 +93,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]);
@@ -123,31 +122,40 @@ export function GCashWithdrawal() {
             globalStore.hasPendingBonus.setOpen(true);
             return;
         }
-        createWithdrawalMutation.mutate({
-            amount: data.amount,
-            recipientMobileNumber: mobileNumberParser.format(data.mobileNumber),
-            transactionPassword: data.password,
-        });
+        if (featureFlag.enabled) {
+            createWithdrawalMutationNext.mutate({
+                amount: data.amount,
+                recipientMobileNumber: mobileNumberParser.format(data.mobileNumber),
+                transactionPassword: data.password,
+            });
+        }
+        if (!featureFlag.enabled) {
+            createWithdrawalMutation.mutate({
+                amount: data.amount,
+                recipientMobileNumber: mobileNumberParser.format(data.mobileNumber),
+                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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
 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 { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
@@ -18,11 +20,9 @@ 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 { FacebookSignInTrigger } from '../SignIn/FacebookSignInTrigger.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,
@@ -42,7 +42,8 @@ export function JourneyQuest() {
         }
         const filteredMilestones = quest.milestones.filter((milestone) => {
             if (!featureFlag.enabled) {
-                return milestone.type !== 'LINK_FACEBOOK_ACCOUNT' && milestone.type !== 'LINK_GOOGLE_ACCOUNT';
+                return (milestone.type !== 'LINK_FACEBOOK_ACCOUNT' &&
+                    milestone.type !== 'LINK_GOOGLE_ACCOUNT');
             }
             return true;
         });
@@ -66,7 +67,7 @@ export function JourneyQuest() {
                 ? parseFloat(quest.progressPercentage)
                 : getPercentage(completedCount, total),
         };
-    }, [quest]);
+    }, [quest, featureFlag]);
     const progressValue = useMemo(() => {
         return (progressPercentage || getPercentage(currentMilestone, totalMilestones));
     }, [progressPercentage, currentMilestone, totalMilestones]);
@@ -99,7 +100,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 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 ||
+    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 mt-40 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 ||
                                             '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' &&
@@ -122,8 +123,8 @@ 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.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!"] }) })) }))] })] }) })] }) }));
+                                                milestone.key === 'LINK_FACEBOOK_ACCOUNT' && (_jsx(FacebookSignInTrigger, { text: "Link Facebook 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 &&
+                                                milestone.key === 'LINK_GOOGLE_ACCOUNT' && (_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.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/Quests/MultiWageringQuest.d.ts

@@ -0,0 +1 @@
+export declare function MultiWageringQuest(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/MultiWageringQuest.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { Lock01Icon } from '../../icons/Lock01Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { Progress } from '../../ui/Progress/index.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { useQuestContext } from './QuestsContext.js';
+import { RemainingTime } from './RemainingTime.js';
+export function MultiWageringQuest() {
+    const disclosure = useDisclosure();
+    const quest = useQuestContext();
+    const { stages, totalStage, currentStage, progressPercentage } = useMemo(() => {
+        const currentStage = quest.stages.filter((m) => m.cleared).length;
+        if (!quest?.stages) {
+            return {
+                stages: [],
+                totalStage: 0,
+                currentStage: 0,
+                progressPercentage: 0,
+            };
+        }
+        const transformedStages = quest.stages.map((stage) => ({
+            bonusAmount: stage.bonusAmount,
+            bonusTurnoverRequirementMultiplier: stage.bonusTurnoverRequirementMultiplier,
+            cleared: stage.cleared,
+            dateTimeCleared: stage.dateTimeCleared,
+            targetTurnover: stage.targetTurnover,
+        }));
+        const total = quest.stages.length;
+        return {
+            stages: transformedStages,
+            totalStage: total,
+            currentStage: currentStage === 0 ? 1 : currentStage,
+            progressPercentage: +quest.progressPercentage,
+        };
+    }, [quest]);
+    const handleViewDetails = useCallback(() => {
+        disclosure.setOpen(true);
+    }, [disclosure]);
+    const localeInfo = useLocaleInfo();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "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", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-center justify-between", children: [_jsx(RemainingTime, { endOfDay: true }), quest.status === 'COMPLETED' && (_jsx(Badge.Root, { colorScheme: "success", size: "lg", round: false, children: _jsxs(Badge.Label, { children: ["Final Bonus:", ' ', formatNumber(quest.bonus, {
+                                                    currency: localeInfo.currency.code,
+                                                })] }) }))] }), _jsx("p", { className: "font-semibold text-xl", children: quest?.name || 'Journey Quest' }), _jsx("div", { className: "text-sm", dangerouslySetInnerHTML: {
+                                    __html: quest?.description ||
+                                        'Ready for a challenge? Complete them all and get amazing rewards!',
+                                } }), _jsxs("div", { className: "flex items-center justify-between pt-5", children: [_jsxs("p", { className: "text-sm", children: ["Progress: ", quest.progressPercentage, "%"] }), _jsxs("p", { className: "text-sm", children: [quest.turnover, _jsxs("span", { className: "text-[#667085]", children: ["/", quest.targetTurnover, " PHP"] })] })] }), _jsx(Progress.Root, { max: 100, className: "h-2 rounded-full bg-bg-primary", value: progressPercentage, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "text-sm text-text-quarterary-brand", children: ["Stage ", currentStage, " of ", totalStage] }), _jsx(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: _jsxs(Badge.Label, { className: "flex items-center justify-center text-xs", children: [_jsx("p", { className: "flex h-[10px] items-center justify-center", children: "+" }), ' ', formatNumber(quest.stages?.reduce((curr, prev) => {
+                                                    return curr + Number(prev.bonusAmount || 0);
+                                                }, 0), {
+                                                    currency: localeInfo.currency.code,
+                                                    maxDecimalPlaces: 0,
+                                                    minDecimalPlaces: 0,
+                                                }), ' ', "Bonus"] }) })] })] }), _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(Stages, { open: disclosure.open, onOpenChange: disclosure.setOpen, quest: quest, stages: stages })] }));
+}
+function Stages(props) {
+    const [open, setOpen] = useControllableState({
+        value: props.open,
+        defaultValue: props.defaultOpen ?? false,
+        onChange: props.onOpenChange,
+    });
+    const currentStage = useMemo(() => {
+        const stage = props?.stages?.findLastIndex((stage) => stage.cleared) ?? 0;
+        return stage !== -1 ? stage + 1 : 1;
+    }, [props.stages]);
+    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 mt-40 min-h-auto min-w-[23rem] max-w-[25rem] 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: props.quest?.name || 'Quest' }), _jsx("div", { dangerouslySetInnerHTML: {
+                                            __html: props.quest?.description ||
+                                                'Ready for a challenge? Complete them all and get amazing rewards!',
+                                        } }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: props.stages.map((stage, idx) => {
+                                            if (currentStage >= idx + 1) {
+                                                return (_jsx(QuestWageringStageUnlocked, { data: stage, bonus: stage.bonusAmount, stage: idx, isCompleted: stage.cleared }, idx));
+                                            }
+                                            else {
+                                                return _jsx(QuestWageringStageLocked, { stage: idx }, idx);
+                                            }
+                                        }) }), _jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })] })] }) })] }) }));
+}
+function QuestWageringStageUnlocked({ bonus, stage, data, isCompleted = false, }) {
+    const localeInfo = useLocaleInfo();
+    return (_jsxs("div", { className: "mb-4 flex flex-col justify-between rounded-xl bg-bg-secondary p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx(Badge.Root, { colorScheme: isCompleted ? 'success' : 'blue', size: "md", round: true, children: _jsx(Badge.Label, { children: data.cleared ? 'Completed' : 'Ongoing' }) })] }), _jsxs("div", { className: "mt-2.5 flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", data.cleared ? 100 : 0, "%"] }), _jsx("div", { className: "rounded-[6px] border border-border-secondary bg-bg-secondary-alt px-1.5 py-0.5", children: _jsxs("p", { className: "font-medium text-xs leading-tight", children: ["+", formatNumber(bonus, {
+                                    currency: localeInfo.currency.code,
+                                }), ' ', "Bonus"] }) })] }), _jsx(Progress.Root, { max: 100, className: "mt-2 h-2 rounded-full bg-bg-primary", value: data.cleared ? 100 : 0, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, { className: "bg-utility-brand-600" }) }) })] }));
+}
+function QuestWageringStageLocked({ stage }) {
+    return (_jsxs("div", { className: "mb-4 flex items-center justify-between rounded-xl bg-bg-secondary p-3", children: [_jsxs("p", { className: "font-medium", children: ["Stage ", stage + 1] }), _jsx("div", { className: "flex items-center justify-center rounded-full border border-border-lock bg-bg-lock p-1", children: _jsx(Lock01Icon, { className: "size-3 stroke-3 font-medium text-text-lock" }) })] }));
+}

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

@@ -6,11 +6,13 @@ import { useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { z } from 'zod';
 import { useAvailableQuestsQuery } from '../../client/hooks/useAvailableQuestsQuery.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 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 { MultiWageringQuest } from './MultiWageringQuest.js';
 import { OnboardingQuest } from './OnboardingQuest.js';
 import { QuestContext } from './QuestsContext.js';
 import { WageringQuest, } from './WageringQuest.js';
@@ -19,12 +21,14 @@ const QUEST_COMPONENT_MAP = {
     ONBOARDING: OnboardingQuest,
     WAGERING: WageringQuest,
     JOURNEY: JourneyQuest,
+    MULTI_WAGERING: MultiWageringQuest,
 };
 const TabDefinition = z.enum(['AVAILABLE', 'COMPLETED', 'FAILED']);
 export function Quests__client(props) {
     const { className, style, heading } = props;
     const classNames = isString(className) ? { root: className } : className;
     const [tab, setTab] = useState('AVAILABLE');
+    const featureFlag = useFeatureFlag();
     const questsQuery = useAvailableQuestsQuery({
         refetchInterval: 7500,
     });
@@ -51,7 +55,9 @@ export function Quests__client(props) {
     return (_jsxs("div", { style: style, className: twMerge(classNames?.root), children: [_jsx("h2", { className: "font-semibold text-lg", children: heading ?? 'Quests' }), _jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
                     setTab(TabDefinition.catch('AVAILABLE').parse(details.value));
                 }, className: "mt-3 w-full overflow-x-auto lg:mt-4.5 lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "AVAILABLE", className: "w-full lg:w-fit", children: [_jsx(SegmentGroup.ItemText, { children: "Available" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "COMPLETED", className: "w-full lg:w-fit", children: [_jsx(SegmentGroup.ItemText, { children: "Completed" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "FAILED", className: "w-full lg:w-fit", children: [_jsx(SegmentGroup.ItemText, { children: "Failed" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsx("div", { className: "mt-3xl grid gap-3xl lg:mt-lg lg:grid-cols-3", children: quests.map((quest) => {
-                    const Quest = QUEST_COMPONENT_MAP[quest.type];
+                    const Quest = quest.stages?.length && featureFlag.enabled
+                        ? QUEST_COMPONENT_MAP['MULTI_WAGERING']
+                        : QUEST_COMPONENT_MAP[quest.type];
                     return (_jsx(QuestContext, { value: quest, children: _jsx(Quest, { className: quest.type === 'WAGERING'
                                 ? classNames?.wageringQuest
                                 : quest.type === 'DAILY_CHECKIN'

package/dist/constants/GameProvider.js

@@ -39,6 +39,7 @@ import saba from '../images/game-providers/SABA.png';
 import spinix from '../images/game-providers/SPINIX.png';
 import spribe from '../images/game-providers/SPRIBE.png';
 import yellowbat from '../images/game-providers/YELLOWBAT.png';
+import sagaming from '../images/game-providers/SAGAMING.png';
 export const GAME_PROVIDER_DATA = {
     ALIZE: {
         id: 'ALIZE',
@@ -304,6 +305,12 @@ export const GAME_PROVIDER_DATA = {
         slug: 'big-time-gaming',
         logo: btg,
     },
+    SAGAMING: {
+        id: 'SAGAMING',
+        name: 'SAGAMING',
+        slug: 'sagaming',
+        logo: sagaming,
+    },
 };
 export const GAME_PROVIDERS = Object.values(GAME_PROVIDER_DATA).map(({ id }) => id);
 export const LEGACY_GAME_PROVIDERS = [

package/dist/services/queries.d.ts

@@ -110,10 +110,10 @@ export declare const COMPLETE_ONBOARDING = "\n  mutation CompleteOnboarding($inp
 export declare const SKIP_ONBOARDING = "\n  mutation SkipOnboarding {\n    skipOnboarding\n  }\n";
 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 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    stages{\n       targetTurnover\n       bonusTurnoverRequirementMultiplier\n       bonusAmount\n       cleared\n       dateTimeCleared\n    }\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  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_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    stages{\n       targetTurnover\n       bonusTurnoverRequirementMultiplier\n       bonusAmount\n       cleared\n       dateTimeCleared\n    }\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

@@ -2422,6 +2422,13 @@ export const WAGERING_FRAGMENT = /* GraphQL */ `
     targetTurnover
     endDateTime
     dateTimeCreated
+    stages{
+       targetTurnover
+       bonusTurnoverRequirementMultiplier
+       bonusAmount
+       cleared
+       dateTimeCleared
+    }
   }
 `;
 export const JOURNEY_FRAGMENT = /* GraphQL */ `

package/dist/styles/theme.css

@@ -274,6 +274,9 @@
 
   --color-border-checkbox-primary: #373a41;
   --color-bg-progress-bar-primary: var(--color-bg-primary);
+  --color-bg-lock: #161B26;
+  --color-border-lock: #333741;
+  --color-text-lock: #85888E;
 
 
   --font-sans: var(--font-sans);