Add preorder and click&collect filters to order list (#1568)

* Add preorder and click&collect filters to order list

* Update messages

* Add fixtures

* Update snapshots

* Update snapshots and extract messages

locale/defaultMessages.json

@@ -4623,6 +4623,10 @@
     "context": "order",
     "string": "Channel"
   },
+  "src_dot_orders_dot_components_dot_OrderListPage_dot_clickAndCollect": {
+    "context": "click and collect",
+    "string": "Click&Collect"
+  },
   "src_dot_orders_dot_components_dot_OrderListPage_dot_customer": {
     "context": "order",
     "string": "Customer"
@@ -4631,6 +4635,10 @@
     "context": "order",
     "string": "Created"
   },
+  "src_dot_orders_dot_components_dot_OrderListPage_dot_preorder": {
+    "context": "is preorder",
+    "string": "Preorder"
+  },
   "src_dot_orders_dot_components_dot_OrderList_dot_1198046928": {
     "string": "Fulfillment status"
   },

schema.graphql

@@ -4337,6 +4337,8 @@ input OrderFilterInput {
   search: String
   metadata: [MetadataFilter]
   channels: [ID]
+  isClickAndCollect: Boolean
+  isPreorder: Boolean
 }
 
 type OrderFulfill {

src/orders/components/OrderListPage/filters.ts

@@ -12,6 +12,7 @@ import {
   PaymentChargeStatusEnum
 } from "@saleor/types/globalTypes";
 import {
+  createBooleanField,
   createDateField,
   createOptionsField,
   createTextField
@@ -23,7 +24,9 @@ export enum OrderFilterKeys {
   customer = "customer",
   status = "status",
   paymentStatus = "paymentStatus",
-  channel = "channel"
+  channel = "channel",
+  clickAndCollect = "clickAndCollect",
+  preorder = "preorder"
 }
 
 export interface OrderListFilterOpts {
@@ -32,9 +35,19 @@ export interface OrderListFilterOpts {
   status: FilterOpts<OrderStatusFilter[]>;
   paymentStatus: FilterOpts<PaymentChargeStatusEnum[]>;
   channel?: FilterOpts<MultiAutocompleteChoiceType[]>;
+  clickAndCollect: FilterOpts<boolean>;
+  preorder: FilterOpts<boolean>;
 }
 
 const messages = defineMessages({
+  preorder: {
+    defaultMessage: "Preorder",
+    description: "is preorder"
+  },
+  clickAndCollect: {
+    defaultMessage: "Click&Collect",
+    description: "click and collect"
+  },
   channel: {
     defaultMessage: "Channel",
     description: "order"
@@ -54,6 +67,30 @@ export function createFilterStructure(
   opts: OrderListFilterOpts
 ): IFilter<OrderFilterKeys> {
   return [
+    {
+      ...createBooleanField(
+        OrderFilterKeys.clickAndCollect,
+        intl.formatMessage(messages.clickAndCollect),
+        opts.clickAndCollect.value,
+        {
+          negative: intl.formatMessage(commonMessages.no),
+          positive: intl.formatMessage(commonMessages.yes)
+        }
+      ),
+      active: opts.clickAndCollect.active
+    },
+    {
+      ...createBooleanField(
+        OrderFilterKeys.preorder,
+        intl.formatMessage(messages.preorder),
+        opts.preorder.value,
+        {
+          negative: intl.formatMessage(commonMessages.no),
+          positive: intl.formatMessage(commonMessages.yes)
+        }
+      ),
+      active: opts.preorder.active
+    },
     {
       ...createTextField(
         OrderFilterKeys.customer,

src/orders/urls.ts

@@ -23,7 +23,9 @@ export enum OrderListUrlFiltersEnum {
   createdTo = "createdTo",
   customer = "customer",
   payment = "payment",
-  query = "query"
+  query = "query",
+  clickAndCollect = "clickAndCollect",
+  preorder = "preorder"
 }
 export enum OrderListUrlFiltersWithMultipleValues {
   status = "status",

src/orders/views/OrderList/__snapshots__/filters.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`Filtering URL params should not be empty if active filters are present 1`] = `
 Object {
   "channel": Array [],
+  "clickAndCollect": "false",
   "createdFrom": "2019-12-09",
   "createdTo": "2019-12-38",
   "customer": "email@example.com",
@@ -10,6 +11,7 @@ Object {
     "FULLY_CHARGED",
     "PARTIALLY_CHARGED",
   ],
+  "preorder": "false",
   "status": Array [
     "FULFILLED",
     "PARTIALLY_FULFILLED",
@@ -17,4 +19,4 @@ Object {
 }
 `;
 
-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%5B%5D=FULFILLED&status%5B%5D=PARTIALLY_FULFILLED&paymentStatus%5B%5D=FULLY_CHARGED&paymentStatus%5B%5D=PARTIALLY_CHARGED"`;
+exports[`Filtering URL params should not be empty if active filters are present 2`] = `"clickAndCollect=false&preorder=false&customer=email%40example.com&createdFrom=2019-12-09&createdTo=2019-12-38&status%5B%5D=FULFILLED&status%5B%5D=PARTIALLY_FULFILLED&paymentStatus%5B%5D=FULLY_CHARGED&paymentStatus%5B%5D=PARTIALLY_CHARGED"`;

src/orders/views/OrderList/filters.test.ts

@@ -41,6 +41,14 @@ describe("Filtering URL params", () => {
   const intl = createIntl(config);
 
   const filters = createFilterStructure(intl, {
+    preorder: {
+      active: false,
+      value: false
+    },
+    clickAndCollect: {
+      active: false,
+      value: false
+    },
     channel: {
       active: false,
       value: [

src/orders/views/OrderList/filters.ts

@@ -1,5 +1,5 @@
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
-import { findInEnum, findValueInEnum } from "@saleor/misc";
+import { findInEnum, findValueInEnum, parseBoolean } from "@saleor/misc";
 import {
   OrderFilterKeys,
   OrderListFilterOpts
@@ -35,6 +35,14 @@ export function getFilterOpts(
   channels: MultiAutocompleteChoiceType[]
 ): OrderListFilterOpts {
   return {
+    clickAndCollect: {
+      active: params.clickAndCollect !== undefined,
+      value: parseBoolean(params.clickAndCollect, true)
+    },
+    preorder: {
+      active: params.preorder !== undefined,
+      value: parseBoolean(params.preorder, true)
+    },
     channel: channels
       ? {
           active: params?.channel !== undefined,
@@ -89,7 +97,15 @@ export function getFilterVariables(
     ),
     paymentStatus: params?.paymentStatus?.map(paymentStatus =>
       findInEnum(paymentStatus, PaymentChargeStatusEnum)
-    )
+    ),
+    isClickAndCollect:
+      params.clickAndCollect !== undefined
+        ? parseBoolean(params.clickAndCollect, false)
+        : undefined,
+    isPreorder:
+      params.preorder !== undefined
+        ? parseBoolean(params.preorder, false)
+        : undefined
   };
 }
 
@@ -99,6 +115,14 @@ export function getFilterQueryParam(
   const { name } = filter;
 
   switch (name) {
+    case OrderFilterKeys.clickAndCollect:
+      return getSingleValueQueryParam(
+        filter,
+        OrderListUrlFiltersEnum.clickAndCollect
+      );
+    case OrderFilterKeys.preorder:
+      return getSingleValueQueryParam(filter, OrderListUrlFiltersEnum.preorder);
+
     case OrderFilterKeys.created:
       return getMinMaxQueryParam(
         filter,

src/storybook/stories/orders/OrderListPage.tsx

@@ -26,6 +26,14 @@ const props: OrderListPageProps = {
   ...filterPageProps,
   ...sortPageProps,
   filterOpts: {
+    preorder: {
+      active: false,
+      value: false
+    },
+    clickAndCollect: {
+      active: false,
+      value: false
+    },
     channel: {
       active: false,
       value: [

src/types/globalTypes.ts

@@ -2321,6 +2321,8 @@ export interface OrderFilterInput {
   search?: string | null;
   metadata?: (MetadataFilter | null)[] | null;
   channels?: (string | null)[] | null;
+  isClickAndCollect?: boolean | null;
+  isPreorder?: boolean | null;
 }
 
 export interface OrderFulfillInput {