@opexa/portal-components 0.0.957 → 0.0.958

package/dist/lib/components/TransactionRecords/WithdrawalRecordsTable.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TZDateMini, tz } from '@date-fns/tz';
+import { endOfDay, format, startOfDay } from 'date-fns';
+import { isString } from 'lodash-es';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useReducer } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useInfiniteQueryHelper } from '../../client/hooks/useInfiniteQueryHelper.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useWithdrawalRecordsQuery } from '../../client/hooks/useWithdrawalRecordsQuery.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { File02Icon } from '../../icons/File02Icon.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { IconButton } from '../../ui/IconButton/index.js';
+import { Table } from '../../ui/Table/index.js';
+import { capitalize } from '../../utils/capitalize.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { Empty } from '../shared/Empty.js';
+import { TableFilters } from './TableFilters.js';
+import { useTransactionPropsContext } from './TransactionContext.js';
+export function WithdrawalRecordsTable(props) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const { enabledWithdrawalTypes } = useTransactionPropsContext();
+    const [state, setState] = useReducer((prev, next) => ({
+        ...prev,
+        ...next,
+    }), {
+        type: enabledWithdrawalTypes?.length === 1 ? enabledWithdrawalTypes[0] : null,
+    });
+    const localeInfo = useLocaleInfo();
+    const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useWithdrawalRecordsQuery, {
+        filter: {
+            ...(searchParams.has('id') && {
+                withdrawal: {
+                    equal: searchParams.get('id')?.toString(),
+                },
+            }),
+            ...(state.type && {
+                type: {
+                    in: state.type === 'MANUAL'
+                        ? [
+                            /* "MANUAL" and friends */
+                            'MANUAL',
+                            'MANUAL_BANK',
+                            'MANUAL_UPI',
+                        ]
+                        : [state.type],
+                },
+            }),
+            ...(state.status && {
+                status: {
+                    equal: state.status,
+                },
+            }),
+            ...(state.timestamp && {
+                dateTimeCreated: {
+                    ...(state.timestamp.start && {
+                        greaterThanOrEqual: new TZDateMini(startOfDay(state.timestamp.start), localeInfo.timezone).toISOString(),
+                    }),
+                    ...(state.timestamp.end && {
+                        lesserThanOrEqual: new TZDateMini(endOfDay(state.timestamp.end), localeInfo.timezone).toISOString(),
+                    }),
+                },
+            }),
+        },
+    });
+    const classNames = isString(props.className)
+        ? { scrollbarThumb: props.className }
+        : (props.className ?? {});
+    return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
+                    timestamp: state.timestamp,
+                    withdrawalType: state.type,
+                    withdrawalStatus: state.status,
+                }, onChange: (value) => {
+                    setState({
+                        type: value.withdrawalType,
+                        status: value.withdrawalStatus,
+                        timestamp: value.timestamp,
+                    });
+                    firstPage();
+                    if (searchParams.has('id')) {
+                        const newSearchParams = new URLSearchParams(searchParams);
+                        newSearchParams.delete('id');
+                        router.push(`${pathname}?${newSearchParams.toString()}`);
+                    }
+                }, enabledFilters: {
+                    withdrawalType: true,
+                    withdrawalStatus: true,
+                } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
+                    ? 'Fetching latest withdrawal records...'
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: twMerge('scrollbar:h-2 overflow-hidden overflow-x-auto rounded-none scrollbar-thumb:rounded-full border-border-secondary border-b scrollbar-track:bg-transparent lg:rounded-t-xl', classNames.scrollbarThumb || 'scrollbar-thumb:bg-bg-quaternary'), children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Account Name" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber || data.serialCode }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: data.type === 'INSTAPAY' ||
+                                                    data.type === 'PISO_PAY_REMITTANCE' ||
+                                                    data.type === 'VENTAJA_DISBURSEMENT'
+                                                    ? data.accountName
+                                                    : '' }), _jsx(Table.Cell, { className: "!py-1 text-right", children: capitalize(data.type, {
+                                                    delimiter: capitalize.delimiters.UNDERSCORE,
+                                                }).replace(/ventaja\s/gi, '') }), _jsx(Table.Cell, { className: "!py-1", children: data.recipientMobileNumber }), _jsx(Table.Cell, { className: "!py-1 text-right", children: formatNumber(data.amount, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1 text-right", children: formatNumber(data.netAmount, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1 text-right", children: formatNumber(data.fee, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: data?.bankName }), _jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
+                                                            in: tz(localeInfo.timezone),
+                                                        }) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeCreated, 'hh:mm a', {
+                                                            in: tz(localeInfo.timezone),
+                                                        }) })] }), _jsx(Table.Cell, { className: "!py-1", children: _jsx(Badge.Root, { variant: "subtle", colorScheme: data.status === 'FAILED' ||
+                                                        data.status === 'REJECTED' ||
+                                                        data.status === 'CANCELLED'
+                                                        ? 'danger'
+                                                        : data.status === 'PENDING'
+                                                            ? 'warning'
+                                                            : 'success', children: _jsx(Badge.Label, { children: capitalize(data.status, {
+                                                            delimiter: capitalize.delimiters.UNDERSCORE,
+                                                        }) }) }) })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "font-medium text-sm text-text-secondary-700", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
+}

