From c37c65716774e367a594072448d4d8b3c64d157b Mon Sep 17 00:00:00 2001
From: Chung-Yi Chi <chung-yi@artsymail.com>
Date: Thu, 3 Oct 2024 23:14:56 -0400
Subject: [PATCH] fix: show seconds left to bid in auction signals

---
 .../Artwork/Details/BidTimerLine.tsx          |  6 +-
 .../Details/__tests__/BidTimerLine.jest.tsx   | 56 +++++++++++++++++--
 2 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/src/Components/Artwork/Details/BidTimerLine.tsx b/src/Components/Artwork/Details/BidTimerLine.tsx
index 913a9074cfa..3916c728cfc 100644
--- a/src/Components/Artwork/Details/BidTimerLine.tsx
+++ b/src/Components/Artwork/Details/BidTimerLine.tsx
@@ -17,7 +17,7 @@ export const BidTimerLine: React.FC<BidTimerLineProps> = ({ artwork }) => {
   const { lotClosesAt, registrationEndsAt, onlineBiddingExtended } =
     collectorSignals?.auction ?? {}
   const { time } = useTimer(lotClosesAt ?? "")
-  const { days, hours, minutes } = time
+  const { days, hours, minutes, seconds } = time
   const { isAuctionArtwork } = useArtworkGridContext()
   const biddingEnded = lotClosesAt && new Date(lotClosesAt) <= new Date()
   const registrationEnded =
@@ -26,6 +26,7 @@ export const BidTimerLine: React.FC<BidTimerLineProps> = ({ artwork }) => {
   const numDays = Number(days)
   const numHours = Number(hours)
   const numMinutes = Number(minutes)
+  const numSeconds = Number(seconds)
 
   if (registrationEndsAt && !registrationEnded && !isAuctionArtwork) {
     const date = DateTime.fromISO(registrationEndsAt)
@@ -51,7 +52,8 @@ export const BidTimerLine: React.FC<BidTimerLineProps> = ({ artwork }) => {
   const renderLotCloseTime = [
     numDays > 0 && `${numDays}d`,
     numHours > 0 && `${numHours}h`,
-    numDays === 0 && numHours === 0 && `${numMinutes}m`,
+    numDays === 0 && numHours === 0 && numMinutes > 0 && `${numMinutes}m`,
+    numDays === 0 && numHours === 0 && numMinutes === 0 && `${numSeconds}s`,
   ]
     .filter(Boolean)
     .join(" ")
diff --git a/src/Components/Artwork/Details/__tests__/BidTimerLine.jest.tsx b/src/Components/Artwork/Details/__tests__/BidTimerLine.jest.tsx
index edc1cd75f6e..e2a724bc4db 100644
--- a/src/Components/Artwork/Details/__tests__/BidTimerLine.jest.tsx
+++ b/src/Components/Artwork/Details/__tests__/BidTimerLine.jest.tsx
@@ -15,9 +15,14 @@ jest.unmock("react-relay")
 const mockUseArtworkGridContext = useArtworkGridContext as jest.Mock
 const mockUseTimer = useTimer as jest.Mock
 
-const mockTimer = (days: string, hours: string, minutes: string) => {
+const mockTimer = (
+  days: string,
+  hours: string,
+  minutes: string,
+  seconds: string
+) => {
   mockUseTimer.mockReturnValue({
-    time: { days, hours, minutes },
+    time: { days, hours, minutes, seconds },
   })
 }
 
@@ -28,7 +33,7 @@ const mockArtworkGridContext = (isAuctionArtwork: boolean) => {
 describe("BidTimerLine", () => {
   beforeEach(() => {
     jest.clearAllMocks()
-    mockTimer("0", "5", "30")
+    mockTimer("0", "5", "30", "12")
     mockArtworkGridContext(false)
   })
 
@@ -97,14 +102,14 @@ describe("BidTimerLine", () => {
       }),
     })
 
-    mockTimer("0", "5", "30")
+    mockTimer("0", "5", "30", "25")
 
     const timeLeft = screen.getByText(/5h left to bid/i)
     expect(timeLeft).toBeInTheDocument()
   })
 
   it("renders extended bidding time when online bidding has been extended and is a lot detail card", () => {
-    mockTimer("0", "0", "30")
+    mockTimer("0", "0", "30", "56")
     mockUseArtworkGridContext.mockReturnValue({ isAuctionArtwork: true })
 
     renderWithRelay({
@@ -124,7 +129,7 @@ describe("BidTimerLine", () => {
   })
 
   it("renders bidding time without 'Extended' text when online bidding has been extended and is not a lot detail card", () => {
-    mockTimer("0", "0", "30")
+    mockTimer("0", "0", "30", "1")
 
     renderWithRelay({
       Artwork: () => ({
@@ -141,4 +146,43 @@ describe("BidTimerLine", () => {
     const extendedTime = screen.getByText(/30m left to bid/i)
     expect(extendedTime).toBeInTheDocument()
   })
+
+  it("renders extended bidding time less than 1 minute", () => {
+    mockTimer("0", "0", "0", "56")
+    mockUseArtworkGridContext.mockReturnValue({ isAuctionArtwork: true })
+
+    renderWithRelay({
+      Artwork: () => ({
+        collectorSignals: {
+          auction: {
+            lotClosesAt: DateTime.local().plus({ days: 1 }).toString(),
+            onlineBiddingExtended: true,
+            registrationEndsAt: null,
+          },
+        },
+      }),
+    })
+
+    const extendedTime = screen.getByText(/Extended, 56s left/i)
+    expect(extendedTime).toBeInTheDocument()
+  })
+
+  it("renders time left to bid when it's less than 1 minute", () => {
+    mockTimer("0", "0", "0", "7")
+
+    renderWithRelay({
+      Artwork: () => ({
+        collectorSignals: {
+          auction: {
+            lotClosesAt: DateTime.local().plus({ days: 1 }).toString(),
+            onlineBiddingExtended: true,
+            registrationEndsAt: null,
+          },
+        },
+      }),
+    })
+
+    const extendedTime = screen.getByText(/^7s left to bid/i)
+    expect(extendedTime).toBeInTheDocument()
+  })
 })