@opexa/portal-components 0.0.406 → 0.0.407
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.
|
@@ -29,6 +29,7 @@ import { Button } from '../../ui/Button/index.js';
|
|
|
29
29
|
import { Drawer } from '../../ui/Drawer/index.js';
|
|
30
30
|
import { Popover } from '../../ui/Popover/index.js';
|
|
31
31
|
import { Portal } from '../../ui/Portal/index.js';
|
|
32
|
+
import { capitalize } from '../../utils/capitalize.js';
|
|
32
33
|
import { formatNumber } from '../../utils/formatNumber.js';
|
|
33
34
|
import { parseDecimal } from '../../utils/parseDecimal.js';
|
|
34
35
|
import { AccountPropsContext, useAccountPropsContext } from './AccountContext.js';
|
|
@@ -80,7 +81,17 @@ export function Account(props) {
|
|
|
80
81
|
function Profile() {
|
|
81
82
|
const accountQuery = useAccountQuery();
|
|
82
83
|
const account = accountQuery.data;
|
|
83
|
-
|
|
84
|
+
const getVerificationColorScheme = (status) => {
|
|
85
|
+
switch (status) {
|
|
86
|
+
case 'VERIFIED':
|
|
87
|
+
return 'success';
|
|
88
|
+
case 'PENDING':
|
|
89
|
+
return 'brand';
|
|
90
|
+
default:
|
|
91
|
+
return 'danger';
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", account?.id] }), _jsxs(Badge.Root, { colorScheme: getVerificationColorScheme(account?.verificationStatus), className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: capitalize(account?.verificationStatus || '') })] })] })] })] }));
|
|
84
95
|
}
|
|
85
96
|
function Wallet({ classNames }) {
|
|
86
97
|
const localeInfo = useLocaleInfo();
|
|
@@ -116,7 +127,7 @@ function Wallet({ classNames }) {
|
|
|
116
127
|
globalStore.mobileProfile.setOpen(false);
|
|
117
128
|
}, children: "Deposit" })] })] }));
|
|
118
129
|
}
|
|
119
|
-
function Links({ router, classNames }) {
|
|
130
|
+
function Links({ router, classNames, }) {
|
|
120
131
|
const accountProps = useAccountPropsContext();
|
|
121
132
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
122
133
|
account: ctx.account,
|
|
@@ -76,7 +76,7 @@ function Bonus(props) {
|
|
|
76
76
|
const turnoverRequirement = parseDecimal(bonus.turnoverRequirement, 0);
|
|
77
77
|
return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [_jsxs("div", { className: "relative", children: [promo.banner?.url ? (_jsx(Image, { src: promo.banner.url, alt: "", width: 400, height: 200, className: "h-[11.25rem] w-full object-cover" })) : (_jsx("div", { style: {
|
|
78
78
|
background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
|
|
79
|
-
}, children: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'brand-dark', className: "absolute top-4 right-4", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] })] }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("h2", { className: "line-clamp-1 text-center font-semibold text-
|
|
79
|
+
}, children: _jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs(Badge.Root, { size: "lg", round: false, colorScheme: remainingTime.expired ? 'danger' : 'brand-dark', className: "absolute top-4 right-4", children: [_jsx(Badge.Icon, { children: _jsx(StopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.expired ? 'Expired' : remainingTime.toString() })] })] }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("h2", { className: "line-clamp-1 text-center font-semibold text-xl", children: promo.name }), _jsx("div", { className: "mt-2 flex items-baseline justify-center gap-2", children: _jsx("p", { className: "font-semibold text-3xl leading-none", children: formatNumber(bonus.balance, {
|
|
80
80
|
currency: localeInfo.currency.code,
|
|
81
81
|
minDecimalPlaces: 2,
|
|
82
82
|
}) }) }), _jsxs("div", { className: "mt-md flex justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Wagering ", currentTurnoverRequirementContributionPercentage, "%"] }), _jsxs("p", { children: [bonus.currentTurnoverRequirementContribution, "/", turnoverRequirement] })] }), _jsx(Progress.Root, { min: 0, max: 100, value: clamp(currentTurnoverRequirementContributionPercentage, 0, 100), className: "mt-2", children: _jsx(Progress.Track, { children: _jsx(Progress.Range, {}) }) }), _jsx("div", { className: "grow" }), _jsx(Button, { size: "sm", variant: "outline", className: "mt-6", asChild: true, children: _jsx(Link, { href: `${props.viewDetailsUrl}/${bonus.id}`, children: "See More" }) })] })] }));
|
|
@@ -114,7 +114,7 @@ function CashbackBonus(props) {
|
|
|
114
114
|
belowMinimumCashbackThreshold;
|
|
115
115
|
return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [cashback.banner?.url ? (_jsx(Image, { src: cashback.banner.url, alt: "", width: 400, height: 200, className: "h-[11.25rem] w-full object-cover" })) : (_jsx("div", { style: {
|
|
116
116
|
background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
|
|
117
|
-
}, children: _jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className:
|
|
117
|
+
}, children: _jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-[11.25rem] w-auto shrink-0 object-cover", draggable: false, width: 600, height: 600 }) })), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: 'line-clamp-1 text-center font-semibold text-xl', children: cashback.name }), _jsx("h2", { className: "mt-2 text-center font-semibold text-3xl ", children: formatNumber(currentAccumulatedCashbackAmount, {
|
|
118
118
|
currency: localeInfo.currency.code,
|
|
119
119
|
minDecimalPlaces: 2,
|
|
120
120
|
}) }), _jsx("div", { className: "mt-2 line-clamp-1 text-center text-sm text-text-secondary-700", dangerouslySetInnerHTML: {
|
|
@@ -134,7 +134,7 @@ function SpotBonus() {
|
|
|
134
134
|
})));
|
|
135
135
|
return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-2xl border border-border-primary bg-bg-tertiary", children: [_jsx("div", { style: {
|
|
136
136
|
background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
|
|
137
|
-
}, children: _jsx(Image, { src: ribbonEnvelope, alt: "", className: "mx-auto h-[11.25rem] w-[80%] object-cover", draggable: false, width: 600, height: 341 }) }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "text-center font-semibold text-
|
|
137
|
+
}, children: _jsx(Image, { src: ribbonEnvelope, alt: "", className: "mx-auto h-[11.25rem] w-[80%] object-cover", draggable: false, width: 600, height: 341 }) }), _jsxs("div", { className: "flex grow flex-col px-xl py-3xl", children: [_jsx("p", { className: "text-center font-semibold text-xl", children: "Special Rewards" }), _jsx("p", { className: "mt-2 text-center font-semibold text-3xl", children: "Promo Code" }), _jsx("p", { className: "mt-2 text-center text-sm text-text-secondary-700", children: "Have a promo code? Don\u2019t miss out, redeem it now\u00A0and\u00A0enjoy exclusive rewards!" }), _jsx("div", { className: "grow" }), _jsx(Button, { size: "sm", onClick: () => {
|
|
138
138
|
globalStore.spotBonus.setOpen(true);
|
|
139
139
|
}, className: "mt-6", children: "Enter Promo Code" })] })] }));
|
|
140
140
|
}
|
|
@@ -20,7 +20,7 @@ export function WageringQuest() {
|
|
|
20
20
|
const localeInfo = useLocaleInfo();
|
|
21
21
|
const { progressPercentage, turnover, targetTurnover, name, description, endDateTime, bonus, status, } = quest;
|
|
22
22
|
const remainingTime = useRemainingTime(endDateTime);
|
|
23
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-full w-full flex-col space-y-6 rounded-2xl border border-border-primary bg-bg-tertiary px-4 pt-5 pb-6", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(RemainingTime, {}), _jsx("button", { type: "button", className: "flex size-9 cursor-pointer items-center justify-center rounded-md border border-border-secondary bg-bg-primary", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", children: _jsx(InfoCircleIcon, { className: "size-5 text-text-disabled" }) })] }), _jsx("p", { className: "font-semibold text-xl", children: name }), _jsx(Prose, { className: "text-wrap font-normal text-sm text-text-secondary-700", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: "group flex items-center justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Progress ", parseDecimal(progressPercentage, 0).toFixed(2), "%"] }), _jsxs("p", { children: [turnover, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " ", localeInfo.currency.code] })] })] }), _jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-bg-primary", children: _jsx("div", { className: "h-full rounded-full bg-utility-brand-600 transition-all duration-300", style: { width: `${progressPercentage}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx("div", { className: "w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center
|
|
23
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex h-full w-full flex-col space-y-6 rounded-2xl border border-border-primary bg-bg-tertiary px-4 pt-5 pb-6", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(RemainingTime, {}), _jsx("button", { type: "button", className: "flex size-9 cursor-pointer items-center justify-center rounded-md border border-border-secondary bg-bg-primary", onClick: () => disclosure.setOpen(true), "aria-label": "View Rules", children: _jsx(InfoCircleIcon, { className: "size-5 text-text-disabled" }) })] }), _jsx("p", { className: "font-semibold text-xl", children: name }), _jsx(Prose, { className: "text-wrap font-normal text-sm text-text-secondary-700", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: "group flex items-center justify-between text-text-primary-brand", children: [_jsxs("p", { children: ["Progress ", parseDecimal(progressPercentage, 0).toFixed(2), "%"] }), _jsxs("p", { children: [turnover, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " ", localeInfo.currency.code] })] })] }), _jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-bg-primary", children: _jsx("div", { className: "h-full rounded-full bg-utility-brand-600 transition-all duration-300", style: { width: `${progressPercentage}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx("div", { className: "w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center", children: _jsxs("p", { className: twMerge(remainingTime.expired ||
|
|
24
24
|
status === 'COMPLETED' ||
|
|
25
25
|
status === 'FAILED'
|
|
26
26
|
? 'opacity-50 grayscale'
|
package/dist/styles/theme.css
CHANGED
|
@@ -271,7 +271,10 @@
|
|
|
271
271
|
--color-border-brand-solid: #ca8504;
|
|
272
272
|
--color-border-dark: #373A41;
|
|
273
273
|
|
|
274
|
+
|
|
274
275
|
--color-border-checkbox-primary: #373a41;
|
|
276
|
+
--color-bg-progress-bar-primary: var(--color-bg-primary);
|
|
277
|
+
|
|
275
278
|
|
|
276
279
|
--font-sans: var(--font-sans);
|
|
277
280
|
--font-mono: var(--font-mono);
|
|
@@ -11,7 +11,7 @@ export const progressRecipe = tv({
|
|
|
11
11
|
unstyled: {},
|
|
12
12
|
solid: {
|
|
13
13
|
root: 'block w-full',
|
|
14
|
-
track: 'w-full overflow-hidden rounded-full bg-bg-primary',
|
|
14
|
+
track: 'w-full overflow-hidden rounded-full bg-bg-progress-bar-primary',
|
|
15
15
|
range: 'h-full rounded-full bg-brand-400 transition-all duration-200 ease-in-out',
|
|
16
16
|
},
|
|
17
17
|
},
|