@ludo.ninja/components 2.4.31 → 2.4.33

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

@@ -27,18 +27,16 @@ 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("../../userBadges/boostBadge"));
 const store_1 = require("../../../modules/user/store");
 const env_1 = require("../../../store/env");
 const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const ExperienceLabel_1 = __importDefault(require("../../../system/Labels/ExperienceLabel"));
 const InviteLabel_1 = __importDefault(require("../../../system/Labels/InviteLabel"));
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const typography_1 = require("@ludo.ninja/ui/build/styles/typography");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 const styled_components_1 = __importStar(require("styled-components"));
-const educatorBadge_1 = __importDefault(require("../../userBadges/educatorBadge"));
-const ambassadorBadge_1 = __importDefault(require("../../userBadges/ambassadorBadge"));
-const shootingStarBadge_1 = __importDefault(require("../../userBadges/shootingStarBadge"));
-const typography_1 = require("@ludo.ninja/ui/build/styles/typography");
 // import UserStreak from "@/components/base/UserStreak";
 // Styles
 const StyledSidebarInviteCodeLabel = styled_components_1.default.div `
@@ -64,13 +62,7 @@ const BadgeStyles = (0, styled_components_1.css) `
     ${typography_1.FH5}
   }
 `;
-const SidebarEducatorBadge = (0, styled_components_1.default)(educatorBadge_1.default) `
-  ${BadgeStyles};
-`;
-const SidebarShootingStarBadge = (0, styled_components_1.default)(shootingStarBadge_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
@@ -87,19 +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 'SHOOTING_STAR':
-                return (0, jsx_runtime_1.jsx)(SidebarShootingStarBadge, { 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 }))] }) }));
+    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(), 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.d.ts

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

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

@@ -4,31 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Text_1 = require("@ludo.ninja/ui/build/system/Text");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-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;
-  padding: 3px 11px;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 16px;
-  border: 2px solid transparent;
-  color: #4357C5;
-  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;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(3)} ${(0, _4k_1.adaptiveValueCalc)(11)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
-    border: ${(0, _4k_1.adaptiveValueCalc)(2)} solid transparent;
-  }
-`;
-const AmbassadorBadge = ({ className, backgroundColor = '#f3f4f9' }) => {
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, background: backgroundColor, children: (0, jsx_runtime_1.jsx)(Text_1.H6, { children: "Ambassador" }) }));
+const boostBadgeBase_1 = __importDefault(require("../boostBadgeBase"));
+const AmbassadorBadge = ({ className, backgroundColor = "#f3f4f9", 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

@@ -0,0 +1,9 @@
+import { FC } from "react";
+type Props = {
+    boostType?: string | null;
+    previousBoostType?: string | null;
+    className?: string;
+    backgroundColor?: string;
+};
+declare const BoostBadge: FC<Props>;
+export default BoostBadge;

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

@@ -0,0 +1,41 @@
+"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 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;
+    }
+};
+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.d.ts

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

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

@@ -4,31 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const index_1 = require("../../../system/index");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-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;
-  padding: 3px 11px;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 16px;
-  border: 2px solid transparent;
-  color: #32A73C;
-  background: linear-gradient(to right, #f3f4f9, #f3f4f9),
-  linear-gradient(160deg, #6BEB2E 0%, #29AF33 100%);
-  background-clip: padding-box, border-box;
-  background-origin: padding-box, border-box;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(3)} ${(0, _4k_1.adaptiveValueCalc)(11)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
-    border: ${(0, _4k_1.adaptiveValueCalc)(2)} solid transparent;
-  }
-`;
-const CuratorBadge = ({ className }) => {
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(index_1.H6, { children: "Curator" }) }));
+const boostBadgeBase_1 = __importDefault(require("../boostBadgeBase"));
+const CuratorBadge = ({ className, backgroundColor, 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.d.ts

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

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

@@ -4,31 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Text_1 = require("@ludo.ninja/ui/build/system/Text");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-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;
-  padding: 3px 11px;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 16px;
-  border: 2px solid transparent;
-  color: #5748bc;
-  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;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(3)} ${(0, _4k_1.adaptiveValueCalc)(11)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
-    border: ${(0, _4k_1.adaptiveValueCalc)(2)} solid transparent;
-  }
-`;
-const EducatorBadge = ({ className, backgroundColor = '#f3f4f9' }) => {
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, background: backgroundColor, children: (0, jsx_runtime_1.jsx)(Text_1.H6, { children: "Educator" }) }));
+const boostBadgeBase_1 = __importDefault(require("../boostBadgeBase"));
+const EducatorBadge = ({ className, backgroundColor = "#f3f4f9", 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.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+type Props = {
+    className?: string;
+    backgroundColor?: string;
+    isShootingStar?: boolean;
+};
+declare const PioneerBadge: FC<Props>;
+export default PioneerBadge;

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

@@ -0,0 +1,11 @@
+"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 boostBadgeBase_1 = __importDefault(require("../boostBadgeBase"));
+const PioneerBadge = ({ className, backgroundColor = "#f3f4f9", 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.31",
+  "version": "2.4.33",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",

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

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

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

@@ -1,34 +0,0 @@
-"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 Text_1 = require("@ludo.ninja/ui/build/system/Text");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-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;
-  padding: 3px 11px;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 16px;
-  border: 2px solid transparent;
-  color: #E77D03;
-  background: ${({ background }) => `linear-gradient(to right, ${background}, ${background})`},
-    linear-gradient(160deg, #FFE500 0%, #FF9419 100%);
-  background-clip: padding-box, border-box;
-  background-origin: padding-box, border-box;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(3)} ${(0, _4k_1.adaptiveValueCalc)(11)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
-    border: ${(0, _4k_1.adaptiveValueCalc)(2)} solid transparent;
-  }
-`;
-const ShootingStarBadge = ({ className, backgroundColor = '#f3f4f9' }) => {
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { className: className, background: backgroundColor, children: (0, jsx_runtime_1.jsx)(Text_1.H6, { children: "Shooting Star" }) }));
-};
-exports.default = ShootingStarBadge;