@opexa/portal-components 0.0.714 → 0.0.715

package/dist/components/AccountInfo/GoogleDisconnect.d.ts

@@ -0,0 +1,7 @@
+import { type UseDisclosureReturn } from '../../client/hooks/useDisclosure';
+interface GoogleDisconnectProps {
+    onConfirmAction?: (ctx: UseDisclosureReturn) => React.ReactNode;
+    children?: (ctx: UseDisclosureReturn) => React.ReactNode;
+}
+export declare function GoogleDisconnect(props: GoogleDisconnectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AccountInfo/GoogleDisconnect.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDisclosure, } from '../../client/hooks/useDisclosure.js';
+import { LinkBrokenIcon } from '../../icons/LinkBrokenIcon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function GoogleDisconnect(props) {
+    const disclosure = useDisclosure();
+    return (_jsxs(_Fragment, { children: [props.children?.(disclosure), _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: disclosure.open, onOpenChange: (details) => disclosure.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 max-w-[25rem] overflow-y-auto rounded-xl p-6", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(LinkBrokenIcon, {}) }), _jsx("h2", { className: "mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Google Account" }), _jsx("p", { className: "text-center text-sm text-text-tertiary-600 leading-2xl", children: "Are you sure you want to disconnect your Google account? This may affect your ability to log in or sync data." })] }), _jsx("div", { className: "pt-6", children: props.onConfirmAction?.(disclosure) })] }) })] }) })] }));
+}

package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .d.ts

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

package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .js

@@ -0,0 +1,191 @@
+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 invariant from 'tiny-invariant';
+import { z } from 'zod';
+import { useShallow } from 'zustand/shallow';
+import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePromosQuery.js';
+import { useCreateGCashWebpayDepositMutation } from '../../../../client/hooks/useCreateGCashWebpayDepositMutation.js';
+import { useDepositQuery } from '../../../../client/hooks/useDepositQuery.js';
+import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
+import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
+import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
+import { useMemberVerificationQuery } from '../../../../client/hooks/useMemberVerificationQuery.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 { 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 { Portal } from '../../../../ui/Portal/index.js';
+import { parseDecimal } from '../../../../utils/parseDecimal.js';
+import { AmountChoices } from '../../AmountChoices.js';
+import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
+import { AvailablePromos } from '../AvailablePromos.js';
+export function GCashWebpayDeposit() {
+    const depositWithdrawalProps = useDepositWithdrawalPropsContext();
+    const disclosure = useDisclosure();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        depositWithdrawal: ctx.depositWithdrawal,
+        kycVerificationStatus: ctx.kycVerificationStatus,
+    })));
+    const verificationQuery = useMemberVerificationQuery();
+    const verificationStatus = verificationQuery.data?.status ?? 'UNVERIFIED';
+    const [status, setStatus] = useState('waiting');
+    const createDepositMutation = useCreateGCashWebpayDepositMutation({
+        onMutate() {
+            disclosure.setOpen(true);
+            setStatus('processing');
+        },
+        onSuccess(data) {
+            invariant(data.checkoutUrl);
+            window.open(data.checkoutUrl, '_blank', 'noopener,noreferrer');
+            form.reset();
+            disclosure.setOpen(false);
+        },
+        onError() {
+            disclosure.setOpen(true);
+            setStatus('failed');
+        },
+    });
+    const depositQuery = useDepositQuery(createDepositMutation.data?.id, {
+        enabled: createDepositMutation.data != null,
+        refetchInterval(ctx) {
+            if (ctx.state.data?.status === 'CANCELLED' ||
+                ctx.state.data?.status === 'CONFIRMED') {
+                return false;
+            }
+            else {
+                return 2500;
+            }
+        },
+    });
+    useEffect(() => {
+        if (depositQuery.data?.status === 'CANCELLED') {
+            disclosure.setOpen(true);
+            setStatus('failed');
+        }
+        else if (depositQuery.data?.status === 'CONFIRMED') {
+            disclosure.setOpen(true);
+            setStatus('success');
+        }
+    }, [depositQuery.data?.status, disclosure]);
+    const depositsCountQuery = useDepositsCountQuery();
+    const depositsCount = depositsCountQuery.data ?? 0;
+    const paymentSettingsQuery = usePaymentSettingsQuery();
+    const paymentSettings = paymentSettingsQuery.data;
+    const gatewaySettings = paymentSettings?.gcashWebpayDepositGatewaySettings;
+    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
+    const minimumAmount = depositsCount <= 0
+        ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
+        : parseDecimal(gatewaySettings?.minimumAmount, 0);
+    const promosQuery = useAvailablePromosQuery();
+    const promos = promosQuery.data ?? [];
+    const definition = z
+        .object({
+        amount: z.string().superRefine((val, ctx) => {
+            const n = parseDecimal(val, 0);
+            if (n < minimumAmount) {
+                ctx.addIssue({
+                    type: 'number',
+                    code: z.ZodIssueCode.too_small,
+                    inclusive: true,
+                    minimum: minimumAmount,
+                    message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
+                });
+            }
+            if (n > maximumAmount) {
+                ctx.addIssue({
+                    type: 'number',
+                    code: z.ZodIssueCode.too_big,
+                    inclusive: true,
+                    maximum: maximumAmount,
+                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
+                });
+            }
+        }),
+        promo: z.string().optional().nullable(),
+    })
+        .superRefine((value, ctx) => {
+        const promo = promos.find((o) => o.id === value.promo);
+        const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
+        const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
+        const amount = parseDecimal(value.amount, 0);
+        if (promo && amount < promoMinAmount) {
+            ctx.addIssue({
+                path: ['amount'],
+                code: z.ZodIssueCode.custom,
+                message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
+            });
+        }
+        if (promo && amount > promoMaxAmount) {
+            ctx.addIssue({
+                path: ['amount'],
+                code: z.ZodIssueCode.custom,
+                message: `Maximum amount for this promo is ${promoMaxAmount}`,
+            });
+        }
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(definition),
+        defaultValues: {
+            amount: '0',
+            promo: globalStore.depositWithdrawal.promo ?? null,
+        },
+    });
+    useEffect(() => {
+        if (minimumAmount) {
+            form.reset({
+                amount: minimumAmount.toString(),
+                promo: form.getValues('promo') ?? null,
+            });
+        }
+    }, [form, minimumAmount]);
+    return (_jsxs("form", { onSubmit: form.handleSubmit(async (data) => {
+            //handle new kyc process
+            if (verificationStatus === 'PENDING' ||
+                verificationStatus === 'UNVERIFIED' ||
+                verificationStatus === 'REJECTED' ||
+                verificationStatus === 'CREATED') {
+                globalStore.kycVerificationStatus.setOpen(true);
+                return;
+            }
+            else {
+                createDepositMutation.reset();
+                createDepositMutation.mutate({
+                    amount: data.amount.toString(),
+                    promo: data.promo ?? undefined,
+                    successRedirectionUrl: window.location.origin,
+                    cancelRedirectionUrl: window.location.origin,
+                });
+            }
+        }), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, 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 deposit" }), _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-lg" }), _jsx(Controller, { control: form.control, name: "promo", render: (o) => (_jsx(AvailablePromos, { value: o.field.value, onChange: (value) => {
+                        o.field.onChange(value);
+                        globalStore.depositWithdrawal.setPromo(null);
+                    }, className: "mt-3xl" })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: createDepositMutation.isPending, children: "Deposit" }), _jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["By depositing, 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: disclosure.open, onOpenChange: (details) => {
+                    disclosure.setOpen(details.open);
+                }, 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, { 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 Deposit', status === 'success' && 'Deposit Successful', status === 'failed' && 'Deposit Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
+                                                        'Your deposit has been successfully processed.', status === 'failed' &&
+                                                        'Something went wrong while processing your deposit. Please try again or contact support.'] })] }), (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' })) }) }))] }) })] }) })] }));
+}

