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

.featureFlags/draft_orders_filters.md

@@ -0,0 +1,11 @@
+---
+name: draft_orders_filters
+displayName: Draft orders filtering
+enabled: true
+payload: "default"
+visible: true
+---
+
+![new filters](./images/draft-orders-filters.png)
+Experience the new look and enhanced abilities of new fitering mechanism.
+Easily combine any criteria you want, and quickly browse their values.

.featureFlags/generated.tsx

@@ -1,13 +1,18 @@
 // @ts-nocheck
 
-import V24493 from "./images/discounts-list.png"
-import J49162 from "./images/improved_refunds.png"
+import Z20421 from "./images/discounts-list.png"
+import B67283 from "./images/draft-orders-filters.png"
+import P58973 from "./images/improved_refunds.png"
 
-const discounts_rules = () => (<><p><img src={V24493} alt="Discount rules"/></p>
+const discounts_rules = () => (<><p><img src={Z20421} alt="Discount rules"/></p>
 <p>Apply the new discounts rules to narrow your promotions audience.
 Set up conditions and channels that must be fulfilled to apply defined reward.</p>
 </>)
-const improved_refunds = () => (<><p><img src={J49162} alt="Improved refunds"/></p>
+const draft_orders_filters = () => (<><p><img src={B67283} alt="new filters"/>
+Experience the new look and enhanced abilities of new fitering mechanism.
+Easily combine any criteria you want, and quickly browse their values.</p>
+</>)
+const improved_refunds = () => (<><p><img src={P58973} alt="Improved refunds"/></p>
 <h3 id="enable-the-enhanced-refund-feature-to-streamline-your-refund-process">Enable the enhanced refund feature to streamline your refund process:</h3>
 <ul>
 <li><p>• Choose between automatic calculations based on selected items or enter refund amounts directly for overcharges and custom adjustments.</p>
@@ -27,6 +32,15 @@ export const AVAILABLE_FLAGS = [{
     enabled: true,
     payload: "default",
   }
+},{
+  name: "draft_orders_filters",
+  displayName: "Draft orders filtering",
+  component: draft_orders_filters,
+  visible: true,
+  content: {
+    enabled: true,
+    payload: "default",
+  }
 },{
   name: "improved_refunds",
   displayName: "Improved refunds",

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

@@ -31,6 +31,9 @@ export interface InitialState {
   giftCard: ItemOption[];
 }
 
+const isDateField = (name: string) =>
+  ["created", "updatedAt", "startDate", "endDate"].includes(name);
+
 export class InitialStateResponse implements InitialState {
   constructor(
     public category: ItemOption[] = [],
@@ -58,6 +61,10 @@ export class InitialStateResponse implements InitialState {
       return this.attribute[token.name].choices.filter(({ value }) => token.value.includes(value));
     }
 
+    if (isDateField(token.name)) {
+      return token.value;
+    }
+
     if (token.isAttribute()) {
       const attr = this.attribute[token.name];
 

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.test.ts

@@ -2,7 +2,11 @@ import { Condition, FilterContainer, FilterElement } from "./FilterElement";
 import { ConditionOptions } from "./FilterElement/ConditionOptions";
 import { ConditionSelected } from "./FilterElement/ConditionSelected";
 import { ExpressionValue } from "./FilterElement/FilterElement";
-import { createProductQueryVariables } from "./queryVariables";
+import {
+  creatDraftOrderQueryVariables,
+  createProductQueryVariables,
+  mapStaticQueryPartToLegacyVariables,
+} from "./queryVariables";
 
 describe("ConditionalFilter / queryVariables / createProductQueryVariables", () => {
   it("should return empty variables for empty filters", () => {
@@ -75,3 +79,108 @@ describe("ConditionalFilter / queryVariables / createProductQueryVariables", ()
     expect(result).toEqual(expectedOutput);
   });
 });
+
+describe("ConditionalFilter / queryVariables / creatDraftOrderQueryVariables", () => {
+  it("should return empty variables for empty filters", () => {
+    // Arrange
+    const filters: FilterContainer = [];
+    const expectedOutput = {};
+    // Act
+    const result = creatDraftOrderQueryVariables(filters);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+
+  it("should create variables with selected filters", () => {
+    // Arrange
+    const filters: FilterContainer = [
+      new FilterElement(
+        new ExpressionValue("customer", "Customer", "customer"),
+        new Condition(
+          ConditionOptions.fromStaticElementName("customer"),
+          new ConditionSelected(
+            { label: "customer1", slug: "customer1", value: "value1" },
+            { type: "text", label: "is", value: "input-1" },
+            [],
+            false,
+          ),
+          false,
+        ),
+        false,
+      ),
+      "AND",
+      new FilterElement(
+        new ExpressionValue("created", "Created", "created"),
+        new Condition(
+          ConditionOptions.fromStaticElementName("customer"),
+          new ConditionSelected(
+            ["2025-02-01", "2025-02-05"],
+            { type: "date.range", label: "between", value: "input-3" },
+            [],
+            false,
+          ),
+          false,
+        ),
+        false,
+      ),
+    ];
+    const expectedOutput = {
+      created: { gte: "2025-02-01", lte: "2025-02-05" },
+      customer: "value1",
+    };
+    // Act
+    const result = creatDraftOrderQueryVariables(filters);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+});
+
+describe("ConditionalFilter / queryVariables / mapStaticQueryPartToLegacyVariables", () => {
+  it("should return queryPart if it is not an object", () => {
+    // Arrange
+    const queryPart = "queryPart";
+    const expectedOutput = "queryPart";
+
+    // Act
+    const result = mapStaticQueryPartToLegacyVariables(queryPart);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+
+  it("should transform range input to legacy format", () => {
+    // Arrange
+    const queryPart = { range: { lte: "value" } };
+    const expectedOutput = { lte: "value" };
+
+    // Act
+    const result = mapStaticQueryPartToLegacyVariables(queryPart);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+
+  it("should transform eq input to legacy format", () => {
+    // Arrange
+    const queryPart = { eq: "value" };
+    const expectedOutput = "value";
+    // Act
+    const result = mapStaticQueryPartToLegacyVariables(queryPart);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+
+  it("should transform oneOf input to legacy format", () => {
+    // Arrange
+    const queryPart = { oneOf: ["value1", "value2"] };
+    const expectedOutput = ["value1", "value2"];
+    // Act
+    const result = mapStaticQueryPartToLegacyVariables(queryPart);
+
+    // Assert
+    expect(result).toEqual(expectedOutput);
+  });
+});

src/components/ConditionalFilter/queryVariables.ts

@@ -5,6 +5,7 @@ import {
   DateTimeRangeInput,
   DecimalFilterInput,
   GlobalIdFilterInput,
+  OrderDraftFilterInput,
   ProductWhereInput,
   PromotionWhereInput,
 } from "@dashboard/graphql";
@@ -57,6 +58,27 @@ const createStaticQueryPart = (selected: ConditionSelected): StaticQueryPart =>
 
   return value;
 };
+
+export 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 +92,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 +103,7 @@ const getQueryPartByType = (value: string, type: string, what: "lte" | "gte") =>
       return { valuesRange: { [what]: parseFloat(value) } };
   }
 };
+
 const createAttributeQueryPart = (
   attributeSlug: string,
   selected: ConditionSelected,
@@ -199,3 +223,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);
+};