@opexa/portal-components 0.0.404 → 0.0.405
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.
|
@@ -3,6 +3,12 @@ export interface ClassNameEntries {
|
|
|
3
3
|
walletActions?: string;
|
|
4
4
|
withdrawButton?: string;
|
|
5
5
|
depositButton?: string;
|
|
6
|
+
navItemRoot?: string;
|
|
7
|
+
navItemLink?: string;
|
|
8
|
+
navItemIcon?: string;
|
|
9
|
+
navItemLabel?: string;
|
|
10
|
+
navItemBadge?: string;
|
|
11
|
+
navItemIndicator?: string;
|
|
6
12
|
}
|
|
7
13
|
export interface AccountProps {
|
|
8
14
|
className?: string | ClassNameEntries;
|
|
@@ -68,14 +68,14 @@ export function Account(props) {
|
|
|
68
68
|
}, lazyMount: true, unmountOnExit: true, children: _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]', 'overflow-auto', classNames.root), style: {
|
|
69
69
|
['--offset-top-mobile']: mobileOffsetTop,
|
|
70
70
|
['--offset-top-desktop']: desktopOffsetTop,
|
|
71
|
-
}, children: [_jsx(Profile, {}), _jsx(Wallet, { classNames: classNames }), _jsx(Links, { router: router })] }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
|
|
71
|
+
}, children: [_jsx(Profile, {}), _jsx(Wallet, { classNames: classNames }), _jsx(Links, { router: router, classNames: classNames })] }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
|
|
72
72
|
globalStore.account.setOpen(details.open);
|
|
73
73
|
}, lazyMount: true, unmountOnExit: true, positioning: {
|
|
74
74
|
placement: 'bottom',
|
|
75
75
|
strategy: 'fixed',
|
|
76
76
|
}, ids: {
|
|
77
77
|
trigger: 'opexa-portal-components:account-trigger',
|
|
78
|
-
}, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "relative z-popover w-[23.438rem] ui-closed:animate-fade-out ui-open:animate-fade-in overflow-hidden rounded-xl border border-border-primary bg-bg-primary p-xl", children: [_jsx(Profile, {}), _jsx(Wallet, { classNames: classNames }), _jsx(Links, { router: router })] }) }) }) })] }));
|
|
78
|
+
}, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "relative z-popover w-[23.438rem] ui-closed:animate-fade-out ui-open:animate-fade-in overflow-hidden rounded-xl border border-border-primary bg-bg-primary p-xl", children: [_jsx(Profile, {}), _jsx(Wallet, { classNames: classNames }), _jsx(Links, { router: router, classNames: classNames })] }) }) }) })] }));
|
|
79
79
|
}
|
|
80
80
|
function Profile() {
|
|
81
81
|
const accountQuery = useAccountQuery();
|
|
@@ -116,7 +116,7 @@ function Wallet({ classNames }) {
|
|
|
116
116
|
globalStore.mobileProfile.setOpen(false);
|
|
117
117
|
}, children: "Deposit" })] })] }));
|
|
118
118
|
}
|
|
119
|
-
function Links({ router }) {
|
|
119
|
+
function Links({ router, classNames }) {
|
|
120
120
|
const accountProps = useAccountPropsContext();
|
|
121
121
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
122
122
|
account: ctx.account,
|
|
@@ -140,26 +140,26 @@ function Links({ router }) {
|
|
|
140
140
|
const cashbackBonusesCountQuery = useCashbackBonusesCountQuery();
|
|
141
141
|
const cashbackBonusesCount = cashbackBonusesCountQuery.data ?? 0;
|
|
142
142
|
const rewardsCount = bonusesCount + cashbackBonusesCount;
|
|
143
|
-
return (_jsxs("nav", { className: recipe.nav({ className: 'mt-xl' }), children: [_jsxs("ul", { hidden: !accountProps.notificationsEnabled && !accountProps.rewardsEnabled, children: [_jsx("li", { className: recipe.navItemRoot(), hidden: !accountProps.notificationsEnabled, children: _jsxs("button", { type: "button", className: recipe.navItemLink(), onClick: () => {
|
|
143
|
+
return (_jsxs("nav", { className: recipe.nav({ className: 'mt-xl' }), children: [_jsxs("ul", { hidden: !accountProps.notificationsEnabled && !accountProps.rewardsEnabled, children: [_jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), hidden: !accountProps.notificationsEnabled, children: _jsxs("button", { type: "button", className: twMerge(recipe.navItemLink(), classNames.navItemLink), onClick: () => {
|
|
144
144
|
globalStore.account.setOpen(false);
|
|
145
145
|
globalStore.account__mobile.setOpen(false);
|
|
146
146
|
globalStore.messages.setOpen(true);
|
|
147
|
-
}, children: [_jsx(Bell01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Notifications" }), unreadMessagesCount > 0 && (_jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: unreadMessagesCount })), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), hidden: !accountProps.rewardsEnabled, children: _jsxs(Link, { href: accountProps.rewardsUrl, className: recipe.navItemLink(), onClick: () => {
|
|
147
|
+
}, children: [_jsx(Bell01Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Notifications" }), unreadMessagesCount > 0 && (_jsx("span", { className: twMerge(recipe.navItemBadge(), classNames.navItemBadge), "data-type": "warning", children: unreadMessagesCount })), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) }), _jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), hidden: !accountProps.rewardsEnabled, children: _jsxs(Link, { href: accountProps.rewardsUrl, className: twMerge(recipe.navItemLink(), classNames.navItemLink), onClick: () => {
|
|
148
148
|
globalStore.account.setOpen(false);
|
|
149
149
|
globalStore.account__mobile.setOpen(false);
|
|
150
|
-
}, children: [_jsx(Gift01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Rewards" }), rewardsCount > 0 && (_jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: rewardsCount })), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), _jsx("ul", { hidden: !accountProps.accountSettingsEnabled, children: _jsx("li", { className: recipe.navItemRoot(), hidden: !accountProps.accountSettingsEnabled, children: _jsxs(Link, { href: accountProps.accountSettingsUrl, className: recipe.navItemLink(), onClick: () => {
|
|
150
|
+
}, children: [_jsx(Gift01Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Rewards" }), rewardsCount > 0 && (_jsx("span", { className: twMerge(recipe.navItemBadge(), classNames.navItemBadge), "data-type": "warning", children: rewardsCount })), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) })] }), _jsx("ul", { hidden: !accountProps.accountSettingsEnabled, children: _jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), hidden: !accountProps.accountSettingsEnabled, children: _jsxs(Link, { href: accountProps.accountSettingsUrl, className: twMerge(recipe.navItemLink(), classNames.navItemLink), onClick: () => {
|
|
151
151
|
globalStore.account.setOpen(false);
|
|
152
152
|
globalStore.account__mobile.setOpen(false);
|
|
153
|
-
}, children: [_jsx(Settings02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Settings" }), profileCompletionPercentage < 100 && (_jsx("span", { className: recipe.navItemBadge(), "data-type": "error", children: _jsx(AlertCircleIcon, {}) })), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) }), _jsxs("ul", { hidden: !accountProps.betRecordsEnabled && !accountProps.transactionsEnabled, children: [_jsx("li", { className: recipe.navItemRoot(), hidden: !accountProps.betRecordsEnabled, children: _jsxs(Link, { href: accountProps.betRecordsUrl, className: recipe.navItemLink(), onClick: () => {
|
|
153
|
+
}, children: [_jsx(Settings02Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Settings" }), profileCompletionPercentage < 100 && (_jsx("span", { className: twMerge(recipe.navItemBadge(), classNames.navItemBadge), "data-type": "error", children: _jsx(AlertCircleIcon, {}) })), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) }) }), _jsxs("ul", { hidden: !accountProps.betRecordsEnabled && !accountProps.transactionsEnabled, children: [_jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), hidden: !accountProps.betRecordsEnabled, children: _jsxs(Link, { href: accountProps.betRecordsUrl, className: twMerge(recipe.navItemLink(), classNames.navItemLink), onClick: () => {
|
|
154
154
|
globalStore.account.setOpen(false);
|
|
155
155
|
globalStore.account__mobile.setOpen(false);
|
|
156
|
-
}, children: [_jsx(CoinsStacked02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Bet Records" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), hidden: !accountProps.transactionsEnabled, children: _jsxs(Link, { href: accountProps.transactionsUrl, className: recipe.navItemLink(), onClick: () => {
|
|
156
|
+
}, children: [_jsx(CoinsStacked02Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Bet Records" }), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) }), _jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), hidden: !accountProps.transactionsEnabled, children: _jsxs(Link, { href: accountProps.transactionsUrl, className: twMerge(recipe.navItemLink(), classNames.navItemLink), onClick: () => {
|
|
157
157
|
globalStore.account.setOpen(false);
|
|
158
158
|
globalStore.account__mobile.setOpen(false);
|
|
159
|
-
}, children: [_jsx(CoinsSwap02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Transactions" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), _jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), disabled: signOutMutation.isPending, onClick: () => {
|
|
159
|
+
}, children: [_jsx(CoinsSwap02Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Transactions" }), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) })] }), _jsx("ul", { children: _jsx("li", { className: twMerge(recipe.navItemRoot(), classNames.navItemRoot), children: _jsxs("button", { type: "button", className: twMerge(recipe.navItemLink(), classNames.navItemLink), disabled: signOutMutation.isPending, onClick: () => {
|
|
160
160
|
signOutMutation.mutate();
|
|
161
161
|
globalStore.account.setOpen(false);
|
|
162
162
|
globalStore.account__mobile.setOpen(false);
|
|
163
163
|
router.push('/');
|
|
164
|
-
}, children: [_jsx(Logout01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Log Out" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) })] }));
|
|
164
|
+
}, children: [_jsx(Logout01Icon, { className: twMerge(recipe.navItemIcon(), classNames.navItemIcon) }), _jsx("span", { className: twMerge(recipe.navItemLabel(), classNames.navItemLabel), children: "Log Out" }), _jsx(ChevronRightIcon, { className: twMerge(recipe.navItemIndicator(), classNames.navItemIndicator) })] }) }) })] }));
|
|
165
165
|
}
|