ui-soxo-bootstrap-core 2.6.28 → 2.6.29

package/core/modules/steps/steps.js

@@ -5,6 +5,8 @@
  * - Dynamically renders step-specific components based on configuration.
  * - Tracks step and process durations with local persistence support.
  * - Supports step navigation (next, previous, skip, breadcrumb, keyboard).
+ * - Touchscreen support: horizontal swipe gestures navigate between steps
+ *   and transient left/right arrow buttons fade in on touch for discovery.
  * - Handles process submission and optional chaining to the next process.
  * - Renders a single active step view with compact breadcrumb controls.
  */
@@ -19,6 +21,21 @@ import { Button, Card, Location } from './../../lib';
 import { createOpenAIRealtimeSession, hasOpenAIRealtimeCredentials } from './openai-realtime';
 import './steps.scss';
 
+const TOUCH_NAV_HIDE_DELAY = 2800;
+const SWIPE_DISTANCE_THRESHOLD = 60;
+const SWIPE_VERTICAL_TOLERANCE = 80;
+
+/**
+ * First-step CTA labels keyed by normalized process name.
+ * - Keys are the lowercased/trimmed process name returned by the backend.
+ * - Missing keys fall back to the generic 'Next' label at the call site.
+ * - Frozen so accidental mutation during render doesn't leak across renders.
+ */
+const FIRST_STEP_LABELS = Object.freeze({
+  verification: 'Verify Profile',
+  consultation: 'Start Consultation',
+});
+
 const STEP_WELCOME_LINES = [
   'Welcome to your AI Automated Consultation process.',
   'You are in the right place for a smooth and guided health journey.',
@@ -273,6 +290,7 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
 
   const [loading, setLoading] = useState(false);
   const [steps, setSteps] = useState([]);
+  const [processName, setProcessName] = useState(null);
   const [activeStep, setActiveStep] = useState(0);
   const [isStepCompleted, setIsStepCompleted] = useState(false);
 
@@ -300,6 +318,8 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
   const [showNextProcessAction, setShowNextProcessAction] = useState(false);
   const [isStepFullscreen, setIsStepFullscreen] = useState(false);
   const [realtimeStatus, setRealtimeStatus] = useState('idle');
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+  const [touchNavVisible, setTouchNavVisible] = useState(false);
 
   const narrationUtteranceRef = useRef(null);
   const narrationAudioRef = useRef(null);
@@ -307,6 +327,8 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
   const narrationFallbackNoticeRef = useRef(false);
   const realtimeSessionRef = useRef(null);
   const fullscreenViewportRef = useRef(null);
+  const touchStartRef = useRef(null);
+  const touchNavHideTimeoutRef = useRef(null);
 
   const urlParams = Location.search();
   const isConsultationMode = String(urlParams?.consultation).toLowerCase() === 'true';
@@ -336,6 +358,40 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
     setShowNextProcessAction(false);
   }, [currentProcessId]);
 
