@opexa/portal-components 0.0.235 → 0.0.237

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 (88) hide show
  1. package/dist/client/hooks/useCamera.d.ts +8 -7
  2. package/dist/client/hooks/useCamera.js +6 -6
  3. package/dist/components/Bonuses/ClaimSpotBonus.lazy.js +1 -1
  4. package/dist/components/CashbackBonus/CashbackBonus.client.d.ts +2 -0
  5. package/dist/components/CashbackBonus/CashbackBonus.client.js +9 -0
  6. package/dist/components/CashbackBonus/CashbackBonus.d.ts +10 -0
  7. package/dist/components/CashbackBonus/CashbackBonus.js +5 -0
  8. package/dist/components/CashbackBonus/index.d.ts +1 -0
  9. package/dist/components/CashbackBonus/index.js +1 -0
  10. package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts +2 -2
  11. package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositDetails.js +1 -1
  12. package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts +1 -1
  13. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts +2 -2
  14. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositDetails.js +1 -1
  15. package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts +1 -1
  16. package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.js +1 -1
  17. package/dist/components/Disclaimer/DisclaimerV1.js +1 -1
  18. package/dist/components/Disclaimer/DisclaimerV2.js +1 -1
  19. package/dist/components/Disclaimer/ResponsibleGaming.js +3 -3
  20. package/dist/components/Disclaimer/TermsOfUse.js +4 -4
  21. package/dist/components/Empty.d.ts +1 -2
  22. package/dist/components/GameLaunch/GameLaunch.lazy.js +1 -1
  23. package/dist/components/Jackpots/JackpotsList/JackpotsListItemRules.js +1 -1
  24. package/dist/components/KYC/Header.js +4 -2
  25. package/dist/components/KYC/KYC.lazy.js +1 -1
  26. package/dist/components/KYC/KYCReminder.lazy.js +1 -1
  27. package/dist/components/KYC/Step1.js +3 -2
  28. package/dist/components/KYC/Step2.js +3 -2
  29. package/dist/components/KYC/Step3.js +4 -2
  30. package/dist/components/KYC/Step4.js +3 -2
  31. package/dist/components/KYC/backup/KYCContext.d.ts +5 -1
  32. package/dist/components/KYC/loadModels.d.ts +1 -0
  33. package/dist/components/KYC/loadModels.js +9 -0
  34. package/dist/components/Messages/Message.js +2 -3
  35. package/dist/components/Messages/MessageContext.d.ts +5 -1
  36. package/dist/components/Messages/MessagePopup.js +2 -3
  37. package/dist/components/Messages/Messages.lazy.js +1 -1
  38. package/dist/components/Messages/MessagesPopup.js +1 -1
  39. package/dist/components/Promo/PromoContent.d.ts +2 -0
  40. package/dist/components/Promo/PromoContent.js +9 -0
  41. package/dist/components/Promos/PromoCarousel.d.ts +2 -0
  42. package/dist/components/Promos/PromoCarousel.js +41 -0
  43. package/dist/components/Promos/PromoGrid.d.ts +2 -0
  44. package/dist/components/Promos/PromoGrid.js +12 -0
  45. package/dist/components/Promos/PromoItem.d.ts +7 -0
  46. package/dist/components/Promos/PromoItem.js +10 -0
  47. package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts +1 -1
  48. package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js +10 -5
  49. package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js +4 -3
  50. package/dist/components/Quests/DailyCheckInQuest.js +1 -1
  51. package/dist/components/Quests/OnboardingQuest/OnboardingQuest.d.ts +1 -1
  52. package/dist/components/Quests/OnboardingQuest.js +1 -1
  53. package/dist/components/Quests/WageringQuest/WageringQuest.d.ts +1 -1
  54. package/dist/components/Quests/WageringQuest/WageringQuest.js +3 -2
  55. package/dist/components/Quests/WageringQuest/WageringQuestModal.js +4 -3
  56. package/dist/components/Quests/WageringQuest.js +1 -1
  57. package/dist/components/Search/Search.lazy.js +1 -1
  58. package/dist/components/SignIn/SignIn.lazy.js +1 -1
  59. package/dist/components/SignUp/SignUpDefault/SignUp.lazy.js +1 -1
  60. package/dist/components/SignUp/SignUpForm.js +6 -1
  61. package/dist/components/SignUp/SignUpKYC/CaptureIdDocument.js +1 -1
  62. package/dist/components/SignUp/SignUpKYC/CaptureSelfie.js +1 -1
  63. package/dist/components/SignUp/SignUpKYC/SignUpKYC.lazy.js +1 -1
  64. package/dist/components/Tournaments/TournamentsList/TournamentsListItemRules.js +1 -1
  65. package/dist/components/shared/IdDocumentField.d.ts +14 -6
  66. package/dist/components/shared/IdDocumentField.js +69 -58
  67. package/dist/components/shared/SelfieField.d.ts +12 -6
  68. package/dist/components/shared/SelfieField.js +188 -72
  69. package/dist/constants/BranchCode.d.ts +4 -0
  70. package/dist/constants/BranchCode.js +42 -0
  71. package/dist/constants/endpoints.d.ts +10 -0
  72. package/dist/constants/endpoints.js +41 -0
  73. package/dist/constants/gameProviders.d.ts +1 -2
  74. package/dist/constants/gameProviders.js +6 -0
  75. package/dist/constants/gameTypes.d.ts +1 -2
  76. package/dist/constants/headerKeys.d.ts +1 -0
  77. package/dist/constants/headerKeys.js +1 -0
  78. package/dist/constants/secretQuestions.d.ts +1 -1
  79. package/dist/next.config.js +8 -0
  80. package/dist/ui/Presence.d.ts +1 -1
  81. package/dist/ui/Presence.js +1 -1
  82. package/dist/utils/createErrorFromCode.d.ts +2 -0
  83. package/dist/utils/createErrorFromCode.js +11 -0
  84. package/package.json +5 -3
  85. package/dist/utils/constants.d.ts +0 -2
  86. package/dist/utils/constants.js +0 -2
  87. package/dist/utils/isBetween3amAnd3pm.d.ts +0 -1
  88. package/dist/utils/isBetween3amAnd3pm.js +0 -5
@@ -1,6 +1,6 @@
1
1
  import { type ComponentPropsWithRef } from 'react';
