chore: Hardcode cascading interval message copy and fix spacing (#9770)

* Remove cascading end time intervalLabel

* Add extra spacing to match figma designs

* Remove helper and hardcode values

* Update src/v2/Apps/Auction/Components/AuctionDetails/AuctionDetails.tsx

Co-authored-by: Matt Zikherman <mzikherman@gmail.com>

Co-authored-by: Matt Zikherman <mzikherman@gmail.com>

src/v2/Apps/Auction/AuctionApp.tsx

@@ -44,7 +44,8 @@ export const AuctionApp: React.FC<AuctionAppProps> = ({
     showBuyNowTab: sale.showBuyNowTab,
   }
 
-  const { cascadingEndTimeInterval, cascadingEndTime } = sale
+  const { cascadingEndTimeInterval } = sale
+
   const isFullBleedHeaderFixed = !cascadingEndTimeInterval
 
   return (
@@ -58,7 +59,7 @@ export const AuctionApp: React.FC<AuctionAppProps> = ({
       >
         {cascadingEndTimeInterval && (
           <CascadingEndTimesBanner
-            intervalMessage={cascadingEndTime?.intervalLabel!}
+            cascadingEndTimeInterval={cascadingEndTimeInterval}
           />
         )}
 
@@ -151,10 +152,6 @@ export const AuctionAppFragmentContainer = createFragmentContainer(AuctionApp, {
       showBuyNowTab: promotedSale {
         internalID
       }
-
-      cascadingEndTime {
-        intervalLabel
-      }
       cascadingEndTimeInterval
     }
   `,

src/v2/Apps/Auction/Components/AuctionDetails/AuctionDetails.tsx

@@ -31,10 +31,8 @@ const AuctionDetails: React.FC<AuctionDetailsProps> = ({ sale, me }) => {
     ? formatIsoDateNoZoneOffset(sale.liveStartAt, 4)
     : sale.endAt
 
-  const cascadingEndTimeIntervalLabel =
-    !!sale.cascadingEndTimeInterval &&
-    !sale.endedAt &&
-    sale.cascadingEndTime?.intervalLabel
+  const showCascadingEndTimeIntervalMessage: boolean =
+    !!sale.cascadingEndTimeInterval && !sale.isClosed
 
   return (
     <>
@@ -48,35 +46,42 @@ const AuctionDetails: React.FC<AuctionDetailsProps> = ({ sale, me }) => {
           <RegisterButtonFragmentContainer sale={sale} me={me} />
         </Column>
       </GridColumns>
+      <Spacer my={4} />
       <Flex alignItems="center" justifyContent="space-between">
         {!!sale.cascadingEndTimeInterval && (
-          <SaleDetailTimerFragmentContainer sale={sale} />
+          <>
+            <SaleDetailTimerFragmentContainer sale={sale} />
+            <Spacer my={2} />
+          </>
         )}
       </Flex>
-      <Flex alignItems="center" justifyContent="space-between">
-        <Flex alignItems="center">
-          <AuctionDetailsStartTimeQueryRenderer id={sale.internalID} pr={2} />
+      <Flex alignItems="center">
+        <AuctionDetailsStartTimeQueryRenderer id={sale.internalID} pr={2} />
 
-          {!sale.isClosed && (
-            <Box mt={0.5}>
-              <AddToCalendar
-                startDate={sale.liveStartAt || sale.startAt!}
-                endDate={endDate!}
-                title={sale.name!}
-                description={sale.description!}
-                href={`${getENV("APP_URL")}${sale.href!}`}
-                liveAuctionUrl={liveAuctionUrl}
-                contextModule={ContextModule.auctionHome}
-              />
-            </Box>
-          )}
-        </Flex>
+        {!sale.isClosed && (
+          <Box mt={0.5}>
+            <AddToCalendar
+              startDate={sale.liveStartAt || sale.startAt!}
+              endDate={endDate!}
+              title={sale.name!}
+              description={sale.description!}
+              href={`${getENV("APP_URL")}${sale.href!}`}
+              liveAuctionUrl={liveAuctionUrl}
+              contextModule={ContextModule.auctionHome}
+            />
+          </Box>
+        )}
       </Flex>
 
-      {cascadingEndTimeIntervalLabel && (
-        <Text variant="md" pr={2}>
-          {cascadingEndTimeIntervalLabel}
-        </Text>
+      {showCascadingEndTimeIntervalMessage && (
+        <>
+          <Spacer my={2} />
+          <Text variant="md" pr={2}>
+            {`Lots close at ${
+              sale.cascadingEndTimeInterval! / 60
+            }-minute intervals`}
+          </Text>
+        </>
       )}
 
       <Spacer my={2} />
@@ -107,14 +112,10 @@ export const AuctionDetailsFragmentContainer = createFragmentContainer(
         liveStartAt
         startAt
         endAt
-        endedAt
         description(format: HTML)
         href
         isClosed
         cascadingEndTimeInterval
-        cascadingEndTime {
-          intervalLabel
-        }
       }
     `,
     me: graphql`

src/v2/Apps/Auction/Components/AuctionDetails/CascadingEndTimesBanner.tsx

@@ -4,11 +4,11 @@ import { HorizontalPadding } from "v2/Apps/Components/HorizontalPadding"
 import { getENV } from "v2/Utils/getENV"
 
 interface CascadingEndTimesBannerProps {
-  intervalMessage: string
+  cascadingEndTimeInterval: number
 }
 
 export const CascadingEndTimesBanner: React.FC<CascadingEndTimesBannerProps> = ({
-  intervalMessage,
+  cascadingEndTimeInterval,
 }) => {
   const helpArticleLink = getENV("CASCADING_AUCTION_HELP_ARTICLE_LINK")
 
@@ -19,8 +19,7 @@ export const CascadingEndTimesBanner: React.FC<CascadingEndTimesBannerProps> = (
       <AppContainer>
         <HorizontalPadding>
           <Banner dismissable pl={0} variant="brand">
-            This auction has staggered closing times.&nbsp;
-            {intervalMessage}.
+            {`Lots close at ${cascadingEndTimeInterval / 60}-minute intervals`}.
             {hasLink && (
               <>
                 &nbsp;