feat(SaleHeaderBanner): L3-4648 add countdown to sale header banner f…

…or timed auctions
PhillipsAuctionHouse · Nov 25, 2024 · 5112f2d · 5112f2d
1 parent 97fb256
commit 5112f2d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/src/patterns/SaleHeaderBanner/SaleHeaderBanner.stories.tsx b/src/patterns/SaleHeaderBanner/SaleHeaderBanner.stories.tsx
@@ -97,3 +97,17 @@ export const Closed = (props: SaleHeaderBannerProps) => (
     <SaleHeaderBrowseAuctions />
   </SaleHeaderBanner>
 );
+
+export const TimedAuction = (props: SaleHeaderBannerProps) => (
+  <SaleHeaderBanner
+    {...props}
+    auctionTitle="Modern & Contemporary Art: Online Auction, New York"
+    imageSrcUrl="https://assets.phillips.com/image/upload/t_Website_AuctionPageHero/v1726172550/auctions/NY090324/NY090324.jpg"
+    occurrenceInformation={[{ date: '10:00am EDT, 4 Sep 2024', occurrenceLabel: 'Lots Begin to Close' }]}
+    auctionEndTime={addMinutes(new Date(), 24 * 60).toString()}
+    location="New York"
+    auctionState={AuctionStatus.live}
+  >
+    <SaleHeaderBrowseAuctions />
+  </SaleHeaderBanner>
+);
diff --git a/src/patterns/SaleHeaderBanner/SaleHeaderBanner.tsx b/src/patterns/SaleHeaderBanner/SaleHeaderBanner.tsx
@@ -6,6 +6,7 @@ import { AuctionStatus } from '../../types/commonTypes';
 import { Text, TextVariants } from '../../components/Text';
 import { PageContentWrapper as PageMargin } from '../../components/PageContentWrapper';
 import Button from '../../components/Button/Button';
+import { Countdown } from '../../components/Countdown';
 
 // You'll need to change the ComponentProps<"htmlelementname"> to match the top-level element of your component
 export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
@@ -37,6 +38,10 @@ export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
    * What is the current state of the auction?
    */
   auctionState: AuctionStatus;
+  /**
+   * Used to display a countdown timer to show when the Lots begin to close
+   */
+  auctionEndTime?: string;
   /**
    * What text should the CTA button display?
    */
@@ -59,6 +64,7 @@ export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
 const SaleHeaderBanner = forwardRef<HTMLDivElement, SaleHeaderBannerProps>(
   (
     {
+      auctionEndTime,
       auctionTitle,
       imageSrcUrl,
       location,
@@ -75,6 +81,7 @@ const SaleHeaderBanner = forwardRef<HTMLDivElement, SaleHeaderBannerProps>(
     const { className: baseClassName, ...commonProps } = getCommonProps(props, 'SaleHeaderBanner');
     const isOpenForBidding = auctionState === AuctionStatus.live;
     const isClosed = auctionState === AuctionStatus.past;
+    const showCountdown = isOpenForBidding && auctionEndTime;
     return (
       <div {...commonProps} className={classnames(baseClassName, className)} {...props} ref={ref}>
         <SeldonImage
@@ -85,6 +92,9 @@ const SaleHeaderBanner = forwardRef<HTMLDivElement, SaleHeaderBannerProps>(
           className={`${baseClassName}__image`}
         />
         <PageMargin className={`${baseClassName}__stack-wrapper`} {...commonProps} {...props} ref={ref}>
+          {showCountdown && (
+            <Countdown endDateTime={new Date(auctionEndTime)} className={`${baseClassName}__countdown`} />
+          )}
           <div className={`${baseClassName}__stack`}>
             {isOpenForBidding && children}
             <Text variant={TextVariants.title1}>{auctionTitle}</Text>

diff --git a/src/patterns/SaleHeaderBanner/_saleHeaderBanner.scss b/src/patterns/SaleHeaderBanner/_saleHeaderBanner.scss
@@ -18,7 +18,6 @@
     align-items: start;
     display: flex;
     flex-direction: column;
-    height: 100%;
     justify-content: center;
     padding: $spacing-md 0;
   }
@@ -56,4 +55,12 @@
   &__cta {
     margin: $spacing-sm 0;
   }
+
+  &__countdown {
+    margin-top: $spacing-md;
+
+    @include media($size-md, $type: 'min') {
+      margin-top: 109px;
+    }
+  }
 }