Introduce filers to draft orders

locale/defaultMessages.json

@@ -7151,10 +7151,6 @@
     "context": "button",
     "string": "Apply"
   },
-  "iEeIhY": {
-    "context": "draft order",
-    "string": "Customer"
-  },
   "iFM716": {
     "context": "grant refund, refund card subtitle",
     "string": "How much money do you want to return to the customer for the order?"
@@ -9182,10 +9178,6 @@
   "vuKrlW": {
     "string": "Stock"
   },
-  "vwMO04": {
-    "context": "draft order",
-    "string": "Created"
-  },
   "vz3yxp": {
     "string": "Channels permissions"
   },

src/components/ConditionalFilter/API/DraftOrderFilterAPIProvider.tsx

@@ -0,0 +1,15 @@
+import { FilterAPIProvider } from "@dashboard/components/ConditionalFilter/API/FilterAPIProvider";
+
+export const useDraftOrderFilterAPIProvider = (): FilterAPIProvider => {
+  const fetchRightOptions = async () => {
+    return [];
+  };
+  const fetchLeftOptions = async () => {
+    return [];
+  };
+
+  return {
+    fetchRightOptions,
+    fetchLeftOptions,
+  };
+};

src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts

@@ -18,7 +18,7 @@ import { prepareStructure } from "./utils";
 
 export const useUrlValueProvider = (
   locationSearch: string,
-  type: "product" | "order" | "discount",
+  type: "product" | "draft-order" | "order" | "discount",
   initialState?: InitialAPIState | InitialOrderAPIState,
 ): FilterValueProvider => {
   const router = useRouter();

src/components/ConditionalFilter/constants.ts

@@ -273,10 +273,26 @@ export const STATIC_ORDER_OPTIONS: LeftOperand[] = [
   },
 ];
 
+export const STATIC_DRAFT_ORDER_OPTIONS: LeftOperand[] = [
+  {
+    value: "customer",
+    label: "Customer",
+    type: "customer",
+    slug: "customer",
+  },
+  {
+    value: "created",
+    label: "Created",
+    type: "created",
+    slug: "created",
+  },
+];
+
 export const STATIC_OPTIONS = [
   ...STATIC_PRODUCT_OPTIONS,
   ...STATIC_DISCOUNT_OPTIONS,
   ...STATIC_ORDER_OPTIONS,
+  ...STATIC_DRAFT_ORDER_OPTIONS,
 ];
 
 export const ATTRIBUTE_INPUT_TYPE_CONDITIONS = {

src/components/ConditionalFilter/context/provider.tsx

@@ -1,3 +1,4 @@
+import { useDraftOrderFilterAPIProvider } from "@dashboard/components/ConditionalFilter/API/DraftOrderFilterAPIProvider";
 import React, { FC } from "react";
 
 import { useDiscountFilterAPIProvider } from "../API/DiscountFiltersAPIProvider";
@@ -7,6 +8,7 @@ import { useOrderFilterAPIProvider } from "../API/OrderFilterAPIProvider";
 import { useProductFilterAPIProvider } from "../API/ProductFilterAPIProvider";
 import {
   STATIC_DISCOUNT_OPTIONS,
+  STATIC_DRAFT_ORDER_OPTIONS,
   STATIC_ORDER_OPTIONS,
   STATIC_PRODUCT_OPTIONS,
 } from "../constants";
@@ -90,3 +92,28 @@ export const ConditionalOrderFilterProvider: FC<{
     </ConditionalFilterContext.Provider>
   );
 };
+
+export const ConditionalDraftOrderFilterProvider: FC<{
+  locationSearch: string;
+}> = ({ children, locationSearch }) => {
+  const apiProvider = useDraftOrderFilterAPIProvider();
+
+  const valueProvider = useUrlValueProvider(locationSearch, "draft-order");
+  const leftOperandsProvider = useFilterLeftOperandsProvider(STATIC_DRAFT_ORDER_OPTIONS);
+  const containerState = useContainerState(valueProvider);
+  const filterWindow = useFilterWindow();
+
+  return (
+    <ConditionalFilterContext.Provider
+      value={{
+        apiProvider,
+        valueProvider,
+        leftOperandsProvider,
+        containerState,
+        filterWindow,
+      }}
+    >
+      {children}
+    </ConditionalFilterContext.Provider>
+  );
+};

src/components/ConditionalFilter/queryVariables.ts

@@ -5,6 +5,7 @@ import {
   DateTimeRangeInput,
   DecimalFilterInput,
   GlobalIdFilterInput,
+  OrderDraftFilterInput,
   ProductWhereInput,
   PromotionWhereInput,
 } from "@dashboard/graphql";
@@ -14,6 +15,7 @@ import { ConditionSelected } from "./FilterElement/ConditionSelected";
 import { isItemOption, isItemOptionArray, isTuple } from "./FilterElement/ConditionValue";
 
 type StaticQueryPart = string | GlobalIdFilterInput | boolean | DecimalFilterInput;
+type StaticQueryPartForOldAPIFilters = string | DateRangeInput | string[] | boolean;
 
 const createStaticQueryPart = (selected: ConditionSelected): StaticQueryPart => {
   if (!selected.conditionValue) return "";
@@ -57,6 +59,51 @@ const createStaticQueryPart = (selected: ConditionSelected): StaticQueryPart =>
 
   return value;
 };
+const createStaticQueryPartForOldAPIFilters = (
+  selected: ConditionSelected,
+): StaticQueryPartForOldAPIFilters => {
+  if (!selected.conditionValue) return "";
+
+  const { label } = selected.conditionValue;
+  const { value: selectedValue } = selected;
+  const value = Array.isArray(selectedValue) ? selectedValue[0] : selectedValue;
+
+  if (label === "lower") {
+    return { lte: value };
+  }
+
+  if (label === "greater") {
+    return { gte: value };
+  }
+
+  if (isTuple(value) && label === "between") {
+    const [gte, lte] = value;
+
+    return { lte, gte };
+  }
+
+  if (isItemOption(value) && ["true", "false"].includes(value.value)) {
+    return value.value === "true";
+  }
+
+  if (isItemOption(value)) {
+    return value.value;
+  }
+
+  if (isItemOptionArray(value)) {
+    return value.map(x => x.value);
+  }
+
+  if (typeof value === "string") {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  return value;
+};
 const getRangeQueryPartByType = (value: [string, string], type: string) => {
   const [gte, lte] = value;
 
@@ -199,3 +246,19 @@ export const createOrderQueryVariables = (value: FilterContainer) => {
     return p;
   }, {} as OrderQueryVars);
 };
+
+export const creatDraftOrderQueryVariables = (value: FilterContainer): OrderDraftFilterInput => {
+  return value.reduce((p, c) => {
+    if (typeof c === "string" || Array.isArray(c)) return p;
+
+    if (c.isStatic()) {
+      p[c.value.value as keyof OrderDraftFilterInput] = createStaticQueryPartForOldAPIFilters(
+        c.condition.selected,
+      ) as any;
+
+      return p;
+    }
+
+    return p;
+  }, {} as OrderDraftFilterInput);
+};

src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx

@@ -4,7 +4,13 @@ import { BulkDeleteButton } from "@dashboard/components/BulkDeleteButton";
 import { DashboardCard } from "@dashboard/components/Card";
 import { OrderDraftListQuery, RefreshLimitsQuery } from "@dashboard/graphql";
 import { OrderDraftListUrlSortField } from "@dashboard/orders/urls";
-import { FilterPagePropsWithPresets, PageListProps, RelayToFlat, SortPage } from "@dashboard/types";
+import {
+  FilterPresetsProps,
+  PageListProps,
+  RelayToFlat,
+  SearchPageProps,
+  SortPage,
+} from "@dashboard/types";
 import { isLimitReached } from "@dashboard/utils/limits";
 import { Box } from "@saleor/macaw-ui-next";
 import React, { useState } from "react";
@@ -13,11 +19,11 @@ import { useIntl } from "react-intl";
 import { OrderDraftListDatagrid } from "../OrderDraftListDatagrid";
 import { OrderDraftListHeader } from "../OrderDraftListHeader/OrderDraftListHeader";
 import OrderLimitReached from "../OrderLimitReached";
-import { createFilterStructure, OrderDraftFilterKeys, OrderDraftListFilterOpts } from "./filters";
 
 export interface OrderDraftListPageProps
   extends PageListProps,
-    FilterPagePropsWithPresets<OrderDraftFilterKeys, OrderDraftListFilterOpts>,
+    SearchPageProps,
+    FilterPresetsProps,
     SortPage<OrderDraftListUrlSortField> {
   limits: RefreshLimitsQuery["shop"]["limits"];
   orders: RelayToFlat<OrderDraftListQuery["draftOrders"]>;
@@ -31,12 +37,10 @@ export interface OrderDraftListPageProps
 const OrderDraftListPage: React.FC<OrderDraftListPageProps> = ({
   selectedFilterPreset,
   disabled,
-  filterOpts,
   initialSearch,
   limits,
   onAdd,
   onFilterPresetsAll,
-  onFilterChange,
   onSearchChange,
   onFilterPresetChange,
   onFilterPresetDelete,
@@ -45,14 +49,11 @@ const OrderDraftListPage: React.FC<OrderDraftListPageProps> = ({
   filterPresets,
   hasPresetsChanged,
   onDraftOrdersDelete,
-  onFilterAttributeFocus,
-  currencySymbol,
   selectedOrderDraftIds,
   ...listProps
 }) => {
   const intl = useIntl();
   const [isFilterPresetOpen, setFilterPresetOpen] = useState(false);
-  const filterStructure = createFilterStructure(intl, filterOpts);
   const limitsReached = isLimitReached(limits, "orders");
 
   return (
@@ -84,12 +85,9 @@ const OrderDraftListPage: React.FC<OrderDraftListPageProps> = ({
           justifyContent="space-between"
         >
           <ListFilters
-            currencySymbol={currencySymbol}
+            type="expression-filter"
             initialSearch={initialSearch}
-            onFilterChange={onFilterChange}
-            onFilterAttributeFocus={onFilterAttributeFocus}
             onSearchChange={onSearchChange}
-            filterStructure={filterStructure}
             searchPlaceholder={intl.formatMessage({
               id: "IzECoP",
               defaultMessage: "Search draft orders...",

src/orders/components/OrderDraftListPage/index.ts

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

src/orders/index.tsx

@@ -1,4 +1,7 @@
-import { ConditionalOrderFilterProvider } from "@dashboard/components/ConditionalFilter";
+import {
+  ConditionalDraftOrderFilterProvider,
+  ConditionalOrderFilterProvider,
+} from "@dashboard/components/ConditionalFilter";
 import { Route } from "@dashboard/components/Router";
 import { sectionNames } from "@dashboard/intl";
 import { asSortParams } from "@dashboard/utils/sort";
@@ -71,7 +74,11 @@ const OrderDraftList: React.FC<RouteComponentProps<any>> = ({ location }) => {
     false,
   );
 
-  return <OrderDraftListComponent params={params} />;
+  return (
+    <ConditionalDraftOrderFilterProvider locationSearch={location.search}>
+      <OrderDraftListComponent params={params} />
+    </ConditionalDraftOrderFilterProvider>
+  );
 };
 const OrderDetails: React.FC<RouteComponentProps<any>> = ({ location, match }) => {
   const qs = parseQs(location.search.substr(1)) as any;