package/dist/components/KYC/KYCVerificationStatus.lazy.js

@@ -19,18 +19,15 @@ export function KYCVerificationStatus() {
     const icons = status === 'PENDING' ? bellIcon : alertIcon;
     return (_jsx(Dialog.Root, { open: globalStore.kycVerificationStatus.open, onOpenChange: (details) => {
             globalStore.kycVerificationStatus.setOpen(details.open);
-        }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsx(Dialog.Content, { className: "mx-auto h-fit w-[450px] overflow-y-auto rounded-lg bg-bg-primary", children: _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mb-3xl grid h-[200px] w-full place-items-center rounded-xl bg-radial from-40% from-button-primary-bg to-bg-brand-solid", children: _jsx(Image, { src: icons, alt: "icon", className: "w-60 object-contain", draggable: false, width: 120, height: 120 }) }), _jsxs("h1", { className: "font-semibold text-lg text-white", children: [status === 'PENDING' && 'Verification in Progress', status === 'REJECTED' && 'Verification Rejected', status === 'UNVERIFIED' ||
-                                            (status === 'CREATED' && 'Verification Required')] }), _jsxs("p", { className: "mb-4xl text-[#94969C] text-base", children: [status === 'PENDING' &&
+        }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsx(Dialog.Content, { className: "mx-auto h-fit w-[450px] overflow-y-auto rounded-lg bg-bg-primary", children: _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mb-3xl grid h-[200px] w-full place-items-center rounded-xl bg-radial from-40% from-button-primary-bg to-bg-brand-solid", children: _jsx(Image, { src: icons, alt: "icon", className: "w-60 object-contain", draggable: false, width: 120, height: 120 }) }), _jsxs("h1", { className: "font-semibold text-lg text-white", children: [status === 'PENDING' && 'Verification in Progress', status === 'REJECTED' && 'Verification Rejected', status === 'UNVERIFIED' && 'Verification Required'] }), _jsxs("p", { className: "mb-4xl text-[#94969C] text-base", children: [status === 'PENDING' &&
                                             `Your account verification is still under review. Please wait
 								until it's approved before you can continue playing or
 								depositing.`, status === 'REJECTED' &&
-                                            'Your account verification was not approved. Please resubmit your verification to regain full access.', status === 'UNVERIFIED' ||
-                                            (status === 'CREATED' &&
-                                                'Your account is not yet verified. Please complete the verification process to continue playing or depositing.')] }), _jsxs(Button, { variant: "solid", className: twMerge('mb-2 w-full', status === 'PENDING' && 'hidden'), onClick: () => {
+                                            'Your account verification was not approved. Please resubmit your verification to regain full access.', status === 'UNVERIFIED' &&
+                                            'Your account is not yet verified. Please complete the verification process to continue playing or depositing.'] }), _jsxs(Button, { variant: "solid", className: twMerge('mb-2 w-full', status === 'PENDING' && 'hidden'), onClick: () => {
                                         globalStore.kycVerificationStatus.setOpen(false);
                                         globalStore.kyc.setOpen(true);
-                                    }, children: [status === 'REJECTED' && 'Resubmit Verification', status === 'UNVERIFIED' ||
-                                            (status === 'CREATED' && 'Verify Now')] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                    }, children: [status === 'REJECTED' && 'Resubmit Verification', status === 'UNVERIFIED' && 'Verify Now'] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
                                         globalStore.kycVerificationStatus.setOpen(false);
                                     }, children: "Close" })] }) }) })] }) }));
 }

