@opexa/portal-components 0.0.204 → 0.0.206

package/dist/components/KYC/utils.js

@@ -49,24 +49,24 @@ export function validateFile(file) {
         return 'Unsupported file';
 }
 export function showPermissionInstructions() {
-    const instructions = `
-      Camera access is blocked. To enable camera access:
-
-      Chrome/Edge:
-      1. Click the camera icon in the address bar
-      2. Select "Always allow" and click "Done"
-      3. Or go to Settings > Privacy and security > Site settings > Camera
-
-      Firefox:
-      1. Click the shield icon in the address bar
-      2. Click on "Camera blocked"
-      3. Select "Allow" and refresh the page
-
-      Safari:
-      1. Go to Safari > Settings > Websites > Camera
-      2. Find this website and change to "Allow"
-
-      After changing permissions, please refresh the page and try again.
+    const instructions = `
+      Camera access is blocked. To enable camera access:
+
+      Chrome/Edge:
+      1. Click the camera icon in the address bar
+      2. Select "Always allow" and click "Done"
+      3. Or go to Settings > Privacy and security > Site settings > Camera
+
+      Firefox:
+      1. Click the shield icon in the address bar
+      2. Click on "Camera blocked"
+      3. Select "Allow" and refresh the page
+
+      Safari:
+      1. Go to Safari > Settings > Websites > Camera
+      2. Find this website and change to "Allow"
+
+      After changing permissions, please refresh the page and try again.
         `;
     alert(instructions);
 }

package/dist/components/Messages/MessageContext.d.ts

@@ -1,2 +1,6 @@
 import type { Message } from '../../types';
-export declare const MessageContext: import("react").Context<Message>, useMessageContext: () => Message;
+export declare const MessageContext: (props: {
+    value: Message;
+} & {
+    children?: import("react").ReactNode | undefined;
+}) => React.ReactNode, useMessageContext: () => Message;

package/dist/components/News/News.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import Image from 'next/image';
 import Link from 'next/link';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
-import { Prose } from '../../ui/Prose.js';
+import { Prose } from '../../ui/Prose/index.js';
 import { stripTags } from '../../utils/stripTags.js';
 export function News(props) {
     return (_jsxs(_Fragment, { children: [_jsx("meta", { name: "description", content: stripTags(props.news.content) }), _jsx("meta", { name: "og:title", content: props.news.title }), _jsx("meta", { name: "og:description", content: stripTags(props.news.content) }), _jsx("meta", { name: "og:image", content: props.news.image }), _jsx("meta", { name: "twitter:title", content: props.news.title }), _jsx("meta", { name: "twitter:description", content: stripTags(props.news.content) }), _jsx("meta", { name: "twitter:image", content: props.news.image }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsxs("div", { style: props.style, className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/news', className: "text-button-secondary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all News"] }), _jsx(Image, { src: props.news.image, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-3xl block h-auto w-full rounded-xl lg:mt-6" }), _jsx("p", { className: "text-brand-400 mt-xl text-sm font-semibold lg:mt-6", children: props.news.category }), _jsx("h2", { className: "mt-xl text-2xl font-semibold lg:mt-6", children: props.news.title }), _jsx(Prose, { className: "mt-xl lg:mt-6", dangerouslySetInnerHTML: {

package/dist/components/Promo/Promo.client.js

@@ -11,7 +11,7 @@ import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
 import { usePromoQuery } from '../../client/hooks/usePromoQuery.js';
 import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
 import { Button } from '../../ui/Button/index.js';
-import { Prose } from '../../ui/Prose.js';
+import { Prose } from '../../ui/Prose/index.js';
 export function Promo__client(props) {
     const localeInfo = useLocaleInfo();
     const availablePromosQuery = useAvailablePromosQuery();

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

@@ -1,4 +1,4 @@
-import type { Quest } from '@opexa/portal-sdk-core';
+import type { Quest } from '../../../types';
 export declare function DailyCheckInQuest({ quest }: {
     quest: Quest;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js

@@ -3,11 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { addDays, isEqual, startOfDay } from 'date-fns';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useCheckInDailyCheckInQuestMutation } from '../../../client/hooks/index.js';
-import { toaster } from '../../../client/utils/index.js';
-import { CalendarIcon, CheckIcon, ClockStopWatchIcon, InfoCircleIcon, } from '../../../icons/index.js';
-import { Badge, Button } from '../../../ui/index.js';
-import { getAvailableQuestsQueryKey, getQueryClient } from '../../../utils/index.js';
+import { useCheckInDailyCheckInQuestMutation } from '../../../client/hooks/useCheckInDailyCheckInQuestMutation.js';
+import { toaster } from '../../../client/utils/toaster.js';
+import { CalendarIcon } from '../../../icons/CalendarIcon.js';
+import { CheckIcon } from '../../../icons/CheckIcon.js';
+import { ClockStopWatchIcon } from '../../../icons/ClockStopWatchIcon.js';
+import { InfoCircleIcon } from '../../../icons/InfoCircleIcon.js';
+import { Badge } from '../../../ui/Badge/index.js';
+import { Button } from '../../../ui/Button/index.js';
+import { getQueryClient } from '../../../utils/getQueryClient.js';
+import { getAvailableQuestsQueryKey } from '../../../utils/queryKeys.js';
 import CountdownTimer from '../CountdownTimer.js';
 import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
 export function DailyCheckInQuest({ quest }) {

package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../../icons/index.js';
-import { Button, Dialog } from '../../../ui/index.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';
 export function DailyCheckInQuestModal(props) {
     return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(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: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: "Daily Check-In Rules" }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn rewards just for checking in each day!" }), _jsx("li", { children: "Stay consistent to unlock special rewards on the 3rd, 5th, and 7th day." }), _jsx("li", { children: "Missing a day will reset your streak, starting again from Day 1." }), _jsx("li", { children: "Each check-in unlocks the next one on the following day." }), _jsx("li", { children: "Successfully check in for 7 consecutive days to complete the quest and reset the cycle." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
 }

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

@@ -1,4 +1,4 @@
-import type { Quest } from '@opexa/portal-sdk-core';
+import type { Quest } from '../../../types';
 export declare function OnboardingQuest(props: {
     quest: Quest;
 }): null;

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

@@ -1,4 +1,4 @@
-import type { Quest } from '@opexa/portal-sdk-core';
+import type { Quest } from '../../../types';
 export declare function WageringQuest({ quest }: {
     quest: Quest;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Quests/WageringQuest/WageringQuest.js

@@ -2,8 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
-import { Badge } from '../../../ui/index.js';
+import { ClockStopWatchIcon } from '../../../icons/ClockStopWatchIcon.js';
+import { InfoCircleIcon } from '../../../icons/InfoCircleIcon.js';
+import { Badge } from '../../../ui/Badge/index.js';
 import CountdownTimer from '../CountdownTimer.js';
 import { WageringQuestModal } from './WageringQuestModal.js';
 export function WageringQuest({ quest }) {

package/dist/components/Quests/WageringQuest/WageringQuestModal.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Portal } from '@ark-ui/react';
-import { XIcon } from '../../../icons/index.js';
-import { Button, Dialog } from '../../../ui/index.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';
 export function WageringQuestModal(props) {
     return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(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: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: props.questName }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
 }

package/dist/components/Search/Search.lazy.js

@@ -18,7 +18,7 @@ import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { IconButton } from '../../ui/IconButton/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { Presence } from '../../ui/Presence.js';
+import { Presence } from '../../ui/Presence/index.js';
 import { callIfFn } from '../../utils/callIfFn.js';
 import { getGameImageUrl } from '../../utils/getGameImageUrl.js';
 import { GameLaunchTrigger } from '../GameLaunch/index.js';

package/dist/components/SignIn/MobileNumberSignIn.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useDialogContext } from '@ark-ui/react/dialog';
 import { zodResolver } from '@hookform/resolvers/zod';
 import Link from 'next/link';
 import { useRef } from 'react';
@@ -23,9 +22,10 @@ import { useSignInContext, useSignInPropsContext } from './SignInContext.js';
 export function MobileNumberSignIn() {
     const signInProps = useSignInPropsContext();
     const context = useSignInContext();
-    const dialog = useDialogContext();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
+        signIn: ctx.signIn,
         signUp: ctx.signUp,
+        kycReminder: ctx.kycReminder,
     })));
     const signInMutation = useSignInMutation();
     const sendVerificationCodeMutation = useSendVerificationCodeMutation();
@@ -103,9 +103,9 @@ export function MobileNumberSignIn() {
                                                 o.field.onChange(details.checked);
                                             }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I accept the", ' ', _jsx(Link, { href: signInProps.termsAndConditionsUrl ??
                                                                 '/terms-and-conditions', onClick: () => {
-                                                                dialog.setOpen(false);
+                                                                globalStore.signIn.setOpen(false);
                                                             }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Don't have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
-                                    dialog.setOpen(false);
+                                    globalStore.signIn.setOpen(false);
                                     globalStore.signUp.setOpen(true);
                                 }, children: "Sign up" })] })] })), context.step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
                             const { mobileNumber } = step1Form.getValues();
@@ -115,10 +115,11 @@ export function MobileNumberSignIn() {
                                     mobileNumber: mobileNumberParser.format(mobileNumber),
                                     verificationCode: verificationCode.join(''),
                                 });
-                                dialog.setOpen(false);
                                 step1Form.reset();
                                 step2Form.reset();
                                 context.setStep(1);
+                                globalStore.signIn.setOpen(false);
+                                globalStore.kycReminder.setOpen(true);
                             }
                             catch {
                                 toaster.error({

package/dist/components/SignIn/NameAndPasswordSignIn.js

@@ -25,6 +25,7 @@ export function NameAndPasswordSignIn() {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         signIn: ctx.signIn,
         signUp: ctx.signUp,
+        kycReminder: ctx.kycReminder,
         forgotPassword: ctx.forgotPassword,
     })));
     const signInMutation = useSignInMutation({
@@ -48,6 +49,7 @@ export function NameAndPasswordSignIn() {
     });
     const authenticateMutation = useAuthenticateMutation({
         onSuccess() {
+            globalStore.kycReminder.setOpen(true);
             globalStore.signIn.setOpen(false);
             authenticateMutation.reset();
             signInMutation.reset();

package/dist/components/SignUp/SignUpDefault/SignUpForm.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createListCollection, parseDate } from '@ark-ui/react';
-import { useDialogContext } from '@ark-ui/react/dialog';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ObjectId } from '@opexa/object-id';
 import { differenceInYears, format } from 'date-fns';
@@ -48,9 +47,12 @@ export function SignUpForm() {
         itemToString: (item) => `${item.code} - ${item.name}`,
     });
     const [step, setStep] = useState(1);
-    const dialog = useDialogContext();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        kycReminder: ctx.kycReminder,
+        signIn: ctx.signIn,
+        signUp: ctx.signUp,
+    })));
     const search = useSearchParams();
-    const signInStore = useGlobalStore(useShallow((ctx) => ctx.signIn));
     const signUpMutation = useSignUpMutation();
     const signInMutation = useSignInMutation();
     const updateAccountMutation = useUpdateAccountMutation();
@@ -180,10 +182,10 @@ export function SignUpForm() {
                                                 o.field.onChange(details.checked);
                                             }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I accept the", ' ', _jsx(Link, { href: signUpProps.termsAndConditionsUrl ??
                                                                 '/terms-and-conditions', onClick: () => {
-                                                                dialog.setOpen(false);
+                                                                globalStore.signUp.setOpen(false);
                                                             }, className: "text-brand-400 whitespace-nowrap underline underline-offset-2", children: "Terms and Conditions." })] }), ' ', _jsx(Checkbox.HiddenInput, {})] }), _jsx(Field.ErrorText, { className: "ml-6 text-xs", children: o.fieldState.error?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-3xl", disabled: step1Form.formState.isSubmitting, children: "Create Account" })] }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "Already have an account?" }), _jsx("button", { type: "submit", className: "text-button-tertiary-fg font-semibold", onClick: () => {
-                                    dialog.setOpen(false);
-                                    signInStore.setOpen(true);
+                                    globalStore.signUp.setOpen(false);
+                                    globalStore.signIn.setOpen(true);
                                 }, children: "Log In" })] })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "mt-xl text-center text-lg font-semibold", children: "Check your Phone" }), _jsxs("p", { className: "text-text-secondary-700 mt-xs text-center text-sm", children: ["We\u2019ve sent a verification code to your mobile number", ' ', _jsx("span", { className: "font-semibold", children: mobileNumberParser.format(step1Form.getValues('mobileNumber')) }), ' ', "via text"] }), _jsxs("form", { ref: form2Ref, className: "mt-5", onSubmit: step2Form.handleSubmit(async ({ verificationCode }) => {
                             const id = ObjectId.generate(ObjectType.MemberAccount).toString();
                             const { mobileNumber } = step1Form.getValues();
@@ -215,7 +217,7 @@ export function SignUpForm() {
                                 });
                                 const ok = await pollLogin();
                                 if (!ok) {
-                                    signInStore.setOpen(true);
+                                    globalStore.signIn.setOpen(true);
                                     return;
                                 }
                                 else {
@@ -238,7 +240,8 @@ export function SignUpForm() {
                                     });
                                     await pollUpdateAccount();
                                 }
-                                dialog.setOpen(false);
+                                globalStore.signUp.setOpen(false);
+                                globalStore.kycReminder.setOpen(true);
                                 step1Form.reset();
                                 step2Form.reset();
                                 setStep(1);

package/dist/components/SignUp/SignUpForm.js

@@ -192,6 +192,7 @@ export function SignUpForm() {
                                     mobileNumber: mobileNumberParser.format(mobileNumber),
                                     verificationCode: verificationCode.join(''),
                                     referralCode: search.get('referralCode') ?? undefined,
+                                    domain: search.get('domain') ?? undefined,
                                     btag: search.get('btag') ?? undefined,
                                 });
                                 const name = mobileNumberParser.format(mobileNumber);
@@ -251,7 +252,7 @@ export function SignUpForm() {
                                                 o.field.onChange(details.value);
                                             }, onValueComplete: () => {
                                                 form2Ref.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: "text-text-placeholder-subtle text-2xl font-medium", 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.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
+                                            }, 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: "text-text-placeholder-subtle text-2xl font-medium", 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.formState.errors.verificationCode?.message })] })) }), _jsx(Button, { type: "submit", className: "mt-4xl", disabled: step2Form.formState.isSubmitting, children: "Verify" }), _jsxs("div", { className: "mt-3 flex w-full items-center justify-center gap-xs text-sm", children: [_jsx("span", { className: "text-text-secondary-700", children: "Didn't recieve the code?" }), _jsx("button", { type: "button", className: "text-button-secondary-fg font-semibold disabled:cursor-not-allowed disabled:opacity-75", disabled: cooldown.cooling, onClick: async () => {
                                             await sendVerificationCodeMutation.mutateAsync({
                                                 channel: 'SMS',
                                                 recipient: mobileNumberParser.format(step1Form.getValues('mobileNumber')),

package/dist/components/SignUp/SignUpPagcor/CaptureIdDocument.d.ts

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

package/dist/components/SignUp/SignUpPagcor/CaptureIdDocument.js

@@ -0,0 +1,198 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
+import { Camera01Icon } from '../../../icons/Camera01Icon.js';
+import { CheckCircleIcon } from '../../../icons/CheckCircleIcon.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 { dataURLtoBlob, resizeFile } from '../../KYC/utils.js';
+import { useSignUpPagcorPropsContext } from './SignUpPagcorContext.js';
+export function CaptureIdDocument() {
+    const props = useSignUpPagcorPropsContext();
+    const [videoStream, setVideoStream] = useState(null);
+    const [cameraError, setCameraError] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [captureInProgress, setCaptureInProgress] = useState(false);
+    const [proccessImageCanvas, setProccessImageCanvas] = useState(null);
+    const videoElement = useRef(null);
+    const containerRef = useRef(null);
+    function stopCamera() {
+        if (videoStream) {
+            videoStream.getTracks().forEach((track) => track.stop());
+            setVideoStream(null);
+        }
+    }
+    useEffect(() => {
+        return () => {
+            stopCamera();
+        };
+    }, [videoStream]);
+    async function startCamera() {
+        try {
+            setIsLoading(true);
+            setCameraError(null);
+            setCaptureInProgress(true);
+            console.log('Starting camera...');
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    facingMode: 'environment',
+                    aspectRatio: 16 / 9,
+                    width: { ideal: 1920, max: 1920 },
+                    height: { ideal: 1080, max: 1080 },
+                    frameRate: {
+                        ideal: 30,
+                        max: 60,
+                    },
+                },
+                audio: false,
+            });
+            // Set the stream directly to the video element
+            if (videoElement.current) {
+                videoElement.current.srcObject = stream;
+                videoElement.current.onloadedmetadata = () => {
+                    console.log('Video metadata loaded, starting playback...');
+                    videoElement.current
+                        ?.play()
+                        .then(() => {
+                        setVideoStream(stream);
+                        setIsLoading(false);
+                    })
+                        .catch(() => {
+                        setCameraError('Failed to start camera stream. Please try again.');
+                        setIsLoading(false);
+                        // Stop the stream if playback fails
+                        stream.getTracks().forEach((track) => track.stop());
+                    });
+                };
+                videoElement.current.onerror = (err) => {
+                    console.error('Video element error:', err);
+                    setCameraError('Video playback error. Please try again.');
+                    setIsLoading(false);
+                    stream.getTracks().forEach((track) => track.stop());
+                };
+            }
+            else {
+                console.error('Video element not available');
+                setCameraError('Camera initialization failed. Please try again.');
+                setCaptureInProgress(false);
+                setIsLoading(false);
+                stream.getTracks().forEach((track) => track.stop());
+            }
+        }
+        catch (error) {
+            setIsLoading(false);
+            if (error instanceof DOMException) {
+                console.error('Error accessing camera:', error.message);
+                setCameraError(error.message);
+            }
+            else {
+                console.error('Unknown error accessing camera:', error);
+                setCameraError('An unknown error occurred. Please check permissions and try again.');
+            }
+            setCaptureInProgress(false);
+        }
+    }
+    function captureAndProcessImage() {
+        if (!videoElement.current || !videoStream) {
+            console.error('Video element or stream not available for capture');
+            return;
+        }
+        try {
+            const canvas = document.createElement('canvas');
+            const parentDiv = document.getElementById('parent');
+            canvas.width = parentDiv?.clientWidth || videoElement.current.width;
+            canvas.height = parentDiv?.clientHeight || videoElement.current.height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                console.error('Could not get 2D context for canvas');
+                setCameraError('Failed to process image. Please try again.');
+                setCaptureInProgress(false);
+                return;
+            }
+            ctx.drawImage(videoElement.current, 0, 0, canvas.width, canvas.height);
+            const imageSrc = canvas.toDataURL('image/png', 1.0);
+            setSelectedImage({ src: imageSrc });
+            setCaptureInProgress(false);
+            stopCamera();
+            const newImg = document.createElement('img');
+            newImg.src = imageSrc;
+            //@ts-expect-error jscanify is not typed
+            const scanner = new jscanify();
+            newImg.onload = () => {
+                try {
+                    if (containerRef.current) {
+                        // containerRef.current.innerHTML = '';
+                        const paperWidth = parentDiv?.clientWidth || videoElement.current?.videoWidth;
+                        const paperHeight = parentDiv?.clientHeight || videoElement.current?.videoHeight;
+                        //@ts-expect-error jscanify is not typed
+                        const contour = scanner.findPaperContour(cv.imread(newImg));
+                        const cornerPoints = scanner.getCornerPoints(contour);
+                        const resultCanvas = scanner.extractPaper(newImg, paperWidth, paperHeight, cornerPoints);
+                        newImg.className =
+                            'absolute inset-0 m-auto w-full h-auto md:max-h-[333px] md:max-w-[643px] aspect-video rounded-lg object-contain';
+                        setProccessImageCanvas(resultCanvas);
+                        containerRef.current.appendChild(resultCanvas);
+                        setCaptureInProgress(false);
+                        setSelectedImage({ src: resultCanvas.toDataURL('image/png') });
+                    }
+                }
+                catch (error) {
+                    console.error('Error processing image:', error);
+                    setCameraError('Failed to process image. Please try again.');
+                }
+            };
+            newImg.onerror = () => {
+                console.error('Error loading image');
+                setCameraError('Failed to load image. Please try again.');
+            };
+        }
+        catch (error) {
+            console.error('Error capturing image:', error);
+            setCameraError('Failed to capture image. Please try again.');
+            setCaptureInProgress(false);
+        }
+    }
+    async function uploadPhoto() {
+        if (!proccessImageCanvas) {
+            console.error('Failed to process the image. Please try again.');
+            return;
+        }
+        const blob = proccessImageCanvas.toDataURL('image/png', 1.0);
+        const processedBlob = dataURLtoBlob(blob);
+        const img = new File([processedBlob], 'frontImage', { type: 'image/jpeg' });
+        const resizedImage = (await resizeFile(img));
+        if (resizedImage) {
+            props.setFrontImage(resizedImage);
+            props.setCapturing(null);
+            stopCamera();
+        }
+    }
+    function retakePhoto() {
+        setSelectedImage(null);
+        setCaptureInProgress(true);
+        setCameraError(null);
+        if (containerRef.current) {
+            const canvas = containerRef.current.querySelector('canvas');
+            if (canvas) {
+                canvas.width = canvas.width;
+            }
+            containerRef.current.innerHTML = '';
+        }
+        if (videoElement.current) {
+            videoElement.current.play();
+        }
+        startCamera();
+    }
+    return (_jsx(Dialog.Root, { open: props.capturing === 'ID_DOCUMENT', lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { className: twMerge('bg-bg-primary-alt mx-auto h-full w-full items-start p-3xl pb-4xl lg:h-auto lg:w-fit lg:rounded-xl', props.className), children: _jsxs("div", { className: "w-full p-4 lg:w-[640px] lg:px-12 lg:py-4xl", children: [_jsxs("button", { type: "button", className: "flex items-center gap-lg lg:absolute lg:right-5 lg:top-5 lg:p-md", onClick: () => {
+                                        stopCamera();
+                                        props.setCapturing(null);
+                                    }, children: [_jsx(XIcon, { className: "text-text-senary-300 hidden size-5 lg:block" }), _jsx(ArrowLeftIcon, { className: "text-text-senary-300 size-5 lg:hidden" }), _jsx("span", { className: "text-lg font-semibold lg:hidden", children: "Back" })] }), _jsx(Dialog.Title, { className: "mt-6 text-center text-lg font-semibold lg:mt-0", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "lg:max-w-auto text-text-tertiary-600 mx-auto mt-sm max-w-[19rem] text-center text-sm lg:max-w-full", 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 the frame."] }), _jsx("div", { id: "parent", className: "border-border-disabled mt-6 aspect-video rounded-xl border bg-black lg:mt-8", children: cameraError ? (_jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-red-500 mb-2 text-sm", children: "Camera Error" }), _jsx("p", { className: "text-gray-400 text-xs", children: cameraError })] }) })) : captureInProgress ? (_jsxs("div", { className: "relative flex h-fit w-full flex-col items-center justify-center", children: [_jsx("video", { ref: videoElement, autoPlay: true, muted: true, playsInline: true, className: "relative h-[60vh] w-full rounded-lg object-cover md:aspect-video md:max-h-[333px]", width: "100%", height: "100%" }), _jsxs("div", { className: "pointer-events-none absolute inset-0 z-50", children: [_jsx("div", { className: twMerge('absolute inset-0 w-full bg-black/60 backdrop-blur-sm [clip-path:polygon(0%_0%,0%_100%,calc(50%-158px)_100%,calc(50%-158px)_calc(50%-100px),calc(50%+158px)_calc(50%-100px),calc(50%+158px)_calc(50%+100px),calc(50%-158px)_calc(50%+100px),calc(50%-158px)_100%,100%_100%,100%_0%)] md:[clip-path:polygon(0%_0%,0%_100%,calc(50%-225px)_100%,calc(50%-225px)_calc(50%-142px),calc(50%+225px)_calc(50%-142px),calc(50%+225px)_calc(50%+142px),calc(50%-225px)_calc(50%+142px),calc(50%-225px)_100%,100%_100%,100%_0%)]') }), _jsx("div", { className: "absolute inset-0 z-[60] mx-auto flex items-center justify-center", children: _jsx("div", { className: "relative aspect-[1011/638] h-[200px] md:h-[295px] md:w-[450px]", children: _jsx("div", { className: "h-full w-full rounded-lg border-4 border-dashed border-[#B54708]" }) }) })] })] })) : (_jsx("div", { ref: containerRef, className: "relative grid h-full w-full place-items-center rounded-lg object-contain md:max-h-[333px]" })) }), cameraError ? (_jsx("div", { className: "mt-4 text-center", children: _jsx(Button, { className: "mx-auto px-xl lg:w-fit", onClick: () => {
+                                            setCameraError(null);
+                                            startCamera();
+                                        }, children: "Try Again" }) })) : captureInProgress ? (_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", onClick: captureAndProcessImage, children: ["Capture Image", _jsx(Camera01Icon, { className: "size-5" })] })) : selectedImage && selectedImage.src ? (_jsxs("div", { className: "mt-4 flex flex-col items-center justify-center gap-2 md:flex-row", children: [_jsxs(Button, { className: "lg:w-fit", type: "button", onClick: retakePhoto, children: ["Retake Photo ", _jsx(Camera01Icon, { className: "ml-1" })] }), _jsxs(Button, { className: "lg:w-fit", type: "button", onClick: uploadPhoto, children: ["Use Photo ", _jsx(CheckCircleIcon, { className: "ml-1" })] })] })) : (_jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto mt-6 px-xl disabled:opacity-100 lg:mt-8 lg:w-fit", onClick: startCamera, disabled: isLoading || !!videoStream, children: [isLoading ? 'Starting Camera...' : 'Start Camera', _jsx(Camera01Icon, { className: "size-5" })] }))] }) }) })] }) }));
+}

package/dist/components/SignUp/SignUpPagcor/CaptureSelfie.d.ts

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