2
- export interface CameraError {
3
- name: 'CameraError' | 'PermissionDeniedError' | 'DeviceNotFoundError' | (string & {});
2
+ export interface CameraError<T extends string = never> {
3
+ name: 'CameraError' | 'PermissionDeniedError' | 'DeviceNotFoundError' | T;
4
4
  message: string;
5
5
  }
6
6
  export interface CameraData {
@@ -19,19 +19,20 @@ export interface CameraSnapOptions {
19
19
  /** @default 2 */
20
20
  scale?: ScaleFactor;
21
21
  }
22
- export interface UseCameraReturn {
22
+ export interface UseCameraReturn<T extends string = never> {
23
23
  open(): Promise<void>;
24
24
  close(): Promise<void>;
25
25
  snap(options?: CameraSnapOptions): Promise<void>;
26
26
  reopen(): Promise<void>;
27
27
  reset(): Promise<void>;
28
28
  data: CameraData | null;
29
- error: CameraError | null;
29
+ error: CameraError<T> | null;
30
30
  loading: boolean;
31
31
  videoRef: React.RefObject<HTMLVideoElement | null>;
32
32
  videoProps: ComponentPropsWithRef<'video'>;
33
33
  }
34
- export interface UseCameraOptions extends MediaStreamConstraints {
35
- validate?: (data: CameraData) => CameraError | null | undefined;
34
+ export interface UseCameraOptions<T extends string = never> extends MediaStreamConstraints {
35
+ transform?: (data: CameraData) => CameraData | Promise<CameraData>;
36
+ validate?: (data: CameraData) => CameraError<T> | null | undefined | Promise<CameraError<T> | null | undefined>;
36
37
  }
37
- export declare function useCamera(options?: UseCameraOptions): UseCameraReturn;
38
+ export declare function useCamera<T extends string = never>(options?: UseCameraOptions<T>): UseCameraReturn<T>;
@@ -1,8 +1,8 @@
1
- import { isBoolean } from 'lodash-es';
1
+ import { isBoolean, isFunction } from 'lodash-es';
2
2
  import { useCallback, useMemo, useRef, useState, } from 'react';
3
3
  import invariant from 'tiny-invariant';
4
4
  export function useCamera(options = {}) {
5
- const { validate, ...constraints } = options;
5
+ const { transform, validate, ...constraints } = options;
6
6
  const videoRef = useRef(null);
7
7
  const stream = useRef(null);
8
8
  const [data, setData] = useState(null);
@@ -115,7 +115,7 @@ export function useCamera(options = {}) {
115
115
  context.imageSmoothingEnabled = true;
116
116
  context.imageSmoothingQuality = 'high';
117
117
  context.drawImage(video, x, y, w, h, 0, 0, w * scaleFactor, h * scaleFactor);
118
- canvas.toBlob((blob) => {
118
+ canvas.toBlob(async (blob) => {
119
119
  if (!blob) {
120
120
  return setError({
121
121
  name: 'CameraError',
@@ -129,13 +129,13 @@ export function useCamera(options = {}) {
129
129
  lastModified: Date.now(),
130
130
  });
131
131
  const data = { url, file };
132
- const error = validate?.(data);
132
+ const error = await validate?.(data);
133
133
  if (error)
134
134
  setError(error);
135
135
  else
136
- setData(data);
136
+ setData(isFunction(transform) ? await transform(data) : data);
137
137
  }, 'image/jpeg', 1);
138
- }, [validate]);
138
+ }, [transform, validate]);
139
139
  const reset = useCallback(() => {
140
140
  setData(null);
141
141
  setError(null);
@@ -39,7 +39,7 @@ export function ClaimSpotBonus() {
39
39
  code: '',
40
40
  },
41
41
  });
42
- return (_jsx(Dialog.Root, { open: globalStore.spotBonus.open, onOpenChange: (details) => globalStore.spotBonus.setOpen(details.open), lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center lg:items-start", children: _jsxs(Dialog.Content, { className: "mx-auto w-[25rem] max-w-full rounded-xl p-3xl", children: [_jsx("div", { className: "overflow-hidden rounded-md", style: {
42
+ return (_jsx(Dialog.Root, { open: globalStore.spotBonus.open, onOpenChange: (details) => globalStore.spotBonus.setOpen(details.open), lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center lg:items-start", children: _jsxs(Dialog.Content, { className: "mx-auto w-[25rem] max-w-full rounded-xl p-3xl overflow-y-auto", children: [_jsx("div", { className: "overflow-hidden rounded-md", style: {
43
43
  background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
44
44
  }, children: _jsx(Image, { src: ribbonEnvelope, alt: "", className: "mx-auto h-[12.5rem] w-[80%] object-cover", draggable: false, width: 600, height: 341 }) }), _jsxs("form", { className: "mt-3xl", onSubmit: form.handleSubmit((data) => {
45
45
  claimSpotBonusMutation.mutate(data.code);
@@ -0,0 +1,2 @@
1
+ import type { CashbackBonusProps } from './CashbackBonus';
2
+ export declare function CashbackBonus__client(props: CashbackBonusProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,9 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import Image from 'next/image';
4
+ import Link from 'next/link';
5
+ import { ChevronLeftIcon, ChevronRightIcon, StopWatchIcon } from '../../icons/index.js';
6
+ import { Badge, Collapsible, Progress, Prose } from '../../ui/index.js';
7
+ export function CashbackBonus__client(props) {
8
+ return (_jsxs("div", { className: props.className, children: [_jsxs(Link, { href: props.viewAllUrl ?? '/rewards', className: "text-button-tertiary-fg flex items-center gap-lg text-lg font-semibold", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to Rewards"] }), _jsx(Image, { src: "https://s3.ap-east-1.amazonaws.com/opexa-assets.opexasystem.com/assets/BSxIXEsa59_zzMAR27-ALLDAYREBATE06-STATIC-WEB-HB-1920x1080.png", alt: "", width: 1024, height: 600, className: "mt-3xl h-auto w-full rounded-xl" }), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: "brand", className: "mt-xl lg:mt-6", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: "9d:10h:11m" })] }), _jsx("h1", { className: "text-text-primary-900 mt-xl text-2xl font-semibold lg:mt-6 lg:text-3xl", children: "50 PHP First Deposit Bonus" }), _jsx("p", { className: "text-text-primary-brand mt-xl text-base lg:mt-6 lg:text-lg", children: "Complete the wagering before time runs out to convert your bonus balance into real money!" }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsx("p", { children: "Your bonus" }), _jsxs("p", { children: [_jsx("span", { className: "text-text-primary-900", children: "20.00" }), " / 50.00 PHP"] })] }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl flex items-center justify-between rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsx("p", { children: "Required Turnover" }), _jsx("p", { children: "5x" })] }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { children: "Wagering" }), _jsx("p", { children: "400/1000" })] }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) })] }), _jsxs(Collapsible.Root, { className: "mt-xl lg:mt-6", children: [_jsxs(Collapsible.Trigger, { className: "text-button-tertiary-fg flex w-fit items-center justify-center gap-sm text-sm font-semibold lg:mx-auto", children: ["Game Provider Contribution", _jsx(Collapsible.Indicator, { asChild: true, children: _jsx(ChevronRightIcon, { className: "size-5" }) })] }), _jsxs(Collapsible.Content, { className: "border-border-primary bg-bg-tertiary text-text-secondary-700 mt-xl space-y-1.5 rounded-md border px-3.5 py-xl lg:mt-6", children: [_jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Playson" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "25%" })] }), _jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Betsoft Gaming" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "13%" })] }), _jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Microgaming" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "50%" })] }), _jsxs("div", { className: "flex items-center justify-between gap-md", children: [_jsx("p", { className: "w-[11.25rem] shrink-0", children: "Realtime Gaming" }), _jsx(Progress.Root, { defaultValue: 42, className: "mt-2 grow", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("p", { children: "10%" })] })] })] }), _jsxs(Prose, { className: "mt-xl lg:mt-6", children: [_jsx("h3", { children: "How to get bonus" }), _jsxs("ol", { children: [_jsx("li", { children: "All OFWin members are eligible for this program." }), _jsx("li", { children: "50 PHP of game credit will be automatically credited to the new member account upon completion of first deposit Auctor vel in vitae placerat." }), _jsx("li", { children: "Member must reach a 5x turnover requirement before a withdrawal can be made. Attempting to make a withdrawal before this turnover requirement is completed could cause your bonus to be voided." }), _jsx("li", { children: "Players will have 10 days from the date the bonus is awarded to complete the rollover requirement." }), _jsx("li", { children: "Bets used to meet other bonus rollover requirements will not count toward this promotion." })] }), _jsx("h3", { children: "Terms and Conditions" }), _jsxs("ul", { children: [_jsx("li", { children: "Only one account per player is allowed. No same IP address/bank account name allowed. Players who have multiple or fraudulent accounts will not be qualified for the promotion." }), _jsx("li", { children: "Players that are found to have any duplicate accounts or those who participate in fraudulent activities may have their funds forfeited and their accounts closed." }), _jsx("li", { children: "OFWin reserves the right to amend or cancel this Referral Program at any time. OFWin General Terms and Conditions apply." })] })] })] }));
9
+ }
@@ -0,0 +1,10 @@
1
+ export interface CashbackBonusProps {
2
+ id: string;
3
+ className?: string;
4
+ /**
5
+ * @description URL for the bonuses details page
6
+ * @default "/rewards"
7
+ */
8
+ viewAllUrl?: string;
9
+ }
10
+ export declare function CashbackBonus(props: CashbackBonusProps): Promise<import("react/jsx-runtime").JSX.Element>;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { CashbackBonus__client } from './CashbackBonus.client.js';
3
+ export async function CashbackBonus(props) {
4
+ return _jsx(CashbackBonus__client, { ...props });
5
+ }
@@ -0,0 +1 @@
1
+ export * from './CashbackBonus';
@@ -0,0 +1 @@
1
+ export * from './CashbackBonus.js';
@@ -1,6 +1,6 @@
1
1
  export declare const OnlineBankDepositContext: (props: {
2
2
  value: {
3
- view: "form" | "vca";
3
+ view: "vca" | "form";
4
4
  status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
5
5
  verify: () => void;
6
6
  reset: () => void;
@@ -13,7 +13,7 @@ export declare const OnlineBankDepositContext: (props: {
13
13
  } & {
14
14
  children?: import("react").ReactNode | undefined;
15
15
  }) => React.ReactNode, useOnlineBankDepositContext: () => {
16
- view: "form" | "vca";
16
+ view: "vca" | "form";
17
17
  status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
18
18
  verify: () => void;
19
19
  reset: () => void;
@@ -15,5 +15,5 @@ export function OnlineBankDepositDetails() {
15
15
  return (_jsxs("div", { className: "bg-bg-primary-alt rounded-lg p-2xl", children: [_jsx(Image, { src: bankIcon, alt: "", width: 52, height: 44.2, className: "mx-auto h-auto w-[3.25rem]" }), _jsx("p", { className: "mt-8 text-center font-semibold", children: "Your unique Virtual Collection Account (VCA) is:" }), _jsx(Clipboard.Root, { value: context.deposit?.vca ?? '', className: "mx-auto mt-6 max-w-[22.5rem]", children: _jsxs(Clipboard.Control, { className: "flex flex-col gap-4 lg:flex-row", children: [_jsx(Clipboard.Input, { className: "lg:grow" }), _jsx(Clipboard.Context, { children: (ctx) => (_jsx(Clipboard.Trigger, { asChild: true, children: _jsx(Button, { fullWidth: false, className: "w-full shrink-0 lg:w-28", children: ctx.copied ? 'Copied' : 'Copy VCA' }) })) })] }) }), _jsx(Instruction, {})] }));
16
16
  }
17
17
  function Instruction() {
18
- return (_jsxs("p", { className: "text-text-tertiary-600 mt-6 text-center text-xs", children: ["Need help using the online bank for payment?", ' ', _jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, children: [_jsx(Dialog.Trigger, { className: "text-text-warning-primary-600", children: "See instructions" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto w-[calc(100%-2rem)] rounded-lg p-4xl lg:w-[33.625rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Dialog.Body, { children: [_jsxs("div", { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-11 items-center justify-center rounded-lg border", children: _jsx(BankIcon, { className: "size-6" }) }), _jsx(Dialog.Title, { className: "text-lg font-semibold", children: "How to Use Online Bank for Payment" })] }), _jsx(Dialog.Description, { className: "mt-5", children: "Follow these simple steps to complete your transaction:" }), _jsxs("ol", { className: "mt-3 list-inside list-decimal space-y-3", children: [_jsx("li", { children: "Click the 'Copy VCA' button to save your unique account number." }), _jsx("li", { children: "Log in to your Online Banking: Open your bank's app or website." }), _jsx("li", { children: "Initiate a Deposit: Choose the option to make a deposit." }), _jsx("li", { children: "Enter VCA: Paste your VCA in the designated field." }), _jsx("li", { children: "Complete Transaction: Follow your bank's prompts to finalize the deposit." })] }), _jsx("p", { className: "mt-3", children: "Note: Please ensure that the deposit amount you enter matches exactly." })] })] }) })] })] })] }));
18
+ return (_jsxs("p", { className: "text-text-tertiary-600 mt-6 text-center text-xs", children: ["Need help using the online bank for payment?", ' ', _jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, children: [_jsx(Dialog.Trigger, { className: "text-text-warning-primary-600", children: "See instructions" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto w-[calc(100%-2rem)] rounded-lg p-4xl lg:w-[33.625rem] overflow-y-auto", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Dialog.Body, { children: [_jsxs("div", { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-11 items-center justify-center rounded-lg border", children: _jsx(BankIcon, { className: "size-6" }) }), _jsx(Dialog.Title, { className: "text-lg font-semibold", children: "How to Use Online Bank for Payment" })] }), _jsx(Dialog.Description, { className: "mt-5", children: "Follow these simple steps to complete your transaction:" }), _jsxs("ol", { className: "mt-3 list-inside list-decimal space-y-3", children: [_jsx("li", { children: "Click the 'Copy VCA' button to save your unique account number." }), _jsx("li", { children: "Log in to your Online Banking: Open your bank's app or website." }), _jsx("li", { children: "Initiate a Deposit: Choose the option to make a deposit." }), _jsx("li", { children: "Enter VCA: Paste your VCA in the designated field." }), _jsx("li", { children: "Complete Transaction: Follow your bank's prompts to finalize the deposit." })] }), _jsx("p", { className: "mt-3", children: "Note: Please ensure that the deposit amount you enter matches exactly." })] })] }) })] })] })] }));
19
19
  }
@@ -1,7 +1,7 @@
1
1
  import type { Deposit } from '../../../../types';
2
2
  export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
3
3
  export declare function useOnlineBankDeposit(): {
4
- view: "form" | "vca";
4
+ view: "vca" | "form";
5
5
  status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
6
6
  verify: () => void;
7
7
  reset: () => void;
@@ -1,6 +1,6 @@
1
1
  export declare const QRPHDepositContext: (props: {
2
2
  value: {
3
- view: "form" | "qrCode";
3
+ view: "qrCode" | "form";
4
4
  status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
5
5
  verify: () => void;
6
6
  reset: () => void;
@@ -13,7 +13,7 @@ export declare const QRPHDepositContext: (props: {
13
13
  } & {
14
14
  children?: import("react").ReactNode | undefined;
15
15
  }) => React.ReactNode, useQRPHDepositContext: () => {
16
- view: "form" | "qrCode";
16
+ view: "qrCode" | "form";
17
17
  status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
18
18
  verify: () => void;
19
19
  reset: () => void;
@@ -15,5 +15,5 @@ export function QRPHDepositDetails() {
15
15
  return (_jsxs("div", { className: "bg-bg-primary-alt rounded-lg p-2xl", children: [_jsx("p", { className: "text-center text-lg font-semibold lg:text-xl", children: "QR Code" }), _jsx("p", { className: "text-text-secondary-700 mt-3 text-center text-sm lg:text-base", children: "Scan the QR code below with your banking app, or upload it to complete your deposit." }), _jsxs(QrCode.Root, { value: context.deposit?.qrCode ?? '', className: "border-border-primary bg-bg-brand-secondary-alt mx-auto mt-6 w-[12.5rem] rounded-lg border p-5 lg:w-[13rem] lg:p-6", children: [_jsxs("div", { className: "relative", children: [_jsx(QrCode.Frame, { className: "border-border-primary mx-auto size-[10rem] rounded-[0.25rem] border bg-white", children: _jsx(QrCode.Pattern, {}) }), _jsx(QrCode.Overlay, { className: "bg-white p-0.5", children: _jsx(Image, { src: qrphIcon, alt: "", className: "size-8", width: 40, height: 40 }) })] }), _jsx(QrCode.DownloadTrigger, { fileName: `qrcode-${new Date().getTime()}`, mimeType: "image/png", className: "text-text-secondary-700 mt-5 block w-full text-center text-sm font-semibold", children: "Download QR Code" })] }), _jsxs("div", { className: "mt-6 flex flex-col gap-4 lg:flex-row", children: [_jsx(Button, { size: "sm", variant: "outline", colorScheme: "gray", onClick: context.reset, children: "Generate New QR Code" }), _jsx(Button, { size: "sm", onClick: context.verify, children: "Confirm Deposit" })] }), _jsx(Instruction, {})] }));
16
16
  }
17
17
  function Instruction() {
18
- return (_jsxs("p", { className: "text-text-tertiary-600 mt-6 text-center text-xs", children: ["Need help using the QR Code?", ' ', _jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, children: [_jsx(Dialog.Trigger, { className: "text-text-warning-primary-600", children: "See instructions" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto w-[calc(100%-2rem)] rounded-lg p-4xl lg:w-[33.625rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Dialog.Body, { children: [_jsxs("div", { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-11 items-center justify-center rounded-lg border", children: _jsx(QrCode02Icon, { className: "size-6" }) }), _jsx(Dialog.Title, { className: "text-lg font-semibold", children: "How to Use the QR Code for Payment" })] }), _jsx(Dialog.Description, { className: "mt-5", children: "Follow these simple steps to complete your transaction:" }), _jsxs("ol", { className: "mt-3 list-inside list-decimal space-y-3", children: [_jsx("li", { children: "Open your preferred banking or EMI mobile app and select 'Transfer Money' or 'Pay via QR'" }), _jsx("li", { children: "Scan or upload the generated QR Ph code. If prompted by the app, enter the amount to be sent." }), _jsx("li", { children: "Proceed with the transfer or payment." })] })] })] }) })] })] })] }));
18
+ return (_jsxs("p", { className: "text-text-tertiary-600 mt-6 text-center text-xs", children: ["Need help using the QR Code?", ' ', _jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, children: [_jsx(Dialog.Trigger, { className: "text-text-warning-primary-600", children: "See instructions" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto w-[calc(100%-2rem)] rounded-lg p-4xl lg:w-[33.625rem] overflow-y-auto", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Dialog.Body, { children: [_jsxs("div", { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-11 items-center justify-center rounded-lg border", children: _jsx(QrCode02Icon, { className: "size-6" }) }), _jsx(Dialog.Title, { className: "text-lg font-semibold", children: "How to Use the QR Code for Payment" })] }), _jsx(Dialog.Description, { className: "mt-5", children: "Follow these simple steps to complete your transaction:" }), _jsxs("ol", { className: "mt-3 list-inside list-decimal space-y-3", children: [_jsx("li", { children: "Open your preferred banking or EMI mobile app and select 'Transfer Money' or 'Pay via QR'" }), _jsx("li", { children: "Scan or upload the generated QR Ph code. If prompted by the app, enter the amount to be sent." }), _jsx("li", { children: "Proceed with the transfer or payment." })] })] })] }) })] })] })] }));
19
19
  }
@@ -1,7 +1,7 @@
1
1
  import type { Deposit } from '../../../../types';
2
2
  export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
3
3
  export declare function useQRPHDeposit(): {
4
- view: "form" | "qrCode";
4
+ view: "qrCode" | "form";
5
5
  status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
6
6
  verify: () => void;
7
7
  reset: () => void;
@@ -28,7 +28,7 @@ export function DepositWithdrawal(props) {
28
28
  if (!details.open) {
29
29
  globalStore.depositWithdrawal.setPromo(null);
30
30
  }
31
- }, 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)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto mx-auto min-h-full w-full px-4 py-3xl lg:w-[480px] lg:rounded-xl", children: [_jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-10 items-center justify-center rounded-md border", children: _jsx(Wallet02Icon, { className: "size-5" }) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" }), _jsx(Dialog.Context, { children: (api) => (_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, {}) })) })] }), _jsxs(Dialog.Body, { className: "mt-3xl", children: [_jsx("p", { className: "text-text-secondary-700 text-center text-sm", children: "Deposit Balance" }), _jsx("p", { className: "text-center text-3xl font-bold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
31
+ }, 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)]", children: _jsxs(Dialog.Content, { className: "lg:min-h-auto mx-auto min-h-full w-full px-4 py-3xl lg:w-[480px] lg:rounded-xl overflow-y-auto", children: [_jsxs(Dialog.Header, { className: "flex items-center gap-xl", children: [_jsx("div", { className: "border-border-primary shadow-xs text-gray-700 text-text-secondary-700 flex size-10 items-center justify-center rounded-md border", children: _jsx(Wallet02Icon, { className: "size-5" }) }), _jsx(Dialog.Title, { className: "grow text-lg font-semibold", children: "Wallet" }), _jsx(Dialog.Context, { children: (api) => (_jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, {}) })) })] }), _jsxs(Dialog.Body, { className: "mt-3xl", children: [_jsx("p", { className: "text-text-secondary-700 text-center text-sm", children: "Deposit Balance" }), _jsx("p", { className: "text-center text-3xl font-bold leading-tight tracking-tight", children: formatNumber(walletQuery.data?.balance, {
32
32
  currency: localeInfo.currency.code,
33
33
  minDecimalPlaces: 2,
34
34
  }) }), _jsxs(Tabs.Root, { value: globalStore.depositWithdrawal.tab, onValueChange: (details) => {
@@ -12,5 +12,5 @@ import { useDisclaimer } from './useDisclaimer.js';
12
12
  export function DisclaimerV1(props) {
13
13
  const disclaimer = useDisclaimer();
14
14
  const acceptTriggerRef = useRef(null);
15
- return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center text-lg font-semibold", children: "Age Verification" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-xs text-center text-sm", children: ["By entering this website I acknowledge and confirm I am 21 years of age and I agree with the", ' ', _jsx(Link, { href: props.termsAndConditionsUrl ?? '/terms-and-conditions', target: "_blank", rel: "noopener noreferrer", className: "text-brand-400 whitespace-nowrap underline underline-offset-2", prefetch: false, children: "Terms and Conditions." })] }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, children: "Accept" })] }) })] }) }));
15
+ return (_jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)]", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl overflow-y-auto", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "mt-3xl text-center text-lg font-semibold", children: "Age Verification" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-xs text-center text-sm", children: ["By entering this website I acknowledge and confirm I am 21 years of age and I agree with the", ' ', _jsx(Link, { href: props.termsAndConditionsUrl ?? '/terms-and-conditions', target: "_blank", rel: "noopener noreferrer", className: "text-brand-400 whitespace-nowrap underline underline-offset-2", prefetch: false, children: "Terms and Conditions." })] }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { ref: acceptTriggerRef, type: "button", className: "mt-4xl", onClick: disclaimer.close, children: "Accept" })] }) })] }) }));
16
16
  }
@@ -18,7 +18,7 @@ export function DisclaimerV2(props) {
18
18
  const [isResponsibleGamingOpen, setResponsibleGamingOpen] = useState(false);
19
19
  const [isTermsOfUseOpen, setTermsOfUseOpen] = useState(false);
20
20
  const [isChecked, setIsChecked] = useState(true);
21
- return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false) }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false) }), _jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-sticky" }), _jsx(Dialog.Positioner, { className: "z-sticky", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start gap-y-4 p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false })] }), _jsx("div", { className: "text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), !props.hasNoCheckbox ? (_jsxs(Checkbox.Root, { checked: isChecked, onCheckedChange: (e) => {
21
+ return (_jsxs(_Fragment, { children: [_jsx(ResponsibleGaming, { responsibleGamingContent: props.responsibleGamingContent, logo: props.logo, open: isResponsibleGamingOpen, onCloseAction: () => setResponsibleGamingOpen(false) }), _jsx(TermsOfUse, { termsOfUseContent: props.termsOfUseContent, siteName: props.siteName, logo: props.logo, open: isTermsOfUseOpen, onCloseAction: () => setTermsOfUseOpen(false) }), _jsx(Dialog.Root, { open: disclaimer.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, initialFocusEl: () => acceptTriggerRef.current, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start gap-y-4 overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 43, width: 88, className: "h-[43px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: props.responsibleGamingLogo ?? responsibleGamingLogo, alt: "", height: 50, width: 186, className: "h-[50px] w-auto shrink-0", draggable: false })] }), _jsx("div", { className: "text-sm", children: "The following individuals are prohibited from registering or participating in this online gaming platform." }), _jsx("div", { className: "w-full grow", children: _jsxs(Dialog.Description, { className: "space-y-4 text-sm", children: [_jsxs("ul", { className: "space-y-1.5 text-left", children: [_jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Persons below the legal gambling age of 21."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Any government official or employee directly involved in the operations of the government or its agencies."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Member of the Armed Forces of the Philippines, including the Army, Navy, Air Force and the Philippine National Police."] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Individuals listed in PAGCOR's National Database of Restricted Persons (NDRP)"] }), _jsxs("li", { className: "flex gap-4", children: [_jsx(Circle, {}), "Holders of a valid Gaming Employment License (GEL)"] })] }), !props.hasNoCheckbox ? (_jsxs(Checkbox.Root, { checked: isChecked, onCheckedChange: (e) => {
22
22
  setIsChecked(!!e.checked);
23
23
  }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I have read and agreed to ", props.siteName, ' ', _jsx("button", { type: "button", className: "text-brand-400 underline underline-offset-2", onClick: () => {
24
24
  setTermsOfUseOpen(true);
@@ -7,7 +7,7 @@ import { Button } from '../../ui/Button/index.js';
7
7
  import { Dialog } from '../../ui/Dialog/index.js';
8
8
  import { Portal } from '../../ui/Portal/index.js';
9
9
  export function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, }) {
10
- return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: responsibleGamingContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
11
- onCloseAction();
12
- }, children: "I Agree" })] }) })] }) }));
10
+ return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsx(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: "Responsible Gaming" }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: responsibleGamingContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx("div", { className: 'w-full', children: _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
11
+ onCloseAction();
12
+ }, children: "I Agree" }) })] }) })] }) }));
13
13
  }
