@ludo.ninja/components 2.2.40 → 2.2.42

package/build/api/server-experiences/queries/useFetchMyActivityStreak/index.d.ts

@@ -0,0 +1,2 @@
+declare const useFetchMyActivityStreak: () => void;
+export default useFetchMyActivityStreak;

package/build/api/server-experiences/queries/useFetchMyActivityStreak/index.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const api_1 = require("@ludo.ninja/api");
+const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
+const store_1 = require("../../../../modules/user/store");
+const ui_1 = require("../../../../store/ui");
+const schema_1 = require("@ludo.ninja/api/build/graphql_tools/__generated__/experiencesHost/schema");
+const useFetchMyActivityStreak = () => {
+    const { isSignedIn, setUserStreak, resetUserStreak, setErrorStreak, setIsLoadingStreak, } = (0, store_1.useUserStore)((state) => ({
+        isSignedIn: state.isSignedIn,
+        setUserStreak: state.setUserStreak,
+        resetUserStreak: state.resetUserStreak,
+        setErrorStreak: state.setErrorStreak,
+        setIsLoadingStreak: state.setIsLoadingStreak,
+    }));
+    const { openAlert } = (0, ui_1.useUiStore)((state) => ({
+        openAlert: state.openAlert
+    }));
+    const [fetchActivityStreak] = (0, schema_1.useFetchMyActivityStreakLazyQuery)({
+        context: {
+            uri: api_1.hosts.experiencesHost,
+        },
+        onCompleted: ({ fetchMyActivityStreak }) => {
+            setIsLoadingStreak(false);
+            const userStreak = {
+                ...store_1.initialUserStreak,
+                ...fetchMyActivityStreak
+            };
+            setUserStreak({
+                nextStreak: userStreak.nextStreak,
+                nextBonus: userStreak.nextBonus,
+                totalDays: userStreak.totalDays,
+            });
+        },
+        onError: (err) => {
+            openAlert({
+                type: type_1.alertVariants.error,
+                caption: err.message,
+            });
+            resetUserStreak();
+            setErrorStreak(err);
+            setIsLoadingStreak(false);
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        if (isSignedIn) {
+            setIsLoadingStreak(true);
+            fetchActivityStreak();
+        }
+    }, [isSignedIn]);
+};
+exports.default = useFetchMyActivityStreak;

package/build/components/base/UserStreak/index.d.ts

@@ -0,0 +1,6 @@
+type UserStreakProps = {
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const UserStreak: ({ className, style }: UserStreakProps) => import("react/jsx-runtime").JSX.Element;
+export default UserStreak;

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

@@ -0,0 +1,141 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+const vars_1 = require("../../../fonts/vars");
+const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const store_1 = require("../../../modules/user/store");
+const rc_tooltip_1 = __importDefault(require("rc-tooltip"));
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+
+  color: ${colors_1.TextGrayColor};
+  font-family: ${vars_1.poppinsFontVarCss.css};
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  .streak-count {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    .skeleton-streak {
+      ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+        width: ${(0, _4k_1.adaptiveValueCalc)(85)};
+      }
+    }
+  }
+  .streak-bonus {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: ${colors_1.ProgressColor};
+    .skeleton-streak {
+      ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+        width: ${(0, _4k_1.adaptiveValueCalc)(215)};
+      }
+    }
+  }
+
+  .testRoot {
+    background-color: red;
+  }
+
+  .skeleton-streak {
+    border-radius: 16px;
+    height: 16px;
+
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    font-size: ${(0, _4k_1.adaptiveValueCalc)(12)};
+    line-height: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+  }
+`;
+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;
+
+  .title {
+    color: ${colors_1.BlackColor};
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 22px;
+  }
+
+  .description {
+    width: 100%;
+    text-wrap: auto;
+    text-align: left;
+    color: ${colors_1.TextGrayColor};
+
+    /* Desktop/Text Small */
+    font-family: ${vars_1.dmsansFontVarCss.css};
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  span {
+    color: ${colors_1.TextGrayColor};
+    margin-right: 4px;
+    font-weight: 700;
+  }
+`;
+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" }) }));
+};
+const TooltipSVGIcon = () => {
+    return ((0, jsx_runtime_1.jsxs)("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)("circle", { cx: "5.99961", cy: "5.99998", r: "5.4", fill: "#CFD5EA" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.45313 7.25185C5.45313 6.9264 5.509 6.65077 5.62074 6.42495C5.73247 6.19249 5.8705 5.99323 6.03482 5.82719C6.19914 5.6545 6.36017 5.49178 6.51792 5.33902C6.68224 5.17961 6.82027 5.01357 6.932 4.84088C7.04374 4.66155 7.09961 4.44902 7.09961 4.20327C7.09961 4.03723 7.06017 3.86786 6.9813 3.69517C6.909 3.52249 6.78083 3.37969 6.59679 3.26678C6.41276 3.14723 6.1597 3.08745 5.83764 3.08745C5.51557 3.08745 5.2428 3.15055 5.01933 3.27674C4.80243 3.40293 4.63153 3.56898 4.50665 3.77488C4.38834 3.98077 4.31933 4.19995 4.29961 4.43241H3.59961C3.61933 4.06711 3.71792 3.7317 3.89538 3.42618C4.07942 3.11402 4.32919 2.86495 4.64468 2.67898C4.96675 2.49301 5.34468 2.40002 5.77848 2.40002C6.25172 2.40002 6.63623 2.48969 6.932 2.66902C7.23435 2.8417 7.45454 3.06752 7.59257 3.34648C7.7306 3.61879 7.79961 3.90439 7.79961 4.20327C7.79961 4.51543 7.74374 4.77779 7.632 4.99032C7.52684 5.19622 7.3921 5.38219 7.22778 5.54823C7.07003 5.70764 6.909 5.86372 6.74468 6.01648C6.58036 6.16924 6.44233 6.34525 6.3306 6.5445C6.22543 6.73711 6.17285 6.9729 6.17285 7.25185H5.45313Z", fill: "#696F90" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.81299 9.78175C5.61881 9.78175 5.45594 9.72118 5.3244 9.60002C5.19286 9.47887 5.12708 9.32887 5.12708 9.15002C5.12708 8.97118 5.19286 8.82118 5.3244 8.70002C5.45594 8.57887 5.61881 8.51829 5.81299 8.51829C6.00091 8.51829 6.16064 8.57887 6.29218 8.70002C6.42373 8.82118 6.4895 8.97118 6.4895 9.15002C6.4895 9.32887 6.42373 9.47887 6.29218 9.60002C6.16064 9.72118 6.00091 9.78175 5.81299 9.78175Z", fill: "#696F90" })] }));
+};
+const UserStreak = ({ className, style }) => {
+    const { userStreak, isLoadingStreak, errorStreak } = (0, store_1.useUserStore)((state) => ({
+        userStreak: state.userStreak,
+        isLoadingStreak: state.isLoadingStreak,
+        errorStreak: state.errorStreak,
+    }));
+    const isShowSkeleton = isLoadingStreak || errorStreak;
+    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',
+                                    opacity: 1,
+                                    boxShadow: ' 0px 4px 16px -2px rgba(0, 0, 0, 0.14)',
+                                    borderRadius: '12px',
+                                },
+                                inner: {
+                                    borderRadius: '12px',
+                                    border: 'none',
+                                },
+                            }, classNames: { root: 'testRoot', inner: 'testInner' }, overlay: (0, jsx_runtime_1.jsxs)(StreakInfo, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'title', children: "Keep Your Daily Streak Going!" }), (0, jsx_runtime_1.jsxs)("ul", { className: 'description', children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2022 Visit an Opportunity:" }), "Explore one from the \"New Opportunities\" section to maintain your streak."] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2022 Share an Opportunity:" }), "Use the available sharing options to tell a friend and keep earning."] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2022 Reminder:" }), "Maintain your streak to increase your daily XP and reach exciting milestone bonuses!"] })] })] }), children: (0, jsx_runtime_1.jsx)("span", { style: {
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                }, children: (0, jsx_runtime_1.jsx)(TooltipSVGIcon, {}) }) })] })) })] }));
+};
+exports.default = UserStreak;

