diff --git a/src/customers/views/CustomerDetails.tsx b/src/customers/views/CustomerDetails.tsx index 07c49aa2e..d2269f8fc 100644 --- a/src/customers/views/CustomerDetails.tsx +++ b/src/customers/views/CustomerDetails.tsx @@ -112,7 +112,7 @@ export const CustomerDetailsView: React.FC = ({ onViewAllOrdersClick={() => navigate( orderListUrl({ - email: maybe(() => customerDetails.data.user.email) + customer: maybe(() => customerDetails.data.user.email) }) ) } diff --git a/src/orders/components/OrderListPage/filters.ts b/src/orders/components/OrderListPage/filters.ts index 9e05c75d9..4b7e737a7 100644 --- a/src/orders/components/OrderListPage/filters.ts +++ b/src/orders/components/OrderListPage/filters.ts @@ -4,7 +4,8 @@ import { FilterOpts, MinMax } from "@saleor/types"; import { OrderStatusFilter } from "@saleor/types/globalTypes"; import { createDateField, - createOptionsField + createOptionsField, + createTextField } from "@saleor/utils/filters/fields"; import { IFilter } from "@saleor/components/Filter"; import { orderStatusMessages } from "@saleor/misc"; @@ -12,15 +13,21 @@ import { commonMessages } from "@saleor/intl"; export enum OrderFilterKeys { created = "created", + customer = "customer", status = "status" } export interface OrderListFilterOpts { created: FilterOpts; + customer: FilterOpts; status: FilterOpts; } const messages = defineMessages({ + customer: { + defaultMessage: "Customer", + description: "order" + }, placed: { defaultMessage: "Placed", description: "order" @@ -32,6 +39,14 @@ export function createFilterStructure( opts: OrderListFilterOpts ): IFilter { return [ + { + ...createTextField( + OrderFilterKeys.customer, + intl.formatMessage(messages.customer), + opts.customer.value + ), + active: opts.customer.active + }, { ...createDateField( OrderFilterKeys.created, diff --git a/src/orders/urls.ts b/src/orders/urls.ts index 2dbfb6dfb..c8e7e3af7 100644 --- a/src/orders/urls.ts +++ b/src/orders/urls.ts @@ -19,7 +19,7 @@ export const orderListPath = orderSectionUrl; export enum OrderListUrlFiltersEnum { createdFrom = "createdFrom", createdTo = "createdTo", - email = "email", + customer = "customer", payment = "payment", query = "query" } diff --git a/src/orders/views/OrderList/filters.test.ts b/src/orders/views/OrderList/filters.test.ts index df4122e2a..b737c70b0 100644 --- a/src/orders/views/OrderList/filters.test.ts +++ b/src/orders/views/OrderList/filters.test.ts @@ -22,7 +22,7 @@ describe("Filtering query params", () => { const params: OrderListUrlFilters = { createdFrom: date.from, createdTo: date.to, - email: "email@example.com", + customer: "email@example.com", status: [ OrderStatusFilter.FULFILLED, OrderStatusFilter.PARTIALLY_FULFILLED @@ -45,6 +45,10 @@ describe("Filtering URL params", () => { min: date.from } }, + customer: { + active: false, + value: "email@example.com" + }, status: { active: false, value: [ diff --git a/src/orders/views/OrderList/filters.ts b/src/orders/views/OrderList/filters.ts index db3bfec82..8a58feed5 100644 --- a/src/orders/views/OrderList/filters.ts +++ b/src/orders/views/OrderList/filters.ts @@ -15,7 +15,8 @@ import { dedupeFilter, getGteLteVariables, getMinMaxQueryParam, - getMultipleEnumValueQueryParam + getMultipleEnumValueQueryParam, + getSingleValueQueryParam } from "../../../utils/filters"; import { OrderListUrlFilters, @@ -43,6 +44,10 @@ export function getFilterOpts( min: maybe(() => params.createdFrom, "") } }, + customer: { + active: !!maybe(() => params.customer), + value: params.customer + }, status: { active: maybe(() => params.status !== undefined, false), value: maybe( @@ -66,7 +71,7 @@ export function getFilterVariables( gte: params.createdFrom, lte: params.createdTo }), - customer: params.email, + customer: params.customer, search: params.query, status: maybe(() => params.status.map(status => findInEnum(status, OrderStatusFilter)) @@ -93,6 +98,9 @@ export function getFilterQueryParam( OrderListUrlFiltersWithMultipleValuesEnum.status, OrderStatus ); + + case OrderFilterKeys.customer: + return getSingleValueQueryParam(filter, OrderListUrlFiltersEnum.customer); } } diff --git a/src/storybook/stories/orders/OrderListPage.tsx b/src/storybook/stories/orders/OrderListPage.tsx index 5fb565871..2edfc0a6d 100644 --- a/src/storybook/stories/orders/OrderListPage.tsx +++ b/src/storybook/stories/orders/OrderListPage.tsx @@ -28,6 +28,10 @@ const props: OrderListPageProps = { min: "50" } }, + customer: { + active: false, + value: "Jesse" + }, status: { active: false, value: [OrderStatusFilter.CANCELED, OrderStatusFilter.FULFILLED]