Booking widget: slot selection and cost calculation
An interactive React component has been developed for a booking widget that can be embedded on a studio or hourly rental service website. The component allows the user to select one or more time slots for the week, view current prices, and calculate the rental cost considering promo codes and prepayment options.
When clicking on a free slot, an asynchronous request is made to the server, after which the current price is displayed. Slots can be added or removed, and the total amount is automatically recalculated. There is logic for restrictions: for example, if an intermediate slot is selected, it deselects all others. The option to change the prepayment mode (50% / 100%) and check the promo code is also available.
The interface is adapted for mobile devices and is precisely aligned with the grid. To ensure responsiveness, unnecessary delays have been removed — for example, micro-lags from console logs have been eliminated. All elements (inputs, switches, buttons) are adjusted pixel by pixel to the layout.
When clicking on a free slot, an asynchronous request is made to the server, after which the current price is displayed. Slots can be added or removed, and the total amount is automatically recalculated. There is logic for restrictions: for example, if an intermediate slot is selected, it deselects all others. The option to change the prepayment mode (50% / 100%) and check the promo code is also available.
The interface is adapted for mobile devices and is precisely aligned with the grid. To ensure responsiveness, unnecessary delays have been removed — for example, micro-lags from console logs have been eliminated. All elements (inputs, switches, buttons) are adjusted pixel by pixel to the layout.
Southern District Banatsky 
Available for hire