Separate visual and app layer in vouchers

src/discounts/components/VoucherListPage/VoucherListPage.tsx

@@ -15,13 +15,13 @@ import {
   FilterPageProps
 } from "@saleor/types";
 import { VoucherListUrlSortField } from "@saleor/discounts/urls";
-import {
-  createFilterStructure,
-  VoucherFilterKeys
-} from "@saleor/discounts/views/VoucherList/filter";
-import { VoucherListFilterOpts } from "@saleor/discounts/types";
 import { VoucherList_vouchers_edges_node } from "../../types/VoucherList";
 import VoucherList from "../VoucherList";
+import {
+  VoucherFilterKeys,
+  VoucherListFilterOpts,
+  createFilterStructure
+} from "./filters";
 
 export interface VoucherListPageProps
   extends PageListProps,

src/discounts/components/VoucherListPage/filters.ts

@@ -0,0 +1,132 @@
+import { defineMessages, IntlShape } from "react-intl";
+
+import {
+  createOptionsField,
+  createNumberField,
+  createDateField
+} from "@saleor/utils/filters/fields";
+import {
+  VoucherDiscountType,
+  DiscountStatusEnum,
+  DiscountValueTypeEnum
+} from "@saleor/types/globalTypes";
+import { MinMax, FilterOpts } from "@saleor/types";
+import { IFilter } from "@saleor/components/Filter";
+
+export enum VoucherFilterKeys {
+  saleType = "saleType",
+  started = "started",
+  status = "status",
+  timesUsed = "timesUsed"
+}
+
+export interface VoucherListFilterOpts {
+  saleType: FilterOpts<VoucherDiscountType[]>;
+  started: FilterOpts<MinMax>;
+  status: FilterOpts<DiscountStatusEnum[]>;
+  timesUsed: FilterOpts<MinMax>;
+}
+
+const messages = defineMessages({
+  active: {
+    defaultMessage: "Active",
+    description: "voucher status"
+  },
+  expired: {
+    defaultMessage: "Expired",
+    description: "voucher status"
+  },
+  fixed: {
+    defaultMessage: "Fixed amount",
+    description: "discount type"
+  },
+  percentage: {
+    defaultMessage: "Percentage",
+    description: "discount type"
+  },
+  scheduled: {
+    defaultMessage: "Scheduled",
+    description: "voucher status"
+  },
+  started: {
+    defaultMessage: "Started",
+    description: "voucher start date"
+  },
+  status: {
+    defaultMessage: "Status",
+    description: "voucher status"
+  },
+  timesUsed: {
+    defaultMessage: "Times used",
+    description: "voucher"
+  },
+  type: {
+    defaultMessage: "Discount Type"
+  }
+});
+
+export function createFilterStructure(
+  intl: IntlShape,
+  opts: VoucherListFilterOpts
+): IFilter<VoucherFilterKeys> {
+  return [
+    {
+      ...createDateField(
+        VoucherFilterKeys.started,
+        intl.formatMessage(messages.started),
+        opts.started.value
+      ),
+      active: opts.started.active
+    },
+    {
+      ...createNumberField(
+        VoucherFilterKeys.timesUsed,
+        intl.formatMessage(messages.timesUsed),
+        opts.timesUsed.value
+      ),
+      active: opts.timesUsed.active
+    },
+    {
+      ...createOptionsField(
+        VoucherFilterKeys.status,
+        intl.formatMessage(messages.status),
+        opts.status.value,
+        true,
+        [
+          {
+            label: intl.formatMessage(messages.active),
+            value: DiscountStatusEnum.ACTIVE
+          },
+          {
+            label: intl.formatMessage(messages.expired),
+            value: DiscountStatusEnum.EXPIRED
+          },
+          {
+            label: intl.formatMessage(messages.scheduled),
+            value: DiscountStatusEnum.SCHEDULED
+          }
+        ]
+      ),
+      active: opts.status.active
+    },
+    {
+      ...createOptionsField(
+        VoucherFilterKeys.saleType,
+        intl.formatMessage(messages.type),
+        opts.saleType.value,
+        false,
+        [
+          {
+            label: intl.formatMessage(messages.fixed),
+            value: DiscountValueTypeEnum.FIXED
+          },
+          {
+            label: intl.formatMessage(messages.percentage),
+            value: DiscountValueTypeEnum.PERCENTAGE
+          }
+        ]
+      ),
+      active: opts.saleType.active
+    }
+  ];
+}

src/discounts/components/VoucherListPage/index.ts

@@ -1,2 +1,3 @@
 export { default } from "./VoucherListPage";
 export * from "./VoucherListPage";
+export * from "./filters";

src/discounts/types.ts