@@ -10,8 +10,8 @@ import { Dialog } from '../../ui/Dialog/index.js';
10
10
  import { Portal } from '../../ui/Portal/index.js';
11
11
  export function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, }) {
12
12
  const disclaimerStore = useGlobalStore(useShallow((state) => state.disclaimer));
13
- return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: [siteName, " Terms of Use"] }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: termsOfUseContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
14
- onCloseAction();
15
- disclaimerStore.setOpen(true);
16
- }, children: "I Agree" })] }) })] }) }));
13
+ return (_jsx(Dialog.Root, { open: open, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-popover", children: _jsxs(Dialog.Content, { className: "flex h-full w-full flex-col items-start overflow-y-auto p-3xl lg:mx-auto lg:h-auto lg:w-[400px] lg:rounded-xl", children: [_jsx(Image, { src: logo, alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }), _jsxs("div", { className: "w-full grow", children: [_jsxs(Dialog.Title, { className: "text-brand-400 mt-3xl text-center text-lg font-semibold", children: [siteName, " Terms of Use"] }), _jsx(Dialog.Description, { className: "leading-2xl mt-xs text-sm", children: termsOfUseContent }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-3xl", children: [_jsx(Image, { src: pagcorLogo, alt: "", height: 75, width: 88, className: "h-[88px] w-auto shrink-0", draggable: false }), _jsx(Image, { src: responsibleGamingLogo, alt: "", height: 62, width: 186, className: "h-[62px] w-auto shrink-0", draggable: false })] })] }), _jsx("div", { className: "w-full", children: _jsx(Button, { type: "button", className: "mt-3", onClick: () => {
14
+ onCloseAction();
15
+ disclaimerStore.setOpen(true);
16
+ }, children: "I Agree" }) })] }) })] }) }));
17
17
  }