package/dist/components/PortalProvider/CXDTokenObserver.js

@@ -1,30 +1,30 @@
 'use client';
 import { addHours } from 'date-fns';
 import { clamp } from 'lodash-es';
+import { useSearchParams } from 'next/navigation';
 import { useLocalStorage, useTimeout } from 'usehooks-ts';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 export function CXDTokenObserver() {
-    const { data: account } = useAccountQuery();
-    const accountCxd = {
-        cxd: account?.cellxpertDetails?.cxd,
-    };
-    const [cxd, setCxd, removeCxd] = useLocalStorage('cxd', null);
+    const searchParams = useSearchParams();
+    const cxdToken = searchParams.get('cxd');
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const [cxd, setCxd, removeCxd] = useLocalStorage('WebPortalCellxpertCxd', null);
     const now = new Date();
+    const shouldTimeoutRun = cxdToken && account;
     const removeCxdUntilInMs = cxd?.timestamp
         ? clamp(cxd.timestamp - now.getTime(), 0, Infinity)
         : 0;
     useTimeout(() => {
-        const isSame = cxd?.cxd === accountCxd.cxd;
+        const isSame = cxd?.cxd === cxdToken;
         if (!isSame) {
             const extendedTimestamp = addHours(new Date(), 6).getTime();
             setCxd({
-                cxd: accountCxd.cxd,
+                cxd: cxdToken,
                 timestamp: extendedTimestamp,
             });
         }
-    }, account ? 100 : null);
-    useTimeout(() => {
-        removeCxd();
-    }, account ? removeCxdUntilInMs : null);
+    }, shouldTimeoutRun ? 100 : null);
+    useTimeout(() => removeCxd(), shouldTimeoutRun ? removeCxdUntilInMs : null);
     return null;
 }

