Introduce new filters to draft orders

.changeset/silver-items-unite.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+List of draft orders now use new filters

locale/defaultMessages.json

@@ -7154,10 +7154,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?"
@@ -9188,10 +9184,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/API/InitialStateResponse.ts

@@ -67,6 +67,10 @@ export class InitialStateResponse implements InitialState {
     }
 
     if (!token.isLoadable()) {
+      if (Array.isArray(token.value)) {
+        return token.value;
+      }
+
       return [token.value] as string[];
     }
 

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";
@@ -19,7 +20,12 @@ const createStaticQueryPart = (selected: ConditionSelected): StaticQueryPart =>
   if (!selected.conditionValue) return "";
 
   const { label } = selected.conditionValue;
-  const { value } = selected;
+  const { value: selectedValue } = selected;
+
+  const value =
+    Array.isArray(selectedValue) && !isTuple(selectedValue) && !isItemOptionArray(selectedValue)
+      ? selectedValue[0]
+      : selectedValue;
 
   if (label === "lower") {
     return { range: { lte: value } };
@@ -57,6 +63,27 @@ const createStaticQueryPart = (selected: ConditionSelected): StaticQueryPart =>
 
   return value;
 };
+
+const mapStaticQueryPartToLegacyVariables = (queryPart: StaticQueryPart) => {
+  if (typeof queryPart !== "object") {
+    return queryPart;
+  }
+
+  if ("range" in queryPart) {
+    return queryPart.range;
+  }
+
+  if ("eq" in queryPart) {
+    return queryPart.eq;
+  }
+
+  if ("oneOf" in queryPart) {
+    return queryPart.oneOf;
+  }
+
+  return queryPart;
+};
+
 const getRangeQueryPartByType = (value: [string, string], type: string) => {
   const [gte, lte] = value;
 
@@ -70,6 +97,7 @@ const getRangeQueryPartByType = (value: [string, string], type: string) => {
       return { valuesRange: { lte: parseFloat(lte), gte: parseFloat(gte) } };
   }
 };
+
 const getQueryPartByType = (value: string, type: string, what: "lte" | "gte") => {
   switch (type) {
     case "datetime":
@@ -80,6 +108,7 @@ const getQueryPartByType = (value: string, type: string, what: "lte" | "gte") =>
       return { valuesRange: { [what]: parseFloat(value) } };
   }
 };
+
 const createAttributeQueryPart = (
   attributeSlug: string,
   selected: ConditionSelected,
@@ -199,3 +228,15 @@ 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;
+
+    p[c.value.value as keyof OrderDraftFilterInput] = mapStaticQueryPartToLegacyVariables(
+      createStaticQueryPart(c.condition.selected),
+    );
+
+    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;