feat(BidSnapshot): L3-4690 changed prop

PhillipsAuctionHouse · Nov 26, 2024 · 92c7a2f · 92c7a2f
1 parent 97fb256
commit 92c7a2f
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 56 deletions.
diff --git a/src/patterns/BidSnapshot/BidSnapshot.stories.tsx b/src/patterns/BidSnapshot/BidSnapshot.stories.tsx
@@ -4,31 +4,31 @@ import { enUS } from 'date-fns/locale';
 
 import BidSnapshot, { BidSnapshotProps } from './BidSnapshot';
 import BidMessage from './BidMessage';
-import { AuctionStatus } from '../../types/commonTypes';
+import { LotStatus } from '../../types/commonTypes';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
   title: 'Patterns/BidSnapshot',
   component: BidSnapshot,
   argTypes: {
-    auctionStatus: { options: ['READY', 'LIVE', 'PAST'], control: { type: 'select' } },
+    lotStatus: { options: ['READY', 'LIVE', 'PAST'], control: { type: 'select' } },
   },
 } satisfies Meta<typeof BidSnapshot>;
 
 export default meta;
 export const Playground = (props: BidSnapshotProps) => {
-  const { activeBid, auctionStatus, lotCloseDate, currentBid, ...rest } = props;
+  const { activeBid, lotStatus, lotCloseDate, currentBid, ...rest } = props;
   return (
     <BidSnapshot
       activeBid={activeBid}
-      auctionStatus={auctionStatus}
+      lotStatus={lotStatus}
       currentBid={currentBid}
-      lotCloseDate={auctionStatus === AuctionStatus.ready ? undefined : lotCloseDate}
+      lotCloseDate={lotStatus === LotStatus.ready ? undefined : lotCloseDate}
       {...rest}
     >
-      {activeBid === currentBid && auctionStatus === AuctionStatus.live ? (
+      {activeBid === currentBid && lotStatus === LotStatus.live ? (
         <BidMessage message="With You" />
-      ) : activeBid === currentBid && auctionStatus === AuctionStatus.past ? (
+      ) : activeBid === currentBid && lotStatus === LotStatus.past ? (
         <BidMessage message="Winning Bid not including Buyer Premium" />
       ) : null}
     </BidSnapshot>
@@ -40,7 +40,7 @@ Playground.args = {
   activeBid: 1000,
   currency: '$',
   numberOfBids: 3,
-  auctionStatus: AuctionStatus.live,
+  lotStatus: LotStatus.live,
   currentBid: 1000,
   lotCloseDate: addMinutes(new Date(), 20),
   lang: enUS,

diff --git a/src/patterns/BidSnapshot/BidSnapshot.test.tsx b/src/patterns/BidSnapshot/BidSnapshot.test.tsx
@@ -1,57 +1,43 @@
 import BidSnapshot from './BidSnapshot';
 import { runCommonTests } from '../../utils/testUtils';
 import { render, screen } from '@testing-library/react';
-import { AuctionStatus } from '../../types/commonTypes';
+import { LotStatus } from '../../types/commonTypes';
 
 describe('BidSnapshot', () => {
   runCommonTests(BidSnapshot, 'BidSnapshot');
 
   it('renders starting bid when there is only one bid and auction is not past', () => {
-    render(<BidSnapshot startingBid={100} auctionStatus={AuctionStatus.ready} />);
+    render(<BidSnapshot startingBid={100} lotStatus={LotStatus.ready} />);
     expect(screen.getByText('Starting bid')).toBeInTheDocument();
     expect(screen.getByText('$100')).toBeInTheDocument();
   });
 
   it('renders current bid when there are multiple bids and auction is not past', () => {
-    render(<BidSnapshot startingBid={100} numberOfBids={3} auctionStatus={AuctionStatus.live} currentBid={300} />);
+    render(<BidSnapshot startingBid={100} numberOfBids={3} lotStatus={LotStatus.live} currentBid={300} />);
     expect(screen.getByText('Current bid')).toBeInTheDocument();
     expect(screen.getByText('$300')).toBeInTheDocument();
     expect(screen.getByText('(3 bids)')).toBeInTheDocument();
   });
 
   it('renders won for when auction is past and active bid is the last bid', () => {
     render(
-      <BidSnapshot
-        startingBid={100}
-        currentBid={300}
-        numberOfBids={3}
-        auctionStatus={AuctionStatus.past}
-        activeBid={300}
-      />,
+      <BidSnapshot startingBid={100} currentBid={300} numberOfBids={3} lotStatus={LotStatus.past} activeBid={300} />,
     );
     expect(screen.getByText('Won for')).toBeInTheDocument();
     expect(screen.getByText('$300')).toBeInTheDocument();
   });
 
   it('renders sold for when auction is past and active bid is not the last bid', () => {
     render(
-      <BidSnapshot
-        startingBid={100}
-        numberOfBids={3}
-        currentBid={300}
-        auctionStatus={AuctionStatus.past}
-        activeBid={200}
-      />,
+      <BidSnapshot startingBid={100} numberOfBids={3} currentBid={300} lotStatus={LotStatus.past} activeBid={200} />,
     );
     expect(screen.getByText('Sold for')).toBeInTheDocument();
     expect(screen.getByText('$300')).toBeInTheDocument();
   });
 
   it('renders Countdown timer when lotCloseDate prop is passed', () => {
     const lotCloseDate = new Date(Date.now() + 10000); // 10 seconds from now
-    render(
-      <BidSnapshot startingBid={100} numberOfBids={1} auctionStatus={AuctionStatus.live} lotCloseDate={lotCloseDate} />,
-    );
+    render(<BidSnapshot startingBid={100} numberOfBids={1} lotStatus={LotStatus.live} lotCloseDate={lotCloseDate} />);
     expect(screen.getByText('Closes in')).toBeInTheDocument();
   });
 });
diff --git a/src/patterns/BidSnapshot/BidSnapshot.tsx b/src/patterns/BidSnapshot/BidSnapshot.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { getCommonProps } from '../../utils';
 import { DetailList } from '../DetailList/index';
 import { Detail } from '../../components/Detail/index';
-import { AuctionStatus, SupportedLanguages } from '../../types/commonTypes';
+import { LotStatus, SupportedLanguages } from '../../types/commonTypes';
 import { Countdown } from '../../components/Countdown/index';
 import { CountdownVariants } from '../../components/Countdown/types';
 
@@ -16,7 +16,7 @@ export interface BidSnapshotProps extends ComponentProps<'div'> {
   /**
    * State of the object
    */
-  auctionStatus?: AuctionStatus;
+  lotStatus?: LotStatus;
   /**
    * Bids label text, a fucntion for label of bids amoutn (2 bids, 3 bids, etc) where the number is the length of the bids array.
    */
@@ -85,7 +85,7 @@ const BidSnapshot = forwardRef<HTMLDivElement, BidSnapshotProps>(
   (
     {
       activeBid,
-      auctionStatus = AuctionStatus.ready,
+      lotStatus = LotStatus.ready,
       bidsLabelText = bidsTranslation,
       children,
       className,
@@ -109,9 +109,9 @@ const BidSnapshot = forwardRef<HTMLDivElement, BidSnapshotProps>(
 
     const hasBids = currentBid !== null && numberOfBids > 0;
     const isTopBid = activeBid === currentBid;
-    const isReady = auctionStatus === AuctionStatus.ready;
-    const isLive = auctionStatus === AuctionStatus.live;
-    const isPast = auctionStatus === AuctionStatus.past;
+    const isReady = lotStatus === LotStatus.ready;
+    const isLive = lotStatus === LotStatus.live;
+    const isPast = lotStatus === LotStatus.past;
     const hasCountdownTimer = isLive && lotCloseDate;
 
     const classes = classnames(baseClassName, className, {

diff --git a/src/patterns/ObjectTile/ObjectTile.stories.tsx b/src/patterns/ObjectTile/ObjectTile.stories.tsx
@@ -3,7 +3,7 @@ import { addMinutes } from 'date-fns';
 
 import ObjectTile, { ObjectTileProps } from './ObjectTile';
 import { BidMessage, BidSnapshot } from '../BidSnapshot';
-import { AuctionStatus } from '../../types/commonTypes';
+import { LotStatus } from '../../types/commonTypes';
 import { Favorite } from '../../assets/icons';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
@@ -24,7 +24,7 @@ const args = {
       <BidSnapshot
         startingBid={50000}
         activeBid={65000}
-        auctionStatus={AuctionStatus.live}
+        lotStatus={LotStatus.live}
         numberOfBids={2}
         lotCloseDate={addMinutes(new Date(), 20)}
       >

diff --git a/src/patterns/SaleHeaderBanner/SaleHeaderBanner.stories.tsx b/src/patterns/SaleHeaderBanner/SaleHeaderBanner.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react';
 import SaleHeaderBanner, { SaleHeaderBannerProps } from './SaleHeaderBanner';
-import { AuctionStatus } from '../../types/commonTypes';
+import { LotStatus } from '../../types/commonTypes';
 import SaleHeaderBrowseAuctions from './SaleHeaderBrowseAuctions';
 import { Countdown } from '../../components/Countdown';
 import { addMinutes } from 'date-fns';
@@ -18,14 +18,14 @@ Playground.args = {
   auctionTitle: 'Modern & Contemporary Art: Online Auction, New York',
   occurrenceInformation: [{ occurrenceLabel: 'Begins', date: '10:00am EDT, 14 Sep 2024' }],
   location: 'New York',
-  auctionState: AuctionStatus.ready,
+  auctionState: LotStatus.ready,
   imageSrcUrl:
     'https://assets.phillips.com/image/upload/t_Website_AuctionPageHero/v1726172550/auctions/NY090324/NY090324.jpg',
 };
 
 Playground.argTypes = {
   auctionState: {
-    options: Object.values(AuctionStatus),
+    options: Object.values(LotStatus),
     control: {
       type: 'select',
     },
@@ -39,7 +39,7 @@ export const PreSale = (props: SaleHeaderBannerProps) => (
     imageSrcUrl="https://assets.phillips.com/image/upload/t_Website_AuctionPageHero/v1726172550/auctions/NY090324/NY090324.jpg"
     occurrenceInformation={[{ date: '10:00am EDT, 4 Sep 2024', occurrenceLabel: 'Begins' }]}
     location="New York"
-    auctionState={AuctionStatus.ready}
+    auctionState={LotStatus.ready}
   />
 );
 
@@ -53,7 +53,7 @@ export const PreSaleTwoOccurrences = (props: SaleHeaderBannerProps) => (
       { date: '10:00am EDT, 5 Sep 2024', occurrenceLabel: 'Session II' },
     ]}
     location="New York"
-    auctionState={AuctionStatus.ready}
+    auctionState={LotStatus.ready}
   />
 );
 
@@ -68,7 +68,7 @@ export const PreSaleThreeOccurrences = (props: SaleHeaderBannerProps) => (
       { date: '10:00am EDT, 6 Sep 2024', occurrenceLabel: 'Session III' },
     ]}
     location="New York"
-    auctionState={AuctionStatus.ready}
+    auctionState={LotStatus.ready}
   />
 );
 
@@ -79,7 +79,7 @@ export const OpenForBidding = (props: SaleHeaderBannerProps) => (
     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' }]}
     location="New York"
-    auctionState={AuctionStatus.live}
+    auctionState={LotStatus.live}
   >
     <Countdown endDateTime={addMinutes(new Date(), 20)} />
   </SaleHeaderBanner>
@@ -92,7 +92,7 @@ export const Closed = (props: SaleHeaderBannerProps) => (
     imageSrcUrl="https://assets.phillips.com/image/upload/t_Website_AuctionPageHero/v1726172550/auctions/NY090324/NY090324.jpg"
     occurrenceInformation={[{ date: '4 Sep 2024', occurrenceLabel: 'Concluded' }]}
     location="New York"
-    auctionState={AuctionStatus.past}
+    auctionState={LotStatus.past}
   >
     <SaleHeaderBrowseAuctions />
   </SaleHeaderBanner>

diff --git a/src/patterns/SaleHeaderBanner/SaleHeaderBanner.test.tsx b/src/patterns/SaleHeaderBanner/SaleHeaderBanner.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 import SaleHeaderBanner, { SaleHeaderBannerProps } from './SaleHeaderBanner';
-import { AuctionStatus } from '../../types/commonTypes';
+import { LotStatus } from '../../types/commonTypes';
 import SaleHeaderBrowseAuctions from './SaleHeaderBrowseAuctions';
 import { Countdown } from '../../components/Countdown';
 import { addDays } from 'date-fns';
@@ -10,7 +10,7 @@ const defaultProps: SaleHeaderBannerProps = {
   auctionTitle: 'Sample Auction',
   location: 'New York',
   occurrenceInformation: [{ date: '2023-12-01', occurrenceLabel: 'Auction Date' }],
-  auctionState: AuctionStatus.ready,
+  auctionState: LotStatus.ready,
   imageSrcUrl: 'https://example.com/image.jpg',
 };
 
@@ -43,13 +43,13 @@ describe('SaleHeaderBanner', () => {
   });
 
   it('does not render the "Register to Bid" button when auction is closed', () => {
-    render(<SaleHeaderBanner {...defaultProps} auctionState={AuctionStatus.past} />);
+    render(<SaleHeaderBanner {...defaultProps} auctionState={LotStatus.past} />);
     expect(screen.queryByText('Register to Bid')).not.toBeInTheDocument();
   });
 
   it('renders the countdown timer when auction is open for bidding', () => {
     render(
-      <SaleHeaderBanner {...defaultProps} auctionState={AuctionStatus.live}>
+      <SaleHeaderBanner {...defaultProps} auctionState={LotStatus.live}>
         <Countdown endDateTime={addDays(new Date(), 2)} />
       </SaleHeaderBanner>,
     );
@@ -58,7 +58,7 @@ describe('SaleHeaderBanner', () => {
 
   it('renders the "Browse Upcoming Sale" link when auction is closed', () => {
     render(
-      <SaleHeaderBanner {...defaultProps} auctionState={AuctionStatus.past}>
+      <SaleHeaderBanner {...defaultProps} auctionState={LotStatus.past}>
         <SaleHeaderBrowseAuctions />
       </SaleHeaderBanner>,
     );
@@ -80,7 +80,7 @@ describe('SaleHeaderBanner', () => {
 
   it('renders children when auction is open for bidding', () => {
     render(
-      <SaleHeaderBanner {...defaultProps} auctionState={AuctionStatus.live}>
+      <SaleHeaderBanner {...defaultProps} auctionState={LotStatus.live}>
         <div>Child Component</div>
       </SaleHeaderBanner>,
     );
@@ -89,7 +89,7 @@ describe('SaleHeaderBanner', () => {
 
   it('renders children when auction is closed', () => {
     render(
-      <SaleHeaderBanner {...defaultProps} auctionState={AuctionStatus.past}>
+      <SaleHeaderBanner {...defaultProps} auctionState={LotStatus.past}>
         <div>Child Component</div>
       </SaleHeaderBanner>,
     );

diff --git a/src/patterns/SaleHeaderBanner/SaleHeaderBanner.tsx b/src/patterns/SaleHeaderBanner/SaleHeaderBanner.tsx
@@ -2,7 +2,7 @@ import { ComponentProps, forwardRef } from 'react';
 import { getCommonProps } from '../../utils';
 import classnames from 'classnames';
 import { SeldonImage } from '../../components/SeldonImage';
-import { AuctionStatus } from '../../types/commonTypes';
+import { LotStatus } from '../../types/commonTypes';
 import { Text, TextVariants } from '../../components/Text';
 import { PageContentWrapper as PageMargin } from '../../components/PageContentWrapper';
 import Button from '../../components/Button/Button';
@@ -36,7 +36,7 @@ export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
   /**
    * What is the current state of the auction?
    */
-  auctionState: AuctionStatus;
+  auctionState: LotStatus;
   /**
    * What text should the CTA button display?
    */
@@ -73,8 +73,8 @@ const SaleHeaderBanner = forwardRef<HTMLDivElement, SaleHeaderBannerProps>(
     ref,
   ) => {
     const { className: baseClassName, ...commonProps } = getCommonProps(props, 'SaleHeaderBanner');
-    const isOpenForBidding = auctionState === AuctionStatus.live;
-    const isClosed = auctionState === AuctionStatus.past;
+    const isOpenForBidding = auctionState === LotStatus.live;
+    const isClosed = auctionState === LotStatus.past;
     return (
       <div {...commonProps} className={classnames(baseClassName, className)} {...props} ref={ref}>
         <SeldonImage

diff --git a/src/types/commonTypes.ts b/src/types/commonTypes.ts
@@ -3,7 +3,7 @@ export enum SupportedLanguages {
   zh = 'zh',
 }
 
-export enum AuctionStatus {
+export enum LotStatus {
   ready = 'READY',
   live = 'LIVE',
   past = 'PAST',