Merge pull request #396 from mirumee/add/order-filter-fields

Improve order filters

CHANGELOG.md

@@ -31,6 +31,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix crash when one product is selected - #391 by @dominik-zeglen
 - Improve product update form error handling - #392 by @dominik-zeglen
 - Fix column picker errors - #393 by @dominik-zeglen
+- Improve order filters - #396 by @dominik-zeglen
 
 ## 2.0.0
 

locale/messages.pot

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2020-01-20T16:06:58.433Z\n"
+"POT-Creation-Date: 2020-02-03T11:54:24.949Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
@@ -2803,6 +2803,14 @@ msgctxt "draft order"
 msgid "Created"
 msgstr ""
 
+#: build/locale/src/orders/components/OrderListPage/filters.json
+#. [src.orders.components.OrderListPage.placed] - order
+#. defaultMessage is:
+#. Created
+msgctxt "order"
+msgid "Created"
+msgstr ""
+
 #: build/locale/src/collections/views/CollectionCreate.json
 #. [src.collections.views.1597339737]
 #. defaultMessage is:
@@ -2883,6 +2891,14 @@ msgctxt "e-mail or full name"
 msgid "Customer"
 msgstr ""
 
+#: build/locale/src/orders/components/OrderListPage/filters.json
+#. [src.orders.components.OrderListPage.customer] - order
+#. defaultMessage is:
+#. Customer
+msgctxt "order"
+msgid "Customer"
+msgstr ""
+
 #: build/locale/src/customers/components/CustomerList/CustomerList.json
 #. [src.customers.components.CustomerList.2339105195]
 #. defaultMessage is:
@@ -6275,14 +6291,6 @@ msgctxt "product type"
 msgid "Physical"
 msgstr ""
 
-#: build/locale/src/orders/components/OrderListPage/filters.json
-#. [src.orders.components.OrderListPage.placed] - order
-#. defaultMessage is:
-#. Placed
-msgctxt "order"
-msgid "Placed"
-msgstr ""
-
 #: build/locale/src/staff/components/StaffPreferences/StaffPreferences.json
 #. [src.staff.components.StaffPreferences.2162129531]
 #. defaultMessage is:

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,17 +13,23 @@ 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",
+    defaultMessage: "Created",
     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/__snapshots__/filters.test.ts.snap

@@ -4,6 +4,7 @@ exports[`Filtering URL params should not be empty if active filters are present
 Object {
   "createdFrom": "2019-12-09",
   "createdTo": "2019-12-38",
+  "customer": "email@example.com",
   "status": Array [
     "FULFILLED",
     "PARTIALLY_FULFILLED",
@@ -11,4 +12,4 @@ Object {
 }
 `;
 
-exports[`Filtering URL params should not be empty if active filters are present 2`] = `"createdFrom=2019-12-09&createdTo=2019-12-38&status%5B0%5D=FULFILLED&status%5B1%5D=PARTIALLY_FULFILLED"`;
+exports[`Filtering URL params should not be empty if active filters are present 2`] = `"customer=email%40example.com&createdFrom=2019-12-09&createdTo=2019-12-38&status%5B0%5D=FULFILLED&status%5B1%5D=PARTIALLY_FULFILLED"`;

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]