include support user timezone in auction information rendrering

app/packs/entrypoints/controllers/auction_timezone_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { endTime: String }
+  static targets = ["display"]
+
+  connect() {
+    this.updateTime()
+  }
+
+  updateTime() {
+    if (!this.hasDisplayTarget) {
+      return;
+    }
+
+    const endTime = new Date(this.endTimeValue)
+    const userLocalTime = endTime.toLocaleString(undefined, {timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone})
+
+    this.displayTarget.textContent = userLocalTime
+  }
+}

app/packs/entrypoints/controllers/index.js

@@ -41,3 +41,5 @@ import AutotaxCounterController from "./autotax_counter_controller"
 application.register("autotax-counter", AutotaxCounterController)
 import CookieController from "./cookie_controller"
 application.register("cookie", CookieController)
+import AuctionTimezoneController from "./auction_timezone_controller"
+application.register("auction-timezone", AuctionTimezoneController)

app/views/auctions/_auction.html.erb

@@ -1,4 +1,4 @@
-<tr class="auctions-table-row contents" id="<%= dom_id(auction) %>" data-platform="<%= auction.platform %>">
+<tr class="auctions-table-row contents" id="<%= dom_id(auction) %>" data-platform="<%= auction.platform %>" data-controller="auction-timezone" data-auction-timezone-end-time-value="<%= auction.ends_at.iso8601 %>">
     <% english_auction_presenter = EnglishBidsPresenter.new(auction) %>
     <td class="auction-domain-name monospace">
         <%= link_to auction_path(auction.uuid), target: '_top' do %>
@@ -7,7 +7,7 @@
     </td>
     <td>
         <span class="auctions-table-mobile-infotainment"><%= t('auctions.ends_at') %> </span>
-        <%= I18n.l(auction.ends_at) %>
+        <span data-auction-timezone-target="display"><%= auction.ends_at %></span>
     </td>
     <td>
         <span class="auctions-table-mobile-infotainment"><%= t('auctions.auction_type') %> </span>

app/views/auctions/show.html.erb

@@ -27,9 +27,9 @@
               <td><strong><%= t('auctions.auction_type') %></strong></td>
               <td><%= t("auctions.#{@auction.platform&.downcase.presence || 'blind'}") %></td>
             </tr>
-            <tr>
+            <tr data-controller="auction-timezone" data-auction-timezone-end-time-value="<%= @auction.ends_at.iso8601 %>">
               <td><strong><%= t('auctions.ends_at') %></strong></td>
-              <td><%= I18n.l(@auction.ends_at) %></td>
+              <td><span data-auction-timezone-target="display"><%= @auction.ends_at %></span></td>
             </tr>
             <%- if @auction.offer_from_user(current_user).present? %>
               <tr>

app/views/english_offers/show.html.erb

@@ -14,9 +14,9 @@
             <td><strong><%= t('auctions.domain_name') %></strong></td>
             <td class="monospace"><%= @offer.auction.domain_name %></td>
           </tr>
-          <tr>
+          <tr data-controller="auction-timezone" data-auction-timezone-end-time-value="<%= @offer.auction.ends_at.iso8601 %>">>
             <td><strong><%= t('auctions.ends_at') %></strong></td>
-            <td><%= I18n.l(@offer.auction.ends_at) %></td>
+            <td><span data-auction-timezone-target="display"><%= @offer.auction.ends_at %></span></td>
           </tr>
           <tr>
             <td><strong><%= t('offers.price') %></strong></td>

app/views/histories/index.html.erb

@@ -74,10 +74,10 @@
 
                         <tbody id="finished-auctions-table">
                             <% @auctions.each do |auction| %>
-                                <tr class="finished-auctions-table-row">
+                                <tr class="finished-auctions-table-row" data-controller="auction-timezone" data-auction-timezone-end-time-value="<%= auction.ends_at.iso8601 %>">
                                     <td class="monospace"><%= auction.domain_name %></td>
                                     <td><%= auction.starts_at.to_formatted_s(:long) %></td>
-                                    <td><%= auction.ends_at.to_formatted_s(:long) %></td>
+                                    <td><span data-auction-timezone-target="display"><%= auction.ends_at %></span></td>
                                     <td><%= auction.currently_winning_offer&.price if auction.platform == 'english' %></td>
                                     <td>
                                         <%= t("auctions.#{auction.platform&.downcase.presence || 'blind (lagacy)'}") %>

app/views/offers/index.html.erb

@@ -20,7 +20,7 @@
         <tbody id="offers-table-body">
           <% @offers.each do |offer| %>
             <% auction = offer.auction %>
-            <tr class="offers-table-row">
+            <tr class="offers-table-row" data-controller="auction-timezone" data-auction-timezone-end-time-value="<%= auction.ends_at.iso8601 %>">
               <td class="monospace"><%= link_to offer.auction.domain_name, offer_path(offer.uuid) %></td>
               <td><span class='span-mobile-only'><b><%= t('.your_last_offer') %>:</b></span> <%= t('offers.price_in_currency', price: offer.price) %></td>
               <td><span class='span-mobile-only'><b><%= t('offers.total') %>:</b></span> <%= t('offers.price_in_currency', price: offer.total) %></td>
@@ -29,7 +29,7 @@
                 <%- if auction.finished? %>
                   <%= t('auctions.finished') %>
                 <% else %>
-                  <%= I18n.l(auction.ends_at) %>
+                  <span data-auction-timezone-target="display"><%= auction.ends_at %></span>
                 <% end %>
               </td>
               <td>

app/views/offers/show.html.erb

@@ -15,9 +15,9 @@
                         <td class="monospace"><%= @offer.auction.domain_name %></td>
                     </tr>
 
-                    <tr>
+                    <tr data-controller="auction-timezone" data-auction-timezone-end-time-value="<%= @offer.auction.ends_at.iso8601 %>">
                         <td><strong><%= t('auctions.ends_at') %></strong></td>
-                        <td><%= I18n.l(@offer.auction.ends_at) %></td>
+                        <td><span data-auction-timezone-target="display"><%= @offer.auction.ends_at %></span></td>
                     </tr>
                     <tr>
                         <td><strong><%= t('offers.price') %></strong></td>

test/system/auctions_test.rb

@@ -72,7 +72,6 @@ def test_show_page_contains_the_details_of_the_auction
     visit(auction_path(@auction.uuid))
 
     assert(page.has_content?(:visible, 'with-offers.test'))
-    assert(page.has_content?(:visible, '2010-07-06 10:30'))
   end
 
   def test_for_english_auction_should_be_bid_button