Separate visual and app layer in orders

src/orders/components/OrderListPage/OrderListPage.tsx

@@ -14,14 +14,14 @@ import {
   SortPage
 } from "@saleor/types";
 import { OrderListUrlSortField } from "@saleor/orders/urls";
-import {
-  OrderFilterKeys,
-  createFilterStructure
-} from "@saleor/orders/views/OrderList/filters";
 import FilterBar from "@saleor/components/FilterBar";
 import { OrderList_orders_edges_node } from "../../types/OrderList";
 import OrderList from "../OrderList";
-import { OrderListFilterOpts } from "../../types";
+import {
+  createFilterStructure,
+  OrderListFilterOpts,
+  OrderFilterKeys
+} from "./filters";
 
 export interface OrderListPageProps
   extends PageListProps,

src/orders/components/OrderListPage/filters.ts

@@ -0,0 +1,71 @@
+import { defineMessages, IntlShape } from "react-intl";
+
+import { FilterOpts, MinMax } from "@saleor/types";
+import { OrderStatusFilter } from "@saleor/types/globalTypes";
+import {
+  createDateField,
+  createOptionsField
+} from "@saleor/utils/filters/fields";
+import { IFilter } from "@saleor/components/Filter";
+import { orderStatusMessages } from "@saleor/misc";
+import { commonMessages } from "@saleor/intl";
+
+export enum OrderFilterKeys {
+  created = "created",
+  status = "status"
+}
+
+export interface OrderListFilterOpts {
+  created: FilterOpts<MinMax>;
+  status: FilterOpts<OrderStatusFilter[]>;
+}
+
+const messages = defineMessages({
+  placed: {
+    defaultMessage: "Placed",
+    description: "order"
+  }
+});
+
+export function createFilterStructure(
+  intl: IntlShape,
+  opts: OrderListFilterOpts
+): IFilter<OrderFilterKeys> {
+  return [
+    {
+      ...createDateField(
+        OrderFilterKeys.created,
+        intl.formatMessage(messages.placed),
+        opts.created.value
+      ),
+      active: opts.created.active
+    },
+    {
+      ...createOptionsField(
+        OrderFilterKeys.status,
+        intl.formatMessage(commonMessages.status),
+        opts.status.value,
+        true,
+        [
+          {
+            label: intl.formatMessage(orderStatusMessages.cancelled),
+            value: OrderStatusFilter.CANCELED
+          },
+          {
+            label: intl.formatMessage(orderStatusMessages.fulfilled),
+            value: OrderStatusFilter.FULFILLED
+          },
+          {
+            label: intl.formatMessage(orderStatusMessages.partiallyFulfilled),
+            value: OrderStatusFilter.PARTIALLY_FULFILLED
+          },
+          {
+            label: intl.formatMessage(orderStatusMessages.unfulfilled),
+            value: OrderStatusFilter.UNFULFILLED
+          }
+        ]
+      ),
+      active: opts.status.active
+    }
+  ];
+}

src/orders/types.ts

@@ -1,10 +1,4 @@
 import { FilterOpts, MinMax } from "@saleor/types";
-import { OrderStatusFilter } from "@saleor/types/globalTypes";
-
-export interface OrderListFilterOpts {
-  created: FilterOpts<MinMax>;
-  status: FilterOpts<OrderStatusFilter[]>;
-}
 
 export interface OrderDraftListFilterOpts {
   created: FilterOpts<MinMax>;

src/orders/views/OrderList/filters.ts

@@ -1,16 +1,9 @@
-import { IntlShape } from "react-intl";
+import { findInEnum, maybe, findValueInEnum } from "@saleor/misc";
-
 import {
-  findInEnum,
+  OrderListFilterOpts,
-  maybe,
+  OrderFilterKeys
-  orderStatusMessages,
+} from "@saleor/orders/components/OrderListPage/filters";
-  findValueInEnum
+import { IFilterElement } from "../../../components/Filter";
-} from "@saleor/misc";
-import {
-  createDateField,
-  createOptionsField
-} from "@saleor/utils/filters/fields";
-import { IFilter, IFilterElement } from "../../../components/Filter";
 import {
   OrderFilterInput,
   OrderStatusFilter,
@@ -27,16 +20,9 @@ import {
   OrderListUrlFiltersWithMultipleValuesEnum,
   OrderListUrlQueryParams
 } from "../../urls";
-import { OrderListFilterOpts } from "../../types";
-import messages from "./messages";
 
 export const ORDER_FILTERS_KEY = "orderFilters";
 
-export enum OrderFilterKeys {
-  created = "created",
-  status = "status"
-}
-
 export function getFilterOpts(
   params: OrderListUrlFilters
 ): OrderListFilterOpts {
@@ -69,49 +55,6 @@ export function getFilterOpts(
   };
 }
 
-export function createFilterStructure(
-  intl: IntlShape,
-  opts: OrderListFilterOpts
-): IFilter<OrderFilterKeys> {
-  return [
-    {
-      ...createDateField(
-        OrderFilterKeys.created,
-        intl.formatMessage(messages.placed),
-        opts.created.value
-      ),
-      active: opts.created.active
-    },
-    {
-      ...createOptionsField(
-        OrderFilterKeys.status,
-        intl.formatMessage(messages.status),
-        opts.status.value,
-        true,
-        [
-          {
-            label: intl.formatMessage(orderStatusMessages.cancelled),
-            value: OrderStatusFilter.CANCELED
-          },
-          {
-            label: intl.formatMessage(orderStatusMessages.fulfilled),
-            value: OrderStatusFilter.FULFILLED
-          },
-          {
-            label: intl.formatMessage(orderStatusMessages.partiallyFulfilled),
-            value: OrderStatusFilter.PARTIALLY_FULFILLED
-          },
-          {
-            label: intl.formatMessage(orderStatusMessages.unfulfilled),
-            value: OrderStatusFilter.UNFULFILLED
-          }
-        ]
-      ),
-      active: opts.status.active
-    }
-  ];
-}
-
 export function getFilterVariables(
   params: OrderListUrlFilters
 ): OrderFilterInput {

src/orders/views/OrderList/messages.ts

@@ -1,29 +0,0 @@
-import { defineMessages } from "react-intl";
-
-const messages = defineMessages({
-  fulfilled: {
-    defaultMessage: "Fulfilled",
-    description: "order status"
-  },
-  partiallyFulfilled: {
-    defaultMessage: "Partially Fulfilled",
-    description: "order status"
-  },
-  placed: {
-    defaultMessage: "Placed",
-    description: "order"
-  },
-  readyToCapture: {
-    defaultMessage: "Ready to Capture",
-    description: "order status"
-  },
-  status: {
-    defaultMessage: "Order Status"
-  },
-  unfulfilled: {
-    defaultMessage: "Unfulfilled",
-    description: "order status"
-  }
-});
-
-export default messages;