@@ -1,5 +1,5 @@
1
1
  import type { ComponentProps, ComponentType } from 'react';
2
- interface EmptyProps {
2
+ export interface EmptyProps {
3
3
  icon: ComponentType<ComponentProps<'svg'>>;
4
4
  title: string;
5
5
  message: string;
@@ -7,4 +7,3 @@ interface EmptyProps {
7
7
  className?: string;
8
8
  }
9
9
  export declare function Empty(props: EmptyProps): import("react/jsx-runtime").JSX.Element;
10
- export {};
@@ -79,7 +79,7 @@ export function GameLaunch() {
79
79
  : favoriteGame.id === globalStore.gameLaunch.details.game.id;
80
80
  });
81
81
  return (_jsxs(_Fragment, { children: [_jsx(Dialog.Root, { open: globalStore.gameLaunch.details.status !== 'WAITING' &&
82
- !cancelDisclosure.open, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsx(Portal, { children: _jsx(Dialog.Positioner, { className: "z-dialog fixed inset-0", children: _jsxs(Dialog.Content, { className: "ui-open:animate-dialog-in ui-closed:animate-dialog-out bg-bg-primary-alt relative size-full", children: [_jsx(Presence, { asChild: true, lazyMount: true, unmountOnExit: true, present: !maximizeDisclosure.open, children: _jsxs("section", { className: "ui-open:animate-slide-in-down ui-closed:animate-slide-out-down bg-bg-primary-alt z-1 absolute left-0 top-0 flex h-[3.25rem] w-full items-center gap-2 px-4 py-2", children: [_jsx(IconButton, { size: "xs", variant: "outline", onClick: () => {
82
+ !cancelDisclosure.open, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsx(Portal, { children: _jsx(Dialog.Positioner, { className: "z-dialog fixed inset-0", children: _jsxs(Dialog.Content, { className: "ui-open:animate-dialog-in ui-closed:animate-dialog-out bg-bg-primary-alt relative size-full overflow-y-auto", children: [_jsx(Presence, { asChild: true, lazyMount: true, unmountOnExit: true, present: !maximizeDisclosure.open, children: _jsxs("section", { className: "ui-open:animate-slide-in-down ui-closed:animate-slide-out-down bg-bg-primary-alt z-1 absolute left-0 top-0 flex h-[3.25rem] w-full items-center gap-2 px-4 py-2", children: [_jsx(IconButton, { size: "xs", variant: "outline", onClick: () => {
83
83
  if (globalStore.gameLaunch.details.status !== 'PLAYING') {
84
84
  endGameSession();
85
85
  return;
@@ -6,5 +6,5 @@ import { Portal } from '../../../ui/Portal/index.js';
6
6
  import { useJackpotsListItemContext } from './JackpotsListContext.js';
7
7
  export function JackpotsListItemRules(props) {
8
8
  const jackpot = useJackpotsListItemContext();
9
- return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? (_jsx("button", { type: "button", className: "text-button-tertiary-fg flex text-sm font-semibold", children: "Jackpot Rules" })) }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "mx-auto h-full w-full items-start lg:h-auto lg:w-[640px] lg:rounded-xl", children: [_jsxs("div", { className: "p-3xl", children: [_jsxs("div", { className: "mb-3 flex justify-between", children: [_jsx("div", { className: "bg-bg-tertiary border-border-primary flex h-12 w-12 items-center justify-center rounded-lg border", children: _jsx(Flag06Icon, { className: "text-text-tertiary-600 size-full p-3" }) }), _jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Jackpot Rules" }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-sm", children: "Terms and Conditions" })] }), _jsx("div", { className: "border-gray-800 border-t-1 pb-3", children: _jsx("div", { dangerouslySetInnerHTML: { __html: jackpot.description }, className: "px-3xl py-3" }) })] }) })] })] }));
9
+ return (_jsxs(Dialog.Root, { lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { asChild: true, children: props.children ?? (_jsx("button", { type: "button", className: "text-button-tertiary-fg flex text-sm font-semibold", children: "Jackpot Rules" })) }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "mx-auto h-full w-full items-start lg:h-auto lg:w-[640px] lg:rounded-xl overflow-y-auto", children: [_jsxs("div", { className: "p-3xl", children: [_jsxs("div", { className: "mb-3 flex justify-between", children: [_jsx("div", { className: "bg-bg-tertiary border-border-primary flex h-12 w-12 items-center justify-center rounded-lg border", children: _jsx(Flag06Icon, { className: "text-text-tertiary-600 size-full p-3" }) }), _jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsx("div", { className: "text-text-primary-900 text-lg font-semibold", children: "Jackpot Rules" }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-sm", children: "Terms and Conditions" })] }), _jsx("div", { className: "border-gray-800 border-t-1 pb-3", children: _jsx("div", { dangerouslySetInnerHTML: { __html: jackpot.description }, className: "px-3xl py-3" }) })] }) })] })] }));
10
10
  }
@@ -1,6 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { ChevronLeftIcon, XIcon } from '../../icons/index.js';
3
- import { Dialog, IconButton } from '../../ui/index.js';
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';
4
6
  export function Header() {
5
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" }) })] })) }));
6
8
  }
@@ -29,5 +29,5 @@ export function KYC(props) {
29
29
  const hasMissingData = !isBasicInfoCompleted || !isUploadCompleted || isRejected;
30
30
  return (_jsxs(_Fragment, { children: [_jsx(KYCContext, { value: kyc, children: _jsx(Dialog.Root, { open: globalStore.kyc.open && hasMissingData, onOpenChange: (details) => {
31
31
  globalStore.kyc.setOpen(details.open);
32
- }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: kyc.reset, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt lg:min-h-auto mx-auto min-h-full w-full lg:w-fit", children: [kyc.capturing === 'SELFIE' && _jsx(CaptureSelfie, {}), kyc.capturing === 'ID_DOCUMENT' && _jsx(CaptureIdDocument, {}), !kyc.capturing && (_jsxs("div", { className: "flex h-dvh w-full flex-col overflow-y-auto p-3xl sm:h-fit sm:overflow-auto lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 1 && _jsx(BasicInformation, {}), kyc.step === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }))] }) })] }) }) }), _jsx(KYCReminder, { ...props })] }));
32
+ }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: kyc.reset, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt lg:min-h-auto mx-auto min-h-full w-full lg:w-fit overflow-y-auto", children: [kyc.capturing === 'SELFIE' && _jsx(CaptureSelfie, {}), kyc.capturing === 'ID_DOCUMENT' && _jsx(CaptureIdDocument, {}), !kyc.capturing && (_jsxs("div", { className: "flex h-dvh w-full flex-col overflow-y-auto p-3xl sm:h-fit sm:overflow-auto lg:w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 1 && _jsx(BasicInformation, {}), kyc.step === 2 && _jsx(IdentityVerification, {}), kyc.step === 3 && _jsx(PersonalInformation, {})] }))] }) })] }) }) }), _jsx(KYCReminder, { ...props })] }));
33
33
  }
@@ -30,7 +30,7 @@ export function KYCReminder(props) {
30
30
  session?.status === 'authenticated' &&
31
31
  hasMissingData, onOpenChange: (details) => {
32
32
  globalStore.kycReminder.setOpen(details.open);
33
- }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-fit max-w-[calc(100dvw-1rem)] rounded-lg lg:max-w-[400px]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "bg-bg-warning-secondary mx-auto w-fit rounded-full p-2", children: _jsx(FileCheck02Icon, { className: "text-[#FEDF89]" }) }), _jsx("h2", { className: "mt-4 text-lg text-white", children: "Personal Verification" }), _jsxs("p", { className: "text-text-tertiary-600 mt-xs text-sm", children: ["All new users are required to complete identity verification to access the full range of ", props.siteName, " services, including withdrawals."] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "mt-3xl space-y-lg", children: [_jsx(Button, { onClick: () => {
33
+ }, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto h-fit max-w-[calc(100dvw-1rem)] rounded-lg lg:max-w-[400px] overflow-y-auto", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "bg-bg-warning-secondary mx-auto w-fit rounded-full p-2", children: _jsx(FileCheck02Icon, { className: "text-[#FEDF89]" }) }), _jsx("h2", { className: "mt-4 text-lg text-white", children: "Personal Verification" }), _jsxs("p", { className: "text-text-tertiary-600 mt-xs text-sm", children: ["All new users are required to complete identity verification to access the full range of ", props.siteName, " services, including withdrawals."] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "mt-3xl space-y-lg", children: [_jsx(Button, { onClick: () => {
34
34
  api.setOpen(false);
35
35
  globalStore.kyc.setOpen(true);
36
36
  }, children: "Verify Now" }), _jsx(Button, { type: "button", variant: "outline", fullWidth: true, onClick: () => api.setOpen(false), children: "Do it later" })] })) })] })] }) })] }) }));
