Merge pull request #295 from ury-erp/fix/redirect-to-setup-wizard

Fix/redirect to setup wizard

Author: shzdb

frontend/index.html

@@ -13,6 +13,7 @@
     <div id="root"></div>
     <script>
       window.csrf_token = "{{ csrf_token }}";
+      window.dev_server = {{ dev_server or 0 }};
       if (!window.frappe) window.frappe = {};
       window.app_name = "{{ app_name }}";
       frappe.boot = JSON.parse({{ boot }});

frontend/src/components/setup/ProgressModal.tsx

@@ -9,35 +9,80 @@ interface ProgressModalProps {
   error?: string | null;
   steps?: string[];
   eventName?: string;
+  description?: string;
   onStepChange?: (index: number) => void;
   /** Called after the realtime subscription is attached — start the API call here */
   onReady?: () => void;
+  /** Frappe setup_task status === "ok" (background setup) */
+  onComplete?: () => void;
+  onFail?: (message: string) => void;
+}
+
+type SetupTaskPayload = {
+  step?: number;
+  status?: string;
+  progress?: [number, number];
+  stage_status?: string;
+  fail_msg?: string;
+  message?: SetupTaskPayload;
+};
+
+function unwrapPayload(data: unknown): SetupTaskPayload {
+  if (!data || typeof data !== 'object') {
+    return {};
+  }
+  const obj = data as SetupTaskPayload;
+  if (obj.message && typeof obj.message === 'object') {
+    return obj.message;
+  }
+  return obj;
 }
 
 export function ProgressModal({
   visible,
   activeIndex,
   error,
   steps = PROGRESS_STEPS,
-  eventName = 'ury_setup_progress',
+  eventName = 'setup_task',
+  description = 'Setting things up, this usually takes less than a minute.',
   onStepChange,
   onReady,
+  onComplete,
+  onFail,
 }: ProgressModalProps) {
-  // Keep onStepChange stable in a ref so the socket handler closure doesn't
-  // capture a stale version on every render.
   const onStepChangeRef = useRef(onStepChange);
   const onReadyRef = useRef(onReady);
+  const onCompleteRef = useRef(onComplete);
+  const onFailRef = useRef(onFail);
   useEffect(() => {
     onStepChangeRef.current = onStepChange;
     onReadyRef.current = onReady;
+    onCompleteRef.current = onComplete;
+    onFailRef.current = onFail;
   });
 
   useEffect(() => {
     if (!visible) return;
 
     const handler = (data: unknown) => {
-      const payload = data as { step?: number; status?: string };
-      if (typeof payload?.step !== 'number') return;
+      const payload = unwrapPayload(data);
+
+      if (payload.fail_msg || payload.status === 'fail') {
+        onFailRef.current?.(payload.fail_msg || 'Setup failed');
+        return;
+      }
+
+      if (payload.status === 'ok') {
+        onCompleteRef.current?.();
+        return;
+      }
+
+      if (Array.isArray(payload.progress) && typeof payload.progress[0] === 'number') {
+        onStepChangeRef.current?.(payload.progress[0]);
+        return;
+      }
+
+      if (typeof payload.step !== 'number') return;
 
       if (payload.status === 'loading') {
         onStepChangeRef.current?.(payload.step);
@@ -46,17 +91,11 @@ export function ProgressModal({
       }
     };
 
-    // Subscribe first, then signal the parent that it is safe to start the
-    // backend API call.  subscribeRealtimeEvent is async internally (connects
-    // the socket then calls .on()), but it registers the handler synchronously
-    // on the socket once the connection resolves.  We call onReady() after
-    // kicking off the subscription so the caller can await the socket before
-    // starting the API.  subscribeRealtimeEvent returns a cleanup fn.
     const unsubscribe = subscribeRealtimeEvent(eventName, handler, () => {
       onReadyRef.current?.();
     });
+
     return unsubscribe;
-    // Re-subscribe only if the event name changes or visibility toggles
   }, [visible, eventName]);
 
   if (!visible) return null;
@@ -69,7 +108,7 @@ export function ProgressModal({
 
         {/* Segmented Top Bar */}
         <div className="flex px-10 pt-10 pb-6 gap-1">
-          {Array.from({ length: totalSteps }).map((_, i) => {
+          {Array.from({ length: Math.max(totalSteps, 1) }).map((_, i) => {
             const segmentProgress = i <= activeIndex ? 'bg-primary' : 'bg-gray-200';
             return (
               <div key={i} className={`flex-1 h-1.5 rounded-full ${segmentProgress}`} />
@@ -80,16 +119,16 @@ export function ProgressModal({
         <div className="px-10 pb-8">
           <h2 className="text-2xl font-semibold text-foreground mb-1">Setting up your restaurant</h2>
           <p className="text-sm text-muted-foreground mb-6">
-            Setting things up ,this usually takes less than a minute.
+            {description}
           </p>
 
-          <div className="flex flex-col mb-4">
+          <div className="flex flex-col mb-4 max-h-[50vh] overflow-y-auto">
             {steps.map((step, idx) => {
               const isDone = idx < activeIndex;
               const isActive = idx === activeIndex;
 
               return (
-                <div key={idx} className="flex items-center gap-4 py-3 border-b border-gray-100 last:border-0 h-12">
+                <div key={idx} className="flex items-center gap-4 py-3 border-b border-gray-100 last:border-0 min-h-12">
                   <div className="w-6 h-6 flex items-center justify-center shrink-0">
                     {isDone ? (
                       <CheckCircle2 className="w-6 h-6 text-white fill-green-500" />

frontend/src/components/setup/WizardLayout.tsx

@@ -54,7 +54,7 @@ export function WizardLayout({
       </main>
 
       {/* Footer nav bar */}
-      <footer className="w-full border-t border-border bg-card sticky bottom-0 h-12 flex items-center">
+      <footer className="py-6 w-full border-t border-border bg-card sticky bottom-0 flex items-center">
         <div className={`${SHELL_WIDTH} w-full h-full flex items-center justify-between gap-4`}>
           <div className="flex items-center h-full">
             {step === 2 && onPrev && (

frontend/src/lib/realtimeClient.ts

@@ -4,35 +4,51 @@
  * The /ury SPA is a standalone Vite bundle that does NOT load Frappe's own
  * socketio_client.js, so `window.frappe.realtime` is never initialised here.
  * Instead we create a Socket.IO connection directly to the Frappe realtime
- * server, mirroring the pattern used in the URY POS (pos/src/lib/realtime.ts).
+ * server, mirroring Frappe desk's get_host() (including the dedicated
+ * socketio_port used by `bench start`).
  *
  * The site name is taken from `frappe.boot.sitename` which is injected into
  * index.html at request time:
  *   frappe.boot = JSON.parse({{ boot }});
- *
- * Socket events published via `frappe.publish_realtime(event, payload, user=…)`
- * on the backend are delivered directly as socket.io events with the same name.
  */
 
 import { io, type Socket } from 'socket.io-client';
 
 let socket: Socket | null = null;
 let connectPromise: Promise<Socket> | null = null;
 
-function getSiteName(): string {
+function getBoot(): Record<string, any> {
   try {
-    return (window as any).frappe?.boot?.sitename ?? '';
+    return (window as any).frappe?.boot ?? {};
   } catch {
-    return '';
+    return {};
   }
 }
 
+function getSiteName(): string {
+  return getBoot().sitename ?? '';
+}
+
+/**
+ * Same rules as frappe/public/js/frappe/socketio_client.js get_host():
+ * on the dev server, socket.io listens on boot.socketio_port (usually 9000),
+ * not on the web port.
+ */
 function buildSocketUrl(): string {
+  const boot = getBoot();
   const siteName = getSiteName();
-  const { protocol, hostname, port } = window.location;
-  const base = port ? `${protocol}//${hostname}:${port}` : `${protocol}//${hostname}`;
-  // Frappe namespaces the socket per-site
-  return siteName ? `${base}/${siteName}` : base;
+  const { protocol, hostname } = window.location;
+  const devServer = Boolean((window as any).dev_server);
+  const socketioPort = boot.socketio_port;
+
+  let host = `${protocol}//${hostname}`;
+  if (devServer && socketioPort) {
+    host = `${protocol}//${hostname}:${socketioPort}`;
+  } else if (window.location.port) {
+    host = `${protocol}//${hostname}:${window.location.port}`;
+  }
+
+  return siteName ? `${host}/${siteName}` : host;
 }
 
 /**
@@ -116,4 +132,3 @@ export function subscribeRealtimeEvent(
     activeSocket?.off(eventName, handler);
   };
 }
-