diff --git a/src/Apps/Conversations/components/ConversationCTA/ConversationReviewOfferCTA.tsx b/src/Apps/Conversations/components/ConversationCTA/ConversationReviewOfferCTA.tsx index 55dd024df9f..61ecdbfbdad 100644 --- a/src/Apps/Conversations/components/ConversationCTA/ConversationReviewOfferCTA.tsx +++ b/src/Apps/Conversations/components/ConversationCTA/ConversationReviewOfferCTA.tsx @@ -1,4 +1,8 @@ -import { ActionType, OwnerType, type TappedViewOffer } from "@artsy/cohesion" +import { + ActionType, + OwnerType, + type TappedViewOffer, +} from "@artsy/cohesion" import AlertFillIcon from "@artsy/icons/AlertFillIcon" import ChevronRightIcon from "@artsy/icons/ChevronRightIcon" import MoneyFillIcon from "@artsy/icons/MoneyFillIcon" @@ -7,17 +11,15 @@ import { Flex, Message, type MessageProps, - ModalDialog, Text, } from "@artsy/palette" +import { RouterLink } from "System/Components/RouterLink" import { useCountdownTimer } from "Utils/Hooks/useCountdownTimer" import { extractNodes } from "Utils/extractNodes" import type { ConversationReviewOfferCTA_conversation$key } from "__generated__/ConversationReviewOfferCTA_conversation.graphql" import type * as React from "react" -import { useState } from "react" import { graphql, useFragment } from "react-relay" import { useTracking } from "react-tracking" -import styled from "styled-components" export interface ConversationReviewOfferCTAProps { conversation: ConversationReviewOfferCTA_conversation$key @@ -28,7 +30,6 @@ export const ConversationReviewOfferCTA: React.FC< > = ({ conversation }) => { const data = useFragment(FRAGMENT, conversation) const activeOrder = extractNodes(data.activeOrders)[0] - const [showOrderModal, setShowOrderModal] = useState(false) const { trackEvent } = useTracking() const { remainingTime } = useCountdownTimer({ @@ -57,50 +58,37 @@ export const ConversationReviewOfferCTA: React.FC< } trackEvent(trackingProps) - - setShowOrderModal(true) } - return ( - <> - {showOrderModal && ( - setShowOrderModal(false)} - title={props.modalTitle} - data-testid="orderModal" - > - - - )} - - - - ) + return } const AlertMessage = (props: GetCTAReturnProps & { onClick: () => void }) => { return ( - - - {props.subMessage} - - - + + + {props.subMessage} + + + + ) } @@ -113,8 +101,7 @@ interface GetCTAAttributesProps { interface GetCTAReturnProps { message: string subMessage: string - modalUrl: string - modalTitle: string + actionUrl: string variant: MessageProps["variant"] Icon: React.FC> } @@ -133,8 +120,7 @@ const getProps = ({ message: "Payment Failed", subMessage: "Unable to process payment for accepted offer. Update payment method.", - modalUrl: `/orders/${activeOrder.internalID}/payment/new`, - modalTitle: "Update Payment Details", + actionUrl: `/orders/${activeOrder.internalID}/payment/new`, Icon: AlertFillIcon, } } @@ -143,8 +129,7 @@ const getProps = ({ variant: "info", message: `${offerType} Received`, subMessage: `The offer expires in ${remainingTime}`, - modalUrl: `/orders/${activeOrder.internalID}/respond`, - modalTitle: "Review Offer", + actionUrl: `/orders/${activeOrder.internalID}/respond`, Icon: AlertFillIcon, } } @@ -153,38 +138,34 @@ const getProps = ({ variant: "info", message: `Congratulations! ${offerType} Accepted`, subMessage: "Tap to view", - modalUrl: `/orders/${activeOrder.internalID}/status`, - modalTitle: "Offer Accepted", + actionUrl: `/orders/${activeOrder.internalID}/status`, Icon: MoneyFillIcon, } } case "OFFER_ACCEPTED_CONFIRM_NEEDED": { return { variant: "warning", - message: `Offer Accepted - Confirm total`, + message: "Offer Accepted - Confirm total", subMessage: `The offer expires in ${remainingTime}`, - modalUrl: `/orders/${activeOrder.internalID}/respond`, - modalTitle: "Review Offer", + actionUrl: `/orders/${activeOrder.internalID}/respond`, Icon: AlertFillIcon, } } case "OFFER_RECEIVED_CONFIRM_NEEDED": { return { variant: "warning", - message: `Counteroffer Received - Confirm Total`, + message: "Counteroffer Received - Confirm Total", subMessage: `The offer expires in ${remainingTime}`, - modalUrl: `/orders/${activeOrder.internalID}/respond`, - modalTitle: "Review Offer", + actionUrl: `/orders/${activeOrder.internalID}/respond`, Icon: AlertFillIcon, } } case "PROVISIONAL_OFFER_ACCEPTED": { return { variant: "info", - message: `Offer Accepted`, + message: "Offer Accepted", subMessage: "Tap to view", - modalUrl: `/orders/${activeOrder.internalID}/status`, - modalTitle: "Offer Accepted", + actionUrl: `/orders/${activeOrder.internalID}/status`, Icon: MoneyFillIcon, } } @@ -229,9 +210,3 @@ const FRAGMENT = graphql` } } ` - -export const IFrame = styled("iframe")` - height: 60vh; - width: 100%; - border: none; -` diff --git a/src/Apps/Conversations/components/ConversationCTA/__tests__/ConversationReviewOfferCTA.jest.tsx b/src/Apps/Conversations/components/ConversationCTA/__tests__/ConversationReviewOfferCTA.jest.tsx index b2203194af7..04fe724c76a 100644 --- a/src/Apps/Conversations/components/ConversationCTA/__tests__/ConversationReviewOfferCTA.jest.tsx +++ b/src/Apps/Conversations/components/ConversationCTA/__tests__/ConversationReviewOfferCTA.jest.tsx @@ -1,4 +1,4 @@ -import { fireEvent, screen, waitFor } from "@testing-library/react" +import { screen } from "@testing-library/react" import { ConversationReviewOfferCTA } from "Apps/Conversations/components/ConversationCTA/ConversationReviewOfferCTA" import { setupTestWrapperTL } from "DevTools/setupTestWrapperTL" import { graphql } from "react-relay" @@ -44,16 +44,10 @@ describe("ConversationReviewOfferCTA", () => { ), ).toBeInTheDocument() - // Modal details - fireEvent.click(screen.getByText("Payment Failed")) - - await waitFor(() => { - expect(screen.getByText("Update Payment Details")).toBeInTheDocument() - expect(screen.getByTestId("orderModalIframe")).toHaveAttribute( - "src", - "/orders/orderID/payment/new?isModal=true", - ) - }) + expect(screen.getByTestId("orderActionLink")).toHaveAttribute( + "href", + "/orders/orderID/payment/new", + ) }) it("OFFER_RECEIVED", async () => { @@ -69,16 +63,10 @@ describe("ConversationReviewOfferCTA", () => { expect(screen.getByText("Offer Received")).toBeInTheDocument() - // Modal details - fireEvent.click(screen.getByText("Offer Received")) - - await waitFor(() => { - expect(screen.getByText("Review Offer")).toBeInTheDocument() - expect(screen.getByTestId("orderModalIframe")).toHaveAttribute( - "src", - "/orders/orderID/respond?isModal=true", - ) - }) + expect(screen.getByTestId("orderActionLink")).toHaveAttribute( + "href", + "/orders/orderID/respond", + ) }) it("OFFER_ACCEPTED", async () => { @@ -96,17 +84,10 @@ describe("ConversationReviewOfferCTA", () => { screen.getByText("Congratulations! Offer Accepted"), ).toBeInTheDocument() expect(screen.getByText("Tap to view")).toBeInTheDocument() - - // Modal details - fireEvent.click(screen.getByText("Tap to view")) - - await waitFor(() => { - expect(screen.getByText("Offer Accepted")).toBeInTheDocument() - expect(screen.getByTestId("orderModalIframe")).toHaveAttribute( - "src", - "/orders/orderID/status?isModal=true", - ) - }) + expect(screen.getByTestId("orderActionLink")).toHaveAttribute( + "href", + "/orders/orderID/status", + ) }) it("OFFER_ACCEPTED_CONFIRM_NEEDED", async () => { @@ -129,16 +110,10 @@ describe("ConversationReviewOfferCTA", () => { screen.getByText("Offer Accepted - Confirm total"), ).toBeInTheDocument() - // Modal details - fireEvent.click(screen.getByText("Offer Accepted - Confirm total")) - - await waitFor(() => { - expect(screen.getByText("Review Offer")).toBeInTheDocument() - expect(screen.getByTestId("orderModalIframe")).toHaveAttribute( - "src", - "/orders/orderID/respond?isModal=true", - ) - }) + expect(screen.getByTestId("orderActionLink")).toHaveAttribute( + "href", + "/orders/orderID/respond", + ) }) it("OFFER_RECEIVED_CONFIRM_NEEDED", async () => { @@ -161,16 +136,10 @@ describe("ConversationReviewOfferCTA", () => { screen.getByText("Counteroffer Received - Confirm Total"), ).toBeInTheDocument() - // Modal details - fireEvent.click(screen.getByText("Counteroffer Received - Confirm Total")) - - await waitFor(() => { - expect(screen.getByText("Review Offer")).toBeInTheDocument() - expect(screen.getByTestId("orderModalIframe")).toHaveAttribute( - "src", - "/orders/orderID/respond?isModal=true", - ) - }) + expect(screen.getByTestId("orderActionLink")).toHaveAttribute( + "href", + "/orders/orderID/respond", + ) }) it("PROVISIONAL_OFFER_ACCEPTED", async () => { @@ -192,15 +161,9 @@ describe("ConversationReviewOfferCTA", () => { expect(screen.getByText("Offer Accepted")).toBeInTheDocument() expect(screen.getByText("Tap to view")).toBeInTheDocument() - // Modal details - fireEvent.click(screen.getByText("Tap to view")) - - await waitFor(() => { - expect(screen.getAllByText("Offer Accepted")[1]).toBeInTheDocument() - expect(screen.getByTestId("orderModalIframe")).toHaveAttribute( - "src", - "/orders/orderID/status?isModal=true", - ) - }) + expect(screen.getByTestId("orderActionLink")).toHaveAttribute( + "href", + "/orders/orderID/status", + ) }) }) diff --git a/src/Apps/Conversations/components/Details/OrderInformation/ReviewOrderButton.tsx b/src/Apps/Conversations/components/Details/OrderInformation/ReviewOrderButton.tsx index 3f91062fc5d..4c1e8254943 100644 --- a/src/Apps/Conversations/components/Details/OrderInformation/ReviewOrderButton.tsx +++ b/src/Apps/Conversations/components/Details/OrderInformation/ReviewOrderButton.tsx @@ -63,14 +63,14 @@ export const ReviewOrderButton: React.FC< switch (counterOfferState) { case "COUNTER_OFFER_BUYER": - ctaSubmittedText = `Review Counteroffer` + ctaSubmittedText = "Review Counteroffer" break case "COUNTER_OFFER_SELLER": variant = "secondaryBlack" - ctaSubmittedText = `View Offer` + ctaSubmittedText = "View Offer" break case "OFFER_BUYER": - ctaSubmittedText = `Review Offer` + ctaSubmittedText = "Review Offer" break default: ctaSubmittedText = `${data.state === "SUBMITTED" ? "Review" : "View"} ${