@opexa/portal-components 0.0.243 → 0.0.245

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (130) hide show
  1. package/dist/client/hooks/useCamera.js +13 -4
  2. package/dist/client/hooks/useFeatureFlag.d.ts +2 -5
  3. package/dist/client/hooks/useFeatureFlag.js +29 -36
  4. package/dist/client/hooks/useInfiniteQueryHelper.js +1 -1
  5. package/dist/components/Account/Account.lazy.js +6 -3
  6. package/dist/components/AccountInfo/AccountInfo.js +1 -1
  7. package/dist/components/AccountVerification/AccountVerification.js +5 -2
  8. package/dist/components/Banner/Banner.js +2 -1
  9. package/dist/components/BetRecords/BetRecords.client.d.ts +4 -0
  10. package/dist/components/BetRecords/BetRecords.client.js +2 -2
  11. package/dist/components/Bonuses/Bonuses.client.js +13 -8
  12. package/dist/components/GameLaunch/GameLaunchTrigger.js +7 -0
  13. package/dist/components/GameProviders/GameProvidersCarousel.js +2 -2
  14. package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +184 -184
  15. package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +184 -184
  16. package/dist/components/KYC/utils.js +18 -18
  17. package/dist/components/PortalProvider/FeatureFlag.js +14 -6
  18. package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.module.css +184 -184
  19. package/dist/components/Tournaments/TournamentsList/TournamentItem.module.css +184 -184
  20. package/dist/components/TransactionRecords/WithdrawalRecordsTable.js +1 -1
  21. package/dist/components/shared/IdDocumentField.client.d.ts +25 -0
  22. package/dist/components/shared/IdDocumentField.client.js +204 -0
  23. package/dist/components/shared/IdDocumentField.d.ts +1 -24
  24. package/dist/components/shared/IdDocumentField.js +7 -201
  25. package/dist/components/shared/SelfieField.client.d.ts +20 -0
  26. package/dist/components/shared/SelfieField.client.js +327 -0
  27. package/dist/components/shared/SelfieField.d.ts +1 -20
  28. package/dist/components/shared/SelfieField.js +7 -315
  29. package/dist/services/queries.d.ts +1 -1
  30. package/dist/services/queries.js +2528 -2527
  31. package/dist/styles/theme.css +694 -694
  32. package/dist/types/index.d.ts +6 -0
  33. package/dist/ui/AlertDialog/AlertDialog.d.ts +88 -88
  34. package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +8 -8
  35. package/dist/ui/Combobox/Combobox.d.ts +42 -42
  36. package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
  37. package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
  38. package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
  39. package/dist/ui/Dialog/Dialog.d.ts +88 -88
  40. package/dist/ui/Dialog/dialog.recipe.d.ts +8 -8
  41. package/dist/ui/Drawer/Drawer.d.ts +33 -33
  42. package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
  43. package/dist/ui/Field/Field.d.ts +21 -21
  44. package/dist/ui/Field/field.recipe.d.ts +3 -3
  45. package/dist/ui/Popover/Popover.d.ts +55 -55
  46. package/dist/ui/Popover/popover.recipe.d.ts +5 -5
  47. package/dist/ui/Select/Select.d.ts +45 -45
  48. package/dist/ui/Select/select.recipe.d.ts +3 -3
  49. package/dist/utils/gamesAvailable3pmTo3am.d.ts +1 -0
  50. package/dist/utils/gamesAvailable3pmTo3am.js +1 -0
  51. package/dist/utils/getGameImageUrl.js +4 -6
  52. package/dist/utils/isBetween3amAnd3pm.d.ts +1 -0
  53. package/dist/utils/isBetween3amAnd3pm.js +5 -0
  54. package/package.json +165 -165
  55. package/dist/components/FeatureFlag/FeatureFlag.d.ts +0 -1
  56. package/dist/components/FeatureFlag/FeatureFlag.js +0 -29
  57. package/dist/components/FeatureFlag/index.d.ts +0 -1
  58. package/dist/components/FeatureFlag/index.js +0 -1
  59. package/dist/components/KYC/AutoOpen.d.ts +0 -1
  60. package/dist/components/KYC/AutoOpen.js +0 -40
  61. package/dist/components/KYC/backup/Header.d.ts +0 -1
  62. package/dist/components/KYC/backup/Header.js +0 -8
  63. package/dist/components/KYC/backup/Indicator.d.ts +0 -1
  64. package/dist/components/KYC/backup/Indicator.js +0 -9
  65. package/dist/components/KYC/backup/KYC.d.ts +0 -1
  66. package/dist/components/KYC/backup/KYC.js +0 -14
  67. package/dist/components/KYC/backup/KYC.lazy.d.ts +0 -1
  68. package/dist/components/KYC/backup/KYC.lazy.js +0 -26
  69. package/dist/components/KYC/backup/KYCContext.d.ts +0 -6
  70. package/dist/components/KYC/backup/KYCContext.js +0 -2
  71. package/dist/components/KYC/backup/Step1.d.ts +0 -1
  72. package/dist/components/KYC/backup/Step1.js +0 -13
  73. package/dist/components/KYC/backup/Step2.d.ts +0 -1
  74. package/dist/components/KYC/backup/Step2.js +0 -13
  75. package/dist/components/KYC/backup/Step3.d.ts +0 -1
  76. package/dist/components/KYC/backup/Step3.js +0 -13
  77. package/dist/components/KYC/backup/Step4.d.ts +0 -1
  78. package/dist/components/KYC/backup/Step4.js +0 -7
  79. package/dist/components/KYC/backup/useKYC.d.ts +0 -10
  80. package/dist/components/KYC/backup/useKYC.js +0 -8
  81. package/dist/components/KYC/loadModels.d.ts +0 -1
  82. package/dist/components/KYC/loadModels.js +0 -9
  83. package/dist/components/Messages/Message.d.ts +0 -1
  84. package/dist/components/Messages/Message.js +0 -35
  85. package/dist/components/Messages/MessageContext.d.ts +0 -6
  86. package/dist/components/Messages/MessageContext.js +0 -2
  87. package/dist/components/Messages/MessagePopup.d.ts +0 -1
  88. package/dist/components/Messages/MessagePopup.js +0 -20
  89. package/dist/components/Messages/MessageTrigger.d.ts +0 -8
  90. package/dist/components/Messages/MessageTrigger.js +0 -19
  91. package/dist/components/Quests/CountdownTimer.d.ts +0 -15
  92. package/dist/components/Quests/CountdownTimer.js +0 -33
  93. package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts +0 -4
  94. package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js +0 -78
  95. package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.d.ts +0 -8
  96. package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js +0 -9
  97. package/dist/components/Quests/OnboardingQuest/OnboardingQuest.d.ts +0 -4
  98. package/dist/components/Quests/OnboardingQuest/OnboardingQuest.js +0 -4
  99. package/dist/components/Quests/WageringQuest/WageringQuest.d.ts +0 -4
  100. package/dist/components/Quests/WageringQuest/WageringQuest.js +0 -20
  101. package/dist/components/Quests/WageringQuest/WageringQuestModal.d.ts +0 -9
  102. package/dist/components/Quests/WageringQuest/WageringQuestModal.js +0 -9
  103. package/dist/components/SignUp/SignUp.lazy.d.ts +0 -12
  104. package/dist/components/SignUp/SignUp.lazy.js +0 -18
  105. package/dist/components/SignUp/SignUpContext.d.ts +0 -6
  106. package/dist/components/SignUp/SignUpContext.js +0 -2
  107. package/dist/components/SignUp/SignUpForm.d.ts +0 -1
  108. package/dist/components/SignUp/SignUpForm.js +0 -284
  109. package/dist/components/SignUp/SignUpPagcor/CaptureIdDocument.d.ts +0 -1
  110. package/dist/components/SignUp/SignUpPagcor/CaptureIdDocument.js +0 -198
  111. package/dist/components/SignUp/SignUpPagcor/CaptureSelfie.d.ts +0 -1
  112. package/dist/components/SignUp/SignUpPagcor/CaptureSelfie.js +0 -251
  113. package/dist/components/SignUp/SignUpPagcor/ImageUploader.d.ts +0 -10
  114. package/dist/components/SignUp/SignUpPagcor/ImageUploader.js +0 -41
  115. package/dist/components/SignUp/SignUpPagcor/SignUpFormPagcor.d.ts +0 -1
  116. package/dist/components/SignUp/SignUpPagcor/SignUpFormPagcor.js +0 -429
  117. package/dist/components/SignUp/SignUpPagcor/SignUpPagcor.lazy.d.ts +0 -13
  118. package/dist/components/SignUp/SignUpPagcor/SignUpPagcor.lazy.js +0 -26
  119. package/dist/components/SignUp/SignUpPagcor/SignUpPagcorContext.d.ts +0 -7
  120. package/dist/components/SignUp/SignUpPagcor/SignUpPagcorContext.js +0 -2
  121. package/dist/components/SignUp/SignUpPagcor/useImageUploader.d.ts +0 -11
  122. package/dist/components/SignUp/SignUpPagcor/useImageUploader.js +0 -20
  123. package/dist/constants/BranchCode.d.ts +0 -4
  124. package/dist/constants/BranchCode.js +0 -42
  125. package/dist/icons/BellRingIcon.d.ts +0 -2
  126. package/dist/icons/BellRingIcon.js +0 -4
  127. package/dist/utils/dataUrlToBlob.d.ts +0 -1
  128. package/dist/utils/dataUrlToBlob.js +0 -11
  129. package/dist/utils/resizeImageSize.d.ts +0 -2
  130. package/dist/utils/resizeImageSize.js +0 -11
