@ludo.ninja/components 2.2.42 → 2.2.44

package/build/components/base/UserStreak/index.js

@@ -45,10 +45,6 @@ const Wrapper = styled_components_1.default.div `
     }
   }
 
-  .testRoot {
-    background-color: red;
-  }
-
   .skeleton-streak {
     border-radius: 16px;
     height: 16px;
@@ -68,9 +64,7 @@ const Wrapper = styled_components_1.default.div `
 const StreakInfo = styled_components_1.default.div `
   display: flex;
   width: 356px;
-  //height: 100px;
   flex-direction: column;
-  //justify-content: center;
   align-items: flex-start;
   gap: 6px;
   flex-shrink: 0;
@@ -95,6 +89,10 @@ const StreakInfo = styled_components_1.default.div `
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
+      
+    li:not(:last-child) {
+      margin-bottom: 13px;
+    }
   }
 
   ul {
@@ -107,6 +105,28 @@ const StreakInfo = styled_components_1.default.div `
     margin-right: 4px;
     font-weight: 700;
   }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(356)};
+    gap: ${(0, _4k_1.adaptiveValueCalc)(6)};
+
+    .title {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
+      line-height: ${(0, _4k_1.adaptiveValueCalc)(22)};
+    }
+
+    .description {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
+      line-height: ${(0, _4k_1.adaptiveValueCalc)(18)};
+
+      li:not(:last-child) {
+          margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(13)};
+      }
+    }
+    span {
+      margin-right: ${(0, _4k_1.adaptiveValueCalc)(4)};
+    }
+  }
 `;
 const CheckSVGIcon = () => {
     return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.76335 5.23043C2.11482 4.87895 2.68467 4.87895 3.03614 5.23043L5.36959 7.56388L9.4001 3.53337C9.75158 3.1819 10.3214 3.1819 10.6729 3.53337C11.0244 3.88484 11.0244 4.45469 10.6729 4.80616L6.00599 9.47307C5.65452 9.82454 5.08467 9.82454 4.7332 9.47307L1.76335 6.50322C1.41188 6.15175 1.41188 5.5819 1.76335 5.23043Z", fill: "#B0B2C0" }) }));
@@ -120,7 +140,7 @@ const UserStreak = ({ className, style }) => {
         isLoadingStreak: state.isLoadingStreak,
         errorStreak: state.errorStreak,
     }));
-    const isShowSkeleton = isLoadingStreak || errorStreak;
+    const isShowSkeleton = isLoadingStreak;
     return ((0, jsx_runtime_1.jsxs)(Wrapper, { className: className, style: style, children: [(0, jsx_runtime_1.jsx)("div", { className: 'streak-count', children: isShowSkeleton ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: 'skeleton-streak', width: '85px' })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [userStreak.totalDays, " Days Streak"] }), (0, jsx_runtime_1.jsx)(CheckSVGIcon, {})] })) }), (0, jsx_runtime_1.jsx)("div", { className: 'streak-bonus', children: isShowSkeleton ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: 'skeleton-streak', width: '215px' })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Next Bonus: ", userStreak.nextStreak, " Days Streak +", userStreak.nextBonus, " XP."] }), (0, jsx_runtime_1.jsx)(rc_tooltip_1.default, { placement: "bottomLeft", trigger: ['hover', 'click', 'focus'], showArrow: false, styles: {
                                 root: {
                                     backgroundColor: '#ffffff',

package/build/components/headers/components/headerStreak/index.d.ts

@@ -0,0 +1,5 @@
+declare const HeaderStreak: import("styled-components").StyledComponent<({ className, style }: {
+    className?: string;
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export default HeaderStreak;

package/build/components/headers/components/headerStreak/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const UserStreak_1 = __importDefault(require("../../../base/UserStreak"));
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const HeaderStreak = (0, styled_components_1.default)(UserStreak_1.default) `
+  flex-direction: column;
+  gap: 2px;
+  align-items: end; 
+  margin-right: 20px;
+    
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+   gap: ${(0, _4k_1.adaptiveValueCalc)(2)};
+   margin-right: ${(0, _4k_1.adaptiveValueCalc)(20)};
+  }
+`;
+exports.default = HeaderStreak;

package/build/components/headers/headerSearch/index.js

@@ -13,6 +13,7 @@ const ui_1 = require("../../../store/ui");
 const auth_1 = require("../../../utils/auth");
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
 const header_1 = require("@ludo.ninja/ui/build/components/header");
+const headerStreak_1 = __importDefault(require("../components/headerStreak"));
 // Component
 const HeaderSearch = ({ showXP = true }) => {
     const openSidebar = (0, ui_1.useUiStore)((state) => state.openSidebar);
@@ -25,7 +26,10 @@ const HeaderSearch = ({ showXP = true }) => {
             login: redirectToLoginWindow,
             openSidebar,
         }, slots: {
-            ...(showXP ? { headerExpLabel: (0, jsx_runtime_1.jsx)(headerExperienceLabel_1.default, { userId: getUser?.userId || "" }) } : {}),
+            ...(showXP ? {
+                headerExpLabel: (0, jsx_runtime_1.jsx)(headerExperienceLabel_1.default, { userId: getUser?.userId || "" }),
+                headerDaysStreak: (0, jsx_runtime_1.jsx)(headerStreak_1.default, {})
+            } : {}),
             headerUserPick: (0, jsx_runtime_1.jsx)(headerUserPic_1.default, { userId: getUser?.userId || "" }),
             logoLinkComponent: ({ children }) => ((0, jsx_runtime_1.jsx)("a", { href: ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE][isProd() ? "profile" : "app"], children: children })),
             searchInput: ({ setInputFocused }) => {

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

@@ -12,6 +12,7 @@ const ExperienceLabel_1 = __importDefault(require("../../../system/Labels/Experi
 const InviteLabel_1 = __importDefault(require("../../../system/Labels/InviteLabel"));
 const env_1 = require("../../../store/env");
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const UserStreak_1 = __importDefault(require("../../base/UserStreak"));
 // Styles
 const StyledSidebarInviteCodeLabel = styled_components_1.default.div `
   display: flex;
@@ -35,7 +36,7 @@ const SidebarInviteCodeLabel = () => {
     }));
     const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
     const unUsedInviteCodes = inviteCodes?.filter((code) => !code.isUsed);
-    return ((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 && ((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.jsxs)(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 && ((0, jsx_runtime_1.jsx)(InviteLabel_1.default, { value: unUsedInviteCodes.length, link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/invite-codes`, loading: isLoadingProfileData }))] }), (0, jsx_runtime_1.jsx)(UserStreak_1.default, {})] }));
 };
 // Export
 exports.default = SidebarInviteCodeLabel;

package/build/modules/user/profileData/profileDataInitialization.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProfileDataInitialization = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -7,6 +10,7 @@ const ui_1 = require("../../../store/ui");
 const api_1 = require("@ludo.ninja/api");
 const api_2 = require("@ludo.ninja/api");
 const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
+const useFetchMyActivityStreak_1 = __importDefault(require("../../../api/server-experiences/queries/useFetchMyActivityStreak"));
 const FetcherMyProfile = ( /*{ userId }: { userId: string }*/) => {
     const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
     const { setIsLoadingProfileData, setProfileData, 
@@ -53,6 +57,7 @@ const FetcherMyProfile = ( /*{ userId }: { userId: string }*/) => {
             setIsLoadingProfileData(false);
         },
     });
+    (0, useFetchMyActivityStreak_1.default)();
     return null;
 };
 const ProfileDataInitialization = () => {

package/package.json

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