@opexa/portal-components 0.0.1088 → 0.0.1090
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.
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
2
3
|
import { useShallow } from 'zustand/shallow';
|
|
3
4
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
4
5
|
import { useMessagesQuery } from '../../client/hooks/useMessagesQuery.js';
|
|
@@ -15,12 +16,20 @@ function KYCAccountVerificationRequired_lazy({ isSkippable = false, }) {
|
|
|
15
16
|
kycVerificationRequired: s.kycAccountVerificationRequired,
|
|
16
17
|
disclaimer: s.disclaimer,
|
|
17
18
|
termsOfUse: s.termsOfUse,
|
|
19
|
+
responsibleGaming: s.responsibleGaming,
|
|
18
20
|
kycReminder: s.kycReminder,
|
|
19
21
|
kyc: s.kyc,
|
|
20
22
|
})));
|
|
21
|
-
|
|
23
|
+
// Guard against the race condition where KycOpenOnHomeMount fires its effect
|
|
24
|
+
const [isMounted, setIsMounted] = useState(false);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
setIsMounted(true);
|
|
27
|
+
}, []);
|
|
28
|
+
const isOpen = isMounted &&
|
|
29
|
+
globalStore.kycVerificationRequired.open &&
|
|
22
30
|
!globalStore.disclaimer.open &&
|
|
23
|
-
!globalStore.termsOfUse.open
|
|
31
|
+
!globalStore.termsOfUse.open &&
|
|
32
|
+
!globalStore.responsibleGaming.open;
|
|
24
33
|
return (_jsxs(Dialog.Root, { open: isOpen, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, 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: _jsx(Dialog.Content, { className: "mx-auto h-fit max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg bg-bg-primary lg:max-w-[400px]", children: _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-bg-brand-secondary p-2", children: _jsx(FileX02Icon, { className: "text-shadow-text-brand" }) }), _jsx("h2", { className: "mt-4 font-semibold text-lg", children: "Account Verification Rejected!" }), _jsxs("div", { className: "mt-xs flex flex-col gap-4 text-sm", children: [_jsx("span", { className: "text-text-tertiary-600", children: "We're sorry, but your verification was rejected for the following reasons:" }), rejectionMessage?.title && rejectionMessage?.content ? (_jsxs("span", { children: [_jsxs("b", { children: [rejectionMessage?.title, ":"] }), _jsx("span", { className: "text-text-tertiary-600", dangerouslySetInnerHTML: {
|
|
25
34
|
__html: rejectionMessage?.content ?? '',
|
|
26
35
|
} })] })) : (_jsxs("div", { className: "flex flex-col gap-4 text-center text-text-tertiary-600", children: [_jsx("span", { children: "Missing Documents: Some required documents were not uploaded. Please ensure you provide all necessary files as outlined in our guidelines." }), _jsx("span", { children: "Unclear Images: The documents uploaded were blurry or not legible. Please re-upload clear, high-quality images where all text and details are visible." }), _jsx("span", { children: "To resolve this, double-check the document requirements and re-submit. If you're unsure about the guidelines or need further clarification, feel free to contact our support team for assistance. We're here to help!" })] }))] }), _jsx(Button, { type: "button", className: "mt-lg", onClick: () => {
|
|
@@ -73,6 +73,7 @@ export function KYCReminder(props) {
|
|
|
73
73
|
!globalStore.kycVerificationRequired.open;
|
|
74
74
|
const isDisclaimerClosed = !globalStore.disclaimer.open && !globalStore.termsOfUse.open;
|
|
75
75
|
const isKYCStateRelevant = isNotVerified ||
|
|
76
|
+
isRejected ||
|
|
76
77
|
(isPending && isVerificationLocked) ||
|
|
77
78
|
(isNotVerified && isVerificationLocked);
|
|
78
79
|
return (_jsx(Dialog.Root, { open: isSessionReady &&
|
|
@@ -83,10 +84,7 @@ export function KYCReminder(props) {
|
|
|
83
84
|
if (!details.open && isVerificationLocked)
|
|
84
85
|
return;
|
|
85
86
|
globalStore.kycReminder.setOpen(details.open);
|
|
86
|
-
}, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto h-fit max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg bg-bg-primary lg:max-w-[400px]", children: [!isPending &&
|
|
87
|
-
(isNotVerified || isRejected) &&
|
|
88
|
-
isVerificationLocked && (_jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto mb-4 w-fit rounded-full p-2", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "Temporarily Locked" }), _jsx("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: "Your account has been locked due to incomplete verification. Please complete your verification to restore full access." }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo?.logo ?? pagcorLogo, alt: "PAGCOR logo", height: 88, width: 88, className: `h-[88px] w-auto shrink-0 ${props.pagcorLogo?.styles ?? ''}`, draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo?.logo ??
|
|
89
|
-
responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: `h-[50px] w-auto shrink-0 ${props.responsibleGamingLogo?.styles ?? ''}`, draggable: false, unoptimized: true })] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "mt-6 space-y-lg", children: [_jsx(Button, { onClick: () => {
|
|
87
|
+
}, closeOnEscape: false, closeOnInteractOutside: false, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto h-fit max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg bg-bg-primary lg:max-w-[400px]", children: [!isPending && isNotVerified && isVerificationLocked && (_jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto mb-4 w-fit rounded-full p-2", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "Temporarily Locked" }), _jsx("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: "Your account has been locked due to incomplete verification. Please complete your verification to restore full access." }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo?.logo ?? pagcorLogo, alt: "PAGCOR logo", height: 88, width: 88, className: `h-[88px] w-auto shrink-0 ${props.pagcorLogo?.styles ?? ''}`, draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo?.logo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: `h-[50px] w-auto shrink-0 ${props.responsibleGamingLogo?.styles ?? ''}`, draggable: false, unoptimized: true })] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "mt-6 space-y-lg", children: [_jsx(Button, { onClick: () => {
|
|
90
88
|
api.setOpen(false);
|
|
91
89
|
globalStore.kyc.setOpen(true);
|
|
92
90
|
globalStore.kycReminder.setOpen(false);
|
|
@@ -136,16 +134,17 @@ export function KYCReminder(props) {
|
|
|
136
134
|
globalStore.account.setOpen(false);
|
|
137
135
|
globalStore.account__mobile.setOpen(false);
|
|
138
136
|
router.push('/');
|
|
139
|
-
}, children: "Log Out" })] })) })] })] })), isNotVerified
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
137
|
+
}, children: "Log Out" })] })) })] })] })), isNotVerified ||
|
|
138
|
+
(isRejected &&
|
|
139
|
+
!isVerificationLocked &&
|
|
140
|
+
!(daysFromCreationToNow <= 3 && daysFromCreationToNow > 1) && (_jsxs(_Fragment, { children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-bg-primary p-2", children: _jsx(FileCheck02Icon, { className: "text-[#FEDF89]" }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "Personal Verification" }), _jsxs("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, 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: () => {
|
|
141
|
+
api.setOpen(false);
|
|
142
|
+
globalStore.kyc.setOpen(true);
|
|
143
|
+
globalStore.kycReminder.setOpen(false);
|
|
144
|
+
}, children: "Verify Now" }), _jsx(Button, { type: "button", variant: "outline", fullWidth: true, onClick: () => {
|
|
145
|
+
api.setOpen(false);
|
|
146
|
+
globalStore.responsibleGamingReminder.setOpen(true);
|
|
147
|
+
}, children: "Do it later" })] })) })] })] }))), isPending && isVerificationLocked && (_jsxs("div", { className: "p-3xl text-center", children: [_jsx("div", { className: "mx-auto mb-4 w-fit rounded-full bg-bg-primary p-2", children: _jsx(Image, { src: props.logo, alt: `${props.siteName} logo`, width: 200, height: 100, className: "mx-auto h-auto w-[120px]", draggable: false }) }), _jsx("h2", { className: `mt-4 font-semibold text-lg ${props.titleBgColor}`, children: "VERIFICATION IN PROGRESS" }), _jsx("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: "Your account is verification-locked. Please wait for approval to regain full access to this platform." }), _jsxs("div", { className: "mt-6 flex w-full items-center justify-center gap-3xl", children: [_jsx(Image, { src: props.pagcorLogo?.logo ?? pagcorLogo, alt: "PAGCOR logo", height: 88, width: 88, className: `h-[88px] w-auto shrink-0 ${props.pagcorLogo?.styles ?? ''}`, draggable: false, unoptimized: true }), _jsx(Image, { src: props.responsibleGamingLogo?.logo ?? responsibleGamingLogo, alt: "Responsible Gaming logo", height: 50, width: 186, className: `h-[50px] w-auto shrink-0 ${props.responsibleGamingLogo?.styles ?? ''}`, draggable: false, unoptimized: true })] }), _jsx("div", { className: "mt-6 space-y-lg", children: _jsx(Button, { className: "bg-transparent text-text-brand-primary-600", onClick: async () => {
|
|
149
148
|
if (Capacitor.isNativePlatform()) {
|
|
150
149
|
const session = await getQueryClient().fetchQuery({
|
|
151
150
|
queryKey: getSessionQueryKey(),
|
|
@@ -14,5 +14,6 @@ export interface PromoProps {
|
|
|
14
14
|
flags?: string;
|
|
15
15
|
}[];
|
|
16
16
|
};
|
|
17
|
+
useEndOfDay?: boolean;
|
|
17
18
|
}
|
|
18
|
-
export declare function Promo__client(props: PromoProps): import("react/jsx-runtime").JSX.Element | null;
|
|
19
|
+
export declare function Promo__client({ useEndOfDay, ...props }: PromoProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,21 +1,20 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
import { format } from 'date-fns';
|
|
3
|
+
import { endOfDay } from 'date-fns';
|
|
5
4
|
import { isString } from 'lodash-es';
|
|
6
5
|
import Image from 'next/image';
|
|
7
6
|
import Link from 'next/link';
|
|
7
|
+
import { useMemo } from 'react';
|
|
8
8
|
import { twMerge } from 'tailwind-merge';
|
|
9
9
|
import { useShallow } from 'zustand/shallow';
|
|
10
10
|
import { useAvailablePromosQuery } from '../../client/hooks/useAvailablePromosQuery.js';
|
|
11
11
|
import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
|
|
12
|
-
import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
|
|
13
12
|
import { usePromoQuery } from '../../client/hooks/usePromoQuery.js';
|
|
13
|
+
import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
|
|
14
14
|
import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
|
|
15
15
|
import { Button } from '../../ui/Button/index.js';
|
|
16
16
|
import { Prose } from '../../ui/Prose/index.js';
|
|
17
|
-
export function Promo__client(props) {
|
|
18
|
-
const localeInfo = useLocaleInfo();
|
|
17
|
+
export function Promo__client({ useEndOfDay = false, ...props }) {
|
|
19
18
|
const availablePromosQuery = useAvailablePromosQuery();
|
|
20
19
|
const availablePromos = availablePromosQuery.data ?? [];
|
|
21
20
|
const promoQuery = usePromoQuery(props.id);
|
|
@@ -24,6 +23,20 @@ export function Promo__client(props) {
|
|
|
24
23
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
25
24
|
depositWithdrawal: ctx.depositWithdrawal,
|
|
26
25
|
})));
|
|
26
|
+
const targetDateTime = useMemo(() => {
|
|
27
|
+
if (promo?.daysToClear) {
|
|
28
|
+
const date = new Date(promo.dateTimeCreated);
|
|
29
|
+
date.setDate(date.getDate() + Number(promo.daysToClear));
|
|
30
|
+
return useEndOfDay ? endOfDay(date) : date;
|
|
31
|
+
}
|
|
32
|
+
return new Date(promo?.activationEndDateTime ?? 0);
|
|
33
|
+
}, [
|
|
34
|
+
promo?.dateTimeCreated,
|
|
35
|
+
promo?.daysToClear,
|
|
36
|
+
promo?.activationEndDateTime,
|
|
37
|
+
useEndOfDay,
|
|
38
|
+
]);
|
|
39
|
+
const remainingTime = useRemainingTime(targetDateTime);
|
|
27
40
|
if (!promo)
|
|
28
41
|
return null;
|
|
29
42
|
const classNames = isString(props.className)
|
|
@@ -48,7 +61,5 @@ export function Promo__client(props) {
|
|
|
48
61
|
return (_jsxs("div", { className: classNames.root, children: [_jsxs(Link, { href: props.viewAllPromosUrl ?? '/promos', className: "flex w-fit items-center gap-lg font-semibold text-button-tertiary-fg text-lg", children: [_jsx(ChevronLeftIcon, { className: "size-6" }), "Back to all Promotions"] }), promo.banner.url && (_jsx(Image, { src: promo.banner.url, alt: "", width: 1024, height: 600, priority: true, unoptimized: true, className: "mt-xl h-auto w-full rounded-xl lg:mt-6" })), claimable && (_jsx(Button, { className: "mt-xl lg:mt-6", onClick: () => {
|
|
49
62
|
globalStore.depositWithdrawal.setOpen(true);
|
|
50
63
|
globalStore.depositWithdrawal.setPromo(promo.id);
|
|
51
|
-
}, children: "Deposit Now" })), _jsx("h1", { className: "mt-xl font-semibold text-2xl lg:mt-6 lg:text-3xl", children: promo.name }), _jsxs("p", { className: "mt-xl text-text-secondary-700 lg:mt-6", children: ["Ends",
|
|
52
|
-
in: tz(localeInfo.timezone),
|
|
53
|
-
})] }), _jsx(Prose, { className: twMerge('mt-2xl lg:mt-6', classNames.promoDescription), dangerouslySetInnerHTML: { __html: descriptionHtml } })] }));
|
|
64
|
+
}, children: "Deposit Now" })), _jsx("h1", { className: "mt-xl font-semibold text-2xl lg:mt-6 lg:text-3xl", children: promo.name }), _jsxs("p", { className: "mt-xl text-text-secondary-700 lg:mt-6", children: ["Ends ", remainingTime.toString()] }), _jsx(Prose, { className: twMerge('mt-2xl lg:mt-6', classNames.promoDescription), dangerouslySetInnerHTML: { __html: descriptionHtml } })] }));
|
|
54
65
|
}
|