package/dist/lib/components/TransactionRecords/index.d.ts

@@ -0,0 +1 @@
+export * from './TransactionRecords';

package/dist/lib/components/TransactionRecords/index.js

@@ -0,0 +1 @@
+export * from './TransactionRecords.js';

package/dist/lib/components/UpdateMobileNumber/UpdateMobileNumber.d.ts

@@ -0,0 +1,3 @@
+export declare function UpdateMobileNumber({ onClose }: {
+    onClose?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/UpdateMobileNumber/UpdateMobileNumber.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import Image from 'next/image';
+import { useRef, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import z from 'zod';
+import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
+import { useCooldown } from '../../client/hooks/useCooldown.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useMobileNumberParser } from '../../client/hooks/useMobileNumberParser.js';
+import { useSendVerificationCodeMutation } from '../../client/hooks/useSendVerificationCodeMutation.js';
+import { useUpdateMobileNumber } from '../../client/hooks/useUpdateMobileNumber.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import inplayLogo from '../../images/inplay-logo.png';
+import lightBg from '../../images/light-bg.png';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Field } from '../../ui/Field/index.js';
+import { PinInput } from '../../ui/PinInput/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+export function UpdateMobileNumber({ onClose }) {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const isAccountLoading = accountQuery.isLoading;
+    const hasMobileNumber = !!account?.mobileNumber;
+    console.log('isAccountLoading', isAccountLoading);
+    console.log('account', account);
+    console.log('hasMobileNumber', hasMobileNumber);
+    const isDialogOpen = !isAccountLoading && !!account && !hasMobileNumber;
+    console.log('isDialogOpen', isDialogOpen);
+    const [step, setStep] = useState(1);
+    const sendVerificationCodeMutation = useSendVerificationCodeMutation({
+        onSuccess: () => {
+            setStep(2);
+            cooldown.start();
+        },
+        onError: (err) => {
+            toaster.error({
+                title: 'Sign In Failed',
+                description: err.message,
+            });
+        },
+    });
+    const updateMobileNumberMutation = useUpdateMobileNumber({
+        onSuccess: async () => {
+            step1Form.reset();
+            step2Form.reset();
+            setStep(1);
+            toaster.success({
+                title: 'Verification Successful',
+                description: 'Your mobile number has been verified.',
+            });
+            onClose?.();
+        },
+        onError: (err) => {
+            const errorMessage = err.message === 'Internal Server Error'
+                ? `mobile number ${mobileNumberParser.format(step1Form.getValues('mobileNumber'))} is not available`
+                : err.message;
+            toaster.error({
+                title: 'Sign In Failed',
+                description: errorMessage,
+            });
+        },
+    });
+    const localeInfo = useLocaleInfo();
+    const mobileNumberParser = useMobileNumberParser();
+    const Step1Definition = z.object({
+        mobileNumber: z
+            .string()
+            .min(1, 'Mobile number is required')
+            .superRefine((v, ctx) => {
+            if (!mobileNumberParser.validate(v)) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'Invalid mobile number',
+                });
+            }
+        }),
+    });
+    const Step2Definition = z.object({
+        verificationCode: z.array(z.string()).superRefine((val, ctx) => {
+            if (val.length !== 6 || val.some((v) => v.length !== 1)) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'Please enter your 6-digit verification code.',
+                });
+            }
+        }),
+    });
+    const step1Form = useForm({
+        resolver: zodResolver(Step1Definition),
+        defaultValues: {
+            mobileNumber: '',
+        },
+    });
+    const step2Form = useForm({
+        resolver: zodResolver(Step2Definition),
+        defaultValues: {
+            verificationCode: Array.from({ length: 6 }).fill(''),
+        },
+    });
+    const cooldown = useCooldown({
+        max: 60,
+        duration: 1000 * 60,
+    });
+    const formRef = useRef(null);
+    return (_jsx(Dialog.Root, { open: isDialogOpen, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center", children: _jsxs(Dialog.Content, { className: "flex w-[375px] flex-col items-center space-y-4 rounded-xl bg-[#111827] p-6 text-center", style: {
+                            backgroundImage: `url(${lightBg.src})`,
+                        }, children: [_jsx(Image, { src: inplayLogo, alt: "inplay logo", width: 82, height: 34, className: "h-auto w-[82px]" }), _jsxs("div", { children: [step === 1 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "font-bold text-sm", children: ["Get ", _jsx("span", { className: "text-[#F05127]", children: "\u20B150 Bonus" }), " when you verify your account and play."] }), _jsxs("form", { className: "mt-3xl", onSubmit: step1Form.handleSubmit(async (data) => {
+                                                    sendVerificationCodeMutation.mutateAsync({
+                                                        channel: 'SMS',
+                                                        recipient: mobileNumberParser.format(data.mobileNumber),
+                                                    });
+                                                }), children: [_jsxs(Field.Root, { invalid: !!step1Form.formState.errors.mobileNumber, className: "text-left", children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "-translate-y-1/2 absolute top-1/2 left-3.5 flex shrink-0 items-center gap-md", children: _jsx("span", { className: "text-text-placeholder", children: localeInfo.mobileNumber.areaCode }) }), _jsx(Field.Input, { style: {
+                                                                            paddingLeft: `calc(1.25rem + ${localeInfo.mobileNumber.areaCode.length}ch)`,
+                                                                        }, ...step1Form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.mobileNumber?.message })] }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Send Code" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center font-semibold text-lg", children: "Check your Phone" }), _jsxs("p", { className: "mt-xs text-center text-sm text-text-secondary-700", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold text-[#F05127]", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: formRef, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
+                                                    updateMobileNumberMutation.mutateAsync({
+                                                        mobileNumber: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
+                                                        verificationCode: verificationCode.join(''),
+                                                    });
+                                                }), children: [_jsx(Controller, { name: "verificationCode", control: step2Form.control, render: (o) => (_jsxs(Field.Root, { invalid: o.fieldState.invalid, children: [_jsxs(PinInput.Root, { placeholder: "0", onKeyDown: (e) => {
+                                                                        if (e.key === 'Backspace') {
+                                                                            step2Form.reset();
+                                                                        }
+                                                                    }, value: o.field.value, onValueChange: (details) => {
+                                                                        o.field.onChange(details.value);
+                                                                        o.field.onBlur();
+                                                                    }, otp: true, onValueComplete: () => {
+                                                                        formRef.current?.requestSubmit();
+                                                                    }, blurOnComplete: true, readOnly: step2Form.formState.isSubmitting, type: "numeric", children: [_jsxs(PinInput.Control, { className: "grid-cols-[1fr_1fr_1fr_auto_1fr_1fr_1fr] items-center gap-md", children: [_jsx(PinInput.Input, { index: 0 }), _jsx(PinInput.Input, { index: 1 }), _jsx(PinInput.Input, { index: 2 }), _jsx("span", { className: "font-medium text-2xl text-text-placeholder-subtle", children: "\u2013" }), _jsx(PinInput.Input, { index: 3 }), _jsx(PinInput.Input, { index: 4 }), _jsx(PinInput.Input, { index: 5 })] }), _jsx(PinInput.HiddenInput, {})] }), _jsx(Field.ErrorText, { children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-4 flex w-full items-center justify-center gap-xs text-xs", children: [_jsx("span", { className: "text-[#9CA3AF]", children: "Didn't receive the code?" }), _jsx("button", { type: "button", className: "font-semibold text-[#C084FC]", disabled: cooldown.cooling, onClick: async () => {
+                                                                    await sendVerificationCodeMutation.mutateAsync({
+                                                                        channel: 'SMS',
+                                                                        recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),
+                                                                    });
+                                                                    cooldown.start();
+                                                                }, children: cooldown.cooling
+                                                                    ? `Resend in ${cooldown.countdown}s`
+                                                                    : 'Resend' })] }), _jsx("button", { type: "button", className: "absolute top-0 left-6 mx-auto mt-3xl flex h-8 w-8 items-center gap-1 rounded-full bg-[#1f2638] font-semibold text-sm text-text-tertiary-600", onClick: () => {
+                                                            setStep(1);
+                                                            step2Form.reset();
+                                                            cooldown.stop();
+                                                        }, children: _jsx(ArrowLeftIcon, { className: "mx-auto size-5" }) })] })] }))] })] }) })] }) }));
+}

