Add offer stepper to Shipping/Payment/Review

src/Apps/Order/Components/OrderStepper.tsx

@@ -4,15 +4,22 @@ import { Step, Stepper } from "Styleguide/Components"
 const offerFlow = ["Offer", "Shipping", "Payment", "Review"]
 const buyNowFlow = ["Shipping", "Payment", "Review"]
 
-type OrderStepperProps =
-  | {
-      currentStep: "Offer" | "Shipping" | "Payment" | "Review"
-      offerFlow: true
-    }
-  | {
-      currentStep: "Shipping" | "Payment" | "Review"
-      offerFlow: false
-    }
+// TODO: This currently fails as TS is unable to coerce a boolean type into
+// "true" or "false" as this conditional expects.
+// type OrderStepperProps =
+//   | {
+//       currentStep: "Offer" | "Shipping" | "Payment" | "Review"
+//       offerFlow: true
+//     }
+//   | {
+//       currentStep: "Shipping" | "Payment" | "Review"
+//       offerFlow: false
+//     }
+
+interface OrderStepperProps {
+  currentStep: "Offer" | "Shipping" | "Payment" | "Review"
+  offerFlow: boolean
+}
 
 export const OrderStepper: React.SFC<OrderStepperProps> = ({
   currentStep,

src/Apps/Order/Routes/Payment/index.tsx

@@ -190,7 +190,7 @@ export class PaymentRoute extends Component<PaymentProps, PaymentState> {
             <Col>
               <OrderStepper
                 currentStep="Payment"
-                offerFlow={false /* TODO: order.isOfferable or whatever */}
+                offerFlow={order.mode === "OFFER"}
               />
             </Col>
           </Row>
@@ -437,6 +437,7 @@ export const PaymentFragmentContainer = createFragmentContainer(
   graphql`
     fragment Payment_order on Order {
       id
+      mode
       creditCard {
         name
         street1

src/Apps/Order/Routes/Review/index.tsx

@@ -217,7 +217,7 @@ export class ReviewRoute extends Component<ReviewProps, ReviewState> {
             <Col>
               <OrderStepper
                 currentStep="Review"
-                offerFlow={false /* TODO: order.isOfferable or whatever */}
+                offerFlow={order.mode === "OFFER"}
               />
             </Col>
           </Row>
@@ -328,6 +328,7 @@ export const ReviewFragmentContainer = createFragmentContainer(
   graphql`
     fragment Review_order on Order {
       id
+      mode
       lineItems {
         edges {
           node {

src/Apps/Order/Routes/Shipping/index.tsx

@@ -307,7 +307,7 @@ export class ShippingRoute extends Component<ShippingProps, ShippingState> {
             <Col>
               <OrderStepper
                 currentStep="Shipping"
-                offerFlow={false /* TODO: order.isOfferable or whatever */}
+                offerFlow={this.props.order.mode === "OFFER"}
               />
             </Col>
           </Row>
@@ -420,6 +420,7 @@ export const ShippingFragmentContainer = createFragmentContainer(
   graphql`
     fragment Shipping_order on Order {
       id
+      mode
       state
       requestedFulfillment {
         __typename

src/Apps/Order/Routes/__tests__/Offer.test.tsx

@@ -128,141 +128,3 @@ describe("Offer InitialMutation", () => {
     })
   })
 })
-
-// import { Button } from "@artsy/palette"
-// import { Input } from "Components/Input"
-// import { ErrorModal, ModalButton } from "Components/Modal/ErrorModal"
-// import { MockBoot, renderRelayTree } from "DevTools"
-// import React from "react"
-// import { graphql } from "react-relay"
-// import { commitMutation as _commitMutation } from "react-relay"
-// import { UntouchedOfferOrder } from "../../../__tests__/Fixtures/Order"
-// import { TransactionSummary } from "../../Components/TransactionSummary"
-// import { OfferFragmentContainer as OfferRoute } from "../Offer"
-
-// import {
-//   initialOfferFailedCannotOffer,
-//   initialOfferSuccess,
-// } from "../__fixtures__/MutationResults"
-
-// jest.unmock("react-relay")
-
-// const commitMutation = _commitMutation as any
-
-// describe("Offer", () => {
-//   let wrapper
-//   beforeEach(async () => {
-//     wrapper = await renderRelayTree({
-//       Component: ({ order }: any) => (
-//         <OfferRoute order={order} {...testProps} />
-//       ),
-//       query: graphql`
-//         query OfferTestQuery {
-//           order: ecommerceOrder(id: "unused") {
-//             ...Offer_order
-//           }
-//         }
-//       `,
-//       wrapper: n => <MockBoot breakpoint="xs">{n}</MockBoot>,
-//       mockResolvers: {
-//         Order: () => UntouchedOfferOrder,
-//       },
-//     })
-//   })
-
-//   const testProps = {
-//     order: { ...UntouchedOfferOrder, id: "1234" },
-//     router: {
-//       push: jest.fn(),
-//     } as any,
-//     route: {
-//       onTransition: jest.fn(),
-//     } as any,
-//     relay: {
-//       environment: {},
-//     } as any,
-//     mediator: {
-//       trigger: jest.fn(),
-//     } as any,
-//   }
-
-//   it("renders", () => {
-//     const input = wrapper.find(Input)
-//     expect(input.text()).toContain("Your offer")
-//   })
-
-//   it("can receive input, which updates the transaction summary", () => {
-//     const input = wrapper.find(Input)
-//     const transactionSummary = () => wrapper.find(TransactionSummary)
-
-//     expect(transactionSummary().text()).toContain("Your offer—")
-
-//     input.props().onChange({ currentTarget: { value: "1" } } as any)
-//     wrapper.update()
-//     expect(transactionSummary().text()).toContain("Your offer$1")
-
-//     input.props().onChange({ currentTarget: { value: "1.23" } } as any)
-//     wrapper.update()
-//     expect(transactionSummary().text()).toContain("Your offer$1")
-
-//     input.props().onChange({ currentTarget: { value: "1023.23" } } as any)
-//     wrapper.update()
-//     expect(transactionSummary().text()).toContain("Your offer$1,023")
-//   })
-
-//   describe("mutation", () => {
-//     beforeEach(() => {
-//       console.error = jest.fn() // Silences component logging.
-//       commitMutation.mockReset()
-//     })
-
-//     it("routes to shipping screen after mutation completes", () => {
-//       const mockCommitMutation = commitMutation as jest.Mock<any>
-//       mockCommitMutation.mockImplementationOnce(
-//         (_environment, { onCompleted }) => {
-//           onCompleted(initialOfferSuccess)
-//         }
-//       )
-
-//       wrapper.find(Button).simulate("click")
-
-//       expect(testProps.router.push).toHaveBeenCalledWith(
-//         "/orders/1234/shipping"
-//       )
-//     })
-
-//     it("shows the button spinner while loading the mutation", () => {
-//       const mockCommitMutation = commitMutation as jest.Mock<any>
-//       mockCommitMutation.mockImplementationOnce(() => {
-//         const buttonProps = wrapper
-//           .update() // We need to wait for the component to re-render
-//           .find("Button")
-//           .props() as any
-//         expect(buttonProps.loading).toBeTruthy()
-//       })
-
-//       wrapper.find(Button).simulate("click")
-//     })
-
-//     it("shows an error modal when there is an error from the server", () => {
-//       const mockCommitMutation = commitMutation as jest.Mock<any>
-//       mockCommitMutation.mockImplementationOnce(
-//         (_environment, { onCompleted }) => {
-//           onCompleted(initialOfferFailedCannotOffer)
-//         }
-//       )
-
-//       wrapper.find(Button).simulate("click")
-
-//       const errorComponent = wrapper.find(ErrorModal)
-//       expect(errorComponent.props().show).toBe(true)
-//       expect(errorComponent.text()).toContain("An error occurred")
-//       expect(errorComponent.text()).toContain(
-//         "Something went wrong. Please try again or contact orders@artsy.net."
-//       )
-
-//       wrapper.find(ModalButton).simulate("click")
-//       expect(wrapper.find(ErrorModal).props().show).toBe(false)
-//     })
-//   })
-// })

src/Apps/Order/Routes/__tests__/Payment.test.tsx

@@ -13,7 +13,12 @@ import {
   validAddress,
 } from "Apps/Order/Routes/__tests__/Utils/addressForm"
 import { Input } from "../../../../Components/Input"
-import { Collapse } from "../../../../Styleguide/Components"
+import {
+  ActiveTabContainer,
+  CheckMarkWrapper,
+  Collapse,
+  Stepper,
+} from "../../../../Styleguide/Components"
 import { CreditCardInput } from "../../Components/CreditCardInput"
 import {
   creatingCreditCardFailed,
@@ -533,4 +538,14 @@ describe("Payment", () => {
       expect(stripeMock.createToken).toBeCalled()
     })
   })
+
+  describe("Offer-mode orders", () => {
+    it("shows an active offer stepper if the order is an Offer Order", () => {
+      const offerOrder = { ...OrderWithShippingDetails, mode: "OFFER" }
+      const component = getWrapper({ ...testProps, order: offerOrder })
+      expect(component.find(ActiveTabContainer).text()).toEqual("Payment")
+      expect(component.find(Stepper).props().currentStepIndex).toEqual(2)
+      expect(component.find(CheckMarkWrapper).length).toEqual(2)
+    })
+  })
 })

src/Apps/Order/Routes/__tests__/Review.test.tsx

@@ -2,10 +2,18 @@ import { mount } from "enzyme"
 import React from "react"
 
 import { Button } from "@artsy/palette"
-import { UntouchedBuyOrder } from "Apps/__tests__/Fixtures/Order"
+import {
+  OrderWithShippingDetails,
+  UntouchedBuyOrder,
+} from "Apps/__tests__/Fixtures/Order"
 import { ErrorModal, ModalButton } from "Components/Modal/ErrorModal"
 import { MockBoot } from "DevTools"
 import { commitMutation } from "react-relay"
+import {
+  ActiveTabContainer,
+  CheckMarkWrapper,
+  Stepper,
+} from "Styleguide/Components"
 import { StepSummaryItem } from "Styleguide/Components/StepSummaryItem"
 import {
   submitOrderWithFailure,
@@ -146,4 +154,14 @@ describe("Review", () => {
     component.find(ModalButton).simulate("click")
     expect(window.location.assign).toBeCalledWith("/artist/artistId")
   })
+
+  describe("Offer-mode orders", () => {
+    it("shows an active offer stepper if the order is an Offer Order", () => {
+      const offerOrder = { ...OrderWithShippingDetails, mode: "OFFER" }
+      const component = getWrapper({ ...defaultProps, order: offerOrder })
+      expect(component.find(ActiveTabContainer).text()).toEqual("Review")
+      expect(component.find(Stepper).props().currentStepIndex).toEqual(3)
+      expect(component.find(CheckMarkWrapper).length).toEqual(3)
+    })
+  })
 })

src/Apps/Order/Routes/__tests__/Shipping.test.tsx

@@ -15,7 +15,12 @@ import { ModalButton } from "Components/Modal/ErrorModal"
 import { ErrorModal } from "Components/Modal/ErrorModal"
 import { MockBoot } from "DevTools"
 import { commitMutation as _commitMutation, RelayProp } from "react-relay"
-import { CountrySelect } from "Styleguide/Components"
+import {
+  ActiveTabContainer,
+  CheckMarkWrapper,
+  CountrySelect,
+  Stepper,
+} from "Styleguide/Components"
 import {
   settingOrderShipmentFailure,
   settingOrderShipmentMissingCountryFailure,
@@ -383,4 +388,14 @@ describe("Shipping", () => {
       expect(commitMutation).toBeCalled()
     })
   })
+
+  describe("Offer-mode orders", () => {
+    it("shows an active offer stepper if the order is an Offer Order", () => {
+      const offerOrder = { ...UntouchedBuyOrder, mode: "OFFER" }
+      const component = getWrapper({ ...testProps, order: offerOrder })
+      expect(component.find(ActiveTabContainer).text()).toEqual("Shipping")
+      expect(component.find(Stepper).props().currentStepIndex).toEqual(1)
+      expect(component.find(CheckMarkWrapper).length).toEqual(1)
+    })
+  })
 })