From 4b013c5e768b4b67774146ff9426c3379230c3e0 Mon Sep 17 00:00:00 2001 From: Christopher Pappas Date: Tue, 26 May 2020 18:36:16 -0700 Subject: [PATCH] [Refactor] Dont bundle split all of order app --- src/v2/Apps/Order/Routes/Accept/index.tsx | 9 +-- src/v2/Apps/Order/Routes/Counter/index.tsx | 5 +- src/v2/Apps/Order/Routes/NewPayment/index.tsx | 11 +-- src/v2/Apps/Order/Routes/Offer/index.tsx | 13 ++- src/v2/Apps/Order/Routes/Payment/index.tsx | 5 +- src/v2/Apps/Order/Routes/Reject/index.tsx | 3 - src/v2/Apps/Order/Routes/Respond/index.tsx | 13 ++- src/v2/Apps/Order/Routes/Review/index.tsx | 15 ++-- src/v2/Apps/Order/Routes/Shipping/index.tsx | 18 ++--- src/v2/Apps/Order/Routes/Status/index.tsx | 79 +++++++++---------- src/v2/Apps/Order/routes.tsx | 73 ++++++----------- 11 files changed, 93 insertions(+), 151 deletions(-) diff --git a/src/v2/Apps/Order/Routes/Accept/index.tsx b/src/v2/Apps/Order/Routes/Accept/index.tsx index 32f02fa94f1..6fea328eda8 100644 --- a/src/v2/Apps/Order/Routes/Accept/index.tsx +++ b/src/v2/Apps/Order/Routes/Accept/index.tsx @@ -96,7 +96,7 @@ export class Accept extends Component { logger.error(error) switch (error.code) { case "capture_failed": { - const parsedData = get(error, e => JSON.parse(e.data), {}) + const parsedData = get(error, (e) => JSON.parse(e.data), {}) // https://stripe.com/docs/declines/codes if (parsedData.decline_code === "insufficient_funds") { @@ -148,7 +148,7 @@ export class Accept extends Component { artistId() { return get( this.props.order, - o => o.lineItems.edges[0].node.artwork.artists[0].slug + (o) => o.lineItems.edges[0].node.artwork.artists[0].slug ) } @@ -221,7 +221,7 @@ export class Accept extends Component { - {className => ( + {(className) => ( )} @@ -288,6 +288,3 @@ export const AcceptFragmentContainer = createFragmentContainer( `, } ) - -// For bundle splitting in router -export default AcceptFragmentContainer diff --git a/src/v2/Apps/Order/Routes/Counter/index.tsx b/src/v2/Apps/Order/Routes/Counter/index.tsx index 24ab3646b15..c1045d5d4f8 100644 --- a/src/v2/Apps/Order/Routes/Counter/index.tsx +++ b/src/v2/Apps/Order/Routes/Counter/index.tsx @@ -110,7 +110,7 @@ export class CounterRoute extends Component { } } - @track(props => ({ + @track((props) => ({ action_type: Schema.ActionType.SubmittedCounterOffer, order_id: props.order.internalID, })) @@ -248,6 +248,3 @@ export const CounterFragmentContainer = createFragmentContainer( `, } ) - -// For bundle splitting in router -export default CounterFragmentContainer diff --git a/src/v2/Apps/Order/Routes/NewPayment/index.tsx b/src/v2/Apps/Order/Routes/NewPayment/index.tsx index 9d6aa090b2a..a46f8bd9bcc 100644 --- a/src/v2/Apps/Order/Routes/NewPayment/index.tsx +++ b/src/v2/Apps/Order/Routes/NewPayment/index.tsx @@ -28,7 +28,7 @@ import { } from "v2/Apps/Order/Utils/commitMutation" import { get } from "v2/Utils/get" -export const ContinueButton = props => ( +export const ContinueButton = (props) => ( @@ -54,8 +54,8 @@ const logger = createLogger("Order/Routes/NewPayment/index.tsx") @track() export class NewPaymentRoute extends Component< -NewPaymentProps, -NewPaymentState + NewPaymentProps, + NewPaymentState > { paymentPicker = React.createRef() state = { @@ -295,7 +295,7 @@ NewPaymentState artistId() { return get( this.props.order, - o => o.lineItems.edges[0].node.artwork.artists[0].slug + (o) => o.lineItems.edges[0].node.artwork.artists[0].slug ) } @@ -347,6 +347,3 @@ export const NewPaymentFragmentContainer = createFragmentContainer( `, } ) - -// For bundle splitting in router -export default NewPaymentFragmentContainer diff --git a/src/v2/Apps/Order/Routes/Offer/index.tsx b/src/v2/Apps/Order/Routes/Offer/index.tsx index c69d220207a..4e7fe03ed40 100644 --- a/src/v2/Apps/Order/Routes/Offer/index.tsx +++ b/src/v2/Apps/Order/Routes/Offer/index.tsx @@ -60,7 +60,7 @@ export class OfferRoute extends Component { highSpeedBumpEncountered: false, } - @track(props => ({ + @track((props) => ({ order_id: props.order.internalID, action_type: Schema.ActionType.FocusedOnOfferInput, flow: Schema.Flow.MakeOffer, @@ -69,7 +69,7 @@ export class OfferRoute extends Component { // noop } - @track(props => ({ + @track((props) => ({ order_id: props.order.internalID, action_type: Schema.ActionType.ViewedOfferTooLow, flow: Schema.Flow.MakeOffer, @@ -84,7 +84,7 @@ export class OfferRoute extends Component { }) } - @track(props => ({ + @track((props) => ({ order_id: props.order.internalID, action_type: Schema.ActionType.ViewedOfferHigherThanListPrice, flow: Schema.Flow.MakeOffer, @@ -235,7 +235,7 @@ export class OfferRoute extends Component { showError={ this.state.formIsDirty && this.state.offerValue <= 0 } - onChange={offerValue => this.setState({ offerValue })} + onChange={(offerValue) => this.setState({ offerValue })} onFocus={this.onOfferInputFocus.bind(this)} /> @@ -247,7 +247,7 @@ export class OfferRoute extends Component { + onChange={(offerNoteValue) => this.setState({ offerNoteValue }) } artworkId={artworkId} @@ -337,6 +337,3 @@ export const OfferFragmentContainer = createFragmentContainer( `, } ) - -// For bundle splitting in router -export default OfferFragmentContainer diff --git a/src/v2/Apps/Order/Routes/Payment/index.tsx b/src/v2/Apps/Order/Routes/Payment/index.tsx index 0d20c2d5bfd..7267ea9a462 100644 --- a/src/v2/Apps/Order/Routes/Payment/index.tsx +++ b/src/v2/Apps/Order/Routes/Payment/index.tsx @@ -30,7 +30,7 @@ import { } from "v2/Apps/Order/Utils/commitMutation" import { AnalyticsSchema, track } from "v2/Artsy" -export const ContinueButton = props => ( +export const ContinueButton = (props) => ( @@ -241,6 +241,3 @@ export const PaymentFragmentContainer = createFragmentContainer( `, } ) - -// For bundle splitting in router -export default PaymentFragmentContainer diff --git a/src/v2/Apps/Order/Routes/Reject/index.tsx b/src/v2/Apps/Order/Routes/Reject/index.tsx index cf506e14b52..4529dfdf09e 100644 --- a/src/v2/Apps/Order/Routes/Reject/index.tsx +++ b/src/v2/Apps/Order/Routes/Reject/index.tsx @@ -211,6 +211,3 @@ export const RejectFragmentContainer = createFragmentContainer( `, } ) - -// For bundle splitting in router -export default RejectFragmentContainer diff --git a/src/v2/Apps/Order/Routes/Respond/index.tsx b/src/v2/Apps/Order/Routes/Respond/index.tsx index d9a08ba3b25..98f01e91a72 100644 --- a/src/v2/Apps/Order/Routes/Respond/index.tsx +++ b/src/v2/Apps/Order/Routes/Respond/index.tsx @@ -71,7 +71,7 @@ export class RespondRoute extends Component { highSpeedBumpEncountered: false, } - @track(props => ({ + @track((props) => ({ order_id: props.order.internalID, action_type: Schema.ActionType.FocusedOnOfferInput, flow: Schema.Flow.MakeOffer, @@ -80,7 +80,7 @@ export class RespondRoute extends Component { // noop } - @track(props => ({ + @track((props) => ({ order_id: props.order.internalID, action_type: Schema.ActionType.ViewedOfferTooLow, flow: Schema.Flow.MakeOffer, @@ -95,7 +95,7 @@ export class RespondRoute extends Component { }) } - @track(props => ({ + @track((props) => ({ order_id: props.order.internalID, action_type: Schema.ActionType.ViewedOfferHigherThanListPrice, flow: Schema.Flow.MakeOffer, @@ -272,7 +272,7 @@ export class RespondRoute extends Component { showError={ this.state.formIsDirty && this.state.offerValue <= 0 } - onChange={offerValue => this.setState({ offerValue })} + onChange={(offerValue) => this.setState({ offerValue })} onFocus={this.onOfferInputFocus.bind(this)} /> @@ -282,7 +282,7 @@ export class RespondRoute extends Component { > + onChange={(offerNoteValue) => this.setState({ offerNoteValue }) } artworkId={artworkId} @@ -393,6 +393,3 @@ export const RespondFragmentContainer = createFragmentContainer( `, } ) - -// For bundle splitting in router -export default RespondFragmentContainer diff --git a/src/v2/Apps/Order/Routes/Review/index.tsx b/src/v2/Apps/Order/Routes/Review/index.tsx index 5ccc674de64..4e4ca2bd8ba 100644 --- a/src/v2/Apps/Order/Routes/Review/index.tsx +++ b/src/v2/Apps/Order/Routes/Review/index.tsx @@ -65,7 +65,7 @@ export class ReviewRoute extends Component { } } - @track(props => ({ + @track((props) => ({ action_type: props.order.mode === "BUY" ? Schema.ActionType.SubmittedOrder @@ -85,7 +85,7 @@ export class ReviewRoute extends Component { this.props.order.mode === "BUY" ? (await this.submitBuyOrder()).commerceSubmitOrder.orderOrError : (await this.submitOffer(setupIntentId)).commerceSubmitOrderWithOffer - .orderOrError + .orderOrError if (orderOrError.error) { this.handleSubmitError(orderOrError.error) @@ -97,7 +97,7 @@ export class ReviewRoute extends Component { ) { this.state.stripe .handleCardAction(orderOrError.actionData.clientSecret) - .then(result => { + .then((result) => { if (result.error) { this.props.dialog.showErrorDialog({ title: "An error occurred", @@ -115,7 +115,7 @@ export class ReviewRoute extends Component { ) { this.state.stripe .handleCardSetup(orderOrError.actionData.clientSecret) - .then(result => { + .then((result) => { if (result.error) { this.props.dialog.showErrorDialog({ title: "An error occurred", @@ -289,14 +289,14 @@ export class ReviewRoute extends Component { artistId() { return get( this.props.order, - o => o.lineItems.edges[0].node.artwork.artists[0].slug + (o) => o.lineItems.edges[0].node.artwork.artists[0].slug ) } routeToArtworkPage() { const artworkId = get( this.props.order, - o => o.lineItems.edges[0].node.artwork.slug + (o) => o.lineItems.edges[0].node.artwork.slug ) // Don't confirm whether or not you want to leave the page this.props.route.onTransition = () => null @@ -448,6 +448,3 @@ export const ReviewFragmentContainer = createFragmentContainer( `, } ) - -// For bundle splitting in router -export default ReviewFragmentContainer diff --git a/src/v2/Apps/Order/Routes/Shipping/index.tsx b/src/v2/Apps/Order/Routes/Shipping/index.tsx index d4f390590df..bdaeb778bd9 100644 --- a/src/v2/Apps/Order/Routes/Shipping/index.tsx +++ b/src/v2/Apps/Order/Routes/Shipping/index.tsx @@ -79,7 +79,7 @@ const logger = createLogger("Order/Routes/Shipping/index.tsx") export class ShippingRoute extends Component { state: ShippingState = { shippingOption: (this.props.order.requestedFulfillment && - this.props.order.requestedFulfillment.__typename !== "CommerceShip" + this.props.order.requestedFulfillment.__typename !== "CommerceShip" ? "PICKUP" : "SHIP") as CommerceOrderFulfillmentTypeEnum, address: this.startingAddress, @@ -87,8 +87,8 @@ export class ShippingRoute extends Component { addressTouched: {}, phoneNumber: this.props.order.requestedFulfillment && - (this.props.order.requestedFulfillment.__typename === "CommerceShip" || - this.props.order.requestedFulfillment.__typename === "CommercePickup") + (this.props.order.requestedFulfillment.__typename === "CommerceShip" || + this.props.order.requestedFulfillment.__typename === "CommercePickup") ? this.props.order.requestedFulfillment.phoneNumber : "", phoneNumberError: "", @@ -231,7 +231,7 @@ export class ShippingRoute extends Component { handleSubmitError(error: { code: string; data: string }) { logger.error(error) - const parsedData = get(error, e => JSON.parse(e.data), {}) + const parsedData = get(error, (e) => JSON.parse(e.data), {}) if ( error.code === "missing_region" || error.code === "missing_country" || @@ -267,7 +267,8 @@ export class ShippingRoute extends Component { country: validatePresence(country), postalCode: usOrCanada && validatePresence(postalCode), } - const hasErrors = Object.keys(errors).filter(key => errors[key]).length > 0 + const hasErrors = + Object.keys(errors).filter((key) => errors[key]).length > 0 return { errors, @@ -300,7 +301,7 @@ export class ShippingRoute extends Component { }) } - onPhoneNumberChange: PhoneNumberChangeHandler = phoneNumber => { + onPhoneNumberChange: PhoneNumberChangeHandler = (phoneNumber) => { const { error } = this.validatePhoneNumber(phoneNumber) this.setState({ phoneNumber, @@ -334,7 +335,7 @@ export class ShippingRoute extends Component { } = this.state const artwork = get( this.props, - props => props.order.lineItems.edges[0].node.artwork + (props) => props.order.lineItems.edges[0].node.artwork ) return ( @@ -508,6 +509,3 @@ export const ShippingFragmentContainer = createFragmentContainer( `, } ) - -// For bundle splitting in router -export default ShippingFragmentContainer diff --git a/src/v2/Apps/Order/Routes/Status/index.tsx b/src/v2/Apps/Order/Routes/Status/index.tsx index fa4609b2e73..460f5c223db 100644 --- a/src/v2/Apps/Order/Routes/Status/index.tsx +++ b/src/v2/Apps/Order/Routes/Status/index.tsx @@ -53,26 +53,26 @@ export class StatusRoute extends Component { case "SUBMITTED": return isOfferFlow ? { - title: "Your offer has been submitted", - description: ( - <> - The seller will respond to your offer by {stateExpiresAt}. + title: "Your offer has been submitted", + description: ( + <> + The seller will respond to your offer by {stateExpiresAt}. Keep in mind making an offer doesn’t guarantee you the work. - - ), - } + + ), + } : { - title: "Your order has been submitted", - description: ( - <> - Thank you for your purchase. You will receive a confirmation + title: "Your order has been submitted", + description: ( + <> + Thank you for your purchase. You will receive a confirmation email by {stateExpiresAt}. -
+
Disruptions caused by COVID-19 may cause delays — we appreciate your understanding. - - ), - } + + ), + } case "APPROVED": return { title: isOfferFlow ? "Offer accepted" : "Your order is confirmed", @@ -85,25 +85,25 @@ export class StatusRoute extends Component { your understanding. ) : ( - <> - Thank you for your purchase. A specialist will contact you within - 2 business days to coordinate pickup. -
+ <> + Thank you for your purchase. A specialist will contact you within + 2 business days to coordinate pickup. +
Disruptions caused by COVID-19 may cause delays — we appreciate your understanding. - - ), + + ), } case "FULFILLED": { return isShip ? { - title: "Your order has shipped", - description: this.getFulfilmentDescription(), - } + title: "Your order has shipped", + description: this.getFulfilmentDescription(), + } : { - title: "Your order has been picked up", - description: null, - } + title: "Your order has been picked up", + description: null, + } } case "CANCELED": case "REFUNDED": @@ -205,7 +205,7 @@ export class StatusRoute extends Component { getFulfilmentDescription(): React.ReactNode { const fulfillment = get( this.props.order, - o => o.lineItems.edges[0].node.fulfillments.edges[0].node + (o) => o.lineItems.edges[0].node.fulfillments.edges[0].node ) if (!fulfillment) { @@ -272,16 +272,16 @@ export class StatusRoute extends Component { /> ) : ( - - )} + + )} } @@ -373,6 +373,3 @@ export const StatusFragmentContainer = createFragmentContainer(StatusRoute, { } `, }) - -// For bundle splitting in router -export default StatusFragmentContainer diff --git a/src/v2/Apps/Order/routes.tsx b/src/v2/Apps/Order/routes.tsx index 4d4130f1d30..75abec965f6 100644 --- a/src/v2/Apps/Order/routes.tsx +++ b/src/v2/Apps/Order/routes.tsx @@ -6,17 +6,18 @@ import { Redirect, RedirectException, RouteConfig } from "found" import * as React from "react" import { graphql } from "react-relay" +import { RespondFragmentContainer as RespondRoute } from "./Routes/Respond" +import { OfferFragmentContainer as OfferRoute } from "./Routes/Offer" +import { ShippingFragmentContainer as ShippingRoute } from "./Routes/Shipping" +import { PaymentFragmentContainer as PaymentRoute } from "./Routes/Payment" +import { NewPaymentFragmentContainer as NewPaymentRoute } from "./Routes/NewPayment" +import { CounterFragmentContainer as CounterRoute } from "./Routes/Counter" +import { ReviewFragmentContainer as ReviewRoute } from "./Routes/Review" +import { AcceptFragmentContainer as AcceptRoute } from "./Routes/Accept" +import { RejectFragmentContainer as DeclineRoute } from "./Routes/Reject" +import { StatusFragmentContainer as StatusRoute } from "./Routes/Status" + const OrderApp = loadable(() => import("./OrderApp")) -const RespondRoute = loadable(() => import("./Routes/Respond")) -const OfferRoute = loadable(() => import("./Routes/Offer")) -const ShippingRoute = loadable(() => import("./Routes/Shipping")) -const PaymentRoute = loadable(() => import("./Routes/Payment")) -const NewPaymentRoute = loadable(() => import("./Routes/NewPayment")) -const CounterRoute = loadable(() => import("./Routes/Counter")) -const ReviewRoute = loadable(() => import("./Routes/Review")) -const AcceptRoute = loadable(() => import("./Routes/Accept")) -const DeclineRoute = loadable(() => import("./Routes/Reject")) -const StatusRoute = loadable(() => import("./Routes/Status")) // FIXME: // * `render` functions requires casting @@ -74,10 +75,7 @@ export const routes: RouteConfig[] = [ children: [ { path: "respond", - getComponent: () => RespondRoute, - prepare: () => { - RespondRoute.preload() - }, + Component: RespondRoute, shouldWarnBeforeLeaving: true, query: graphql` query routes_RespondQuery($orderID: ID!) { @@ -92,10 +90,7 @@ export const routes: RouteConfig[] = [ }, { path: "offer", - getComponent: () => OfferRoute, - prepare: () => { - OfferRoute.preload() - }, + Component: OfferRoute, shouldWarnBeforeLeaving: true, query: graphql` query routes_OfferQuery($orderID: ID!) { @@ -110,10 +105,7 @@ export const routes: RouteConfig[] = [ }, { path: "shipping", - getComponent: () => ShippingRoute, - prepare: () => { - ShippingRoute.preload() - }, + Component: ShippingRoute, shouldWarnBeforeLeaving: true, query: graphql` query routes_ShippingQuery($orderID: ID!) { @@ -128,10 +120,7 @@ export const routes: RouteConfig[] = [ }, { path: "payment", - getComponent: () => PaymentRoute, - prepare: () => { - PaymentRoute.preload() - }, + Component: PaymentRoute, shouldWarnBeforeLeaving: true, query: graphql` query routes_PaymentQuery($orderID: ID!) { @@ -149,10 +138,7 @@ export const routes: RouteConfig[] = [ }, { path: "payment/new", - getComponent: () => NewPaymentRoute, - prepare: () => { - NewPaymentRoute.preload() - }, + Component: NewPaymentRoute, shouldWarnBeforeLeaving: true, query: graphql` query routes_NewPaymentQuery($orderID: ID!) { @@ -170,10 +156,7 @@ export const routes: RouteConfig[] = [ }, { path: "review/counter", - getComponent: () => CounterRoute, - prepare: () => { - CounterRoute.preload() - }, + Component: CounterRoute, shouldWarnBeforeLeaving: true, query: graphql` query routes_CounterQuery($orderID: ID!) { @@ -188,10 +171,7 @@ export const routes: RouteConfig[] = [ }, { path: "review", - getComponent: () => ReviewRoute, - prepare: () => { - ReviewRoute.preload() - }, + Component: ReviewRoute, shouldWarnBeforeLeaving: true, query: graphql` query routes_ReviewQuery($orderID: ID!) { @@ -206,10 +186,7 @@ export const routes: RouteConfig[] = [ }, { path: "review/accept", - getComponent: () => AcceptRoute, - prepare: () => { - AcceptRoute.preload() - }, + Component: AcceptRoute, query: graphql` query routes_AcceptQuery($orderID: ID!) { order: commerceOrder(id: $orderID) { @@ -223,10 +200,7 @@ export const routes: RouteConfig[] = [ }, { path: "review/decline", - getComponent: () => DeclineRoute, - prepare: () => { - DeclineRoute.preload() - }, + Component: DeclineRoute, query: graphql` query routes_RejectQuery($orderID: ID!) { order: commerceOrder(id: $orderID) { @@ -237,10 +211,7 @@ export const routes: RouteConfig[] = [ }, { path: "status", - getComponent: () => StatusRoute, - prepare: () => { - StatusRoute.preload() - }, + Component: StatusRoute, query: graphql` query routes_StatusQuery($orderID: ID!) { order: commerceOrder(id: $orderID) { @@ -259,7 +230,7 @@ export const routes: RouteConfig[] = [ }) as any, { path: "*", - Component: props => { + Component: (props) => { return }, },