package/dist/components/Quests/JourneyQuest.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { isString } from 'lodash-es';
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 import { useCallback, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/react/shallow';
@@ -9,9 +10,11 @@ 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 { useSessionQuery } from '../../client/hooks/useSessionQuery.js';
 import { CheckIcon } from '../../icons/CheckIcon.js';
 import { CoinsHandIcon } from '../../icons/CoinsHandIcon.js';
 import { FileCheck02Icon } from '../../icons/FileCheck02Icon.js';
+import { Link01Icon } from '../../icons/Link01Icon.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Badge } from '../../ui/Badge/index.js';
 import { Button } from '../../ui/Button/index.js';
@@ -115,6 +118,8 @@ function Rules(props) {
             return false;
         return milestones.every((milestone) => milestone.isCompleted);
     }, [milestones]);
+    const sessionQuery = useSessionQuery();
+    const session = sessionQuery.data;
     return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center p-4", children: _jsxs(Dialog.Content, { className: twMerge('mx-auto max-h-[80vh] min-h-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-10 md:scrollbar:h-2 md:scrollbar:w-2 md:scrollbar-thumb:rounded-full md:scrollbar-thumb:bg-bg-quaternary md:scrollbar-track:bg-transparent', props.className?.root), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: quest?.name || 'Quest' }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "max-h-[30vh] overflow-y-auto", children: quest?.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
                                                         __html: quest.description,
                                                     } })) : (_jsx("p", { children: "Ready for a challenge? Complete them all and get amazing rewards!" })) }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-safe-area-inset-bottom h-8 bg-gradient-to-t from-bg-primary to-transparent" })] }), milestones.map((milestone) => (_jsxs("div", { className: twMerge('flex flex-col space-y-2.5 rounded-xl bg-bg-tertiary p-3', props.className?.milestone), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: twMerge('font-medium text-base text-text-primary-900', props.className?.milestoneName), children: milestone.label }), milestone.isCompleted && (_jsx("div", { className: twMerge('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', props.className?.completeBadge), children: "Complete" }))] }), milestone.description ? (_jsx(Prose, { className: props.className?.milestoneDescription, dangerouslySetInnerHTML: {
@@ -140,7 +145,15 @@ function Rules(props) {
                                                         ? 'Deposit'
                                                         : 'Verify Account'] })), !milestone.isCompleted &&
                                                 milestone.key === 'LINK_FACEBOOK_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Facebook Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(FacebookSignInTrigger, { text: "Link Facebook Account", className: "!mt-0 flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })] })), !milestone.isCompleted &&
