kupos-ui-components-lib 9.3.2 → 9.3.4

package/src/utils/CommonService.ts

@@ -308,6 +308,92 @@ const commonService = {
 
     return { originalPrice: price, discountedPrice };
   },
+
+  startViewerCount: (
+    node: HTMLSpanElement | null,
+    viewersConfig?: { min: number; max: number; interval?: number },
+  ) => {
+    if (!node || !viewersConfig) return;
+
+    const prevId = node.dataset.viewerId;
+    if (prevId) clearInterval(Number(prevId));
+
+    const { min, max, interval = 5000 } = viewersConfig;
+    const clamp = (v: number) => Math.min(max, Math.max(min, v));
+    const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
+
+    node.textContent = String(initialValue);
+
+    const id = setInterval(() => {
+      const current = Number(node.textContent) || initialValue;
+      const delta = Math.ceil(current * 0.2);
+      const next =
+        current + Math.floor(Math.random() * (2 * delta + 1)) - delta;
+      node.textContent = String(clamp(Math.round(next)));
+    }, interval);
+
+    node.dataset.viewerId = String(id);
+  },
+
+  startCountdown: (
+    node: HTMLSpanElement | null,
+    countdownSeconds: number = 599,
+  ) => {
+    if (!node) return;
+
+    const prevId = node.dataset.countdownId;
+    if (prevId) clearInterval(Number(prevId));
+
+    let remaining = countdownSeconds * 1000; // Convert to milliseconds
+
+    const formatTime = (totalMs: number) => {
+      const m = Math.floor(totalMs / 60000);
+      const s = Math.floor((totalMs % 60000) / 1000);
+      const ms = Math.floor((totalMs % 1000) / 10); // Show 2 digits for milliseconds
+      return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}:${String(ms).padStart(2, "0")}`;
+    };
+
+    node.textContent = formatTime(remaining);
+
+    const id = setInterval(() => {
+      remaining -= 100; // Decrease by 100ms
+      if (remaining <= 0) {
+        remaining = countdownSeconds * 1000;
+      }
+      node.textContent = formatTime(remaining);
+    }, 100); // Update every 100ms
+
+    node.dataset.countdownId = String(id);
+  },
+
+  startComprandoCount: (
+    node: HTMLSpanElement | null,
+    min: number = 4,
+    max: number = 16,
+  ) => {
+    if (!node) return;
+
+    const prevId = node.dataset.comprandoId;
+    if (prevId) clearInterval(Number(prevId));
+
+    const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
+    node.textContent = String(initialValue);
+
+    const id = setInterval(() => {
+      const current = Number(node.textContent) || initialValue;
+      const changePercent = 0.05; // 5% change
+      const change = Math.ceil(current * changePercent);
+      const direction = Math.random() > 0.5 ? 1 : -1;
+      let next = current + (change * direction);
+
+      // Clamp within min and max
+      next = Math.min(max, Math.max(min, next));
+
+      node.textContent = String(next);
+    }, 5000); // Update every 5 seconds
+
+    node.dataset.comprandoId = String(id);
+  },
 };
 
 export default commonService;