@ludo.ninja/components 2.4.4 → 2.4.5

package/build/components/sidebar/sidebarInviteCodeLabel/index.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -11,13 +34,17 @@ const ExperienceLabel_1 = __importDefault(require("../../../system/Labels/Experi
 const InviteLabel_1 = __importDefault(require("../../../system/Labels/InviteLabel"));
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
+const educatorBadge_1 = __importDefault(require("../../userBadges/educatorBadge"));
+const ambassadorBadge_1 = __importDefault(require("../../userBadges/ambassadorBadge"));
+const typography_1 = require("@ludo.ninja/ui/build/styles/typography");
 // import UserStreak from "@/components/base/UserStreak";
 // Styles
 const StyledSidebarInviteCodeLabel = styled_components_1.default.div `
   display: flex;
   gap: 16px;
   margin-top: 16px;
+  flex-wrap: wrap;
 
   ${ScreenWidth_1.mediaQuery.minWidthFourK} {
     gap: ${(0, _4k_1.adaptiveValueCalc)(16)};
@@ -31,6 +58,17 @@ const StyledSidebarInviteCodeLabel = styled_components_1.default.div `
 //     margin-top: ${adaptiveValueCalc(16)};
 //   }
 // `;
+const BadgeStyles = (0, styled_components_1.css) `
+  h6 {
+    ${typography_1.FH5}
+  }
+`;
+const SidebarEducatorBadge = (0, styled_components_1.default)(educatorBadge_1.default) `
+  ${BadgeStyles};
+`;
+const SidebarAmbassadorBadge = (0, styled_components_1.default)(ambassadorBadge_1.default) `
+  ${BadgeStyles};
+`;
 // Component
 const SidebarInviteCodeLabel = () => {
     const { getUser, userExp, isLoadingExp, errorExp, isLoadingProfileData, inviteCodes } = (0, store_1.useUserStore)((state) => ({
@@ -44,7 +82,18 @@ const SidebarInviteCodeLabel = () => {
     const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
     const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
     const unUsedInviteCodes = inviteCodes?.filter((code) => !code.isUsed);
-    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 }), !!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 }))] }) }));
+    const profileData = (0, store_1.useUserStore)((state) => state.profileData);
+    const getBadge = () => {
+        switch (profileData?.getBoost()) {
+            case 'EDUCATOR':
+                return (0, jsx_runtime_1.jsx)(SidebarEducatorBadge, { backgroundColor: '#ffffff' });
+            case 'AMBASSADOR':
+                return (0, jsx_runtime_1.jsx)(SidebarAmbassadorBadge, { backgroundColor: '#ffffff' });
+            default:
+                return null;
+        }
+    };
+    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 }))] }) }));
 };
 // Export
 exports.default = SidebarInviteCodeLabel;

package/build/components/userBadges/ambassadorBadge/index.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 type Props = {
     className?: string;
+    backgroundColor?: string;
 };
 declare const AmbassadorBadge: FC<Props>;
 export default AmbassadorBadge;

package/build/components/userBadges/ambassadorBadge/index.js

@@ -17,7 +17,7 @@ const Wrapper = styled_components_1.default.div `
   border-radius: 16px;
   border: 2px solid transparent;
   color: #4357C5;
-  background: linear-gradient(to right, #f3f4f9, #f3f4f9),
+  background: ${({ background }) => `linear-gradient(to right, ${background}, ${background})`} ,
   linear-gradient(160deg, #15D2FF 0%, #4C6DFF 100%);
   background-clip: padding-box, border-box;
   background-origin: padding-box, border-box;
@@ -28,7 +28,7 @@ const Wrapper = styled_components_1.default.div `
     border: ${(0, _4k_1.adaptiveValueCalc)(2)} solid transparent;
   }
 `;
-const AmbassadorBadge = ({ className }) => {
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(index_1.H6, { children: "Ambassador" }) }));
+const AmbassadorBadge = ({ className, backgroundColor = '#f3f4f9' }) => {
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, background: backgroundColor, children: (0, jsx_runtime_1.jsx)(index_1.H6, { children: "Ambassador" }) }));
 };
 exports.default = AmbassadorBadge;

package/build/components/userBadges/educatorBadge/index.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 type Props = {
     className?: string;
+    backgroundColor?: string;
 };
 declare const EducatorBadge: FC<Props>;
 export default EducatorBadge;

package/build/components/userBadges/educatorBadge/index.js

@@ -17,7 +17,7 @@ const Wrapper = styled_components_1.default.div `
   border-radius: 16px;
   border: 2px solid transparent;
   color: #5748bc;
-  background: linear-gradient(to right, #f3f4f9, #f3f4f9),
+  background: ${({ background }) => `linear-gradient(to right, ${background}, ${background})`},
     linear-gradient(160deg, #e84eff 0%, #8946ff 100%);
   background-clip: padding-box, border-box;
   background-origin: padding-box, border-box;
@@ -28,7 +28,7 @@ const Wrapper = styled_components_1.default.div `
     border: ${(0, _4k_1.adaptiveValueCalc)(2)} solid transparent;
   }
 `;
-const EducatorBadge = ({ className }) => {
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(index_1.H6, { children: "Educator" }) }));
+const EducatorBadge = ({ className, backgroundColor = '#f3f4f9' }) => {
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, background: backgroundColor, children: (0, jsx_runtime_1.jsx)(index_1.H6, { children: "Educator" }) }));
 };
 exports.default = EducatorBadge;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",