@ludo.ninja/components 2.4.32 → 2.4.34

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

@@ -27,10 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ambassadorBadge_1 = __importDefault(require("../../userBadges/ambassadorBadge"));
-const curatorBadge_1 = __importDefault(require("../../userBadges/curatorBadge"));
-const educatorBadge_1 = __importDefault(require("../../userBadges/educatorBadge"));
-const pioneerBadge_1 = __importDefault(require("../../userBadges/pioneerBadge"));
+const boostBadge_1 = __importDefault(require("../../userBadges/boostBadge"));
 const store_1 = require("../../../modules/user/store");
 const env_1 = require("../../../store/env");
 const ScreenWidth_1 = require("../../../styles/ScreenWidth");
@@ -65,16 +62,7 @@ const BadgeStyles = (0, styled_components_1.css) `
     ${typography_1.FH5}
   }
 `;
-const SidebarEducatorBadge = (0, styled_components_1.default)(educatorBadge_1.default) `
-  ${BadgeStyles};
-`;
-const SidebarPioneerBadge = (0, styled_components_1.default)(pioneerBadge_1.default) `
-  ${BadgeStyles};
-`;
-const SidebarCuratorBadge = (0, styled_components_1.default)(curatorBadge_1.default) `
-  ${BadgeStyles};
-`;
-const SidebarAmbassadorBadge = (0, styled_components_1.default)(ambassadorBadge_1.default) `
+const SidebarBoostBadge = (0, styled_components_1.default)(boostBadge_1.default) `
   ${BadgeStyles};
 `;
 // Component
@@ -91,23 +79,7 @@ const SidebarInviteCodeLabel = () => {
     const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
     const unUsedInviteCodes = inviteCodes?.filter((code) => !code.isUsed);
     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" });
-            case "CURATOR":
-                return (0, jsx_runtime_1.jsx)(SidebarCuratorBadge, { backgroundColor: "#ffffff" });
-            case "PIONEER":
-                return (0, jsx_runtime_1.jsx)(SidebarPioneerBadge, { backgroundColor: "#ffffff" });
-            case "SHOOTING_STAR":
-                return (0, jsx_runtime_1.jsx)(SidebarEducatorBadge, { backgroundColor: "#ffffff", isShootingStar: true });
-            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 }))] }) }));
+    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 }), (0, jsx_runtime_1.jsx)(SidebarBoostBadge, { boostType: profileData?.getBoost(), previousBoostType: profileData?.getPreviousBoost(), backgroundColor: '#ffffff' }), !!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.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const boostBadge_1 = __importDefault(require("../boostBadge"));
+const boostBadgeBase_1 = __importDefault(require("../boostBadgeBase"));
 const AmbassadorBadge = ({ className, backgroundColor = "#f3f4f9", isShootingStar }) => {
-    return ((0, jsx_runtime_1.jsx)(boostBadge_1.default, { className: className, title: "Ambassador", colorSchema: { text: "#4357c5", gradient: { start: "#15d2ff", end: "#4c6dff" } }, backgroundColor: backgroundColor, isShootingStar: isShootingStar }));
+    return ((0, jsx_runtime_1.jsx)(boostBadgeBase_1.default, { className: className, title: "Ambassador", colorSchema: { text: "#4357c5", gradient: { start: "#15d2ff", end: "#4c6dff" } }, backgroundColor: backgroundColor, isShootingStar: isShootingStar }));
 };
 exports.default = AmbassadorBadge;

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

@@ -1,17 +1,9 @@
 import { FC } from "react";
-type ColorSchema = {
-    text: string;
-    gradient: {
-        start: string;
-        end: string;
-    };
-};
 type Props = {
-    title: string;
-    colorSchema: ColorSchema;
+    boostType?: string | null;
+    previousBoostType?: string | null;
     className?: string;
     backgroundColor?: string;
-    isShootingStar?: boolean;
 };
 declare const BoostBadge: FC<Props>;
 export default BoostBadge;

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

@@ -4,42 +4,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const Text_1 = require("@ludo.ninja/ui/build/system/Text");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Wrapper = styled_components_1.default.div `
-  display: flex;
-  gap: 4px;
-  padding: 3px 11px;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 16px;
-  border: 2px solid transparent;
-  color: ${({ colorSchema }) => colorSchema.text};
-  background: ${({ background, colorSchema }) => `linear-gradient(to right, ${background}, ${background}),  linear-gradient(160deg,${colorSchema.gradient.start} 0%, ${colorSchema.gradient.end} 100%)`};
-  background-clip: padding-box, border-box;
-  background-origin: padding-box, border-box;
-
-  .shootingStar {
-    width: 16px;
-    height: 16px;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(3)} ${(0, _4k_1.adaptiveValueCalc)(11)};
-    gap: ${(0, _4k_1.adaptiveValueCalc)(4)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
-    border: ${(0, _4k_1.adaptiveValueCalc)(2)} solid transparent;
-
-    .shootingStar {
-      width: ${(0, _4k_1.adaptiveValueCalc)(16)};
-      height: ${(0, _4k_1.adaptiveValueCalc)(16)};
+const ambassadorBadge_1 = __importDefault(require("../ambassadorBadge"));
+const curatorBadge_1 = __importDefault(require("../curatorBadge"));
+const educatorBadge_1 = __importDefault(require("../educatorBadge"));
+const pioneerBadge_1 = __importDefault(require("../pioneerBadge"));
+const schema_1 = require("@ludo.ninja/api/build/graphql_tools/__generated__/identityHost/schema");
+const getCommonBadge = (boostType) => {
+    switch (boostType) {
+        case schema_1.IBoostType.Educator:
+            return educatorBadge_1.default;
+        case schema_1.IBoostType.Ambassador:
+            return ambassadorBadge_1.default;
+        case schema_1.IBoostType.Curator:
+            return curatorBadge_1.default;
+        case schema_1.IBoostType.Pioneer:
+            return pioneerBadge_1.default;
+        default:
+            return educatorBadge_1.default;
+    }
+};
+const BoostBadge = ({ boostType, previousBoostType, backgroundColor, className }) => {
+    switch (boostType) {
+        case schema_1.IBoostType.Educator:
+        case schema_1.IBoostType.Ambassador:
+        case schema_1.IBoostType.Curator:
+        case schema_1.IBoostType.Pioneer:
+            const CommonBadgeComponent = getCommonBadge(boostType);
+            return CommonBadgeComponent && (0, jsx_runtime_1.jsx)(CommonBadgeComponent, { backgroundColor: backgroundColor, className: className });
+        case schema_1.IBoostType.ShootingStar:
+            const ShootingStarBadgeComponent = getCommonBadge(previousBoostType);
+            return (ShootingStarBadgeComponent && ((0, jsx_runtime_1.jsx)(ShootingStarBadgeComponent, { backgroundColor: backgroundColor, isShootingStar: true })));
+        default:
+            return null;
     }
-  }
-`;
-const BoostBadge = ({ title, colorSchema, className, backgroundColor = "#f3f4f9", isShootingStar }) => {
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { className: className, background: backgroundColor, colorSchema: colorSchema, children: [(0, jsx_runtime_1.jsx)(Text_1.H6, { children: title }), isShootingStar && ((0, jsx_runtime_1.jsx)("svg", { className: "shootingStar", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M14.9191 12.771C14.7615 11.8968 14.3666 11.0846 13.9229 10.3208C14.2409 10.9465 14.5173 11.597 14.6759 12.2805C14.8005 12.8445 14.8725 13.4934 14.594 14.0206C14.0277 15.0322 12.502 14.5841 11.6385 14.2227C8.13492 12.7302 3.84422 8.25495 2.61432 4.68106C2.44148 4.15261 2.23608 3.31291 2.49892 2.81721C2.61821 2.60082 2.84679 2.52942 3.08047 2.51074C3.46578 2.48687 3.82093 2.5688 4.21774 2.69252C5.4037 3.1064 6.53381 3.80599 7.57096 4.62179L6.53063 4.79782C6.17371 4.85819 6.0319 5.29018 6.2848 5.54655L7.76456 7.04752C7.86228 7.14651 7.90776 7.28504 7.88748 7.42219L7.58188 9.49703C7.52963 9.85162 7.90086 10.1186 8.22535 9.95989L10.125 9.03096C10.2504 8.96953 10.3976 8.96953 10.523 9.03096L12.4227 9.95989C12.7472 10.1186 13.1184 9.85162 13.0661 9.49703L12.7605 7.42219C12.7403 7.28504 12.7857 7.14651 12.8835 7.04752L14.3632 5.54655C14.6161 5.29018 14.4743 4.85818 14.1174 4.79782L12.0289 4.44444C11.8909 4.42101 11.7718 4.3354 11.7068 4.21284L10.7218 2.35621C10.5534 2.03902 10.0946 2.03902 9.92624 2.35621L9.25169 3.62763C7.35633 2.2187 4.97088 0.901879 3.07201 1.04257C2.28484 1.10621 1.58503 1.4879 1.24595 2.21543C1.0817 2.56974 1.02165 2.96654 1.03372 3.35191C1.19163 7.61026 9.03469 14.9923 13.3076 14.9676C14.0607 14.9446 14.6962 14.6151 14.9006 13.8582C14.9945 13.5049 14.9795 13.1274 14.9191 12.771Z", fill: "currentColor" }) }))] }));
 };
 exports.default = BoostBadge;

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

@@ -0,0 +1,17 @@
+import { FC } from "react";
+type ColorSchema = {
+    text: string;
+    gradient: {
+        start: string;
+        end: string;
+    };
+};
+type BoostBadgeBaseProps = {
+    title: string;
+    colorSchema: ColorSchema;
+    className?: string;
+    backgroundColor?: string;
+    isShootingStar?: boolean;
+};
+declare const BoostBadgeBase: FC<BoostBadgeBaseProps>;
+export default BoostBadgeBase;

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

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const Text_1 = require("@ludo.ninja/ui/build/system/Text");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  gap: 4px;
+  padding: 3px 11px;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 16px;
+  border: 2px solid transparent;
+  color: ${({ colorSchema }) => colorSchema.text};
+  background: ${({ background, colorSchema }) => `linear-gradient(to right, ${background}, ${background}),  linear-gradient(160deg,${colorSchema.gradient.start} 0%, ${colorSchema.gradient.end} 100%)`};
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+
+  .shootingStar {
+    width: 16px;
+    height: 16px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(3)} ${(0, _4k_1.adaptiveValueCalc)(11)};
+    gap: ${(0, _4k_1.adaptiveValueCalc)(4)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    border: ${(0, _4k_1.adaptiveValueCalc)(2)} solid transparent;
+
+    .shootingStar {
+      width: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    }
+  }
+`;
+const BoostBadgeBase = ({ title, colorSchema, className, backgroundColor = "#f3f4f9", isShootingStar, }) => {
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { className: className, background: backgroundColor, colorSchema: colorSchema, children: [(0, jsx_runtime_1.jsx)(Text_1.H6, { children: title }), isShootingStar && ((0, jsx_runtime_1.jsx)("svg", { className: "shootingStar", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M14.9191 12.771C14.7615 11.8968 14.3666 11.0846 13.9229 10.3208C14.2409 10.9465 14.5173 11.597 14.6759 12.2805C14.8005 12.8445 14.8725 13.4934 14.594 14.0206C14.0277 15.0322 12.502 14.5841 11.6385 14.2227C8.13492 12.7302 3.84422 8.25495 2.61432 4.68106C2.44148 4.15261 2.23608 3.31291 2.49892 2.81721C2.61821 2.60082 2.84679 2.52942 3.08047 2.51074C3.46578 2.48687 3.82093 2.5688 4.21774 2.69252C5.4037 3.1064 6.53381 3.80599 7.57096 4.62179L6.53063 4.79782C6.17371 4.85819 6.0319 5.29018 6.2848 5.54655L7.76456 7.04752C7.86228 7.14651 7.90776 7.28504 7.88748 7.42219L7.58188 9.49703C7.52963 9.85162 7.90086 10.1186 8.22535 9.95989L10.125 9.03096C10.2504 8.96953 10.3976 8.96953 10.523 9.03096L12.4227 9.95989C12.7472 10.1186 13.1184 9.85162 13.0661 9.49703L12.7605 7.42219C12.7403 7.28504 12.7857 7.14651 12.8835 7.04752L14.3632 5.54655C14.6161 5.29018 14.4743 4.85818 14.1174 4.79782L12.0289 4.44444C11.8909 4.42101 11.7718 4.3354 11.7068 4.21284L10.7218 2.35621C10.5534 2.03902 10.0946 2.03902 9.92624 2.35621L9.25169 3.62763C7.35633 2.2187 4.97088 0.901879 3.07201 1.04257C2.28484 1.10621 1.58503 1.4879 1.24595 2.21543C1.0817 2.56974 1.02165 2.96654 1.03372 3.35191C1.19163 7.61026 9.03469 14.9923 13.3076 14.9676C14.0607 14.9446 14.6962 14.6151 14.9006 13.8582C14.9945 13.5049 14.9795 13.1274 14.9191 12.771Z", fill: "currentColor" }) }))] }));
+};
+exports.default = BoostBadgeBase;

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

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const boostBadge_1 = __importDefault(require("../boostBadge"));
+const boostBadgeBase_1 = __importDefault(require("../boostBadgeBase"));
 const CuratorBadge = ({ className, backgroundColor, isShootingStar }) => {
-    return ((0, jsx_runtime_1.jsx)(boostBadge_1.default, { className: className, title: "Curator", colorSchema: { text: "#32A73C", gradient: { start: "#6BEB2E", end: "#29AF33" } }, backgroundColor: backgroundColor, isShootingStar: isShootingStar }));
+    return ((0, jsx_runtime_1.jsx)(boostBadgeBase_1.default, { className: className, title: "Curator", colorSchema: { text: "#32A73C", gradient: { start: "#6BEB2E", end: "#29AF33" } }, backgroundColor: backgroundColor, isShootingStar: isShootingStar }));
 };
 exports.default = CuratorBadge;

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

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const boostBadge_1 = __importDefault(require("../boostBadge"));
+const boostBadgeBase_1 = __importDefault(require("../boostBadgeBase"));
 const EducatorBadge = ({ className, backgroundColor = "#f3f4f9", isShootingStar }) => {
-    return ((0, jsx_runtime_1.jsx)(boostBadge_1.default, { className: className, title: "Educator", colorSchema: { text: "#5748bc", gradient: { start: "#e84eff", end: "#8946ff" } }, backgroundColor: backgroundColor, isShootingStar: isShootingStar }));
+    return ((0, jsx_runtime_1.jsx)(boostBadgeBase_1.default, { className: className, title: "Educator", colorSchema: { text: "#5748bc", gradient: { start: "#e84eff", end: "#8946ff" } }, backgroundColor: backgroundColor, isShootingStar: isShootingStar }));
 };
 exports.default = EducatorBadge;

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

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const boostBadge_1 = __importDefault(require("../boostBadge"));
+const boostBadgeBase_1 = __importDefault(require("../boostBadgeBase"));
 const PioneerBadge = ({ className, backgroundColor = "#f3f4f9", isShootingStar }) => {
-    return ((0, jsx_runtime_1.jsx)(boostBadge_1.default, { className: className, title: "Pioneer", colorSchema: { text: "#e77d03", gradient: { start: "#ffe500", end: "#ff9419" } }, backgroundColor: backgroundColor, isShootingStar: isShootingStar }));
+    return ((0, jsx_runtime_1.jsx)(boostBadgeBase_1.default, { className: className, title: "Pioneer", colorSchema: { text: "#e77d03", gradient: { start: "#ffe500", end: "#ff9419" } }, backgroundColor: backgroundColor, isShootingStar: isShootingStar }));
 };
 exports.default = PioneerBadge;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.4.32",
+  "version": "2.4.34",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -23,7 +23,7 @@
     "publish": "npm publish --access public -workspace @ludo.ninja/components"
   },
   "dependencies": {
-    "@ludo.ninja/api": "^3.2.48",
+    "@ludo.ninja/api": "^3.2.56",
     "@marker.io/browser": "^0.19.0",
     "@next/third-parties": "^15.3.4",
     "@react-three/drei": "^9.68.3",