@ludo.ninja/components 2.4.3 → 2.4.5
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/build/components/sidebar/data.js +12 -12
- package/build/components/sidebar/index.js +4 -2
- package/build/components/sidebar/sidebarInviteCodeLabel/index.js +55 -5
- package/build/components/sidebar/sidebarSpa.js +3 -1
- package/build/components/userBadges/ambassadorBadge/index.d.ts +1 -0
- package/build/components/userBadges/ambassadorBadge/index.js +3 -3
- package/build/components/userBadges/educatorBadge/index.d.ts +1 -0
- package/build/components/userBadges/educatorBadge/index.js +3 -3
- package/package.json +1 -1
|
@@ -108,18 +108,18 @@ const useSidebarData = () => {
|
|
|
108
108
|
icon: (0, jsx_runtime_1.jsx)(icons_1.RewardsIcon, {}),
|
|
109
109
|
isExternalUrl: false,
|
|
110
110
|
},
|
|
111
|
-
{
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
},
|
|
111
|
+
// {
|
|
112
|
+
// href: `${ludoDomains[NEXT_PUBLIC_ENV_VALUE as TEnvValue]["account"]}/referrals`,
|
|
113
|
+
// title: "Referral Dashboard",
|
|
114
|
+
// icon: <ReferralDashboardIcon />,
|
|
115
|
+
// isExternalUrl: false,
|
|
116
|
+
// },
|
|
117
|
+
// {
|
|
118
|
+
// href: `${ludoDomains[NEXT_PUBLIC_ENV_VALUE as TEnvValue]["app"]}/invite-codes`,
|
|
119
|
+
// title: "My invites",
|
|
120
|
+
// icon: <MyInvitesIcon />,
|
|
121
|
+
// isExternalUrl: false,
|
|
122
|
+
// },
|
|
123
123
|
]
|
|
124
124
|
: []),
|
|
125
125
|
];
|
|
@@ -7,8 +7,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
7
7
|
const data_1 = require("./data");
|
|
8
8
|
const sidebarInviteCodeLabel_1 = __importDefault(require("./sidebarInviteCodeLabel"));
|
|
9
9
|
const useExtension_1 = __importDefault(require("../../hooks/extension/useExtension"));
|
|
10
|
+
const useRefCode_1 = require("../../hooks/refCode/useRefCode");
|
|
10
11
|
const useSignOut_1 = require("../../modules/user/auth/useSignOut");
|
|
11
12
|
const store_1 = require("../../modules/user/store");
|
|
13
|
+
const env_1 = require("../../store/env");
|
|
12
14
|
const ui_1 = require("../../store/ui");
|
|
13
15
|
const ScreenWidth_1 = require("../../styles/ScreenWidth");
|
|
14
16
|
const Userpic_1 = __importDefault(require("../../system/Img/Userpic"));
|
|
@@ -21,7 +23,6 @@ const MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Button
|
|
|
21
23
|
const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
22
24
|
const link_1 = __importDefault(require("next/link"));
|
|
23
25
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
24
|
-
const useRefCode_1 = require("../../hooks/refCode/useRefCode");
|
|
25
26
|
const MenuItem = styled_components_1.default.div `
|
|
26
27
|
font-size: 15px;
|
|
27
28
|
font-weight: 500;
|
|
@@ -101,6 +102,7 @@ const Sidebar = () => {
|
|
|
101
102
|
const closeSidebar = (0, ui_1.useUiStore)((state) => state.closeSidebar);
|
|
102
103
|
const isSidebarOpen = (0, ui_1.useUiStore)((state) => state.isSidebarOpen);
|
|
103
104
|
const isAuthorized = (0, store_1.useUserStore)((state) => state.isSignedIn);
|
|
105
|
+
const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
|
|
104
106
|
const getUser = (0, store_1.useUserStore)((state) => state.user);
|
|
105
107
|
const signOut = (0, useSignOut_1.useSignOut)();
|
|
106
108
|
const { deviceType } = (0, screen_1.useWindowDimensions)();
|
|
@@ -121,7 +123,7 @@ const Sidebar = () => {
|
|
|
121
123
|
menu: sideBarData.map(({ title, href, icon, isExternalUrl }) => ((0, jsx_runtime_1.jsxs)(SLink, { href: href, target: isExternalUrl ? "_blank" : "_self", onClick: closeSidebar, passHref: isExternalUrl, scale: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }), children: [(0, jsx_runtime_1.jsx)("span", { className: "icon-wrapper", children: icon }), title] }, title))),
|
|
122
124
|
userPicture: ({ children, height, width, isNeedBoxTransform }) => ((0, jsx_runtime_1.jsx)(Userpic_1.default, { width: width, height: height, userId: userId, isNeedBoxTransform: isNeedBoxTransform, children: children })),
|
|
123
125
|
inviteCode: (0, jsx_runtime_1.jsx)(sidebarInviteCodeLabel_1.default, {}),
|
|
124
|
-
...(deviceType == "isDesktop" && isAuthorized
|
|
126
|
+
...(deviceType == "isDesktop" && isAuthorized && !isProd()
|
|
125
127
|
? {
|
|
126
128
|
beforeMenu: ((0, jsx_runtime_1.jsx)(BeforeMenuContainer, { children: isExtensionInstalled ? ((0, jsx_runtime_1.jsxs)(MenuItem, { onClick: () => {
|
|
127
129
|
closeSidebar();
|
|
@@ -1,23 +1,50 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
2
25
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
27
|
};
|
|
5
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
29
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
-
const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
9
30
|
const store_1 = require("../../../modules/user/store");
|
|
31
|
+
const env_1 = require("../../../store/env");
|
|
10
32
|
const ScreenWidth_1 = require("../../../styles/ScreenWidth");
|
|
11
33
|
const ExperienceLabel_1 = __importDefault(require("../../../system/Labels/ExperienceLabel"));
|
|
12
34
|
const InviteLabel_1 = __importDefault(require("../../../system/Labels/InviteLabel"));
|
|
13
|
-
const env_1 = require("../../../store/env");
|
|
14
35
|
const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
|
|
36
|
+
const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
37
|
+
const styled_components_1 = __importStar(require("styled-components"));
|
|
38
|
+
const educatorBadge_1 = __importDefault(require("../../userBadges/educatorBadge"));
|
|
39
|
+
const ambassadorBadge_1 = __importDefault(require("../../userBadges/ambassadorBadge"));
|
|
40
|
+
const typography_1 = require("@ludo.ninja/ui/build/styles/typography");
|
|
15
41
|
// import UserStreak from "@/components/base/UserStreak";
|
|
16
42
|
// Styles
|
|
17
43
|
const StyledSidebarInviteCodeLabel = styled_components_1.default.div `
|
|
18
44
|
display: flex;
|
|
19
45
|
gap: 16px;
|
|
20
46
|
margin-top: 16px;
|
|
47
|
+
flex-wrap: wrap;
|
|
21
48
|
|
|
22
49
|
${ScreenWidth_1.mediaQuery.minWidthFourK} {
|
|
23
50
|
gap: ${(0, _4k_1.adaptiveValueCalc)(16)};
|
|
@@ -31,9 +58,20 @@ const StyledSidebarInviteCodeLabel = styled_components_1.default.div `
|
|
|
31
58
|
// margin-top: ${adaptiveValueCalc(16)};
|
|
32
59
|
// }
|
|
33
60
|
// `;
|
|
61
|
+
const BadgeStyles = (0, styled_components_1.css) `
|
|
62
|
+
h6 {
|
|
63
|
+
${typography_1.FH5}
|
|
64
|
+
}
|
|
65
|
+
`;
|
|
66
|
+
const SidebarEducatorBadge = (0, styled_components_1.default)(educatorBadge_1.default) `
|
|
67
|
+
${BadgeStyles};
|
|
68
|
+
`;
|
|
69
|
+
const SidebarAmbassadorBadge = (0, styled_components_1.default)(ambassadorBadge_1.default) `
|
|
70
|
+
${BadgeStyles};
|
|
71
|
+
`;
|
|
34
72
|
// Component
|
|
35
73
|
const SidebarInviteCodeLabel = () => {
|
|
36
|
-
const { getUser, userExp, isLoadingExp, errorExp, isLoadingProfileData, inviteCodes
|
|
74
|
+
const { getUser, userExp, isLoadingExp, errorExp, isLoadingProfileData, inviteCodes } = (0, store_1.useUserStore)((state) => ({
|
|
37
75
|
getUser: state.user,
|
|
38
76
|
userExp: state.userExp,
|
|
39
77
|
isLoadingExp: state.isLoadingExp,
|
|
@@ -42,8 +80,20 @@ const SidebarInviteCodeLabel = () => {
|
|
|
42
80
|
inviteCodes: state.inviteCodes,
|
|
43
81
|
}));
|
|
44
82
|
const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
|
|
83
|
+
const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
|
|
45
84
|
const unUsedInviteCodes = inviteCodes?.filter((code) => !code.isUsed);
|
|
46
|
-
|
|
85
|
+
const profileData = (0, store_1.useUserStore)((state) => state.profileData);
|
|
86
|
+
const getBadge = () => {
|
|
87
|
+
switch (profileData?.getBoost()) {
|
|
88
|
+
case 'EDUCATOR':
|
|
89
|
+
return (0, jsx_runtime_1.jsx)(SidebarEducatorBadge, { backgroundColor: '#ffffff' });
|
|
90
|
+
case 'AMBASSADOR':
|
|
91
|
+
return (0, jsx_runtime_1.jsx)(SidebarAmbassadorBadge, { backgroundColor: '#ffffff' });
|
|
92
|
+
default:
|
|
93
|
+
return null;
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(StyledSidebarInviteCodeLabel, { children: [(0, jsx_runtime_1.jsx)(ExperienceLabel_1.default, { value: userExp.xps, link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/rewards/${getUser?.userId}`, loading: isLoadingExp || !!errorExp }), getBadge(), !!unUsedInviteCodes && !isProd() && ((0, jsx_runtime_1.jsx)(InviteLabel_1.default, { value: unUsedInviteCodes.length, link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/invite-codes`, loading: isLoadingProfileData }))] }) }));
|
|
47
97
|
};
|
|
48
98
|
// Export
|
|
49
99
|
exports.default = SidebarInviteCodeLabel;
|
|
@@ -19,6 +19,7 @@ const sidebar_1 = require("@ludo.ninja/ui/build/components/sidebar");
|
|
|
19
19
|
const MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/MainButton"));
|
|
20
20
|
const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
|
|
21
21
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
22
|
+
const env_1 = require("../../store/env");
|
|
22
23
|
const MenuItem = styled_components_1.default.div `
|
|
23
24
|
font-size: 15px;
|
|
24
25
|
font-weight: 500;
|
|
@@ -98,6 +99,7 @@ const SidebarSpa = ({ SLink, UserPic, SidebarInviteCodeLabel, }) => {
|
|
|
98
99
|
const closeSidebar = (0, ui_1.useUiStore)((state) => state.closeSidebar);
|
|
99
100
|
const isSidebarOpen = (0, ui_1.useUiStore)((state) => state.isSidebarOpen);
|
|
100
101
|
const isAuthorized = (0, store_1.useUserStore)((state) => state.isSignedIn);
|
|
102
|
+
const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
|
|
101
103
|
const getUser = (0, store_1.useUserStore)((state) => state.user);
|
|
102
104
|
const signOut = (0, useSignOut_1.useSignOut)();
|
|
103
105
|
const { deviceType } = (0, screen_1.useWindowDimensions)();
|
|
@@ -118,7 +120,7 @@ const SidebarSpa = ({ SLink, UserPic, SidebarInviteCodeLabel, }) => {
|
|
|
118
120
|
menu: sideBarData.map(({ title, href, icon, isExternalUrl }) => ((0, jsx_runtime_1.jsxs)(SLink, { href: href, target: isExternalUrl ? "_blank" : "_self", onClick: closeSidebar, passHref: isExternalUrl, scale: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }), children: [(0, jsx_runtime_1.jsx)("span", { className: "icon-wrapper", children: icon }), title] }, title))),
|
|
119
121
|
userPicture: ({ children, height, width, isNeedBoxTransform }) => ((0, jsx_runtime_1.jsx)(UserPic, { width: width, height: height, userId: userId, isNeedBoxTransform: isNeedBoxTransform, children: children })),
|
|
120
122
|
inviteCode: (0, jsx_runtime_1.jsx)(SidebarInviteCodeLabel, {}),
|
|
121
|
-
...(deviceType == "isDesktop" && isAuthorized
|
|
123
|
+
...(deviceType == "isDesktop" && isAuthorized && !isProd()
|
|
122
124
|
? {
|
|
123
125
|
beforeMenu: ((0, jsx_runtime_1.jsx)(BeforeMenuContainer, { children: isExtensionInstalled ? ((0, jsx_runtime_1.jsxs)(MenuItem, { onClick: () => {
|
|
124
126
|
closeSidebar();
|
|
@@ -17,7 +17,7 @@ const Wrapper = styled_components_1.default.div `
|
|
|
17
17
|
border-radius: 16px;
|
|
18
18
|
border: 2px solid transparent;
|
|
19
19
|
color: #4357C5;
|
|
20
|
-
background: linear-gradient(to right,
|
|
20
|
+
background: ${({ background }) => `linear-gradient(to right, ${background}, ${background})`} ,
|
|
21
21
|
linear-gradient(160deg, #15D2FF 0%, #4C6DFF 100%);
|
|
22
22
|
background-clip: padding-box, border-box;
|
|
23
23
|
background-origin: padding-box, border-box;
|
|
@@ -28,7 +28,7 @@ const Wrapper = styled_components_1.default.div `
|
|
|
28
28
|
border: ${(0, _4k_1.adaptiveValueCalc)(2)} solid transparent;
|
|
29
29
|
}
|
|
30
30
|
`;
|
|
31
|
-
const AmbassadorBadge = ({ className }) => {
|
|
32
|
-
return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(index_1.H6, { children: "Ambassador" }) }));
|
|
31
|
+
const AmbassadorBadge = ({ className, backgroundColor = '#f3f4f9' }) => {
|
|
32
|
+
return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, background: backgroundColor, children: (0, jsx_runtime_1.jsx)(index_1.H6, { children: "Ambassador" }) }));
|
|
33
33
|
};
|
|
34
34
|
exports.default = AmbassadorBadge;
|
|
@@ -17,7 +17,7 @@ const Wrapper = styled_components_1.default.div `
|
|
|
17
17
|
border-radius: 16px;
|
|
18
18
|
border: 2px solid transparent;
|
|
19
19
|
color: #5748bc;
|
|
20
|
-
background: linear-gradient(to right,
|
|
20
|
+
background: ${({ background }) => `linear-gradient(to right, ${background}, ${background})`},
|
|
21
21
|
linear-gradient(160deg, #e84eff 0%, #8946ff 100%);
|
|
22
22
|
background-clip: padding-box, border-box;
|
|
23
23
|
background-origin: padding-box, border-box;
|
|
@@ -28,7 +28,7 @@ const Wrapper = styled_components_1.default.div `
|
|
|
28
28
|
border: ${(0, _4k_1.adaptiveValueCalc)(2)} solid transparent;
|
|
29
29
|
}
|
|
30
30
|
`;
|
|
31
|
-
const EducatorBadge = ({ className }) => {
|
|
32
|
-
return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(index_1.H6, { children: "Educator" }) }));
|
|
31
|
+
const EducatorBadge = ({ className, backgroundColor = '#f3f4f9' }) => {
|
|
32
|
+
return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, background: backgroundColor, children: (0, jsx_runtime_1.jsx)(index_1.H6, { children: "Educator" }) }));
|
|
33
33
|
};
|
|
34
34
|
exports.default = EducatorBadge;
|