ui-soxo-bootstrap-core 2.4.25 → 2.5.0

package/core/lib/elements/basic/switch/switch.js

@@ -1,36 +1,46 @@
 /**
  * Component for antd switch
  */
-
-import React, { useState, useContext, useEffect } from 'react';
-import { GlobalContext } from '../../../Store';
-
+import React, { useContext } from 'react';
 import { Switch as AntdSwitch } from 'antd';
-
+import { GlobalContext } from '../../../Store';
 import PropTypes from 'prop-types';
 
-export default function Switch({ onChange, checked }) {
+export default function Switch({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  id,
+  size,
+  checkedChildren,
+  unCheckedChildren,
+  className,
+  style,
+}) {
   const { state } = useContext(GlobalContext);
 
-  useEffect(() => {
-    // Reacting to theme changes
-  }, [state.theme.colors]);
-
   return (
-    <div>
-      <>
-        <AntdSwitch
-          checked={checked}
-          onChange={onChange}
-          // checked={ }
-          style={{
-            backgroundColor: checked ? state.theme.colors.primaryButtonBg : state.theme.colors.primaryButtonDisabledBg, // Use disabled color when unchecked
-            borderColor: checked ? state.theme.colors.primaryButtonBg : state.theme.colors.primaryButtonDisabledBg,
-          }}
-          listType="picture-card"
-        />
-      </>
-    </div>
+    <AntdSwitch
+      id={id}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onChange={onChange}
+      disabled={disabled}
+      size={size}
+      checkedChildren={checkedChildren}
+      unCheckedChildren={unCheckedChildren}
+      className={className}
+      style={{
+        backgroundColor: checked
+          ? state.theme.colors.primaryButtonBg
+          : state.theme.colors.primaryButtonDisabledBg,
+        borderColor: checked
+          ? state.theme.colors.primaryButtonBg
+          : state.theme.colors.primaryButtonDisabledBg,
+        ...style,
+      }}
+    />
   );
 }
 

package/core/lib/hooks/index.js

@@ -1,19 +1,9 @@
-
-
-
 import useDeviceDetect from './device-detect';
 
 import useWindowSize from './use-window-size';
 
 import useFormUtils from './../utils/form/form.utils';
 import useLocation from './use-location';
+import { useOtpTimer } from './use-otp-timer';
 
-
-export {
-    useDeviceDetect,
-    useWindowSize,
-
-
-    useFormUtils,
-    useLocation
-}
+export { useDeviceDetect, useWindowSize, useOtpTimer, useFormUtils, useLocation };

package/core/lib/hooks/use-otp-timer.js

@@ -0,0 +1,80 @@
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * Custom hook to manage an OTP (One-Time Password) countdown timer.
+ *
+ * Features:
+ * - Can start a timer directly with seconds.
+ * - Can start a timer using an expiry timestamp (from backend).
+ * - Provides formatted remaining time (MM:SS).
+ * - Tracks whether the timer has expired.
+ *
+ * @returns {Object} API
+ * @returns {number} API.remaining - Remaining seconds.
+ * @returns {boolean} API.expired - Whether the timer has expired.
+ * @returns {string} API.formatted - Formatted remaining time (MM:SS).
+ * @returns {(seconds: number) => void} API.start - Start timer with seconds.
+ * @returns {(expirytime: string) => void} API.startFromExpiry - Start timer using expiry string (e.g. "2025-09-04T12:13:09.000Z").
+ *
+ */
+
+// helper to format time
+const formatTime = (seconds) => {
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+};
+
+export const useOtpTimer = () => {
+  const [remaining, setRemaining] = useState(0);
+  const [expired, setExpired] = useState(false);
+  const intervalRef = useRef(null);
+
+  // Start timer by passing expiry string from backend
+  const startFromExpiry = (expirytime) => {
+    if (!expirytime) {
+      setRemaining(0);
+      setExpired(true);
+      return;
+    }
+
+    // Handle backend expiry string
+    const expiryTime = new Date(expirytime).getTime();
+    const now = Date.now();
+    const seconds = Math.max(0, Math.floor((expiryTime - now) / 1000));
+
+    start(seconds);
+  };
+
+  // Generic start (seconds)
+  const start = (seconds) => {
+    clearInterval(intervalRef.current);
+
+    if (!seconds || seconds <= 0) {
+      setRemaining(0);
+      setExpired(true);
+      return;
+    }
+
+    setRemaining(seconds);
+    setExpired(false);
+
+    intervalRef.current = setInterval(() => {
+      setRemaining((prev) => {
+        if (prev <= 1) {
+          clearInterval(intervalRef.current);
+          setExpired(true);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+  };
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => clearInterval(intervalRef.current);
+  }, []);
+
+  return { remaining, expired, formatted: formatTime(remaining), start, startFromExpiry };
+};