Implement Telegram bot token configuration in onboarding process, including UI updates for token input and validation. Enhance backend services to handle Telegram configuration updates and ensure proper integration with existing settings. Update localization files for new onboarding strings related to Telegram.

Author: Cohen, Yohay

client/src/components/onboarding/OnboardingWizard.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
 import {
     ArrowLeft,
     ArrowRight,
@@ -12,11 +13,10 @@ import {
     FolderOpen,
     X
 } from 'lucide-react';
-import { ONBOARDING_STEP_COUNT } from '../../hooks/useOnboardingState';
 import { useOnboarding } from '../../contexts/OnboardingContext';
 import { useAppLockStatus, useSetupAppLock } from '../../hooks/useAppLock';
 import { useEnvConfig, useUpdateEnvConfig, useRestartServer } from '../../hooks/useConfig';
-import { getGoogleOAuthCallbackUrl } from '../../lib/api';
+import { getApiRoot, getGoogleOAuthCallbackUrl } from '../../lib/api';
 
 export function OnboardingWizard() {
     const { t } = useTranslation();
@@ -42,8 +42,20 @@ export function OnboardingWizard() {
     const [googleSecret, setGoogleSecret] = useState('');
     const [redirectUri, setRedirectUri] = useState('');
     const [driveFolder, setDriveFolder] = useState('');
+    const [telegramToken, setTelegramToken] = useState('');
     const [envDirty, setEnvDirty] = useState(false);
     const [saveError, setSaveError] = useState<string | null>(null);
+    const [isSavingTelegram, setIsSavingTelegram] = useState(false);
+
+    const { data: telegramConfig } = useQuery({
+        queryKey: ['telegramConfig', 'onboarding'],
+        queryFn: async () => {
+            const res = await fetch(`${getApiRoot()}/telegram/config`);
+            const data = await res.json();
+            return data.data as { botToken?: string } | undefined;
+        },
+        enabled: step === 0
+    });
 
     useEffect(() => {
         if (!envConfig || envLoading) return;
@@ -55,6 +67,13 @@ export function OnboardingWizard() {
         setDriveFolder(envConfig.DRIVE_FOLDER_ID || '');
     }, [envConfig, envLoading]);
 
+    useEffect(() => {
+        const tok = telegramConfig?.botToken;
+        if (tok && !tok.startsWith('***')) {
+            setTelegramToken(tok);
+        }
+    }, [telegramConfig]);
+
     useEffect(() => {
         if (step === 3 && !redirectUri) {
             setRedirectUri(getGoogleOAuthCallbackUrl());
@@ -63,10 +82,67 @@ export function OnboardingWizard() {
 
     const defaultRedirect = getGoogleOAuthCallbackUrl();
 
+    /** Drive folder step only when Google OAuth client ID is set (saved or in form). */
+    const showDriveStep = useMemo(() => {
+        const fromEnv = envConfig?.GOOGLE_CLIENT_ID?.trim() || '';
+        const fromForm = googleId.trim();
+        return Boolean(fromEnv || fromForm);
+    }, [envConfig?.GOOGLE_CLIENT_ID, googleId]);
+
+    const totalWizardSteps = showDriveStep ? 6 : 5;
+    const progressCurrent =
+        showDriveStep || step < 4 ? Math.min(step + 1, totalWizardSteps) : totalWizardSteps;
+
+    const advanceAfterGoogleStep = () => {
+        if (!showDriveStep) {
+            setStep(5);
+        } else {
+            nextStep();
+        }
+    };
+
+    const onboardingPrevStep = () => {
+        if (step === 5 && !showDriveStep) {
+            setStep(3);
+        } else {
+            prevStep();
+        }
+    };
+
+    useLayoutEffect(() => {
+        if (step === 4 && !showDriveStep) {
+            setStep(5);
+        }
+    }, [step, showDriveStep, setStep]);
+
     const skipEntireSetup = () => {
         complete();
     };
 
+    const handleWelcomeContinue = async () => {
+        setSaveError(null);
+        const trimmed = telegramToken.trim();
+        if (!trimmed || trimmed.includes('***')) {
+            setStep(1);
+            return;
+        }
+        setIsSavingTelegram(true);
+        try {
+            const res = await fetch(`${getApiRoot()}/telegram/config`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ botToken: trimmed })
+            });
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || t('onboarding.save_failed'));
+            setStep(1);
+        } catch (e: unknown) {
+            setSaveError(e instanceof Error ? e.message : t('onboarding.save_failed'));
+        } finally {
+            setIsSavingTelegram(false);
+        }
+    };
+
     const handleContinueLater = () => {
         continueLater();
     };
@@ -107,13 +183,13 @@ export function OnboardingWizard() {
         if (r) updates.GOOGLE_REDIRECT_URI = r;
 
         if (Object.keys(updates).length === 0) {
-            nextStep();
+            advanceAfterGoogleStep();
             return;
         }
         updateEnv(updates, {
             onSuccess: () => {
                 setEnvDirty(true);
-                nextStep();
+                advanceAfterGoogleStep();
             },
             onError: (e: unknown) => {
                 setSaveError(e instanceof Error ? e.message : t('onboarding.save_failed'));
@@ -166,7 +242,7 @@ export function OnboardingWizard() {
         return t(keys[s] || keys[0]);
     };
 
-    const progressLabel = `${Math.min(step + 1, ONBOARDING_STEP_COUNT)} / ${ONBOARDING_STEP_COUNT}`;
+    const progressLabel = `${progressCurrent} / ${totalWizardSteps}`;
 
     return (
         <div
@@ -201,7 +277,7 @@ export function OnboardingWizard() {
                             {step === 1 && <Lock className="w-6 h-6" />}
                             {step === 2 && <KeyRound className="w-6 h-6" />}
                             {step === 3 && <Cloud className="w-6 h-6" />}
-                            {step === 4 && <FolderOpen className="w-6 h-6" />}
+                            {step === 4 && showDriveStep && <FolderOpen className="w-6 h-6" />}
                             {step === 5 && <CheckCircle2 className="w-6 h-6" />}
                         </div>
                         <div className="min-w-0 flex-1">
@@ -221,9 +297,32 @@ export function OnboardingWizard() {
                     )}
 
                     {step === 0 && (
-                        <div className="rounded-xl bg-slate-50 border border-slate-100 px-4 py-3 flex gap-2 text-sm text-slate-600">
-                            <BookOpen className="w-5 h-5 shrink-0 text-slate-400" />
-                            <p>{t('onboarding.steps.welcome_tip')}</p>
+                        <div className="space-y-4">
+                            <div className="space-y-2">
+                                <label className="text-xs font-bold text-slate-600 block">
+                                    {t('onboarding.telegram_token_label')}
+                                </label>
+                                <input
+                                    type="password"
+                                    value={telegramToken}
+                                    onChange={(e) => setTelegramToken(e.target.value)}
+                                    placeholder={t('onboarding.telegram_token_placeholder')}
+                                    className="w-full px-4 py-2.5 rounded-xl border border-slate-200 text-sm font-mono"
+                                    autoComplete="off"
+                                />
+                                <a
+                                    href="https://t.me/BotFather"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="inline-flex text-sm font-bold text-indigo-600 hover:underline"
+                                >
+                                    {t('onboarding.open_botfather')}
+                                </a>
+                            </div>
+                            <div className="rounded-xl bg-slate-50 border border-slate-100 px-4 py-3 flex gap-2 text-sm text-slate-600">
+                                <BookOpen className="w-5 h-5 shrink-0 text-slate-400" />
+                                <p>{t('onboarding.steps.welcome_tip')}</p>
+                            </div>
                         </div>
                     )}
 
@@ -350,7 +449,7 @@ export function OnboardingWizard() {
                         </div>
                     )}
 
-                    {step === 4 && (
+                    {step === 4 && showDriveStep && (
                         <div className="space-y-3">
                             <label className="text-xs font-bold text-slate-600 block">
                                 {t('onboarding.drive_folder_label')}
@@ -409,7 +508,7 @@ export function OnboardingWizard() {
                         {step > 0 && (
                             <button
                                 type="button"
-                                onClick={prevStep}
+                                onClick={onboardingPrevStep}
                                 className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl border border-slate-200 text-sm font-bold text-slate-700 hover:bg-white"
                             >
                                 <ArrowLeft className="w-4 h-4" />
@@ -429,10 +528,11 @@ export function OnboardingWizard() {
                                 </button>
                                 <button
                                     type="button"
-                                    onClick={() => setStep(1)}
-                                    className="inline-flex items-center gap-1.5 px-5 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-black hover:bg-indigo-700"
+                                    disabled={isSavingTelegram}
+                                    onClick={() => void handleWelcomeContinue()}
+                                    className="inline-flex items-center gap-1.5 px-5 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-black hover:bg-indigo-700 disabled:opacity-50"
                                 >
-                                    {t('onboarding.get_started')}
+                                    {isSavingTelegram ? t('common.loading') : t('onboarding.get_started')}
                                     <ArrowRight className="w-4 h-4" />
                                 </button>
                             </>
@@ -482,7 +582,7 @@ export function OnboardingWizard() {
                             <>
                                 <button
                                     type="button"
-                                    onClick={() => nextStep()}
+                                    onClick={() => advanceAfterGoogleStep()}
                                     className="px-4 py-2 rounded-xl text-sm font-bold text-slate-500 hover:bg-slate-100"
                                 >
                                     {t('onboarding.skip_step')}
@@ -498,7 +598,7 @@ export function OnboardingWizard() {
                                 </button>
                             </>
                         )}
-                        {step === 4 && (
+                        {step === 4 && showDriveStep && (
                             <>
                                 <button
                                     type="button"

client/src/demo/handlers.ts

@@ -189,6 +189,10 @@ export const demoHandlers = [
         })
     ),
 
+    http.post(apiPath('/telegram/config'), () =>
+        HttpResponse.json({ success: true, message: 'Configuration updated' })
+    ),
+
     http.get(apiPath('/sheets/folder-config'), () =>
         HttpResponse.json({ success: true, data: { folderId: '', folderName: '' } })
     ),

client/src/locales/en.json

@@ -958,6 +958,9 @@
         "leave_blank_unchanged": "Leave blank if you already saved a secret",
         "drive_folder_label": "Google Drive folder ID (optional)",
         "drive_folder_placeholder": "ID from the folder URL (after /folders/)",
+        "telegram_token_label": "Telegram bot token (optional)",
+        "telegram_token_placeholder": "Paste token from @BotFather",
+        "open_botfather": "Open @BotFather on Telegram",
         "lock_password": "App password",
         "lock_confirm": "Confirm password",
         "lock_already_configured": "An app password is already set. You can continue to the next step or change it later under the lock banner.",
@@ -978,7 +981,7 @@
             "drive_title": "Default Drive folder (optional)",
             "done_title": "You are ready",
             "welcome_tip": "Tip: use the EN / HE button in the header to switch language anytime.",
-            "step_0_body": "This app runs on your computer. Your bank data stays local unless you choose to sync with Google.\n\nWe will walk you through optional settings: securing saved profiles, AI (Gemini), Google sign-in, and an optional Drive folder. You can skip anything and finish later.",
+            "step_0_body": "This app runs on your computer. Your bank data stays local unless you choose to sync with Google.\n\nWe will walk you through optional settings: securing saved profiles, AI (Gemini), Google sign-in, and an optional Drive folder. You can paste a Telegram bot token below (from @BotFather) or add it later under Configuration → Telegram along with allowed user IDs. You can skip anything and finish later.",
             "step_1_body": "If you save bank profiles in the app, they are encrypted with a password you choose. This password is not sent to the cloud — it only unlocks your saved credentials on this machine.\n\nMinimum 8 characters. You can skip and enable the lock later from the banner.",
             "step_2_body": "Gemini powers automatic categorization of transactions and the financial assistant chat. Without a key, those features stay off; scraping and viewing data still work.\n\nGet a free API key from Google AI Studio and paste it below.",
             "step_3_body": "To connect Google Sheets and Google Drive backup, the app needs OAuth credentials from Google Cloud: a Client ID and Client Secret. You must also add the redirect URI below to your OAuth client in Google Cloud — it must match exactly.\n\nYou can skip this and add Google later under Configuration.",

client/src/locales/he.json

@@ -958,6 +958,9 @@
         "leave_blank_unchanged": "השאר ריק אם כבר שמרת סוד",
         "drive_folder_label": "מזהה תיקיית Google Drive (אופציונלי)",
         "drive_folder_placeholder": "המזהה מכתובת התיקייה (אחרי /folders/)",
+        "telegram_token_label": "טוקן בוט טלגרם (אופציונלי)",
+        "telegram_token_placeholder": "הדבק טוקן מ-@BotFather",
+        "open_botfather": "פתח את @BotFather בטלגרם",
         "lock_password": "סיסמת אפליקציה",
         "lock_confirm": "אימות סיסמה",
         "lock_already_configured": "כבר הוגדרה סיסמת אפליקציה. אפשר להמשיך לשלב הבא או לשנות מאוחר יותר מהבאנר.",
@@ -978,7 +981,7 @@
             "drive_title": "תיקיית Drive ברירת מחדל (אופציונלי)",
             "done_title": "מוכן לעבודה",
             "welcome_tip": "טיפ: השתמש בכפתור EN / HE בכותרת כדי לעבור בין שפות.",
-            "step_0_body": "האפליקציה רצה במחשב שלך. נתוני הבנק נשארים מקומיים אלא אם תבחר לסנכרן עם Google.\n\nנעבור על הגדרות אופציונליות: אבטחת פרופילים, AI (Gemini), התחברות ל-Google, ותיקיית Drive. אפשר לדלג על כל שלב ולהשלים מאוחר יותר.",
+            "step_0_body": "האפליקציה רצה במחשב שלך. נתוני הבנק נשארים מקומיים אלא אם תבחר לסנכרן עם Google.\n\nנעבור על הגדרות אופציונליות: אבטחת פרופילים, AI (Gemini), התחברות ל-Google, ותיקיית Drive. אפשר להדביק למטה טוקן בוט טלגרם (מ-@BotFather) או להוסיף מאוחר יותר תחת הגדרות → טלגרם יחד עם מזהי משתמשים מורשים. אפשר לדלג על כל שלב ולהשלים מאוחר יותר.",
             "step_1_body": "אם שומרים פרופילי בנק באפליקציה, הם מוצפנים בסיסמה שאתה בוחר. הסיסמה לא נשלחת לענן — רק פותחת את הפרטים השמורים במחשב זה.\n\nלפחות 8 תווים. אפשר לדלג ולהפעיל נעילה מאוחר יותר מהבאנר.",
             "step_2_body": "Gemini מפעיל סיווג אוטומטי של תנועות וצ'אט פיננסי. בלי מפתח, התכונות האלה כבויות; גריפה וצפייה בנתונים עדיין עובדות.\n\nקבל מפתח API חינמי מ-Google AI Studio והדבק למטה.",
             "step_3_body": "לחיבור Google Sheets וגיבוי ל-Drive נדרשים אישורי OAuth מ-Google Cloud: Client ID ו-Client Secret. יש להוסיף ב-Google Cloud את כתובת ההפניה למטה — חייבת להתאים בדיוק.\n\nאפשר לדלג ולהוסיף Google מאוחר יותר תחת הגדרות.",

docker-compose.yml

@@ -1,20 +1,13 @@
-version: '3.8'
-
 services:
   app:
     image: ghcr.io/yohaybn/israeli-bank-scraper-docker-app:master
     restart: unless-stopped
-  ports:
-    - "3000:3000"
-  volumes:
-    # Map local data directory to container /data directory
-    # This will persist settings, results, and logs
-    - ./data:/data
-  environment:
-    - PORT=3000
-    - DATA_DIR=/data
-    - OAUTH_CLIENT_ID=${OAUTH_CLIENT_ID}
-    - OAUTH_CLIENT_SECRET=${OAUTH_CLIENT_SECRET}
-    - DRIVE_FOLDER_ID=${DRIVE_FOLDER_ID}
-    - APP_SECRET=${APP_SECRET}
-    - GEMINI_API_KEY=${GEMINI_API_KEY}
+    ports:
+      - "3000:3000"
+    volumes:
+      # Map local data directory to container /data directory
+      # This will persist settings, results, and logs
+      - ./data:/data
+    environment:
+      - PORT=3000
+      - DATA_DIR=/data