@opexa/portal-components 0.0.862 → 0.0.863

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 (224) hide show
  1. package/dist/components/AccountInfo/GoogleDisconnect.d.ts +7 -0
  2. package/dist/components/AccountInfo/GoogleDisconnect.js +11 -0
  3. package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .d.ts +1 -0
  4. package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit /GCashWebpayDeposit .js +191 -0
  5. package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts +2 -2
  6. package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts +1 -1
  7. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositContext.d.ts +2 -2
  8. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/useQRPHDeposit.d.ts +1 -1
  9. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__next/QRPHDepositContext.d.ts +2 -2
  10. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__next/useQRPHDeposit.d.ts +1 -1
  11. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositContext.d.ts +2 -2
  12. package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/useOnlineBankDeposit.d.ts +1 -1
  13. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositContext.d.ts +2 -2
  14. package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/useQRPHDeposit.d.ts +1 -1
  15. package/dist/components/DigitainLauncher/Loading.js +1 -1
  16. package/dist/components/Jackpots/Jackpots.module.css +221 -221
  17. package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +184 -184
  18. package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +184 -184
  19. package/dist/components/KYC/BasicInformation.js +1 -1
  20. package/dist/components/KYC/IdentityVerification.js +1 -1
  21. package/dist/components/KYC/KYC.lazy.js +1 -1
  22. package/dist/components/KYC/KYCDefault/KYCVerificationStatus.lazy.js +2 -2
  23. package/dist/components/KYC/KYCVerificationStatus.lazy.js +7 -13
  24. package/dist/components/KYC/PersonalInformation.js +1 -1
  25. package/dist/components/SignIn/MobileNumberSignIn.js +4 -1
  26. package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.module.css +184 -184
  27. package/dist/components/Tournaments/TournamentsList/TournamentItem.module.css +184 -184
  28. package/dist/icons/LinkBrokenIcon.d.ts +2 -0
  29. package/dist/icons/LinkBrokenIcon.js +4 -0
  30. package/dist/services/queries.js +3153 -3153
  31. package/dist/styles/theme.css +776 -776
  32. package/dist/ui/AlertDialog/AlertDialog.d.ts +121 -121
  33. package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +11 -11
  34. package/dist/ui/Carousel/Carousel.d.ts +72 -72
  35. package/dist/ui/Carousel/carousel.recipe.d.ts +8 -8
  36. package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
  37. package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
  38. package/dist/ui/Clipboard/Clipboard.d.ts +18 -18
  39. package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
  40. package/dist/ui/Collapsible/Collapsible.d.ts +20 -20
  41. package/dist/ui/Collapsible/collapsible.recipe.d.ts +5 -5
  42. package/dist/ui/Combobox/Combobox.d.ts +42 -42
  43. package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
  44. package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
  45. package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
  46. package/dist/ui/Dialog/Dialog.d.ts +33 -33
  47. package/dist/ui/Dialog/dialog.recipe.d.ts +3 -3
  48. package/dist/ui/Drawer/Drawer.d.ts +33 -33
  49. package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
  50. package/dist/ui/Field/Field.d.ts +21 -21
  51. package/dist/ui/Field/field.recipe.d.ts +3 -3
  52. package/dist/ui/Menu/Menu.d.ts +90 -90
  53. package/dist/ui/Menu/menu.recipe.d.ts +5 -5
  54. package/dist/ui/NumberInput/NumberInput.d.ts +24 -24
  55. package/dist/ui/NumberInput/numberInput.recipe.d.ts +3 -3
  56. package/dist/ui/PasswordInput/PasswordInput.d.ts +18 -18
  57. package/dist/ui/PasswordInput/passwordInput.recipe.d.ts +3 -3
  58. package/dist/ui/PinInput/PinInput.d.ts +12 -12
  59. package/dist/ui/PinInput/pinInput.recipe.d.ts +3 -3
  60. package/dist/ui/Popover/Popover.d.ts +88 -88
  61. package/dist/ui/Popover/popover.recipe.d.ts +8 -8
  62. package/dist/ui/Progress/Progress.d.ts +27 -27
  63. package/dist/ui/Progress/progress.recipe.d.ts +3 -3
  64. package/dist/ui/QrCode/QrCode.d.ts +25 -25
  65. package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
  66. package/dist/ui/SegmentGroup/SegmentGroup.d.ts +18 -18
  67. package/dist/ui/SegmentGroup/segmentGroup.recipe.d.ts +3 -3
  68. package/dist/ui/Select/Select.d.ts +45 -45
  69. package/dist/ui/Select/select.recipe.d.ts +3 -3
  70. package/dist/ui/Tabs/Tabs.d.ts +15 -15
  71. package/dist/ui/Tabs/tabs.recipe.d.ts +3 -3
  72. package/package.json +177 -177
  73. package/dist/components/Disclaimer/ResponsibleGaming.d.ts +0 -10
  74. package/dist/components/Disclaimer/ResponsibleGaming.js +0 -13
  75. package/dist/components/Disclaimer/TermsOfUse.d.ts +0 -11
  76. package/dist/components/Disclaimer/TermsOfUse.js +0 -13
  77. package/dist/components/FeatureFlag/FeatureFlag.d.ts +0 -1
  78. package/dist/components/FeatureFlag/FeatureFlag.js +0 -29
  79. package/dist/components/FeatureFlag/index.d.ts +0 -1
  80. package/dist/components/FeatureFlag/index.js +0 -1
  81. package/dist/components/KYC/AutoOpen.d.ts +0 -1
  82. package/dist/components/KYC/AutoOpen.js +0 -40
  83. package/dist/components/KYC/CaptureIdDocument.d.ts +0 -1
  84. package/dist/components/KYC/CaptureIdDocument.js +0 -219
  85. package/dist/components/KYC/CaptureSelfie.d.ts +0 -1
  86. package/dist/components/KYC/CaptureSelfie.js +0 -285
  87. package/dist/components/KYC/DisplayImage.d.ts +0 -5
  88. package/dist/components/KYC/DisplayImage.js +0 -8
  89. package/dist/components/KYC/FileUpload.d.ts +0 -10
  90. package/dist/components/KYC/FileUpload.js +0 -72
  91. package/dist/components/KYC/NoCameraError.d.ts +0 -7
  92. package/dist/components/KYC/NoCameraError.js +0 -6
  93. package/dist/components/KYC/PersonOverlayDesktop.d.ts +0 -7
  94. package/dist/components/KYC/PersonOverlayDesktop.js +0 -9
  95. package/dist/components/KYC/backup/Header.d.ts +0 -1
  96. package/dist/components/KYC/backup/Header.js +0 -8
  97. package/dist/components/KYC/backup/Indicator.d.ts +0 -1
  98. package/dist/components/KYC/backup/Indicator.js +0 -9
  99. package/dist/components/KYC/backup/KYC.d.ts +0 -1
  100. package/dist/components/KYC/backup/KYC.js +0 -14
  101. package/dist/components/KYC/backup/KYC.lazy.d.ts +0 -1
  102. package/dist/components/KYC/backup/KYC.lazy.js +0 -26
  103. package/dist/components/KYC/backup/KYCContext.d.ts +0 -6
  104. package/dist/components/KYC/backup/KYCContext.js +0 -2
  105. package/dist/components/KYC/backup/Step1.d.ts +0 -1
  106. package/dist/components/KYC/backup/Step1.js +0 -13
  107. package/dist/components/KYC/backup/Step2.d.ts +0 -1
  108. package/dist/components/KYC/backup/Step2.js +0 -13
  109. package/dist/components/KYC/backup/Step3.d.ts +0 -1
  110. package/dist/components/KYC/backup/Step3.js +0 -13
  111. package/dist/components/KYC/backup/Step4.d.ts +0 -1
  112. package/dist/components/KYC/backup/Step4.js +0 -7
  113. package/dist/components/KYC/backup/useKYC.d.ts +0 -10
  114. package/dist/components/KYC/backup/useKYC.js +0 -8
  115. package/dist/components/KYC/loadModels.d.ts +0 -1
  116. package/dist/components/KYC/loadModels.js +0 -9
  117. package/dist/components/KYC/utils.d.ts +0 -9
  118. package/dist/components/KYC/utils.js +0 -79
  119. package/dist/components/Messages/Message.d.ts +0 -1
  120. package/dist/components/Messages/Message.js +0 -35
  121. package/dist/components/Messages/MessageContext.d.ts +0 -6
  122. package/dist/components/Messages/MessageContext.js +0 -2
  123. package/dist/components/Messages/MessagePopup.d.ts +0 -1
  124. package/dist/components/Messages/MessagePopup.js +0 -20
  125. package/dist/components/Messages/MessageTrigger.d.ts +0 -8
  126. package/dist/components/Messages/MessageTrigger.js +0 -19
  127. package/dist/components/Quests/CountdownTimer.d.ts +0 -15
  128. package/dist/components/Quests/CountdownTimer.js +0 -33
  129. package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts +0 -4
  130. package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js +0 -78
  131. package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.d.ts +0 -8
  132. package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js +0 -9
  133. package/dist/components/Quests/OnboardingQuest/OnboardingQuest.d.ts +0 -4
  134. package/dist/components/Quests/OnboardingQuest/OnboardingQuest.js +0 -4
  135. package/dist/components/Quests/WageringQuest/WageringQuest.d.ts +0 -4
  136. package/dist/components/Quests/WageringQuest/WageringQuest.js +0 -20
  137. package/dist/components/Quests/WageringQuest/WageringQuestModal.d.ts +0 -9
  138. package/dist/components/Quests/WageringQuest/WageringQuestModal.js +0 -9
  139. package/dist/components/SignIn/utils.d.ts +0 -8
  140. package/dist/components/SignIn/utils.js +0 -26
  141. package/dist/components/SignUp/SignUp.lazy.d.ts +0 -12
  142. package/dist/components/SignUp/SignUp.lazy.js +0 -18
  143. package/dist/components/SignUp/SignUpContext.d.ts +0 -6
  144. package/dist/components/SignUp/SignUpContext.js +0 -2
  145. package/dist/components/SignUp/SignUpDefault/SignUp.lazy.d.ts +0 -17
  146. package/dist/components/SignUp/SignUpDefault/SignUp.lazy.js +0 -18
  147. package/dist/components/SignUp/SignUpDefault/SignUpContext.d.ts +0 -6
  148. package/dist/components/SignUp/SignUpDefault/SignUpContext.js +0 -2
  149. package/dist/components/SignUp/SignUpDefault/SignUpForm.d.ts +0 -1
  150. package/dist/components/SignUp/SignUpDefault/SignUpForm.js +0 -310
  151. package/dist/components/SignUp/SignUpForm.d.ts +0 -1
  152. package/dist/components/SignUp/SignUpForm.js +0 -284
  153. package/dist/components/SignUp/SignUpKYC/CaptureIdDocument.d.ts +0 -1
  154. package/dist/components/SignUp/SignUpKYC/CaptureIdDocument.js +0 -198
  155. package/dist/components/SignUp/SignUpKYC/CaptureSelfie.d.ts +0 -1
  156. package/dist/components/SignUp/SignUpKYC/CaptureSelfie.js +0 -251
  157. package/dist/components/SignUp/SignUpKYC/ImageUploader.d.ts +0 -10
  158. package/dist/components/SignUp/SignUpKYC/ImageUploader.js +0 -42
  159. package/dist/components/SignUp/SignUpKYC/PersonOverlayDesktop.d.ts +0 -7
  160. package/dist/components/SignUp/SignUpKYC/PersonOverlayDesktop.js +0 -9
  161. package/dist/components/SignUp/SignUpKYC/SignUpFormKYC.d.ts +0 -1
  162. package/dist/components/SignUp/SignUpKYC/SignUpFormKYC.js +0 -464
  163. package/dist/components/SignUp/SignUpKYC/useImageUploader.d.ts +0 -11
  164. package/dist/components/SignUp/SignUpKYC/useImageUploader.js +0 -20
  165. package/dist/components/SignUp/SignUpKYC/utils.d.ts +0 -9
  166. package/dist/components/SignUp/SignUpKYC/utils.js +0 -79
  167. package/dist/components/SignUp/SignUpPagcor/CaptureIdDocument.d.ts +0 -1
  168. package/dist/components/SignUp/SignUpPagcor/CaptureIdDocument.js +0 -198
  169. package/dist/components/SignUp/SignUpPagcor/CaptureSelfie.d.ts +0 -1
  170. package/dist/components/SignUp/SignUpPagcor/CaptureSelfie.js +0 -251
  171. package/dist/components/SignUp/SignUpPagcor/ImageUploader.d.ts +0 -10
  172. package/dist/components/SignUp/SignUpPagcor/ImageUploader.js +0 -41
  173. package/dist/components/SignUp/SignUpPagcor/SignUpFormPagcor.d.ts +0 -1
  174. package/dist/components/SignUp/SignUpPagcor/SignUpFormPagcor.js +0 -429
  175. package/dist/components/SignUp/SignUpPagcor/SignUpPagcor.lazy.d.ts +0 -13
  176. package/dist/components/SignUp/SignUpPagcor/SignUpPagcor.lazy.js +0 -26
  177. package/dist/components/SignUp/SignUpPagcor/SignUpPagcorContext.d.ts +0 -7
  178. package/dist/components/SignUp/SignUpPagcor/SignUpPagcorContext.js +0 -2
  179. package/dist/components/SignUp/SignUpPagcor/useImageUploader.d.ts +0 -11
  180. package/dist/components/SignUp/SignUpPagcor/useImageUploader.js +0 -20
  181. package/dist/components/shared/IdDocumentField.client.d.ts +0 -25
  182. package/dist/components/shared/IdDocumentField.client.js +0 -204
  183. package/dist/components/shared/IdDocumentField.d.ts +0 -2
  184. package/dist/components/shared/IdDocumentField.js +0 -11
  185. package/dist/components/shared/SelfieField.client.d.ts +0 -20
  186. package/dist/components/shared/SelfieField.client.js +0 -327
  187. package/dist/components/shared/SelfieField.d.ts +0 -2
  188. package/dist/components/shared/SelfieField.js +0 -11
  189. package/dist/constants/BranchCode.d.ts +0 -4
  190. package/dist/constants/BranchCode.js +0 -42
  191. package/dist/constants/Branches.d.ts +0 -2
  192. package/dist/constants/Branches.js +0 -42
  193. package/dist/handlers/postTransformIdFrontImage.d.ts +0 -3
  194. package/dist/handlers/postTransformIdFrontImage.js +0 -67
  195. package/dist/handlers/postTransformSelfieImage.d.ts +0 -3
  196. package/dist/handlers/postTransformSelfieImage.js +0 -71
  197. package/dist/handlers.d.ts +0 -43
  198. package/dist/handlers.js +0 -297
  199. package/dist/icons/BellRingIcon.d.ts +0 -2
  200. package/dist/icons/BellRingIcon.js +0 -4
  201. package/dist/third-parties/FacebookPixel/FacebookPixel.d.ts +0 -4
  202. package/dist/third-parties/FacebookPixel/FacebookPixel.js +0 -4
  203. package/dist/third-parties/FacebookPixel/api.d.ts +0 -0
  204. package/dist/third-parties/FacebookPixel/api.js +0 -1
  205. package/dist/third-parties/FacebookPixel/index.d.ts +0 -1
  206. package/dist/third-parties/FacebookPixel/index.js +0 -1
  207. package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.d.ts +0 -4
  208. package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.js +0 -4
  209. package/dist/third-parties/GoogleRecaptcha/api.d.ts +0 -0
  210. package/dist/third-parties/GoogleRecaptcha/api.js +0 -1
  211. package/dist/third-parties/GoogleRecaptcha/index.d.ts +0 -1
  212. package/dist/third-parties/GoogleRecaptcha/index.js +0 -1
  213. package/dist/third-parties/index.d.ts +0 -2
  214. package/dist/third-parties/index.js +0 -2
  215. package/dist/utils/dataUrlToBlob.d.ts +0 -1
  216. package/dist/utils/dataUrlToBlob.js +0 -11
  217. package/dist/utils/gamesAvailable3pmTo3am.d.ts +0 -1
  218. package/dist/utils/gamesAvailable3pmTo3am.js +0 -1
  219. package/dist/utils/getGameName.d.ts +0 -1
  220. package/dist/utils/getGameName.js +0 -6
  221. package/dist/utils/isBetween3amAnd3pm.d.ts +0 -1
  222. package/dist/utils/isBetween3amAnd3pm.js +0 -5
  223. package/dist/utils/resizeImageSize.d.ts +0 -2
  224. package/dist/utils/resizeImageSize.js +0 -11