package/dist/lib/components/UpdateMobileNumber/index.d.ts

@@ -0,0 +1 @@
+export * from './UpdateMobileNumber';

package/dist/lib/components/UpdateMobileNumber/index.js

@@ -0,0 +1 @@
+export * from './UpdateMobileNumber.js';

package/dist/lib/components/shared/Empty.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps, ComponentType } from 'react';
+export interface EmptyProps {
+    icon: ComponentType<ComponentProps<'svg'>>;
+    title: string;
+    message: string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare function Empty(props: EmptyProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/shared/Empty.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Empty(props) {
+    return (_jsxs("div", { role: "alert", "aria-live": "polite", style: props.style, className: props.className, children: [_jsxs("div", { className: "relative mx-auto w-[9.5rem] pt-4", children: [_jsx("div", { className: "-translate-x-1/2 absolute top-safe-area-inset-top left-1/2 size-[6.5rem] rounded-full bg-utility-gray-200" }), _jsx(CloudIcon, { className: "relative h-auto w-full shrink-0" }), _jsx("div", { className: "-translate-x-1/2 absolute bottom-2 left-1/2 flex size-12 items-center justify-center rounded-full bg-utility-gray-200/40 backdrop-blur-sm", children: _jsx(props.icon, { className: "size-6 text-white" }) }), _jsx("div", { className: "absolute top-3.5 left-4 size-2.5 rounded-full bg-utility-gray-100" }), _jsx("div", { className: "absolute bottom-safe-area-inset-bottom.5 left-3 size-3.5 rounded-full bg-utility-gray-100" }), _jsx("div", { className: "absolute top-1 right-3.5 size-2 rounded-full bg-utility-gray-100" }), _jsx("div", { className: "absolute top-6.5 right-0 size-3.5 rounded-full bg-utility-gray-100" })] }), _jsx("h2", { className: "mt-xl text-center font-semibold", children: props.title }), _jsx("p", { className: "mx-auto mt-xs max-w-[25rem] text-center text-sm text-text-tertiary-600", children: props.message })] }));
+}
+function CloudIcon(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 152 104", fill: "none", ...props, children: [_jsxs("g", { filter: "url(#filter0_dd_2719_19242)", children: [_jsx("path", { d: "M77.6 0C66.8273 0 57.2978 5.32329 51.4987 13.4829C49.605 13.0363 47.6301 12.8 45.6 12.8C31.4615 12.8 20 24.2615 20 38.4C20 52.5385 31.4615 64 45.6 64L109.6 64C121.971 64 132 53.9712 132 41.6C132 29.2288 121.971 19.2 109.6 19.2C108.721 19.2 107.854 19.2506 107.002 19.349C102.098 7.9677 90.7797 0 77.6 0Z", fill: "#F9FAFB" }), _jsx("ellipse", { cx: "45.6", cy: "38.4008", rx: "25.6", ry: "25.6", fill: "url(#paint0_linear_2719_19242)" }), _jsx("circle", { cx: "77.6", cy: "32", r: "32", fill: "url(#paint1_linear_2719_19242)" }), _jsx("ellipse", { cx: "109.6", cy: "41.5992", rx: "22.4", ry: "22.4", fill: "url(#paint2_linear_2719_19242)" })] }), _jsxs("defs", { children: [_jsxs("filter", { id: "filter0_dd_2719_19242", x: "0", y: "0", width: "152", height: "104", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feMorphology", { radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_2719_19242" }), _jsx("feOffset", { dy: "8" }), _jsx("feGaussianBlur", { stdDeviation: "4" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_2719_19242" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feMorphology", { radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_2719_19242" }), _jsx("feOffset", { dy: "20" }), _jsx("feGaussianBlur", { stdDeviation: "12" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), _jsx("feBlend", { mode: "normal", in2: "effect1_dropShadow_2719_19242", result: "effect2_dropShadow_2719_19242" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_2719_19242", result: "shape" })] }), _jsxs("linearGradient", { id: "paint0_linear_2719_19242", x1: "25.9429", y1: "21.4865", x2: "71.2", y2: "64.0007", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#D0D5DD" }), _jsx("stop", { offset: "0.350715", stopColor: "white", stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "paint1_linear_2719_19242", x1: "53.0286", y1: "10.8571", x2: "109.6", y2: "64", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#D0D5DD" }), _jsx("stop", { offset: "0.350715", stopColor: "white", stopOpacity: "0" })] }), _jsxs("linearGradient", { id: "paint2_linear_2719_19242", x1: "92.4", y1: "26.7992", x2: "132", y2: "63.9992", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#D0D5DD" }), _jsx("stop", { offset: "0.350715", stopColor: "white", stopOpacity: "0" })] })] })] }));
+}

package/dist/lib/components/shared/IdFrontImageField/IdFrontImageField.client.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type ValidateFileError } from '../../../utils/validateFile';
+import { type UseIdFrontImageFieldProps } from './useIdFrontImageField';
+export interface IdFrontImageFieldProps extends UseIdFrontImageFieldProps {
+    ref?: RefObject<HTMLDivElement | null>;
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    invalid?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    onError?: (error: ValidateFileError) => void;
+}
+export declare function IdFrontImageField__client(props: IdFrontImageFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/shared/IdFrontImageField/IdFrontImageField.client.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Capacitor } from '@capacitor/core';
+import Image from 'next/image';
+import { useRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { usePxToRemConverter } from '../../../client/hooks/usePxToRemConverter.js';
+import { useRect } from '../../../client/hooks/useRect.js';
+import { Camera01Icon } from '../../../icons/Camera01Icon.js';
+import { CameraOffIcon } from '../../../icons/CameraOffIcon.js';
+import { CheckCircleIcon } from '../../../icons/CheckCircleIcon.js';
+import { RefreshCcw01Icon } from '../../../icons/RefreshCcw01Icon.js';
+import { Spinner02Icon } from '../../../icons/Spinner02Icon.js';
+import { UploadCloud02Icon } from '../../../icons/UploadCloud02Icon.js';
+import { XIcon } from '../../../icons/XIcon.js';
+import { Button } from '../../../ui/Button/index.js';
+import { Dialog } from '../../../ui/Dialog/index.js';
+import { Portal } from '../../../ui/Portal/index.js';
+import { createSplitProps } from '../../../utils/createSplitProps.js';
+import { validateFile, } from '../../../utils/validateFile.js';
+import { IdFrontImageFieldProvider, useIdFrontImageFieldContext, } from './IdFrontImageFieldContext.js';
+import { useIdFrontImageField, } from './useIdFrontImageField.js';
+export function IdFrontImageField__client(props) {
+    const [useIdFrontImageFieldProps, localProps] = createSplitProps([
+        'value',
+        'onChange',
+        'defaultValue',
+    ])(props);
+    const context = useIdFrontImageField(useIdFrontImageFieldProps);
+    return (_jsxs(IdFrontImageFieldProvider, { value: context, children: [_jsxs("div", { ref: localProps.ref, id: localProps.id, style: localProps.style, className: twMerge('group relative aspect-[352/180] w-full shrink-0 rounded-xl border border-border-primary bg-bg-primary p-xl', localProps.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
+                    e.preventDefault();
+                    const file = e.dataTransfer.files?.[0];
+                    if (!file)
+                        return;
+                    const error = validateFile(file);
+                    if (error)
+                        return localProps.onError?.(error);
+                    context.mutation.mutate({ file });
+                }, "aria-describedby": context.field?.ariaDescribedby, children: [_jsx("input", { id: context.field?.ids?.control, ref: context.inputRef, type: "file", accept: "image/png, image/jpeg", onChange: (e) => {
+                            const file = e.target.files?.[0];
+                            if (!file)
+                                return;
+                            const error = validateFile(file);
+                            if (error)
+                                return localProps.onError?.(error);
+                            context.mutation.mutate({ file });
+                        }, disabled: context.field?.disabled ||
+                            context.query.isLoading ||
+                            context.mutation.isPending ||
+                            localProps.disabled, readOnly: context.field?.readOnly || localProps.readOnly, required: context.field?.required || localProps.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "mx-auto flex size-8 items-center justify-center rounded-sm border border-border-primary shadow-xs", children: context.query.isLoading ? (_jsx(Spinner02Icon, { className: "size-4 text-text-placeholder-subtle" })) : (_jsx(UploadCloud02Icon, { className: "size-4 text-text-placeholder-subtle" })) }), _jsxs("h2", { className: "mt-lg text-text-tertiary-600", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
+                                                    context.inputRef.current?.click();
+                                                }, disabled: context.field?.disabled ||
+                                                    context.field?.readOnly ||
+                                                    context.query.isLoading ||
+                                                    context.mutation.isPending ||
+                                                    localProps.disabled ||
+                                                    localProps.readOnly, className: "font-semibold text-button-secondary-fg disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: async () => {
+                                    if (Capacitor.isNativePlatform()) {
+                                        const file = await context.camera.openNativeCamera('back');
+                                        if (!file)
+                                            return;
+                                        context.mutation.mutate({ file });
+                                    }
+                                    else {
+                                        context.disclosure.setOpen(true);
+                                    }
+                                }, disabled: context.field?.disabled ||
+                                    context.field?.readOnly ||
+                                    context.query.isLoading ||
+                                    context.mutation.isPending ||
+                                    localProps.disabled ||
+                                    localProps.readOnly, children: "Take a photo" })] })), context.query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.query.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "h-auto w-full rounded-md" }), _jsx("button", { type: "button", className: "absolute top-2 right-2 rounded-full bg-white/10 p-1 backdrop-blur-xs", onClick: () => {
+                                    context.setValue('');
+                                }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
+}
+/**
+ * -------------------------------------
+ *  Camera
+ * -------------------------------------
+ */
+function Camera() {
+    const context = useIdFrontImageFieldContext();
+    return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
+            context.disclosure.setOpen(details.open);
+        }, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: context.camera.close, 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 overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg bg-bg-primary-alt px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "mt-md text-center text-text-tertiary-600 text-xs lg:text-base", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", ' ', _jsx("br", { className: "hidden lg:block" }), "Avoid glare or reflections, and ensure all corners are within\u00A0the\u00A0frame."] }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "flex aspect-[4/3] flex-col items-center justify-center rounded-md border border-border-disabled bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "size-10 text-center text-text-placeholder-subtle lg:size-12" }), _jsx("h2", { className: "mt-3 font-semibold text-sm lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "mt-0.5 text-center text-text-tertiary-600 text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
+                                                    context.camera.reopen();
+                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "flex aspect-[4/3] flex-col items-center justify-center rounded-md border border-border-disabled bg-black px-4 lg:aspect-video", children: _jsx(Spinner02Icon, { className: "size-8 text-text-placeholder" }) })), context.camera.data && (_jsx("div", { className: "aspect-[4/3] w-full overflow-hidden rounded-md border border-border-disabled bg-black lg:aspect-video", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "mx-auto mt-2 block h-[calc(100%-1rem)] w-auto" }) }))] }), !context.camera.data && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "mx-auto w-full px-xl py-lg disabled:bg-bg-disabled disabled:text-text-disabled lg:w-[10rem]", onClick: () => {
+                                        context.camera.snap();
+                                    }, disabled: context.camera.snapping ||
+                                        context.camera.loading ||
+                                        !!context.camera.error, children: [context.camera.snapping ? (_jsx(Spinner02Icon, { className: "size-5" })) : (_jsx(Camera01Icon, { className: "size-5" })), "Capture"] }) })), context.camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10 lg:justify-center", children: [_jsxs(Button, { onClick: () => {
+                                            const file = context.camera.data?.file;
+                                            if (!file)
+                                                return;
+                                            context.mutation.mutate({ file });
+                                            context.disclosure.setOpen(false);
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                            context.camera.reset();
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
+}
+/**
+ * -------------------------------------
+ *  Video
+ * -------------------------------------
+ */
+function Video() {
+    const context = useIdFrontImageFieldContext();
+    const pxToRem = usePxToRemConverter();
+    const rootRef = useRef(null);
+    const rootRect = useRect(rootRef);
+    const guideRect = useRect(context.guideRef);
+    const x = (rootRect.width - guideRect.width) / 2;
+    const y = (rootRect.height - guideRect.height) / 2;
+    return (_jsxs("div", { ref: rootRef, className: twMerge('relative h-auto w-full overflow-hidden', !context.camera.data && !context.camera.error && !context.camera.loading
+            ? 'block'
+            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx("div", { className: "pointer-events-none absolute top-0 right-0 left-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 left-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute left-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { ref: context.guideRef, className: "-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-1/2 z-10 aspect-[85.6/53.98] w-[calc(100%-1rem)] max-w-[24.688rem] border-4 border-utility-warning-700 border-dashed transition-all duration-200" })] }));
+}

package/dist/lib/components/shared/IdFrontImageField/IdFrontImageField.d.ts

@@ -0,0 +1,2 @@
+import type { IdFrontImageFieldProps } from './IdFrontImageField.client';
+export declare function IdFrontImageField(props: IdFrontImageFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/shared/IdFrontImageField/IdFrontImageField.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { Spinner02Icon } from '../../../icons/Spinner02Icon.js';
+const Component = dynamic(() => import('./IdFrontImageField.client.js').then((mod) => mod.IdFrontImageField__client), {
+    ssr: false,
+    loading: () => (_jsx("div", { className: "flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border border-border-primary bg-bg-primary", children: _jsx(Spinner02Icon, { className: "size-8 text-text-quinary" }) })),
+});
+export function IdFrontImageField(props) {
+    return _jsx(Component, { ...props });
+}

package/dist/lib/components/shared/IdFrontImageField/IdFrontImageFieldContext.d.ts

@@ -0,0 +1,6 @@
+import type { UseIdFrontImageFieldReturn } from './useIdFrontImageField';
+export declare const IdFrontImageFieldProvider: (props: {
+    value: UseIdFrontImageFieldReturn;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useIdFrontImageFieldContext: () => UseIdFrontImageFieldReturn;

package/dist/lib/components/shared/IdFrontImageField/IdFrontImageFieldContext.js

@@ -0,0 +1,2 @@
+import { createContext } from '../../../client/utils/createContext.js';
+export const [IdFrontImageFieldProvider, useIdFrontImageFieldContext] = createContext();

package/dist/lib/components/shared/IdFrontImageField/index.d.ts

@@ -0,0 +1 @@
+export * from './IdFrontImageField';

package/dist/lib/components/shared/IdFrontImageField/index.js

@@ -0,0 +1 @@
+export * from './IdFrontImageField.js';

package/dist/lib/components/shared/IdFrontImageField/useIdFrontImageField.d.ts

@@ -0,0 +1,22 @@
+export interface UseIdFrontImageFieldProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    defaultValue?: string;
+}
+export interface UseIdFrontImageFieldReturn extends ReturnType<typeof useIdFrontImageField> {
+}
+export declare function useIdFrontImageField(props: UseIdFrontImageFieldProps): {
+    field: import("@ark-ui/react").UseFieldContext;
+    value: string;
+    setValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    query: import("@tanstack/react-query").UseQueryResult<import("../../../types").File | null, Error>;
+    mutation: import("@tanstack/react-query").UseMutationResult<string, Error, {
+        file: globalThis.File;
+        id?: string | undefined;
+    }, unknown>;
+    camera: import("../../../client/hooks/useCamera").UseCameraReturn<never>;
+    disclosure: import("../../../client/hooks/useDisclosure").UseDisclosureReturn;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+    guideRef: import("react").RefObject<HTMLDivElement | null>;
+    maskRef: import("react").RefObject<HTMLDivElement | null>;
+};