Help solve the problem with the WebApp in the Telegram bot

Hello, I need help with developing a bot in Telegram using WebApp

Main components of the bot

1. Web application (index.html): An interface for selecting the date and time of booking, integrated into Telegram as a WebApp.
2. Configuration file (.env): Contains necessary settings such as the bot token, group ID for receiving bookings, and the URL of the web application.
3. Bot script (bot_start.py): The main code of the bot that handles user interaction.
4. Dependencies file (requirements): Defines the necessary libraries for the bot to function.

Detailed description of the bot's operation

1. Starting interaction (/start)

• Command /start initiates a dialogue with the user.
• The bot greets the user and offers two options:
  • "Book a table"
  • "View menu"

2. Viewing the menu

• If the user selects "View menu", the bot sends a link to the menu (https://gustouapp.com/menu) and returns the user to the initial action selection.

3. Booking a table

Selecting a venue

• When selecting "Book a table", the bot asks to choose one of the available venues (for example, 'Vul. Antonovicha' or 'pr-t. Tichina').

Selecting date and time

• After selecting a venue, the bot sends a button "Select date and time", which opens the WebApp (your index.html).
• The web application uses the Flatpickr library for convenient date and time selection.
  • The user selects the desired date and time.
  • After confirmation, the selected date and time are sent back to the bot via window.Telegram.WebApp.sendData(selectedDatetime).

Processing data from WebApp

• The bot receives the selected date and time and confirms them to the user.
• Then the bot asks for the number of guests.

4. Entering the number of guests

• The user enters the number of guests.
• The bot checks if the entered value is a valid number greater than zero.
• After confirmation, the bot asks for the name.

5. Entering the name

• The user enters their name.
• The bot saves the name and proceeds to choose the method of providing the contact phone number:
  • "Enter number manually"
  • "Share contact"

6. Providing the contact phone number

Selecting the method of providing the number

• "Enter number manually":
  • The bot asks to enter the number in the format +380XXXXXXXXX.
  • Checks the validity of the entered number.
• "Share contact":
  • The bot provides a button to share the contact.
  • The user presses the button, and their phone number is automatically sent to the bot.

7. Completing the booking

• After receiving all necessary data (venue, date and time, number of guests, name, phone), the bot forms the booking information.
• Booking information is sent to the group chat (GROUP_CHAT_ID), where administrators can review and confirm it.
• The bot thanks the user for the booking and offers:
  • "Return to the beginning"
  • "View menu"

8. Error handling and cancellation

• If an error occurs while sending the booking, the bot informs the user to try again.
• The user can cancel the booking process with the command /cancel, and the bot returns them to the initial state or ends the conversation.

Interaction between components

1. The user starts interaction with the bot through Telegram.
2. The bot processes commands and messages, managing the state of the conversation using ConversationHandler.
3. When selecting a date and time, the bot opens the WebApp (your index.html) in Telegram.
4. The web application allows the user to select the date and time, after which it sends this data back to the bot.
5. The bot receives this data, continues the booking process, collecting the necessary information.
6. After completion, the bot sends the booking information to the specified group for further processing.

The problem is that when the WebApp opens, it always shows that it is not opened through Telegram, below are examples of the bot files