search

timekit-io / booking-js

:date: Make a beautiful embeddable booking widget in minutes
https://developers.timekit.io/docs/booking-widget-v2
MIT License
2.42k stars 189 forks source link

Timezone helper #190

Closed laander closed 5 years ago

laander commented 5 years ago

Motivation

The widget tries to guess the timezone of the client (based on browser and OS settings), but that's not always 100% waterproof. Furthermore, sometimes you want control of which timezone to show timeslots in, especially if you're travelling or have customers in different countries.

This PR reintroduces the timezone helper in a footer bar where: 1) We pre-select the guessed timezone 2) Allows to select a new timezone that re-renders timeslots and booking page (if open) with localized timestamps.

Furthermore, we also consolidate the "powered by timekit" message into the same footer bar.

UI & UX

Guessed timezone:

screen shot 2018-09-27 at 19 46 49

Select list:

screen shot 2018-09-27 at 19 46 54

Mobile view:

screen shot 2018-09-27 at 19 47 25

Design choices

Instead of using the default moment.tz.names() with the classic America/Los_Angeles format, we use a custom list with UTC offset in descending order. It's easier to scan and find the appropriate TZ.

If the client timezone is guessed to be one not in the list, it will dynamically add it to the top of the list. This makes sure that the select never breaks.

Side-effects/other

Currently, it cannot be disabled.

Tests

Created 3 test cases.

Who should review it

@vistik

vistik commented 5 years ago

If you want to be able to "force" a timezone. you could take this as an input in the url ala ?timezone=Europe/London

vistik commented 5 years ago

🎱

laander commented 5 years ago

Yeah, either as a URL input or alternatively as just a config input (like everything else). Might make a follow-up PR with this feature