+  /**
+   * Sync the loaded process name into the address bar.
+   * - Mirrors `processName` into a `process` query parameter so deep-links and
+   *   refreshes carry the human-readable process label.
+   * - Uses `window.history.replaceState` to avoid a navigation event, which
+   *   keeps React Router state and component instances stable.
+   * - Removes the param when `processName` is null/empty so stale values do
+   *   not linger after a process clears.
+   */
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const trimmedName = typeof processName === 'string' ? processName.trim() : '';
+
+    if (trimmedName) {
+      if (params.get('process') === trimmedName) {
+        return;
+      }
+      params.set('process', trimmedName);
+    } else {
+      if (!params.has('process')) {
+        return;
+      }
+      params.delete('process');
+    }
+
+    const search = params.toString();
+    const newUrl = `${window.location.pathname}${search ? `?${search}` : ''}${window.location.hash || ''}`;
+    window.history.replaceState(window.history.state, '', newUrl);
+  }, [processName]);
+
   //// Reset step start time whenever the active step changes
 
   useEffect(() => {
@@ -506,6 +562,7 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
       const result = await Dashboard.loadProcess(processId);
 
       setSteps(result?.data?.steps || []);
+      setProcessName(result?.data?.process_name ?? null);
       if (result?.data?.next_process_id) setNextProcessId(result.data);
     } catch (e) {
       console.error('Error loading process steps:', e);
@@ -1027,7 +1084,19 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
    * - Passes configuration, parameters, and handlers to the component.
    * - Handles missing steps or components gracefully.
    */
-  const DynamicComponent = () => {
+  /**
+   * Render the active step's dynamic component.
+   *
+   * Intentionally a plain function (not a component) called inline as
+   * `{renderDynamicStep()}`. Defining it as a component inside the parent's
+   * render body creates a fresh component *type* on every re-render — React
+   * then unmounts and remounts the step component on every parent state
+   * change (touchNavVisible, stepSlideDirection, activeStep timer, etc.),
+   * which caused visible re-render/jitter during swipe navigation. Evaluating
+   * it as a function just yields JSX for the real step Component, whose type
+   * is stable, so React reconciles in place.
+   */
+  const renderDynamicStep = () => {
     const step = steps[activeStep];
     if (!step) return <Empty description="No step selected" />;
 
@@ -1065,6 +1134,128 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
     };
   }, [activeStep, steps, externalWin]);
 
+  /**
+   * Touch-device detection.
+   * - Runs once on mount.
+   * - Uses `matchMedia('(pointer: coarse)')` as the primary signal because it
+   *   targets the actual input hardware (covers touch laptops correctly) and
+   *   falls back to `ontouchstart` / `navigator.maxTouchPoints` for older
+   *   browsers.
+   * - When neither signal matches, the effect bails out and `isTouchDevice`
+   *   stays false so desktop renders without any touch-only UI.
+   */
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    const hasCoarsePointer = typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches;
+    const hasTouch = 'ontouchstart' in window || (typeof navigator !== 'undefined' && navigator.maxTouchPoints > 0);
+
+    if (!hasCoarsePointer && !hasTouch) {
+      return undefined;
+    }
+
+    setIsTouchDevice(true);
+  }, []);
+
+  /**
+   * Show the floating prev/next arrow buttons and reset their auto-hide timer.
+   * - Any pending hide timeout is cleared so a rapid sequence of touches keeps
+   *   the arrows on-screen continuously instead of flickering.
+   * - A fresh timeout is scheduled for TOUCH_NAV_HIDE_DELAY so the arrows fade
+   *   away once the user stops interacting, keeping the step content clear.
+   */
+  const revealTouchNav = () => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    setTouchNavVisible(true);
+
+    if (touchNavHideTimeoutRef.current) {
+      window.clearTimeout(touchNavHideTimeoutRef.current);
+    }
+
+    touchNavHideTimeoutRef.current = window.setTimeout(() => {
+      setTouchNavVisible(false);
+      touchNavHideTimeoutRef.current = null;
+    }, TOUCH_NAV_HIDE_DELAY);
+  };
+
+  /**
+   * onTouchStart for the stage body.
+   * - Records the initial touch position so handleStageTouchEnd can measure
+   *   the swipe delta.
+   * - Also reveals the side arrows immediately, giving the user a visible
+   *   navigation affordance as soon as they touch the screen.
+   */
+  const handleStageTouchStart = (event) => {
+    if (!isTouchDevice || !event.touches || !event.touches.length) {
+      return;
+    }
+
+    const touch = event.touches[0];
+    touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+    revealTouchNav();
+  };
+
+  /**
+   * onTouchEnd for the stage body.
+   * - Computes the horizontal/vertical delta against the stored touch origin.
+   * - Ignores gestures that are vertical-dominant or below the distance
+   *   threshold, so normal scrolling and short taps are not hijacked.
+   * - A left swipe advances to the next step (subject to the same
+   *   `isStepCompleted` / final-step rules as the visible Next button); a
+   *   right swipe goes back. Each successful swipe re-reveals the arrows so
+   *   the user can continue tapping if they prefer.
+   */
+  const handleStageTouchEnd = (event) => {
+    const start = touchStartRef.current;
+    touchStartRef.current = null;
+
+    if (!start || !event.changedTouches || !event.changedTouches.length) {
+      return;
+    }
+
+    const touch = event.changedTouches[0];
+    const deltaX = touch.clientX - start.x;
+    const deltaY = touch.clientY - start.y;
+
+    if (Math.abs(deltaY) > Math.abs(deltaX)) {
+      return;
+    }
+    if (Math.abs(deltaX) < SWIPE_DISTANCE_THRESHOLD) {
+      return;
+    }
+    if (Math.abs(deltaY) > SWIPE_VERTICAL_TOLERANCE) {
+      return;
+    }
+
+    if (deltaX < 0) {
+      const isFinalStep = steps[activeStep]?.order_seqtype === 'E';
+      if (!isFinalStep && isStepCompleted && activeStep < steps.length - 1) {
+        handleNext();
+        revealTouchNav();
+      }
+    } else if (activeStep > 0) {
+      handlePrevious();
+      revealTouchNav();
+    }
+  };
+
+  /**
+   * Cleanup any pending auto-hide timeout on unmount so the callback cannot
+   * fire against a stale component and emit a React warning.
+   */
+  useEffect(() => {
+    return () => {
+      if (typeof window !== 'undefined' && touchNavHideTimeoutRef.current) {
+        window.clearTimeout(touchNavHideTimeoutRef.current);
+      }
+    };
+  }, []);
+
   useEffect(() => {
     if (typeof document === 'undefined') {
       return undefined;
@@ -1180,12 +1371,12 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
               </div>
 
               <div className="steps-nav-actions">
-                <Button icon={isStepFullscreen ? <CompressOutlined /> : <ExpandOutlined />} onClick={toggleStepFullscreen}>
+                <Button type="dashed" icon={isStepFullscreen ? <CompressOutlined /> : <ExpandOutlined />} onClick={toggleStepFullscreen}>
                   {isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
                 </Button>
 
                 {activeStep > 0 && (
-                  <Button icon={<ArrowLeftOutlined />} onClick={handlePrevious}>
+                  <Button type="default" icon={<ArrowLeftOutlined />} onClick={handlePrevious}>
                     Back
                   </Button>
                 )}
@@ -1219,14 +1410,77 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                   </>
                 ) : (
                   <Button type="primary" disabled={!isStepCompleted} onClick={handleNext}>
-                    {activeStep === 0 ? 'Start Consultation' : 'Next'} <ArrowRightOutlined />
+                    {/*
+                      First-step label is resolved via FIRST_STEP_LABELS using
+                      the process name (lowercased + trimmed) as the key. Known
+                      processes get a tailored CTA (e.g. "Verify Profile",
+                      "Start Consultation"); unknown processes fall back to the
+                      generic "Next" label. All non-first steps always render
+                      "Next".
+                    */}
+                    {activeStep === 0 ? (FIRST_STEP_LABELS[processName?.trim().toLowerCase()] ?? 'Next') : 'Next'}{' '}
+                    <ArrowRightOutlined />
                   </Button>
                 )}
               </div>
             </div>
 
             <div className={`steps-content-panel${isStepFullscreen ? ' is-fullscreen' : ''}`}>
-              <div className="steps-stage-body">
+              {/*
+                Stage body:
+                - `is-swipe-enabled` applies `touch-action: pan-y` so horizontal
+                  gestures reach our handlers while vertical scrolling remains
+                  native.
+                - Touch handlers are only attached on touch devices to keep
+                  desktop event trees untouched.
+              */}
+              <div
+                className={`steps-stage-body${isTouchDevice ? ' is-swipe-enabled' : ''}`}
+                onTouchStart={isTouchDevice ? handleStageTouchStart : undefined}
+                onTouchEnd={isTouchDevice ? handleStageTouchEnd : undefined}
+              >
+                {/*
+                  Floating prev/next arrow buttons.
+                  - Rendered only on touch devices; `is-visible` class drives
+                    the fade-in/out via CSS transitions.
+                  - Disabled states mirror the visible Next/Back buttons in the
+                    top bar: previous disabled on the first step; next disabled
+                    on the last/final step or when the current step still
+                    requires user completion (isStepCompleted === false).
+                  - Clicking either button reveals the arrows again so the
+                    auto-hide timer restarts after every interaction.
+                */}
+                {isTouchDevice ? (
+                  <>
+                    <button
+                      type="button"
+                      className={`steps-touch-nav steps-touch-nav-left${touchNavVisible ? ' is-visible' : ''}`}
+                      aria-label="Previous step"
+                      disabled={activeStep === 0}
+                      onClick={() => {
+                        revealTouchNav();
+                        if (activeStep > 0) handlePrevious();
+                      }}
+                    >
+                      <ArrowLeftOutlined />
+                    </button>
+                    <button
+                      type="button"
+                      className={`steps-touch-nav steps-touch-nav-right${touchNavVisible ? ' is-visible' : ''}`}
+                      aria-label="Next step"
+                      disabled={activeStep >= steps.length - 1 || steps[activeStep]?.order_seqtype === 'E' || !isStepCompleted}
+                      onClick={() => {
+                        revealTouchNav();
+                        const isFinalStep = steps[activeStep]?.order_seqtype === 'E';
+                        if (!isFinalStep && isStepCompleted && activeStep < steps.length - 1) {
+                          handleNext();
+                        }
+                      }}
+                    >
+                      <ArrowRightOutlined />
+                    </button>
+                  </>
+                ) : null}
                 <div
                   key={`${currentProcessId}_${activeStep}`}
                   className={`steps-chat-step-card ${stepSlideDirection === 'backward' ? 'slide-backward' : 'slide-forward'}`}
@@ -1245,7 +1499,7 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                         <Spin />
                       </div>
                     ) : null}