@@ -1,319 +1,11 @@
1
1
  'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useFieldContext } from '@ark-ui/react';
4
- import * as faceapi from 'face-api.js';
5
- import Image from 'next/image';
6
- import { cache, useEffect, useId, useRef, useState, } from 'react';
7
- import { twMerge } from 'tailwind-merge';
8
- import { useInterval } from 'usehooks-ts';
9
- import { useCamera } from '../../client/hooks/useCamera.js';
10
- import { useControllableState } from '../../client/hooks/useControllableState.js';
11
- import { useDisclosure } from '../../client/hooks/useDisclosure.js';
12
- import { useFileQuery } from '../../client/hooks/useFileQuery.js';
13
- import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
14
- import { createContext } from '../../client/utils/createContext.js';
15
- import { toaster } from '../../client/utils/toaster.js';
16
- import { Camera01Icon } from '../../icons/Camera01Icon.js';
17
- import { CameraOffIcon } from '../../icons/CameraOffIcon.js';
18
- import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
19
- import { RefreshCcw01Icon } from '../../icons/RefreshCcw01Icon.js';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import dynamic from 'next/dynamic';
20
4
  import { Spinner02Icon } from '../../icons/Spinner02Icon.js';
21
- import { UploadCloud02Icon } from '../../icons/UploadCloud02Icon.js';
22
- import { XIcon } from '../../icons/XIcon.js';
23
- import { Button } from '../../ui/Button/index.js';
24
- import { Dialog } from '../../ui/Dialog/index.js';
25
- import { Portal } from '../../ui/Portal/index.js';
26
- import { validateFile } from '../../utils/validateFile.js';
27
- export function SelfieField(props) {
28
- const context = useSelfieField(props);
29
- return (_jsxs(SelfieFieldProvider, { value: context, children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('group', 'border', 'border-border-primary', 'bg-bg-primary', 'relative', 'w-full', 'aspect-[352/180]', 'shrink-0', 'rounded-xl', 'p-xl', props.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: async (e) => {
30
- e.preventDefault();
31
- const file = e.dataTransfer.files?.[0];
32
- if (!file)
33
- return;
34
- const error = validateFile(file);
35
- if (error)
36
- return props.onError?.(error);
37
- context.mutation.mutate({ file });
38
- }, "aria-describedby": context.field?.ariaDescribedby, children: [_jsx("input", { id: context.field?.ids?.control, ref: context.inputRef, type: "file", accept: "image/png, image/jpeg", onChange: async (e) => {
39
- const file = e.target.files?.[0];
40
- if (!file)
41
- return;
42
- const error = validateFile(file);
43
- if (error)
44
- return props.onError?.(error);
45
- context.mutation.mutate({ file });
46
- }, disabled: context.field?.disabled ||
47
- context.query.isLoading ||
48
- context.mutation.isPending ||
49
- props.disabled, readOnly: context.field?.readOnly || props.readOnly, required: context.field?.required || props.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" }) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
50
- context.inputRef.current?.click();
51
- }, disabled: context.field?.disabled ||
52
- context.field?.readOnly ||
53
- context.query.isLoading ||
54
- context.mutation.isPending ||
55
- props.disabled ||
56
- props.readOnly, className: "text-button-secondary-fg font-semibold 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: () => {
57
- context.disclosure.setOpen(true);
58
- }, disabled: context.field?.disabled ||
59
- context.field?.readOnly ||
60
- context.query.isLoading ||
61
- context.mutation.isPending ||
62
- props.disabled ||
63
- props.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: 600, unoptimized: true, className: "h-auto w-full rounded-md" }), _jsx("button", { type: "button", className: "backdrop-blur-xs absolute right-2 top-2 rounded-full bg-white/10 p-1", onClick: () => {
64
- context.setValue('');
65
- }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
66
- }
67
- /**
68
- * -------------------------------------
69
- * Camera
70
- * -------------------------------------
71
- */
72
- function Camera() {
73
- const context = useSelfieFieldContext();
74
- return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
75
- context.disclosure.setOpen(details.open);
76
- }, 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: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg 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 Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: "Make sure your face and ID are clearly visible, with no glare\u00A0or\u00A0blur." }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center 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: () => {
77
- context.camera.reopen();
78
- }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled aspect-[4/3] w-full overflow-hidden rounded-md border bg-black lg:aspect-video", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 600, 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: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl py-lg lg:w-[10rem]", onClick: () => {
79
- context.camera.snap({
80
- crop: context.guideRef.current?.getBoundingClientRect(),
81
- });
82
- }, disabled: !context.faceFound ||
83
- context.camera.loading ||
84
- context.camera.snapping ||
85
- !!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: () => {
86
- const file = context.camera.data?.file;
87
- if (!file)
88
- return;
89
- context.mutation.mutate({ file });
90
- context.disclosure.setOpen(false);
91
- }, className: "w-full lg:w-[10rem]", children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
92
- context.camera.reset();
93
- }, className: "w-full lg:w-[10rem]", children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
94
- }
95
- /*
96
- * -------------------------------------
97
- * Video
98
- * -------------------------------------
99
- */
100
- function Video() {
101
- const id = useId();
102
- const context = useSelfieFieldContext();
103
- const [maskBox, setMaskBox] = useState({
104
- x: 0,
105
- y: 0,
106
- width: 0,
107
- height: 0,
108
- });
109
- useEffect(() => {
110
- const update = () => {
111
- const guide = context.guideRef.current;
112
- const mask = context.maskRef.current;
113
- if (!guide || !mask)
114
- return;
115
- const guideRect = guide.getBoundingClientRect();
116
- const maskRect = mask.getBoundingClientRect();
117
- const x = guideRect.left - maskRect.left;
118
- const y = guideRect.top - maskRect.top;
119
- const width = guideRect.width;
120
- const height = guideRect.height;
121
- if (width && height) {
122
- setMaskBox({
123
- x,
124
- y,
125
- width,
126
- height,
127
- });
128
- }
129
- };
130
- const observer = new ResizeObserver(update);
131
- if (context.guideRef.current)
132
- observer.observe(context.guideRef.current);
133
- if (context.maskRef.current)
134
- observer.observe(context.maskRef.current);
135
- requestAnimationFrame(update);
136
- return () => observer.disconnect();
137
- }, [context.guideRef, context.maskRef]);
138
- const [videoSize, setVideoSize] = useState({
139
- width: 0,
140
- height: 0,
141
- });
142
- useEffect(() => {
143
- const video = context.camera.videoRef.current;
144
- if (!video)
145
- return;
146
- const updateVideoWidth = () => {
147
- const rect = video.getBoundingClientRect();
148
- setVideoSize({
149
- width: rect.width,
150
- height: rect.height,
151
- });
152
- };
153
- video.addEventListener('loadedmetadata', updateVideoWidth);
154
- video.addEventListener('resize', updateVideoWidth);
155
- return () => {
156
- video.removeEventListener('loadedmetadata', updateVideoWidth);
157
- video.removeEventListener('resize', updateVideoWidth);
158
- };
159
- }, [context.camera.videoRef]);
160
- const guideWidth = videoSize.width <= 0 || videoSize.height <= 0
161
- ? 0
162
- : videoSize.width > videoSize.height
163
- ? videoSize.height
164
- : videoSize.width;
165
- return (_jsxs("div", { className: twMerge('relative h-auto w-full overflow-hidden', !context.camera.data && !context.camera.error && !context.camera.loading
166
- ? 'block'
167
- : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx("svg", { className: "pointer-events-none absolute -inset-4 size-[200%]", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "200%", height: "200%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8", ry: "8" })] }) }) }), _jsx("div", { ref: context.maskRef, className: "absolute -inset-4 size-[200%] bg-black/60 backdrop-blur-sm", style: {
168
- mask: `url(#${id})`,
169
- WebkitMask: `url(#${id})`,
170
- maskRepeat: 'no-repeat',
171
- WebkitMaskRepeat: 'no-repeat',
172
- } }), _jsx("div", { ref: context.guideRef, className: twMerge('border-utility-warning-700 absolute left-1/2 top-1/2 z-20 aspect-square -translate-x-1/2 -translate-y-1/2 rounded-md border-2 border-dashed', context.faceFound && 'border-utility-success-700', guideWidth <= 0 ? 'hidden' : 'block'), style: {
173
- width: `calc(${guideWidth}px - 2rem)`,
174
- } })] }));
175
- }
176
- function useSelfieField(props) {
177
- const field = useFieldContext();
178
- const [value, setValue] = useControllableState({
179
- value: props.value,
180
- defaultValue: props.defaultValue ?? '',
181
- onChange: props.onChange,
182
- });
183
- const query = useFileQuery(value, {
184
- refetchInterval({ state }) {
185
- return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
186
- },
187
- });
188
- const mutation = useUploadImageFileMutation({
189
- onSuccess(id) {
190
- setValue(id);
191
- },
192
- onMutate() {
193
- setValue('');
194
- },
195
- onError(error) {
196
- toaster.error({
197
- title: 'Upload Failed',
198
- description: error.message,
199
- });
200
- },
201
- onSettled() {
202
- if (inputRef.current) {
203
- inputRef.current.value = '';
204
- }
205
- },
206
- });
207
- const inputRef = useRef(null);
208
- const maskRef = useRef(null);
209
- const guideRef = useRef(null);
210
- const camera = useCamera({
211
- async validate(data) {
212
- /*
213
- * 💁‍♂️
214
- * Check if we still have the face.
215
- * User could have moved away from the camera
216
- */
217
- const ok = await validateFaceFromImage(data.image);
218
- if (!ok) {
219
- return {
220
- name: 'FaceNotFoundError',
221
- message: 'Please ensure your face is clearly visible in the photo.',
222
- };
223
- }
224
- },
225
- });
226
- const disclosure = useDisclosure({
227
- onOpenChange(open) {
228
- if (open) {
229
- camera.open();
230
- }
231
- },
232
- });
233
- const [faceFound, setFaceFound] = useState(false);
234
- useInterval(async () => {
235
- if (!camera.videoRef.current || !guideRef.current) {
236
- return setFaceFound(false);
237
- }
238
- setFaceFound(await validateFace(camera.videoRef.current, guideRef.current));
239
- }, disclosure.open && !camera.data && !camera.error && !camera.loading
240
- ? 1000
241
- : null);
242
- return {
243
- field,
244
- value,
245
- setValue,
246
- query,
247
- mutation,
248
- camera,
249
- disclosure,
250
- inputRef,
251
- guideRef,
252
- maskRef,
253
- faceFound,
254
- };
255
- }
256
- const [SelfieFieldProvider, useSelfieFieldContext] = createContext();
257
- /*
258
- * -------------------------------------
259
- * Utils
260
- * -------------------------------------
261
- */
262
- let __faceapi_models_loaded__ = false;
263
- async function loadFaceApiModels() {
264
- if (__faceapi_models_loaded__)
265
- return;
266
- await Promise.all([
267
- faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
268
- faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
269
- faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
270
- ]);
271
- __faceapi_models_loaded__ = true;
272
- }
273
- const validateFace = cache(async (video, guide) => {
274
- await loadFaceApiModels();
275
- const videoRect = video.getBoundingClientRect();
276
- const guideRect = guide.getBoundingClientRect();
277
- const canvas = document.createElement('canvas');
278
- canvas.width = videoRect.width;
279
- canvas.height = videoRect.height;
280
- const ctx = canvas.getContext('2d');
281
- if (!ctx)
282
- return false;
283
- ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
284
- const detection = await faceapi.detectSingleFace(canvas, new faceapi.TinyFaceDetectorOptions({
285
- inputSize: 224,
286
- scoreThreshold: 0.75,
287
- }));
288
- if (!detection)
289
- return false;
290
- const { x, y, width, height } = detection.box;
291
- const faceBox = {
292
- left: x,
293
- right: x + width,
294
- top: y,
295
- bottom: y + height,
296
- };
297
- const guideBox = {
298
- left: guideRect.left - videoRect.left,
299
- right: guideRect.right - videoRect.left,
300
- top: guideRect.top - videoRect.top,
301
- bottom: guideRect.bottom - videoRect.top,
302
- };
303
- const overlapWidth = Math.max(0, Math.min(faceBox.right, guideBox.right) -
304
- Math.max(faceBox.left, guideBox.left));
305
- const overlapHeight = Math.max(0, Math.min(faceBox.bottom, guideBox.bottom) -
306
- Math.max(faceBox.top, guideBox.top));
307
- const overlapArea = overlapWidth * overlapHeight;
308
- const faceArea = width * height;
309
- const overlapRatio = overlapArea / faceArea;
310
- return overlapRatio >= 0.6;
5
+ const Component = dynamic(() => import('./SelfieField.client.js').then((mod) => mod.SelfieField__client), {
6
+ ssr: false,
7
+ loading: () => (_jsx("div", { className: "border-border-primary bg-bg-primary flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border", children: _jsx(Spinner02Icon, { className: "text-text-quinary size-8" }) })),
311
8
  });
312
- export async function validateFaceFromImage(img) {
313
- await loadFaceApiModels();
314
- const detection = await faceapi.detectSingleFace(img, new faceapi.TinyFaceDetectorOptions({
315
- inputSize: 224,
316
- scoreThreshold: 0.5,
317
- }));
318
- return detection != null;
9
+ export function SelfieField(props) {
10
+ return _jsx(Component, { ...props });
319
11
  }
@@ -12,7 +12,7 @@ export declare const END_GAME_SESSION = "\n mutation EndGameSession($input: End
12
12
  export declare const END_GAME_SESSION__LEGACY = "\n mutation EndGameSession($input: EndGameSessionInput!) {\n endGameSession(input: $input) {\n ... on GameSessionDoesNotExistError {\n name: __typename\n message\n }\n ... on GameSessionAlreadyClosedError {\n name: __typename\n message\n }\n ... on GameProviderError {\n name: __typename\n message\n }\n }\n }\n";
13
13
  export declare const RECOMMENDED_GAMES = "\n query RecommendedGames {\n recommendedGames {\n id\n name\n type\n provider\n }\n }\n";
14
14
  export declare const ANNOUNCEMENTS = "\n query Announcements(\n $first: Int\n $after: Cursor\n $filter: AnnouncementFilterInput\n ) {\n announcements(first: $first, after: $after, filter: $filter) {\n edges {\n cursor\n node {\n ... on Announcement {\n id\n type\n title\n status\n message\n activationStartDateTime\n activationEndDateTime\n dateTimeCreated\n dateTimeLastUpdated\n }\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n }\n";
15
- export declare const WITHDRAWAL_RECORDS = "\n query WithdrawalRecords(\n $first: Int\n $after: Cursor\n $filter: WithdrawalRecordFilterInput\n ) {\n member {\n withdrawalRecords(first: $first, after: $after, filter: $filter) {\n edges {\n cursor\n node {\n ... on BankWithdrawalRecord {\n id\n type\n bank\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on GCashWithdrawalRecord {\n id\n type\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n recipientMobileNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on ManualWithdrawalRecord {\n id\n type\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on MayaAppWithdrawalRecord {\n id\n type\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on InstapayWithdrawalRecord {\n id\n type\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on ManualUPIWithdrawalRecord {\n id\n type\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on ManualBankWithdrawalRecord {\n id\n type\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n }\n }\n";
15
+ export declare const WITHDRAWAL_RECORDS = "\n query WithdrawalRecords(\n $first: Int\n $after: Cursor\n $filter: WithdrawalRecordFilterInput\n ) {\n member {\n withdrawalRecords(first: $first, after: $after, filter: $filter) {\n edges {\n cursor\n node {\n ... on BankWithdrawalRecord {\n id\n type\n bank\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on GCashWithdrawalRecord {\n id\n type\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n recipientMobileNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on ManualWithdrawalRecord {\n id\n type\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on MayaAppWithdrawalRecord {\n id\n type\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on InstapayWithdrawalRecord {\n id\n type\n fee\n netAmount\n bankName\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on ManualUPIWithdrawalRecord {\n id\n type\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n ... on ManualBankWithdrawalRecord {\n id\n type\n fee\n netAmount\n reference\n amount\n status\n error\n withdrawalNumber\n dateTimeCreated\n dateTimeLastUpdated\n }\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n }\n }\n";
16
16
  export declare const CREATE_GCASH_WITHDRAWAL = "\n mutation CreateGCashWithdrawal($input: CreateGCashWithdrawalInput!) {\n createGCashWithdrawal(input: $input) {\n ... on AccountNotVerifiedError {\n name: __typename\n message\n }\n ... on InvalidTransactionPasswordError {\n name: __typename\n message\n }\n ... on InvalidWithdrawalAmountError {\n name: __typename\n message\n }\n ... on MobileNumberNotVerifiedError {\n name: __typename\n message\n }\n ... on NotEnoughBalanceError {\n name: __typename\n message\n }\n ... on WithdrawalDailyLimitExceededError {\n name: __typename\n message\n }\n ... on ReCAPTCHAVerificationFailedError {\n name: __typename\n message\n }\n ... on WalletDoesNotExistError {\n name: __typename\n message\n }\n ... on TransactionPasswordNotSetError {\n name: __typename\n message\n }\n }\n }\n";
17
17
  export declare const CREATE_MAYA_WITHDRAWAL = "\n mutation CreateMayaWithdrawal($input: CreateMayaWithdrawalInput!) {\n createMayaWithdrawal(input: $input) {\n ... on AccountNotVerifiedError {\n name: __typename\n message\n }\n ... on InvalidTransactionPasswordError {\n name: __typename\n message\n }\n ... on InvalidWithdrawalAmountError {\n name: __typename\n message\n }\n ... on MobileNumberNotVerifiedError {\n name: __typename\n message\n }\n ... on NotEnoughBalanceError {\n name: __typename\n message\n }\n ... on WithdrawalDailyLimitExceededError {\n name: __typename\n message\n }\n }\n }\n";
18
18
  export declare const CREATE_MAYA_APP_WITHDRAWAL = "\n mutation CreateMayaAppWithdrawal($input: CreateMayaAppWithdrawalInput!) {\n createMayaAppWithdrawal(input: $input) {\n ... on AccountNotVerifiedError {\n name: __typename\n message\n }\n ... on InvalidTransactionPasswordError {\n name: __typename\n message\n }\n ... on InvalidWithdrawalAmountError {\n name: __typename\n message\n }\n ... on NotEnoughBalanceError {\n name: __typename\n message\n }\n ... on WithdrawalDailyLimitExceededError {\n name: __typename\n message\n }\n ... on WalletDoesNotExistError {\n name: __typename\n message\n }\n ... on TransactionPasswordNotSetError {\n name: __typename\n message\n }\n }\n }\n";