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"} ${