@opexa/portal-components 0.0.745 → 0.0.747
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/AiOGCashDeposit/AiOGCashDeposit.js +0 -3
- package/dist/components/DepositWithdrawal/Deposit/AiOGrabPayDeposit/AiOGrabPayDeposit.js +0 -3
- package/dist/components/DepositWithdrawal/Deposit/AiOPalawanPayDeposit/AiOPalawanPayDeposit.js +0 -3
- package/dist/components/DepositWithdrawal/Deposit/AiOPayMayaDeposit/AiOPayMayaDeposit.js +0 -3
- package/dist/components/DepositWithdrawal/Deposit/GCashDeposit/GCashDeposit.js +0 -3
- package/dist/components/DepositWithdrawal/Deposit/GCashWebpayDeposit/GCashWebpayDeposit.js +0 -3
- package/dist/components/DepositWithdrawal/Deposit/LibanganDeposit/LibanganDeposit.js +0 -3
- package/dist/components/DepositWithdrawal/Deposit/MayaAppDeposit/MayaAppDeposit.js +0 -3
- package/dist/components/DepositWithdrawal/Deposit/MayaDeposit/MayaDeposit.js +0 -3
- package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositForm.js +0 -3
- package/dist/components/DepositWithdrawal/Withdrawal/GCashStandardCashInWithdrawal/GCashStandardCashInWithdrawal.js +0 -3
- package/dist/components/DepositWithdrawal/Withdrawal/GCashWithdrawal/GCashWithdrawal.js +0 -3
- package/dist/components/DepositWithdrawal/Withdrawal/MayaAppWithdrawal/MayaAppWithdrawal.js +0 -3
- package/dist/components/DepositWithdrawal/Withdrawal/MayaWithdrawal/MayaWithdrawal.js +0 -3
- package/dist/components/DepositWithdrawal/Withdrawal/PisoPayWithdrawal/PisoPayWithdrawal.js +0 -3
- package/dist/components/DepositWithdrawal/Withdrawal/VentajaWithdrawal/VentajaWithdrawal.js +0 -3
- package/dist/components/Jackpots/JackpotsCarouselNext/JackpotsCarouselStageItem.js +4 -19
- package/dist/components/Jackpots/JackpotsListNext/JackpotMultiStageDesktop.js +5 -5
- package/dist/components/Jackpots/JackpotsListNext/JackpotMultiStageMobile.js +5 -11
- package/dist/components/Messages/MessagesPopup.js +1 -1
- package/package.json +1 -1
|
@@ -143,9 +143,6 @@ export function AiOGCashDeposit() {
|
|
|
143
143
|
}
|
|
144
144
|
}), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
145
145
|
o.field.onChange(details.value);
|
|
146
|
-
}, formatOptions: {
|
|
147
|
-
maximumFractionDigits: 2,
|
|
148
|
-
minimumFractionDigits: 0,
|
|
149
146
|
}, 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) => {
|
|
150
147
|
form.setValue('amount', value.toString(), {
|
|
151
148
|
shouldTouch: true,
|
|
@@ -143,9 +143,6 @@ export function AiOGrabPayDeposit() {
|
|
|
143
143
|
}
|
|
144
144
|
}), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
145
145
|
o.field.onChange(details.value);
|
|
146
|
-
}, formatOptions: {
|
|
147
|
-
maximumFractionDigits: 2,
|
|
148
|
-
minimumFractionDigits: 0,
|
|
149
146
|
}, 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) => {
|
|
150
147
|
form.setValue('amount', value.toString(), {
|
|
151
148
|
shouldTouch: true,
|
package/dist/components/DepositWithdrawal/Deposit/AiOPalawanPayDeposit/AiOPalawanPayDeposit.js
CHANGED
|
@@ -143,9 +143,6 @@ export function AiOPalawanPayDeposit() {
|
|
|
143
143
|
}
|
|
144
144
|
}), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
145
145
|
o.field.onChange(details.value);
|
|
146
|
-
}, formatOptions: {
|
|
147
|
-
maximumFractionDigits: 2,
|
|
148
|
-
minimumFractionDigits: 0,
|
|
149
146
|
}, 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) => {
|
|
150
147
|
form.setValue('amount', value.toString(), {
|
|
151
148
|
shouldTouch: true,
|
|
@@ -143,9 +143,6 @@ export function AiOPayMayaDeposit() {
|
|
|
143
143
|
}
|
|
144
144
|
}), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
145
145
|
o.field.onChange(details.value);
|
|
146
|
-
}, formatOptions: {
|
|
147
|
-
maximumFractionDigits: 2,
|
|
148
|
-
minimumFractionDigits: 0,
|
|
149
146
|
}, 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) => {
|
|
150
147
|
form.setValue('amount', value.toString(), {
|
|
151
148
|
shouldTouch: true,
|
|
@@ -166,9 +166,6 @@ export function GCashDeposit() {
|
|
|
166
166
|
}
|
|
167
167
|
}), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
168
168
|
o.field.onChange(details.value);
|
|
169
|
-
}, formatOptions: {
|
|
170
|
-
maximumFractionDigits: 2,
|
|
171
|
-
minimumFractionDigits: 0,
|
|
172
169
|
}, 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) => {
|
|
173
170
|
form.setValue('amount', value.toString(), {
|
|
174
171
|
shouldTouch: true,
|
|
@@ -168,9 +168,6 @@ export function GCashWebpayDeposit() {
|
|
|
168
168
|
}
|
|
169
169
|
}), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
170
170
|
o.field.onChange(details.value);
|
|
171
|
-
}, formatOptions: {
|
|
172
|
-
maximumFractionDigits: 2,
|
|
173
|
-
minimumFractionDigits: 0,
|
|
174
171
|
}, 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) => {
|
|
175
172
|
form.setValue('amount', value.toString(), {
|
|
176
173
|
shouldTouch: true,
|
|
@@ -167,9 +167,6 @@ export function LibanganDeposit() {
|
|
|
167
167
|
}
|
|
168
168
|
}), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
169
169
|
o.field.onChange(details.value);
|
|
170
|
-
}, formatOptions: {
|
|
171
|
-
maximumFractionDigits: 2,
|
|
172
|
-
minimumFractionDigits: 0,
|
|
173
170
|
}, 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) => {
|
|
174
171
|
form.setValue('amount', value.toString(), {
|
|
175
172
|
shouldTouch: true,
|
|
@@ -136,9 +136,6 @@ export function MayaAppDeposit() {
|
|
|
136
136
|
});
|
|
137
137
|
return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
138
138
|
o.field.onChange(details.value);
|
|
139
|
-
}, formatOptions: {
|
|
140
|
-
maximumFractionDigits: 2,
|
|
141
|
-
minimumFractionDigits: 0,
|
|
142
139
|
}, 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) => {
|
|
143
140
|
form.setValue('amount', value.toString(), {
|
|
144
141
|
shouldTouch: true,
|
|
@@ -166,9 +166,6 @@ export function MayaDeposit() {
|
|
|
166
166
|
}
|
|
167
167
|
}), noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
168
168
|
o.field.onChange(details.value);
|
|
169
|
-
}, formatOptions: {
|
|
170
|
-
maximumFractionDigits: 2,
|
|
171
|
-
minimumFractionDigits: 0,
|
|
172
169
|
}, 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) => {
|
|
173
170
|
form.setValue('amount', value.toString(), {
|
|
174
171
|
shouldTouch: true,
|
package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositForm.js
CHANGED
|
@@ -102,9 +102,6 @@ export function OnlineBankDepositForm() {
|
|
|
102
102
|
return null;
|
|
103
103
|
return (_jsxs("form", { onSubmit: form.handleSubmit(context.generateVCA), noValidate: true, children: [_jsxs(Field.Root, { children: [_jsx(Field.Label, { children: "Bank" }), _jsx(Field.Input, { value: "BANKNET", onChange: noop, readOnly: true })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
104
104
|
o.field.onChange(details.value);
|
|
105
|
-
}, formatOptions: {
|
|
106
|
-
maximumFractionDigits: 2,
|
|
107
|
-
minimumFractionDigits: 0,
|
|
108
105
|
}, 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) => {
|
|
109
106
|
form.setValue('amount', value.toString(), {
|
|
110
107
|
shouldTouch: true,
|
|
@@ -119,9 +119,6 @@ export function GCashStandardCashInWithdrawal() {
|
|
|
119
119
|
});
|
|
120
120
|
return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3.5 size-5" }), _jsx(Field.Input, { className: "pl-10.5", ...form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
121
121
|
o.field.onChange(details.value);
|
|
122
|
-
}, formatOptions: {
|
|
123
|
-
maximumFractionDigits: 2,
|
|
124
|
-
minimumFractionDigits: 0,
|
|
125
122
|
}, 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) => {
|
|
126
123
|
form.setValue('amount', value.toString(), {
|
|
127
124
|
shouldTouch: true,
|
|
@@ -119,9 +119,6 @@ export function GCashWithdrawal() {
|
|
|
119
119
|
});
|
|
120
120
|
return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3.5 size-5" }), _jsx(Field.Input, { className: "pl-10.5", ...form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
121
121
|
o.field.onChange(details.value);
|
|
122
|
-
}, formatOptions: {
|
|
123
|
-
maximumFractionDigits: 2,
|
|
124
|
-
minimumFractionDigits: 0,
|
|
125
122
|
}, 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) => {
|
|
126
123
|
form.setValue('amount', value.toString(), {
|
|
127
124
|
shouldTouch: true,
|
|
@@ -109,9 +109,6 @@ export function MayaAppWithdrawal() {
|
|
|
109
109
|
});
|
|
110
110
|
return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
111
111
|
o.field.onChange(details.value);
|
|
112
|
-
}, formatOptions: {
|
|
113
|
-
maximumFractionDigits: 2,
|
|
114
|
-
minimumFractionDigits: 0,
|
|
115
112
|
}, 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) => {
|
|
116
113
|
form.setValue('amount', value.toString(), {
|
|
117
114
|
shouldTouch: true,
|
|
@@ -119,9 +119,6 @@ export function MayaWithdrawal() {
|
|
|
119
119
|
});
|
|
120
120
|
return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, autoComplete: "off", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-3.5 size-5" }), _jsx(Field.Input, { className: "pl-10.5", ...form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
121
121
|
o.field.onChange(details.value);
|
|
122
|
-
}, formatOptions: {
|
|
123
|
-
maximumFractionDigits: 2,
|
|
124
|
-
minimumFractionDigits: 0,
|
|
125
122
|
}, 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) => {
|
|
126
123
|
form.setValue('amount', value.toString(), {
|
|
127
124
|
shouldTouch: true,
|
|
@@ -143,9 +143,6 @@ export function PisoPayWithdrawal() {
|
|
|
143
143
|
o.field.onChange(details.value.at(0) ?? '');
|
|
144
144
|
}, 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, index) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, index))) }) }) })] }), _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 })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
145
145
|
o.field.onChange(details.value);
|
|
146
|
-
}, formatOptions: {
|
|
147
|
-
maximumFractionDigits: 2,
|
|
148
|
-
minimumFractionDigits: 0,
|
|
149
146
|
}, 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) => {
|
|
150
147
|
form.setValue('amount', value.toString(), {
|
|
151
148
|
shouldTouch: true,
|
|
@@ -145,9 +145,6 @@ export function VentajaWithdrawal() {
|
|
|
145
145
|
o.field.onChange(details.value.at(0) ?? '');
|
|
146
146
|
}, 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 })] }), _jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, className: "mt-3xl", children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
|
|
147
147
|
o.field.onChange(details.value);
|
|
148
|
-
}, formatOptions: {
|
|
149
|
-
maximumFractionDigits: 2,
|
|
150
|
-
minimumFractionDigits: 0,
|
|
151
148
|
}, 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) => {
|
|
152
149
|
form.setValue('amount', value.toString(), {
|
|
153
150
|
shouldTouch: true,
|
|
@@ -8,7 +8,6 @@ import Link from 'next/link';
|
|
|
8
8
|
import { useCallback, useEffect, useMemo, useState, } from 'react';
|
|
9
9
|
import { twMerge } from 'tailwind-merge';
|
|
10
10
|
import { useIntersectionObserver } from 'usehooks-ts';
|
|
11
|
-
import { useJackpotPayoutsQuery } from '../../../client/hooks/useJackpotPayoutsQuery.js';
|
|
12
11
|
import { useLocaleInfo } from '../../../client/hooks/useLocaleInfo.js';
|
|
13
12
|
import { ArrowNarrowUpRightIcon } from '../../../icons/ArrowNarrowUpRightIcon.js';
|
|
14
13
|
import { CheckCircleBrokenIcon } from '../../../icons/CheckCircleBrokenIcon.js';
|
|
@@ -56,22 +55,8 @@ export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animat
|
|
|
56
55
|
};
|
|
57
56
|
};
|
|
58
57
|
const chestImages = getChestImages(jackpot.stage ?? 1);
|
|
59
|
-
const jackpotPayoutsQuery = useJackpotPayoutsQuery({
|
|
60
|
-
first: 30,
|
|
61
|
-
filter: {
|
|
62
|
-
jackpot: {
|
|
63
|
-
equal: jackpot.id,
|
|
64
|
-
},
|
|
65
|
-
},
|
|
66
|
-
}, {
|
|
67
|
-
enabled: typeof window !== 'undefined' && inView,
|
|
68
|
-
refetchInterval: 10_000,
|
|
69
|
-
});
|
|
70
|
-
const jackpotPayouts = jackpotPayoutsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
|
|
71
|
-
const latestJackpotPayout = jackpotPayouts[0] ?? [];
|
|
72
58
|
const localeInfo = useLocaleInfo();
|
|
73
59
|
const isPayingOut = jackpot.drawing;
|
|
74
|
-
const jackpotAmount = jackpot.pool;
|
|
75
60
|
const overallPercentage = parseInt(jackpot.overallProgressPercentage ?? '0');
|
|
76
61
|
const Arrow = useCallback(({ index }) => {
|
|
77
62
|
const Icon = isPayingOut ? ChevronLeftIcon : ChevronRightIcon;
|
|
@@ -106,7 +91,7 @@ export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animat
|
|
|
106
91
|
return () => clearTimeout(timeout);
|
|
107
92
|
}
|
|
108
93
|
}, [minLimitTooltipOpen, isMobileDevice]);
|
|
109
|
-
const ProfileIcon = () => jackpotProfileShape === 'oval' ? (
|
|
94
|
+
const ProfileIcon = () => jackpotProfileShape === 'oval' ? (_jsx("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: _jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }) })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" })] }));
|
|
110
95
|
const PayoutBadge = () => (_jsxs("div", { className: twMerge('flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', className?.latestPayoutBadgeRoot), children: [_jsx(Trophy01Icon, { className: twMerge('size-3.5 text-utility-brand-600', className?.latestPayoutBadgeIcon) }), "Winner"] }));
|
|
111
96
|
const OverallProgressBar = () => {
|
|
112
97
|
return (_jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "mb-[0.3125rem] flex items-center justify-between font-semibold text-sm text-text-primary-900", children: [_jsx("p", { children: "Overall Progress" }), overallPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: overallPercentage, children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
|
|
@@ -115,7 +100,7 @@ export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animat
|
|
|
115
100
|
return null;
|
|
116
101
|
}
|
|
117
102
|
return (_jsxs("div", { ref: ref, className: twMerge('relative flex w-full shrink-0 rounded-2xl border border-border-primary bg-bg-tertiary p-3 text-center lg:gap-4 lg:p-5', className?.itemRoot, window.location.href.includes('blucky') &&
|
|
118
|
-
styles['animate-multi-stage-gradient-blucky']), style: style, children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: twMerge('flex w-fit items-center gap-1 rounded-full border border-[#3F100B] bg-[#CDA95B] px-2 py-0.5 font-medium text-[#1D0201] text-xs', className?.jackpotBadgeRoot), children: [_jsx(Flag05Icon, { className: "size-3.5 text-[inherit]" }), "Stage ", jackpot.stage, ' '] }), jackpot.status !== 'CLOSED' ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "In Progress"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx(CheckCircleBrokenIcon, { className: "size-3.5 text-utility-success-500" }), "Completed"] }))] }), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(
|
|
103
|
+
styles['animate-multi-stage-gradient-blucky']), style: style, children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: twMerge('flex w-fit items-center gap-1 rounded-full border border-[#3F100B] bg-[#CDA95B] px-2 py-0.5 font-medium text-[#1D0201] text-xs', className?.jackpotBadgeRoot), children: [_jsx(Flag05Icon, { className: "size-3.5 text-[inherit]" }), "Stage ", jackpot.stage, ' '] }), jackpot.status !== 'CLOSED' ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "In Progress"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx(CheckCircleBrokenIcon, { className: "size-3.5 text-utility-success-500" }), "Completed"] }))] }), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(jackpot.stages?.[jackpot.stage - 1]?.jackpotPayout, {
|
|
119
104
|
currency: localeInfo.currency.code,
|
|
120
105
|
minDecimalPlaces: 2,
|
|
121
106
|
maxDecimalPlaces: 2,
|
|
@@ -123,10 +108,10 @@ export function JackpotsCarouselStageItem({ style, className, viewAllUrl, animat
|
|
|
123
108
|
currency: localeInfo.currency.code,
|
|
124
109
|
minDecimalPlaces: 2,
|
|
125
110
|
maxDecimalPlaces: 2,
|
|
126
|
-
})] })] })] }), _jsx("div", { className: "hidden min-w-25 lg:block" }), chestImages.image && (_jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-30 lg:absolute', chestImages?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: chestImages.image, alt: "chest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', chestImages?.style?.image) }) }))] }), _jsx("div", { className: twMerge('relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex', className?.latestPayoutRoot), children:
|
|
111
|
+
})] })] })] }), _jsx("div", { className: "hidden min-w-25 lg:block" }), chestImages.image && (_jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-30 lg:absolute', chestImages?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: chestImages.image, alt: "chest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', chestImages?.style?.image) }) }))] }), _jsx("div", { className: twMerge('relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex', className?.latestPayoutRoot), children: jackpot.stages?.[jackpot.stage - 1]?.member?.name ? (_jsxs(_Fragment, { children: [_jsx(ProfileIcon, {}), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: maskFirstLast(jackpot.stages?.[jackpot.stage - 1]?.member?.name, {
|
|
127
112
|
firstCharsCount: 3,
|
|
128
113
|
midLength: 3,
|
|
129
|
-
}) }), _jsx("div", { className: twMerge('text-2xl text-brand-400', className?.latestPayoutAmount), children: formatNumber(
|
|
114
|
+
}) }), _jsx("div", { className: twMerge('text-2xl text-brand-400', className?.latestPayoutAmount), children: formatNumber(jackpot.stages?.[jackpot.stage - 1]?.jackpotPayout, {
|
|
130
115
|
currency: localeInfo.currency.code,
|
|
131
116
|
minDecimalPlaces: 2,
|
|
132
117
|
maxDecimalPlaces: 2,
|
|
@@ -22,7 +22,7 @@ import { JackpotsListItemRules } from './JackpotsListItemRules.js';
|
|
|
22
22
|
import { useJackpotsListItemData } from './useJackpotsListItemData.js';
|
|
23
23
|
export function JackpotMultiStageDesktop({ animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', customJackpotStageChest, className, ...props }) {
|
|
24
24
|
const jackpot = useJackpotsListItemContext();
|
|
25
|
-
const { rootRef,
|
|
25
|
+
const { rootRef, filteredGameProviders, localeInfo, isPayingOut, arrowImages, } = useJackpotsListItemData();
|
|
26
26
|
const getChestImages = (stage) => {
|
|
27
27
|
if (stage === 1) {
|
|
28
28
|
return {
|
|
@@ -56,7 +56,7 @@ export function JackpotMultiStageDesktop({ animate = true, customJackpotChestIma
|
|
|
56
56
|
: parsed;
|
|
57
57
|
const overallPercentage = parseInt(jackpot.overallProgressPercentage ?? '0');
|
|
58
58
|
const isCompleted = overallPercentage >= 100;
|
|
59
|
-
const ProfileIcon = () => jackpotProfileShape === 'oval' ? (
|
|
59
|
+
const ProfileIcon = () => jackpotProfileShape === 'oval' ? (_jsx("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: _jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }) })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" })] }));
|
|
60
60
|
const PayoutBadge = () => (_jsxs("div", { className: twMerge('flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', className?.latestPayoutBadgeRoot), children: [_jsx(Trophy01Icon, { className: twMerge('size-3.5 text-utility-brand-600', className?.latestPayoutBadgeIcon) }), "Winner"] }));
|
|
61
61
|
const ProgressBar = () => (_jsxs("div", { className: "mt-3 lg:mt-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "font-semibold text-sm text-text-primary-900", children: ["Stage ", jackpot.stage, " Progress"] }), isCompleted ? 100 : currStageProgressPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary lg:h-4", max: 100, value: isCompleted ? 100 : currStageProgressPercentage, children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
|
|
62
62
|
const OverallProgressBar = () => {
|
|
@@ -84,7 +84,7 @@ export function JackpotMultiStageDesktop({ animate = true, customJackpotChestIma
|
|
|
84
84
|
return null;
|
|
85
85
|
}
|
|
86
86
|
return (_jsxs("div", { ref: rootRef, className: twMerge('rounded-2xl border border-border-primary bg-bg-tertiary', className?.itemRoot), children: [_jsxs("div", { style: props.style, className: twMerge('relative flex shrink-0 rounded-2xl p-3 text-center lg:gap-4 lg:p-5', window.location.href.includes('blucky') &&
|
|
87
|
-
styles['animate-multi-stage-gradient-blucky']), children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: twMerge('flex w-fit items-center gap-1 rounded-full border border-[#3F100B] bg-[#CDA95B] px-2 py-0.5 font-medium text-[#1D0201] text-xs', className?.jackpotBadgeRoot), children: [_jsx(Flag05Icon, { className: "size-3.5 text-[inherit]" }), "Stage ", jackpot.stage] }), jackpot.status !== 'CLOSED' ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "In Progress"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx(CheckCircleBrokenIcon, { className: "size-3.5 text-utility-success-500" }), "Completed"] }))] }), _jsx("div", { className: "mt-1 text-left font-semibold text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(
|
|
87
|
+
styles['animate-multi-stage-gradient-blucky']), children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "relative flex w-full justify-between", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: twMerge('flex w-fit items-center gap-1 rounded-full border border-[#3F100B] bg-[#CDA95B] px-2 py-0.5 font-medium text-[#1D0201] text-xs', className?.jackpotBadgeRoot), children: [_jsx(Flag05Icon, { className: "size-3.5 text-[inherit]" }), "Stage ", jackpot.stage] }), jackpot.status !== 'CLOSED' ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "In Progress"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx(CheckCircleBrokenIcon, { className: "size-3.5 text-utility-success-500" }), "Completed"] }))] }), _jsx("div", { className: "mt-1 text-left font-semibold text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(jackpot.stages?.[jackpot.stage - 1]?.jackpotPayout, {
|
|
88
88
|
currency: localeInfo.currency.code,
|
|
89
89
|
minDecimalPlaces: 2,
|
|
90
90
|
maxDecimalPlaces: 2,
|
|
@@ -92,10 +92,10 @@ export function JackpotMultiStageDesktop({ animate = true, customJackpotChestIma
|
|
|
92
92
|
currency: localeInfo.currency.code,
|
|
93
93
|
minDecimalPlaces: 2,
|
|
94
94
|
maxDecimalPlaces: 2,
|
|
95
|
-
})] })] })] }), _jsx("div", { className: "min-w-30" }), chestImages.image && (_jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-30 lg:absolute', chestImages?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: chestImages.image, alt: "chest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', chestImages?.style?.image) }) }))] }), _jsx("div", { className: twMerge('relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex', className?.latestPayoutRoot), children:
|
|
95
|
+
})] })] })] }), _jsx("div", { className: "min-w-30" }), chestImages.image && (_jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 min-w-30 lg:absolute', chestImages?.style?.wrapper), children: _jsx(Image, { width: 150, height: 150, src: chestImages.image, alt: "chest", className: twMerge('size-full h-25 w-25 p-2 lg:h-37.5 lg:w-37.5', chestImages?.style?.image) }) }))] }), _jsx("div", { className: twMerge('relative mt-4 hidden w-full gap-4 rounded-lg bg-bg-primary p-4 lg:flex', className?.latestPayoutRoot), children: jackpot.stages?.[jackpot.stage - 1]?.member?.name ? (_jsxs(_Fragment, { children: [_jsx(ProfileIcon, {}), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: maskFirstLast(jackpot.stages?.[jackpot.stage - 1]?.member?.name, {
|
|
96
96
|
firstCharsCount: 3,
|
|
97
97
|
midLength: 3,
|
|
98
|
-
}) }), _jsx("div", { className: twMerge('text-2xl text-brand-400', className?.latestPayoutAmount), children: formatNumber(
|
|
98
|
+
}) }), _jsx("div", { className: twMerge('text-2xl text-brand-400', className?.latestPayoutAmount), children: formatNumber(jackpot.stages?.[jackpot.stage - 1]?.jackpotPayout, {
|
|
99
99
|
currency: localeInfo.currency.code,
|
|
100
100
|
minDecimalPlaces: 2,
|
|
101
101
|
maxDecimalPlaces: 2,
|
|
@@ -18,20 +18,14 @@ import leaderboard from '../../../images/leaderboard.png';
|
|
|
18
18
|
import { Button } from '../../../ui/Button/index.js';
|
|
19
19
|
import { formatNumber } from '../../../utils/formatNumber.js';
|
|
20
20
|
import { maskFirstLast } from '../../../utils/mask.js';
|
|
21
|
-
import { parseDecimal } from '../../../utils/parseDecimal.js';
|
|
22
21
|
import styles from '../Jackpots.module.css';
|
|
23
22
|
import { useJackpotsListItemContext } from './JackpotsListContext.js';
|
|
24
23
|
import { JackpotsListItemGameProviders } from './JackpotsListItemGameProviders.js';
|
|
25
24
|
import { JackpotsListItemRules } from './JackpotsListItemRules.js';
|
|
26
25
|
import { useJackpotsListItemData } from './useJackpotsListItemData.js';
|
|
27
|
-
function getPercentage(value, total) {
|
|
28
|
-
const v = parseDecimal(value, 0);
|
|
29
|
-
const t = parseDecimal(total, 0);
|
|
30
|
-
return t === 0 ? 0 : (v / t) * 100;
|
|
31
|
-
}
|
|
32
26
|
export function JackpotMultiStageMobile({ animate = true, customJackpotChestImage, jackpotProfileShape = 'oval', customJackpotStageChest, chestImagesByTier, className, ...props }) {
|
|
33
27
|
const jackpot = useJackpotsListItemContext();
|
|
34
|
-
const { rootRef,
|
|
28
|
+
const { rootRef, filteredGameProviders, localeInfo, isPayingOut, arrowImages, } = useJackpotsListItemData();
|
|
35
29
|
const getChestImages = (stage) => {
|
|
36
30
|
if (stage === 1) {
|
|
37
31
|
return {
|
|
@@ -80,7 +74,7 @@ export function JackpotMultiStageMobile({ animate = true, customJackpotChestImag
|
|
|
80
74
|
: parsed;
|
|
81
75
|
const overallPercentage = parseInt(jackpot.overallProgressPercentage ?? '0');
|
|
82
76
|
const isCompleted = overallPercentage >= 100;
|
|
83
|
-
const ProfileIcon = () => jackpotProfileShape === 'oval' ? (
|
|
77
|
+
const ProfileIcon = () => jackpotProfileShape === 'oval' ? (_jsx("div", { className: "relative flex h-18 w-18 items-center justify-center rounded-full bg-bg-tertiary", children: _jsx(User01Icon, { className: "size-9 text-text-quarterary-500" }) })) : (_jsxs("div", { className: "relative grid h-18 w-18", children: [_jsx(StarIcon, { className: "col-start-1 row-start-1 h-full w-full" }), _jsx(User01Icon, { className: "z-10 col-start-1 row-start-1 size-9 place-self-center text-text-quarterary-500" })] }));
|
|
84
78
|
const PayoutBadge = () => (_jsxs("div", { className: twMerge('flex h-fit w-fit items-center gap-1 rounded-sm border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 font-medium text-utility-brand-700 text-xs', className?.latestPayoutBadgeRoot), children: [_jsx(Trophy01Icon, { className: twMerge('size-3.5 text-utility-brand-600', className?.latestPayoutBadgeIcon) }), "Winner"] }));
|
|
85
79
|
const ProgressBar = () => (_jsxs("div", { className: "flex w-full flex-col items-center justify-between", children: [_jsxs("div", { className: "mb-[5px] flex w-full items-center justify-between", children: [_jsxs("div", { className: "font-semibold text-text-primary-900 text-xs", children: ["Stage ", jackpot.stage] }), isCompleted ? 100 : currStageProgressPercentage, "%"] }), _jsx(Progress.Root, { className: "h-2 w-full rounded-full bg-bg-primary", max: 100, value: isCompleted ? 100 : currStageProgressPercentage, "aria-valuemax": 100, "aria-label": "Stage progress", children: _jsx(Progress.Track, { className: twMerge('h-full overflow-hidden rounded-full bg-bg-primary', className?.progressBarTrack), children: _jsx(Progress.Range, { className: "relative h-full overflow-hidden rounded-full bg-brand-500 pl-1.5", children: _jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-start pl-1.5", "aria-hidden": "true", children: arrowImages }) }) }) })] }));
|
|
86
80
|
const OverallProgressBar = () => {
|
|
@@ -108,7 +102,7 @@ export function JackpotMultiStageMobile({ animate = true, customJackpotChestImag
|
|
|
108
102
|
return null;
|
|
109
103
|
}
|
|
110
104
|
return (_jsxs("div", { ref: rootRef, className: twMerge('rounded-2xl border border-border-primary bg-bg-primary', className?.itemRoot), children: [_jsxs("div", { style: props.style, className: twMerge('relative flex shrink-0 rounded-2xl bg-bg-tertiary p-3 text-center lg:gap-4 lg:p-5', window.location.href.includes('blucky') &&
|
|
111
|
-
styles['animate-multi-stage-gradient-blucky']), children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsxs("div", { className: "relative flex w-full items-center justify-between", children: [_jsxs("div", { className: "w-full", children: [_jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: twMerge('flex w-fit items-center gap-1 rounded-full border border-[#3F100B] bg-[#CDA95B] px-2 py-0.5 font-medium text-[#1D0201] text-xs', className?.jackpotBadgeRoot), children: [_jsx(Flag05Icon, { className: "size-3.5 text-[inherit]" }), "Stage ", jackpot.stage] }), jackpot.status !== 'CLOSED' ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "In Progress"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx(CheckCircleBrokenIcon, { className: "size-3.5 text-utility-success-500" }), "Completed"] }))] }), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(
|
|
105
|
+
styles['animate-multi-stage-gradient-blucky']), children: [_jsxs("div", { className: "relative z-1 flex flex-1 flex-col", children: [_jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsxs("div", { className: "relative flex w-full items-center justify-between", children: [_jsxs("div", { className: "w-full", children: [_jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: twMerge('flex w-fit items-center gap-1 rounded-full border border-[#3F100B] bg-[#CDA95B] px-2 py-0.5 font-medium text-[#1D0201] text-xs', className?.jackpotBadgeRoot), children: [_jsx(Flag05Icon, { className: "size-3.5 text-[inherit]" }), "Stage ", jackpot.stage] }), jackpot.status !== 'CLOSED' ? (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-blue-200 bg-utility-blue-50 px-2 py-0.5 font-medium text-utility-blue-700 text-xs", children: [_jsx(ArrowNarrowUpRightIcon, { className: "size-3.5 text-utility-blue-500" }), "In Progress"] })) : (_jsxs("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: [_jsx(CheckCircleBrokenIcon, { className: "size-3.5 text-utility-success-500" }), "Completed"] }))] }), _jsx("div", { className: "mt-1 text-left font-medium text-lg text-text-primary-900 lg:mt-5 lg:text-2xl", children: jackpot.name }), _jsx("div", { className: twMerge('mt-1.5 w-fit rounded-md bg-bg-primary px-2 py-1 font-bold text-2xl text-brand-400 lg:mt-2 lg:text-4xl', className?.jackpotAmountRoot), children: formatNumber(jackpot.stages?.[jackpot.stage - 1]?.jackpotPayout, {
|
|
112
106
|
currency: localeInfo.currency.code,
|
|
113
107
|
minDecimalPlaces: 2,
|
|
114
108
|
maxDecimalPlaces: 2,
|
|
@@ -116,9 +110,9 @@ export function JackpotMultiStageMobile({ animate = true, customJackpotChestImag
|
|
|
116
110
|
currency: localeInfo.currency.code,
|
|
117
111
|
minDecimalPlaces: 2,
|
|
118
112
|
maxDecimalPlaces: 2,
|
|
119
|
-
})] })] }), _jsx(ProgressBar, {})] }), chestImages?.image && (_jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 block min-w-34.5 lg:absolute', chestImages?.style?.wrapper), children: _jsx(Image, { width: 100, height: 100, src: chestImages?.image, alt: "chest", className: twMerge('size-full h-34.5 w-34.5 p-2 lg:h-37.5 lg:w-37.5', chestImages?.style?.image) }) }))] }) }) }) }), _jsx("div", { className: twMerge('relative mt-4 flex w-full gap-4 rounded-lg bg-bg-primary p-4', className?.latestPayoutRoot), children:
|
|
113
|
+
})] })] }), _jsx(ProgressBar, {})] }), chestImages?.image && (_jsx("div", { className: twMerge('right-0 bottom-[-60] z-1 block min-w-34.5 lg:absolute', chestImages?.style?.wrapper), children: _jsx(Image, { width: 100, height: 100, src: chestImages?.image, alt: "chest", className: twMerge('size-full h-34.5 w-34.5 p-2 lg:h-37.5 lg:w-37.5', chestImages?.style?.image) }) }))] }) }) }) }), _jsx("div", { className: twMerge('relative mt-4 flex w-full gap-4 rounded-lg bg-bg-primary p-4', className?.latestPayoutRoot), children: jackpot.stages?.[jackpot.stage - 1]?.member?.name ? (_jsxs(_Fragment, { children: [_jsx(ProfileIcon, {}), _jsxs("div", { className: "flex flex-col gap-1 text-left", children: [_jsx(PayoutBadge, {}), _jsx("div", { className: "font-semibold", children: maskFirstLast(jackpot.stages?.[jackpot.stage - 1]?.member?.name, {
|
|
120
114
|
firstCharsCount: 3,
|
|
121
|
-
}) }), _jsx("div", { className: twMerge('text-2xl text-brand-400', className?.latestPayoutAmount), children: formatNumber(
|
|
115
|
+
}) }), _jsx("div", { className: twMerge('text-2xl text-brand-400', className?.latestPayoutAmount), children: formatNumber(jackpot.stages?.[jackpot.stage - 1]?.jackpotPayout, {
|
|
122
116
|
currency: localeInfo.currency.code,
|
|
123
117
|
minDecimalPlaces: 2,
|
|
124
118
|
maxDecimalPlaces: 2,
|
|
@@ -85,7 +85,7 @@ export function MessagesPopup() {
|
|
|
85
85
|
});
|
|
86
86
|
const messages = messagesQuery.data?.pages.flatMap((page) => page.edges
|
|
87
87
|
.filter((edge) => globalStore.gameLaunch.details.status === 'PLAYING' && future.enabled
|
|
88
|
-
? edge.node.force
|
|
88
|
+
? edge.node.force
|
|
89
89
|
: true)
|
|
90
90
|
.map((edge) => edge.node)) ?? [];
|
|
91
91
|
const [index, setIndex_] = useState(0);
|