@ludo.ninja/components 2.4.21 → 2.4.22

package/build/hooks/marker-io/index.d.ts

@@ -0,0 +1,16 @@
+import { type MarkerReporter, type MarkerSdk } from '@marker.io/browser';
+export declare const useMarkerIo: (mode?: "prod" | "dev") => {
+    loadMarkerSDK: () => Promise<void>;
+    unloadMarkerSDK: () => void;
+    clearReporter: () => void;
+    updateReporterInfo: (reporter: MarkerReporter) => void;
+    updateCustomData: () => void;
+    setProjectId: import("react").Dispatch<import("react").SetStateAction<string>>;
+    projectId: string;
+    eventLog: string;
+    setCustomDataRaw: import("react").Dispatch<import("react").SetStateAction<string>>;
+    customDataInvalid: boolean;
+    customDataRaw: string;
+    loaded: boolean;
+    widget: MarkerSdk | null;
+};

package/build/hooks/marker-io/index.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMarkerIo = void 0;
+const browser_1 = __importDefault(require("@marker.io/browser"));
+const react_1 = require("react");
+const useMarkerIo = (mode = 'prod') => {
+    const [widget, setWidget] = (0, react_1.useState)(null);
+    const [eventLog, setEventLog] = (0, react_1.useState)('');
+    const [projectId, setProjectId] = (0, react_1.useState)(mode === 'prod' ? '6909097dfc7751c05ae1bb9f' : '690909d2c42a324667c29bcb');
+    const [customDataObject, setCustomDataObject] = (0, react_1.useState)({
+        project: 'Ludo',
+    });
+    const [customDataInvalid, setCustomDataInvalid] = (0, react_1.useState)(false);
+    const [customDataRaw, setCustomDataRaw] = (0, react_1.useState)('');
+    async function loadMarkerSDK() {
+        const widget = await browser_1.default.loadWidget({
+            project: projectId,
+        });
+        setWidget(widget);
+        const MarkerEventNames = [
+            'load',
+            'loaderror',
+            'beforeunload',
+            'show',
+            'hide',
+            'capture',
+            'feedbackbeforesend',
+            'feedbacksent',
+            'feedbackerror',
+            'feedbackdiscarded',
+        ];
+        const events = [...MarkerEventNames];
+        for (const eventName of events) {
+            widget.on(eventName, () => {
+                setEventLog((prev) => prev + `Event "${eventName}"\n`);
+            });
+        }
+    }
+    function unloadMarkerSDK() {
+        widget?.unload();
+        setWidget(null);
+    }
+    function updateReporterInfo(reporter) {
+        widget?.setReporter(reporter);
+    }
+    function clearReporter() {
+        widget?.setReporter({ email: '', fullName: '' });
+    }
+    function updateCustomData() {
+        try {
+            setCustomDataObject(JSON.parse(customDataRaw));
+            setCustomDataInvalid(false);
+        }
+        catch {
+            setCustomDataInvalid(true);
+        }
+        widget?.setCustomData(customDataObject);
+    }
+    const loaded = (0, react_1.useMemo)(() => !!widget, [widget]);
+    return {
+        loadMarkerSDK,
+        unloadMarkerSDK,
+        clearReporter,
+        updateReporterInfo,
+        updateCustomData,
+        setProjectId,
+        projectId,
+        eventLog,
+        setCustomDataRaw,
+        customDataInvalid,
+        customDataRaw,
+        loaded,
+        widget,
+    };
+};
+exports.useMarkerIo = useMarkerIo;

package/build/layouts/AppLayout.js

@@ -3,18 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const apollo_1 = require("../hooks/apollo");
+const marker_io_1 = require("../hooks/marker-io");
+const useGlobalRefCode_1 = require("../hooks/refCode/useGlobalRefCode");
 const GlobalLayout_1 = require("./GlobalLayout");
 const HOCAuthSearchParamsLocalhostInterceptor_1 = require("../modules/user/auth/HOCAuthSearchParamsLocalhostInterceptor");
 const store_1 = require("../modules/user/store");
+const env_1 = require("../store/env");
 const index_1 = require("../store/index");
 const ui_1 = require("../store/ui");
 const client_1 = require("@apollo/client");
+const react_1 = require("react");
 const styled_components_1 = require("styled-components");
-const useGlobalRefCode_1 = require("../hooks/refCode/useGlobalRefCode");
 const AppLayoutProviders = ({ children, pageProps }) => {
     const apolloClient = (0, apollo_1.useApollo)(pageProps);
     const theme = (0, ui_1.useUiStore)((state) => state.theme);
     (0, useGlobalRefCode_1.useGlobalRefCode)();
+    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
+    const { loadMarkerSDK } = (0, marker_io_1.useMarkerIo)(isProd() ? "prod" : "dev");
+    (0, react_1.useEffect)(() => {
+        loadMarkerSDK();
+    }, []);
     return ((0, jsx_runtime_1.jsx)(index_1.SSRProvider, { initialState: {
             isMobile: pageProps.isMobile,
         }, children: (0, jsx_runtime_1.jsx)(client_1.ApolloProvider, { client: apolloClient, children: (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(store_1.UserProvider, { initialState: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.4.21",
+  "version": "2.4.22",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@ludo.ninja/api": "^3.2.48",
+    "@marker.io/browser": "^0.19.0",
     "@next/third-parties": "^15.3.4",
     "@react-three/drei": "^9.68.3",
     "@react-three/fiber": "^8.13.0",