https://wip.co/assets/controllers/time_zone_detection_controller-05a8fff4.js

1import { Controller } from "@hotwired/stimulus";
2import { patch } from "@rails/request.js";
3
4export default class extends Controller {
5  static targets = ["detectedZone"];
6  static values = { currentTimeZone: String, dismissedTimeZone: String, url: String }
7
8  connect() {
9    // Check for test timezone from cookie or fall back to browser's Intl API
10    this.detectedTimeZone = this.getTestTimeZone() || Intl.DateTimeFormat().resolvedOptions().timeZone;
11
12    this.detectedZoneTarget.innerHTML = this.detectedTimeZone;
13
14    const otherTimeZone = this.currentTimeZoneValue !== this.detectedTimeZone;
15    const detectedTimeZoneIsDismissed = this.detectedTimeZone === this.dismissedTimeZoneValue;
16
17    if (otherTimeZone && !detectedTimeZoneIsDismissed) {
18      this.element.classList.remove("hidden")
19    }
20  }
21
22  accept() {
23    this.update({ time_zone: this.detectedTimeZone });
24  }
25
26  dismiss() {
27    this.update({ dismissed_time_zone: this.detectedTimeZone });
28  }
29
30  async update(userParams) {
31    const response = await patch(this.urlValue, { body: { user: userParams }, responseKind: "html" });
32
33    if (response.ok) {
34      this.onUpdateSuccess();
35    }
36  }
37
38  getTestTimeZone() {
39    // Check cookie
40    const cookies = document.cookie.split(';');
41    for (let cookie of cookies) {
42      const [name, value] = cookie.trim().split('=');
43      if (name === 'test_time_zone') {
44        return decodeURIComponent(value);
45      }
46    }
47
48    return null;
49  }
50
51  onUpdateSuccess() {
52    this.element.remove();
53
54    document.body.insertAdjacentHTML(
55      "afterbegin",
56      "<div class='z-[8] inline-block fixed top-6 right-6 max-w-[25em] bg-gray-600/90 p-2 rounded text-white pointer-events-none animate-fadeInOut'>Settings changed successfully.</div>"
57    );
58  }
59}