@opexa/portal-components 0.0.363 → 0.0.365
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/components/DepositWithdrawal/Deposit/PisoPayDeposit/PisoPayDeposit.js +8 -9
- package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositForm.js +8 -9
- package/dist/components/DepositWithdrawal/HasPendingBonuses.js +1 -1
- package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js +24 -50
- package/dist/components/DigitainLauncher/Loading.js +1 -1
- package/dist/components/Disclaimer/ResponsibleGaming.d.ts +10 -0
- package/dist/components/Disclaimer/ResponsibleGaming.js +13 -0
- package/dist/components/Disclaimer/TermsOfUse.d.ts +11 -0
- package/dist/components/Disclaimer/TermsOfUse.js +13 -0
- package/dist/components/FeatureFlag/FeatureFlag.d.ts +1 -0
- package/dist/components/FeatureFlag/FeatureFlag.js +29 -0
- package/dist/components/FeatureFlag/index.d.ts +1 -0
- package/dist/components/FeatureFlag/index.js +1 -0
- package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +184 -184
- package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +184 -184
- package/dist/components/KYC/AutoOpen.d.ts +1 -0
- package/dist/components/KYC/AutoOpen.js +40 -0
- package/dist/components/KYC/BasicInformation.js +1 -1
- package/dist/components/KYC/CaptureIdDocument.d.ts +1 -0
- package/dist/components/KYC/CaptureIdDocument.js +219 -0
- package/dist/components/KYC/CaptureSelfie.d.ts +1 -0
- package/dist/components/KYC/CaptureSelfie.js +285 -0
- package/dist/components/KYC/DisplayImage.d.ts +5 -0
- package/dist/components/KYC/DisplayImage.js +8 -0
- package/dist/components/KYC/FileUpload.d.ts +10 -0
- package/dist/components/KYC/FileUpload.js +72 -0
- package/dist/components/KYC/IdentityVerification.js +1 -1
- package/dist/components/KYC/KYC.lazy.js +1 -1
- package/dist/components/KYC/NoCameraError.d.ts +7 -0
- package/dist/components/KYC/NoCameraError.js +6 -0
- package/dist/components/KYC/PersonOverlayDesktop.d.ts +7 -0
- package/dist/components/KYC/PersonOverlayDesktop.js +9 -0
- package/dist/components/KYC/PersonalInformation.js +1 -1
- package/dist/components/KYC/backup/Header.d.ts +1 -0
- package/dist/components/KYC/backup/Header.js +8 -0
- package/dist/components/KYC/backup/Indicator.d.ts +1 -0
- package/dist/components/KYC/backup/Indicator.js +9 -0
- package/dist/components/KYC/backup/KYC.d.ts +1 -0
- package/dist/components/KYC/backup/KYC.js +14 -0
- package/dist/components/KYC/backup/KYC.lazy.d.ts +1 -0
- package/dist/components/KYC/backup/KYC.lazy.js +26 -0
- package/dist/components/KYC/backup/KYCContext.d.ts +6 -0
- package/dist/components/KYC/backup/KYCContext.js +2 -0
- package/dist/components/KYC/backup/Step1.d.ts +1 -0
- package/dist/components/KYC/backup/Step1.js +13 -0
- package/dist/components/KYC/backup/Step2.d.ts +1 -0
- package/dist/components/KYC/backup/Step2.js +13 -0
- package/dist/components/KYC/backup/Step3.d.ts +1 -0
- package/dist/components/KYC/backup/Step3.js +13 -0
- package/dist/components/KYC/backup/Step4.d.ts +1 -0
- package/dist/components/KYC/backup/Step4.js +7 -0
- package/dist/components/KYC/backup/useKYC.d.ts +10 -0
- package/dist/components/KYC/backup/useKYC.js +8 -0
- package/dist/components/KYC/loadModels.d.ts +1 -0
- package/dist/components/KYC/loadModels.js +9 -0
- package/dist/components/KYC/utils.d.ts +9 -0
- package/dist/components/KYC/utils.js +79 -0
- package/dist/components/Messages/Message.d.ts +1 -0
- package/dist/components/Messages/Message.js +35 -0
- package/dist/components/Messages/MessageContext.d.ts +6 -0
- package/dist/components/Messages/MessageContext.js +2 -0
- package/dist/components/Messages/MessagePopup.d.ts +1 -0
- package/dist/components/Messages/MessagePopup.js +20 -0
- package/dist/components/Messages/MessageTrigger.d.ts +8 -0
- package/dist/components/Messages/MessageTrigger.js +19 -0
- package/dist/components/Quests/CountdownTimer.d.ts +15 -0
- package/dist/components/Quests/CountdownTimer.js +33 -0
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts +4 -0
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js +78 -0
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.d.ts +8 -0
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js +9 -0
- package/dist/components/Quests/OnboardingQuest/OnboardingQuest.d.ts +4 -0
- package/dist/components/Quests/OnboardingQuest/OnboardingQuest.js +4 -0
- package/dist/components/Quests/WageringQuest/WageringQuest.d.ts +4 -0
- package/dist/components/Quests/WageringQuest/WageringQuest.js +20 -0
- package/dist/components/Quests/WageringQuest/WageringQuestModal.d.ts +9 -0
- package/dist/components/Quests/WageringQuest/WageringQuestModal.js +9 -0
- package/dist/components/SignIn/utils.d.ts +8 -0
- package/dist/components/SignIn/utils.js +26 -0
- package/dist/components/SignUp/SignUp.lazy.d.ts +12 -0
- package/dist/components/SignUp/SignUp.lazy.js +18 -0
- package/dist/components/SignUp/SignUpContext.d.ts +6 -0
- package/dist/components/SignUp/SignUpContext.js +2 -0
- package/dist/components/SignUp/SignUpDefault/SignUp.lazy.d.ts +17 -0
- package/dist/components/SignUp/SignUpDefault/SignUp.lazy.js +18 -0
- package/dist/components/SignUp/SignUpDefault/SignUpContext.d.ts +6 -0
- package/dist/components/SignUp/SignUpDefault/SignUpContext.js +2 -0
- package/dist/components/SignUp/SignUpDefault/SignUpForm.d.ts +1 -0
- package/dist/components/SignUp/SignUpDefault/SignUpForm.js +310 -0
- package/dist/components/SignUp/SignUpForm.d.ts +1 -0
- package/dist/components/SignUp/SignUpForm.js +284 -0
- package/dist/components/SignUp/SignUpKYC/CaptureIdDocument.d.ts +1 -0
- package/dist/components/SignUp/SignUpKYC/CaptureIdDocument.js +198 -0
- package/dist/components/SignUp/SignUpKYC/CaptureSelfie.d.ts +1 -0
- package/dist/components/SignUp/SignUpKYC/CaptureSelfie.js +251 -0
- package/dist/components/SignUp/SignUpKYC/ImageUploader.d.ts +10 -0
- package/dist/components/SignUp/SignUpKYC/ImageUploader.js +42 -0
- package/dist/components/SignUp/SignUpKYC/PersonOverlayDesktop.d.ts +7 -0
- package/dist/components/SignUp/SignUpKYC/PersonOverlayDesktop.js +9 -0
- package/dist/components/SignUp/SignUpKYC/SignUpFormKYC.d.ts +1 -0
- package/dist/components/SignUp/SignUpKYC/SignUpFormKYC.js +464 -0
- package/dist/components/SignUp/SignUpKYC/useImageUploader.d.ts +11 -0
- package/dist/components/SignUp/SignUpKYC/useImageUploader.js +20 -0
- package/dist/components/SignUp/SignUpKYC/utils.d.ts +9 -0
- package/dist/components/SignUp/SignUpKYC/utils.js +79 -0
- package/dist/components/SignUp/SignUpPagcor/CaptureIdDocument.d.ts +1 -0
- package/dist/components/SignUp/SignUpPagcor/CaptureIdDocument.js +198 -0
- package/dist/components/SignUp/SignUpPagcor/CaptureSelfie.d.ts +1 -0
- package/dist/components/SignUp/SignUpPagcor/CaptureSelfie.js +251 -0
- package/dist/components/SignUp/SignUpPagcor/ImageUploader.d.ts +10 -0
- package/dist/components/SignUp/SignUpPagcor/ImageUploader.js +41 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpFormPagcor.d.ts +1 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpFormPagcor.js +429 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpPagcor.lazy.d.ts +13 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpPagcor.lazy.js +26 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpPagcorContext.d.ts +7 -0
- package/dist/components/SignUp/SignUpPagcor/SignUpPagcorContext.js +2 -0
- package/dist/components/SignUp/SignUpPagcor/useImageUploader.d.ts +11 -0
- package/dist/components/SignUp/SignUpPagcor/useImageUploader.js +20 -0
- package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.module.css +184 -184
- package/dist/components/Tournaments/TournamentsList/TournamentItem.module.css +184 -184
- package/dist/components/TransactionRecords/WithdrawalRecordsTable.js +2 -4
- package/dist/components/shared/IdDocumentField.client.d.ts +25 -0
- package/dist/components/shared/IdDocumentField.client.js +204 -0
- package/dist/components/shared/IdDocumentField.d.ts +2 -0
- package/dist/components/shared/IdDocumentField.js +11 -0
- package/dist/components/shared/SelfieField.client.d.ts +20 -0
- package/dist/components/shared/SelfieField.client.js +327 -0
- package/dist/components/shared/SelfieField.d.ts +2 -0
- package/dist/components/shared/SelfieField.js +11 -0
- package/dist/constants/BranchCode.d.ts +4 -0
- package/dist/constants/BranchCode.js +42 -0
- package/dist/constants/Branches.d.ts +2 -0
- package/dist/constants/Branches.js +42 -0
- package/dist/handlers/postTransformIdFrontImage.d.ts +3 -0
- package/dist/handlers/postTransformIdFrontImage.js +67 -0
- package/dist/handlers/postTransformSelfieImage.d.ts +3 -0
- package/dist/handlers/postTransformSelfieImage.js +71 -0
- package/dist/handlers.d.ts +43 -0
- package/dist/handlers.js +297 -0
- package/dist/icons/BellRingIcon.d.ts +2 -0
- package/dist/icons/BellRingIcon.js +4 -0
- package/dist/services/queries.js +2662 -2662
- package/dist/services/wallet.d.ts +1 -0
- package/dist/styles/theme.css +706 -706
- package/dist/third-parties/FacebookPixel/FacebookPixel.d.ts +4 -0
- package/dist/third-parties/FacebookPixel/FacebookPixel.js +4 -0
- package/dist/third-parties/FacebookPixel/api.d.ts +0 -0
- package/dist/third-parties/FacebookPixel/api.js +1 -0
- package/dist/third-parties/FacebookPixel/index.d.ts +1 -0
- package/dist/third-parties/FacebookPixel/index.js +1 -0
- package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.d.ts +4 -0
- package/dist/third-parties/GoogleRecaptcha/GoogleRecaptcha.js +4 -0
- package/dist/third-parties/GoogleRecaptcha/api.d.ts +0 -0
- package/dist/third-parties/GoogleRecaptcha/api.js +1 -0
- package/dist/third-parties/GoogleRecaptcha/index.d.ts +1 -0
- package/dist/third-parties/GoogleRecaptcha/index.js +1 -0
- package/dist/third-parties/index.d.ts +2 -0
- package/dist/third-parties/index.js +2 -0
- package/dist/ui/Menu/Menu.d.ts +90 -90
- package/dist/ui/Menu/menu.recipe.d.ts +5 -5
- package/dist/ui/QrCode/QrCode.d.ts +25 -25
- package/dist/ui/QrCode/qrCode.recipe.d.ts +5 -5
- package/dist/utils/dataUrlToBlob.d.ts +1 -0
- package/dist/utils/dataUrlToBlob.js +11 -0
- package/dist/utils/gamesAvailable3pmTo3am.d.ts +1 -0
- package/dist/utils/gamesAvailable3pmTo3am.js +1 -0
- package/dist/utils/getGameName.d.ts +1 -0
- package/dist/utils/getGameName.js +6 -0
- package/dist/utils/isBetween3amAnd3pm.d.ts +1 -0
- package/dist/utils/isBetween3amAnd3pm.js +5 -0
- package/dist/utils/resizeImageSize.d.ts +2 -0
- package/dist/utils/resizeImageSize.js +11 -0
- package/package.json +161 -161
- package/dist/components/AccountInfo/GoogleDisconnect.d.ts +0 -7
- package/dist/components/AccountInfo/GoogleDisconnect.js +0 -11
- package/dist/icons/LinkBrokenIcon.d.ts +0 -2
- package/dist/icons/LinkBrokenIcon.js +0 -4
|
@@ -15,15 +15,12 @@ import { useDisclosure } from '../../../../client/hooks/useDisclosure.js';
|
|
|
15
15
|
import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
|
|
16
16
|
import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
|
|
17
17
|
import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
|
|
18
|
-
import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
|
|
19
|
-
import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
|
|
20
18
|
import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
|
|
21
19
|
import { XIcon } from '../../../../icons/XIcon.js';
|
|
22
20
|
import { ObjectType } from '../../../../services/ObjectType.js';
|
|
23
21
|
import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
|
|
24
22
|
import { Button } from '../../../../ui/Button/index.js';
|
|
25
23
|
import { Field } from '../../../../ui/Field/index.js';
|
|
26
|
-
import { NumberInput } from '../../../../ui/NumberInput/index.js';
|
|
27
24
|
import { Portal } from '../../../../ui/Portal/index.js';
|
|
28
25
|
import { parseDecimal } from '../../../../utils/parseDecimal.js';
|
|
29
26
|
import { AmountChoices } from '../../AmountChoices.js';
|
|
@@ -89,6 +86,13 @@ export function PisoPayDeposit() {
|
|
|
89
86
|
.object({
|
|
90
87
|
amount: z.string().superRefine((val, ctx) => {
|
|
91
88
|
const n = parseDecimal(val, 0);
|
|
89
|
+
if (val.includes('.')) {
|
|
90
|
+
ctx.addIssue({
|
|
91
|
+
code: z.ZodIssueCode.custom,
|
|
92
|
+
message: 'Amount must be a whole number',
|
|
93
|
+
});
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
92
96
|
if (n < minimumAmount) {
|
|
93
97
|
ctx.addIssue({
|
|
94
98
|
type: 'number',
|
|
@@ -160,12 +164,7 @@ export function PisoPayDeposit() {
|
|
|
160
164
|
promo: data.promo,
|
|
161
165
|
}),
|
|
162
166
|
});
|
|
163
|
-
}), noValidate: true, children: [
|
|
164
|
-
o.field.onChange(details.value);
|
|
165
|
-
}, formatOptions: {
|
|
166
|
-
maximumFractionDigits: 2,
|
|
167
|
-
minimumFractionDigits: 0,
|
|
168
|
-
}, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to deposit" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
|
|
167
|
+
}), noValidate: true, children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Enter amount you want to withdraw" }), _jsx(Field.Input, { type: "number", ...form.register('amount') }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount').trim().replace(/,/g, ''), 0), onChange: (value) => {
|
|
169
168
|
form.setValue('amount', value.toString(), {
|
|
170
169
|
shouldTouch: true,
|
|
171
170
|
shouldDirty: true,
|
|
@@ -9,11 +9,8 @@ import { useAvailablePromosQuery } from '../../../../client/hooks/useAvailablePr
|
|
|
9
9
|
import { useDepositsCountQuery } from '../../../../client/hooks/useDepositsCountQuery.js';
|
|
10
10
|
import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
|
|
11
11
|
import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
|
|
12
|
-
import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
|
|
13
|
-
import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
|
|
14
12
|
import { Button } from '../../../../ui/Button/index.js';
|
|
15
13
|
import { Field } from '../../../../ui/Field/index.js';
|
|
16
|
-
import { NumberInput } from '../../../../ui/NumberInput/index.js';
|
|
17
14
|
import { parseDecimal } from '../../../../utils/parseDecimal.js';
|
|
18
15
|
import { AmountChoices } from '../../AmountChoices.js';
|
|
19
16
|
import { useDepositWithdrawalPropsContext } from '../../DepositWithdrawalContext.js';
|
|
@@ -40,6 +37,13 @@ export function QRPHDepositForm() {
|
|
|
40
37
|
.object({
|
|
41
38
|
amount: z.string().superRefine((val, ctx) => {
|
|
42
39
|
const n = parseDecimal(val, 0);
|
|
40
|
+
if (val.includes('.')) {
|
|
41
|
+
ctx.addIssue({
|
|
42
|
+
code: z.ZodIssueCode.custom,
|
|
43
|
+
message: 'Amount must be a whole number',
|
|
44
|
+
});
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
43
47
|
if (n < minimumAmount) {
|
|
44
48
|
ctx.addIssue({
|
|
45
49
|
type: 'number',
|
|
@@ -99,12 +103,7 @@ export function QRPHDepositForm() {
|
|
|
99
103
|
}, [form, minimumAmount]);
|
|
100
104
|
if (context.view !== 'form')
|
|
101
105
|
return null;
|
|
102
|
-
return (_jsxs("form", { onSubmit: form.handleSubmit(context.generateQRCode), noValidate: true, children: [
|
|
103
|
-
o.field.onChange(details.value);
|
|
104
|
-
}, formatOptions: {
|
|
105
|
-
maximumFractionDigits: 2,
|
|
106
|
-
minimumFractionDigits: 0,
|
|
107
|
-
}, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to deposit" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
|
|
106
|
+
return (_jsxs("form", { onSubmit: form.handleSubmit(context.generateQRCode), noValidate: true, children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Enter amount you want to withdraw" }), _jsx(Field.Input, { type: "number", ...form.register('amount') }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
|
|
108
107
|
form.setValue('amount', value.toString(), {
|
|
109
108
|
shouldTouch: true,
|
|
110
109
|
shouldDirty: true,
|
|
@@ -14,7 +14,7 @@ function HasPendingBonuses(props) {
|
|
|
14
14
|
hasPendingBonusStore.setOpen(details.open);
|
|
15
15
|
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "z-popover" }), _jsx(Dialog.Positioner, { className: "z-tooltip flex items-center justify-center", children: _jsxs(Dialog.Content, { className: twMerge('mx-auto h-fit w-[90vw] overflow-y-auto rounded-2xl bg-bg-primary-alt p-3xl pb-4xl text-center lg:h-auto lg:w-[400px] lg:rounded-xl', props.className), children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx("div", { className: "mx-auto mb-xl flex w-fit items-center justify-center rounded-full bg-bg-warning-secondary p-3", children: _jsx(AlertTriangleIcon, { className: "size-6 text-[#FEDF89]" }) }), _jsx("h1", { className: "font-semibold text-lg text-text-primary-900", children: "Confirm Promo Cancellation" }), _jsx("p", { className: "text-sm text-text-tertiary-600", children: "Proceeding will cancel the promo and result in the loss of your active bonus. Do you want to continue?" }), _jsxs(Dialog.Footer, { className: "mt-4xl flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => {
|
|
16
16
|
hasPendingBonusStore.setOpen(false);
|
|
17
|
-
}, children: "No" }), _jsx(Button, { type: "submit", onClick: () => {
|
|
17
|
+
}, children: "No" }), _jsx(Button, { type: "submit", form: "hook-form", onClick: () => {
|
|
18
18
|
hasPendingBonusStore.setOpen(false);
|
|
19
19
|
hasPendingBonusStore.setShouldShowWarning(false);
|
|
20
20
|
}, children: "Yes" })] })] }) })] }) }));
|
package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.js
CHANGED
|
@@ -6,16 +6,14 @@ import { useEffect, useMemo, useState } from 'react';
|
|
|
6
6
|
import { Controller, useForm } from 'react-hook-form';
|
|
7
7
|
import { z } from 'zod';
|
|
8
8
|
import { useShallow } from 'zustand/shallow';
|
|
9
|
+
import { useAccountQuery } from '../../../../client/hooks/useAccountQuery.js';
|
|
9
10
|
import { useCreateInstapayWithdrawalMutation } from '../../../../client/hooks/useCreateInstapayWithdrawalMutation.js';
|
|
10
|
-
import { useCreateInstapayWithdrawalNextMutation } from '../../../../client/hooks/useCreateInstapayWithdrawalNextMutation.js';
|
|
11
|
-
import { useFeatureFlag } from '../../../../client/hooks/useFeatureFlag.js';
|
|
12
11
|
import { useGlobalStore } from '../../../../client/hooks/useGlobalStore.js';
|
|
13
12
|
import { useInstapayBankListQuery } from '../../../../client/hooks/useInstapayBankListQuery.js';
|
|
14
13
|
import { usePaymentSettingsQuery } from '../../../../client/hooks/usePaymentSettingsQuery.js';
|
|
15
14
|
import { AlertCircleIcon } from '../../../../icons/AlertCircleIcon.js';
|
|
16
15
|
import { CheckIcon } from '../../../../icons/CheckIcon.js';
|
|
17
16
|
import { ChevronDownIcon } from '../../../../icons/ChevronDownIcon.js';
|
|
18
|
-
import { ChevronUpIcon } from '../../../../icons/ChevronUpIcon.js';
|
|
19
17
|
import { EyeIcon } from '../../../../icons/EyeIcon.js';
|
|
20
18
|
import { EyeOffIcon } from '../../../../icons/EyeOffIcon.js';
|
|
21
19
|
import { SpinnerIcon } from '../../../../icons/SpinnerIcon.js';
|
|
@@ -23,7 +21,6 @@ import { XIcon } from '../../../../icons/XIcon.js';
|
|
|
23
21
|
import { AlertDialog } from '../../../../ui/AlertDialog/index.js';
|
|
24
22
|
import { Button } from '../../../../ui/Button/index.js';
|
|
25
23
|
import { Field } from '../../../../ui/Field/index.js';
|
|
26
|
-
import { NumberInput } from '../../../../ui/NumberInput/index.js';
|
|
27
24
|
import { PasswordInput } from '../../../../ui/PasswordInput/index.js';
|
|
28
25
|
import { Portal } from '../../../../ui/Portal/index.js';
|
|
29
26
|
import { Select } from '../../../../ui/Select/index.js';
|
|
@@ -34,24 +31,11 @@ import { explainError } from '../../utils.js';
|
|
|
34
31
|
import { TransactionPasswordNotSet } from '../TransactionPasswordNotSet.js';
|
|
35
32
|
export function InstapayWithdrawal() {
|
|
36
33
|
const depositWithdrawalProps = useDepositWithdrawalPropsContext();
|
|
37
|
-
const { enabled } = useFeatureFlag();
|
|
38
34
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
39
35
|
depositWithdrawal: ctx.depositWithdrawal,
|
|
40
36
|
hasPendingBonus: ctx.pendingBonus,
|
|
41
37
|
})));
|
|
42
38
|
const [status, setStatus] = useState('waiting');
|
|
43
|
-
const createWithdrawalNextMutation = useCreateInstapayWithdrawalNextMutation({
|
|
44
|
-
onMutate() {
|
|
45
|
-
setStatus('processing');
|
|
46
|
-
},
|
|
47
|
-
onSuccess() {
|
|
48
|
-
form.reset();
|
|
49
|
-
setStatus('success');
|
|
50
|
-
},
|
|
51
|
-
onError() {
|
|
52
|
-
setStatus('failed');
|
|
53
|
-
},
|
|
54
|
-
});
|
|
55
39
|
const createWithdrawalMutation = useCreateInstapayWithdrawalMutation({
|
|
56
40
|
onMutate() {
|
|
57
41
|
setStatus('processing');
|
|
@@ -65,6 +49,7 @@ export function InstapayWithdrawal() {
|
|
|
65
49
|
},
|
|
66
50
|
});
|
|
67
51
|
const instapayBankListQuery = useInstapayBankListQuery();
|
|
52
|
+
const accountQuery = useAccountQuery();
|
|
68
53
|
const instapayBankList = instapayBankListQuery.data;
|
|
69
54
|
const paymentSettingsQuery = usePaymentSettingsQuery();
|
|
70
55
|
const paymentSettings = paymentSettingsQuery.data;
|
|
@@ -74,6 +59,13 @@ export function InstapayWithdrawal() {
|
|
|
74
59
|
const definition = z.object({
|
|
75
60
|
amount: z.string().superRefine((val, ctx) => {
|
|
76
61
|
const n = parseDecimal(val, 0);
|
|
62
|
+
if (val.includes('.')) {
|
|
63
|
+
ctx.addIssue({
|
|
64
|
+
code: z.ZodIssueCode.custom,
|
|
65
|
+
message: 'Amount must be a whole number',
|
|
66
|
+
});
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
77
69
|
if (n < minimumAmount) {
|
|
78
70
|
ctx.addIssue({
|
|
79
71
|
type: 'number',
|
|
@@ -98,11 +90,9 @@ export function InstapayWithdrawal() {
|
|
|
98
90
|
.min(8, 'Password must be 8 or more characters')
|
|
99
91
|
.max(64, 'Password must be not be more than 64 characters'),
|
|
100
92
|
accountNumber: z.string().min(1).trim(),
|
|
101
|
-
accountName:
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
.min(4, 'Account name must be at least 4 characters')
|
|
105
|
-
: z.string().optional(),
|
|
93
|
+
accountName: z
|
|
94
|
+
.string({ required_error: 'Account name is required' })
|
|
95
|
+
.min(4, 'Account name must be at least 4 characters'),
|
|
106
96
|
bankCode: z.string().min(1, 'Bank is required').trim(),
|
|
107
97
|
});
|
|
108
98
|
const form = useForm({
|
|
@@ -113,7 +103,7 @@ export function InstapayWithdrawal() {
|
|
|
113
103
|
password: '',
|
|
114
104
|
accountNumber: '',
|
|
115
105
|
bankCode: '',
|
|
116
|
-
accountName: '',
|
|
106
|
+
accountName: accountQuery.data?.realName ?? '',
|
|
117
107
|
},
|
|
118
108
|
});
|
|
119
109
|
useEffect(() => {
|
|
@@ -141,53 +131,37 @@ export function InstapayWithdrawal() {
|
|
|
141
131
|
globalStore.hasPendingBonus.setOpen(true);
|
|
142
132
|
return;
|
|
143
133
|
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
});
|
|
152
|
-
}
|
|
153
|
-
else {
|
|
154
|
-
createWithdrawalMutation.mutate({
|
|
155
|
-
amount: data.amount,
|
|
156
|
-
transactionPassword: data.password,
|
|
157
|
-
accountNumber: data.accountNumber,
|
|
158
|
-
bankCode: data.bankCode,
|
|
159
|
-
});
|
|
160
|
-
}
|
|
134
|
+
createWithdrawalMutation.mutate({
|
|
135
|
+
amount: data.amount,
|
|
136
|
+
transactionPassword: data.password,
|
|
137
|
+
accountNumber: data.accountNumber,
|
|
138
|
+
accountName: data.accountName,
|
|
139
|
+
bankCode: data.bankCode,
|
|
140
|
+
});
|
|
161
141
|
});
|
|
162
142
|
const bankCollection = useMemo(() => createListCollection({
|
|
163
143
|
items: instapayBankList ?? [],
|
|
164
144
|
itemToValue: (item) => item.code,
|
|
165
145
|
itemToString: (item) => item.name,
|
|
166
146
|
}), [instapayBankList]);
|
|
167
|
-
return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", children: [_jsx(Controller, { control: form.control, name: "bankCode", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.bankCode, children: [_jsxs(Select.Root, { collection: bankCollection, positioning: {
|
|
147
|
+
return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", id: "hook-form", children: [_jsx(Controller, { control: form.control, name: "bankCode", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.bankCode, children: [_jsxs(Select.Root, { collection: bankCollection, positioning: {
|
|
168
148
|
sameWidth: true,
|
|
169
149
|
}, value: o.field.value ? [o.field.value] : [], onValueChange: (details) => {
|
|
170
150
|
o.field.onChange(details.value.at(0) ?? '');
|
|
171
|
-
}, children: [_jsx(Select.Label, { children: "Bank" }), _jsx(Select.Control, { children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: bankCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item.id))) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.bankCode?.message })] })) }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Bank account number" }), _jsx(Field.Input, { ...form.register('accountNumber') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountNumber?.message })] }),
|
|
172
|
-
o.field.onChange(details.value);
|
|
173
|
-
}, formatOptions: {
|
|
174
|
-
maximumFractionDigits: 2,
|
|
175
|
-
minimumFractionDigits: 0,
|
|
176
|
-
}, allowMouseWheel: true, children: [_jsx(NumberInput.Label, { children: "Enter amount you want to withdraw" }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.Input, {}), _jsx(NumberInput.IncrementTrigger, { children: _jsx(ChevronUpIcon, {}) }), _jsx(NumberInput.DecrementTrigger, { children: _jsx(ChevronDownIcon, {}) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] })) }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount'), 0), onChange: (value) => {
|
|
151
|
+
}, children: [_jsx(Select.Label, { children: "Bank" }), _jsx(Select.Control, { children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }) }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: bankCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item.id))) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.bankCode?.message })] })) }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountNumber, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Bank account number" }), _jsx(Field.Input, { ...form.register('accountNumber') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountNumber?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.accountName, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Account name" }), _jsx(Field.Input, { ...form.register('accountName') }), _jsx(Field.ErrorText, { children: form.formState.errors.accountName?.message })] }), _jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsx(Field.Label, { children: "Enter amount you want to withdraw" }), _jsx(Field.Input, { type: "number", ...form.register('amount') }), _jsx(Field.ErrorText, { children: form.formState.errors.amount?.message })] }), _jsx(AmountChoices, { value: parseDecimal(form.watch('amount').trim().replace(/,/g, ''), 0), onChange: (value) => {
|
|
177
152
|
form.setValue('amount', value.toString(), {
|
|
178
153
|
shouldTouch: true,
|
|
179
154
|
shouldDirty: true,
|
|
180
155
|
shouldValidate: true,
|
|
181
156
|
});
|
|
182
|
-
}, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled:
|
|
157
|
+
}, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Transaction Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { placeholder: "Enter password", ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsx(TransactionPasswordNotSet, {}), _jsx(Button, { type: "submit", className: "mt-6", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsxs("p", { className: "mt-lg text-text-tertiary-600 text-xs", children: ["Upon withdrawing, you agree to our", ' ', _jsx(Link, { href: depositWithdrawalProps.termsOfUseUrl ?? '/terms-of-use', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Terms of Use" }), ' ', "and", ' ', _jsx(Link, { href: depositWithdrawalProps.privacyPolicyUrl ?? '/privacy-policy', onClick: () => globalStore.depositWithdrawal.setOpen(false), className: "text-text-warning-primary-600 underline underline-offset-2", children: "Privacy Policy" }), "."] }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
|
|
183
158
|
if (!details.open) {
|
|
184
159
|
setStatus('waiting');
|
|
185
160
|
}
|
|
186
161
|
}, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "size-12 text-text-brand-primary-600" })), status === 'success' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-success-secondary text-text-featured-icon-light-success", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-bg-error-secondary text-text-featured-icon-light-error", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
|
|
187
162
|
"We're verifying your account and amount. Please hold a moment.", status === 'success' &&
|
|
188
163
|
'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
|
|
189
|
-
explainError(
|
|
190
|
-
createWithdrawalMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
|
|
164
|
+
explainError(createWithdrawalMutation.error?.name)] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
|
|
191
165
|
api.setOpen(false);
|
|
192
166
|
}, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
|
|
193
167
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
export function Loading() {
|
|
4
|
-
return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-
|
|
4
|
+
return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "border-blue-500 h-10 w-10 animate-spin rounded-full border-4 border-t-transparent" }), _jsx("p", { className: "text-gray-700 text-lg font-medium", children: "Loading Sports Book\u2026" })] }) }));
|
|
5
5
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type ImageProps } from 'next/image';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
export interface ResponsibleGamingProps {
|
|
4
|
+
responsibleGamingContent: string | ReactNode;
|
|
5
|
+
logo: ImageProps['src'];
|
|
6
|
+
open: boolean;
|
|
7
|
+
onCloseAction: () => void;
|
|
8
|
+
responsibleGamingLogo?: ImageProps['src'];
|
|
9
|
+
}
|
|
10
|
+
export declare function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }: ResponsibleGamingProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import Image, {} from 'next/image';
|
|
4
|
+
import pagcorLogo from '../../images/pagcor.png';
|
|
5
|
+
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
6
|
+
import { Button } from '../../ui/Button/index.js';
|
|
7
|
+
import { Dialog } from '../../ui/Dialog/index.js';
|
|
8
|
+
import { Portal } from '../../ui/Portal/index.js';
|
|
9
|
+
export function ResponsibleGaming({ logo, open, responsibleGamingContent, onCloseAction, ...props }) {
|
|
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: props.responsibleGamingLogo ?? 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
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type ImageProps } from 'next/image';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
export interface TermsOfUseProps {
|
|
4
|
+
logo: ImageProps['src'];
|
|
5
|
+
open: boolean;
|
|
6
|
+
onCloseAction: () => void;
|
|
7
|
+
termsOfUseContent: string | ReactNode;
|
|
8
|
+
siteName: string;
|
|
9
|
+
responsibleGamingLogo?: ImageProps['src'];
|
|
10
|
+
}
|
|
11
|
+
export declare function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }: TermsOfUseProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import Image, {} from 'next/image';
|
|
4
|
+
import pagcorLogo from '../../images/pagcor.png';
|
|
5
|
+
import responsibleGamingLogo from '../../images/responsible-gaming.png';
|
|
6
|
+
import { Button } from '../../ui/Button/index.js';
|
|
7
|
+
import { Dialog } from '../../ui/Dialog/index.js';
|
|
8
|
+
import { Portal } from '../../ui/Portal/index.js';
|
|
9
|
+
export function TermsOfUse({ logo, open, onCloseAction, siteName, termsOfUseContent, ...props }) {
|
|
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: [_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: props.responsibleGamingLogo ?? 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
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function FeatureFlag(): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useRouter, useSearchParams } from 'next/navigation';
|
|
4
|
+
import { useEffect } from 'react';
|
|
5
|
+
import { FEATURE_FLAG_KEY, useFeatureFlag, } from '../../client/hooks/useFeatureFlag.js';
|
|
6
|
+
export function FeatureFlag() {
|
|
7
|
+
const { featureFlagEnabled, setFeatureFlagEnabled } = useFeatureFlag();
|
|
8
|
+
const searchParams = useSearchParams();
|
|
9
|
+
const router = useRouter();
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const futureFlagParam = searchParams.get('future');
|
|
12
|
+
if (futureFlagParam !== null) {
|
|
13
|
+
const isEnabled = futureFlagParam === 'true';
|
|
14
|
+
setFeatureFlagEnabled(isEnabled);
|
|
15
|
+
localStorage.setItem(FEATURE_FLAG_KEY, isEnabled.toString());
|
|
16
|
+
}
|
|
17
|
+
}, [searchParams, setFeatureFlagEnabled]);
|
|
18
|
+
function disableFeatureFlag() {
|
|
19
|
+
setFeatureFlagEnabled(false);
|
|
20
|
+
localStorage.removeItem(FEATURE_FLAG_KEY);
|
|
21
|
+
const params = new URLSearchParams(searchParams.toString());
|
|
22
|
+
params.delete('future');
|
|
23
|
+
router.replace(`?${params.toString()}`, { scroll: false });
|
|
24
|
+
}
|
|
25
|
+
if (!featureFlagEnabled) {
|
|
26
|
+
return null;
|
|
27
|
+
}
|
|
28
|
+
return (_jsx("div", { className: "fixed bottom-3 flex w-full flex-col items-center justify-center", children: _jsxs("div", { className: "bg-black/70 p-1", children: ["Experimental features are enabled.", ' ', _jsxs("button", { onClick: () => disableFeatureFlag(), className: "cursor-pointer underline", children: [' ', "Disable"] })] }) }));
|
|
29
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './FeatureFlag';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './FeatureFlag.js';
|