@@ -1,8 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import Image from 'next/image';
3
- import { CheckIcon, XIcon } from '../../icons/index.js';
3
+ import { CheckIcon } from '../../icons/CheckIcon.js';
4
+ import { XIcon } from '../../icons/XIcon.js';
4
5
  import uploadId from '../../images/capture-id-banner.png';
5
- import { Button } from '../../ui/index.js';
6
+ import { Button } from '../../ui/Button/index.js';
6
7
  import { useKYCContext } from './KYCContext.js';
7
8
  export function Step1() {
8
9
  const context = useKYCContext();
@@ -1,8 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import Image from 'next/image';
3
- import { CheckIcon, XIcon } from '../../icons/index.js';
3
+ import { CheckIcon } from '../../icons/CheckIcon.js';
4
+ import { XIcon } from '../../icons/XIcon.js';
4
5
  import selfie from '../../images/capture-selfie-banner.png';
5
- import { Button } from '../../ui/index.js';
6
+ import { Button } from '../../ui/Button/index.js';
6
7
  import { useKYCContext } from './KYCContext.js';
7
8
  export function Step2() {
8
9
  const context = useKYCContext();
@@ -1,6 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { CheckIcon } from '../../icons/index.js';
3
- import { Button, Checkbox, Field } from '../../ui/index.js';
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';
4
6
  import { useKYCContext } from './KYCContext.js';
5
7
  export function Step3() {
6
8
  const context = useKYCContext();
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { CheckCircleIcon } from '../../icons/index.js';
3
- import { Button, Dialog } from '../../ui/index.js';
2
+ import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
3
+ import { Button } from '../../ui/Button/index.js';
4
+ import { Dialog } from '../../ui/Dialog/index.js';
4
5
  export function Step4() {
5
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" })) })] }));
6
7
  }
@@ -1,2 +1,6 @@
1
1
  import type { UseKYCReturn } from './useKYC';
2
- export declare const KYCContext: import("react").Context<UseKYCReturn>, useKYCContext: () => UseKYCReturn;
2
+ export declare const KYCContext: (props: {
3
+ value: UseKYCReturn;
4
+ } & {
5
+ children?: import("react").ReactNode | undefined;
6
+ }) => React.ReactNode, useKYCContext: () => UseKYCReturn;
@@ -0,0 +1 @@
1
+ export declare function loadFaceApiModels(): Promise<void>;
@@ -0,0 +1,9 @@
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
+ }
@@ -7,7 +7,7 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
7
7
  import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
8
8
  import { useMarkMessageAsReadMutation } from '../../client/hooks/useMarkMessageAsReadMutation.js';
9
9
  import { useMessageContext } from './MessageContext.js';
10
- import { getMessageIcon } from './utils.js';
10
+ import { MessageIcon } from './MessageIcon.js';
11
11
  export function Message() {
12
12
  const message = useMessageContext();
13
13
  const localeInfo = useLocaleInfo();
@@ -16,7 +16,6 @@ export function Message() {
16
16
  messages: ctx.messages,
17
17
  })));
