Merge pull request #14614 from artsy/starsirius/seconds-left-to-bid

fix: show seconds left to bid in auction signals
artsy · Oct 4, 2024 · 7b1e428 · 7b1e428
2 parents e6b4534 + c37c657
commit 7b1e428
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 8 deletions.
diff --git 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
@@ -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()
+  })
 })