chore: open action prompt in a new window instead of the modal for order actions in conversations

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 && (
-        <ModalDialog
-          width={900}
-          onClose={() => setShowOrderModal(false)}
-          title={props.modalTitle}
-          data-testid="orderModal"
-        >
-          <IFrame
-            src={`${props.modalUrl}?isModal=true`}
-            data-testid="orderModalIframe"
-          ></IFrame>
-        </ModalDialog>
-      )}
-
-      <AlertMessage {...props} onClick={handleCTAClick} />
-    </>
-  )
+  return <AlertMessage {...props} onClick={handleCTAClick} />
 }
 
 const AlertMessage = (props: GetCTAReturnProps & { onClick: () => void }) => {
   return (
     <Clickable onClick={props.onClick}>
-      <Flex
-        flexDirection="row"
-        justifyContent="space-between"
-        alignContent="center"
-        alignItems="center"
+      <RouterLink
+        to={`${props.actionUrl}`}
+        target="_blank"
+        textDecoration="none"
+        data-testid="orderActionLink"
       >
-        <Message variant={props.variant} title={props.message} width="100%">
-          <Text variant="sm">{props.subMessage}</Text>
-        </Message>
-        <ChevronRightIcon
-          fill="black100"
-          position="absolute"
-          right={0}
-          pr={4}
-        />
-      </Flex>
+        <Flex
+          flexDirection="row"
+          justifyContent="space-between"
+          alignContent="center"
+          alignItems="center"
+        >
+          <Message variant={props.variant} title={props.message} width="100%">
+            <Text variant="sm">{props.subMessage}</Text>
+          </Message>
+          <ChevronRightIcon
+            fill="black100"
+            position="absolute"
+            right={0}
+            pr={4}
+          />
+        </Flex>
+      </RouterLink>
     </Clickable>
   )
 }
@@ -113,8 +101,7 @@ interface GetCTAAttributesProps {
 interface GetCTAReturnProps {
   message: string
   subMessage: string
-  modalUrl: string
-  modalTitle: string
+  actionUrl: string
   variant: MessageProps["variant"]
   Icon: React.FC<React.PropsWithChildren<any>>
 }
@@ -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;
-`

src/Apps/Conversations/components/ConversationCTA/__tests__/ConversationCTA.jest.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from "@testing-library/react"
+import { screen } from "@testing-library/react"
 import { ConversationsProvider } from "Apps/Conversations/ConversationsContext"
 import { ConversationCTA } from "Apps/Conversations/components/ConversationCTA/ConversationCTA"
 import { setupTestWrapperTL } from "DevTools/setupTestWrapperTL"
@@ -132,22 +132,6 @@ describe("ConversationCTA", () => {
     expect(screen.getByText("Offer Accepted")).toBeInTheDocument()
   })
 
-  it("clicking the review offer CTA opens the order modal", async () => {
-    renderWithRelay({
-      Conversation: () => ({
-        activeOrders: {
-          edges: [{ node: { buyerAction: "OFFER_RECEIVED" } }],
-        },
-      }),
-    })
-
-    fireEvent.click(screen.getByText("Offer Received"))
-
-    await waitFor(() => {
-      expect(screen.getByTestId("orderModal")).toBeInTheDocument()
-    })
-  })
-
   describe("With no active orders", () => {
     const mockConversationWithArtwork = artwork => () => ({
       internalID: "internal-test-id",

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",
+    )
   })
 })

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