feat(ONYX-1294): redesign badges and urgency signals on artwork card

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",

src/app/Components/ArtworkGrids/ArtworkGridItem.tsx

@@ -288,6 +288,74 @@ 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" }}
+                    {...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>
+      )
+  }
+
   return (
     <Disappearable ref={(ref) => ((artwork as any)._disappearable = ref)}>
       <ContextMenuArtwork
@@ -361,23 +429,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 +495,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 +509,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">

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,31 +21,19 @@ 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>
       )
 
     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>

src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx

@@ -1,12 +1,12 @@
-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"
 import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSaveArtworkToArtworkLists"
 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,69 @@ 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 +207,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 +243,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 +260,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 && (