From cd761d09905d883748ed6c3997e348aa2e2cdd55 Mon Sep 17 00:00:00 2001 From: Dawid Tarasiuk Date: Mon, 22 Jun 2020 18:34:59 +0200 Subject: [PATCH] Query invoices for order --- .../OrderDetailsPage/OrderDetailsPage.tsx | 22 +- .../OrderInvoiceList/OrderInvoiceList.tsx | 14 +- src/orders/fixtures.ts | 438 +++++++++--------- src/orders/views/OrderDetails/index.tsx | 137 +++--- .../stories/orders/OrderDetailsPage.tsx | 1 + 5 files changed, 307 insertions(+), 305 deletions(-) diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx index dfc4ee420..f31cfbc57 100644 --- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx +++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx @@ -26,17 +26,17 @@ import OrderPayment from "../OrderPayment/OrderPayment"; import OrderUnfulfilledItems from "../OrderUnfulfilledItems/OrderUnfulfilledItems"; const useStyles = makeStyles( - theme => ({ + (theme) => ({ date: { - marginBottom: theme.spacing(3) + marginBottom: theme.spacing(3), }, header: { display: "flex", - marginBottom: 0 - } + marginBottom: 0, + }, }), { - name: "OrderDetailsPage" + name: "OrderDetailsPage", } ); @@ -67,7 +67,7 @@ export interface OrderDetailsPageProps extends UserPermissionProps { onInvoiceClick(invoice: InvoiceFragment); } -const OrderDetailsPage: React.FC = props => { +const OrderDetailsPage: React.FC = (props) => { const { order, userPermissions, @@ -84,7 +84,7 @@ const OrderDetailsPage: React.FC = props => { onPaymentVoid, onShippingAddressEdit, onProfileView, - onInvoiceClick + onInvoiceClick, } = props; const classes = useStyles(props); @@ -94,7 +94,7 @@ const OrderDetailsPage: React.FC = props => { const canEditAddresses = maybe(() => order.status) !== OrderStatus.CANCELED; const canFulfill = maybe(() => order.status) !== OrderStatus.CANCELED; const unfulfilled = maybe(() => order.lines, []).filter( - line => line.quantityFulfilled < line.quantity + (line) => line.quantityFulfilled < line.quantity ); return ( @@ -113,10 +113,10 @@ const OrderDetailsPage: React.FC = props => { { label: intl.formatMessage({ defaultMessage: "Cancel order", - description: "button" + description: "button", }), - onSelect: onOrderCancel - } + onSelect: onOrderCancel, + }, ]} /> )} diff --git a/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx b/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx index 0530edbe9..8f95f79fc 100644 --- a/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx +++ b/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx @@ -21,16 +21,16 @@ const useStyles = makeStyles( () => ({ cardContentTable: { "&:last-child": { - padding: 0 + padding: 0, }, - padding: 0 + padding: 0, }, colAction: { paddingRight: "0.5rem", width: "auto" }, colNumber: { width: "100%" }, colNumberClickable: { cursor: "pointer", - width: "100%" - } + width: "100%", + }, }), { name: "OrderInvoiceList" } ); @@ -42,7 +42,7 @@ interface OrderInvoiceListProps { onInvoiceSend?: (invoice: InvoiceFragment) => void; } -const OrderInvoiceList: React.FC = props => { +const OrderInvoiceList: React.FC = (props) => { const { invoices, onInvoiceGenerate, onInvoiceClick, onInvoiceSend } = props; const classes = useStyles(props); @@ -54,7 +54,7 @@ const OrderInvoiceList: React.FC = props => { = props => { - {invoices?.map(invoice => ( + {invoices?.map((invoice) => ( ({ __typename: "Order", @@ -754,7 +754,7 @@ export const order = (placeholder: string): OrderDetails_order => ({ OrderAction.CAPTURE, OrderAction.MARK_AS_PAID, OrderAction.REFUND, - OrderAction.VOID + OrderAction.VOID, ], availableShippingMethods: [ { @@ -764,8 +764,8 @@ export const order = (placeholder: string): OrderDetails_order => ({ price: { __typename: "Money", amount: 12.41, - currency: "USD" - } + currency: "USD", + }, }, { __typename: "ShippingMethod", @@ -774,8 +774,8 @@ export const order = (placeholder: string): OrderDetails_order => ({ price: { __typename: "Money", amount: 9.12, - currency: "USD" - } + currency: "USD", + }, }, { __typename: "ShippingMethod", @@ -784,9 +784,9 @@ export const order = (placeholder: string): OrderDetails_order => ({ price: { __typename: "Money", amount: 7.6, - currency: "USD" - } - } + currency: "USD", + }, + }, ], billingAddress: { __typename: "Address", @@ -796,7 +796,7 @@ export const order = (placeholder: string): OrderDetails_order => ({ country: { __typename: "CountryDisplay", code: "SB", - country: "Wyspy Salomona" + country: "Wyspy Salomona", }, countryArea: "", firstName: "Melissa", @@ -805,7 +805,7 @@ export const order = (placeholder: string): OrderDetails_order => ({ phone: "", postalCode: "66272", streetAddress1: "487 Roberto Shores", - streetAddress2: "" + streetAddress2: "", }, canFinalize: true, created: "2018-09-11T09:37:28.185874+00:00", @@ -825,9 +825,9 @@ export const order = (placeholder: string): OrderDetails_order => ({ user: { __typename: "User", email: "admin@example.com", - id: "QWRkcmVzczoxNQ==" - } - } + id: "QWRkcmVzczoxNQ==", + }, + }, ], fulfillments: [ { @@ -848,28 +848,28 @@ export const order = (placeholder: string): OrderDetails_order => ({ quantityFulfilled: 2, thumbnail: { __typename: "Image" as "Image", - url: placeholder + url: placeholder, }, unitPrice: { __typename: "TaxedMoney", gross: { __typename: "Money", amount: 79.71, - currency: "USD" + currency: "USD", }, net: { __typename: "Money", amount: 79.71, - currency: "USD" - } - } + currency: "USD", + }, + }, }, - quantity: 1 - } + quantity: 1, + }, ], status: FulfillmentStatus.FULFILLED, trackingNumber: "", - warehouse: warehouseList[1] + warehouse: warehouseList[1], }, { __typename: "Fulfillment", @@ -889,29 +889,29 @@ export const order = (placeholder: string): OrderDetails_order => ({ quantityFulfilled: 2, thumbnail: { __typename: "Image" as "Image", - url: placeholder + url: placeholder, }, unitPrice: { __typename: "TaxedMoney", gross: { __typename: "Money", amount: 79.71, - currency: "USD" + currency: "USD", }, net: { __typename: "Money", amount: 79.71, - currency: "USD" - } - } + currency: "USD", + }, + }, }, - quantity: 1 - } + quantity: 1, + }, ], status: FulfillmentStatus.FULFILLED, trackingNumber: "01nn12399su12nndfsy", - warehouse: warehouseList[0] - } + warehouse: warehouseList[0], + }, ], id: "T3JkZXI6OQ==", invoices: [ @@ -920,8 +920,8 @@ export const order = (placeholder: string): OrderDetails_order => ({ createdAt: "2020-06-22T13:52:05.094636+00:00", id: "SW52b2ljZTox", number: "1", - url: "invoice1" - } + url: "invoice1", + }, ], lines: [ { @@ -934,21 +934,21 @@ export const order = (placeholder: string): OrderDetails_order => ({ quantityFulfilled: 0, thumbnail: { __typename: "Image" as "Image", - url: placeholder + url: placeholder, }, unitPrice: { __typename: "TaxedMoney", gross: { __typename: "Money", amount: 18.51, - currency: "USD" + currency: "USD", }, net: { __typename: "Money", amount: 18.51, - currency: "USD" - } - } + currency: "USD", + }, + }, }, { __typename: "OrderLine", @@ -960,22 +960,22 @@ export const order = (placeholder: string): OrderDetails_order => ({ quantityFulfilled: 2, thumbnail: { __typename: "Image" as "Image", - url: placeholder + url: placeholder, }, unitPrice: { __typename: "TaxedMoney", gross: { __typename: "Money", amount: 79.71, - currency: "USD" + currency: "USD", }, net: { __typename: "Money", amount: 79.71, - currency: "USD" - } - } - } + currency: "USD", + }, + }, + }, ], number: "9", paymentStatus: PaymentChargeStatusEnum.NOT_CHARGED, @@ -987,7 +987,7 @@ export const order = (placeholder: string): OrderDetails_order => ({ country: { __typename: "CountryDisplay", code: "SB", - country: "Wyspy Salomona" + country: "Wyspy Salomona", }, countryArea: "", firstName: "Melissa", @@ -996,7 +996,7 @@ export const order = (placeholder: string): OrderDetails_order => ({ phone: "", postalCode: "66272", streetAddress1: "487 Roberto Shores", - streetAddress2: "" + streetAddress2: "", }, shippingMethod: null, shippingMethodName: "Registred priority", @@ -1005,8 +1005,8 @@ export const order = (placeholder: string): OrderDetails_order => ({ gross: { __typename: "Money", amount: 19.98, - currency: "USD" - } + currency: "USD", + }, }, status: OrderStatus.PARTIALLY_FULFILLED, subtotal: { @@ -1014,34 +1014,34 @@ export const order = (placeholder: string): OrderDetails_order => ({ gross: { __typename: "Money", amount: 214.95, - currency: "USD" - } + currency: "USD", + }, }, total: { __typename: "TaxedMoney", gross: { __typename: "Money", amount: 234.93, - currency: "USD" + currency: "USD", }, tax: { __typename: "Money", amount: 0, - currency: "USD" - } + currency: "USD", + }, }, totalAuthorized: { __typename: "Money", amount: 234.93, - currency: "USD" + currency: "USD", }, totalCaptured: { __typename: "Money", amount: 0, - currency: "USD" + currency: "USD", }, user: null, - userEmail: "melissa.simon@example.com" + userEmail: "melissa.simon@example.com", }); export const draftOrder = (placeholder: string): OrderDetails_order => ({ __typename: "Order" as "Order", @@ -1061,8 +1061,8 @@ export const draftOrder = (placeholder: string): OrderDetails_order => ({ createdAt: "2020-06-22T13:52:05.094636+00:00", id: "SW52b2ljZTox", number: "1", - url: "invoice1" - } + url: "invoice1", + }, ], lines: [ { @@ -1075,21 +1075,21 @@ export const draftOrder = (placeholder: string): OrderDetails_order => ({ quantityFulfilled: 0, thumbnail: { __typename: "Image" as "Image", - url: placeholder + url: placeholder, }, unitPrice: { __typename: "TaxedMoney" as "TaxedMoney", gross: { __typename: "Money" as "Money", amount: 65.95, - currency: "USD" + currency: "USD", }, net: { __typename: "Money" as "Money", amount: 65.95, - currency: "USD" - } - } + currency: "USD", + }, + }, }, { __typename: "OrderLine" as "OrderLine", @@ -1101,22 +1101,22 @@ export const draftOrder = (placeholder: string): OrderDetails_order => ({ quantityFulfilled: 0, thumbnail: { __typename: "Image" as "Image", - url: placeholder + url: placeholder, }, unitPrice: { __typename: "TaxedMoney" as "TaxedMoney", gross: { __typename: "Money" as "Money", amount: 68.2, - currency: "USD" + currency: "USD", }, net: { __typename: "Money" as "Money", amount: 68.2, - currency: "USD" - } - } - } + currency: "USD", + }, + }, + }, ], number: "24", paymentStatus: null, @@ -1128,8 +1128,8 @@ export const draftOrder = (placeholder: string): OrderDetails_order => ({ gross: { __typename: "Money" as "Money", amount: 0, - currency: "USD" - } + currency: "USD", + }, }, status: "DRAFT" as OrderStatus.DRAFT, subtotal: { @@ -1137,35 +1137,35 @@ export const draftOrder = (placeholder: string): OrderDetails_order => ({ gross: { __typename: "Money" as "Money", amount: 168.3, - currency: "USD" - } + currency: "USD", + }, }, total: { __typename: "TaxedMoney" as "TaxedMoney", gross: { __typename: "Money" as "Money", amount: 168.3, - currency: "USD" + currency: "USD", }, tax: { __typename: "Money" as "Money", amount: 68.3, - currency: "USD" - } + currency: "USD", + }, }, totalAuthorized: null, totalCaptured: null, user: null, - userEmail: null + userEmail: null, }); -export const flatOrders = orders.map(order => ({ +export const flatOrders = orders.map((order) => ({ ...order, orderStatus: transformOrderStatus(order.status, { - formatMessage: (message: MessageDescriptor) => message.defaultMessage + formatMessage: (message: MessageDescriptor) => message.defaultMessage, } as any), paymentStatus: transformPaymentStatus(order.paymentStatus, { - formatMessage: (message: MessageDescriptor) => message.defaultMessage - } as any) + formatMessage: (message: MessageDescriptor) => message.defaultMessage, + } as any), })); export const variants = [ { id: "p1", name: "Product 1: variant 1", sku: "12345", stockQuantity: 3 }, @@ -1174,7 +1174,7 @@ export const variants = [ { id: "p4", name: "Product 3: variant 1", sku: "12445", stockQuantity: 12 }, { id: "p5", name: "Product 3: variant 2", sku: "12545", stockQuantity: 7 }, { id: "p6", name: "Product 5: variant 1", sku: "13345", stockQuantity: 3 }, - { id: "p7", name: "Product 5: variant 2", sku: "14345", stockQuantity: 11 } + { id: "p7", name: "Product 5: variant 2", sku: "14345", stockQuantity: 11 }, ]; export const prefixes = ["01", "02", "41", "49"]; export const countries = [ @@ -1182,11 +1182,11 @@ export const countries = [ { code: "AX", label: "Åland Islands" }, { code: "AL", label: "Albania" }, { code: "DZ", label: "Algeria" }, - { code: "AS", label: "American Samoa" } + { code: "AS", label: "American Samoa" }, ]; export const shippingMethods = [ { country: "whole world", id: "s1", name: "DHL", price: {} }, - { country: "Afghanistan", id: "s2", name: "UPS" } + { country: "Afghanistan", id: "s2", name: "UPS" }, ]; export const orderLineSearch = ( placeholderImage: string @@ -1197,7 +1197,7 @@ export const orderLineSearch = ( name: "Apple Juice", thumbnail: { __typename: "Image" as "Image", - url: placeholderImage + url: placeholderImage, }, variants: [ { @@ -1211,11 +1211,11 @@ export const orderLineSearch = ( net: { __typename: "Money" as "Money", amount: 3.0, - currency: "USD" - } - } + currency: "USD", + }, + }, }, - sku: "93855755" + sku: "93855755", }, { __typename: "ProductVariant" as "ProductVariant", @@ -1228,11 +1228,11 @@ export const orderLineSearch = ( net: { __typename: "Money" as "Money", amount: 5.0, - currency: "USD" - } - } + currency: "USD", + }, + }, }, - sku: "43226647" + sku: "43226647", }, { __typename: "ProductVariant" as "ProductVariant", @@ -1245,13 +1245,13 @@ export const orderLineSearch = ( net: { __typename: "Money" as "Money", amount: 7.0, - currency: "USD" - } - } + currency: "USD", + }, + }, }, - sku: "80884671" - } - ] + sku: "80884671", + }, + ], }, { __typename: "Product" as "Product", @@ -1259,7 +1259,7 @@ export const orderLineSearch = ( name: "Pineapple Juice", thumbnail: { __typename: "Image" as "Image", - url: placeholderImage + url: placeholderImage, }, variants: [ { @@ -1273,11 +1273,11 @@ export const orderLineSearch = ( net: { __typename: "Money" as "Money", amount: 3.0, - currency: "USD" - } - } + currency: "USD", + }, + }, }, - sku: "43200242" + sku: "43200242", }, { __typename: "ProductVariant" as "ProductVariant", @@ -1290,11 +1290,11 @@ export const orderLineSearch = ( net: { __typename: "Money" as "Money", amount: 5.0, - currency: "USD" - } - } + currency: "USD", + }, + }, }, - sku: "79129513" + sku: "79129513", }, { __typename: "ProductVariant" as "ProductVariant", @@ -1307,12 +1307,12 @@ export const orderLineSearch = ( net: { __typename: "Money" as "Money", amount: 7.0, - currency: "USD" - } - } + currency: "USD", + }, + }, }, - sku: "75799450" - } - ] - } + sku: "75799450", + }, + ], + }, ]; diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx index 222d29a3b..5c915c21e 100644 --- a/src/orders/views/OrderDetails/index.tsx +++ b/src/orders/views/OrderDetails/index.tsx @@ -14,7 +14,7 @@ import { customerUrl } from "../../../customers/urls"; import { getStringOrPlaceholder, maybe, - transformAddressToForm + transformAddressToForm, } from "../../../misc"; import { productUrl } from "../../../products/urls"; import { FulfillmentStatus, OrderStatus } from "../../../types/globalTypes"; @@ -23,7 +23,7 @@ import OrderCancelDialog from "../../components/OrderCancelDialog"; import OrderDetailsPage from "../../components/OrderDetailsPage"; import OrderDraftCancelDialog from "../../components/OrderDraftCancelDialog/OrderDraftCancelDialog"; import OrderDraftFinalizeDialog, { - OrderDraftFinalizeWarning + OrderDraftFinalizeWarning, } from "../../components/OrderDraftFinalizeDialog"; import OrderDraftPage from "../../components/OrderDraftPage"; import OrderFulfillmentCancelDialog from "../../components/OrderFulfillmentCancelDialog"; @@ -41,7 +41,7 @@ import { orderListUrl, orderUrl, OrderUrlDialog, - OrderUrlQueryParams + OrderUrlQueryParams, } from "../../urls"; import { OrderDetailsMessages } from "./OrderDetailsMessages"; @@ -59,7 +59,7 @@ const orderDraftFinalizeWarnings = (order: OrderDetails_order) => { if ( order && order.lines && - order.lines.filter(line => line.isShippingRequired).length > 0 && + order.lines.filter((line) => line.isShippingRequired).length > 0 && order.shippingMethod === null ) { warnings.push(OrderDraftFinalizeWarning.NO_SHIPPING_METHOD); @@ -67,7 +67,7 @@ const orderDraftFinalizeWarnings = (order: OrderDetails_order) => { if ( order && order.lines && - order.lines.filter(line => line.isShippingRequired).length === 0 && + order.lines.filter((line) => line.isShippingRequired).length === 0 && order.shippingMethod !== null ) { warnings.push(OrderDraftFinalizeWarning.UNNECESSARY_SHIPPING_METHOD); @@ -86,29 +86,29 @@ export const OrderDetails: React.FC = ({ id, params }) => { const { loadMore: loadMoreCustomers, search: searchUsers, - result: users + result: users, } = useCustomerSearch({ - variables: DEFAULT_INITIAL_SEARCH_DATA + variables: DEFAULT_INITIAL_SEARCH_DATA, }); const { loadMore, search: variantSearch, - result: variantSearchOpts + result: variantSearchOpts, } = useOrderVariantSearch({ - variables: DEFAULT_INITIAL_SEARCH_DATA + variables: DEFAULT_INITIAL_SEARCH_DATA, }); const warehouses = useWarehouseList({ displayLoader: true, variables: { - first: 30 - } + first: 30, + }, }); const intl = useIntl(); const [openModal, closeModal] = createDialogActionHandlers< OrderUrlDialog, OrderUrlQueryParams - >(navigate, params => orderUrl(id, params), params); + >(navigate, (params) => orderUrl(id, params), params); const handleBack = () => navigate(orderListUrl()); @@ -123,7 +123,7 @@ export const OrderDetails: React.FC = ({ id, params }) => { return ( - {orderMessages => ( + {(orderMessages) => ( = ({ id, params }) => { orderFulfillmentUpdateTracking, orderDraftCancel, orderDraftFinalize, - orderPaymentMarkAsPaid + orderPaymentMarkAsPaid, }) => ( <> {order?.status !== OrderStatus.DRAFT ? ( @@ -174,20 +174,20 @@ export const OrderDetails: React.FC = ({ id, params }) => { title={intl.formatMessage( { defaultMessage: "Order #{orderNumber}", - description: "window title" + description: "window title", }, { orderNumber: getStringOrPlaceholder( data?.order?.number - ) + ), } )} /> + onNoteAdd={(variables) => orderAddNote.mutate({ input: variables, - order: id + order: id, }) } onBack={handleBack} @@ -199,26 +199,27 @@ export const OrderDetails: React.FC = ({ id, params }) => { userPermissions={user?.userPermissions || []} onOrderCancel={() => openModal("cancel")} onOrderFulfill={() => navigate(orderFulfillUrl(id))} - onFulfillmentCancel={fulfillmentId => + onFulfillmentCancel={(fulfillmentId) => navigate( orderUrl(id, { action: "cancel-fulfillment", - id: fulfillmentId + id: fulfillmentId, }) ) } - onFulfillmentTrackingNumberUpdate={fulfillmentId => + onFulfillmentTrackingNumberUpdate={(fulfillmentId) => navigate( orderUrl(id, { action: "edit-fulfillment", - id: fulfillmentId + id: fulfillmentId, }) ) } onPaymentCapture={() => openModal("capture")} onPaymentVoid={() => openModal("void")} onPaymentRefund={() => openModal("refund")} - onProductClick={id => () => navigate(productUrl(id))} + onProductClick={(id) => () => + navigate(productUrl(id))} onBillingAddressEdit={() => openModal("edit-billing-address") } @@ -229,7 +230,7 @@ export const OrderDetails: React.FC = ({ id, params }) => { onProfileView={() => navigate(customerUrl(order.user.id)) } - onInvoiceClick={invoice => + onInvoiceClick={(invoice) => window.open(invoice.url, "_blank") } /> @@ -238,7 +239,7 @@ export const OrderDetails: React.FC = ({ id, params }) => { open={ params.action === "cancel" && order?.fulfillments.some( - fulfillment => + (fulfillment) => fulfillment.status === FulfillmentStatus.FULFILLED ) @@ -254,7 +255,7 @@ export const OrderDetails: React.FC = ({ id, params }) => { onClose={closeModal} onSubmit={() => orderCancel.mutate({ - id + id, }) } /> @@ -269,7 +270,7 @@ export const OrderDetails: React.FC = ({ id, params }) => { onClose={closeModal} onConfirm={() => orderPaymentMarkAsPaid.mutate({ - id + id, }) } open={params.action === "mark-paid"} @@ -291,10 +292,10 @@ export const OrderDetails: React.FC = ({ id, params }) => { open={params.action === "capture"} variant="capture" onClose={closeModal} - onSubmit={variables => + onSubmit={(variables) => orderPaymentCapture.mutate({ ...variables, - id + id, }) } /> @@ -308,10 +309,10 @@ export const OrderDetails: React.FC = ({ id, params }) => { open={params.action === "refund"} variant="refund" onClose={closeModal} - onSubmit={variables => + onSubmit={(variables) => orderPaymentRefund.mutate({ ...variables, - id + id, }) } /> @@ -326,13 +327,13 @@ export const OrderDetails: React.FC = ({ id, params }) => { open={params.action === "cancel-fulfillment"} warehouses={ warehouses.data?.warehouses.edges.map( - edge => edge.node + (edge) => edge.node ) || [] } - onConfirm={variables => + onConfirm={(variables) => orderFulfillmentCancel.mutate({ id: params.id, - input: variables + input: variables, }) } onClose={closeModal} @@ -348,16 +349,16 @@ export const OrderDetails: React.FC = ({ id, params }) => { open={params.action === "edit-fulfillment"} trackingNumber={getStringOrPlaceholder( data?.order?.fulfillments.find( - fulfillment => fulfillment.id === params.id + (fulfillment) => fulfillment.id === params.id )?.trackingNumber )} - onConfirm={variables => + onConfirm={(variables) => orderFulfillmentUpdateTracking.mutate({ id: params.id, input: { ...variables, - notifyCustomer: true - } + notifyCustomer: true, + }, }) } onClose={closeModal} @@ -369,26 +370,26 @@ export const OrderDetails: React.FC = ({ id, params }) => { title={intl.formatMessage( { defaultMessage: "Draft Order #{orderNumber}", - description: "window title" + description: "window title", }, { orderNumber: getStringOrPlaceholder( data?.order?.number - ) + ), } )} /> + onNoteAdd={(variables) => orderAddNote.mutate({ input: variables, - order: id + order: id, }) } users={maybe( () => - users.data.search.edges.map(edge => edge.node), + users.data.search.edges.map((edge) => edge.node), [] )} hasMore={maybe( @@ -399,10 +400,10 @@ export const OrderDetails: React.FC = ({ id, params }) => { fetchUsers={searchUsers} loading={users.loading} usersLoading={users.loading} - onCustomerEdit={data => + onCustomerEdit={(data) => orderDraftUpdate.mutate({ id, - input: data + input: data, }) } onDraftFinalize={() => openModal("finalize")} @@ -411,12 +412,12 @@ export const OrderDetails: React.FC = ({ id, params }) => { onBack={() => navigate(orderListUrl())} order={order} countries={maybe(() => data.shop.countries, []).map( - country => ({ + (country) => ({ code: country.code, - label: country.country + label: country.country, }) )} - onProductClick={id => () => + onProductClick={(id) => () => navigate(productUrl(encodeURIComponent(id)))} onBillingAddressEdit={() => openModal("edit-billing-address") @@ -427,13 +428,13 @@ export const OrderDetails: React.FC = ({ id, params }) => { onShippingMethodEdit={() => openModal("edit-shipping") } - onOrderLineRemove={id => + onOrderLineRemove={(id) => orderLineDelete.mutate({ id }) } onOrderLineChange={(id, data) => orderLineUpdate.mutate({ id, - input: data + input: data, }) } saveButtonBarState="default" @@ -477,12 +478,12 @@ export const OrderDetails: React.FC = ({ id, params }) => { shippingMethod={order?.shippingMethod?.id} shippingMethods={order?.availableShippingMethods} onClose={closeModal} - onSubmit={variables => + onSubmit={(variables) => orderShippingMethodUpdate.mutate({ id, input: { - shippingMethod: variables.shippingMethod - } + shippingMethod: variables.shippingMethod, + }, }) } /> @@ -498,18 +499,18 @@ export const OrderDetails: React.FC = ({ id, params }) => { variantSearchOpts.data?.search.pageInfo.hasNextPage } products={variantSearchOpts.data?.search.edges.map( - edge => edge.node + (edge) => edge.node )} onClose={closeModal} onFetch={variantSearch} onFetchMore={loadMore} - onSubmit={variants => + onSubmit={(variants) => orderLinesAdd.mutate({ id, - input: variants.map(variant => ({ + input: variants.map((variant) => ({ quantity: 1, - variantId: variant.id - })) + variantId: variant.id, + })), }) } /> @@ -519,21 +520,21 @@ export const OrderDetails: React.FC = ({ id, params }) => { confirmButtonState={orderUpdate.opts.status} address={transformAddressToForm(order?.shippingAddress)} countries={ - data?.shop?.countries.map(country => ({ + data?.shop?.countries.map((country) => ({ code: country.code, - label: country.country + label: country.country, })) || [] } errors={orderUpdate.opts.data?.orderUpdate.errors || []} open={params.action === "edit-shipping-address"} variant="shipping" onClose={closeModal} - onConfirm={shippingAddress => + onConfirm={(shippingAddress) => orderUpdate.mutate({ id, input: { - shippingAddress - } + shippingAddress, + }, }) } /> @@ -541,21 +542,21 @@ export const OrderDetails: React.FC = ({ id, params }) => { confirmButtonState={orderUpdate.opts.status} address={transformAddressToForm(order?.billingAddress)} countries={ - data?.shop?.countries.map(country => ({ + data?.shop?.countries.map((country) => ({ code: country.code, - label: country.country + label: country.country, })) || [] } errors={orderUpdate.opts.data?.orderUpdate.errors || []} open={params.action === "edit-billing-address"} variant="billing" onClose={closeModal} - onConfirm={billingAddress => + onConfirm={(billingAddress) => orderUpdate.mutate({ id, input: { - billingAddress - } + billingAddress, + }, }) } /> diff --git a/src/storybook/stories/orders/OrderDetailsPage.tsx b/src/storybook/stories/orders/OrderDetailsPage.tsx index ad7b7f45c..b73fd5c4e 100644 --- a/src/storybook/stories/orders/OrderDetailsPage.tsx +++ b/src/storybook/stories/orders/OrderDetailsPage.tsx @@ -21,6 +21,7 @@ const props: Omit = { countries, onBack: () => undefined, onBillingAddressEdit: undefined, + onClickInvoice: () => undefined, onFulfillmentCancel: () => undefined, onFulfillmentTrackingNumberUpdate: () => undefined, onInvoiceClick: () => undefined,