-                                                milestone.key === 'LINK_GOOGLE_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Google Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(GoogleSignInButton, { text: "Link Google Account", className: "flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })] }))] }, milestone.key))), quest?.bonus && (_jsx("div", { className: "flex h-full items-end", children: allMilestonesCompleted ? (_jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })) : (_jsx("div", { className: twMerge('w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center text-white', props.className?.uncompleteButton), children: _jsxs("p", { children: ["Complete target to", ' ', _jsxs("span", { className: "text-brand-400", children: ["\u20B1", quest?.bonus] }), ' ', "bonus!"] }) })) }))] })] }) })] }) }));
+                                                milestone.key === 'LINK_GOOGLE_ACCOUNT' && (_jsxs(_Fragment, { children: [milestone.bonus && (_jsxs("p", { className: "text-[#94969C] text-sm", children: ["Link your Google Account and get Php", ' ', milestone.bonus, " Bonus"] })), _jsx(GoogleSignInButton, { text: "Link Google Account", className: "flex h-10 w-full items-center justify-center gap-md rounded-md bg-button-primary-bg px-3 font-semibold text-button-primary-fg text-sm shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none" })] })), !milestone.isCompleted &&
+                                                milestone.key === 'CUSTOM_LINK' &&
+                                                (() => {
+                                                    const baseUrl = process.env.NEXT_PUBLIC_ENVIRONMENT === 'development'
+                                                        ? 'https://api.trigger.development.opexa.io'
+                                                        : 'https://api.trigger.opexa.io';
+                                                    const linkUrl = `${baseUrl}/v1/quests/${quest?.id}/milestones/${milestone.id}/link?token=${session?.token}`;
+                                                    return (_jsx(Button, { size: "sm", "aria-label": `Complete ${milestone.label}`, asChild: true, children: _jsxs(Link, { href: linkUrl, target: "_blank", rel: "noopener noreferrer", children: ["Click Here", _jsx(Link01Icon, { className: "size-5" })] }) }));
+                                                })()] }, milestone.key))), quest?.bonus && (_jsx("div", { className: "flex h-full items-end", children: allMilestonesCompleted ? (_jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })) : (_jsx("div", { className: twMerge('w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center text-white', props.className?.uncompleteButton), children: _jsxs("p", { children: ["Complete target to", ' ', _jsxs("span", { className: "text-brand-400", children: ["\u20B1", quest?.bonus] }), ' ', "bonus!"] }) })) }))] })] }) })] }) }));
 }
 function QuestMilestone({ label, bonus, isCompleted = false, checkboxControlStyle, className, }) {
     const localeInfo = useLocaleInfo();

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: "production" | "development";
+export declare const ENVIRONMENT: "development" | "production";
 export declare const INTERNALS__REPORT_WEB_VITALS: boolean;

package/dist/icons/Link01Icon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function Link01Icon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/Link01Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Link01Icon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "m12.708 18.364-1.415 1.414a5 5 0 1 1-7.07-7.07l1.413-1.415m12.728 1.414 1.415-1.414a5 5 0 0 0-7.071-7.071l-1.415 1.414M8.5 15.5l7-7" }) }));
+}

