feat: move limited-time offer back to the badge line

Now we have to consider partner offer (that's loaded on the client side)
when displaying "increased interest" and "curtors' pick" badges (that
can be loaded on the server and cached), it may visually look better
moving the limited-time offer back to the first line, with the badges.
While there will be some content shift, we can preserve the original
collector signals design (vs. partially porting over the app design).

src/Components/Artwork/Details/Details.tsx

@@ -15,7 +15,6 @@ import { ConsignmentSubmissionStatusFragmentContainer } from "Components/Artwork
 import HighDemandIcon from "@artsy/icons/HighDemandIcon"
 import { BidTimerLine } from "./BidTimerLine"
 import { PrimaryLabelLineQueryRenderer } from "Components/Artwork/Details/PrimaryLabelLine"
-import { PartnerOfferLineQueryRenderer } from "./PartnerOfferLine"
 import { PartnerOfferedPriceQueryRenderer } from "./PartnerOfferedPrice"
 
 export interface DetailsProps {
@@ -296,7 +295,7 @@ export const Details: React.FC<DetailsProps> = ({
   const artworkId = rest?.artwork?.internalID
 
   const primaryLabel = rest?.artwork?.collectorSignals?.primaryLabel
-  const showPrimaryLabelLine: boolean = !!primaryLabel && !isAuction
+  const showPrimaryLabelLine: boolean = !isAuction
 
   // FIXME: Extract into a real component
   const renderSaveButtonComponent = () => {
@@ -382,8 +381,6 @@ export const Details: React.FC<DetailsProps> = ({
 
       {!hideSaleInfo && <SaleInfoLine {...rest} />}
 
-      <PartnerOfferLineQueryRenderer id={artworkId} />
-
       {isAuction && <BidTimerLine artwork={rest.artwork} />}
     </Box>
   )

src/Components/Artwork/Details/PartnerOfferedPrice.tsx

@@ -3,6 +3,7 @@ import { createFragmentContainer, graphql } from "react-relay"
 import { Flex, Text } from "@artsy/palette"
 import { SystemQueryRenderer } from "System/Relay/SystemQueryRenderer"
 import { SaleMessage } from "./Details"
+import { useTimer } from "Utils/Hooks/useTimer"
 import { PartnerOfferedPriceQuery } from "__generated__/PartnerOfferedPriceQuery.graphql"
 import { PartnerOfferedPrice_artwork$data } from "__generated__/PartnerOfferedPrice_artwork.graphql"
 import { Details_artwork$data } from "__generated__/Details_artwork.graphql"
@@ -12,14 +13,48 @@ interface PartnerOfferedPriceProps {
   fallback: object
 }
 
+interface PartnerOfferLineProps {
+  artwork: PartnerOfferedPrice_artwork$data
+}
+
+const ActivePartnerOfferTimer: React.FC<PartnerOfferLineProps> = ({
+  artwork: { collectorSignals },
+}) => {
+  const SEPARATOR = <>&nbsp;</>
+  const { endAt } = collectorSignals?.partnerOffer ?? {}
+  const { time } = useTimer(endAt ?? "")
+  const { days, hours } = time
+
+  return (
+    <Text
+      variant="sm-display"
+      lineHeight="22px"
+      color="red100"
+      alignSelf="flex-start"
+    >
+      Exp.{SEPARATOR}
+      {Number(days)}d{SEPARATOR}
+      {Number(hours)}h{SEPARATOR}
+    </Text>
+  )
+}
+
 const PartnerOfferedPrice: React.FC<PartnerOfferedPriceProps> = ({
   artwork,
   fallback,
 }) => {
   const partnerOffer = artwork?.collectorSignals?.partnerOffer
   const offeredPrice = partnerOffer?.priceWithDiscount?.display
 
-  return partnerOffer ? <Text lineHeight="22px">{offeredPrice}</Text> : fallback
+  return partnerOffer ? (
+    <Flex flexDirection="row" alignItems="center">
+      <Text lineHeight="22px">{offeredPrice}</Text>
+      &nbsp;
+      <ActivePartnerOfferTimer artwork={artwork} />
+    </Flex>
+  ) : (
+    fallback
+  )
 }
 
 const PartnerOfferedPriceFragmentContainer = createFragmentContainer(

src/Components/Artwork/Details/PrimaryLabelLine.tsx

@@ -18,8 +18,21 @@ export const PrimaryLabelLine: React.FC<PrimaryLabelLineProps> = ({
   const { hideSignals } = useArtworkGridContext()
   const partnerOffer = artwork?.collectorSignals?.partnerOffer
 
-  if (!label || !!partnerOffer) {
-    return null
+  if (!!partnerOffer) {
+    return (
+      <Text
+        variant="xs"
+        color="blue100"
+        backgroundColor="blue10"
+        px={0.5}
+        alignSelf="flex-start"
+        borderRadius={3}
+        my="1px"
+        style={{ whiteSpace: "nowrap" }}
+      >
+        Limited-Time Offer
+      </Text>
+    )
   }
 
   if (label === "INCREASED_INTEREST" && !hideSignals) {