package/build/layouts/GlobalLayout.js

@@ -26,6 +26,7 @@ const GlobalLayout = ({ children }) => {
     (0, useFetchMyExperienceWithLevel_1.default)();
     (0, useMultiAudio_1.default)();
     (0, useAuthVerification_1.useAuthVerification)();
+    (0, useFetchMyExperienceWithLevel_1.default)();
     const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
     const envValue = NEXT_PUBLIC_ENV_VALUE !== 'prod' ? NEXT_PUBLIC_ENV_VALUE : '';
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(profileDataInitialization_1.ProfileDataInitialization, {}), (0, jsx_runtime_1.jsx)(envLine_1.default, { isNeedToShow: envValue }), (0, jsx_runtime_1.jsx)(globalStyles_1.default, {}), children, (0, jsx_runtime_1.jsx)(CreatorNotifications_1.CreatorNotifications, {}), (0, jsx_runtime_1.jsx)(screen_1.InitializeAppHeight, {}), (0, jsx_runtime_1.jsx)(SubscriberNotifications_1.SubscriberNotification, {}), (0, jsx_runtime_1.jsx)(Overlay_1.default, {}), (0, jsx_runtime_1.jsx)(initializer_1.SidebarInitializer, {}), (0, jsx_runtime_1.jsx)(Alert_1.default, {}), (0, jsx_runtime_1.jsx)(Modal_1.default, {}), (0, jsx_runtime_1.jsx)(ModalSidebar_1.default, {}), (0, jsx_runtime_1.jsx)(CreatorModalSidebarPortal_1.CreatorModalSidebarPortal, {}), (0, jsx_runtime_1.jsx)(sessionScroll_1.DeleteScrollStateInterceptor, {})] }));

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