@@ -1,16 +1,3 @@
-import {
-  VoucherDiscountType,
-  DiscountStatusEnum
-} from "@saleor/types/globalTypes";
-import { MinMax, FilterOpts } from "@saleor/types";
-
-export interface VoucherListFilterOpts {
-  saleType: FilterOpts<VoucherDiscountType[]>;
-  started: FilterOpts<MinMax>;
-  status: FilterOpts<DiscountStatusEnum[]>;
-  timesUsed: FilterOpts<MinMax>;
-}
-
 export enum RequirementsPicker {
   ORDER = "ORDER",
   ITEM = "ITEM",

src/discounts/views/VoucherList/VoucherList.tsx

@@ -45,7 +45,7 @@ import {
   saveFilterTab,
   getFilterQueryParam,
   getFilterOpts
-} from "./filter";
+} from "./filters";
 import { getSortQueryVariables } from "./sort";
 
 interface VoucherListProps {

src/discounts/views/VoucherList/filters.ts

@@ -1,19 +1,14 @@
-import { IntlShape } from "react-intl";
-
 import {
   VoucherFilterInput,
   DiscountStatusEnum,
-  DiscountValueTypeEnum,
   VoucherDiscountType
 } from "@saleor/types/globalTypes";
 import { maybe, findValueInEnum, joinDateTime } from "@saleor/misc";
-import { VoucherListFilterOpts } from "@saleor/discounts/types";
+import { IFilterElement } from "@saleor/components/Filter";
-import { IFilter, IFilterElement } from "@saleor/components/Filter";
 import {
-  createDateField,
+  VoucherListFilterOpts,
-  createOptionsField,
+  VoucherFilterKeys
-  createNumberField
+} from "@saleor/discounts/components/VoucherListPage";
-} from "@saleor/utils/filters/fields";
 import {
   createFilterTabUtils,
   createFilterUtils,
@@ -24,17 +19,9 @@ import {
   VoucherListUrlFiltersEnum,
   VoucherListUrlQueryParams
 } from "../../urls";
-import messages from "./messages";
 
 export const VOUCHER_FILTERS_KEY = "voucherFilters";
 
-export enum VoucherFilterKeys {
-  saleType = "saleType",
-  started = "started",
-  status = "status",
-  timesUsed = "timesUsed"
-}
-
 export function getFilterOpts(
   params: VoucherListUrlFilters
 ): VoucherListFilterOpts {
@@ -90,72 +77,6 @@ export function getFilterOpts(
   };
 }
 
-export function createFilterStructure(
-  intl: IntlShape,
-  opts: VoucherListFilterOpts
-): IFilter<VoucherFilterKeys> {
-  return [
-    {
-      ...createDateField(
-        VoucherFilterKeys.started,
-        intl.formatMessage(messages.started),
-        opts.started.value
-      ),
-      active: opts.started.active
-    },
-    {
-      ...createNumberField(
-        VoucherFilterKeys.timesUsed,
-        intl.formatMessage(messages.timesUsed),
-        opts.timesUsed.value
-      ),
-      active: opts.timesUsed.active
-    },
-    {
-      ...createOptionsField(
-        VoucherFilterKeys.status,
-        intl.formatMessage(messages.status),
-        opts.status.value,
-        true,
-        [
-          {
-            label: intl.formatMessage(messages.active),
-            value: DiscountStatusEnum.ACTIVE
-          },
-          {
-            label: intl.formatMessage(messages.expired),
-            value: DiscountStatusEnum.EXPIRED
-          },
-          {
-            label: intl.formatMessage(messages.scheduled),
-            value: DiscountStatusEnum.SCHEDULED
-          }
-        ]
-      ),
-      active: opts.status.active
-    },
-    {
-      ...createOptionsField(
-        VoucherFilterKeys.saleType,
-        intl.formatMessage(messages.type),
-        opts.saleType.value,
-        false,
-        [
-          {
-            label: intl.formatMessage(messages.fixed),
-            value: DiscountValueTypeEnum.FIXED
-          },
-          {
-            label: intl.formatMessage(messages.percentage),
-            value: DiscountValueTypeEnum.PERCENTAGE
-          }
-        ]
-      ),
-      active: opts.saleType.active
-    }
-  ];
-}
-
 export function getFilterVariables(
   params: VoucherListUrlFilters
 ): VoucherFilterInput {

src/discounts/views/VoucherList/messages.ts

@@ -1,41 +0,0 @@
-import { defineMessages } from "react-intl";
-
-const messages = defineMessages({
-  active: {
-    defaultMessage: "Active",
-    description: "voucher status"
-  },
-  expired: {
-    defaultMessage: "Expired",
-    description: "voucher status"
-  },
-  fixed: {
-    defaultMessage: "Fixed amount",
-    description: "discount type"
-  },
-  percentage: {
-    defaultMessage: "Percentage",
-    description: "discount type"
-  },
-  scheduled: {
-    defaultMessage: "Scheduled",
-    description: "voucher status"
-  },
-  started: {
-    defaultMessage: "Started",
-    description: "voucher start date"
-  },
-  status: {
-    defaultMessage: "Status",
-    description: "voucher status"
-  },
-  timesUsed: {
-    defaultMessage: "Times used",
-    description: "voucher"
-  },
-  type: {
-    defaultMessage: "Discount Type"
-  }
-});
-
-export default messages;