18
18
  const markMessageAsReadMutation = useMarkMessageAsReadMutation();
19
- const Icon = getMessageIcon(message.icon);
20
19
  const handleViewMessage = async () => {
21
20
  globalStore.message.setData(message);
22
21
  globalStore.message.setOpen(true);
@@ -31,5 +30,5 @@ export function Message() {
31
30
  };
32
31
  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
32
  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))) }))] }));
33
+ }) }), !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(MessageIcon, { type: message.icon, className: "text-brand-400 size-5" }), _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
34
  }
@@ -1,2 +1,6 @@
1
1
  import type { Message } from '../../types';
2
- export declare const MessageContext: import("react").Context<Message>, useMessageContext: () => Message;
2
+ export declare const MessageContext: (props: {
3
+ value: Message;
4
+ } & {
5
+ children?: import("react").ReactNode | undefined;
6
+ }) => React.ReactNode, useMessageContext: () => Message;
@@ -6,13 +6,12 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
6
6
  import { XIcon } from '../../icons/XIcon.js';
7
7
  import { Dialog } from '../../ui/Dialog/index.js';
8
8
  import { Portal } from '../../ui/Portal/index.js';
9
- import { getMessageIcon } from './utils.js';
9
+ import { MessageIcon } from './MessageIcon.js';
10
10
  export const MessagePopup = () => {
11
11
  const globalStore = useGlobalStore(useShallow((ctx) => ({ message: ctx.message })));
12
- const Icon = getMessageIcon(globalStore.message.data?.icon ?? 'MESSAGE');
13
12
  return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.message.open, onOpenChange: ({ open }) => {
14
13
  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: {
14
+ }, 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(MessageIcon, { type: globalStore.message.data?.icon ?? 'INFO', className: "text-text-brand size-6" }) }), _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
15
  __html: globalStore.message.data?.content ?? '',
