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] 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("~")
+}