@@ -1,9 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- function PersonOverlayDesktop({ isFaceCentered, height, width }) {
3
- return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pointer-events-none absolute inset-0 hidden md:block", children: _jsxs("svg", { width: `${width}px`, height: `${height}px`, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: "max-h-full w-full", children: [_jsxs("defs", { children: [_jsx("path", { id: "head-shoulder-path", d: "M 389.605 124.529 C 390.221 129.441 390.638 134.433 390.846 139.492 L 390.932 151.978 C 390.841 155.321 390.658 158.636 390.388 161.919 C 388.294 162.987 388.18 164.214 389 168 L 390.277 171.709 L 395 181 C 395.61 182.222 396.985 183.052 398.459 183.693 L 399.097 183.956 C 401.81 185.016 404.425 186.275 406.923 187.715 L 420.473 198.503 C 424.405 202.729 427.713 207.542 430.252 212.795 L 435.357 229.337 C 435.78 232.162 436 235.055 436 238 V 244.833 V 258.5 H 436 V 272.167 V 285.833 H 436 V 299.5 V 313.167 H 436 V 320 C 436 321.36 435.73 322.651 435.242 323.827 L 429.827 329.242 C 428.651 329.73 427.36 330 426 330 H 418.275 H 402.825 V 330 H 387.375 H 371.925 V 330 H 356.475 H 341.025 V 330 H 325.575 H 310.125 V 330 H 294.675 H 279.225 V 330 H 263.775 H 248.325 V 330 H 232.875 H 217.425 V 330 H 201.975 H 186.525 V 330 H 171.075 H 155.625 V 330 H 140.175 H 124.725 V 330 H 117 C 115.641 330 114.349 329.73 113.173 329.242 L 107.758 323.827 C 107.27 322.651 107 321.36 107 320 V 313.167 V 299.5 H 107 V 285.833 V 272.167 H 107 V 258.5 V 244.833 H 107 V 238 C 107 235.088 107.214 232.227 107.628 229.433 L 112.622 213.056 C 115.107 207.848 118.347 203.067 122.2 198.856 L 135.494 188.055 C 137.641 186.783 139.877 185.647 142.19 184.656 L 143.186 184.241 C 144.876 183.555 146.441 182.623 147.83 181.498 L 153.722 172.52 C 154.177 170.759 154.329 168.902 154.116 167.011 L 153.981 165.769 C 153.85 164.525 153.732 163.276 153.627 162.022 C 151.354 158.847 151.164 155.472 151.069 152.068 L 151.153 139.492 C 151.36 134.462 151.773 129.498 152.383 124.613 L 152.394 124.529 L 154.894 109.723 C 155.95 104.771 157.212 99.9212 158.668 95.1875 L 163.727 81.0498 C 165.649 76.3661 167.77 71.8259 170.076 67.4453 L 177.715 54.5254 C 180.508 50.3027 183.489 46.274 186.641 42.457 L 196.832 31.4316 C 200.471 27.9227 204.28 24.6674 208.24 21.6846 L 220.789 13.4502 C 225.168 10.9758 229.688 8.8149 234.332 6.9912 L 248.66 2.544 C 253.508 1.4258 258.458 0.6639 263.493 0.2832 L 278.506 0.2832 C 283.541 0.6638 288.491 1.4259 293.339 2.544 L 307.667 6.9912 C 312.311 8.8149 316.831 10.9758 321.21 13.4502 L 333.759 21.6846 C 337.719 24.6673 341.528 27.9227 345.167 31.4316 L 355.359 42.458 C 358.511 46.2749 361.491 50.3038 364.284 54.5264 L 371.923 67.4453 C 374.229 71.826 376.35 76.3661 378.272 81.0498 L 383.331 95.1875 C 384.787 99.9212 386.049 104.771 387.105 109.723 L 389.605 124.529 Z" }), _jsxs("mask", { id: "outline-mask", children: [_jsx("rect", { width: "100%", height: "100%", fill: "white" }), _jsx("use", { href: "#head-shoulder-path", fill: "black" })] })] }), _jsx("rect", { width: "100%", height: "100%", fill: !isFaceCentered
4
- ? 'rgba(156, 156, 156, 0.40)'
5
- : 'rgba(34, 139, 87, 0.75)', mask: "url(#outline-mask)" }), _jsx("use", { href: "#head-shoulder-path", fill: "none", stroke: !isFaceCentered ? '#B54708' : '#34D399', strokeWidth: "3", strokeDasharray: "10 5" })] }) }), _jsx("div", { className: "pointer-events-none absolute inset-0 block md:hidden", children: _jsxs("svg", { className: "block md:hidden", width: "100%", height: "100%", viewBox: "0 0 400 400", preserveAspectRatio: "xMidYMid slice", children: [_jsxs("defs", { children: [_jsx("path", { id: "fill-path", d: "M 300.85 220.1 C 301.15 223.9 302.705 227.284 305.171 230.096 V 230.097 L 311.15 234.9 L 316.351 238.504 C 320.778 242.037 324.741 246.126 328.135 250.665 L 336.459 265.409 C 338.554 270.577 340.015 276.069 340.746 281.79 V 320.036 V 359.74 V 369.667 L 340.28 374.731 C 338.938 377.967 336.351 380.555 333.115 381.896 H 300.872 H 264.633 H 228.396 H 192.158 H 155.921 H 119.682 H 83.4439 H 74.3844 L 69.319 381.896 C 66.0834 380.554 63.4953 377.967 62.1539 374.731 V 339.888 V 320.036 V 300.184 L 62.15 281.9 C 62.459 275.847 63.967 270.273 66.127 265.038 L 74.702 250.13 C 78.005 245.806 81.828 241.899 86.08 238.506 L 86.819 237.925 L 98.284 229.572 L 104.15 223.9 C 105.146 217.607 104.959 215.459 104.343 213.349 L 102.15 210.9 L 98.15 202.9 C 97.985 196.059 96.943 188.701 96.423 181.159 L 96.31 160.744 C 96.641 154.989 97.273 149.337 98.193 143.813 L 98.454 142.294 L 102.789 124.231 C 104.631 118.212 106.825 112.406 109.34 106.849 L 118.126 90.483 C 121.479 85.154 125.161 80.154 129.135 75.528 L 142.322 62.463 C 147.129 58.431 152.22 54.874 157.55 51.845 L 174.504 44.306 C 180.364 42.381 186.424 41.058 192.638 40.394 L 211.201 40.394 C 217.414 41.057 223.474 42.381 229.334 44.306 L 246.288 51.845 C 251.619 54.874 256.709 58.431 261.516 62.463 L 274.703 75.528 C 278.677 80.154 282.359 85.154 285.712 90.483 L 294.499 106.849 C 297.014 112.406 299.208 118.212 301.049 124.231 L 305.385 142.294 V 142.293 C 306.447 148.299 307.168 154.46 307.529 160.744 L 307.403 181.33 C 306.867 188.989 305.792 196.459 304.224 203.681 C 301.374 206.417 300.58 209.572 300.15 212.9 L 300.15 214.9 L 300.85 220.1 Z" }), _jsx("path", { id: "border-path", d: "M 300.85 220.1 C 301.15 223.9 302.705 227.284 305.171 230.096 V 230.097 L 311.15 234.9 L 316.351 238.504 C 320.778 242.037 324.741 246.126 328.135 250.665 L 336.459 265.409 C 338.554 270.577 340.015 276.069 340.746 281.79 V 320.036 V 359.74 V 369.667 L 340.28 374.731 C 338.938 377.967 336.351 380.555 333.115 381.896 H 300.872 H 264.633 H 228.396 H 192.158 H 155.921 H 119.682 H 83.4439 H 74.3844 L 69.319 381.896 C 66.0834 380.554 63.4953 377.967 62.1539 374.731 V 339.888 V 320.036 V 300.184 L 62.15 281.9 C 62.459 275.847 63.967 270.273 66.127 265.038 L 74.702 250.13 C 78.005 245.806 81.828 241.899 86.08 238.506 L 86.819 237.925 L 98.284 229.572 L 104.15 223.9 C 105.146 217.607 104.959 215.459 104.343 213.349 L 102.15 210.9 L 98.15 202.9 C 97.985 196.059 96.943 188.701 96.423 181.159 L 96.31 160.744 C 96.641 154.989 97.273 149.337 98.193 143.813 L 98.454 142.294 L 102.789 124.231 C 104.631 118.212 106.825 112.406 109.34 106.849 L 118.126 90.483 C 121.479 85.154 125.161 80.154 129.135 75.528 L 142.322 62.463 C 147.129 58.431 152.22 54.874 157.55 51.845 L 174.504 44.306 C 180.364 42.381 186.424 41.058 192.638 40.394 L 211.201 40.394 C 217.414 41.057 223.474 42.381 229.334 44.306 L 246.288 51.845 C 251.619 54.874 256.709 58.431 261.516 62.463 L 274.703 75.528 C 278.677 80.154 282.359 85.154 285.712 90.483 L 294.499 106.849 C 297.014 112.406 299.208 118.212 301.049 124.231 L 305.385 142.294 V 142.293 C 306.447 148.299 307.168 154.46 307.529 160.744 L 307.403 181.33 C 306.867 188.989 305.792 196.459 304.224 203.681 C 301.374 206.417 300.58 209.572 300.15 212.9 L 300.15 214.9 L 300.85 220.1 Z" }), _jsx("clipPath", { id: "face-cutout", children: _jsx("use", { href: "#fill-path" }) }), _jsxs("mask", { id: "face-mask", children: [_jsx("rect", { x: "0", y: "0", width: "400", height: "400", fill: "white" }), _jsx("use", { href: "#fill-path", fill: "black" })] })] }), _jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: !isFaceCentered
6
- ? 'rgba(156, 156, 156, 0.40)'
7
- : 'rgba(34, 139, 87, 0.75)', mask: "url(#face-mask)" }), _jsx("use", { href: "#border-path", fill: "none", stroke: !isFaceCentered ? '#B54708' : '#34D399', strokeWidth: "3", strokeDasharray: "12 8", strokeLinecap: "round", id: "border-element" })] }) })] }));
8
- }
9
- export default PersonOverlayDesktop;
@@ -1 +0,0 @@
1
- export declare function Header(): import("react/jsx-runtime").JSX.Element;
@@ -1,8 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { ChevronLeftIcon } from '../../../icons/ChevronLeftIcon.js';
3
- import { XIcon } from '../../../icons/XIcon.js';
4
- import { Dialog } from '../../../ui/Dialog/index.js';
5
- import { IconButton } from '../../../ui/IconButton/index.js';
6
- export function Header() {
7
- return (_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "bg-bg-primary-alt relative flex items-center gap-xl px-xl py-md lg:justify-center lg:bg-transparent lg:p-0", children: [_jsx(IconButton, { size: "2xs", variant: "outline", colorScheme: "gray", className: "lg:hidden", onClick: () => api.setOpen(false), children: _jsx(ChevronLeftIcon, {}) }), _jsx(Dialog.Title, { className: "text-lg font-semibold", children: "Personal Verification" }), _jsx("button", { type: "button", className: "text-text-quinary absolute right-0 top-1/2 hidden -translate-y-1/2 lg:block", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "size-6" }) })] })) }));
8
- }
@@ -1 +0,0 @@
1
- export declare function Indicator(): import("react/jsx-runtime").JSX.Element;
@@ -1,9 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { noop } from 'lodash-es';
3
- import { ArrowLeftIcon } from '../../../icons/ArrowLeftIcon.js';
4
- import { Progress } from '../../../ui/Progress/index.js';
5
- import { useKYCContext } from './KYCContext.js';
6
- export function Indicator() {
7
- const context = useKYCContext();
8
- return (_jsxs("div", { className: "mt-xl grid grid-cols-[max-content_auto_auto] items-center px-xl lg:mt-md lg:px-0", children: [_jsxs("button", { className: "text-text-tertiary-600 flex items-center gap-sm text-sm font-semibold", children: [_jsx(ArrowLeftIcon, { className: "size-5" }), "Back"] }), _jsxs("div", { className: "flex justify-center gap-2", children: [_jsx(Progress.Root, { className: "w-[5.625rem] shrink-0", value: context.step >= 2 ? 100 : 50, onValueChange: noop, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx(Progress.Root, { className: "w-[5.625rem] shrink-0", value: context.step >= 3 ? 50 : 0, onValueChange: noop, children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] })] }));
9
- }
@@ -1 +0,0 @@
1
- export declare function KYC(): import("react/jsx-runtime").JSX.Element | undefined;
@@ -1,14 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import dynamic from 'next/dynamic';
4
- import { useShallow } from 'zustand/shallow';
5
- import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
6
- const Component = dynamic(() => import('./KYC.lazy.js').then((m) => m.KYC), {
7
- ssr: false,
8
- loading: () => null,
9
- });
10
- export function KYC() {
11
- const touched = useGlobalStore(useShallow((ctx) => ctx.kyc['~touched']));
12
- if (touched)
13
- return _jsx(Component, {});
14
- }
@@ -1 +0,0 @@
1
- export declare function KYC(): import("react/jsx-runtime").JSX.Element;
@@ -1,26 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { twMerge } from 'tailwind-merge';
4
- import { useShallow } from 'zustand/shallow';
5
- import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
6
- import { Dialog } from '../../../ui/Dialog/index.js';
7
- import { Portal } from '../../../ui/Portal/index.js';
8
- import { Header } from './Header.js';
9
- import { Indicator } from './Indicator.js';
10
- import { KYCContext } from './KYCContext.js';
11
- import { Step1 } from './Step1.js';
12
- import { Step2 } from './Step2.js';
13
- import { Step3 } from './Step3.js';
14
- import { Step4 } from './Step4.js';
15
- import { useKYC } from './useKYC.js';
16
- export function KYC() {
17
- const globalStore = useGlobalStore(useShallow((ctx) => ({
18
- kyc: ctx.kyc,
19
- })));
20
- const context = useKYC();
21
- return (_jsx(KYCContext, { value: context, children: _jsx(Dialog.Root, { open: globalStore.kyc.open, onOpenChange: (details) => {
22
- globalStore.kyc.setOpen(details.open);
23
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: twMerge(context.step === 4 && 'flex items-center'), children: _jsxs(Dialog.Content, { className: twMerge(context.step < 4
24
- ? 'bg-bg-primary lg:bg-bg-primary-alt mx-auto h-full w-full lg:h-auto lg:w-[400px] lg:p-3xl'
25
- : 'mx-auto w-[25rem] max-w-[calc(100%-2rem)] p-3xl'), children: [context.step < 4 && _jsx(Header, {}), context.step < 4 && _jsx(Indicator, {}), context.step === 1 && _jsx(Step1, {}), context.step === 2 && _jsx(Step2, {}), context.step === 3 && _jsx(Step3, {}), context.step === 4 && _jsx(Step4, {})] }) })] }) }) }));
26
- }
@@ -1,6 +0,0 @@
1
- import type { UseKYCReturn } from './useKYC';
2
- export declare const KYCContext: (props: {
3
- value: UseKYCReturn;
4
- } & {
5
- children?: import("react").ReactNode | undefined;
6
- }) => React.ReactNode, useKYCContext: () => UseKYCReturn;
@@ -1,2 +0,0 @@
1
- import { createContext } from '../../../client/utils/createContext.js';
2
- export const [KYCContext, useKYCContext] = createContext();
@@ -1 +0,0 @@
1
- export declare function Step1(): import("react/jsx-runtime").JSX.Element;
@@ -1,13 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import Image from 'next/image';
3
- import { CheckIcon } from '../../../icons/CheckIcon.js';
4
- import { XIcon } from '../../../icons/XIcon.js';
5
- import uploadId from '../../../images/capture-id-banner.png';
6
- import { Button } from '../../../ui/Button/index.js';
7
- import { useKYCContext } from './KYCContext.js';
8
- export function Step1() {
9
- const context = useKYCContext();
10
- return (_jsxs("div", { className: "mt-2xl px-xl lg:mt-3xl lg:px-0", children: [_jsx("p", { className: "lg:text-text-secondary-700 text-center text-2xl font-semibold lg:text-base", children: "Prepare to upload your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt mt-6 rounded-xl border p-4 lg:mt-2xl lg:border-0 lg:bg-transparent lg:p-0", children: [_jsx(Image, { src: uploadId, alt: "", className: "h-auto w-full", width: 600, height: 352 }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Upload front side of your ID"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "Don't edit image of your ID"] })] }), _jsxs("div", { className: "mt-4xl space-y-lg", children: [_jsx(Button, { onClick: () => {
11
- context.setStep(2);
12
- }, children: "Continue" }), _jsx(Button, { variant: "outline", children: "Continue on phone" })] })] })] }));
13
- }
@@ -1 +0,0 @@
1
- export declare function Step2(): import("react/jsx-runtime").JSX.Element;
@@ -1,13 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import Image from 'next/image';
3
- import { CheckIcon } from '../../../icons/CheckIcon.js';
4
- import { XIcon } from '../../../icons/XIcon.js';
5
- import selfie from '../../../images/capture-selfie-banner.png';
6
- import { Button } from '../../../ui/Button/index.js';
7
- import { useKYCContext } from './KYCContext.js';
8
- export function Step2() {
9
- const context = useKYCContext();
10
- return (_jsxs("div", { className: "mt-2xl px-xl lg:mt-3xl lg:px-0", children: [_jsx("p", { className: "lg:text-text-secondary-700 text-center text-2xl font-semibold lg:text-base", children: "Take a selfie holding your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt mt-6 rounded-xl border p-4 lg:mt-2xl lg:border-0 lg:bg-transparent lg:p-0", children: [_jsx(Image, { src: selfie, alt: "", className: "h-auto w-full", width: 600, height: 352 }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Face and ID must be clearly visible"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "No hats, sunglasses, or masks"] })] }), _jsxs("div", { className: "mt-4xl space-y-lg", children: [_jsx(Button, { size: "sm", onClick: () => {
11
- context.setStep(3);
12
- }, children: "Continue" }), _jsx(Button, { variant: "outline", children: "Continue on phone" })] })] })] }));
13
- }
@@ -1 +0,0 @@
1
- export declare function Step3(): import("react/jsx-runtime").JSX.Element;
@@ -1,13 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { CheckIcon } from '../../../icons/CheckIcon.js';
3
- import { Button } from '../../../ui/Button/index.js';
4
- import { Checkbox } from '../../../ui/Checkbox/index.js';
5
- import { Field } from '../../../ui/Field/index.js';
6
- import { useKYCContext } from './KYCContext.js';
7
- export function Step3() {
8
- const context = useKYCContext();
9
- return (_jsxs("div", { className: "mt-2xl px-xl lg:mt-3xl lg:px-0", children: [_jsx("p", { className: "lg:text-text-secondary-700 text-center text-2xl font-semibold lg:text-base", children: "Enter your basic and work-related information" }), _jsxs("form", { className: "border-border-secondary bg-bg-primary-alt mt-6 rounded-xl border p-4 lg:mt-2xl lg:border-0 lg:bg-transparent lg:p-0", onSubmit: (e) => {
10
- e.preventDefault();
11
- context.setStep(4);
12
- }, children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Permanent address" }), _jsx(Field.Input, { placeholder: "Enter your permanent address" })] }), _jsxs(Checkbox.Root, { className: "mt-2xl", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsx(Checkbox.Label, { children: "Same as permanent address" }), _jsx(Checkbox.HiddenInput, {})] }), _jsxs(Field.Root, { className: "mt-sm", children: [_jsx(Field.Label, { children: "Current address" }), _jsx(Field.Input, { placeholder: "Enter your current address" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Source of income" }), _jsx(Field.Input, { placeholder: "Enter your source of income" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Work Description" }), _jsx(Field.Input, { placeholder: "Enter your work description" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Place of birth" }), _jsx(Field.Input, { placeholder: "Enter your place of birth" })] }), _jsxs(Field.Root, { className: "mt-2xl", children: [_jsx(Field.Label, { children: "Nationality" }), _jsx(Field.Input, { placeholder: "Enter your nationality" })] }), _jsx(Button, { type: "submit", className: "mt-4xl", children: "Submit" })] })] }));
13
- }
@@ -1 +0,0 @@
1
- export declare function Step4(): import("react/jsx-runtime").JSX.Element;
@@ -1,7 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { CheckCircleIcon } from '../../../icons/CheckCircleIcon.js';
3
- import { Button } from '../../../ui/Button/index.js';
4
- import { Dialog } from '../../../ui/Dialog/index.js';
5
- export function Step4() {
6
- return (_jsxs("div", { children: [_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(CheckCircleIcon, {}) }), _jsx("h2", { className: "mt-3 text-center", children: "Submission Successful" }), _jsx("p", { className: "text-text-tertiary-600 text-center", children: "Your documents have been submitted successfully. They\u2019re now under review, and you\u2019ll receive a notification as soon as your account is verified." }), _jsx(Dialog.Context, { children: (api) => (_jsx(Button, { className: "mt-3xl", onClick: () => api.setOpen(false), children: "Ok" })) })] }));
7
- }
@@ -1,10 +0,0 @@
1
- type Step = 1 | 2 | 3 | 4;
2
- export interface UseKYCReturn {
3
- step: Step;
4
- setStep: (step: Step) => void;
5
- }
6
- export declare function useKYC(): {
7
- step: Step;
8
- setStep: import("react").Dispatch<import("react").SetStateAction<Step>>;
9
- };
10
- export {};
@@ -1,8 +0,0 @@
1
- import { useState } from 'react';
2
- export function useKYC() {
3
- const [step, setStep] = useState(1);
4
- return {
5
- step,
6
- setStep,
7
- };
8
- }
@@ -1 +0,0 @@
1
- export declare function loadFaceApiModels(): Promise<void>;
@@ -1,9 +0,0 @@
1
- import * as faceapi from 'face-api.js';
2
- export async function loadFaceApiModels() {
3
- const MODEL_URL = '/models';
4
- await Promise.all([
5
- faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
6
- faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
7
- faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
8
- ]);
9
- }
@@ -1,9 +0,0 @@
1
- export declare function loadFaceApiModels(): Promise<void>;
2
- export declare function dataURLtoBlob(dataURL: string): Blob;
3
- export declare const resizeFile: (file: File) => Promise<unknown>;
4
- export declare const MAX_FILE_SIZE = 10;
5
- export declare const MAX_NAME_LENGTH = 52;
6
- export declare const SUPPORTED_FILES: string[];
7
- export declare function validateFile(file: File): "File too large" | "File name too long" | "Unsupported file" | undefined;
8
- export declare function showPermissionInstructions(): void;
9
- export declare const cameraErrorDescriptions: Record<string, string>;
@@ -1,79 +0,0 @@
1
- import * as faceapi from 'face-api.js';
2
- import Resizer from 'react-image-file-resizer';
3
- export async function loadFaceApiModels() {
4
- // const url = `${STATIC_ENDPOINT}/models`;
5
- const url = '/models';
6
- await Promise.all([
7
- faceapi.nets.tinyFaceDetector.loadFromUri(url),
8
- faceapi.nets.faceLandmark68Net.loadFromUri(url),
9
- faceapi.nets.faceRecognitionNet.loadFromUri(url),
10
- ]);
11
- }
12
- export function dataURLtoBlob(dataURL) {
13
- const parts = dataURL.split(';base64,');
14
- const contentType = parts[0].split(':')[1];
15
- const raw = window.atob(parts[1]);
16
- const rawLength = raw.length;
17
- const uInt8Array = new Uint8Array(rawLength);
18
- for (let i = 0; i < rawLength; ++i) {
19
- uInt8Array[i] = raw.charCodeAt(i);
20
- }
21
- return new Blob([uInt8Array], { type: contentType });
22
- }
23
- export const resizeFile = (file) => new Promise((resolve) => {
24
- Resizer.imageFileResizer(file, 300, 300, 'jpeg', 100, 0, (uri) => {
25
- resolve(uri);
26
- }, 'file');
27
- });
28
- export const MAX_FILE_SIZE = 10; /* in MB */
29
- export const MAX_NAME_LENGTH = 52;
30
- export const SUPPORTED_FILES = [
31
- /* add more supported ext */
32
- 'image/png',
33
- 'image/jpg',
34
- 'image/jpeg',
35
- ];
36
- function removeFilenameExt(subject) {
37
- const l = subject.split('.');
38
- l.pop();
39
- return l.join('.');
40
- }
41
- export function validateFile(file) {
42
- const fileType = file.type;
43
- const fileSize = file.size / (1024 * 1024);
44
- const nameLength = removeFilenameExt(file.name).length;
45
- if (fileSize > MAX_FILE_SIZE)
46
- return 'File too large';
47
- if (nameLength > MAX_NAME_LENGTH)
48
- return 'File name too long';
49
- if (!SUPPORTED_FILES.includes(fileType))
50
- return 'Unsupported file';
51
- }
52
- export function showPermissionInstructions() {
53
- const instructions = `
54
- Camera access is blocked. To enable camera access:
55
-
56
- Chrome/Edge:
57
- 1. Click the camera icon in the address bar
58
- 2. Select "Always allow" and click "Done"
59
- 3. Or go to Settings > Privacy and security > Site settings > Camera
60
-
61
- Firefox:
62
- 1. Click the shield icon in the address bar
63
- 2. Click on "Camera blocked"
64
- 3. Select "Allow" and refresh the page
65
-
66
- Safari:
67
- 1. Go to Safari > Settings > Websites > Camera
68
- 2. Find this website and change to "Allow"
69
-
70
- After changing permissions, please refresh the page and try again.
71
- `;
72
- alert(instructions);
73
- }
74
- export const cameraErrorDescriptions = {
75
- NotAllowedError: 'We were unable to detect a camera on your device. Please ensure it is properly connected and accessible to this application.',
76
- NotReadableError: 'We were unable to access your camera. Please check if another application is using it or try reconnecting your device.',
77
- NotFoundError: 'No camera was found. Please connect a camera and try again.',
78
- NoIdDetectedError: 'No ID document was detected in the frame. Please ensure your ID is clearly visible and try again.',
79
- };
@@ -1 +0,0 @@
1
- export declare function Message(): import("react/jsx-runtime").JSX.Element;
@@ -1,35 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { tz } from '@date-fns/tz';
3
- import { format } from 'date-fns';
4
- import Link from 'next/link';
5
- import { useShallow } from 'zustand/shallow';
6
- import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
7
- import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
8
- import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
9
- import { useMessageContext } from './MessageContext.js';
10
- import { getMessageIcon } from './utils.js';
11
- export function Message() {
12
- const message = useMessageContext();
13
- const localeInfo = useLocaleInfo();
14
- const globalStore = useGlobalStore(useShallow((ctx) => ({
15
- message: ctx.message,
16
- messages: ctx.messages,
17
- })));
18
- const markMessageAsReadMutation = useMarkMessageAsReadMutation();
19
- const Icon = getMessageIcon(message.icon);
20
- const handleViewMessage = async () => {
21
- globalStore.message.setData(message);
22
- globalStore.message.setOpen(true);
23
- globalStore.messages.setOpen(false);
24
- if (!message.markedAsRead)
25
- markMessageAsReadMutation.mutate(message.id);
26
- };
27
- const handleActionClick = (e) => {
28
- e.stopPropagation();
29
- globalStore.messages.setOpen(false);
30
- globalStore.messages.setTab('ALL');
31
- };
32
- return (_jsxs("div", { role: "button", tabIndex: 0, className: "border-border-secondary rounded-xs bg-bg-secondary flex h-auto flex-shrink-0 cursor-pointer flex-col border px-3.5 py-2.5", onClick: handleViewMessage, "aria-pressed": "false", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-text-tertiary-600 text-xs font-normal", children: format(new Date(message.dateTimeCreated), 'M/d/yyyy - h:mma', {
33
- in: tz(localeInfo.timezone),
34
- }) }), !message.markedAsRead && (_jsx("div", { className: "bg-utility-success-500 h-2.5 w-2.5 rounded-full" }))] }), _jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [_jsx(Icon, { className: "text-brand-400" }), _jsx("p", { className: "text-text-primary-brand text-sm font-semibold", children: message.title })] }), _jsx("p", { className: "line-clamp-3 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: message.content } }), message.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-end gap-2", children: message.actions.map((action, index) => (_jsx(Link, { className: "border-button-secondary-border text-button-secondary-fg rounded-md border px-3 py-2 text-sm", href: action.url, onClick: handleActionClick, children: action.name }, index))) }))] }));
35
- }
@@ -1,6 +0,0 @@
1
- import type { Message } from '../../types';
2
- export declare const MessageContext: (props: {
3
- value: Message;
4
- } & {
5
- children?: import("react").ReactNode | undefined;
6
- }) => React.ReactNode, useMessageContext: () => Message;
@@ -1,2 +0,0 @@
1
- import { createContext } from '../../client/utils/createContext.js';
2
- export const [MessageContext, useMessageContext] = createContext();
@@ -1 +0,0 @@
1
- export declare const MessagePopup: () => import("react/jsx-runtime").JSX.Element;
@@ -1,20 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import Link from 'next/link';
4
- import { useShallow } from 'zustand/shallow';
5
- import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
6
- import { XIcon } from '../../icons/XIcon.js';
7
- import { Dialog } from '../../ui/Dialog/index.js';
8
- import { Portal } from '../../ui/Portal/index.js';
9
- import { getMessageIcon } from './utils.js';
10
- export const MessagePopup = () => {
11
- const globalStore = useGlobalStore(useShallow((ctx) => ({ message: ctx.message })));
12
- const Icon = getMessageIcon(globalStore.message.data?.icon ?? 'MESSAGE');
13
- return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.message.open, onOpenChange: ({ open }) => {
14
- globalStore.message.setOpen(open);
15
- }, 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 min-w-[21.438rem] max-w-[21.438rem] rounded-xl px-xl pb-0 pt-5 shadow-xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "bg-bg-brand-secondary mx-auto w-fit rounded-full p-3", children: _jsx(Icon, { className: "text-text-brand", height: "24", width: "24" }) }), _jsx("p", { className: "text-text-primary-brand mt-lg text-center text-lg font-semibold leading-tight", children: globalStore.message.data?.title }), _jsx("div", { className: "text-shadow-text-secondary-700 mt-xs text-center text-sm font-normal leading-tight", dangerouslySetInnerHTML: {
16
- __html: globalStore.message.data?.content ?? '',
17
- } })] }), globalStore.message.data?.actions.length ? (_jsx("div", { className: "flex flex-col space-y-2 px-4 pb-8 pt-6 text-center", children: globalStore.message.data.actions.map((action, index) => (_jsx(Link, { className: "bg-button-primary-bg rounded-xs text-button-primary-fg w-full px-4 py-2.5 text-base font-semibold", href: action.url, onClick: () => {
18
- globalStore.message.setOpen(false);
19
- }, children: action.name }, index))) })) : null] }) })] }) }));
20
- };
@@ -1,8 +0,0 @@
1
- import type { ComponentPropsWithRef } from 'react';
2
- import type { Message } from '../../types';
3
- interface MessageTriggerProps extends ComponentPropsWithRef<'button'> {
4
- message: Message;
5
- asChild?: boolean;
6
- }
7
- export declare function MessageTrigger(props: MessageTriggerProps): import("react/jsx-runtime").JSX.Element;
8
- export {};
@@ -1,19 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import { ark } from '@ark-ui/react/factory';
4
- import { useShallow } from 'zustand/shallow';
5
- import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
6
- import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
7
- export function MessageTrigger(props) {
8
- const globalStore = useGlobalStore(useShallow((ctx) => ({
9
- message: ctx.message,
10
- })));
11
- const markMessageAsReadMutation = useMarkMessageAsReadMutation();
12
- return (_jsx(ark.button, { type: "button", "aria-label": "View message", "data-state": globalStore.message.open ? 'open' : 'closed', ...props, onClick: (e) => {
13
- globalStore.message.setData(props.message);
14
- globalStore.message.setOpen(true);
15
- if (!props.message.markedAsRead)
16
- markMessageAsReadMutation.mutate(props.message.id);
17
- return props.onClick?.(e);
18
- } }));
19
- }
@@ -1,15 +0,0 @@
1
- import { type ReactNode } from 'react';
2
- type TimeLeft = {
3
- days: number;
4
- hours: number;
5
- minutes: number;
6
- seconds: number;
7
- };
8
- interface CountdownTimerProps {
9
- startDateTime?: string;
10
- endDateTime?: string;
11
- renderAction: (timeLeft: TimeLeft) => ReactNode;
12
- onEnd?: () => void;
13
- }
14
- export default function CountdownTimer({ startDateTime, endDateTime, renderAction, onEnd, }: CountdownTimerProps): import("react/jsx-runtime").JSX.Element;
15
- export {};
@@ -1,33 +0,0 @@
1
- 'use client';
2
- import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
3
- import { differenceInSeconds, parseISO } from 'date-fns';
4
- import { useCallback, useEffect, useState } from 'react';
5
- export default function CountdownTimer({ startDateTime, endDateTime, renderAction, onEnd, }) {
6
- const calculateTimeLeft = useCallback(() => {
7
- const start = startDateTime ? parseISO(startDateTime) : new Date();
8
- const end = endDateTime ? parseISO(endDateTime) : new Date();
9
- const totalSeconds = Math.max(differenceInSeconds(end, start), 0);
10
- const days = Math.floor(totalSeconds / (60 * 60 * 24));
11
- const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
12
- const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
13
- const seconds = totalSeconds % 60;
14
- return { days, hours, minutes, seconds };
15
- }, [startDateTime, endDateTime]);
16
- const [timeLeft, setTimeLeft] = useState(calculateTimeLeft);
17
- useEffect(() => {
18
- const interval = setInterval(() => {
19
- const newTimeLeft = calculateTimeLeft();
20
- setTimeLeft(newTimeLeft);
21
- const isZero = newTimeLeft.days === 0 &&
22
- newTimeLeft.hours === 0 &&
23
- newTimeLeft.minutes === 0 &&
24
- newTimeLeft.seconds === 0;
25
- if (isZero) {
26
- clearInterval(interval);
27
- onEnd?.();
28
- }
29
- }, 1000);
30
- return () => clearInterval(interval);
31
- }, [calculateTimeLeft, onEnd]);
32
- return _jsx(_Fragment, { children: renderAction(timeLeft) });
33
- }
@@ -1,4 +0,0 @@
1
- import type { Quest } from '../../../types';
2
- export declare function DailyCheckInQuest({ quest }: {
3
- quest: Quest;
4
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,78 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { addDays, isEqual, startOfDay } from 'date-fns';
4
- import { useState } from 'react';
5
- import { twMerge } from 'tailwind-merge';
6
- import { useCheckInDailyCheckInQuestMutation } from '../../../client/hooks/useCheckInDailyCheckInQuestMutation.js';
7
- import { toaster } from '../../../client/utils/toaster.js';
8
- import { CalendarIcon } from '../../../icons/CalendarIcon.js';
9
- import { CheckIcon } from '../../../icons/CheckIcon.js';
10
- import { ClockStopWatchIcon } from '../../../icons/ClockStopWatchIcon.js';
11
- import { InfoCircleIcon } from '../../../icons/InfoCircleIcon.js';
12
- import { Badge } from '../../../ui/Badge/index.js';
13
- import { Button } from '../../../ui/Button/index.js';
14
- import { getQueryClient } from '../../../utils/getQueryClient.js';
15
- import { getAvailableQuestsQueryKey } from '../../../utils/queryKeys.js';
16
- import CountdownTimer from '../CountdownTimer.js';
17
- import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
18
- export function DailyCheckInQuest({ quest }) {
19
- const queryClient = getQueryClient();
20
- const [showRules, setShowRules] = useState(false);
21
- const [isExpired, setIsExpired] = useState(false);
22
- const { name, description, status, lastCheckInDate, progressPercentage, checkInStreak, thirdDayBonusAmount, sixthDayBonusAmount, seventhDayBonusAmount, endDateTime, id, } = quest;
23
- const today = startOfDay(new Date());
24
- const hasCheckedInToday = lastCheckInDate
25
- ? isEqual(today, startOfDay(new Date(lastCheckInDate)))
26
- : false;
27
- const checkedInRewards = {
28
- 3: thirdDayBonusAmount,
29
- 6: sixthDayBonusAmount,
30
- 7: seventhDayBonusAmount,
31
- };
32
- const dailyCheckedInData = Array.from({ length: 7 }, (_, i) => {
33
- const day = i + 1;
34
- return {
35
- day,
36
- reward: checkedInRewards[day] ?? 0,
37
- };
38
- });
39
- const { mutate } = useCheckInDailyCheckInQuestMutation({
40
- onSuccess() {
41
- toaster.success({
42
- title: 'Check-in successful 🎉',
43
- description: 'You’ve successfully checked in for today! Keep it up to maintain your streak!',
44
- });
45
- queryClient.invalidateQueries({
46
- queryKey: getAvailableQuestsQueryKey(),
47
- });
48
- },
49
- onError(e) {
50
- toaster.error({
51
- title: 'Check-in successful 🎉',
52
- description: e.message ?? 'Check-In Failed',
53
- });
54
- },
55
- });
56
- const handleCheckIn = async () => mutate(id);
57
- return (_jsxs(_Fragment, { children: [_jsx(DailyCheckInQuestModal, { modalState: {
58
- isOpen: showRules,
59
- setIsOpen: setShowRules,
60
- } }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(CountdownTimer, { endDateTime: endDateTime, renderAction: (timeLeft) => (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsxs(Badge.Label, { children: [timeLeft.days, "d:", timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => setIsExpired(true) }), _jsx("div", { role: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => {
61
- const reward = item.reward ? `+₱${item.reward}` : '-';
62
- return (_jsx("div", { className: twMerge('flex items-center justify-center', item.day <= (checkInStreak || 0)
63
- ? 'text-brand-400'
64
- : 'text-text-secondary-700'), children: _jsx("p", { children: reward }) }, item.day));
65
- }) }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercentage}%` } }) }), _jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => (_jsx("div", { className: "flex items-center justify-center", children: _jsx(CalendarWithDayNumber, { day: item.day, currentCheckedInDays: checkInStreak || 0 }, item.day) }, item.day))) })] }), _jsx(Button, { onClick: handleCheckIn, className: "disabled:bg-bg-primary disabled:text-text-disabled", disabled: isExpired ||
66
- status === 'COMPLETED' ||
67
- status === 'FAILED' ||
68
- hasCheckedInToday, children: hasCheckedInToday && status === 'IN_PROGRESS' ? (_jsx(CountdownTimer, { endDateTime: startOfDay(addDays(new Date(), 1)).toISOString(), renderAction: (timeLeft) => (_jsxs("div", { className: "flex items-center space-x-0.5", children: [_jsx(CheckIcon, {}), _jsxs("p", { children: [timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => {
69
- queryClient.invalidateQueries({
70
- queryKey: getAvailableQuestsQueryKey(),
71
- });
72
- } })) : ('Check-In') })] })] }));
73
- }
74
- function CalendarWithDayNumber({ day, currentCheckedInDays, }) {
75
- return (_jsxs("div", { className: twMerge('group relative h-fit w-fit', day <= currentCheckedInDays
76
- ? 'text-brand-400'
77
- : 'text-text-secondary-700'), children: [_jsx(CalendarIcon, {}), _jsx("div", { className: "absolute inset-0 mt-1 flex items-center justify-center text-2xs lg:mt-[2px]", children: _jsx("p", { className: "text-center", children: day }) })] }));
78
- }
@@ -1,8 +0,0 @@
1
- interface Props {
2
- modalState: {
3
- isOpen: boolean;
4
- setIsOpen: (isOpen: boolean) => void;
5
- };
6
- }
7
- export declare function DailyCheckInQuestModal(props: Props): import("react/jsx-runtime").JSX.Element;
8
- export {};
@@ -1,9 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { XIcon } from '../../../icons/XIcon.js';
4
- import { Button } from '../../../ui/Button/index.js';
5
- import { Dialog } from '../../../ui/Dialog/index.js';
6
- import { Portal } from '../../../ui/Portal/index.js';
7
- export function DailyCheckInQuestModal(props) {
8
- 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" }) })] }) })] }) }));
9
- }
@@ -1,4 +0,0 @@
1
- import type { Quest } from '../../../types';
2
- export declare function OnboardingQuest(props: {
3
- quest: Quest;
4
- }): null;
@@ -1,4 +0,0 @@
1
- export function OnboardingQuest(props) {
2
- console.log('OnboardingQuest not implemented', props.quest);
3
- return null;
4
- }
@@ -1,4 +0,0 @@
1
- import type { Quest } from '../../../types';
2
- export declare function WageringQuest({ quest }: {
3
- quest: Quest;
4
- }): import("react/jsx-runtime").JSX.Element;