fix(bidsnapshot): L3-4378 if i have bid on a lot but lost it should s…

…ay won for (#443)
PhillipsAuctionHouse · Dec 3, 2024 · a6145dc · a6145dc
1 parent 4c3c197
commit a6145dc
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 18 deletions.
diff --git a/src/patterns/BidSnapshot/BidSnapshot.stories.tsx b/src/patterns/BidSnapshot/BidSnapshot.stories.tsx
@@ -48,6 +48,10 @@ Playground.args = {
   lotCloseDate: addMinutes(new Date(), 20),
   lang: enUS,
   startingBid: 600,
+  soldPrice: 2000,
 };
 
-Playground.argTypes = { bidStatus: { options: BidStatusEnum, control: { type: 'select' } } };
+Playground.argTypes = {
+  bidStatus: { options: BidStatusEnum, control: { type: 'select' } },
+  auctionStatus: { options: LotStatus, control: { type: 'select' } },
+};
diff --git a/src/patterns/BidSnapshot/BidSnapshot.test.tsx b/src/patterns/BidSnapshot/BidSnapshot.test.tsx
@@ -3,6 +3,7 @@ import { runCommonTests } from '../../utils/testUtils';
 import { render, screen } from '@testing-library/react';
 import { LotStatus } from '../../types/commonTypes';
 import { BidStatusEnum } from './types';
+import BidMessage from './BidMessage';
 
 describe('BidSnapshot', () => {
   runCommonTests(BidSnapshot, 'BidSnapshot');
@@ -13,6 +14,18 @@ describe('BidSnapshot', () => {
     expect(screen.getByText('$100')).toBeInTheDocument();
   });
 
+  it('renders starting bid if no bids placed', () => {
+    render(<BidSnapshot startingBid={100} lotStatus={LotStatus.live} />);
+    expect(screen.getByText('Starting bid')).toBeInTheDocument();
+    expect(screen.getByText('$100')).toBeInTheDocument();
+  });
+
+  it('does not render starting bid if lot did not sell', () => {
+    render(<BidSnapshot startingBid={100} lotStatus={LotStatus.past} />);
+    expect(screen.queryByText('Starting bid')).not.toBeInTheDocument();
+    expect(screen.queryByText('$100')).not.toBeInTheDocument();
+  });
+
   it('renders current bid when there are multiple bids and auction is not past', () => {
     render(<BidSnapshot startingBid={100} numberOfBids={3} lotStatus={LotStatus.live} currentBid={300} />);
     expect(screen.getByText('Current bid')).toBeInTheDocument();
@@ -24,33 +37,97 @@ describe('BidSnapshot', () => {
     render(
       <BidSnapshot
         startingBid={100}
-        currentBid={300}
+        soldPrice={300}
         numberOfBids={3}
         lotStatus={LotStatus.past}
         bidStatus={BidStatusEnum.Won}
-      />,
+      >
+        <BidMessage message="You won" />
+      </BidSnapshot>,
     );
     expect(screen.getByText('Won for')).toBeInTheDocument();
     expect(screen.getByText('$300')).toBeInTheDocument();
+    expect(screen.getByText('You won')).toBeInTheDocument();
+  });
+
+  it('does not render bid message if user has not bid', () => {
+    render(
+      <BidSnapshot startingBid={100} soldPrice={300} numberOfBids={3} lotStatus={LotStatus.past}>
+        <BidMessage message="You won" />
+      </BidSnapshot>,
+    );
+    expect(screen.queryByText('Won for')).not.toBeInTheDocument();
+    expect(screen.getByText('Sold for')).toBeInTheDocument();
+    expect(screen.getByText('$300')).toBeInTheDocument();
+    expect(screen.queryByText('You won')).not.toBeInTheDocument();
   });
 
-  it('renders sold for when auction is past and active bid is not the last bid', () => {
+  it('renders won for instead of sold for when auction is past user lost', () => {
     render(
       <BidSnapshot
         startingBid={100}
         numberOfBids={3}
         currentBid={300}
+        soldPrice={300}
         lotStatus={LotStatus.past}
         bidStatus={BidStatusEnum.Lost}
-      />,
+      >
+        <BidMessage message="You lost"></BidMessage>
+      </BidSnapshot>,
     );
-    expect(screen.getByText('Sold for')).toBeInTheDocument();
+    expect(screen.getByText('Won for')).toBeInTheDocument();
+    expect(screen.getByText('$300')).toBeInTheDocument();
+    expect(screen.getByText('You lost')).toBeInTheDocument();
+  });
+
+  it('renders winning for if in progress', () => {
+    render(
+      <BidSnapshot
+        startingBid={100}
+        numberOfBids={3}
+        currentBid={300}
+        lotStatus={LotStatus.live}
+        bidStatus={BidStatusEnum.Lost}
+      >
+        <BidMessage message="Winning for"></BidMessage>
+      </BidSnapshot>,
+    );
+    expect(screen.getByText('Winning for')).toBeInTheDocument();
     expect(screen.getByText('$300')).toBeInTheDocument();
   });
 
+  it('does not render sold for if soldPrice not passed, used if auction should hide sold price', () => {
+    render(
+      <BidSnapshot
+        startingBid={100}
+        currentBid={500}
+        numberOfBids={3}
+        lotStatus={LotStatus.past}
+        bidStatus={BidStatusEnum.Lost}
+      >
+        <BidMessage message="You won" />
+      </BidSnapshot>,
+    );
+    expect(screen.queryByText('Sold for')).not.toBeInTheDocument();
+    expect(screen.queryByText('$500')).not.toBeInTheDocument();
+    expect(screen.getByText('You won')).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} lotStatus={LotStatus.live} lotCloseDate={lotCloseDate} />);
     expect(screen.getByText('Closes in')).toBeInTheDocument();
   });
+
+  it('does not render Countdown timer if lot closed', () => {
+    const lotCloseDate = new Date(Date.now() + 10000); // 10 seconds from now
+    render(<BidSnapshot startingBid={100} numberOfBids={1} lotStatus={LotStatus.past} lotCloseDate={lotCloseDate} />);
+    expect(screen.queryByText('Closes in')).not.toBeInTheDocument();
+  });
+
+  it('does not render Countdown timer if lot not started', () => {
+    const lotCloseDate = new Date(Date.now() + 10000); // 10 seconds from now
+    render(<BidSnapshot startingBid={100} numberOfBids={1} lotStatus={LotStatus.ready} lotCloseDate={lotCloseDate} />);
+    expect(screen.queryByText('Closes in')).not.toBeInTheDocument();
+  });
 });
diff --git a/src/patterns/BidSnapshot/BidSnapshot.tsx b/src/patterns/BidSnapshot/BidSnapshot.tsx
@@ -63,6 +63,10 @@ export interface BidSnapshotProps extends ComponentProps<'div'> {
    * Starting bid text, a string for label of starting bid detail
    */
   startingBidText?: string;
+  /**
+   * Sold For amount
+   * */
+  soldPrice?: number;
   /**
    * Sold for label text, a string for label of sold for detail
    */
@@ -101,6 +105,7 @@ const BidSnapshot = forwardRef<HTMLDivElement, BidSnapshotProps>(
       numberOfBids = 0,
       startingBid,
       startingBidText = 'Starting bid',
+      soldPrice,
       soldForText = 'Sold for',
       wonForText = 'Won for',
       ...props
@@ -110,7 +115,6 @@ const BidSnapshot = forwardRef<HTMLDivElement, BidSnapshotProps>(
     const { className: baseClassName, ...commonProps } = getCommonProps(props, 'BidSnapshot');
 
     const hasBids = currentBid !== null && numberOfBids > 0;
-    const isTopBid = bidStatus === BidStatusEnum.Winning || bidStatus === BidStatusEnum.Won;
     const isReady = lotStatus === LotStatus.ready;
     const isLive = lotStatus === LotStatus.live;
     const isPast = lotStatus === LotStatus.past;
@@ -123,21 +127,31 @@ const BidSnapshot = forwardRef<HTMLDivElement, BidSnapshotProps>(
       [`${baseClassName}--has-bids`]: hasBids,
     });
 
-    let label = currentBidText;
-    if (isReady || !hasBids) label = startingBidText;
-    if (isPast && hasBids) label = isTopBid ? wonForText : soldForText;
-
     return (
       <div {...commonProps} {...props} ref={ref} className={classes}>
         <DetailList hasSeparators className={`${baseClassName}__text`}>
-          <Detail
-            label={label}
-            subLabel={isLive && currentBid && `(${bidsLabelText(numberOfBids)})`}
-            value={`${currency}${(currentBid || startingBid)?.toLocaleString()}`}
-            hasWrap={false}
-          />
+          {isPast && hasBids && soldPrice ? (
+            <Detail
+              label={bidStatus ? wonForText : soldForText} // if the user has bid show wonForText else show soldForText
+              value={`${currency}${soldPrice?.toLocaleString()}`}
+              hasWrap={false}
+            />
+          ) : null}
+          {isLive && hasBids ? (
+            <Detail
+              label={currentBidText}
+              subLabel={`(${bidsLabelText(numberOfBids)})`}
+              value={`${currency}${currentBid?.toLocaleString()}`}
+              hasWrap={false}
+            />
+          ) : null}
+          {isReady || (isLive && !hasBids) ? (
+            <Detail label={startingBidText} value={`${currency}${startingBid?.toLocaleString()}`} hasWrap={false} />
+          ) : null}
         </DetailList>
-        {bidStatus && !isReady ? bidMessage : null}
+        {
+          bidStatus && !isReady ? bidMessage : null // only show bidMessage if the user has bid
+        }
         {otherChildren}
         {hasCountdownTimer ? (
           <Countdown