@opexa/portal-components 0.0.1067 → 0.0.1068
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.
- package/dist/client/hooks/useApproveMemberVerification.js +3 -1
- package/dist/client/hooks/useCreateMemberVerificationMutation.js +3 -1
- package/dist/components/Account/Account.lazy.js +1 -1
- package/dist/components/KYC/KYCDefault/KYCVerificationStatus.lazy.js +4 -4
- package/dist/components/KYC/KYCNonPagCor/KYCVerificationStatus.lazy.js +4 -4
- package/dist/components/KYC/KYCReminder.lazy.js +12 -8
- package/dist/components/KYC/KycOpenOnHomeMount.js +6 -6
- package/dist/services/queries.d.ts +1 -1
- package/dist/services/queries.js +3 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/ui/AlertDialog/AlertDialog.d.ts +154 -154
- package/dist/ui/AlertDialog/alertDialog.recipe.d.ts +14 -14
- package/dist/ui/Badge/Badge.d.ts +12 -12
- package/dist/ui/Badge/badge.anatomy.d.ts +1 -1
- package/dist/ui/Badge/badge.recipe.d.ts +3 -3
- package/dist/ui/Checkbox/Checkbox.d.ts +23 -23
- package/dist/ui/Checkbox/checkbox.recipe.d.ts +3 -3
- package/dist/ui/Clipboard/Clipboard.d.ts +18 -18
- package/dist/ui/Clipboard/clipboard.recipe.d.ts +3 -3
- package/dist/ui/Collapsible/Collapsible.d.ts +20 -20
- package/dist/ui/Collapsible/collapsible.recipe.d.ts +5 -5
- package/dist/ui/Combobox/Combobox.d.ts +42 -42
- package/dist/ui/Combobox/combobox.recipe.d.ts +3 -3
- package/dist/ui/DatePicker/DatePicker.d.ts +72 -72
- package/dist/ui/DatePicker/datePicker.recipe.d.ts +3 -3
- package/dist/ui/Dialog/Dialog.d.ts +33 -33
- package/dist/ui/Dialog/dialog.recipe.d.ts +3 -3
- package/dist/ui/Drawer/Drawer.d.ts +33 -33
- package/dist/ui/Drawer/drawer.recipe.d.ts +3 -3
- package/dist/ui/Field/Field.d.ts +21 -21
- package/dist/ui/Field/field.recipe.d.ts +3 -3
- package/dist/ui/Menu/Menu.d.ts +198 -198
- package/dist/ui/Menu/menu.recipe.d.ts +11 -11
- package/dist/ui/NumberInput/NumberInput.d.ts +24 -24
- package/dist/ui/NumberInput/numberInput.recipe.d.ts +3 -3
- package/dist/ui/PasswordInput/PasswordInput.d.ts +18 -18
- package/dist/ui/PasswordInput/passwordInput.recipe.d.ts +3 -3
- package/dist/ui/PinInput/PinInput.d.ts +12 -12
- package/dist/ui/PinInput/pinInput.recipe.d.ts +3 -3
- package/dist/ui/Popover/Popover.d.ts +121 -121
- package/dist/ui/Popover/popover.recipe.d.ts +11 -11
- package/dist/ui/Progress/Progress.d.ts +27 -27
- package/dist/ui/Progress/progress.recipe.d.ts +3 -3
- package/dist/ui/QrCode/QrCode.d.ts +25 -25
- package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
- package/dist/ui/SegmentGroup/SegmentGroup.d.ts +18 -18
- package/dist/ui/SegmentGroup/segmentGroup.recipe.d.ts +3 -3
- package/dist/ui/Select/Select.d.ts +45 -45
- package/dist/ui/Select/select.recipe.d.ts +3 -3
- package/dist/ui/Table/Table.d.ts +21 -21
- package/dist/ui/Table/table.anatomy.d.ts +1 -1
- package/dist/ui/Table/table.recipe.d.ts +3 -3
- package/dist/ui/Tabs/Tabs.d.ts +15 -15
- package/dist/ui/Tabs/tabs.recipe.d.ts +3 -3
- package/dist/ui/Tooltip/Tooltip.d.ts +30 -30
- package/dist/ui/Tooltip/tooltip.recipe.d.ts +5 -5
- package/package.json +1 -1
|
@@ -100,7 +100,7 @@ function Profile() {
|
|
|
100
100
|
return 'danger';
|
|
101
101
|
}
|
|
102
102
|
};
|
|
103
|
-
return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: accountProps.avatar || avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", account?.id] }), accountProps.shouldShowAccountStatus && (_jsxs(Badge.Root, { colorScheme: getVerificationColorScheme(account?.
|
|
103
|
+
return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: accountProps.avatar || avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", account?.id] }), accountProps.shouldShowAccountStatus && (_jsxs(Badge.Root, { colorScheme: getVerificationColorScheme(account?.verification?.status), className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: capitalize(account?.verification?.status || '') })] }))] })] })] }));
|
|
104
104
|
}
|
|
105
105
|
function Links({ router, classNames, }) {
|
|
106
106
|
const accountProps = useAccountPropsContext();
|
|
@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import Image from 'next/image';
|
|
3
3
|
import { twMerge } from 'tailwind-merge';
|
|
4
4
|
import { useShallow } from 'zustand/shallow';
|
|
5
|
+
import { useAccountQuery } from '../../../client/hooks/useAccountQuery.js';
|
|
5
6
|
import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
|
|
6
|
-
import { useMemberVerificationQuery } from '../../../client/hooks/useMemberVerificationQuery.js';
|
|
7
7
|
import alertIcon from '../../../images/kyc-verification-status/alert-icon.png';
|
|
8
8
|
import bellIcon from '../../../images/kyc-verification-status/bell-icon.png';
|
|
9
9
|
import { Button } from '../../../ui/Button/index.js';
|
|
@@ -15,9 +15,9 @@ export function KYCVerificationStatus() {
|
|
|
15
15
|
kyc: ctx.kyc,
|
|
16
16
|
depositWithdrawal: ctx.depositWithdrawal,
|
|
17
17
|
})));
|
|
18
|
-
const
|
|
19
|
-
const status =
|
|
20
|
-
const isUnverified =
|
|
18
|
+
const accountQuery = useAccountQuery();
|
|
19
|
+
const status = accountQuery.data?.verification?.status ?? 'UNVERIFIED';
|
|
20
|
+
const isUnverified = accountQuery?.data === null ||
|
|
21
21
|
status === 'UNVERIFIED' ||
|
|
22
22
|
status === 'CREATED';
|
|
23
23
|
const icons = status === 'PENDING' ? bellIcon : alertIcon;
|
|
@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import Image from 'next/image';
|
|
3
3
|
import { twMerge } from 'tailwind-merge';
|
|
4
4
|
import { useShallow } from 'zustand/shallow';
|
|
5
|
+
import { useAccountQuery } from '../../../client/hooks/useAccountQuery.js';
|
|
5
6
|
import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
|
|
6
|
-
import { useMemberVerificationQuery } from '../../../client/hooks/useMemberVerificationQuery.js';
|
|
7
7
|
import alertIcon from '../../../images/kyc-verification-status/alert-icon.png';
|
|
8
8
|
import bellIcon from '../../../images/kyc-verification-status/bell-icon.png';
|
|
9
9
|
import { Button } from '../../../ui/Button/index.js';
|
|
@@ -15,9 +15,9 @@ export function KYCVerificationStatus() {
|
|
|
15
15
|
kyc: ctx.kyc,
|
|
16
16
|
depositWithdrawal: ctx.depositWithdrawal,
|
|
17
17
|
})));
|
|
18
|
-
const
|
|
19
|
-
const status =
|
|
20
|
-
const isUnverified =
|
|
18
|
+
const accountQuery = useAccountQuery();
|
|
19
|
+
const status = accountQuery.data?.verification?.status ?? 'UNVERIFIED';
|
|
20
|
+
const isUnverified = accountQuery?.data === null ||
|
|
21
21
|
status === 'UNVERIFIED' ||
|
|
22
22
|
status === 'CREATED';
|
|
23
23
|
const icons = status === 'PENDING' ? bellIcon : alertIcon;
|
|
@@ -53,8 +53,11 @@ export function KYCReminder(props) {
|
|
|
53
53
|
});
|
|
54
54
|
const { data: session, isLoading: sessionLoading } = useSessionQuery();
|
|
55
55
|
const { data: account, isLoading: accountLoading } = useAccountQuery();
|
|
56
|
-
const isPending = account?.
|
|
57
|
-
const
|
|
56
|
+
const isPending = account?.verification?.status === 'PENDING';
|
|
57
|
+
const isRejected = account?.verification?.status === 'REJECTED';
|
|
58
|
+
const isNotVerified = !account?.verification ||
|
|
59
|
+
account?.verification?.status === 'UNVERIFIED' ||
|
|
60
|
+
account?.verification?.status === 'CREATED';
|
|
58
61
|
const isVerificationLocked = account?.status === 'VERIFICATION_LOCKED';
|
|
59
62
|
const daysFromCreationToNow = useMemo(() => {
|
|
60
63
|
if (!account?.dateTimeCreated)
|
|
@@ -69,9 +72,7 @@ export function KYCReminder(props) {
|
|
|
69
72
|
!globalStore.kyc.open &&
|
|
70
73
|
!globalStore.kycVerificationRequired.open;
|
|
71
74
|
const isDisclaimerClosed = !globalStore.disclaimer.open && !globalStore.termsOfUse.open;
|
|
72
|
-
const isKYCStateRelevant = isNotVerified ||
|
|
73
|
-
(isPending && isVerificationLocked) ||
|
|
74
|
-
(isNotVerified && isVerificationLocked);
|
|
75
|
+
const isKYCStateRelevant = isNotVerified || isRejected || (isPending && isVerificationLocked);
|
|
75
76
|
return (_jsx(Dialog.Root, { open: isSessionReady &&
|
|
76
77
|
isAccountReady &&
|
|
77
78
|
isKYCReminderOpen &&
|
|
@@ -80,7 +81,10 @@ export function KYCReminder(props) {
|
|
|
80
81
|
if (!details.open && isVerificationLocked)
|
|
81
82
|
return;
|
|
82
83
|
globalStore.kycReminder.setOpen(details.open);
|
|
83
|
-
}, 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 &&
|
|
84
|
+
}, 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 &&
|
|
85
|
+
(isNotVerified || isRejected) &&
|
|
86
|
+
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 ??
|
|
87
|
+
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: () => {
|
|
84
88
|
api.setOpen(false);
|
|
85
89
|
globalStore.kyc.setOpen(true);
|
|
86
90
|
globalStore.kycReminder.setOpen(false);
|
|
@@ -103,7 +107,7 @@ export function KYCReminder(props) {
|
|
|
103
107
|
globalStore.account.setOpen(false);
|
|
104
108
|
globalStore.account__mobile.setOpen(false);
|
|
105
109
|
router.push('/');
|
|
106
|
-
}, children: "Log Out" })] })) })] })), isNotVerified &&
|
|
110
|
+
}, children: "Log Out" })] })) })] })), (isNotVerified || isRejected) &&
|
|
107
111
|
daysFromCreationToNow <= 3 &&
|
|
108
112
|
daysFromCreationToNow > 1 &&
|
|
109
113
|
!isVerificationLocked && (_jsxs(_Fragment, { children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _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: "JUST A FRIENDLY REMINDER" }), _jsxs("p", { className: `mt-xs text-sm text-text-tertiary-600 ${props.descriptionBgColor}`, children: ["Please complete your KYC information within", ' ', _jsx("span", { className: "font-semibold text-[#FF0000]", children: "3 days" }), ' ', "to avoid temporary lock on your account."] }), _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 ??
|
|
@@ -130,7 +134,7 @@ export function KYCReminder(props) {
|
|
|
130
134
|
globalStore.account.setOpen(false);
|
|
131
135
|
globalStore.account__mobile.setOpen(false);
|
|
132
136
|
router.push('/');
|
|
133
|
-
}, children: "Log Out" })] })) })] })] })), isNotVerified &&
|
|
137
|
+
}, children: "Log Out" })] })) })] })] })), (isNotVerified || isRejected) &&
|
|
134
138
|
!isVerificationLocked &&
|
|
135
139
|
!(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: () => {
|
|
136
140
|
api.setOpen(false);
|
|
@@ -11,14 +11,14 @@ export function KycOpenOnHomeMount(props) {
|
|
|
11
11
|
const { data: verification, isLoading: verificationLoading } = useMemberVerificationQuery();
|
|
12
12
|
const { data: account, isLoading: accountLoading } = useAccountQuery();
|
|
13
13
|
const isVerificationLocked = account?.status === 'VERIFICATION_LOCKED';
|
|
14
|
-
const isRejected = verification?.status === 'REJECTED';
|
|
15
|
-
const isUnverified = verification === null ||
|
|
16
|
-
verification?.status === 'UNVERIFIED' ||
|
|
17
|
-
verification?.status === 'CREATED';
|
|
14
|
+
const isRejected = account?.verification?.status === 'REJECTED';
|
|
15
|
+
const isUnverified = account?.verification === null ||
|
|
16
|
+
account?.verification?.status === 'UNVERIFIED' ||
|
|
17
|
+
account?.verification?.status === 'CREATED';
|
|
18
18
|
const isKycCompleted = account?.verified ||
|
|
19
19
|
verification?.sumsubVerified ||
|
|
20
|
-
verification?.status === 'APPROVED' ||
|
|
21
|
-
verification?.status === 'VERIFIED'; //add default value on null return
|
|
20
|
+
account?.verification?.status === 'APPROVED' ||
|
|
21
|
+
account?.verification?.status === 'VERIFIED'; //add default value on null return
|
|
22
22
|
useEffect(() => {
|
|
23
23
|
// If bypass is enabled, do nothing.
|
|
24
24
|
if (props.bypassKycCheck) {
|
|
@@ -78,7 +78,7 @@ export declare const MEMBER = "\n query Member {\n member {\n dateTimeL
|
|
|
78
78
|
/**
|
|
79
79
|
* _aka_ `Query.self`
|
|
80
80
|
*/
|
|
81
|
-
export declare const MEMBER_ACCOUNT = "\n query MemberAccount {\n memberAccount: self {\n ... on MemberAccount {\n id\n name\n status\n realName\n emailAddress\n mobileNumber\n birthDay\n verified\n verificationStatus\n nickName\n validId\n mobileNumberVerified\n mobileNumberVerificationRequired\n transactionPassword\n secretAnswerSubmitted\n dateTimeCreated\n dateTimeLastUpdated\n googleId\n facebookId\n branchCode\n cellxpertDetails {\n cxd\n dateTimeLastUpdated\n }\n }\n }\n }\n";
|
|
81
|
+
export declare const MEMBER_ACCOUNT = "\n query MemberAccount {\n memberAccount: self {\n ... on MemberAccount {\n id\n name\n status\n realName\n emailAddress\n mobileNumber\n birthDay\n verified\n verificationStatus\n verification {\n status\n }\n nickName\n validId\n mobileNumberVerified\n mobileNumberVerificationRequired\n transactionPassword\n secretAnswerSubmitted\n dateTimeCreated\n dateTimeLastUpdated\n googleId\n facebookId\n branchCode\n cellxpertDetails {\n cxd\n dateTimeLastUpdated\n }\n }\n }\n }\n";
|
|
82
82
|
export declare const MEMBER_VERIFICATION = "\n \n fragment FileFragment on File {\n id\n url\n status\n }\n\n\n query MemberVerification {\n memberAccount: self {\n ... on MemberAccount {\n verification {\n id\n status\n address\n permanentAddress\n sourceOfIncome\n natureOfWork\n nationality\n placeOfBirth\n idFrontImage {\n ...FileFragment\n }\n selfieImage {\n ...FileFragment\n }\n sumsubVerified\n }\n }\n }\n }\n";
|
|
83
83
|
export declare const REGISTER_MEMBER_ACCOUNT = "\n mutation RegisterMemberAccount(\n $input: RegisterMemberAccountInput!\n $referralCode: String\n $verificationCode: String\n $reCAPTCHAResponse: String\n ) {\n registerMemberAccount(\n input: $input\n referralCode: $referralCode\n verificationCode: $verificationCode\n reCAPTCHAResponse: $reCAPTCHAResponse\n ) {\n ... on AccountNameNotAvailableError {\n name: __typename\n message\n }\n ... on InvalidPlatformError {\n name: __typename\n message\n }\n ... on InvalidPlatformError {\n name: __typename\n message\n }\n ... on InvalidReCAPTCHAResponseError {\n name: __typename\n message\n }\n ... on InvalidSMSVerificationCodeError {\n name: __typename\n message\n }\n ... on MinimumAgeRequirementError {\n name: __typename\n message\n }\n ... on MobileNumberNotAvailableError {\n name: __typename\n message\n }\n ... on ReCAPTCHAVerificationFailedError {\n name: __typename\n message\n }\n }\n }\n";
|
|
84
84
|
export declare const REGISTER_MEMBER_ACCOUNT_BY_NAME = "\n mutation RegisterMemberAccountByName(\n $input: RegisterMemberAccountByNameInput!\n $reCAPTCHAResponse: String!\n ) {\n registerMemberAccountByName(\n input: $input\n reCAPTCHAResponse: $reCAPTCHAResponse\n ) {\n ... on AccountNameNotAvailableError {\n name: __typename\n message\n }\n ... on InvalidPlatformError {\n name: __typename\n message\n }\n ... on InvalidReCAPTCHAResponseError {\n name: __typename\n message\n }\n }\n }\n";
|
package/dist/services/queries.js
CHANGED
package/dist/types/index.d.ts
CHANGED
|
@@ -464,6 +464,9 @@ export interface MemberAccount {
|
|
|
464
464
|
mobileNumber?: string | null;
|
|
465
465
|
verified: boolean;
|
|
466
466
|
verificationStatus: MemberAccountVerificationStatus;
|
|
467
|
+
verification?: {
|
|
468
|
+
status: MemberVerificationStatus;
|
|
469
|
+
};
|
|
467
470
|
mobileNumberVerified?: boolean | null;
|
|
468
471
|
mobileNumberVerificationRequired?: boolean | null;
|
|
469
472
|
transactionPassword: boolean;
|