package/dist/icons/LinkBrokenIcon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function LinkBrokenIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/LinkBrokenIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LinkBrokenIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: _jsx("path", { d: "M8.5 15.5L15.5 8.49998M9 4V2M15 20V22M4 9H2M20 15H22M4.91421 4.91421L3.5 3.5M19.0858 19.0857L20.5 20.4999M12 17.6568L9.87871 19.7781C8.31662 21.3402 5.78396 21.3402 4.22186 19.7781C2.65976 18.216 2.65976 15.6833 4.22186 14.1212L6.34318 11.9999M17.6569 11.9999L19.7782 9.87859C21.3403 8.31649 21.3403 5.78383 19.7782 4.22174C18.2161 2.65964 15.6835 2.65964 14.1214 4.22174L12 6.34306", stroke: "#FEDF89", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}

package/dist/types/index.d.ts

@@ -722,7 +722,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' | 'LINK_FACEBOOK_ACCOUNT' | 'LINK_GOOGLE_ACCOUNT' | 'CUSTOM';
+export type JourneyQuestMilestoneType = 'REGISTRATION' | 'ACCOUNT_VERIFICATION' | 'FIRST_DEPOSIT' | 'IOS_FIRST_LOGIN' | 'ANDROID_FIRST_LOGIN' | 'LINK_FACEBOOK_ACCOUNT' | 'LINK_GOOGLE_ACCOUNT' | 'CUSTOM_LINK' | 'CUSTOM';
 export interface JourneyQuestMilestone {
     id: string;
     type: JourneyQuestMilestoneType;

package/dist/ui/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 import { Checkbox } from '@ark-ui/react/checkbox';
 export declare const withContext: <Props extends {
     [x: string]: any;
-}>(Component: import("react").ComponentType<Props>, slot: "label" | "root" | "control" | "indicator" | "group") => import("react").ComponentType<import("@ark-ui/react").Assign<Props, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+}>(Component: import("react").ComponentType<Props>, slot: "label" | "group" | "root" | "control" | "indicator") => import("react").ComponentType<import("@ark-ui/react").Assign<Props, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             control: string;
@@ -15,7 +15,7 @@ export declare const withContext: <Props extends {
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, {
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             control: string;
@@ -29,7 +29,7 @@ export declare const withContext: <Props extends {
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             control: string;
@@ -43,9 +43,9 @@ export declare const withContext: <Props extends {
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, unknown, unknown, undefined>>>>>, withProvider: <Props extends {
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>, withProvider: <Props extends {
     [x: string]: any;
-}>(Component: import("react").ComponentType<Props>, slot: "label" | "root" | "control" | "indicator" | "group") => import("react").ComponentType<import("@ark-ui/react").Assign<Props, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
+}>(Component: import("react").ComponentType<Props>, slot: "label" | "group" | "root" | "control" | "indicator") => import("react").ComponentType<import("@ark-ui/react").Assign<Props, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             control: string;
@@ -59,7 +59,7 @@ export declare const withContext: <Props extends {
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, {
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             control: string;
@@ -73,7 +73,7 @@ export declare const withContext: <Props extends {
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             control: string;
@@ -87,7 +87,7 @@ export declare const withContext: <Props extends {
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 export declare const Root: import("react").ComponentType<import("@ark-ui/react").Assign<Checkbox.RootProps & import("react").RefAttributes<HTMLLabelElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
@@ -102,7 +102,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, {
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             control: string;
@@ -116,7 +116,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             control: string;
@@ -130,7 +130,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 export declare const Control: import("react").ComponentType<import("@ark-ui/react").Assign<Checkbox.ControlProps & import("react").RefAttributes<HTMLDivElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
@@ -145,7 +145,7 @@ export declare const Control: import("react").ComponentType<import("@ark-ui/reac
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, {
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             control: string;
@@ -159,7 +159,7 @@ export declare const Control: import("react").ComponentType<import("@ark-ui/reac
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             control: string;
@@ -173,7 +173,7 @@ export declare const Control: import("react").ComponentType<import("@ark-ui/reac
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 export declare const Group: import("react").ComponentType<import("@ark-ui/react").Assign<Checkbox.GroupProps & import("react").RefAttributes<HTMLDivElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
@@ -188,7 +188,7 @@ export declare const Group: import("react").ComponentType<import("@ark-ui/react"
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, {
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             control: string;
@@ -202,7 +202,7 @@ export declare const Group: import("react").ComponentType<import("@ark-ui/react"
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             control: string;
@@ -216,7 +216,7 @@ export declare const Group: import("react").ComponentType<import("@ark-ui/react"
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 export declare const Indicator: import("react").ComponentType<import("@ark-ui/react").Assign<Checkbox.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
@@ -231,7 +231,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, {
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             control: string;
@@ -245,7 +245,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             control: string;
@@ -259,7 +259,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 export declare const Label: import("react").ComponentType<import("@ark-ui/react").Assign<Checkbox.LabelProps & import("react").RefAttributes<HTMLSpanElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
@@ -274,7 +274,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, {
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             control: string;
@@ -288,7 +288,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             control: string;
@@ -302,6 +302,6 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 export declare const HiddenInput: import("react").ForwardRefExoticComponent<Checkbox.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export declare const Context: (props: Checkbox.ContextProps) => import("react").ReactNode;

package/dist/ui/Checkbox/checkbox.recipe.d.ts

@@ -12,7 +12,7 @@ export declare const checkboxRecipe: import("tailwind-variants").TVReturnType<{
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, {
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             control: string;
@@ -26,7 +26,7 @@ export declare const checkboxRecipe: import("tailwind-variants").TVReturnType<{
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             control: string;
@@ -40,4 +40,4 @@ export declare const checkboxRecipe: import("tailwind-variants").TVReturnType<{
         gray: {};
         neutral: {};
     };
-}, Record<"label" | "root" | "control" | "indicator" | "group", string | string[]>, undefined, unknown, unknown, undefined>>;
+}, Record<"label" | "group" | "root" | "control" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>;