Use customer search hook
This commit is contained in:
dominik-zeglen
parent
3f28673c94
commit
b07b220b3c
6 changed files with 511 additions and 539 deletions
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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<OrderDetailsProps> = ({ id, params }) => {
|
||||
const navigate = useNavigator();
|
||||
const { user } = useUser();
|
||||
const {
|
||||
loadMore: loadMoreCustomers,
|
||||
search: searchUsers,
|
||||
result: users
|
||||
} = useCustomerSearch({
|
||||
variables: DEFAULT_INITIAL_SEARCH_DATA
|
||||
});
|
||||
|
||||
return (
|
||||
<TypedOrderDetailsQuery
|
||||
|
|
@ -91,12 +98,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
})
|
||||
);
|
||||
return (
|
||||
<SearchCustomers variables={DEFAULT_INITIAL_SEARCH_DATA}>
|
||||
{({
|
||||
loadMore: loadMoreCustomers,
|
||||
search: searchUsers,
|
||||
result: users
|
||||
}) => (
|
||||
<OrderDetailsMessages>
|
||||
{orderMessages => (
|
||||
<OrderOperations
|
||||
|
|
@ -151,8 +152,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
orderDraftFinalize.opts.loading,
|
||||
maybe(
|
||||
() =>
|
||||
orderDraftFinalize.opts.data.draftOrderComplete
|
||||
.errors
|
||||
orderDraftFinalize.opts.data.draftOrderComplete.errors
|
||||
)
|
||||
);
|
||||
return (
|
||||
|
|
@ -160,9 +160,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
{maybe(() => order.status !== OrderStatus.DRAFT) ? (
|
||||
<>
|
||||
<WindowTitle
|
||||
title={maybe(
|
||||
() => "Order #" + data.order.number
|
||||
)}
|
||||
title={maybe(() => "Order #" + data.order.number)}
|
||||
/>
|
||||
<OrderDetailsPage
|
||||
onNoteAdd={variables =>
|
||||
|
|
@ -177,10 +175,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
() => data.order.availableShippingMethods,
|
||||
[]
|
||||
)}
|
||||
userPermissions={maybe(
|
||||
() => user.permissions,
|
||||
[]
|
||||
)}
|
||||
userPermissions={maybe(() => user.permissions, [])}
|
||||
onOrderCancel={() => openModal("cancel")}
|
||||
onOrderFulfill={() => openModal("fulfill")}
|
||||
onFulfillmentCancel={fulfillmentId =>
|
||||
|
|
@ -220,8 +215,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
orderCancel.opts.called,
|
||||
orderCancel.opts.loading,
|
||||
maybe(
|
||||
() =>
|
||||
orderCancel.opts.data.orderCancel.errors
|
||||
() => orderCancel.opts.data.orderCancel.errors
|
||||
)
|
||||
)}
|
||||
number={maybe(() => order.number)}
|
||||
|
|
@ -256,9 +250,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
confirmButtonState={getMutationState(
|
||||
orderVoid.opts.called,
|
||||
orderVoid.opts.loading,
|
||||
maybe(
|
||||
() => orderVoid.opts.data.orderVoid.errors
|
||||
)
|
||||
maybe(() => orderVoid.opts.data.orderVoid.errors)
|
||||
)}
|
||||
open={params.action === "void"}
|
||||
onClose={closeModal}
|
||||
|
|
@ -328,8 +320,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
lines: maybe(() => order.lines, [])
|
||||
.filter(
|
||||
line =>
|
||||
line.quantityFulfilled <
|
||||
line.quantity
|
||||
line.quantityFulfilled < line.quantity
|
||||
)
|
||||
.map((line, lineIndex) => ({
|
||||
orderLineId: line.id,
|
||||
|
|
@ -374,8 +365,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
trackingNumber={maybe(
|
||||
() =>
|
||||
data.order.fulfillments.find(
|
||||
fulfillment =>
|
||||
fulfillment.id === params.id
|
||||
fulfillment => fulfillment.id === params.id
|
||||
).trackingNumber
|
||||
)}
|
||||
onConfirm={variables =>
|
||||
|
|
@ -407,9 +397,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
}
|
||||
users={maybe(
|
||||
() =>
|
||||
users.data.search.edges.map(
|
||||
edge => edge.node
|
||||
),
|
||||
users.data.search.edges.map(edge => edge.node),
|
||||
[]
|
||||
)}
|
||||
hasMore={maybe(
|
||||
|
|
@ -428,18 +416,15 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
}
|
||||
onDraftFinalize={() => openModal("finalize")}
|
||||
onDraftRemove={() => openModal("cancel")}
|
||||
onOrderLineAdd={() =>
|
||||
openModal("add-order-line")
|
||||
}
|
||||
onOrderLineAdd={() => openModal("add-order-line")}
|
||||
onBack={() => navigate(orderListUrl())}
|
||||
order={order}
|
||||
countries={maybe(
|
||||
() => data.shop.countries,
|
||||
[]
|
||||
).map(country => ({
|
||||
countries={maybe(() => data.shop.countries, []).map(
|
||||
country => ({
|
||||
code: country.code,
|
||||
label: country.country
|
||||
}))}
|
||||
})
|
||||
)}
|
||||
onProductClick={id => () =>
|
||||
navigate(productUrl(encodeURIComponent(id)))}
|
||||
onBillingAddressEdit={() =>
|
||||
|
|
@ -464,10 +449,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
onProfileView={() =>
|
||||
navigate(customerUrl(order.user.id))
|
||||
}
|
||||
userPermissions={maybe(
|
||||
() => user.permissions,
|
||||
[]
|
||||
)}
|
||||
userPermissions={maybe(() => user.permissions, [])}
|
||||
/>
|
||||
<OrderDraftCancelDialog
|
||||
confirmButtonState={getMutationState(
|
||||
|
|
@ -475,23 +457,19 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
orderDraftCancel.opts.loading,
|
||||
maybe(
|
||||
() =>
|
||||
orderDraftCancel.opts.data
|
||||
.draftOrderDelete.errors
|
||||
orderDraftCancel.opts.data.draftOrderDelete
|
||||
.errors
|
||||
)
|
||||
)}
|
||||
onClose={closeModal}
|
||||
onConfirm={() =>
|
||||
orderDraftCancel.mutate({ id })
|
||||
}
|
||||
onConfirm={() => orderDraftCancel.mutate({ id })}
|
||||
open={params.action === "cancel"}
|
||||
orderNumber={maybe(() => order.number)}
|
||||
/>
|
||||
<OrderDraftFinalizeDialog
|
||||
confirmButtonState={finalizeTransitionState}
|
||||
onClose={closeModal}
|
||||
onConfirm={() =>
|
||||
orderDraftFinalize.mutate({ id })
|
||||
}
|
||||
onConfirm={() => orderDraftFinalize.mutate({ id })}
|
||||
open={params.action === "finalize"}
|
||||
orderNumber={maybe(() => order.number)}
|
||||
warnings={orderDraftFinalizeWarnings(order)}
|
||||
|
|
@ -575,9 +553,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
confirmButtonState={getMutationState(
|
||||
orderUpdate.opts.called,
|
||||
orderUpdate.opts.loading,
|
||||
maybe(
|
||||
() => orderUpdate.opts.data.orderUpdate.errors
|
||||
)
|
||||
maybe(() => orderUpdate.opts.data.orderUpdate.errors)
|
||||
)}
|
||||
address={transformAddressToForm(
|
||||
maybe(() => order.shippingAddress)
|
||||
|
|
@ -608,9 +584,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
confirmButtonState={getMutationState(
|
||||
orderUpdate.opts.called,
|
||||
orderUpdate.opts.loading,
|
||||
maybe(
|
||||
() => orderUpdate.opts.data.orderUpdate.errors
|
||||
)
|
||||
maybe(() => orderUpdate.opts.data.orderUpdate.errors)
|
||||
)}
|
||||
address={transformAddressToForm(
|
||||
maybe(() => order.billingAddress)
|
||||
|
|
@ -643,8 +617,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
|
|||
</OrderOperations>
|
||||
)}
|
||||
</OrderDetailsMessages>
|
||||
)}
|
||||
</SearchCustomers>
|
||||
);
|
||||
}}
|
||||
</TypedOrderDetailsQuery>
|
||||
|
|
|
|||
|
|
@ -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<SearchCustomers, SearchCustomersVariables>(
|
||||
export default makeTopLevelSearch<SearchCustomers, SearchCustomersVariables>(
|
||||
searchCustomers
|
||||
);
|
||||
Loading…
Reference in a new issue