-                    {!loading ? <DynamicComponent /> : null}
+                    {!loading ? renderDynamicStep() : null}
                   </div>
                 </div>
               </div>

package/core/modules/steps/steps.scss

@@ -315,6 +315,177 @@
   overflow: hidden;
   padding: 10px 14px;
   box-sizing: border-box;
+  position: relative;
+}
+
+.steps-stage-body.is-swipe-enabled {
+  touch-action: pan-y;
+}
+
+/* ── Touch-device floating nav arrows ───────────────────── */
+
+.steps-touch-nav {
+  position: absolute;
+  top: 50%;
+  z-index: 6;
+  width: 52px;
+  height: 52px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(30, 58, 138, 0.55);
+  backdrop-filter: blur(8px) saturate(140%);
+  -webkit-backdrop-filter: blur(8px) saturate(140%);
+  color: #ffffff;
+  font-size: 18px;
+  cursor: pointer;
+  box-shadow:
+    0 10px 24px rgba(15, 23, 42, 0.22),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-50%) scale(0.82);
+  transition:
+    opacity 260ms ease,
+    transform 260ms cubic-bezier(0.2, 0.8, 0.25, 1),
+    visibility 0s linear 260ms,
+    background-color 200ms ease,
+    box-shadow 200ms ease;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+/*
+  Decorative pulsing ring around the button.
+  - Drawn via ::before so it does not interfere with click targets.
+  - Only animates while the button is visible and enabled, to keep the
+    idle state calm instead of visually noisy.
+*/
+.steps-touch-nav::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.45);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.steps-touch-nav.is-visible:not(:disabled)::before {
+  animation: steps-touch-nav-ring 2.4s ease-out infinite;
+}
+
+/*
+  Radial wash behind the icon for depth.
+  - Keeps the icon glyph crisp against varied content backgrounds.
+*/
+.steps-touch-nav::after {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 65%);
+  pointer-events: none;
+}
+
+.steps-touch-nav .anticon {
+  position: relative;
+  z-index: 1;
+  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.25));
+}
+
+.steps-touch-nav:hover:not(:disabled),
+.steps-touch-nav:focus-visible:not(:disabled) {
+  background: rgba(30, 58, 138, 0.92);
+  box-shadow:
+    0 14px 30px rgba(15, 23, 42, 0.32),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
+  outline: none;
+}
+
+.steps-touch-nav:hover:not(:disabled),
+.steps-touch-nav:focus-visible:not(:disabled),
+.steps-touch-nav.is-visible:hover:not(:disabled),
+.steps-touch-nav.is-visible:focus-visible:not(:disabled) {
+  opacity: 1;
+}
+
+.steps-touch-nav:active:not(:disabled) {
+  transform: translateY(-50%) scale(0.94);
+  transition:
+    transform 120ms ease,
+    opacity 120ms ease,
+    background-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.steps-touch-nav:disabled {
+  background: rgba(148, 163, 184, 0.38);
+  color: rgba(255, 255, 255, 0.7);
+  cursor: not-allowed;
+  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.steps-touch-nav:disabled::after {
+  display: none;
+}
+
+.steps-touch-nav-left {
+  left: 14px;
+}
+
+.steps-touch-nav-right {
+  right: 14px;
+}
+
+.steps-touch-nav.is-visible {
+  opacity: 0.68;
+  visibility: visible;
+  transform: translateY(-50%) scale(1);
+  transition:
+    opacity 260ms ease,
+    transform 260ms cubic-bezier(0.2, 0.8, 0.25, 1),
+    visibility 0s linear 0s,
+    background-color 200ms ease,
+    box-shadow 200ms ease;
+}
+
+@keyframes steps-touch-nav-ring {
+  0% {
+    opacity: 0.55;
+    transform: scale(1);
+  }
+
+  65% {
+    opacity: 0;
+    transform: scale(1.45);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.45);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .steps-touch-nav {
+    transition: opacity 120ms linear, visibility 0s linear 120ms;
+    transform: translateY(-50%);
+  }
+
+  .steps-touch-nav.is-visible {
+    transform: translateY(-50%);
+    transition: opacity 120ms linear, visibility 0s linear 0s;
+  }
+
+  .steps-touch-nav.is-visible:not(:disabled)::before {
+    animation: none;
+  }
 }
 
 .steps-stage-body::-webkit-scrollbar {
@@ -665,6 +836,20 @@
   .steps-narration-bar {
     padding: 8px 12px;
   }
+
+  .steps-touch-nav {
+    width: 44px;
+    height: 44px;
+    font-size: 16px;
+  }
+
+  .steps-touch-nav-left {
+    left: 8px;
+  }
+
+  .steps-touch-nav-right {
+    right: 8px;
+  }
 }
 
 /* ── Reduced motion ─────────────────────────────────────── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.28",
+  "version": "2.6.29",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"