17
16
  } })] }), 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
17
  globalStore.message.setOpen(false);
@@ -92,7 +92,7 @@ export function MessageDetails() {
92
92
  const message = globalStore.message.data;
93
93
  return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: globalStore.message.open, onOpenChange: (details) => {
94
94
  globalStore.message.setOpen(details.open);
95
- }, 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 p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx("div", { className: "bg-bg-brand-secondary text-text-brand mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(MessageIcon, { type: message?.icon ?? 'INFO', className: "size-6" }) }), _jsx(Dialog.Title, { className: "mt-lg text-center text-lg font-semibold lg:mt-xl", children: message?.title }), message?.content && (_jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs pb-5 text-center text-sm", dangerouslySetInnerHTML: {
95
+ }, 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 p-3xl lg:min-w-[25rem] lg:max-w-[25rem] overflow-y-auto", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx("div", { className: "bg-bg-brand-secondary text-text-brand mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(MessageIcon, { type: message?.icon ?? 'INFO', className: "size-6" }) }), _jsx(Dialog.Title, { className: "mt-lg text-center text-lg font-semibold lg:mt-xl", children: message?.title }), message?.content && (_jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs pb-5 text-center text-sm", dangerouslySetInnerHTML: {
96
96
  __html: message?.content,
97
97
  } })), message?.image && (_jsx("div", { className: "mt-5 pb-5", children: _jsx(Image, { src: message?.image, alt: "", width: 400, height: 250, loading: "lazy", unoptimized: true, className: "h-auto w-full rounded-sm" }) })), message?.actions.length ? (_jsx("div", { className: "mt-3xl flex flex-col gap-2 text-center lg:mt-4xl", children: message?.actions.map((action, index) => (_jsx(Button, { asChild: true, children: _jsx(Link, { href: normalizeActionUrl(action.url, {
98
98
  transactionsPageUrl,
@@ -93,7 +93,7 @@ export function MessagesPopup() {
93
93
  }, disclosure.open || paused ? null : 2500);
94
94
  return (_jsx(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => {
95
95
  disclosure.setOpen(details.open);
96
- }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] 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 p-3xl lg:min-w-[25rem] lg:max-w-[25rem]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Carousel.Root, { page: index, onPageChange: (details) => {
96
+ }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+3)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+4)] 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 p-3xl lg:min-w-[25rem] lg:max-w-[25rem] overflow-y-auto", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs(Carousel.Root, { page: index, onPageChange: (details) => {
97
97
  setIndex(details.page);
98
98
  }, slideCount: messages.length, allowMouseDrag: true, autoplay: false, children: [_jsx(Carousel.ItemGroup, { children: messages.map((message, index) => (_jsxs(Carousel.Item, { index: index, className: "select-none", children: [_jsx("div", { className: "bg-bg-brand-secondary text-text-brand mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(MessageIcon, { type: message.icon, className: "size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold xl:mt-xl", children: message.title }), message.content && (_jsx("div", { dangerouslySetInnerHTML: { __html: message.content }, className: "text-text-secondary-700 mt-xs pb-5 text-center text-sm" })), message.image && (_jsx("div", { className: "mt-5 pb-5", children: _jsx(Image, { src: message.image, alt: "", width: 400, height: 250, loading: "lazy", unoptimized: true, className: "h-auto w-full rounded-sm" }) })), message.actions.length ? (_jsx("div", { className: "mt-3xl flex flex-col gap-2 text-center lg:mt-4xl", children: message.actions.map((action, index) => (_jsx(Button, { asChild: true, children: _jsx(Link, { href: normalizeActionUrl(action.url, {
99
99
  questsPageUrl,
@@ -0,0 +1,2 @@
1
+ import type { PromoProps } from './Promo';
2
+ export declare function PromoContent(props: PromoProps): import("react/jsx-runtime").JSX.Element;