@@ -3,6 +3,7 @@ import { ApolloError } from "@apollo/client";
 import { experiencesSchema as schema } from "@ludo.ninja/api";
 import { identitySchema } from "@ludo.ninja/api";
 import { ProfileEntity } from "@ludo.ninja/core";
+export declare const initialUserStreak: Omit<schema.IActivityStreak, 'userId'>;
 type TMyProfile = identitySchema.IFetchMyProfileV2Query["fetchMyProfileV2"];
 export interface IUserStore {
     user: IUser | null;
@@ -25,6 +26,13 @@ export interface IUserStore {
     setInviteCodes: (inviteCodes: identitySchema.IInviteCode[]) => void;
     myShareLink: string;
     setMyShareLink: (myShareLink: string) => void;
+    userStreak: Omit<schema.IActivityStreak, 'userId'>;
+    setUserStreak: (userStreak: Omit<schema.IActivityStreak, 'userId'>) => void;
+    resetUserStreak: () => void;
+    isLoadingStreak: boolean;
+    setIsLoadingStreak: (isLoadingStreak: boolean) => void;
+    errorStreak: ApolloError | undefined;
+    setErrorStreak: (isErrorStreak: ApolloError | undefined) => void;
 }
 export declare const UserProvider: ({ children, initialState }: {
     children: import("react").ReactNode;

package/build/modules/user/store.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUserStore = exports.UserProvider = void 0;
+exports.useUserStore = exports.UserProvider = exports.initialUserStreak = void 0;
 const core_1 = require("@ludo.ninja/core");
 const next_zustand_1 = require("next-zustand");
 const shallow_1 = require("zustand/shallow");
@@ -10,6 +10,11 @@ const initialUserExp = {
     levelMaxXps: 0,
     levelMinXps: 0,
 };
+exports.initialUserStreak = {
+    totalDays: 0,
+    nextStreak: 5,
+    nextBonus: 100,
+};
 const creators = (0, next_zustand_1.createProvider)()((setState) => ({
     user: null,
     isSignedIn: false,
@@ -72,6 +77,21 @@ const creators = (0, next_zustand_1.createProvider)()((setState) => ({
     setMyShareLink: (myShareLink) => {
         setState({ myShareLink });
     },
+    userStreak: exports.initialUserStreak,
+    setUserStreak: (userStreak) => {
+        setState({ userStreak });
+    },
+    resetUserStreak: () => {
+        setState({ userStreak: exports.initialUserStreak });
+    },
+    isLoadingStreak: false,
+    setIsLoadingStreak: (isLoadingStreak) => {
+        setState({ isLoadingStreak });
+    },
+    errorStreak: undefined,
+    setErrorStreak: (errorStreak) => {
+        setState({ errorStreak });
+    },
 }), shallow_1.shallow);
 exports.UserProvider = creators.Provider;
 exports.useUserStore = creators.getUseStore();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.2.40",
+  "version": "2.2.42",
   "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.0.26",
+    "@ludo.ninja/api": "^3.0.31",
     "@react-three/drei": "^9.68.3",
     "@react-three/fiber": "^8.13.0",
     "chart.js": "^4.4.3",
@@ -40,6 +40,7 @@
     "path-to-regexp": "^6.2.1",
     "prettier": "^2.7.1",
     "qs": "^6.12.1",
+    "rc-tooltip": "^6.3.1",
     "react": "^18.3.1",
     "react-cropper": "^2.1.8",
     "react-date-picker": "^11.0.0",