Допомогти вирішити проблему з WebApp в боті телеграму

Добрий день, потрібна допомога з розробкою бота в телеграмі з використанням WebApp

Основні компоненти бота

1. Веб-додаток (index.html): Інтерфейс для вибору дати та часу бронювання, який інтегрований у Telegram як WebApp.
2. Файл конфігурації (.env): Містить необхідні налаштування, такі як токен бота, ID групи для отримання бронювань та URL веб-додатку.
3. Скрипт бота (bot_start.py): Основний код бота, який обробляє взаємодію з користувачем.
4. Файл залежностей (requirements): Визначає необхідні бібліотеки для роботи бота.

Детальний опис роботи бота

1. Початок взаємодії (/start)

• Команда /start запускає діалог з користувачем.
• Бот вітає користувача та пропонує два варіанти дій:
  • "Забронювати столик"
  • "Переглянути меню"

2. Перегляд меню

• Якщо користувач обирає "Переглянути меню", бот надсилає посилання на меню (https://gustouapp.com/menu) і повертає користувача до початкового вибору дій.

3. Бронювання столика

Вибір закладу

• При виборі "Забронювати столик", бот просить обрати один із доступних закладів (наприклад, 'Вул. Антоновича' або 'пр-т. Тичини').

Вибір дати та часу

• Після вибору закладу бот надсилає кнопку "Обрати дату та час", яка відкриває WebApp (ваш index.html).
• Веб-додаток використовує бібліотеку Flatpickrдля зручного вибору дати та часу.
  • Користувач обирає бажану дату та час.
  • Після підтвердження, вибрана дата та час відправляються назад до бота через window.Telegram.WebApp.sendData(selectedDatetime).

Обробка даних з WebApp

• Бот отримує вибрану дату та час і підтверджує їх користувачу.
• Далі бот запитує кількість гостей.

4. Введення кількості гостей

• Користувач вводить кількість гостей.
• Бот перевіряє, чи введене значення є коректним числом більше нуля.
• Після підтвердження, бот просить вказати ім'я.

5. Введення імені

• Користувач вводить своє ім'я.
• Бот зберігає ім'я та переходить до вибору способу надання контактного номера телефону:
  • "Ввести номер вручну"
  • "Поділитись контактом"

6. Надавання контактного номера телефону

Вибір способу надання номера

• "Ввести номер вручну":
  • Бот просить ввести номер у форматі +380XXXXXXXXX.
  • Перевіряє коректність введеного номера.
• "Поділитись контактом":
  • Бот надає кнопку для поділу контактом.
  • Користувач натискає кнопку, і його номер телефону автоматично надсилається боту.

7. Завершення бронювання

• Після отримання всіх необхідних даних (заклад, дата та час, кількість гостей, ім'я, телефон), бот формує інформацію про бронювання.
• Інформація про бронювання надсилається до групового чату (GROUP_CHAT_ID), де адміністратори можуть її переглянути та підтвердити.
• Бот дякує користувачу за бронювання та пропонує:
  • "Повернутись до початку"
  • "Переглянути меню"

8. Обробка помилок та скасування

• Якщо виникає помилка під час відправки бронювання, бот повідомляє користувачу про необхідність спробувати ще раз.
• Користувач може скасувати процес бронювання командою /cancel, і бот повертає його до початкового стану або завершує розмову.

Взаємодія між компонентами

1. Користувач починає взаємодію з ботом через Telegram.
2. Бот обробляє команди та повідомлення, керуючи станом розмови за допомогою ConversationHandler.
3. При виборі дати та часу, бот відкриває WebApp (ваш index.html) в Telegram.
4. Веб-додаток дозволяє користувачу вибрати дату та час, після чого відправляє ці дані назад до бота.
5. Бот отримує ці дані, продовжує процес бронювання, збираючи необхідну інформацію.
6. Після завершення, бот надсилає інформацію про бронювання до вказаної групи для подальшої обробки.

Проблема в тому, що коли відкривається WebApp він завжди показує що відкрито не через телеграм, нижче прикладу файли боту
Файл index.html знаходиться на GitHub