diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx index 074952648..d0bb14c1d 100644 --- a/src/products/components/ProductListPage/ProductListPage.tsx +++ b/src/products/components/ProductListPage/ProductListPage.tsx @@ -24,13 +24,13 @@ import { SortPage } from "@saleor/types"; import FilterBar from "@saleor/components/FilterBar"; -import { ProductListFilterOpts } from "@saleor/products/types"; import { ProductListUrlSortField } from "../../urls"; +import ProductList from "../ProductList"; import { createFilterStructure, - ProductFilterKeys -} from "../../views/ProductList/filters"; -import ProductList from "../ProductList"; + ProductFilterKeys, + ProductListFilterOpts +} from "./filters"; export interface ProductListPageProps extends PageListProps, diff --git a/src/products/components/ProductListPage/filters.ts b/src/products/components/ProductListPage/filters.ts new file mode 100644 index 000000000..3f65c2211 --- /dev/null +++ b/src/products/components/ProductListPage/filters.ts @@ -0,0 +1,110 @@ +import { defineMessages, IntlShape } from "react-intl"; + +import { FilterOpts, MinMax } from "@saleor/types"; +import { StockAvailability } from "@saleor/types/globalTypes"; +import { + createOptionsField, + createPriceField +} from "@saleor/utils/filters/fields"; +import { IFilter } from "@saleor/components/Filter"; + +export enum ProductFilterKeys { + status = "status", + price = "price", + stock = "stock" +} + +export interface ProductListFilterOpts { + price: FilterOpts; + status: FilterOpts; + stockStatus: FilterOpts; +} + +export enum ProductStatus { + PUBLISHED = "published", + HIDDEN = "hidden" +} + +const messages = defineMessages({ + available: { + defaultMessage: "Available", + description: "product status" + }, + hidden: { + defaultMessage: "Hidden", + description: "product is hidden" + }, + outOfStock: { + defaultMessage: "Out Of Stock", + description: "product status" + }, + price: { + defaultMessage: "Price" + }, + quantity: { + defaultMessage: "Stock quantity", + description: "product" + }, + visibility: { + defaultMessage: "Visibility", + description: "product visibility" + }, + visible: { + defaultMessage: "Visible", + description: "product is visible" + } +}); + +export function createFilterStructure( + intl: IntlShape, + opts: ProductListFilterOpts +): IFilter { + return [ + { + ...createOptionsField( + ProductFilterKeys.status, + intl.formatMessage(messages.visibility), + [opts.status.value], + false, + [ + { + label: intl.formatMessage(messages.visible), + value: ProductStatus.PUBLISHED + }, + { + label: intl.formatMessage(messages.hidden), + value: ProductStatus.HIDDEN + } + ] + ), + active: opts.status.active + }, + { + ...createOptionsField( + ProductFilterKeys.stock, + intl.formatMessage(messages.quantity), + [opts.stockStatus.value], + false, + [ + { + label: intl.formatMessage(messages.available), + value: StockAvailability.IN_STOCK + }, + { + label: intl.formatMessage(messages.outOfStock), + value: StockAvailability.OUT_OF_STOCK + } + ] + ), + active: opts.stockStatus.active + }, + { + ...createPriceField( + ProductFilterKeys.price, + intl.formatMessage(messages.price), + opts.price.value + ), + active: opts.price.active + } + ]; +} diff --git a/src/products/components/ProductListPage/index.ts b/src/products/components/ProductListPage/index.ts index a5e54aa30..ceb0354d3 100644 --- a/src/products/components/ProductListPage/index.ts +++ b/src/products/components/ProductListPage/index.ts @@ -1,2 +1,3 @@ export { default } from "./ProductListPage"; export * from "./ProductListPage"; +export * from "./filters"; diff --git a/src/products/types.ts b/src/products/types.ts deleted file mode 100644 index f6dfd9396..000000000 --- a/src/products/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { FilterOpts, MinMax } from "@saleor/types"; -import { StockAvailability } from "@saleor/types/globalTypes"; - -export enum ProductStatus { - PUBLISHED = "published", - HIDDEN = "hidden" -} - -export interface ProductListFilterOpts { - price: FilterOpts; - status: FilterOpts; - stockStatus: FilterOpts; -} diff --git a/src/products/views/ProductList/filters.ts b/src/products/views/ProductList/filters.ts index e3fd579ed..476208e0d 100644 --- a/src/products/views/ProductList/filters.ts +++ b/src/products/views/ProductList/filters.ts @@ -1,12 +1,10 @@ -import { IntlShape } from "react-intl"; - import { maybe, findValueInEnum } from "@saleor/misc"; import { - createOptionsField, - createPriceField -} from "@saleor/utils/filters/fields"; -import { ProductStatus, ProductListFilterOpts } from "@saleor/products/types"; -import { IFilterElement, IFilter } from "../../../components/Filter"; + ProductFilterKeys, + ProductListFilterOpts, + ProductStatus +} from "@saleor/products/components/ProductListPage"; +import { IFilterElement } from "../../../components/Filter"; import { ProductFilterInput, StockAvailability @@ -20,16 +18,9 @@ import { ProductListUrlFiltersEnum, ProductListUrlQueryParams } from "../../urls"; -import messages from "./messages"; export const PRODUCT_FILTERS_KEY = "productFilters"; -export enum ProductFilterKeys { - status = "status", - price = "price", - stock = "stock" -} - export function getFilterOpts( params: ProductListUrlFilters ): ProductListFilterOpts { @@ -56,60 +47,6 @@ export function getFilterOpts( }; } -export function createFilterStructure( - intl: IntlShape, - opts: ProductListFilterOpts -): IFilter { - return [ - { - ...createOptionsField( - ProductFilterKeys.status, - intl.formatMessage(messages.visibility), - [opts.status.value], - false, - [ - { - label: intl.formatMessage(messages.visible), - value: ProductStatus.PUBLISHED - }, - { - label: intl.formatMessage(messages.hidden), - value: ProductStatus.HIDDEN - } - ] - ), - active: opts.status.active - }, - { - ...createOptionsField( - ProductFilterKeys.stock, - intl.formatMessage(messages.quantity), - [opts.stockStatus.value], - false, - [ - { - label: intl.formatMessage(messages.available), - value: StockAvailability.IN_STOCK - }, - { - label: intl.formatMessage(messages.outOfStock), - value: StockAvailability.OUT_OF_STOCK - } - ] - ), - active: opts.stockStatus.active - }, - { - ...createPriceField( - ProductFilterKeys.price, - intl.formatMessage(messages.price), - opts.price.value - ), - active: opts.price.active - } - ]; -} - export function getFilterVariables( params: ProductListUrlFilters ): ProductFilterInput { diff --git a/src/products/views/ProductList/messages.ts b/src/products/views/ProductList/messages.ts deleted file mode 100644 index 236534926..000000000 --- a/src/products/views/ProductList/messages.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { defineMessages } from "react-intl"; - -const messages = defineMessages({ - available: { - defaultMessage: "Available", - description: "product status" - }, - hidden: { - defaultMessage: "Hidden", - description: "product is hidden" - }, - outOfStock: { - defaultMessage: "Out Of Stock", - description: "product status" - }, - price: { - defaultMessage: "Price" - }, - quantity: { - defaultMessage: "Stock quantity", - description: "product" - }, - visibility: { - defaultMessage: "Visibility", - description: "product visibility" - }, - visible: { - defaultMessage: "Visible", - description: "product is visible" - } -}); - -export default messages; diff --git a/src/storybook/stories/products/ProductListPage.tsx b/src/storybook/stories/products/ProductListPage.tsx index 7af840523..4e6cc84fb 100644 --- a/src/storybook/stories/products/ProductListPage.tsx +++ b/src/storybook/stories/products/ProductListPage.tsx @@ -7,7 +7,6 @@ import { products as productListFixture } from "@saleor/products/fixtures"; import { ProductListUrlSortField } from "@saleor/products/urls"; import { attributes } from "@saleor/productTypes/fixtures"; import { ListViews } from "@saleor/types"; -import { ProductStatus } from "@saleor/products/types"; import { StockAvailability } from "@saleor/types/globalTypes"; import { fetchMoreProps, @@ -17,7 +16,8 @@ import { sortPageProps } from "../../../fixtures"; import ProductListPage, { - ProductListPageProps + ProductListPageProps, + ProductStatus } from "../../../products/components/ProductListPage"; import Decorator from "../../Decorator";