@opexa/portal-components 0.0.104 → 0.0.105
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.
|
@@ -9,15 +9,23 @@ export interface AccountProps {
|
|
|
9
9
|
* ```
|
|
10
10
|
*/
|
|
11
11
|
offsetTop?: string;
|
|
12
|
-
/** @default true */
|
|
13
|
-
shouldShowSettings?: boolean;
|
|
14
12
|
/** @default '/rewards' */
|
|
15
13
|
rewardsUrl?: string;
|
|
14
|
+
/** @default true */
|
|
15
|
+
rewardsEnabled?: boolean;
|
|
16
16
|
/** @default '/bet-records' */
|
|
17
17
|
betRecordsUrl?: string;
|
|
18
|
+
/** @default true */
|
|
19
|
+
betRecordsEnabled?: boolean;
|
|
18
20
|
/** @default '/transactions' */
|
|
19
21
|
transactionsUrl?: string;
|
|
22
|
+
/** @default true */
|
|
23
|
+
transactionsEnabled?: boolean;
|
|
20
24
|
/** @default '/account' */
|
|
21
25
|
accountSettingsUrl?: string;
|
|
26
|
+
/** @default true */
|
|
27
|
+
accountSettingsEnabled?: boolean;
|
|
28
|
+
/** @default true */
|
|
29
|
+
notificationsEnabled?: boolean;
|
|
22
30
|
}
|
|
23
31
|
export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -30,33 +30,41 @@ import { Portal } from '../../ui/Portal/index.js';
|
|
|
30
30
|
import { formatNumber } from '../../utils/formatNumber.js';
|
|
31
31
|
import { parseDecimal } from '../../utils/parseDecimal.js';
|
|
32
32
|
import { accountRecipe } from './account.recipe.js';
|
|
33
|
+
import { AccountPropsContext, useAccountPropsContext } from './AccountContext.js';
|
|
34
|
+
const defaultAccountProps = {
|
|
35
|
+
offsetTop: '0px',
|
|
36
|
+
rewardsUrl: '/rewards',
|
|
37
|
+
rewardsEnabled: true,
|
|
38
|
+
betRecordsUrl: '/bet-records',
|
|
39
|
+
betRecordsEnabled: true,
|
|
40
|
+
transactionsUrl: '/transactions',
|
|
41
|
+
transactionsEnabled: true,
|
|
42
|
+
accountSettingsUrl: '/account',
|
|
43
|
+
accountSettingsEnabled: true,
|
|
44
|
+
notificationsEnabled: true,
|
|
45
|
+
};
|
|
33
46
|
const recipe = accountRecipe();
|
|
34
47
|
export function Account(props) {
|
|
35
48
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
36
49
|
account: ctx.account,
|
|
37
50
|
account__mobile: ctx.account__mobile,
|
|
38
51
|
})));
|
|
39
|
-
const rewardsUrl = props.rewardsUrl ?? '/rewards';
|
|
40
|
-
const betRecordsUrl = props.betRecordsUrl ?? '/bet-records';
|
|
41
|
-
const transactionsUrl = props.transactionsUrl ?? '/transactions';
|
|
42
|
-
const accountSettingsUrl = props.accountSettingsUrl ?? '/account';
|
|
43
|
-
const shouldShowSettings = props.shouldShowSettings ?? true;
|
|
44
52
|
const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
|
|
45
53
|
? props.offsetTop
|
|
46
54
|
: [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
|
|
47
|
-
return (_jsxs(
|
|
55
|
+
return (_jsxs(AccountPropsContext, { value: Object.assign({}, defaultAccountProps, props), children: [_jsx(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
|
|
48
56
|
globalStore.account__mobile.setOpen(details.open);
|
|
49
57
|
}, 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))]'), style: {
|
|
50
58
|
['--offset-top-mobile']: mobileOffsetTop,
|
|
51
59
|
['--offset-top-desktop']: desktopOffsetTop,
|
|
52
|
-
}, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, {
|
|
60
|
+
}, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, {})] }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
|
|
53
61
|
globalStore.account.setOpen(details.open);
|
|
54
62
|
}, lazyMount: true, unmountOnExit: true, positioning: {
|
|
55
63
|
placement: 'bottom',
|
|
56
64
|
strategy: 'fixed',
|
|
57
65
|
}, ids: {
|
|
58
66
|
trigger: 'opexa-portal-components:account-trigger',
|
|
59
|
-
}, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, {
|
|
67
|
+
}, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, {})] }) }) }) })] }));
|
|
60
68
|
}
|
|
61
69
|
function Profile() {
|
|
62
70
|
const accountQuery = useAccountQuery();
|
|
@@ -97,7 +105,8 @@ function Wallet() {
|
|
|
97
105
|
globalStore.mobileProfile.setOpen(false);
|
|
98
106
|
}, children: "Deposit" })] })] }));
|
|
99
107
|
}
|
|
100
|
-
function Links(
|
|
108
|
+
function Links() {
|
|
109
|
+
const accountProps = useAccountPropsContext();
|
|
101
110
|
const signOutMutation = useSignOutMutation();
|
|
102
111
|
const globalStore = useGlobalStore(useShallow((ctx) => ({
|
|
103
112
|
account: ctx.account,
|
|
@@ -114,20 +123,20 @@ function Links(props) {
|
|
|
114
123
|
const cashbackBonusesCountQuery = useCashbackBonusesCountQuery();
|
|
115
124
|
const cashbackBonusesCount = cashbackBonusesCountQuery.data ?? 0;
|
|
116
125
|
const rewardsCount = bonusesCount + cashbackBonusesCount;
|
|
117
|
-
return (_jsxs("nav", { className: recipe.nav({ className: 'mt-xl' }), children: [_jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), onClick: () => {
|
|
126
|
+
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: () => {
|
|
118
127
|
globalStore.account.setOpen(false);
|
|
119
128
|
globalStore.account__mobile.setOpen(false);
|
|
120
129
|
globalStore.messages.setOpen(true);
|
|
121
|
-
}, 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(), children: _jsxs(Link, { href:
|
|
130
|
+
}, 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: () => {
|
|
122
131
|
globalStore.account.setOpen(false);
|
|
123
132
|
globalStore.account__mobile.setOpen(false);
|
|
124
|
-
}, 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() })] }) })] }),
|
|
133
|
+
}, 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: () => {
|
|
125
134
|
globalStore.account.setOpen(false);
|
|
126
135
|
globalStore.account__mobile.setOpen(false);
|
|
127
|
-
}, 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() })] }) }) })
|
|
136
|
+
}, 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: () => {
|
|
128
137
|
globalStore.account.setOpen(false);
|
|
129
138
|
globalStore.account__mobile.setOpen(false);
|
|
130
|
-
}, children: [_jsx(CoinsStacked02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Bet Records" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href:
|
|
139
|
+
}, 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: () => {
|
|
131
140
|
globalStore.account.setOpen(false);
|
|
132
141
|
globalStore.account__mobile.setOpen(false);
|
|
133
142
|
}, 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: () => {
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import type { AccountProps } from './Account.lazy';
|
|
2
|
+
export declare const AccountPropsContext: import("react").Context<import("type-fest/source/required-deep").RequiredObjectDeep<AccountProps>>, useAccountPropsContext: () => import("type-fest/source/required-deep").RequiredObjectDeep<AccountProps>;
|