diff --git a/src/orders/components/OrderCustomer/OrderCustomer.tsx b/src/orders/components/OrderCustomer/OrderCustomer.tsx index 0665e269a..59782696c 100644 --- a/src/orders/components/OrderCustomer/OrderCustomer.tsx +++ b/src/orders/components/OrderCustomer/OrderCustomer.tsx @@ -16,10 +16,10 @@ import SingleAutocompleteSelectField from "@saleor/components/SingleAutocomplete import Skeleton from "@saleor/components/Skeleton"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { buttonMessages } from "@saleor/intl"; +import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers"; import { FetchMoreProps, UserPermissionProps } from "@saleor/types"; import { PermissionEnum } from "@saleor/types/globalTypes"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; -import { SearchCustomers_search_edges_node } from "../../../containers/SearchCustomers/types/SearchCustomers"; import { customerUrl } from "../../../customers/urls"; import { createHref, maybe } from "../../../misc"; import { OrderDetails_order } from "../../types/OrderDetails"; diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx index dbe3ea00c..d36642b84 100644 --- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx +++ b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx @@ -13,8 +13,8 @@ import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; import Skeleton from "@saleor/components/Skeleton"; import { sectionNames } from "@saleor/intl"; +import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers"; import { FetchMoreProps, UserPermissionProps } from "@saleor/types"; -import { SearchCustomers_search_edges_node } from "../../../containers/SearchCustomers/types/SearchCustomers"; import { maybe } from "../../../misc"; import { DraftOrderInput } from "../../../types/globalTypes"; import { OrderDetails_order } from "../../types/OrderDetails"; diff --git a/src/orders/fixtures.ts b/src/orders/fixtures.ts index af8a13c45..4463ec60c 100644 --- a/src/orders/fixtures.ts +++ b/src/orders/fixtures.ts @@ -1,5 +1,5 @@ +import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers"; import { MessageDescriptor } from "react-intl"; -import { SearchCustomers_search_edges_node } from "../containers/SearchCustomers/types/SearchCustomers"; import { transformOrderStatus, transformPaymentStatus } from "../misc"; import { FulfillmentStatus, diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx index 6d48bebe7..ed9afac47 100644 --- a/src/orders/views/OrderDetails/index.tsx +++ b/src/orders/views/OrderDetails/index.tsx @@ -3,8 +3,8 @@ import React from "react"; import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useUser from "@saleor/hooks/useUser"; +import useCustomerSearch from "@saleor/searches/useCustomerSearch"; import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config"; -import SearchCustomers from "../../../containers/SearchCustomers"; import { customerUrl } from "../../../customers/urls"; import { getMutationState, maybe, transformAddressToForm } from "../../../misc"; import { productUrl } from "../../../products/urls"; @@ -74,6 +74,13 @@ interface OrderDetailsProps { export const OrderDetails: React.FC = ({ id, params }) => { const navigate = useNavigator(); const { user } = useUser(); + const { + loadMore: loadMoreCustomers, + search: searchUsers, + result: users + } = useCustomerSearch({ + variables: DEFAULT_INITIAL_SEARCH_DATA + }); return ( = ({ id, params }) => { }) ); return ( - - {({ - loadMore: loadMoreCustomers, - search: searchUsers, - result: users - }) => ( - - {orderMessages => ( - - {({ - orderAddNote, - orderCancel, - orderCreateFulfillment, - orderDraftUpdate, - orderLinesAdd, - orderLineDelete, - orderLineUpdate, - orderPaymentCapture, - orderPaymentRefund, - orderVoid, - orderShippingMethodUpdate, - orderUpdate, - orderFulfillmentCancel, - orderFulfillmentUpdateTracking, - orderDraftCancel, - orderDraftFinalize, - orderPaymentMarkAsPaid - }) => { - const finalizeTransitionState = getMutationState( - orderDraftFinalize.opts.called, - orderDraftFinalize.opts.loading, - maybe( - () => - orderDraftFinalize.opts.data.draftOrderComplete - .errors - ) - ); - return ( + + {orderMessages => ( + + {({ + orderAddNote, + orderCancel, + orderCreateFulfillment, + orderDraftUpdate, + orderLinesAdd, + orderLineDelete, + orderLineUpdate, + orderPaymentCapture, + orderPaymentRefund, + orderVoid, + orderShippingMethodUpdate, + orderUpdate, + orderFulfillmentCancel, + orderFulfillmentUpdateTracking, + orderDraftCancel, + orderDraftFinalize, + orderPaymentMarkAsPaid + }) => { + const finalizeTransitionState = getMutationState( + orderDraftFinalize.opts.called, + orderDraftFinalize.opts.loading, + maybe( + () => + orderDraftFinalize.opts.data.draftOrderComplete.errors + ) + ); + return ( + <> + {maybe(() => order.status !== OrderStatus.DRAFT) ? ( <> - {maybe(() => order.status !== OrderStatus.DRAFT) ? ( - <> - "Order #" + data.order.number - )} - /> - - orderAddNote.mutate({ - input: variables, - order: id - }) - } - onBack={() => navigate(orderListUrl())} - order={order} - shippingMethods={maybe( - () => data.order.availableShippingMethods, - [] - )} - userPermissions={maybe( - () => user.permissions, - [] - )} - onOrderCancel={() => openModal("cancel")} - onOrderFulfill={() => openModal("fulfill")} - onFulfillmentCancel={fulfillmentId => - navigate( - orderUrl(id, { - action: "cancel-fulfillment", - id: fulfillmentId - }) - ) - } - onFulfillmentTrackingNumberUpdate={fulfillmentId => - navigate( - orderUrl(id, { - action: "edit-fulfillment", - id: fulfillmentId - }) - ) - } - onPaymentCapture={() => openModal("capture")} - onPaymentVoid={() => openModal("void")} - onPaymentRefund={() => openModal("refund")} - onProductClick={id => () => - navigate(productUrl(id))} - onBillingAddressEdit={() => - openModal("edit-billing-address") - } - onShippingAddressEdit={() => - openModal("edit-shipping-address") - } - onPaymentPaid={() => openModal("mark-paid")} - onProfileView={() => - navigate(customerUrl(order.user.id)) - } - /> - - orderCancel.opts.data.orderCancel.errors - ) - )} - number={maybe(() => order.number)} - open={params.action === "cancel"} - onClose={closeModal} - onSubmit={variables => - orderCancel.mutate({ - id, - ...variables - }) - } - /> - - orderPaymentMarkAsPaid.opts.data - .orderMarkAsPaid.errors - ) - )} - onClose={closeModal} - onConfirm={() => - orderPaymentMarkAsPaid.mutate({ - id - }) - } - open={params.action === "mark-paid"} - /> - orderVoid.opts.data.orderVoid.errors - ) - )} - open={params.action === "void"} - onClose={closeModal} - onConfirm={() => orderVoid.mutate({ id })} - /> - - orderPaymentCapture.opts.data.orderCapture - .errors - ) - )} - initial={maybe(() => order.total.gross.amount)} - open={params.action === "capture"} - variant="capture" - onClose={closeModal} - onSubmit={variables => - orderPaymentCapture.mutate({ - ...variables, - id - }) - } - /> - - orderPaymentRefund.opts.data.orderRefund - .errors - ) - )} - initial={maybe(() => order.total.gross.amount)} - open={params.action === "refund"} - variant="refund" - onClose={closeModal} - onSubmit={variables => - orderPaymentRefund.mutate({ - ...variables, - id - }) - } - /> - - orderCreateFulfillment.opts.data - .orderFulfillmentCreate.errors - ) - )} - open={params.action === "fulfill"} - lines={maybe(() => order.lines, []).filter( - line => line.quantityFulfilled < line.quantity - )} - onClose={closeModal} - onSubmit={variables => - orderCreateFulfillment.mutate({ - input: { - ...variables, - lines: maybe(() => order.lines, []) - .filter( - line => - line.quantityFulfilled < - line.quantity - ) - .map((line, lineIndex) => ({ - orderLineId: line.id, - quantity: variables.lines[lineIndex] - })) - .filter(line => line.quantity > 0) - }, - order: order.id - }) - } - /> - - orderFulfillmentCancel.opts.data - .orderFulfillmentCancel.errors - ) - )} - open={params.action === "cancel-fulfillment"} - onConfirm={variables => - orderFulfillmentCancel.mutate({ - id: params.id, - input: variables - }) - } - onClose={closeModal} - /> - - orderFulfillmentUpdateTracking.opts.data - .orderFulfillmentUpdateTracking.errors - ) - )} - open={params.action === "edit-fulfillment"} - trackingNumber={maybe( - () => - data.order.fulfillments.find( - fulfillment => - fulfillment.id === params.id - ).trackingNumber - )} - onConfirm={variables => - orderFulfillmentUpdateTracking.mutate({ - id: params.id, - input: { - ...variables, - notifyCustomer: true - } - }) - } - onClose={closeModal} - /> - - ) : ( - <> - "Draft order #" + data.order.number - )} - /> - - orderAddNote.mutate({ - input: variables, - order: id - }) - } - users={maybe( - () => - users.data.search.edges.map( - edge => edge.node - ), - [] - )} - hasMore={maybe( - () => users.data.search.pageInfo.hasNextPage, - false - )} - onFetchMore={loadMoreCustomers} - fetchUsers={searchUsers} - loading={users.loading} - usersLoading={users.loading} - onCustomerEdit={data => - orderDraftUpdate.mutate({ - id, - input: data - }) - } - onDraftFinalize={() => openModal("finalize")} - onDraftRemove={() => openModal("cancel")} - onOrderLineAdd={() => - openModal("add-order-line") - } - onBack={() => navigate(orderListUrl())} - order={order} - countries={maybe( - () => data.shop.countries, - [] - ).map(country => ({ - code: country.code, - label: country.country - }))} - onProductClick={id => () => - navigate(productUrl(encodeURIComponent(id)))} - onBillingAddressEdit={() => - openModal("edit-billing-address") - } - onShippingAddressEdit={() => - openModal("edit-shipping-address") - } - onShippingMethodEdit={() => - openModal("edit-shipping") - } - onOrderLineRemove={id => - orderLineDelete.mutate({ id }) - } - onOrderLineChange={(id, data) => - orderLineUpdate.mutate({ - id, - input: data - }) - } - saveButtonBarState="default" - onProfileView={() => - navigate(customerUrl(order.user.id)) - } - userPermissions={maybe( - () => user.permissions, - [] - )} - /> - - orderDraftCancel.opts.data - .draftOrderDelete.errors - ) - )} - onClose={closeModal} - onConfirm={() => - orderDraftCancel.mutate({ id }) - } - open={params.action === "cancel"} - orderNumber={maybe(() => order.number)} - /> - - orderDraftFinalize.mutate({ id }) - } - open={params.action === "finalize"} - orderNumber={maybe(() => order.number)} - warnings={orderDraftFinalizeWarnings(order)} - /> - - orderShippingMethodUpdate.opts.data - .orderUpdateShipping.errors - ) - )} - open={params.action === "edit-shipping"} - shippingMethod={maybe( - () => order.shippingMethod.id, - "..." - )} - shippingMethods={maybe( - () => order.availableShippingMethods - )} - onClose={closeModal} - onSubmit={variables => - orderShippingMethodUpdate.mutate({ - id, - input: { - shippingMethod: variables.shippingMethod - } - }) - } - /> - - {({ - loadMore, - search: variantSearch, - result: variantSearchOpts - }) => ( - - orderLinesAdd.opts.data - .draftOrderLinesCreate.errors - ) - )} - loading={variantSearchOpts.loading} - open={params.action === "add-order-line"} - hasMore={maybe( - () => - variantSearchOpts.data.search.pageInfo - .hasNextPage - )} - products={maybe(() => - variantSearchOpts.data.search.edges.map( - edge => edge.node - ) - )} - onClose={closeModal} - onFetch={variantSearch} - onFetchMore={loadMore} - onSubmit={variants => - orderLinesAdd.mutate({ - id, - input: variants.map(variant => ({ - quantity: 1, - variantId: variant.id - })) - }) - } - /> - )} - - - )} - orderUpdate.opts.data.orderUpdate.errors - ) - )} - address={transformAddressToForm( - maybe(() => order.shippingAddress) - )} - countries={maybe(() => data.shop.countries, []).map( - country => ({ - code: country.code, - label: country.country + "Order #" + data.order.number)} + /> + + orderAddNote.mutate({ + input: variables, + order: id }) - )} - errors={maybe( - () => orderUpdate.opts.data.orderUpdate.errors, + } + onBack={() => navigate(orderListUrl())} + order={order} + shippingMethods={maybe( + () => data.order.availableShippingMethods, [] )} - open={params.action === "edit-shipping-address"} - variant="shipping" + userPermissions={maybe(() => user.permissions, [])} + onOrderCancel={() => openModal("cancel")} + onOrderFulfill={() => openModal("fulfill")} + onFulfillmentCancel={fulfillmentId => + navigate( + orderUrl(id, { + action: "cancel-fulfillment", + id: fulfillmentId + }) + ) + } + onFulfillmentTrackingNumberUpdate={fulfillmentId => + navigate( + orderUrl(id, { + action: "edit-fulfillment", + id: fulfillmentId + }) + ) + } + onPaymentCapture={() => openModal("capture")} + onPaymentVoid={() => openModal("void")} + onPaymentRefund={() => openModal("refund")} + onProductClick={id => () => + navigate(productUrl(id))} + onBillingAddressEdit={() => + openModal("edit-billing-address") + } + onShippingAddressEdit={() => + openModal("edit-shipping-address") + } + onPaymentPaid={() => openModal("mark-paid")} + onProfileView={() => + navigate(customerUrl(order.user.id)) + } + /> + orderCancel.opts.data.orderCancel.errors + ) + )} + number={maybe(() => order.number)} + open={params.action === "cancel"} onClose={closeModal} - onConfirm={shippingAddress => - orderUpdate.mutate({ + onSubmit={variables => + orderCancel.mutate({ id, - input: { - shippingAddress - } + ...variables }) } /> - orderUpdate.opts.data.orderUpdate.errors + () => + orderPaymentMarkAsPaid.opts.data + .orderMarkAsPaid.errors ) )} - address={transformAddressToForm( - maybe(() => order.billingAddress) - )} - countries={maybe(() => data.shop.countries, []).map( - country => ({ - code: country.code, - label: country.country - }) - )} - errors={maybe( - () => orderUpdate.opts.data.orderUpdate.errors, - [] - )} - open={params.action === "edit-billing-address"} - variant="billing" onClose={closeModal} - onConfirm={billingAddress => - orderUpdate.mutate({ - id, + onConfirm={() => + orderPaymentMarkAsPaid.mutate({ + id + }) + } + open={params.action === "mark-paid"} + /> + orderVoid.opts.data.orderVoid.errors) + )} + open={params.action === "void"} + onClose={closeModal} + onConfirm={() => orderVoid.mutate({ id })} + /> + + orderPaymentCapture.opts.data.orderCapture + .errors + ) + )} + initial={maybe(() => order.total.gross.amount)} + open={params.action === "capture"} + variant="capture" + onClose={closeModal} + onSubmit={variables => + orderPaymentCapture.mutate({ + ...variables, + id + }) + } + /> + + orderPaymentRefund.opts.data.orderRefund + .errors + ) + )} + initial={maybe(() => order.total.gross.amount)} + open={params.action === "refund"} + variant="refund" + onClose={closeModal} + onSubmit={variables => + orderPaymentRefund.mutate({ + ...variables, + id + }) + } + /> + + orderCreateFulfillment.opts.data + .orderFulfillmentCreate.errors + ) + )} + open={params.action === "fulfill"} + lines={maybe(() => order.lines, []).filter( + line => line.quantityFulfilled < line.quantity + )} + onClose={closeModal} + onSubmit={variables => + orderCreateFulfillment.mutate({ input: { - billingAddress + ...variables, + lines: maybe(() => order.lines, []) + .filter( + line => + line.quantityFulfilled < line.quantity + ) + .map((line, lineIndex) => ({ + orderLineId: line.id, + quantity: variables.lines[lineIndex] + })) + .filter(line => line.quantity > 0) + }, + order: order.id + }) + } + /> + + orderFulfillmentCancel.opts.data + .orderFulfillmentCancel.errors + ) + )} + open={params.action === "cancel-fulfillment"} + onConfirm={variables => + orderFulfillmentCancel.mutate({ + id: params.id, + input: variables + }) + } + onClose={closeModal} + /> + + orderFulfillmentUpdateTracking.opts.data + .orderFulfillmentUpdateTracking.errors + ) + )} + open={params.action === "edit-fulfillment"} + trackingNumber={maybe( + () => + data.order.fulfillments.find( + fulfillment => fulfillment.id === params.id + ).trackingNumber + )} + onConfirm={variables => + orderFulfillmentUpdateTracking.mutate({ + id: params.id, + input: { + ...variables, + notifyCustomer: true } }) } + onClose={closeModal} /> - ); - }} - - )} - + ) : ( + <> + "Draft order #" + data.order.number + )} + /> + + orderAddNote.mutate({ + input: variables, + order: id + }) + } + users={maybe( + () => + users.data.search.edges.map(edge => edge.node), + [] + )} + hasMore={maybe( + () => users.data.search.pageInfo.hasNextPage, + false + )} + onFetchMore={loadMoreCustomers} + fetchUsers={searchUsers} + loading={users.loading} + usersLoading={users.loading} + onCustomerEdit={data => + orderDraftUpdate.mutate({ + id, + input: data + }) + } + onDraftFinalize={() => openModal("finalize")} + onDraftRemove={() => openModal("cancel")} + onOrderLineAdd={() => openModal("add-order-line")} + onBack={() => navigate(orderListUrl())} + order={order} + countries={maybe(() => data.shop.countries, []).map( + country => ({ + code: country.code, + label: country.country + }) + )} + onProductClick={id => () => + navigate(productUrl(encodeURIComponent(id)))} + onBillingAddressEdit={() => + openModal("edit-billing-address") + } + onShippingAddressEdit={() => + openModal("edit-shipping-address") + } + onShippingMethodEdit={() => + openModal("edit-shipping") + } + onOrderLineRemove={id => + orderLineDelete.mutate({ id }) + } + onOrderLineChange={(id, data) => + orderLineUpdate.mutate({ + id, + input: data + }) + } + saveButtonBarState="default" + onProfileView={() => + navigate(customerUrl(order.user.id)) + } + userPermissions={maybe(() => user.permissions, [])} + /> + + orderDraftCancel.opts.data.draftOrderDelete + .errors + ) + )} + onClose={closeModal} + onConfirm={() => orderDraftCancel.mutate({ id })} + open={params.action === "cancel"} + orderNumber={maybe(() => order.number)} + /> + orderDraftFinalize.mutate({ id })} + open={params.action === "finalize"} + orderNumber={maybe(() => order.number)} + warnings={orderDraftFinalizeWarnings(order)} + /> + + orderShippingMethodUpdate.opts.data + .orderUpdateShipping.errors + ) + )} + open={params.action === "edit-shipping"} + shippingMethod={maybe( + () => order.shippingMethod.id, + "..." + )} + shippingMethods={maybe( + () => order.availableShippingMethods + )} + onClose={closeModal} + onSubmit={variables => + orderShippingMethodUpdate.mutate({ + id, + input: { + shippingMethod: variables.shippingMethod + } + }) + } + /> + + {({ + loadMore, + search: variantSearch, + result: variantSearchOpts + }) => ( + + orderLinesAdd.opts.data + .draftOrderLinesCreate.errors + ) + )} + loading={variantSearchOpts.loading} + open={params.action === "add-order-line"} + hasMore={maybe( + () => + variantSearchOpts.data.search.pageInfo + .hasNextPage + )} + products={maybe(() => + variantSearchOpts.data.search.edges.map( + edge => edge.node + ) + )} + onClose={closeModal} + onFetch={variantSearch} + onFetchMore={loadMore} + onSubmit={variants => + orderLinesAdd.mutate({ + id, + input: variants.map(variant => ({ + quantity: 1, + variantId: variant.id + })) + }) + } + /> + )} + + + )} + orderUpdate.opts.data.orderUpdate.errors) + )} + address={transformAddressToForm( + maybe(() => order.shippingAddress) + )} + countries={maybe(() => data.shop.countries, []).map( + country => ({ + code: country.code, + label: country.country + }) + )} + errors={maybe( + () => orderUpdate.opts.data.orderUpdate.errors, + [] + )} + open={params.action === "edit-shipping-address"} + variant="shipping" + onClose={closeModal} + onConfirm={shippingAddress => + orderUpdate.mutate({ + id, + input: { + shippingAddress + } + }) + } + /> + orderUpdate.opts.data.orderUpdate.errors) + )} + address={transformAddressToForm( + maybe(() => order.billingAddress) + )} + countries={maybe(() => data.shop.countries, []).map( + country => ({ + code: country.code, + label: country.country + }) + )} + errors={maybe( + () => orderUpdate.opts.data.orderUpdate.errors, + [] + )} + open={params.action === "edit-billing-address"} + variant="billing" + onClose={closeModal} + onConfirm={billingAddress => + orderUpdate.mutate({ + id, + input: { + billingAddress + } + }) + } + /> + + ); + }} + )} - + ); }} diff --git a/src/containers/SearchCustomers/types/SearchCustomers.ts b/src/searches/types/SearchCustomers.ts similarity index 100% rename from src/containers/SearchCustomers/types/SearchCustomers.ts rename to src/searches/types/SearchCustomers.ts diff --git a/src/containers/SearchCustomers/index.ts b/src/searches/useCustomerSearch.ts similarity index 78% rename from src/containers/SearchCustomers/index.ts rename to src/searches/useCustomerSearch.ts index 0164f7826..bd046f0ab 100644 --- a/src/containers/SearchCustomers/index.ts +++ b/src/searches/useCustomerSearch.ts @@ -1,7 +1,7 @@ import gql from "graphql-tag"; +import makeTopLevelSearch from "@saleor/hooks/makeTopLevelSearch"; import { pageInfoFragment } from "@saleor/queries"; -import TopLevelSearch from "../TopLevelSearch"; import { SearchCustomers, SearchCustomersVariables @@ -24,6 +24,6 @@ export const searchCustomers = gql` } `; -export default TopLevelSearch( +export default makeTopLevelSearch( searchCustomers );