Add customer field

src/customers/views/CustomerDetails.tsx

@@ -112,7 +112,7 @@ export const CustomerDetailsView: React.FC<CustomerDetailsViewProps> = ({
                     onViewAllOrdersClick={() =>
                       navigate(
                         orderListUrl({
-                          email: maybe(() => customerDetails.data.user.email)
+                          customer: maybe(() => customerDetails.data.user.email)
                         })
                       )
                     }

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<MinMax>;
+  customer: FilterOpts<string>;
   status: FilterOpts<OrderStatusFilter[]>;
 }
 
 const messages = defineMessages({
+  customer: {
+    defaultMessage: "Customer",
+    description: "order"
+  },
   placed: {
     defaultMessage: "Placed",
     description: "order"
@@ -32,6 +39,14 @@ export function createFilterStructure(
   opts: OrderListFilterOpts
 ): IFilter<OrderFilterKeys> {
   return [
+    {
+      ...createTextField(
+        OrderFilterKeys.customer,
+        intl.formatMessage(messages.customer),
+        opts.customer.value
+      ),
+      active: opts.customer.active
+    },
     {
       ...createDateField(
         OrderFilterKeys.created,

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"
 }

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: [

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);
   }
 }
 

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]