@opexa/portal-components 0.0.897 → 0.0.899

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/AurixPayQRPHDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const AurixPayQRPHDepositContext: (props: {
     value: {
-        status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
+        status: "failed" | "idle" | "generating-qr-code" | "qr-code-generated" | "confirmed";
         deposit: import("../../../../types").Deposit | null;
         errorMessage: {
             name: string;
@@ -13,7 +13,7 @@ export declare const AurixPayQRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useAurixPayQRPHDepositContext: () => {
-    status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
+    status: "failed" | "idle" | "generating-qr-code" | "qr-code-generated" | "confirmed";
     deposit: import("../../../../types").Deposit | null;
     errorMessage: {
         name: string;

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/useAurixPayQRPHDeposit.d.ts

@@ -5,7 +5,7 @@ export interface GenerateQRCodeInput {
     promo?: string | null;
 }
 export declare function useAurixPayQRPHDeposit(): {
-    status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
+    status: "failed" | "idle" | "generating-qr-code" | "qr-code-generated" | "confirmed";
     deposit: Deposit | null;
     errorMessage: {
         name: string;

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

@@ -1,6 +1,6 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
+        status: "failed" | "idle" | "generating-qr-code" | "qr-code-generated" | "confirmed";
         deposit: import("../../../../types").Deposit | null;
         errorMessage: {
             name: string;
@@ -13,7 +13,7 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
+    status: "failed" | "idle" | "generating-qr-code" | "qr-code-generated" | "confirmed";
     deposit: import("../../../../types").Deposit | null;
     errorMessage: {
         name: string;

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

@@ -5,7 +5,7 @@ export interface GenerateQRCodeInput {
     promo?: string | null;
 }
 export declare function useQRPHDeposit(): {
-    status: "confirmed" | "failed" | "idle" | "generating-qr-code" | "qr-code-generated";
+    status: "failed" | "idle" | "generating-qr-code" | "qr-code-generated" | "confirmed";
     deposit: Deposit | null;
     errorMessage: {
         name: string;

package/dist/components/DepositWithdrawal/Withdrawal/VentajaWithdrawal/PaymentMethods.d.ts

@@ -0,0 +1,10 @@
+import { type PaymentMethodCrazywin } from '../../utils';
+interface PaymentMethodsProps {
+    value?: PaymentMethodCrazywin;
+    onChange?: (value: PaymentMethodCrazywin) => void;
+    defaultValue?: PaymentMethodCrazywin;
+    options?: PaymentMethodCrazywin[];
+    className?: string;
+}
+export declare function PaymentMethods(props: PaymentMethodsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DepositWithdrawal/Withdrawal/VentajaWithdrawal/PaymentMethods.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { useControllableState } from '../../../../client/hooks/useControllableState.js';
+import { CheckIcon } from '../../../../icons/CheckIcon.js';
+import gcash from '../../../../images/gcash.png';
+import instapay from '../../../../images/instapay.png';
+import maya from '../../../../images/maya.png';
+import { Checkbox } from '../../../../ui/Checkbox/index.js';
+import { Field } from '../../../../ui/Field/index.js';
+import { PaymentMethodDefinitionCrazywin, } from '../../utils.js';
+const OPTIONS = [
+    {
+        value: 'INSTAPAY',
+        label: 'Instapay',
+        image: instapay,
+    },
+    {
+        value: 'GCASH',
+        label: 'GCash',
+        image: gcash,
+    },
+    {
+        value: 'MAYA',
+        label: 'Maya',
+        image: maya,
+    },
+];
+export function PaymentMethods(props) {
+    const options = props.options?.length
+        ? OPTIONS.filter((option) => props.options?.includes(option.value))
+        : OPTIONS;
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: options[0].value,
+        onChange: props.onChange,
+    });
+    return (_jsxs("div", { className: "mb-6", children: [_jsx(Field.Label, { asChild: true, children: _jsx("div", { children: "Available payment methods" }) }), _jsx(Checkbox.Group, { value: [value], onValueChange: (newValue) => {
+                    const lastValue = newValue.at(-1);
+                    if (!lastValue)
+                        return;
+                    setValue(PaymentMethodDefinitionCrazywin.parse(lastValue));
+                }, className: "grid grid-cols-2 gap-x-4 gap-y-3", children: options.map((option) => (_jsxs(Checkbox.Root, { value: option.value, className: "flex cursor-pointer items-center justify-between rounded-xl border border-border-secondary ui-checked:border-border-brand-solid p-lg", children: [_jsx("div", { className: twMerge('rounded-xs bg-white px-sm py-[0.688rem]', option.value === 'GCASH' && 'bg-[#017EFF]'), children: _jsx(Image, { src: option.image, alt: "", width: 200, height: 40, className: twMerge('w-auto', option.value === 'LIBANGAN_PAY_IN' ||
+                                    option.value === 'VENTAJA_DISBURSEMENT'
+                                    ? 'h-[2.5rem]'
+                                    : 'h-[1.063rem]'), draggable: false }) }), _jsx(Checkbox.Control, { className: "shrink-0", children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.HiddenInput, {})] }, option.value))) })] }));
+}

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

@@ -29,10 +29,10 @@ import { Select } from '../../../../ui/Select/index.js';
 import { parseDecimal } from '../../../../utils/parseDecimal.js';
 import { AmountChoices } from '../../AmountChoices.js';
 import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
-import { PaymentMethods } from '../../PaymentMethods.js';
 import { ActiveTurnoverRequirement } from '../ActiveTurnoverRequirement.js';
 import { RequireFirstDeposit } from '../RequireFirstDeposit.js';
 import { TransactionPasswordNotSet } from '../TransactionPasswordNotSet.js';
+import { PaymentMethods } from './PaymentMethods.js';
 export function VentajaWithdrawal() {
     const depositWithdrawalProps = useDepositWithdrawalPropsContext();
     const [paymentMethod, setPaymentMethod] = useState('INSTAPAY');

package/dist/components/DepositWithdrawal/utils.d.ts

@@ -2,5 +2,7 @@ import { z } from 'zod';
 import type { KnownDepositError, KnownWithdrawalError, WithdrawalError } from '../../types';
 export declare const PaymentMethodDefinition: z.ZodEnum<["GCASH", "GCASH_STANDARD_CASH_IN", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY", "AIO_GCASH", "AIO_PAY_MAYA", "AIO_GRAB_PAY", "AIO_PALAWAN_PAY", "GCASH_WEBPAY", "MAYA_WEBPAY", "INSTAPAY_GCASH", "INSTAPAY_PAYMAYA", "AURIX_PAY_GCASH", "AURIX_PAY_PAYMAYA", "AURIX_PAY_GRAB_PAY", "AURIX_PAY_QRPH"]>;
 export type PaymentMethod = z.infer<typeof PaymentMethodDefinition>;
+export declare const PaymentMethodDefinitionCrazywin: z.ZodEnum<["GCASH", "MAYA_APP", "MAYA", "ONLINE_BANK", "QRPH", "INSTAPAY", "LIBANGAN_PAY_IN", "VENTAJA_DISBURSEMENT", "PISO_PAY"]>;
+export type PaymentMethodCrazywin = z.infer<typeof PaymentMethodDefinitionCrazywin>;
 export type DepositWithdrawalErrors = KnownDepositError | KnownWithdrawalError | WithdrawalError | string;
 export declare function explainError(error?: DepositWithdrawalErrors): string;

package/dist/components/DepositWithdrawal/utils.js

@@ -23,6 +23,17 @@ export const PaymentMethodDefinition = z.enum([
     'AURIX_PAY_GRAB_PAY',
     'AURIX_PAY_QRPH',
 ]);
+export const PaymentMethodDefinitionCrazywin = z.enum([
+    'GCASH',
+    'MAYA_APP',
+    'MAYA',
+    'ONLINE_BANK',
+    'QRPH',
+    'INSTAPAY',
+    'LIBANGAN_PAY_IN',
+    'VENTAJA_DISBURSEMENT',
+    'PISO_PAY',
+]);
 const errorMap = {
     DAILY_PURCHASE_OR_DEPOSIT_LIMIT_EXCEEDED: 'You have exceeded your daily purchase or deposit limit. Please try again tomorrow.',
     INSUFFICIENT_BALANCE: 'You have insufficient balance for this transaction.',

package/dist/components/KYC/KYCNonPagCor/IdentityVerification.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Capacitor } from '@capacitor/core';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { ObjectId } from '@opexa/object-id';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -16,6 +17,7 @@ import { useSignOutMutation } from '../../../client/hooks/useSignOutMutation.js'
 import { useUpdateMemberVerificationMutation } from '../../../client/hooks/useUpdateMemberVerificationMutation.js';
 import { getSession } from '../../../client/services/getSession.js';
 import { toaster } from '../../../client/utils/toaster.js';
+import { ObjectType } from '../../../services/ObjectType.js';
 import { unregisterFCMDevice } from '../../../services/trigger.js';
 import { Button } from '../../../ui/Button/index.js';
 import { Dialog } from '../../../ui/Dialog/index.js';
@@ -106,6 +108,7 @@ export function IdentityVerification() {
         },
     });
     async function onSubmit(values) {
+        //if member verification id is not available (first time doing kyc to trigger notifications)
         if (!memberId) {
             createMemberVerification({
                 selfieImage: values.selfieImage,
@@ -117,7 +120,10 @@ export function IdentityVerification() {
                 placeOfBirth: '',
                 sourceOfIncome: '',
             });
+            const id = ObjectId.generate(ObjectType.MemberVerification).toString();
+            await approveMemberVerificationMutation.mutateAsync(id);
         }
+        //if member verification id is available (updating kyc)
         else {
             updateMemberVerification({
                 id: memberId,

package/dist/components/Quests/JourneyQuest.d.ts

@@ -1,9 +1,19 @@
 import { type CSSProperties } from 'react';
 export interface ClassNameEntries {
     root?: string;
+    completedBadgeRoot?: string;
+    completedBadgeLabel?: string;
+    failedBadgeRoot?: string;
+    failedBadgeLabel?: string;
+    progressRoot?: string;
+    progressTrack?: string;
+    progressRange?: string;
+    progressLabel?: string;
     checkboxName?: string;
     checkboxBonus?: string;
     dialogRoot?: string;
+    dialogTitle?: string;
+    dialogDescription?: string;
     dialogMilestone?: string;
     dialogMilestoneName?: string;
     dialogMilestoneDescription?: string;

package/dist/components/Quests/JourneyQuest.js

@@ -85,13 +85,20 @@ export function JourneyQuest(props) {
         disclosure.setOpen(true);
     }, [disclosure]);
     const localeInfo = useLocaleInfo();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('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', classNames?.root), 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, {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: twMerge('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', classNames?.root), 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, className: {
+                                            completedBadgeRoot: classNames?.completedBadgeRoot,
+                                            completedBadgeLabel: classNames?.completedBadgeLabel,
+                                            failedBadgeRoot: classNames?.failedBadgeRoot,
+                                            failedBadgeLabel: classNames?.failedBadgeLabel,
+                                        } }), 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' }), _jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, className: "h-2 rounded-full bg-bg-primary", value: progressValue, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsxs("p", { className: "text-text-quarterary-brand text-xs", children: [currentMilestone, "/", totalMilestones] })] }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: milestones.map((milestone, index) => (_jsx(QuestMilestone, { label: milestone.label, bonus: milestone.bonus, isCompleted: milestone.isCompleted, checkboxControlStyle: props.checkboxControlStyle, className: {
+                                                })] }) }))] }), _jsx("p", { className: "font-semibold text-xl", children: quest?.name || 'Journey Quest' }), _jsxs("div", { className: "flex w-full items-center space-x-2", children: [_jsx(Progress.Root, { max: 100, className: twMerge('h-2 rounded-full bg-bg-primary', classNames?.progressRoot), value: progressValue, children: _jsx(Progress.Track, { className: classNames?.progressTrack, children: _jsx(Progress.Range, { className: classNames?.progressRange }) }) }), _jsxs("p", { className: twMerge('text-text-quarterary-brand text-xs', classNames?.progressLabel), children: [currentMilestone, "/", totalMilestones] })] }), _jsx("div", { className: "flex w-full flex-col space-y-3", children: milestones.map((milestone, index) => (_jsx(QuestMilestone, { label: milestone.label, bonus: milestone.bonus, isCompleted: milestone.isCompleted, checkboxControlStyle: props.checkboxControlStyle, className: {
                                         name: classNames?.checkboxName,
                                         bonus: classNames?.checkboxBonus,
                                     } }, index))) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx(Button, { size: "sm", onClick: handleViewDetails, "aria-label": "View Details", disabled: false, className: "disabled:bg-bg-primary disabled:text-text-disabled", children: "View Details" }) })] }), _jsx(Rules, { open: disclosure.open, onOpenChange: disclosure.setOpen, quest: quest, milestones: milestones, className: {
                     root: classNames?.dialogRoot,
+                    title: classNames?.dialogTitle,
+                    description: classNames?.dialogDescription,
                     milestone: classNames?.dialogMilestone,
                     milestoneName: classNames?.dialogMilestoneName,
                     milestoneDescription: classNames?.dialogMilestoneDescription,
@@ -124,9 +131,9 @@ function Rules(props) {
     }, [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,
-                                                    }, className: "mb-3" })) : (_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) => {
+    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: twMerge('font-semibold text-lg text-text-primary-900', props.className?.title), children: quest?.name || 'Quest' }), _jsx("div", { className: "relative", children: _jsx("div", { className: "max-h-[30vh] overflow-y-auto", children: quest?.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
+                                                    __html: quest.description,
+                                                }, className: twMerge('mb-3', props.className?.description) })) : (_jsx("p", { className: twMerge(props.className?.description), children: "Ready for a challenge? Complete them all and get amazing rewards!" })) }) }), milestones.map((milestone) => {
                                         const milestoneType = quest?.milestones?.find((m) => m.id === milestone.id)?.type;
                                         const accountVerificationMessage = milestoneType === 'ACCOUNT_VERIFICATION'
                                             ? verificationStatus === 'PENDING'

package/dist/components/Quests/RemainingTime.d.ts

@@ -1,5 +1,11 @@
 interface RemainingTimeProps {
     endOfDay?: boolean;
+    className?: {
+        completedBadgeRoot?: string;
+        completedBadgeLabel?: string;
+        failedBadgeRoot?: string;
+        failedBadgeLabel?: string;
+    };
 }
-export declare function RemainingTime({ endOfDay: useEndOfDay, }: RemainingTimeProps): import("react/jsx-runtime").JSX.Element;
+export declare function RemainingTime({ endOfDay: useEndOfDay, className, }: RemainingTimeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Quests/RemainingTime.js

@@ -4,17 +4,17 @@ import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
 import { ClockStopWatchIcon } from '../../icons/ClockStopWatchIcon.js';
 import { Badge } from '../../ui/Badge/index.js';
 import { useQuestContext } from './QuestsContext.js';
-export function RemainingTime({ endOfDay: useEndOfDay = false, }) {
+export function RemainingTime({ endOfDay: useEndOfDay = false, className, }) {
     const quest = useQuestContext();
     const targetDateTime = useEndOfDay
         ? endOfDay(new Date(quest.endDateTime)).toISOString()
         : quest.endDateTime;
     const remainingTime = useRemainingTime(targetDateTime);
     if (quest.status === 'COMPLETED') {
-        return (_jsx(Badge.Root, { size: "lg", colorScheme: "success", round: false, children: _jsx(Badge.Label, { children: "Completed" }) }));
+        return (_jsx(Badge.Root, { size: "lg", colorScheme: "success", round: false, className: className?.completedBadgeRoot, children: _jsx(Badge.Label, { className: className?.completedBadgeLabel, children: "Completed" }) }));
     }
     if (quest.status === 'FAILED' || remainingTime.expired) {
-        return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, children: _jsx(Badge.Label, { children: "Failed" }) }));
+        return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, className: className?.failedBadgeRoot, children: _jsx(Badge.Label, { className: className?.failedBadgeLabel, children: "Failed" }) }));
     }
     return (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.toString() })] }));
 }

package/package.json

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