From 1d4c8c11a7dda0e2e0ebe04a4e2e83d51b15441e Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Wed, 23 Oct 2024 18:11:13 +0200
Subject: [PATCH 01/10] feat: redesign Curators Pick and Increased Interest

---
 package.json                                  |  2 +-
 .../ArtworkGrids/ArtworkSocialSignal.tsx      | 26 +++++--------------
 .../ArtworkDetailsCollectorSignal.tsx         | 15 +++--------
 yarn.lock                                     |  8 +++---
 4 files changed, 16 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index 00ee1aca08e..f0e202bfb4a 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
   },
   "dependencies": {
     "@artsy/cohesion": "4.209.0",
-    "@artsy/palette-mobile": "13.2.40",
+    "@artsy/palette-mobile": "13.2.41",
     "@artsy/to-title-case": "1.1.0",
     "@braze/react-native-sdk": "8.4.0",
     "@expo/react-native-action-sheet": "4.0.1",
diff --git a/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx b/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx
index e496dcd73af..dcd0d76ee79 100644
--- a/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx
+++ b/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx
@@ -1,4 +1,4 @@
-import { Box, Text } from "@artsy/palette-mobile"
+import { ArrowUpRightIcon, Box, FireIcon, Text } from "@artsy/palette-mobile"
 import { ArtworkSocialSignal_collectorSignals$key } from "__generated__/ArtworkSocialSignal_collectorSignals.graphql"
 import { graphql, useFragment } from "react-relay"
 
@@ -21,15 +21,9 @@ export const ArtworkSocialSignal: React.FC<ArtworkSocialSignalProps> = ({
   switch (true) {
     case curatorsPick && !hideCuratorsPick:
       return (
-        <Box
-          px={0.5}
-          pb="2px"
-          alignSelf="flex-start"
-          borderRadius={3}
-          borderWidth={1}
-          borderColor={primaryColor}
-        >
-          <Text color={primaryColor} variant="xxs">
+        <Box alignItems="center" flexDirection="row">
+          <FireIcon />
+          <Text color={primaryColor} variant="xs" pl="3px" textAlign="center">
             Curators’ Pick
           </Text>
         </Box>
@@ -37,15 +31,9 @@ export const ArtworkSocialSignal: React.FC<ArtworkSocialSignalProps> = ({
 
     case increasedInterest && !hideIncreasedInterest:
       return (
-        <Box
-          px={0.5}
-          pb="2px"
-          alignSelf="flex-start"
-          borderRadius={3}
-          borderWidth={1}
-          borderColor={primaryColor}
-        >
-          <Text color={primaryColor} variant="xxs">
+        <Box flexDirection="row" alignItems="center">
+          <ArrowUpRightIcon />
+          <Text color={primaryColor} variant="xs" pl="3px">
             Increased Interest
           </Text>
         </Box>
diff --git a/src/app/Scenes/Artwork/Components/ArtworkDetailsCollectorSignal.tsx b/src/app/Scenes/Artwork/Components/ArtworkDetailsCollectorSignal.tsx
index a3a4feccc2b..8b11eae4e26 100644
--- a/src/app/Scenes/Artwork/Components/ArtworkDetailsCollectorSignal.tsx
+++ b/src/app/Scenes/Artwork/Components/ArtworkDetailsCollectorSignal.tsx
@@ -1,14 +1,7 @@
-import {
-  bullet,
-  FairIcon,
-  Flex,
-  LinkText,
-  Text,
-  TrendingIcon,
-  VerifiedIcon,
-} from "@artsy/palette-mobile"
+import { bullet, FairIcon, Flex, LinkText, Text } from "@artsy/palette-mobile"
 
 import { ArtworkDetailsCollectorSignal_artwork$key } from "__generated__/ArtworkDetailsCollectorSignal_artwork.graphql"
+import { ArrowUpIcon, FireIcon } from "app/Components/ArtworkGrids/ArtworkSocialSignal"
 import { navigate } from "app/system/navigation/navigate"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { DateTime } from "luxon"
@@ -45,13 +38,13 @@ export const ArtworkDetailsCollectorSignal: React.FC<Props> = ({ artwork }) => {
     case curatorsPick && enableCuratorsPicksAndInterestSignals: {
       singalTitle = "Curators’ Pick"
       signalDescription = "Hand selected by Artsy curators this week"
-      SignalIcon = VerifiedIcon
+      SignalIcon = FireIcon
       break
     }
     case increasedInterest && enableCuratorsPicksAndInterestSignals: {
       singalTitle = "Increased Interest"
       signalDescription = "Based on collector activity in the past 14 days"
-      SignalIcon = TrendingIcon
+      SignalIcon = ArrowUpIcon
       break
     }
     case !!runningShow: {
diff --git a/yarn.lock b/yarn.lock
index 2a2e7f721a5..f0f32492db4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17,10 +17,10 @@
   dependencies:
     core-js "3"
 
-"@artsy/palette-mobile@13.2.40":
-  version "13.2.40"
-  resolved "https://registry.yarnpkg.com/@artsy/palette-mobile/-/palette-mobile-13.2.40.tgz#e03975719a00c0d5dc8ace3cca63b3ee8cbdf04d"
-  integrity sha512-eVkThIyiCqyG9YpxZ45+TIT2cjgS/1bIxuWVNV/RURvseaoCCXpo3hSi4LL2Ide9DMWzhvBGpwLUaIrH5831rA==
+"@artsy/palette-mobile@13.2.41":
+  version "13.2.41"
+  resolved "https://registry.yarnpkg.com/@artsy/palette-mobile/-/palette-mobile-13.2.41.tgz#fa4fb711f8c5277c22f232fde599149e66ab2f40"
+  integrity sha512-z/2cI73/4nvMcitgGK+wlr6yp2MEOgmgjDpWZ9lJwHIlRoJuOh3qTy1nwrMtrerf8PgoPTUGQDPiwsdBvQOkUw==
   dependencies:
     "@artsy/palette-tokens" "^6.0.3"
     "@shopify/flash-list" "^1.6.4"

From d6f2b6cadf73279ee44d926d678f620f3fc4d52f Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Wed, 23 Oct 2024 18:19:08 +0200
Subject: [PATCH 02/10] feat: redesign partner offer

---
 .../ArtworkGrids/ArtworkGridItem.tsx          | 117 ++++++++++------
 .../ArtworkRail/ArtworkRailCardMeta.tsx       | 127 +++++++++++-------
 .../ContextMenuArtworkPreviewCard.tsx         |   6 +-
 src/app/utils/getSaleMessgeOrBidInfo.ts       |   4 +-
 4 files changed, 159 insertions(+), 95 deletions(-)

diff --git a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
index c0f852bbe74..d50a05516c0 100644
--- a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
+++ b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
@@ -288,6 +288,69 @@ export const Artwork: React.FC<ArtworkProps> = ({
     await item._disappearable?.disappear()
   }
 
+  const getSaleMessage = () => {
+    // TODO: move into a hook, rename getOfferMessage???
+    const parts = saleInfo && saleInfo.split(/(~.*?~)/)
+    if (!parts) return null
+
+    if (displayLimitedTimeOfferSignal) {
+      return (
+        <>
+          <Flex flexDirection="row">
+            {parts.map((part, index) => {
+              if (part.startsWith("~") && part.endsWith("~")) {
+                return (
+                  <Text
+                    key={index}
+                    lineHeight="20px"
+                    variant="xs"
+                    color="black60"
+                    numberOfLines={1}
+                    style={{ textDecorationLine: "line-through" }}
+                  >
+                    {part.slice(1, -1)}
+                  </Text>
+                )
+              }
+              return (
+                <Text
+                  key={index}
+                  lineHeight="20px"
+                  variant="xs"
+                  color={saleInfoTextColor}
+                  numberOfLines={1}
+                  fontWeight={saleInfoTextWeight}
+                >
+                  {part}{" "}
+                </Text>
+              )
+            })}
+          </Flex>
+          <Text
+            lineHeight="20px"
+            variant="xs"
+            fontWeight="normal"
+            color="blue100"
+            numberOfLines={1}
+          >
+            Offer Expires {partnerOfferEndAt}
+          </Text>
+        </>
+      )
+    } else
+      return (
+        <Text
+          lineHeight="20px"
+          variant="xs"
+          color={saleInfoTextColor}
+          numberOfLines={1}
+          fontWeight={saleInfoTextWeight}
+        >
+          {saleInfo}
+        </Text>
+      )
+  }
+
   return (
     <Disappearable ref={(ref) => ((artwork as any)._disappearable = ref)}>
       <ContextMenuArtwork
@@ -361,23 +424,6 @@ export const Artwork: React.FC<ArtworkProps> = ({
               style={artworkMetaStyle}
             >
               <Flex flex={1}>
-                {!!displayLimitedTimeOfferSignal && (
-                  <Box backgroundColor="blue10" px={0.5} alignSelf="flex-start" borderRadius={3}>
-                    <Text lineHeight="20px" variant="xs" color="blue100">
-                      Limited-Time Offer
-                    </Text>
-                  </Box>
-                )}
-                {!isAuction &&
-                  !displayLimitedTimeOfferSignal &&
-                  !!collectorSignals &&
-                  !!AREnableCuratorsPicksAndInterestSignals && (
-                    <ArtworkSocialSignal
-                      collectorSignals={collectorSignals}
-                      hideCuratorsPick={hideCuratorsPickSignal}
-                      hideIncreasedInterest={hideIncreasedInterestSignal}
-                    />
-                  )}
                 {!!showLotLabel && !!artwork.saleArtwork?.lotLabel && (
                   <>
                     <Text variant="xs" numberOfLines={1} caps {...lotLabelTextStyle}>
@@ -444,31 +490,7 @@ export const Artwork: React.FC<ArtworkProps> = ({
                     </Text>
                   </Flex>
                 )}
-                {!!saleInfo && !hideSaleInfo && !displayPriceOfferMessage && (
-                  <Text
-                    lineHeight="18px"
-                    variant="xs"
-                    numberOfLines={1}
-                    color={saleInfoTextColor}
-                    fontWeight={saleInfoTextWeight}
-                    {...saleInfoTextStyle}
-                  >
-                    {saleInfo}
-                    {!!displayLimitedTimeOfferSignal && (
-                      <Text
-                        lineHeight="18px"
-                        variant="xs"
-                        weight="regular"
-                        numberOfLines={1}
-                        color="blue100"
-                        {...saleInfoTextStyle}
-                      >
-                        {"  "}
-                        Exp. {partnerOfferEndAt}
-                      </Text>
-                    )}
-                  </Text>
-                )}
+                {!!saleInfo && !hideSaleInfo && !displayPriceOfferMessage && getSaleMessage()}
 
                 {!!artwork.isUnlisted && (
                   <Text lineHeight="18px" variant="xs" numberOfLines={1} fontWeight="bold">
@@ -482,6 +504,17 @@ export const Artwork: React.FC<ArtworkProps> = ({
                     hideRegisterBySignal={hideRegisterBySignal}
                   />
                 )}
+
+                {!isAuction &&
+                  !displayLimitedTimeOfferSignal &&
+                  !!collectorSignals &&
+                  !!AREnableCuratorsPicksAndInterestSignals && (
+                    <ArtworkSocialSignal
+                      collectorSignals={collectorSignals}
+                      hideCuratorsPick={hideCuratorsPickSignal}
+                      hideIncreasedInterest={hideIncreasedInterestSignal}
+                    />
+                  )}
               </Flex>
               {!hideSaveIcon && (
                 <Flex flexDirection="row" alignItems="flex-start">
diff --git a/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx b/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
index 999f13afb78..603f6e2c02c 100644
--- a/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
+++ b/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, HeartFillIcon, HeartIcon, Text, Touchable } from "@artsy/palette-mobile"
+import { Flex, HeartFillIcon, HeartIcon, Text, Touchable } from "@artsy/palette-mobile"
 import { ArtworkRailCardMeta_artwork$key } from "__generated__/ArtworkRailCardMeta_artwork.graphql"
 import { ArtworkAuctionTimer } from "app/Components/ArtworkGrids/ArtworkAuctionTimer"
 import { ArtworkSocialSignal } from "app/Components/ArtworkGrids/ArtworkSocialSignal"
@@ -6,7 +6,7 @@ import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSav
 import { ARTWORK_RAIL_TEXT_CONTAINER_HEIGHT } from "app/Components/ArtworkRail/ArtworkRailCard"
 import { HEART_ICON_SIZE } from "app/Components/constants"
 import { formattedTimeLeft } from "app/Scenes/Activity/utils/formattedTimeLeft"
-import { saleMessageOrBidInfo as defaultSaleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo"
+import { saleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo"
 import { getTimer } from "app/utils/getTimer"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import {
@@ -83,7 +83,7 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
     collectorSignals,
   } = artwork
 
-  const saleMessage = defaultSaleMessageOrBidInfo({
+  const saleMessage = saleMessageOrBidInfo({
     artwork,
     isSmallTile: true,
     collectorSignals: enablePartnerOfferSignals ? collectorSignals : null,
@@ -132,6 +132,68 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
     onCompleted: onArtworkSavedOrUnSaved,
   })
 
+  const getSaleMessage = () => {
+    const parts = saleMessage && saleMessage.split(/(~.*?~)/)
+    if (!parts) return null
+
+    if (displayLimitedTimeOfferSignal) {
+      return (
+        <>
+          <Flex flexDirection="row">
+            {parts.map((part, index) => {
+              if (part.startsWith("~") && part.endsWith("~")) {
+                return (
+                  <Text
+                    key={index}
+                    lineHeight="20px"
+                    variant="xs"
+                    color="black60"
+                    numberOfLines={1}
+                    style={{ textDecorationLine: "line-through" }}
+                  >
+                    {part.slice(1, -1)}
+                  </Text>
+                )
+              }
+              return (
+                <Text
+                  key={index}
+                  lineHeight="20px"
+                  variant="xs"
+                  color={saleInfoTextColor}
+                  numberOfLines={1}
+                  fontWeight={saleInfoTextWeight}
+                >
+                  {part}{" "}
+                </Text>
+              )
+            })}
+          </Flex>
+          <Text
+            lineHeight="20px"
+            variant="xs"
+            fontWeight="normal"
+            color="blue100"
+            numberOfLines={1}
+          >
+            Offer Expires {partnerOfferEndAt}
+          </Text>
+        </>
+      )
+    } else
+      return (
+        <Text
+          lineHeight="20px"
+          variant="xs"
+          color={saleInfoTextColor}
+          numberOfLines={1}
+          fontWeight={saleInfoTextWeight}
+        >
+          {saleMessage}
+        </Text>
+      )
+  }
+
   return (
     <Flex
       my={1}
@@ -144,26 +206,6 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
       justifyContent="space-between"
     >
       <Flex flex={1} backgroundColor={backgroundColor}>
-        {!!displayLimitedTimeOfferSignal && (
-          <Box backgroundColor="blue10" px={0.5} alignSelf="flex-start" borderRadius={3}>
-            <Text lineHeight="20px" variant="xs" color="blue100">
-              Limited-Time Offer
-            </Text>
-          </Box>
-        )}
-
-        {!sale?.isAuction &&
-          !displayLimitedTimeOfferSignal &&
-          !!collectorSignals &&
-          !!enableCuratorsPicksAndInterestSignals && (
-            <ArtworkSocialSignal
-              collectorSignals={collectorSignals}
-              hideCuratorsPick={hideCuratorsPickSignal}
-              hideIncreasedInterest={hideIncreasedInterestSignal}
-              dark={dark}
-            />
-          )}
-
         {!!lotLabel && (
           <Text lineHeight="20px" color={secondaryTextColor} numberOfLines={1}>
             Lot {lotLabel}
@@ -200,32 +242,7 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
           </Text>
         )}
 
-        {SalePriceComponent
-          ? SalePriceComponent
-          : !!saleMessage && (
-              <Text
-                lineHeight="20px"
-                variant="xs"
-                color={saleInfoTextColor}
-                numberOfLines={1}
-                fontWeight={saleInfoTextWeight}
-              >
-                {saleMessage}
-
-                {!!displayLimitedTimeOfferSignal && (
-                  <Text
-                    lineHeight="20px"
-                    variant="xs"
-                    fontWeight="normal"
-                    color="blue100"
-                    numberOfLines={1}
-                  >
-                    {"  "}
-                    Exp. {partnerOfferEndAt}
-                  </Text>
-                )}
-              </Text>
-            )}
+        {SalePriceComponent ? SalePriceComponent : !!saleMessage && getSaleMessage()}
 
         {!!isUnlisted && (
           <Text
@@ -242,6 +259,18 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
         {!!displayAuctionSignal && !!collectorSignals && (
           <ArtworkAuctionTimer collectorSignals={collectorSignals} inRailCard />
         )}
+
+        {!sale?.isAuction &&
+          !displayLimitedTimeOfferSignal &&
+          !!collectorSignals &&
+          !!enableCuratorsPicksAndInterestSignals && (
+            <ArtworkSocialSignal
+              collectorSignals={collectorSignals}
+              hideCuratorsPick={hideCuratorsPickSignal}
+              hideIncreasedInterest={hideIncreasedInterestSignal}
+              dark={dark}
+            />
+          )}
       </Flex>
 
       {!!showSaveIcon && (
diff --git a/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx
index b3c98b47751..53749fb0e4d 100644
--- a/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx
+++ b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx
@@ -2,7 +2,7 @@ import { Flex, Text, useScreenDimensions, useSpace } from "@artsy/palette-mobile
 import { ContextMenuArtworkPreviewCard_artwork$key } from "__generated__/ContextMenuArtworkPreviewCard_artwork.graphql"
 import { ArtworkDisplayProps } from "app/Components/ContextMenu/ContextMenuArtwork"
 import { ContextMenuArtworkPreviewCardImage } from "app/Components/ContextMenu/ContextMenuArtworkPreviewCardImage"
-import { saleMessageOrBidInfo as defaultSaleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo"
+import { saleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo"
 import { getUrgencyTag } from "app/utils/getUrgencyTag"
 import { PixelRatio } from "react-native"
 import { isTablet } from "react-native-device-info"
@@ -42,7 +42,7 @@ export const ContextMenuArtworkPreviewCard: React.FC<ContextMenuArtworkPreviewCa
 
   const { artistNames, date, partner, title, sale, saleArtwork } = artwork
 
-  const saleMessage = defaultSaleMessageOrBidInfo({ artwork, isSmallTile: true })
+  const saleMessage = saleMessageOrBidInfo({ artwork, isSmallTile: true })
 
   const extendedBiddingEndAt = saleArtwork?.extendedBiddingEndAt
   const lotEndAt = saleArtwork?.endAt
@@ -122,7 +122,7 @@ export const ContextMenuArtworkPreviewCard: React.FC<ContextMenuArtworkPreviewCa
                   numberOfLines={1}
                   fontWeight={500}
                 >
-                  {saleMessage}
+                  11 {saleMessage}
                 </Text>
               )}
         </Flex>
diff --git a/src/app/utils/getSaleMessgeOrBidInfo.ts b/src/app/utils/getSaleMessgeOrBidInfo.ts
index b349af5622e..c9d4ecee254 100644
--- a/src/app/utils/getSaleMessgeOrBidInfo.ts
+++ b/src/app/utils/getSaleMessgeOrBidInfo.ts
@@ -84,7 +84,9 @@ export const saleMessageOrBidInfo = ({
   }
 
   if (collectorSignals?.partnerOffer?.isAvailable) {
-    return collectorSignals.partnerOffer.priceWithDiscount?.display
+    const salePrice = artwork.saleMessage && `~${artwork.saleMessage}~`
+
+    return `${collectorSignals.partnerOffer.priceWithDiscount?.display}${salePrice}`
   }
 
   return artwork.saleMessage

From f0673db59b5547815bf2c278aa76b84978a551ef Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Wed, 23 Oct 2024 23:38:33 +0200
Subject: [PATCH 03/10] feat: redesign hight demand indicator, chore

---
 .../ArtworkGrids/ArtworkGridItem.tsx           |  7 ++++++-
 .../ArtworkRail/ArtworkRailCardMeta.tsx        |  3 ++-
 .../ArtworkDetailsCollectorSignal.tsx          | 14 ++++++++++----
 .../MyCollectionArtworkGridItem.tests.tsx      |  4 ++--
 .../MyCollectionArtworkGridItem.tsx            | 18 ++++++++++--------
 5 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
index d50a05516c0..2cad932ba6d 100644
--- a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
+++ b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
@@ -307,7 +307,9 @@ export const Artwork: React.FC<ArtworkProps> = ({
                     color="black60"
                     numberOfLines={1}
                     style={{ textDecorationLine: "line-through" }}
+                    {...saleInfoTextStyle}
                   >
+                    {" "}
                     {part.slice(1, -1)}
                   </Text>
                 )
@@ -320,8 +322,9 @@ export const Artwork: React.FC<ArtworkProps> = ({
                   color={saleInfoTextColor}
                   numberOfLines={1}
                   fontWeight={saleInfoTextWeight}
+                  {...saleInfoTextStyle}
                 >
-                  {part}{" "}
+                  {part}
                 </Text>
               )
             })}
@@ -332,6 +335,7 @@ export const Artwork: React.FC<ArtworkProps> = ({
             fontWeight="normal"
             color="blue100"
             numberOfLines={1}
+            {...saleInfoTextStyle}
           >
             Offer Expires {partnerOfferEndAt}
           </Text>
@@ -345,6 +349,7 @@ export const Artwork: React.FC<ArtworkProps> = ({
           color={saleInfoTextColor}
           numberOfLines={1}
           fontWeight={saleInfoTextWeight}
+          {...saleInfoTextStyle}
         >
           {saleInfo}
         </Text>
diff --git a/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx b/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
index 603f6e2c02c..d02595c2962 100644
--- a/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
+++ b/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
@@ -151,6 +151,7 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
                     numberOfLines={1}
                     style={{ textDecorationLine: "line-through" }}
                   >
+                    {" "}
                     {part.slice(1, -1)}
                   </Text>
                 )
@@ -164,7 +165,7 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
                   numberOfLines={1}
                   fontWeight={saleInfoTextWeight}
                 >
-                  {part}{" "}
+                  {part}
                 </Text>
               )
             })}
diff --git a/src/app/Scenes/Artwork/Components/ArtworkDetailsCollectorSignal.tsx b/src/app/Scenes/Artwork/Components/ArtworkDetailsCollectorSignal.tsx
index 8b11eae4e26..1f789bf6162 100644
--- a/src/app/Scenes/Artwork/Components/ArtworkDetailsCollectorSignal.tsx
+++ b/src/app/Scenes/Artwork/Components/ArtworkDetailsCollectorSignal.tsx
@@ -1,7 +1,13 @@
-import { bullet, FairIcon, Flex, LinkText, Text } from "@artsy/palette-mobile"
-
+import {
+  ArrowUpRightIcon,
+  bullet,
+  FairIcon,
+  FireIcon,
+  Flex,
+  LinkText,
+  Text,
+} from "@artsy/palette-mobile"
 import { ArtworkDetailsCollectorSignal_artwork$key } from "__generated__/ArtworkDetailsCollectorSignal_artwork.graphql"
-import { ArrowUpIcon, FireIcon } from "app/Components/ArtworkGrids/ArtworkSocialSignal"
 import { navigate } from "app/system/navigation/navigate"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { DateTime } from "luxon"
@@ -44,7 +50,7 @@ export const ArtworkDetailsCollectorSignal: React.FC<Props> = ({ artwork }) => {
     case increasedInterest && enableCuratorsPicksAndInterestSignals: {
       singalTitle = "Increased Interest"
       signalDescription = "Based on collector activity in the past 14 days"
-      SignalIcon = ArrowUpIcon
+      SignalIcon = ArrowUpRightIcon
       break
     }
     case !!runningShow: {
diff --git a/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tests.tsx b/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tests.tsx
index 01946433f37..cd5b5c43ffe 100644
--- a/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tests.tsx
+++ b/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tests.tsx
@@ -117,7 +117,7 @@ describe("MyCollectionArtworkGridItem", () => {
       }),
     })
 
-    expect(screen.getByTestId("test-high-demand-icon")).toBeTruthy()
+    expect(screen.getByTestId("test-high-demand-signal")).toBeTruthy()
   })
 
   it("does not render the high demand icon if artist is P1 and artwork is submitted for sale", () => {
@@ -141,6 +141,6 @@ describe("MyCollectionArtworkGridItem", () => {
       }),
     })
 
-    expect(screen.queryByTestId("test-high-demand-icon")).toBeFalsy()
+    expect(screen.queryByTestId("test-high-demand-signal")).toBeFalsy()
   })
 })
diff --git a/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tsx b/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tsx
index 38d7b53405e..92a2c219939 100644
--- a/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tsx
+++ b/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tsx
@@ -1,8 +1,7 @@
 import { tappedCollectedArtwork } from "@artsy/cohesion"
-import { Flex, Box, Text, Popover, useColor } from "@artsy/palette-mobile"
+import { Box, Text, Popover, useColor, TrendingIcon } from "@artsy/palette-mobile"
 import { MyCollectionArtworkGridItem_artwork$data } from "__generated__/MyCollectionArtworkGridItem_artwork.graphql"
 import { DEFAULT_SECTION_MARGIN } from "app/Components/ArtworkGrids/InfiniteScrollArtworksGrid"
-import HighDemandIcon from "app/Components/Icons/HighDemandIcon"
 import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover"
 import { MyCollectionImageView } from "app/Scenes/MyCollection/Components/MyCollectionImageView"
 import { SubmissionStatus } from "app/Scenes/MyCollection/Components/SubmissionStatus"
@@ -119,12 +118,6 @@ const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> =
           <Box maxWidth={width} mt={1} style={{ flex: 1 }}>
             <Text lineHeight="18px" weight="regular" variant="xs" numberOfLines={2}>
               {artistNames}
-
-              {!!showHighDemandIcon && (
-                <Flex testID="test-high-demand-icon">
-                  <HighDemandIcon style={{ marginLeft: 2, marginBottom: -2 }} />
-                </Flex>
-              )}
             </Text>
 
             {!!title ? (
@@ -142,6 +135,15 @@ const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> =
               </Text>
             ) : null}
 
+            {!!showHighDemandIcon && (
+              <Box testID="test-high-demand-signal" alignItems="center" flexDirection="row">
+                <TrendingIcon />
+                <Text variant="xs" pl="3px" textAlign="center">
+                  High demand
+                </Text>
+              </Box>
+            )}
+
             {!!enableSubmitArtworkTier2Information && <SubmissionStatus artwork={artwork} />}
           </Box>
         </View>

From 89a8759b4ef4ec1cde8823e7d83faf8ae8c833de Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Thu, 24 Oct 2024 14:14:01 +0200
Subject: [PATCH 04/10] chore: address review comments

---
 .../ArtworkGrids/ArtworkSocialSignal.tsx      |  3 ++-
 .../ArtworkRail/ArtworkRailCardMeta.tsx       | 25 +++++++++++--------
 .../ContextMenuArtworkPreviewCard.tsx         |  2 +-
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx b/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx
index dcd0d76ee79..7791f7ffcb9 100644
--- a/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx
+++ b/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx
@@ -33,7 +33,8 @@ export const ArtworkSocialSignal: React.FC<ArtworkSocialSignalProps> = ({
       return (
         <Box flexDirection="row" alignItems="center">
           <ArrowUpRightIcon />
-          <Text color={primaryColor} variant="xs" pl="3px">
+          <Text color={primaryColor} variant="xs">
+            {" "}
             Increased Interest
           </Text>
         </Box>
diff --git a/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx b/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
index d02595c2962..82fc10ed2cb 100644
--- a/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
+++ b/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
@@ -195,6 +195,12 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
       )
   }
 
+  const displayArtworkSocialSignal =
+    !sale?.isAuction &&
+    !displayLimitedTimeOfferSignal &&
+    !!collectorSignals &&
+    !!enableCuratorsPicksAndInterestSignals
+
   return (
     <Flex
       my={1}
@@ -261,17 +267,14 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
           <ArtworkAuctionTimer collectorSignals={collectorSignals} inRailCard />
         )}
 
-        {!sale?.isAuction &&
-          !displayLimitedTimeOfferSignal &&
-          !!collectorSignals &&
-          !!enableCuratorsPicksAndInterestSignals && (
-            <ArtworkSocialSignal
-              collectorSignals={collectorSignals}
-              hideCuratorsPick={hideCuratorsPickSignal}
-              hideIncreasedInterest={hideIncreasedInterestSignal}
-              dark={dark}
-            />
-          )}
+        {!!displayArtworkSocialSignal && (
+          <ArtworkSocialSignal
+            collectorSignals={collectorSignals}
+            hideCuratorsPick={hideCuratorsPickSignal}
+            hideIncreasedInterest={hideIncreasedInterestSignal}
+            dark={dark}
+          />
+        )}
       </Flex>
 
       {!!showSaveIcon && (
diff --git a/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx
index 53749fb0e4d..6d52f06ddb6 100644
--- a/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx
+++ b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx
@@ -122,7 +122,7 @@ export const ContextMenuArtworkPreviewCard: React.FC<ContextMenuArtworkPreviewCa
                   numberOfLines={1}
                   fontWeight={500}
                 >
-                  11 {saleMessage}
+                  {saleMessage}
                 </Text>
               )}
         </Flex>

From fd190f75f73e8bfb5c23f0f43f507b46b3dbcb6b Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Thu, 24 Oct 2024 15:06:52 +0200
Subject: [PATCH 05/10] chore: extract ArtworkSaleMessageComponent into a
 separate component

---
 .../ArtworkGrids/ArtworkGridItem.tsx          |   1 +
 .../ArtworkRail/ArtworkRailCardMeta.tsx       |  95 +++------------
 .../ArtworkRail/ArtworkRailUtils.tsx          |   7 ++
 .../ArtworkSaleMessageComponent.tsx           | 113 ++++++++++++++++++
 4 files changed, 135 insertions(+), 81 deletions(-)
 create mode 100644 src/app/Components/ArtworkRail/ArtworkRailUtils.tsx
 create mode 100644 src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx

diff --git a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
index 2cad932ba6d..ab53510a9e5 100644
--- a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
+++ b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
@@ -657,6 +657,7 @@ export default createFragmentContainer(Artwork, {
         ...ArtworkAuctionTimer_collectorSignals
         ...ArtworkSocialSignal_collectorSignals
       }
+      ...ArtworkSaleMessageComponent_artwork
       ...useSaveArtworkToArtworkLists_artwork
     }
   `,
diff --git a/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx b/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
index 82fc10ed2cb..0d7aecdbe84 100644
--- a/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
+++ b/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
@@ -4,10 +4,10 @@ import { ArtworkAuctionTimer } from "app/Components/ArtworkGrids/ArtworkAuctionT
 import { ArtworkSocialSignal } from "app/Components/ArtworkGrids/ArtworkSocialSignal"
 import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSaveArtworkToArtworkLists"
 import { ARTWORK_RAIL_TEXT_CONTAINER_HEIGHT } from "app/Components/ArtworkRail/ArtworkRailCard"
+import { useMetaDataTextColor } from "app/Components/ArtworkRail/ArtworkRailUtils"
+import { ArtworkSaleMessageComponent } from "app/Components/ArtworkRail/ArtworkSaleMessageComponent"
 import { HEART_ICON_SIZE } from "app/Components/constants"
-import { formattedTimeLeft } from "app/Scenes/Activity/utils/formattedTimeLeft"
 import { saleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo"
-import { getTimer } from "app/utils/getTimer"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import {
   ArtworkActionTrackingProps,
@@ -90,26 +90,13 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
     auctionSignals: enableAuctionImprovementsSignals ? collectorSignals?.auction : null,
   })
 
-  const partnerOfferEndAt = collectorSignals?.partnerOffer?.endAt
-    ? formattedTimeLeft(getTimer(collectorSignals.partnerOffer.endAt).time).timerCopy
-    : ""
-
-  const primaryTextColor = dark ? "white100" : "black100"
-  const secondaryTextColor = dark ? "black15" : "black60"
+  const { primaryTextColor, secondaryTextColor } = useMetaDataTextColor({ dark })
 
   const displayLimitedTimeOfferSignal =
     enablePartnerOfferSignals && collectorSignals?.partnerOffer?.isAvailable && !sale?.isAuction
 
   const displayAuctionSignal = enableAuctionImprovementsSignals && sale?.isAuction
 
-  const saleInfoTextColor =
-    displayAuctionSignal && collectorSignals?.auction?.liveBiddingStarted
-      ? "blue100"
-      : primaryTextColor
-
-  const saleInfoTextWeight =
-    displayAuctionSignal && collectorSignals?.auction?.liveBiddingStarted ? "normal" : "bold"
-
   const onArtworkSavedOrUnSaved = (saved: boolean) => {
     trackEvent(
       artworkActionTracks.saveOrUnsaveArtwork(saved, {
@@ -132,69 +119,6 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
     onCompleted: onArtworkSavedOrUnSaved,
   })
 
-  const getSaleMessage = () => {
-    const parts = saleMessage && saleMessage.split(/(~.*?~)/)
-    if (!parts) return null
-
-    if (displayLimitedTimeOfferSignal) {
-      return (
-        <>
-          <Flex flexDirection="row">
-            {parts.map((part, index) => {
-              if (part.startsWith("~") && part.endsWith("~")) {
-                return (
-                  <Text
-                    key={index}
-                    lineHeight="20px"
-                    variant="xs"
-                    color="black60"
-                    numberOfLines={1}
-                    style={{ textDecorationLine: "line-through" }}
-                  >
-                    {" "}
-                    {part.slice(1, -1)}
-                  </Text>
-                )
-              }
-              return (
-                <Text
-                  key={index}
-                  lineHeight="20px"
-                  variant="xs"
-                  color={saleInfoTextColor}
-                  numberOfLines={1}
-                  fontWeight={saleInfoTextWeight}
-                >
-                  {part}
-                </Text>
-              )
-            })}
-          </Flex>
-          <Text
-            lineHeight="20px"
-            variant="xs"
-            fontWeight="normal"
-            color="blue100"
-            numberOfLines={1}
-          >
-            Offer Expires {partnerOfferEndAt}
-          </Text>
-        </>
-      )
-    } else
-      return (
-        <Text
-          lineHeight="20px"
-          variant="xs"
-          color={saleInfoTextColor}
-          numberOfLines={1}
-          fontWeight={saleInfoTextWeight}
-        >
-          {saleMessage}
-        </Text>
-      )
-  }
-
   const displayArtworkSocialSignal =
     !sale?.isAuction &&
     !displayLimitedTimeOfferSignal &&
@@ -249,7 +173,16 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
           </Text>
         )}
 
-        {SalePriceComponent ? SalePriceComponent : !!saleMessage && getSaleMessage()}
+        {SalePriceComponent
+          ? SalePriceComponent
+          : !!saleMessage && (
+              <ArtworkSaleMessageComponent
+                artwork={artwork}
+                saleMessage={saleMessage}
+                displayLimitedTimeOfferSignal={displayLimitedTimeOfferSignal}
+                dark={dark}
+              />
+            )}
 
         {!!isUnlisted && (
           <Text
@@ -330,7 +263,6 @@ const artworkMetaFragment = graphql`
     sale {
       isAuction
       isClosed
-      endAt
     }
     saleArtwork {
       currentBid {
@@ -365,6 +297,7 @@ const artworkMetaFragment = graphql`
       ...ArtworkSocialSignal_collectorSignals
     }
 
+    ...ArtworkSaleMessageComponent_artwork
     ...useSaveArtworkToArtworkLists_artwork
   }
 `
diff --git a/src/app/Components/ArtworkRail/ArtworkRailUtils.tsx b/src/app/Components/ArtworkRail/ArtworkRailUtils.tsx
new file mode 100644
index 00000000000..faf2c5726e4
--- /dev/null
+++ b/src/app/Components/ArtworkRail/ArtworkRailUtils.tsx
@@ -0,0 +1,7 @@
+export const useMetaDataTextColor = ({ dark }: { dark: boolean }) => {
+  const primaryTextColor = dark ? "white100" : "black100"
+
+  const secondaryTextColor = dark ? "black15" : "black60"
+
+  return { primaryTextColor, secondaryTextColor }
+}
diff --git a/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx b/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx
new file mode 100644
index 00000000000..c5d85bda68e
--- /dev/null
+++ b/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx
@@ -0,0 +1,113 @@
+import { Flex, Text } from "@artsy/palette-mobile"
+import { ArtworkSaleMessageComponent_artwork$key } from "__generated__/ArtworkSaleMessageComponent_artwork.graphql"
+import { useMetaDataTextColor } from "app/Components/ArtworkRail/ArtworkRailUtils"
+import { formattedTimeLeft } from "app/Scenes/Activity/utils/formattedTimeLeft"
+import { getTimer } from "app/utils/getTimer"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
+import { graphql, useFragment } from "react-relay"
+
+interface ArtworkSaleMessageComponentProps {
+  artwork: ArtworkSaleMessageComponent_artwork$key
+  displayLimitedTimeOfferSignal: boolean | null | undefined
+  saleMessage: string | null | undefined
+  dark: boolean
+}
+
+export const ArtworkSaleMessageComponent: React.FC<ArtworkSaleMessageComponentProps> = ({
+  artwork,
+  displayLimitedTimeOfferSignal,
+  saleMessage,
+  dark,
+}) => {
+  const enableAuctionImprovementsSignals = useFeatureFlag("AREnableAuctionImprovementsSignals")
+
+  const { collectorSignals, sale } = useFragment(fragment, artwork)
+
+  const { primaryTextColor } = useMetaDataTextColor({ dark })
+
+  const displayAuctionSignal = enableAuctionImprovementsSignals && sale?.isAuction
+
+  const partnerOfferEndAt = collectorSignals?.partnerOffer?.endAt
+    ? formattedTimeLeft(getTimer(collectorSignals?.partnerOffer.endAt).time).timerCopy
+    : ""
+
+  const saleInfoTextColor =
+    displayAuctionSignal && collectorSignals?.auction?.liveBiddingStarted
+      ? "blue100"
+      : primaryTextColor
+
+  const saleInfoTextWeight =
+    displayAuctionSignal && collectorSignals?.auction?.liveBiddingStarted ? "normal" : "bold"
+
+  const parts = saleMessage && saleMessage.split(/(~.*?~)/)
+
+  if (!parts) return null
+
+  if (displayLimitedTimeOfferSignal) {
+    return (
+      <>
+        <Flex flexDirection="row">
+          {parts.map((part, index) => {
+            if (part.startsWith("~") && part.endsWith("~")) {
+              return (
+                <Text
+                  key={index}
+                  lineHeight="20px"
+                  variant="xs"
+                  color="black60"
+                  numberOfLines={1}
+                  style={{ textDecorationLine: "line-through" }}
+                >
+                  {" "}
+                  {part.slice(1, -1)}
+                </Text>
+              )
+            }
+            return (
+              <Text
+                key={index}
+                lineHeight="20px"
+                variant="xs"
+                color={saleInfoTextColor}
+                numberOfLines={1}
+                fontWeight={saleInfoTextWeight}
+              >
+                {part}
+              </Text>
+            )
+          })}
+        </Flex>
+        <Text lineHeight="20px" variant="xs" fontWeight="normal" color="blue100" numberOfLines={1}>
+          Offer Expires {partnerOfferEndAt}
+        </Text>
+      </>
+    )
+  } else
+    return (
+      <Text
+        lineHeight="20px"
+        variant="xs"
+        color={saleInfoTextColor}
+        numberOfLines={1}
+        fontWeight={saleInfoTextWeight}
+      >
+        {saleMessage}
+      </Text>
+    )
+}
+
+const fragment = graphql`
+  fragment ArtworkSaleMessageComponent_artwork on Artwork {
+    collectorSignals {
+      partnerOffer {
+        endAt
+      }
+      auction {
+        liveBiddingStarted
+      }
+    }
+    sale {
+      isAuction
+    }
+  }
+`

From b104397488ddbc624cd94b1387c7bebd21a9e7b8 Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Thu, 24 Oct 2024 15:43:02 +0200
Subject: [PATCH 06/10] fix: tests

---
 src/app/Components/ArtworkGrids/ArtworkGridItem.tests.tsx | 5 +++--
 src/app/Components/ArtworkRail/ArtworkRailCard.tests.tsx  | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/Components/ArtworkGrids/ArtworkGridItem.tests.tsx b/src/app/Components/ArtworkGrids/ArtworkGridItem.tests.tsx
index 8bea4192f08..fa1dfb56e2f 100644
--- a/src/app/Components/ArtworkGrids/ArtworkGridItem.tests.tsx
+++ b/src/app/Components/ArtworkGrids/ArtworkGridItem.tests.tsx
@@ -491,14 +491,15 @@ describe("ArtworkGridItem", () => {
         renderWithRelay({
           Artwork: () => ({
             ...artwork,
+            saleMessage: "$120,500",
             sale: { ...artwork.sale, isAuction: false },
             realizedPrice: null,
             collectorSignals,
           }),
         })
 
-        expect(screen.getByText("Limited-Time Offer")).toBeOnTheScreen()
-        expect(screen.getByText("Exp. 1d 12h")).toBeOnTheScreen()
+        expect(screen.getByText("$120,500")).toBeOnTheScreen()
+        expect(screen.getByText("Offer Expires 1d 12h")).toBeOnTheScreen()
       })
 
       it("doesn't show the limited-time offer signal for auction artworks", () => {
diff --git a/src/app/Components/ArtworkRail/ArtworkRailCard.tests.tsx b/src/app/Components/ArtworkRail/ArtworkRailCard.tests.tsx
index a4fb5ee81e5..0a4d2701437 100644
--- a/src/app/Components/ArtworkRail/ArtworkRailCard.tests.tsx
+++ b/src/app/Components/ArtworkRail/ArtworkRailCard.tests.tsx
@@ -182,14 +182,15 @@ describe("ArtworkRailCard", () => {
         renderWithRelay({
           Artwork: () => ({
             ...artwork,
+            saleMessage: "$120,500",
             sale: { ...artwork.sale, isAuction: false },
             realizedPrice: null,
             collectorSignals,
           }),
         })
 
-        expect(screen.getByText("Limited-Time Offer")).toBeOnTheScreen()
-        expect(screen.getByText("Exp. 1d 12h")).toBeOnTheScreen()
+        expect(screen.getByText("$120,500")).toBeOnTheScreen()
+        expect(screen.getByText("Offer Expires 1d 12h")).toBeOnTheScreen()
       })
 
       it("doesn't show the limited-time offer signal for auction artworks", () => {

From 088ef733ea2e8f32824f9570d5d04d1af1553e80 Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Thu, 24 Oct 2024 17:09:18 +0200
Subject: [PATCH 07/10] chore: refactoring

---
 .../ArtworkGrids/ArtworkGridItem.tsx          | 89 ++-----------------
 .../ArtworkRail/ArtworkRailUtils.tsx          |  4 +-
 .../ArtworkSaleMessageComponent.tsx           | 19 +++-
 .../ContextMenuArtworkPreviewCard.tsx         |  5 +-
 .../ContextMenuArtworkPreviewCardImage.tsx    |  7 +-
 5 files changed, 32 insertions(+), 92 deletions(-)

diff --git a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
index 668a2eb26b7..78c93740317 100644
--- a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
+++ b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
@@ -21,13 +21,13 @@ import { ArtworksFiltersStore } from "app/Components/ArtworkFilter/ArtworkFilter
 import { ArtworkAuctionTimer } from "app/Components/ArtworkGrids/ArtworkAuctionTimer"
 import { ArtworkSocialSignal } from "app/Components/ArtworkGrids/ArtworkSocialSignal"
 import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSaveArtworkToArtworkLists"
+import { ArtworkSaleMessageComponent } from "app/Components/ArtworkRail/ArtworkSaleMessageComponent"
 import { ContextMenuArtwork } from "app/Components/ContextMenu/ContextMenuArtwork"
 import { DurationProvider } from "app/Components/Countdown"
 import { Disappearable, DissapearableArtwork } from "app/Components/Disappearable"
 import { ProgressiveOnboardingSaveArtwork } from "app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveArtwork"
 import { HEART_ICON_SIZE } from "app/Components/constants"
 import { PartnerOffer } from "app/Scenes/Activity/components/NotificationArtworkList"
-import { formattedTimeLeft } from "app/Scenes/Activity/utils/formattedTimeLeft"
 import { GlobalStore } from "app/store/GlobalStore"
 import { navigate } from "app/system/navigation/navigate"
 import { useArtworkBidding } from "app/utils/Websockets/auctions/useArtworkBidding"
@@ -252,10 +252,6 @@ export const Artwork: React.FC<ArtworkProps> = ({
     ? currentBiddingEndAt
     : artwork.saleArtwork?.endAt || artwork.sale?.endAt
 
-  const partnerOfferEndAt = collectorSignals?.partnerOffer?.endAt
-    ? formattedTimeLeft(getTimer(collectorSignals.partnerOffer.endAt).time).timerCopy
-    : ""
-
   const urgencyTag = getUrgencyTag(endsAt)
 
   const canShowAuctionProgressBar =
@@ -271,84 +267,10 @@ export const Artwork: React.FC<ArtworkProps> = ({
 
   const displayAuctionSignal = AREnableAuctionImprovementsSignals && isAuction
 
-  const saleInfoTextColor =
-    displayAuctionSignal && collectorSignals?.auction?.liveBiddingStarted ? "blue100" : "black100"
-
-  const saleInfoTextWeight =
-    displayAuctionSignal && collectorSignals?.auction?.liveBiddingStarted ? "normal" : "bold"
-
   const handleSupress = async (item: DissapearableArtwork) => {
     await item._disappearable?.disappear()
   }
 
-  const getSaleMessage = () => {
-    // TODO: move into a hook, rename getOfferMessage???
-    const parts = saleInfo && saleInfo.split(/(~.*?~)/)
-    if (!parts) return null
-
-    if (displayLimitedTimeOfferSignal) {
-      return (
-        <>
-          <Flex flexDirection="row">
-            {parts.map((part, index) => {
-              if (part.startsWith("~") && part.endsWith("~")) {
-                return (
-                  <Text
-                    key={index}
-                    lineHeight="20px"
-                    variant="xs"
-                    color="black60"
-                    numberOfLines={1}
-                    style={{ textDecorationLine: "line-through" }}
-                    {...saleInfoTextStyle}
-                  >
-                    {" "}
-                    {part.slice(1, -1)}
-                  </Text>
-                )
-              }
-              return (
-                <Text
-                  key={index}
-                  lineHeight="20px"
-                  variant="xs"
-                  color={saleInfoTextColor}
-                  numberOfLines={1}
-                  fontWeight={saleInfoTextWeight}
-                  {...saleInfoTextStyle}
-                >
-                  {part}
-                </Text>
-              )
-            })}
-          </Flex>
-          <Text
-            lineHeight="20px"
-            variant="xs"
-            fontWeight="normal"
-            color="blue100"
-            numberOfLines={1}
-            {...saleInfoTextStyle}
-          >
-            Offer Expires {partnerOfferEndAt}
-          </Text>
-        </>
-      )
-    } else
-      return (
-        <Text
-          lineHeight="20px"
-          variant="xs"
-          color={saleInfoTextColor}
-          numberOfLines={1}
-          fontWeight={saleInfoTextWeight}
-          {...saleInfoTextStyle}
-        >
-          {saleInfo}
-        </Text>
-      )
-  }
-
   const displayArtworkSocialSignal =
     !isAuction && !displayLimitedTimeOfferSignal && !!collectorSignals
 
@@ -491,7 +413,14 @@ export const Artwork: React.FC<ArtworkProps> = ({
                     </Text>
                   </Flex>
                 )}
-                {!!saleInfo && !hideSaleInfo && !displayPriceOfferMessage && getSaleMessage()}
+                {!!saleInfo && !hideSaleInfo && !displayPriceOfferMessage && (
+                  <ArtworkSaleMessageComponent
+                    artwork={artwork}
+                    saleMessage={saleInfo}
+                    displayLimitedTimeOfferSignal={displayLimitedTimeOfferSignal}
+                    saleInfoTextStyle={saleInfoTextStyle}
+                  />
+                )}
 
                 {!!artwork.isUnlisted && (
                   <Text lineHeight="18px" variant="xs" numberOfLines={1} fontWeight="bold">
diff --git a/src/app/Components/ArtworkRail/ArtworkRailUtils.tsx b/src/app/Components/ArtworkRail/ArtworkRailUtils.tsx
index faf2c5726e4..c3a78ed4019 100644
--- a/src/app/Components/ArtworkRail/ArtworkRailUtils.tsx
+++ b/src/app/Components/ArtworkRail/ArtworkRailUtils.tsx
@@ -3,5 +3,7 @@ export const useMetaDataTextColor = ({ dark }: { dark: boolean }) => {
 
   const secondaryTextColor = dark ? "black15" : "black60"
 
-  return { primaryTextColor, secondaryTextColor }
+  const backgroundColor = dark ? "black100" : "white100"
+
+  return { primaryTextColor, secondaryTextColor, backgroundColor }
 }
diff --git a/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx b/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx
index c5d85bda68e..f2ca4925932 100644
--- a/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx
+++ b/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@artsy/palette-mobile"
+import { Flex, Text, TextProps } from "@artsy/palette-mobile"
 import { ArtworkSaleMessageComponent_artwork$key } from "__generated__/ArtworkSaleMessageComponent_artwork.graphql"
 import { useMetaDataTextColor } from "app/Components/ArtworkRail/ArtworkRailUtils"
 import { formattedTimeLeft } from "app/Scenes/Activity/utils/formattedTimeLeft"
@@ -10,14 +10,16 @@ interface ArtworkSaleMessageComponentProps {
   artwork: ArtworkSaleMessageComponent_artwork$key
   displayLimitedTimeOfferSignal: boolean | null | undefined
   saleMessage: string | null | undefined
-  dark: boolean
+  saleInfoTextStyle?: TextProps
+  dark?: boolean
 }
 
 export const ArtworkSaleMessageComponent: React.FC<ArtworkSaleMessageComponentProps> = ({
   artwork,
   displayLimitedTimeOfferSignal,
   saleMessage,
-  dark,
+  saleInfoTextStyle,
+  dark = false,
 }) => {
   const enableAuctionImprovementsSignals = useFeatureFlag("AREnableAuctionImprovementsSignals")
 
@@ -71,13 +73,21 @@ export const ArtworkSaleMessageComponent: React.FC<ArtworkSaleMessageComponentPr
                 color={saleInfoTextColor}
                 numberOfLines={1}
                 fontWeight={saleInfoTextWeight}
+                {...saleInfoTextStyle}
               >
                 {part}
               </Text>
             )
           })}
         </Flex>
-        <Text lineHeight="20px" variant="xs" fontWeight="normal" color="blue100" numberOfLines={1}>
+        <Text
+          lineHeight="20px"
+          variant="xs"
+          fontWeight="normal"
+          color="blue100"
+          numberOfLines={1}
+          {...saleInfoTextStyle}
+        >
           Offer Expires {partnerOfferEndAt}
         </Text>
       </>
@@ -90,6 +100,7 @@ export const ArtworkSaleMessageComponent: React.FC<ArtworkSaleMessageComponentPr
         color={saleInfoTextColor}
         numberOfLines={1}
         fontWeight={saleInfoTextWeight}
+        {...saleInfoTextStyle}
       >
         {saleMessage}
       </Text>
diff --git a/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx
index 6d52f06ddb6..b4ae72c4786 100644
--- a/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx
+++ b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCard.tsx
@@ -1,5 +1,6 @@
 import { Flex, Text, useScreenDimensions, useSpace } from "@artsy/palette-mobile"
 import { ContextMenuArtworkPreviewCard_artwork$key } from "__generated__/ContextMenuArtworkPreviewCard_artwork.graphql"
+import { useMetaDataTextColor } from "app/Components/ArtworkRail/ArtworkRailUtils"
 import { ArtworkDisplayProps } from "app/Components/ContextMenu/ContextMenuArtwork"
 import { ContextMenuArtworkPreviewCardImage } from "app/Components/ContextMenu/ContextMenuArtworkPreviewCardImage"
 import { saleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo"
@@ -49,9 +50,7 @@ export const ContextMenuArtworkPreviewCard: React.FC<ContextMenuArtworkPreviewCa
   const endAt = extendedBiddingEndAt ?? lotEndAt ?? sale?.endAt
   const urgencyTag = sale?.isAuction && !sale?.isClosed ? getUrgencyTag(endAt) : null
 
-  const primaryTextColor = dark ? "white100" : "black100"
-  const secondaryTextColor = dark ? "black15" : "black60"
-  const backgroundColor = dark ? "black100" : "white100"
+  const { primaryTextColor, secondaryTextColor, backgroundColor } = useMetaDataTextColor({ dark })
 
   const getTextHeight = () => {
     return ARTWORK_RAIL_TEXT_CONTAINER_HEIGHT
diff --git a/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCardImage.tsx b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCardImage.tsx
index 9f88a8cf5c8..ac83587305a 100644
--- a/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCardImage.tsx
+++ b/src/app/Components/ContextMenu/ContextMenuArtworkPreviewCardImage.tsx
@@ -1,10 +1,9 @@
-import { Flex, Text, useColor } from "@artsy/palette-mobile"
+import { Flex, Image, Text, useColor } from "@artsy/palette-mobile"
 import { ContextMenuArtworkPreviewCardImage_artwork$key } from "__generated__/ContextMenuArtworkPreviewCardImage_artwork.graphql"
 import {
   LEGACY_ARTWORK_RAIL_CARD_IMAGE_HEIGHT,
   ARTWORK_RAIL_CARD_IMAGE_WIDTH,
 } from "app/Components/ArtworkRail/LegacyArtworkRailCardImage"
-import { OpaqueImageView } from "app/Components/OpaqueImageView2"
 import { sizeToFit } from "app/utils/useSizeToFit"
 import { graphql, useFragment } from "react-relay"
 
@@ -62,9 +61,9 @@ export const ContextMenuArtworkPreviewCardImage: React.FC<
   return (
     <Flex>
       <Flex width={containerWidth}>
-        <OpaqueImageView
+        <Image
           style={{ maxHeight: LEGACY_ARTWORK_RAIL_CARD_IMAGE_HEIGHT }}
-          imageURL={src}
+          src={src}
           height={imageDimensions.height || LEGACY_ARTWORK_RAIL_CARD_IMAGE_HEIGHT}
           width={containerWidth}
         />

From 213ca8a3b55f69531a270877cea5e75db9fcb09f Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Fri, 25 Oct 2024 09:12:49 +0200
Subject: [PATCH 08/10] chore: address review comments

---
 src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx | 3 ++-
 src/app/utils/getSaleMessgeOrBidInfo.ts                 | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx b/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx
index 7791f7ffcb9..ed1d07beeb8 100644
--- a/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx
+++ b/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx
@@ -23,7 +23,8 @@ export const ArtworkSocialSignal: React.FC<ArtworkSocialSignalProps> = ({
       return (
         <Box alignItems="center" flexDirection="row">
           <FireIcon />
-          <Text color={primaryColor} variant="xs" pl="3px" textAlign="center">
+          <Text color={primaryColor} variant="xs" textAlign="center">
+            {" "}
             Curators’ Pick
           </Text>
         </Box>
diff --git a/src/app/utils/getSaleMessgeOrBidInfo.ts b/src/app/utils/getSaleMessgeOrBidInfo.ts
index c9d4ecee254..255b85334e2 100644
--- a/src/app/utils/getSaleMessgeOrBidInfo.ts
+++ b/src/app/utils/getSaleMessgeOrBidInfo.ts
@@ -84,7 +84,7 @@ export const saleMessageOrBidInfo = ({
   }
 
   if (collectorSignals?.partnerOffer?.isAvailable) {
-    const salePrice = artwork.saleMessage && `~${artwork.saleMessage}~`
+    const salePrice = artwork.saleMessage ? `~${artwork.saleMessage}~` : ""
 
     return `${collectorSignals.partnerOffer.priceWithDiscount?.display}${salePrice}`
   }

From b698e5b90e462301f643f313a34e93d85ec3c395 Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Fri, 25 Oct 2024 12:37:29 +0200
Subject: [PATCH 09/10] chore: address review comments

---
 .../ArtworkRail/ArtworkSaleMessageComponent.tsx    |  5 +++--
 src/app/utils/getSaleMessgeOrBidInfo.ts            | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx b/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx
index f2ca4925932..84b0bb02729 100644
--- a/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx
+++ b/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx
@@ -2,6 +2,7 @@ import { Flex, Text, TextProps } from "@artsy/palette-mobile"
 import { ArtworkSaleMessageComponent_artwork$key } from "__generated__/ArtworkSaleMessageComponent_artwork.graphql"
 import { useMetaDataTextColor } from "app/Components/ArtworkRail/ArtworkRailUtils"
 import { formattedTimeLeft } from "app/Scenes/Activity/utils/formattedTimeLeft"
+import { displayAsLinethrought, parsedSaleMessage } from "app/utils/getSaleMessgeOrBidInfo"
 import { getTimer } from "app/utils/getTimer"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { graphql, useFragment } from "react-relay"
@@ -41,7 +42,7 @@ export const ArtworkSaleMessageComponent: React.FC<ArtworkSaleMessageComponentPr
   const saleInfoTextWeight =
     displayAuctionSignal && collectorSignals?.auction?.liveBiddingStarted ? "normal" : "bold"
 
-  const parts = saleMessage && saleMessage.split(/(~.*?~)/)
+  const { parts } = parsedSaleMessage(saleMessage)
 
   if (!parts) return null
 
@@ -50,7 +51,7 @@ export const ArtworkSaleMessageComponent: React.FC<ArtworkSaleMessageComponentPr
       <>
         <Flex flexDirection="row">
           {parts.map((part, index) => {
-            if (part.startsWith("~") && part.endsWith("~")) {
+            if (displayAsLinethrought(part)) {
               return (
                 <Text
                   key={index}
diff --git a/src/app/utils/getSaleMessgeOrBidInfo.ts b/src/app/utils/getSaleMessgeOrBidInfo.ts
index 255b85334e2..d9a6d6cb135 100644
--- a/src/app/utils/getSaleMessgeOrBidInfo.ts
+++ b/src/app/utils/getSaleMessgeOrBidInfo.ts
@@ -84,6 +84,9 @@ export const saleMessageOrBidInfo = ({
   }
 
   if (collectorSignals?.partnerOffer?.isAvailable) {
+    // If there is a partnerOffer we have to show the message as a strikethrough
+    // in order to not change the type of the returned value we mark the message with ~
+    // and parse it in the parsedSaleMessage function to apply different styles to each part later
     const salePrice = artwork.saleMessage ? `~${artwork.saleMessage}~` : ""
 
     return `${collectorSignals.partnerOffer.priceWithDiscount?.display}${salePrice}`
@@ -91,3 +94,14 @@ export const saleMessageOrBidInfo = ({
 
   return artwork.saleMessage
 }
+
+export const parsedSaleMessage = (saleMessage: string | null | undefined) => {
+  // Split the sale message into parts to apply different styles to each part
+  const parts = saleMessage && saleMessage.split(/(~.*?~)/)
+
+  return { parts }
+}
+
+export const displayAsLinethrought = (part: string) => {
+  return part.startsWith("~") && part.endsWith("~")
+}

From ca2d19daf583d1c6ad7909c915997499f83c4b4b Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Fri, 25 Oct 2024 12:44:38 +0200
Subject: [PATCH 10/10] chore: rename ArtworkSaleMessage Component

---
 src/app/Components/ArtworkGrids/ArtworkGridItem.tsx    |  6 +++---
 src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx |  6 +++---
 ...SaleMessageComponent.tsx => ArtworkSaleMessage.tsx} | 10 +++++-----
 3 files changed, 11 insertions(+), 11 deletions(-)
 rename src/app/Components/ArtworkRail/{ArtworkSaleMessageComponent.tsx => ArtworkSaleMessage.tsx} (90%)

diff --git a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
index 78c93740317..1d150475745 100644
--- a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
+++ b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx
@@ -21,7 +21,7 @@ import { ArtworksFiltersStore } from "app/Components/ArtworkFilter/ArtworkFilter
 import { ArtworkAuctionTimer } from "app/Components/ArtworkGrids/ArtworkAuctionTimer"
 import { ArtworkSocialSignal } from "app/Components/ArtworkGrids/ArtworkSocialSignal"
 import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSaveArtworkToArtworkLists"
-import { ArtworkSaleMessageComponent } from "app/Components/ArtworkRail/ArtworkSaleMessageComponent"
+import { ArtworkSaleMessage } from "app/Components/ArtworkRail/ArtworkSaleMessage"
 import { ContextMenuArtwork } from "app/Components/ContextMenu/ContextMenuArtwork"
 import { DurationProvider } from "app/Components/Countdown"
 import { Disappearable, DissapearableArtwork } from "app/Components/Disappearable"
@@ -414,7 +414,7 @@ export const Artwork: React.FC<ArtworkProps> = ({
                   </Flex>
                 )}
                 {!!saleInfo && !hideSaleInfo && !displayPriceOfferMessage && (
-                  <ArtworkSaleMessageComponent
+                  <ArtworkSaleMessage
                     artwork={artwork}
                     saleMessage={saleInfo}
                     displayLimitedTimeOfferSignal={displayLimitedTimeOfferSignal}
@@ -579,7 +579,7 @@ export default createFragmentContainer(Artwork, {
         ...ArtworkAuctionTimer_collectorSignals
         ...ArtworkSocialSignal_collectorSignals
       }
-      ...ArtworkSaleMessageComponent_artwork
+      ...ArtworkSaleMessage_artwork
       ...useSaveArtworkToArtworkLists_artwork
     }
   `,
diff --git a/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx b/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
index 957801216a1..4ad75c7795b 100644
--- a/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
+++ b/src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx
@@ -5,7 +5,7 @@ import { ArtworkSocialSignal } from "app/Components/ArtworkGrids/ArtworkSocialSi
 import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSaveArtworkToArtworkLists"
 import { ARTWORK_RAIL_TEXT_CONTAINER_HEIGHT } from "app/Components/ArtworkRail/ArtworkRailCard"
 import { useMetaDataTextColor } from "app/Components/ArtworkRail/ArtworkRailUtils"
-import { ArtworkSaleMessageComponent } from "app/Components/ArtworkRail/ArtworkSaleMessageComponent"
+import { ArtworkSaleMessage } from "app/Components/ArtworkRail/ArtworkSaleMessage"
 import { HEART_ICON_SIZE } from "app/Components/constants"
 import { saleMessageOrBidInfo } from "app/utils/getSaleMessgeOrBidInfo"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
@@ -169,7 +169,7 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
         {SalePriceComponent
           ? SalePriceComponent
           : !!saleMessage && (
-              <ArtworkSaleMessageComponent
+              <ArtworkSaleMessage
                 artwork={artwork}
                 saleMessage={saleMessage}
                 displayLimitedTimeOfferSignal={displayLimitedTimeOfferSignal}
@@ -290,7 +290,7 @@ const artworkMetaFragment = graphql`
       ...ArtworkSocialSignal_collectorSignals
     }
 
-    ...ArtworkSaleMessageComponent_artwork
+    ...ArtworkSaleMessage_artwork
     ...useSaveArtworkToArtworkLists_artwork
   }
 `
diff --git a/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx b/src/app/Components/ArtworkRail/ArtworkSaleMessage.tsx
similarity index 90%
rename from src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx
rename to src/app/Components/ArtworkRail/ArtworkSaleMessage.tsx
index 84b0bb02729..9327ed97cc2 100644
--- a/src/app/Components/ArtworkRail/ArtworkSaleMessageComponent.tsx
+++ b/src/app/Components/ArtworkRail/ArtworkSaleMessage.tsx
@@ -1,5 +1,5 @@
 import { Flex, Text, TextProps } from "@artsy/palette-mobile"
-import { ArtworkSaleMessageComponent_artwork$key } from "__generated__/ArtworkSaleMessageComponent_artwork.graphql"
+import { ArtworkSaleMessage_artwork$key } from "__generated__/ArtworkSaleMessage_artwork.graphql"
 import { useMetaDataTextColor } from "app/Components/ArtworkRail/ArtworkRailUtils"
 import { formattedTimeLeft } from "app/Scenes/Activity/utils/formattedTimeLeft"
 import { displayAsLinethrought, parsedSaleMessage } from "app/utils/getSaleMessgeOrBidInfo"
@@ -7,15 +7,15 @@ import { getTimer } from "app/utils/getTimer"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { graphql, useFragment } from "react-relay"
 
-interface ArtworkSaleMessageComponentProps {
-  artwork: ArtworkSaleMessageComponent_artwork$key
+interface ArtworkSaleMessageProps {
+  artwork: ArtworkSaleMessage_artwork$key
   displayLimitedTimeOfferSignal: boolean | null | undefined
   saleMessage: string | null | undefined
   saleInfoTextStyle?: TextProps
   dark?: boolean
 }
 
-export const ArtworkSaleMessageComponent: React.FC<ArtworkSaleMessageComponentProps> = ({
+export const ArtworkSaleMessage: React.FC<ArtworkSaleMessageProps> = ({
   artwork,
   displayLimitedTimeOfferSignal,
   saleMessage,
@@ -109,7 +109,7 @@ export const ArtworkSaleMessageComponent: React.FC<ArtworkSaleMessageComponentPr
 }
 
 const fragment = graphql`
-  fragment ArtworkSaleMessageComponent_artwork on Artwork {
+  fragment ArtworkSaleMessage_artwork on Artwork {
     collectorSignals {
       partnerOffer {
         endAt