@ludo.ninja/components 2.4.37 → 2.4.39

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

@@ -11,6 +11,7 @@ const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
 const ExperienceLabel_1 = __importDefault(require("../../../../system/Labels/ExperienceLabel"));
 const env_1 = require("../../../../store/env");
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const CreditsLabel_1 = __importDefault(require("../../../../system/Labels/CreditsLabel"));
 // Styles
 const StyledHeaderExperienceLabel = styled_components_1.default.div `
   margin-right: 20px;
@@ -21,14 +22,15 @@ const StyledHeaderExperienceLabel = styled_components_1.default.div `
 // Component
 const HeaderExperienceLabel = ({ userId }) => {
     const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
-    const { userExp, isLoadingExp, errorExp } = (0, store_1.useUserStore)((state) => ({
+    const { userCredits, userExp, isLoadingExp, errorExp } = (0, store_1.useUserStore)((state) => ({
+        userCredits: state.userCredits,
         userExp: state.userExp,
         isLoadingExp: state.isLoadingExp,
         errorExp: state.errorExp,
     }));
     if (!userId)
         return null;
-    return ((0, jsx_runtime_1.jsx)(StyledHeaderExperienceLabel, { children: (0, jsx_runtime_1.jsx)(ExperienceLabel_1.default, { value: userExp.xps, link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/rewards/${userId}`, loading: isLoadingExp || !!errorExp }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledHeaderExperienceLabel, { children: (0, jsx_runtime_1.jsx)(CreditsLabel_1.default, { value: userCredits, link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/rewards/${userId}`, loading: isLoadingExp || !!errorExp }) }), (0, jsx_runtime_1.jsx)(StyledHeaderExperienceLabel, { children: (0, jsx_runtime_1.jsx)(ExperienceLabel_1.default, { value: userExp.xps, link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/rewards/${userId}`, loading: isLoadingExp || !!errorExp }) })] }));
 };
 // Export
 exports.default = HeaderExperienceLabel;

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

@@ -37,6 +37,7 @@ 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 CreditsLabel_1 = __importDefault(require("../../../system/Labels/CreditsLabel"));
 // import UserStreak from "@/components/base/UserStreak";
 // Styles
 const StyledSidebarInviteCodeLabel = styled_components_1.default.div `
@@ -67,8 +68,9 @@ const SidebarBoostBadge = (0, styled_components_1.default)(boostBadge_1.default)
 `;
 // Component
 const SidebarInviteCodeLabel = () => {
-    const { getUser, userExp, isLoadingExp, errorExp, isLoadingProfileData, inviteCodes } = (0, store_1.useUserStore)((state) => ({
+    const { getUser, userCredits, userExp, isLoadingExp, errorExp, isLoadingProfileData, inviteCodes } = (0, store_1.useUserStore)((state) => ({
         getUser: state.user,
+        userCredits: state.userCredits,
         userExp: state.userExp,
         isLoadingExp: state.isLoadingExp,
         errorExp: state.errorExp,
@@ -79,7 +81,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);
-    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 }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(StyledSidebarInviteCodeLabel, { children: [(0, jsx_runtime_1.jsx)(SidebarBoostBadge, { boostType: profileData?.getBoost(), previousBoostType: profileData?.getPreviousBoost(), backgroundColor: '#ffffff' }), (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)(CreditsLabel_1.default, { value: userCredits, 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 }))] }) }));
 };
 // Export
 exports.default = SidebarInviteCodeLabel;

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

@@ -12,13 +12,14 @@ const FetcherMyProfile = ( /*{ userId }: { userId: string }*/) => {
     const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
     const { setIsLoadingProfileData, setProfileData, 
     // profileData,
-    setUserExp, setInviteCodes, setMyShareLink, } = (0, store_1.useUserStore)((state) => ({
+    setUserExp, setInviteCodes, setMyShareLink, setUserCredits, } = (0, store_1.useUserStore)((state) => ({
         setIsLoadingProfileData: state.setIsLoadingProfileData,
         setProfileData: state.setProfileData,
         profileData: state.profileData,
         setUserExp: state.setUserExp,
         setInviteCodes: state.setInviteCodes,
         setMyShareLink: state.setMyShareLink,
+        setUserCredits: state.setUserCredits,
     }));
     // console.log('profileData', profileData);
     api_2.identitySchema.useFetchMyProfileV2Query({
@@ -29,6 +30,7 @@ const FetcherMyProfile = ( /*{ userId }: { userId: string }*/) => {
         onCompleted: ({ fetchMyProfileV2: fetchMyProfile }) => {
             // console.log('fetchMyProfile', fetchMyProfile);
             setProfileData(fetchMyProfile);
+            setUserCredits(fetchMyProfile.credits || 0);
             if (fetchMyProfile.shareLink) {
                 setMyShareLink(fetchMyProfile.shareLink);
             }

package/build/modules/user/store.d.ts

@@ -12,6 +12,9 @@ export interface IUserStore {
     user: IUser | null;
     setUser: (user: IUser | null) => void;
     isSignedIn: boolean;
+    userCredits: number;
+    setUserCredits: (userCredits: number) => void;
+    resetUserCredits: () => void;
     userExp: UserXp;
     setUserExp: (userExp: UserXp) => void;
     resetUserExp: () => void;

package/build/modules/user/store.js

@@ -21,6 +21,13 @@ const creators = (0, next_zustand_1.createProvider)()((setState) => ({
     setUser: (user) => {
         setState({ user, isSignedIn: !!user });
     },
+    userCredits: 0,
+    setUserCredits: (userCredits) => {
+        setState({ userCredits });
+    },
+    resetUserCredits: () => {
+        setState({ userCredits: 0 });
+    },
     userExp: initialUserExp,
     setUserExp: (userExp) => {
         setState({ userExp });

package/build/system/Labels/CreditsLabel/CreditsLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/system/Labels/CreditsLabel/CreditsLabel.test.js

@@ -0,0 +1,44 @@
+"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 react_1 = require("@testing-library/react");
+const index_1 = __importDefault(require("./index"));
+describe('CreditsLabel Component', () => {
+    test('renders with value and link', () => {
+        const props = {
+            value: 50,
+            link: '/profile/123',
+            loading: false,
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        const inviteText = react_1.screen.getByText('50 credits');
+        expect(inviteText).toBeInTheDocument();
+        const linkElement = react_1.screen.getByRole('link', { name: /50 profile/i });
+        expect(linkElement).toHaveAttribute('href', '/profile/123');
+    });
+    test('renders loading skeleton', () => {
+        const props = {
+            value: 0,
+            link: '/profile/123',
+            loading: true,
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)("div", { "data-testid": 'test_container', children: (0, jsx_runtime_1.jsx)(index_1.default, { ...props }) }));
+        const skeletonElement = react_1.screen
+            .getByTestId('test_container')
+            .querySelector('.react-loading-skeleton');
+        expect(skeletonElement).toBeInTheDocument();
+    });
+    test('does not render when value is falsy', () => {
+        const props = {
+            value: 0,
+            link: '/profile/123',
+            loading: false,
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        const inviteText = react_1.screen.queryByText('0 credits');
+        expect(inviteText).not.toBeInTheDocument();
+    });
+});

package/build/system/Labels/CreditsLabel/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+declare const CreditsLabel: ({ value, link, loading, className, style, withIcon, }: {
+    value: number;
+    withIcon?: boolean;
+    link?: string;
+    loading?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CreditsLabel;

package/build/system/Labels/CreditsLabel/index.js

@@ -0,0 +1,89 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vars_1 = require("../../../fonts/vars");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const SkeletonLabel_1 = __importDefault(require("../SkeletonLabel"));
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const image_1 = __importDefault(require("next/image"));
+const link_1 = __importDefault(require("next/link"));
+const styled_components_1 = __importStar(require("styled-components"));
+const CreditsLabelStyles = () => (0, styled_components_1.css) `
+  ${boxShadow_1.default};
+  display: flex;
+  gap: 8px;
+  user-select: none;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 5px 16px;
+  max-width: max-content;
+  min-width: 80px;
+  min-height: 32px;
+  border-radius: 24px;
+  background: ${({ theme }) => theme.colors?.inviteCodesGradientLabel?.gradient};
+
+  .value {
+    font-family: ${vars_1.poppinsFontVarCss.css};
+    font-size: 1.6em;
+    font-weight: 600;
+    line-height: 1.3;
+    color: ${({ theme }) => theme.colors?.inviteCodesGradientLabel?.color};
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(5)} ${(0, _4k_1.adaptiveValueCalc)(16)};
+    min-width: ${(0, _4k_1.adaptiveValueCalc)(80)};
+    min-height: ${(0, _4k_1.adaptiveValueCalc)(32)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(24)};
+
+    .value {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    }
+  }
+`;
+const StyledCreditsLink = (0, styled_components_1.default)(link_1.default) `
+  ${boxTransform_1.default};
+  ${CreditsLabelStyles};
+`;
+const StyledCreditsTab = styled_components_1.default.div `
+  ${CreditsLabelStyles};
+`;
+const CreditsLabel = ({ value = 0, link, loading, className, style, withIcon = false, }) => {
+    if (loading)
+        return (0, jsx_runtime_1.jsx)(SkeletonLabel_1.default, {});
+    return link ? ((0, jsx_runtime_1.jsx)(StyledCreditsLink, { href: link, className: className, style: style, children: (0, jsx_runtime_1.jsx)(LabelContent, { value: value, withIcon: withIcon }) })) : ((0, jsx_runtime_1.jsx)(StyledCreditsTab, { className: className, style: style, children: (0, jsx_runtime_1.jsx)(LabelContent, { value: value, withIcon: withIcon }) }));
+};
+const LabelContent = ({ value, withIcon }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [withIcon && (0, jsx_runtime_1.jsx)(image_1.default, { src: `${constants_1.staticLink}/public/credits_icon.svg`, alt: "Credits icon", width: 20, height: 20 }), (0, jsx_runtime_1.jsx)("p", { className: `value `, children: `${value} credit${value !== 1 ? 's' : ''}` })] }));
+};
+exports.default = CreditsLabel;

package/package.json

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